Dasar HTML
advertisement
STRUKTUR DASAR DOKUMEN HTML HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks biasa. Bisa di tulis menggunakan Notepad. Struktur dasar dokumen HTML adalah sebagai berikut: <html> <head> <title>Disini Judul Dokumen HTML</title> </head> <body> Disini penulisan informasi Web </body> </html> a. Tag Adalah teks khusus (markup) berupa dua karakter "<" dan ">". Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup, sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. b. Attribute Opsi-opsi dari nama tag disebut atribut. Penulisan atribut suatu tag di letakkan setelah nama tag. Jika lebih dari 1 atribut penulisaannya di pisah dengan spasi. Contoh : <font color="#00FFCC" size="20" >Belajar HTML </font> Nilai dari atribut ditulis setelah tanda sama dengan (=) Contoh: <html > <head> <title>Latihan Pertama</title> </head> <body> <b> <font color="#00FFCC" size="20" > <marquee behavior=”ALTERNATE”> Tak pernah berhenti </ marquee > </font> </b> </body> </html> Membuat Font Nama Font <p style="font-family:Comic sans MS;">huruf comic sans MS </p> Ukuran <p style="font-size:20px;">Ukuran huruf 20 pixels.</p> Gaya huruf <p style="font-style:italic;">huruf italic atau miring</p> Tebal Huruf <p style="font-weight:bold;">huruf tebal</p> Warna huruf <p style="color:red;">Huruf berwarna merah</p> Rata huruf <p style="text-align:right;">huruf rata kanan</p> Spasi huruf <p style="letter-spacing:5px;">Jarak antar huruf 5 pixels</p> Spasi kata <p style="word-spacing:50px;">Jarak antar kata 50 pixels </p> Dekorasi huruf <p style="text-decoration:overline;">Huruf di atasnya ada garis</p> <p style="text-decoration:line-through;">Huruf yang di coret</p> <p style="text-decoration:underline;">Huruf bergaris bawah</p> <p style="text-decoration:blink;">Huruf berkedip</p> Membuat Tulisan Berjalan <marquee behavior="slide" direction="left">Dari kiri. DIAM</marquee> <marquee behavior="scroll" direction="left">Dari kiri. BOLAK BALIK</marquee> <marquee behavior="alternate">Bolak Balik. Terus menerus</marquee> <marquee behavior="scroll" direction="up">Dari Bawah keatas. BolakBalik</marquee> <marquee behavior="scroll" direction="left" scrollamount="1">Dari kiri. Bolak Balik. Lambat</marquee> <marquee behavior="scroll" direction="left" scrollamount="20"> Dari kiri. Bolak Balik. Cepat </marquee> Membuat Tabel <table border="1"> <tr> <td>Data Satu</td><td>Data dua</td> </tr> </table> <table border="1" style="width:90%;"> <tr> <td>Data Satu</td><td>Data Dua</td> </tr> </table> <table border="1" style="width:90%;"> <tr> <th>Nama Kolom 1</th><th>Nama Kolom 2</th> </tr> <tr> <td>Data 1 Kolom 1</td><td>Data 1 Kolom 2</td> </tr> <tr> <td>Data 2 Kolom 1</td><td>Data 2 Kolom 2</td> </tr> </table> <table border="1" style="width:90%;"> <tr> <th style="text-align:center" colspan="2">Table header</th> </tr> <tr> <td>Table cell 1</td><td>Table cell 2</td> </tr> </table> <table border="1" style="width:90%;"> <tr> <th style="text-align:center" rowspan="2">Table header</th> <td>Table cell 1</td> </tr> <tr> <td>Table cell 2</td> </tr> </table>