Dasar-dasar HTML - istiyanto.comistiyanto.com/wp-content/uploads/2012/09/DASAR-DASAR-HTML-3.pdfPada...

Dasar-dasar HTMLDasar-dasar HTML

Mengenal HTMLMengenal HTMLHTML (HTML (HyperTex Markup LanguageHyperTex Markup Language) adalah ) adalah standar informasi yang berbasis standar informasi yang berbasis hypertexthypertext yang yang dipakai di dipakai di webweb. Berdasarkan standar inilah Web . Berdasarkan standar inilah Web Browser bisa memahami isi suatu dokumen yang Browser bisa memahami isi suatu dokumen yang berasal dari berasal dari web serverweb server. HTML bekerja dengan . HTML bekerja dengan menggunakan HTTP (HyperText Transfer Protocol), menggunakan HTTP (HyperText Transfer Protocol), yaitu protokol komunikasi yang memungkinkan yaitu protokol komunikasi yang memungkinkan web server berkomunikasi dengan web browser.web server berkomunikasi dengan web browser.Kode HTML berupa sebuah berkas teks dengan Kode HTML berupa sebuah berkas teks dengan akhiran berupa .HTML, .html, .HTM, atau .htm. akhiran berupa .HTML, .html, .HTM, atau .htm.

Contoh kode HTML:Contoh kode HTML:

<HTML><HTML><HEAD><HEAD><TITLE>Latihan HTML</TITLE><TITLE>Latihan HTML</TITLE></HEAD></HEAD><BODY><BODY>Selamat Belajar HTMLSelamat Belajar HTML</BODY></BODY></HTML></HTML>

Penjelasan dari kode:Penjelasan dari kode:● Pasangan tag <HTML> dan </HTML> Pasangan tag <HTML> dan </HTML>

menandakan bahwa kode yang terdapat di menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser dalamnya adalah kode HTML sehingga browser akan menerjemahkannya sebagai dokumen akan menerjemahkannya sebagai dokumen HTML.HTML.

● Bagian yang terdapat dalam <HTML> dan Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas:</HTML> umumnya terbagi atas:✔ kepalakepala✔ badanbadan

● Bagian kepala ditandai dengan pasangan tag Bagian kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>, sedangkan bagian <HEAD> dan </HEAD>, sedangkan bagian badan ditandai dengan tag <body> dan badan ditandai dengan tag <body> dan </BODY>.</BODY>.

● Pada bagian kepala, Anda bisa menentukan Pada bagian kepala, Anda bisa menentukan judul dokumen HTML. Judul ini ditulis dengan judul dokumen HTML. Judul ini ditulis dengan pasangan tag <TITLE> dan </TITLE>. Pada pasangan tag <TITLE> dan </TITLE>. Pada contoh di depan, judul dokumen HTML berupa contoh di depan, judul dokumen HTML berupa Latihan HTMLLatihan HTML. Judul ini diletakkan di bagian . Judul ini diletakkan di bagian atas jendela browser.atas jendela browser.

Cara Menuliskan TagCara Menuliskan TagSetiap tag memiliki nama. Nama tag ditulis di Setiap tag memiliki nama. Nama tag ditulis di dalam tanda < dan >. Penulisan nama tag dan dalam tanda < dan >. Penulisan nama tag dan tanda < tanpa spasi.tanda < tanpa spasi.Nama tag boleh ditulis dengan huruf kecil, huruf Nama tag boleh ditulis dengan huruf kecil, huruf kapital, ataupun kombinasi antara huruf kecil dan kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain penulisanhuruf kapital. Dengan kata lain penulisan<HTML><HTML><html><html><Html><Html>dianggap sama. Tetapi umunya nama tag ditulid dianggap sama. Tetapi umunya nama tag ditulid dengan huruf kecil saja atau huruf kapital saja.dengan huruf kecil saja atau huruf kapital saja.

Atribut dalam TagAtribut dalam TagBeberapa tag mengandung atribut di dalamnya. Beberapa tag mengandung atribut di dalamnya. Contoh:Contoh:

<p ALIGN = “CENTER”><p ALIGN = “CENTER”>Pada contoh ini, Pada contoh ini, PP adalah tag, sedangkan adalah tag, sedangkan ALIGNALIGN adalah atribut. Pada umumnya atribut melibatkan adalah atribut. Pada umumnya atribut melibatkan nilai. Pada contoh di atas, nilai. Pada contoh di atas, “CENTER”“CENTER” adalah nilai adalah nilai untuk atribut untuk atribut ALIGNALIGN. Seperti halnya nama tag, . Seperti halnya nama tag, nama nama ALIGNALIGN juga tidak membedakan huruf kecil juga tidak membedakan huruf kecil dan kapital.dan kapital.

Tag <BR>Tag <BR>Salah satu tag yang biasa digunakan dalam kode Salah satu tag yang biasa digunakan dalam kode HTML yaitu <BR>. Sebagai contoh:HTML yaitu <BR>. Sebagai contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Tag BR</TITLE><TITLE>Tag BR</TITLE></HEAD></HEAD>

<BODY><BODY>Selamat Belajar HTML<BR>Selamat Belajar HTML<BR>Semoga Sukses!Semoga Sukses!</BODY></BODY></HTML></HTML>

Fungsi tag <BR> adalah untuk membuat baris Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris. Dengan demikian, baru atau berpindah baris. Dengan demikian, setelah browser menampilkan tulisan setelah browser menampilkan tulisan

Selamat Belajar HTMLSelamat Belajar HTML

Maka browser akan menempatkan tulisan Maka browser akan menempatkan tulisan berikutnya pada baris baru.berikutnya pada baris baru.

Menggunakan Tag <P>Menggunakan Tag <P>Tag <P> berguna untuk membuat paragraf. Tag <P> berguna untuk membuat paragraf. Contoh:Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Contoh Paragraf</TITLE><TITLE>Contoh Paragraf</TITLE><BODY><BODY>Musik Jaz<P>Musik Jaz<P>Musik Jazz banyak disukai oleh<BR>Musik Jazz banyak disukai oleh<BR>Mereka yang menyukai keindahan dan<BR>Mereka yang menyukai keindahan dan<BR>Kedinamisan bunyi.<BR>Kedinamisan bunyi.<BR></BODY></BODY></HTML></HTML>

Menggunakan Tag JudulMenggunakan Tag JudulHTML menyediakan 6 buah tag yang digunakan HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen. Tag-tag sebagai judul dalam badan dokumen. Tag-tag judul ini berupa <H1> … </H1>, <H2> … </H2>, judul ini berupa <H1> … </H1>, <H2> … </H2>, <H3> … </H3>, <H4> … </H4>, <H5> … <H3> … </H3>, <H4> … </H4>, <H5> … </H5>, <H6> … </H6>. Contoh:</H5>, <H6> … </H6>. Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Contoh Judul</TITLE><TITLE>Contoh Judul</TITLE></HEAD></HEAD><BODY><BODY><H1>Musik Jazz</H1><P><H1>Musik Jazz</H1><P>Musik Jazz banyak disukai oleh<BR>Musik Jazz banyak disukai oleh<BR>Mereka yang menyukai keindahan dan<BR>Mereka yang menyukai keindahan dan<BR>Kedinamisan bunyi.<BR>Kedinamisan bunyi.<BR></BODY></BODY></HTML></HTML>

Contoh lain:Contoh lain:

<HTML><HTML><HEAD<HEAD<TITLE>Tag H1-H6</TITLE><TITLE>Tag H1-H6</TITLE></HEAD></HEAD><BODY><BODY><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1><H1>Tag H1</H1></BODY></BODY></HTML></HTML>

Sebagaimana telah dijelaskan di depan, Sebagaimana telah dijelaskan di depan, kebanyakan tag memiliki atribut. Begitu juga kebanyakan tag memiliki atribut. Begitu juga halnya tag judul seperti halnya tag judul seperti <H1><H1>. Salah satu atribut . Salah satu atribut yang bisa digunakan adalah yang bisa digunakan adalah ALIGNALIGN, yang , yang berfungsi untuk mengatur penempatan teks di berfungsi untuk mengatur penempatan teks di dalam baris. Salah satu nilai yang dapat diberikan dalam baris. Salah satu nilai yang dapat diberikan ke ke ALIGNALIGN adalah adalah CENTERCENTER, yang berarti judul , yang berarti judul ditempatkan di tengah-tengah layar pada baris ditempatkan di tengah-tengah layar pada baris yang bersangkutan. Contoh:yang bersangkutan. Contoh:

<H1 ALIGN = “CENTER”>Musik Jazz</H1><H1 ALIGN = “CENTER”>Musik Jazz</H1>

Selain Selain CENTERCENTER, nilai lain yang dapat diisikan ke , nilai lain yang dapat diisikan ke ALIGNALIGN yaitu yaitu LEFT, RIGHT,LEFT, RIGHT, dan dan JUSTIFYJUSTIFY..LEFTLEFT merupakan nilai bawaan untuk merupakan nilai bawaan untuk ALIGNALIGN, yang , yang mengatur teks rata kiri terhadap halaman.mengatur teks rata kiri terhadap halaman.

RIGHTRIGHT mengatur teks rata kanan terhadap mengatur teks rata kanan terhadap halaman.halaman.JUSTIFYJUSTIFY mengatur teks rata kiri dan rata kanan. mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang sangat panjang.Efeknya terlihat untuk teks yang sangat panjang.

Membuat Garis HorizontalMembuat Garis HorizontalUntuk mempercantik tampilan, seringkali Untuk mempercantik tampilan, seringkali pembuat dokumen web menambahkan garis pembuat dokumen web menambahkan garis horizontal. Garis ini dapat dibuat dengan mudah horizontal. Garis ini dapat dibuat dengan mudah dengan menyertakan tag <HR>. Contoh:dengan menyertakan tag <HR>. Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Tag HR</TITLE><TITLE>Tag HR</TITLE></HEAD></HEAD>

<BODY><BODY><H1>Grup Jazz:</H1><H1>Grup Jazz:</H1><HR><HR>RippingtonsRippingtons<HR><HR>Spyro GyraSpyro Gyra<HR><HR>FourplayFourplay<HR><HR>CasiopeaCasiopea<HR><HR></BODY></BODY></HTML></HTML>

Menggunakan Tag <CENTER>Menggunakan Tag <CENTER>Untuk menengahkan suatu teks, bisa digunakan Untuk menengahkan suatu teks, bisa digunakan tag <CENTER>. Tentu saja untuk mengakhiri tag <CENTER>. Tentu saja untuk mengakhiri penengahan teks (agar teks berikutnya tidak penengahan teks (agar teks berikutnya tidak ditengahkan), perlu disertakan </CENTER>ditengahkan), perlu disertakan </CENTER>

<HTML><HTML><HEAD><HEAD><TITLE>Tag CENTER</TITLE><TITLE>Tag CENTER</TITLE></HEAD></HEAD><BODY><BODY><CENTER><CENTER><H2>Group Jazz Terkenal : </H2><H2>Group Jazz Terkenal : </H2>Rippingtons <BR>Rippingtons <BR>Spyro Gyra <BR>Spyro Gyra <BR>Fourplay <BR>Fourplay <BR>Casiopea <BR>Casiopea <BR>

</CENTER></CENTER>**********</BODY></BODY></HTML></HTML>

Perhatikan bahwa simbol ***** tidak ditengahkan Perhatikan bahwa simbol ***** tidak ditengahkan karena sebelum teks ini terdapat tag pengakhir karena sebelum teks ini terdapat tag pengakhir penengah teks penengah teks </CENTER></CENTER>

Memformat TeksMemformat TeksHTML menyediakan sejumlah tag yang berguna HTML menyediakan sejumlah tag yang berguna untuk mengatur bentuk teks secara fisik. Lihat untuk mengatur bentuk teks secara fisik. Lihat tabel berikut:tabel berikut:

Daftar tag untuk mengatur teks secara fisikDaftar tag untuk mengatur teks secara fisik

Pemakaian Tag Keterangan<B>Teks</B> Teks ditampilkan dalam keadaan

ditebalkan

<BIG>Teks</BIG> Teks ditampilkan dengan ukuran lebih besar daripada ukuran normal

<I>Teks</I> Teks ditampilkan dalam keadaan miring

<SMALL>Teks</SMALL> Teks ditampilkan dengan ukuran lebih kecil daripada ukuran normal

<SUB>Teks</SUB> Teks ditampilkan sebagai subskrip

<SUP>Teks</SUP> Teks ditampilkan sebagai superskrip

<TT>Teks</TT> Teks ditampilkan dalam bentuk seperti ketikan mesin ketik

<U>Teks</U> Teks ditampilkan dengan diberi garis bawah.

Contoh:Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Format Teks</TITLE><TITLE>Format Teks</TITLE></HEAD></HEAD><BODY><BODY>Normal <BR>Normal <BR><B>Tebal</B><BR><B>Tebal</B><BR><BIG>Big</BIG><BR><BIG>Big</BIG><BR><I>Miring</I><BR><I>Miring</I><BR><U>Digarisbawahi</U><BR><U>Digarisbawahi</U><BR><I><B>Miring dan tebal</B></I><BR><I><B>Miring dan tebal</B></I><BR>X<SUB>n</SUB><SUP>2</SUP>X<SUB>n</SUB><SUP>2</SUP></BODY></BODY></HTML></HTML>

Teks PraformatTeks PraformatContoh:Contoh:<HTML><HTML><HEAD><HEAD><TITLE>Praformat</TITLE><TITLE>Praformat</TITLE></HEAD></HEAD><BODY><BODY><H1>Menu:</H1><H1>Menu:</H1><PRE><PRE> Nasi Goreng Spesial ........... 15.000Nasi Goreng Spesial ........... 15.000 Nasi Rawon .................... 8.500Nasi Rawon .................... 8.500 Nasi Gudeg Lengkap ............ 8.500Nasi Gudeg Lengkap ............ 8.500 Nasi Langgi ................... 8.500Nasi Langgi ................... 8.500 Nasi Soto Madura .............. 5.000Nasi Soto Madura .............. 5.000<PRE><PRE>Selamat menikmati.Selamat menikmati.</BODY></BODY></HTML></HTML>

Pengaturan FontPengaturan FontTag Tag <FONT>...</FONT><FONT>...</FONT> berguna untuk mengatur berguna untuk mengatur jenis, ukuran, maupun warna font.jenis, ukuran, maupun warna font.

* Jenis Font* Jenis FontUntuk menentukan jenis font, bisa digunakan Untuk menentukan jenis font, bisa digunakan atribut atribut FACEFACE. Contoh:. Contoh:

<FONT FACE = “Arial”>ABCD</FONT><FONT FACE = “Arial”>ABCD</FONT>

Pada contoh di atas, tulisan ABCD akan Pada contoh di atas, tulisan ABCD akan ditampilkan dengan menggunakan font Arial.ditampilkan dengan menggunakan font Arial.

Contoh:Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Jenis Font</TITLE><TITLE>Jenis Font</TITLE></HEAD></HEAD><BODY><BODY>Normal: 012345ABCD<BR>Normal: 012345ABCD<BR><FONT FACE = “Arial”>Arial: 012345ABCD</FONT> <FONT FACE = “Arial”>Arial: 012345ABCD</FONT> <BR><BR><FONT FACE = “Lucida”>Lucida: 012345ABCD</FONT><FONT FACE = “Lucida”>Lucida: 012345ABCD</FONT><BR><BR><FONT FACE = “Courier”>Courier: 012345ABCD</FONT><FONT FACE = “Courier”>Courier: 012345ABCD</FONT><BR><BR><FONT FACE = “Verdana”>Verdana: 012345ABCD<FONT FACE = “Verdana”>Verdana: 012345ABCD</FONT></FONT><BR><BR></BODY></BODY></HTML></HTML>

* Ukuran Font* Ukuran FontUkuran font ditentukan oleh atribut Ukuran font ditentukan oleh atribut SIZESIZE. Contoh:. Contoh:

<FONT SIZE = “1”>SIZE 1: 012345ABCD<FONT SIZE = “1”>SIZE 1: 012345ABCD</FONT></FONT></BR></BR>

Digunakan untuk mengatur teks dg ukuran font sebesar 1. Digunakan untuk mengatur teks dg ukuran font sebesar 1. Ukuran font normal adalah 3.Ukuran font normal adalah 3.Ukuran font juga dapat memakai tanda + atau – di depan Ukuran font juga dapat memakai tanda + atau – di depan angka pada atribut angka pada atribut SIZESIZE. Contoh:. Contoh:

<FONT SIZE = “+1”>SIZE +1: 012345ABCD<FONT SIZE = “+1”>SIZE +1: 012345ABCD</FONT></FONT></BR></BR>

menampilkan teks dengan ukuran font lebih besar 1 menampilkan teks dengan ukuran font lebih besar 1 daripada ukuran normal.daripada ukuran normal.

Contoh:Contoh:<HTML><HTML><HEAD><HEAD><TITLE>Ukuran Font</TITLE><TITLE>Ukuran Font</TITLE>Normal: 012345ABCD<BR>Normal: 012345ABCD<BR><FONT SIZE=”1”>SIZE 1: 012345ABCD</FONT><FONT SIZE=”1”>SIZE 1: 012345ABCD</FONT><BR><BR><FONT SIZE=”2”>SIZE 2: 012345ABCD</FONT><FONT SIZE=”2”>SIZE 2: 012345ABCD</FONT><BR><BR><FONT SIZE=”3”>SIZE 3: 012345ABCD</FONT><FONT SIZE=”3”>SIZE 3: 012345ABCD</FONT><BR><BR><FONT SIZE=”4”>SIZE 4: 012345ABCD</FONT><FONT SIZE=”4”>SIZE 4: 012345ABCD</FONT><BR><BR><FONT SIZE=”5”>SIZE 5: 012345ABCD</FONT><FONT SIZE=”5”>SIZE 5: 012345ABCD</FONT><BR><BR>

<FONT SIZE=”6”>SIZE 6: 012345ABCD</FONT><FONT SIZE=”6”>SIZE 6: 012345ABCD</FONT><BR><BR><FONT SIZE=”7”>SIZE 7: 012345ABCD</FONT><FONT SIZE=”7”>SIZE 7: 012345ABCD</FONT><BR><BR><FONT SIZE=”+1”>SIZE +1: 012345ABCD</FONT><FONT SIZE=”+1”>SIZE +1: 012345ABCD</FONT><BR><BR><FONT SIZE=”+2”>SIZE +2: 012345ABCD</FONT><FONT SIZE=”+2”>SIZE +2: 012345ABCD</FONT><BR><BR><FONT SIZE=”-1”>SIZE -1: 012345ABCD</FONT><FONT SIZE=”-1”>SIZE -1: 012345ABCD</FONT><BR><BR></BODY></BODY></HTML></HTML>

* Warna Font* Warna FontAtribut pada tag <FONT> yang berkaitan dengan Atribut pada tag <FONT> yang berkaitan dengan warna teks yaitu COLOR, yang berguna untuk warna teks yaitu COLOR, yang berguna untuk menentukan warna latar belakang teks.menentukan warna latar belakang teks.

Adapun kalau warna latar belakang teks yang Adapun kalau warna latar belakang teks yang akan diatur, pengaturan perlu dilakukan melalui akan diatur, pengaturan perlu dilakukan melalui tag <BODY> dengan properti berupa BGCOLOR. tag <BODY> dengan properti berupa BGCOLOR. Perlu juga diketahui, tag BODY juga memiliki Perlu juga diketahui, tag BODY juga memiliki atribut bernama TEXT yang dapat digunakan atribut bernama TEXT yang dapat digunakan untuk mengatur warna teks pada keseluruhan untuk mengatur warna teks pada keseluruhan tubuh dokumen.tubuh dokumen.Nilai yang diberikan pada atribut COLOR, Nilai yang diberikan pada atribut COLOR, BGCOLOR, dan TEXT tersebut berupa:BGCOLOR, dan TEXT tersebut berupa:1. nama warna, atau1. nama warna, atau2. nilai RGB (Red-Green-Blue) yang dinyatakan 2. nilai RGB (Red-Green-Blue) yang dinyatakan dengan “#RRGGBB”.dengan “#RRGGBB”.

Daftar nama warna pada atribut penentu Daftar nama warna pada atribut penentu warnawarna

Nama Warna

RGB Nama Warna RGBaqua 00FFFF navy 000080black 000000 olive 808000blue 0000FF purple 800080fuchsia FF00FF red FF0000gray 808080 silver C0C0C0green 008000 teal 008080lime 00FF00 yellow FFFF00maroon 800000 white FFFFFF

Pada format '#RRGGBB', masing-masing RR, GG, dan Pada format '#RRGGBB', masing-masing RR, GG, dan BB berupa dua buah digit heksadesimal (berupa BB berupa dua buah digit heksadesimal (berupa angka 0 sampai dengan 9 atau A hingga F). RR angka 0 sampai dengan 9 atau A hingga F). RR menyatakan komponen warna merah, GG menyatakan komponen warna merah, GG menyatakan komponen warna hijau, dan BB menyatakan komponen warna hijau, dan BB menyatakan komponen warna biru. Nilai 00 menyatakan komponen warna biru. Nilai 00 menyatakan bahwa komponen bersangkutan tidak menyatakan bahwa komponen bersangkutan tidak ada. Sebagai contoh, #0000FF menyatakan warna ada. Sebagai contoh, #0000FF menyatakan warna biru.biru.Contoh:Contoh:<HTML><HTML><HEAD><HEAD><TITLE>Warna – Bagian 1</TITLE><TITLE>Warna – Bagian 1</TITLE><BODY><BODY>Normal<BR>Normal<BR><FONT COLOR = “aqua”>aqua</FONT><BR><FONT COLOR = “aqua”>aqua</FONT><BR><FONT COLOR = “black”>black</FONT><BR><FONT COLOR = “black”>black</FONT><BR>

<FONT COLOR = "blue">blue</FONT><BR><FONT COLOR = "blue">blue</FONT><BR><FONT COLOR = "fuchsia">fuchsia</FONT><BR><FONT COLOR = "fuchsia">fuchsia</FONT><BR><FONT COLOR = "gray">gray</FONT><BR><FONT COLOR = "gray">gray</FONT><BR><FONT COLOR = "green">green</FONT><BR><FONT COLOR = "green">green</FONT><BR><FONT COLOR = "lime">lime</FONT><BR><FONT COLOR = "lime">lime</FONT><BR><FONT COLOR = "maroon">maroon</FONT><BR><FONT COLOR = "maroon">maroon</FONT><BR><FONT COLOR = "navy">navy</FONT><BR><FONT COLOR = "navy">navy</FONT><BR><FONT COLOR = "olive">olive</FONT><BR><FONT COLOR = "olive">olive</FONT><BR><FONT COLOR = "purple">purple</FONT><BR><FONT COLOR = "purple">purple</FONT><BR><FONT COLOR = "read">read</FONT><BR><FONT COLOR = "read">read</FONT><BR><FONT COLOR = "silver">silver</FONT><BR><FONT COLOR = "silver">silver</FONT><BR><FONT COLOR = "teal">teal</FONT><BR><FONT COLOR = "teal">teal</FONT><BR><FONT COLOR = "yellow">yellow</FONT><BR><FONT COLOR = "yellow">yellow</FONT><BR></BODY></BODY></HTML></HTML>

Contoh berikut menunjukkan penggunaan atribut Contoh berikut menunjukkan penggunaan atribut BGCOLOR dan TEXT pada tag BODY.BGCOLOR dan TEXT pada tag BODY.

<HTML><HTML><HEAD><HEAD><TITLE>Warna - Bagian 2</TITLE><TITLE>Warna - Bagian 2</TITLE></HEAD></HEAD><BODY BGCOLOR = "black" TEXT = "gray"><BODY BGCOLOR = "black" TEXT = "gray">Normal <BR>Normal <BR><FONT COLOR = "blue">Warna Biru</FONT><BR><FONT COLOR = "blue">Warna Biru</FONT><BR><FONT COLOR = "green">Warna Hijau</FONT><BR><FONT COLOR = "green">Warna Hijau</FONT><BR><FONT COLOR = "red">Warna Merah</FONT><BR><FONT COLOR = "red">Warna Merah</FONT><BR><FONT COLOR = "#0000FF">Warna Biru</FONT><BR><FONT COLOR = "#0000FF">Warna Biru</FONT><BR><FONT COLOR = "yellow">Warna Kuning</FONT><BR><FONT COLOR = "yellow">Warna Kuning</FONT><BR></BODY></BODY></HTML></HTML>

Hasilnya berupa tampilan dengan latar belakang hitam Hasilnya berupa tampilan dengan latar belakang hitam (BGCOLOR = “black”) dan teks yang tidak diatur melalui (BGCOLOR = “black”) dan teks yang tidak diatur melalui tag <FONT> akan berwarna abu-abu (TEXT = “gray”).tag <FONT> akan berwarna abu-abu (TEXT = “gray”).

Entitas Karakter dan NumerikEntitas Karakter dan Numerik

Misalnya anda ingin menuliskan tulisan:Misalnya anda ingin menuliskan tulisan:

<HR><HR>

Tetapi tidak dimaksudkan untuk menampilkan garis Tetapi tidak dimaksudkan untuk menampilkan garis maka Anda perlu melakukan penulisan secara khusus. maka Anda perlu melakukan penulisan secara khusus. Berhubung tanda < dan > mempunyai makna khusus Berhubung tanda < dan > mempunyai makna khusus bagi browser, Anda hanya bisa menampilkan tanda < bagi browser, Anda hanya bisa menampilkan tanda < dan > secara khusus pula.dan > secara khusus pula.HTML menyediakan sejumlah simbol yang berguna HTML menyediakan sejumlah simbol yang berguna untuk menampilkan karakter-karakter khusus yang untuk menampilkan karakter-karakter khusus yang menyatakan suatu entitas karakter seperti A umlaut menyatakan suatu entitas karakter seperti A umlaut ((Ä) ataupun numerik seperti ¼, sebagaimana tabel Ä) ataupun numerik seperti ¼, sebagaimana tabel berikut:berikut:

<HTML><HTML><HEAD><HEAD><TITLE>Penulisan Simbol Khusus</TITLE><TITLE>Penulisan Simbol Khusus</TITLE></HEAD></HEAD><BODY><BODY><H1>Kamus Jerman - Indonesia</H1><H1>Kamus Jerman - Indonesia</H1>Tschüß = Sampai jumla<BR>Tschüß = Sampai jumla<BR>Fräulein = Nona<BR>Fräulein = Nona<BR>Ich möchte ... = Saya ingin ... <BR>Ich möchte ... = Saya ingin ... <BR><HR><HR>Garis di atas diperoleh dengan menggunakan kode Garis di atas diperoleh dengan menggunakan kode <HR><HR></BODY></BODY></HTML></HTML>

Daftar ItemDaftar Item

* Tag <UL>* Tag <UL>Digunakan untuk menampilkan data dalam bentuk daftar (Digunakan untuk menampilkan data dalam bentuk daftar (listlist) ) yang tidak diberi nomor. Contoh:yang tidak diberi nomor. Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Contoh Pemakaian Tag UL</TITLE><TITLE>Contoh Pemakaian Tag UL</TITLE></HEAD></HEAD><BODY><BODY><H2>Group Jazz:</H2><H2>Group Jazz:</H2><UL><UL>Fourplay <BR>Fourplay <BR>Rippingtons <BR>Rippingtons <BR>Spyro Gyra <BR>Spyro Gyra <BR>Shakatak <BR>Shakatak <BR></UL></UL>**********</BODY></BODY></HTML></HTML>

Supaya setiap dalam daftar diberi tanda bulatan (disebut Supaya setiap dalam daftar diberi tanda bulatan (disebut bulletbullet) bisa ditambahkan tag <LI> di depan masing-) bisa ditambahkan tag <LI> di depan masing-masing item. Contoh:masing item. Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Contoh pemakaian tag UL</TITLE><TITLE>Contoh pemakaian tag UL</TITLE></HEAD></HEAD><BODY><BODY><H2>Group Jazz:</H2><H2>Group Jazz:</H2><UL><UL><LI>Fourplay <BR><LI>Fourplay <BR><LI>Rippingtons <BR><LI>Rippingtons <BR><LI>Spyro Gyra <BR><LI>Spyro Gyra <BR><LI>Shakatak <BR><LI>Shakatak <BR></UL></UL>**********</BODY></BODY></HTML></HTML>

* Tag <OL>* Tag <OL>

Kadangkala daftar suatu item dikehendaki agar ditampilkan Kadangkala daftar suatu item dikehendaki agar ditampilkan dengan nomor urut. Dengan menggunakan tag <OL>, dengan nomor urut. Dengan menggunakan tag <OL>, pemberian nomor dapat diotomatiskan tanpa harus menuliskan pemberian nomor dapat diotomatiskan tanpa harus menuliskan nomor secara eksplisit. Contoh:nomor secara eksplisit. Contoh:

<HTML><HTML><HEAD><HEAD><TITLE>Contoh pemakaian Tag OL</TITLE><TITLE>Contoh pemakaian Tag OL</TITLE></HEAD></HEAD><BODY><BODY><H2>Group Jazz:</H2><H2>Group Jazz:</H2><OL><OL><LI>Fourplay <BR><LI>Fourplay <BR><LI>Rippingtons <BR><LI>Rippingtons <BR><LI>Spyro Gyra <BR><LI>Spyro Gyra <BR><LI>Shakatak <BR><LI>Shakatak <BR></OL></OL>**********</BODY></BODY></HTML></HTML>

Dasar-dasar HTML - istiyanto.comistiyanto.com/wp-content/uploads/2012/09/DASAR-DASAR-HTML-3.pdfPada...

Documents

Transcript of Dasar-dasar HTML - istiyanto.comistiyanto.com/wp-content/uploads/2012/09/DASAR-DASAR-HTML-3.pdfPada...