Modul Dasar HTML

Oleh;
Mulyadi_Ibnu_Syaamil, S.Kom
@ 2010
Doc./Iternet+HTML/UNSERA/Mulyadi, S.Kom
“ Untuk kalangan Sendiri “
1

DASAR – DASAR HTML
HTML (Hyper Text Markup Language) merupakan bahasa yang digunakan untuk pembuatan
web, standar bahasa HTML di publikasikan di www.w3.org oleh World Wide Web Consortium
(W3C) Untuk merender kode-kode HTML diperlukan web browser seperti Internet Explorer,
Mozilla, Netscape dll
HTML berupa kode-kode tag yang menginstruksikan web browser untuk menghasilkan
tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka
dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.
HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain
yang memiliki kemampuan browser.
Komponen-komponen HTML
Komponen dasar sebuah halaman web seperti terlihat pada bagan di bawah ini;
contoh berikut :
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Isi website….
</body>
</html>
2

Pengaturan teks
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan terhadap teks
seperti memilih jenis dan ukuran huruf, perataan, dll. Tag-tag di bawah ini yang biasa
digunakan dalam pengaturan teks :
Tag Heading
<Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai
antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan
<H6> merupakan ukuran terkecil.
Contoh :
<H2>Tutorial Html</H2>
Hasilnya akan terlihat seperti :
Tutorial Html
Tag Font Untuk mendefinisikan berbagai attribut FONT, yaitu : SIZE, FACE, COLOR.
SIZE: Ukuran font yang digunakan, berkisar antara 1 - 7 dengan 1 merupakan ukuran
terkecil dan 7 merupakan ukuran terbesar.
FACE: Jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing
dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus
digunakan tanda garis bawah ( _ ). Dalam memilih jenis font ini harus
dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya
akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya
kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font
standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa
menggunakan graphic.
COLOR: Warna font, didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga
langsung menggunakan nama warna (red misalnya).
Contoh :
Contoh teks
yang berwarna merah
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
Penggunaan Bentuk teks dapat menggunakan tag berikut;
 Bold text
 Italic text
 Underscore
3

<PRE> Preformatted Text <DFN> Definition
Paragraph Baru:
 Digunakan untuk pindah alinea atau paragraf. Tag ini bisa diberi akhiran tapi juga
bisa tidak diberi.
Line Break:
 Digunakan untuk pindah ke baris baru.
No Line Break:
 Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris
bawahnya bila baris pertama sudah terlalu panjang.
Alignment (Perataan teks), digunakan untuk mengatur perataan teks atau paragraph, tag
yang dapat digunakan untuk pengaturan alignment terdiri dari tag ;
<center> untuk perataan tengah
<left> Untuk Perataan Kiri
<right> Untuk perataan kanan
<justify> Untuk perataan kiri dan kanan
Horizontal Rule garis horizontal menggunakan tag <hr>
<hr> Untuk membuat garis dengan bentuk
horizontal
<size> Untuk memntukan tebal garis
<color> Untuk menentukan warna garis
<align> Untuk mengatur letak perataan garis
Contoh :
<hr size=6 color=”blue” align=”center” width=800>
Maka akan tampil
Garis bentuk horizontal, dengan tebal 6, warna biru, terletak pada rata tengah,
dan lebarnya 800
4

Latihan 1
<html>
<Head>
<Title>Latihan Pengaturan Teks</Title>
</Head>
<Body>
<center><h1>BELAJAR PEMROGRAMAN WEB</h1> 
</center>
Pemrograman adalah pemrograman yang menghasilkan aplikasi web 
Bahasa yang digunakan adalah HTML 
Untuk menjalankan aplkasi web menggunakan web browser 
Dan aplikasinya diletakkan di web server 
 Selamat belajar
</Body>
</html>
Latihan 2
<html>
<Head>
<Title>Pengaturan Font 2</Title>
</Head>
<Body>
<center>
BELAJAR PEMROGRAMAN WEB
 </center>

H T M L 
Pemrograman adalah pemrograman yang menghasilkan aplikasi web
Bahasa yang digunakan adalah HTML Untuk menjalankan aplikasi web
menggunakan web browser Dan aplikasinya diletakkan di web server

Selamat belajar
</Body>
</html>
T U G A S
5

1) Buatlah Tampilan seperti dibawah ini;
Pemberian warna pada teks bebas
2) Apabila telah selesai Upload Script dan hasilnya (di Print Screen) di blog masing-
masing dengan nama tugas 2
3) Kirimkan alamat blog ke email: graphic_multimedia@yahoo.co.id (bagi yang belum
mengirimkan tugas 1 membuat blog)
BAHASA PEMROGRAMAN HTML
HTML (Hyper Text Markup Language) merupakan bahasa yang digunakan untuk
pembuatan web, standar bahasa HTML di publikasikan di www.w3.org oleh World
Wide Web Consortium (W3C) Untuk merender kode-kode HTML diperlukan web
browser seperti Internet Explorer, Mozilla, Netscape dll
Perkembangan HTML
Saat ini terdapat banyak sekali HTML authoring (software yang digunakan untuk membuat
atau mendesain halaman web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage
dan lain sebagainya. Tetapi tanpa mengetahui dasar-dasarnya Anda tidak akan memperoleh
hasil yang maksimal. Mengapa ? Karena walaupun software-software tersebut semakin
menawarkan kemudahan dalam membuat halaman web, tetapi biasanya seseorang masih
perlu untuk mengedit halaman web tersebut secara manual. Terutama untuk halaman web
yang sangat komplit.
Struktur dasar HTML
HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam
pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di
antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda
"/").
6

L I S T S
Terdapat tiga tipe list (daftar) yang dapat digunakan, yaitu : List yang tidak terurut yan ditandai
dengan Bullet (Unordered List), List Terurut yang di nomori (Ordered List), serta List dengan
definisi tertentu (Definition List)
1. Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet, setiap teks yang
akan dimasukan kedalam list, diberi tanda Tag <LI> (list Item).
Contoh :
<UL>
<LI> Item nomer 1 </LI>
</UL>
Hasil dari kode di atas adalah:
• Item nomer 1
• Item nomer 2
• Item nomer 3
Ada tiga bentuk yang dapat dipilih pada atribut type, yaitu disc (piringan), square (kotak),
serta circle (lingkaran).
Contoh :
<html>
<head>
<title>Lat Tag UL</title>
</head>
<body>
Daftar Mata Kuliah Semester II
<UL COMPACT TYPE=square>
<li> Internet dan HTML </li>
<li> Design Grafis </li>
<li> Rekayasa Perangkat Lunak</li>
</UL>
</body>
</html>
7

2. Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat
menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :
<OL TYPE=I>
</OL>
Hasil dari kode di atas adalah :
1. Item nomer 1
2. Item nomer 2
3. Item nomer 3
Untuk TYPE penomoran Anda dapat menggunakan lima jenis penomoran, yaitu:
1 Default numbers, 1, 2, 3, etc.
A Huruf besar. A, B, C, etc.
a Huruf kecil. a, b, c, etc.
I Romawi huruf besar. I, II, III, etc.
i Romawi huruf kecil , i, ii, iii, etc.
Contoh;
<html>
<head>
<title>Lat Tag OL</title>
</head>
<body>
Daftar Jurusan dan kelas Semester II
<ol TYPE="I">
<li> Teknik Informatika / A1 </li>
<li> dst....</li>
</UL>
</body>
</html>
8

3. Definition Lists: <DL> digunakan untuk membuat sebuah Definition List. Definition list
terdiri dari 2 bagian, yaitu bagian Tema (Definition Term) dan definisinya (Definition
Description).
Contoh :
<DL>
<DT> Item pertama. </DT>
<DD> Penjelasan tentang item pertama. </DD>
<DT> Item kedua. </DT>
<DD> Penjelasan tentang item kedua </DD>
</DL>
Hasil dari kode di atas adalah :
Item pertama.
Penjelasan tentang item pertama.
Item kedua.
Penjelasan tentang item kedua
Tugas Latihan LIST
Buatlah sebuah tampilan seperti berikut;
I m a g e
9

Digunakan untuk menampilkan image, gambar yang dapat ditampilkan pada halaman web
Anda dapat berupa gambar diam atau bergerak (animasi). Atribut yang dapat digunakan untuk
pengaturan gambar (image) adalah sebagai berikut;
Atribut Fungsi
Align (perataan);
justify
Left
Right
Gambar terletak rata kiri kanan
Gambar terletak disebelah kiri
Gambar terletak disebelah kanan
Border Memberikan garis tepi gambar
Width Menentukan lebar gambar
Hight Menentukan tinggi gambar
Alt Memberikan nama gambar
penulisan script:
<img src=”nama_file/URL” width=x height=h align=”left/right/justify”>
Contoh 1;
<html>
<head>
<title>Memasukan Gambar </title>
</head>
<body>

<center><image src="image_2.jpg" width=250 hight=250 border=3></center>
</body>
</html>
Maka Hasil dari script diatas
Background Website
10

Pemberian background pada sebuah website dapat menggunakan warna maupun
gambar;
1. Menggunakana background warna ;
Tag yang digunakan untuk memberikan warna background adalah terletak
didalam tag <body>. Yaitu : <body bgcolor="nama warna">
Contoh;
<html>
<head>
<title>warna background </title>
</head>
<body bgcolor="black">

tampilan ini merupakan contoh menggunakan background warna
</body>
</html>
2. Menggunakan background gambar;
Tag yang digunakan untuk memberikan gambar background adalah terletak
didalam tag <body>. Yaitu: <body background="nama_file">
Contoh;
<html>
<head>
</head>
<body background="image_bg.jpg">

tampilan ini merupakan
contoh menggunakan background GAMBAR

</body>
</html>
Memasukan file animasi SWF (Shockwave Flash)
11

File swf dapat dimasukan kedalam script html dengan cara memanggil file swf yang
telah dibuat dengan menggunakan software lain, missal flash, swishmax, dan lain-lain.
Adapun cara memangil file swf, yaitu dengan menambahkan tag;
<object width=L height=T>
<param name="movie" value="namaflashnya.swf">
<embed src="namaflashnya.swf" width=L height=T>
Penggunaan tag <object> dan tag <param> pendefinisian yang menunjukan bahwa file
tersebut berbasis object. Anda dapat cukup menggunakan tag yang paling bawah,
yaitu:
<embed src="namaflashnya.swf" width=L height=T>
Contoh;
<html>
<head>
</head>
<body background="image_bg.jpg">

<center>tampilan ini merupakan contoh File SWF</center>
<center>
<embed src="file_swf.swf" width=150 hight=150>
</embed>
</center>
</body>
</html>
Membuat Tulisan Berjalan
12

(MARQUEE)
Marquee adalah tag HTML yang berguna untuk membuat tampilan yang bergerak
vertical atau horizontal. Untuk membuat tulisan berjalan, maka kita menggunakan tag
<marquee>;
Contoh;
<marquee>Membuat Tulisan Berjalan</marquee>
Yang dapat digerakkan bukan hanya teks tapi gambar atau bahkan video pun juga bisa
menggunakan tag Marquee ini,
Contoh;
<marquee>ini adalah Gambar berjalan<img src="image.jpg"></marquee>
WIDTH and HEIGHT
Atribut ini digunakan untuk menentukan ukuran dari tampilan untuk tag MARQUEE
Contoh :
<marquee width=200 height=50> lebar dan tinggi area marquee</marquee>
DIRECTION
Atribut ini digunakan untuk menentukan arah gerak dari tampilan apakah ingin ke kiri,
kanan, atas, atau bawah. Pengaturan arah tulisan berjalan dapat dilakukan dengan
menambahkan fungsi direction pada tag html <marquee> dengan memilih arah
tulisan tersebut berjalan, yaitu :
UP Arah tulisan berjalan ke atas
Down Arah tulisan berjalan ke bawah
Right Arah tulisan berjalan ke kanan
Left Arah tulisan berjalan ke kiri
Contoh;
13

<marquee direction=left>Membuat Tulisan Berjalan kekiri </marquee>
<marquee direction=right>Membuat Tulisan Berjalan kekanan </marquee>
<marquee direction=up>Membuat Tulisan Berjalan keatas</marquee>
<marquee direction=down>Membuat Tulisan Berjalan kebawah </marquee>
BEHAVIOUR
Atribut ini digunakan untuk menentukan bagaimana tampilan bergerak, jika sebelumnya
yang ditentukan adalah arahnya maka pada atribut BEHAVIOUR yang ditentukan
adalah perilaku geraknya.
Contoh :
BEHAVIOR = SCROLL
Dengan penentuan BEHAVIOR = SCROLL maka tampilan akan bergerak sesuai arah
yang ditentukan dan akan kembali mengulangi gerakan dari titik awal gerakan.
<marquee behaviour=scroll> teks ini contoh behavour
scroll</marquee>
BEHAVIOR = SLIDE
Dengan penentuan BEHAVIOR = SLIDE maka tampilan akan bergerak sesuai arah
yang ditentukan lalu kemudian berhenti di titik akhir tanpa mengulangi gerakan
sebelumnya.
<marquee behaviour=slide>teks ini contoh behavior slide</marquee>
BEHAVIOR = ALTERNATE
Dengan penentuan BEHAVIOR = ALTERNATE maka tampilan akan bergerak bolak-
balik.
<marquee behavior=alternate> teks ini contoh behavior
alternate</marquee>
SCROLL DELAY
14

Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan.
Nilai yang diisi untuk atribut ini adalah berupa angka dalam mili detik. dengan
menambahkan fungsi scrolldelay pada tag html <marquee> , semakin besar angka
yang dimasukan pada scrolldelay maka tulisan tersebut akan berjalan semakin lambat.
Contoh;
<marquee Scrolldelay=10>Mengatur kecepatan Tulisan Berjalan </marquee>
SCROLL AMOUNT
Meskipun kelihatannya hampir sama dengan atribut sebelumnya SCROLLDELAY,
SCROLLAMOUNT memiliki sedikit perbedaan dengan atribut tersebut. Jika
SCROLLDELAY berfungsi untuk menentukan jeda waktu antara tiap gerakan, maka
atribut SCROLLAMOUNT berfungsi untuk menentukan jauhnya lompatan untuk setiap
gerakan.
Contoh berikut merupakan perbedaan antara marquee normal dengan marquee yang
mempunyai nilai SCROLLAMOUNT 20 mili detik dan 70 mili detik:
<marquee> teks marquee normal </marquee>
<marquee scrollamount=20> teks marquee scrollamount
20/detik </marquee>
<marquee scrollamount=70> teks marquee scrollamount
70/dtik</marquee>
BGCOLOR
Penggunaan atribut BGCOLOR pada tag MARQUEE akan menghasilkan jalur gerakan
memiliki warna. Prinsip kerja atribut ini sama dengan atribut BGCOLOR pada tag
TABLE yaitu memberikan warna latar.
Contoh :
<marquee bgcolor=yellow> teks marquee dengan warna background
kuning</marquee>
HSPACE
15

Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan
yang ada disamping kanan dan kiri tulisan.
Contoh :
Halo kawan <marquee width=25% bgcolor=yellow>
Klikbelajar.com 
Tempat dimana kamu bisa belajar segalanya !!
</marquee> Halo kawan..
Kode diatas mempunyai nilai HSPACE default yaitu 0 sehingga tidak ada jarak dikiri
dan kanan marquee
Sedangkan kode berikut ini mempunyai nilai HSPACE sebesar 70.
Halo kawan <marquee hspace=70 width=25% bgcolor=yellow>
Klikbelajar.com 
</marquee> Halo kawan..
VSPACE
Atribut ini berguna untuk memberikan jarak antara tampilan bergerak dengan tulisan
yang ada diatas dan dibawah tulisan.
Contoh :
Halo kawan <marquee width=25% bgcolor=yellow>
Klikbelajar.com 
</marquee> Halo kawan..
Kode diatas mempunyai nilai HSPACE default yaitu 0.
Sedangkan dibawah ini kode untuk memberikan jarak sebesar 50 px diatas dan
dibawah marquee.
16

Halo kawan <marquee vspace=50 width=25% bgcolor=yellow>
Klikbelajar.com 
</marquee> Halo kawan..
LOOP
Pengulangan dari tampilan bergerak dengan tag MARQUEE dapat diatur jumlahnya
dengan atribut ini. Jika kamu tidak mengatur jumlah pengulangan dengan atribut loop
maka secara otomatis akan diartikan bahwa tampilan itu akan bergerak terus menerus
tanpa batas.
Contoh penggunaan :
<marquee loop=2> teks berjalan dengan mengulang 2
kali</marquee>
Memberikan fungsi pada tulisan berjalan, ketika pointer terletak diatas (mouse over)
atau pointer keluar tampilan website (mouse out) maka bisa berhenti atau berjalan
sesuai dengan keinginan,
Contoh ;
<marquee onmouseover="this.stop()"; onmouseout="this.start()">
Tulisan Berhenti karena Mouse
</marquee>
Dari tag html diatas maka. Tulisan yang berjalan akan berhenti jika pointer dipindahkan
ke atas tulisan yang berjalan, dan tulisan tersebut berjalan kembali ketika pointer tidak
terletak diatas teks yang berjalan tersebut.
HYPERLINK
17

Hyperlink atau tautan dalam HTML sangatlah penting karena ia yang menghubungkan
antara satu Halaman dengan halaman lain. Untuk membuat Hyperlink, bahan yang
diperlukan adalah tag <a>. Tag ini merupakan tag yang paling umum digunakan pada
dokumen HTML. A adalah Singkatan dari Anchor yang dalam bahasa Indonesia berarti
jangkar, tetapi akan lebih tepat jika diartikan sebagai tautan dikarenakan tag ini
digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML
yang lain.
Contoh;
<A HREF="awal.html">Tautan ini menuju halaman awal</A>
Catatan;
dokumen yang akan digunakan sebagai tautan harus terletak dalam satu direktori/folder
ATRIBUT HYPERLINK
HREF
Atribut ini merupakan atribut yang wajib digunakan pada tag Anchor karena atribut ini
digunakan untuk menentukan arah tautan yang dimaksud. Jika kita ingin menautkan ke
halaman tujuan.html maka kita tinggal tulis HREF="tujuan.html". Begitu juga bila kita
ingin menautkan ke halaman http://google.com maka kita tinggal menuliskan
HREF="http://google.com".
NAME
Atribut ini digunakan untuk memberikan nama dari suatu tautan. Atribut ini berbeda
dengan atribut HREF yang akan mengubah warna teks menjadi biru dan teks tersebut
akan memiliki garis bawah, atribut NAME tidak akan mengubah tampilan teks sama
sekali dengan teks yang lain. Penggunaannya pun berbeda dengan atribut HREF yang
digunakan untuk mengarahkan ke halaman lainnya, atribut NAME hanya berguna untuk
memberikan nama dari suatu tautan
TARGET
TARGET adalah pilihan cara pembukaan suatu link dalam browser. Link tersebut akan
dibuka di jendela baru atau di halaman yang sedang dibuka saat itu dapat di setting
melalui atribut TARGET.
A. Untuk membuat suatu link di buka di jendela baru kalian dapat memasukkan
"_blank" dalam atribut target.
18

Contoh;
<a href="tampilan2.html" target="_blank">Klik disini untuk membuka tamp
ilan 2</a>
B. Sedangkan untuk membuat suatu link dibuka di halaman yang sedang dilihat
saat itu juga gunakan "_self".
Contoh;
<a href="tampilan2.html" target="_self">Klik disini untuk membuka tampi
lan 2</a>
TITLE
Atribut ini digunakan untuk memberikan keterangan tambahan dari sebuah tautan.
Atribut ini akan menampilkan keterangan apabila mouse berada diatas tautan yang
akan di-klik.
Contoh;
<a href="tampilan_awal.html" title="kembali ke halaman awal">Tautan ini
menggunakan title</a>
ACCESSKEY
Atribut ini digunakan untuk memberikan tombol shortcut dari sebuah tautan, jadi tautan
yang menggunakan atribut ACCESSKEY ini dapat diakses dengan tombol shortcut ALT
+[ yang diinginkan].
Contoh;
<a href="tampilan_awal.html" ACCESSKEY="H">Halaman awal</a>
Hyperlink dengan image
Hyperlink juga bisa diletakkan dalam gambar. Caranya sama persis seperti menaruh
hyperlink pada tulisan hanya saja tag <a> dan </a> menjepit tag gambar <img>.
<a href="coba2.html"><img src="image.jpg" /></a>
Latihan 1 ( simpan dengan nama : awal.html )
19

<html>
<head>
<title>HALAMAN AWAL</title>
</head>
<body bgcolor="black">

 
 
 
 
<CENTER>B e l a j a r 
<blink>PEMROGRAMAN
WEB</blink> 
dengan H T M L
 
 
<a href="awal.html">Halaman Utama</a> | <a
href="galery.html">Galeri</a> | Contact
<HR WIDTH=800>
</CENTER>
<center><marquee bgcolor="yellow" width=800
behavior=alternate>
Bahasa-bahasa Pemrograman WEB </marquee>
 <marquee width=800>
H T M L</marquee>
 <marquee scrollamount=20 width=800>P H P</marquee>
 <marquee scrollamount=50 width=800>A S P</marquee>
 <marquee scrollamount=70 width=800>JAVA</marquee>
</center>
<HR WIDTH=800>
<center>CopyRight@2010</center>

</html>
Latihan 2 ( simpan dengan nama : galery.html )
20

<html>
<head>
<title>HALAMAN GALERY</title>
</head>
<body background="BG.PNG">
<center>
<img src="image_2.jpg" width=50 height=50>
 
 
<a href="awal.html">KLIK DISINI UNTUK KEMBALI KE AWAL...</a>
</center>
</body>
</html>
21

Modul Dasar HTML

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Modul Dasar HTML

Ähnlich wie Modul Dasar HTML (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Modul Dasar HTML