Jan 30, 2019

Belajar HTML - Konsep Dasar HTML

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 :D

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:

<strong>tulisan tebal</strong>
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>



        <title>Selamat Datang HTML</title>



    <head>



    <body>



    </head>



        <p>Halo dunia!</p>



        <p><b>Tulisan tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris bawah</u></p>



        <p><b>Tulisan tebal</b>, <i>tulisan miring</i>, <u>tulisan bergaris bawah</u></p>



</body></html>

Tulis kan code diatas dengan text editor seperti notepad , sublime dan masih banyak lagi text
Saya sendiri mengguna text editor Sublime & aptana studio.
Kemudian tinggal kalian simpan dengan ekstensi index .htm atau .html, misal nya disini untuk contoh
kita simpan saja dengan nama index.html. Maka akan tampil di browser seperti gambar dibawah disamping:
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.
  -Codein-

1 comment: