Dasar HTML 1

BAGIAN 1 DASAR HTML
PENGERTIAN HTML
File HTML (HyperText MarkUp Language) adalah file teks biasa yang didalamnya disisipi tanda/kode-kode HTML yang disebut TAG. Dan file ini digunakan untuk membangun sebuah halaman web. TAG HTML ditulis dengan diapit tanda lebih kecil (<) dan tanda lebih besar (>), dan sebagian besar tag HTML dituliskan secara berpasangan. Pada tag penutup ditambahkan karakter Slash ( / ). Misalnya: <B>Teks ini dicetak dengan huruf tebal</B>
STRUKTUR DASAR HTML Karena HTML adalah file teks biasa, maka file ini dapat dibuat dengan program pengolah teks (text editor) sederhana, misalnya NotePad. Selain itu juga dapat menggunakan HTML editor atau program Authoring misalnya Microsoft FrontPage, Netscape Composer atau Macromedia Dreamweaver. Sebuah file HTML harus diberi nama dengan ekstensi .htm atau .html, dan dapat dijalankan menggunakan program web browser seperti Internet Explorer atau Netscape Navigator. Struktur dasar sebuah file HTML adalah sebagai berikut:
<HTML> <HEAD> .... </HEAD> <BODY> .... </BODY> </HTML> --> Menandai awal file HTML --> Bagian Judul
--> Bagian Utama --> Menandai akhir file HTML
Contoh : Ketiklah contoh berikut dengan menggunakan Notepad, dan simpan di drive C:\My Documents dengan nama Selamat.htm, kemudian buka web browser misalnya Intenet Explorer dan ketikkan C:\My Documents\Selamat.htm di Address Bar, maka suatu halaman web sederhana akan muncul dihadapan anda.
<HTML> <HEAD> <TITLE>Selamat Datang</TITLE> </HEAD> <BODY> Selamat datang di halaman web pribadiku.<P> Salam manis dariku yang manis ... </BODY> </HTML>
Halaman : 1
BAGIAN HEAD Bagian head sebenarnya tidak harus ada pada dokumen HTML, dan isi bagian head (kecuali judul dokumen) tidak akan terlihat oleh pembaca dokumen tersebut. Bagian ini dituliskan diantara tag <HEAD> dan </HEAD>. Elemen pada bagian akan mengerjakan tugas sebagai berikut: Menampilkan judul dokumen Menjembatani hubungan (link) antar dokumen Memberitahu browser untuk membuat form pencarian Menyediakan metode untuk mengirim pesan ke tipe browser tertentu
Elemen yang mungkin terdapat pada bagian head :
Tag <TITLE> : digunakan untuk memberi judul dokumen.

Contoh : <TITLE>Teks Judul</TITLE> Tag <BASE> : digunakan untuk menentukan basis URL dari sebuah dokumen. Basis URL ini bermanfaat jika dalam dokumen terdapat link-link yang bersifat relatif, karena link tersebut tetap akan bekerja meskipun dokumen dipindahkan ke direktori lain atau ke komputer lain. Bentuk penulisan : <BASE HREF=Nama URL> Contoh : <BASE HREF=http://www.alamat.com/direktori> Tag <LINK> : digunakan untuk menunjukkan relasi antar dokumen HTML. Tag ini mempunyai beberapa atribut dengan bentuk penulisan sebagai berikut :
<LINK REV=Teks HREF=Alamat URL> <LINK REL=Teks HREF=Alamat URL>
Contoh :
<LINK REL=index HREF=index.htm>
Untuk membuat relasi dengan file index.htm Tag <META> : digunakan untuk mendefiniskan informasi-informasi di luar HTML. Tag ini mempunyai beberapa atribut HTTP-EQUIV, NAME, URL, CONTENT. Contoh :
<META HTTP-EQUIV=Refresh CONTENT=60 URL=http://www.tersayang.com>
Perinta tersebut akan diterjemahkan oleh browser : tunggu 60 detik, kemudian panggil dokumen baru di http://www.tersayang.com
BAGIAN BODY Bagian body merupakan isi dari dokumen HTML, semua informasi yang akan ditampilkan, mulai dari teks, gambar, sound dan yang lainnya ditempatkan di bagian ini. Bagian ini dituliskan diantara tag <BODY> dan </BODY>. Halaman : 2
Tag <BODY> mempunyai beberapa atribut sebagai berikut: ATRIBUT ALINK BACKGROUND BGCOLOR BGPROPERTIES LEFTMARGIN LINK TEXT TOPMARGIN VLINK FUNGSI Menentukan warna dari link aktif Merujuk pada URL atau direktori dari file gambar yang digunakan sebagai background halaman Menentukan warna background dokumen Jika diisi FIXED, maka gambar background tidak ikut tergulung Menentukan batas kiri dokumen dalam satuan pixel Menentukan warna dari link yang belum dikunjungi Menentukan warna teks Menentukan batas atas dokumen dalam satuan pixel Menentukan warna dari link yang sudah dikunjungi
Beberapa atribut di atas digunakan untuk pengaturan warna. Warna didefinisikan dengan bilangan heksadesimal dan ditulis dengan diawali tanda #. Bilangan tersebut terdiri dari 6 digit, tiap 2 digit mewakili warna dasar RGB (Red,Green,Blue). Selain itu HTML juga mendefinisikan 16 nama untuk warna-warna standar: WARNA Black (Hitam) Maroon (Merah Tua) Green (Hijau) Olive (Hijau Kekuningan) Navy (Biru Gelap) Purple (Ungu) Teal (Biru Kehijauan) Gray (Abu-abu) Silver (Perak) Red (Merah) Lime (Hijau Terang) Yellow (Kuning) Blue (Biru) Fuchsia (Merah Keunguan) Aqua (Biru Air) White (Putih) Contoh pengaturan bagian body :
<HTML> <HEAD> <TITLE>Penggunaan Body</TITLE> </HEAD> <BODY BGCOLOR=Silver TEXT=Blue ALINK=#000000 VLINK=#FF0000 LINK=Green> Anda ingin mencari kos-kosan murah?<BR> Kliklah pada <A HREF=http://www.kos2an.com>link</A> berikut. </BODY> </HTML>
NILAI #000000 #800000 #008000 #808000 #000080 #800080 #008080 #808080 #C0C0C0 #FF0000 #00FF00 #FFFF00 #0000FF #FF00FF #00FFFF #FFFFFF
Halaman : 3
MEMFORMAT DOKUMEN HTML

Tag <P>..</P> : digunakan untuk memulai suatu paragraf baru disertai dengan pengaturan perataan teks ke kiri, tengah, atau kanan halaman. Tag ini ditutup dengan tab </P>, atau ditulis tanpa penutup </P>. Penulisan : <P ALIGN=LEFT|CENTER|RIGHT> ... </P> Contoh :
<P ALIGN=Left>Paragraf 1 rata kiri</P> <P ALIGN=Center>Ini Paragraf 2 rata tengah</P>
Tag <BR> : digunakan untuk membuat baris baru, ditulis tanpa penutup. Contoh :
Ini di baris pertama<BR>Ini di baris kedua<P> Yang ini adalah paragraf baru.
Tag <HR> : untuk membuat garis pemisah/horizontal pada dokumen. Tag ini memiliki beberapa atribut diantaranya : NOSHADE (menonaktifkan efek 3 dimensi), SIZE (ukuran), WIDTH (lebar garis) dan COLOR (warna). Contoh :
Teks di atas garis<HR SIZE=5 WIDTH=75%>Teks di bawah garis
Tag <H#> : digunakan untuk membuat heading sebuah dokumen, nilai # berkisar 1 sampai 7. Contoh : <H1>Judul Bab</H1> <H2>Sub Judul</H2> <H3>Sub Sub Judul</H3>
Tag <CENTER>..</CENTER> : untuk menampilkan teks di tengah halaman. Contoh : <center>Tulisan ini berada ditengah</center>
MEMFORMAT KARAKTER Tag <CODE>..</CODE> : untuk menandai suatu daftar source code
program. Biasanya ditampilkan oleh browser dalam suatu monospaced font yang
lebih kecil. Tag <STRONG>..</STRONG> : untuk menandai attention (bagian penting) pada suatu bagian dari teks ; <STRONG> biasanya ditampilkan dengan cetak tebal oleh browser. Beberapa tag untuk memformat karakter secara fisik : TAG
<B>..</B> <BLINK>..</BLINK> <I>..</I> <TT>..</TT>
KETERANGAN Menampilkan huruf tebal Menampilkan huruf berkedip-kedip. Menampilkan huruf miring Menampilkan huruf seperti huruf mesin ketik Halaman : 4
<U>..</U> <STRIKE>..</STRIKE> <BIG>..</BIG> <SMALL>..</SMALL> <SUB>..</SUB> <SUP>..</SUP>
Menampilkan huruf bergaris bawah Menampilkan huruf yang tercoret Menampilkan huruf dengan ukuran lebih besar Menampilkan huruf dengan ukuran lebih kecil Menampilkan huruf subscript Menampilkan huruf superscript
Tag <FONT>..</FONT> : digunakan untuk mengatur jenis, ukuran dan warna huruf. Ukuran huruf berkisar 1 sampai 7, defaultnya 3. Bentuk penulisan :
<FONT FACE=nama font SIZE=ukuran COLOR=warna>..</FONT>
Contoh : <FONT FACE="Arial" COLOR=#0000FF>Huruf Arial</FONT> MENGGUNAKAN KARAKTER KHUSUS Jika pada halaman HTML ingin ditampilkan karakter-karakter khusus seperti tanda lebih kecil, lebih besar atau huruf-huruf lain yang tidak ada di keyboard, HTML menyediakan beberapa simbol sebagai berikut : SIMBOL © ® < > & " ° Contoh :
<HTML> <BODY> Air mendidih pada suhu 100 °C <BR> Copyrights©2002 by Tersanjung, Corp. </BODY> </HTML>
KETERANGAN copyright symbol registered trademark symbol trademark symbol nonbreaking space less-than symbol greater-than symbol ampersand quotation mark degree
BENTUK < > & "

o
Halaman : 5
MENAMBAHKAN GAMBAR
Untuk menyisipkan sebuah gambar ke dalam halaman HTML digunakan tag <IMG>. Format gambar yang umumnya digunakan dan dikenal oleh browser adalah GIF, JPEG atau PNG. Tag <IMG> memiliki beberapa atribut sebagai berikut : ATRIBUT SRC=url ALIGN=.. ALT=teks HEIGHT=.. WIDTH=.. Contoh :
<IMG SRC="dessy.gif> <IMG SRC="andi.jpg" WIDTH="180" ALT="Foto Andi Lau">
KETERANGAN URL atau direktori file gambar Menentukan posisi teks di sekitar gambar, nilainya adalah TOP, MIDDLE, BOTTOM, LEFT atau RIGHT Menentukan tulisan yang akan ditampilkan jika browser tidak dapat menampilkan gambar untuk alasan tertentu. Menentukan tinggi gambar dalam pixel Menentukan lebar gambar dalam pixel
LINK KE DOKUMEN ATAU SITUS LAIN

Link adalah sebuah gambar atau teks yang akan menghubungkan dengan sebuah dokumen atau alamat tertentu. Untuk membuat link ini digunakan tag <A>..</A>). Tulisan dan HTML lainnya yang ada diantara tag ini akan ditampilkan kepada user sebagai suatu hotlink, biasanya dengan warna yang berbeda atau diberi garis bawah. Tag <A> mempunyai 2 atribut yaitu : HREF="url" : untuk menentukan URL yang akan ditampilkan setelah user melakukan klik padanya. Contoh :
Kunjungi <A HREF="http://www.arema.com">situs arema</A> <A HREF="http://www.arema.com"><IMG SRC="arema.gif"></A>
NAME : untuk menentukan lokasi dalam HTML tersebut yang dapat di link dari halaman lain. Hal ini memungkinkan dokumen lain mengacu ke lokasi tertentu dalam suatu halaman. Untuk mengacu pada suatu nama acuan, URL halaman ditentukan dengan tanda #. Sebagai contoh,
<A NAME="Copyright">
mendefinisikan nama link Copyright dalam dokumen tersebut. Contoh :

Klik disini untuk menuju <A HREF="#Copyright">Copyright</A>
Halaman : 6
MEMBUAT TABEL
Tag HTML yang digunakan untuk membentuk sebuah tabel adalah sebagai berikut: Tag <TABLE>..</TABLE> : untuk mendefinisikan sebuah tabel Tag <TR>..</TR> : untuk mendefinisikan baris tabel (Table Row) Tag <TH>..</TH> : mendefinisikan judul kolom/baris tabel (Table Header) Tag <TD>..</TD> : untuk mendefinisikan isi setiap kolom tabel (Table Data)
Tag-tag tersebut harus dirangkaikan sedemikian rupa sehingga dapat membentuk sebuah tabel, jadi tiap-tiap tag tidak dapat berdiri sendiri.
Contoh :
<HTML> <HEAD> <TITLE>Menggunakan Tabel</TITLE> </HEAD> <BODY TEXT="#000000" BGCOLOR="#FFFFFF"> <TABLE BORDER=1> <TR> <TH>Kolom 1</TH> <TH>Kolom 2</TH> </TR> <TR> <TD>Baris 1 Kolom 1</TD> <TD>Baris 1 Kolom 2</TD> </TR> <TR> <TD>Baris 2 Kolom 1</TD> <TD>Baris 2 Kolom 2</TD> </TR> </TABLE> </BODY> </HTML>
Hasil tampilannya adalah sebagai berikut :
Halaman : 7
Tag <TABLE> mempunyai beberapa atribut sebagai berikut : BORDER : untuk menentukan tebal dari border/bingkai tabel. Contoh :
<Table Border=1> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Table>
CELLSPACING : untuk menentukan jumlah spasi antar sel dan border (jika sel berada di sisi dari tabel). Contoh :
<Table Border=1 Cellspacing=5> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Table>
CELLPADDING : untuk menentukan jumlah spasi antara data dalam cell dan border sel. Contoh :
<Table Border=1 Cellspacing=5 Cellpadding=5> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Table>
WIDTH : untuk menentukan lebar tabel, dinyatakan dalam satuan pixel atau prosentase terhadap lebar halaman. Contoh :
<Table Border=1 Cellspacing=5 Cellpadding=5 Width=75%> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Table>
ALIGN : untuk menentukan perataan tabel di LEFT, CENTER, atau RIGHT dari halaman. Contoh :
<Table Border=1 Cellspacing=5 Cellpadding=5 Width=60% Align=Center> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Table>
BGCOLOR : untuk menentukan warna latar belakang tabel. Contoh :

<Table Border=1 Cellspacing=5 Cellpadding=5 Width=60% Align=Center bgcolor=#FF0000> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Table>
BORDERCOLOR : untuk menentukan warna bingkai tabel. Contoh :

<Table Border=1 Cellspacing=5 Cellpadding=5 Width=60% Align=Center BorderColor=#FF0000> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Table>

BORDERCOLORLIGHT : untuk menentukan warna depan bingkai tabel. BORDERCOLORDARK : untuk menentukan warna bayangan bingkai tabel.
Halaman : 8
Contoh :
<Table Border=1 Cellspacing=5 Cellpadding=5 Width=60% Align=Center BorderColorLight=#FF0000 BorderColorDark=#000000> <Tr><Td>Baris 1 kolom 1</Td></Tr> </Tr>

BACKGROUND : untuk menentukan gambar background tabel. HEIGHT : untuk menentukan tinggi tabel. VALIGN : untuk menentukan posisi vertikal dalam sel tabel, nilainya adalah TOP, MIDDLE, dan BOTTOM
Sedangkan atribut yang dimiliki oleh tag <TR>, <TH> dan <TD> adalah : Atribut yang sah untuk tag <TR> adalah ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT. Atribut yang sah untuk tag <TH> adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT. Atribut yang sah untuk tag <TD> adalah ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, dan BGCOLORLIGHT.
Penjelasan untuk beberapa atribut tersebut sebagai berikut : COLSPAN : untuk menentukan jumlah kolom yang akan digabung. Contoh :
<Table Border=1> <Tr><Th Colspan=2>Ini Judul tabel</Th></Tr> <Tr><Td>Baris 1 Kolom 1</Td> <Td>Baris 1 Kolom 2</Td> </Tr> </Table>
ROWSPAN : untuk menentukan jumlah baris yang akan digabung. Contoh:

<Table Border=1> <Tr><Td RowSpan=2>Kolom 1</Td> <td>Baris 1 Kolom 2</td> </Tr> <Tr><Td>Baris 2 Kolom 2</Td></Tr> </Table>
NOWRAP : untuk menjaga agar tulisan dalam sel tetap dalam satu baris.
Halaman : 9

Dasar HTML 1

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 HTML 1

Diunggah oleh

Hak Cipta:

Format Tersedia

BAGIAN 1 DASAR HTML

--> Bagian Utama --> Menandai akhir file HTML

Elemen yang mungkin terdapat pada bagian head :

Tag <TITLE> : digunakan untuk memberi judul dokumen.

<LINK REL=index HREF=index.htm>

MEMFORMAT DOKUMEN HTML

<U>..</U> <STRIKE>..</STRIKE> <BIG>..</BIG> <SMALL>..</SMALL> <SUB>..</SUB> <SUP>..</SUP>

BENTUK < > & "

LINK KE DOKUMEN ATAU SITUS LAIN

mendefinisikan nama link Copyright dalam dokumen tersebut. Contoh :

Hasil tampilannya adalah sebagai berikut :

BGCOLOR : untuk menentukan warna latar belakang tabel. Contoh :

BORDERCOLOR : untuk menentukan warna bingkai tabel. Contoh :

ROWSPAN : untuk menentukan jumlah baris yang akan digabung. Contoh:

Anda mungkin juga menyukai