HTMLHypertext Markup Language (HTML) adalah bahasa standar dalam menulis halaman web, HTML merupakan pengembangan dari standar pemformatan dokumen teks. HTML sebenarnya adalah dokumen dalam bentuk ASCII atau teks biasa yang dapat diterjemahkan oleh browser web menjadi suatu halaman yang menarik. STRUKTUR DOKUMEN HTML Sesuai dengan namanya yaitu Hypertext Markup Language (HTML) maka dokumen HTML terdiri dari tanda-tanda (markup) untuk menandai perintah-perintahnya (yang selanjutnya akan kita sebut sebagai tag). Tag HTML biasanya adalah tag-tag yang berpasangan dan ditandai dengan simbol < dan >, sedangkan pasangan atau akhir perintah dari sebuah tag ditandai dengan tanda /, misalnya pasangan dari tag adalah . Setiap dokumen HTML memiliki struktur sbb : Judul yang muncul pada title bar web Text, gambar atau isi dokumen HTML anda

untuk lebih jelasnya, anda buka editor anda (mis : NOTEPAD) lalu ketikkan baris perintah HTML diatas dan panggil melalui browser web anda.

Gambar 1. Tampilan Latihan 1 Heading Tag yang pertama kali akan kita pelajari adalah tag heading, yang berfungsi untuk memformat Heading (Judul/sub judul) dalam sebuah dokumen. Ada 7 buah heading yang dikenal dalam HTML yaitu sampai . Untuk mengetahui ukuran tiap heading, anda dapat mencoba baris-baris berikut : Latihan Heading Heading 1 Heading 2 Heading 3 Heading 6 Heading 7

Paragraf Untuk memformat paragraf kita bisa menggunakan tag . Dengan tag ini kita bisa menentukan alignment (posisi) dari dokumen HTML. Untuk mengatur posisi tulisan kita menggunakan atribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. Selain tag ada pula tag
untuk pindah baris, untuk membuat garis, untuk membuat kutipan, untuk menampilkan text sama dengan yang anda ketikkan dalam dokumen HTML, misal anda mengetikkan :

TEST Hallo Hallo Hallo

Maka yang akan ditampilkan oleh browser adalahHalloHalloHallo

Hal itu terjadi karena HTML tidak mengenali tombol Enter sehingga tombol tersebut diabaikan. Untuk mengatasi hal tersebut maka kita menggunakan tag tersebut. Latihan Menggunakan Paragraf Tulisan ini rata kanan. Tulisan ini akan berada di tengah dokumen Tulisan ini rata kiri Hallo,
Apakah anda sudah bisa HTML
Kalau sudah bisa, baguslah
|u u| | u | | --- |

Gambar 2. Tampilan Latihan 2

Font

Untuk mengatur jenis, ukuran, warna suatu font, kita bisa menggunakan tag , tag ini memiliki beberap atribut diantaranya FACE dan COLOR. Atribut FACE digunakan untuk menentukan jenis font yang akan kita gunakan, semisal kita akan menggunakan jenis font Comic Sans MS, maka kita dapat menuliskan . Sedangkan COLOR berfungsi untuk menentukan warna font, bisa dengan cara menyebutkan nama warna seperti red, green dan blue atau menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk red, 00FF00 untuk green dan 0000FF untuk blue. Ada juga atribut SIZE untuk menentukan ukuran font Latihan Font Ini Menggunakan Font Comic Sans, warna merah dan ukurannya 1
Ini menggunakan Font Monotype Corsiva, warna biru dan ukurannya 3

Gambar 3. Contoh Latihan Font Warna Dokumen Suatu dokumen web akan terlihat lebih menarik jika diberi warna-warna atau gambar sebagai backgroundnya. Untuk itu, pada HTML tersedia atribut-atribut untuk mengatur hal tersebut, atribut tersebut diletakkan pada tag sehingga efeknya akan dapat dilihat di seluruh dokumen. Atribut yang digunakan dalam tag yaitu : Atribut BGCOLOR BACKGROUND TEXT LINK ALINK VLINK Link Dalam web, selalu ada yang dinamakan link, link berfungsi menghubungkan antara satu halaman dengan halaman lainnya. Fungsi Menentukan warna background suatu halaman web Menentukan gambar/images yang akan dipasang sebagai background halaman web Menentukan warna teks normal Menentukan warna teks yang berfungsi sebagai link Menentukan warna teks link ketika diklik Menentukan warna teks link ketika selesai diklik

Untuk link ini HTML menyediakan tag (Anchor). Tag memiliki beberapa atribut mis : HREF untuk menghubungkan antara satu halam dengan halaman lainnya, dan NAME untuk memberikan nama pada suatu paragraf/tulisan dalam dokumen HTML, sehingga mempermudah navigasi dalam suatu halaman web. Latihan Link Bagian ini ditandai dengan top Link ke latihan1.html Link ke tempat yang ditandai

List Terkadang dalam website yang kita buat, kita ingin membuat sebuah daftar, misalnya saja kita membuat daftar barang inventaris sbb : Meja Kursi Komputer HTML menyediakan tag untuk membuat list seperti diatas. Jenis list dalam HTML dibagi menjadi : Ordered List Unordered List Directory List Menu List Definition List List yang paling sering dipakai adalah Ordered List dan Unordered List, untuk Directory List, Menu List dan Definition List jarang sekali dipakai. Ordered List Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered list diawali dengan tag dan setiap item dalam list selalu diawali dengan . List yang memakai tag ini tidak harus 1,2,3,dst tetapi bisa saja a,b,c,dst, i,ii,iii,dst, tergantung pada atribut TYPE yang dituliskan dalam tag . Tipe penomoran yang dimiliki oleh tag yaitu : 1 -> 1,2,3,

A -> A,B,C, A -> a,b,c, I -> I,II,III, I -> i,ii,iii,

Unordered List Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai setiap item dalam list. Unordered list diawali dengan tag

. Sama seperti dalam Ordered list, pada Unordered list setiap item dalam list selalu diawali dengan

dan juga memiliki beberapa type, yaitu : TYPE = circle -> Tanda lingkaran TYPE = disk -> Tanda cakram TYPE = square -> Tanda kotak Latihan menggunakan List Dibawah ini menggunakan Ordered List

Apel

Mangga

Semangka Dibawah ini menggunakan Unordered List

• Apel
• Mangga
• Semangka

Dibawah ini menggunakan Ordered List mulai 10

Sepuluh

Sebelas

Duabelas

Gambar 4. Contoh Penggunaan List MENAMPILKAN GAMBAR Suatu situs web yang bagus, biasanya menampilkan gambargambar untuk menarik pengunjung masuk kedalamnya, bayangkan saja jika situs tersebut hanya menampilkan tulisan saja, tentu amat membosankan. HTML menyediakan fasilitas untuk menampilkan gambar di halaman web kita menggunakan tag . Tag memiliki bermacam atribut seperti SRC yang digunakan untuk menentukan lokasi gambar yang akan ditampilkan, ALT sebagai teks pengganti apabila ada browser yang tidak mendukung grafik, BORDER berfungsi untuk memberikan suatu border di sekeliling gambar, Height dan weight berfungsi untuk menentukan tinggi atau lebar suatu gambar dalam halaman web kita (dalam ukuran pixel), HSPACE dan VSPACE berfungsi menentukan jarak spasi dengan objek disekitar gambar secara horiontal maupun vertikal. Latihan Penggunaan IMG KlikPHP.com adalah situs yang ditujukan bagi para penggemar/pemakai PHP di Indonesia.
Anda dapat menemukan Tutorial, Tips 'n Trick, Contoh Script, berdiskusi masalah PHP, dll.

Gambar 5. Contoh penggunaan tag IMG TABEL Untuk membuat tampilan website yang bagus, kebanyakan para desainer web menggunakan tabel untuk mempermudah pengerjaan mereka, coba saja lihat situs www.detik.com, www.kompas.com, www.astaga.com, dan masih banyak lagi situs yang menggunakan tabel untuk mempercantik website-nya. Untuk membuat tabel, HTML menyediakan tag . Dalam tag terdapat banyak atribut, yaitu : Atribut BORDER WIDTH HEIGHT BGCOLOR BACKGROUND Fungsi Menentukan ukuran border/garis tabel Menentukan lebar tabel Menentukan tinggi tabel Menentukan background tabel Menentukan gambar yang digunakan untuk background tabel

Untuk membuat baris, setelah menuliskan tag maka digunakan tag . Sedangkan untuk membuat kolom digunakan tag . Sebagian besar atribut dalam tag dapat digunakan dalam tag maupun dalam tag . Penggabungan baris/kolom Untuk menggabungkan baris/kolom (merge) digunakan atribut COLSPAN dan ROWSPAN. COLSPAN digunakan untuk menggabungkan beberapa kolom menjadi 1 sedangkan ROWSPAN menggabungkan beberapa baris menjadi 1.

CELLPADING dan CELLSPACING CELLPADING digunakan untuk mengatur spasi antara border dengan tulisan, sedangkan CELLSPACING digunakan untuk mengatur spasi antar dua buah sel. Contoh Penggunaan Tabel Kelas Ket 1 2 Andi Nina Lunas

Form

Gambar 6. Contoh Penggunaan Tabel

Untuk melakukan interaksi dengan user, biasanya suatu situs menggunakan form untuk menerima masukan/input dari user dan memproses hasil inputan tersebut di server. Misalkan saja :

Gambar 7. Web dengan Form Dalam gambar diatas dapat dilihat untuk nama, kita menggunakan tipe textbox, password menggunakan tipe password, untuk jenis kelamin menggunakan radio button dan untuk hobi menggunakan checkbox. Untuk mengatur tipe form, menggunakan atribut TYPE, struktur form dapat dibuat sbb :

Untuk membuat form seperti pada gambar.7 dalam HTML dapat ditulis : Penggunaan Form Nama :
Password :
Jenis Kelamin

Pria Wanita
Hobi :
Tidur
Bersepeda Lainnya

Atribut-atribut diatas dapat dijelaskan sbb : Atribut METHOD ACTION NAME VALUE TYPE Fungsi Metode pengiriman data ke file tujuan. Ada 2 yaitu POST dan GET Aksi yang akan dilakukan jika user menekan tombol Submit Memberikan nama tiap input Memberikan nilai suatu input Tipe form yang akan kita gunakan.

Setiap form harus memiliki minimal tombol Submit atau tombol reset. Tombol Submit berfungsi ketika user telah mengisi form yang telah disediakan dan ingin mengirimkan ke server, maka user dapat menekan tombol submit. Sedangkan tombol reset berfungsi jika user ingin mengosongkan kembali form. Untuk membuat tombol submit, pada TYPE kita tuliskan Submit dan untuk membuat tombol reset, kita menuliskan Reset. Frame

Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi dalam beberapa bagian, dan setiap bagian adalah 1 halaman web. Biasanya frame digunakan jika salah satu bagian dalam halaman web tetap dan halaman yang lainnya berubah (mis : Menu) sehingga dapat mempercepat proses, karena hanya satu bagian saja yang diload dari server. Untuk membuat frame, digunakan tag dalam tag ini terdapat tag yang menentukan isi dari frame yang ditentukan dalam tag , struktur dari tag ini adalah :

pada tag terdapat atribut COLS atau ROWS, atribut COLS jika kita ingin membuat frame yang terbagi dalam kolom-kolom, sedangkan atribut ROWS digunakan jika kita ingin membuat frame yang terbagi dalam beberapa baris.

Gambar 8. Frame Dalam tag terdapat atribut SRC yang menunjukkan lokasi/nama file yang digunakan dalam frame tersebut, sedangkan atribut NAME berfungsi sebagai identifikasi frame tersebut.

Belajar dan Memahami Dasar-dasar Code CSSCascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Didalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS. Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi. Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu: 1. Metode Table 2. Metode Div

Manfaat dari CSS: 1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur, 2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat, 3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja, 4. Dapat berkolaborasi dengan JavaScript. 5. Digunakan dalam hampir semua web browser. Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu: Header > berisi tema web/ judul Menu > menu link web Content > isi dari web Footer > identitas/ copyright

Atribut IDAda dua cara penempatan elemen dalam web dengan CSS yaitu: 1. Position (Posisi) Mengunakan properti position terdapat 4 cara:

Static > posisi normal (default). Relative > posisi elemen tergantung dari elemen yang lain. Absolute > posisi elemen berpatokan pada jendela browser. Fixed > posisi elemen tetap walaupun digeser.

2. Float (Nempel) Menggunakan properti float atau clear:

Float:left > elemen akan menempel pada sebelah kiri elemen induk. Float:right > elemen akan menempel pada sebelah kanan elemen induk. Clear:left > elemen akan menempel pada sebelah kiri dan berada di bawah. Clear:right > elemen akan menempel pada sebelah kanan dan berada dibawah Clear:both > elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin > jarak/batas elemen dengan elemen lain Border > border/gari tepi elemen Padding> jarak elemen dengan isi elemen (elemen anak) Berikut gambar dibawah adalah format standar untuk membuat tampilan dengan CSS:

contoh penulisan css : #header { width:900px; height:50px; border: 1px solid #640404; } #headerLeft { width:400px; background-color:#CCCCCC; height:50px; float:left; text-align:center; } #headerRight { width:450px; background-color:#999999; height:50px; float:right; text-align:center;

} Sample Header Left Header Right Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu: 1. External Style Sheet (file CSS berbeda dari file HTML), 2. Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) 3. Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan). Saya sarankan anda menggunakan cara External Style Sheet karena lebih mudah dalam mengelolanya. Disini saya akan menerangkan dasar-dasar CSS. Langsung saja kita coba kode berikut ini: Penempatan CSS dalam HTML

Internal CSSMetode penulisan kode CSS langsung dalam file HTML. contoh: .header { width:900px; height:50px;

border: 1px solid #640404; } .headerLeft { width:400px; background-color:#CCCCCC; height:50px; float:left; text-align:center; } .headerRight { width:450px; background-color:#999999; height:50px; float:right; text-align:center; }

Eksternal CSSfile CSS terpisah dengan HTML. Buat file dengan ekstention .css. contoh:

Inline CSSPenulisan kode CSS dalam tag HTML. contoh: Inline CSS Jika kita menggunakan teknik external CSS, maka kita perlu membuat file css, misal buat file dan simpan dengan nama style.css Didalam HTML kita perlu memanggil file CSS dengan menggunakan tag yang diletakkan diantara tag . Pada contoh CSS selanjutnya kita menggunakan teknik external CSS, jadi gunakan saja file style.css dan coba.html anda hanya perlu mengubah isinya. Untuk file HTML anda gunakan coba.html dan ubah isinya pada bagian saja bagian yang didalam tidak usah diapa-apakan. Untuk memanggil CSS dalam tag HTML kita perlu menggunakan atribut class untuk memanggil CSS selector (dalam contoh diatas selectornya title dan thank). Dengan demikian apabila semua halaman anda memanggil class title, dan jika anda ingin mengganti font untuk semua halaman anda cukup mengubah selector CSSnya saja. Bagaimana anda sudah paham kegunaan CSS. CSS memiliki ratusan properties dan values, tentu saja saya tidak akan menerangkan semuanya, saya hanya akan menerangkan yang pentingpenting saja. Tidak semua browser dapat menampilkan jenis huruf yang kita spesifikasikan didalam CSS. Untuk itu kita perlu mendeklarasikan lebih

dari satu jenis huruf agar browser mengenal jenis huruf yang digunakan. Anda dapat menggunakan property font-family, yang mirip dengan tag . Sebagai contoh anda ingin menampilkan dari keluarga huruf Serif dan hurufnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum. Untuk lebih jelasnya lihat bkode berikut:Serif font

LinkSalah satu hal yang menarik dalam CSS anda dapat mengubah warna pada setiap link, menghilangkan garis bawah pada link sehingga jika anda bosan dengan link yang berwarna biru tua terang dengan garis bawah anda dapat mengubahnya. Coba kode CSS berikut:a.link1:link { font-weight: bold; font-size: 12px; color: #C87C28; font-family: Times New Roman; text-decoration: none; } a.link1:visited { font-weight: bold; font-size: 12px; color: #CC6600; font-family: Times New Roman; text-decoration: none; } a.link1:hover { font-weight: bold; font-size: 12px;

color: #C87C28; font-family: Times New Roman; text-decoration: underline } a.link1:active { font-weight: bold; font-size: 12px; color: #C87C28; font-family: Times New Roman; text-decoration: none; } a.link2:link { font-weight: bold; font-size: 12px; color: #663300; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; } a.link2:visited { font-weight: bold; font-size: 12px; color: #800000; font-family: Arial, Helvetica, sans-serif; text-decoration: none; } a.link2:hover { font-weight: bold; font-size: 12px; color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline overline; } a.link2:active { font-weight: bold; font-size: 12px; color: #ff6600; font-family: Arial, Helvetica, sans-serif; text-decoration: underline; }