SubscribePengenalan 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