Sabtu, 15 Juni 2013
Salam Web11...
Setelah teman-teman membaca artikel kami sebelumnya yaitu
artikel html : Sejarah perkembangan dan pengertian html, saatnya kita sampai
pada artikel dasar-dasar cara membuat
html bagian 1.
Disini kita bisa sama-sama mulai belajar
tentang script HTML. kami akan menjelaskan tahap demi tahap agar teman-teman
bisa mengikuti sekaligus mengerti dengan materi pada artikel ini.
Sebelum kita mulai pada materi script HTML, ada beberapa
hal yang harus teman-teman persiapkan terlebih dahulu yakni :
1.
Text
Editor ( Software Penyunting Kode ): Software yang membantu kita dalam
penulisan script HTML. Contoh text Editor adalah : Crimson Editor, PHP Coder,
Notepad dll.
2.
Web Browser : Browser yang biasa kita gunakan. Contoh : Mozilla, Google Chrome,
Internet Explorer dll.
Setelah semua sudah siap, mari kita sama-sama mulai belajar
script HTML.
Hal pertama yang harus kita ketahui dalam scrip HTML
adalah elemen-elemen dasar dari script
HTML, yaitu :
· Tag
HTML
-
Tag HTML adalah kata kunci dikelilingi dengan sudut
kurung. Contoh <html>.
-
Tag HTML biasanya dibuat berpasangan. Contoh <html>
dan </html>.
-
Tag pertama disebut tag pembuka <html> dan Tag
akhir disebut tag penutup </html>.
·
Elemen HTML adalah isi dari tag awal dan tag akhir. Termasuk
tag HTML itu sendiri.
Bentuk umum dokumen HTML adalah
sebagai berikut :
<html>
<head>
<title>
Website Ku </title>
</head>
<body>
Ini
adalah dokumen HTML pertamaku
</body>
</html>
Jenis-jenis Tag html :
Sebelum teman-teman belajar tag html,
buatlah dahulu folder sebuah belajar tag html dimana saja. Agar memudahkan
teman-teman dalam pembelajaran materi ini. Di folder itulah nantinya
teman-teman menyimpan script-script html yang saya berikan ini. Di dalam folder
tersebut, buatlah folder gambar. Disana tempat kita menyimpan gambar-gambar
yangberhubungan dengan materi ini.
1. Memberikan Komentar atau keterangan pada script html.
·
Teori
<!--
--> adalah tag untuk Memberi
komentar atau keterangan. Kalimat yang terletak pada
tag kontiner
ini tidak akan ditampilkan pada browser.
·
Praktek
Ketikkan Script dibawah ini pada Text editor, setelah itu
simpan dengan nama komentar.html pada folder belajar tag html yang
telah kita buat.
Kemudian buka file komentar.html tersebut menggunakan browser teman-teman dan
lihat hasilnya.
<html>
<head>
<title> Design-web11 </title>
</head>
<body>
<!-- Ini
adalah script untuk menampilkan kalimat pada browser -->
Design-web11
</body>
</html>
2. Membuat link pada script html.
·
Teori
<a href> adalah
tag untuk Membuat
link ke halaman lain atau ke bagian lain dari halaman
Tersebut
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama link.html
pada folder belajar tag html yang telah kita buat. Kemudian buka file komentar.html tersebut menggunakan
browser teman-teman klik tulisan test dan lihat hasilnya. Teman-teman akan
dibawa ke halaman komentar.html yang pertama kali teman-teman buat .
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
<a
href="komentar.html">test</a>
</body>
</html>
3. Mendefinisikan daerah link pada script html.
·
Teori
<area> Mendefinisikan daerah yang dapat diklik
(link) pada image map.
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama area.html
pada folder belajar tag html yang telah kita buat. Setelah itu download file gambar
menggunakan link dibawah ini, simpan file gambar didalam folder gambar. Setelah
teman-teman membuat script ini, teman-teman mengganti tulisan yang dicetak
tebal sesuai dengan letak gambar yang teman-teman tadi download. Kemudian buka file
area.html tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<body>
<p>Klik gambar planet yang ingin kamu perbesar</p>
<img src="planets.gif"
width="145" height="126" alt="Planets"
usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126"
alt="Sun" href="sun.gif">
<area shape="circle" coords="90,58,3"
alt="Mercury" href="mercur.gif">
<area shape="circle" coords="124,58,8"
alt="Venus" href="venus.gif">
</map>
</body>
</html>
Link Gambar : Gambar area
4. Membuat teks tebal (Bold) pada script html.
·
Teori
<b> Membuat teks tebal.
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama bold.html pada folder belajar tag html yang telah kita buat. Kemudian buka file bold.html tersebut
menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
<b>Design-web11</b>
</body>
</html>
5. Membuat atribut teks default pada script html.
·
Teori
<basefont> Membuat atribut teks default
seperti jenis, ukuran dan warna font
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama basefont.html pada folder belajar tag html yang telah kita buat. Kemudian buka file basefont.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
<basefont
color=”red” size=”5”>
</head>
<body>
Design-web11
</body>
</html>
6.
Memperbesar ukuran teks pada script html.
·
Teori
<big> Memperbesar ukuran teks sebesar satu
point dari defaultnya
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama big.html pada folder belajar tag html yang telah kita buat. Kemudian buka file big.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
Desing-web11
<big>Design-web11</big>
</body>
</html>
7. Pindah baris pada script html.
·
Teori
<br> Pindah baris
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama br.html pada folder belajar tag html yang telah kita buat. Kemudian buka file br.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
Design-web11<br>Sedang
Belajar HTML
</body>
</html>
8. Membuat caption table pada script html.
·
Teori
<caption>
Membuat caption
pada tabel
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama caption.html pada folder belajar tag html yang telah kita buat. Kemudian buka file caption.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
table
border="1">
<caption>Monthly
savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
9. Perataan tengah teks atau gambar pada script html.
·
Teori
<center> Untuk perataan tengah terhadap teks
atau gambar
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama center.html pada folder belajar tag html yang telah kita buat. Kemudian buka file center.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-web11</title>
</head>
<body>
<center>Design-web11</center>
</body>
</html>
10. Membuat jarak indent pada script html.
·
Teori
<dd> Indents teks.
·
Praktek
Ketikkan Script dibawah
ini pada Text editor, setelah itu simpan dengan nama indent.html pada folder belajar tag html yang telah kita buat. Kemudian buka file center.html
tersebut menggunakan browser teman-teman dan lihat hasilnya.
<html>
<head>
<title>
Design-Web11</title>
</head>
<body>
<dl>
<dt>Coffe</dt>
<dd>Black Hot Drink</dd>
<dt>Milk</dt>
<dd>White Cold Drink</dd>
</dl>
<dt>Coffe</dt>
<dd>Black Hot Drink</dd>
<dt>Milk</dt>
<dd>White Cold Drink</dd>
</dl>
</body>
</html>
Untuk artikel dasar-dasar membuat html bagian 1 kami cukup kan sampai disini. Kami yakin teman-teman sedang ada dipersimpangan jalan dimana antara mengerti dan tidak mengerti, antara semangat untuk maju dan mundur ditengah jalan. Maka dari itu kami batasi pembelajaran nya tiap bagian untuk teman-teman bisa istirahat sejenak dan mereview ulang materi-materi yang kami sampaikan diatas tadi, dan bila teman-teman sudah siap kembali maka akan kami lanjutkan pada artikel dasar-dasar membuat html bagian 2. ( kritik dan saran dari pembaca sangat kami harapkan untuk meningkatkan kualitas dari artikel yang kami buat ).
