Saturday, April 8, 2017

Dasar-dasar Pemahaman Mengenai HTML

www.AstroDigi.com AstroDigi.com | Sabtu, 8 Apr 2017 | HTML adalah singkatan dari Hyper Text Markup Language yang merupakan kumpulan teks yang digunakan untuk membantu menampilkan isi dari server atau data-data dari sumber-sumber lainnya pada browser. File HTML, meski hanya berisi teks, memiliki extension (ekstensi) .HTM atau .HTML dan bukan .TXT.

Dalam penulisannya HTML disusun seperti sebuah surat, terbagi atas 3 bagian yaitu Pembukaan, Isi dan Penutupan.
File HTML yang paling dasar hanya terdiri dari 5 buah tag (elemen HTML) utama saja yaitu tag HTML, tag Head, tag Title, tag Body dan tag Paragraf, dengan susunan sebagai berikut:

1. Bagian pembukaan HTML:
Tag pembukaan HTML
Tag pembukaan Head
Tag pembukaan Title
Tag penutupan Title
Tag penutupan Head

2. Bagian isi HTML:
Tag pembukaan Body
Tag pembukaan Paragraph
Tag penutupan Body

3. Bagian penutupan HTML:
Tag penutupan HTML

Catatan: untuk paragraph (paragraf) tidak perlu ada penutupan, karena memang tidak ada pembatasan kapan paragraf harus berakhir dalam format penulisan HTML
www.AstroDigi.com
Contoh sederhana susunan teks dari sebuah halaman HTML:

<html>
<head>
<title>Ini adalah halaman web untuk uji coba penulisan HTML</title>
</head>

<body>
<p>Mari kita mencoba membuat halaman HTML sendiri, berupa susunan teks sederhana yang dapat tampil di browser!
</body>
</html>

Untuk mencobanya anda bisa menggunakan aplikasi Notepad yang merupakan aplikasi bawaan Windows yang biasanya berada di group Accessories. Buka aplikasi Notepad dan copy susunan teks diatas mulai dari sampai ke ke halaman Notepad. Simpan dengan fasilitas Save As (supaya tidak tersimpan dalam format .TXT) dan simpan dengan nama “UjiHTML.htm” (tanpa tanda petik).


Bila anda melakukannya dengan benar maka anda akan memiliki sebuah file dengan nama: UjiHTML.htm. lakukan ”double-click” pada file tersebut dan sebuah halaman HTML akan terbuka di browser anda dengan tampilan yang sama dengan gambar yang saya sertakan bersama dengan artikel ini:

<html> adalah tag pembuka HTML
<head> adalah tag pembuka Head
<title> adalah tag pembuka Title
</title> adalah tag penutup Title
<body> adalah tag pembuka Body
<p> adalah tag pembuka Paragraph
</body> adalah tag penutup Body
</html> adalah tag penutup HTML

Bila anda melihat file HTML diatas dibrowser maka apa yang dituliskan di title akan tampil di browser, biasanya di bagian atas pinggiran halaman browser, karena saya menggunakan Mozilla Firefox, maka apa yang saya tuliskan di Title tersebut tampil di page-tag bagian atas dari browser-nya.

Apa yang dituliskan pada Head adalah teks yang merupakan keterangan dari website, bagian ini adalah bagian yang pertama kali dibaca oleh “search engine” pada saat pencarian. Jadi bila anda benar-benar akan mempublikasikan web anda maka pemilihan kalimat pada Head akan menentukan kemudahan pencarian halaman web anda, Pilihan kalimat yang unik akan mempermudah mesin pencari menemukan web anda diantara jutaan web-web lain didunia ini.

Bila diperlukan anda bisa menambahkan catatan atau komentar diantara teks, tanpa khawatir teks tersebut akan ikut tampil di browsernya. Caranya adalah menuliskan teks diantara ”<!—” dan  ”-->” (tanpa tanda petik).
Contohnya saya menyisipkan komentar pada susunan teks HTML yang tertera diatas menjadi seperti ini:

<div style="display:none">
<html>
<head>
<title>Ini adalah halaman web untuk uji coba penulisan HTML</title>
</head>

<body>
<p>Mari kita mencoba membuat halaman HTML sendiri, berupa susunan teks sederhana yang dapat tampil di browser!
<!—ternyata sederhana saja perintah dasar dari HTML ini, tidak serumit yang diduga lhoh .. -->
</body>
</html>
<div>

Dan ternyata setelah saya tambahkan komentar tersebut tampilan yang ada dibrowser masih sama persis dengan pada saat komentar belum saya tambahkan (komentar tidak ditampilkan di browser).
Demikian penjelasan paling singkat mengenai HTML, dan penjelasan ini adalah bagian yang paling dasar dari pemahaman mengenai HTML, pada artikel lain akan saya bahas lebih lanjut mengenai cara pengaturan tampilan huruf dan cara menyisipkan gambar di halaman HTML. Selamat beraktifitas .. have a nice day :-)

 www.AstroDigi.com (Nino Guevara Ruwano)

Comments :

0 comments to “Dasar-dasar Pemahaman Mengenai HTML”


Post a Comment