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 teksyang 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: [email protected] (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 HTMLSaat 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 HTMLHTML (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 "/").

L I S T S


6

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>

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.


7

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> Teknik Informatika / A2 </li><li> Teknik Informatika / A3 </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 LISTBuatlah 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 FungsiAlign (perataan);justifyLeftRight

Gambar terletak rata kiri kananGambar terletak disebelah kiriGambar terletak disebelah kanan

Border Memberikan garis tepi gambarWidth Menentukan lebar gambarHight Menentukan tinggi gambarAlt 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><title>warna background </title></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>

<title>warna background </title></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 MARQUEEContoh :

<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 atasDown Arah tulisan berjalan ke bawahRight Arah tulisan berjalan ke kananLeft 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 = ALTERNATEDengan 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

HREFAtribut 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".

NAMEAtribut 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

TARGETTARGET 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.

Contoh; <a href="tampilan2.html" target="_blank">Klik disini untuk membuka tampilan 2</a>


18

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 tampilan 2</a>

TITLEAtribut 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>

ACCESSKEYAtribut 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 )

<html><head>

<title>HALAMAN AWAL</title>


19

</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 )

<html><head>

<title>HALAMAN GALERY</title>


20

</head>

<body background="BG.PNG">

<center><img src="image_2.jpg" width=50 height=50><img src="image_2.jpg" width=100 height=100><img src="image_2.jpg" width=150 height=150><img src="image_2.jpg" width=100 height=100><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

Documents

Transcript of Modul Dasar HTML