Tutorial HTML Part 1 - Membuat Kerangka HTML;- HTML atau Hyper Text Markup Language adalah bahasa pemrograman berbasis web yang sangat penting. Dalam setiap pemrograman web, pengaturan halaman dan layout selalu menggunakan bahasa HTML. Pada kesempatan ini kita akan belajar membuat kerangka HTML.

Tutorial HTML Part 1 - Membuat Kerangka HTML
Mari belajar HTML;- Sumber gambar: https://pixabay.com

Perlu di ketahui, dalam penyusunan program menggunakan HTML selalu menggunakan pembuka dan penutup. Hampir setiap segmen selalu demikian. Pada contohnya untuk satu halaman html selalu mengunakan pembukan <html> dan penutup dengan tag </html>. Hal ini berlaku pada setiap tag yang bekerja pada file html tersebt. Misalkan beberapa tag yang sering digunakan dalam HTML adalah head, body, div, header, footer, h, p, ul, li, a, span dan masih banyak lagi.

Banyak sekali tutuorial membuat HTML yang tersedia di internet. Jika kalian ingin kursus pemrograman WEB secara online hingga mendapat sertifikat, kalian bisa buka di situs W3SCHOOLS HTML. Disana lengap sekali akan tutor pemrograman web dengan bahasa inggris. Jika kurang paham dengan bahasa inggris, silahkan pantengin terus Tutorial UKM Santri.

Kerangka dasar File HTML

Seperti yang telah kita singgung diatas, kerangka dasar html berupa pembuka tag dan penutup tag. Sebagai contoh pembuka tag adalah <tag> dan penutup tag sama dengan pembuka tapi ditambah dengan tanda slash (/). Misalkan kita membuat tag DIV, maka kita harus membuat pembuka dan penutup contoh: <div> isi entah terserah </div>. Pada tag tersebut yang berwarna merah adalah pembuka dan yang berwarna biru adalah tag penutup.

Setelah paham mengenai pembuka dan penutup kita akan membahas kerangka dasar dari html.

Kerangka File HTML

Untuk sebuah file html yang valid selalu menggunakan tag <!DOCTYPE html> pada awal dokumen. Dengan tag tersebut menandakan bahwa dokumen tersebut berupa file HTML. Selain itu, sebuah dokumen html selalu diawali dengan tag <html> dan diakhiri dengan tag </html>.  Utuk lebih jelasnya silahkan lihat pada contoh dibawah ini.

<!DICTYPE html>
<html>
*/
Disini kita menambahkan beberapa tag
/*
</html>

Ketika kita telah membuat kerangka dokumen diatas, kita dapat memulai membuat dokumen HTML sesuai dengan kehendak kita. Setelah itu kita akan menambahkan tag header yang sangat penting untuk sebuah dokumen HTML.

Header HTML dan Fungsinya

Setelah membuat kerangka dasar dokumen HTML seperti diatas, langkah kita selanjutnya adalah membuat header untuk HTML tersebut. Pada tag header menggunakan awalah dengan tag <head> dan akhiran </head>.

Fungsi tag header itu sendiri adalah tempat untuk meletakkan informasi mengenai dokumen HTML yang telah kita buat. Beberapa informasi diantaranya adalah title, meta tag, dan lain sebagainya. Selain sebagai tempat informasi tag header juga menjadi tempat include file diantaranya CSS, Font, Javascript, dan link. 

Untuk lebih jelasnya silahkan lihat pada contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title> Isi Dengan Title Kita</title>
	<!-- Disini kita letakkan CSS dan beberapa informasi lain -->
</head>

</html>

Dengan contoh diatas kita telah berhasil membuat file html lengkap dengan header. Tapi file tersebut belum memiliki tampilan ketika kita lihat  pada browser karena belum  menampilkan tag body. Selanjutnya kita akan menambahkan tag body.

Body HTML dan Fungsinya

Setelah kita membuat dokumen HTML dilengkapi dengan body, kemudian kita akan melanjutkan dengan membuat body. Pada body ini lah, kita menempatkan seluruh tampilan dokumen HTML kita. Tag body menggunakan pembuka tag <body> dan penutup </body>.  Ketahuilah, setiap dokumen HTML yang valid selalu menggunakan tag body.

Seperti yang telah kita singgung bahwa dalam tag body berupa tampilan dokumen, maka dalam tag body ini memiliki beberapa isi tag didalamnya meliputi: div, h1, h2, h3, h4, h5, h6, p, a, img, header, footer, nav, ul, li, pre, dan masih banyak lagi.

Untuk lebih jelasnya silahkan lihat contoh dokumen HTML yang sudah lengkap dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title> Isi Dengan Title Kita</title>
	<!-- Disini kita letakkan CSS dan beberapa informasi lain -->
</head>
<body>
	<!-- disini tampilkan semua html kita -->
</body>
</html>

Itulah sedikit artikel mengenai Membuat kerangka HTML. Semoga dapat membantu dan apabila ada pertanyaan silahkan tanyakan pada kolom komentar. Sekian dari kami, akan kita sambung pada artikel mendatang. Maka dari itu, simak terus artikel dari UKM santri dengan berlangganan.