5. HTML
Structure
Hallo teman teman semuanya apa kabar, semoga
sehat sehat saja ya dimanapun teman teman berada. Kembali lagi di Blog Study
Code Informatika, masih bersama saya Reza Febriansyah penulis
konten yang tak pernah bosan untuk update tutorial pemrograman web nya
setiap hari. Jadi, doakan terus agar saya bisa tetap aktif, rajin, dan rutin
dalam updatenya.
Disini, di dalam blog ini, saya selaku blog
writer akan memberikan tutorial tutorial dalam dunia informatika,
khususnya dalam pemrograman web. Jadi tetap ikuti terus perkembangan dari blog
Study Code Informatika ini, semoga bisa memberikan ilmu yang bermanfaat, dan
juga bisa berguna untuk teman teman semuanya.
Nah di topic kita kali ini, kita akan melanjutkan
seri kita mengenai pemrograman web dasar, dan sekarang kita sudah masuk di topic
ke 5, yaitu membahas struktur dasar dari
HTML. Nah gimana struktur dokumen
nya? Kita akan bahas bareng bareng sekarang oke, tapi sebelum itu, untuk teman teman yang mungkin baru bergabung di blog Study Code Informatika ini khususnya dalam seri pemrograman web dasar topik 5, saya sarankan untuk teman teman mempelajari dulu materi kita di topik sebelumnya, agar ketika temen temen mengikuti seri tutorial ini, temen temen ga akan kebingungan dan kesulitan, gitu ya temen temen, nanti kalau sudah dipelajari, temen temen boleh next dan bergabung di topik ke 5 ini. Oiyah ini link materi sebelumnya akan saya kasih disini :
Lalu saya juga ingin mengingatkan lagi bahwa artikel
ini akan berseri sesuai tahapan pembelajaran kita, jadi, kita tidak akan
membahas keseluruhan materi dalam 1 artikel, melainkan akan terdiri dari
beberapa artikel lainnya. Dan agar suasana belajar menjadi lebih nyaman, saya
sarankan untuk teman teman menyiapkan beberapa cemilan dan kopi favorite kalian
terlebih dahulu, setelah itu, teman teman bisa kembali menyimak artikel
tutorial ini sambil menikmati cemilan dan kopi favorite kalian.
Oke sip ya, kita masuk ke pembelajarannya.
STRUKTUR DOKUMEN HTML
Seperti yang kalian baca ya, jadi kita disini
membahas Struktur Dokumen dari HTML,
nah struktur dokumen ini adalah yang menjadi bagian bagian inti di dalam dokumen HTML. Contohnya sama seperti
kalian membaca buku, majalah, koran maupun artikel yang ada di internet, semua
hal tersebut ada struktur dasar dokumennya, seperti judul, sub judul, isi
konten atau informasi beritanya, dan lain lain. Biasanya kalau kalian
perhatikan, di struktur dasar
dokumen tersebut ukuran judul dan uukuran sub judulnya pasti beda deh, nah
kenapa? Ya karena untuk membedakan ya antar judul utama dengan sub judulnya.
Kalau misal ukurannya sama, nanti gak ketahuan ni mana yang judul, dan mana
yang jadi sub judul, karena pembaca nanti bingung, ukuran dan font keduanya
memiliki kesamaan.
Jadi seperti apa sih struktur dasar dokumen dari HTML itu? secara garis besarnya bisa dikatakan seperti ini,
coba perhatikan.
Sekarang saya minta coba temen temen buka text
editornya, dan ketik seperti yang saya contohkan ini ke dalam file “latihan
1.html”. Untuk hasil pengerjaan kita di topic sebelumnya
silahkan boleh dihapus aja, dang anti sama yang ini
Kalau sudah, coba deh kita liat dulu hasilnya di
browser, klik kanan dan pilih “Open in browser”
Oke sip ya, mantap, sekarang kita bahas dulu satu
persatu mengenai struktur dasar dari dokumen HTML ini.
(1) HTML
Merupakan struktur yang ada di paling atas dan
paling bawah dokumen website, ini merupakan tag utama untuk membuat sebuah script document html. Dengan membuat
tag <html> di paling atas struktur dokumen website dan membuat tag
penutupnya </html> di paling bawah struktur dokumen website, maka di
dalamnya kita juga bisa membuat tag tag lain untuk membuat sebuah text atau
konten baru.
(2) HEAD
Tag ini merupakan tag yang letaknya ada dibawah
persis tag <html> . Di dalam tag ini, kita bisa menaruh beberapa tag lain
seperti <title> , <link> untuk mengkoneksikan file html kita dengan
file css, lalu juga tag <meta> dan masih ada beberapa tag lainnya.
(3) TITLE
Kalau ini adalah tag yang merupakan bagian dari
tag <head> , letaknya ada di dalam tag <head>. Fungsinya itu ya
untuk memberikan judul halaman kepada user, seperti yang sudah saya contohkan
seperti ini
Ini memberi tahu bahwa sekarang user sedang
berada di halaman “ini judul halaman web” , nah nanti text ini bisa kita ganti
sesuai dengan nama halaman yang kita buat. Sip ya
(4) BODY
Nah tag ini merupakan tag yang paling penting di
dalam struktur dokumen website. Karena, di dalam tag ini tersimpan banyak
sekali tag tag untuk mendukung pembuatan isi konten dari HTML nya. Contohnya
kita bisa memberikan tag judul atau heading di dalam tag <body> ini,
selain itu kita bisa menambahkan tag tag lainnya seperti paragraf, gambar,
list, form inputan, tabel dan masih banyak yang lainnya.
(5) HEADING
dan (6) PARAGRAF
Tag ini adalah sebagian tag yang ada di dalam
<body> . Seperti yang sudah kita praktekkan tadi ya temen temen, kita
memasukan tag <h1>Judul utama</h1> di dalam tag <body> . Nah
itu artinya, tag <h1> ini seakan akan menjadi judul utama dari dokumen
html yang kita buat. Sedangkan yang sub judul nya, di contoh tersebut saya
bedakan menjadi tag <h3> , yapp benar, hanya berbeda angka saja, nah
angka ini akan mempengaruhi ukuran dari text tersebut. Contohnya ketika saya
menggunakan tag <h1> , ukurannya akan jauh lebih besar dari tag
<h3> , mengapa demikian? Karena dalam konsep tag heading, angka terkecil
akan menjadi ukuran text terbesar.
Okey, saya contohkan deh, sekarang coba saya
minta temen temen untuk menuliskan seperti yang saya contohkan dibawah ini
Dan sekarang liat hasilnya di browser. Buka hasil
kita yang tadi, dan tekan “F5”
Gimana, bener kan? Tag ukurannya akan berurutan
sesuai dengan apa yang kita tuliskan. Jadi, hukumnya dalam tag heading itu
adalah semakin kecil angkanya, maka akan semakin besar ukuran textnya. Nah kalau
tag paragraf <p> , ini tag untuk menuliskan deskripsi atau isi dari
konten yang ingin kita sajikan dalam jumlah karakter yang banyak.
Mungkin
cukup segini dulu yah untuk pembelajaran kita kali ini, semoga bisa
bermanfaat buat temen temen. Kalau suka dengan konten seperti ini, bisa di
share ke yang lainnya juga, agar kita semua bisa belajar bareng bareng disini,
Gitu ya temen temen ya, kita sekarang Alhamdulillah sudah bisa membuat struktur
dari dokumen html dan juga beberapa isi tag di dalamnya seperti title, heading
dan juga paragraph. Untuk pembahasan lebih lanjutnya kita sambung di artikel
topik yang akan dating ya. Setidaknya yang penting kita sudah belajar hal baru
disini. Jadi ditunggu aja ya untuk tutorial selanjutnya. Untuk itu sekian
dulu dari saya Reza, dan saya ucapkan terima kasih banyak.
Tidak ada komentar:
Posting Komentar