Dasar-dasar HTML
24
Dasar-dasar HTML Dasar-dasar HTML Mengenal HTML Mengenal HTML HTML ( HTML ( HyperTex Markup Language HyperTex Markup Language ) adalah ) adalah standar informasi yang berbasis standar informasi yang berbasis hypertext hypertext yang dipakai di yang dipakai di web web . Berdasarkan standar . Berdasarkan standar inilah Web Browser bisa memahami isi inilah Web Browser bisa memahami isi suatu dokumen yang berasal dari suatu dokumen yang berasal dari web web server server . HTML bekerja dengan menggunakan . HTML bekerja dengan menggunakan HTTP (HyperText Transfer Protocol), HTTP (HyperText Transfer Protocol), yaitu protokol komunikasi yang yaitu protokol komunikasi yang memungkinkan web server berkomunikasi memungkinkan web server berkomunikasi dengan web browser. dengan web browser. Kode HTML berupa sebuah berkas teks dengan Kode HTML berupa sebuah berkas teks dengan akhiran berupa .HTML, .html, .HTM, akhiran berupa .HTML, .html, .HTM, atau .htm. atau .htm.
description
Mengenal HTML - PowerPoint PPT Presentation
Transcript of Dasar-dasar HTML
Dasar-dasar HTMLDasar-dasar HTMLMengenal 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 Browser bisa memahami isi suatu dokumen yang berasal dari yang berasal dari web serverweb server. HTML bekerja . HTML bekerja dengan menggunakan HTTP (HyperText dengan menggunakan HTTP (HyperText Transfer Protocol), yaitu protokol komunikasi Transfer Protocol), yaitu protokol komunikasi yang memungkinkan web server berkomunikasi yang memungkinkan web server berkomunikasi dengan web browser.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 kapital, ataupun kombinasi antara huruf kecil dan huruf kapital. Dengan kata lain penulisandan huruf 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 adalah atribut. Pada umumnya atribut melibatkan nilai. Pada contoh di atas, melibatkan nilai. Pada contoh di atas, “CENTER”“CENTER” adalah nilai untuk atribut adalah nilai untuk atribut ALIGNALIGN. Seperti halnya . Seperti halnya nama tag, nama nama tag, nama ALIGNALIGN juga tidak membedakan juga tidak membedakan huruf kecil dan kapital.huruf kecil 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> … judul ini berupa <H1> … </H1>, <H2> … </H2>, <H3> … </H3>, <H4> … </H4>, <H5> </H2>, <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 dalam baris. Salah satu nilai yang dapat diberikan ke diberikan ke ALIGNALIGN adalah adalah CENTERCENTER, yang berarti , yang berarti judul ditempatkan di tengah-tengah layar pada judul ditempatkan di tengah-tengah layar pada baris yang bersangkutan. Contoh:baris 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 Efeknya terlihat untuk teks yang sangat panjang.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 fisikPemakaian 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 RGB
aqua 00FFFF navy 000080black 000000 olive 808000blue 0000FF purple 800080fuchsia FF00FF red FF0000gray 808080 silver C0C0C0green 008000 teal 008080lime 00FF00 yellow FFFF00maroon 800000 white FFFFFF
