Apa Saja Konsep Dasar HTML? Temukan Jawabannya di Sini!


Konsep Dasar HTML. Salah satu script yang paling umum digunakan dalam pemrograman adalah HTML alias Hyper Text Markup Language. Karena HTML digunakan untuk menyusun halaman web yang bisa Agan lihat ketika menggunakan browser, belajar dan paham soal cara kerja HTML jelas merupakan sebuah bekal penting kalau Agan serius ingin terjun ke dalam dunia pengembangan web.

Sebenarnya, script program memproses HTML tidak sendirian. Sebab, fungsi HTML lebih seperti untuk menyusun kerangka halaman sebuah web. Nantinya, HTML dibantu oleh “teman-temannya” yaitu CSS yang bertugas merapikan dan memperindah tampilan, serta JavaScript yang membuat halaman jadi interaktif.

Selain untuk kuliah, inilah beberapa kegunaan lain dari bahasa C

Untuk mengenal HTML lebih jauh, Agan perlu tahu beberapa elemen dasar dari HTML, seperti konsep dasar HTML. Kemudian, nanti Agan bisa berkenalan juga dengan konsep elemen HTML setelahnya.Di kesempatan kali ini, Agan bisa simak dulu konsep dasarnya, ya!

alt="konsep dasar html"

Konsep Dasar HTML

Yang pertama kali perlu Agan perhatikan adalah bahwa HTML sebenarnya bukan bahasa pemrograman, namun merupakan bahasa markup. Dalam HTML juga terdapat perintah yang ditulis dengan format tertentu dan terstuktur untuk menyajikan tampilan tertentu. Salah satu contohnya adalah ketika Agan membuka sebuah halaman web, kemudian Agan melihat ada teks yang dicetak tebal. Misalnya tebal seperti ini.

Nah, HTML nanti digunakan untuk membuat tulisan tebal seperti itu. Caranya adalah dengan menuliskan  kode sebagai berikut:

<strong>tebal seperti ini</strong>

Hal yang sama juga berlaku ketika Agan melihat teks yang ditulis miring atau dengan garis bawah. Hanya saja, ada aturan dan format tertentu untuk bisa menyajikan tampilan seperti itu. Belum lagi, untuk bisa menuliskan kode HTML, Agan juga perlu menggunakan software tertentu yang memang dikhususkan sebagai code editor. Misalnya Notepad, Notepad++, Atom, dan Sublime Text. Setelah itu, kode disimpan dalam format HTML dengan ekstensi .htm atau .html agar bisa dibaca dengan baik oleh browser.
Supaya lebih paham lagi, yuk simak contoh sederhana berikut ini!

<!DOCTYPE HTML>
<html>
    <head>
        <title>Halo!</title>
    </head>
    <body>
        <p>Selamat pagi!</p>

        <p><b>Teks tebal</b>, <i>teks miring</i>, <u>teks bergaris bawah</u></p>
    </body>
</html>

Ketikkan susunan kode di atas ke dalam software code editor pilihan Agan, dan simpan dalam format .html atau .htm. Kemudian, coba buka dengan browser yang Agan gunakan.

Dalam contoh di atas, Agan bisa cermati kalau penulisan kode HTML perlu dimulai dengan <html> dan ditutup dengan </html>. Sedangkan kode <!DOCTYPE HTML> adalah sebagai pengenal HTML5.

Sementara itu, kode-kode yang Agan lihat berada di antara <head> dan </head> merupakan tambahan informasi yang diberikan ke browser. Sebagai contoh adalah <title>, yang fungsinya untuk memberi informasi bahwa halaman web yang Agan buat tersebut punya judul Halo!. Kemudian, yang ada di antara <body> dan </body> merupakan apa yang ingin ditampilkan di browser.

Mengenal konsep elemen HTML dan fungsinya

TAG dan Atribut

Sebenarnya, konsep dasar HTML adalah seperti yang sudah Agan baca di atas. Akan tetapi, di sini Agab bisa temukan tambahan informasi tentang TAG dan Atribut, yang juga perlu dipahami saat belajar HTML.

TAG sebenarnya sudah bisa Agan temukan di dalam penjelasan di atas, yaitu kode-kode tertentu sebagai pengenal bahwa kode tersebut merupakan HTML sehingga bisa diterjemahkan browser. Misalnya ketika Agan mencoba membuat teks tebal seperti ini seperti di atas, yang dilakukan dengan menggunakan TAG STRONG atau TAG B. Sedangkan untuk paragraf baru, Agan menggunakan TAG P.

Atribut adalah karakteristik tambahan untuk TAG, misalnya untuk menampilkan teks yang rata tengah. Sebab, TAG P secara default akan menampilkan teks rata kiri. Kalau Agan ingin membuat teks rata tengah, tambahkan atribut ALIGN dan value CENTER ke dalam TAG P seperti berikut ini:

<p align=”center”>Tulisan rata tengah.</p>

Inilah panduan singkat soal konsep dasar HTML. Semoga bermanfaat, ya!

Comments

Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i>
Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i>
Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>