modul HTML
modul HTML
modul HTML
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
BENGKEL INTERNET PENS-ITS<br />
MATERI I<br />
<strong>HTML</strong> (HYPERTEXT MARKUP LANGUAGE)<br />
Tujuan :<br />
1. Memahami tentang konsep WWW<br />
2. Memahami tentang struktur dokumen <strong>HTML</strong><br />
3. Memahami tentang dasar-dasar <strong>HTML</strong><br />
4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta.<br />
A. World Wide Web<br />
Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya<br />
di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang<br />
beragam di seluruh dunia untuk dapat berkomunikasi.<br />
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan<br />
paling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:<br />
� Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer<br />
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.<br />
� Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource<br />
Locator) yang di gunakan sebagai standard alamat internet.<br />
� <strong>HTML</strong> digunakan untuk membuat document yang bisa di akses melalui web.<br />
B. Pengenalan <strong>HTML</strong><br />
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan<br />
document web, yang bisa anda lakukan dengan <strong>HTML</strong> yaitu:<br />
� Mengontrol tampilan dari web page dan contentnya.<br />
� Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.<br />
� Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi<br />
secara online.<br />
� Menambahkan object-object seperti image, audi, video dan juga java applet dalam<br />
document <strong>HTML</strong>.<br />
C. Browser dan Editor<br />
Browser<br />
Browser merupakan software yang di install di mesin client yang berfungsi untuk<br />
menterjemahkan tag-tag <strong>HTML</strong> menjadi halaman web. Browser yang sering di gunakan<br />
biasanya Internet Explorer, Netscape Navigator dan masih banyak yang lainya.<br />
Editor<br />
Program yang di gunakan untuk membuat document <strong>HTML</strong>, ada banyak <strong>HTML</strong> editor yang<br />
bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.<br />
D. BASIC TAG <strong>HTML</strong><br />
D.1. Struktur <strong>HTML</strong> Document<br />
Document <strong>HTML</strong> bisa di bagi mejadi tiga bagian utama:<br />
<strong>HTML</strong><br />
Setiap document <strong>HTML</strong> harus di awali dan di tutup dengan tag <strong>HTML</strong><br />
<br />
HEAD<br />
Bagian header dari document <strong>HTML</strong> di apit oleh tag di dalam bagian ini<br />
biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.<br />
1
BENGKEL INTERNET PENS-ITS<br />
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi<br />
tertentu mengenai document <strong>HTML</strong>, anda bisa menentukan author name, keywords, dan<br />
lainyan pada tag META.<br />
BODY<br />
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di<br />
tampilkan pada web page.<br />
D.2. Basic <strong>HTML</strong> Element<br />
Block Level Element<br />
Block level element yang sering di gunakan : Heading (H1 sampai H6)<br />
Paragraf (P) List Item(LI)<br />
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang<br />
tidak berurutan (unordered list).<br />
Ada dua macam list yang bisa anda tambahkan ke document <strong>HTML</strong>:<br />
1. Unordered List (Bullet) :<br />
2. Ordered List (Numbering)<br />
Contoh :<br />
Tag Attribute Value Description<br />
TYPE SQUARE Bullet Kotak<br />
DISC Bullet Titik<br />
CIRCLE Bullet Lingkaran<br />
Tag Attribute Value Description<br />
TYPE I i Upper Roman Lower Roman<br />
A a Upercase Lowercase<br />
START n Begin Number<br />
Definition List<br />
Definition List terdiri diapit oleh tag … dan tag menentukan definition<br />
term serta tag menentukan definition itu sendiri.<br />
Horizontal Rules(HR)<br />
Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document <strong>HTML</strong>.<br />
Attribute Description<br />
Position menetukan posisi dari HR, dengan value : canter |<br />
right | left.<br />
Width Untuk menentukan panjang HR default 100%<br />
Size Untuk menentukan tebal dari HR dalam pixel<br />
Noshad Efek bayangan.<br />
D.3. Pemformatan Page Break<br />
Tag di gunakan untuk memulai baris baru pada document <strong>HTML</strong>, tag ini fungsinya<br />
mirip dengan carriage return.<br />
2
BENGKEL INTERNET PENS-ITS<br />
Font<br />
Dengan tag anda bisa menentukan format tampilan font dalam document <strong>HTML</strong><br />
seperti color, size, style dan lainya.<br />
Contoh:<br />
Attribute Description<br />
color Untuk menentukan warna font, anda bisa<br />
menggunakan nama font atau hexadecimal<br />
(#000000 - #ffffff)<br />
size Untuk menentukan ukuran dari font 1 - 7<br />
face Untuk menentukan jenis font biasanya dalam satu list<br />
ada beberapa font dan akan di baca mulai dari yang<br />
paling kiri.<br />
Color<br />
Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body,<br />
font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue.<br />
Masing-masing color didefinisikan dalam dua digit hexadecimal number.<br />
#RRGGBB<br />
Hexadecimal Color<br />
#FF0000 Red<br />
#00FF00 Green<br />
#0000FF Blue<br />
#000000 Black<br />
#FFFFFF White<br />
Alignment<br />
Align attribute digunakan untuk menentukan perataan object dalam document <strong>HTML</strong> baik<br />
berupa text, object, image, paragraph, division dan lain-lain.<br />
Value Description<br />
Left Rata kiri<br />
Right Rata kanan<br />
Center Rata tengah<br />
Justify Rata kanan kiri<br />
Format text<br />
Physical Formatting<br />
Tag Description<br />
... Bold text<br />
... Italic text<br />
... Underline Text<br />
... Untuk ukuran yang lebih besar<br />
dari normal<br />
... Untuk ukuran yang lebih kecil<br />
dari normal<br />
... Untuk memberi garis di tengah<br />
text<br />
3
... Superscript text<br />
... Subscript text<br />
... Center document<br />
Logical Formatting<br />
Tag Description<br />
... Text miring / <br />
... Text tebal / <br />
<br />
... Mencoret text / <br />
... Underline text / <br />
BENGKEL INTERNET PENS-ITS<br />
Preformatted text<br />
Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.<br />
Hyperlink<br />
Link Address<br />
Absolute Address - merupakan full internet address (URL) yang meliputi protocol, network<br />
location dan path dan nama file.<br />
Contoh:<br />
http ://www.yahoo.com/index.html<br />
Relatif Address - URL yang tidak menyebutkan protocol dan network locationya (hanya path<br />
dan nama filenya).<br />
Anchor<br />
Anchor tag untuk menentukan hyperlink dalam document <strong>HTML</strong>. HREF property<br />
digunakan untuk menentukan tujuan dari hyperlink tersebut.<br />
E. TABLE<br />
Membuat table<br />
Tag digunaka untuk membuat table dalam document <strong>HTML</strong> , bagian pokok dari<br />
table adalah cell yang didefinisikan dengan menggunakan tag .<br />
Berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag .<br />
Menambahkan Heading cell<br />
Untuk menambahkan heading pada table tambahkan tag pada table yang sudah di buat.<br />
Pemformatan table<br />
Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign<br />
(vertical Alignment)<br />
Attribute Value<br />
Align Center | justify | left | right<br />
Valign<br />
BASELINE | TOP | BOTTOM | MIDDLE<br />
4
BENGKEL INTERNET PENS-ITS<br />
Merge cell<br />
Tag memiliki atribut colspan untuk merge column dan rowspan untuk merge baris.<br />
F. IMAGE<br />
A. Format Image<br />
Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan :<br />
1. GIF (Graphical Interchange Format) (.GIF)<br />
2. JPEG (Joint Photographic Expert Image) (.JPG)<br />
3. PNG (Portable Network Graphics)<br />
<br />
Attribute Value Description<br />
Align Center | justify | left | right | > Top, bottom, middle digunakan untuk<br />
Baseline | top | bottom | menentukan posisi image terhadap text<br />
middle > �Left, right, center untuk menentukan<br />
posisi image di document<br />
G. FORM<br />
Kegunaan Form<br />
Berikut ini beberapa contoh kegunaan Form dalam web:<br />
1. memperoleh data-data user baik nama, alamat dan data lainnya<br />
2. memperoleh informasi pembelian secara online<br />
3. memperoleh feedback dari user mengenai website anda.<br />
Form Element<br />
Tag digunakan untuk membuat form dalam document <strong>HTML</strong>.<br />
Attribute Description<br />
ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang memuat script<br />
untuk memproses form. Syntax:<br />
ACCEPT=”Internet Media Type”<br />
METHOD Menentukan bagaimana data akan di kirim ke server. GET – data akan di kirim<br />
dengan menggunakan query string pada URL.<br />
POST – data akan di kirim ke server sebagai block data ke script. Syntax:<br />
METHOD=”POST|GET”<br />
ACTION Menentukan lokasi dari script yang akan memproses data dari form Syntax:<br />
ACTION=”URL”<br />
5
BENGKEL INTERNET PENS-ITS<br />
LATIHAN – LATIHAN :<br />
A. DASAR-DASAR <strong>HTML</strong><br />
1. Penggunaan syntak <strong>HTML</strong>, bagian-bagian <strong>HTML</strong>, penggunaan komentar dan tag untuk<br />
ganti baris.<br />
<br />
<br />
Latihan <strong>HTML</strong><br />
<br />
<br />
<br />
Selamat Belajar <strong>HTML</strong><br />
Semoga Sukses !<br />
<br />
<br />
2. Menggunakan tag untuk membuat paragraph; tag judul s/d untuk<br />
pembesaran huruf.<br />
<br />
<br />
Contoh Pengaturan Judul<br />
<br />
<br />
Pesona Tanaman Hias <br />
Keindahan tanaman hias<br />
membawa suatu pesona tersendiri<br />
Warna-warni bunga<br />
<br />
<br />
3. Membuat garis horizontal <br />
<br />
<br />
Atribut NOSHADE pada Tag HR<br />
<br />
<br />
KEBUN PESONA<br />
<br />
Jl. Solo Km 14<br />
Surabaya <br />
Indonesia<br />
<br />
<br />
6
BENGKEL INTERNET PENS-ITS<br />
4. Menggunakan tag untuk mengelompokkan sejumlah baris teks yang memiliki karakteristik<br />
yang sama.<br />
<br />
<br />
Tag DIV<br />
<br />
<br />
<br />
PENS ITS<br />
Jl. Raya ITS<br />
Surabaya<br />
<br />
<br />
<br />
<br />
B. PENGATURAN TEKS<br />
1. Penggunaan untuk menampilkan teks apa adanya.<br />
<br />
<br />
Praformat <br />
<br />
<br />
Daftar Harga Keladi:<br />
<br />
Red Flash.........35.000<br />
Red Fire..........60.000<br />
Fannie Munson.....60.000<br />
<br />
Harga sewaktu-waktu bisa berubah.<br />
<br />
<br />
Coba hilangkan tag dan lihat apa perbedaanya.<br />
2. Pengaturan Font : Face (untuk jenis Font), Size (untuk ukuran Font), Color (untuk warna)<br />
<br />
<br />
Jenis Font<br />
<br />
<br />
Normal: 012345ABCD<br />
Arial:<br />
012345ABCD<br />
<br />
<br />
Courier: 012345ABCD<br />
<br />
<br />
<br />
7
3. Pengaturan warna background : BGCOLOR<br />
<br />
<br />
Warna - Bagian 2<br />
<br />
<br />
Normal<br />
Warna Biru<br />
Warna Hijau<br />
Warna Merah<br />
Warna kuning<br />
<br />
<br />
BENGKEL INTERNET PENS-ITS<br />
C. MENAMPILKAN DAFTAR ITEM (LIST)<br />
1. Penggunaan tag untuk daftar list yang tidak diberi nomor; tag untuk daftar item yang<br />
diberi bulatan.<br />
<br />
<br />
Contoh Pemakaian Tag UL dan LI<br />
<br />
<br />
Daftar Jurusan di PENS ITS :<br />
<br />
Telekomunikasi <br />
Teknologi Informasi <br />
Elektronika <br />
Elektro Industri <br />
<br />
<br />
<br />
2. Penggunaan tag untuk menampilkan daftar item dengan nomor urut.<br />
<br />
<br />
Tag OL dengan TYPE<br />
<br />
<br />
Dengan huruf kapital:<br />
<br />
Yogya<br />
Solo<br />
<br />
<br />
Dengan angka romawi:<br />
<br />
Yogya<br />
Magelang<br />
<br />
<br />
<br />
8
BENGKEL INTERNET PENS-ITS<br />
3. Penggunaan tag , , untuk menampilkan daftar khusus dengan tampilan<br />
menjorok ke kanan.<br />
<br />
<br />
Daftar Definisi<br />
<br />
<br />
Kamus Teknologi Informasi:<br />
<br />
<strong>HTML</strong><br />
Bahasa yang digunakan untuk menyusun Web<br />
HTTP<br />
Protokol yang dipakai untuk mentransfer <strong>HTML</strong><br />
<br />
<br />
<br />
D. MENAMPILKAN GAMBAR<br />
1. Penggunaan untuk menampilkan background dan <br />
untuk menampilkan gambar.<br />
<br />
<br />
Menampilkan Gambar<br />
<br />
<br />
Gambar Komputer terbaru<br />
<br />
<br />
<br />
Jika letak file gambar dalam folder yang sama dengan file html, bisa langsung dituliskan<br />
nama filenya, tapi bila berbeda perhatikan cara diatas (bila file html diatas disimpan dalam<br />
folder /html, maka gunung.jpg akan terletak dalam folder /html/citra/)<br />
2. Pengaturan ukuran gambar dengan atribut HEIGHT dan WEIGHT, serta penggunaan atribut<br />
BORDER untuk memberi bingkai gambar.<br />
<br />
<br />
Ukuran Gambar<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
9
BENGKEL INTERNET PENS-ITS<br />
E. PENGGUNAAN TABEL<br />
1. Tag-tag yang digunakan :<br />
untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.<br />
menentukan judul tabel<br />
membuat baris dalam tabel<br />
membuat judul kolom<br />
membuat sebuah sel data<br />
<br />
<br />
Tabel dengan Garis<br />
<br />
<br />
<br />
Daftar Harga Keladi<br />
NamaHarga<br />
Red Flash35.000<br />
Red Fire60.000<br />
Fannie Munson60.000<br />
<br />
<br />
<br />
2. Penggabungan sel dengan tag dan <br />
a. Atribut ROWSPAN ditempatkan pada tag <br />
<br />
<br />
Penggunaan ROWSPAN<br />
<br />
<br />
<br />
Daftar Wilayah dan Kota<br />
<br />
Jawa Tengah<br />
Semarang<br />
<br />
Kudus<br />
Solo<br />
<br />
<br />
<br />
b. Atribut COLSPAN bisa ditempatkan pada tag atau <br />
<br />
<br />
Penggunaan COLSPAN<br />
<br />
<br />
<br />
Daftar Target<br />
<br />
Area: Jawa Tengah<br />
<br />
Semarang15.000<br />
Kudus11.000<br />
<br />
<br />
<br />
10
3. Pengaturan jarak dalam tabel :<br />
CELLSPACING mengatur jarak bagian sel thd tepi dalam bingkai tabel.<br />
CELLPADDING mengatur jarak teks terhadap tepi kiri.<br />
<br />
<br />
Tombol dengan Tabel<br />
<br />
<br />
<br />
<br />
e-mail<br />
<br />
<br />
<br />
<br />
F. PEMBUATAN LINK<br />
1. Penggunaan tag <br />
BENGKEL INTERNET PENS-ITS<br />
<br />
<br />
Halaman Utama<br />
<br />
<br />
Halaman Utama<br />
Silakan klik pada link-link berikut:<br />
Halaman X<br />
Homepage<br />
saya<br />
Membuat<br />
link dengan gambar <br />
<br />
<br />
Buatlah file halx.htm, sehingga ketika diklik pada Halaman X akan menuju file yang dimaksud.<br />
11
2. Menggunakan bookmark pada suatu halaman web yang panjang.<br />
<br />
<br />
Bookmark<br />
<br />
<br />
<br />
BUKU<br />
Daftar Isi:<br />
Bab 1<br />
Bab 2<br />
<br />
<br />
BAB 1<br />
...<br />
...<br />
<br />
<br />
BAB 2<br />
...<br />
...<br />
<br />
<br />
<br />
<br />
Perkecillah halaman web browser anda (IE) untuk melihat efeknya.<br />
G. PENGGUNAAN FORM<br />
1. Input data dengan input<br />
<br />
<br />
Contoh Penggunaan Formulir<br />
<br />
<br />
<br />
Nama :<br />
<br />
<br />
Hobby :<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
BENGKEL INTERNET PENS-ITS<br />
12
File info.htm yang dituju oleh web diatas.<br />
<br />
<br />
<br />
<br />
<br />
Info<br />
<br />
<br />
2. Penggunaan tipe checkbox<br />
3. Penggunaan tombol radio dan komentar<br />
BENGKEL INTERNET PENS-ITS<br />
<br />
<br />
Contoh Penggunaan Formulir<br />
<br />
<br />
<br />
Buah yang Anda sukai:<br />
Anggur<br />
Jeruk<br />
Melon<br />
<br />
<br />
<br />
<br />
<br />
Contoh Penggunaan Formulir<br />
<br />
<br />
<br />
Jenis Kelamin:<br />
Pria<br />
Wanita<br />
<br />
Komentar Anda:<br />
<br />
<br />
<br />
<br />
<br />
<br />
13
4. Pemilihan dengan select<br />
<br />
<br />
Contoh SELECT - Model Drop Down<br />
<br />
<br />
<br />
Olahraga yang paling Anda sukai:<br />
<br />
Sepak Bola<br />
Bulutangkis<br />
Tenis Meja<br />
Basket<br />
Lain-lain<br />
<br />
<br />
<br />
<br />
<br />
BENGKEL INTERNET PENS-ITS<br />
Sekarang, ubahlah baris select diatas dengan : ,<br />
perhatikan perbedaannya dengan yang diatas.<br />
H. PENGGUNAAN TAG META<br />
Ditempatkan dalam bagian header, dan biasanya diletakkan setelah .<br />
Digunakan untuk menyimpan sejumlah informasi.<br />
Contoh :<br />
1. Jika anda membuat dokumen <strong>HTML</strong> melalui FrontPage 2000 akan muncul tag meta sebagai<br />
berikut :<br />
<br />
2. Agar halaman web yang dibuat disertakan ketika mesin pencari web (mbah Google) melakukan<br />
pencarian, gunakan atribut keywords, semakin banyak keywords yang dimasukkan, akan<br />
semakin besar halaman web disebutkan dalam hasil pencarian.<br />
<br />
3. Mengarahkan ke halaman lain<br />
<br />
<br />
Pengalihan Halaman<br />
<br />
<br />
<br />
Halaman web kami sudah dipindah.<br />
Anda akan dipindahkan ke halaman<br />
tersebut dalam waktu 5 detik.<br />
<br />
<br />
Buatlah file baru.htm<br />
<br />
<br />
Halaman Baru<br />
<br />
<br />
Anda berada pada halaman<br />
baru kami.<br />
<br />
<br />
14