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