Penggunaan Tag
· Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.
· Tag HTML secara normal selalu berpasangan seperti <H!> dengan </H1>
· Tag HTML tidak ‘case sensitive’, berarti <H1> dama dengan <h1>
Atribut Tag
Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan.
Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih.
Tag berikut mempunyai atribut : <body bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai “red’. Sehingga background akan menampilkan warna merah.
Tag HTML
Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML. Tag ini merupakan keharusan untuk membuat dokumen HTML.Tag <html> sebagai pembuka dokumen HTML dan tag </html> sebagai penutup dokumen HTML.
Contoh – Listing :
<html>
........................
</html>
Tag Head
Merupakan tag setelah <html> untuk menuliskan keterangan tentang dokumen HTML. Isi teks diantara <head> dengan </head> tidak akan ditampilkan di dalam browser.
Contoh – Listing:
<head>
<title>Belajar Web Design</title>
</head>
Title
Merupakan tag yang digunakan untuk menuliskan judul dokumen HTML. Hasil tag ini akan ditampilkan dalam window caption browser.
Contoh – Listing:
<title>Belajar Web Design HTML</title>
Body
Merupakan section dalam dokumen HTML yang akan ditampilkan dalam browser.
Contoh – Listing :
<html>
<head>
<title>Belajar Web Design</title>
</head>
<body>
ini adalah section HTML yang ditampilkan di browser
</body>
</html>
Paragraf
Setiap paragraf harus dimulai dengan memberi tag <p>. Diakhir paragraf tidak diharuskan menuliskan </p> sebagai akhir paragraf, karena tag <p> tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan <p> kembali. Setiap pergantian paragraf ditandai dengan tag <p>
Contoh – Listing:
<html>
<head>
<title>Tag Paragraf</title>
</head>
<body>
<p>berikut ini adalah paragraf 1</p>
<p>berikut ini adalah paragraf 2</p>
<p>berikut ini adalah paragraf 3</p>
</body>
</html>
Contoh - Listing : paragraf2.html
<html>
<head>
<title>Paragraf</title>
</head>
<body>
<p>Pada tahun 1950-an Kolonel Sanders (pendiri KFC) mulai mengendarai mobilnya dari kota ke kota untuk memulai bisnis KFC-nya, dengan cara menawarkan resep rahasianya dari satu restoran ke restoran yang lainnya. Kadang beliau tidur di dalam mobilnya dan memakan ayam buatannya sendiri untuk bisa bertahan. Dia baru dapat mencapai tujuannya setelah bertemu dengan orang yang ke-1010. Orang tersebut berpikir ayam Kolonel tersebut cukup bagus untuk di jual ke publik
</p>
<p>Contoh lainnya Thomas Alfa Edison yang mengalami kegagalan sebanyak 9000 kali sebelum akhirnya ia menemukan bola lampu. Dia tidak menyesal dengan kegagalan-kegagalannya, bahkan ia berkata beruntung menemukan 8999 cara yang salah dalam membuat bola lampu. Kemudian ia dapat membuat 1093 paten, orang yang paling banyak memegang paten dalam sejarah Amerika</p>
</body>
</html>
Gambar Contoh hasil paragraf2.html
Line Break
Kita dapat memaksa ganti baris pada dokumen web dengan tag <br>. Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf.
Contoh – Listing :
<html>
<head>
<title>Ganti Baris</title>
<head>
<body>
ini adalah baris ke 1<br>
ini adalah baris ke 2<br>
ini adalah baris ke 3<br>
ini adalah baris ke 4<br>
ini adalah baris ke 5<br>
</body>
</html>
Heading
Tag heading aklan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topic atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar.
Contoh – Listing :
<html>
<head><title>Heading</title></head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Gambar Contoh heading
Garis Pembatas
Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag <hr>
| Atribut | Keterangan |
| Align | Menentukan letak garis : center,left,right |
| Color | Menentukan warna garis |
| Size | Menentukan ukuran garis |
| Width | Menentukan tebal garis |
Contoh – Listing :
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<p align=”center”>Paragraf pertama</p>
<hr align=”center” color=”#0000FF” size=”3” width=”90%”>
<p align=”center”>Paragraf keduapertama</p>
</body>
</html>
Gambar Garis Pembatas
Komentar
Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag:
<!-- sebagai awal dan tag --> sebagai akhir komentar.
Contoh – Listing :
<html>
<head>
<title>Horizontal Rule</title>
</head>
<body>
<!-- komentar ni tidak akan ditampilkan di browser -->
<p>Tulisan ini akan ditampilkan di browser</p>
</body>
</html>
Toolbar Dreamweaver untuk dasar HTML
Macromedia Dreamweaver sebagai salah satu aplikasi untuk membuat dan mengembangkan web menyediakan toolbar untuk semua tag dasar HTML. Perhatikan gambar 2.5 dan gambar 2.6 yang menunjukkan toolbar untuk dasar HTML.
Gambar Toolbar tab Text
Keterangan - tab Text :
· h1 : heading 1
· h2 : heading 2
· h3 : heading 3
· br : Line Break
· p (dibalik) : Paragraf
Gambar Toolbar tab Comment
Keterangan – tab common : terdapat toolbar untuk tag komentar
Posting Komentar
Silahkan berikan komentar anda