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 (Notepad ++) atau dengan teks editor biasa (misal Notepad biasa di windows).
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. Definisi 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">
.... isi di Web yang ingin di munculkan :) .....
</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> <~~ tag BOLD
................
</b> <~~ tag BOLD
</p>Modul praktikum Bu Beatrix 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 di CC</title>
</head>
<body text="red" bgcolor="aqua" background="image027.jpg">
Belajar bahasa pemrograman web HTML ternyata easy, easy, difficult
</body>
</html>
catatan:
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>
`Header dimulai dari H1 (yang terbesar) sampai H7 (yang terkecil)
`Sedangkan Font Size dimulai dari 7(yang terbesar) sampai 1(yang terkecil)
<p>Selamat datang pada <b>web site</b> ku 'ALAY' <BR>
Ini adalah <i>penulisan HTML</i> langsung pakai teks editor
<font face=ARIAL><b>Dan Huruf ini Arial diatur oleh pembuatnya</b><BR>
dari editor<font face="TIMES NEW ROMAN" Color="ff0000" size=16> dan selesai dan mulai gaje~ </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>
<p>Lalalala~ dan seterusnya..</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
No. Nama
1. Jason Fitzgerald
2. Benitius Arjuna Soegiono
3. Giohans Koisnyer
Nama file: latihan1table.html
<html>
<head> <title>Latihan Table/title> </head>
<body>
<table align="center" border="2" bgcolor="cyan" cellpadding="5"
cellspacing="0" >
<caption align="top"><b>Tabel 1</b></caption>
<tr>
<th width="50">No.</th>
<th width="200">Nama</th></tr>
<tr>
<td>1.</td>
<td>Jason Ftzgerald</td>
</tr>
<tr>
<td>2.</td>
<td>Benitius Arjuna Soegionooo..</td>
</tr>
<tr>
<td>3.</td>
<td>Giohans Sakaw</td>
</tr>Di CC laki Semua
</table>
</body>
</html>
Dah Cukup itu dulu aja ya, pelajarin pasti bisa.. Semoga Sukses
dan Bisa HTMLnya :)
GOOD LUCK ! ;) GBU Always..
Dah Cukup itu dulu aja ya, pelajarin pasti bisa.. Semoga Sukses
dan Bisa HTMLnya :)
GOOD LUCK ! ;) GBU Always..
Tidak ada komentar:
Posting Komentar