Format Teks
Teks dalam dokumen web dapat diformat secara khusus untuk menunjukan perbedaan dan penekanan terhadap isi dan maksud dari teks. beberapa format teks adalah menebalkan huruf (bold), memiringkan huruf (italic), memberi tekanan pada teks (emphasize), mengecilkan huruf, superscript, dan subscript.
Program Format Teks
Berikut contoh program untuk menformat teks dalam dokumen HTML.
<!--teksformat.html
<html>
<body>
<b>Teks ini ditebalkan</b>
<br>
<strong>Teks ini tebal (strong)
</strong>
<br>
<big>
Teks ini besar
</big>
<br>
<i>Teks ini miring/italic
</i>
<br>
<small>Teks ini kecil</small>
<br>
Teks ini berisi
<sup>
Superscript</sup>
</body>
</html>
Tag-tag Pemformatan
berikut penjelasan tag-tag format teks yang ada dalam listing 2.1 dan 2.2
Teks yang disisipkan atau dihapus
Berikut contoh program teks yagn disisipkan tau dihapus pada suatu dokumen
listing 2.2
<!-coba_isdel.html-->
<html>
<body>
<p>
Satu lusin adalah
<del>dua puluh</del>
<ins>dua belas</ins>
buah
</p>
<p>umunya browser akan mencoret teks yang dihapus dan menggaris bawahi teks yang disisipkan</p>
<p>Beberapa Browser yang lebih lama akan menampilkan teks yang dihapus atau yang disisipkan sebagai teks biasa-tidak dibedakan</p>
</body>
</html>
Entitas Karakter HTML
Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Entitas karakter yang sering digunakan ditunjukan tabel berikut:
Contoh program entitas karakter HTML ditunjukan listing 2.3, entitas HTML mempunyai sifat case sensitie.
Listing 2.3
<!-Coba_entitas.html-->
<html>
<body>
ini adalah Entitas karakter: <p>
<p>Coba untuk mengganti entitas karakter diatas dengan yag lain, untuk belajar sendiri pengguna darai referensi entitas karakter.
</p>
</body>
</html>
Link HTML
Kelebihan utama dari dokumen HTML adalah kemampuan untuk memberikan link dari satu teks dan/ atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot ('highlight') teks atau gambar yang diidentifikasi sebagai link dengan warna dan/ atau garis bawah untuk menunjukan bahwa itu adalah hyperteks link (sering diperpendek dengan hyperlink atau link saja). Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain dalam web.
Html menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Sintaks dari penghubung dalam HTML adalah dengan menggunakan tag <a>, atribut href digunakan untuk mendefinisikan lokasi link. Anchor berikut menunjuk Microsoft:
<a href="http://www.microsoft.com"> This texs is displayed </a>
Ada tiga jenis link:
a. Link relatif
b. Link absolut
c. Link dalam dokumen yang sama
a. Link Relatif
Dibuat apabila akan melakukan link pada page lain pada komputer yang sama, tidak perlu menggunakan alamat internet yang lengkap, contoh program dapat dilihat pada listing 2.4. Jika dua page pada direktori yang sama, dapat menuliskan name file html sebagai berikut:
<a href="file_2.html">Berikutnya</a>
b. Link Absolut
Dibuat apabila link ke page lain yang berada pada website lain di internet, contoh program dapat dilihat pada listing 2.4. Alamat internet perlu di tuliskan secara lengkap, berikut contohnya:
<a href=http://contohlink.co.id>Pusat engine internet lokal</a>
c. Link ke bagian lain dalam dokumen
Link yang dibuat untuk dokumen yang panjang, sehingga apabila ditampilkan dalam browser web akan mengharuskan melakukan scroll layar yang berulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat didalam dokumen akan ada bagian yang bernama, dan dibagian lainya dapat diletakan link untuk menuju bagian-bagian tersebut. Berikut contohnya:
<a href="#namabagian">Bagian tentang link </a>
Tanda # menunjukan bahwa link tersebut ditujukan kepada link dalam dokumen yang sama.
Listing 2.4.1
<!--link.html--->
<html>
<body>
<p>
<a href="entitaskar.html">
Teks ini </a> merupakan link kepada suatu page dengan nama entitaskar.html pada web site yang sama
</p>
<p>
<a href=http://www.microsoft.com>
This text</a>is link to a page on the World Wide Web.
</p>
</body>
</html>
Listing 2.4.2
<!--cobalink2.html-->
<html>
<body>
<p>
<a href="http://www.microsoft.com"target="_blank">Microsoft</a>
<p>
jika anda menentukan atribut link to "_blank", link akan dibuka pada window baru.
</p>
</body>
</html>
HTML List
List Merupakan bentuk yang umum yang biasa digunakan untuk menguraikan daftar sesuatu, misalnya jenis-jenis list dalam HTML:
a. List dengan nomor
b. List tanpa nomor
c. List definisi
List dengan nomor adalah model daftar yang setiap itemnya diberi nomor, selain itu ada juga sebuah list yang digunakan untuk memberi uraian terhadap suatu item dalam daftar disebut list definisi. Untuk membuat list tanpa nomor (bulleted list), ikuti langkah berikut:
a. Mulai dengan tag pemuka list <ul>
b. Masukan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>
c. Ulangi langkah kedua untuk menuliskan item list berikutnya.
d. Akhiri seluruh list dengan sebuah tag penutup </ul>
Untuk list dengan nomor, disebut juga ordered list, tag <ul> diubah dengan <ol>, demikian juga </ul> diganti dengan </ol>. Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list:
Contoh program yang mendemontrasikan suatu ordered dan unorderd list:
<!list_ord.html->
<html>
<body>
<h4>An Orderd List:<h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An Unordered List: <h4>
<ul>
<li>Coffe</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Listing 2.5.2
<!-listdef.html->
<html>
<body>
<h4>A definition List: </h4>
<dl>
<dt>Coffee</dt>
<dt>Black hot drink </dt>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
<html>
FONT HTML
Tag <font> dalam HTML dapat menspesifikasikan ukuran dan senis dari output browsernya, walaupun HTML versi mendatang lebih banyak menggunakan cascade style sheet (CSS) untuk mendefinisikan properti layout dan display elemen HTML, contoh program menggunakan Tag <font> dapat dilihat listing 2.6.1
Listing 2.6.1
<!--fint.html->
<html>
<body>
<p><font size=2 face="verdana">
This paragraph.
</font></p>
<p><font size=5 face="Times">
This is another paragraph.
</font></p>
</body>
</html>
Menggunakan Font Size
Font size digunakan untuk mengubah ukuran font
Contoh penggunaan font size:
<!-fontsize.html>
<html>
<body>
<fontsize=1>Font Size 1</dont><br>
<fontsize=2>Font Size 2</dont><br>
<fontsize=3>Font Size 3</dont><br>
<fontsize=4>Font Size 4</dont><br>
<fontsize=5>Font Size 5</dont><br>
<fontsize=6>Font Size 6</dont><br>
</body>
</html>
Menggunakan Font Face
Font face digunakan untuk mengubah bentuk font,
contoh program:
<!Fontface.html->
<html>
<body>
<p><font face="Verdana">
This is paragraph.
</font></p>
<p><font face="Times">
This is another paragraph.
</font></p>
<p><font face="Microsoft Sans Serif">
This is another paragraph
</font></p>
<p>font face="Licida Dingbom">
Note that if thee font is misspelled,
or if the font is not installed
on your computer, it will not display correctly.
</font.</p>
</body>
</html>
Menggunakan Font Color
Font dapat diberi warna dengan font color, contoh untuk memberi warna font.
<!-font.html->
<html>
<body>
<p><font size=2 color="#0000">
This is paragraph.
</font></p>
<p><font size=5 color="red">
This is another paragraph
</font></p>
</body>
</html>
Teks dalam dokumen web dapat diformat secara khusus untuk menunjukan perbedaan dan penekanan terhadap isi dan maksud dari teks. beberapa format teks adalah menebalkan huruf (bold), memiringkan huruf (italic), memberi tekanan pada teks (emphasize), mengecilkan huruf, superscript, dan subscript.
Program Format Teks
Berikut contoh program untuk menformat teks dalam dokumen HTML.
<!--teksformat.html
<html>
<body>
<b>Teks ini ditebalkan</b>
<br>
<strong>Teks ini tebal (strong)
</strong>
<br>
<big>
Teks ini besar
</big>
<br>
<i>Teks ini miring/italic
</i>
<br>
<small>Teks ini kecil</small>
<br>
Teks ini berisi
<sup>
Superscript</sup>
</body>
</html>
Tag-tag Pemformatan
berikut penjelasan tag-tag format teks yang ada dalam listing 2.1 dan 2.2
Teks yang disisipkan atau dihapus
Berikut contoh program teks yagn disisipkan tau dihapus pada suatu dokumen
listing 2.2
<!-coba_isdel.html-->
<html>
<body>
<p>
Satu lusin adalah
<del>dua puluh</del>
<ins>dua belas</ins>
buah
</p>
<p>umunya browser akan mencoret teks yang dihapus dan menggaris bawahi teks yang disisipkan</p>
<p>Beberapa Browser yang lebih lama akan menampilkan teks yang dihapus atau yang disisipkan sebagai teks biasa-tidak dibedakan</p>
</body>
</html>
Entitas Karakter HTML
Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda lebih kecil (<) yang berarti awal tag HTML dan tanda lebih besar (>) yang berarti akhir tag HTML. Entitas karakter yang sering digunakan ditunjukan tabel berikut:
Contoh program entitas karakter HTML ditunjukan listing 2.3, entitas HTML mempunyai sifat case sensitie.
Listing 2.3
<!-Coba_entitas.html-->
<html>
<body>
ini adalah Entitas karakter: <p>
<p>Coba untuk mengganti entitas karakter diatas dengan yag lain, untuk belajar sendiri pengguna darai referensi entitas karakter.
</p>
</body>
</html>
Link HTML
Kelebihan utama dari dokumen HTML adalah kemampuan untuk memberikan link dari satu teks dan/ atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen. Browser web akan menyorot ('highlight') teks atau gambar yang diidentifikasi sebagai link dengan warna dan/ atau garis bawah untuk menunjukan bahwa itu adalah hyperteks link (sering diperpendek dengan hyperlink atau link saja). Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain dalam web.
Html menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Sintaks dari penghubung dalam HTML adalah dengan menggunakan tag <a>, atribut href digunakan untuk mendefinisikan lokasi link. Anchor berikut menunjuk Microsoft:
<a href="http://www.microsoft.com"> This texs is displayed </a>
Ada tiga jenis link:
a. Link relatif
b. Link absolut
c. Link dalam dokumen yang sama
a. Link Relatif
Dibuat apabila akan melakukan link pada page lain pada komputer yang sama, tidak perlu menggunakan alamat internet yang lengkap, contoh program dapat dilihat pada listing 2.4. Jika dua page pada direktori yang sama, dapat menuliskan name file html sebagai berikut:
<a href="file_2.html">Berikutnya</a>
b. Link Absolut
Dibuat apabila link ke page lain yang berada pada website lain di internet, contoh program dapat dilihat pada listing 2.4. Alamat internet perlu di tuliskan secara lengkap, berikut contohnya:
<a href=http://contohlink.co.id>Pusat engine internet lokal</a>
c. Link ke bagian lain dalam dokumen
Link yang dibuat untuk dokumen yang panjang, sehingga apabila ditampilkan dalam browser web akan mengharuskan melakukan scroll layar yang berulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat didalam dokumen akan ada bagian yang bernama, dan dibagian lainya dapat diletakan link untuk menuju bagian-bagian tersebut. Berikut contohnya:
<a href="#namabagian">Bagian tentang link </a>
Tanda # menunjukan bahwa link tersebut ditujukan kepada link dalam dokumen yang sama.
Listing 2.4.1
<!--link.html--->
<html>
<body>
<p>
<a href="entitaskar.html">
Teks ini </a> merupakan link kepada suatu page dengan nama entitaskar.html pada web site yang sama
</p>
<p>
<a href=http://www.microsoft.com>
This text</a>is link to a page on the World Wide Web.
</p>
</body>
</html>
Listing 2.4.2
<!--cobalink2.html-->
<html>
<body>
<p>
<a href="http://www.microsoft.com"target="_blank">Microsoft</a>
<p>
jika anda menentukan atribut link to "_blank", link akan dibuka pada window baru.
</p>
</body>
</html>
HTML List
List Merupakan bentuk yang umum yang biasa digunakan untuk menguraikan daftar sesuatu, misalnya jenis-jenis list dalam HTML:
a. List dengan nomor
b. List tanpa nomor
c. List definisi
List dengan nomor adalah model daftar yang setiap itemnya diberi nomor, selain itu ada juga sebuah list yang digunakan untuk memberi uraian terhadap suatu item dalam daftar disebut list definisi. Untuk membuat list tanpa nomor (bulleted list), ikuti langkah berikut:
a. Mulai dengan tag pemuka list <ul>
b. Masukan setiap item list dengan menggunakan tag <li> kemudian tuliskan itemnya (satu saja), tag penutup item </li>
c. Ulangi langkah kedua untuk menuliskan item list berikutnya.
d. Akhiri seluruh list dengan sebuah tag penutup </ul>
Untuk list dengan nomor, disebut juga ordered list, tag <ul> diubah dengan <ol>, demikian juga </ul> diganti dengan </ol>. Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered list:
Contoh program yang mendemontrasikan suatu ordered dan unorderd list:
<!list_ord.html->
<html>
<body>
<h4>An Orderd List:<h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<h4>An Unordered List: <h4>
<ul>
<li>Coffe</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Listing 2.5.2
<!-listdef.html->
<html>
<body>
<h4>A definition List: </h4>
<dl>
<dt>Coffee</dt>
<dt>Black hot drink </dt>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
<html>
FONT HTML
Tag <font> dalam HTML dapat menspesifikasikan ukuran dan senis dari output browsernya, walaupun HTML versi mendatang lebih banyak menggunakan cascade style sheet (CSS) untuk mendefinisikan properti layout dan display elemen HTML, contoh program menggunakan Tag <font> dapat dilihat listing 2.6.1
Listing 2.6.1
<!--fint.html->
<html>
<body>
<p><font size=2 face="verdana">
This paragraph.
</font></p>
<p><font size=5 face="Times">
This is another paragraph.
</font></p>
</body>
</html>
Menggunakan Font Size
Font size digunakan untuk mengubah ukuran font
Contoh penggunaan font size:
<!-fontsize.html>
<html>
<body>
<fontsize=1>Font Size 1</dont><br>
<fontsize=2>Font Size 2</dont><br>
<fontsize=3>Font Size 3</dont><br>
<fontsize=4>Font Size 4</dont><br>
<fontsize=5>Font Size 5</dont><br>
<fontsize=6>Font Size 6</dont><br>
</body>
</html>
Menggunakan Font Face
Font face digunakan untuk mengubah bentuk font,
contoh program:
<!Fontface.html->
<html>
<body>
<p><font face="Verdana">
This is paragraph.
</font></p>
<p><font face="Times">
This is another paragraph.
</font></p>
<p><font face="Microsoft Sans Serif">
This is another paragraph
</font></p>
<p>font face="Licida Dingbom">
Note that if thee font is misspelled,
or if the font is not installed
on your computer, it will not display correctly.
</font.</p>
</body>
</html>
Menggunakan Font Color
Font dapat diberi warna dengan font color, contoh untuk memberi warna font.
<!-font.html->
<html>
<body>
<p><font size=2 color="#0000">
This is paragraph.
</font></p>
<p><font size=5 color="red">
This is another paragraph
</font></p>
</body>
</html>
