Pertemuan Ke-2 (HTML Lanjut & CSS) · PDF fileMeta tag § Meta tag keywords ... § Meta tag revised § Refresh page dan redirect Perkembangan HTML D3 Manajemen Informatika - Unijoyo

Pertemuan Ke-2(HTML Lanjut & CSS)

D3 Manajemen Informatika - Unijoyo 1

Tabel§ Membuat tabel sederhana§ Menambahkan judul tabel§ Mengatur lebar dan tinggi suatu tabel§ Perataan dalam tabel§ Membuat warna pada tabel§ Penggabungan baris/kolom§ Cellpading dan cellspacingForm§ Textbox§ Submit dan Reset§ Checkbox§ Radio button§ Daftar Drop Down§ Text AreaMeta tag§ Meta tag keywords§ Meta tag description§ Meta tag revised§ Refresh page dan redirectPerkembangan HTML


CSSContoh sederhanaSelectorMekanisme mengaplikasikan CSSElemen-elemen CSS


Fungsi:�Menampilkan informasi secara terstruktur,

ringkas dan mudah dibaca�Mengatur tampilan homepage agar lebih

menarik


�Tag yang diperlukan: <table>�Atribut-atribut:

Atribut FungsiBorder Menentukan ukuran border/garis tabelWidth Menentukan lebar tabelHeight Menentukan tinggi tabelBgcolor Menentukan background tabelBackground Menentukan gambar yang digunakan untuk

background tabelColor Untuk mengatur warna suatu sel dalam tabelAlign Mengatur bentuk perataan horisontalValign Mengatur bentuk perataan vertikalRowspan Menggabungkan beberapa barisColspan Menggabungkan beberapa kolomCellspacing dan cellpadding Mengatur spasi antar sel dan spasi dalam sel


�Tag yang diperlukan:¡ Membuat baris: <tr> (table row)¡ Membuat kolom: <td> (table data)


Contoh:<table border="1">

<tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr><tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>

</table>

Tampilan:

� Judul tabel: <caption>� Judul baris/kolom: <th> (table header)


Contoh:<table border="1">

<caption align="top"> <b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr><tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr>

</table>

Tampilan:

Atribut: width dan heightNilai:

¡ ukuran % (max 100%)¡ ukuran pixel


Contoh:<table border="1" width=“50%”>

<caption align="top"><b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td width=“20”>1.</td><td width=“80” height=“50“>06.100.001</td><td width=“180” height=“50”>Amin A. Angkasa</td></tr><tr><td width=“20”>2.</td><td width=“80” height=“70”>06.100.002</td><td width=“180” height=“70”>Beni B. Bernardi</td></tr>

</table>

Tampilan:

� horisontal: atribut align à utk <caption>, <tr>, <td> dan <th>

� vertikal: atribut valign à utk <tr>, <td> dan <th>


Contoh:<table border="1" align="center">

<caption align="top"><b> DAFTAR MAHASISWA </b> </caption><tr><th>No</th><th>NPM</th><th>Nama</th></tr><tr><td align="center" width="20">1.</td><td align="center" valign="middle"

width="80" height="50">06.100.001</td><td align="right" valign="top"

width="180" height="50">Amin A. Angkasa</td></tr><tr><td width="20">2.</td><td align="left" valign="top"

width="80" height="70">06.100.002</td><td align="left" valign="bottom"

width="180" height="70">Beni B. Bernardi</td></tr></table>

Tampilan:

� Atribut: bgcolor


Contoh:<body bgcolor="purple"><font size="3" face="arial" color="yellow">

<table border="2" bgcolor="white" align="center"><caption align="bottom"><b> Tabel Daftar Mahasiswa </b> </caption><tr bgcolor="yellow">

<th>No</th><th>NPM</th><th>Nama</th></tr><tr bgcolor="cyan"><td align="center" width="20">1.</td><td align="left" valign="middle“

width="80" height="40">06.100.001</td><td align="left" valign="middle“

width="180" height="40">Amin A. Angkasa</td></tr><tr><td bgcolor="blue" width="20">2.</td><td bgcolor="red" align="left" valign="middle"

width="80" height="40">06.100.002</td><td bgcolor="green" align="left" valign="middle"

width="180" height="40">Beni B. Bernardi</td></tr></table>

</body>

Tampilan:

�Menggabungkan bbrp kolom menjadi 1: atribut colspan�Menggabungkan bbrp kolom menjadi 1: atribut rowspan


Contoh Tampilan:

<table border="1" bgcolor="white" align="center"><caption align="top"><b> Tabel Daftar Nilai Mahasiswa </b> </caption><tr bgcolor="gray"><th rowspan="2">No</th><th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th></tr><tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr><tr><td align="center" width="20">1.</td><td align="left" valign="middle" width="80" height="40">06.100.001</td><td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr><tr><td width="20">2.</td><td align="left" valign="middle" width="80" height="40">06.100.002</td><td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr>

</table>


Script HTML:

� atribut cellpading: mengatur spasi antara border dengantulisan

� atribut cellspasing: mengatur spasi antar 2 buah sel


Contoh Tampilan:

<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12"><caption align="top"><b> Tabel Daftar Nilai Mahasiswa </b> </caption><tr bgcolor="gray"><th rowspan="2">No</th><th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th></tr><tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr><tr><td align="center" width="20">1.</td><td align="left" valign="middle" width="80" height="40">06.100.001</td><td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr><tr><td width="20">2.</td><td align="left" valign="middle" width="80" height="40">06.100.002</td><td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td><td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td></tr>

</table>


Script HTML:

Fungsi:� Menerima informasi atau meminta umpan balikdari user dan memproses informasi tersebut di server

Atribut Fungsi

Method Metode pengiriman data ke file tujuan (POST atau GET)

Action Aksi yang akan dilakukan jika user menekan tombol Submit

Name Memerikan nama tiap masukanValue Memberikan nilai suatu masukanType Tipe form yang akan digunakan


Standar penulisan:<form method=“post/get” action=“. . .”> . . . </form>

Atribut:

�Tag: <input>�Atribut-atribut:

Atribut Fungsi

type=["text"|"password"] Menentukan jenis field masukanText, submit, password

name Menentukan nama untuk field sehingga dapatdirujuk nantinya

value Memberi nilai suatu input

size mengatur lebar field secara horisontal, berapa hurufmaksimal yang dapat ditampilkan

maxlength menentukan jumlah maksimum huruf (karakter)yang dapat dimasukkan



Tampilan:

Contoh:<body>

<b>Login: <b> <br><form method="post"><table>

<tr> <td>User:</td> <td><input type="text" name="user" size="20"></td></tr><tr> <td>Password:</td> <td><input type="password" name="password"

size="20"></td></tr></table></form>

</body>

�Tombol Submit: digunakan ketika usermengisi form dan ingin mengirimkan keserver

�Tombol Reset: digunakan ketika user inginmenghapus/mengosongkan semua masukanyang ditulis dalam form



Contoh:<body>

<b>Data Pengunjung: <b> <br><form method="post" action="data.html"><table>

<tr> <td>Nama:</td> <td><input type="text" name="nama" size="20"></td></tr><tr> <td>Alamat:</td> <td><input type="text" name="alamat" size="20"></td></tr>

</table><input type="submit" value="Simpan" name="t1"><input type="reset" value="Reset" name="t2">

</form></body>

Tampilan:

Fungsi:� Untuk memberi beberapa pilihan kepada user


Contoh:<form method="post">

Bacaan yang Anda sukai: <br><input type="checkbox" name="bacaan" value="novel"> Novel <br><input type="checkbox" name="bacaan" value="koran"> Koran <br><input type="checkbox" name="bacaan" value="majalah"> Majalah <br><input type="checkbox" name="bacaan" value="tabloid"> Tabloid <br>

</form>

Tampilan:

Fungsi:� Untuk memberi (hanya) satu pilihan kepada user


Contoh:<form method="post">Apakah Anda setuju dengan kenaikan SPP: <br><input type="radio" name="opsi" value="ya"> Ya <br><input type="radio" name="opsi" value="tidak"> Tidak <br><input type="radio" name="opsi" value="ragu"> Ragu-ragu <br>

</form>

Tampilan:

Fungsi:� Memberikan menu pilihan kepada user (cara kerjanya seperti radio

button yang hanya mengijinkan user untuk memilih 1 pilihan saja)


Contoh:<form method="post">Jurusan: <br><select name="jurusan">

<option value="TInf"> Teknik Informatika <br><option value="MI"> D3 Manajemen Informatika <br><option value="TI"> Teknik Industri <br>

</select></form>

Tampilan:

Fungsi:� Sebagai field masukan untuk pengunjung (dapat

menerima lebih dari satu baris teks). Biasa disebutsebagai kotak komentar

Atribut Fungsi

Rows Menetukan lebar kotak komentar

Columns Menentukan tinggi kotakkomentar

Wrap=["off"|"virtual"|"physical"] Menentukan fitur word wrapping


• Tag: <textarea>• Atribut-atribut:


Tampilan:

Contoh:<html><head><title> Penggunaan Text Area </title></head><body>

<b>Komentar: <b> <br><form method="post">

<textarea rows="10" cols=“40" wrap="physical" name="komentar"></textarea><br>

</html>

S1 Teknik Informatika - Unijoyo 25

� Digunakan untuk men-supply informasi kepada searchengines yang tidak akan terlihat oleh pengunjungweb kecuali, jika mereka menampilkan kode darihalaman HTML yang diaksesnya.

� Penggunaan meta tag akan membuat search bot yangada mengenali website tersebut sehingga dapattampil di daftar search engine dan tentu saja mudahdicari oleh pengguna Internet


Fungsi:Meletakkan kata kunci (keyword) dari website

Format:<head><meta name="keywords" content=“macam_macam keyword yang

digunakan" /></head>


Fungsi:menunjukkan deskripsi singkat dari halaman web kepadasearch engine.

Format:<head><meta name="description"content=“deskripsi_yang_diinginkan" /></head>

Tag description dan keywords sangat mirip.Jika tidak ada kecocokan/relasi antara nilai dua tag inimungkin saja situs anda tidak diproses oleh searchengine, jadi anda harus cerdas menentukan keyworddan deskripsinya.


Fungsi:Untuk mencatat kapan update terakhir dilakukan terhadapsitus web.

Format:<head><meta name="revised"content=“tanggal_update_terakhir" /></head>


Fungsi:Digunakan untuk keperluan redirect. Denganmeta tag refresh, pengunjung akan di-redirect(atau di-refresh) ke halaman web yang telahditentukan.

Format:<head>

<meta http-equiv="refresh" content=“jumlah selang detik untukme-refresh halaman; url=…“ />

</head>

� HTML 2.0 (Juni 1994)HTML 2.0 mencerminkan konsepsi awal dariHTML sebagai bahasa tanda yang tak tergantungpada jenis perangkat penerima.

� HTML 3.0 (1995)Untuk membangun lanjutan dari HTML 2.0dengan penambahan kemampuan seperti tabeldan pengendalian aliran teks disekeliling gambar.

� HTML 4.0 (1999)Frames memungkinkan bagian suatu halamandipecah dalam beberapa bagian.

� HTML 5.0


�HTML 5.0§ Tag Canvas§ Tag Video dan Audio§ Mendukung Local Storage§ Mendukung Web Workers (threading)§ Semantics (informasi yg lebih lengkap)

Referensi:http://khaesha.wordpress.com/2010/01/07/html-5/

http://www.navinot.com/2009/10/16/apa-saja-isi-html-5/

http://daniiswara.net/2009/09/mencoba-html-5/



�Singkatan dari Cascading Style Sheet�Merupakan suatu cara untuk memformat

atau membuat layout halaman webmenjadi lebih menarik dan mudahdikelola.

�Di dalamnya terdapat banyak style.�CSS dapat dituliskan pada bagian <body>,

<head> suatu dokumen HTML ataudiletakkan di sebuah file eksternal.

�Perintah-perintah CSS dibatasi oleh tag<style> dan </style>


Tampilan:

Script HTML:<html><head><title>StyleSheet Sederhana </title><style>

h1{font-family: verdana;color: red;text-align: center;

}</style>

</head>

<body><h1>StyleSheet Sederhana<h1>

</body></html>


Adalah nama yang diberikan untuk setiap styleberbeda yang dibuat. Di dalam styledidefinisikan bagaimana setiap selector akanbekerja (font, color dan lain-lain.). Kemudiandi dalam bagian body halaman web, selectortersebut dipanggil untuk mengaktifkan styleyang telah didefinisikan.

Jenis-jenis Selector:• Selector HTML• Selector Class• Selector ID


� Digunakan untuk mendefinisikan style yang berhubungan dengantag HTML, melakukan redefinisi tag normal HTML

� Syntax: SelectorHTML {Properti:Nilai;}

Script HTML:<html><head>

<title>Selector HTML</title><style type="text/css">

b {font-family:arial; font-size:14px; color:red}</style>

</head><body>

<b>Tulisan ini tebal karena menggunakan style CSS</b>

</body></html>

Tampilan:


� Digunakan untuk mendefinisikan style yang dapat dipakai tanpamelakukan redefinisi tag HTML.

� Syntax: ClassSelector {Properti:Nilai;}Script HTML:<html><head>

<title>Selector Class</title><style type="text/css">

.headline {font-family:arial; font-size:14px; color:red}</style>

</head><body>

<b class="headline">Tulisan ini tebal karena pengaruh selector class headline</b><br><i class="headline">Tulisan ini dicetak miring karena selector class headline</i>

</body></html>

Tampilan:


� Dua tag yang sering dikombinasikan denganselector class adalah <SPAN> dan <DIV>

� Tag <SPAN> adalah "inline-tag" dalam HTML,berarti tidak ada pergantian baris (line break)yang disisipkan sebelum atau setelahpenulisannya.

� Tag <DIV> adalah "block tag" dalam HTML,berarti pergantian baris secara otomatisdisisipkan untuk memberikan jarak antara blokyang dibuat dengan teks atau blok lain sebelumdan sesudahnya (seperti tag <P> atau <TABLE>).

� Tag <DIV> sering digunakan untuk implementasilayer karena layer merupakan blokblok informasiterpisah. Tag <DIV> merupakan pilihan yangtepat saat membuat layer pada halaman web.


� Digunakan untuk mendefinisikan style yang berhubungan dengansuatu object memanfaatkan ID unik, biasa digunakan saatbekerja dengan layer

� Syntax: #IDSelector {Properti:Nilai;}

Tampilan:


Script HTML:<html>

<head><title>Selector ID</title><style type="text/css">

#layer1 {position:absolute; left:100;top:75; z-index:2}#layer2 {position:absolute; left:130;top:120; z-index:1}

</style></head><body>

<div id="layer1"><table border="1" bgcolor="cyan"><tr> <td>Ini adalah layer 1<br>Diletakkan pada posisi (100,100)</td></tr></table>

</div><div id="layer2">

<table border="1" bgcolor="yellow"><tr><td>Ini adalah layer 2<br>Diletakkan pada posisi (130,120)</td></tr></table>

</div></body>

</html>


�Untuk beberapa style yang sebagianproperti-nya memiliki nilai yang sama,misalnya jenis font yang sama;mendefinisikan font tidak perlu dilakukansatu demi satu untuk setiap selector.Pendefinisian dapat dikelompokkan,dengan cara melewatkan font ke semuaselector dalam satu kali.


Sebelum pengelompokan:.headlines{font-family:arial;color:black;background:yellow;font-size:14pt;}

.sublines{font-family:arial;color:black;background:yellow;font-size:12pt;}

.infotext{font-family:arial;color:black;background:yellow;font-size:10pt;}

Setelah pengelompokan:.headlines, .sublines, .infotext{font-family:arial;color:black;background:yellow;}

.headlines {font-size:14pt;}

.sublines {font-size:12pt;}

.infotext {font-size: 10pt;}


1. Style didefinisikan dalam tag HTML (tagtunggal)

2. Style didefinisikan di dalam bagian<head> dan diaplikasikan untuk seluruhdokumen HTML tersebut.

3. Style didefinisikan di file eksternal yangselanjutnya dapat digunakan olehdokumen HTML manapun denganmemasukkan CSS tersebut dalamdokumen yang diinginkan melalui URI.


CSS mendefinisikan tag tunggalnya hanya dengan menambahkanstyle seperti style="styledefinition:styleattribute;"

Script HTML:<html>

<head><title>Penggunaan CSS Tag Tunggal</title>

</head><body>

Ini adalah contoh<b style="font-size:16px;color:blue;"> bold </b>dengan menggunakan CSS.

</body></html>

Tampilan:


CSS dapat didefinisikan untuk satu halaman secara keseluruhanhanya dengan menambahkan suatu definisi style pada bagianhead dokumen HTML.

Tampilan:



<title>Penggunaan CSS untuk satu halaman Web</title><style type="text/css">

.headlines, .sublines, .infotext {font-family:arial;color:blue;background:cyan;font-weight:bold;}.headlines {font-size:14pt;}.sublines {font-size:12pt;}.infotext {font-size:10pt;}

</style></head><body>

<span class="headlines">Selamat Datang</span><br><div class="sublines"> Ini adalah contoh penggunaan web yang menggunakan CSS.<br>

Contoh ini menggunakan CSS untuk satu halaman Web.<br>Pendefinisian style cukup dilakukan di tag head.<br>

</div><br><table border="2"><tr>

<td class="sublines"> Style juga dapat dilakukan dalam elemen table. </td></tr></table><br><hr><div class="infotext"> contoh penggunaan CSS untuk satu halaman</div><hr>

</body></html>


CSS dapat didefinisikan untuk semua halamanhanya dengan menulis definisi CSS di dalamsebuah file teks yang selanjutnya dirujuk olehsetiap halaman web yang akanmenggunakannya.

Dengan demikian jika suatu saat ingindilakukan perubahan style yang berlaku untuksemua halaman Web maka yang diubah ada fileteks eksternal tersebut.



<title>Penggunaan CSS Eksternal</title><link rel=stylesheet href="style.css" type="text/css">

</head><body>

<span class="headlines">Selamat Datang</span><br><div class="sublines">

Ini adalah contoh penggunaan web yang menggunakanCSS.<br>

Contoh ini menggunakan CSS Eksternal.<br>Pendefinisian pemanggilan style dilakukan dengan

menggunakan tag link.<br></div><table border="2"><tr>

<td class="sublines">Style juga dapat dilakukan dalam elemen table.</td></tr>

</table><hr><div class="infotext">contoh penggunaan CSS eksternal</div><hr>

</body></html>

File style.css:.headlines, .sublines, .infotext{font-family:arial;color:blue;background:cyan;font-weight:bold;}.headlines {font-size:14pt;}.sublines {font-size:12pt;}.infotext {font-size:10pt;}


� Font� Text� Color� Link


Digunakan untuk mengaturtingkah-laku huruf (font).Elemen ini mempunyaibeberapa properti. Satuproperti dapat mempunyaibeberapa nilai.


Element text akanmembuat tampilan teksmenjadi lebih menarik


Elemen color yangdigunakan untuk mengaturwarna teks dan backgroundhalaman web


Digunakan sebagai penghubung sehingga dapat digunakan untukberpindah dari satu bagian ke bagian lain, dari satu halaman kehalaman lain bahkan dari satu situs ke situs lainnya. CSSmenyediakan elemen link yang dapat digunakan untuk mengaturperilaku link.

• A:link à untuk link normal yang belumdikunjungi, belum diklik.

• A:visited à untuk link yang telahdikunjungi.

• A:active à untuk link aktif. Link aktifadalah link yang halaman tujuannyasedang ditampilkan oleh web browser.

• A:hover à untuk link yang hover. Saatmouse digerakkan atau mouse over di atassuatu link, kondisi ini disebut link hover.

�MarginJarak element tersebut dengan elementlainnya.

� PaddingJarak antara element dengan isi didalamnya.

� BorderGaris pembungkus element.


�Rounded CornersEfek ini memungkinkan untuk membuatlekungan pada sebuah div/tombol.

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

�GradientsEfek ini memberikan gradasi warna.

-moz-linear-gradient(-90deg,#1aa6de,#022147);

-webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

� Drop ShadowsEfek dari drop shadows-box-shadow: #333 3px 3px 4px;

-moz-box-shadow: #333 3px 3px 4px;

-webkit-box-shadow: #333 3px 3px 4px;


� Border ColorEfek ini memberikan warna pada border danbisa lebih dari satu warna.

border: 8px solid #000;

-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Referensi CSS3

http://cahcepu.com/tutorial/css3hebat


� Pemakaian Tabel dalam halaman web dapat membuat informasitampil secara terstruktur, ringkas dan mudah dibaca sertamembuat tampilan web menjadi lebih menarik.

� Form digunakan untuk menerima informasi atau memintaumpan balik dari user dan memproses informasi tersebut diserver.

� CSS (Cascading Style Sheet) digunakan untuk memformat ataumembuat layout halaman web menjadi lebih menarik danmudah dikelola.

� Ada 3 mekanisme untuk mengaplikasikan CSS, yaitu: Styledidefinisikan dalam tag HTML (tag tunggal), di dalam bagian<head>, didefinisikan di file eksternal.

� Elemen-elemen CSS terdiri dari Font, Text, Color dan Link� Dalam mengatur layout sebuah website, maka perhatikan

Margin, Padding, dan Border


� Chris Bates [2006]. Web Programming: BuildingInternet Applications, Third Edition, John Wiley &Sons Ltd, England.

� Husni [2007]. Pemrograman Database Berbasis Web,Graha Ilmu, Yogyakarta.

� Sebesta, R.W. [2002], Programming the World WideWeb, Addison Wesley.

� Sutarman, S.Kom [2003]. Membangun Aplikasi Webdengan PHP dan MySQL, Graha Ilmu, Yogyakarta.

� Chris Bates [2006]. Web Programming: BuildingInternet Applications, Third Edition, John Wiley &Sons Ltd, England.

� Husni [2007]. Pemrograman Database Berbasis Web,Graha Ilmu, Yogyakarta.

� Sebesta, R.W. [2002], Programming the World WideWeb, Addison Wesley.

Documents

Pertemuan Ke-2 (HTML Lanjut & CSS) · PDF fileMeta tag § Meta tag keywords ... § Meta tag revised § Refresh page dan redirect Perkembangan HTML D3 Manajemen Informatika - Unijoyo