Hanna-Chu: Dasar-dasar HTML (Hyper Text Markup Language)

Sewaktu di SMA saya pernah belajar sedikit tentang HTML , dan saat kuliah ini dan bergabung dengan UKM CYBERTECH, saya kembali mempelajari HTML, apa ithu HTML, dan dasar - dasar HTML, dan pada tulisaan kali ini saya menggabungkan pembelajaran yang saya dapatkan sewaktu SMA dan UKM cybertech .

Hyper Text Markup Language atau yang biasa kita singkat menjadi HTML adalah bahasa pengkodean yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di sebuah program web browser Internet. HTML sebenarnya bukanlah bahasa pemrograman, melainkan sebuah standar tata cara penyajian teks dan materi pendukungnya agar dapat tersaji secara terstruktur di halaman web. Meskipun dewasa ini sudah banyak program bantu untuk membuat halaman web secara cepat dan praktis, namun untuk kebutuhan tertentu, penguasaan dasar-dasar pengkodean HTML tetap diperlukan.

Mengenal Dokumen HTML

Dokumen HTML adalah file halaman web. Jadi misalnya jika Anda membuka halaman Beranda, lalu berpindah ke halaman Kontak, maka sebenarnya Anda sedang mengakses file HTML Beranda lalu berpindah ke file HTML Kontak. Cara paling mudah untuk mengetahui kode HTML sebuah halaman web adalah dengan perintah View > Source / Page Source pada web browser. Di sana akan ditampilkan kode sumber HTML yang digunakan untuk menyusun halaman web yang tampil di browser. Berikut contoh kode HTML halaman web mesin pencari Google.

Ekstensi file HTML adalah .htm atau .html. Dokumen HTML dapat disusun secara manual melalui program pengolah teks seperti Notepad atau notepad ++, atau menggunakan program bantu Visual HTML Editor seperti Microsoft Frontpage atau Dreamweaver. Pengkodean HTML tidak terlepas dari penggunaan tag. Tag adalah standar frase tertentu yang digunakan untuk mengatur halaman web. Tag dipakai untuk mengatur apa saja yang ada di dalamnya. Oleh sebab itu, tag biasanya berupa sepasang frase yang disebut dengan tag pembuka dan tag penutup. Sebagai contoh, untuk mengatur judul halaman web, digunakan tag pembuka <TITLE> dan diakhiri dengan tag </TITLE>. Sebagai catatan, penggunaan huruf kapital atau huruf normal sama saja, tidak berpengaruh pada hasil halaman web.

struktur dokumen HTML

• Dokumen HTML diawali tag <HTML> dan diakhiri tag </HTML>.
• Judul halaman dan beberapa informasi mengenai dokumen HTML berada di antara tag <HEAD>...</HEAD>.
• Isi halaman web yang nantinya ditampilkan di web browser berada di antara tag <BODY>...</BODY>.

Coba susun kode contoh di atas menggunakan program Notepad. Simpan dengan Save As, pada File name isi latihan.html dan pada Save as type pastikan terpilih All Files (*.*). Jalankan pada web browser, maka hasilnya akan muncul.

Melayout Teks

Untuk memformat atau mengatur layout teks di halaman web, digunakan tag-tag sebagai
berikut :

<H1>, <H2>, hingga <H6> : untuk mengatur judul dan sub judul artikel di halaman web.
<P> : untuk menetapkan sekelompok kalimat menjadi sebuah paragraf.
<BR /> : untuk memenggal teks ke baris selanjutnya.
<HR /> : memberikan garis pemisah.
<B> : untuk memberi efek cetak tebal pada huruf.
<I> : untuk memberi efek cetak miring pada huruf.

Membuat Daftar

Anda bisa mengatur beberapa baris teks menjadi sebuah daftar, baik daftar berurut maupun daftar tidak berurut.

Daftar Berurut

Daftar berurut adalah daftar yang disajikan dalam urutan angka. Tag yang dipakai adalah tag <ol> dan <li>.

Daftar Tidak Berurut

Daftar tidak berurut adalah daftar yang disajikan dalam list bullet. Tag yang dipakai adalah tag <ul> dan <li>.

Membuat Link

Untuk menyisipkan link, digunakan tag <a>. Susunan sederhananya adalah : <a href=”URL”>Teks</a>

Mengenal Atribut

Beberapa tag HTML menggunakan atribut. Atribut merupakan informasi tambahan yang disisipkan ke sebuah tag pembuka. Atribut huruf dipakai untuk merujuk URL target link, sedangkan atribut src dipakai untuk merujuk URL target gambar yang akan ditampilkan. Tag <a> dan <img> juga dapat diberi beberapa atribut lainnya. Sebagian besar tag HTML dapat disisipi atribut. Ada beberapa atribut yang bisa diterapkan di berbagai tag, namun ada juga atribut yang hanya bisa diterapkan ke tag tertentu, seperti tag <a>dan <img> di atas. Atribut antara lain lazim dipakai untuk memformat style teks dan gambar, mengatur warna, dan mengatur tabel. style="background-color:red" (mengatur warna latar menjadi merah)

style="font-size:12px" (mengatur ukuran hurud menjadi 12 piksel)
style="font-family:Verdana" (mengatur teks menggunakan font Verdana)
style="text-align:center" (mengatur teks menjadi rata tengah)

Contoh pemakaiannya, coba sisipkan atribut style pada tag

<BODY> agar warna halaman menjadi merah :
<BODY style="background-color:red">

Membuat Tabel

Untuk membuat tabel, digunakan tag <table>. Selain itu, diperlukan tag <tr> untuk membuat baris tabel dan tag <td> untuk membagi baris tabel menjadi beberapa kolom.

Menyisipkan Gambar , Video dan Audio

untuk memasukkan gambar ke dalam dokumen HTML kita, digunakan tag <img>. Atribut-atribut yang biasa digunakan:

src untuk menunjukkan lokasi file gambar.
align untuk menentukan posisi dari gambar.
height untuk menentukan tinggi gambar dalam pixel ketika ditampilkan di browser.
width untuk menentukan lebar gambar dalam pixel ketika ditampilkan di browser. Apabila tidak disebutkan atribut height dan width, maka ukuran gambar yang ditampilkan di browser akan sama dengan ukuran file.
hspace untuk menentukan jarak antara gambar dengan text secara horizontal.
vspace untuk menentukan jarak antara gambar dengan text secara vertikal.
border untuk menentukan batas-batas pada gambar.

Untuk memasukkan audio ke dalam dokumen HTML kita, digunakan tag <embed>. Atribut-atribut yang digunakan:

src digunakan untuk menentukan lokasi file music
align digunakan untuk menentukan posisi.
border digunakan untuk menentukan batas-batas.
height digunakan untuk menentukan tinggi dari object yang dimasukkan.
width digunakan untuk menentukan lebar dari object yang dimasukkan.
hspace digunakan untuk menentukan jarak horizontal antara object dengan text.
vspace digunakan untuk menentukan jarak vertikal antara object dengan text.

Apabila kita ingin menjadikan lagu "pangandaran.mp3" di atas sebagai lagu latar (background) dalam halaman web kita, maka digunakan tag <bgsound>.

Untuk memasukkan video ke dalam dokumen HTML, juga digunakan tag yang sama yaitu tag <embed>
Penulisan kode HTML-nya juga menyerupai penulisan kode HTML untuk memasukkan file audio.

Contoh - contoh Latihan pembelajaran saat UKM cybertech.

Latihan 1