Content Display dalam Halaman Web
-HTML Text Formating
HTML menggunakan tags seperti <b> dan <i> untuk membentuk sebuah output, seperti bold atau italic text.
Contoh:
Tulisan bercetak tebal -> <b>This text is bold</b>
Tulisan bercetak miring -> <i>This text is bold</i>
-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
</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>
-HTML Images
Mengenal Jenis Gambar
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
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
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
Atribut BACKGROUND pada tag <body>:
<body background = “namaberkasgambar”>
Tag untuk menampilkan gambar di dalam tag body:
<img src = “nama_gambar”>
-HTMLTables
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>
-HTML List
HTML Unordered Lists
Sebuah unordered list diawali dengan tag <ul> . Setiap list item diawali dengan tag <li> .
List items ditandai dengan bullets (berbentuk lingkaran hitam kecil).
Contoh:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML Ordered Lists
Sebuah ordered list dawali dengan tag <ol> . Setiap list item diawali dengan tag <li> .
List items ditandai dengan angka.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML Definition Lists
Definition list adalah daftar dari benda, dengan mendeskripsikan satu persatu.
tag <dl> sebagai definition list.
tag <dl> digunakan dalam konjungsi dengan<dt> (menjelaskan benda yang terdapat di dalam daftar) dan <dd> (mendeskripsikan benda yang ada didaftar):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Resume ke-4 Desain Web
0 comments:
Post a Comment