diktat pengenalan html dan css

8/17/2019 Diktat Pengenalan HTML Dan Css

1/281

1

PENGENALAN HTML & CSS

DIKTAT KULIAH

Oleh :

Beki Subaeki, M. Kom

PROGRAM STUDI TEKNIK INFORMATIKA

UNIVERSITAS SANGGA BUANA YPKP BANDUNG

2014


2/281

2

KATA PENGANTAR

Dengan mengucap syukur kepada AllahSWT, akhirnya Diktat ini dapat terselesaikan.Diktat ini dipergunakan sebagai panduan untukbelajar tentang HTML & CSS. Secara garis besarDiktat ini menyajikan konsep dan implementasisintak sintak HTML dan CSS. Dengan demikian,diharapkan materi – materi yang dibahas dapat

membantu pembaca dalam pembuatan web yang lebih baik.

Penulis menyadari dalam penulisanDiktat ini masih ada kekurangan oleh karenaitu penulis mengharapkan sumbangsihpemikiran pembaca untuk kritik dan sarannyadengan melayangkan ke email :[email protected]

Akhir kata, semoga Diktat ini menjadireferensi pembaca untuk mempelajari tentangHTML dan CSS.

Bandung, 30 Maret 2014

Penulis


3/281

3

DAFTAR ISI

PRAKATA ...... Error! Bookmark not defined. DAFTAR ISI .................................................3

BAB I Pengenalan HTML ............................. 1HTML .........................................................1Halaman Web Pertama Anda........................1

Tips .............................................................4Informasi Tag HTML Dasar ..........................5

Tag-Tag Penutup - ............................6Perintah Tag HTML - Penting! ......................7Kesimpulan & Review ..................................8Latar Belakang Singkat HTML ................... 12Element - Element HTML ........................... 13

Tips ........................................................... 18

BAB II SINTAK HTML ................................ 19Atribut-Atribut - HTML .............................. 22Atribut Kelas atau ID - HTML..................... 23Nama Atribut - HTML ................................ 24Atribut Default........................................... 27Atribut-Atribut yang Umum ....................... 28

Tips ........................................................... 29 Tag Paragraf

........................................ 30Heading 1:6 - HTML ................................... 34

Tips ........................................................... 36Aturan Garis Horizontal HTML ................... 39Daftar Terurut (Ordered Lists) HTML ......... 41Daftar Tidak Terurut HTML ....................... 43


4/281

4

Tag-Tag Elemen-Elemen Pemformatan Kata -HTML ........................................................ 46

Tebal, Miring, dan Lain-lain ....................... 47Penggunan Tag Pemformatan - HTML ........ 48

Tips ........................................................... 48Sistem Pengkodean Warna HTML – Nama-Nama Warna .............................................. 4816 Warna-Warna Dasar: ............................ 49Sistem Pewarnaan HTML - Heksadesimal... 50Nilai Warna Heksadesimal: ........................ 53Font dan Basefont - HTML ......................... 53Ukuran Font .............................................. 54Font Size: .................................................. 54Warna Font................................................ 54

Jenis Font: ................................................ 56Mengatur Dasar Font yang Tetap ............... 56Font Dasar (Base): ..................................... 57

Tinjauan Atribut ........................................ 57Atribut-Atribut: .......................................... 57 Tips ........................................................... 58Hypertext Reference (href) - HTML.............. 59Links Teks HTML ...................................... 60Kode HTML: ............................................... 60

Target Link - HTML .................................... 61 Jangkar (Anchors) - HTML ......................... 62

Link Email - HTML .................................... 64Link Download - HTML .............................. 65Entitas Karakter HTML .............................. 66Ruang Tambahan dan . .......................... 67Kode HTML: ............................................... 67

Tips ........................................................... 68Image / Gambar - HTML ............................ 71Atribut Alternatif - HTML ........................... 74


5/281

5

Tinggi dan Lebar Gambar - HTML .............. 74Perataan Gambar Secara Vertikal dan

Horizontal .................................................. 75Gambar Sebagai Link................................. 77

Thumbnails ............................................... 78Gifs lawan Jpegs HTML.............................. 78

Tips ........................................................... 79Link Gambar - HTML ................................. 80Form-Form HTML ...................................... 81Field Teks .................................................. 81Form Email HTML ..................................... 83

Tombol Radio HTML .................................. 85Kotak Cek (Check Boxes) HTML ................. 86Drop Down List HTML ............................... 87Form Pilihan (Selection Forms) HTML ........ 88Form Upload HTML.................................... 90Area Teks (Text Areas) HTML ..................... 91

Tips ........................................................... 94 Tabel HTML ............................................... 94Menggabungkan Beberapa Baris & Kolom .. 95Lapisan Sel dan Spasi (Cell Padding andSpacing)..................................................... 96

Tips ........................................................... 99Warna – bgcolor HTML ............................... 99Menambahkan Warna ke Tabel Anda ....... 101

Tips ......................................................... 104Latar belakang Gambar HTML ................. 105Latar belakang Gambar Berulang HTML .. 106Latar belakang Gambar yang Dipolakan .. 107Latar belakang Gambar Transparan......... 109

Tips ......................................................... 110Peta Warna HTML .................................... 110Frame HTML ............................................ 112


6/281

6

Frame – Sebuah Halaman Frame Umum .. 112Menambahkan Banner atau Judul Frame 114

FrameBorder dan FrameSpacing .............. 115Frame Name dan Frame Target ................ 116Noresize dan Scrolling .............................. 117

Tips ......................................................... 119Layout - HTML ......................................... 119Layout Standar - HTML ........................... 120

Tips ......................................................... 124 Tag Meta HTML ....................................... 129Kata Kunci Tag Meta ................................ 129

Tag Meta Description ............................... 131 Tag Meta Revised ..................................... 131Refresh Page dan Redirect ........................ 132

Tips ......................................................... 133Skrip HTML ............................................. 134Kode Javascript HTML ............................. 134

Bagaimana Cara VBscript HTML .............. 135Kode Musik HTML ................................... 136Embed HTML ........................................... 137Atribut-Atribut Embed Tampilan.............. 138Atribut - Atribut Embed – Berkenaan denganFungsional ............................................... 139

Tips ......................................................... 140Kode Video - HTML .................................. 140

HTML - Video Media Types ....................... 142Atribut-Atribut Embed HTML ................... 142Video Google - HTML ............................... 143Body - HTML ........................................... 146Margins Body - HTML .............................. 146

Teks Dasar - HTML .................................. 147Link Dasar - HTML .................................. 147Elemen Div - HTML .................................. 148


7/281

7

Layout Div - HTML ................................... 149 Tips ......................................................... 152

Preformatting - HTML ...................... 152

BAB III CSS ............................................ 155CSS (Cascading Style Sheets) ................... 155Yang Harus Diperhatikan ........................ 156Selector CSS ............................................ 156Nama Selector CSS .................................. 157List CSS................................................... 158

Tipe Gaya List CSS .................................. 158List CSS Dengan Gambar ........................ 159Posisi List CSS ......................................... 160List: Semua dalam Satu ........................... 161CSS Internal ............................................ 163Pembuatan Kode CSS Internal ................. 164CSS Internal yang Harus Diketahui ......... 166

CSS External ........................................... 167Pembuatan File ........................................ 168Mengapa Menggunakan CSS External? .... 170CSS Inline ............................................... 170CSS Inline – Sebuah Atribut HTML .......... 171Kesalahan Yang Umum Pada CSS Inline .. 172Kelas CSS ................................................ 173Format dari Kelas .................................... 174

Latar belakang CSS ................................. 177Latar belakang Warna CSS ...................... 178Latar belakang Gambar CSS .................... 179Latar belakang Gambar Berulang ............ 180Latar belakang Gambar Tetap CSS .......... 182Latar belakang Gambar Gradien CSS ....... 185Font CSS ................................................. 187Warna Font CSS ...................................... 188


8/281

8

Font Family CSS ...................................... 189Ukuran Font CSS .................................... 190

Font Style CSS ......................................... 191Font Weight CSS ...................................... 192Font Variant CSS ..................................... 193

Text CSS .................................................. 194Decoration Text ....................................... 195Indent Text .............................................. 196Align Text ................................................ 196

Transform Text ........................................ 197White Space CSS ..................................... 198Word Spacing CSS ................................... 199Letter Spacing CSS .................................. 200Padding CSS ............................................ 201Padding CSS: 1 Nilai ................................ 202Padding CSS: padding-(arah): .................. 203Padding CSS: 2 & 4 Nilai.......................... 204

Margin CSS ............................................. 206Margin CSS: 1 nilai .................................. 208Margin CSS: margin-(arah): ..................... 208Margin CSS: 4 Nilai.................................. 210Border CSS .............................................. 212

Tipe-Tipe Style Border .............................. 212Lebar Border ............................................ 214Warna Border .......................................... 215

Border: border-(arah) ............................... 216Border: All in One .................................... 218Link CSS (Pseudo-classes) ....................... 219Anchor/Link States CSS .......................... 220Pseudo-Classes CSS ................................ 221Menghilangkan Default Garisbawah......... 222Sepasang Contoh ..................................... 223Kursor Mouse CSS ................................... 226


9/281

9

Kursor Ikon CSS ...................................... 226Kode Kursor CSS ..................................... 227

Properti CSS ............................................ 229Properti Font CSS .................................... 229Properti Text CSS..................................... 230Properti Box CSS ..................................... 230Properti Warna CSS ................................. 231Properti Background CSS ........................ 231Properti Klasifkasi CSS ............................ 232Posisi CSS ............................................... 233Posisi Relatif ............................................ 233Posisi Absolut .......................................... 234Layer (Lapisan) CSS ................................. 236Float CSS ................................................ 239Gambar Mengapung ................................ 239Floating Multiple Images .......................... 242Class vs ID CSS ....................................... 243

Apakah sebuah Selector ID? .................... 243ID Untuk Layout dan Keunikan ............... 245 Jawaban: Class vs ID ............................... 246Display (Tampilan) CSS ........................... 247Menampilkan Block and Inline ................. 247Display None (Hidden/Sembunyi) ............ 249

DAFTAR PUSTAKA ................................. 253

GLOSARIUM ............................................ 255INDEKS .................................................. 263


10/281

Kupas Tuntas HTML & CSS

1

BAB I

PENGENALAN HTMLHTML (Hyper Text Markup Language)

Dalam tutorial ini anda akan menuliskan kodedalam notepad dan kemudian menampilkannyapada sebuah web browser. Kode ini disebut

HTML (Hyper Text Markup Language) dannotepad adalah teks editor yang seringdigunakan dalam komputer berbasis Windows.Pada tutorial Diktat ini akan menolong andamembuat halaman web pertama anda.

Halaman Web Pertama Anda

Untuk memulai tutorial kopikan kode HTML dibawah ini ke notepad. Pastikan menyalin kodedengan tepat, jika tidak halaman web anda bisa

jadi tidak berfungsi secara benar.

Kode HTML:

Halaman Web Pertama Saya!


11/281


2

Kode di atas adalah semua yang dibutuhkanuntuk membuat sebuah halaman web yangdasar! Sekarang simpan file anda dalamnotepad dengan memilih Menu dan kemudianSave. Klik pada kotak drop down Save as Type dan pilih pilihan All Files.

Ketika diminta untuk memasukan nama fileanda, ketikkan “index.html”, tanpa tanda kutipdua. Perhatikan dengan seksama segala hal

yang anda lakukan dan kemudian tekan save.Ingat-ingat dimana anda menyimpan filetersebut karena anda akan membuka filetersebut,segera!

Menampilkan Halaman Web Anda - Web

Browsers

Untuk menampilkan halaman web, andatentunya harus menggunakan sebuah webbrowser. Web browsers adalah program yang

menginterpretasikan HTML, Seperti yang telahanda salin ke notepad, dan mengubah kodepada representasi visual, atau sebuah halamanweb. Yang termasuk web browser yang umumadalah:

Internet Explorer


12/281


3

Firefox

Opera

Netscape Navigator

Menampilkan Halaman Anda

Untuk mengampilkan halaman web anda, andaharus membuka file “index.html” dalam sebuahweb browser. Bukalah sebuah window browser

dan kemudian ikuti langkah-langkah di bawahini:

1. Dalam sebuah jendela browser, pilih Filekemudian Open.

2. Kemudian klik Browse untuk masuk keWindows Explorer.

3.

Anda ingat file anda? Bagus, kemudianarahkan ke lokasinya.4. Ketika anda menemukan file anda,

index.html, klik dua kali untukmembukanya dalam web browser anda.

Sukses! Anda baru saja menampilkan Halamanweb pertama anda.

Jika itu tidak berjalan sesuai dengan keinginananda, silakan lakukan lagi langkah-langkahtersebut di atas dan ikuti petunjuk dengancermat.


13/281


4

Tips

Crimson editor, program seperti notepad tapimemiliki fasilitas yang lebih banyak yang tidakterdapat pada notepad. Seperti fasilitas:pengecekan ejaan, penandaan kode,kemampuan untuk membuka beberapa file, danlebih banyak lagi fasilitas yang rumit lain.Mudah untuk instalasinya dan gratis untuk di

download! Kunjungi sajawww.crimsoneditor.com (tetapi menggunakannotepad juga bagus)

Anda mungkin pernah dengar FrontPage,Dreamweaver, dan program-program WYSIWYG(What You See Is What You Get / Apa yangkamu lihat adalah apa yang kamu dapatkan).

Program-progam ini menurut saya akanmembuat anda membuat halaman dengancepat, anda sebaiknya cepat mempelajariprogram-program tersebut karena ada banyakkeuntungan untuk mengetahui bagaimanamembuat kode HTML dalam program tersebut.Membuat efek kode HTML bisa dilakukan secaramanual.

Pernahkah anda ingin mengtahui bagaimanaseorang desainer halaman web membuat kode

yang kelihatannya mengagumkan? Anda bisamelihat sebuah sumber halaman web (HTML)dan jika anda ingin tahu HTML anda akanmengerti bagaimana mereka membuatnya. Pada

http://www.crimsoneditor.com/http://www.crimsoneditor.com/


14/281


5

setiap browser, pilih perintah view, pilih kebawah dan kemudian pilih „view source‟ untuk

melihat kode HTML halaman web yang sedanganda tampilkan.

Halaman Web Kedua Anda

Sekarang anda sudah membuat halaman webpertama anda, marilah kita meneliti perbedaan

bagian-bagian file “index.html”. anda mungkinmemperhatikan sebuah pola dari berbagai kata

yang dimulai dengan tanda < dan >. Item-itemtersebut dinamakan tag-tag HTML.

Contoh sebuah tag html adalah . TagBody merintahkan browser untuk meletakanawal dari isi halaman. Body juga merupakansebuah contoh dari satu tag HTML yangdibutuhkan yang mana setiap halaman webharus terdapat tag tersebut.

Informasi Tag HTML Dasar

Marilah kita belajar lebih tentang tag-tag

berikut. Sebuah halaman web yang dasar terdiridari 2 tag utama. Jika anda membuat sebuahhalaman web tanpa tag berikut maka anda akanmendapatkan masalah!


15/281


6

Kode HTML:

Isi Web anda ada diletakan disini!

Tag HTML Pertama, yang dinamakan memerintahkan browser bahwa kode HTMLanda dimulai. Tag HTML kedua, mengatakan kepada browser bahwa bagian yangterlihat dari halaman web (isi web anda)dimulai.

Tag-Tag Penutup -

Anda mungkin ingin tahu apa kegunaan daridua tag di akhir yaitu, dan .

Tag-tag tersebut memerintahkan pada browserbahwa tag tersebut adalah akhir. Tag memberitahu browser bahwa isi halaman

berakhir, dan mengatakan kepadabrowser bahwa file HTML telah berakhir.

Tanda “/” diletakan sebelum nama tag yangmemberitahu browser bahwa anda akanberhenti menggunakan tag yang sudahdigunakan. digunakan untuk memulai


16/281


7

sebuah tag dan digunakan untukmengakhiri sebuah tag.

Perintah Tag HTML - Penting!

Perintah munculnya tag-tag pembuka danmunculnya tag-tag penutup mengikuti aturan

yang penting. Jika sebuah tag HTML terbukadalam tag yang lain, sebagai contoh tag body

terbuka di dalam tag html, kemudian tag (body)harus ditutup sebelum tag (html) terluarditutup.

Kita menutup pertama kali tag body karena tagtersebut telah terbuka lebih awal. Aturan untuk“menutup tag yang lebih awal sebelum menutuptag-tag yang lebih lama” diterapkan ke semuatag-tag HTML.

Melanjutkan

Ide-ide berikut mungkin bisa diambil untukditerapkan, bagaimana kalau anda membuathalaman web yang kedua? Salin kode berikut ke

dalam notepad, seperti yang anda lakukansebelumnya, ikuti petunjuk-petunjuksebelumnya.

Kode HTML:


17/281


8

Halaman Webku!

Selamat Datang ke Halaman WebKu

Nanti akan ada halaman webku yang

lengkap yang akan membuat anda tercengangdan terkesan!

Setelah anda yakin bahwa kode HTML anda

dalam notepad sama persis dengan kode HTML yang diberikan, teruskan dan simpan file anda.Anda sebaiknya menyimpan file ini dengan“index.html”. Anda akan dberitahu bahwa andaakan menyimpan menimpa file yang lalu, tetapiitu tidak apa-apa, anda tidak memerlukanhalaman web pertama lagi.

Kesimpulan & Review

Sedikit tag-tag baru telah dikenalkan pada sesisebelumnya. Kita sekarang akan memberikananda definisi dari tag-tag baru berikut untukmempersiapkan anda untuk memulai Tutorial


18/281


9

HTML yang nyata. Tag-tag baru adalah: ,, , dan

.

Kode HTML dalam Pertanyaan:

Halaman Webku!

Selamat datang ke halaman webku

Nanti akan ada halaman webku yanglengkap yang akan membuat anda tercengangdan terkesan!

Tag ini ditempatkan setelah tag dan

digunakan untuk memerintahkan browserinformasi yang berguna, seperti: judul darihalaman web anda, topik halaman web(digunakan pada mesin pencari lama) dan lain-lain.


19/281


10

Tag ini ditempatkan antara dan dan akan menjadi label dari title barweb browser, yang lokasinya di atas sebelah kiridari banyak browser. Dalam contohsebelumnya, kita memberi judul halaman“Halaman Webku!” dan teks tersebut akantampil sebagai judul browser.

Ini adalah sebuah tag header. Ini akanmembuat sebuah “header” lebih besar daripadaukuran font yang biasanya “h2” berarti ituadalah header terbesar yang kedua. Header

yang paling besar adalah “h1” dan header yangpaling kecil adalah “h6”. Header-headersebaiknya digunakan untuk judul-judul, seperti

yang anda lihat di halaman ini.

Ini adalah tag paragraf. Jadi ketika andamenulis sebuah paragraf pastikan andamenempatkan

pada awal dari paragraf dan

di akhir paragraf!


20/281


11

Lanjutkan Pelajaran Anda - Tutorial HTML

Sekarang anda telah mencapai pemahamandasar bagaimana HTML bekerja, silakanlanjutkan ke bagian tutorial HTML. Disana andaakan belajar semua dasar tag-tag HTML danatribut-atributnya yang diperlukan untukmembuat sebuah web site yang berguna.

Hyper Text Markup Language - HTML

HTML bukan sebuah bahasa pemrograman, tapimerupakan sebuah bahasa Mark-up. Jika andatelah mengenal XML, HTML akan menjadi lebihmudah untuk anda pelajari. Kita menyarankananda untuk tidak mencoba melakukan tutorial

ini dalam sekali duduk. Kita menyarankan andauntuk meluangkan waktu 15 menit dalamsejam sehari mempraktekan HTML dan ambilwaktu istirahat, untuk membiarkan informasidiserap otak kita.

Persiapan untuk HTML

Membuat sebuah dokumen HTML mudah.Untuk memulai membuat kode HTML andamembutuhkan hanya dua hal: pengedit teks

yang sederhana dan dedikasi untuk mengikutitutorial ini! Notepad adalah pengedit tekssederhana yang dasar dan anda akan membuatkode HTML dengannya.


21/281


12

Latar Belakang Singkat HTML

HTML tidak ada untuk beberapa tahun lampau.Bulan November 1990 menandai hari darihalaman web pertama dan kembali kemudiantidak ada sedikitpun standar HTML yang bisadiikuti. Sebuah kumpulan yang dinamakanWorld Wide Web Consortium dibentuk dan sejaksaat itu kumpulan tersebut menetapkan

standar-standar yang diterima secara luas dankita akan mengajarkan berdasarkan darimereka.

Halaman Web

Halaman web mempunyai banyak kegunaan.

Berikut adalah beberapa fakta-fakta pentingtentang mengapa halaman web begitu berguna.

Sebuah cara yang murah dan mudahuntuk menyebarkan informasi kepadabanyak orang.

Media yang lain untuk memasarkanbisnis anda.

Membiarkan dunia tahu tentang andadengan sebuah website pribadi anda!

Kata-kata yang harus anda ketahui

Tag – Digunakan untuk menetapkan("mark-up") daerah dari dokumen HTML


22/281


13

untuk diinterpretasikan web browser. Tag-tag terlihat seperti ini:

Element – Sebuah tag yang lengkap,memiliki sebuah pembuka dansebuah penutup .

Attribute – Digunakan untuk mengubahnilai dari element HTML. Element-element akan sering memiliki beberapaattribute.

Untuk sekarang sekadar tahu saja bahwasebuah tag adalah perintah yangdiinterpretasikan web browser, sebuah elementadalah tag yang lengkap,dan sebuah attributekebiasaan atau mengubah element HTML.

Element - Element HTML

Element-element HTML terdapat pada banyaktingkatan. Element-element seperti paragrafteks, banner, dan link-link arah adalah elementdari sebuah halaman web. Sebuah elementdalam HTML adalah istilah yang bebasmenggambarkan setiap potongan pribadi dari

halaman web anda.

Sebuah Element terdiri dari tiga bagian dasar:tag pembuka, isi element, dan akhirnya, sebuahtag penutup.

1.

- tag pembuka paragraf2. Isi Element – Kata-kata paragraf


23/281


14

3.

- tag penutup

setiap halaman web membutuhkan empatelement yang penting: element html, head, title ,dan body.

Element...

mengawali dan mengakhiri setiap

halaman web. Ini semata-mata bertujuan untukmembungkus semua kode HTML danmenggambarkan dokumen HTML ke webbrowser. Ingatlah untuk menutup dokumenHTML anda dengan tag di bawah daridokumen.

Jika anda belum siap, buka Notepad atauCrimson Editor dan buat baru, dokumen kosongsiap digunakan. Salin kode HTML berikut kedalam pengedit teks anda.

Kode HTML:

Sekarang simpan file anda dengan memilihMenu kemudian Save. Klik pada kota drop down“Save as Type” dan pilih pilihan “All Files”.Ketika diminta untuk menamai file anda, namaidengan “index.html”, tanpa tanda kutip dua.


24/281


15

Periksa dengan seksama bahwa andamelakukan semuanya dengan benar dan

kemudian tekan save. Sekarang buka file andadalam web browser baru jadi anda sekarangbisa me-refresh halaman anda dan melihatperubahan yang anda lakukan.

Jika anda membuka dokumen index.html anda,anda seharusnya bisa melihat halaman webpertama anda yang kosong (putih)!

Element

Element adalah “selanjutnya” seperti yang mereka katakan. Sepanjang ditempatkandi suatu tempat antara tag dan isihalaman web (), anda benar. FungsiHead “di belakang layar.” Tag-tag yangditempatkan dalam element head tidaklangsung ditampilkan oleh web browser. Kitaakan menempatkan element disini dankita akan membicarakan tentang kemungkinanelement lain dalam pelajaran nanti.

Element-element lain digunakan untukpembuatan skrip (Javascript) dan pem-format-an (CSS) akan secepatnya dikenalkan dan andaakan menempatkan mereka dalam element headanda. Untuk sekarang, element head anda akanberlanjut dan akan diterangkan nanti kecualielement title akan diperkenalkan berikutnya.


25/281


16

Berikut contoh penempatan element.Kode HTML:

Meskipun begitu, kita tidak melihat apapunpada halaman web itu. Kita semua sudahsejauh ini adalah sepasang element yangdiperlukan untuk menggambarkan dokumenkita kepada web browser. Isi (bahan yang dapatanda lihat) akan diterangkan kemudian.

The Element

Tempatkan tag dalam element pada judul halaman anda. Kata-kata yangditulis antara tag-tag pembuka dan penutup akan ditampilkan di atas daribrowser penampil. Berikut kode HTML-nya:

Kode HTML:

Halaman Webku!


26/281


17

Simpan file dan buka file tersebut dalambrowser anda. Anda seharusnya melihat

“Halaman Webku!” di atas sebelah kiri, sebagai judul browser.

Silakan namai halaman web anda terserahanda, judul yang baik adalah yang singkat danmenggambarkan isi dari halaman web.

The Element

Element adalah tempat dimana semuaisi ditempatkan. (paragraf-paragraf, gambar-gambar, tabel-tabel, dan lain-lain). Kitasarankan seperti menu pada sisi kiri, kita akanmenjelaskan element-element tersebut lebihdetail pada tutorial selanjutnya. Untuksekarang, anda cukup hanya mengerti bahwaelement body akan membungkus semua isihalaman web anda yang tampil.

Kode HTML:

Halaman Webku!

Hallo Dunia! Semua isi webku akan ada disini!


27/281


18

Lanjutkan dan tampilkan web anda pertama,halaman web yang lengkap.

Tips

Dengan 4 element tersebut diatas, anda

sekarang bisa mulai menambahkan isi ke dalamweb anda.


28/281


19

BAB II

SINTAK HTMLMemulai Tag-Tag HTML!

Sebuah web browser membaca sebuahdokumen HTML dari atas ke bawah, dari kiri kekanan. Setiap kali browser menemukan sebuah

tag, tag ditampilkan sebagai (paragraf kelihatanseperti paragraf, tabel kelihatan sepertitabel,dan lain-lain). Tag-tag mempunyai 3bagian penting: tag pembuka, isi, dan tagpenutup. Ingatlah bahwa tag yang lengkapdisebut sebagai sebuah element. Denganmenambahkan tag-tag ke dalam sebuahdokumen HTML, anda mengisyaratkan kepada

browser “Hai lihat, saya sebuah tag paragraf,sekarang perlakukan saya sebagai manaadan ya.”

Anda akan mempelajari, ada mungkin ratusantag-tag HTML. Tabel-tabel, gambar-gambar,daftar-daftar, form-form dan segalanya selain

yang ditampilkan dalam sebuah halaman webmembutuhkan penggunaan sebuah tag ataudua tag.

Kode HTML:

Isi

Sebuah Tag Paragraf


29/281


20

Tag-tag sebaiknya huruf-huruf kecil jika andamerencanakan mempublikasikan pekerjaan

anda. Ini adalah standar untuk XHTML danHTML dinamis. Berikut adalah tampilanbeberapa tag HTML.

Tag-Tag HTML:

Tag Body (bertindak sebagai kerangkaisi)

Tag Paragraf

Tag Heading

Tag Tebal

Tag Miring

Tag-Tag Tanpa Tag Penutup

Ada beberapa tag-tag yang tidak mengikutiaturan di atas. Biasanya, tag mempunyai 3bagian (pembuka/penutup dan isi). Tag-tagberikut tidak memerlukan sebuah tapi merupakan versi yangdiubah. Alasannya tag-tag tersebut tidakmembutuhkan isi. Beberapa diantara tagtersebut hanya memerlukan alamat URL dan itusudah cukup informasi untuk web browseruntuk menampilkan tag dengan benar (tag-taggambaran). Mari kita lihat sebuah tag pindahbaris.


30/281


21

Kode HTML:

Untuk mengatakan kepada browser kitamenginginkan untuk membuat pindah baris(enter) ke dalam sebuah site, tidak perlu untukmengetik
pindahbaris. Jika setiap tagpindah baris dibutuhkan tiga komponen seperti

yang lainnya, hidup akan menjadi berlebih-

lebihan. Maka dari itu solusi yang baik adalahmenggabungkan tag-tag pembuka dan penutupke dalam format yang satu tag. Tag-tag yanglain juga telah diubah seperti tag gambar dantag input.

Kode HTML:

-- Tag Gambar

-- Tag Pindah Baris

-- Tempat

Input

Tampilan:

--Line Break--


31/281


22

Seperti yang anda lihat dari tag gambar di atas,browser anda bisa menginterpretasikan tag

tersebut sebagaimana kita memerintahkan padabrowser dimana gambar diletakanmenggunakan attribute src . Keterangan tentangattribut diterangkan dalam pelajaranselanjutnya.

Tips

Sebuah tag terdiri dari tag pembuka dantag penutup.

Beberapa tag-tag HTML tidakmembutuhkan tag penutup.

Mengubah tag-tag dengan attributeuntuk mengubah kebiasan halaman webanda!

Tag-tag menurunkan kemajuan sebagaiteknologi-teknologi web baru.

Sekarang waktu yang baik untuk memulaiberfikir tentang tipe website yang ingin andabuat. Adalah selalu lebih mudah untukmembuat isi web untuk sebuah topik atau

untuk mencapai sebuah tujuan.

Atribut-Atribut - HTML

Atribut-atribut digunakan untuk memperkuattag-tag. Yang kita maksud dengan memperkuatadalah bahwa ketika sebuah web browser


32/281


23

menerjemahkan sebuah tag, web browser jugamencari sekumpulan atribut-atribut dan

kemudian menampilkan elemen (tag-tag+atribut-atribut) secara keseluruhan. Padabeberapa titik anda mungkin ingin memberikanelemen body anda sebuah warna latar belakangatau mungkin juga mengubah lebar dari sebuahtable. Semua dari hal tersebut dan lebih dari itubisa didapat dengan menggunakan atribut-atribut.

Banyak tag-tag HTML memiliki sebuahkumpulan atribut-atribut yang unik milikmereka sendiri. Hal tersebut akan dipelajarisebagai masing-masing tag tersendiri akandikenalkan melalui tutorial. Mulai sekarang kitaakan fokus kepada sekumpulan atribut-atribut

umum yang bisa digunakan dengan setiap tag-tag yang ada.

Atribut-atribut ditempatkan dalam tag pembukadan kemudian diikuti sebuah sintaks yang tepat(format).

Atribut Kelas atau ID - HTML

Atribut-atribut kelas atau id adalah hampirsama. Mereka memerankan peran yang tidaklangsung dalam mem-format elemen-elemenanda tapi lebih kepada melayani di belakanglayar untuk pembuatan skrip dan CascadingStyle Sheets (CSS). Peran dari mengklasifikasi


33/281


24

dan mengidentifikasi elemen-elemen akanmenjadi lebih jelas ketika anda mempelajari

CSS.

Ide bahwa anda bisa mengklasifikasi ataumembuat id tertentu sebuah tag dan format

yang lain menggunakan tag Cascading StyleSheets. Adalah menjadi sangat perlu ketikaanda memiliki dua atau lebih elemen yang samadalam sebuah halaman (seperti sebuah tag

)tapi kita ingin mereka menjadi berbeda dalamtampilannya.

Kode HTML:

Paragraf tipe 1Miring

Paragraf tipe 2 Tebal

Klasifikasi Atribut-Atribut:

Paragraf tipe 1 Miring Paragraf tipe 2 Tebal

Nama Atribut - HTML

Nama banyak perbedaan daripada sebuah kelasdan id. Dengan memberikan sebuah nama padasebuah elemen, bahwa nama tersebut menjadisebuah variabel pembuatan skrip untuk bahasa


34/281


25

pembuatan skrip seperti javascript, ASP, danPHP. Nama atribut terlihat lebih sering dengan

form-form dan elemen-elemen input-pengguna yang lain.

Kode HTML:

Permainan Nama:

Atribut ini tidak memiliki efek pada tampilandari ruang teks, tapi di belakang layar inimemainkan peran identifikasi yang sangatbesar.

Atribut Judul - HTML

Ini mungkin suatu yang kecil, yaitu melupakanatribut. Atribut memberi judul sebuah elemendan menambahkan sebuah teks muncul kecil keelemen HTML. Banyak seperti teks muncul dariprogram-program pemrosesan kata, atribut-atribut tersebut sebaiknya tidak dilupakan.Anda boleh memberi judul sebuah elemendengan segala hal yang anda sukai, efek dariatribut berikut tidak terlihat sampai anda


35/281


26

mendekatkan mouse anda melewati elemenuntuk beberapa detik.

Kode HTML:

Judul TagKepala

Atribut Judul:

Judul Tag Heading

Dekatkan mouse anda melewati tampilanheading untuk melihat trik dari atribut judul!Ini memberikan web site anda dengan beberapainteraksi pengguna yang tidak ternilai. Jangan

melewatkan atribut judul.

Atribut Perataan - HTML

Jika anda menginginkan untuk mengubahlokasi horizontal dari elemen-elemen anda, Andaboleh menggunakan atribut perataan. Andaboleh meratakan sesuatu ke kiri, kanan, atautengah. Biasanya banyak elemen-elementdengan sendirinya rata kiri jika tidak dilakukanpengaturan.


36/281


27

Kode HTML:

Heading Ditengah

Tampilan:

Heading di tengah

Kode HTML:

Heading rata kiri

Heading di tengah

Heading rata kanan

Tampilan:

Heading rata kiriHeading di tengah

Heading rata kanan

Atribut Default

Banyak tag-tag diberi atribut yang biasanya. Iniberarti bahwa jika sebuah atribut tag tidakdiberikan oleh anda sebagai pembuat, tag-tagitu akan memiliki beberapa atribut-atribut yangnyata. Sebagai contoh, sebuah tag paragrafakan selalu meratakan teksnya ke kiri jika tidakmemiliki atribut perataan yang diberikan.Elemen-elemen juga ditempatkan dalam sebuah


37/281


28

tabel secara vertikal di tengah dan ke kiri jikatidak diberikan perataan. Sebagaimana anda

membuat kode dan mempelajari tentangelemen-elemen HTML yang masing-masingberbeda, anda akan menyadari banyak dariatribut-atribut yang biasanya (default).

Atribut-Atribut yang Umum

Atribut-atribut ada untuk memodifikasi tag-tagHTML yang mengizinkan untuk mengubahkebiasaan sebuah website. Berikut ini tabelbeberapa atribut-atribut lain yang siapdigunakan dengan banyak tag-tag HTML.

Atribut Pilihan Fungsi

align kanan, kiri,tengah

Tag-tag perataansecara horizontal.

valignatas, tengah,bawah

Tag-tag perataansecara vertikaldalam sebuahelemen HTML.

bgcolornumeric,hexidecimal,nilai RGB

Menempatkan

sebuah warna latarbelakang dibelakang sebuahelemen.

background URLMenempatkansebuah gambar latarbelakang di


38/281


29

belakang sebuahelemen.

idDitentukanpengguna

Menamai sebuahelemen untukdigunakan denganCascading StyleSheets.

class Ditentukanpengguna

Mengklasifikasisebuah elemenuntuk digunakandengan CascadingStyle Sheets.

Width Nilai Numerik

Menentukan lebartabel, gambar-gambar, atau seltabel.

Height Nilai Numerik

Menentukan tinggitabel, gambar-gambar, atau seltabel.

TitleDitentukanpengguna

"Memunculkan" judul untuk elemen-elemen anda.

Tips

Gunakanlah beberapa atribut-atributberbeda untuk meningkatkan sebuahtag.


39/281


30

Lengkapi ubah kebiasaan halaman andamelalui macam-macam kelompok

tag/atribut. Gunakan atribut judul!

Tag Paragraf

Mempublikasikan berbagai macam kerjaanpenulisan membutuhkan penggunaan sebuah

paragraf. Tag paragraf merupakan sangat dasardan tag perkenalan yang bagus untuk pemulakarena kesederhanaannya.

Tag

mendefinisikan sebuah paragraf.Menggunakan tag ini menempatkan sebuahbaris kosong dan di bawah teks dari paragraf.Baris-baris kosong otomatis tersebut adalahcontoh bagaimana sebuah tag “menandai”sebuah paragraf dan web browser secaraotomatis memahami bagaimana menampilkanteks paragraf karena tag paragraf.

Kode HTML:

Menghindari kehilangan disket denganproyek sekolah/kerja penting...

Sebagai contoh, marilah kita katakan andamemiliki proyek sekolah/kerja yang sangat

besar...


40/281


31

Dua Paragraf HTML:

Menghindari kehilangan disket dengan proyeksekolah/kerja penting pada mereka. Gunakanweb untuk menjaga isi anda jadi anda bisamengaksesnya dari manapun di dunia. Ini

juga merupakan jalan yang cepat untukmenuliskan pengingat atau catatan untukanda sendiri. Dengan kemampuan sederhana

HTML, (salah satunya anda telah memperolehsejauh ini) adalah mudah.

Sebagai contoh, marilah kita katakan andamemiliki proyek sekolah/kerja yang sangatbesar untuk dilengkapi. Begitu saja, cara yangpaling mudah untuk mentransfer dokumen-

dokumen dari rumah anda menggunakandisket 3.5 inch. Bagaimanpun juga, adasebuah jalan alternatif. Tempatkanadokumen-dokumen, foto-foto, esai-esai, atauvideo-video anda ke dalam server web danakses mereka darimana pun di dunia.

Merata Kiri dan Kanankan Paragraf - HTML

Paragraf-paragraf bisa diformat dalam HTMLseperti yang anda inginkan dalam programpemrores kata. Berikut atribut perataan yangdigunakan untuk “merata kiri dankanankan/justify” paragraf kita.


41/281


32

Kode HTML:

Sebagai contoh, marilah kitakatakan anda memiliki proyeksekolah/kerja...

Perataan Teks Rata Kiri dan Kanan(Justified):

Sebagai contoh, marilah kita katakan andamemiliki proyek sekolah/kerja yang sangatbesar untuk dilengkapi. Begitu saja, cara yangpaling mudah untuk mentransfer dokumen-dokumen dari rumah anda menggunakandisket 3.5 inch. Bagaimanpun juga, adasebuah jalan alternatif. Tempatkana

dokumen-dokumen, foto-foto, esai-esai, atauvideo-video anda ke dalam server web danakses mereka darimana pun di dunia.

Menengahkan Paragraf - HTML

Kode HTML:

Sebagai contoh, marilah kitakatakan anda memiliki proyek

sekolah/kerja...


42/281


33

Perataan Teks Tengah (Centered):


besar untuk dilengkapi. Begitu saja, cara yangpaling mudah untuk mentransfer dokumen-dokumen dari rumah anda menggunakandisket 3.5 inch. Bagaimanpun juga, ada

sebuah jalan alternatif. Tempatkana

dokumen-dokumen, foto-foto, esai-esai, atauvideo-video anda ke dalam server web dan

akses mereka darimana pun di dunia.

Setiap baris dari paragraf sekarang telahditengahkan dalam tampilan layar web browser.

Perataan Kanan Paragraf - HTML

Kode HTML:

Sebagai contoh, marilah kitakatakan anda memiliki proyeksekolah/kerja...

Perataan Teks Kanan (Right):


besar untuk dilengkapi. Begitu saja, cara yang


43/281


34

paling mudah untuk mentransfer dokumen-dokumen dari rumah anda menggunakan

disket 3.5 inch. Bagaimanpun juga, adasebuah jalan alternatif. Tempatkana

dokumen-dokumen, foto-foto, esai-esai, atauvideo-video anda ke dalam server web dan

akses mereka darimana pun di dunia.

Setiap baris dari paragraf di atas sekarang rata

sebelah kanan dari tampilan web browser.

Heading 1:6 - HTML

Sebuah heading dalam HTML adalah yangmungkin anda harapkan, sebuah judul atausub judul. Dengan menempatkan teks di dalam

tag-tag (heading), teks ditampilkan tebaldan ukuran dari teks bergantung pada nomordari heading (1-6). Heading-heading diberinomor 1 – 6, yang mana heading 1 yang palingbesar hurufnya dan heading 6 adalah heading

yang terkecil hurufnya.

Kode HTML:

Heading

adalah

tepat

untuk


44/281


35

judul-judul

dan subjudul

Tempatkan baris-baris berikut ke dalam fileHTML anda dan anda seharusnya melihat apa

yang ditampilkan seperti di bawah ini.

Heading-Heading 1-6:

Headingadalahtepat

untuk

judul-judul

dan subjudul

Perhatikan bahwa masing-masing headingmempunyai sebuah pindah baris sebelum dansesudahnya setelah masing-masing heading

ditampilkan. Ini dibangun dalam atribut untukberbicara dengan tag heading. Setiap kali andamenempatkan sebuah tag heading, web browseranda secara otomatis menempatkan pindahbaris di depan dari tag awal dan setelah tagakhir anda tepat sama seperti tag-tag

.


45/281


36

Esai Walkthrough

Marilah kita terapkan bersama-sama heading-heading dan paragraf-paragraf untukmembentuk sebuah esai. Buatlah kode dibawah ini di dalam body dari halaman andaatau sebuah halaman baru. atau buat paragrafesai anda sendiri.

Kode HTML:

Contoh Esai

Menghindari kehilangan disket denganproyek sekolah/kerja penting...

Sebagai contoh, marilah kita katakan andamemiliki

proyek sekolah/kerja yang sangat besar untukdilengkapi. Begitu saja...

Esai HTML:

Tampilkan halaman di jendela yang baru.

Tips

Heading-heading tidak memiliki atribut yangunik yang mengikat mereka, hanya memiliki

yang perataan, kelas, id yang umum, danlain-lain.

http://www.tizag.com/pics/htmlT/tagsessay.htmlhttp://www.tizag.com/pics/htmlT/tagsessay.htmlhttp://www.tizag.com/pics/htmlT/tagsessay.html


46/281


37

Pindah Baris

Tag pindah baris adalah berbeda daripada tag-tag yang banyak kita kenal. Sebuah tag pindahbaris mengakhiri baris yang sedang andakerjakan dan meneruskan ke baris selanjutnya.Menempatkan
dalam kode adalah samadengan menekan tombol enter dalam programpemrosesan kata. Gunakan tag
dalam

tag

(paragraf).

Kode HTML:

Zacky Putra Taufik

Po. Box 21

Bandung, Jawa Barat

Alamat:Zacky Putra TaufikPo. Box 21Bandung, Jawa Barat

Kita telah membuat mungkin sebuah alamatuntuk kepala surat. Tag pindah baris juga akanberguna dalam tempat tanda tangan surat kita.


47/281


38

Kode HTML:

Hormat Kami,

Zacky Putra Taufik

Direktur

Penutup Surat:

Hormat Kami,

Zacky Putra Taufik

Direktur

Tips

Tag pindah bisa bisa ditempatkan dalamelemen-elemen HTML lain seperti paragraf,tabel, daftar, dan heading.

Gunakan tag pindah baris untukmenyelesaikan pemformatan yang sederhana,

simpanlah layout halaman yang lebih rumituntuk tabel-tabel dan atribut perataan.

Ingatlah bahwa tag pindah baris tidakmembutuhkan sebuah tag penutup.


48/281


39

Aturan Garis Horizontal HTML

Gunakan tag untuk menampilkan garisdi layar. Catatan: aturan tag horizontal tidakmempunyai tag penutup akhir seperti tagpindah baris.

Kode HTML:

Gunakan

Tag horizontal

Secara bersamaan

Tampilan:

Gunakan

Tag horizontal

Secara bersamaan

Aturan tag horizontal bisa digunakan dalamketerangan ketika mempublikasikan tulisan


49/281


40

kita. Sebuah daftar isi atau mungkin sebuahdaftar pustaka

Kode HTML:

1. "Tutorial Pemrograman Web", Ichsan Taufik.

2. " Pemrograman Java" Muhammad

Zacky.

Daftar Pustaka:

1. "Tutorial Pemrograman Web", Ichsan Taufik.

2. "Pemrograman Java" Muhammad Zacky.

Seperti yang anda lihat, semua tag inimenggambar sebuah garis di antara isi halamananda dan digunakan secara tepat, hasilnya bisaanda lihat.

Daftar HTML

Ada 3 tipe yang berbeda dari daftar. Sebuah tag memulai daftar yang mengunakan angka, untuk daftar yang menggunakan tanda,dan untuk daftar yang didefinisikan.Gunakan atribut type dan start untuk membuatdaftar sesuai yang anda inginkan.


50/281


41

- unordered list; simbol-simbol

- ordered list; angka-angka

- definition list; kamus

Daftar Terurut (Ordered Lists) HTML

Gunakan tag untuk memulai sebuah daftar yang terurut. Tempatkan tag di antara tag-tag pembuka dan penutup untuk

membuat daftar item. Maksudnya terurut ialahmenggunakan nomor sebagai daftar seperti yangdidemonstrasikan di bawah ini.

Kode HTML:

Tujuan-Tujuan

Mendapatkan sebuah pekerjaan

Mendapatkan uang

Pindah

Daftar yang menggunakan nomor:

Tujuan-Tujuan

1. Mendapatkan sebuah pekerjaan

2. Mendapatkan uang

3. Pindah


51/281


42

Memulai daftar terurut anda pada nomor selainangka 1 menggunakan atribut start.

Kode HTML:

Tujuan-Tujuan

Membeli Makan

Berhasil di kuliah

Mendapatkan gelar sarjana

Daftar yang menggunakan nomor start:

Tujuan-Tujuan

4. Membeli makanan

5. Berhasil di kuliah

6. Mendapatkan gelar sarjana

Tidak ada yang sulit disini, mulai definisikandengan nomor tertentu untuk memulaipenomoran.

Sambungan Daftar Terurut HTML

Ada 4 tipe lain dari daftar terurut. Nomor yangumum anda bisa menempatkan mereka denganangka-angka romawi atau huruf, dua-duanyaangka/huruf kapital dan angka/huruf kecil.


52/281


43

Gunakan atribut type untuk mengubahpenomoran.

Kode HTML:

Tipe-Tipe Daftar Terurut:

HurufKecil

HurufKapital

Nomor Kecil NomorKapital

a. Finda Job

b. Get

Mone y

c. MoveOut

A. Finda Job

B. Get

Mone y

C. MoveOut

i. Find a Job

ii.

GetMoneyiii. Move

Out

I. Find a Job

II.

GetMoneyIII. Move

Out

Daftar Tidak Terurut HTML

Membuat sebuah simbol (bullet) dengan tag. Simbol itu sendiri terdiri dari tiga bentuk:kotak, lingkaran hitam, dan lingkaran. Simbol

yang biasanya ditampilkan oleh sebagai besarweb browser adalah lingkaran hitam tradisional.


53/281


44

Kode HTML:

Daftar Belanja

Susu

Kertas toilet

Sereal

Roti

Daftar Tidak Terurut:

Daftar Belanja

Susu

Kertas toilet

Sereal Roti

Tampilan dari daftar tidak terurut yangmungkin akan seperti berikut.

Kode HTML:


54/281


45

Tipe-Tipe Daftar Tidak Terurut:

type="square" type="disc" type="circle"

Susu Kertas toilet Sereal Roti

Susu

Kertas toilet

Sereal

Roti

o Susuo Kertas toileto Serealo Roti

Daftar Definisi Istilah HTML

Membuat daftar-daftar definisi seperti terlihatdalam kamus-kamus menggunakan tag .Daftar-daftar berikut mengganti tempat istilahkata hanya di atas definisi itu sendiri untuktampilan yang unik. Adalah bijaksana untukmenebalkan istilah untuk menempatkan

mereka lebih jauh.

- mendefinisikan awal dari daftar.

- mendefinisikan istilah.

- mendefinisikan definisi.

Kode HTML:

Fromage

Kata Perancis untuk keju.

Voiture

Kata Perancis untuk mobil


55/281


46

Kode HTML:

Fromage Kata Perancis untuk keju.

Voiture

Kata Perancis untuk mobil.

Tips

Gunakan atribut start dan type untukmengubah kebiasaan daftar-daftar anda.

Adalah mungkin untuk membuat daftardalam daftar, yang mana membantu untukmembuat beberapa item, seperti outline.

Tag-Tag Elemen-Elemen Pemformatan Kata -

HTML

Sebagaimana anda memulai untukmenempatkan elemen-elemen lebih dan lebih kedalam web site anda, akan menjadi perlu untukmembuat perubahan kecil untuk memformatdari elemen-elemen tersebut. Dalam pelajaran

Atribut-atribut HTML kita mempelajarai cara-cara untuk menambahkan beberapa bentukdengan atribut-atribut dan elemen-elemenperataan dalam elemen-elemen yang lain.Beberapa tag-tag ada untuk lebih jauhmenguatkan elemen-elemen teks. Tag-tagpemformatan berikut dapat membuat teks tebal,miring, membuat index/kuadrat, dan lebih.


56/281


47

Tebal, Miring, dan Lain-lain

Kode HTML:

Contoh dari Teks tebal (Bold)

Contoh dari Teks yang rapat(Emphasized)

Contoh dari Teks tebal besar(Strong)

Contoh dari Teks Miring (Italic)

Contoh dari Teks kuadrat(superscripted)

Contoh dari Teks indeks(subscripted)

Contoh dari Teks garis tengah(strikethrough)

Contoh dari Teks kode komputer

HTML Formatting:

Contoh dari Teks tebal (Bold) Contoh dari Teks yang rapat (Emphasized) Contoh dari Teks tebal besar (Strong)

Contoh dari Teks miring (Italic) Contoh dari Teks kuadrat (superscripted) Contoh dari Teks indeks (subscripted) Contoh dari Teks garis tengah (strikethrough)

Contoh dari Teks Kode Komputer


57/281


48

Semua tag-tag tersebut menambahperbendaharaan bentuk elemen-elemen

paragraf. Mereka bisa digunakan dengan semuaelemen tipe teks.

Penggunan Tag Pemformatan - HTML

Tag-tag tersebut seharusnya digunakan secarabersamaan. Dan apa yang kita maksud bahwa

anda sebaiknya hanya menggunakan merekauntuk menebalkan atau memiringkan satu ataudua kata dalam elemen-elemen anda pada saatbersamaan. Jika anda menginginkan untukmenebalkan seluruh paragraf solusi yang lebihbaik ialah melibatkan Cascading Style Sheet.

Tips

Ingatlah bahwa ada bentuk aturan khususuntuk tag-tag pindah baris dan tag-taghorizontal.

Gunakanlah aturan di atas sebagai acuan jika anda butuh untuk memformat halamanweb anda ke depannya.

Sistem Pengkodean Warna HTML – Nama-

Nama Warna

Ada 3 metode berbeda untuk men-set warna.Yang paling sederhana adalah istilah-istilahumum (Generic) dari warna. Contoh: hitam,


58/281


49

putih, merah, hijau, dan biru. Warna yangumum dikodekan dalam HTML dimana nilainya

adalah nama sederhana dari masing-masingwarna. Berikut adalah contoh dari warna yangbanyak didukung dalam HTML dan nama-namadari warna tersebut.

16 Warna-Warna Dasar:

Black Gray Silver White

Yellow Lime Aqua Fuchsia

Red Green Blue Purple

Maroon Olive Navy Teal

Sistem Pewarnaan HTML – Nilai-Nilai RGB

Kami tidak menganjurkan bahwa andamenggunakan RGB (Red, Green, Blue/ Merah,Hijau, Biru) untuk menyimpan desain webkarena yang bukan browser Internet Explorer(IE) tidak mendukung RGB HTML.Bagaimanapun juga, jika anda merencanakanbelajar CSS maka anda sebaiknya membuka

topik halaman ini.

RGB kepanjangan dari Red, Green, Blue.Masing-masing warna bisa memiliki sebuahnilai dari 0 (tidak ada warna) sampai ke 255(penuh dengan warna). Format untuk RGBadalah – rgb (RED, GREEN, BLUE), samadengan nama yang diimplementasikan. Di


59/281


50

bawah ini adalah sebuah contoh penggunaandari RGB, tapi jika anda tidak menggunakan

browser yang mendukungnya, tidak usahkhawatir, itu hanya satu masalah dalam RGBHTML.

Nilai-Nilai Red, Green, and Blue (Merah,Hijau, dan Biru):

bgcolor="rgb(255,255,255)" White (Putih)

bgcolor="rgb(255,0,0)" Red (Merah)

bgcolor="rgb(0,255,0)" Green (Hijau)

bgcolor="rgb(0,0,255)" Blue (Biru)

Sistem Pewarnaan HTML - Heksadesimal

Pada awalnya sistem heksadesimal rumit dansulit untuk difahami. Dipastikan bahwa sistemakan menjadi lebih, nanti akan jadi lebihmudah dengan melakukan latihan dan sebagaisebuah pengembang web yang berkembang,adalah sangat penting untuk mengertiheksadesimal dan menjadi bisa diandalkanuntuk menggunakan heksadesimal dalam

publikasi web anda karena heksadesimal lebihluas bisa mendukung banyak web browser.Heksadesimal adalah standar untuk warna diinternet untuk saat ini.

Heksadesimal adalah representasi 6 digit darisebuah warna. Seperti sistem numerik


60/281


51

(rgb[255,255,255]) 6 digit berikutmerepresentasikan 3 nilai-nilai berbeda yang

berkisar dari 0 – 255. setiap nilaimerepresentasikan satu dari tiga warna utamadari cahaya (merah, biru, hijau).

Berikut adalah sebuah heksadesimal yangmungkin anda lihat dalam sebuah dokumenHTML.

Heksadesimal Pertamaku:

bgcolor="#223344"

Sekarang marilah kita pecah heksadesimaltersebut. Kita perhatikan bahwa 6 digit tersebut

sebenarnya merepresentasikan 3 digit yangberbeda. Dua digit pertama (22)merepresentasikan warna merah, dua digitberikutnya nilai warna hijau (33), dan dua digitterakhir nilai warna biru (44). Itu adalah samaseperti (rgb) yang diterangkan di atas.

Dari kelihatannya anda mungkin mengatakan

bahwa itu seperti mempunyai nilai warna merahadalah 22, hijau 33, dan biru 44. Itu adalahtidak benar, begitulah masing-masing dua digitdari setiap warna adalah dikalikan bersama-sama dan hasilnya secara aktual adalah apa

yang ditampilkan oleh browser. Jadi di contohkita sebelumnya kita mempunyai 4 unit warnamerah (2 x 2), 9 unit warna hijau (3 x 3), dan 16


61/281


52

unit warna hijau (4 x 4). Cara lain untukmelihat itu adalah bahwa #223344 adalah sama

seperti rgb(4, 9, 16) dua cara tersebutmenghasilkan hasil yang sama.

Kita juga perhatikan bahwa web browser bisamendukung 256 warna-warna berbeda darisetiap warna (0-255). Ini merupakan masalahkarena kita hanya mempunyai digit 0 – 9 untukbekerja dengannya.

Contoh 'Uh-Oh':

bgcolor="#999999"

Jika kita lakukan penghitungan, kita

mendapatkan sebuah hasil merah 81, hijau 81,dan biru 81 (9 x 9). Ini tidak mendekati nilai255. Dalam sistem heksadesimal huruf a – fmerepresentasikan angka 10 – 15, cara ini kitatidak dibatasi sampai 81 warna dari masing-masing warna. Marilah kita lihat contohheksadesimal lain.

Contoh Masalah:

bgcolor="AADDFF"

Warna ini akan menjdi sebuah nilai warnamerah 100 (10 x 10), nilai warna hijau 169 (13 x13), dan nilai warna biru 255 (15 x 15). Ini


62/281


53

merupakan keindahan dari heksadesimal danperkenalan sangat singkat untuk sistem biner.

Gunakan tabel di bawah sebagai acuan untuksistem heksadesimal anda.

Nilai Warna Heksadesimal:

Des 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Heksa 0 1 2 3 4 5 6 7 8 9 A B C D E F

Heksadesimal adalah pilihan terbaik untukpengembangan web yang sesuai karenakonsistensi mereka di antara browser-browser.Bahkan perubahan yang paling kecil dalamwarna bisa melemparkan seluruh site anda outof whack, jadi pastikan untuk mengecek siteanda dalam beberapa browser. Jika andamenginginkan yakin secara mutlak bahwawarna-warna anda tidak akan berubah,gunakan nilai heksadesimal berpasangan untukwarna. Contoh: “#0011EE”, “#44HHFF”, atau“#117788”. Warna-warna tersebut dinamakanwarna-warna dasar, warna-warna tersebut akanselalu benar dalam tampilan browser kebrowser.

Font dan Basefont - HTML

Tag digunakan untuk menambahkangaya, ukuran, dan warna pada teks di site anda.Gunakan atribut size, color, dan face untukmengubah kebiasaan font-font anda. Gunakan


63/281


54

sebuah tag untuk mengeset semuateks anda supaya sama ukuran, jenis dan

warna.

Tag-tag font dan basefont adalah deprecateddan sebaiknya tidak digunakan. Maka dari itu,gunakan gaya css untuk memanipulasi fontanda. Lihat Tutorial CSS kami untuk informasilebih lanjut.

Ukuran Font

Atur ukuran dari font anda dengan size .Kisaran nilai dari nilai yang diterima adalah dari1 (paling kecil) sampai 7 (paling besar). Ukuran

yang biasanya (default) dari sebuah font adalah3.

Kode HTML:

Ini adalah contoh ukuran font 5.

Font Size:

Ini adalah contoh ukuran font 5.

Warna Font

Atur warna dari font anda dengan color .


64/281


55

Kode HTML:

Warna teks ini adalahheksadesimal #990000

Warna teks ini merah

Warna Font:Kode warna teks ini adalah heksadesimal#990000 Warna teks ini merah

Jenis Font (Font Face)

Pilihlah jenis font berbeda menggunakan semuafont yang telah anda install. Hati-hatilah bahwa

jika ditampilkan halaman oleh pengguna yanglain tidak memiliki font yang anda instalkan,mereka tidak akan bisa melihatnya. Maka dariitu mereka akan ditampilkan pada font biasanya

yaitu Times New Roman. Sebuah pilihan adalahmemilih beberapa warna yang sama dalam

penampilannya.

Kode HTML:

Paragraf ini memiliki font


65/281


56

tersendiri yang telah terformat oleh tag font!

Jenis Font:

Paragraf ini memiliki font tersendiri yang telahterformat oleh tag font!

Mengatur Dasar Font yang Tetap - Basefont

Dengan tag basefont anda akan bisa mengaturfont yang biasanya (defautl) untuk halaman webanda. Kita sangat anjurkan untukmenspesifikasikan sebuah basefont jika andaberencana menggunakan macam-macam fontdengan HTML. Di bawah ini adalah cara yangbenar untuk mengatur basefont anda.

Kode HTML:

Paragraf ini memiliki font tersendiri yangtelah...

Paragraf ini memiliki font tersendiri yangtelah...


66/281


57

Paragraf ini memiliki font tersendiri yang

telah...

Font Dasar (Base):Paragraf ini memiliki font tersendiri yang telahterformat oleh tag basefont!Paragraf ini memiliki font tersendiri yang telahterformat oleh tag basefont!Paragraf ini memiliki font tersendiri yang telahterformat oleh tag basefont!

Bagaimanapun juga, penggunaan dari basefontmenurunkan nilai suatu web, ini berarti ini bisa

jaid tidak didukung pada suatu waktu di masa yang akan datang. Cara yang benar dansempurna adalah cara untuk mengubahbasefont ke aturan dengan CSS.

Tinjauan Atribut

Atribut-Atribut:

Atribut= "Value" / “Nilai” Deskripsi

size= "Nilai Angka 1-7"Ukuran dariteks anda,


67/281


58

terbesar 7.

color="rgb,nama warna,atauheksadesimal"

Mengubahwarna font.

face= "nama dari font"Mengubah jenisfont.

Gaya Huruf Indah Pertama

Ubah kebiasaan font-font anda untukmendapatkan tampilan yang anda inginkan.

Kode HTML:

Ubah

Kebiasaan font anda untuk mendapatkan

tampilan yang anda inginkan.

Indah:

Ubah kebiasaan font anda untuk mendapatkantampilan yang anda inginkan.

Tips

Jangan gunakan tag-tag font jikadimungkinkan! Maka dari itu gunakanCSS!

Font-font menambahkan karakter dantampilan yang aslinya, jadi mereka sepertitidak digunakan atau tidak bisa dibaca.


68/281


59

Gunakan font-font yang konsisten pada siteanda.

Tidak ada seorangpun menikmati tampilan yang sulit dibaca, buatlah font-font andaenak dibaca!

Gunakan pemformatan tag-tag daripada tagfont untuk teks tebal atau miring.

Hubungan dan Jangkar (Links and Anchors) -

HTML

Halaman web memiliki nama sendiri sepertilaba-laba (spidery) dari banyak koneksi antaraweb site. Koneksi-koneksi tersebut dibuatmenggunakan tag-tag anchor untuk membuathubungan. Teks, gambar, dan bentuk-bentukboleh digunakan untuk membuat hubungantersebut.

Hypertext Reference (href) - HTML

Atribut href mendefinisikan acuan bahwahubungan mengacu kepada. Pada dasarnya iniadalah dimana pengguna akan dibawa ke suatu

halaman jika mereka ingin mengklik link ini.

Hypertext references bisa menjadi Internal,Local, or Global.


69/281


70/281


61

Yahoo Home

Link Global:

Tizag Home ESPN Home Yahoo Home

Target Link - HTML

Atribut target mendefiniskan apakah kita akan

membuka halaman di dalam jendela yangterpisah, atau membuka link dalam jendelabrowser yang sedang terbuka.

Kode HTML:

target=" _blank"

Membuka halaman barudalam jendela browser baru.

_self"Memuatkan halaman barudalam window yang sedangdibuka.

_parent"

Memuatkan halaman baru kedalam sebuah frame yanglebih tinggi dimana linkberada.

_top"

Memuatkan halaman baru kedalam jendela browser yangsedang terbuka,membatalkan semua frame-frame.

http://www.tizag.com/http://www.espn.com/http://www.espn.com/http://www.yahoo.com/http://www.yahoo.com/http://www.yahoo.com/http://www.yahoo.com/http://www.espn.com/http://www.tizag.com/


71/281


62

Contoh di bawah menunjukkan bagaimanaanda ingin me-link-kan ke ESPN.COM, sebuh

web site olahraga popular. Atribut targetditambahkan untuk mengizinkan browseruntuk membuka ESPN dalam sebuah jendelabaru, maka dari itu jendela pembuka akanmenampilkan pada web site kita. Berikutcontohnya.

Kode HTML:

ESPN.COM

Target _blank:

ESPN.COM

Jangkar (Anchors) - HTML

Untuk me-link ke bagian-bagian dari halamananda yang sudah ada sebuah nama harusdiberikan kepada jangkar (anchor). Di dalamcontoh di bawah, kita telah membuat daftar isimini untuk halaman ini. Dengan menempatkananchor kosong hanya setelah masing-masing

heading, dan menamai mereka, kita kemudianbisa membuat link acuan ke bagian itu dalamhalaman ini seperti yang ditunjukan di bawahini.

Pertama-tama, heading dari halaman ini berisikosong, dinamai anchor. Mereka kelihatanseperti berikut.

http://www.espn.com/http://www.espn.com/http://www.espn.com/


72/281


63

Kode Sendiri Tizag:

HTML Links and Anchors

HTML Text Links

HTML Email

Sekarang buat link acuan, menempatkan simbolpagar (#) diikuti oleh nama dari anchor dalamhref dari link baru.

Kode Anchor:

Menuju ke atas

Mempelajari tentang link teks

Mempelajari tentang link

email

Local Links:

Menuju Ke Atas Mempelajari Tentang Link Teks

Mempelajari Tentang Link Email

http://www.tizag.com/htmlT/links.php#tophttp://www.tizag.com/htmlT/links.php#tophttp://www.tizag.com/htmlT/links.php#texthttp://www.tizag.com/htmlT/links.php#texthttp://www.tizag.com/htmlT/links.php#emailhttp://www.tizag.com/htmlT/links.php#emailhttp://www.tizag.com/htmlT/links.php#emailhttp://www.tizag.com/htmlT/links.php#texthttp://www.tizag.com/htmlT/links.php#top


73/281


64

Link Email - HTML

Membuat sebuah link email adalah sederhana. Jika anda menginginkan seseorang untukmengirim surat tentang site anda sebuah cara

yang bagus untuk dikerjakan adalahmenempatkan sebuah link email dengan subjek

yang telah disiapkan dalam tempat untuk

mereka.

Kode HTML:

[email protected]

Link Email:mailto:[email protected]?subject=saran

Dalam beberapa keadaan mungkin saja perluuntuk mengisi dalam badan dari email untukkenyamanan pengguna.

Kode HTML:

[email protected]

mailto:[email protected]?subject=saranmailto:[email protected]?subject=saranmailto:[email protected]?subject=saran


74/281


65

Complete Email:

mailto:[email protected]?subject=Saran&body=Si

te yang manis!

Link Download - HTML

Menempatkan file-file yang tersedia untukdidownload adalah dikerjakan sama sepertimenempatkan link teks. Hal ini menjadi rumit

jika kita ingin menempatkan link gambar yangtersedia untuk didownload. Solusi yang terbaikuntuk gambar adalah menggunakan sebuahlink gambar kecil (thumbnail) yang kita akanpelajari dalam pelajaran berikutnya.

Kode HTML:

Dokumen Teks

Me-Download Sebuah Dokumen Teks:

Dokumen Teks

Link Default; Base - HTML

Gunakan tag dalam elemen head untukmengeset URL default untuk semua link dalamsebuah halaman untuk menuju itu. Adalahselalu sebuah ide yang bagus untuk men-setsebuah tag base hanya untuk mengurung linkanda menjadi tampil dimana-mana di bawah

mailto:[email protected]?subject=Saran&body=Site%20yang%20manis!mailto:[email protected]?subject=Saran&body=Site%20yang%20manis!mailto:[email protected]?subject=Saran&body=Site%20yang%20manis!http://www.tizag.com/pics/htmlT/blanktext.ziphttp://www.tizag.com/pics/htmlT/blanktext.ziphttp://www.tizag.com/pics/htmlT/blanktext.zipmailto:[email protected]?subject=Saran&body=Site%20yang%20manis!mailto:[email protected]?subject=Saran&body=Site%20yang%20manis!


75/281


66

baris. Biasanya atur base anda ke halamanhome.

Kode HTML:

Entitas Karakter HTML

Sebuah entitas adalah istilah khayalan untusebuah simbol. Beberapa simbol seperti hakcipta (copyright), merk dagang (trademark), atau

simbol mata uang asing ada di luar dari satusimbol yang anda lihat dalam keyboard anda.Perintah untuk menampilkan karakter-karaktertersebut, anda harus mengetahui 3 bagian.

Berikut 3 bagian untuk setiap entitas.

Kode HTML:

Pertama mulai dengan sebuah tandadan - &

Kemudian nama entitas - copy

Dan terakhir sebuah tanda titik koma

- ;


76/281


67

Copyright / Hak Cipta:

kombinasikan © untuk membuat - © -

simbol Copyright / hak cipta.

Anda akan menemukan kesulitan jika andalupa untuk memasukan semua tiga bagian darisebuah entitas.

Ruang Tambahan dan .

Sebagaimana anda telah mempelajari dalam tagparagraf dan tag heading, browser akan hanyamengenali dan memformat 1 ruang antara kata-kata yang tidak dikawal dari berapa banyak

yang sebenarnya anda ketik dalam kode HTML.Sebuah entitas ada untuk menempatkan ruang

tambahan / spasi.

Berikut sebuah contoh.

Kode HTML:

Segala hal yang ke atas, harus

turun!

Spasi:

Segala hal yang ke atas, harus down!

Dalam HTML kita gunakan tanda lebih kecil danlebih besar untuk membuat membuat tag-tag,


77/281


68

jadi untuk menampilkan mereka dalam web siteanda akan memerlukan entitas.

Kode HTML:

Kurang dari - <

Lebih dari - >

Tag Body -

Kurang dari lebih dari:

Kurang dari - <Lebih dari - >

Tag Body -

Tips

Nama atau Nomor? Setelah melihat padatabel entitas kita anda mungkinmemperhatikan bahwa ada sebuah nilainomor dan sebuah nilai nama untuk masing-masing entitas. Beberapa nilai yang lamatidak menduduk nilai nama, tapi itu tidak

seperti yang anda bayangkan bahwaseseorang akan menjalankan ke dalammasalah ini hari ini.

Ingatlah untuk menggunakan kode entitasuntuk lt44 dan gt44 dalam teks anda. Jikatidak anda mugkin menemukan kesalahan

yang asing terjadi pada semua tempat yang


78/281


69

anda tidak bisa menunjukkannya dengantepat.

Membuat Email HTML

Membuat sebuah link email HTML dalamhalaman anda adalah cepat dan sederhana.Bagaimanapun juga, anda sebaiknyamengetahui bahwa ketika anda menempatkan

email anda dalam website, adalah sangatmudah untuk ahli-ahli komputer untukmenjalankan program-program untuk memanentipe-tipe email ini untuk mengirimkan spam.

Jika anda akan menempatkan link email andapada sebuah website publik, yakinkan bahwaanda memiliki software anti-spam!

Pilihan lain untuk mengizinkan orang lainuntuk mengirimkan anda email tanpamengekspos diri sendiri untuk menerima spam

yang banyak adalah dengan membuat sebuahform HTML yang menghimpun data dari userdan mengirim email kepada akun email anda.Kita merekomendasikan Form Email HTML yang

pada umumnya mengurangi jumlah potensialdari spam.

Tag Email HTML

Disana benar-benar tidak ada tag HTMLterpisah untuk membuat sebuah link email


79/281


70

HTML. Sebagai gantinya anda menggunakansebuah standar HTML tag anchor dan men-

set property href sama dengan alamat email,dibandingkan dengan menetapkan sebuah URLweb. Ini mungkin memusingkan dan mungkinakan mengambil sedikit waktu untuk dapatdipergunakan.

Kode HTML:

Contoh Email

Email Link:

Contoh Email

Kode Email HTML Tambahan

Dengan menambahkan sepasang tambahan lainke dalam alamat emal dalam href anda bisamemiliki SUBJECT dan BODY dari email yangsecara otomatis mengumpulkan parapengunjung web anda. Ini adalah baik ketikamenerima email dari sebuah website ke sebuahakun email yang menangani lebih surat

daripada hanya dari satu link pada site anda.

Dengan mendefinisikan sebuah subjek seragam yang orang lain akan otomatis memiliki subjektersebut ketika mengklik link anda akansanggup untuk mengatakan secepatnya apakahatau tidak sebuah email datang dari websiteatau dari sumber lain (sepanjang pengunjung

mailto:[email protected]:[email protected]:[email protected]


80/281


71

anda tidak mengacaukan dengan subjek yangtelah anda berikan kepada mereka).

Subject – Mengumpulkan subjek dariemail dengan informasi yang andaberikan.

Body – Mengumpulkan badan dari emaldengan informasi yang anda berikan.

HTML Code:

Contoh Email Ke-2

Email Lengkap:

Contoh Email Ke-2

Image / Gambar - HTML

Gambar adalah bahan pokok dari setiapdesainer web, jadi sangat penting bahwa andamemahami bagaimana menggunakan gambardengan baik. Gunakan tag untukmenempatkan sebuah gambar pada halamanweb anda.

Kode HTML:

mailto:[email protected]?subject=Emailmailto:[email protected]?subject=Emailmailto:[email protected]?subject=Emailmailto:%[email protected]?subject=Web%20Page%20Email&body=This%20email%20is%20from%20your%20websitemailto:%[email protected]?subject=Web%20Page%20Email&body=This%20email%20is%20from%20your%20websitemailto:%[email protected]?subject=Web%20Page%20Email&body=This%20email%20is%20from%20your%20websitemailto:[email protected]?subject=Email


81/281


72

Image:

Image src - HTML

Di atas kita telah menjelaskan atribut src . Srckepanjangan dari source , sumber dari gambar

atau lebih sewajarnya, ketika file gambardiletakkan. Seperti dengan link yang dijelaskandalam pelajaran sebelumnya, anda bolehmenggunakan setiap URL standar untuk secarabenar menunjuk atribut src kepada sebuahsumber lokal atau eksternal.

Ada dua cara untuk mendefinisikan sumberdari sebuah gambar. Pertama anda bisamenggunakan sebuah URL standar.(src=http://www.Tizag.com/pics/htmlT/sunset.gif) sebagai pilihan kedua, anda bisa menyalinatau upload file ke dalam web server anda danmengaksesnya secara lokal menggunakanmetode standar pohon direktori.

(src=”../sunset.gif”) Lokasi dari file gambar iniadalah berhubungan ke lokasi anda dari file.html.

Tipe-Tipe URL:

Lokal Src Deskripsi Lokasi

src="sunset.gif" File gambar berada


82/281


73

dalam direktori yangsama dengan file .html.

src="../sunset.gif"

File gambar beradadalam direktorisebelumnya dari file.html.

Src="../pics/sunset.gif"

File gambar beradadalam direktori pics

yang ada dalam

direktori sebelumnyadari file .html.

Sebuah URL tidak bisa berisi dari driveharddisk, sejak sebuah src URL adalah suatusumber penafsiran relasional yang didasarkanpada lokasi file .html anda dan lokai dari file

gambar. Oleh karena itu beberapa hal sepertisrc=”C:\\www\web\pics\” tidak akan bekerja.Gambar-gambar harus di upload bersamaandengan file .html anda ke web server.

Setiap metode memiliki baik dan buruknyasendiri, sebagai contoh menggunakan URL darigambar pada site lain memiliki sebuah masalah

jika web master dari site lain mengubah lokasifisik dari file gambar. Menyalin file langsungkepada web server anda memecahkan masalahproblem ini, bagaimanapun, sebagaimana andamelanjutkan untuk meng-upload file-file gambarke sistem anda, anda mungkin secepatnyamengurangi ruang hard disk.


83/281


74

Atribut Alternatif - HTML

Atribut alt menjelaskan teks alternatif untkditampilkan jika untuk beberapa alasan browsertidak bisa menemukan gambar, atau jika usermemiliki file gambar yang tidak bisa dibuka.Hanya teks browser juga bergantung padaatribut alt sejak mereka tidak bisa menampilkangambar-gambar.

Kode HTML:

Teks Alternatif:

Tinggi dan Lebar Gambar - HTML

Untuk mendefinisikan tinggi dan lebar darigambar, daripada membiarkan browsermenghitung ukuran gambar, gunakan atributheight dan width .

Kode HTML:

X

Matahari terbenam yang indah


84/281


75

Tinggi dan Lebar:

Di atas kita telah mendefinisikan atribut src,height dan width. Dengan menginformasikanbrowser dimensi dari gambar adalah

mengetahui untuk menempatkan gambar itu. Tanda mendefinisikan sebuah dimensi gambardari site anda mungkin akan dimuat dengankurang baik, teks dan gambar lain akandipindahkan ketika browser akhirnyamenampilkan seberapa besar gambarseharusnya ditampilkan dan kemudianmembuat ruang untuk gambar.

Perataan Gambar Secara Vertikal dan

Horizontal

Gunakan atribut align dan valign untukmenempatkan gambar-gambar dalam body,table, atau section anda.

1. align (Horizontal)o right / kanano left / kirio center / tengah

2. valign (Vertical)o top / atas


85/281


76

o bottom / bawaho center / tengah

Di bawah adalah sebuah contoh bagaimanaperataan sebuah gambar ke kanan dari sebuahparagraf.

Kode HTML:

Ini adalah paragraf ke-1, ya itu

benar...

Gambar akan muncul sepanjang … apakah

betul?

Ini adalah paragraf ketiga yangmuncul...

Pembungkusan Gambar:

Ini adalah paragarf ke-1, ya itu benar. Saya rasaparagaraf ini melayani sebagai contoh yang baikuntuk menampilkan bagaimana

perataan gambar ini bekerja.


86/281


77

Gambar akan muncul sepanjang sisi kanan dariparagraf. Seperti yang anda bisa lihat ini adalah

sangat manis untuk menambahkan sebuahpandangan mata yang manis yangmenghubungkan pada paragraf yang dijelaskan.

Jika kita berbicara tentang matahari tropisterbenam yang indah, gambar ini sempurna.

Tapi kita sekarang sedang tidak membicarakantentang itu, jadi itu hanya membuang-buang

waktu, apakah betul?

Ini adalah paragraf ketiga yang muncul di

bawah paragraf yang ada gambarnya!

Gambar Sebagai Link

Gambar sangat berguna untuk link dan bisadibuat dengan kode HTML di bawah.

Kode HTML:

Link Gambar:

http://www.tizag.com/


87/281


78

Sekarang gambar anda akan membawa ke homepage kita jika anda mengkliknya. Ubahlah ke

URL home page anda.

Thumbnails

Thumbnails adalah gambar yang berukurankecil (Kilobytes) yang terhubung ke gambar yanglebih besar, gambar yang berkualitas tinggi.

Untuk membuat sebuah thumbnail simpangambar versi kualitas rendah dan buatlahmemiliki dimensi yang lebih kecil. Sekarangbuat gambar kualitas rendah ke dalam sebuahlink gambar dan tujukan ke gambar yangkualitas tinggi.

Kode HTML:

Thumbnails:

Gifs lawan Jpegs HTML

Gifs adalah terbaik digunakan untuk banner,clip art, dan tombol. Alasan utama untuk iniadalah bahwa gifs bisa memiliki latar belakangtransparan yang tidak ternilai ketika kitamembuat web desain. Kelemahannya, gifs

http://localhost/var/www/apps/conversion/tmp/BAHAN%20AJAR/DIKTI/PHP/_CampurTUTORIALHTMLHTML%20Tutorial%20-%20Images_filessunset.gifhttp://localhost/var/www/apps/conversion/tmp/BAHAN%20AJAR/DIKTI/PHP/_CampurTUTORIALHTMLHTML%20Tutorial%20-%20Images_filessunset.gif


88/281


79

biasanya memiliki ukuran file yang lebih besar,tidak seperti yang dikompres seperti jpeg, yang

dipanggil lama dan besar perkiraan transfernya.Gifs juga terbatas pada skema 256 warna.

Bagaimanapun Jpegs, mempunyai roda warnatidak terbatas, dan mempunyai perkiraankompresi tinggi dari waktu menampilkan danmenghemat ruang hard drive. Jpegs tidakmengizinkan latar belakang transparan, tapirasio kualitas / ukuran mereka tidakterkalahkan. Adalah terbaik untukmenggunakan Jpegs untuk galeri foto, atauhasil seni untuk mengizinkan pelihat gambarmenangkap detail dari bit ekstra. Hindari Jpegsuntuk desain grafis, pantang untuk gunakan

jpegs sebagai thumbnail dan latar belakang

Tips

Temukan sebuah program pengeditan grafisuntuk mengedit gambar anda. Kitarekomendasikan mulailah dengan Paint ShopPro (http://www.jasc.com).

Definisikan tinggi dan lebar untuk gambaranda akan mengizinkan halaman anda untukdimuat dengan baik.

http://www.jasc.com/http://www.jasc.com/http://www.jasc.com/http://www.jasc.com/


89/281


80

Link Gambar - HTML

Penggunaan grafis-grafis akan membuat weblambat, link teks yang tidak kelihatan. Untukmembuat sebuah link gambar sederhanamasukkan sebuah gambar dalam tag anchor.

Jika anda tidak mengetahui bagaimanamenggunakan tag image, lewati tutorial imagedan kembali setelah anda nyaman dengannya.

Kode HTML:


90/281


81

Kode HTML:


91/281


82

form. Field input adalah yang akan menjadidaging dari sandwich form. memiliki

beberapa atribut-atribut yang anda sebaiknyaperhatikan.

type – Menentukan tipe field input apa yang akan ditampilkan. Kemungkinanpilihan adalah text, submit, danpassword.

name – Menetapkan sebuah nama kefield yang diberikan jadi bahwa andamungkin mengacu ke nama tersebutnanti.

size – Men-set lebar secara horizontaldari field. Unit dari pengukuran adalahdalam spasi kosong.

maxlength – Memerintahkan angka

maksimum dari karakter yang bisadimasukkan.

Kode HTML:

Name:

Password:


92/281


83

Input Forms:

Name:

Password:

Jangan gunakan fitur password untuk tujuankeamanan. Data dalam field password tidak

dienkripsi dan tidak aman dalam segala cara.

Form Email HTML

Sekarang kita akan menambahkan kegunaansubmit ke form anda. Secara umum, tombolsebaiknya item terakhir dari form anda dan

memiliki atribut name yang di set ke “Kirim”atau “Submit”. Name mendefinisikan diberinama apa label tombol nantinya. Berikut adalahdaftar atribut penting dari submit:

Disamping untuk menambahkan tombolsubmit, kita juga harus menambahkan tujuanuntuk informasi ini dan menetapkan bagaimana

kita ingin itu untuk menuju ke tempat itu.Penambahan atribut-atribut berikut ke anda akan melakukan hal yang tadi disebutkan.

method – Kita hanya akan menggunakankegunaan post dari method, yang


93/281


94/281


85

Tombol Radio HTML

Tombol Radio adalah interaksi populer sebuahform. Anda mungkin telah melihat tombol radiopada kuis, dan web site lain yang memberikanpengguna sebuah pertanyaan pilihan ganda. Dibawah adalah sepasang atribut yang sebaiknyaanda tahu mengenai tombol radio.

value – Menentukan apa yang akandikirim jika pengguna memilih tombolradio ini. Jika h

diktat pengenalan html dan css

Documents