Anda di halaman 1dari 49

MODUL MATA KULIAH PRATIKUM PENGENALAN INTERNET JUDUL DASAR DASAR HTML DARI SITUS W3SHCOOL.

COM

Nama Nim Jurusan Kelas

: : : Teknik Informatika : Pagi

NEW MEDIA INTERACTIVE COMPUTER COLLEGE Jln Tukad Batanghari No. 29 Panjer Denpasar Semester 1
2011

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

KATA PENGHANTAR

Pertama tama saya ucapkan puji syukur kehadapan Tuhan Yang Maha Esa, karena berkat beliau-lah yang memberi pentunjuk dan semangat untuk menyelesaiakan tugas mata kuliah pratikum pengenalan internet dengan baik dan tepat pada waktunya. dengan judul Dasar Dasar HTML Dari Situs www.w3shcool.Com. Akhir kata semoga modul ini dapat memberikan manfaat kepada para pembaca. saya menyadari bahwa modul ini masih jauh dari kesempurnaan baik dari bentuk penyusunan maupun materinya. Kritik dan saran dari pembaca sangat penulis harapkan untuk penyempurnaan makalah selanjutnya.

Penulis

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

ii

TUGAS MODUL HTML

DAFTAR ISI :

Cover ................................................................................................................. i Kata penghantar ................................................................................................. ii Daftar isi ............................................................................................................ iii BAB I Pengenalan HTML 1.1 Pengertian HTML ........................................................................................ 1 1.2 Dasar dasar HTML .................................................................................. 1 BAB II Pembahasan Materi HTML 2.1 HTML Introduction/ Penghantar ................................................................ 2.2 HTML Basic/ Dasar ................................................................................... 2.3 HTML Elemen ........................................................................................... 2.4 HTML Attributes/ Atribut ......................................................................... 2.5 HTML Headings/ HTML Pos .................................................................... 2.6 HTML Paragraphs/ Paragraf HTML ........................................................... 2.7 HTML Formatting/ Memformat HTML .................................................... 2.8 HTML Fonts ............................................................................................... 2.9 HTML Styles .............................................................................................. 2.10 HTML Links .............................................................................................. 2.11 HTML Images/ HTML Gambar ............................................................... 2.12 HTML Tables/ Tabel HTML .................................................................... 2.13 HTML Lists/ HTML Daftar ...................................................................... 2.14 HTML Forms/ Form HTML ..................................................................... 2.15 HTML Frames ........................................................................................... 2.16 HTML Iframes .......................................................................................... 2.17 HTML Colors/ Warna HTML ................................................................... 2.18 HTML Colornames ................................................................................... 2.19 HTML Colorvalues ................................................................................... 2.20 HTML Quick List/ HTML Daftar Cepat ................................................... BAB III Penutup 3.1 Penutup ...................................................................................................... 46 3.2 Daftar Pustaka ............................................................................................ 46 2 4 5 7 8 9 11 12 13 15 18 20 22 24 27 29 30 35 39 43

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

iii

TUGAS MODUL HTML

BAB I PENGENALAN HTML

1.1 PENGERTIAN HTML HTML singkatan dari Hyper Text Markup Language merupakan salah satu format atau kode yang digunakan untuk pembuatan aplikasi atau document yang berada di halaman web. Basic HTML , terdiri dari: 1. 2. 3. 4. 5. Hypertext Tags dan elements Text formatting Lists, hyperlinks, images Table, frames

1.2 DASAR DASAR HTML HTTP (hypertext transfer protocol) merupakan symbol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer data-data web yang ditulis atau berformat HTML. Elemen HTML biasanya berupa tag-tag yang berpasangan dan setiap tag ditandai dengan symbol ` <` dan ` >` tanpa tanda kutip . Pasangan dari sebuah tag ditandai dengan tanda `/ ` dan ini menunjukan penutupan suatu tag .

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

BAB II PEMBAHASAN HTML

2.1 HTML Introduction/ Penghantar

Apa itu HTML? HTML adalah bahasa untuk mendeskripsikan halaman web.

HTML singkatan Hyper Text Markup Language HTML bukanlah bahasa pemrograman, itu adalah bahasa markup Sebuah bahasa markup adalah seperangkat tag markup HTML menggunakan tag markup untuk mendeskripsikan halaman web Tag HTML HTML markup tag biasanya disebut tag HTML

Tag HTML adalah kata kunci dikelilingi oleh sudut kurung seperti <HTML> Tag HTML secara normal selalu berpasangan seperti <b> dan </ b> Tag pertama dalam pasangan adalah tag pembuka, tag kedua adalah tag akhir Mulai dan tag akhir juga disebut tag pembuka dan tag penutup Dokumen HTML = Halaman Web

Dokumen HTML menjelaskan halaman web Dokumen HTML berisi tag HTML dan teks biasa Dokumen HTML juga disebut halaman web Tujuan dari web browser (seperti Internet Explorer atau Firefox) adalah untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Browser tidak menampilkan tag HTML, tetapi menggunakan tag untuk menafsirkan isi dari halaman tersebut:

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

contoh beserta gambar: <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Hasil Melalui Mozila Firefox

Contoh Dijelaskan

Teks di antara <HTML> dan </ HTML> menjelaskan halaman web Teks di antara <body> dan </ body> adalah isi halaman yang terlihat Teks di antara <h1> dan </ h1> ditampilkan sebagai judul Teks di antara <p> dan </ p> ditampilkan sebagai sebuah paragraph

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

2.2 HTML Basic/ Dasar

HTML Pos Judul HTML didefinisikan dengan tag h1 untuk <h6>. Contoh <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> HTML Paragraf Paragraf HTML didefinisikan dengan tag <p>. Contoh <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML Link Link HTML didefinisikan dengan tag <a>. Contoh <a href="http://www.w3schools.com">This is a link</a> Catatan: Alamat link ditentukan dalam atribut href. (Anda akan belajar tentang atribut dalam bab selanjutnya dari tutorial ini). HTML Gambar Gambar HTML didefinisikan dengan tag <img>. Contoh <img src="w3schools.jpg" width="104" height="142" /> Catatan: Nama dan ukuran gambar disediakan sebagai atribut

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

2.3 HTML Elemen

Elemen HTML Sebuah elemen HTML adalah segalanya dari tag tag mulai akhir: Mulai * tag <p> <a href="default.htm"> <br /> Elemen konten Ini adalah paragraf Ini adalah link Akhir tag * </ P> </ A>

* Tag awal sering disebut tag pembuka . Tag akhir sering disebut tag penutup . Sintaks HTML Elemen

Sebuah elemen HTML dimulai dengan tag tag / pembuka dimulai Sebuah elemen HTML diakhiri dengan tag tag / penutupan akhir Para Isi elemen adalah segalanya antara awal dan tag akhir Beberapa elemen HTML memiliki konten kosong Elemen kosong ditutup pada tag mulai Sebagian besar elemen HTML dapat memiliki atribut

Tip: Anda akan belajar tentang atribut dalam bab berikutnya dari tutorial ini. Bersarang HTML Elemen Sebagian besar elemen HTML dapat bersarang (dapat berisi elemen HTML lainnya). Dokumen HTML terdiri dari unsur HTML bersarang. Contoh Dokumen HTML <html> <body> <p>This is my first paragraph.</p> </body> Contoh di atas berisi 3 elemen HTML. </html>

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

Contoh HTML Dijelaskan Elemen <p>: <p>This is my first paragraph.</p> Elemen <p> mendefinisikan sebuah paragraf dalam dokumen HTML. Elemen ini memiliki tag awal <p> dan tag akhir </ p>. Isi elemen adalah: Ini adalah paragraf pertama saya. Elemen <body>: <body> <p>This is my first paragraph.</p> </body> Elemen <body> mendefinisikan tubuh dari dokumen HTML. elemen ini memiliki tag awal <body> dan tag akhir </ body>. Isi elemen adalah elemen HTML lain (ap elemen). Elemen <HTML>: <html> <body> <p>This is my first paragraph.</p> </body> </html> Elemen <HTML> mendefinisikan dokumen HTML secara keseluruhan. elemen ini memiliki tag awal dan tag <HTML> akhir </ HTML>. Isi elemen adalah elemen HTML lain (elemen body). Jangan Lupakan Tag Akhir Beberapa elemen HTML mungkin menampilkan dengan benar bahkan jika Anda lupa tag akhir: <p>This is a paragraph <p>This is a paragraph

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

Contoh di atas bekerja di kebanyakan browser, karena tag penutup dianggap opsional. Jangan bergantung pada ini. Banyak elemen HTML akan menghasilkan hasil yang tak terduga dan / atau kesalahan jika Anda lupa tag akhir. Elemen HTML Kosong Elemen HTML dengan tidak ada konten yang disebut elemen kosong. <br> adalah elemen kosong tanpa tag penutup (tag <br> mendefinisikan satu baris). Tip: Dalam XHTML, semua elemen harus ditutup. Menambahkan garis miring di dalam tag mulai, seperti <br />, adalah cara yang tepat untuk menutup elemen kosong dalam XHTML (dan XML). HTML Tip: Gunakan Tag Kecil Tag HTML tidak case sensitif: <P> berarti sama seperti <p>. Banyak situs web menggunakan tag HTML huruf besar. W3Schools menggunakan tag huruf kecil, karena Web Consortium Dunia Luas (W3C) merekomendasikan lowercase dalam HTML 4, dan tuntutan tag huruf kecil dalam XHTML.

2.4 HTML Attributes/ Atribut

Elemen HTML dapat memiliki atribut Atribut memberikan informasi tambahan tentang elemen Atribut selalu ditentukan dalam tag awal Atribut datang dalam pasangan nama / nilai seperti: nama = "nilai"

Atribut Contoh Link HTML didefinisikan dengan tag <a>. Alamat link yang ditentukan dalam atribut href: Contoh <a href="http://www.w3schools.com">This is a link</a>

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

2.5 HTML Headings/ HTML Pos

Heading / Pos didefinisikan dengan tag <h1> untuk <h6>. <h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan pos paling tidak penting. Contoh <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> Pos Apakah Penting Gunakan judul HTML untuk judul saja. Jangan gunakan judul untuk membuat teks BESAR atau tebal . Mesin pencari menggunakan judul Anda ke indeks struktur dan isi dari halaman web Anda. Karena pengguna dapat skim halaman Anda dengan judul, adalah penting untuk menggunakan pos untuk menunjukkan struktur dokumen. Judul H1 harus digunakan sebagai judul utama, diikuti dengan judul H2, maka H3 pos yang kurang penting, dan sebagainya. HTML Baris Para <hr /> tag menciptakan garis horizontal dalam sebuah halaman HTML. Unsur jam dapat digunakan untuk konten terpisah: Contoh <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> HTML Komentar Komentar dapat disisipkan ke dalam kode HTML untuk membuatnya lebih mudah dibaca dan dimengerti. Komentar diabaikan oleh browser dan tidak ditampilkan.

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

TUGAS MODUL HTML

Komentar ditulis seperti ini: Contoh <!-- This is a comment --> Tips HTML - Cara Lihat Sumber HTML Pernahkah Anda melihat halaman Web dan bertanya-tanya "Hei! Bagaimana mereka melakukan itu?" Untuk mengetahui, klik kanan pada halaman dan pilih "View Source" (IE) atau "View Page Source" (Firefox), atau serupa untuk browser lainnya. Ini akan membuka jendela yang berisi kode HTML dari halaman. Tag HTML Referensi W3Schools referensi tag 'berisi informasi tambahan tentang tag dan atribut mereka. Anda akan mempelajari lebih lanjut tentang tag HTML dan atribut dalam bab-bab berikutnya dari tutorial ini. Tag <html> <body> <h1> untuk <h6> <hr /> <!--> Deskripsi Mendefinisikan sebuah dokumen HTML Mendefinisikan tubuh dokumen Mendefinisikan judul HTML Mendefinisikan sebuah garis horizontal Mendefinisikan komentar

2.6 HTML Paragraphs/ Paragraf HTML

Paragraf didefinisikan dengan tag <p>. Contoh <p>This is a paragraph</p> <p>This is another paragraph</p> Catatan: Browser secara otomatis menambahkan baris kosong sebelum dan sesudah paragraf. Jangan Lupakan Tag Akhir Kebanyakan browser akan menampilkan HTML dengan benar bahkan jika Anda lupa tag akhir:
[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE 9

TUGAS MODUL HTML

Contoh <p>This is a paragraph <p>This is another paragraph

Contoh di atas akan bekerja di hampir semua browser, tapi jangan bergantung pada itu. Melupakan tag akhir dapat menghasilkan hasil yang tidak diharapkan atau kesalahan. Catatan: Masa Depan versi HTML tidak akan memungkinkan Anda untuk melewatkan tag akhir. HTML Line Breaks Gunakan tag <br /> jika Anda ingin istirahat baris (baris baru) tanpa perlu memulai sebuah paragraf baru: Contoh <p>This is<br />a para<br />graph with line breaks</p> Unsur <br /> adalah elemen HTML yang kosong. Tidak memiliki tag penutup. <br> atau <br /> Dalam XHTML, XML, elemen tanpa tag penutup (tag penutup) tidak diperbolehkan. Bahkan jika bekerja <br> di semua browser, menulis <br /> bukan bekerja lebih baik dalam aplikasi XHTML dan XML. HTML Output - Tips Berguna Anda tidak bisa yakin bagaimana HTML akan ditampilkan. Layar besar atau kecil, dan jendela ukurannya akan menciptakan hasil yang berbeda. Dengan HTML, Anda tidak dapat mengubah output dengan menambahkan spasi ekstra atau baris ekstra dalam kode HTML Anda. Browser akan menghapus spasi ekstra dan garis ekstra saat halaman ditampilkan. Setiap jumlah baris dihitung sebagai satu baris, dan sejumlah ruang dihitung sebagai satu spasi. Tag HTML Referensi W3Schools referensi tag 'berisi informasi tambahan tentang elemen HTML dan atribut mereka.
[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE 1 0

TUGAS MODUL HTML

Tag <p> <br />

Deskripsi Mendefinisikan sebuah paragraf Menyisipkan line break tunggal

2.7 HTML Formatting/ Memformat HTML

HTML Memformat Teks This text is bold This text is big This text is italic This is computer output This is subscript and superscript Memformat Teks Tag HTML Tag <b> <big> <em> <i> <small> <strong> <sub> <sup> <ins> <del> Deskripsi Mendefinisikan teks tebal Mendefinisikan teks besar Mendefinisikan teks menekankan Mendefinisikan teks miring Mendefinisikan teks kecil Mendefinisikan teks yang kuat Mendefinisikan teks subscript Mendefinisikan teks superscripted Mendefinisikan teks dimasukkan Mendefinisikan teks yang dihapus

HTML "Output Komputer" Tag Tag <code> <kbd> <samp> <tt> <var> <pre> Deskripsi Mendefinisikan teks kode komputer Mendefinisikan teks Keyboard Mendefinisikan sampel kode komputer Mendefinisikan teks teletype Mendefinisikan variabel Mendefinisikan teks terformat

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

1 1

TUGAS MODUL HTML

Kutipan HTML, Kutipan, dan Tag Definisi Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Deskripsi Mendefinisikan singkatan Mendefinisikan akronim Mendefinisikan informasi kontak untuk penulis / pemilik dokumen Mendefinisikan arah teks Mendefinisikan sebuah kutipan panjang Mendefinisikan sebuah kutipan singkat Mendefinisikan kutipan Mendefinisikan sebuah istilah definisi

2.8 HTML Fonts

Tag HTML <font> TIDAK Harus Digunakan Tag <font> didepresiasi dalam HTML 4, dan dihapus dari HTML5. Dunia Web Consortium Luas (W3C) telah menghilangkan tag <font> dari rekomendasinya. Dalam HTML 4, style sheet (CSS) harus digunakan untuk mendefinisikan sifat layout dan tampilan untuk elemen HTML banyak. Contoh di bawah ini menunjukkan bagaimana HTML bisa terlihat dengan menggunakan tag <font>: Contoh <p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p> <p> <font size="3" face="verdana" color="blue"> This paragraph is in Verdana, size 3, and in blue text color. </font> </p>

[Type the company name] | NEW MEDIA INTERACTIVE COMPUTER COLLEGE

1 2

TUGAS MODUL HTML

2.9 HTML Styles

CSS digunakan untuk elemen HTML gaya.

Lihat! Gaya dan warna Teks ini adalah dalam Verdana dan merah Teks ini dalam Times dan biru Teks ini adalah 30 piksel tinggi

Styling HTML dengan CSS CSS diperkenalkan bersama-sama dengan HTML 4, untuk menyediakan cara yang lebih baik untuk elemen HTML gaya. CSS dapat ditambahkan ke HTML dengan cara berikut:

dalam file style sheet yang terpisah (file CSS) dalam elemen style di bagian kepala HTML dalam atribut style pada elemen HTML tunggal

Menggunakan Atribut HTML Style Hal ini memakan waktu dan sangat tidak praktis untuk elemen HTML gaya menggunakan atribut style. Cara yang disukai untuk menambahkan CSS untuk HTML, adalah untuk menempatkan sintaks CSS pada file CSS yang terpisah. Namun, dalam tutorial ini kami akan memperkenalkan HTML Anda untuk CSS menggunakan atribut style. Hal ini dilakukan untuk menyederhanakan contoh. Hal ini juga membuat lebih mudah bagi Anda untuk mengedit kode dan mencoba sendiri.

[Type the company name] | Lihat! Gaya dan warna

1 3

TUGAS MODUL HTML

HTML Contoh Gaya - Warna Latar Belakang Properti background-color mendefinisikan warna latar belakang untuk elemen: Contoh <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html> HTML Contoh Gaya - Font, Warna dan Ukuran Font-keluarga, warna, dan font-size mendefinisikan properti font, warna, dan ukuran teks dalam suatu elemen: Contoh <html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body> </html> HTML Contoh Gaya - Alignment Teks Properti text-align menentukan keselarasan horizontal teks dalam suatu elemen: Contoh <html> <body> <h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html>

[Type the company name] | Lihat! Gaya dan warna

1 4

TUGAS MODUL HTML

Tags usang dan Atribut Dalam HTML 4, tag dan beberapa atribut usang. Usang berarti bahwa mereka tidak akan didukung dalam versi masa depan dari HTML. Pesannya adalah jelas: Hindari menggunakan tag dan atribut usang! Tag dan atribut harus dihindari: Tags <center> <font> dan <basefont> <s> dan <strike> <u> Atribut meluruskan bgcolor warna Deskripsi Usang. Mendefinisikan konten berpusat Usang. Mendefinisikan font HTML Usang. Mendefinisikan teks strikethrough Usang. Mendefinisikan teks yang digarisbawahi Deskripsi Usang. Mendefinisikan alignment teks Usang. Mendefinisikan warna latar belakang Usang. Mendefinisikan warna teks

2.10 HTML Links

Link yang ditemukan di hampir semua halaman web. Link memungkinkan pengguna untuk mengklik jalan mereka dari halaman ke halaman. HTML Hyperlink (Link) Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen baru atau bagian baru dalam dokumen ini. Bila Anda memindahkan kursor ke suatu link di halaman web, tanda panah akan berubah menjadi tangan kecil. Link yang ditentukan dalam HTML menggunakan tag <a>. Tag <a> dapat digunakan dalam dua cara: 1. Untuk membuat link ke dokumen lain, dengan menggunakan atribut href 1. Untuk membuat bookmark di dalam dokumen, dengan menggunakan nama atribut

[Type the company name] | Lihat! Gaya dan warna

1 5

TUGAS MODUL HTML

Sintaks HTML Tautan Kode HTML untuk link sederhana. Ini terlihat seperti ini: <a href="url">Link text</a> Atribut href menentukan tujuan link. Contoh <a href="http://www.w3schools.com/">Visit W3Schools</a> yang akan menampilkan seperti ini: W3Schools Kunjungi Mengklik hyperlink ini akan mengirim pengguna ke situs W3Schools '. Tip: The " teks link "tidak harus berupa teks. Hal ini dapat gambar atau elemen HTML lainnya. Link HTML - Atribut target yang Atribut target menentukan di mana untuk membuka dokumen terkait. Contoh di bawah ini akan membuka dokumen terkait dalam jendela browser baru atau tab baru: Contoh <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> Link HTML - Atribut Nama Atribut name menspesifikasikan nama anchor. Atribut name digunakan untuk membuat bookmark di dalam sebuah dokumen HTML. Catatan: standar HTML5 mendatang menyarankan menggunakan atribut id bukan nama atribut untuk menentukan nama anchor. Menggunakan atribut id benar-benar bekerja juga untuk HTML4 di semua browser modern. Bookmark tidak ditampilkan dalam cara khusus. Mereka terlihat bagi pembaca.

[Type the company name] | Lihat! Gaya dan warna

1 6

TUGAS MODUL HTML

Contoh Sebuah named anchor di dalam sebuah dokumen HTML: <a name="tips">Useful Tips Section</a> Buat link ke "Bagian Tips Berguna" di dalam dokumen yang sama: <a href="#tips">Visit the Useful Tips Section</a> Atau, membuat link ke "Tips Berguna Bagian" dari halaman lain: <a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a>

Catatan Dasar - Tips Berguna Catatan: Selalu menambahkan trailing slash untuk referensi subfolder. Jika Anda link seperti ini: href = "http://www.w3schools.com/html", Anda akan menghasilkan dua permintaan ke server, server akan menambahkan garis miring pertama untuk alamat, dan kemudian membuat permintaan baru seperti ini : href = "http://www.w3schools.com/html/". Tip: jangkar Named sering digunakan untuk membuat "daftar isi" di awal sebuah dokumen yang besar. Setiap bab dalam dokumen diberikan anchor bernama, dan link ke masing-masing jangkar diletakkan di bagian atas dokumen. HTML Tags Tautan Tag <a> Deskripsi Mendefinisikan anchor

[Type the company name] | Lihat! Gaya dan warna

1 7

TUGAS MODUL HTML

2.11 HTML Images/ Gambar

Contoh Norwegian Mountain Trip

HTML Gambar - Tag <img> dan Atribut Src Dalam HTML, gambar didefinisikan dengan tag <img>. Tag <img> kosong, yang berarti bahwa itu hanya berisi atribut, dan tidak memiliki tag penutup. Untuk menampilkan sebuah gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "sumber". Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan. Sintaks untuk mendefinisikan gambar: <img src="url" alt="some_text"/> URL menunjuk ke lokasi di mana gambar disimpan. Sebuah gambar bernama "boat.gif", yang terletak di direktori "images" pada "www.w3schools.com" memiliki URL: http://www.w3schools.com/images/boat.gif. Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, kemudian gambar, dan kemudian paragraf kedua. HTML Gambar - Atribut Alt

[Type the company name] | Lihat! Gaya dan warna

1 8

TUGAS MODUL HTML

Atribut alt diperlukan menentukan sebuah teks alternatif untuk gambar, jika gambar tidak dapat ditampilkan. Nilai atribut alt adalah seorang penulis-didefinisikan teks: <img src="boat.gif" alt="Big Boat" /> Atribut alt menyediakan informasi alternatif bagi gambar jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar). HTML Gambar - Mengatur Tinggi dan Lebar dari suatu Gambar Tinggi dan atribut lebar digunakan untuk menentukan tinggi dan lebar dari suatu gambar. Nilai atribut yang ditetapkan dalam piksel secara default: <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" /> Tip: Ini adalah praktik yang baik untuk menentukan baik tinggi dan atribut lebar untuk gambar. Jika atribut ini ditetapkan, ruang yang diperlukan untuk gambar dicadangkan saat halaman dimuat. Namun, tanpa atribut-atribut ini, browser tidak mengetahui ukuran gambar. Efeknya akan bahwa tata letak halaman akan berubah selama pemuatan (sedangkan beban gambar). Catatan Dasar - Tips Berguna Catatan: Jika sebuah file HTML berisi sepuluh gambar - sebelas file yang dibutuhkan untuk menampilkan halaman yang tepat. Gambar loading membutuhkan waktu, jadi saran saya yang terbaik adalah: gambar Gunakan hatihati. Catatan: Ketika sebuah halaman web dimuat, itu adalah browser, pada saat itu, yang benar-benar mendapatkan gambar dari server web dan memasukkan ke dalam halaman. Karena itu, pastikan bahwa gambar sebenarnya tinggal di tempat yang sama dalam hubungannya dengan halaman web, jika pengunjung Anda akan mendapatkan ikon link rusak. Ikon broken link ditampilkan jika browser tidak dapat menemukan gambar. HTML Tags Gambar Tag <img /> <map> <area /> Deskripsi Mendefinisikan gambar Mendefinisikan gambar-peta Mendefinisikan daerah yang dapat diklik dalam sebuah peta gambar-

[Type the company name] | Lihat! Gaya dan warna

1 9

TUGAS MODUL HTML

2.12 HTML Table/ Tabel HTML

Tabel HTML Apel Pisang Jeruk Lainnya Tabel HTML Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi baris (dengan tag tr), dan setiap baris dibagi menjadi sel-sel data (dengan tag <td>). td singkatan dari "data tabel", dan memegang isi sel data. Sebuah tag <td> dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll Tabel Contoh <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 44% 23% 13% 10%

Bagaimana kode HTML di atas terlihat dalam browser: baris 1, sel 1 baris 2, sel 1 baris 1, sel 2 baris 2, sel 2

Tabel HTML dan Atribut Perbatasan Jika Anda tidak menentukan atribut perbatasan, tabel akan ditampilkan tanpa batas. Kadang-kadang ini dapat berguna, tetapi sebagian besar waktu, kita ingin menunjukkan perbatasan.

[Type the company name] | Lihat! Gaya dan warna

2 0

TUGAS MODUL HTML

Untuk menampilkan tabel dengan perbatasan, menentukan atribut perbatasan: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> Header Tabel HTML Informasi header dalam tabel didefinisikan dengan tag <th>. Semua browser utama akan menampilkan teks dalam elemen <th> sebagai tebal dan terpusat. <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Bagaimana kode HTML di atas terlihat pada browser Anda: Header 1 baris 1, sel 1 baris 2, sel 1 Header 2 baris 1, sel 2 baris 2, sel 2

Tabel HTML Tag Tag <table> <th> <tr> <td> Deskripsi Mendefinisikan tabel Mendefinisikan sebuah header tabel Mendefinisikan sebuah baris tabel Mendefinisikan sebuah sel tabel
[Type the company name] | Lihat! Gaya dan warna 2 1

TUGAS MODUL HTML

<caption> <colgroup> <col /> <thead> <tbody> <tfoot>

Mendefinisikan sebuah caption tabel Mendefinisikan sekelompok kolom dalam sebuah tabel, untuk format Mendefinisikan nilai atribut untuk satu atau lebih kolom dalam sebuah tabel Grup isi header dalam tabel Grup isi tubuh dalam sebuah tabel Kelompok footer konten dalam sebuah tabel

2.13 HTML Lists/ HTML Daftar

Daftar HTML yang paling umum adalah memerintahkan dan daftar unordered: HTML Daftar An ordered list: 1. 2. 3. The first list item The second list item The third list item An unordered list:

List item List item List item

Unordered Lists HTML Unordered list dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan peluru (lingkaran hitam biasanya kecil). <ul> <li>Coffee</li> <li>Milk</li> </ul> Bagaimana kode HTML di atas terlihat dalam browser:

Kopi Susu

[Type the company name] | Lihat! Gaya dan warna

2 2

TUGAS MODUL HTML

HTML Memerintahkan Daftar Ordered list dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan angka. <ol> <li>Coffee</li> <li>Milk</li> </ol> Bagaimana kode HTML di atas terlihat dalam browser: 1. 2. Kopi Susu

Daftar Definisi HTML Sebuah daftar definisi adalah daftar item, dengan deskripsi dari setiap item. Tag <dl> mendefinisikan daftar definisi. Tag <dl> digunakan dalam hubungannya dengan <dt> (mendefinisikan item dalam daftar) dan <dd> (menjelaskan item dalam daftar): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> Bagaimana kode HTML di atas terlihat dalam browser: Kopi - Minuman panas hitam Susu - Minuman dingin putih

[Type the company name] | Lihat! Gaya dan warna

2 3

TUGAS MODUL HTML

Catatan Dasar - Tips Berguna Tip: Di dalam sebuah item daftar Anda dapat menempatkan jeda baris teks, gambar, link, daftar lainnya, dll HTML Tags Daftar Tag <ol> <ul> <li> <dl> <dt> <dd> Deskripsi Mendefinisikan daftar ordered Mendefinisikan daftar unordered Mendefinisikan sebuah item daftar Mendefinisikan sebuah daftar definisi Mendefinisikan item dalam daftar definisi Mendefinisikan deskripsi dari item dalam daftar definisi

2.14 HTML Forms/ Form HTML Form HTML digunakan untuk memilih berbagai jenis input pengguna. HTML Formulir Bentuk HTML digunakan untuk melewatkan data ke server. Suatu bentuk dapat berisi elemen input seperti bidang teks, checkbox, radio button, tombol submit dan banyak lagi. Bentuk A juga dapat berisi daftar pilih, textarea, fieldset, legenda, dan elemen label. Tag <form> digunakan untuk membuat sebuah form HTML: <form> . input elements . </form> Bentuk HTML - Elemen input Unsur bentuk yang paling penting adalah elemen input. Elemen input digunakan untuk memilih informasi pengguna. Sebuah elemen input dapat bervariasi dalam banyak cara, tergantung pada jenis atribut. Sebuah elemen input dapat dari bidang jenis teks, kotak centang, sandi, tombol radio, tombol submit, dan banyak lagi.

[Type the company name] | Lihat! Gaya dan warna

2 4

TUGAS MODUL HTML

Jenis input yang paling digunakan dijelaskan di bawah ini. Teks Fields <input type="text" /> mendefinisikan lapangan satu baris masukan bahwa pengguna dapat memasukkan teks ke: <form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form>

Bagaimana kode HTML di atas terlihat dalam browser: Pertama Nama: Nama Terakhir: Catatan: Bentuk itu sendiri tidak terlihat. Juga catat bahwa lebar default dari kolom teks adalah 20 karakter. Sandi Lapangan <input type="password" /> mendefinisikan field kata sandi: <form> Password: <input type="password" name="pwd" /> </form> Bagaimana kode HTML di atas terlihat dalam browser: Sandi : Catatan: Karakter dalam bidang password bertopeng (ditampilkan sebagai tanda bintang atau lingkaran). Tombol radio <input type="radio" /> mendefinisikan tombol radio. Tombol radio membolehkan user memilih HANYA SATU dari sejumlah pilihan yang terbatas: <form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form>
[Type the company name] | Lihat! Gaya dan warna 2 5

TUGAS MODUL HTML

Bagaimana kode HTML di atas terlihat dalam browser: Laki-laki Perempuan Checkbox <input type="checkbox" /> mendefinisikan sebuah kotak centang. Checkbox membolehkan user pilih SATU atau LEBIH pilihan dari sejumlah pilihan yang terbatas. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form> Bagaimana kode HTML di atas terlihat dalam browser: Saya memiliki sepeda Saya memiliki mobil Tombol Kirim <input type="submit" /> mendefinisikan sebuah tombol submit. Sebuah tombol submit digunakan untuk mengirim data formulir ke server. Data dikirim ke halaman tertentu dalam atribut action form. File didefinisikan dalam atribut action biasanya melakukan sesuatu dengan input yang diterima: <form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form> Bagaimana kode HTML di atas terlihat dalam browser: Username:
Menyerahkan

Jika Anda mengetik beberapa karakter dalam kolom teks di atas, dan klik tombol "Kirim", browser akan mengirimkan masukan Anda ke halaman yang disebut "html_form_action.asp". Halaman ini akan menunjukkan input yang diterima.

[Type the company name] | Lihat! Gaya dan warna

2 6

TUGAS MODUL HTML

Formulir HTML Tag Tag <form> <input /> <textarea> <label> <fieldset> <legend> <select> <optgroup> <option> <button> Deskripsi Mendefinisikan sebuah form HTML untuk input pengguna Mendefinisikan kontrol input Mendefinisikan sebuah kontrol multi-baris teks masukan Mendefinisikan label untuk suatu elemen input Mendefinisikan sebuah perbatasan di sekitar elemen dalam bentuk Mendefinisikan sebuah caption untuk elemen fieldset Mendefinisikan daftar pilih (daftar drop-down) Mendefinisikan kelompok pilihan yang terkait dalam daftar pilih Mendefinisikan pilihan dalam daftar pilih Mendefinisikan sebuah tombol push

2.15 HTML Frames/ HTML Frame

Dengan frame, beberapa halaman Web dapat ditampilkan di jendela browser yang sama. PERHATIAN. Jangan berharap frame yang akan didukung pada versi mendatang dari HTML. HTML Frame Dengan frame, Anda dapat menampilkan lebih dari satu dokumen HTML di jendela browser yang sama. Setiap dokumen HTML disebut sebuah frame, dan setiap frame adalah independen dari yang lain. Kelemahan dari menggunakan frame adalah:

Frame yang tidak diharapkan akan didukung pada versi mendatang dari HTML Frame sulit untuk digunakan. (Mencetak seluruh halaman sulit). Pengembang web harus melacak dokumen HTML lebih

Elemen HTML frameset Elemen frameset memegang satu atau lebih elemen frame. Setiap elemen frame dapat memegang dokumen yang terpisah. Elemen frameset menyatakan BERAPA BANYAK kolom atau baris akan ada dalam rangkaian bingkai, dan berapa banyak persentase / pixel dari ruang akan menempati masing-masing.

[Type the company name] | Lihat! Gaya dan warna

2 7

TUGAS MODUL HTML

Elemen HTML bingkai Tag <frame> mendefinisikan satu jendela tertentu (frame) dalam sebuah frameset. Pada contoh di bawah kita memiliki sebuah frameset dengan dua kolom. Kolom pertama diatur ke 25% dari lebar jendela browser. Kolom kedua adalah set ke 75% dari lebar jendela browser. Dokumen "frame_a.htm" adalah dimasukkan ke dalam kolom pertama, dan dokumen "frame_b.htm" adalah dimasukkan ke dalam kolom kedua: <frameset cols="25%,75%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> </frameset>

Catatan: Ukuran kolom frameset juga dapat diatur dalam pixel (cols = "200.500"), dan salah satu kolom dapat diatur untuk menggunakan ruang yang tersisa, dengan asterisk (cols = "25 %,*"). Catatan Dasar - Tips Berguna Tip: Jika sebuah frame memiliki batas terlihat, pengguna dapat mengubah ukuran dengan menarik perbatasan. Untuk mencegah pengguna dari melakukan ini, Anda dapat menambahkan noresize = "noresize" ke tag <frame>. Catatan: Tambahkan tag <noframes> untuk browser yang tidak mendukung frame. Penting: Anda tidak dapat menggunakan </ body> tag <body> bersama-sama dengan <frameset> </ frameset> tag! Namun, jika Anda menambahkan sebuah tag <noframes> berisi beberapa teks untuk browser yang tidak mendukung frame, Anda harus mengapit teks dengan <body> </ body> tag! Lihat bagaimana hal itu dilakukan dalam contoh pertama di bawah ini. HTML Tags Bingkai Tag <frameset> <FRAME /> <noframes> Deskripsi Mendefinisikan satu set frame Mendefinisikan sebuah sub window (frame) Mendefinisikan bagian noframe untuk browser yang tidak menangani frame

[Type the company name] | Lihat! Gaya dan warna

2 8

TUGAS MODUL HTML

2.16 HTML Iframes

Iframe ini digunakan untuk menampilkan halaman web dalam halaman web. Sintaks untuk menambahkan iframe: <iframe src="URL"></iframe> URL menunjuk ke lokasi dari halaman yang terpisah. Iframe - Mengatur Tinggi dan Lebar Tinggi dan atribut lebar digunakan untuk menentukan tinggi dan lebar dari iframe. Nilai atribut yang ditetapkan dalam pixel secara default, tetapi mereka juga dapat dalam persen (seperti "80%"). Contoh <iframe src="demo_iframe.htm" width="200" height="200"></iframe> Iframe - Hapus Perbatasan Atribut frameborder menentukan apakah atau tidak untuk menampilkan perbatasan sekitar iframe. Mengatur nilai atribut untuk "0" untuk menghapus perbatasan: Contoh <iframe src="demo_iframe.htm" frameborder="0"></iframe> Menggunakan iframe sebagai Sasaran untuk sebuah Link Iframe dapat digunakan sebagai kerangka target untuk link. Atribut target link harus mengacu pada nama atribut iframe: Contoh <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
[Type the company name] | Lihat! Gaya dan warna 2 9

TUGAS MODUL HTML

Tag HTML iframe Tag <iframe> Deskripsi Mendefinisikan sebuah inline sub window (frame)

2.17 HTML Color/ Warna HTML

Warna yang ditampilkan menggabungkan MERAH, HIJAU, BIRU dan cahaya. Warna Nilai Warna HTML didefinisikan menggunakan notasi heksadesimal (HEX) untuk kombinasi Merah, Hijau, dan nilai-nilai warna Biru (RGB). Nilai terendah yang dapat diberikan kepada salah satu sumber cahaya adalah 0 (dalam Hex: 00). Nilai tertinggi adalah 255 (dalam Hex: FF). Nilai HEX ditetapkan sebagai 3 pasang dari dua digit angka, dimulai dengan tanda #. Warna Nilai Warna Warna HEX # 000000 # FF0000 # 00FF00 # 0000FF # FFFF00 # 00FFFF # FF00FF # C0C0C0 # FFFFFF 16 Juta Warna Berbeda Kombinasi Merah, Hijau, Biru dan nilai-nilai dari 0 sampai 255, memberikan lebih dari 16 juta warna yang berbeda (256 x 256 x 256). Jika Anda melihat tabel warna di bawah ini, Anda akan melihat hasil dari berbagai cahaya merah dari 0 sampai 255, sementara menjaga lampu hijau dan biru pada nol.
[Type the company name] | Lihat! Gaya dan warna 3 0

Warna RGB rgb (0,0,0) rgb (255,0,0) rgb (0,255,0) rgb (0,0,255) rgb (255,255,0) rgb (0255255) rgb (255,0,255) rgb (192192192) rgb (255255255)

TUGAS MODUL HTML

Untuk melihat daftar penuh warna campuran ketika MERAH bervariasi dari 0 sampai 255, klik pada salah satu HEX atau nilai RGB di bawah ini. Lampu merah Warna HEX # 000000 # 080000 # 100000 # 180000 # 200000 # 280000 # 300000 # 380000 # 400000 # 480000 # 500000 # 580000 # 600000 # 680000 # 700000 # 780000 # 800000 # 880000 # 900000 # 980000 # A00000 # A80000 # B00000 # B80000 # C00000 # C80000 # D00000 # D80000 # E00000 # E80000 # F00000 # F80000 # FF0000 Warna RGB rgb (0,0,0) rgb (8,0,0) rgb (16,0,0) rgb (24,0,0) rgb (32,0,0) rgb (40,0,0) rgb (48,0,0) rgb (56,0,0) rgb (64,0,0) rgb (72,0,0) rgb (80,0,0) rgb (88,0,0) rgb (96,0,0) rgb (104,0,0) rgb (112,0,0) rgb (120,0,0) rgb (128,0,0) rgb (136,0,0) rgb (144,0,0) rgb (152,0,0) rgb (160,0,0) rgb (168,0,0) rgb (176,0,0) rgb (184,0,0) rgb (192,0,0) rgb (200,0,0) rgb (208,0,0) rgb (216,0,0) rgb (224,0,0) rgb (232,0,0) rgb (240,0,0) rgb (248,0,0) rgb (255,0,0)

[Type the company name] | Lihat! Gaya dan warna

3 1

TUGAS MODUL HTML

Nuansa Gray Warna abu-abu yang dibuat dengan menggunakan jumlah yang sama daya ke semua sumber cahaya. Untuk membuatnya lebih mudah bagi Anda untuk memilih warna yang benar, kami telah membuat sebuah tabel nuansa abu-abu untuk Anda: Gray Shades Warna HEX # 000000 # 080808 # 101010 # 181818 # 202020 # 282828 # 303030 # 383838 # 404040 # 484848 # 505050 # 585858 # 606060 # 686868 # 707070 # 787878 # 808080 # 888888 # 909090 # 989898 # A0A0A0 # A8A8A8 # B0B0B0 # B8B8B8 # C0C0C0 # C8C8C8 # D0D0D0 Warna RGB rgb (0,0,0) rgb (8,8,8) rgb (16,16,16) rgb (24,24,24) rgb (32,32,32) rgb (40,40,40) rgb (48,48,48) rgb (56,56,56) rgb (64,64,64) rgb (72,72,72) rgb (80,80,80) rgb (88,88,88) rgb (96,96,96) rgb (104104104) rgb (112112112) rgb (120120120) rgb (128128128) rgb (136136136) rgb (144144144) rgb (152152152) rgb (160160160) rgb (168168168) rgb (176176176) rgb (184184184) rgb (192192192) rgb (200200200) rgb (208208208)
3 2

[Type the company name] | Lihat! Gaya dan warna

TUGAS MODUL HTML

# D8D8D8 # E0E0E0 # E8E8E8 # F0F0F0 # F8F8F8 # FFFFFF

rgb (216216216) rgb (224224224) rgb (232232232) rgb (240240240) rgb (248248248) rgb (255255255)

Warna Safe Web? Beberapa tahun lalu, ketika komputer didukung maks 256 warna yang berbeda, daftar 216 "Warna Safe Web" diusulkan sebagai standar Web, sisakan 40 warna sistem tetap. The 216 lintas-browser palet warna diciptakan untuk memastikan bahwa semua komputer akan menampilkan warna dengan benar ketika menjalankan sebuah palet warna 256. Hal ini tidak penting hari ini, karena kebanyakan komputer dapat menampilkan jutaan warna yang berbeda. Anyway, di sini adalah daftar:
000000 003300 006600 009900 00CC00 00FF00 330000 333300 336600 339900 33CC00 33FF00 660000 000033 003333 006633 009933 00CC33 00FF33 330033 333333 336633 339933 33CC33 33FF33 660033 000066 003366 006666 009966 00CC66 00FF66 330066 333366 336666 339966 33CC66 33FF66 660066 000099 003399 006699 009999 00CC99 00FF99 330099 333399 336699 339999 33CC99 33FF99 660099 0000CC 0033CC 0066CC 0099CC 00CCCC 00FFCC 3300CC 3333CC 3366CC 3399CC 33CCCC 33FFCC 6600CC 0000FF 0033FF 0066FF 0099FF 00CCFF 00FFFF 3300FF 3333FF 3366FF 3399FF 33CCFF 33FFFF 6600FF

[Type the company name] | Lihat! Gaya dan warna

3 3

TUGAS MODUL HTML

663300 666600 669900 66CC00 66FF00 990000 993300 996600 999900 99CC00 99FF00 Cc0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 FF0000 FF3300 FF6600 FF9900 FFCC00 FFFF00

663333 666633 669933 66CC33 66FF33 990033 993333 996633 999933 99CC33 99FF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 FF0033 FF3333 FF6633 FF9933 FFCC33 FFFF33

663366 666666 669966 66CC66 66FF66 990066 993366 996666 999966 99CC66 99FF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 FF0066 FF3366 FF6666 FF9966 FFCC66 FFFF66

663399 666699 669999 66CC99 66FF99 990099 993399 996699 999999 99CC99 99FF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 FF0099 FF3399 FF6699 FF9999 FFCC99 FFFF99

6633CC 6666CC 6699CC 66CCCC 66FFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC CC00CC CC33CC CC66CC CC99CC Cccccc CCFFCC FF00CC FF33CC FF66CC FF99CC FFCCCC FFFFCC

6633FF 6666FF 6699FF 66CCFF 66FFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF FF00FF FF33FF FF66FF FF99FF FFCCFF FFFFFF

[Type the company name] | Lihat! Gaya dan warna

3 4

TUGAS MODUL HTML

2.18 HTML Colorname/ Nama Warna

Nama Warna Didukung oleh Semua Browser 147 nama warna yang didefinisikan dalam HTML dan CSS spesifikasi warna (17 warna standar ditambah 130 lebih). Tabel di bawah ini daftar mereka semua, bersama dengan nilai-nilai heksadesimal mereka. Tip: The 17 warna standar adalah: aqua, hitam, biru, fuchsia, abu-abu, abu-abu, hijau, jeruk nipis, marun, biru, zaitun, ungu, merah, perak, nyata, putih, dan kuning. Klik pada nama warna (atau nilai hex) untuk melihat warna sebagai warna latar belakang-bersama dengan warna teks yang berbeda: Diurut berdasarkan Nama Warna
Nama Warna AliceBlue AntiqueWhite Aqua Aquamarine Biru langit Krem Sup dr burung Hitam BlanchedAlmond Biru BlueViolet Coklat BurlyWood CadetBlue Minuman keras manis Coklat Karang CornflowerBlue Cornsilk Merah tua Cyan Biru tua DarkCyan HEX # F0F8FF # FAEBD7 # 00FFFF # 7FFFD4 # F0FFFF # F5F5DC # FFE4C4 # 000000 # FFEBCD # 0000FF # 8A2BE2 # A52A2A # DEB887 # 5F9EA0 # 7FFF00 # D2691E # FF7F50 # 6495ED # FFF8DC # DC143C # 00FFFF # 00008B # 008B8B Warna Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran

[Type the company name] | Lihat! Gaya dan warna

3 5

TUGAS MODUL HTML

DarkGoldenRod DarkGray DarkGrey DarkGreen DarkKhaki DarkMagenta DarkOliveGreen Darkorange DarkOrchid DarkRed DarkSalmon DarkSeaGreen DarkSlateBlue DarkSlateGray DarkSlateGrey DarkTurquoise DarkViolet DeepPink DeepSkyBlue DimGray DimGrey DodgerBlue Batu bata tahan api FloralWhite ForestGreen Fuchsia Gainsboro GhostWhite Emas Goldenrod Abu-abu Abu-abu Hijau GreenYellow Honeydew HotPink IndianRed Nila Gading Dril

# B8860B # A9A9A9 # A9A9A9 # 006400 # BDB76B # 8B008B # 556B2F # FF8C00 # 9932CC # 8B0000 # E9967A # 8FBC8F # 483D8B # 2F4F4F # 2F4F4F # 00CED1 # 9400D3 # FF1493 # 00BFFF # 696969 # 696969 # 1E90FF # B22222 # FFFAF0 # 228B22 # FF00FF # DCDCDC # F8F8FF # FFD700 # DAA520 # 808080 # 808080 # 008000 # ADFF2F # F0FFF0 # FF69B4 # CD5C5C # 4B0082 # FFFFF0 # F0E68C

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran

[Type the company name] | Lihat! Gaya dan warna

3 6

TUGAS MODUL HTML

Lavender LavenderBlush LawnGreen LemonChiffon Lightblue LightCoral LightCyan LightGoldenRodYellow LightGray LightGrey LightGreen LightPink LightSalmon LightSeaGreen LightSkyBlue LightSlateGray LightSlateGrey LightSteelBlue LightYellow Kapur LimeGreen Linen Magenta Merah tua MediumAquaMarine MediumBlue MediumOrchid MediumPurple MediumSeaGreen MediumSlateBlue MediumSpringGreen MediumTurquoise MediumVioletRed Midnightblue MintCream MistyRose Sepatu sandal NavajoWhite Angkatan laut OldLace

# E6E6FA # FFF0F5 # 7CFC00 # FFFACD # ADD8E6 # F08080 # E0FFFF # FAFAD2 # D3D3D3 # D3D3D3 # 90EE90 # FFB6C1 # FFA07A # 20B2AA # 87CEFA # 778899 # 778899 # B0C4DE # FFFFE0 # 00FF00 # 32CD32 # FAF0E6 # FF00FF # 800000 # 66CDAA # 0000CD # BA55D3 # 9370D8 # 3CB371 # 7B68EE # 00FA9A # 48D1CC # C71585 # 191970 # F5FFFA # FFE4E1 # FFE4B5 # FFDEAD # 000080 # FDF5E6

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran

[Type the company name] | Lihat! Gaya dan warna

3 7

TUGAS MODUL HTML

Zaitun OliveDrab Jeruk OrangeRed Anggrek PaleGoldenRod PaleGreen PaleTurquoise PaleVioletRed PapayaWhip PeachPuff Peru Warna merah muda Prem PowderBlue Ungu Merah RosyBrown RoyalBlue SaddleBrown Ikan salmon SandyBrown SeaGreen Lokan Sienna Perak Biru langit SlateBlue SlateGray SlateGrey Salju SpringGreen SteelBlue Tan Teal Thistle Tomat Pirus Violet Gandum

# 808000 # 6B8E23 # FFA500 # FF4500 # DA70D6 # EEE8AA # 98FB98 # AFEEEE # D87093 # FFEFD5 # FFDAB9 # CD853F # FFC0CB # DDA0DD # B0E0E6 # 800080 # FF0000 # BC8F8F # 4169E1 # 8B4513 # FA8072 # F4A460 # 2E8B57 # FFF5EE # A0522D # C0C0C0 # 87CEEB # 6A5ACD # 708090 # 708090 # FFFAFA # 00FF7F # 4682B4 # D2B48C # 008080 # D8BFD8 # FF6347 # 40E0D0 # EE82EE # F5DEB3

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran Campuran

[Type the company name] | Lihat! Gaya dan warna

3 8

TUGAS MODUL HTML

Putih WhiteSmoke Kuning YellowGreen

# FFFFFF # F5F5F5 # FFFF00 # 9ACD32

Shades Shades Shades Shades

Campuran Campuran Campuran Campuran

2.19 HTML Color Value/ HTML Nilai Warna

Diurut berdasarkan Nilai Hex


Color Name Black Navy DarkBlue MediumBlue Blue DarkGreen Green Teal DarkCyan DeepSkyBlue DarkTurquoise MediumSpringGreen Lime SpringGreen Aqua Cyan MidnightBlue DodgerBlue LightSeaGreen ForestGreen SeaGreen DarkSlateGray DarkSlateGrey LimeGreen MediumSeaGreen Turquoise RoyalBlue SteelBlue DarkSlateBlue HEX #000000 #000080 #00008B #0000CD #0000FF #006400 #008000 #008080 #008B8B #00BFFF #00CED1 #00FA9A #00FF00 #00FF7F #00FFFF #00FFFF #191970 #1E90FF #20B2AA #228B22 #2E8B57 #2F4F4F #2F4F4F #32CD32 #3CB371 #40E0D0 #4169E1 #4682B4 #483D8B Color Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

[Type the company name] | Lihat! Gaya dan warna

3 9

TUGAS MODUL HTML

MediumTurquoise Indigo DarkOliveGreen CadetBlue CornflowerBlue MediumAquaMarine DimGray DimGrey SlateBlue OliveDrab SlateGray SlateGrey LightSlateGray LightSlateGrey MediumSlateBlue LawnGreen Chartreuse Aquamarine Maroon Purple Olive Gray Grey SkyBlue LightSkyBlue BlueViolet DarkRed DarkMagenta SaddleBrown DarkSeaGreen LightGreen MediumPurple DarkViolet PaleGreen DarkOrchid YellowGreen Sienna Brown DarkGray DarkGrey LightBlue

#48D1CC #4B0082 #556B2F #5F9EA0 #6495ED #66CDAA #696969 #696969 #6A5ACD #6B8E23 #708090 #708090 #778899 #778899 #7B68EE #7CFC00 #7FFF00 #7FFFD4 #800000 #800080 #808000 #808080 #808080 #87CEEB #87CEFA #8A2BE2 #8B0000 #8B008B #8B4513 #8FBC8F #90EE90 #9370D8 #9400D3 #98FB98 #9932CC #9ACD32 #A0522D #A52A2A #A9A9A9 #A9A9A9 #ADD8E6

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

[Type the company name] | Lihat! Gaya dan warna

4 0

TUGAS MODUL HTML

GreenYellow PaleTurquoise LightSteelBlue PowderBlue FireBrick DarkGoldenRod MediumOrchid RosyBrown DarkKhaki Silver MediumVioletRed IndianRed Peru Chocolate Tan LightGray LightGrey PaleVioletRed Thistle Orchid GoldenRod Crimson Gainsboro Plum BurlyWood LightCyan Lavender DarkSalmon Violet PaleGoldenRod LightCoral Khaki AliceBlue HoneyDew Azure SandyBrown Wheat Beige WhiteSmoke MintCream GhostWhite

#ADFF2F #AFEEEE #B0C4DE #B0E0E6 #B22222 #B8860B #BA55D3 #BC8F8F #BDB76B #C0C0C0 #C71585 #CD5C5C #CD853F #D2691E #D2B48C #D3D3D3 #D3D3D3 #D87093 #D8BFD8 #DA70D6 #DAA520 #DC143C #DCDCDC #DDA0DD #DEB887 #E0FFFF #E6E6FA #E9967A #EE82EE #EEE8AA #F08080 #F0E68C #F0F8FF #F0FFF0 #F0FFFF #F4A460 #F5DEB3 #F5F5DC #F5F5F5 #F5FFFA #F8F8FF

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

[Type the company name] | Lihat! Gaya dan warna

4 1

TUGAS MODUL HTML

Salmon AntiqueWhite Linen LightGoldenRodYellow OldLace Red Fuchsia Magenta DeepPink OrangeRed Tomato HotPink Coral Darkorange LightSalmon Orange LightPink Pink Gold PeachPuff NavajoWhite Moccasin Bisque MistyRose BlanchedAlmond PapayaWhip LavenderBlush SeaShell Cornsilk LemonChiffon FloralWhite Snow Yellow LightYellow Ivory White

#FA8072 #FAEBD7 #FAF0E6 #FAFAD2 #FDF5E6 #FF0000 #FF00FF #FF00FF #FF1493 #FF4500 #FF6347 #FF69B4 #FF7F50 #FF8C00 #FFA07A #FFA500 #FFB6C1 #FFC0CB #FFD700 #FFDAB9 #FFDEAD #FFE4B5 #FFE4C4 #FFE4E1 #FFEBCD #FFEFD5 #FFF0F5 #FFF5EE #FFF8DC #FFFACD #FFFAF0 #FFFAFA #FFFF00 #FFFFE0 #FFFFF0 #FFFFFF

Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades Shades

Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix Mix

[Type the company name] | Lihat! Gaya dan warna

4 2

TUGAS MODUL HTML

2.20 HTML Quick Lists/ HTML Daftar Cepat

Dokumen HTML Dasar <html> <head> <title> Judul dokumen masuk sini </ title> </ head> <body> teks Terlihat goes here ... </ body> </ Html> Elemen Pos <h1> Terbesar Heading </ h1> <h2>. . . </ H2> <h3>. . . </ H3> <h4>. . . </ H4> <h5>. . . </ H5> <h6> Terkecil Heading </ h6>

Teks Elemen <p> Ini adalah sebuah paragraf </ p> <br /> (line break) <hr /> (horizontal rule) <pre> teks ini terformat </ pre>

Logis Styles <em> Teks ini menekankan </ em> <strong> teks ini kuat </ strong> <code> Ini adalah beberapa kode komputer </ code> Fisik Gaya <b> Teks ini ditebalkan </ b> <i> teks ini miring </ i>
[Type the company name] | Lihat! Gaya dan warna 4 3

TUGAS MODUL HTML

Link Link Biasa: <a href="http://www.example.com/"> Link-teks masuk sini </ a> Gambar-link: <a href="http://www.example.com/"> <img src="URL" alt="Alternate Text" /> </ a> Link Mailto: href="mailto:webmaster@example.com"> <a Kirim e-mail </ a> Sebuah named anchor: <a name="tips"> Tips Bagian </ a> href="#tips"> <a Langsung ke Bagian Tips </ a> Daftar unordered <ul> <li> Barang </ li> <li> Barang </ li> </ ul> Daftar berurut <ol> <li> Item pertama </ li> <li> item yang Kedua </ li> </ ol> Daftar definisi <dl> <dt> Istilah pertama </ dt> <dd> Definisi </ dd> <dt> Istilah Berikutnya </ dt> <dd> Definisi </ dd> </ dl> Iframe <iframe src="demo_iframe.htm"> </ iframe> Frame <FRAMESET cols="25%,75%"> <FRAME src="page1.htm" /> <FRAME src="page2.htm" /> </ frameset>
[Type the company name] | Lihat! Gaya dan warna 4 4

TUGAS MODUL HTML

Formulir <form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50" /> <input type="password" /> <input type="checkbox" checked="checked" /> <input type = "radio" diperiksa = "diperiksa" /> <input type="submit" value="Send" /> <input type="reset" /> <input type="hidden" /> <select> <option> Apel </ option> <option selected="selected"> Pisang </ option> <option> Ceri </ option> </ select>

<textarea name="comment" rows="60" cols="20"> </ textarea> </ form>

Entitas <Adalah sama dengan < > adalah sama seperti> adalah sama seperti Elemen lain <- Ini adalah komentar -> <blockquote> Teks dikutip dari sumber. </ blockquote> <address> Ditulis oleh W3Schools.com <br /> <a href="mailto:us@example.org"> Email kami </ a> <br /> Alamat: Box 564, Disneyland /> <br Telepon: +12 34 56 78 </ alamat>

Sumber: http://www.w3schools.com/html/html_quick.asp

[Type the company name] | Lihat! Gaya dan warna

4 5

TUGAS MODUL HTML

BAB III

3.1 Penutup Demikin yang dapat saya paparkan mengenai materi dasar HTML dari situs w3school.com dalam modul ini. tentunya masih banyak kekurangan dan kelemahannya, karena terbatasanya pengetahuan dan kekurangan yang ada pada modul ini..

3.2 Daftar Pustaka HTML Basic, http://www.w3school.com/html/

[Type the company name] | Lihat! Gaya dan warna

4 6