Nama: Randy Floranno Hasdi
Content Display dalam Halaman Web
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>
Sumber W3C School.
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
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. 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. JPEG sangat cocok untuk mendukung foto. JPEG tidak mendukung transaparansi dan animasi. Namun 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
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”>
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
• Height untuk mengatur tinggi gambar
• Width untuk mengatur lebar gambar
<img src = “tes.png” height=“20” width=“20”>
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 List
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 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 |
