Developer Cupuh: Dasar-Dasar HTML

Dasar-Dasar HTML - Setelah mengenal dan memahami postingan saya sebelumnya tentang Pengertian dan Perkenalan HTML sekarang saya akan membahas mengenai Dasar-Dasar HTML yang mana akan membahas tentang Elemen Bertingkat, Attribut, Heading, Paragraf, Format Teks, Quote, Komentar, Link dan Gambar. Yuk langsung saja ke pembahasanya.

Elemen Bertingkat

Struktur kode pada HTML merupakan struktur kode yang bertingkat yang mana suatu elemen dapat dibentuk dengan menggabungkan elemen-elemen yang lain baik beberapa elemen yang sama maupun elemen yang berbeda. Contoh logika sederhananya seperti cerita berikut ini "Ibaratkan sebuah website adalah sebuah rumah. Rumah dibangun dengan elemen seperti lantai, tembok, atap, dan lain sebagainya. Elemen-elemen tersebut tidak berdiri sendiri alias dibangun dengan cara menyatukan beberapa elemen lain. Elemen tembok misalnya, ia dibangun dengan beberapa elemen yang berbeda yaitu batu batako, pasir, semen, kapur dan sebagainya. Sedangkan elemen atap dibentuk dengan beberapa elemen yang sama yaitu genteng yang disusun rapi". Bagaimana sudah ada gambaran bukan??? Masih belum ya. Oke langsung aja ke baris kode dibawah ini.

Pada baris kode disamping dapat kita lihat bahwa elemen <body> dibangun oleh satu elemen judul dengan tag <h1> dan dua elemen paragraf dengan tag <p>. Hal demikian lah yang disebut Elemen bertingkat karena elemen <body> tidak dapat berdiri sendiri.

Attribut

Attribut pada HTML merupakan pelengkap yang menempel pada tag layaknya kancing yang menempel pada baju meskipun tidak semua baju wajib ada kancingnya. Begitu pula dengan attribut pada HTML yang tidak selalu menempel pada tag. Penggunaan attribut sendiri dapat dituliskan dengan format nama Attribut = "isi attribut" . Berikut adalah beberapa contoh attribut pada HTML :

a. Attribut title yang merupakan attribut yang dapat menempel pada banyak tag yang berfungsi untuk menampilkan sebuah judul tersembunyi dan hanya akan muncul ketika pointer menunjuk pada elemen tersebut. Lebih jelasnya mari kita lihat baris kode berikut ini.

Hasilnya ketika dibuka di Browser :

Tulisan "Aku Cupuh" muncul pada saat pointer menunjuk ke tulisan "Developer Cupuh" kaena pada tah <h1> diberikan attribut tittle.

b. Attribut href merupakan attribut yang melekat pada tag <a> yang berfungsi untuk link. untuk penjelasanya akan dijelaskan pada bagian elemen link.

c. Attribut height dan width yang merupakan attribut untuk mengatur ukuran panjang dan lebar suatu elemen. attribut ini biasanya lebih sering melekat pada tag <img>.

d. Attribut alt yang merupakan attribut yang melekat pada tag <img>. attribut ini akan dibahas lebih lanjut pada elemen gambar.

Heading

Heading pada HTML merupakan format penulisan judul yang bertujuan agar pemberian judul pada halaman website dapat memiliki standard hierarki. tag untuk heading sendiri dimulai dari yang paling besar yaitu tag <h1> sampai tag <h6>.

Hasilnya ketika dibuka di Browser :

Paragraf

Paragraf pada HTML dibentuk dengan menggunakan tag <p>dan ditutup dengan tag </p>.

Format Teks

Dalam HTML ada beberapa tag yang dapat digunakan untuk menampilkan format teks yang berbeda dengan teks normalnya. Hal ini sangat perlu untuk diperhatikan karena terkadang kita pasti ingin memberikan efek teks yang berbeda pada sebagian teks tertentu. Beberapa Format Teks yang dapat digunakan sebagai berikut ini:

a. Teks Efek Tebal efek ini dapat dibuat dengan menggunakan tag <b>.

b. Teks Efek Strong efek ini hampir sama dengan efek tebal namun efek ini berfungsi sebagai penekanan pada kata tertentu misalnya dan dibuat dengan tag <strong>.

c. Teks Miring yang merupakan hasil dari tag <i>.

d. Empesize Teks yang merupakan efek yang hampir sama dengan Teks Miring namun efek ini hasil dari tag <em>.

e. Marked Teks yang merupakan penandaan teks agar dapat memperoleh perhatian khusus. Efek ini dibuat dengan teg <mark>.

f. Small Teks dapat dibuat dengan menggunakan tag <small>.

dan masih ada beberapa efek Teks lain yang bisa dilihat disini.

Quote

Membuat quote pada html dapat dengan menggunakan tag <q>. Contoh pada baris kode berikut ini .

Hasil pada Browser :

Komentar

Komentar pada baris kode HTML berfungsi untuk memberikan penjlasan terkait dengan baris kode yang ingin diberikan komentar yang mana komentar ini akan diabaikan oleh browser dan tidak akan tampil di laman browser. Komentar pada HTML ditulis diantara tanda .

Masih belum kepikiran ??? Yuk diperhatikan gambar berikut.

Hasil yang muncul di browser :

Keterangan : baris kode ke 7 tidak akan tampil pada browser karena baris tersebut merupakan komentar yang dibuat oleh si pembuat website agar orang lain dapat dengan mudah memahami baris kode yang dibuatnya.

Link

Sebuah link pada HTML dapat dibuat dengan menggunakan tag <a> dan dengan bantuan attribut href yang mana href disini berisi url dari website yang akan dituju. Contoh penggunaanya dapat dilihat pada gambar berikut ini.

Hasil pada browser :

Keterangan : tulisan link ini pada browser dapat di klik dan akan mengarah ke url yang ditautkan pada attribut href.

Gambar

Gambar dapat ditampilkan pada laman web dengan menggunakan tag <img> dengan bantuan attribut src yang mana attribut ini diberi nilai sumber dari gambar yang ingin ditampilkan. Gambar dapat bersumber dari file kita sendiri maupun dari website lain. Contoh berikut akan lebih menjelaskan.

Hasil pada Browser :

Source gambar : http://9gambar.blogspot.co.id/2015/02/gambar-kartun-lucu-lengkap.html

Keterangan : untuk mengatur ukuran gambar dapat dengan menggunakan attribut width untuk lebarnya dan attribut height untuk panjang gambar. baris kode ke 7 adalah contoh sumber gambar yang berasal dari website lain sedangkan baris kode ke 8 adalah contoh gambar yang bersumber dari file yang berada di komputer.

Demikian pembahasan tentang Dasar-Dasar HTML yang dapat kita pelajari untuk kali ini. Tetap semangat untuk temen-temen belajar websitenya.