Belajar HTML Dan Konsep Dasar HTML
HTML adalah
kependekan dari Hyper Text Markup Language, yaitu sebuah bahasa
markup yang digunakan untuk membuat sebuah halaman web. Si HTML inilah yang
menyusun sebuah halaman web menjadi sebagaimana yang kita lihat melalui browser (penjelajah
internet). So, belajar HTML dan mengerti bagaimana cara HTML bekerja akan
sangat penting jika kamu ingin terjun ke dunia web development.
Sebenernya ketika
bekerja dalam menampilkan dan menyusun sebuah halaman web si HTML ini nggak
sendiri, dia juga dibantu oleh teman-temannya yang lain yaitu si CSS dan si
JavaScript. Si HTML sendiri bertugas menyusun kerangka halaman web, si CSS yang
akan merapihkan dan memperindah tampilan halaman web, sedangkan si
JavaScript-lah yang bertugas membuat halaman web menjadi lebih interaktif. Pada
kesempatan yang lain kita akan coba membahas CSS dan JavaScript, tapi untuk
kali ini marilah kita buat si HTML menjadi tokoh utama
Perlu diperhatikan,
HTML bukanlah sebuah bahasa pemrograman. HTML merupakan bahasa markup yang
berisi perintah-perintah dengan format tertentu yang terstruktur untuk
menampilkan tampilan tertentu. Baik, mari kita buat menjadi lebih sederhana.
Misalnya di halaman web kita sering melihat ada teks yang ditulis tebal seperti
berikut:
tulisan tebal
Nah untuk bisa membuat
sebuah tulisan tebal seperti di atas, maka kita bisa membuatnya dengan HTML
dengan kode berikut:
tulisan tebal
Sederhananya adalah,
jika kita menuliskan kode seperti di atas, maka nanti si browser akan
menampilkan tulisan tebal. Jadi HTML adalah format penulisan kode
tertetu yang mampu dimengerti oleh browser untuk menampilkan tampilan tertentu.
Oke sekarang saya
paham, selanjutnya dimana saya bisa menulis kode HTML dan bagaimana caranya?
Benar, untuk dapat
membuat sebuah halaman web dan dapat ditampilkan oleh browser sebagaimana yang
kita inginkan tentu dong ada aturan dan formatnya. Nggak mungkin kita tulis
kode-kode HTML di Photoshop kemudian kita jalankan melalui browser. Ya nggak
akan jalanlah. Untuk menulis kode HTML kita bisa menggunakan software code editor
seperti Notepad, Notepad++, Sublime Text, Atom, atau yang lainnya. Dan agar
kode kita mampu dibaca oleh browser dengan baik kita harus menyimpannya dalam
format HTML yaitu .htm atau .html.
Berikut ini contoh
sederhana penulisan kode HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Selamat
Datang HTML</title>
</head>
<body>
<p>Halo
dunia!</p>
<p><b>Tulisan
tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris
bawah</u></p>
</body>
</html>
Kita bisa menuliskan
kode tersebut pada code editor seperti Notepad, Sublime Text atau yang lainnya.
Adapun code editor yang saya gunakan disini adalah Sublime Text 2. Sekali lagi
kamu bebas menggunakan code editor yang lain, itu hanya masalah pilihan saja.
Kemudian kita simpan
dengan format .htm atau .html, misalnya disini
untuk contoh di atas kita simpan dengan nama index.html. Maka
berikut ini tampilannya jika dibuka melalui browser:
Pada contoh kode HTML
di atas kita bisa melihat bahwa untuk memulai menulis kode HTML maka kita harus
memulainya dengan kode <html> dan ditutup dengan </html>.
Adapun mengenai kode <!DOCTYPE HTML> itu berfungsi
sebagai pengenal HTML5 (di lain kesempatan insya Allah akan kita bahas),
sementara ikuti saja seperti demikian.
Kode-kode yang ada di
antara <head> dan </head> berfungsi
untuk memberikan informasi tambahan kepada browser, untuk contoh di atas
misalnya ada <title> yang artinya memberikan informasi
ke browser bahwa halaman web yang dibuat ini memiliki judul Selamat
Datang HTML.
Apa yang ingin kita
tampilkan pada browser terletak di antara kode <body> dan </body>.
Yups, itulah inti dari kode kita. Disitulah kode-kode yang akan menyusun
halaman web ditulis.
Sebagai penutup untuk
panduan belajar HTML dasar ini saya ingin memberitahukan bahwa ada dua hal
lainnya terkait HTML yang harus dipahami untuk memulai belajar HTML, yaitu TAG
dan Atribut.
TAG
Sebenernya dari awal
kita membahas HTML kita sudah berbicara tentang TAG, hanya saja belum saya
jelaskan detailnya. TAG sederhananya adalah kode-kode tertentu yang menjadi
pengenal bahwa kode tersebut adalah HTML dan bisa diterjemahkan oleh browser
dengan tampilan tertentu. Misalnya tadi, untuk membuat sebuah tulisan
tebal, maka kita bisa menggunakan TAG STRONG, atau TAG
B. Untuk membuat paragraf kita bisa menggunakan TAG P. Dan masih banyak TAG
HTML lainnya, tentunya dengan fungsi yang berbeda-beda. Dikesempatan lain akan
kita pelajari lebih jauh. Untuk menuliskan TAG HTML kita bisa menggunakan huruf
kecil ataupun kapital, bebas-bebas saja, browser sudah mengenalinya kok.
ATRIBUT
Atribut adalah
karakteristik tambahan pada suatu TAG. Misalnya seperti yang sebelumnya sudah
saya informasikan bahwa untuk membuat paragraf kita bisa menggunakan TAG
P. Secara default paragraf yang akan ditampilkan oleh TAG Padalah
rata kiri. Tapi jika kita ingin membuatnya rata tengah, kita bisa menambahkan
atribut ALIGN dengan value CENTER ke dalam TAG
P tersebut. Misalnya seperti berikut:
<p align="center">Untuk menampilkan
tulisan rata tengah</p>
Setiap TAG memiliki
atributnya masing-masing tergantung bagaimana sifat dari TAG tersebut. Dan sama
seperti halnya dengan TAG, kita juga bebas menggunakan huruf kecil atau kapital
dalam menuliskan atribut di dalam HTML.
Demikianlah sedikit
panduan belajar HTML dasar, semoga dapat bermanfaat bagi temen-temen yang
sedang dalam proses belajar untuk menjadi web developer. Terima
kasih
0 Response to "Belajar HTML Dan Konsep Dasar HTML"
Post a Comment