Minggu, 17 Februari 2019

struktur dasar html



html adalah bahasa pemrograman untuk membuat halaman web. tepatnya bukan untuk membuat program sih, tapi sekumpulan kode untuk meningkatkan kualitas tampilan halaman web supaya menjadi lebih bagus. misalnya mencetak tulisan menjadi tebal, miring, membuat daftar, bahkan mengatur gambar, link, video dsb karena dasar dari tampilan halaman web adalah teks-teks yang diselipi kode-kode.

kode-kode di dalam html disebut tag. tag tersebut ditulis di dalam tanda kurung sudut. kode beserta tanda kurung itu mengapit tulisan lain. jadi ada kode pembuka, lalu teks yang di dalam lalu kode penutup. bedanya pada kode penutup ada tanda slash atau "/" sebelum nama tag. contohnya: <tebal> tulisan ini bercetak tebal </tebal>.  kode barusan tentu tidak akan dieksekusi browser karena tidak ada tag "tebal" di html. tapi jika kalian ketik <b>tulisan ini bercetak tebal</b> maka hasilnya akan terlihat seperti ini:

tulisan ini bercetak tebal

contoh di atas berlaku pada editing teks. pada kali ini kita belum akan  membahas editing teks, tapi pada struktur halaman web dulu, yaitu kerangka kode yang menyusun halaman web.

tag html sebaiknya diketik huruf kecil semua agar lebih rapi, lebih mudah diketik dan lebih fleksibel menghadapi bermacam-macam browser. selain itu ada aturan kalau menulis tag html seperti ini:

  • sebuah kode dibuka lalu ditutup lalu buka kode yang lain lalu ditutup. seperti ini: <x>teks</x> kemudian </y>teks lain</y>.

  • sebuah kode dibuka, lalu membuka kode kedua, lalu tutup kode kedua dulu baru tutup kode pertama. seperti ini: <x>teks pertama<y>kode kedua</y></x>.

  • antar dua atau lebih kode tidak boleh saling bersilangan. misalnya <x><y>teks</x></y>. kode seperti ini tidak boleh. lebih lanjut kode-kodenya lain kali aku lampirkan.


kita akan melewati langkah pembuatannya karena cara pembuatannya bisa menggunakan notepad, notepad++, wordpad, microsoft frontpage, publisher bahkan adobe dreamwaver. kita kali ini akan langsung masuk pada kodenya. begitu juga cara penyimpanan dan ekstensinya.aku abaikan dulu sementara ini.

struktur dasar html adalah 3 kode berikut:

a. kode"html" berfungsi untuk menunjukkan bahwa dokumen yang ditulis dalam halaman web adalah file jenis html dengan bahasa html.

b. kode "head". kode ini berfungsi menunjukkan kepala dokumen halaman web. data, teks atau informasi yang ditulis di sini tidak akan ditampilkan di dalam dokumen web. bagian ini berfungsi menampilkan beberapa hal seperti:

  • judul halaman. judul halaman web ditunjukkan dengan kode "title".

  • informasi meta. informasi meta yaitu informasi seputar dokumen web. informasi ini seperti keyword, description dan generator. informasi ini ditunjukkan dengan kode "meta".


c. kode "body". kode ini menunjukkan bagian badan dokumen. bagian ini akan ditampilkan di browser.

ketiga kode di atas disusun sebagai berikut:

<html>

<head>

<title>judul halaman</title>

</head>

<body>

bagian isi halaman

</html>

sebagai contoh buka program notepad. notepad ada di menu start >> program >> accessories >> notepad. ketikkan kode di atas. simpan dengan nama "coba.html". simpan dengan jenis apa saja. save. lalu buka dengan google chrome atau mozilla firefox. maka halaman baru akan terbuka. pada title bar akan terlihat tulisan "judul halaman" dan di dalam halaman akan terlihat tulisan "bagian isi halaman".

pada dasarnya dengan tiga kode di atas saja dokumen web sudah jadi dan bisa dijalankan oleh browser dan kita bisa melihatnya, tapi tidak ada isinya apa-apa di sana. supaya ada isinya maka kita mulai menulis sesuatu di bagian "body". isinya ada beberapa hal yaitu teks, gambar, video, link, daftar dll. bagian selanjutnya adalah isi dari halaman web. isi halaman web -- apapun macamnya diketikkan di bagian dalam kode"body".

struktur dasar html sederhananya seperti di atas saja. berikutnya adalah editing teks, yaitu bagian memodifikasi dan memperbaiki tulisan agar tampil menjadi lebih baik. tulisan adalah kode yang paling banyak di html. kita akan mempelajarinya di kesempatan berikutnya.

 

Tidak ada komentar:

Posting Komentar