Frozaq: ppw

Pengenalan Perancangan WEB

Pertemuan 1-3

Pengenalan Perancangan WEB

HTML (Hyper Text Markup Language) adalah bahasa untuk membentuk sebuah halaman web dan html bukan sebuah bahasa pemrograman melainkan bahasa markup (markup language). Markup language terdiri dari sekumpulan markups tag. Simbol markup yang digunakan oleh HTML ditandai dengan tanda lebih kecil (<) dan tanda lebih besar (>) yang biasa disebut tag.

1. Penamaan Dokumen HTML

Untuk membuat program aplikasi yang berjalan di atas web, harus terlebih dahulu menguasai HTML. Saat ini banyak terdapat paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG (What You See Is What You Get) sperti Microsoft FrontPage, Macromedia DreamWeaver dan sebagainya, yang memudahkan untuk merancang halaman web tanpa harus menguasai tag-tag HTML. Tetapi untuk menjadikan halaman web lebih dinamis dan lebih interaktif, penguasaan terhadap tag-tag HTML akan sangat diperlukan.

Untuk menandai bahwa sebuah file teks merupakan file HTML maka ciri yang paling nampak jelas adalah ekstensi filenya yakni .htm atau .html. Format ekstensi .htm awalnya hanyalah mengakomodasikan penggunaan html dalam operasi DOS. Dalam pemberian nama sebuah dokumen bersifat case sensitive sehingga dokumen dengan nama r.html akan berbeda dengan R.html. Kasus case sensitive akan dijumpai pada dokumen web yang di hosting di dalam server berbasis *nix (keluarga sistem operasi Unix).

2. Definisi Elemen dan Tag HTML

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML. Elemen dapat berupa teks murni atau bukan teks, atau keduanya. Untuk menandai sebuah elemen dalam suatu dokumen HTML di sebut tag. Suatu elemen biasanya ditandai dengan pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa harus berpasangan, diantaranya :

a. Image ( <img/> )

b. Ganti Baris – Break ( <br/> )

c. Horizontal Ruler ( <hr/> )

d. Input Field ( <input/> )

Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dikumen dengan tag yang bersangkutan.

3. Penggunaan Tag dan Atribut Tag

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag HTML, memiliki syarat penulisan :

a. Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )

b. Tag HTML secara normal selalu berpasangan

c. Tag pertama dalam suatu pasangan adalah tag awal dan tag yang kedua merupakan tag akhir

d. Tag HTML tidak case sensitive, artinya <b> sama dengan <B>

e. Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya <b> <I>..Tebal dan Miring.. </I> </b>

4. Struktur Dasar HTML

<html>

<head>

<title>Judul</title>

</head>

<body>

Konten yang akan ditampilkan pada halaman browser

</body>

</html>

5. Tag-Tag Dasar HTML

5.1 HTML

Tag dasar yang mendefinisikan bahwa dokumen adalah dokumen html. Tag ini merupakan suatu keharusan bagi pemrograman web untuk menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag seperti :

<html> pada awal dokumen dan </html> pada akhir dokumen

5.2 HEAD

Sebenarnya tidak harus ada pada dokumen html tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen html. Penulisan tag seperti :

<head> di awal setelah <html> dan </head> di akhir section head.

Elemen-elemen pada bagian head akan mengerjakan tugas sebagai berikut :

a. Menyediakan judul dokumen

b. Menjembatani hubungan antar dokumen

c. Memberitahu browser untuk membuat form pencarian

d. Menyediakan metode untuk mengirim pesan ke tipe browser

Elemen yang mungkin ada pada bagian head, yaitu:

a. Tag <title> untuk memberi judul dokumen. Penggunaannya :

<title> Judul dokumen </title>

b. Tag <base> untuk menentukan basis URL. Contoh penggunaannya :

c. Tag <link> untuk menunjukan relasi antar dokumen html.

Tag ini memiliki beberapa atribut :

Atribut	Fungsi
href	Menunjukan pada URL/dokumen lain
rel	Mendefinisikan relasi terhadap sebuah dokumen dan dokumen lain yang berisi informasi tentang personil yang memberi kontribusi terhadap dokumen tersebut
rev	Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
type	Menentukan tipe dan parameter dari relasi

Contoh penggunaanya :

d. Tag <meta> untuk mendefinisikan informasi-informasi di luar HTML. Informasi meta dapat digunakan olej=h browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML. Tg meta memiliki beberapa atribut :

Atribut	Fungsi
http-equiv	Mendefinisikan properti dari elemen
name	Menyediakan deskripsi tambahan dari elemen
url	Mendefinisikan target dokumen dari sebuah properti
content	Menyediakan nilai respon dari properti

Contoh penggunaannya :

Contoh tersebut akan diterjemahkan browser sebagai refresh dokumen setiap “50 detik”, jadi setara dengan mengklik tombol refresh/reload pada browser.

Penggunaan elemen meta yang paling populer adalah penggunaan properti Keyword dan Description.

5.3 BODY

Merupakan isi dari dokumen html. Semua informasi yang akan ditampilkan mulai dari teks, gambar, sound, dan lain-lain, akan ditampilkan di bagian ini. Bagian body diawali <body> dan ditutup </body>.

Atribut body :

Atribut	Fungsi
alink	Menunjukan warna link aktif
background	Merujuk URL atau direktori dari gambar yang digunakan sebagai latar belakan
bgcolor	Menentukan warna latar belakang
bgproperties	Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut tergulung
leftmargin	Batas kiri dokumen
link	Menentukan warna link yang belum dikunjungi
Text	Menentukan warna teks
Topmargin	Menentukan batas atas
Vlink	Menentukan warna link yang telah dikunjungi

Kode Warna

Warna	Heksa	Warna	Heksa
Aqua=Cyan (biru air)	#00FFFF	Maroon (merah tua)	#800000
Aquamarine (biru kehijauan)	#70DB93	Navy (biru gelap)	#000080
Black	#000000	Olive ( hijau kekuningan)	#808000
Blue	#0000FF	Orange	#FF7F00
Brass (kuning tua)	#B5A642	Pink	#FF6EC7
Chocolate	#5C3317	Purple	#8000080
Copper (keunguan)	#B87333	Red	#FF0000
Fuchsia (merah keunguan)	#FF00FF	Silver	#C0C0C0
Gray (abu-abu)	#808080	Teal (biru kehijauan)	#008080
Green	#00FF00	Violet	#9F5F9F
Lime (hijau terang)	#00FF00	White	#FFFFFF
Magenta	#FF00FF	Yellow	#FFFF00

5.4 Heading

Tag <hx> digunakan untuk memformat heading (judul dan sub judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang dikenal HTML, yaitu dari <h1> sampai dengan <h6>, dari <h1> sampai dengan <h6> ukuran huruf akan semakin kecil. Tag heading mempunyai atribut : [ Left | Center | Right ] defaul left.

5.5 Horisontal Ruler

Tag <hr> berfungsi untuk menampilkan garis horizontal 3 dimensi di dalam halaman web. Tag horizontal ruler juga tidak memerlukan elemen penutup </hr>. Atribut elemen horizontal ruler :

a. Align : [ left | center | right ] default center

b. Size : pixel (tebal garis, default 2)

c. Width : panjang (lebar garis, pixel atau persen, default 100%)

d. Noshade (garis solid)

5.6 Paragraf

Tag <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web. Dalam elemen paragraf terdapat atribut :

Align=[ left | center | right ] yang berfungsi sebagai pengatur perataan paragraf, jadi cukup memilih salah satu.

5.7 Line Break

Tag <br> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web. Tag break tidak memerlukan tag penutup break.

5.8 Komentar

Komentar/catatan dalam dokumen tidak di tampilkan dalam browser. Teks yang berfungsi sebagai komentar di simpan dalam dokumen di tandai dengan tag  sebagai akhir tag. Khusus untuk tag komentar ini, tag penutup tidak menggunakan tanda garis miring.

6. Memformat Karakter

Melakukan format terhadap karakter yang di tampilkan akan sangat berguna untuk membuat sebuah dokumen menjadi menarik dan informatif.

6.1 Logical Format

Menerapkan layout dokumen secara logis dan terstruktur. Semua tag ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah :

a. <cite>, untuk menandai suatu kutipan <citation>.

b. <code>, untuk menampilkan kode-kode pemrograman.

c. <em>, untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis.

d. <kbd>, untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.

e. <samp>, untuk menandai suatu teks yang dimasukkan sebagai contoh.

f. <strong>, digunakan untuk menandai bagian penting (cetak tebal) dari suatu teks.

g. <var>, untuk menampilkan nama variabel.

h. <dfn>, untuk menandai sebuah sub definisi dari daftar definisi.

6.2 Physical Format

Format terhadap fisik suatu font. Semua tag ini memerlukan tag penutup. Tag-tag yang termasuk Physical Format adalah :

a. <b>, untuk menebalkan huruf.

b. <i>, untuk membuat huruf miring.

c. <u>, untuk menggaris bawah teks.

d. <tt>, untuk menampilkan huruf seperti huruf mesin ketik.

e. <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.

f. <big>, untuk menampilkan ukuran huruf yang lebih besar.

g. <small>, untuk menampilkan ukuran hurug yang lebih kecil.

h. <sub>, untuk menampilkan subscript (dibawah).

i. <sup>, untuk menampilkan superscript (diatas).

7. Format Teks

7.1 Preformatted Text

Preformatted text <pre> digunakan untuk menampilkan teks sama seperti yang diketikan dalam dokumen HTML. Browser akan menapilkan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang ditampilkan oleh aplikasi berbasiskan teks.

7.2 Quotation/ Identasi

Suatu kutipan teks lazim ada dalam suatu dokumen, ada dua macam kutipan :

a. Kutipan pendek - tag <q>

b. Kutipan panjang – tag <blockquote>

Tag <blockquote> digunakan untuk membuat teks yang dikutip sebagai blok sendiri. Dengan perintah <blockquote> browser akan menampilkan teks menjorok ke dalam (mengidentitasi teks) atau menampilkan teks.

Tag <q> tidak melakukan sesuatu yang khusus, tetapi dengan kita telah mendefinisikan sebagai kutipan, kemudian kita menggunakan style sheet maka kutipan ini bisa di atur pemformatannya dengan menggunakan style sheet.

8. List HTML

List item merupakan perintah yang di gunakan dalam HTML untuk membuat daftar atau pengelompokan kata (list). Beberapa jenis list HTML :

HTML menyediakan lima cara untuk membuat daftar atau list, yaitu :

a. Ordered List

b. Unordered List

c. Directory List

d. Menu List

e. Definition List

8.1 Ordered List (Numbering)

Digunakan untuk membuat daftar dimana setiap bagiannya memiliki nomor secara urut. Ordered list dimulai tag <ol> dan diakhiri tag </ol>. Untuk menyatakan setiap bagiannya digunakan tag <li> tanpa tag penutup. Atribut elemen list,yaitu :

TYPE = [ 1 | a | A | i | I ] (default 1)

8.2 Unordered List (Bullet)

Setiap bagian ditandai dengan tanda bullet. Untuk membuat daftar dengan tanda ini digunakan tag awal <ul> dan tag penutup </ul> dan tiap bagiannya digunakan tag <li> tanpa tag penutup. Atribut elemen list, yaitu :

TYPE = [ disc | squre | circle ] (defaul disc)

9. Entitas Karakter HTML

Beberapa karakter khusus mempunyai arti khusus dalam HTML, seperti (<) sebagai tag pembuka dan (>) sebagai tag penutup HTML. Jika ingin browser menampilkan karakter-karakter tersebut maka kita harus menyisipkan entitas karakter ke dalam source HTML.

Entitas karakter mempunyai 3 bagian : sebuah ampresand (&), sebuah nama etintas atau sebuah # dan nomor entitas, dan terakhir sebuah tanda titik koma (;/semicolon).

Kelebihan dengan menggunakan nama dibandingkan dengan nomor adalah nama lebih mudah di ingat. Kekurangannya adalah tidak semua browser mendukung nama entitas terbaru, sedangkan dukungan untuk nomor entitas hampir ada pada setiap browser.

Hasil	Deskripsi	Nama Karakter	Kode Karakter
©	Copyright	©	©
®	Registered trademark	®	®
™	Trademark	™	™
	Non breaking space		¡
&	Ampersand	&	&
«	Angle quotion mark (left)	«	«
»	Angle quotion mark (right)	»	»
“	Tanda kutip	"	"
<	Tanda lebih kecil	<	<
>	Tanda lebih besar	>	=
x	Tanda kali	×	×
÷	Tanda bagi	÷	÷

1. Singkatan (Akronim)

Untuk menuliskan singkatan (akronim) ada tag html yang digunakan yaitu Tag <abbr> atau Tag <acronym>. Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen. Atribut yang digunakan adalah title.

Sintaks penulisannya :

<abbr title=“kepanjangannya”>singkatan</abbr>

<acronym title=“kepanjangannya”>singkatan</acronym>

Pada saat menggunakan tag tersebut maka pada saat pointer diletakan diatas singkatan maka kepanjangan dari singkatan tersebut akan di tampilkan mengambang di atasnya.

2. Address

Untuk membuat alamat pada dokumen html di sediakan secara khusus yaitu Tag <address>. Secara default tag <adress> akan menampilkan teks di sebelah kiri, untuk di sebelah kanan menggukan atribut dir=”rtl”.

Sintaks penulisannya :

<address>alamat</address>

3. Arah Teks

Secara umum kita membaca teks dari kiri ke kanan (left to right - ltr), tetapi di html ada tag yang digunakan untuk mengubah penulisan teks dari kanan ke kiri (right to left - rtl). Tag yang digunakan Tag <bdo>. Atribut yang digunakan dir.

Sintaks penulisannya :

<bdo dir=”rtl”>teks yang mau diarahkan</bdo>

4. Teks yang Disisipkan atau Dihapus

Dalam menulis artikel web kita bisa mengkoreksi teks yang di tuliskan dengan menggunakan tag <ins> dan tag <del>. Tag <ins> memberikan tanda untuk sisipan teks dengan membuat teks di garis bawah. Tag <del> bukan mengahapus teks tetapi mengkoreksi pekerjaan dengan memberikan garis tengah horizontal pada teks yang dihapus.

Sintaks penulisannya :

Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan

5. Font

Tag <font> bisa menentukan format tampilan font dalam dokumen HTML. Atribut tag font diantaranya yaitu :

5.1 Ukuran Font

Atribut size digunakan untuk mengatur ukuran font. Nilai font dimulai dari 1 atau +1 untuk ukuran terkecil dan 7 atau +6 untuk ukuran paling besar.

5.2 Jenis Font

Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut font harus diisi dengan string jenis font.

5.3 Warna Font

Atribut color digunakan untuk mengatur warna font yang diinginkan. Untuk memberi nilai pada atribut color ada 2 cara, yaitu :

a. Menyebutkan nama warna seperti red, green, blue.

b. Menggunakan nilai RGB (red, green, blue).

Sintaks penulisannya :

<font size=”1”>ukuran font</font><br>

<font face =”arial”>jenis font</font><br>

<font color=”blue”>warna font</font>

6. Link HTML

6.1 Tag Anchor

Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut tag <a> antara lain : atribut href=”uri” untuk mendefinisikan lokasi link, name=”name” untuk mendefinisikan nama link, dan target=”_blank”|”_parent”|”_top”|”_self” untuk _blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap di window browser.

Sintaks penulisannya :

<a href=”http://amikom.ac.id” target=”_blank” name=”web amikom”> Link web amikom </a>

Link html terdapat 3 jenis yaitu :

a. Link relatif

Membuat suatu link pada page ke page lain pada komputer yang sama, tidak memerlukan alamat internet yang lengkap.

b. Link absolut

Membuat link ke page web lain yang berada pada web site lain di internet, tetapi harus menuliskan alamat internet secara lengkap.

c. Link ke bagian lain dalam dokumen

Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser web akan mengharuskan melakukan scroll layar berulang-ulang.

Sintaks penulisannya :

<a href=”#tujuan”>Link asal </a>

Artikel bebas

<a name=”tujuan”>Posisi tujuan</a>

Artikel bebas

6.2 Link Mailto

Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak terpasang).

7. Tag Marquee

Marquee adalah bahasa HTML untuk memberikan efek sebuah kata atau kalimat menjadi berjalan atau bergerak. Mempunyai daya tarik tersendiri karena animasi berjalan/bergeraknya tersebut. Beberapa atribut yang digunakan untuk marquee sebagai berikut :

a. bgcolor : untuk mengatur background dari text yang akan diberi efek marquee.

b. direction : untuk mengatur gerakan dari text (up, down, left, right).

c. scrollamount : untuk mengatur kecepatan gerakan text (angka dalam px), semakin tinggi angka yang digunakan maka semakin cepat gerakan dari textnya.

d. behaviour : untuk mengatur efek dari gerakannya (slide, scroll, alternate).

e. width : untuk mengatur lebar dari area text (% atau px).

f. height : untuk mengatur tinggi dari area text (% atau px).

g. align : untuk mengatur posisi (center, left, right).

h. onmouseover : untuk memberhentikan efek ketika disorot mouse.

i. onmouseout : untuk melanjutkan efek apabila mouse sudah tidak menyorot text.

REFERENSI

Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya Edisi Revisi Keempat. Bandung: Informatika.

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.

Rajif Agung Yanuar, S.Kom. 2011. Modul Pemrograman Web HTML & CSS. STMIK AMIKOM Yogyakarta

Pertemuan 4

1. Image HTML

Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di web akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu PNG, GIF, dan JPG. Ketika memilih suatu gambar harus memperhatikan dari format gambar yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, dalam memilih gambar dan menyertakannya ke dalam suatu dokumen harus hati-hati. Untuk menysipkan gambar pada dokumen html di sediakan secara khusus yaitu Tag <img>.

Sintaks penulisannya :

Tag <img> mempunyai atribut di antaranya:

<img src=”url” />

Atribut	Penjelasan
src	Url dari file image/direktori gambar
align	Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
width	Lebar gambar dalam satuan pixel
height	Tinggi gambar dalam satuan pixel
alt	Menampilkan teks pengganti jika gambar tidak tampil di brows
border	Memberi bingkai pada gambar

Image Sebagai Link

Gambar bisa digunakan sebagai link untuk suatu dokumen.

2. Tabel HTML

Untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>.

Sintaks penulisannya :

Elemen-Elemen Tabel

<table>

<tr>

<td>Data Tabel</td>

<tr>

</table>

Elemen	Penjelasan
<table> . . . </table>	Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption>	Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr>	Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th>	Pembentuk sel header tabel. Secara default teks dalam sel ini di tebalkan dan di tampilkan ditengah.
<td> . . . </td>	Pembentuk sel data dalam tabel.

Catatan :

a. Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam elemen tabel, dari <table> . . . </table>.

b. Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap definisi baris, dari <tr> . . . </tr>.

c. Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.

Atribut Tag <table> Catatan :

Atribut yang didefinisikan dalam <th> . . . </th> atau <td> . . . </td> akan menggantikan alignment default yang didefinisikan dalam <tr> . . . </tr>

Atribut Tag <tr>

Atribut Tag <td> dan <th>

Empty Cell

Penggunaan mnemonic “&nbsp” untuk menangani tabel yang belum mempunyai isi.

3. Form dan Input HTML

Form digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal <form> dan tag penutup </form>.

Sintaks penulisannya :

<form action=”url” method=”get|post”>

</form>

3.1 Atribut Tag <form>

Atribut	Penjelasan
Method	Metode pengiriman data ke tujuan, yaitu: GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL POST : mengirimkan datanya secara terpisah.
Action	Menentukan lokasi dari script yang akan memproses data dari form

3.2 Jenis Masukan dalam Form

Jenis masukan dalam satu formulir dibedakan menjadi :

a. Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.

b. Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.

c. Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.

d. List, elemen pilihan dalam bentuk daftar.

e. Button, elemen berupa tombol untuk melakukan suatu proses.

f. Submit, elemen tombol yang digunakan untuk memanggil url

g. Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.

h. Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.

i. Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.

j. File, elemen button yang dapat memanggil file atau gambar dari storage.

k. Password, elemen berupa teks yang khusus digunakan untuk mengisi password.

3.2.1 Tag <TEXTAREA>

untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai beberapa atribut, yaitu :

3.2.2 Tag <SELECT>

untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut, yaitu :

3.2.3 Tag <INPUT>

untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :

Tipe input yang dapat dibuat adalah :

a. Text, digunakan untuk membuat kotak teks

b. Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.

c. Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.

d. Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.

e. File, digunakan untuk memanggil file atau gambar dari storage.

f. Hidden, Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.

g. Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.

h. Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.

4. Elemen Label, Fieldset dan Legend

Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus memiliki atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik teks yang dihasilkan oleh elemen label. Elemen fieldset merupakan elemen yang digunakan untuk membungkus beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan. Sedangkan Elemen legend digunakan untuk memberikan judul pada sebuah fieldset.

Sintaks penulisannya :

<fieldset>

<legend>Judul</legend>

</fieldset>

REFERENSI

Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:

Andi Offset. Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Pertemuan 5

HTML5

Sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

1. Sejarah HTML5

Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web." Beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :

a. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.

b. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

c. Lebih baik penanganan kesalahan.

d. Lebih banyak penggunaakn markup untuk mengganti scripting.

e. HTML5 harus independen.

f. Proses development-nya harus terlihat untuk umum (visible).

2. Dukungan Browser HTML5

Web browser merupakan program yang berfungsi untuk menampilkan dokumen-dokumen web dalam format HTML. Untuk menguji browser anda yang terinstall di komputer telah mendukung HTML5 dapat diuji dengan link berikut : http://html5test.com Sebaiknya agar browser anda mendukung HTML5 segera di update dengan versi terbaru. Beberapa browser yang sudah support HTML5 yaitu:

a. Chrome

b. Safari Apple v.4+

c. Internet Explorer 9

d. Opera

e. Maxthon

f. Firefox 4, 5, 6 dan seterusnya

3. Fitur-Fitur Baru di HTML5

HTML5 merupakan versi ke-5 dari html dan saat ini juga masih dalam tahap pengembangan. Berikut adalah fitur-fitur terbaru dalam HMTL5 diantaranya yaitu:

a. Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.

b. Canvas : Media corat-coret langsung tanpa flash dan applet java.

c. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.

d. Semantic : Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section.

Dukungan yang lebih baik untuk penyimpanan secara offline.

4. Document Type (DOCTYPE)

Instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis. DOCTYPE bukanlah tag HTML dan deklarasi DOCTYPE mengacu pada Document Type Definition (DTD). DTD menetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar. Deklarasi DOCTYPE harus menjadi hal pertama dalam dokumen HTML, sebelum tag <html>. Biasakan selalu menambahkan DOCTYPE ke halaman web agar membantu browser untuk membuat halaman web/blog dengan benar. Penggunaan DOCTYPE pada HTML5 lebih di sederhanakan dengan mengetikkan perintah:

<!DOCTYPE html>

Model HTML4 maka penulisan DOCTYPE secara lengkap seperti berikut ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Atau dengan model XHTML yaitu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5. Struktur Dasar HTML5

Output di Browser Title Nama File Body

6. Elemen Semantik HTML5

Semantic = arti/makna. Semantic elements = elemen dengan makna. Elemen semantik baru yang bertujuan untuk memberi makna ke berbagai bagian dari suatu halaman Web modern: header, footer, navigation bar, sidebar, dan sebagainya. Unsur-unsur semantik baru yang disediakan HTML5 adalah:

a. <article>

Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar.

b. <section>

Elemen ini merupakan bagian dari sebuah dokumen atau aplikasi, seperti bab atau bagian dari sebuah artikel atau tutorial. Misalnya, bagian Anda baca sekarang bisa dikelilingi oleh elemen <section> di HTML5.

c. <nav>

Ini adalah wadah untuk link navigasi utama pada halaman Web.

d. <aside>

Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan

e. <hgroup>

Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana Anda memiliki judul dan subjudul dengan tag heading.

f. <canvas>

Unsur ini adalah salah satu aspek yang paling penting dariHTML5 karena memfasilitasi produksi grafik, permainan interaktif,aplikasi paint, dan grafis lain dengan cepat tanpa memerlukan plug-in eksternal seperti Adobe Flash.

g. <audio> dan <video>

Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.

Macam - macam jenis input form baru di HTML5 yaitu:

1.) color 8.) range

2.) date 9.) search

3.) datetime 10.) tel

4.) datetime-local 11.) time

5.) email 12.) url

6.) month 13.) week

7.) number

Selain memberikan elemen-elemen baru, HTML5 menghapus beberapa elemen lama seperti:

1.) <acronym> 7.) <font>

2.) <applet> 8.) <frame>

3.) <basefont> 9.) <frameset>

4.) <big> 10.) <noframes>

5.) <center> 11.) <strike>

6.) <dir> 12.) <tt>

7. Figure dan Figcaption

HTML5 memperkenalkan tag baru bernama <figure>. Tag ini digunakan sebagai wadah untuk menampung atau meletakkan tag <img> agar dapat tersusun secara rapih. Sedangkan <figcaption> digunakan untuk menuliskan atau memberikan keterangan pada gambar.

Sintak Penulisan:

<figcaption>Keterangan Gambar<figcaption>

</figure>

8. Video

HTML5 memperkenalkan tag baru bernama <video>. Tag ini digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web. Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahan yang biasa disebut flash Player. Tag video pada HTML5, setidaknya ada 3 jenis format video yang mendukung yaitu:

a. Ogg (File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

b. MPEG4 (File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

c. WebM (File WebM dengan Video Codec VP8 dan Audio Codec Vorbis) (.webm)

Apabila mempunyai video dengan format video bukan ogg, mp4, dan webm. Bisa menggunakan aplikasi video converter salah satunya miro video converter.

Sintak Penulisan:

</video>

Atribut pada tag <video>

9. Audio

HTML5 memperkenalkan tag baru bernama <audio>. Tag ini digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web. Ketika di generasi sebelumnya (HTML 4.01) memasukkanaudio ke dalam web masih harus menggunakan flash. Tag audio pada HTML5, setidaknya ada 3 jenis format audio yang mendukung yaitu: Ogg, MP3, Wav.

Sintak Penulisan:

</audio>

Atribut pada tag <audio>

10. HTML Inputan Type

HTML5 memiliki beberapa input type baru untuk form. Fitur baru ini memungkinkan kontrol input yang lebih baik dan validasi.

Pada chapter ini kita akan membahas Input Type baru pada HTML5 :

a. color h. range

b. date i. search

c. datetime j. tel

d. datetime-local k. time

e. email l. url

f. month m. week

g. number

Catatan : Tidak semua browser mendukung semua input type baru. Jika tidak didukung maka akan ditampilkan sebagai field text biasa.

Input Type : color

Type color digunakan untuk menginputkan field yang berisikan warna.

Input Type : date

Type data date memungkinkan user untuk memilih tanggal.

Input Type : datetime

Type datetime memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu).

Input Type : datetime-local

Type datetime-local memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu).

Input Type : email

Type email digunakan untuk menginputkan field yang seharusnya berisi alamat email. Mendefinisikan field dari alamant e-mail (akan otomatis divalidasi ketika disubmitkan)

Tip : Safari dan iPhone mengenal type email, dan merubah keyboard on-screen sesuai dengan format email (email@admin.com)

Input Type : month

Type month memungkinkan user untuk memilih bulan dan tahun

Input Type : number

Type number digunakan untuk menginputkan field yang seharusnya berisikan nilai numeric. Kita juga bisa mengatur restriction pada nomor yang diterima :

Gunakan atribut berikut untuk menentukan restriction :

a. Max - menentukan nilai maksimum yang diperbolehkan

b. Min - menentukan nilai minimum yang diperbolehkan

c. Step - menentukan nomor legal interval

d. Value - menentukan nilai default

Input Type : range

Type range digunakan untuk menginputkan fiels yang seharusnya berisikan nilai dari range nomor.

Restriction nomor yang akan diterima juga bisa diatur. Gunakan atribut dibawah ini untuk menentukan restriction :

a. Max - menentukan nilai maksimum yang diperbolehkan

b. Min - menentukan nilai minimum yang diperbolehkan

c. Step - menentukan nomor legal interval

d. Value - menentukan nilai default

Input Type : url

Type url digunakan untuk menginputkan fields yang seharusnya berisikan alamat URL. Nilai dari field url secraa otomatis di validasi ketika form disubmitkan.

Tip : Safari di iPhonr mengenali input type url, dan mengubah keyboard on-screen untuk menyesuaikan format url (contoh : http://situs.com).

Input Type : week

Type week memungkinkan user untuk memilih minggu dan tahun.

11. HTML5 Form Atributes

Dengan berkembangnya HTML4 menjadi HTML5, bertambahlah berbagai fungsi dan tag tambahan, begitu juga dengan Atribut dari form HTML. Kali ini akan membahas mengenai atribut form yang ada pada HTML5. Atribut baru dari <form> :

a. Autocomplete

b. Novalitade

Beberapa atribut baru tag <input> yang sering digunakan dalam form validasi adalah:

a. min : nilai minimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date.

b. max : nilai maksimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date.

c. step : interval nilai yang dapat dimasukkan. Dapat digunakan untuk tipe input number.

d. pattern : pola input yang harus dimasukkan oleh user. Menggunakan format regex dalam javascript.

e. required : menentukan apakah field ini harus diisi apa tidak.

f. placeholder : bantuan pengisian field. berupa contoh isi field ketika field kosong dan kursor tidak terdapat dalam field tersebut.

Atributte autocomplete <form> / <input>

Atribut autocomplete menentukan apakah form /input field autocomplete harus on atau off. Ketika autocomplete on, browser akan secara otomatis menyempurnakan nilai berdasarkan pada nilai yang user telah masukkan sebalumnya.

Tip: Memungkinkan autocomplete "on" untuk form, dan "off" untuk spesifik input field.

Catatan : Atribut autocomplete bekerja dengan <form> dan diikuti oleh type <input> : tex. search, url, email, password, datepickers, range, dan color.

Atribut novalidate pada <form>

Atribut novalidate merupakan atribut boolean. Ketika dihadirkan, maka akan menentukana form-data(input) yang tidak perlu divalidasi ketika dimasukkan.

Atribut autofocus pada <input>

Atribut autofocus merupakan atribut boolean. Ketika hadir, akan menentukan element <input> secara otomatis harus get focus ketika halaman load.

Atribut form pada <input> Atribut form menentukan satu atau banyak form yang dimiliki sebuah element input. Pengenalan Perancangan WEB

Pertemuan 1-3

Pengenalan Perancangan WEB

1. Penamaan Dokumen HTML

2. Definisi Elemen dan Tag HTML

a. Image ( <img/> )

b. Ganti Baris – Break ( <br/> )

c. Horizontal Ruler ( <hr/> )

d. Input Field ( <input/> )

Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dikumen dengan tag yang bersangkutan.

3. Penggunaan Tag dan Atribut Tag

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag HTML, memiliki syarat penulisan :

a. Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )

b. Tag HTML secara normal selalu berpasangan

c. Tag pertama dalam suatu pasangan adalah tag awal dan tag yang kedua merupakan tag akhir

d. Tag HTML tidak case sensitive, artinya <b> sama dengan <B>

e. Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya <b> <I>..Tebal dan Miring.. </I> </b>

4. Struktur Dasar HTML

<html>

<head>

<title>Judul</title>

</head>

<body>

Konten yang akan ditampilkan pada halaman browser

</body>

</html>

5. Tag-Tag Dasar HTML

5.1 HTML

<html> pada awal dokumen dan </html> pada akhir dokumen

5.2 HEAD

Sebenarnya tidak harus ada pada dokumen html tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen html. Penulisan tag seperti :

<head> di awal setelah <html> dan </head> di akhir section head.

Elemen-elemen pada bagian head akan mengerjakan tugas sebagai berikut :

a. Menyediakan judul dokumen

b. Menjembatani hubungan antar dokumen

c. Memberitahu browser untuk membuat form pencarian

d. Menyediakan metode untuk mengirim pesan ke tipe browser

Elemen yang mungkin ada pada bagian head, yaitu:

a. Tag <title> untuk memberi judul dokumen. Penggunaannya :

<title> Judul dokumen </title>

b. Tag <base> untuk menentukan basis URL. Contoh penggunaannya :

c. Tag <link> untuk menunjukan relasi antar dokumen html.

Tag ini memiliki beberapa atribut :

Atribut	Fungsi
href	Menunjukan pada URL/dokumen lain
rel	Mendefinisikan relasi terhadap sebuah dokumen dan dokumen lain yang berisi informasi tentang personil yang memberi kontribusi terhadap dokumen tersebut
rev	Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
type	Menentukan tipe dan parameter dari relasi

Contoh penggunaanya :

Atribut	Fungsi
http-equiv	Mendefinisikan properti dari elemen
name	Menyediakan deskripsi tambahan dari elemen
url	Mendefinisikan target dokumen dari sebuah properti
content	Menyediakan nilai respon dari properti

Contoh penggunaannya :

Contoh tersebut akan diterjemahkan browser sebagai refresh dokumen setiap “50 detik”, jadi setara dengan mengklik tombol refresh/reload pada browser.

Penggunaan elemen meta yang paling populer adalah penggunaan properti Keyword dan Description.

5.3 BODY

Atribut body :

Atribut	Fungsi
alink	Menunjukan warna link aktif
background	Merujuk URL atau direktori dari gambar yang digunakan sebagai latar belakan
bgcolor	Menentukan warna latar belakang
bgproperties	Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut tergulung
leftmargin	Batas kiri dokumen
link	Menentukan warna link yang belum dikunjungi
Text	Menentukan warna teks
Topmargin	Menentukan batas atas
Vlink	Menentukan warna link yang telah dikunjungi

Kode Warna

Warna	Heksa	Warna	Heksa
Aqua=Cyan (biru air)	#00FFFF	Maroon (merah tua)	#800000
Aquamarine (biru kehijauan)	#70DB93	Navy (biru gelap)	#000080
Black	#000000	Olive ( hijau kekuningan)	#808000
Blue	#0000FF	Orange	#FF7F00
Brass (kuning tua)	#B5A642	Pink	#FF6EC7
Chocolate	#5C3317	Purple	#8000080
Copper (keunguan)	#B87333	Red	#FF0000
Fuchsia (merah keunguan)	#FF00FF	Silver	#C0C0C0
Gray (abu-abu)	#808080	Teal (biru kehijauan)	#008080
Green	#00FF00	Violet	#9F5F9F
Lime (hijau terang)	#00FF00	White	#FFFFFF
Magenta	#FF00FF	Yellow	#FFFF00

5.4 Heading

5.5 Horisontal Ruler

Tag <hr> berfungsi untuk menampilkan garis horizontal 3 dimensi di dalam halaman web. Tag horizontal ruler juga tidak memerlukan elemen penutup </hr>. Atribut elemen horizontal ruler :

a. Align : [ left | center | right ] default center

b. Size : pixel (tebal garis, default 2)

c. Width : panjang (lebar garis, pixel atau persen, default 100%)

d. Noshade (garis solid)

5.6 Paragraf

Tag <p> berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web. Dalam elemen paragraf terdapat atribut :

Align=[ left | center | right ] yang berfungsi sebagai pengatur perataan paragraf, jadi cukup memilih salah satu.

5.7 Line Break

Tag <br> berfungsi untuk memberikan baris baru suatu paragraf dalam halaman web. Tag break tidak memerlukan tag penutup break.

5.8 Komentar

6. Memformat Karakter

Melakukan format terhadap karakter yang di tampilkan akan sangat berguna untuk membuat sebuah dokumen menjadi menarik dan informatif.

6.1 Logical Format

Menerapkan layout dokumen secara logis dan terstruktur. Semua tag ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah :

a. <cite>, untuk menandai suatu kutipan <citation>.

b. <code>, untuk menampilkan kode-kode pemrograman.

c. <em>, untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis.

d. <kbd>, untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.

e. <samp>, untuk menandai suatu teks yang dimasukkan sebagai contoh.

f. <strong>, digunakan untuk menandai bagian penting (cetak tebal) dari suatu teks.

g. <var>, untuk menampilkan nama variabel.

h. <dfn>, untuk menandai sebuah sub definisi dari daftar definisi.

6.2 Physical Format

Format terhadap fisik suatu font. Semua tag ini memerlukan tag penutup. Tag-tag yang termasuk Physical Format adalah :

a. <b>, untuk menebalkan huruf.

b. <i>, untuk membuat huruf miring.

c. <u>, untuk menggaris bawah teks.

d. <tt>, untuk menampilkan huruf seperti huruf mesin ketik.

e. <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.

f. <big>, untuk menampilkan ukuran huruf yang lebih besar.

g. <small>, untuk menampilkan ukuran hurug yang lebih kecil.

h. <sub>, untuk menampilkan subscript (dibawah).

i. <sup>, untuk menampilkan superscript (diatas).

7. Format Teks

7.1 Preformatted Text

7.2 Quotation/ Identasi

Suatu kutipan teks lazim ada dalam suatu dokumen, ada dua macam kutipan :

a. Kutipan pendek - tag <q>

b. Kutipan panjang – tag <blockquote>

8. List HTML

List item merupakan perintah yang di gunakan dalam HTML untuk membuat daftar atau pengelompokan kata (list). Beberapa jenis list HTML :

HTML menyediakan lima cara untuk membuat daftar atau list, yaitu :

a. Ordered List

b. Unordered List

c. Directory List

d. Menu List

e. Definition List

8.1 Ordered List (Numbering)

TYPE = [ 1 | a | A | i | I ] (default 1)

8.2 Unordered List (Bullet)

TYPE = [ disc | squre | circle ] (defaul disc)

9. Entitas Karakter HTML

Entitas karakter mempunyai 3 bagian : sebuah ampresand (&), sebuah nama etintas atau sebuah # dan nomor entitas, dan terakhir sebuah tanda titik koma (;/semicolon).

Hasil	Deskripsi	Nama Karakter	Kode Karakter
©	Copyright	©	©
®	Registered trademark	®	®
™	Trademark	™	™
	Non breaking space		¡
&	Ampersand	&	&
«	Angle quotion mark (left)	«	«
»	Angle quotion mark (right)	»	»
“	Tanda kutip	"	"
<	Tanda lebih kecil	<	<
>	Tanda lebih besar	>	=
x	Tanda kali	×	×
÷	Tanda bagi	÷	÷

1. Singkatan (Akronim)

Sintaks penulisannya :

<abbr title=“kepanjangannya”>singkatan</abbr>

<acronym title=“kepanjangannya”>singkatan</acronym>

Pada saat menggunakan tag tersebut maka pada saat pointer diletakan diatas singkatan maka kepanjangan dari singkatan tersebut akan di tampilkan mengambang di atasnya.

2. Address

Sintaks penulisannya :

<address>alamat</address>

3. Arah Teks

Sintaks penulisannya :

<bdo dir=”rtl”>teks yang mau diarahkan</bdo>

4. Teks yang Disisipkan atau Dihapus

Sintaks penulisannya :

Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan

5. Font

Tag <font> bisa menentukan format tampilan font dalam dokumen HTML. Atribut tag font diantaranya yaitu :

5.1 Ukuran Font

Atribut size digunakan untuk mengatur ukuran font. Nilai font dimulai dari 1 atau +1 untuk ukuran terkecil dan 7 atau +6 untuk ukuran paling besar.

5.2 Jenis Font

Atribut face digunakan untuk mengatur jenis huruf yang diinginkan. Atribut font harus diisi dengan string jenis font.

5.3 Warna Font

Atribut color digunakan untuk mengatur warna font yang diinginkan. Untuk memberi nilai pada atribut color ada 2 cara, yaitu :

a. Menyebutkan nama warna seperti red, green, blue.

b. Menggunakan nilai RGB (red, green, blue).

Sintaks penulisannya :

<font size=”1”>ukuran font</font><br>

<font face =”arial”>jenis font</font><br>

<font color=”blue”>warna font</font>

6. Link HTML

6.1 Tag Anchor

Sintaks penulisannya :

<a href=”http://amikom.ac.id” target=”_blank” name=”web amikom”> Link web amikom </a>

Link html terdapat 3 jenis yaitu :

a. Link relatif

Membuat suatu link pada page ke page lain pada komputer yang sama, tidak memerlukan alamat internet yang lengkap.

b. Link absolut

Membuat link ke page web lain yang berada pada web site lain di internet, tetapi harus menuliskan alamat internet secara lengkap.

c. Link ke bagian lain dalam dokumen

Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser web akan mengharuskan melakukan scroll layar berulang-ulang.

Sintaks penulisannya :

<a href=”#tujuan”>Link asal </a>

Artikel bebas

<a name=”tujuan”>Posisi tujuan</a>

Artikel bebas

6.2 Link Mailto

Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail client tidak terpasang).

7. Tag Marquee

a. bgcolor : untuk mengatur background dari text yang akan diberi efek marquee.

b. direction : untuk mengatur gerakan dari text (up, down, left, right).

c. scrollamount : untuk mengatur kecepatan gerakan text (angka dalam px), semakin tinggi angka yang digunakan maka semakin cepat gerakan dari textnya.

d. behaviour : untuk mengatur efek dari gerakannya (slide, scroll, alternate).

e. width : untuk mengatur lebar dari area text (% atau px).

f. height : untuk mengatur tinggi dari area text (% atau px).

g. align : untuk mengatur posisi (center, left, right).

h. onmouseover : untuk memberhentikan efek ketika disorot mouse.

i. onmouseout : untuk melanjutkan efek apabila mouse sudah tidak menyorot text.

REFERENSI

Sidik, Betha dan Pohan, I. Husni. (2011). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya Edisi Revisi Keempat. Bandung: Informatika.

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.

Rajif Agung Yanuar, S.Kom. 2011. Modul Pemrograman Web HTML & CSS. STMIK AMIKOM Yogyakarta

Pertemuan 4

1. Image HTML

Sintaks penulisannya :

Tag <img> mempunyai atribut di antaranya:

<img src=”url” />

Atribut	Penjelasan
src	Url dari file image/direktori gambar
align	Letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom
width	Lebar gambar dalam satuan pixel
height	Tinggi gambar dalam satuan pixel
alt	Menampilkan teks pengganti jika gambar tidak tampil di brows
border	Memberi bingkai pada gambar

Image Sebagai Link

Gambar bisa digunakan sebagai link untuk suatu dokumen.

2. Tabel HTML

Sintaks penulisannya :

Elemen-Elemen Tabel

<table>

<tr>

<td>Data Tabel</td>

<tr>

</table>

Elemen	Penjelasan
<table> . . . </table>	Tag pembentuk tabel. jika border disertakan, maka tabel akan tampil disertai border. Nilai border 0 – 30.
<caption> . . . </caption>	Pembentuk judul tabel. judul dapat diberi tag apa saja.
<tr> . . . </tr>	Penjelaskan baris tabel dalam tabel. atribut yang dipakai : align(left, center dan right) atau valign(top, middle dan bottom).
<th> . . . </th>	Pembentuk sel header tabel. Secara default teks dalam sel ini di tebalkan dan di tampilkan ditengah.
<td> . . . </td>	Pembentuk sel data dalam tabel.

Catatan :

a. Jumlah baris tabel ditentukan dengan banyaknya <tr> . . . </tr> yang di tulisankan dalam elemen tabel, dari <table> . . . </table>.

b. Jumlah kolom dalam tabel ditentukan dengan banyaknya <td> . . . </td> di dalam setiap definisi baris, dari <tr> . . . </tr>.

c. Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.

Atribut Tag <table> Catatan :

Atribut yang didefinisikan dalam <th> . . . </th> atau <td> . . . </td> akan menggantikan alignment default yang didefinisikan dalam <tr> . . . </tr>

Atribut Tag <tr>

Atribut Tag <td> dan <th>

Empty Cell

Penggunaan mnemonic “&nbsp” untuk menangani tabel yang belum mempunyai isi.

3. Form dan Input HTML

Sintaks penulisannya :

<form action=”url” method=”get|post”>

</form>

3.1 Atribut Tag <form>

Atribut	Penjelasan
Method	Metode pengiriman data ke tujuan, yaitu: GET : mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL POST : mengirimkan datanya secara terpisah.
Action	Menentukan lokasi dari script yang akan memproses data dari form

3.2 Jenis Masukan dalam Form

Jenis masukan dalam satu formulir dibedakan menjadi :

a. Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka.

b. Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.

c. Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.

d. List, elemen pilihan dalam bentuk daftar.

e. Button, elemen berupa tombol untuk melakukan suatu proses.

f. Submit, elemen tombol yang digunakan untuk memanggil url

g. Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.

h. Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.

i. Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.

j. File, elemen button yang dapat memanggil file atau gambar dari storage.

k. Password, elemen berupa teks yang khusus digunakan untuk mengisi password.

3.2.1 Tag <TEXTAREA>

untuk membuat sebuah kotak teks multi baris. Tag ini mempunyai beberapa atribut, yaitu :

3.2.2 Tag <SELECT>

untuk membuat sebuah daftar pilihan. Tag ini memiliki beberapa atribut, yaitu :

3.2.3 Tag <INPUT>

Tipe input yang dapat dibuat adalah :

a. Text, digunakan untuk membuat kotak teks

b. Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.

c. Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.

d. Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.

e. File, digunakan untuk memanggil file atau gambar dari storage.

f. Hidden, Digunkan untuk mengirim data ke suatu aplikasi yang tidak dingginkan untuk dilihat oleh browser.

g. Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.

h. Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.

4. Elemen Label, Fieldset dan Legend

Sintaks penulisannya :

<fieldset>

<legend>Judul</legend>

</fieldset>

REFERENSI

Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.

Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta:

Andi Offset. Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta

Pertemuan 5

HTML5

1. Sejarah HTML5

a. Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.

b. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

c. Lebih baik penanganan kesalahan.

d. Lebih banyak penggunaakn markup untuk mengganti scripting.

e. HTML5 harus independen.

f. Proses development-nya harus terlihat untuk umum (visible).

2. Dukungan Browser HTML5

a. Chrome

b. Safari Apple v.4+

c. Internet Explorer 9

d. Opera

e. Maxthon

f. Firefox 4, 5, 6 dan seterusnya

3. Fitur-Fitur Baru di HTML5

HTML5 merupakan versi ke-5 dari html dan saat ini juga masih dalam tahap pengembangan. Berikut adalah fitur-fitur terbaru dalam HMTL5 diantaranya yaitu:

a. Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau realplayer untuk memutar audio dan video.

b. Canvas : Media corat-coret langsung tanpa flash dan applet java.

c. Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.

d. Semantic : Mempermudah designer dengan tag khusus layout, seperti: artikel, footer, header, navigasi, dan section.

Dukungan yang lebih baik untuk penyimpanan secara offline.

4. Document Type (DOCTYPE)

<!DOCTYPE html>

Model HTML4 maka penulisan DOCTYPE secara lengkap seperti berikut ini:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Atau dengan model XHTML yaitu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5. Struktur Dasar HTML5

Output di Browser Title Nama File Body

6. Elemen Semantik HTML5

a. <article>

Unsur <article> digunakan untuk mendefinisikan item independen pada halaman yang dapat didistribusikan sendiri, seperti sebuah berita, posting blog, atau komentar.

b. <section>

c. <nav>

Ini adalah wadah untuk link navigasi utama pada halaman Web.

d. <aside>

Elemen baru ini dapat digunakan untuk menandai sebuah sidebar atau beberapa konten lainnya yangdianggap agak terpisah untuk konten sekitarnya. Contohnya adalah iklan

e. <hgroup>

Dalam beberapa kasus, halaman, artikel, atau bagian mungkin memerlukan lebih dari satu pos, seperti di mana Anda memiliki judul dan subjudul dengan tag heading.

f. <canvas>

g. <audio> dan <video>

Kedua unsur ini memungkinkan Developer Web untuk memasukkan konten multimedia tanpa bergantung padapengguna untuk memiliki browser tambahan plug-in diinstal.

Macam - macam jenis input form baru di HTML5 yaitu:

1.) color 8.) range

2.) date 9.) search

3.) datetime 10.) tel

4.) datetime-local 11.) time

5.) email 12.) url

6.) month 13.) week

7.) number

Selain memberikan elemen-elemen baru, HTML5 menghapus beberapa elemen lama seperti:

1.) <acronym> 7.) <font>

2.) <applet> 8.) <frame>

3.) <basefont> 9.) <frameset>

4.) <big> 10.) <noframes>

5.) <center> 11.) <strike>

6.) <dir> 12.) <tt>

7. Figure dan Figcaption

Sintak Penulisan:

<figcaption>Keterangan Gambar<figcaption>

</figure>

8. Video

a. Ogg (File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

b. MPEG4 (File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

c. WebM (File WebM dengan Video Codec VP8 dan Audio Codec Vorbis) (.webm)

Apabila mempunyai video dengan format video bukan ogg, mp4, dan webm. Bisa menggunakan aplikasi video converter salah satunya miro video converter.

Sintak Penulisan:

</video>

Atribut pada tag <video>

9. Audio

Sintak Penulisan:

</audio>

Atribut pada tag <audio>

10. HTML Inputan Type

HTML5 memiliki beberapa input type baru untuk form. Fitur baru ini memungkinkan kontrol input yang lebih baik dan validasi.

Pada chapter ini kita akan membahas Input Type baru pada HTML5 :

a. color h. range

b. date i. search

c. datetime j. tel

d. datetime-local k. time

e. email l. url

f. month m. week

g. number

Catatan : Tidak semua browser mendukung semua input type baru. Jika tidak didukung maka akan ditampilkan sebagai field text biasa.

Input Type : color

Type color digunakan untuk menginputkan field yang berisikan warna.

Input Type : date

Type data date memungkinkan user untuk memilih tanggal.

Input Type : datetime

Type datetime memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu).

Input Type : datetime-local

Type datetime-local memungkinkan pengguna untuk memilih tanggal dan waktu (bukan zona waktu).

Input Type : email

Type email digunakan untuk menginputkan field yang seharusnya berisi alamat email. Mendefinisikan field dari alamant e-mail (akan otomatis divalidasi ketika disubmitkan)

Tip : Safari dan iPhone mengenal type email, dan merubah keyboard on-screen sesuai dengan format email (email@admin.com)

Input Type : month

Type month memungkinkan user untuk memilih bulan dan tahun

Input Type : number

Type number digunakan untuk menginputkan field yang seharusnya berisikan nilai numeric. Kita juga bisa mengatur restriction pada nomor yang diterima :

Gunakan atribut berikut untuk menentukan restriction :

a. Max - menentukan nilai maksimum yang diperbolehkan

b. Min - menentukan nilai minimum yang diperbolehkan

c. Step - menentukan nomor legal interval

d. Value - menentukan nilai default

Input Type : range

Type range digunakan untuk menginputkan fiels yang seharusnya berisikan nilai dari range nomor.

Restriction nomor yang akan diterima juga bisa diatur. Gunakan atribut dibawah ini untuk menentukan restriction :

a. Max - menentukan nilai maksimum yang diperbolehkan

b. Min - menentukan nilai minimum yang diperbolehkan

c. Step - menentukan nomor legal interval

d. Value - menentukan nilai default

Input Type : url

Type url digunakan untuk menginputkan fields yang seharusnya berisikan alamat URL. Nilai dari field url secraa otomatis di validasi ketika form disubmitkan.

Tip : Safari di iPhonr mengenali input type url, dan mengubah keyboard on-screen untuk menyesuaikan format url (contoh : http://situs.com).

Input Type : week

Type week memungkinkan user untuk memilih minggu dan tahun.

11. HTML5 Form Atributes

a. Autocomplete

b. Novalitade

Beberapa atribut baru tag <input> yang sering digunakan dalam form validasi adalah:

a. min : nilai minimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date.

b. max : nilai maksimal yang dapat dimasukkan dalam field. Dapat digunakan pada tipe input number dan date.

c. step : interval nilai yang dapat dimasukkan. Dapat digunakan untuk tipe input number.

d. pattern : pola input yang harus dimasukkan oleh user. Menggunakan format regex dalam javascript.

e. required : menentukan apakah field ini harus diisi apa tidak.

f. placeholder : bantuan pengisian field. berupa contoh isi field ketika field kosong dan kursor tidak terdapat dalam field tersebut.

Atributte autocomplete <form> / <input>

Tip: Memungkinkan autocomplete "on" untuk form, dan "off" untuk spesifik input field.

Catatan : Atribut autocomplete bekerja dengan <form> dan diikuti oleh type <input> : tex. search, url, email, password, datepickers, range, dan color.

Atribut novalidate pada <form>

Atribut novalidate merupakan atribut boolean. Ketika dihadirkan, maka akan menentukana form-data(input) yang tidak perlu divalidasi ketika dimasukkan.

Atribut autofocus pada <input>

Atribut autofocus merupakan atribut boolean. Ketika hadir, akan menentukan element <input> secara otomatis harus get focus ketika halaman load.

Atribut form pada <input> Atribut form menentukan satu atau banyak form yang dimiliki sebuah element input.

Tip : untuk memilih lebih dari satu form, gunakan pemisah spasi dari ids form Input diletakkan diluar form HTML (tapi tetap bagian dari form)

Atribut pattern pada <input> Atribut pattern menentukan ekspresi regular dari nilai element <input> dicek lagi.

Catatan : Atribut pattern bekerja dengan diikuti dengan input type : text, search, url, tel, email, dan password.

Tip : Gunakan atribut tittle global untuk mendeskripsikan pattern untuk membantu user.

Tip : Pelajari tentang regular expressions di Javascript

Atribut require pada <input> Atribut require atribut boolean. Ketika hadir, akan menentukan input field yang harus diisikan sebelum mensubmitkan form.

Catatan : Atribut require bekerja dengan diikuti input type : text, search, url, tel, email, password, date picker, number, checkbox, radio, dan file.

Atribut Placeholder pada <input>

Atribut placaholder menentukan petunjuk pendek yang mendeskripsikan nilai yang dimaksud dari input field. Petunjuk kecil ditampilkan dalam field input sebelum user mengenterkan nilai.

Catatan : Atribut placeholder bekerja dengan diikuti input type : text, search, url, tel, email, dan password.

REFERENSI

http://id.wikipedia.org/wiki/HTML5

http://www.w3schools.com

Tip : untuk memilih lebih dari satu form, gunakan pemisah spasi dari ids form Input diletakkan diluar form HTML (tapi tetap bagian dari form)

Atribut pattern pada <input> Atribut pattern menentukan ekspresi regular dari nilai element <input> dicek lagi.

Catatan : Atribut pattern bekerja dengan diikuti dengan input type : text, search, url, tel, email, dan password.

Tip : Gunakan atribut tittle global untuk mendeskripsikan pattern untuk membantu user.

Tip : Pelajari tentang regular expressions di Javascript

Atribut require pada <input> Atribut require atribut boolean. Ketika hadir, akan menentukan input field yang harus diisikan sebelum mensubmitkan form.

Catatan : Atribut require bekerja dengan diikuti input type : text, search, url, tel, email, password, date picker, number, checkbox, radio, dan file.

Atribut Placeholder pada <input>

Atribut placaholder menentukan petunjuk pendek yang mendeskripsikan nilai yang dimaksud dari input field. Petunjuk kecil ditampilkan dalam field input sebelum user mengenterkan nilai.

Catatan : Atribut placeholder bekerja dengan diikuti input type : text, search, url, tel, email, dan password.

REFERENSI

http://id.wikipedia.org/wiki/HTML5

http://www.w3schools.com

Frozaq

Sunday, 9 November 2014

ppw

No comments :

Post a Comment

My Blog List