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.
Media yang dibutuhkan dalam pembuatan sebuah halaman
website atau untuk mempelajari bahasa pemrograman HTML ini boleh dikata cukup simple.
Kita hanya membutuhkan beberapa perangkat sebagai berikut :
1.
Komputer, dengan spesifikasi minimal :
a.
Pentium IV
b.
RAM 256 MB
c.
Harddisk 40 GB
2.
Notepad
Untuk Notepad
kita gunakan sebagai media editor. Yang mana fungsi dari media editor ini
adalah untuk membuat skrip program dalam pembuatan halaman website. Namun
sekarang ini ada sebuah media editor yang cukup membantu dan praktis, yaitu salah
satunya Notepad ++. Untuk mendapatkan
media editor tersebut anda cukup searching di mbah Google
aja, atau ketik alamat URL berikut : http://www.softpedia.com/get/Office-tools/Text-editors/Notepad-plus-plus.shtml.
Alasan kenapa kita
tidak menggunakan Dreamweaver, Joomla, atau sejenisnya ? Karena alasan
terpenting disini adalah kita ingin belajar bahasa pemrogramannya, bukan
bagaimana menggunakan aplikasi tersebut, untuk itu kita perlu paham dan cermati
betul langkah – langkahnya, struktur dasar dari bahasa pemrogramannya, ekstensi
penyimpanan, sampai dengan eksekusi untuk menjalankan atau menampilkan program
tersebut.
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>
0 comments:
Post a Comment