HTML ( Hypert Text Mark-up Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman website. HTML juga merupakan bahasa pemrograman web dasar yang bersifat statis. Dikatakan statis, dikarenakan dalam pembuatannya kita masih perlu menginputkannya dalam skrip program dan berkala untuk update datanya. Yangmana hasil dari pembuatan halaman website nanti hanya sebatas pemberian sebuah informasi saja
Struktur Dasar HTML
Berikut ini adalah struktur dasar dari HTML, beserta dengan penjelasan singkatnya :
<html> -> Tag pembuka / awal untuk bahasa pemrograman HTML
<head> -> Tag pembuka header untuk dokument HTML
<title></title> -> Judul halaman dokumen HTML
</head> -> Tag penutup header
<body> -> Tag pembuka body / isi dokument HTML
---- isi untuk tampilan pada browser -----
</body> -> Tag penutup body / isi dokument HTML
</html> -> Tag penutup HTML
Untuk lebih memahami dan mengerti maksut dari bagian atau elemen struktur HTML diatas, mari kita lihat contoh dibawah ini :
<html>
<head>
<title> Pembuatan Dokument HTML </title>
</head>
<body>
Ini adalah isi dari dokument HTML yang kita buat dan akan tampil pada layar browser.
</body>
</html>
Sampai disini sudahkah Anda memahami dan mengerti tentang struktur dasar dari HTML dan pembuatan dokumen HTML yang sederhana diatas ? Kalau belum kita akan coba ulang kembali contoh diatas, namun jika Anda telah memahaminya maka tahap berikutnya adalah metode penyimpanannya.
Setelah kita menuliskan skrip diatas dalam sebuah Notepad, tentunya kita akan melakukan penyimpanan terlebih dahulu sebelum dieksekusi. Adapun langkahnya sebagai berikut :
1. Pilih Menu File -> Save As atau dengan tombol CTRL + S
2. Tentukan dimana letak penyimpanan untuk menyimpan file tersebut, kemudian tuliskan nama filenya
3. Setelah menentukan letak penyimpanan dan nama filenya, silahkan anda tambahkan ekstensi . htm atau .html pada bagian akhir nama file Anda.
Bagaimana untuk menjalankan skrip program HTML yang barusan kita buat tadi ? berikut ini adalah langkah – langkahnya :
1. Silahkan anda cari dimana letak Anda menyimpan file notepad tadi
2. Double klik file tersebut
atau
1. Buka Browser
2. Pilih Menu Open atau gunakan tombol CTRL + O, kemudian Anda cari file yang disimpan tadi lalu Open
Attribut dari Struktur HTML <body>
Perlu diketahui bahwa untuk Tag pembuka pada body -> <body> didalamnya memiliki beberapa attribute diantaranya seperti :
1. Latar belakang / background warna
Adalah membuat latar belakang halaman website dengan warna saja. Untuk penulisan skripnya seperti ini : <body bgcolor=yellow>
2. Latar belakang / background gambar
Adalah membuat sebuah latar belakang halaman website dengan menggunakan gambar, untuk tipe gambarnya dapat berupa : jpg, jpeg, gif, bmp, dsb. Untuk penulisan dalam bentuk skrip HTML sebagai berikut :
<body background=mawar.jpg>
Penulisan mawar.jpg, dikarenakan gambar berada dalam satu folder dengan skrip. Akan tetapi apabila gambar itu berada diluar folder dimana skrip berada, silahkan Anda tuliskan dengan lengkap letak dimana gambar itu berada. Misal : gambar mawar.jpg yang akan saya pakai berada di drive C://my document maka untuk penulisan skripnya sebagai berikut :
<body background=“c://my document/mawar.jpg”>
3. Margin
Adalah untuk mengatur jarak tepi dari halaman website tersebut. Di sini margin ada 4 bagian seperti layaknya margin pada sebuah paper, yaitu : Top, Bottom, Left, dan Right. Untuk penulisan pada dokumen HTML sebagai berikut :
<body topmargin=10> -> untuk mengatur tepi atas saja
<body topmargin=10 bottommargin=10> -> untuk mengatur lebih dari satu tepi, yaitu : atas dan bawah
<body topmargin=10 bottommargin=10 leftmargin=10 rightmargin=10> -> untuk mengatur semua tepi sekaligus baik atas, kiri, kanan, maupun bawah sekaligus.
4. Warna Link
Adalah membuat warna link, dimana warna link ini berbeda – beda pada saat sebelum di klik, dan pada saat setelah diklik. Adapun cara penulisannya dalam HTML :
<body alink=red vlink=green>
5. Warna Teks
Adalah untuk memberikan warna teks secara default yang akan ditampilkan pada halaman website. Untuk penulisannya seperti ini :
<body text=red>
Bagaimana sekarang sudah mengerti bukan bagaimana struktur dasar pada HTML dan attribute dari tag body ? Nah, kalau memang sudah paham dasar – dasarnya mari kita memulai dengan step selanjutnya, yaitu memodifikasi teks.
Memodifikasi Teks
Dalam memodifikasi teks ini kita akan Jenis – jenis font, ukuran font, heading, paragraf, dan allignment. Untuk mengawali sub bab berikut ini kita mulai dengan pembuatan heading terlebih dahulu.
1. Heading
Teks dalam dokumen umumnya mempunyai judul topik, dalam dokumen HTML disebut dengan Heading. Heading didalam HTML akan ditampilkan dalam tulisan bercetak tebal. Heading juga berarti untuk menunjukkan tingkat keberartian dari teks.
Ada 6 tingkatan heading dalam HTML, yang dinomori mulai dari angka satu sampai dengan enam. Nomor 1 atau heading1 menghasilkan teks judul yang terbesar, sedangkan nomor 6 atau heading6 menghasilkan teks judul terkecil. Sehingga kesimpulannya semakin angka heading itu besar, maka semakin kecil teks yang akan ditampilkan dengan batasan sampai dengan angka 6.
Adapun sintak penulisan dalam HTML sebagai berikut :
<h1>Penulisan Teks Heading Nomor 1</h1>
<h2>Penulisan Teks Heading Nomor 2</h2>
<h3>Penulisan Teks Heading Nomor 3</h3>
<h4>Penulisan Teks Heading Nomor 4</h4>
<h5>Penulisan Teks Heading Nomor 5</h5>
<h6>Penulisan Teks Heading Nomor 6</h6>
2. Paragraf
Setiap paragraf harus dimulai dengan pemberian tag <p> dan diakhiri dengan tag </p>. Namun sebenarnya dalam pembuatan sebuah paragraf tidak perlu diberikan tag akhir tidak mengapa, karena dalam setiap kita akan membuat sebuah paragraf harus diawali dengan tag <p>.
Contoh :
<p>
Setiap paragraf harus dimulai dengan pemberian tag “<p>” dan diakhiri dengan tag “</p>”. Namun sebenarnya dalam pembuatan sebuah paragraf tidak perlu diberikan tag akhir tidak mengapa, karena dalam setiap kita akan membuat sebuah paragraf harus diawali dengan tag “<p>”.
<p>
Demikian pengertian untuk pembuatan paragraf dalam struktur HTML.
</p>
3. Jenis dan ukuran font
Untuk mengawali pembuatan font disini kita akan mempelajari bagaimana membuat sebuah teks dengan mengganti jenis dan ukuran pada font. Untuk membuat sebuah modifikasi teks maka kita harus mengawalinya dengan tag <font> dan diakhiri dengan tag </font>. Misal disini kita akan merubah jenis / style teks yang sudah ada sebelumnya pada sebuah dokument HTML menjadi jenis font monotype corsiva , maka penulisannya sebagai berikut :
<font face=”monotype corsiva”>
Ini adalah isi dari dokument HTML yang kita buat dan akan tampil pada layar browser.
</font>
Kemudian untuk merubah ukuran teksnya :
<font size=5>
Ini adalah isi dari dokument HTML yang kita buat dan akan tampil pada layar browser.
</font>
Untuk ukuran huruf bisa kita berikan dari angka 1 samapi dengan 7.
Kemudian untuk merubah warna teksnya :
<font color=red face=calibri size=2>
Ini adalah isi dari <font size=5 face=jokerman>dokument HTML</font> yang kita buat dan akan tampil pada layar browser.
</font>
4. Allignment
Adalah untuk mengatur posisi sebuah obyek. Untuk posisi allign dibagi menjadi 2 yaitu allign untuk horisontal dan vertikal. Untuk allign secara horisontal ada 4, yaitu : left, right, center, dan justify.
a. Left untuk membuat sebuah obyek rata ke sebelah kiri.
b. Right untum membuat sebuah obyek rata ke sebelah kanan.
c. Center untuk membuat sebuah obyek rata tengah.
d. Justify untuk membuat sebuah obyek rat kiri dan kanan.
Sedangkan allign secara vertikal terdiri dari : top, middle / center, bottom.
a. Top, untuk mengatur posisi obyek rata atas secara vertikal
b. Center, untuk mengatur posisi obyek rata tengah secara vertikal
c. Bottom, untuk mengatur posisi obyek rata bawah secara vertikal
Allignment penerapannya berbeda – beda :
1. Allignment diterapkan dalam struktur HTML :
<center>Misal teks ini saya buat rata tengah</center>
<left>Gambar rata kiri <img src=mawar.jpg></left>
<right>Ini rata kanan <img src=mawar.jpg></right>
2. Allignment diterapkan dalam paragraf :
<p align=center>
<p align=right>
Membuat List
List merupakan bentuk umum yang sering kita jumpai dalam membuat suatu daftar. Dalam HTML List dibagi menjadi 3, yaitu :
1. List dengan nomor ( ordered List )
2. List tanpa nomor ( unordered List )
3. List definisi.
1. List dengan nomor ( ordered List )
Adalah model daftar yang setiap itemnya diberikan nomor. Adapun sintak dalam HTML :
<ol> -> tag pembuka diambil dari kata ordered list
<li>item 1</li> -> diawali tag pembuka dan diakhiri tag penutup list, secara default menggunakan angka 1,2,3,...dst...
</ol> -> tag penutup ordered list
Berikut ini adalah type yang dapat digunakan sebagai attribute dalam ordered list :
Type
Keterangan
A
Mengubah menjadi abjad dengan huruf besar
a
Mengubah menjadi abjad dengan huruf kecil
i
Mengubah menjadi angka romawi dengan huruf kecil
I
Mengubah menjadi angka romawi dengan huruf besar
Untuk penerapannya sebagai berikut :
<ol type=A>
<li>List satu</li>
</ol>
Merubah awalan / dimulainya list atau daftar :
Misal akan membuat sebuah list dengan menggunakan abjad huruf besar dimulai E, maka penerapannya sebagai berikut :
<ol type=A start=5>
<li>List kelima</li>
<ol>
2. List tanpa nomor ( unordered List )
Adalah model daftar yang setiap itemnya diberikan tanpa nomor tetapi berbentuk bullet. Untuk jenis unordered list ini juga tidak jauh berbeda dengan ordered list. Kalau ordered memiliki beberapa type disini juga memiliki beberapa jenis bentuk bullet, antara lain :
Type
Keterangan
Disc
Berbentuk lingkaran berwarna hitam didalamnya
Circle
Berbentuk lingkaran kosong
Square
Berbentuk kotak / box
Penerapan dalam sintak HTML :
<ul> tag pembuka diambil dari nama unordered list
<li>item pertama</li> list bullet
</ul> Tag penutup unordered list
3. List definisi.
List ini digunakan untuk mendefinisikan sebuah daftar menjorok ke dalam. Sintak dalam HTMLnya sebagai berikut :
<dl> tag pembuka definisi list
<dt> tag definisi term
</dt> tag penutup definisi term
<dd> definisi deskripsi
</dd> akhir dari definisi deskripsi
</dl> tag penutup definisi list
Contoh :
<dl>
<dt>
Makanan
</dt>
<dd>
Chicken Steak Crispy
</dd>
<dd>
Tenderloin Steak Crispy
</dd>
</dl>
