Bismillah
Sebagaimana pada Pengantar Tutorial HTML, saya sudah jelaskan bahwa HTML atau Hypert Text Markup Language merupakan bahasa markah yang digunkan untuk mendesain halaman web.
Jika teman-teman belum tahu tentang apa itu HTML ?. Silahkan baca terlebih dahulu disini
1. Bentuk Struktur Penulisan HTML
Bahasa HTML memiliki struktur <head> dan <body> yang berada dalam tag <html>. Dalam tag <head> berisi element <Title> sebagai contohnya. Adapun pada <body> berisi elemen elemen yang akan ditampilkan seperti pada gambar diatas. Setiap tag harus ditutup dengan nama tag itu sendiri ditandai dengan tanda (/).
Note : Pada bagian kiri merupakan struktur penulisan HTML,
Pada bagian kanan merupkan tampilan / hasil dari penulisan bahasa HTML
2. Daftar Tag Pada HTML
a. Heading Tags
Tag heading digunakan untuk menuliskan sebuah text dengan beberpa level dari nilai heading tersebut. Penulisan Tag Heading itu sendiri yaitu : <h1>, <h2., <h3> . . . . <h6> dan diakhir dengan </h1>,</h2>,</h3> . . . . </h6>. Silahkan lihat gambar berikut untuk contohnya:
b. Paragraph Tag
Tag Paragraf digunakan untuk untuk menuliskan sebuah paragraf sebagai element dari tag tersebut. Penulisan tag nya yaitu <p> ..... </p>.Untuk contohnya, silahkan lihat gambar berikut:
c. Line Break Tag
Line Break Tag digunakan untuk memutuskan penulisan pada suatu baris atau memiliki fungsi sama dengan tombol enter pada text editor seperti word, notepad dll. Penulisan tag nya adalah </br>. Tag ini bisa kita tuliskan di setiap akhir kata yang ingkin kita break / enter ke baris selanjutnya .Untuk contohnya seperti gambar berikut:
d. Centering Content
Tag ini digunakan untuk meletakkan / memposisikan semua element yang berada dalam tag ini pada posisi rata tengah. Adapun penulisan tag nya adalah <center> . . . . </center>. Lihat gambar berikut untuk contohnya:
e. Horizontal Lines
Tag ini digunakan untuk membuat sebuah garis lurus horizontal pada body html. Adapun penulisan tag ini adalah </hr>. Untuk contohnya, lihat gambar berikut:
f. Preserve Formatting
Tag Preserve Formatting ini berfungsi untuk menuliskan element berupa kata-kata dengan mengikuti format sesuai source code yang kita tuliskan pada text editor seperti, spasi, enter, perataan dan lainnya. Lihat gambar berikut untuk contohnya:
g. NonBreaking Space
Jika kita ingin menuliskan sebuah frase, misalnya "12 kucing", agar frase tersebut tidak dipecah browser menjadi dua baris, maka kita dapat menggunakan Non Breaking Space. Lihat gambar berikut:
3. HTML Elements
Element HTML adalah element-element yang berada dalam tag-tag HTML, Ciri utamanya ialah berada antar start tag ( cth: <p>,<pre>,dll) dan diakhiri dengan end tag (cth: </p>, </pre>,dll).
4. Nested HTML Elements
Nested HTML Elements adalah element HTML yang berada pada element HTMl lainnya, lihat contohnya berikut:
5. HTML Atribute
Atribut HTML digunakan untuk mendefinisikan karakteristik dari sebuah element pada tag HTML. Atribut HTM memiliki 2 komponen yaitu name dan value. Agar lebih dipahami, silahkan lihat gambar berikut:
Pada contoh gambar diatas, yang berlaku sebagai name adalah align dan value adalah left, center, dan rightI.
Ada 4 Atribut inti yang digunakan oleh coder HTML pada umumnya yaitu id, title, class, dan style.
Jika anda ingin lebih mendalami tentang atribut, silahkan baca disini
Berikut adalah daftar atribut yang pada umumnya bisa digunakan di berbagai Tag pada umumnya
6. HTML Formatting
Jika kita menuliskan sebuah kata atau kalimat pada text editor biasa, tentu akan banyak pemformatan yang akan kita lakukan pada kata atau kalimat tersebut. Dalam HTML, ada tag tag yang dapat kita gunakan untuk melakukan pemformatan pada kata atu kalimat. Silahkan lihat gambar berikut:
Note: Terdapat beberapa tag yang memiliki fungsi sama dalam melakukan pemformatan, seperti <u> dengan <ins> atau <Strike> dengan <del>.
7. Grouping Content
Grouping content adalah tag yang digunakan untuk menggabungkan beberapa element menjadi bagian-bagian berdasarkan karakterisitik dari elemen tersebut/
Terdapat dua jenis dari Grouping Content yaitu div dan span. Agar lebih engerti dan dapat membedakannya dengan mudah, lihat gambar beikut:
8. Phrase Tag
Dalam melakukan pemformatan frasa, kita bisa menggunakan tag-tag khusus frasa, Silahkan selengkapnya anda baca disini
Referensi : http://www.tutorialspoint.com/html/index.htm
Nice gan. Diperbanyak lagi postingan ttg html nya :) kalo berminat bisa visit blog saya rama-sites,blogspot,com
ReplyDeletemakasih mass..infonya berguna banget
ReplyDelete