<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<p class="serif">Paragraf ini menggunakan font Times New Roman.</p>
<p class="sansserif">Paragraf ini menggunakan Arial font.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-image:url("pattern.gif");
background-repeat:no-repeat;
background-position:right top;
}
</style>
</head>
<body>
<h1>background tidak diulang dan diposisikan pada bagian kanan atas</h1>
</body>
</html>
<link rel="stylesheet" type="text/css" href="cssku.css" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssku.css" />
</head>
<body>
<p>Paragraf ini akan berwarna biru dan background halaman ini akan berwarna hitam/black</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif");}
</style>
</head>
<body>
<h1>background diulang-ulang secara otomatis </h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif"); background-repeat:repeat-x;}
</style>
</head>
<body>
<h1>background diulang-ulang secara horizontal saja</h1>
</body>
</html> Contoh secara vertical :<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{background-image:url("pattern.gif"); background-repeat:repeat-y;}
</style>
</head>
<body>
<h1>background diulang-ulang secara vertical saja</h1>
</body>
</html>
<!> komentar HTML anda >>
/* komentar CSS anda */<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* ini adalah deklarasi CSS */
h2{ color:red; text-align:right; }
/* komentar HTML tidak bisa diletakkan disini */
</style>
</head>
<body>
<h2>Style pada heading ini dibuat dengan CSS</h2>
</body>
</html>
| Atribut | Nilai | Deskripsi |
|---|---|---|
| onload | script | Script akan jalan ketika dokumen di load |
| onunload | script | Script akan jalan ketika dokumen di unload |
| Atribut | Deskripsi |
|---|---|
| class | Merincikan satu atau lebih nama kelas dari sebuah elemen |
| id | Merincikan id unik dari sebuah elemen |
| style | Merincikan sebuah inline CSS style dari sebuah elemen |
| title | Merincikan informasi tambahan mengenai sebuah elemen |
| Tag | Description | DTD |
|---|---|---|
| <!--...--> | Mendefinisikan komentar HTML | STF |
| <!DOCTYPE> | Mendefinisikan tipe dokumen | STF |
| <a> | Mendefinisikan anchor link | STF |
| <abbr> | Mendefinisikan sebuah singkatan | STF |
| <acronym> | Mendefinisikan akronim | STF |
| <address> | Mendefiniskan informasi kontak untuk pemiliki / penulis dokumen | STF |
| <applet> | Ditinggalkan. Medefinisikan applet | TF |
| <area /> | Mendefinisikan arae di dalam image-map | STF |
| <b> | Mendefinisikan tulisan tebal | STF |
| <base /> | Mendefinisikan URL utama/target untuk semua URL alternatif di dalam dokumen |
<marquee attribute="nilai atribut">
...
...
</marquee>
<embed src="http://codingku.com/html/sample/fall.mid"
width="100%" height="60" >
<noembed><img src="yourimage.gif" ></noembed>
</embed>
<iframe src="url"></iframe><iframe src="http://codingku.com" width="200" height="200"></iframe>
<form>
.
.
elemen2 input
.
.
</form>
<p
style="color:#FF33FF; text-decoration:underline; font-size:13px;">
Pada
paragraf ini terdapat inline CSS. </p>
<p
style="font-size:16px; font-family:cursive"> Pada
paragraf menggunakan font family 'cursive'. </p>
<p
style="font-size:19px; font-family:monospace"> Pada
paragraf menggunakan font family 'monospace'. </p>
<p
style="font-size:19px; color:#FF3333; font-family:sans-serif"> Pada
paragraf menggunakan font family 'sans-serif'. </p>
Jono
|
Budi
|
Wati
|
Anjas
|
Perhatikan, dari contoh di atas
anda bisa mengetahui berapa lajur /<tr> dan kolom/<td> dari
tabel tersebut |
<a href="http://codingku.com">Tulisan ini akan di tampilkan</a>
<p align="right">Paragraf 1</p>
<p align="center">Paragraf 2</p>
<p align="left">Paragraf 3</p>
<p>Anak Pak Raden :</p>
<ul>
<li>Budi</li>
<li>Wati</li>
<li>Joni</li>
</ul>
<p>Urutan anak Pak Raden :</p>
<ol>
<li>Budi</li>
<li>Wati</li>
<li>Joni</li>
</ol>
Tulisan ini code/computer
<p>Paragraf pertamaku</p>
<p>Paragraf keduaku</p>
<p>Paragraf ketigaku</p><p> paragraf pertamaku
<p> paragraf keduakuSeperti yang bisa anda lihat pada contoh kedua di atas, elemen <p> tetap bisa berjalan tanpa adanya tag penutup <p/>
<html>
<head>
<title>Judul Halaman websiteku</title>
</head>
<body>
Isi dari halaman websiteku
</body>
</html>
<p>isi elemen</p>
<html></html>
<body></body>
<h1></h1>
Note : "HTML bisa dikatakan merupakan inti
dari halaman web, sebelum anda beranjak ke tutorial-tutorial yang lain
sebaiknya anda kuasai dulu dasar-dasar dari HTML".
|
