KONSEP DASAR HTML DALAM PEMBUATAN HALAMAN WEB fileMEMBUAT DOKUMEN HTML Sebelum kita memulai menulis...

5

KKOONNSSEEPP DDAASSAARR HHTTMMLL DDAALLAAMM PPEEMMBBUUAATTAANN

HHAALLAAMMAANN WWEEBB

MEMBUAT DOKUMEN HTML Sebelum kita memulai menulis dokumen HTML pertama kali yang harus anda

lakukan adalah menentukan lokasi atau folder untuk menyimpan dokumen dan program

editor yang akan digunakan. Untuk membuat dokumen HTML ini anda memerlukan

editor yang disediakan Microsoft windows, misalnya Notepad.

HTML merupakan bahasa bertanda, menggunakan, rangkaian teks tertentu (tag)

untuk menandai teks yang mempunyai interpretasi khusus. Formatting TAG pada HTML

mengandung dua TAG, yaitu TAG pembuka dan TAG penutup dan TAG pembuka saja.

Formatting TAG pembuka adalah suatu TAG yang diawali dengan <NAMA_TAG> dan

diakhiri dengan </NAMA_TAG>. Sedangkan TAG pembuka saja adalah TAG yang

hanya dibuat dibagian awalnya saja yaitu <NAMA_TAG> tanpa ditutup dengan tag

penutup lagi.

Selain itu dokumen HTML harus dibungkus dengan <HTML>. Artinya dibagian

awal anda harus menuliskan <HTML> dan dibagian akhir dokumen tersebut juga harus

ditutup denga </HTML> juga. Supaya dokumen yang kita buat tersebut dikenali dengan

baik oleh program browser yang digunakan.

Menulis dokumen HTML.

Untuk membuat dokumen HTML prosedur yang harus anda lakukan adalah sebagai

berikut:

1. klik start windows.

2. Klik dan pilih all Programs.

3. Klik dan pilih Accessories.

4. Klik dan pilih notepad. Setelah itu jendela notepad akan tampil. Kemudian

sebagai latihan ketikkan dokumen HTML berikut:

<html>

6

Latihan menulis dokumen html

</html>

Menyimpan dokumen

Untuk menyimpan dokumen yang telah anda buat, prosedurnya sebagai berikut:

1. dari jendela notepad tampilkan Menu File

2. pilih Save, setelah itu akan tampil kotak dialog Save as.

3. tentukan lokasi drive atau folder tempat dokumen html tersebut akan disimpan.

4. ketikkan nama file HTML anda, lengkap dengan akhiran (extention) HTM atau

HTML,misalnya LATIHAN1.HTML

5. klik tombol save.

Menjalankan dokumen HTML

Untuk menjalankan dokumen HTML anda harus memasang atau menginstal program

browser misalnya Internet Explorer. Setelah program browser tersebut anda instal baru

anda bisa menampilkan hasil pekerjaan anda tersebut. Untuk browser Internet Explorer

biasanya sudah otomatis terpasang ketika kita menginstal sistem operasi windows.

Prosedur yang harus anda lakukan untuk menampilkan hasil pekerjaan anda adalah

sebagai berikut:

1. Jalankan program Internet Explorer sehingga tampil sbb:

7

.

2. Pilih dan klik menu File

3. Klik Open. Setelah itu akan tampil kotak dialog open seperti pada gambar

dibawah ini.

4. klik tombol browse.

5. setelah itu akan tampil kotak dialog open.

6. tentukan lokasi atau folder tempan menyimpan dokumen latihan1.html

7. klik nama file yang akan ditampilkan,misalnya latihan1.html

8. klik tombol Open

9. Klik OK. Setelah itu akan tampil di jendela Internet Explorer seperti gambar

dibawah ini :

8

1. Heading Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen

HTML.

Contoh1.html

<HTML>

<HEAD>

<TITLE>Heading</TITLE>

</HEAD>

<BODY>

<H1>Heading level 1</H1>






</BODY>

</HTML>

9

2. Paragraf

Untuk membuat paragraph digunakan tag <P>. setelah tag <P> anda dapat menuliskan isi

paragraph dan paragraph tersebut harus diakhiri dengan tag penutup </P>. Anda dapat

mengatur isi paragraph dengan menggunakan attribut ALIGN. Attribut ALIGN diikuti

dengan posisi yang diinginkan (LEFT/RIGTH/CENTER).

Contoh2.html

<HTML>

<HEAD>

<TITLE>Paragraf</TITLE>

</HEAD>

<BODY>

<P ALIGN="right">

Beberapa tahun yang lalu, seorang hartawan meninggal dunia

sedangkan ia tidak memiliki ahli waris. Kepada

pengacaranya, ia meninggalkan dua buah surat yang

disegel.Yang sebuah berisi permintaan agar jenazahnya

dikuburkan pada jam empat dini hari. Surat yang kedua belum

diketahui isinya karena disampulnya tertulis pesan agar

dibuka seusai pemakaman jenazah

<P ALIGN="center">

Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul

empat dini hari. Karena tidak lazimnya waktu pemakaman pada

jam tersebut, yang ikut mengantar jenazahnya hanya empat

orang kawannya yang paling setia

<P ALIGN="left">

10

Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa

terkejutnya pengacara

ketika membaca isinya, ialah wasiat bahwa seluruh harta

warisan (yang bernilailebih dari 800.000 pound) dibagi rata

kepada orang-orang yang mengantarkan jenazahnya ke

pemakaman. Dengan demikian, yang berhak memperoleh harta

yangbanyak itu hanya empat orang, sebagai imbalan bagi

kesetiaan mereka. Sumber humor, kisah dan pepatah

</P>

</BODY>

</HTML>

Hasilnya adalah :

3. BR (Line Break) Tag line break (BR) digunakan untuk menulis teks pada baris berikutnya. Tag <BR>

membuat baris baru tanpa memberi baris kosong.

Contoh3.html

<HTML>

<HEAD>

<TITLE>Line Break</TITLE>

</HEAD>

11

<BODY>

<P>Banyak cara yang dapat digunakan untuk melakukan

instalasi FreeBSD. Namun ada tiga cara yang paling sering

dilakukan , yaitu :

<BR> Instalasi melalui FTP

<BR> Instalasi melalui CDROM

<BR> Instalasi melalui partisi DOS

</BODY>

</HTML>

4. Font Untuk mengatur huruf dokumen HTML digunakan tag <FONT>. Tag <FONT> memiliki

beberapa attribut untuk mengatur ukuran huruf, jenis dan warna dari huruf.

Ukuran Huruf:

Contoh4a.html

<HTML>

<HEAD>

<TITLE>Ukuran font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1>Ukuran font 1</FONT>

12







</BODY>

</HTML>

Jenis Huruf :

Contoh4b.html

<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT FACE = "Arial">Arial , contoh AC Milan <P>

<FONT FACE = "Verdana">Verdana , contoh Persebaya <P>

<FONT FACE = "Tahoma">Tahoma , contoh Indonesia <P>

</BODY>

</HTML>

13

Warna Huruf : Contoh4c.html

<HTML>

<HEAD>

<TITLE>Warna Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT COLOR= "red">Manado – Jakarta - Bali <P>

<FONT COLOR = "#FF0000">tetap PSM Makassar kan <P>

<FONT COLOR = "#00FF00">Ini baru Persebaya <P>

</BODY>

</HTML>

14

5. Link Perintah anchor (A) digunakan untuk membuat suatu link. Untuk membuat link ke

dokumen HTML lain digunakan perintah

<a href=”nama_dokumen.html”>Teks pada Browser</a>.

Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu disediakan

nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan

attribut NAME pada tag <A>. Contoh

<A NAME=”ipen”>IPEN</A>.

Cara melakukan link ke bagian tersebut adalah

<A HREF=”#ipen”>Teks dibrowser</A>.

Contoh5a.html

<HTML>

<HEAD>

<TITLE>Link</TITLE>

</HEAD>

<BODY>

<A NAME="lengkap">Pemain-pemain AC Milan menurut abjad</A>

<BLOCKQUOTE>

<P>Abbiati ,<A HREF="#abbiati">info lengkap</A>

<P>Ayala

<P>Ambrosini

15

<P>Albertini

<P>Boban

<P>

<A HREF="contoh3-82.html">kalo mau tahu lagi klik

disini</A>

</BLOCKQUOTE>

<P><A NAME="abbiati">Abbiati</A>

<BLOCKQUOTE>

<P>Kiper ketiga timnas Italia runner up Euro 2000

<BR>Kiper utama U-21 juara Piala Eropa U-21

<BR>Kiper utama AC Milan juara Seri-A 19981-1999

</BLOCKQUOTE>

<P><A HREF="#lengkap">kembali ke atas</A>

</BODY>

</HTML>

contoh5b.html

<HTML>

<HEAD>

<TITLE>Link tujuan</TITLE>

</HEAD>

<BODY>

<P ALIGN="center"> Maaf, hanya sedikit

<BR>Chamot

<BR>Dida

<BR>Shevchenko

<BR><A HREF="contoh3-81.html">kembali</A>

</BODY>

</HTML>

16

6. Ordered list Ordered list digunakan untuk membuat daftar di mana tiap bagiannya memiliki nomor

secara berurut, Ordered list dimulai dengan tag <OL> dan diakhiri dengan tag penutup

</OL>. Untuk menyatakan tiap bagiannya digunakan tag <LI> dimana tag ini tidak

menggunakan tag penutup. Dengan menggunakan ordered list anda tidak perlu memberi

nomor untuk tiap-tiap bagian.

Contoh6a.html

<HTML>

<HEAD>

<TITLE>Ordered List</TITLE>

</HEAD>

<BODY>

Empat besar pemain termahal di dunia

<OL>

<LI>Luis Figo

<LI>Hernan Crespo

<LI>Christian Vieri

<LI>Nicolas Anelka

</OL>

</BODY>

</HTML>

secara default ordered list akan melakukan penomoran 1,2,3… untuk mengubah nomor

tersebut digunakan attribut TYPE pada tag <OL>. Berikut adalah daftar attribut TYPE.

TYPE = 1 Nomor urut 1,2,3,… (default)

TYPE = I Urutan I, II, III, …

TYPE = i Urutan i, ii, iii,…

17

TYPE = A Urutan A, B, C,…

TYPE = a Urutan a, b, c, …

Contoh6b.html

<HTML>

<HEAD>

<TITLE>OL dengan atribut</TITLE>

</HEAD>

<BODY>

<OL TYPE=A>

<LI>Daftar empat pemain termahal didunia

<OL TYPE=I>

<LI>Luis Figo

<LI>Hernan Crespo

<LI>Christian Vieri

<LI>Nicolas Anelka

</OL>

<LI>Urutan lima sampai delapan

<OL TYPE=1 START=5>

<LI>Denilson

<LI>Gabriel Batigol

<LI>Ronaldo

<LI>Amoroso

</OL>

</OL>

</BODY>

<HTML>

18

7. Unordered List Berbeda dengan ordered list, dalam unordered list tidak di jumpai urutan dalam suatu

daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet

menjadi default dalam unordered list. Untuk menggunakan unordered list digunakan tag

<UL> dan tag penutup </UL> dan sama dengan ordered list setiap bagiannya digunakan

tag <LI>.

Contoh7a.html

<HTML>

<HEAD>

<TITLE>Unordered List</TITLE>

</HEAD>

<BODY>

Empat besar Seri-A Liga Indonesia

<UL>

<LI>Manado

<LI>Tondano

<LI>Tomohon

<LI>Kawangkoan

</UL>

</BODY>

<HTML>

19

Sama seperti Ordered List, unorderlist mempunyai attribut TYPE. Berikut adalah daftar

attribut TYPE

TYPE = circle Tanda lingkaran (default)

TYPE = disk Tanda Cakram

TYPE = square Tanda Kotak

Contoh7b.html

<HTML>

<HEAD>

<TITLE>UL dengan atribut</TITLE>

</HEAD>

<BODY>

Klub sepakbola di Jawa Timur

<UL TYPE=square>

<LI>Persebaya Surabaya

<LI>Persela Lamongan

<LI>Persij Jember

</UL>

</BODY>

<HTML>

8. Image dalam HTML Untuk memperindah situs biasanya orang menambahkan gambar dalam file HTML.

Untuk menambah image pada HTML digunakan tag <IMG>. Dalam tag <IMG> juga

terdapat attribut SRC dimana untuk menentukan dimana letak sumber gambar.

Contoh8a.html

20

<HTML>

<HEAD>

<TITLE>Grafik dalam halaman web</TITLE>

</HEAD>

<BODY>

<P ALIGN="left">I Love you so much!!!</P>

<P ALIGN="left"><IMG SRC="pic1.jpg" ALT="zahwa sayang"></P>

</BODY>

</HTML>

9. Tabel

Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang

ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal <TABLE> dan tag

penutup </TABLE>. Tag <TABLE> memiliki beberapa bagian penting yaitu :

1. <CAPTION> … </CAPTION> digunakan untuk membentuk judul tabel. Judul

ini terletak di luar table

2. <TH> … </TH> berfungsi untuk meletakkan judul tabel di bagian paling atas.

3. <TR>…</TR> dipakai untuk membentuk baris pada suatu tabel.

4. <TD>…</TD> digunakan untuk menulis data dan batas dari cell.

Contoh9.html

<HTML>

<HEAD>

<TITLE>Tabel</TITLE>

</HEAD>

<BODY>

<TABLE>

<CAPTION>Seputar Calciomeecato</CAPTION>

<TR>

<TH>Nama Klub</TH>

<TH>Berita</TH>

</TR>

<TR>

<TD>Fiorentina</TD>

<TD>Fiorentina mendatangkan Nuno Gomes untuk menggantikan

sang legenda Batigol</TD>

</TR>

<TR>

<TD>Lazio</TD>

21

<TD>Lazio menjadi klub dengan rekor pembelian pemain

sebesar 240 miliar lira!</TD>

</TR>

<TR>

<TD>Perugia</TD>

<TD>Ahn Jung-Whan resmi menjadi pemain pinjaman

Perugia</TD>

</TR>

<TR>

<TD>Udinese</TD>

<TD>Pemain Spanyol berusia 23 tahun, Luis Helguera menjadi

pemain Udinese

<BR>

dengan transfer senilai 349 juta lira</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Perataan pada table digunakan attribut ALIGN=”left/right/center” untuk horizontal,

sedangkan untuk perataan table untuk vertikal menggunakan attribut

VALIGN=”top/middle/bottom” Untuk tinggi dan lebar digunakan attribut WIDTH dan

HEIGHT Contoh9a.html

<HTML>

<HEAD>

22

<TITLE>Tabel dengan WIDTH dan ALIGN</TITLE>

</HEAD>

<BODY>

<TABLE WIDTH="88%" BORDER=”2” HEIGHT="210">

<TR>

<TD WIDTH="30%" HEIGHT="110" VALIGN="top">Lihatlah

VALIGN="top"<br>

Janganlah merasa malu mempelajari sesuatu yang tidak

diketahuinya</TD>

<TD WIDTH="34%" HEIGHT="110" VALIGN="middle">Bandingkan

dengan VALIGN

="middle"<br>

</TD>

<TD WIDTH="36%" HEIGHT="110" VALIGN="bottom">bagaimana

dengan ini VALIGN

="bottom"</TD>

</TR>

<TR>

<TD WIDTH="30%" HEIGHT="100" ALIGN="left">kalo ini

ALIGN="left"</TD>

<TD WIDTH="34%" HEIGHT="100"

ALIGN="center">ALIGN="center"</TD>

<TD WIDTH="36%" HEIGHT="100" ALIGN="right">Dunia diciptakan

untuk semua makhluk, bukan untuk kepentingan dunia itu

sendiri, dan ini dengan ALIGN = "right"</TD>

</TR>

</TABLE>

</BODY>

</HTML>

23

Untuk membuat jarak spasi antara cell dan spasi antara cell dan text digunakan attribut

CELLSPACING dan CELLPADDING

Contoh9b.html

<HTML>

<HEAD>

<TITLE>Tabel dengan CELLSPACING dan CELLPADDING</TITLE>

</HEAD>

<BODY>

<TABLE BORDER="2" CELLPADDING="10" CELLSPACING="10"

WIDTH="85%">

<TR>

<TD WIDTH="43%">baris 1, kolom 1</TD>


</TR>

<TR>



</TR>

</TABLE>

</BODY>

</HTML>

24

Untuk menggabungkan beberapa kolom digunakan attribut COLSPAN, sedangkan untuk

menggabungkan beberapa baris (row) digunakan attribute ROWSPAN.

Latihan9c.html

<HTML>

<HEAD>

<TITLE>Tabel dengan ROWSPAN dan COLSPAN</TITLE>

</HEAD>

<BODY>


WIDTH="85%">

<TR>

<TD WIDTH="43%" ROWSPAN="2">baris 1, kolom 1<P>baris 2,

kolom 1</TD>


</TR>

<TR>


</TR>

<TR>

<TD WIDTH="100%" COLSPAN="2">baris 3, kolom 1<P>baris 3,

kolom 2</TD>

</TR>

</TABLE>

</BODY>

</HTML>

25

Pewarnaan pada tabel digunakan attribut BGCOLOR untuk latar belakang, sedangkan

pewarnaan pada border menggunakan attribut BORDERCOLOR.

Contoh9d.html

<HTML>

<HEAD>

<TITLE>Tabel dengan ROWSPAN dan COLSPAN</TITLE>

</HEAD>

<BODY>


WIDTH="100%"

BORDERCOLOR="#FF0000">

<TR>

<TD WIDTH="50%" BGCOLOR="#808080"> </TD>

<TD WIDTH="50%"> </TD>

</TR>

<TR>

<TD WIDTH="50%"> </TD>

<TD WIDTH="50%" BGCOLOR="#008080"> </TD>

</TR>

</TABLE>


WIDTH="100%"

BORDERCOLORLIGHT="#008080"

BORDERCOLORDARK="#800080">

<TR>

<TD WIDTH="100%"> </TD>

</TR>

</TABLE>

26

</BODY>

</HTML>

10. Form dan Input Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukkan dari

user untuk kemudian dikirim ke server. Tag <FORM> menyediakan kerangkanya tag

<INPUT> menyediakan elemennya.

a. Form

Standar penulisan Form adalah sebagai berikut

<FORM METHOD=”POST/GET” ACTION=”URL”>

…

…

</FORM>

attribut METHOD memiliki dua nilai yaitu POST dan GET. Metode GET mengirimkan

data pada server dengan cara meletakkan data pada bagian akhir URL (Uniform Resource

Locator) yang ditunjuk. Metode Post mengirimkan datanya secara terpisah. Jika

datamasukan banyak, disarankan menggunakan metode POST. Attribut ACTION berisi

URL dari program yang dipanggil oleh form tersebut.

b. Texbox

Adalah input untuk memasukkan data

Contoh10b.html

<HTML>

<HEAD>

<TITLE>Form Input dengan Text box</TITLE>

27

</HEAD>

<BODY>

<P>Rancangan awal BUKU TAMU </P>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="2">

<TR>

<TD WIDTH="11%">Nama</TD>

<TD WIDTH="3%">:</TD>

<TD WIDTH="86%"><INPUT TYPE="text" NAME="nama"

SIZE="20"></TD>

</TR>

<TR>

<TD WIDTH="11%">Alamat</TD>


<TD WIDTH="86%"><INPUT TYPE="text" VALUE="JEMBER"

NAME="alamat"

size="20"></TD>

</TR>

<TR>

<TD WIDTH="11%">Sekolah</TD>


<TD WIDTH="86%"><INPUT TYPE="text" NAME="sekolah"

SIZE="20"></TD>

</TR>

</TABLE>

</BODY>

</HTML>

c. Cek Box

Adalah input yang menampilkan pilihan-pilihan

Contoh10c.html

28

<HTML>

<HEAD>

<TITLE>Form Input dengan Check box</TITLE>

</HEAD>

<BODY>

<P>Pilih yang Anda suka </P>

<P>Daftar Jurusan</P>

<P>

<INPUT TYPE="checkbox" NAME="C1" CHECKED>Teknik Elektro<BR>

<INPUT TYPE="checkbox" NAME="C2">Pertanian<BR>

<INPUT TYPE="checkbox" NAME="C3">Kedokteran<BR>

<INPUT TYPE="checkbox" NAME="C4">Teknik Informatika

</P>

</BODY>

</HTML>

d. Radio

Adalah input pilihan. Berbeda dengan cekbox radio hanya diwajibkan memilih satu

pilihan setiap group optionnya.

Contoh10d.html

<HTML>

<HEAD>

<TITLE>Form Input dengan Radio box</TITLE>

</HEAD>

<BODY>

29

<P>Pilih salah satu </P>

<P>Usia Anda</P>

<P>

<INPUT TYPE="radio" VALUE="V1" CHECKED NAME="R1">< 15

Tahun<BR>

<INPUT TYPE="radio" VALUE="V2" NAME="R1">15-19 Tahun<BR>



<INPUT TYPE="radio" VALUE="V5" NAME="R1"> > 35 Tahun<BR>

</P>

</BODY>

</HTML>

e. Submit dan Reset

Dalam form sangat penting dan harus ada tombol Submit dan Reset. Tombol ini

berfungsi untuk mengirimkan data yang sudah diinput dari elemen-elemen form.

Syntaxnya adalah :

<INPUT TYPE=”submit” NAME=”SUBMIT”>

<INPUT TYPE=”reset” NAME=”RESET”>

Contoh10e.html

<HTML>

<HEAD>

<TITLE>BUKU TAMU</TITLE>

</HEAD>

<BODY>

<H3>

<P ALIGN="center">BUKU TAMU</P>

30

</H3>

<FORM METHOD="POST" ACTION="thanks.html">

<TABLE BORDER="0" CELLPADDING="2" WIDTH="100%">

<TR>

<TD WIDTH="8%">Nama</TD>


<TD WIDTH="88%"><INPUT TYPE="text" NAME="nama"

SIZE="20"></TD>

</TR>

<TR>

<TD WIDTH="8%">Asal</TD>


<TD WIDTH="88%"><INPUT TYPE="text" NAME="asal"

SIZE="20"></TD>

</TR>

<TR>

<TD WIDTH="8%">Email</TD>


<TD WIDTH="88%"><INPUT TYPE="text" NAME="email"

SIZEe="20"></TD>

</TR>

<TR>

<TD WIDTH="8%" VALIGN="top">Homepageku</TD>

<TD WIDTH="4%" VALIGN="top">:</TD>

<TD WIDTH="88%"><INPUT TYPE="radio" VALUE="V1" CHECKED

NAME="R1">Bagus sekali<BR>

<INPUT TYPE="radio" VALUE="V2" NAME="R1">Bagus<BR>

<INPUT TYPE="radio" VALUE="V3" NAME="R1">Biasa

saja<P> </TD>

</TR>

</TABLE>

<P><INPUT TYPE="submit" VALUE="Kirim" NAME="B1"> <INPUT

TYPE="reset" VALUE="Batal"

NAME="B2"></P>

</FORM>

</BODY>

</HTML>

31

***Selesai***

KONSEP DASAR HTML DALAM PEMBUATAN HALAMAN WEB fileMEMBUAT DOKUMEN HTML Sebelum kita memulai menulis...

Documents

Transcript of KONSEP DASAR HTML DALAM PEMBUATAN HALAMAN WEB fileMEMBUAT DOKUMEN HTML Sebelum kita memulai menulis...