Mengenal HTML

Posted by andi telaumbanua on Jul 26, 2018 in Praktikum |

Mengenal HTML

(sumber: Materi kuliah aplikasi pemrograman dan komputer)

HTML (Hypertext Markup Language) adalah sebuah sistem untuk proses mark up atau pemakaian tag pada sebuah dokumen agar dokumen tersebut dapat ditampilkan di Word Wide Web.

Kunci HTML adalah tag pembuka ( misalnya <HTML>) dan tag penutup (</HTML>). Struktur yang lebih rumit mengikuti sebuah prinsip yaitu prinsip bersarang, artinya di dalam sepasang tag ada pasangan tag lain. Misalnya ditambahkan pasangan tag <HEAD></HEAD>. Di dalamnya dapat ditambahkan <TITLE></TITLE>.

Cara membuat HTML

Dengan sebuah editor teks (misalnya NotePad) ketikkan teks HTML dan simpan dengan ekstensi.HTML.
Dengan browser (Internet Explorer atau Netscape), panggil file tersebut .

Struktur dokumen HTML adalah sebagai berikut :

<HTML>

<HEAD>

Kepala atau kop dokumen

<TITLE> Judul dokumen </TITLE>

</HEAD>

<BODY>

Isi Dokumen>

</BODY>

</HTML>

Heading

Heading digunakan untuk menampilkan nama bab atau bagian tertentu yang dianggap sebagai topik utama. Pada HTML terdapat elemen level heading dari <H1> sampai <H6>. Posisi heading pada dokumen HTML dapat ditentukan sendiri, artinya teks yang berfungsi sebagai heading dapat ditempatkan dikiri, kanan atau ditengah dokumen. Untuk mengatur posisi heading dapat menggunakan atribute ALIGN.

Line Break <BR> berfungsi untuk membuat baris baru pada dokumen HTML. <BR> ini membuat baris baru tanpa memberi baris kosong.

Horizontal Role <HR> berfungsi untuk membuat garis horisontal, garis horisontal sepanjang jendela Browser.

Membuat Daftar/List

Unorder List

Digunakan untuk pemakaian bullet pada setiap item dari list, bullet adalah karakter tertentu yang berupa simbol, misalnya bullet bentuk segitiga, panah dsb. Untuk membuat list dengan bullet menggunakan tag <UL> (Unodered List) sebagai tanda awal dan </UL> sebagai tanda penutup. Untuk item-item didalam list harus diawali dengan <L1> dan tidak memerlukan tanda akhir.

Contoh

<HTML>

<HEAD>

<TITLE> Unordered List </TITLE>

</HEAD>

<BODY>

<UL>

<LI> Monitor

<LI> Hardisk

<LI> Motherboard

</UL>

</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Monitor
Hardisk
Motherboard

Ordered List

Adalah daftar yang tiap bagiannya disertai dengan penomoran, order list dimulai dengan tag <OL> dabn diakhiri dengan </OL>

Contoh

<HTML>

<HEAD>

<TITLE> Ordered List </TITLE>

</HEAD>

<BODY>

<LI TYPE = 1> Monitor

<LI TYPE = A> Hardisk

<LI TYPE = i> Motherboard

<LI> Flash Disk

</OL>

</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Monitor

Hardisk

Motherboard
Flash Disk

Tipe penomoran dapat digunakan

1 berarti 1, 2, 3, 4, ……

A berarti A, B, C, D, …….

a berarti a, b, c, d, …….

I berarti I, II, III, IV, …….

i berarti i, ii, iii, iv, ……

Apabila menulis TYPE pada tag <OL> maka type tersebut akan dipakai sebagai default dari seluruh item. Tapi dapat juga memberikan type untuk masing-masing item, yaitu dengan mwmberikan atribute TYPE pada tag <L1>, atribut START digunakan untuk menentukan nomor dari item yang pertama.

Difinition List

Adalah daftar yang mempunyai keterangan pada itemnya, untuk memakai difinition list dapat menggunakan pasangan tag <DL> dan </DL>, tag ini bekerja dibantu dengan tag lainnya, yaitu tag <DT> yang menandakan item yang dijelaskan dengan tag <DD> menyatakan definisi item.

Contoh

<HTML>

<HEAD>

<TITLE> Difinition List </TITLE>

</HEAD>

<BODY>

<DL>

<DT> Monitor <DD> layar komputer

<DT> Hardisk <DD> tempat penyimpan data

<DT> Motherboard <DD> board tempat piranti komputer

</DL>

</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Monitor

layar komputer

Hardisk

tempat penyimpan data

Motherboard

board tempat piranti komputer

Membuat Paragraf

Untuk mulai meletakkan informasi pada halaman web, HTML menyediakan tag <P> yang memiliki bebrapa atribut.

Contoh

<HTML>

<HEAD>

<TITLE> Membuat Paragraf </TITLE>

</HEAD>

<BODY>

Monitor merupakan tampilan komputer

Hardisk tempat penyimpan data

Matherboard bord tempat piranti komputer

</P>

</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Monitor merupakan tampilan komputer

Hardisk tempat penyimpan data

Matherboard bord tempat piranti komputer

Mengatur Huruf

Untuk mengatur huruf pada HTML, dapat menggunakan pasangan tag <FONT> dan </FONT> yang mempunyai bebrapa atribut untuk mengatur formating style dari suatu teks.

Contoh

<HTML>

<HEAD>

<TITLE> menggunakan atribut FontSize </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
Font Size 7

Contoh lain

<HTML>

<HEAD>

<TITLE> melihat berbagai format font </TITLE>

</HEAD>

<BODY>

<H1> Yogyakarta </H1>

<HR>

Yogyakarta terkenal sebagai kota <B> Budaya </B>,

Kota <B>Pelajar</B> dan kota <I>Tourism</I>

Predikat ini sesuai dengan kondisi kota yogyakarta sehari-hari.

<HR>

Slogan kota ini adalah : <TT> Yogyakarta Berhati Nyaman </TT>

</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Yogyakarta

Yogyakarta terkenal sebagai kota Budaya , Kota Pelajar dan kota Tourism Predikat ini sesuai dengan kondisi kota yogyakarta sehari-hari.

Slogan kota ini adalah : Yogyakarta Berhati Nyaman

<B> dan </B> untuk mempertebal huruf (Bold)

<I> dan </I> untuk memiringkan huruf (Italic)

<TT> dan </TT> untuk membuat huruf monospace artinya spasi yang selalu sama antar tiap huruf.

Warna Font

Untuk mengatur warna font dapat menggunakan atribut color dengan sintaksis color = #RRGGBB. Nilai RRGGBB adalah kombinasi angka dalam bilangan hexa yang menunjukkan kapasitas warna merah(RR), hijau(GG), dan Biru(BB). Dapat juga mengantikan #RRGGBB dengan kostante warna yang ada pada browser seperti pada tabel di bawah ini

Black	White	Green	Maroon
Olive	Navy	Purple	Gray
Red	Yellow	Blue	Teal
Lime	Aqua	Fuchsia	Silver

Link

Salah satu fasilitas WWW yang sangat menonjol adalah kemapuannya mengaktifkan hypertex. Dalam WWW kata yang aktif secara hypertext akan ditampilkan bergaris bawah dengan warna tertentu. Untuk membuat link dengan HTML, tag yang digunakan adalah <A> dan </A> diikuti dengan atribut HREF

Contoh

<HTML>

<HEAD>

<TITLE> Membuat Link </TITLE>

</HEAD>

<BODY>

<H2>Komputer</H2>

Komputer merupakan <A HREF =”#01”> alat elektronik

</A> yang mempunyai kemampuan hitung yang sangat mengagumkan <BR>

………Paragraf-paragraf yang lain ………….

<H3><A Name = “01”> alat elektronik </A></H3> adalah

peralatan yang bekerjanya memerlukan tenaga listrik, tenaga listrik yang dipakai dapat berupa tenaga listrik arus bolak-balik ………

.</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Komputer

Komputer merupakan alat elektronik yang mempunyai kemampuan hitung yang sangat mengagumkan

………Paragraf-paragraf yang lain ………….

alat elektronik

adalah peralatan yang bekerjanya memerlukan tenaga listrik, tenaga listrik yang dipakai dapat berupa tenaga listrik arus bolak-balik ……… .

Contoh lain

File pertama diberi nama asal.htm dan file kedua diberi nama tujuan.html

File pertama

<HTML>

<HEAD>

<TITLE> Dokumen asal.htm </TITLE>

</HEAD>

<BODY>

<H3> Dokumen asal </H3>

<HR>

Ini adalah dokumen asal yang dapat berisi apa saja.

Apabila user meng-klik kata yang diaktifkan, maka

Dokumen <A HREF = “tujuan.htm”> lain </A> akan

Dipanggil. Cobalah

</BODY>

</HTML>

File Kedua

<HTML>

<HEAD>

<TITLE> Dokumen tujuan.htm </TITLE>

</HEAD>

<BODY>

<H3> Dokumen tujuan </H3>

<HR>

kalau semua lancar, maka dokumen ini akan muncul

sewaktu user meng-klik kata “lain” pada webpage

sebelumnya. <BR>

Kalau kata <A HREF = “asal.htm”> kembali </A> ini

Diklik, maka webpage semula akan dipanggil lagi

Cobalah.

</BODY>

</HTML>

Menampilkan Gambar

HTML menyeduiakan tag <IMG> untuk menampilkan gambar pada halaman web, contoh <IMG>SRC = “gambar1.gif” Alt = “Gambar”>. Ekstensi grafik yang ditampilkan oleh HTML adalah GIF, JPG dan BMP. Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk browser yang tidak mendukung gambar atau apabila client sengaja mematikan posisi gambar terhadap teks yang bersebelahan.

Contoh

<HTML>

<HEAD>

<TITLE> Mengatur posisi gambar </TITLE>

</HEAD>

<BODY>

<H1> Anda mencari situs informasi tentang computer ? </H1>

<BR> Pergi ke web site <IMG SRC=”computeclogo.jpg” Align = “middle”>

.</BODY>

</HTML>

Tampilan dengan menggunakan Internet Explorer

Anda mencari situs informasi tentang computer ?

Pergi ke web site

Contoh Penggunaan warna

<HTML>

<HEAD>

<TITLE> Contoh Penggunaan Warna </TITLE>

BODY {color:blue}

H1{color:red}

</STYLE>

</HEAD>

<BODY>

<H1> Anda punya Home page </H1>

<P> Cobalah

</HTML>

Tampilan dengan menggunakan Internet Explorer

Anda punya Home page {huruf warna merah}

Cobalah

Tabel

Tabel adalah sarana untuk meletakkan informasi agar mudah dibaca dan dipahami. Untuk memahami pembuatan tabel pada HTML, dapat dilihat skrip berikut ini.

Pembuatan tabel :

<HTML>

<HEAD>

<TITLE> Contoh pembuatan tabel 1 </TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

Atribute lainnya yang penting :

Width

Atribute width menyatakan lebar tabel. Apabila lebar dinyatakan dalam persen (%), maka lebar ditentukan dari persentase terhadap lebar layar browser

Cellspacing

Atribut cellspacing menyatakan jarak antara sel satu dan lainnya.

Cellpading

Atribute cellpading menyatakan jarak antara isi sel dengan batas dari sel tersebut.

Untuk membuat baris pada tabel, HTML menyediakan pasangan tag <TR> untuk awal baris dan </TR> untuk mengakhirinya. Tag <TR> memiliki atribut ALIGN untuk mengatur alignment horizontal dan VALIGN untuk mengatur alignment vertikal. Untuk membuat kolom pada baris yang bersangkutan digunakan pasangan tag <TD> dan </TD>

<HTML>

<HEAD>

<TITLE> Contoh pembuatan tabel 2</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

cellspacing dan cellpading

Atribut cellspacing digunakan untuk mengatur jarak atau spasi antarsel dengan sel lainnya dan atarsel dengan batas tabel. Sedangkan atribute cellpading digunakan untuk mengatur spasi antara batas sel dengan teks di dalam sel.

Contoh penggunaan atribut cellspacing dan cellpading

<HTML>

<HEAD>

<TITLE> Contoh penggunaan cellspacing dan cellpading</TITLE>

</HEAD>

<BODY>

<TR>

<TD WIDTH=”85%” >Kami sedang belajar menggunakan cellspacing :

digunakan untuk mengatur jarak atau spasi antarsel

dengan lainnya dan antarsel dengan batas tabel.

</TD>

</TR>

<TR>

<TD> Sedang cellpading digunakan untuk mengatur spasi antara batas sel

dengan teks didalam sel

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Rowspan dan colspan

Atribute rowspan digunakan untuk menggabungkan bebrapa buah baris menjadi satu. Sedangkan atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu. Atribut-atribut ini dipakai berdasarkan tag <TD>

<HTML>

<HEAD>

<TITLE> Contoh penggunaan rowspan dan colspan</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

Form

Form digunakan untuk membuat formulir di halaman web. Form pada halaman web didefinisikan dengan pasangan tag <FORM> dan </FORM>. Tag <FORM> memiliki dua atribut yang penting, yaitu atribute METHOD untuk menentukan nagaimana form diberlakukan, dan atribut ACTION yang sering diisikan URL tempat pemrosesan form selanjutnya. Struktur dasar form adalah :

……….

………..

</FORM>

Input Box

Input box adalah inputan pada form yang memungkinkan user memasukkan string dalam satu baris. Untuk membuat input box HTML menyediakan tag <INPUT> dan memanfaatkan atribute TYPE=”Text”

Atribut pada tag <INPUT> lainnya adalah NAME untuk menyatakan nama input tersebut . VALUE untuk menyatakan nilai dari suatu input dan SIZE untuk menyatakan panjang sebuah input.

Bila ingin agar apa yang diketik oleh user disembunyikan dengan hanya menampilkan karakter *, maka bisa menggantikan isi atribut TYPE menjadi “Password”

<HTML>

<HEAD>

<TITLE> Contoh penggunaan input box</TITLE>

</HEAD>

<BODY>

<FORM>

<TR>

<TD><INPUT TYPE=”Text” NAME=”varNama” SIZE =”15” VALUE=”Tamtomo”

</TD>

</TR>

<TR>

<TD>Alamat : </TD>

<TD><INPUT TYPE=”Text” NAME=”varAlamat” SIZE =”30”

</TD>

</TR>

<TR>

<TD>Password : </TD>

<TD><INPUT TYPE = ”Password” NAME = ”varPassword” SIZE = ”10”

</TD>

</TR>

</TABLE>

</FORM>

</BODY>

</HTML>

13.Radio Button

Bila atribut TYPE pada tag <INPUT> diganti dengan “Radio” maka sudah didifinisikan sebuah radio button.

<HTML>

<HEAD>

<TITLE> Contoh penggunaan input box dan radio button</TITLE>

</HEAD>

<BODY>

<FORM>

<TR>

<TD><INPUT TYPE=”Text” NAME=”varNama” SIZE =”15” VALUE= Tamtomo

</TD>

</TR>

<TR>

<TD>Alamat : </TD>

<TD><INPUT TYPE=”Text” NAME=”varAlamat” SIZE =”30”

</TD>

</TR>

<TR>

<TD>Password : </TD>

<TD><INPUT TYPE= ”Password” NAME= ”varPassword” SIZE = ”10”

</TD>

</TR>

</TABLE>

Jenis Kelamin :

<INPUT CHECKED TYPE= ”Radio” NAME=”Kelamin” VALUE=Pria>Pria

<INPUT TYPE= ”Radio” NAME= ”Kelamin” VALUE= Wanita>Wanita

</FORM>

</BODY>

</HTML>

Checked Box

Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan, pada input tipe checked box dapat memilih satu atau atau bebrapa pilihan, atau bahkan tidak memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya opsional. Bisa menggunakan “Checkbox” pada atribut <INPUT>.

15.Button

Dapat membuat dua macam tombol pada form HTML. Yang pertama dengan memberikan “Submit” pada atribut TYPE atau dengan menggunakan atribut “Reset”. Submit digunakan untuk melakukan action pada tag <FORM>, sedangkan reset digunakan untuk menghapus nilai pada seluruh isi form.

M	T	W	T	F	S	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Mengenal HTML

Yogyakarta

Slogan kota ini adalah : Yogyakarta Berhati Nyaman

Komputer

alat elektronik

Anda mencari situs informasi tentang computer ?

Anda punya Home page {huruf warna merah}

Reply

Recent Posts

Recent Comments

Archives

Meta

calender