Dasar Dasar HTML

Dasar-dasar HTML
Mengenal HTML
HTML (HyperTex Markup Language) adalah standar
informasi yang berbasis hypertext yang dipakai di web.
Berdasarkan standar inilah Web Browser bisa
memahami isi suatu dokumen yang berasal dari web
server. HTML bekerja dengan menggunakan HTTP
(HyperText Transfer Protocol), yaitu protokol komunikasi
yang memungkinkan web server berkomunikasi dengan
web browser.
Kode HTML berupa sebuah berkas teks dengan akhiran
berupa .HTML, .html, .HTM, atau .htm.
 Contoh kode HTML:
 <HTML>
 <HEAD>
 <TITLE>Latihan HTML</TITLE>
 </HEAD>
 <BODY>
 Selamat Belajar HTML
 </BODY>
 </HTML>
 Penjelasan dari kode:


Pasangan tag <HTML> dan </HTML> menandakan
bahwa kode yang terdapat di dalamnya adalah kode
HTML sehingga browser akan menerjemahkannya
sebagai dokumen HTML.

Bagian yang terdapat dalam <HTML> dan </HTML>
umumnya terbagi atas:

kepala

badan

Bagian kepala ditandai dengan pasangan tag
<HEAD> dan </HEAD>, sedangkan bagian badan
ditandai dengan tag <body> dan </BODY>.

Pada bagian kepala, Anda bisa menentukan judul
dokumen HTML. Judul ini ditulis dengan pasangan
tag <TITLE> dan </TITLE>. Pada contoh di depan,
judul dokumen HTML berupa Latihan HTML.
Judul ini diletakkan di bagian atas jendela browser.
 Cara Menuliskan Tag
 Setiap tag memiliki nama. Nama tag ditulis di dalam
tanda < dan >. Penulisan nama tag dan tanda < tanpa
spasi.
 Nama tag boleh ditulis dengan huruf kecil, huruf kapital,
ataupun kombinasi antara huruf kecil dan huruf kapital.
Dengan kata lain penulisan
 <HTML>
 <html>
 <Html>
 dianggap sama. Tetapi umunya nama tag ditulid dengan
huruf kecil saja atau huruf kapital saja.
 Atribut dalam Tag

 Beberapa tag mengandung atribut di dalamnya. Contoh:
 <p ALIGN = “CENTER”>
 Pada contoh ini, P adalah tag, sedangkan ALIGN adalah
atribut. Pada umumnya atribut melibatkan nilai. Pada
contoh di atas, “CENTER” adalah nilai untuk atribut
ALIGN. Seperti halnya nama tag, nama ALIGN juga tidak
membedakan huruf kecil dan kapital.
 Tag <BR>
 Salah satu tag yang biasa digunakan dalam kode HTML
yaitu <BR>. Sebagai contoh:
 <HTML>
 <HEAD>
 <TITLE>Tag BR</TITLE>
 </HEAD>
 <BODY>
 Selamat Belajar HTML<BR>
 Semoga Sukses!
 </BODY>
 </HTML>
 Fungsi tag <BR> adalah untuk membuat baris baru

atau berpindah baris. Dengan demikian, setelah
browser menampilkan tulisan
 Selamat Belajar HTML
 Maka browser akan menempatkan tulisan berikutnya

pada baris baru.
 Menggunakan Tag <P>
 Tag <P> berguna untuk membuat paragraf. Contoh:
 <HTML>
 <HEAD>
 <TITLE>Contoh Paragraf</TITLE>
 <BODY>
 Musik Jaz<P>
 Musik Jazz banyak disukai oleh<BR>
 Mereka yang menyukai keindahan dan<BR>
 Kedinamisan bunyi.<BR>
 </BODY>
 </HTML>
 Menggunakan Tag Judul
 HTML menyediakan 6 buah tag yang digunakan untuk
mengatur ukuran teks yang dijadikan sebagai judul
dalam badan dokumen. Tag-tag judul ini berupa <H1> …
</H1>, <H2> … </H2>, <H3> … </H3>, <H4> … </H4>,
<H5> … </H5>, <H6> … </H6>. Contoh:
 <HTML>
 <HEAD>
 <TITLE>Contoh Judul</TITLE>
 </HEAD>
 <BODY>
 <H1>Musik Jazz</H1><P>
 Musik Jazz banyak disukai oleh<BR>
 Mereka yang menyukai keindahan dan<BR>
 Kedinamisan bunyi.<BR>
 </BODY>
 </HTML>
 Contoh lain:
 <HTML>
 <HEAD
 <TITLE>Tag H1-H6</TITLE>
 </HEAD>
 <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>
 </BODY>
 </HTML>
 Sebagaimana telah dijelaskan di depan, kebanyakan
tag memiliki atribut. Begitu juga halnya tag judul
seperti <H1>. Salah satu atribut yang bisa digunakan
adalah ALIGN, yang berfungsi untuk mengatur
penempatan teks di dalam baris. Salah satu nilai
yang dapat diberikan ke ALIGN adalah CENTER,
yang berarti judul ditempatkan di tengah-tengah
layar pada baris yang bersangkutan. Contoh:
 <H1 ALIGN = “CENTER”>Musik Jazz</H1>
 Selain CENTER, nilai lain yang dapat diisikan ke

ALIGN yaitu LEFT, RIGHT, dan JUSTIFY.
 LEFT merupakan nilai bawaan untuk ALIGN, yang
mengatur teks rata kiri terhadap halaman.
 RIGHT mengatur teks rata kanan terhadap halaman.
 JUSTIFY mengatur teks rata kiri dan rata kanan.
Efeknya terlihat untuk teks yang sangat panjang.
 Membuat Garis Horizontal

 Untuk mempercantik tampilan, seringkali pembuat
dokumen web menambahkan garis horizontal. Garis
ini dapat dibuat dengan mudah dengan menyertakan
tag <HR>. Contoh:
 <HTML>
 <HEAD>
 <TITLE>Tag HR</TITLE>
 </HEAD>
 <BODY>
 <H1>Grup Jazz:</H1>
 <HR>
 Rippingtons
 <HR>
 Spyro Gyra
 <HR>
 Fourplay
 <HR>
 Casiopea
 <HR>
 </BODY>
 </HTML>
 Menggunakan Tag <CENTER>
 Untuk menengahkan suatu teks, bisa digunakan tag
<CENTER>. Tentu saja untuk mengakhiri penengahan
teks (agar teks berikutnya tidak ditengahkan), perlu
disertakan </CENTER>
 <HTML>
 <HEAD>
 <TITLE>Tag CENTER</TITLE>
 </HEAD>
 <BODY>
 <CENTER>
 <H2>Group Jazz Terkenal : </H2>
 Rippingtons <BR>
 Spyro Gyra <BR>
 Fourplay <BR>
 Casiopea <BR>
 </CENTER>
 *****
 </BODY>
 </HTML>
 Perhatikan bahwa simbol ***** tidak ditengahkan

karena sebelum teks ini terdapat tag pengakhir
penengah teks </CENTER>
 Memformat Teks
 HTML menyediakan sejumlah tag yang berguna
untuk mengatur bentuk teks secara fisik. Lihat tabel
berikut:
 Daftar 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:
 <HTML>
 <HEAD>
 <TITLE>Format Teks</TITLE>
 </HEAD>
 <BODY>
 Normal <BR>
 <B>Tebal</B><BR>
 <BIG>Big</BIG><BR>
 <I>Miring</I><BR>
 <U>Digarisbawahi</U><BR>
 <I><B>Miring dan tebal</B></I><BR>
 X<SUB>n</SUB><SUP>2</SUP>
 </BODY>
 </HTML>
 Teks Praformat
 Contoh:
 <HTML>
 <HEAD>
 <TITLE>Praformat</TITLE>
 </HEAD>
 <BODY>
 <H1>Menu:</H1>
 <PRE>
 Nasi Goreng Spesial ........... 15.000
 Nasi Rawon .................... 8.500
 Nasi Gudeg Lengkap ............ 8.500
 Nasi Langgi ................... 8.500
 Nasi Soto Madura .............. 5.000
 <PRE>
 Selamat menikmati.
 </BODY>
 </HTML>
 Pengaturan Font
 Tag <FONT>...</FONT> berguna untuk mengatur
jenis, ukuran, maupun warna font.
 * Jenis Font
 Untuk menentukan jenis font, bisa digunakan atribut
FACE. Contoh:
 <FONT FACE = “Arial”>ABCD</FONT>
 Pada contoh di atas, tulisan ABCD akan ditampilkan

dengan menggunakan font Arial.
 Contoh:
 <HTML>
 <HEAD>
 <TITLE>Jenis Font</TITLE>
 </HEAD>
 <BODY>
 Normal: 012345ABCD<BR>
 <FONT FACE = “Arial”>Arial: 012345ABCD</FONT>
 <BR>
 <FONT FACE = “Lucida”>Lucida: 012345ABCD</FONT>
 <BR>
 <FONT FACE = “Courier”>Courier: 012345ABCD</FONT>
 <BR>
 <FONT FACE = “Verdana”>Verdana: 012345ABCD
 </FONT>
 <BR>
 </BODY>
 </HTML>
 * Ukuran Font
 Ukuran font ditentukan oleh atribut SIZE. Contoh:
 <FONT SIZE = “1”>SIZE 1: 012345ABCD

 </FONT>
 </BR>
 Digunakan untuk mengatur teks dg ukuran font sebesar 1. Ukuran

font normal adalah 3.
 Ukuran font juga dapat memakai tanda + atau – di depan angka
pada atribut SIZE. Contoh:
 <FONT SIZE = “+1”>SIZE +1: 012345ABCD

 </FONT>
 </BR>
 menampilkan teks dengan ukuran font lebih besar 1 daripada

ukuran normal.
 Contoh:
 <HTML>
 <HEAD>
 <TITLE>Ukuran Font</TITLE>
 Normal: 012345ABCD<BR>
 <FONT SIZE=”1”>SIZE 1: 012345ABCD</FONT>
 <BR>
 <BR>
 <BR>
 <BR>
 <BR>
 <BR>
 <BR>
 <FONT SIZE=”+1”>SIZE +1: 012345ABCD</FONT>
 <BR>
 <FONT SIZE=”+2”>SIZE +2: 012345ABCD</FONT>
 <BR>
 <FONT SIZE=”-1”>SIZE -1: 012345ABCD</FONT>
 <BR>
 </BODY>
 </HTML>
 * Warna Font
 Atribut pada tag <FONT> yang berkaitan dengan warna teks
yaitu COLOR, yang berguna untuk menentukan warna latar
belakang teks.
 Adapun kalau warna latar belakang teks yang akan
diatur, pengaturan perlu dilakukan melalui tag
<BODY> dengan properti berupa BGCOLOR. Perlu
juga diketahui, tag BODY juga memiliki atribut
bernama TEXT yang dapat digunakan untuk
mengatur warna teks pada keseluruhan tubuh
dokumen.
 Nilai yang diberikan pada atribut COLOR,
BGCOLOR, dan TEXT tersebut berupa:
 1. nama warna, atau
 2. nilai RGB (Red-Green-Blue) yang dinyatakan
dengan “#RRGGBB”.
 Daftar nama warna pada atribut penentu
warna
Nama
RGB Nama Warna RGB
Warna
aqua 00FFFF navy 000080
black 000000 olive 808000
blue 0000FF purple 800080
fuchsia FF00FF red FF0000
gray 808080 silver C0C0C0
green 008000 teal 008080
lime 00FF00 yellow FFFF00
maroon 800000 white FFFFFF

Dasar Dasar HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Dasar Dasar HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Dasar-dasar HTML

 Penjelasan dari kode:

 Atribut dalam Tag

 Fungsi tag <BR> adalah untuk membuat baris baru

 Selamat Belajar HTML

 Maka browser akan menempatkan tulisan berikutnya

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

 Selain CENTER, nilai lain yang dapat diisikan ke

 Membuat Garis Horizontal

 Perhatikan bahwa simbol ***** tidak ditengahkan

<BIG>Teks</BIG> Teks ditampilkan dengan ukuran lebih

<SMALL>Teks</SMALL> Teks ditampilkan dengan ukuran lebih

<TT>Teks</TT> Teks ditampilkan dalam bentuk seperti

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

 Pada contoh di atas, tulisan ABCD akan ditampilkan

 <FONT SIZE = “1”>SIZE 1: 012345ABCD

 Digunakan untuk mengatur teks dg ukuran font sebesar 1. Ukuran

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

 menampilkan teks dengan ukuran font lebih besar 1 daripada

Anda mungkin juga menyukai