Contoh sederhana penulisan tag HTML yang berbeda adalah penulisan baris baru. Dalam HTML 4.01, penulisan baris baru adalah <br> sedangkan dalam xhtml, penulisannya adalah <br />. Hal ini juga berlaku pada penulisan tag garis dan gambar.
Kode dasar HTML
Penulisan teks untuk HEADING menggunakan kode:
<h1> Teks </h1>. Heading pada halaman terdiri dari kode <h1> sampai <h6>Penulisan teks tebal dan besar (Penguatan huruf atau teks) menggunakan kode:
<strong>Teks disini</strong>Penulisan teks tebal menggunakan kode:
<b>Teks disini</b>Penulisan teks besar menggunakan kode:
<big> Teks </big>Penulisan teks kecil menggunakan kode:
<small> Teks </small>Penulisan
<s> Teks bercoret </s>Penulisan teks miring atau gaya italic menggunakan kode:
<del> Teks bercoret </del>
<i> Teks italic </i>Teks huruf berwarna. Kodenya:
<font color="kode_warna"> teks disini </font>Membuat Paragraf dalam HTML dituliskan dengan kode:
Kode warna ditulis menggunakan nama warna dalam bahasa inggris (RGB) atau dalam bentuk HEX yang diawali symbol pagar #
<p> teks anda disini </p>Menyelaraskan teks paragraf.
Untuk teks rata kanan gunakanMembuat kode referensi atau link pada halaman. Kodenya:
<p align="left"> teks anda disini </p>
teks rata tengah
<p align="center"> teks anda disini </p> dan teks rata kiri
<p align="right"> teks anda disini </p>
<a href="url">Link Teks</a>Penulisan nama link yang berwarna seperti home adalah:
<a href="URL"><font color="red"><b>Link</b></font></a>Membuat garis. Untuk garis sederhana gunakan kode <hr />. Untuk lebar dan tebal garis, anda tinggal menyesuaikan misalnya:
<hr width="50%" />Huruf atau teks dengan ukuran kodenya:
<hr width="80%" />
<hr width="100%" />
Garis dengan ukuran dan warna
<hr style="color: yellow; size: 5; width: 75%;" />.
Anda juga dapat membuat tampilan garis yang unik menggunakan CSS Style.
<font size="22px">Teks</font>.Membuat Link dengan gambar seperti dibawah
Anda bisa menggunakan unit EMS (em), PIXELS (px), PERSEN (%), dan POINT (pt) dalam menentukan ukuran huruf.
kodenya adalah:<a href="URL">Mengubah ukuran gambar menjadi tampilan penuh
<img src="URL_GAMBAR" alt="Judul_Alternatif" />
</a>
Kodenya adalah <img src="url_gambar" width="100%" height="100%" alt="Judul alternafif" />Memperkecil ukuran gambar dari ukuran yang sebenarnya seperti ini:
Membuat Ikon halaman seperti yang terdapat disudut kanan atas halaman ini atau lebih dikenal dengan nama Favicon ICO dengan kode:
Kodenya adalah <img src="url_gambar" width="lebar_gambar" height="tinggi_gambar" alt="Judul alternafif" />
Anda tinggal menyesuaikan ukuran lebar dan tinggi gambar dengan menggunakan unit px atau %
<link rel="shortcut icon" type="images/x-icon" href="url_gambar" />.Membuat tombol Button yang dapat diklik seperti
Ukuran file gambar sebaiknya 16x16 Pixels dalam format ICO atau PNG
Radio Button
Kodenya:
<input type="button" value="HOME" />
: On/OffBody halaman dengan latarbelakang gambar kodenya:
Kodenya:
<input type="radio" name="ok" value="" />
<body style="background-image: url_gambar">Body halaman dengan latarbelakang warna kodenya:
<body style="background-color: kode_warna">Body tags didefenisikan dengan:
<body alink="red" valink="maroon" link="yellow" text="white" bgcolor="black">Daftar Tanpa Nomor atau list-style di defenisikan dengan tag <ul> sedangkan item didefenisikan dengan <li>. Untuk type item list dapat disesuaikan menggunakan list-type: disc, circle atau square.
Body tags menyangkut body dokumen, seperti hyperlink, gambar, teks, list, background dan sebagainya.
Daftar list dengan penomoran otomatis di defenisikan dengan tag <ol>. Contohnya:Penulisan kode tersebut adalah:
- Item list default menggunakan type DISC
- Teks
- Teks
- Teks
<ul>
<li>Teks</li>
<li>Teks</li>
<li>Teks</li>
</ul>
Membuat kotak textarea copy paste yang didefenisikan dengan kode tag <textarea>Penulisan kode tersebut adalah:
- Teks
- Teks
- Teks
<ol>
<li>Teks</li>
<li>Teks</li>
<li>Teks</li>
</ol>
Contoh:
Dianjurkan untuk menentukan jumlah baris dan kolom dalam penulisan kotak area teks. Kodenya adalah:Membuat Teks berlatarbelakang warna dengan kode HTML <span>. Contoh diatas menggunakan kode:
<textarea cols="Jumlah_kolom" rows="jumlah_baris">
Text, kode disini
</textarea>
<span style="background-color: #800; color: lime;"><b>Text Berstabilo</b></span>.Membuat Text Berbayang
Tag <span> juga biasanya digunakan pada gaya inline dalam dokumen.
Kodenya <font color="#ff0000" style="text-shadow: #ffff00 1px 1px 1px;"><b>Text Berbayang</b></font>Text underline atau BergarisBawah dengan kode:
<u>Teks disini</u>Superscript text didefinisikan dengan kode <sup>.
Teks superscript muncul setengah karakter diatas baseline. Contohnya:Subscript text atau mendefinisikan teks subscript dengan kode:
<b>TeksA<sup>TeksB</sup>TeksC</b>
Hasilnya:
TeksATeksBTeksC.
<sub>.
Teks subscript muncul setengah karakter bawah baseline. Contohnya:
<b>TeksA<sub>TeksB</sub>TeksC</b>Tag <div> digunakan untuk mendefinisikan divisi atau bagian dalam dokumen HTML. Tag <div> juga digunakan untuk kelompok elemen block untuk memformat mereka dengan CSS. Contohnya::
Hasilnya:
TeksATeksBTeksC
<div style="color: #00ff00; background-color: #800000; margin: 3px; padding: 4px; text-align: center; border: 1px solid #ff4500;">Teks disini</div>Adapun tag HTML <blink> (Teks berkedip) dan <marquee> (Teks berjalan), sebaiknya tidak digunakan sebab kedua tag tersebut tidak merupakan tag standard HTML yang di anjurkan oleh W3 dan juga karena banyaknya browser yang tidak mengenal dan mendukung penggunaan tag tersebut (Sumber : http://www.w3.org).
Hasilnya:
Teks disini
Adapun jenis tag atau kode dasar HTML yang digunakan pada jenis dokumen html 4.01 Wenru, bentuknya dapat anda lihat di Kode dasar HTML
Untuk kode-kode dasar html yang lain dan lebih lengkap, silahkan klik di :
http://www.w3.org, http://www.w3schools.com atau di http://werbach.com
Tidak ada komentar:
Posting Komentar