Html css 1

Sebelum kita mempelajari HTML dan CSS, ada beberapa persiapan yang perlu

dilakukan. Seperti penginstallan aplikasi-aplikasi yang dibutuhkan dan aplikasi-aplikasi

pendukung dalam mempelajari HTML dan CSS.

1.1. Web Browser

Web browser yaitu perangkat utama yang akan kita gunakan untuk menampilkan

halaman web yang pada dasarnya terbuat dari HTML dan CSS. Saya yakin di setiap

komputer telah terinstall Web Browser bawaan seperti Internet Explorer (Windows),

Safari (Mac) dan Firefox (Linux Ubuntu).

Setiap browser memiliki perbedaan dalam hal menampilkan halaman web dan fitur-fitur

yang didukung dalam HTML dan CSS. Boleh jadi halaman web yang anda buat

ditampilkan benar pada salah satu browser namun acak-acakan pada browser lainnya.

Untuk itu perlu beberapa browser yang terinstall dalam komputer anda untuk menguji

penampilan website yang dibuat.

Isu-isu kompatibilitas ini akan anda temui ketika mempelajari CSS nantinya yang

berhubungan dalam penampilan halaman web.

Berikut ini yaitu beberapa browser yang dapat anda download dari Internet serta

review singkat.

Firefox

Web browser ini bisa dikatakan web browser yang paling disenangi oleh para developer

web karena kekayaannya dalam hal Add-on1. Anda dapat mendownloadnya di

http://firefox.com

Gambar 1 Mozilla Firefox 9

Google Chrome

Google Chrome yaitu web browser besutan Google yang memiliki beberapa

keunggulan. Chrome bisa dikatakan browser yang sangat ringan, cepat2 dan kaya akan

aplikasi/Add-on. Selain itu Chrome memakai engine3 Webkit, engine browser yang

rata-rata mendukung fitur-fitur terbaru dari teknologi HTML dan CSS. Anda dapat

mendownloadnya di http://google.com/chrome

1 Add-on/Plugin yaitu Aplikasi tambahan yang dapat dipasang sehingga memperkaya fitur

software yang bersangkutan

2 Kecepatan loading web tergantung dari kecepatan internet yang anda gunakan

3 Engine/Mesin yaitu kode utama dalam aplikasi untuk menampilkan halaman web contohnya

Mozilla untuk firefox, Webkit untuk Google Chrome dan Safari.

Gambar 2 Google Chrome 17

Safari

Safari yaitu web browser dari Apple. Sama halnya dengan Chrome, safari

memakai engine webkit sehingga mendukung fitur-fitur terbaru HTML dan CSS.

Browser ini tersedia untuk Mac dan Windows saja. http://www.apple.com/safari

Gambar 3 Safari 5

Internet Explorer

Browser yang pasti sudah terinstall pada komputer dengan sistem operasi windows. Jika

anda masih menggukan Internet Explorer versi 6, 7 dan 8, saya anjurkan untuk

mendownload versi terbaru yakni Internet Explorer 9/10 (untuk Windows Vista/7).

Penggunaan Internet Explorer dalam pengujian halaman web sangat tidak dianjurkan

(terutama versi 7 ke bawah) karena dukungannya yang kurang serta proses penampilan

halaman web yang terkadang menjadi berantakan. Namun karena pengguna Internet

explorer di dunia masih mendominasi, mau tidak mau kita harus memakai Internet

Explorer.

Gambar 4 Internet Explorer 8

1.2. Text Editor

Untuk membuat halaman Web anda memerlukan sebuah text editor. Jika anda

mempunyai Adobe Dreamweaver, saya sarankan untuk tidak memakai nya,

Mengingat anda masih dalam tahap belajar.

Text editor yang akan kita gunakan yaitu text editor ringan namun penuh dengan fitur

yang sangat membantu dalam proses Coding(Penulisan Kode) HTML dan CSS.

Notepad++

Tersedia untuk Windows, Notepad++

memiliki beragam fitur yang sangat

mendukung para programmer.

Kemampuannya untuk memperkaya diri

dengan pluginpun menjadi kelebihan

lainnya dengan text editor sejenisnya.

Anda dapat mendownload Notepad++ di

http://notepad-plus-plus.org

Sublime Text

Text editor yang terbilang masih baru yang sangat mudah digunakan, penampilan

simple namun enak dipandang. Sublime text yaitu aplikasi berbayar tapi anda dapat

mendownload versi demo-nya (meskipun versi demo tapi tidak ada batasan dalam

penggunaannya).

Sublime text tersedia untuk sistem Operasi Windows, Linux dan Mac, download di

alamat berikut http://www.sublimetext.com/2

Gambar 5 Notepad++

Gambar 6 Sublime Text2

Gedit

Anda pengguna Linux? Khususnya Linux dengan desktop Gnome sudah memiliki text

editor bawaan, GEdit. GEdit bisa digunakan untuk menuliskan berbagai macam bahasa

pemrograman.

Anda pengguna Windows-pun dapat mendownload GEdit versi windows di situs

resminya http://projects.gnome.org.

Gambar 7 GEdit untuk Windows

1.3. Add-On

Firebug

Firebug akan kita gunakan untuk memeriksa kode HTML dari setiap halaman web,

melihat CSS yang digunakan dan untuk menguji script javascript. Anda dapat

menginstallnya pada browser Firefox. Untuk menginstallnya cukup masuk ke halaman

Add-on dan cari add-on firebug.

Jika anda memakai Google Chrome atau Safari, tidak usah menginstall firebug

karena kedua browser dengan engine webkit ini sudah memiliki tool serupa yang

dinamai dengan Developer Tool.

Gambar 9 Developer Tools pada Google Chrome

Web Developer Tools

Add-on ini digunakan untuk menguji halaman web dan melakukan beberapa

perubahan/perbaikan sementara terhadap halaman web. Anda dapat menginstallnya

dari add-on firefox atau dari Chrome Web Store.

Gambar 8 Tampilan Firebug pada firefox

Gambar 10 Web Developer Tools memiliki sejumlah tools yang sangat membantu

Itulah aplikasi-aplikasi yang diperlukan untuk mempelajari HTML dan CSS, tapi yang

terpenting yaitu kehadiran Web Browser dan Text editor, sisanya yaitu optional

yang keberadannya hanya mendukung aktifitas kita dalam pembangunan halaman web.

Seperti Firebug dan Developer tools memang penting namun anda tidak harus

menginstall keduanya. Keberadaan kedua tools ini sangat membantu untuk

menguji dan memperbaiki kesalahan yang ditimbulkan baik kesalahan dalam

pengetikan kode atau lainnya.

Bab 2

Pengenalan HTML

2.1. Apa itu HTML?

Semua halaman web yang sering anda buka, seperti facebook.com, twitter.com,

google.com dan lain sebagainya ditampilkan dengan memakai HTML. Jadi bisa

dikatakan HTML yaitu bahasa dasar untuk menampilkan halaman web pada web

browser.

Buka Web browser anda lalu bukalah sebuah situs, http://www.google.com misalnya.

1. Lalu klik kanan di sembarang area, dan pilih “Inspect element” (menu paling

akhir)

Gambar 11 Inspect Element

2. Perhatikan kode hasil inspect element, yang terlihat yaitu sebagai berikut :

Gambar 12 Inspect Element akan menampilkan kode HTML dari situs yang bersangkutan

Baris pertama pasti diawali dengan <!DOCTYPE HTML>, ini menandakan bahwa

dokumen yang sedang anda buka saat ini yaitu HTML. Begitu juga dengan baris

kedua : <HTML>, kode ini menandakan bahkan kode-kode yang ditulis di

dalamnya yaitu kode HTML.

Jika anda ingin tahu kepanjangan HTML, HTML yaitu kependekan dari Hypertext

Markup Language. Artinya yaitu bahasa markup (penanda) berbasis text atau

bisa juga disebutsebagai formatting language (bahasa untuk memformat), Jadi

sudah jelas bahwa HTML bukanlah bahasa pemrograman, melainkan bahasa

markup/formatting.

2.2. Membuat Website dalam 1 Menit

Sudah siap membuat website? Kita mulai membuat website hanya dalam 1 menit!

1. Bukalah Notepad (All Programs > Accessories > Notepad)

2. Ketikkan teks berikut :

Website pertama saya

3. Pilih menu File > Save As

4. Beri nama ‚latihan1.html‛ (tanpa tanda kutip)

5. Pada bagian Save as type, pilih All Files (*.*) Lalu klik tombol save.

Gambar 13 Save As type

6. Sekarang klik dua kali file HTML yang telah anda buat, (atau Klik dan Drag ke Web

Browser anda, disini saya memakai Google Chrome)

Gambar 14 Website pertama anda

Demonstrasi di atas hanyalah langkah untuk membuat file HTML, mudah bukan?

2.3. Pengenalan Tag HTML

Seperti yang saya sebutkan sebelumnya, bahwa HTML yaitu bahasa Markup, artinya

bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai

penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau

aplikasi Word Processing lainnya.

Ketika membuat sebuah dokumen word, biasanya kita melakukan formatting pada teks.

seperti menebalkan teks, memiringkan, memberi garis bawah, Membuat Penjudulan

(Heading), membuat list (Daftar) dan lain sebagainya. Pada HTML, formatting ini bisa kita

sebut dengan Proses Markup dan akan dilakukan dengan memakai tag HTML.

Misalnya, untuk mem-format suatu teks menjadimiring kita tambahkan tag <em>atau<i>.

Edit file sebelumnya, menjadi seperti berikut :

Website <em>pertama</em> saya

Dan ketika dibuka kembali pada browser, anda dapat melihat kata pertama menjadi

miring.

<em> .. </em> disebut dengan Tag HTML, yang digunakan untuk me-markup(memformat)

dokumen HTML. Perhatikan bahwa setiap tag memiliki pasangan yakni tag penutupnya.

Artinya hanya teks yang berada di dalam tag ini yang akan diberi format miring.

Tag penutup ditandai dengan penambahan tanda slash (/) sebelum nama tagnya.

Berikut ini yaitu anatomi dari tag HTML :

Isi atau Konten

</namatag>

Setiap tag HTML bisa menjadi “isi” dari tag HTML lainnya, untuk membuat suatu hierarki

dari dokumen HTML.

Dalam setiap tag HTML bisa disisipkan berbagai atribut yang berfungsi untuk

menampung informasi-informasi tertentu, misalnya atribut id dan class yang berfungsi

untuk memberi nama suatu tag sebagai referensi CSS atau javascript nantinya.

Sekarang bagaimana jika teks yang dimiringkan ini ingin kita tebalkan? Untuk

menebalkan teks anda dapat memakai tag <strong>atau<b>, menjadi seperti berikut:

Website <strong><em>pertama</em></strong> saya

2.4. Struktur file HTML

Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag

yang harus anda tuliskan dan sudah menjadi ketentuan. Jika kita perbaiki latihan kita

sebelumnya menjadi dokumen HTML yang benar maka kodenya menjadi seperti

berikut:

1. <!DOCTYPE HTML>

2. <HTML>

3. <head>

4. <title>Judul File HTML</title>

5. </head>

7. <body>

8. Website <strong><em>pertama</em></strong> saya

9. </body>

10. </HTML>

Bingung? Tenang, saya jelaskan tiap baris kode ini .

<!DOCTYPE HTML>

yaitu Tag awal dari setiap dokumen HTML, tag ini berfungsi untuk menginformasikan

pada browser bahwa dokumen yang sedang dibuka yaitu dokumen HTML. Tag ini

perlu dicantumkan disetiap dokumen HTML yang akan anda buat.

Awal dari isi dokumen HTML dimulai dari sini, semua kode HTML yang akan anda buat

akan ditulis di dalam tag ini, perhatikan juga bahwa setiap tag harus memiliki tag

penutup.

Tag Head akan digunakan untuk menyimpan berbagai informasi tentang dokumen

HTML, lebih detailnya akan kita temui pada bab selanjutnya. Apa yang inada di dalam

tag ini, tidak akan ditampilkan secara langsung pada web browser.

Salah satu contoh informasi yang inada di dalam tag Head yaitu title. Title akan

menampilkan teks pada judul browser atau pada tab browser.

Nah, apa yang ingin anda tampilkan pada browser akan ditulis di dalam tag ini, tag body

merupakan tag pembuka dari badan dokumen HTML.

Mudah dimengerti bukan? Lalu apakah penulisan tag-tag HTML harus seperti contoh di

atas? Seperti penambahan tab/indentasi pada setiap tag?. Sebenarnya Anda bisa saja

menuliskan kode HTML seperti ini :

<!DOCTYPE HTML><HTML><head><title>Judul File HTML</title></head><body>Website

<i>pertama</i> saya</body></HTML>

Dan yang anda dapatkan dalam browserpun sama, namun anda akan kesulitan

membaca dokumen HTML ini . Kalau saja dokumen HTML yang anda buat hanya

10 baris mungkin hal ini tidak akan menjadi masalah, namun bagaimana jika 1000 baris?

Nah loh?!

Untuk itu kita menambahkan indentasi, disetiap isi (konten)dari suatu tag. Misalnya :

<head>

<title>Judul File HTML</title>

</head>

Ini menandakan bahwa tag title berada di dalam tag head. Selain itu kita juga bisa

mengontrol, apakah suatu tag sudah ditutup atau belum.

Bab 3

Memuat Gambar

sesudah anda mengetahui struktur dari sebuah file HTML dan apa saja yang harus ditulis

pertama kali. Selanjutnya saya akan mengajak anda untuk mempelajari cara

memuat/menampilkan sebuah gambar dan memahami apa itu atribut HTML.

Untuk memuat sebuah gambar pada dokumen HTML, kita akan memakai tag <img>.

Lalu dimana kita meletakkan gambar ini ? Di dalam tag <img> kah?

3.1. Mengenal Atribut HTML

Setiap tag HTML dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk

menyimpan informasi yang berkaitan dengan tag ini .

Pada tag <img> kita akan memakai atribut src untuk menyimpan lokasi gambar :

Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan

(=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip.

Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga

sebagai Self Closed Tag), seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki

konten seperti :

<title>Ini yaitu Konten tag title</title>

Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup :

Sekarang saatnya anda mencoba memuat gambar pada file HTML.

1. Buatlah file HTML baru dengan nama latihan2.html

2. Carilah sebuah gambar dan simpan satu folder dengan file HTML anda.

Gambar 15 Penempatan gambar sesuai dengan lokasi file HTML

3. Ketikkanlah kode HTML berikut :

1. <!DOCTYPE HTML>

2. <HTML>

3. <head>

4. <title>Judul File HTML</title>

5. </head>

7. <body>

8. <p>ini yaitu contoh pemuatan gambar pada file

HTML<p>

9. <img src=‚logo.png‛ />

10. </body>

11. </HTML>

4. Bukalah pada browser, anda akan melihat gambar telah termuat pada file HTML

anda.

Gambar 16 Gambar ditampilkan pada browser

Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi gambar, anda juga

harus menyertakan atribut alt yang akan digunakan sebagai teks alternatif ketika

gambar tidak berhasil dimuat atau gambar hilang.

Dan atribut lainnya yaitu atribut width dan height, yang berfungsi untuk menentukan

lebar dan tinggi dari gambar ini . Memang hal ini tidak perlu dilakukan karena

gambar secara otomatis akan terload dengan ukuran sebenarnya, namun hal ini sangat

dianjurkan untuk mempercepat proses pemuatan gambar.

Anda tidak perlu memberi tanda kutip pada

nilai lebar dan panjang. Nilai ini bisa anda

dapatkan dengan mengklik kanan gambar

ini dan pilih menu properties. Pada tab

details akan anda temui ukuran gambar

ini .

Dengan penambahan atribut alt, ketika

gambar yang dimaksud hilang/tidak/gagal

termuat maka akan muncul sebuah icon

broken file, dan isi dari atribut alt akan

ditampilkan disana.

Gambar 17 File Properties gambar

3.2. Cara penulisan lokasi file

Jika anda menyimpan gambar ini pada sebuah folder seperti berikut.

Gambar 18 Menyimpan gambar pada folder images

Maka yang perlu anda lakukan yaitu menambahkan nama folder ini diikuti

dengan tanda slash (/) dan nama file gambar yang akan dimuat:

Jika dalam folder ini inada folder lagi, dan gambar yang ingin anda muat ada di

dalamnya maka penulisannya menjadi seperti berikut :

Selain penggunaan lokasi gambar seperti di atas, anda juga bisa menampilkan gambar

yang sudah inada di internet, penulisan seperti ini disebut dengan hotlinking

misalnya:

Penggunaan hotlinking sangat tidak dianjurkan karena gambar yang dimuat bukanlah

milik kita dan tentunya juga akan merugikan si pemilik gambar.

Bab 4

Membuat Link

Yang sering anda temui dalam sebuah website yaitu link. Link ini akan membuat

konten atau elemen HTML4 dapat di klik dan akan mengarahkan/membawa anda ke

halaman web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris

bawah (selama belum diberi style).

4.1. Link Standar

Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan

tag <a> pada teks yang ingin kita buat menjadi link.

Klik <a>disini</a> untuk mendownload

Namun anda tidak akan melihat perubahan pada teks “disini” karena kita belum

“mengaitkannya” ke halaman web lain. Untuk itu kita akan memakai attribut href

untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama

halnya dengan attribut src pada tag img).

1. Klik <a href=‚http://www.alamat-tujuan.com‛>disini</a> untuk mendownload

Sebagai latihan kita akan membuat file HTML baru dan membuat link untuk

mengaitkannya ke latihan-latihan sebelumnya.

1. Buatlah file baru dengan nama latihan3.html, simpanlah di folder yang sama

dengan latihan-latihan sebelumnya.

4 Tag-tag HTML juga biasa sebut dengan elemen.

Gambar 19 Penempatan file pada folder yang sama

2. Ketikkan kode berikut pada file latihan3.html

1. <!DOCTYPE HTML>

2. <HTML>

3. <head>

4. <title>Judul File HTML</title>

5. </head>

6. <body>

7. <h1>Selamat datang di website saya</h1>

8. <a href=‚latihan1.html‛>buka Latihan 1</a><br>

9. <a href=‚latihan2.html‛>buka Latihan 2</a>

10. </body>

11. </HTML>

3. Buka kembali file latihan1.html dan latihan2.html, dan tambahkan sebuah link

yang akan mengait ke file latihan3.html tepat sebelum penutup tag body (

</body> ).

…

<a href=‚latihan3.html‛>Kembali ke halaman utama <a>

</body>

</HTML>

4. Save pekerjaan anda, dan bukalah file latihan3.html pada browser. Anda dapat

mengklik linknya satu persatu.

Gambar 20 tampilan file Latihan3.html

Ketika link “buka latihan 1” di klik, browser akan menampilkan file latihan1.html

Gambar 21 Link untuk kembali ke halaman utama

Dan Klik link “Kembali ke halaman utama” untuk menampilkan latihan3.html

kembali.

Jika anda perhatikan pada kode yang inada dalam latihan3.html, ada beberapa tag

yang belum saya jelaskan, yaitu tag <h1> dan <br>.

Tag <br> digunakan untuk memindahkan teks kebaris baru, sehingga teks yang

dipisahkan dengan tag ini akan ditampilkan di baris yang berbeda. Jika anda menghapus

tag <br> ini, maka teks akan ditampikan satu baris.

Gambar 22 link ditampilkan satu baris tanpa tag <br>

Untuk membuat link yang mengacu ke halaman web lain, pastikan anda menyertakan

http:// pada atribut href link ini .

<a href=‚http://www.google.com‛> Buka Google </a>

Jika anda tidak menyertakan http:// maka link ini tidak akan bekerja sebagaimana

mestinya.

Gambar 23 Error ketika http:// tidak ditambahkan pada alamat web lain

Setiap link yang diklik akan ditampilkan di window/tab yang sama, bagaimana jika anda

ingin membuka link ini di tab/window baru? Tambahkan atribut target=“_blank”.

<a href=http://ariona.net target=‚_blank‛>ariona.net</a>

4.2. Link Email

Anda juga dapat membuat link email, link ini berisi alamat email yang ketika diklik,

aplikasi untuk mengirim email akan otomatis terbuka dan tujuan email secara otomatis

terisi dengan alamat yang telah ditentukan.

Untuk membuat link email, anda tinggal menambahkan mailto:alamat@email di dalam

atribut href.

<a href=‚mailto:mrxyz@yahu.com‛>Kirim Email</a>

Selain tipe link-link di atas, masih banyak lagi tipe link lainnya, seperti link No. Telp, Aplikasi

dan lainnya.

Bab 5

Heading/Penjudulan

Heading, digunakan untuk memberikan penjudulan pada suatu dokumen HTML.

Bayangkanlah sebuah skripsi atau buku yang memiliki bab dan subbab-subbab di

dalamnya. Untuk memformat penjudulan dalam HTML, kita gunakan tag <h1> untuk

judul utama dan untuk judul subbabnya anda dapat memakai tag <h2> sampai

dengan<h6>.

Setiap level judul memiliki ukuran huruf yang berbeda-beda (namun anda masih bisa

merubah ukurannya melalui CSS).

Sebagai latihan, buatlah file HTML baru dengan nama latihan4.html lalu ketikkan kode

HTML berikut:

1. <!DOCTYPE HTML>

2. <HTML lang=‚en-US‛>

3. <head>

4. <title>Heading</title>

5. </head>

6. <body>

7. <h1>Bab 1 : Pendahuluan</h1>

8. <h2>1.1 Latar Belakang</h2>

9. <p>Paragraf pendahuluan, bla..bla.. </p>

10. <h2>1.2 Pokok Permasalahan</h2>

11. <p>Paragraf pendahuluan, bla..bla.. </p>

12. <h1>Bab 2 : Pembahasan</h1>

13. <h2>2.1 Teori dan Konsep</h2>

14. <p>Paragraf pendahuluan, bla..bla.. </p>

15. <h2>2.2 Algoritma Pemrograman</h2>

16. <p>Paragraf pendahuluan, bla..bla.. </p>

17. </body>

18. </HTML>

Gambar 24 Penjudulan pada dokumen HTML

Adanya penjudulan dimaksudkan agar suatu dokumen HTML lebih terstruktur layaknya

sebuah dokumen resmi seperti skripsi /paper yang mengharuskan adanya

perbedaanantara Bab utama dan sub-babnya.

Perhatikan contoh penggunaan Heading dalam suatu website di di halaman selanjutnya.

Dalam website ini , Logo/Judul dari website diberi Heading Level 1, untuk judul

artikel diberi heading level 2 dan judul dari bagian-bagian di dalamnya diberi heading

level 3 s.d 4

Bab 6

Membuat daftar/list

Sebuah daftar dapat memiliki penomoran atau hanya sebuah simbol berupa lingkaran

atau bentuk lainnya. Dalam HTML, daftar yang memakai penomoran disebut

dengan ordered list dan yang memakai simbol disebut dengan unordered list.

6.1. Ordered List

Ordered list atau Daftar berurutan dapat dibuat dengan memakai tag <ol>

(singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan

dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut :

1. <h2>Yang harus dilakukan hari ini</h2>

2. <ol>

3. <li>Pergi ke pasar</li>

4. <li>Buat tutorial HTML</li>

5. <li>Mengerjakan tugas kuliah</li>

6. </ol>

Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar

item.

Gunakan Ordered list, ketika sebuah list/daftar memerlukan urutan yang benar,

seperti cara menyalakan motor dan lain sebagainya.

Dan jika ditampilkan pada browser, maka yang akan anda dapatkan yaitu seperti

berikut :

Gambar 25 Daftar berurutan

6.2. Unordered List

Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan

simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS).

Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag <ol>, item

yang inada di dalamnya harus diapit dengan tag <li>.

Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang

akan kita dapat yaitu seperti berikut :

1. <h2>Yang harus dilakukan hari ini</h2>

2. <ul>

3. <li>Pergi ke pasar</li>

4. <li>Buat tutorial HTML</li>

5. <li>Mengerjakan tugas kuliah</li>

6. </ul>

Gambar 26 Daftar tidak berurut

Secara default, item akan ditandai dengan lingkaran.

6.3. Definition List

Berbeda dengan Ordered List dan Unordered List yang memiliki struktur sama, Data list

memiliki struktur tersendiri. Biasanya data list ini digunakan untuk membuat daftar

istilah beserta definisinya seperti halnya dalam kamus.

<dl>

</dl>

Tag dt (definition term) digunakan untuk menampung istilah yang akan didefinisikan,

dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya. Berikut contoh

penggunaan dari Definition List :

<dl>

<dt>Manga</dt>

<dd>Manga (baca: man-ga, atau ma-ng-ga) merupakan kata komik dalam bahasa

Jepang; di luar Jepang, kata ini digunakan khusus untuk membicarakan tentang

komik Jepang. </dd>

<dt>Mangaka</dt>

</dd>Mangaka (baca: man-ga-ka, atau ma-ng-ga-ka) yaitu orang yang

menggambar manga</dd>

</dl>

6.4. List/Daftar bersarang

Sebuah daftar bisa saja memiliki daftar lagi di dalamitemnya, atau biasa kita sebut

dengan daftar/list bersarang (nested list). Contohnya seperti pada latihan yang akan kita

buat berikut.

Buat file baru dengan nama file latihan5.html lalu ketikkan kode HTML berikut

1. <!DOCTYPE HTML>

2. <HTML>

3. <head>

4. <title>List/Daftar</title>

5. </head>

6. <body>

7. <h2>Yang harus dilakukan hari ini</h2>

8. <ol>

9. <li>Pergi ke pasar

10. <ul>

11. <li>Beli sayuran</li>

12. <li>Beli kertas

13. <ol>

14. <li>A4</li>

15. <li>Legal</li>

16. </ol>

17. </li>

18. <li>Beli tinta</li>

19. </ul>

20. </li>

21. <li>Buat tutorial HTML</li>

22. <li>Mengerjakan tugas kuliah</li>

23. </ol>

24. </body>

25. </HTML>

Dan berikut tampilan pada browser.

Gambar 27 List bersarang

Yang perlu anda perhatikan yaitu di mana anda meletakkan tag <ol>atau <ul> jika anda

ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item (</li>).

Daftar seperti ini biasa digunakan untuk pembuatan menu website, atau keperluan

lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin-poin.

Bab 7

Memahami Tag div (Division)

Anda dapat membuat suatu group dari tag-tag HTML yang anda buat dengan

memakai tag <div>, seperti pada contoh kasus berikut :

Setiap website/weblog yang anda buka, jika diperhatikan pasti memiliki empat

bagian/group. Keempat bagian/group ini antara lain :

1. Header

Bagian kepala website yang berisi logo website, nama website, slogan website,

menu website dan lainnya.

2. Content

Berisi isi dari website itu sendiri, jika website berupa weblog, maka contentnya

berisi postingan terbaru atau informasi lainnya.

3. Sidebar

Berada di samping Content dan biasanya berisi iklan, kategori artikel dan widget

atau hiasan situs lainnya.

4. Footer

Bagian kaki dari website yang pada umumnya diisi dengan tag website ini ,

Lebih sederhananya, bayangkanlah Surat resmi yang memiliki Kop surat, badan surat

dan penutup surat.

Dalam HTML, kita dapat membagi bagian-bagian ini dengan memakai tag

<div> (division/bagian) dan untuk menamai setiap div kita gunakan atribut id atau class5.

Berikut contoh penggunaan tag div jika kita terapkan pada bagian-bagian website yang

telah kita sebutkan sebelumnya:

5 Atribut ID dan Class tidak hanya digunakan dalam tag div saja melainkan dapat digunakan di

setiap tag HTML untuk memberikan penamaan sebagai referensi jika diperlukan.

1. <div id=‚header‛>

2. </div>

4. <div id=‚content‛>

5. </div>

7. <div id=‚sidebar‛>

8. </div>

10. <div id=‚footer‛>

11. </div>

Jika anda menampilkannya pada browser, anda tidak akan melihat apa-apa karena tag

div tidak akan menampilkan efek visual. Tag ini hanya digunakan untuk membuat

dokumen HTML lebih terstruktur dengan membagi-bagi dokumen ke dalam bagian-

bagian yang lebih spesifik.

7.1. Pakai ID atau Class?

Bagi seorang pemula, termasuk saya ketika masih belajar HTML & CSS pasti

menanyakan hal yang sama. Pasalnya atribut ID dan Class digunakan untuk menamai

tag HTML. Lalu apa perbedaan dari keduanya?

Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik

unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama.

Perhatikan contoh berikut :

1. <div id=‚menu‛>

2. <ul id=‚menu‛>

3. <li>Beranda</li>

4. <li>Tutorial</li>

5. </ul>

6. </div>

Penggunaan atribut ID pada contoh di atas yaitu SALAH, karena inada dua ID yang

sama, yaitu “menu” pada tag <div> dan <ul>.

Perhatikan contoh sebelumnya, bahwa kita memakai ID yang berbeda untuk setiap

div yakni, header, content, sidebar dan footer karena semuanya memiliki struktur dan

fungsi yang berbeda dalam suatu dokumen HTML.

Class

Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan

dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan

kode HTML berikut :

1. <ul id=‚menu‛>

2. <li class=‚merah‛>Beranda</li>

3. <li>Tutorial</li>

4. <li class=‚merah‛>Berita</li>

5. <li>Video</li>

6. </ul>

Pada Kode HTML di atas, saya memakai class Merah pada beberapa list item,

karena nantinya list item yang memiliki class merah akan diberi warna background

merah.

Kesimpulannya yaitu , ketika anda memiliki beberapa elemen dengan karakter/format

yang sama, gunakan Class sebagai penamaannya dan Gunakan ID untuk elemen yang

berbeda dan membutuhkan tanda pengenal lebih spesifik.

7.2. Memahami hubungan Child, Parent dan Siblings

Ketika suatu tag memiliki tag/konten didalamnya maka hubungan antar tag-tag ini

disebut dengan child-parent dan sibling. Perhatikan contoh berikut :

1. <div id=‚wrapper‛>

2. <div id=‚content‛>

3. <div id=‚article‛></div>

4. <div id=‚sidebar‛></div>

5. </div>

6. </div>

Dalam contoh kode HTML ini :

 <div id=‚wrapper‛> disebut Parent, dan tag HTML yang ada di dalamnya disebut

dengan Child(<div id=‚content‛>).

 Begitu juga dengan <div id=‚content‛> disebut parent untuk <div id=‚article‛> dan

<div id=‚sidebar‛>,

 dan hubungan antara<div id=‚article‛> dan <div id=‚sidebar‛> disebut dengan

sibling, atau saudara.

Bab 8

Form

Dalam sebuah website biasanya inada

satu atau lebih form, seperti form

pencarian, registrasi dan lain sebagainya.

Form ini biasa digunakan untuk

mengumpulkan data dari pengunjung

website.

Sebuah form, boleh jadi memiliki

beragam kontrol, mulai dari text input,

Combo box, Button dan lain sebagainya.

Kita akan mempelajari sebagian kontrol

yang disebutkan diatas karena kontrol di

atas yaitu yang paling sering digunakan

dalam halaman web.

Pertama-tama, pembuatan sebuah form

diawali dengan tag <form>, dan setiap

kontrol-kontrol yang dibutuhkan

ditempatkan di dalam tag ini.

<form>

<h1>Formulir Pendaftaran</h1>

…

</form>

Jika anda merasa asing dengan istilah FORM, bayangkan saja sebuah FORMULIR

yang sering ditemui di sekitar kita seperti formulir pendaftaran siswa baru,

formulir pembuatan KTP dan lain sebagainya.

Gambar 28 Formulir (FORM) pendaftaran Yahoo!

Control-control Form

Setiap control pada form dapat dibuat dengan memakai tag <input>. Dan yang

membedakan tipe dari control ini berada pada atribut type (tipe kontrol). Berikut

ini yaitu sebagian tipe kontrol yang biasa ditemui :

Label

Label digunakan untuk memberikan keterangan pada setiap input yang ada. Jika anda

perhatikan formulir pendaftaran situs yahoo, yang disebut dengan label yaitu yang

ditandai berikut ini :

Gambar 29 Contoh Label pada form

<label for=‚Name‛> Keterangan Input </label>

Atribut for diisi dengan isi dari atribut name pada kontrol yang ingin diberi label.

Text

Control input ini dapat diisi dengan teks yang memiliki kata yang tidak terlalu

panjang/hanya satu baris, biasa digunakan dalam form pencarian, nama dan lain

sebagainya.

<label for=‚nama‛>Nama Lengkap</label>

Gambar 30 Text Input

Jika text input yang akan ditampilkan ingin memiliki nilai, maka tuliskan nilai ini di

dalam atribut value.

Dengan begitu, ketika halaman dibuka, text input ini secara otomatis akan terisi dengan

nilai dari atribut value.

Text Area

Sama halnya dengan Input Text, namun textarea dapat diisi lebih dari satu baris, cocok

digunakan untuk isian yang panjang, seperti alamat, deskripsi, atau biodata.

Berbeda dengan kontrol lainnya yang memakai tag <input>, text area memiliki tag

sendiri yaitu <textarea></textarea>. Dan apa yang inada di dalam tag ini yaitu value dari

kontrol ini

<label for=‚alamat‛>Alamat Lengkap</label>

Gambar 31 Text area

Combo Box

Combo Box yaitu kontrol yang memiliki pilihan ketika diklik. Pembuatannya sama

seperti pembuatan Daftar/List namun dengan tag yang berbeda.

<option>Jakarta</option>

<option>Bandung</option>

<option>Tasikmalaya</option>

</select>

Gambar 32 Combo Box

Submit/Button

Submit atau Button, berupa tombol yang dapat di klik. Penggunaan atribut value pada

kontrol ini akan merubah text yang ada di dalamnya.

Gambar 33 Button

Sebagai latihan, kita coba menggabungkan kontrol-kontrol yang telah anda pelajari

sebelumnya menjadi satu form utuh.

Buatlah file baru, dengan nama file latihan6.html, lalu ketikkan kode HTML berikut pada

file latihan6.html

1. <!DOCTYPE HTML>

2. <HTML>

3. <head>

4. <title>Form</title>

5. </head>

6. <body>

7. <form>

8. <label for=‚nama‛>Nama</label>

9. <input type=‚text‛ name=‚nama‛><br>

10. <label for=‚alamat‛>Alamat</label>

11. <textarea name=‚alamat‛></textarea><br>

12.

13. <label for=‚kota‛>Kota</label>

14. <select name=‚kota‛>

15. <option>Jakarta</option>

16. <option>Bandung</option>

17. <option>Tasikmalaya</option>

18. </select><br>

19.

20. <input type=‚submit‛ value=‚kirimkan data‛>

21. </form>

22. </body>

23. </HTML>

Berikut ini yaitu tampilan yang anda dapatkan jika file latihan6.html dibuka di dalam

browser.

Gambar 34 Form utuh

Dalam buku ini, saya tidak akan membahas bagaimana cara memroses data yang

dikumpulkan dari form ini , karena dalam HTML kita tidak bisa melakukan proses

pengolahan data. Ingat bahwa HTML hanya digunakan untuk memformat dokumen,

bukan untuk memroses data.

Untuk memroses data, kita bisa memakai bahasa pemrograman web, seperti

Javascript atau PHP atau bahasa pemrograman web lainnya.

Dengan bahasa pemrograman seperti Javascript atau PHP anda dapat mengolah data-

data yang dikumpulkan dari Form HTML untuk diproses dan dikeluarkan kembali

menjadi suatu informasi baru.

Bab 9

Tabel

Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa memakai tag

<table>.

Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di

dalam tag table)

<table>

</table>

Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td>

(table data) yang digunakan di dalam tag <tr>.

1. <table>

2. <tr>

3. <td>No</td>

4. <td>Nama</td>

5. <td>Alamat</td>

6. </tr>

7. </table>

Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut colspan (untuk

merge horizontally-secara horizontal) atau rowspan (untuk merge vertically).

1. <table>

2. <tr>

3. <td rowspan=2>No</td>

4. <td colspan=2>Jenis Kelamin</td>

5. <td rowspan=2>Nama</td>

6. </tr>

7. <tr>

8. <td>L</td>

9. <td>P</td>

10. </tr>

11. <tr>

12. <td>1</td>

13. <td>L</td>

14. <td></td>

15. <td>Rian</td>

16. </tr>

17. </table>

Jika anda tampilkan dalam browser, maka tabel ini tidak akan memiliki garis,

untuk memberi garis pada tabel anda dapat menambahkan atribut border=1 pada tag

<table> atau anda dapat menambahkan border lewat CSS nantinya.

Gambar 35 Tabel sesudah pemberian atribut border

Sebagai latihan, anda tulis kode tabel di atas dan tambahkan beberapa data lagi, lalu

simpan dalam file latihan7.html.

9.1. Struktur tabel yang dianjurkan

Agar format tabel sesuai dengan ketentuan, Anda dapat memakai tag <thead> untuk

baris yang menjadi Judul tabel, <tbody> untuk data/isi dari tabel dan <tfooter> untuk kaki

tabel (bisa diisi sama dengan thead atau lainnya).

1. <table border=1>

2. <thead>

3. <tr>

4. <td rowspan=2>No</td>

5. <td colspan=2>Jenis Kelamin</td>

6. <td rowspan=2>Nama</td>

7. </tr>

8. <tr>

9. <td>L</td>

10. <td>P</td>

11. </tr>

12. </thead>

13.

14. <tbody>

15. <tr>

16. <td>1</td>

17. <td>L</td>

18. <td></td>

19. <td>Rian</td>

20. </tr>

21. </tbody>

22. </table>

9.2. Kesalahan dalam penggunaan <table>

Tag table digunakan untuk memformat data tabular/data yang membutuhkan format

tabel dalam menampilkannya, seperti contoh penggunaan tabel untuk menampilkan

data nilai berikut :

No Nama Nilai Akhir Index

1 Jono 90 A

2 Joni 75 B

3 Dedi 82 A

Masih banyak yang memakai tabel untuk keperluan layouting sebuah website,

misalnya memakai tag table untuk membuat layout 2 kolom, 3 kolom, atau 4 kolom

seperti contoh berikut :

Gambar 36 Penggunaan table untuk layout yaitu menyalahi aturan

Penggunaan tag <table> untuk keperluan layout yaitu menyalahi aturan/fungsi dari tag

table ini .

Layout table biasanya dibuat secara otomatis oleh aplikasi seperti Dreamweaver atau

Photoshop (di-generate oleh slicing tool).

Bab 10

Studi kasus 1- Konversi desain ke HTML

Sebagai seorang web designer, Anda harus mampu menerjemahkan suatu desain web

ke dalam bahasa HTML dan CSS. Proses penerjemahan dari desain ke dalam kode HTML

ini disebut dengan Pembuatan Markup, yang dilanjutkan dengan proses Styling

(Penambahan CSS yang akan kita pelajari pada bab selanjutnya).

Gambar 37 Desain web yang akan kita konversi

Pada bab ini anda akan belajar membuat markup dari sebuah desain web yang telah

disiapkan. Saya tidak akan memberikan desain web yang rumit, sebagai latihan kita

gunakan desain yang sederhana dulu.

10.1. Pesiapan

Sebelum kita mulai proses pembuatan markup untuk desain web ini , kita buat

folder baru terlebih dahulu, agar pekerjaan kita rapih dan terstruktur.

Buatlah folder baru dengan nama “Latihan Markup” dan buatlah file HTML baru

dengan nama “latihan-markup.html”.

Dalam folder ini buat lagi satu buah folder dengan nama “images” untuk

menyimpan seluruh gambar yang diperlukan dalam file HTML yang kita buat. Lalu copy

gambar yang inada di dalam folder resources/images yang disertakan bersama

ebook ini.

10.2. Wrapper

Kita mulai dari pembuatan sebuah div untuk menampung seluruh konten situs yang

akan dibuat. Saya akan memakai div dengan id wrapper. Nantinya div ini akan kita

buat rata-tengah, jadi setiap browser di zoom-in atau di zoom-out, konten situs tetap

berada di tengah.

1. <!DOCTYPE HTML>

2. <HTML>

3. <head>

4. <title>Latihan Markup</title>

5. </head>

7. <body>

8. <div id=‚wrapper‛>

10. </div>

11. </body>

12. </HTML>

10.3. Header

Kita mulai dari pembuatan header, perhatikan gambar berikut :

Gambar 38 Bagian header web

Sudah ada bayangan?, pertama kita buat sebuah div dengan nama id header (atau

terserah anda). Dalam gambar di atas bisa anda perhatikan inada gambar logo, lalu

Menu (kita buat dengan unordered list) dan terakhir sebuah text input untuk pencarian.

Semuanya telah anda pelajari pada bab-bab sebelumnya. Jadi, Markup untuk bagian

header yaitu seperti berikut :

8. <div id=‚wrapper‛>

9. <div id=‚header‛>

10. <img src=‚logo.png‛ alt=‚logo‛ />

11.

12. <ul id=‚menu-utama‛>

13. <li><a href=‚‚>Home</a></li>

14. <li><a href=‚‚>Tutorial</a></li>

15. <li><a href=‚‚>Video</a></li>

16. </ul>

17. <form>

18. <input type=‚text‛ name=‚search‛ />

19. </form>

20. </div>

21.

22.

23. </div>

Mudah bukan?, semua tag-tag ini telah saya jelaskan sebelumnya. Jika anda masih

tidak mengerti atau lupa anda dapat membuka kembali bab sebelumnya.

10.4. Content

Kita lanjutkan dengan proses markup Content/isi Situs.

Gambar 39 Bagian Konten Web

Jika anda perhatikan, disana inada tiga Artikel yang memiliki penampilan dan struktur

yang sama, untuk itu kita akan memakai penamaan dengan Class pada div ini.

Namun sebelumnya, kita tulis sebuah div untuk menampung artikel yang akan kita buat

dengan nama “daftar-artikel”.

22. <div id=‚daftar-artikel‛>

23. <div class=‚artikel‛>

24.

25. </div>

26. </div>

Gambar 40 Detail setiap post

Kita masuk ke detail setiap artikel. Di dalam artikel ini inada sebuah gambar, judul

artikel, tanggal, ringkasan dan sebuah link “watch this”.

Sudah terbayang bagaimana kode HTML nya?

22. <div id=‚daftar-artikel‛>

23. <div class=‚artikel‛>

24. <img src=‚images/gambar-artikel.jpg‛ alt= ‚Gambar Artikel‛ />

25. <h1> Gates vs Jobs</h1>

26. <b>Feb 12, 2007</b><b>Views : 3,487,497</b>

27. <p>Bill Gates and Steve Jobs square off in the clean white virtual world of

the iconic Mac ads</p>

28. <a href=‛‛>Watch This</a>

29. </div>

30. </div>

Selanjutnya anda tinggal Copy div class artikel ini sebanyak tiga kali. Sehingga menjadi

seperti berikut :

22. <div id=‚daftar-artikel‛>

23. <div class=‚artikel‛>

24. <img src=‚images/gambar-artikel.jpg‛ alt=‚Gambar Artikel‛ />

25. <h1> Gates vs Jobs</h1>

26. <b>Feb 12, 2007</b><b>Views : 3,487,497</b>

27. <p>Bill Gates and Steve Jobs square off in the clean white virtual world of

the iconic Mac ads</p>

28. <a href=‚‚>Watch This</a>

29. </div>

30. <div class=‚artikel‛>

31. <img src=‚images/gambar-artikel.jpg‛ alt=‚Gambar Artikel‛ />

32. <h1> Gates vs Jobs</h1>

33. <b>Feb 12, 2007</b><b>Views : 3,487,497</b>

34. <p>Bill Gates and Steve Jobs square off in the clean white virtual world of

the iconic Mac ads</p>

35. <a href=‚‚>Watch This</a>

36. </div>

37. <div class=‚artikel‛>

38. <img src=‚images/gambar-artikel.jpg‛ alt=‚Gambar Artikel‛ />

39. <h1> Gates vs Jobs</h1>

40. <b>Feb 12, 2007</b><b>Views : 3,487,497</b>

41. <p>Bill Gates and Steve Jobs square off in the clean white virtual world of

the iconic Mac ads</p>

42. <a href=‚‚>Watch This</a>

43. </div>

44. </div>

45.

46.

10.5. Sidebar

Kita lanjutkan dengan pembuatan sidebar, perhatikan apa yang inada di dalam

sidebar.

Gambar 41 Sidebar

Setiap item dalam sidebar memiliki judul. Pertama inada deskripsi singkat tentang

situs, dan sebuah menu navigasi berdasarkan kategori. Sama seperti menu sebelumnya,

kita buat dengan memakai unordered list.

46. <div id=‚sidebar‛>

47. <h2>Who we are?</h2>

48. <p>Ariona.net adlah tempat anda berbagi pengetahuan seputar web design dan web

development serta segala informasi yang berhubungan dengan internet</p>

49.

50. <h2>Artikel berdasarkan kategori</h2>

51. <ul>

52. <li><a href=‚‚>HTML dan CSS</a></li>

53. <li><a href=‚‚>Javascript</a></li>

54. <li><a href=‚‚>Photoshop</a></li>

55. <li><a href=‚‚>Inspirasi</a></li>

56. <li><a href=‚‚>Berita</a></li>

57. <li><a href=‚‚>Off Topic</a></li>

58. </ul>

59. </div>

60.

61.

10.6. Footer

Terakhir, kita buat markup untuk bagian footer.

Gambar 42 Bagian Footer Web

Bagian ini hanya mempunya text copyright, dan saya yakin anda dapat membuat

markup dari bagian footer ini :

61. <div id=‚footer‛>

63. </div>

Mudah bukan? Jika anda merasa bingung bagaimana penulisan kode selengkapnya,

berikut ini kode lengkap dari proses markup kita sebelumnya.

1. <!DOCTYPE HTML>

2. <HTML>

3. <head>

4. <title>Latihan Markup</title>

5. </head>

6. <body>

7. <div id=‚wrapper‛>

8. <div id=‚header‛>

9. <img src=‚logo.png‛ alt=‚logo‛ />

10. <ul id=‚menu-utama‛>

11. <li><a href=‚‚>Home</a></li>

12. <li><a href=‚‚>Tutorial</a></li>

13. <li><a href=‚‚>Video</a></li>

14. </ul>

15. <form>

16. <input type=‚text‛ name=‚search‛ />

17. </form>

18. </div>

19.

20. <div id=‚daftar-artikel‛>

21. <div class=‚artikel‛>

22. <img src=‚images/gambar-artikel.jpg‛

alt=‚Gambar Artikel‛ />

23. <h1> Gates vs Jobs</h1>

24. <b>Feb 12, 2007</b><b>Views : 3,487,497</b>

25. <p>Bill Gates and Steve Jobs square off in the clean

white virtual world of the iconic Mac ads</p>

26. <a href=‚‚>Watch This</a>

27. </div>

28. <div class=‚artikel‛>

29. <img src=‚images/gambar-artikel.jpg‛

alt=‚Gambar Artikel‛ />

30. <h1> Gates vs Jobs</h1>

31. <b>Feb 12, 2007</b><b>Views : 3,487,497</b>

32. <p>Bill Gates and Steve Jobs square off in the clean

white virtual world of the iconic Mac ads</p>

33. <a href=‚‚>Watch This</a>

34. </div>

35. <div class=‚artikel‛>

36. <img src=‚images/gambar-artikel.jpg‛

alt=‚Gambar Artikel‛ />

37. <h1> Gates vs Jobs</h1>

38. <b>Feb 12, 2007</b><b>Views : 3,487,497</b>

39. <p>Bill Gates and Steve Jobs square off in the clean

white virtual world of the iconic Mac ads</p>

40. <a href=‚‚>Watch This</a>

41. </div>

42. </div>

43.

44. <div id=‚sidebar‛>

45. <h2>Who we are?</h2>

46. <p>Ariona.net adlah tempat anda berbagi pengetahuan seputar

webdesign dan web development serta segala informasi yang

berhubungandengan internet</p>

47. <h2>Artikel berdasarkan kategori</h2>

48. <ul>

49. <li><a href=‚‚>HTML dan CSS</a></li>

50. <li><a href=‚‚>Javascript</a></li>

51. <li><a href=‚‚>Photoshop</a></li>

52. <li><a href=‚‚>Inspirasi</a></li>

53. <li><a href=‚‚>Berita</a></li>

54. <li><a href=‚‚>Off Topic</a></li>

55. </ul>

56. </div>

57. <div id=‚footer‛>

59. </div>

60. </div>

61. </body>

62. </HTML>

Agar tidak bingung membedakan penutup div yang satu dengan yang lainya, saya

menambahkan komentar di setiap penutup div. Komentar ini tidak akan ditampilkan

pada browser.

Pembuatan komentar dapat dilakukan dengan menambahkan <!-- dan ditutup dengan

-->contohnya :

Jika anda buka file HTML ini , maka yang akan anda lihat yaitu seperti berikut :

Gambar 43 Tampilan dari Studi Kasus

File HTML yang ditampilkan akan terlihat plain/polos, tidak sama seperti pada desain

web yang diberikan. Tapi inilah tugas dari HTML yakni Markup/Formatting. Adapun cara

kita menampilkan bagian-bagian kode HTML agar terlihat seperti pada desain web yang

diberikan, kita akan memakai CSS dan akan kita pelajari pada Bab CSS.

Bab 11

Validasi Markup HTML

Validasi markup yaitu proses dimana kode HTML kita divalidasi apakah sudah benar

atau belum oleh aplikasi validator dari W3C6. Validasi ini sangatlah diperlukan untuk

memeriksa apakah ada yang salah dengan markup HTML yang telah kita buat atau ada

beberapa bagian yang terlewat seperti penutup tag, atribut dan lain sebagainya.

Sebagian orang berpendapat bahwa markup HTML yang valid akan mempercepat

proses loading website dan lebih bersahabat dengan Search Engine7.

Untuk melakukan validasi, silahkan buka alamat berikut: http://validator.w3.org/. Anda

akan dibawa ke halaman validator HTML dari W3C seperti berikut :

Gambar 44 Validator HTML dari W3C

Ada tiga cara pengujian Markup HTML, yakni dengan mengetikkan alamat file HTML

yang akan diuji (Validate by URL) opsi ini yaitu untuk memvalidasi halaman HTML yang

W3C (World Wide Web Consortium) yaitu komunitas internasional yang bekerja untuk

membangun standar web seperti HTML dan CSS.http://www.w3.org/

7 Search Engineatau mesin pencari yaitu aplikasi untuk mencari berbagai informasi di internet,

seperti Google.com, bing.com dan lain sebagainya.

sudah “online” atau website yang sudah online. Cara kedua yaitu dengan mengupload

file HTML anda (Validate by file upload), dan validator akan memvalidasi kode HTML

yang inada dalam file ini , dan cara terakhir yaitu dengan mengetikkan

langsung kode HTML dan memvalidasinya (Validate by direct input).

Sebagai contoh, kita coba memvalidasi latihan markup yang kita buat sebelumnya

dengan cara “Validate by file upload”. Klik tab “Validate by file upload”, lalu klik Choose

file untuk memilih file HTML dan pilihlah latihan Markup yang telah kita buat pada study

kasus dan Klik tombol Check untuk mulai memvalidasi file HTML kita.

Gambar 45 Validate by FIle Upload

Jika pengujian sukses, maka akan muncul pesan lulus uji markup HTML seperti berikut:

Gambar 46 Hasil validasi markup HTML

Perhatikan, bahwa kita mendapatkan 4 peringatan, coba scroll ke bawah dan anda akan

menemukan peringatan ini (begitu juga dengan error – Jika ada).

Gambar 47 Peringatan validasi

Kesimpulan dari peringatan di atas yaitu kita belum menyertakan informasi character

encoding. Untuk memperbaikinya tambahkan kode berikut di dalam tag head dari file

latihan markup kita.

<head>

<title>Latihan Markup</title>

</head>

Maksud dari tag ini yaitu menentukan tipe karakter encoding yang digunakan

dalam file HTML, dan kita gunakan tipe “UTF-8”. Sekarang kita coba Revalidate

(Memvalidasi ulang) file HTML kita.

Gambar 48 Lulus uji validasi HTML

Sekarang kita telah lolos uji validasi, 1 peringatan yang tersisa yaitu karena validator

file HTML versi 5 dari W3C ini masih berupa eksperimen,so.. it’s not problem and you are

ready for the next level!.

Bab 12

Semantik

Sebuah dokumen HTML tidak lain yaitu kumpulan dari tag-tag HTML dan seperti yang

telah anda ketahui bahwa HTML yaitu bahasa untuk me-markup atau mem-format

suatu dokumen. HTML BUKAN untuk membuat bagaimana dokumen ini

ditampilkan.

Sama halnya dengan aplikasi pengolah kata, formating yang dilakukan pada suatu

dokumen ditujukan untuk memberikan makna-makna tersendiri pada setiap kata-kata

yang di olahnya.

Misalnya, ketika suatu teks ditampilkan miring, biasanya ada makna tertentu pada teks

ini , seperti pada pertanyaan berikut :

‚Berikut ini yaitu tag-tag HTML, kecuali :‛

Kata “kecuali” di sana diberi format miring karena penulis ingin menegaskan bahwa

jawaban yang benar yaitu yang bukan tag HTML. Jika kalimat pertanyaan ini

dibaca, biasanya akan ada perbedaan intonasi pada kata “kecuali”.

Dalam HTML, inada dua tag yang dapat membuat suatu teks miring yakni tag <em>

dan <i>. Lalu apa perbedaan kedua tag ini ?

Jika kita sangkutpautkan pertanyaan ini dengan contoh kasus di atas, penggunaan tag

<em> untuk memiringkan kata “kecuali” yaitu cara yang benar. Mengingat tag <em> ini

memang berfungsi untuk memberikan tekanan pada suatu teks (emphasis). Berbeda

dengan tag <i> yang hanya berfungsi untuk menampilkan teks menjadi miring tanpa ada

makna sama sekali.

12.1. Maksud Semantik dalam HTML

Semantik berarti makna yang terkandung dari suatu kata. Dalam HTML, semantik

berarti makna yang terkandung dari suatu tag HTML. Seperti pada contoh kasus

sebelumnya, penggunaan tag <em> lebih memiliki nilai semantik dari pada tag <i>.

Pada dasarnya, Gunakanlah tag-tag HTML sesuai dengan maksud/fungsi dari tag HTML

ini , Jangan memakai suatu tag HTML karena tag ini memiliki

penampilan berbeda.

Misalnya, penggunaan tag <table>. Tag ini berfungsi untuk membuat suatu tabel atau

data tabular, penggunaan diluar itu yaitu salah, seperti penggunaan tag table untuk

pembuatan layout web.

Untuk mengetahui fungsi dari setiap tag HTML anda dapat membacanya di

http://www.w3schools.com/tags/default.asp.

12.2. Pentingkah Semantik?

Penulisan dokumen HTML yang semantik ditujukan agar dokumen HTML dapat

dipahami oleh komputer, karena pada dasarnya cara berfikir komputer berbeda dengan

cara berfikir manusia.

Manusia bisa memahami suatu dokumen dengan adanya tanda baca, atau formatting

(seperti teks miring tebal). Berbeda dengan komputer, dan pada kasus ini tag-tag HTML

lah yang menjadi tanda baca yang akan membantu komputer untuk memahami

dokumen HTML.

Kembali kepada penting tidaknya semantik, boleh jadi dokumen yang semantik dapat

mempermudah sistem komputer untuk mengolah informasi dalam dokumen untuk

keperluan tertentu, misalnya untuk keperluan Mesin Pencarian (Search Engine) agar

hasil pencarian lebih akurat dan sesuai dengan yang diinginkan.

Bagian II

CSS

Bab 13

Cascading Style Sheet (CSS)

13.1. Pengenalan CSS

CSS yaitu kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik

penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti

menentukan posisi, merubah warna teks atau background dan lain sebagainya.

Perhatikan contoh kode CSS berikut :

Gambar 49 Contoh Kode CSS

Selector

Selector yaitu elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan

langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada

contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang inada

dalam file HTML.

Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID

ini dengan diawali tanda kress (#).

#header

Dan jika tag yang diberi style memiliki Class, maka penulisan selector bisa dilakukan

dengan tanda titik (.) diikuti dengan nama class.

.artikel

Jika anda hanya menuliskan satu selector, seperti contoh kode CSS di atas, maka seluruh

tag h1 yang inada dalam file HTML akan memiliki style yang sama. Bagaimana jika

kita hanya ingin memberi style pada tag h1 yang hanya inada di dalam Class artikel.

Maka penulisan selectornya seperti berikut :

.artikel h1

Kode ini akan memerintahkan pada browser untuk memberi style pada tag h1

yang hanya inada di dalam class artikel (atau - h1 yang merupakan child dari class

artikel).

Anda-pun dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya

ketika anda memiliki dua atau lebih tag dengan warna background yang sama, dari pada

menuliskan kode seperti ini :

h1{ background-color: #666666; }

P { background-color: #666666; }

a { background-color: #666666; }

anda dapat menggabungkan selector dengan menambahkan tanda koma pada nama

tag yang ingin diberi style.

h1, p, a { background-color: #66666; }

Property dan Value

Property yaitu sifat-sifat yang ingin diterapkan pada selector, seperti warna text,

warna background, jarak antar elemen, garis pinggir dan lain sebagainya.

Untuk memberikan nilai/value pada property kita gunakan tanda titik dua ( : ). Setiap

property diakhiri dengan titik koma (;), jika anda tidak mengakhirinya maka browser

tidak akan mengetahui maksud dari property ini .

Property-property pada CSS sangat mudah dimengerti karena lebih mirip bahasa kita

sehari-hari. Misalnya untuk merubah warna text kita gunakan property color, untuk

merubah warna background kita gunakan property background-color, untuk merubah

ukuran huruf kita gunakan property font-size. Mudah dimengerti bukan?

.artikel h1 {

color : red;

background-color : blue;

font-size : 20px;

}

Menurut saya, Kode CSS sangat mudah dimengerti, karena kata-kata yang digunakan

sudah tidak asing lagi, perhatikan contoh kode CSS sebelumnya, jika kita ubah ke

bahasa kita sehari-hari, kira-kira menjadi seperti berikut :

“Hey Brow (Browser) Cari tag h1 yang inada di dalam class artikel, jika

ditemukan/ada, ubah warnanya menjadi merah, warna background menjadi biru dan

ukuran huruf menjadi 20 pixel.”

Cukup perkenalan dengan CSS-nya, lalu yang menjadi pertanyaan besar anda saat ini

yaitu :

“Dimana saya mengetikkan kode ini ?”

13.2. Penulisan CSS

Ada tiga cara penulisan kode CSS, yaitu inline, internal dan external. Ketiganya bisa anda

lakukan sesuai dengan kebutuhan. Berikut contoh penggunaan dari metode-metode

ini :

Inline

Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang

ingin diberi style dengan memakai atribut style.

<h1 style=‚color : red; ‚> Judul Situs </h1>

Pada metode ini, anda tidak perlu menuliskan selector. Karena anda menuliskan CSS

langsung pada tag yang ingin diberi style.

Cara ini sangat tidak dianjurkan, karena Anda akan mencampurkan antara “Format” dan

“Presentasi”. Cara ini juga tidak efektif ketika anda akan melakukan perubahan pada

CSS.

Internal

Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.

<HTML>

<head>

<title>Judul HTML</title>

<style>

h1 {

color : red;

}

</style>

</head>

...

Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda hanya

memiliki satu halaman web.

External

Metode yang terakhir yaitu dengan membuat file CSS dan dipanggil di dalam tag head.

File CSS memiliki ekstensi (akhiran) .CSS misanya namafile.CSS.

Pemanggilan file CSS dilakukan dengan memakai tag link:

<HTML>

<head>

<title>Judul HTML</title>

</head>

...

Atribut rel yaitu informasi hubungan (relationship) dari tag link ini , yaitu sebagai

stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama

dengan pemanggilan gambar atau link.

Bab 14

Box-Model

14.1. Margin

Property margin digunakan untuk memberikan jarak antar elemen/tag HTML. Misalnya

jarak antar <div> dan tag-tag HTML lainnya.

Sebagai contoh, buatlah file HTML baru dengan nama latihan8.html, lalu tambahkan

kode berikut:

Box ke satu

</div>

Box ke dua

</div>

Ingat, tambahkan kode ini pada struktur HTML standar yang memiliki

<!DOCTYPE HTML>, <HTML>,<head> dan seterusnya.

Lalu tambahkan tag style dalam tag head, dan ketikkan kode CSS berikut :

.box{

background-color:green;

color: yellow;

width:100px;

height:100px;

margin-bottom:50px;

}

Berikut yaitu tampilan yang akan anda dapatkan :

Gambar 50Penambahan margin-bottom pada .box

Jarak antar box ke satu dan box ke dua sedikit berjauhan, karena kita menambahkan

margin bawah (margin-bottom) sebesar 50px.

Untuk melihat perbedaan ketika kita memberikan margin atau tidak, anda dapat

menghapus property margin-bottom dan perhatikan perbedaannya.

Anda juga dapat memberikan jarak dari kanan (right), kiri (left) dan atas (top). Misalnya :

margin-top:20px;

margin-right:30px;

margin-bottom:50px;

margin-left:40px;

14.2. Padding

Pada latihan sebelumnya, kita telah memberikan jarak antar elemen HTML dalam

contoh sebelumnya jarak antar <div>, namun coba perhatikan antara text (Box ke x)

dengan garis pinggir kotak, tidak ada jarak sama sekali, merapat ke sisi box ini .

Untuk itu property paddinglah yang akan memberikan jarak antara konten elemen

dengan elemen ini .

Sebagai contoh tambahkan kode CSS berikut, pada class box yang kita buat

sebelumnya:

.box{

background-color:green;

color: yellow;

width:100px;

height:100px;

margin-bottom:50px;

padding-left:20px;

}

Dan sekarang, anda dapat melihat jarak antara

text yang berada di dalam box.

Perlu diperhatikan juga, bahwa ketika kita

menambahkan padding, ukuran .box juga akan

berubah.

Misalnya kita menentukan ukuran lebar dari .box

sebesar 100px. Ketika kita menambahkan

padding-left sebesar 20px, maka total lebar dari

.box ini menjadi 120px.

Jadi jika anda ingin ukuran .box tetap 100px, kita

harus menghitung ulang width dari box ini .

Misalnya kita ubah menjadi 80px. Dengan begitu,

80px + 20px menjadi 100px.

14.3. CSS-Shorthand

Pada pembahasan sebelumnya, bisa kita simpulkan bahwa setiap property dapat

memiliki lebih dari satu jenis, misalnya margin dapat memiliki 4 jenis. margin-top,

margin-right, margin-bottom, dan margin-left.

margin-top:20px;

margin-right:30px;

margin-bottom:50px;

margin-left:40px;

Gambar 51 Pemberian padding pada .box

Daripada menuliskan seluruh property ini , kita bisa memakai CSS-Shorthand

yaitu menggabungkan seluruh value (top, right, bottom, dan left) ke dalam satu

property.

Sebagai contoh, kita akan memakai CSS-shorthand untuk Property margin menjadi

seperti berikut :

margin : 20px 30px 50px 40px;

Masing-masing dari nilai ini yaitu :

margin : top right bottom left;

bisa kita simpulkan bahwa nilai dari CSS-shorthand margin ini memiliki urutan searah

jarum jam dan dimulai dari margin-top.

Kita juga bisa bermain-main dengan property margin ini, perhatikan dengan seksama

contoh berikut:

 Ketika kita memberikan satu nilai pada property margin, ini artinya kita

memberikan nilai ini pada seluruh sisi.

margin: 20px;

Dengan penulisan seperti ini, maka nilai dari margin-top, right, bottom dan left yaitu

20px;

 Ketika kita memberikan dua nilai pada property margin, berarti nilai selanjutnya

mengikuti nilai sebelumnya. Contohnya seperti ini :

margin: 20px 30px;

Pada contoh di atas berarti kita memberikan nilai margin-top dan right bukan?,

nah nilai dari margin-bottom akan disamakan dengan nilai margin-top dan

margin-left sama dengan margin-right.

 Dan ketika kita menuliskan tiga nilai, maka nilai yang tidak diisi akan mengikuti

nilai yang diisi, sama halnya ketika kita memberi 2 nilai.

margin: 20px 30px 40px;

Pada contoh di atas, kita memberikan nilai untuk top, right dan bottom.

Sedangkan untuk left akan disamakan dengan right.

Penggunaan nilai seperti ini juga berlaku pada padding, dan property-property sejenis

lainnya.

14.4. Border

Property border digunakan untuk memberikan garis pinggir pada elemen, setidaknya

ada tiga property yang harus anda set, yaitu color, style dan width.

border-color : black;

border-style : solid;

border-width : 5px;

namun anda juga dapat memakai CSS shorthand sehingga menjadi seperti berikut :

border : width style color;

jadi jika kita ubah contoh kode di atas menjadi CSS-shorthand, kodenya menjadi seperti

berikut :

border : 5px solid black;

Cobalah tambahkan kode ini pada latihan

sebelumnya dan yang akan anda dapatkan yaitu seperti

berikut :

Sama halnya dengan Padding, penambahan property

border juga akan merubah ukuran dari .box.

Jadi, seperti yang saya jelaskan sebelumnya. Ketika anda

Gambar 52 Penambahan border

ingin membuat ukuran lebar .box tetap 100px, maka anda harus menghitung ulang

width dari .box ini .

Kali ini perhatikan bahwa kita memberikan border pada seluruh sisi .box, artinya jika

kita tentukan ukuran border sebesar 5px, maka 10px (untuk width, karena 5px untuk

left, dan 5px untuk right) akan ditambahkan pada ukuran .box ini . Sehingga

ukuran .box berubah kembali menjadi 110px.

Untuk itu kita kurangi width dari .box ini menjadi 70px sehingga : 70px (width) +

20px (padding) + 10px (border) = 100px.

Dalam dunia CSS, kasus seperti ini disebut dengan box-model. inada dua property

yang mempengaruhi ukuran dari sebuah box yaitu padding dan border. Perhatikan

skema box model berikut untuk contoh kasus di atas :

Gambar 53 skema box-model

Tahukah anda, bahwa setiap elemen/tag HTML ditampilkan dalam bentuk

box/kotak, jadi aturan box-model berlaku untuk seluruh elemen HTML

Bab 15

Typography

Secara default (bawaan), halaman web yang kita buat akan memakai font standar

yaitu Times New Roman. Namun anda dapat merubahnya dengan property font-family.

Berikut contoh penggunaan property font-family :

font-family: calibri;

Namun perlu diperhatikan bahwa tidak semua PC memiliki font yang kita tentukan,

misalnya ketika kita menentukan font-family dengan calibri, maka pada PC dengan

sistem operasi Linux, tidak akan ditemukan font-ini .

Untuk itu anda dapat memberikan lebih dari satu jenis font, font-font yang disebutkan

selanjutnya akan menjadi pengganti ketika font sebelumnya tidak ditemukan.

Contohnya :

font-family: calibri, arial, tahoma, verdana, sans-serif;

Ketika font jenis calibri tidak ditemukan, maka yang akan digunakan yaitu arial, ketika

tidak ditemukan font arial maka tahoma yang akan digunakan, begitu seterusnya

sampai kita tentukan jenis font yang dipakai, sans-serif atau serif dan browser akan

memakai font yang sesuai dengan jenis yang disebutkan (serif atau sans-serif).

Ketika nama font memiliki spasi, maka anda harus memberikan tanda

petik/kutip pada nama font ini . Misalnya “segoe ui”.

Apa itu Sans-serif dan Serif

Dalam typography jenis font dibagi menjadi dua yakni serif dan sans-serif. Bagian ini

akan menjelaskan secara singkat perbedaan dari kedua jenis font ini.

Serif

Kata Serif bisa diartikan sebagai kait, jadi jenis huruf serif memiliki kait disetiap ujung

hurufnya. Font jenis serif yang paling terkenal yaitu Times New Roman. Perhatikan

detail hurufnya.

Font jenis ini bisa kita gunakan untuk teks dengan

konteks formal atau gaya klasik. Namun anda dapat

memadupadankan jenis font ini sehingga memberikan

kesan tertentu pada web anda.

Sans-serif

Arti dari sans, yaitu “tanpa”. Jadi sans-serif bisa

diartikan sebagai jenis font tanpa kait. Yang paling

umum digunakan untuk jenis sans-serif yaitu arial.

Jenis ini memberikan kesan dynamis dan luwes. Seperti

saya sebutkan sebelumnya anda dapat membuat kesan

tersendiri ketika memadupadankannya.

Dalam pengaturan browser, kita bisa memilih font untuk serif dan sans-serif. Jadi ketika

font-family memakai serif, maka font yang telah kita pilihlah yang akan digunakan.

Gambar 54 Font jenis Serif memiliki

kait disetiap ujungnya

Gambar 55 Font jenis Sans Serif

Gambar 56 pengaturan font pada browser Google Chrome

Gambar 57 Pengaturan font pada firefox

Untuk menentukan ukuran font, kita gunakan property font-size :

font-size : 12px;

anda juga dapat memakai satuan pt (point) untuk ukuran font :

font-size : 12pt;

font yang kita gunakan pun dapat ditentukan ketebalannya dengan memakai

property font-weight. Nilai yang bisa dipakai pada property ini yaitu normal, bold,

bolder.

font-weight : bold;

Bukan tidak mungkin untuk mengatur kerning atau jarak antar huruf. Dalam CSS kita

bisa merubah jarak antar huruf dengan property letter-spacing.

letter-spacing : 15px;

Semakin besar nilai pixel yang diberikan semakin jauh jarak antar huruf. Andapun dapat

memakai nilai negatif untuk memperdekat jarak antar huruf.

letter-spacing :-2px;

Sedangkan untuk memberikan jarak antar baris, kita gunakan property line-height.

line-height : 30px;

Dan untuk membuat text menjadi rata kiri, tengah atau kanan, kita gunakan property

text align. Nilai yang dapat digunakan yaitu left, center, right, dan justify untuk rata

kiri-kanan.

text-align : center;

Cobalah untuk bemain-main dengan property ini dan perhatikan perubahan yang

didapatkan. Buatlah file latihan9.html, isi dengan beberapa paragraf beserta headingnya

dan terapkan property-property yang telah anda pelajari di atas.

Bab 16

CSS-Image

Sebenarnya, berbicara tentang image dalam CSS, maka kita sedang membicarakan

background-image. Bagaimana memakai sebuah gambar menjadi background

untuk suatu elemen. Pada bagian ini anda akan mempelajari penggunaan background-

image, teknik sprite, dan background-repeat.

16.1. background-image

Untuk memanggil gambar sebagai background dari elemen, kita gunakan property

background-image. Perhatikan contoh penggunaan property ini :

background-image : url (‚images/background.jpg‛);

Ketika anda memakai gambar dengan ukuran kecil maka anda akan melihat

background ditampilkan secara berulang untuk memenuhi seluruh element ini .

Untuk percobaan buatlah file latihan10.html dan selanjutnya buatlah sebuah div, dan

menentukan ukuran width dan heightnya.

Dan tambahkan style/CSS seperti berikut :

#box{

width : 300px;

height :300px;

background : url(logo2.png);

}

Gambar 58 Background akan terus diulang untuk memenuhi ukuran elemen

16.2. background-repeat

Pengulangan gambar background ini bisa kita atur dengan memakai

property background-repeat. Anda bisa mengulang gambar secara horizontal (sesuai

sumbu x) atau secara vertikal (y) atau anda pun dapat tidak mengulangi background

ini .

background-repeat : repeat-x;

Gambar 59 Repeat X akan mengulang background secara horizontal

background-repeat : repeat-y;

Gambar 60 Pengulangan background secara vertical dengan repeat-y

background-repeat : no-repeat;

Gambar 61 Background tidak diulang

16.3. background-position

Posisi gambar background dapat kita tentukan letaknya dengan menentukan jarak x

(horizontal) dan y (vertical).

Sebagai contoh, kode berikut akan menggeser background-image sebesar 50px dari kiri.

background-position-x : 50px;

Gambar 62 background bergeser selebar 50px dari kiri

Dan contoh berikut akan menggeser background-image sebesar 50px ke bawah.

background-position-y : 50px;

Gambar 63 Background turun 50px dari posisi sebelumnya

Andapun dapat memakai CSS-shorthand untuk background-position :

background-position : nilaiX nilaiY;

misalnya

background-position: 50px 50px;

Gambar 64 posisi background ada pada 50px dari kiri dan atas

16.4. Image Sprite

Dengan adanya property background-position untuk menentukan lokasi penempatan

gambar, kita dapat bermain-main dengan image-sprite. Image Sprite yaitu

sekumpulan gambar berbeda yang disatukan dalam satu file gambar.

Gambar 65 contoh Image sprite

Teknik ini dilakukan untuk mempercepat loading website tanpa harus memanggil

beberapa file gambar yang banyak. Cukup satu gambar dan kita tentukan lokasi gambar

yang ingin ditampilkan.

Buatlah file baru dengan nama file latihan11.html dan ketikkan markup HTML seperti

berikut :

Lalu tambahkan style CSS berikut :

#button {

width:240px;

height:83px;

background-image : url(sprite.jpg);

background-position-y : 0;

}

#button:hover{

background-position-y : -83px;

}

Style ini akan mengabil gambar yang inada di posisi x, 0 dan posisi y turun

83px. Sehingga gambar yang ditampilkan yaitu bagian berikut :

Gambar 66 Hanya sebagian gambar yang ditampilkan

Lalu apa maksud dari selector #button:hover? :hover yaitu salah satu Pseudo Class,

saya akan membahasnya di bab selanjutnya.

Contoh penggunaan Image sprite ini banyak diimplementasikan pada beberapa situs

besar seperti Google atau facebook, berikut ini yaitu image sprite untuk icon-icon yang

ada dalam google plus.

Gambar 67 Image Sprite Google Plus

Bab 17

Floating

Jika sebelumnya untuk mengatur text/paragraf rata kanan atau kiri kita memakai

property text-align, namun bagaimana jika yang ingin kita atur rata kiri atau rata kanan

yaitu elemen HTML?

Untuk itu kita dapat memakai property float. Nilai yang digunakan yaitu left dan

right. Pehatikan contoh pada latihan12.html berikut dan perhatikan apa yang terjadi :

Buatlah markup HTML seperti berikut :

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue

massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet

commodomagna eros quis urna.</p>

Lalu tambahkan CSS berikut :

img {

float: left;

}

Style diatas akan meratakirikan elemen gambar dan membuat paragraf naik keatas.

Gambar 68 Penambahan Float akan mempengaruhi element disekitarnya.

17.1. Permasalahan pada floating

Ada satu permasalahan ketika anda menambahkan floating pada suatu elemen,

permasalahan ini bisa anda temui pada contoh kasus dalam file latihan13.html berikut.

Buatlah markup HTML seperti berikut :

1. <div id=‚wrapper‛>

2. <div id=‚header‛></div>

4. <div id=‚content‛>

5. <div id=‚artikel‛></div>

6. <div id=‚sidebar‛></div>

7. </div>

9. <div id=‚footer‛></div>

10. </div>

Lalu berilah style berikut :

1. #wrapper{

2. width : 960px;

3. margin : 0 auto; /*agar wrapper tetap berada ditengah */

4. }

5. #header {

6. width:100%;

7. height:50px;

8. background: orange;

9. margin-bottom: 10px;

10. }

11. #content{

12. padding:20px;

13. background : green;

14. margin-bottom : 10px;

15. }

16. #artikel{

17. width : 600px;

18. height : 700px;

19. float : left;

20. background: orange;

21. }

22. #sidebar {

23. width : 300px;

24. height: 200px;

25. float : right;

26. background: orange;

27. }

28. footer{

29. width : 100%;

30. height: 50px;

31. background: green;

32. }

Jika anda buka dalam browser, maka tampilan yang akan dapat yaitu seperti ini.

Gambar 69 Permasalahan ketika anda menerapkan Floating

Ada yang janggal? Ya.. #content tidak memenuhi isi dari #artikel dan #sidebar. Seharusnya

tinggi #content otomatis sama dengan tinggi dari elemen tertinggi di dalamnya, dalam

kasus ini yaitu artikel dengan tinggi 700px. Dengan begitu seharusnya tinggi dari

#content yaitu 740px (ditambah dengan padding-top dan padding-bottom). Jika anda

tidak mengerti cobalah untuk membuang property float yang ada, dan perhatikan

bahwa #artikel dan #sidebar berada di dalam #content.

Hal ini dikarenakan kita menambahkan floating pada #artikel dan #sidebar, sehingga

#contentmenganggap tidak ada element didalamnya. Ada dua cara untuk menyelesaikan

kasus ini :

1. Menambahkan style overflow:hidden pada #content

#content{

…

overflow:hidden;

}

2. Menambahkan div kosong dengan style clear:both; sebelum penutup content

…

</div>

Float berarti melayang. Ketika kita memberikan float pada elemen maka

elemen ini seolah-olah melayang dan elemen di atasnya (parent)

menganggap tidak ada elemen didalamnya (child).

Gambar 70 Penyelesaian masalah Float

17.2. CSS Reset

Pernahkah anda bertanya darimana warna link dari tag <a> berasal, atau mengapa tag

<b> bisa menebalkan teks, atau kenapa tag <h1> sampai tag <h6> memiliki ukuran font

yang berbeda-beda dan ketebalan yang berbeda? Padahal kita sama sekali belum

menambahkan CSS pada markup yang kita buat?

Setiap browser memiliki Style atau File CSS yang akan diterapkan pada setiap halaman

web yang dibuka. Keberadaan style yang dimiliki browser ini sangat membantu namun

terkadang juga membingungkan bagi sebagian orang.

CSS Reset berfungsi untuk mereset atau mengatur ulang seluruh property-property

yang telah disetting oleh browser, seperti margin, padding, warna huruf (link) ukuran

huruf heading dan lain sebagainya. Perhatikan CSS contoh berikut :

* {

margin:0;

padding:0;

}

Selector bintang (*) digunakan untuk memberikan style pada Seluruh elemen/Tag HTML.

Dalam kasus ini, kita akan mengatur ulang margin dan padding menjadi 0 pada seluruh

elemen HTML yang ada.

Bab 18

Positioning

Dalam CSS kitapun dapat memposisikan (Positioning) elemen sesuai kehendak kita. Hal

ini membuat desain web dengan CSS lebih fleksibel karena kita bisa menempatkan

elemen-elemen HTML sesuai dengan keinginan kita atau tuntutan desain web.

18.1. Static

Secara default, seluruh elemen/tag HTML memiliki positioning static. Artinya anda

belum bisa/tidak dapat menentukan posisi elemen ini . Ketika anda ingin merubah

posisi dari elemen ini maka anda harus memberikan position:relative dan

selanjutnya anda dapat memakai property top, right, bottom, dan left untuk

menentukan posisi elemen yang bersangkutan.

Sebagai contoh perhatikan kode HTML dan CSS berikut :

Berikut kode CSSnya.

#box{

width : 300px;

height : 300px;

}

Ketika anda tidak memberikan nilai pada property position, maka secara default, #box

memiliki position:static, jadi anda tidak dapat memakai property top, right, bottom

dan left untuk menentukan posisi #box ini :

#box{

background : green;

width : 300px;

height : 300px;

top : 100px;

left : 200px;

}

Gambar 71 Box static tidak dapat ditentukan posisinya

18.2. Relative

Sekarang cobalah untuk menambahkan position:relative pada #box dan perhatikan

bahwa box ini bergeser 100px dari atas dan 200px dari kiri.

#box{

background : green;

width : 300px;

height : 300px;

top : 100px;

left : 200px;

position:relative;

}

Gambar 72 Penambahan position relative memungkinkan penempatan box

18.3. Absolute

Penambahan position:absolute akan membuat elemen ini terlepas dari aturan

penempatan elemen dan dibatasi oleh parent yang memiliki positioning relative. Sulit

memahami apa yang saya tulis diatas, kita langsung ke contoh kasus.

Buatlah markup HTML seperti berikut :

</div>

Lalu berilah style seperti berikut :

#box{

width:300px;

height:300px;

background:green;

}

#box2{

width:50px;

height:50px;

background:yellow;

}

Gambar 73 Child elemen akan berada di dalam parentnya

#box2 secara aturan ditampilkan berada di dalam div #box, anda dapat terlepas dari

aturan ini dengan menambahkan positioning absolute. Sekarang tambahakan

position:absolute dan tentukan property bottom dan right.

#box2{

width:50px;

height:50px;

background:yellow;

position:absolute;

bottom:0;

right:0;

}

Gambar 74 #box2 akan terlepas dari parent ketika ditambahkan position absolute

#box2 akan terlepas dari aturan penempatan elemen (keluar dari #box) dan berada di

kanan bawah browser. Untuk membatasi pergerakan dari #box2 yang memiliki

positioning absolute, maka kita harus menambahkan positioning relative pada

parentnya yakni #box.

#box{

width:300px;

height:300px;

background:green;

position:relative;

}

Gambar 75 Posisi absolute position dapat dibatasi oleh oleh elemen denga posisi relative

Sekarang #box2 berada di kanan bawah parentnya #box. Andapun dapat bermain

dengan nilai negative untuk mendapat efek tertentu.

#box2{

width:50px;

height:50px;

background:yellow;

position:absolute;

bottom:-25px;

right:20px;

}

Gambar 76 Pengaturan posisi dengan absolute

Perhatikan contoh penggunaan absolute position yang sering ditemukan di internet

berikut :

Gambar 77 Contoh Kasus penggunaan Absolute Position

Perhatikan contoh berikut tombol untuk sharing via facebook atau twitter dan nomor

posting ditampilkan berjajar seacara vertical dan setengah keluar dari kotak artikel.

Sulit memahami Relative-Absolute? Bayangkan “Relative” sebagai sangkar bagi

“Absolute”, oleh karena itu pergerakan “Absolute” dibatasi oleh “Relative”.

18.4. Fixed

Sifat dari position fixed hampir sama dengan absolute, namun posisi dari elemen fixed

akan tetap berada posisi yang ditentukan walaupun browser dizoom-in/out atau

discrollke atas atau ke bawah.

Perhatikan contoh kode HTML dan CSS berikut :

CSS :

#social{

width:30px;

height:100px;

position:fixed;

left:0;

top:100px;

}

Berikut ini yaitu contoh penggunaan position:fixed yang sering ditemui di internet.

Gambar 78 Contoh Kasus “Jadul” penggunaan fixed position

Bagian Sign Up di situs kaskus.co.id memakai position fixed sehingga ketika anda

men-scroll halaman web, bagian ini tetap berada disana.

Bab 19

Pseudo-Class

Pseudo Class digunakan untuk memberikan efek-efek tertentu pada selector. Misalnya

efek ketika cursor berada di atas suatu elemen (hover), ketika cursor meng-klik suatu

elemen dan lain sebagainya.

Berikut yaitu cara penulisan pseudo class :

selector:pseudo-class { property:value; }

Misalnya kita akan menambahkan pseudo-class :hover pada sebuah link

a:hover {

color : red;

}

Style ini akan memberikan efek perubahan warna link menjadi merah ketika

cursor berada di atasnya.

Gambar 79 Pseudo-Class :hover memberikan efek ketika cursor berada di atas elemen

19.1. Pseudo-Class untuk Link/Anchor

Ada beberapa pseudo-class untuk anchor/link yakni :

/* untuk link yang belum di klik */

a:link { color: blue; }

/* untuk link yang sudah di klik */

a:visited { color:green; }

/* ketika cursor berada di atas link */

a:hover { color:red; }

/* ketika link dalam keadaan aktif atau terpilih */

a:active { color: orange; }

Perhatikan juga urutan ketika penulisan semua pseudo class ini (Jika anda

bermaksud menuliskan seluruh pseudo class untuk link):

 :hover harus ditulis sesudah :link dan :visited

 :active harus ditulis sesudah :hover.

Jika tidak demikian maka efek ini tidak akan berjalan dengan baik.

Pseudo Class :hover dan :active tidak hanya bisa digunakan untuk link saja melainkan bisa

diterapkan pada elemen/tag-tag HTML lainnya. Masih ingat dengan demonstrasi Image

Sprite pada bab sebelumnya?

19.2. Pseudo-Class :first-child dan :last-child

Selain pseudo-class untuk link/anchor ada juga pseudo class :first-child dan :last-child.

Keduanya digunakan untuk memilih elemen pertama dan terakhir dari suatu selector.

Misalnya kita mempunyai sebuah unordered list (ul), dengan beberapa list-item di

dalamnya. Kita bisa memberikan style khusus untuk list-item yang pertama dan yang

terakhir dengan memakai :first-child dan :last-child.

<ul>

</ul>

Dan Jika kita tambahkan style berikut :

ul li:first-child{

color:green;

}

ul li:last-child{

color:orange;

}

Maka yang akan kita dapatkan yaitu tampilan seperti berikut :

Gambar 80 Pemberian pseudo class :first-child dan :last-child

List-item yang pertama akan memiliki warna huruf hijau dan yang terakhir memiliki

warna orange. Tidak hanya pada unordered list, andapun dapat menerapkannya pada

deretan elemen lainnya. Misalnya elemen p yang inada dalam suatu div.

<div>

<p> Paragraf pertama </p>

<p> Paragraf kedua </p>

<p> Paragraf ketiga </p>

<p> Paragraf keempat </p>

</div>

Bab 20

StudiKasus 2 – Pemberian Style/CSS

Pada studi kasus sebelumnya, anda telah membuat markup HTML dari sebuah desain

web sederhana. Hasil yang didapatpun terasa polos, tidak menarik dan yang terpenting

tidak sama dengan desain web yang diinginkan.

Pada bagian ini kita akan belajar menambahkan style/CSS pada file studi kasus yang kita

buat sebelumnya.

Gambar 81 Markup HTML tanpa CSS

Pertama-tama, buatlah file CSS baru dengan nama style.css, simpan di folder yang sama

dengan lokasi file HTML.

Gambar 82 Penempatan file latihan

Lalu tambahkan tag link untuk memanggil file style.CSS pada bagian header.

<head>

<title>Latihan Markup</title>

</head>

20.1. CSS Reset

Pertama-tama kita atur ulang margin dan padding agar tidak memakai style

bawaan dari browser, dan kita tentukan jenis font standar yang akan kita gunakan.

margin:0;

padding:0;

font-family:calibri, ‚segoe ui‛, arial, tahoma, sans-serif;

}

20.2. Body

Dasar background dari desain web berwarna abu-abu, jadi kita tentukan warna ini

pada tag body:

body{

background-color:#DDDDDD;

}

20.3. Wrapper

Kita mulai dari wrapper. Seperti saya jelaskan sebelumnya, kita membutuhkan sebuah

div untuk menampung seluruh isi situs karena kita akan membuatnya menjadi rata

tengah. Jadi meskipun browser di zoom-in atau di zoom-out, konten tetap berada di

tengah

#wrapper{

width : 780px;

margin: 0 auto;

overflow: hidden;

}

Margin: 0 auto, akan memberikan jarak dari atas sebesar 0, dan untuk sisi kiri-kanannya

kita beri nilai auto sehingga membuat div ini berada di tengah.

Gambar 83 Kontent tetap berada ditengah meski di-zoom-in atau zoom-out

Pemberian nilai 780px untuk width bukan tanpa alasan, ini dikarenakan rata-rata

pengguna internet didunia memakai layar dengan resolusi minimal 1024x768px

jadi lebar dari situs kita berada pada ukuran aman meskipun resolusi layar yang

digunakan minimal.

Sebenarnya ukuran lebar minimal standar dari sebuah desain web yaitu 960px namun

karena pada desain lebar dari web sebesar 780px maka kita gunakan nilai ini.

Penambahan overflow:hidden karena kita akan menambahkan floating pada daftar-artikel

dan sidebar. (Baca kembali : Floating)

20.4. Header

Pada bagian header, kita akan memakai gambar yang telah saya siapkan,

ukuran lebar gambar hanya 10px namun dengan metode pengulangan/repeat-x

kita akan mendapatkan tampilan yang sama dengan yang ada di dalam desain.

Gambar 84 Hasil akhir dari Head

#header{

background: url(images/header.jpg) repeat-x #555;

height : 70px;

width : 100%;

padding:5px;

margin : 20px 0;

overflow : hidden;

}

#header img{ width:130px ; height:35px ; }

Kita memakai n

Html css 1

Diposting oleh kromx.blogspot.com

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form

Advertisement

Html css 1

Diposting oleh kromx.blogspot.com

Anda mungkin menyukai postingan ini

ARTICLE

Comments

ABOUT

ARCHIVE

FOLLOW US

Social Plugin

TRANSLATE

VIEWER

SEARCH

Subscribe Us

Facebook

Privacy Policy for DARKWEBSITEXX.blogspot.com

Log Files

Google DoubleClick DART Cookie

Our Advertising Partners

Privacy Policies

Third Party Privacy Policies

Children's Information

Online Privacy Policy Only

Consent

Terms and Conditions

Cookies

License

Hyperlinking to our Content

iFrames

Content Liability

Reservation of Rights

Removal of links from our website

Disclaimer

Contact form