Seorang blogger setidaknya harus memahami isi html blog yang dimiliki, yah meskipun tidak merupakan suatu keharusan sih. Baiklah bagi yang berminat mendalami kode html, berikut napetis berikan petunjuk singkatnya.
Definisi
HTML (HiperText Markup Language) adalah merupakan sebuah bahasa text
yang digunakan untuk membuat sebuah halaman web untuk menampilkan
informasi-informasi ke sebuah software browser di internet seperti
internet explorer, mozila firefox dan lainnya.
Memulai HTML
Software apakah yang digunakan untuk menulis bahasa HTML ? untuk menulis
bahasa html biasa digunakan software bawaan windows yaitu notepad
tetapi bisa juga menulis HTML pada Microsoft Front Page, DOS Edit.
Untuk membuat sebuah bahasa HTML pada notepad harus disimpan (save)
dengan akhiran atau extensi html agar bisa dibaca oleh web browser,
sebagai contoh latihan1.html.
Menjalankan HTML
Setelah membuat sebuah proyek HTML dengan cara mengetik pada notepad, selanjutnya HTML tersebut coba dijalankan dengan menggunakan sotware browser yang ada pada komputer anda, misalnya Internet Explorer yang merupakan bawaan windows, atau bisa juga dengan firefox, gunakan salah satunya.
Cara membuka file HTML
Jalankan wbe browser anda (IE atau firefox), jika menggunakan Internet Explorer, maka klik menu File kemudian pilih Open, selanjutnya cari file html yang barusan anda buat kemudian klik open. Apabila menggunakan firefox maka klik menu File kemudian pilih Open File, selanjutnya cari file html yang sudah dibuatkan tadi kemudian klik Open.
bentuk dasar dari html adalah :
<html>
<head>
<title>
Judul HTML pertamaku
</title>
</head>
<body>
body/isi HTML pertamaku.
</body>
</html>Untuk mencoba sebuah proyek html anda yang baru, coba buka notepad kemudian ketikan kode di atas dan simpan (save) dengan nama file latihan1.html kemudian coba jalankan pada browser (Internet Explorer/Mozilla Firefox) di komputer anda.
Oke, setelah bisa membuat dasar html, berikutnya adalah tentang heading.
Heading
Atau biasa disebut Judul. Ada beberapa jenis heading yang kita temui, berikut adalah variannya:
- <h1>Judul 1</h1>
- <h2>Judul 2</h2>
- <h3>Judul 3</h3>
- <h4>Judul 4</h4>
- <h5>Judul 5</h5>
- <h6>Judul 6</h6>
Penjelasannya :
<h1>....</h1> adalah merupakan penulisan judul dengan ukuran
huruf yang paling besar dan untuk <h2>...</h2> dan
seterusnya sampai <h6>...</h6> adalah judul kedua sampai
dengan judul keenam dengan ukuran huruf semakin besar nilainya maka
semakin kecil ukuran hurufnya.
Sebagai praktek buatkan atau ketik kode HTML berikut ini pada notepad kemudian simpan dengan nama file praktek2.html kemudian buka atau jalankan pada web browser anda dan perhatikan hasil yang terjadi.
<h1>Judul Baris Pertama</h1>
<h2>Judul Baris Kedua</h2>
<h3>Judul Baris Ketiga</h3>
<h4>Judul Baris Keempat</h4>
<h5>Judul Baris Kelima</h5>
<h6>Judul Baris Keenam</h6>
Dan hasilnya akan terlihat seperti berikut:
Judul Baris Pertama
Judul Baris Kedua
Judul Baris Ketiga
Judul Baris Keempat
Judul Baris Kelima
Judul Baris Keenam
Oke? Bisa? Sip!! Pindah ke materi berikutnya.
Tabel
Bentuk HTML tabel pada dasarnya adalah seperti berikut
<table>
<tr>
<td>kolom1 </td><td>kolom2 </td>
</tr>
<tr>
<td>kolom1 </td><td>kolom2 </td>
</table>
Penjelasan
<tabel>dan </tabel>adalah merupakan batasan area HTML untuk tabel.
<tr>dan </tr>menyatakan batasan untuk sebuah baris dalam table.
<td>dan </td>adalah batasan untuk data dalam sebuah sel
tabel, pada bentuk penulisan HTML di atas pada kata "kolom1" dan
"kolom2" yang pertama menyatakan posisi sel kolom1 baris1 dan kolom2
baris1 sedangkan untuk kata "kolom1" dan "kolom2" yang kedua adalah
menyatakan posisi sel berada pada kolom1 baris2 dan kolom2 baris2.
Contoh
<table border="1">
<tr>
<td>baris1 kolom1 </td>
<td>baris1 kolom2 </td>
</tr>
<tr>
<td>baris2 kolom1 </td>
<td>baris2 kolom2 </td>
</tr>
<tr>
<td>baris3 kolom1 </td>
<td>baris3 kolom2 </td>
</tr>Penambahan border="1" adalah dengan maksud memberikan batasan antar setiap sel dengan sbuah garis atau tabel bergaris, jika tabel dibuat tidak bergaris maka tinggal menghilangkan penulisan border. Angka 1 pada kata border="1" menyatakan nilai atau ukuran garis pada tabel tersebut, semakin besar nilainya maka semakin besar pula garisnya.
ketiklah contoh di atas pada notepad kemudian simpan dengan nama file latihan3.html dan coba jalankan dari browser pada komputer anda.
Hasilnya jika di jalankan pada browser akan terlihat seperti di bawah ini :
Udah bisa kan? Sekarang tentang format teks.
Format Teks
Suatu paragraf atau alinea memiliki tag <p> untuk awal paragraf sedang untuk tag penutup adalah </p>.
penulisan sintaksnya adalah :
<p>
...................
</p>
tag <p> memiliki attribut align yang memiliki nilai left, right dan center dan sintaksnya sebagai berikut :
<p align="left">
...................
</p>
contoh :
<p align="center">
Ini adalah HTML rata tengah
</p>
<p align="right">
Ini adalah HTML rata kanan
</p>
<p align="left">
Ini adalah HTML rata kiri
</p>
ketiklah contoh di atas pada notepad kemudian simpan dengan nama file format.html dan coba jalankan pada browser dan lihat hasilnya.
Font atau huruf memiliki tag <font> dengan attribute color, face dan size, sintaksnya akan menjadi
<font color="red" face="arial" size="10">
ini HTML font
</font>
Terakhir, tentang list/daftar.
Untuk elemen ol memiliki attribut start dan type, start
untuk menentukan format penomoran awal, sebagai contoh apabila dimulai
dengan nomor 1 maka start akan diberikan attribut 1 (start="1" dan
apabila ingin memulai dengan nomor 2 atau tiga atau empat maka attribute
untuk startnya sesuaikan dengan awal penomoran tersebut.
HTML untuk elemen ul (unordered list) digunakan untuk membuat list tanpa
adanya nomor urut baik berupa angka maupun abjat seperti 1, A, a, I, i
dan sebagainya melainkan berupa bentuk lingkaran, kotak maupun bundar
dan memiliki attribute type yang berfungsi untuk mengubah bentuk attribute tersebut.
HTML untuk elemen li (list item) juga memiliki attribute start dan type
Berikut ini beberapa contoh html untuk elemen ol, ul dan li.
Contoh HTML untuk ol dan li
Link Blogku
<ol>
<li>Home</li>
<li>Sitemap</li>
<li>Backlink</li>
<li>Mail Us</li>
</ol>
Hasilnya seperti berikut :
Link Blogku
- Home
- Sitemap
- Backlink
- Mail Us
Link Blogku
<ul>
<li>Home</li>
<li>Sitemap</li>
<li>Backlink</li>
<li>Mail Us</li>
</ul>
Hasilnya seperti berikut
Link Blogku
- Home
- Sitemap
- Backlink
- Mail Us
Sebenarnya ada buaaanyak sekali kode html yang lain:
Misal <br>......</br> atau <div>....</div> dan banyak lagi
Silahkan bongkar sendiri blog anda, dan mulailah berkreasi, namun sebelumnya jangan lupa untuk membuat terlebih dahulu back up nya. Inti dalam html, setiap dimulai dengan '<x>' maka harus ditutup dengan '</x>' paham kan??
Misal nih ada kode <life> maka akhirnya adalah </life> (heheu, cuma bercanda)
P.S: untuk para master, maaf kalo ada yang salah dari tulisan di atas, mohon bimbingannya, ane masih newbie gan :)
Disadur dari: http://belajar-ilmu-komputer.blogspot.com
