- Tag-tag Dasar HTML
1. Heading<html>
<head>
<title>Belajar Heading</title>
</head>
<body>
<h1>Ini heading 1</h1>
<h2>Ini heading 2</h2>
<h3>Ini heading 3</h3>
</body>
</html>
2. Paragraf
<html>
<head>
<title>Belajar Paragraf</title>
</head>
<body>
<p>Ini merupakan sebuah contoh paragraf dalam HTML.</p>
<p>Dan ini merupakan contoh paragraf yang lainnya. Sebuah paragraf dapat terdiri dari satu atau beberapa kalimat.</p>
</body>
</html>
3. Link
<html>
<head>
<title>Belajar Link</title>
</head>
<body>
<ahref="http://qhof-135.blogspot.com">Ini contoh link</a>
</body>
</html>
4. Gambar
<html>
<head>
<title>Contoh Image</title>
</head>
<body>
<imgsrc="fotoku.jpg"/>
</body>
</html>
5. Format Font
<html>
<head>
</head>
<body>
<h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1> <p><font face="Arial" size="3" color="blue">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br> tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>
</body>
</html>
6. Background
<html>
<head>
</head>
<body bgcolor="blue">
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p> <p>Kalau anda kurang suka dengan warnanya... tidak usah dilihat </p> </body>
</html>
7. Background Pada Table
<table style="background:blue" width="75%" border="1">
<tr>
<th style="background:red;width:50%;">Header Kolom 1</th>
<th style="background:red;">Header Kolom 2</th>
</tr>
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
8. Format Teks Tebal
<p><strong>Tulisan ini tebal</strong></p>
<p style="font-weight:bold">Tulisan ini juga tebal</p>
9. Format Teks Tercoret
<p style="text-decoration:line-through;">Aku mencintai kamu</p>
10. Format Teks Garis Bawah
<p style="text-decoration:underline;">Ramadhan bulan yang suci</p>
11. Format Teks Garis Atas
<p style="text-decoration:overline;">Contoh teks dengan garis atas</p>
12. Format Teks Berkedip
<p style="text-decoration:blink;">Contoh teks berkedip</p>
13. Format Teks Setiap Huruf Depan Kapital
<p style="text-align:left">Membuat teks ke kiri</p>
<p style="text-align:center">Membuat teks di tengah</p>
<p style="text-align:right">Membuat teks ke kanan</p>
14. Membuat warna teks
<p style="color:blue">Modifikasi Soul GT</p>
15. Membuat teks miring
<p style="font-style:italic">Yamaha Soul GT</p>
16. Menyisipkan gambar dari web
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwAUYMeEJFU5H6cH4ACub3Uj-0_d9VAOy7Ob-ZU9c2a3qwK5x3835kMS0HDgX2qVreDKp333gwXVeLu7SA4xs92RxWXUl63VFmTOeijZQWuz5RtktpswovRlpJ5mkPiXVU-uaD4BO-bJKC/s400/1002131_480221672064850_1272807768_n.jpg" width="300" height="200" />
17. Membuat gambar di kanan
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwAUYMeEJFU5H6cH4ACub3Uj-0_d9VAOy7Ob-ZU9c2a3qwK5x3835kMS0HDgX2qVreDKp333gwXVeLu7SA4xs92RxWXUl63VFmTOeijZQWuz5RtktpswovRlpJ5mkPiXVU-uaD4BO-bJKC/s400/1002131_480221672064850_1272807768_n.jpg " style="float:right;" width="100" height="100" />
18. Membuat gambar di tengah
<div style="text-align:center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwAUYMeEJFU5H6cH4ACub3Uj-0_d9VAOy7Ob-ZU9c2a3qwK5x3835kMS0HDgX2qVreDKp333gwXVeLu7SA4xs92RxWXUl63VFmTOeijZQWuz5RtktpswovRlpJ5mkPiXVU-uaD4BO-bJKC/s400/1002131_480221672064850_1272807768_n.jpg" width="100" height="100" /></div>
19. Membuat gambar di kiri
<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwAUYMeEJFU5H6cH4ACub3Uj-0_d9VAOy7Ob-ZU9c2a3qwK5x3835kMS0HDgX2qVreDKp333gwXVeLu7SA4xs92RxWXUl63VFmTOeijZQWuz5RtktpswovRlpJ5mkPiXVU-uaD4BO-bJKC/s400/1002131_480221672064850_1272807768_n.jpg “style="border:4px solid #000" width="100" height="100" />
20. Thumbnail Link
<a href="images/besar-1160X700px.jpg"><img src="images/kecil-150X100px.jpg" style="border:none" width="150" height="100" title="Klik untuk melihat gambar original" alt="contoh tumbnail" /></a>
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar