#4: Basic Examples & Elements

Written by: Gabriella Hartanto



Setelah belajar dasar mengenai halaman web di artikel sebelumnya, sekarang saatnya kita mengimplementasikannya! Setiap membuat file HTML, pastikan tipe filenya telah didefinisi (document type declaration) pada bagian atas file tersebut menggunakan <!DOCTYPE html>. Untuk memastikan browser menampilkan halaman web secara sesuai, digunakan deklarasi <!DOCTYPE> dengan html untuk HTML standar (HTML5). Sebuah dokumen HTML diawali dengan tag <html> dan ditutup dengan tag </html>. Elemen HTML dapat didefinisikan sebagai konten yang posisinya ada di antara tag pembuka dan tag penutup, seperti <tagname>Konten kamu disini!</tagname>. Walaupun penulisan tag HTML tidak case sensitive, yaitu tidak ada perbedaan menggunakan huruf kapital atau tidak, sebaiknya tag ditulis dengan huruf kecil sebagai best practice. Ingat, sebuah tag harus selalu ditutup! Untuk menutup sebuah tag, tambahkan / sebelum nama tag tersebut, atau dalam beberapa kasus spesial, bisa menggunakan self-closing tag, yaitu tag yang dapat menutup dengan sendirinya seperti <input/>.


Setelah persiapan dokumen selesai, pastinya sebuah halaman web akan telah menampilkan sesuatu. Bagian yang akan ditampilkan dalam suatu dokumen HTML diselubungi dengan <body> dan </body> tag. Body ini akan menjadi tempat dimana user dapat berinteraksi dengan web yang kita buat. Biasanya, web developers juga menggunakan tag <head> sebelum <body> yang berisi <title> untuk memberikan dokumen atau halaman webnya sebuah nama atau sebuah identifikasi yang nantinya juga akan menjadi nama ‘tab’ dalam browser.


Dengan menggunakan beberapa elemen HTML di atas, dapat dilihat bahwa kita telah mengimplementasikan nested HTML elements. Kita bisa melihat pada gambar di bawah, terdapat 4 elemen HTML: <html> (sebagai root element yang mendefinisikan seluruh dokumen HTML tersebut), <body>, <h1>, dan <p>.


(credits: w3schools.com)


Sekarang, kamu sudah siap mengisi halaman web kamu dari yang tadinya hanya layar putih, menjadi hal terbaik yang pernah kamu buat! Yuk, pelajari beberapa hal berikut:



1. HTML Headings


Headings secara umum adalah judul untuk sebuah bagian. Sama halnya seperti dalam developing sebuah website, headings ini dapat digunakan untuk membagi-bagi website yang kamu buat sehingga menjadi mudah dimengerti oleh para user, dan tentunya, untuk para programmer juga. Dalam HTML, headings ini dibagi menjadi 6 tipe, yaitu dari <h1> sampai <h6>, dengan urutan <h1> sebagai headings terpenting.


Contohnya, jika ditulis seperti ini:


Hasilnya adalah sebagai berikut:

(credits: w3schools.com)



2. HTML Paragraphs


Setelah menulis judul, sebuah karya pasti harus ada isinya. Dalam HTML, sebuah teks biasanya ditulis menggunakan paragraph tag <p>. Kamu bisa menuliskan apa saja dalam paragraph tag tersebut, dan teks tersebut akan mengular seperti biasa. Jika ingin memisahkan atau memberikan jarak antar paragraf, bisa menggunakan tag <p> yang berbeda.


Contohnya, jika ditulis seperti ini:


Hasilnya adalah sebagai berikut:



Satu hal lain yang bisa kamu lakukan adalah menggunakan line break <br>, yaitu sebuah elemen HTML kosong (empty HTML elements). Perbedaan antara elemen HTML kosong dengan elemen HTML lainnya adalah tidak perlu menggunakan tag penutup.


Contohnya, jika ditulis seperti ini:


Hasilnya adalah sebagai berikut:


(credits: w3schools.com)



3. HTML Links


Untuk menambahkan sebuah clickable link dalam sebuah website, kamu bisa menggunakan anchor tag <a> dengan reference ke link yang ingin dituju menggunakan salah satu atribut yang tersedia, yaitu href. Atribut dapat digunakan untuk memberikan informasi tambahan yang penting bagi elemen tersebut. Seperti contoh di atas, atribut href ini akan memberitahu kepada elemennya link yang harus dituju.


Contohnya, jika ditulis seperti ini:


Hasilnya adalah sebagai berikut:

(credits: w3schools.com)



4. HTML Images


Seringkali dalam sebuah website, terdapat beberapa foto pelengkap yang membantu para user mendapat gambaran lebih jelas mengenai topik yang disajikan. Untuk menambahkan foto ke dalam HTML, dapat menggunakan image tag <img> dengan beberapa atribut: src sebagai source file image tersebut dan alt sebagai teks alternatif jika foto tersebut tidak bisa di load/ditampilkan. Kamu juga bisa mengubah ukuran foto tersebut menggunakan atribut width dan height.


Contohnya bisa seperti berikut:

(credits: w3schools.com)


Terkadang, saat melihat sebuah halaman web yang sangat keren, terlintas di pikiran kita “Bagaimana ya cara mereka membuat sesuatu sekeren itu?” Nah, untuk melihat HTML source, kamu bisa right-click halaman HTML tersebut dan memilih ‘View Page Source’ jika menggunakan Chrome atau ‘View Source’ jika menggunakan Edge atau browser lain yang serupa.



Hal lain yang bisa kamu lakukan adalah menggunakan fitur Inspect dari browser. Kamu hanya perlu right-click sebuah teks, elemen, ataupun daerah kosong dan memilih ‘Inspect’ atau ‘Inspect Element’ untuk melihat HTML dan CSS dari halaman tersebut.





Jika penasaran, kamu juga bisa mengedit dari panel Elements atau Styles dan melihat perubahan di web-nya secara langsung! ‘Inspect’ akan sangat membantu untuk mencari tahu bug atau masalah dalam code kamu karena kamu bisa melihat karyamu sendiri melalui browser. Contoh paling sering dari penggunaan styles yang kurang tepat adalah ketika di bagian Styles dapat terlihat styles tercoret, yang artinya tidak diaplikasikan ke dalam sebuah elemen.



Dengan adanya tools seperti ini dapat mempermudah kamu membuat sebuah halaman web.


Now, it’s your turn!



References:

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

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

8 views0 comments

Recent Posts

See All