MODUL 2 HTML (H yperText Mark-Up Language)staffsite.stimata.ac.id/assets/uploads/files/download/bb0a6-modul...List atau daftar juga bisa bersarang, Daftar item dapat berisi daftar

Praktikum Pemrograman Berbasis Web

[email protected] Pradnya Paramita 2017

MODUL 2

HTML

(HyperText Mark-Up Language)

Laboratorium KomputerSTIMIK PPKIA Pradnya Paramita Malang



Pertemuan 22.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai

perintah – perintah HTML2. Mahasiswa dapat membuat beberapa halaman

website sederhana2.2 Materi :

1. Tabel2. List3. Form4. Semantic HTML

2.3 Teori2.3.1 Semantic HTML

Semantik adalah studi tentang makna kata-kata dan frase dalambahasa. Unsur semantik = elemen dengan makna. Unsur semantik jelasmenggambarkan artinya untuk kedua belah pihak yaitu browser danpengembang. Contoh elemen non-semantik: <div> dan <span> - tidakmenceritakan apa-apa tentang isinya. Contoh elemen semantik: <form>,<table>, dan <article> - Jelas mendefinisikan isinya. Banyak situsweb berisi kode HTML seperti: <div id = "nav"> <div class ="header"> <div id = "footer"> untuk menunjukkan navigasi, header,dan footer. HTML5 menawarkan unsur-unsur semantik baru untukmenentukan bagian-bagian yang berbeda dari suatu halaman web:

<article> = mendefinisikan sebuah artikel <aside> =Mendefinisikan konten selain dari

konten halaman <details> = Mendefinisikan rincian tambahan

bahwa pengguna dapat melihat ataumenyembunyikan

<figcaption> = Mendefinisikan sebuahcaption untuk elemen <figure>

<figure> = Menentukan konten mandiri,seperti ilustrasi, diagram, foto, daftarkode, dll

<footer> = Mendefinisikan untuk dokumenatau bagian footer

<header> = Menentukan untuk dokumen ataubagian header

<main> = Menentukan isi utama dokumen <mark> = Mendefinisikan teks yang ditandai

/ disorot <nav> = Mendefinisikan link navigasi <section> = Mendefinisikan sebuah bagian

dalam sebuah dokumen <summary> = Mendefinisikan sebuah judul

terlihat untuk <details> elemen <time> = Mendefinisikan tanggal / waktu



Elemen <section> elemen mendefinisikan bagian dalam sebuah dokumen.Sebuah halaman rumah bisa normal dibagi menjadi beberapa bagianuntuk pengenalan, konten, dan informasi kontak.Skrip Hasil<section>

<h1>WWF</h1><p>The World Wide Fund for Nature

(WWF) is an internationalorganization working on issuesregarding the conservation, researchand restoration of the environment,formerly named the World WildlifeFund. WWF was founded in 1961.</p></section>

elemen <Article> menentukan independen, konten mandiri. Contoh dimana elemen <article> dapat digunakan: posting forum, blog post.Artikel koranSkrip Hasil<article>

<h1>What Does WWF Do?</h1><p>WWF's mission is to stop the

degradation of our planet's naturalenvironment, and build a future inwhich humans live in harmony withnature.</p></article>

elemen <header> menentukan header untuk dokumen atau bagian. Elemen<header> harus digunakan sebagai wadah untuk konten pengantar.Contoh berikut mendefinisikan header untuk sebuah artikel:Skrip Hasil<article>

<header><h1>What Does WWF Do?</h1><p>WWF's mission:</p>

</header><p>WWF's mission is to stop the

degradation of our planet's naturalenvironment, and build a future inwhich humans live in harmony withnature.</p></article>

elemen <footer> menentukan footer untuk dokumen atau bagian. Sebuahfooter biasanya berisi penulis informasi dokumen, hak cipta, link kepersyaratan penggunaan, informasi kontak, dllSkrip Hasil<footer><p>Posted by: Hege Refsnes</p><p>Contact information: <a

href="mailto:[email protected]">[email protected]</a>.</p>

</footer>



elemen <nav> mendefinisikan satu set link navigasi. Perhatikan bahwatidak semua link dari dokumen harus di dalam elemen <nav>. elemen<nav> dimaksudkan hanya untuk blok utama link navigasi.Skrip Hasil<nav>

<a href="/html/">HTML</a> |<a href="/css/">CSS</a> |<a href="/js/">JavaScript</a> |<a href="/jquery/">jQuery</a>

</nav>

elemen <aside> mendefinisikan beberapa konten selain dari konten ituditempatkan di (seperti sidebar).Samping konten harus terkait dengankonten sekitarnya.Skrip Hasil<p>My family and I visited The Epcotcenter this summer.</p><aside>

<h4>Epcot Center</h4><p>The Epcot Center is a theme park

in Disney World, Florida.</p></aside>

Tujuan dari sosok caption adalah menambahkan penjelasan visual untukgambar. <Img> elemen mendefinisikan gambar, <figcaption> mendefinisikanjudul.Dalam HTML5, gambar dan keterangan dapat dikelompokkan bersamadalam sebuah elemen <figure>:Skrip Hasil<figure>

<img src="img_pulpit.jpg" alt="The PulpitRock" width="304" height="228">

<figcaption>Fig.1 - The Pulpit Rock,Norway.</figcaption></figure>

2.3.2 TabelUntuk menambahkan sebuah table yang baris dan kolomnya dapat andasesuaikan kebutuhan table yang anda buat. Elemen table terdiri dari<tr>, <td> dan <th>. Dimana fungsi masing – masing berbeda, <tr>digunakan untuk membuat baris, <th> untuk membuat header, <td>digunakan untuk membuat kolom. <Td> elemen adalah wadah data tabel.Mereka dapat berisi segala macam elemen HTML; teks, gambar, daftar,tabel lain, dll. Atribut elemen Tabel pada HTML 5 sebagai berikut :

Tag Definisi<table> elemen untuk mendefinisikan tabel<tr> elemen untuk menentukan baris tabel<td> elemen untuk menentukan data tabel<th> elemen untuk menentukan tabel pos<caption> elemen untuk mendefinisikan judul tabelCSS border property Untuk menentukan jarak garisCSS border-collapse Untuk menjadikan satu garisCSS padding property Untuk menambah padding untuk selCSS text-align Untuk menyelaraskan teks selCSS border-spacing Untuk mengatur jarak antara sel- sel



Tag Definisicolspan untuk membuat rentang sel banyak kolomrowspan untuk membuat rentang sel banyak barisid untuk mendefinisikan identitas satu tabel

Contoh :<table style="width:100%"><tr><th>Firstname</th><th>Lastname</th><th>Age</th>

</tr><tr><td>Jill</td><td>Smith</td><td>50</td>

</tr><tr><td>Eve</td><td>Jackson</td><td>94</td>

</tr><tr><td>John</td><td>Doe</td><td>80</td>

</tr></table>

Pada elemen Table HTML 5, Untuk menambahkan sebuah bordermenggunakan property CSS :Skrip hasil<style>table, th, td {

border: 1px solid black; (1)border-collapse: collapse; (2)

}th, td {

padding: 15px; (3)}th {

text-align: left; (4)}table {

border-spacing: 15px;(5)}</style>



Jika Anda ingin garis batas jadi dalam satu garis, tambahkanproperti CSS border-collapse. Sel Padding menentukan ruang antaraisi sel dan perbatasannya. Jika Anda tidak menentukan bantalan, sel-sel tabel akan ditampilkan tanpa padding. Untuk mengatur padding,menggunakan properti CSS padding. HTML Table –align kiri. Secaradefault, judul tabel yang ada adalah tebal dan berada di tengah.Untuk menyelaraskan tajuk tabel maka align berada di kiri,menggunakan properti text-align CSS. jarak Padding Border SpacingBorder menentukan ruang antara sel-sel. Untuk mengatur jarak antargaris, menggunakan properti CSS border-spacing, jika garisnya Cumasatu maka jaraknya tidak terlihat. Untuk membuat merger ataumerekatkan beberapa kolom kita membutuhkan atribut colspan danrowspan untuk merekatkan beberapa baris.

Skrip Hasil<table style="width:100%">

<tr><th>Name</th><th colspan="2">Telephone</th>

</tr><tr>

<td>Bill Gates</td><td>55577854</td><td>55577855</td>

</tr></table><h2>Cell that spans two rows:</h2><table style="width:100%">

<tr><th>Name:</th><td>Bill Gates</td>

</tr><tr>

<th rowspan="2">Telephone:</th><td>55577854</td>

</tr><tr>

<td>55577855</td></tr>

</table>

Untuk menambahkan keterangan pada tabel kita menggunakan tag<caption>, tag <caption> harus ditulis setelah tag <table>Skrip Hasil<table style="width:100%">

<caption>Monthly savings</caption><tr>

<th>Month</th><th>Savings</th>

</tr><tr>



<td>January</td><td>$100</td>

</tr><tr>

<td>February</td><td>$50</td>

</tr></table>Untuk menentukan gaya khusus untuk tabel khusus, maka perlumenambahkan atribut id ke tabel, contoh:Skrip Hasil<!DOCTYPE html><html><head><style>table, th, td {

border: 1px solid black;border-collapse: collapse;

}th, td {

padding: 5px;text-align: left;

}table#t01 {

width: 100%;background-color: #f1f1c1;

}</style></head><body><table style="width:100%">

<tr><th>Firstname</th><th>Lastname</th><th>Age</th>

</tr><tr>

<td>Jill</td><td>Smith</td><td>50</td>

</tr><tr>

<td>Eve</td><td>Jackson</td><td>94</td>

</tr><tr>

<td>John</td><td>Doe</td><td>80</td>

</tr></table><br><table id="t01">

<tr><th>Firstname</th><th>Lastname</th><th>Age</th>

</tr><tr>

<td>Jill</td>



<td>Smith</td><td>50</td>

</tr><tr>


</tr><tr>

<td>John</td><td>Doe</td><td>80</td>

</tr></table></body></html>table#t01 tr:nth-child(even) {

background-color: #eee;}table#t01 tr:nth-child(odd) {

background-color:#fff;}table#t01 th {

background-color: black;color: white;

}

2.3 LITSList Item (LI) : digunakan untuk mengelompokkan data baik berurutan(ordered list) maupun yang tidak berurutan (unordered list). Daftardapat bersarang di dalam daftar. Daftar item dapat berisi elemenHTML lainnya

Atribut/elemen Definisi<ul> untuk mendefinisikan daftar unordered (tidak

berurutan)CSS list-style-type untuk menentukan item daftar penanda<ol> untuk mendefinisikan daftar berurutantype menentukan jenis penomoran<li> untuk menentukan item daftar<dl> untuk mendefinisikan daftar deskripsi<dt> untuk mendefinisikan istilah deskriptif<dd> untuk menggambarkan istilah dalam daftar deskripsi

Skrip Hasil<!DOCTYPE html><html><body><h2>An Unordered HTML List</h2><ul>

<li>Coffee</li><li>Tea</li><li>Milk</li>

</ul><h2>An Ordered HTML List</h2><ol>




</ol></body></html>

Unordered (Tidak berurutan) List HTML Dan List unordered dimulaidengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Daftaritem akan ditandai dengan peluru (lingkaran hitam kecil) secaradefault. Unordered List mempunyai Pilihan penanda dengan menggunakanProperti CSS list-style-type.Skrip<h2>Unordered List with DiscBullets</h2><ul style="list-style-type:disc">


</ul>

1. Disc = Menetapkan item daftarpenanda dengan peluru (default)

2. Circle = Menetapkan item daftarpenanda dengan lingkaran

3. Square = menetapkan item daftarpenanda dengan persegi

4. None = tidak menggunakan penanda

Ordered List atau Daftar HTML yang berurutan.Daftar inimemerintahkan dengan tag <ol>. Setiap item daftar dimulai dengan tag<li>. Daftar item akan ditandai dengan angka secara default:Skrip<h2>Ordered List with Numbers</h2>

<ol type="1"><li>Coffee</li><li>Tea</li><li>Milk</li>

</ol>

1. Type =”1” : Daftar item diberinomor dengan angka (default)

2. Type = “A” : Daftar item diberinomor dengan huruf capital

3. Type = “a” : Daftar item diberinomor dengan huruf kecil

4. Type = “I” : Daftar item diberinomor dengan huruf romawi besar

5. Type = “i” : Daftar item diberinomor dengan huruf romawi kecil

HTML juga mendukung daftar deskripsi.Sebuah daftar deskripsi adalahdaftar istilah, dengan deskripsi setiap istilah. Tag <dl>mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah(nama), dan Tag <dd> menjelaskan setiap istilah:

Skrip Hasil<h2>A Description List</h2><dl>

<dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd>

</dl>

List atau daftar juga bisa bersarang, Daftar item dapat berisidaftar baru, dan elemen HTML lainnya, seperti gambar dan link, dllSkrip Hasil



<h2>A Nested List</h2><ul>

<li>Coffee</li><li>Tea

<ul><li>Black tea</li><li>Green tea</li></ul>

</li><li>Milk</li>

</ul>

Daftar HTML bisa ditata dalam berbagai cara dengan CSS.Salah satu carayang populer adalah gaya daftar horizontal, untuk membuat menu:

Skrip Hasil<!DOCTYPE html><html><head><style>ul {

list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333333;

}li {

float: left;}li a {

display: block;color: white;text-align: center;padding: 16px;text-decoration: none;

}li a:hover {

background-color: #111111;}</style></head><body><ul>

<li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a

href="#contact">Contact</a></li><li><a

href="#about">About</a></li></ul></body></html>



2.4. HTML FormsPada saat membuat form anda bisa meletakkan kontrol - kontrol padaform untuk memperbolehkan inputan dari user. Semua kontrol biasanyadi letakkan di antara tag <FORM></FORM> tapi anda juga bisameletakkan kontrol diluar tag tersebut. Untuk menambahkan kontrolgunakan tag <input>.

Kegunaan FormBerikut ini beberapa contoh kegunaan Form dalam web:1. memperoleh data-data user baik nama, alamat dan data lainnya2. memperoleh informasi pembelian secara online3. memperoleh feedback dari user mengenai website anda

Pada dasarnya tag <Form> dan <Input> digunakan bersama – sama untukmeminta masukan dari user kemudian dikirimkan ke server. Tag <Form>menyediakan kerangkanya. Tag <Input> menyediakan elemennya.

Standar penulisan form adalah sebagai berikut:<Form Method = ”POST / GET” Action = ”URL”>...</Form>

Attribute Method memiliki dua nilai, yaitu POST dan GET. Method GETberfungsi untuk mengirimkan data pada server dengan cara meletakkandata pada bagian akhir URL(Uniform Resource Locator) yang ditunjuk.Method POST berfungsi untuk mengirimkan datanya secara terpisah.Jika data masukkan terlalu banyak, disarankan menggunakan methodPOST.Attribut ACTION berisi URL dari program / dokumen yang berisiscripting yang dipanggil oleh form tersebut.

Atribut Keterangan

Name nama untuk form yang berlakuMethod GET = data yang dikirim melalui URL address

POST = data yang dikirimkan bersama HTTP header

Action URL / File yang digunaka untuk menangkap danmengolah nilai

2.4.1 Elemen InputBentuk elemen yang paling penting adalah elemen <input>. elemen<Input> dapat ditampilkan dalam beberapa cara, tergantung pada jenisatribut. Macam – macam elemen input:

<Input type = "text"> mendefinisikan satu baris kolom input teks.<Input type = "password"> mendefinisikan sebuah kolom passworddengan karakter yang ditampilkan lingkaran atau bintang.<Input type = "submit"> mendefinisikan tombol untuk mengirimkan dataformulir ke bentuk-handler. Bentuk-handler biasanya halaman serverdengan script untuk memproses input data.<Input type = "reset"> mendefinisikan sebuah tombol reset yang akanmengatur ulang semua nilai bentuk ke nilai standar.



<Input type = "radio"> mendefinisikan tombol radio. Tombol radiohanya bisa di[ilih HANYA SATU dari sejumlah pilihan<Input type = "checkbox"> mendefinisikan sebuah kotak yang bisadicentang. Pengguna bisa tidak memilih atau memilih lebih dari satu.

Skrip Hasil<form action="/action_page.php">First name:<br><input type="text" name="firstname"><br>Last name:<br><input type="text" name="lastname"><br><br><input type="submit"></form>User password:<br><input type="password" name="psw"><input type="submit" value="Submit"><form action="/action_page.php">

<input type="radio" name="gender" value="male" checked>Male<br>

<input type="radio" name="gender" value="female">Female<br>

<input type="radio" name="gender" value="other">Other<br><br>

<input type="submit"></form><form action="/action_page.php"><input type="checkbox" name="vehicle1" value="Bike">I havea bike<br><input type="checkbox" name="vehicle2" value="Car">I havea car<br><br><input type="submit"></form>

Elemen <Select> mendefinisikan daftar drop-down. <Option> elemenmendefinisikan opsi yang bisa dipilih. Secara default, item pertamadalam daftar drop-down yang dipilih. Untuk menentukan pilihan pra-dipilih, menambahkan atribut selected untuk pilihan:

Skrip Hasil<select name="cars">

<option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option>

</select><br><br><input type="submit">

elemen <textarea> mendefinisikan field input multi-line (text area).Atribut rows menentukan jumlah terlihat baris dalam area teks.Atribut cols menentukan lebar terlihat dari area teks.Skrip Hasil



<form ><textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea><br><input type="submit">

</form>

elemen <button> mendefinisikan sebuah tombol diklikSkrip Hasil<button type="button" onclick="alert('HelloWorld!')">Click Me!</button>

Pada HTML 5 tabel terdapat beberapa element baru yaitu : elemen<datalist> menentukan daftar pilihan yang telah ditentukan untukelemen <input>. Pengguna akan melihat daftar drop-down pilihan pra-didefinisikan sebagai mereka input data. Daftar atribut dari elemen<input>, harus mengacu pada atribut id dari elemen <datalist>.Skrip Hasil<input list="browsers"name="browser">

<datalist id="browsers"><option value="Internet

Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari">

</datalist><input type="submit">

</form>

Tujuan dari elemen <keygen> adalah untuk menyediakan cara yang amanuntuk mengotentikasi pengguna. elemen <keygen> menentukan bidang keygenerator-pair dalam formulir.Ketika formulir dikirimkan, dua tomboldihasilkan, satu pribadi dan satu publik. Kunci pribadi disimpansecara lokal, dan kunci publik dikirim ke server.Kunci publik dapatdigunakan untuk menghasilkan sertifikat klien untuk mengotentikasipengguna di masa depan.

Skrip HasilUsername: <input type="text" name="user">

<br><br>Encryption: <keygen name="security"><br><br><input type="submit">

elemen <output> merupakan hasil perhitungan (seperti yang dilakukanoleh script). melakukan perhitungan dan menampilkan hasil dalam elemen<output>.

<form action="/action_page.php"oninput="x.value=parseInt(a.value)+parseInt(b.value)">

0<input type="range" id="a" name="a" value="50">



100 +<input type="number" id="b" name="b" value="50">=<output name="x" for="a b"></output><br><br><input type="submit">

</form>

Elemen Inputan baru di HTML 5, jenis inputan baru yang tidakdidukung oleh browser web yang lebih lama, akan tetapi cara kerjanyaseperti <input type = "text">. Berikut elemen inputan yang baru diHTML 5 :<Input type = "color"> digunakan untuk field input yang harus berisiwarna.<Input type = "date"> digunakan untuk field input yang harus berisitanggal. Tergantung pada dukungan browser, tanggal pemetik dapatmuncul di bidang masukan<Input type = "datetime-local"> menentukan field input tanggal danwaktu, dengan tidak ada zona waktu.<Input type = "email"> digunakan untuk field input yang harus berisialamat email. Tergantung pada dukungan browser, alamat e-mail dapatsecara otomatis divalidasi ketika disampaikan. Beberapa smartphonemengenali jenis email, dan menambahkan ".com" ke keyboard untukmencocokkan masukan email.<Input type = "month"> memungkinkan pengguna untuk memilih bulan dantahun.<Input type = "angka"> mendefinisikan sebuah field input numerik.Anda juga dapat mengatur pembatasan apa nomor yang diterima. Contohberikut menampilkan field input numerik, di mana Anda dapatmemasukkan nilai dari 1 sampai 5:<input type = "range"> mendefinisikan kontrol untuk memasukkan nomoryang nilainya sebenarnya tidak penting (seperti kontrol slider).Kisaran default adalah 0 sampai 100. Namun, Anda dapat mengaturpembatasan nomor apa yang diterima dengan min, max, dan value.<Input type = "search"> digunakan untuk bidang pencarian (kolompencarian berperilaku seperti kolom teks biasa).<Input type = "tel"> digunakan untuk field input yang harus berisinomor telepon.<input type = "waktu"> memungkinkan pengguna untuk memilih waktu(tidak ada zona waktu)<Input type = "url"> digunakan untuk field input yang harus berisialamat URL.Tergantung pada dukungan browser, bidang url dapat secaraotomatis divalidasi ketika disampaikan.Beberapa smartphone mengenalijenis url, dan menambahkan ".com" ke keyboard untuk mencocokkanmasukan url.<input type = "week"> memungkinkan pengguna untuk memilih satuminggu dan tahun.

Skrip Hasil<form action="/action_page.php">

Select your favorite color:<input type="color"

name="favcolor" value="#ff0000"><input type="submit">

</form>



Skrip Hasil<form action="/action_page.php">

Birthday:<input type="date" name="bday"><input type="submit">

</form>

<form action="/action_page.php">Enter a date before 1980-01-01:<br><input type="date" name="bday"max="1979-12-31"><br><br>Enter a date after 2000-01-01:<br><input type="date" name="bday"min="2000-01-02"><br><br><input type="submit"></form><form action="/action_page.php">

Birthday (date and time):<input type="datetime-local"

name="bdaytime"><input type="submit" value="Send">

</form><form action="/action_page.php">

E-mail:<input type="email" name="email"><input type="submit">

</form><form action="/action_page.php">

Birthday (month and year):<input type="month"

name="bdaymonth"><input type="submit">

</form>

<form action="/action_page.php">Quantity (between 1 and 5):<input type="number"

name="quantity" min="1" max="5"><input type="submit">

</form>

Aturan masukan/ Inputan pada HTML5.Berikut adalah daftar dari beberapa aturan masukan umum:Atribut Deskripsidisabled Menentukan bahwa sebuah field input harus dinonaktifkanmax Menentukan nilai maksimum untuk sebuah field inputmaxlength Menentukan jumlah maksimum karakter untuk sebuah field

inputMin Menentukan nilai minimum untuk sebuah field inputpattern untuk Menentukan ekspresi reguler dan memeriksa nilai

terhadap masukanreadonly Menentukan bahwa sebuah field input hanya bisa dibaca

saja (tidak dapat diubah)Required Menentukan bahwa sebuah field input diperlukan (harus

diisi)Size Menentukan lebar (dalam karakter) dari sebuah field inputStep Menentukan interval nomor hukum untuk sebuah field inputValue Menentukan nilai default untuk field input



3.4 LATIHAN PRAKTIKUM3.4.1 PENGGUNAAN TABEL1. Membuat garis tabel menjadi satu garis.

<!DOCTYPE html><html><head><style>table, th, td {


}th, td {


}</style></head><body>

<table style="width:100%"><tr>

<th>First Name</th><th>Last Name</th><th>Points</th>

</tr><tr>


</tr><tr>


</tr></table>

</body></html>

2. Membuat meja lebar 300 piksel<!DOCTYPE html><html><head><style>table, th, td {


}th, td {



<table style="width:300px"><tr>

<th>First Name</th><th>Last Name</th>



<th>Points</th></tr><tr>


</tr><tr>


</tr></table>

</body></html>

3. Menambahkan keterangan dengan huruf "Nama" ke Tabel<!DOCTYPE html><html><head><style>table, th, td {


}th, td {



<table style="width:100%"><caption>Names</caption><tr>


</tr><tr>


</tr><tr>


</tr></table>

</body></html>

4. Ubah garis tabel menjadi 5 piksel, dan berwarna merah.<!DOCTYPE html><html><head><style>



table, th, td {border: 5px solid red;

}th, td {





</tr><tr>


</tr><tr>


</tr></table>

</body></html>

5. menyelaraskan teks dalam tabel disebelah kiri<!DOCTYPE html><html><head><style>table, th, td {

border: 1px solid black;border-collapse: collapse;padding: 5px;text-align: left;




</tr><tr>


</tr><tr>

<td>Eve</td><td>Jackson</td>



<td>94</td></tr>

</table>

</body></html>

6. Menambahkan warna latar belakang hitam dengan teks putih untuksemua baris tabel.<!DOCTYPE html><html><head><style>table, th, td {

border: 1px solid black;text-align: left;

}tr {

background-color : black;color : white;




</tr><tr>


</tr><tr>


</tr></table>

</body></html>

2. Penggabungan sel dengan tag <ROWSPAN> dan <COLSPAN>a. Atribut ROWSPAN ditempatkan pada tag <TD>



b. Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>

3. Pengaturan jarak dalam tabel :CELLSPACING mengatur jarak bagian sel terhadap tepi dalam bingkaitabel.CELLPADDING mengatur jarak teks terhadap tepi kiri.

3.4.2 PENGGUNAAN FORM1. Input data dengan input

File info.htm yang dituju oleh web diatas.



2. Penggunaan tipe checkbox

3. Penggunaan tombol radio dan komentar

4. Pemilihan dengan select



3.5 TUGAS1.Buatlah seperti tampilan dibawah ini

Nb : untuk kolom Negara isi dengan 1. USA, 2.Australia, 3. Germany2.Buatlah Tabel

Documents

MODUL 2 HTML (H yperText Mark-Up Language)staffsite.stimata.ac.id/assets/uploads/files/download/bb0a6-modul...List atau daftar juga bisa bersarang, Daftar item dapat berisi daftar