HTML text formating

HTML Text Formating

HTML uses tags like <b> and <i> for formatting output, like bold or italic text

Tag	Description
<b>	Define Bold Text
<i>	Define Italic Text
<sub>	Define subscripted Text

Atribute Style

Attribut Style digunakan secara langsung terhadap tag yang berada dalam BODY untuk melakukan pengaturan dengan properti-properti CSS.

Contoh Attribut Style :

[<html>
<body style="background-color:Blue;">
       <h1>Look ! Styles and colors</h1>
       <p style = "font-family: verdana; color: red">
            This text Verdana and red

       </p>
        <p style= "font-family: times; color: green">
            This text isi Times and green

</p>
<p style= "font-size:30px">

This text is 30 pixels high

</p>
</body>
</html> ]

Mengenal Jenis Gambar

Sebelum mempraktekkan penambahan gambar dalam dokumen web, ada baiknya untuk mengenal berbagi tipe gambar yang dapat ditampilkan oleh browser.

Jenis Gambar	Ekstensi	Keterangan
GIF	.gif	Grapich Interchange Format
JPEG	.jpg / .jpeg	Joint Photographic Experts Group
PNG	.png	Portable Network Graphics

Terkadang kita jumpai halaman web dengan latar belakang berupa suatu gambar. Latar belakang seperti itu kdangkala mempercantik halaman web.

Untuk menyertakan suatu gambar sebagai latar belakang, anda bisa menggunakan atribut BACKGROUND pada tag <body>. Bentuknya sebagai berikut:

<body background = “namaberkasgambar”>

Menampilkan Gambar

Untuk menampilkan gambar, anda bisa menggunakan tag <img>. Tag ini mempunyai banyak atribut, tetapi hanya satu yang harus disertakan, yaitu atribut SRC

<img src = “nama_gambar”>

Menampilkan Gambar

Untuk menampilkan gambar, anda bisa menggunakan tag <img>. Tag ini mempunyai banyak atribut, tetapi hanya satu yang harus disertakan, yaitu atribut SRC

<img src = “nama_gambar”>

Nilai	Keterangan
TOP	Teks diletakkan di bagian atas
MIDDLE	Teks diletakkan di tengah-tengah
BOTTOM	Merupakan nilai default. Dalam hak ini, teks diletakkan pada bagian bawah

Mengatur Ukuran Gambar

Bila anda memiliki gambar yang berukuran besar dan bermaksud mengubah ukuran gambar saat gambar ditampilkan, anda bisa mengaturnya melalui atribut pada tag <img> yang bernama height dan width.

• Height untuk mengatur tinggi gambar

• Width untuk mengatur lebar gambar

<img src = “tes.png” height=“20” width=“20”>

ELEMEN TABLE

Untuk membuat tabel. Anda harus memulainya dengan pasangan tag <table>..</table>. Di dalam tag anda dapat menentukan banyak kolom dan baris. Perataan, warna dan pengaturan lainnya

[<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>]

Atribut Table:

• Border : untuk membuat batas tepi.

• Width : untuk mengatur lebar table.

• Align : untuk mengatur bentuk perataan horizontal data di dalam table. Seperti kiri, tengah, atau kanan

• DLL.

Group Baris

Baris tabel bisa dibagi menjadi tabel head. Tabel foot dan tabel body dengan menggunakan elemen THEAD, TFOOT dan TBODY.

Tabel head dan tabel tfoot berisi informasi tentang tabel kolom

tabel body berisi dari table data.

Setiap THEAD, TFOOT dan TBODY berisi group baris dan masing-masing group paling sedikit berisi satu baris didefinisikan dengan elemen <tr>

Contoh Group Table

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td > Teguh</td>

<td > Selasa</td>

</tr>

</tbody>

<tfoot>
<tr><td colspan="2">footnote</td></tr>

</tfoot>

</table>

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

Tag	Description
<ol>	Defines an ordered list
<ul>	Defines an unordered list
<li>	Defines a list item
<dl>	Defines a definition list
<dt>	Defines an item in a definition list
<dd>	Defines a description of an item in a definition list