Halaman

Sabtu, 26 Januari 2019

BELAJAR HTML

  Assalamualikum warahmatullahi wabarakatuh 

 Jadi di Blog ini saya akan membahas belajar HTML  khususnya untuk pemula. Di sini saya juga masih belajar wkwkwk:v


Persiapan :

Sebelum kita mempelajari HTML kita harus membutuhkan aplikasi pendukung dalam mempelajari HTML

  • WEB BROWSER 
WEB BROWSER adalah perangkat utama  yang akan kita gunakan untuk menampilkan halaman web yang pada dasarnya terbuat dari HTML. saya yakin di setiap komputer telah terinstall Web Browser bawaan seperti Internet Explorer( windows), Safari(Mac) dan firefox ( linux ubuntu )
  • TEXT EDITOR 
Untuk membuat halaman web kita harus memerlukan sebuat TEXT EDITOR . TEXT EDITOR yang akan kita gunakan adalah TEXT EDITOR ringan namun penuh dengan fitur yang sangat membantu dalam proses coding ( Penulis Code ) HTML.
  1.  NOTEPAD ++
Tersedia untuk windows NOTEPAD ++  memiliki beragam fitur yang sangat mendukung proggamer .
Anda dapat mendownload NOTEPAD ++di
http://notepad-plus-plus.org
 

Gambar Notepad++ (  STRUKTUR HTML )

 
       2.  SUBLIME TEXT

TEXT EDITOR yang terbilang masih baru ,penampilan simple enak di pandang .SUBLIME TEXT adalah aplikasi berbayar tapi anda dapat mendownload versi demonya ( meskipun versi demo tidak ada batasan dalam penggunaanya ). jadi sanss aja hehehe

 SUBLIME TEXT  tersedia untuk sistem Operasi Windows ,linux, Mac download  di alamat berikut http://www.sublimetext.com/2


Gambar sublime text 2 



     3. VISUAL STUDIO CODE
 Saya sangat menyukai aplikasi ini tampilannya yang sederhana, dan sangat mudah , enak juga kalau ngoding disini


kalian langsung pilih open folder dan buat folder baru misalnya di data D dan buat folder baru belajar HTML




buat saja folder ( contohnya belajar html ) seperti gambar yang ada di samping . habis itu klik select folder

code.visualstudio.com
 keluar seperti gambar yang ada di samping ini . pilih new file  setelah itu ketik saja indek.html . setalah itu ada bisa membuat web dengan HTML.
Saya saranin kalau ngoding pakai aplikasi ini . kalian kepo" ini saja cara menggunakan dan kelebihan visual studio code bisa buka di link  di bawah ini .

https://webdesign.tutsplus.comid/tutorials/visustudiocodemynew-favorite-code-editor--cms-28012
  • APA ITU HTML ? 
HTML adalah bahasa dasar untuk menampilkan halaman WEB pada web browser.
  • STRUKTUR  file HTML
suatu dokumen HTML juga mempunyai aturan dalam penulisannya . sebelum mejadi dokumen HTML yang benar maka kodenya menjadi seperti berikut :
1.<!DOCTYPE HTML>
2.<HTML>
3.                  <head>
4.                                <title>              </title>
5.                 </head > 
6.                  <body> 
7.                               < h1> ini adalah web pertama saya </h1> 
8.                 < /body> 
9.</HTML>

Bingung? sansss saya akan  jelaskan wokehh  :)

<!DOCTYPE HTML>
Adalah Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan pada browser bahwa dokumen yang sedang dibuka adalah dokumen HTML. Tag ini perlu dicantumkan disetiap dokumen HTML yang akan anda buat.
<HTML> … </HTML>
Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag penutup.
<head> … <head>
Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen HTML, Apa yang terdapat di dalam tag ini, tidak akan ditampilkan secara langsung pada web browser.
<title> … </title>
Salah satu contoh informasi yang terdapat di dalam tag Head adalah title. Title akan menampilkan teks pada judul browser atau pada tab browser.
<body> … </body>
Nah, apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini, tag body merupakan tag pembuka dari badan dokumen HTML. Atau bisa di sebut isi WEB 
  • MENGENAL ATRIBUT HTML    

          1. HTML Headings

 

https://www.w3schools.com/html/html_basic.asp

   

        2. HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

https://www.w3schools.com/html/html_basic.asp


        3. HTML Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:


https://www.w3schools.com/html/html_basic.asp 


 

Deskripsi Atribut

  1. alt Menentukan teks alternatif untuk gambar, ketika gambar tidak dapat ditampilkan dinonaktifkan Menentukan bahwa elemen input harus dinonaktifkan
  2.  href Menentukan URL (alamat web) untuk tautan
  3.  id Menentukan id unik untuk suatu elemen
  4.  src Menentukan URL (alamat web) untuk suatu gambar 
  5. style Menentukan gaya CSS sebaris untuk suatu elemen 
  6. title Menentukan informasi tambahan tentang suatu elemen (ditampilkan sebagai tip alat) 

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

HTML Text Formatting


Tag Description
<b> Defines bold text
<em> Defines emphasized text 
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text






HTML Quotation and Citation Elements

Deskripsi Tag
<abbr> Menentukan singkatan atau akronim
<address> Menentukan informasi kontak untuk penulis / pemilik dokumen
<bdo> Menentukan arah teks
<blockquote> Menentukan bagian yang dikutip dari sumber lain
<cite> Menentukan judul sebuah karya
<q> Menentukan kutipan inline pendek

HTML Comments 

Komentar juga bagus untuk debugging HTML, karena Anda dapat mengomentari baris kode HTML, satu per satu, untuk mencari kesalahan:

Example

<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->
kalian bisa belajar di https://www.w3schools.com/html/tryit.asp?filename=tryhtml_comment_out 

Background Color

You can set the background color for HTML elements:
<h1 style="background-color:DodgerBlue;">Hello World</h1>
 
Hello World
  

Text Color

You can set the color of text:

Hello World

Example

<h1 style="color:Tomato;">Hello World</h1>

Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

 Example

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Color Values

Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:

Sama seperti nama warna "Tomat": 
Same as color name "Tomato":
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
Same as color name "Tomato", but 50% transparent:
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Example

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

RGB Value

 Dalam HTML, warna dapat ditentukan sebagai nilai RGB, menggunakan rumus ini:

rgb (merah, hijau, biru)

Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna antara 0 dan 255.

Misalnya, rgb (255, 0, 0) ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.

Untuk menampilkan warna hitam, semua parameter warna harus diatur ke 0, seperti ini: rgb (0, 0, 0).

Untuk menampilkan warna putih, semua parameter warna harus diatur ke 255, seperti ini: rgb (255, 255, 255).

Example

rgb(255, 0, 0)
rgb(0, 0, 255)
rgb(60, 179, 113)
rgb(238, 130, 238)
rgb(255, 165, 0)
rgb(106, 90, 205)

CSS menjelaskan bagaimana elemen-elemen HTML ditampilkan di layar, kertas, atau di media lain.

CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus.

CSS dapat ditambahkan ke elemen HTML dalam 3 cara:

     Inline - dengan menggunakan atribut style dalam elemen HTML
     Internal - dengan me
Eksternal - dengan menggunakan file CSS eksternal
nggunakan elemen <style> di bagian <head>

Internal CSS

An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

 

External CSS

Lembar gaya eksternal digunakan untuk menentukan gaya untuk banyak halaman HTML.

Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs web, dengan mengubah satu file!

Untuk menggunakan style sheet eksternal, tambahkan tautan ke dalamnya di bagian <head> dari halaman HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Tables

Tabel HTML didefinisikan dengan tag <table>.

Setiap baris tabel ditentukan dengan tag <tr>. Header tabel didefinisikan dengan tag <th>. Secara default, judul tabel tebal dan terpusat. Data tabel / sel didefinisikan dengan tag <td>.






HTML Lists

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul> 

</body>

</html>

 disc Mengatur penanda item daftar ke butir (default)
circle Mengatur penanda item daftar ke lingkaran
square Mengatur penanda item daftar ke kotak

none Item daftar tidak akan ditandai

https://www.w3schools.com/html/html_basic.asp


HTML Description Lists

 Daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah.
Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah:





Sampai di sini dulu ya gaesssssss:) jika kalian ingin belajar HTML lebih lanjut dan akan mempelajari css,php kalian bisa membuka di W3SCHOOL kalian bisa belajar di situ , well semoga ilmu ini bisa bermanfaat bagi kita semua , maaf kalau ada kesalahan/ membosankan:v 
di sini saya juga masih belajar jadi belum PRO" banget wakowakaowakao:V 

jika kalian khusus nya orang islam  merasa kesulitan dalam belajar / pusing mau meletus wkwkwk :v ( seperti saya :v)  ingatlah surat ini allah berfirman

فَإِنَّ مَعَ الْعُسْرِ يُسْرًا  O  إِنَّ مَعَ الْعُسْرِ يُسْرًا 

Fainna ma'a al'usri yusran. Inna ma'a al'usri yusran
Artinya:
Karena sesungguhnya sesudah kesulitan itu ada kemudahan, sesungguhnya sesudah kesulitan itu ada kemudahan. (Q.S. Al-Insyirah ayat 5-6) 
dan kata guru saya pak nafilahhh ( alumni STEMBA:)  (apasih thikrit ): reality mu lah wkwkwk )
dan sekarang guru saya di SMKN2 semarang
  • kalau mau jadi orang sukses belajar lah yang paling sulit dari pada belajar yang paling mudah karena apa dari hal yang susah itu nantinya kita bisa mudah dari belajar hal yang paling mudah 
  • karena itu seperti hidup kita kalau mau jadi orang sukses harus usaha keras dulu jadi susah dulu kalau sudah ngerasain susah dan kerja keras insyaallah semua itu pasti berbuah hasil . dan jangan lupa sholat, usaha , berdoa, selalu berfikir positif okayyyyyyyyy:) 
waalaikum salam warah matullahi wabarakatuh 

 


 

 

  • Robbis rohlii shodrii, wa yassirlii amrii, wahlul ‘uqdatam mil lisaani yafqohu qoulii’ [Ya Rabbku, lapangkanlah untukku dadaku, dan mudahkanlah untukku urusanku, dan lepaskanlah kekakuan dari lidahku, supaya mereka mengerti perkataanku” (QS. Thoha: 25-28)

    Baca Selengkapnya : https://rumaysho.com/1425-doa-nabi-musa-minta-dimudahkan-urusan-dan-ucapan.htmlapabila kalian pusing dan bingung atau engga kuat ( kadang saya juga gitu hehehe ) wkwkkwkwk. ingatkah untuk orang islam khususny
                                 

Robbis rohlii shodrii, wa yassirlii amrii, wahlul ‘uqdatam mil lisaani yafqohu qoulii’ [Ya Rabbku, lapangkanlah untukku dadaku, dan mudahkanlah untukku urusanku, dan lepaskanlah kekakuan dari lidahku, supaya mereka mengerti perkataanku” (QS. Thoha: 25-28)

Baca Selengkapnya : https://rumaysho.com/1425-doa-nabi-musa-minta-dimudahkan-urusan-dan-ucapan.html
قَالَ رَبِّ اشْرَحْ لِي صَدْرِي وَيَسِّرْ لِي أَمْرِي  وَاحْلُلْ عُقْدَةً مِنْ لِسَانِي  يَفْقَهُوا قَوْلِي


Baca Selengkapnya : https://rumaysho.com/1425-doa-nabi-musa-minta-dimudahkan-urusan-dan-ucapan.html

Robbis rohlii shodrii, wa yassirlii amrii, wahlul ‘uqdatam mil lisaani yafqohu qoulii’ [Ya Rabbku, lapangkanlah untukku dadaku, dan mudahkanlah untukku urusanku, dan lepaskanlah kekakuan dari lidahku, supaya mereka mengerti perkataanku” (QS. Thoha: 25-28)

Baca Selengkapnya : https://rumaysho.com/1425-doa-nabi-musa-minta-dimudahkan-urusan-dan-ucapan.html










































































































































































































































































































Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)