Materi : 1. Tabel LITS List Item LI : digunakan untuk mengelompokkan data baik berurutan

suvi.rahmagmail.com STMIK Pradnya Paramita 2017 Pertemuan 2 2.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah HTML 2. Mahasiswa dapat membuat beberapa halaman website sederhana

2.2 Materi : 1. Tabel

2. List 3. Form 4. Semantic HTML

2.3 Teori

2.3.1 Semantic HTML

Semantik adalah studi tentang makna kata-kata dan frase dalam bahasa. Unsur semantik = elemen dengan makna. Unsur semantik jelas menggambarkan artinya untuk kedua belah pihak yaitu browser dan pengembang. Contoh elemen non-semantik: div dan span - tidak menceritakan apa-apa tentang isinya. Contoh elemen semantik: form, table, dan article - Jelas mendefinisikan isinya. Banyak situs web 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 untuk menentukan 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 atau menyembunyikan  figcaption = Mendefinisikan sebuah caption untuk elemen figure  figure = Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll  footer = Mendefinisikan untuk dokumen atau bagian footer  header = Menentukan untuk dokumen atau bagian 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 suvi.rahmagmail.com STMIK Pradnya Paramita 2017 Elemen section elemen mendefinisikan bagian dalam sebuah dokumen. Sebuah halaman rumah bisa normal dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak. Skrip Hasil section h1WWFh1 pThe World Wide Fund for Nature WWF is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.p section elemen Article menentukan independen, konten mandiri. Contoh di mana elemen article dapat digunakan: posting forum, blog post. Artikel koran Skrip Hasil article h1What Does WWF Do?h1 pWWFs mission is to stop the degradation of our planets natural environment, and build a future in which humans live in harmony with nature.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 h1What Does WWF Do?h1 pWWFs mission:p header pWWFs mission is to stop the degradation of our planets natural environment, and build a future in which humans live in harmony with nature.p article elemen footer menentukan footer untuk dokumen atau bagian. Sebuah footer biasanya berisi penulis informasi dokumen, hak cipta, link ke persyaratan penggunaan, informasi kontak, dll Skrip Hasil footer pPosted by: Hege Refsnesp pContact information: a href=mailto:someoneexample.com someoneexample.coma.p footer suvi.rahmagmail.com STMIK Pradnya Paramita 2017 elemen nav mendefinisikan satu set link navigasi. Perhatikan bahwa tidak semua link dari dokumen harus di dalam elemen nav. elemen nav dimaksudkan hanya untuk blok utama link navigasi. Skrip Hasil nav a href=htmlHTMLa | a href=cssCSSa | a href=jsJavaScripta | a href=jqueryjQuerya nav elemen aside mendefinisikan beberapa konten selain dari konten itu ditempatkan di seperti sidebar.Samping konten harus terkait dengan konten sekitarnya. Skrip Hasil pMy family and I visited The Epcot center this summer.p aside h4Epcot Centerh4 pThe Epcot Center is a theme park in Disney World, Florida.p aside Tujuan dari sosok caption adalah menambahkan penjelasan visual untuk gambar. Img elemen mendefinisikan gambar, figcaption mendefinisikan judul. Dalam HTML5, gambar dan keterangan dapat dikelompokkan bersama dalam sebuah elemen figure: Skrip Hasil figure img src=img_pulpit.jpg alt=The Pulpit Rock width=304 height=228 figcaptionFig.1 - The Pulpit Rock, Norway.figcaption figure

2.3.2 Tabel

Untuk menambahkan sebuah table yang baris dan kolomnya dapat anda sesuaikan 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 tabel CSS border property Untuk menentukan jarak garis CSS border-collapse Untuk menjadikan satu garis CSS padding property Untuk menambah padding untuk sel CSS text-align Untuk menyelaraskan teks sel CSS border-spacing Untuk mengatur jarak antara sel- sel suvi.rahmagmail.com STMIK Pradnya Paramita 2017 Tag Definisi colspan untuk membuat rentang sel banyak kolom rowspan untuk membuat rentang sel banyak baris id untuk mendefinisikan identitas satu tabel Contoh : table style=width:100 tr thFirstnameth thLastnameth thAgeth tr tr tdJilltd tdSmithtd td50td tr tr tdEvetd tdJacksontd td94td tr tr tdJohntd tdDoetd td80td tr table Pada elemen Table HTML 5, Untuk menambahkan sebuah border menggunakan 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 suvi.rahmagmail.com STMIK Pradnya Paramita 2017 Jika Anda ingin garis batas jadi dalam satu garis, tambahkan properti CSS border-collapse. Sel Padding menentukan ruang antara isi 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. Secara default, 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 Spacing Border menentukan ruang antara sel-sel. Untuk mengatur jarak antar garis, menggunakan properti CSS border-spacing, jika garisnya Cuma satu maka jaraknya tidak terlihat. Untuk membuat merger atau merekatkan beberapa kolom kita membutuhkan atribut colspan dan rowspan untuk merekatkan beberapa baris. Skrip Hasil table style=width:100 tr thNameth th colspan=2Telephoneth tr tr tdBill Gatestd td55577854td td55577855td tr table h2Cell that spans two rows:h2 table style=width:100 tr thName:th tdBill Gatestd tr tr th rowspan=2Telephone:th td55577854td tr tr td55577855td tr table Untuk menambahkan keterangan pada tabel kita menggunakan tag caption, tag caption harus ditulis setelah tag table Skrip Hasil table style=width:100 captionMonthly savingscaption tr thMonthth thSavingsth tr tr suvi.rahmagmail.com STMIK Pradnya Paramita 2017 tdJanuarytd td100td tr tr tdFebruarytd td50td tr table Untuk menentukan gaya khusus untuk tabel khusus, maka perlu menambahkan 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; } tablet01 { width: 100; background-color: f1f1c1; } style head body table style=width:100 tr thFirstnameth thLastnameth thAgeth tr tr tdJilltd tdSmithtd td50td tr tr tdEvetd tdJacksontd td94td tr tr tdJohntd tdDoetd td80td tr table br table id=t01 tr thFirstnameth thLastnameth thAgeth tr tr tdJilltd suvi.rahmagmail.com STMIK Pradnya Paramita 2017 tdSmithtd td50td tr tr tdEvetd tdJacksontd td94td tr tr tdJohntd tdDoetd td80td tr table body html tablet01 tr:nth-childeven { background-color: eee; } tablet01 tr:nth-childodd { background-color:fff; } tablet01 th { background-color: black; color: white; }

2.3 LITS List Item LI : digunakan untuk mengelompokkan data baik berurutan

ordered list maupun yang tidak berurutan unordered list. Daftar dapat bersarang di dalam daftar. Daftar item dapat berisi elemen HTML lainnya Atributelemen Definisi ul untuk mendefinisikan daftar unordered tidak berurutan CSS list-style-type untuk menentukan item daftar penanda ol untuk mendefinisikan daftar berurutan type 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 h2An Unordered HTML Listh2 ul liCoffeeli liTeali liMilkli ul h2An Ordered HTML Listh2 ol suvi.rahmagmail.com STMIK Pradnya Paramita 2017 liCoffeeli liTeali liMilkli ol body html Unordered Tidak berurutan List HTML Dan List unordered dimulai dengan tag ul. Setiap item daftar dimulai dengan tag li. Daftar item akan ditandai dengan peluru lingkaran hitam kecil secara default. Unordered List mempunyai Pilihan penanda dengan menggunakan Properti CSS list-style-type. Skrip h2Unordered List with Disc Bulletsh2 ul style=list-style-type:disc liCoffeeli liTeali liMilkli ul

1. Disc =

Menetapkan item daftar penanda dengan peluru default

2. Circle = Menetapkan item daftar penanda dengan lingkaran

3. Square = menetapkan item daftar penanda dengan persegi

4. None = tidak menggunakan penanda

Ordered List atau Daftar HTML yang berurutan.Daftar ini memerintahkan dengan tag ol. Setiap item daftar dimulai dengan tag li. Daftar item akan ditandai dengan angka secara default: Skrip h2Ordered List with Numbersh2 ol type=1 liCoffeeli liTeali liMilkli ol 1. Type = 1 : Daftar item diberi nomor dengan angka default 2. Type = A : Daftar item diberi nomor dengan huruf capital 3. Type = a : Daftar item diberi nomor dengan huruf kecil 4. Type = I : Daftar item diberi nomor dengan huruf romawi besar 5. Type = i : Daftar item diberi nomor dengan huruf romawi kecil HTML juga mendukung daftar deskripsi.Sebuah daftar deskripsi adalah daftar istilah, dengan deskripsi setiap istilah. Tag dl mendefinisikan daftar deskripsi, tag dt mendefinisikan istilah nama, dan Tag dd menjelaskan setiap istilah: Skrip Hasil h2A Description Listh2 dl dtCoffeedt dd- black hot drinkdd dtMilkdt dd- white cold drinkdd dl List atau daftar juga bisa bersarang, Daftar item dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan link, dll Skrip Hasil suvi.rahmagmail.com STMIK Pradnya Paramita 2017 h2A Nested Listh2 ul liCoffeeli liTea ul liBlack teali liGreen teali ul li liMilkli ul Daftar HTML bisa ditata dalam berbagai cara dengan CSS. Salah satu cara yang 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 lia href=homeHomeali lia href=newsNewsali lia href=contactContactali lia href=aboutAboutali ul body html suvi.rahmagmail.com STMIK Pradnya Paramita 2017

2.4. HTML Forms Pada saat membuat form anda bisa meletakkan kontrol - kontrol pada