Pengenalan HTML
1. Apa itu dokumen HTML?
HTML adalah kependekan dari Hyper Text Marup Language.
Dokumen HTML adalh file text nurni yang dapat dibuat dengan editor teks
sembarang. Dokumen ini dikenal sebagai web page. Dokumen ini Umumnya
berisi informasi atau pun interface aplikasi dalam internet.
Ada dua cara untuk membuat web page, yaitu dengan HTML editor atau dengan teks editor biasa (misal Notepad).
2. Penamaan Dokumen
Untuk penamaan dokumen, setelah menuliskan nama dokumen kemudian tambahkan sebuah ekstensi .htm atau .html
3. Definisi Elemen
Dokumen
HTML disusun oleh elemen-elemen. “Elemen” merupakan istilah bagi
komponen-komponen dasar pembentuk dokumen HTML. Beberapa contoh elemen
adalah : head, body, table, paragraph dan list. Elemen dapat berupa teks
murni atau bukan teks, atau keduanya.
4. Devinisi Tag
Untuk
menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan
Tag. Tag HTML terdiri atas sebuah kurung siku (<), sebuah nama tag,
dan sebuah kurung sudut kanan (>). Tag umumnya berpasangan (missal
<h1> dengan </h1>), tag yang menjadi pasangan selalu diawali
dengan karakter gaaring (/ garis miring). Tag yang pertama menunjukan
awal elemen dan yang kedua menunjukan akhir, berarti akhir elemen.
Ada beberapa elemen yang tidak mengharuskan tagnya dituliskan secara berpasangan, elemen tersebut diantaranya adalah :
- Paragraph dengan tag <p>
- Ganti baris – line break dengan tag <br>
- Garis datar – horizontal rule dengan tag <hr>
- List item dengan tag <li>
Secara umum suatu elemen dalam dokumen HTML yang dinyatakan dengan tagnya dituliskan :
<nama tag> … </nama tag>
Penulisan
tag bebas, dapat menggunakan huruf kecil, huruf besar atau pun campuran
(tidak case sensitive). Tetapi untuk antisipasai pada standar penulisan
tag, direkomendasikan untuk menuliskan tag dengan menggunakan huruf
kecil semua.
5. Elemen HTML yang dibutuhkan
Secara umum
dokumen web dibagi menjadi dua section (bagian), yaitu section head dan
section body. Sehingga setiap dokumen HTML harus mempunyai pola dasar
sebagai berikut :
<html>
<head>
<title>Latihan1</title>
</head>
<body text="red">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Setiap
dokumen html harus diawali dengan menuliskan tag <html> dan tag
</html> di akhir dokumen. Tag ini menandai elemen html, yang
berarti dokumen ini adalah dokumen HTML. Dalam satu dokumen hanya ada
satu elemen html.
Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a. Tag
Adalah
teks khusus (markup) berupa dua karakter "<" dan ">", sebagai
contoh <body> adalah tag dengan nama body. Secara umum tag ditulis
secara berpasangan, yang terdiri atas tag pembuka dan tag penutup
(ditambahkan karakter "/" setelah karakter "<"), sebagai contoh
<body> ini adalah tag pembuka isi dokumen HTML, dan </body>
ini adalah tag penutup isi dokumen HTML.
b. Element
Element
terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.
Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser
digunakan element title, dimana: <title> ini adalah tag pembuka
judul dokumen HTML. Disini Judul Dokumen HTML ini adalah isi judul
dokumen HTML </title> ini adalah tag penutup judul dokumen HTML.
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak
boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
c. Attribute
Attribute
mendefinisikan property dari suatu element HTML, yang terdiri atas nama
dan nilai. Penulisannya adalah sebagai berikut:
<TAG>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
</TAG>
Secara
umum nilai attribute harus berada dalam tanda petik satu atau dua.
Sebagai contoh, untuk membuat warna teks menjadi kuning dan
latarbelakang halaman web menjadi hitam, penulisannya adalah
<body bgcolor="black" text="yellow">
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. Sintaks:
<html>
..........
</html>
e. Element HEAD
Merupakan
kepala dari dokumen HTML. Tag <head> dan tag </head>
terletak di antara tag <html> dan tag </html>.
Sintaks:
<html>
<head>
...........
</head>
<body>
<p>
<b>
................
</b>
</p>Modul praktikum html 2
</body>
</html>
f. Element TITLE
Merupakan
judul dari dokumen HTML yang ditampilkan pada judul jendela browser.
Tag <title> dan tag </title> terletak di antara tag
<head> dan tag </head>.
Sintaks:
<title>
.........
</title>
g. Element BODY
Element
ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag
</body> terletak di bawah tag <head> dan tag </head>.
Element BODY mempunyai attribute-attribute yang menspesifikasikan
khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada
browser. Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............
</body>
keterangan
: Attribute text memberikan warna pada teks, bgcolor memberikan warna
pada latarbelakang dokumen HTML, background memberikan latarbelakang
dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk
link, alink memberikan warna untuk link yang sedang aktif, vlink
memberikan warna untuk link yang telah dikunjungi.
Jika
attribute bgcolor dan background keduanya dispesifikasikan maka
attribute background yang akan digunakan, akan tetapi jika nilai
attribute background (gambar) tidak ditemukan pada dokumen HTML
makaattribute bgcolor yang akan digunakan.
Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html
<html>
<head>
<title>Latihan1-4</title>
</head>
<body text="red" bgcolor="aqua" background="./images/image027.jpg">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
catatan:
./images/ = nama direktori file gambar disimpan
image027.jpg = nama file gambar
<HTML>
<HEAD>
<TITLE>Halaman Web Ku Pertama</TITLE>
<BODY>
<H1>JUDUL DENGAN HEADER 1 </H1><BR>
<H2>JUDUL DENGAN HEADER 2 </H2><BR>
<H3>JUDUL DENGAN HEADER 3 </H3><BR>
<p>Selamat datang pada <b>web site</b> ku <BR>
Ini adalah <i>penulisan HTML</i> langsung pakai teks editor
<font face=ARIAL><b>Dan Huruf ini Arial diatur</b><BR>
dari
editor<font face="TIMES NEW ROMAN" Color="ff0000" size=16> dan
selesai </font><font face="COURIER" Color="0000ff" >efek
font</p>
<p>Dan ini adalah paragraf baru dan selesai efek font</p>
<p>Dan ini adalah paragraf baru</p>
<BODY>
</HTML>
h. ELEMENT TH (Table Header) dan TD (Table Data)
Element
TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel
sebagai header sel pada kolom tabel dan datanya tercetak tebal dan
dengan posisi ditengah sel. Element TH dan TD ini harus terletak di
dalam element TR. Attribute kedua element ini adalah align, valign,
bgcolor, colspan, rowspan Sintaks:
<th
align="left"|"center"|"right" valign="top"|"middle"|"bottom"
bgcolor="color" colspan="number" rowspan="number">
.......................... </th>
<td
align="left"|"center"|"right" valign="top"|"middle"|"bottom"
bgcolor="color" colspan="number" rowspan="number">
.......................... </td>
Contoh html tabel :
Tabel 1.1
No. Nama
1. Rina Hastuti
2. Ali Amran
3. Rahmat
Nama file: latihan4_1.html
<html>
<head> <title>Latihan4-1</title> </head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5"
cellspacing="0" >
<caption align="top"><b>Tabel 1.1</b></caption>
<tr>
<th width="50">No.</th>
<th width="200">Nama</th></tr>
<tr>
<td>1.</td>
<td>Rina Hastuti</td>
</tr>
<tr>
<td>2.</td>
<td>Ali Arman</td>
</tr>
<tr>
<td>3.</td>
<td>Rahmat Hidayat</td>
</tr>Praktikum html
</table>
</body>
</html>
0 Comments:
Post a Comment
Budayakan Meninggalkan Komentar Setelah Membaca Sebuah Artikel :)