Objektif
¡ HTML Text Formating
¡ HTML Styles
¡ HTML Images
¡ HTMLTables
¡ HTML List
HTML Text Formating
HTML uses tags like <b> and <i> for formatting output, like bold or italic text. Examples :
• This text is bold -> <b>This text is bold</b>
• This text is italic -> <i>This text is bold</i>
Tag | Description |
<b> | Define Bold Text |
<i> | Define Italic Text |
<sub> | Define subscripted Text |
HTML Styles
Attribut 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
<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 style= "font-family: times; color: green">
This text isi Times and green
</p>
<p style= "font-size:30px">
<p style= "font-size:30px">
This text is 30 pixels high
</p>
</body>
</html>
</body>
</html>
HTML Images
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 |
Graphis Interchange Format (GIF)
Gif hanya mendukung 256 warna.msalah satu warna bisa bersifat transparant, yang memungkinkan warna ini tembus terhadap latar belakang. Khusus untuk format GIF87a tersedia fitur interlancing.
Mengingat dukungan warna yang terbatas, GIF cocok untuk membuat gambar yang melibatkan sedikit warna, misalnya logo atau gambar tombol
Joint Photographics Experts Group (JPEG)
Berbeda dengan GIF, JPEG menggunakan 24 bit untuk setiap warna. Dengan demikian, warna yang bisa ditangani mencapai 224 atau 16.777.216 buah. Oleh karena itu, format gambar ini sering disebut “jutaan warna”. Mengingat keadaan seperti ini. JPEG sangat cocok untuk mendukung foto
JPEG tidak mendukung transaparansi dan animasi. Namu JPEG progresif mendukung interlancing
Portable Network Graphics (PNG)
PNG dirancang oleh W3C (World Wide Web Consortium) untuk mengantikan GIF dan JPEG. Formatnya didesain supaya tidak tergantung pada mesin sehingga apapun jenis komputer dan sistem operasi yang digunakan dapat menangani gambar PNG.
Ada dua macam PNG:
• PNG-8
• PNG-24
PNG-8 menggunakan 8 bit untuk menyimpan sebuah warna, sedangkan png-24 memakai 24-bit
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”>
<html>
<head>
<title>Latar belakang</title>
</head>
<body background = “images/tes.png”>
</body
</html>
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”>
<html>
<head>
<title>Latar belakang</title>
</head>
<body>
<img src=“tes.png”>
</body
</html>
Mengatur Letak Teks Terhadap Gambar
Tag <img> menyediakan atribut bernama align yang berfungsi untuk mengatur penempatan teks terhadap 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”>
<html>
<head>
<title>Latar belakang</title>
</head>
<body>
<img src=“tes.png” height=“20” width=“20”>
</body
</html>
HTML Tables
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>
<table width="200" border="1">
<tr>
<th>Nim</th>
<th>Nama</th>
</tr>
<tr>
<td>08410100140</td>
<td>Joni</td>
</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>
<th > Nama </th>
<th > Hari </th>
</tr>
</thead>
<tbody>
<tr>
<td > Teguh</td>
<td > Selasa</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="2">footnote</td></tr>
<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>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML List
HTML Ordered Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML Definition Lists
A definition list is a list of items, with a description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
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 |
