web modul 2
TEORI
2.1. Pengertian HTML
HTML atau Hypertext Markup Language merupakan protokol yang
digunakan untuk mentransfer data atau document dari web server ke browser kita
(Internet Explorer, Netscape Navigator, NeoPlanet, dll). HTML dirancang untuk
digunakan tanpa tergantung pada suatu platform tertentu. Dokumen HTML adalah
suatu text biasa, dan disebut sebagai markup language karena mengandung tanda –
tanda ( tag ) tertentu yang digunakan untuk menetukan tampilan suatu teks dan
tingkat kepentingan dari teks tersebut dalam suatu dokumen. HTML inilah yang
memungkinkan Anda menjelajah internet dan melihat halaman web yang menarik.
Pada dokumen HTML yang termasuk system bypertext, maka dari
itu kita tidak harus membaca dokumen tersebut secara urut dari atas
kebawah atau sebaliknya. Ciri utama HTML adalah adanya tag dan elemen. Elemen
tersebut adalah HEAD ini berfungsi memberikan informasi tentang dokumen
tersebut dan BODY yang berfungsi menentukan bagaimana isi suatu dokumen
ditampilkan didalam browser.
Sekarang ini di pasaran terdapat banyak sekali HTML
authoring (software yang digunakan untuk membuat atau mendesain halaman web).
Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sebagai contohnya. Tetapi
tanpa mengetahui dasar-dasarnya kita tidak akan memperoleh hasil yang maksimal.
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
komplek.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui
dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah word processor. Anda
bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling
mudah adalah menggunakan Notepad.
2.2 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 “/”).
Berikut ini adalah kerangka dasar dokumen HTML yang
merupakan aturan dari W3 Consortium.
<HTML>
<HEAD>***bagian dari head***</HEAD>
<BODY>***bagian dari body***</BODY>
</HTML>
Sebuah halaman web minimal mempunyai empat buat tag, yaitu :
<HTML>
Sebagai tanda awal dokumen HTML.
<HEAD>
Sebagai informasi page header. Di dalam tag ini kita bisa
meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.
<TITLE>
Sebagai titel atau judul halaman. Kalimat yang terletak di
dalam tag ini akan muncul pada bagian paling atas browser Anda
(pada title bar).
Contoh : <TITLE>Tips HTML — http://www.klik-kanan.com</TITLE>
<BODY>
Di dalam tag ini bisa diletakkan berbagai page
attribute seperti warna latar belakang, warna teks, warna link, warna
visited link, warna active link dan lain-lain.
Atribut :
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN
& TOPMARGIN.
Contoh :
<BODY bgcolor=”#000000″ background=”images/pcb.gif”
text=”#FFFFFF” link=”#FF0000″ vlink=”FFFF00″ alink=”#0000FF”>
Sebuah contoh sederhana dokumen HTML :
<HTML>
<HEAD>
<TITLE>Halaman pembuka
</TITLE>
</HEAD>
<BODY bgcolor=”#FFFFFF” background=”images/gambar1.gif”
text=”#FF0000″>
Letakkan text, images, dan link Anda di sini
</BODY>
</HTML>
1) HTML Format 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 :
Headers: <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 tulis dalam notepad :
<HTML><BODY>
<H1>Header level 1</H1>
<H2>Header level 2</H2>
<H3>Header level 3</H3>
<H4>Header level 4</H4>
<H5>Header level 5</H5>
<H6>Header level 6</H6>
<HTML><BODY>
2) HTML Image ( gambar )
Digunakan untuk menampilkan image atau animasi gif pada
halaman web Anda. Atributnya adalah : alt, align=(center, left, right), hspave,
vspace, border, width & height.
Contoh :
<IMG SRC=”logo.gif” alt=”Ini adalah logo halaman pembuka”
width=200 height=100>
<IMG SRC=”logo.gif” hspace=10 vspace=5 align=right
border=2>
3) HTML Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang
terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh :
<A HREF=”halaman2.html”>Klik di sini</A> Untuk
membuat link ke halaman lain.
<A HREF=”mailto:webmaster@klik-kanan.com”>Klik di
sini</A> Untuk membuat link pada alamat e-mail.
<A HREF=”#aplikasi”>Klik di sini</A> Untuk
membuat link ke bagian lain pada halaman yang sama.
<A HREF=”halamanlain.html#aplikasi”>Klik di
sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.
<A HREF=”halaman2.html”><IMG
SRC=”gambar.gif”></A> Untuk membuat link dengan menggunakan gambar.
4) HTML List ( dasar urutan )
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists <UL>
Untuk membuat daftar item dengan tanda bullet. List entries
didefinisikan dengan tag <LI>.
Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
Hasil dari kode di atas adalah:
Item nomer 1
Item nomer 2
Item nomer 3
Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc,
circle atau square bullet point.
Contoh : <UL COMPACT>
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>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Hasil dari kode di atas adalah :
Item nomer 1
Item nomerr 2
Item nomerr 3
Untuk TYPE Anda dapat juga menggunakan :
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.
5) HTML Table ( tabel )
Tabel sangat penting artinya dalam desain web. Karena dengan
menggunakan tag table Anda dapat membuat halaman web “terbagi” pada beberapa
kolom atau baris. Contohnya seperti pada halaman web yang sedang Anda baca ini.
Terdapat tiga tag atau elemen utama yang digunakan dalam
pembuatan table : <TABLE>, <TR>, dan <TD>. Yang
perlu diingat adalah bahwa tab <TR> dan <TD> harus
terletak di antara tag <TABLE> dan </TABLE>
<TABLE> Terdiri dari atribut :
align – perataan : rata kiri (left), tengah (center)
atau kanan (right).
bgcolor – warna latar belakang (background) dari tabel.
border – ukuran lebar border tabel (dalam pixel).
cellpadding – jarak antara isi cell dengan batas cell
(dalam pixel).
cellspacing – jarak antar cell (dalam pixel).
width – ukuran tabel dalam pixel atau percent.
Contoh :
<TABLE align=”center” bgcolor=”#0000FF” border=”2″
cellpadding=”5″ cellspacing=”2″ width=”90%”>
<TR>
Tag ini digunakan untuk membuat baris baru (pada tabel).
Terdiri dari atribut:
align – perataan : rata kiri (left), tengah (center)
atau kanan (right).
bgcolor – warna latar belakang dari baris.
valign – perataan vertikal : top, middle atau bottom.
Contoh : <TR align=”right” bgcolor=”#0000FF”
valign=top>
<TD>
Tag ini digunakan untuk membuat kolom baru pada tabel.
align – perataan
background – image yang digunakan sebagai latar
belakang dari kolom.
bgcolor – warna latar belakang
colspan – lihat gambar contoh
height – ukuran tinggi cell dalam pixels.
nowrap – membuat supaya isi dari kolom tetap berada
pada satu baris.
rowspan – lihat gambar contoh
valign – perataan vertikal :top, middle atau bottom.
width – ukuran kolom dalam pixel atau percen.
Contoh :
<TD align=”right” background=”back.gif” bgcolor=”#0000FF”
colspan=”3″ height=”200″ nowrap rowspan=”2″ valign=”bottom” width=”300″
<table width=”100″ border=”1″ cellspacing=”2″
cellpadding=”2″>
<tr>
<td bgcolor=”#0000FF”> </td>
<td bgcolor=”#FFFF66″> </td>
<td rowspan=”2″
bgcolor=”#FF3366″> </td> </tr>
<tr> <td colspan=”2″
bgcolor=”#33CC66″> </td> </tr> <tr>
<td colspan=”3″
bgcolor=”#FFCC99″> </td>
</tr>
</table>
<table width=”100″ border=”0″ cellspacing=”0″
cellpadding=”0″>
<tr> <td bgcolor=”#0000FF”>
</td>
<td bgcolor=”#FFFF66″> </td>
<td rowspan=”2″
bgcolor=”#FF3366″> </td>
</tr>
Post Test :
Buatlah halaman website seperti berikut :
Skrip :
<html>
<head> <title> Membuat Tabel </title> </head> <table border="0" align="center" width="100%"> <tr> <td width="19%" align="center"><img src="Uniku.png" width="150" height="150" alt=""/></td> <td width="81%" align="center"><h1>UNIVERSITAS KUNINGAN</h1> <h2>FAKULTAS ILMU KOMPUTER</h2> Kampus 1: jln. Raya Tjut Nyak Dien No.36 Kuningan</td> </tr> </table> <hr size="3" color="metalic"> <body> <font face="felix titling" size="6" color="black"> <center> Daftar Nilai Pemograman Web 1</center> </font> <font face="Andalus"> <center><table border="1" width="60%" bgcolor="white"> <tr bgcolor="blue"> <td rowspan="2" align="center">No</td> <td rowspan="2" align="center">NIM</td> <td colspan="3"align="center">Nilai</td> <td rowspan="2"align="center">Rata - Rata</td> <td rowspan="2"align="center">NA</td> </tr> <tr bgcolor="blue"> <td align="center">Tugas</td> <td align="center">UTS</td> <td align="center">UAS</td> </tr> <tr> <td bgcolor="white" align="center">1</td> <td >20160910</td> <td align="center">90</td> <td align="center">90</td> <td align="center">90</td> <td align="center">90</td> <td align="center">A</td> </tr> <tr> <td bgcolor="white" align="center">2</td> <td >20160911</td> <td align="center">80</td> <td align="center">80</td> <td align="center">80</td> <td align="center">80</td> <td align="center">B</td> </tr> <tr> <td bgcolor="white" align="center">3</td> <td >20160912</td> <td align="center">85</td> <td align="center">85</td> <td align="center">85</td> <td align="center">85</td> <td align="center">B</td> </tr> </table></center> </font> </body> </html> |
Penjelasan :
Program diatas menggunakan beberapa style/atribut. Seperti <table> ini berfungsi untuk membuat sebuah tabel,didalam <table> tidak akan lepas dengan <tr> dan <td>,
karena fungsi dari atribut tersebut, yaitu <tr> untuk
membuat/menambah baris baru, sedangkan <td> untuk membuat/menambah
kolom baru. Untuk membuat kolom/baris yang akan disatukan (merger cell), bisa menggunakan atribut ROWSPAN (untuk menyatukan baris) dan COLSPAN (untuk menyatukan kolom).
Fungsi dari <img src=”…”> ini berfungsi untuk menambahkan sebuah gambar, dimana file gambar tersebut harus disimpan di tempat yang sama(se folder), lalu memasukan nama file jpeg tersebut <img src=”uniku1.jpeg”>, maka program akan mencari file tersebut.
Adapun fungsi dari atribut lainnya, seperti <br> untuk Membuat garis baru, <hr> untuk membuat garis line, dan <h3> untuk mengubah tipe tulisan.
Tugas :
1. Jelaskan perbedaan tabel layout dan tabel konvensional pada HTML !
Tabel
Tabel
biasanya diawali dengan tag <table> dan memiliki tag <td>
(kolom) dan tag <tr> (baris).Untuk tabel biasanya penggunakan
background warna, gambar dan lainya berada didalam tabel tersebut, tidak
terpisah. Tabel memang mudah dipahami karena sistematis dalam
pengerjaanya dan tingkat presisi elemenya pun lebih tinggi sehingga
pasti kompetibel dengan kebanyakan browser.
Tetapi
sayangnya menggunakan table dapat memakan memory karena ukuranya lebih
besar, sehingga tidak menutup kemungkinan loading sebuah website akan
terasa lama dan juga membutuhkan bandwith yang cukup besar.
Contoh :
<tabel>
<tr>
<td>baris 1, kolom 1</td>
<td>baris 1, kolom 2</td>
<td>baris 1, kolom 3</td>
</tr>
</table>
DIV
Div
merupakan singkatan dari division yaitu sebuah tag html yang di gunakan
untuk membuat suatu bagian atau kelompok tertentu untuk mengelompokan
suatu file agar lebih mudah saat kita ingin mencarinya. Div merupakan
elemen berbasis Css yang bersifat "float" sehingga bisa diletakan dimana
saja. Div sangat cocok jika digunakan untuk layout yang kompleks,
ukuranya pun lebih kecil dibanding tabel sehingga tidak menyedot banyak
bandwith dan loading sebuah website pun akan terasa cepat. selain itu
juga menggunakan div dapat mempercepat pendeteksian di search engine.
Tetapi dalam hal menggunakan div dibutuhkan ketelitian dalam hal
menuliskan tag-tag div, dan ketika terjadi error cukup sulit untuk
memperbaikinya apabila kita tidak mengetahui pasti dan tidak teliti
dalam hal penulisan sebuah tag.
Contoh :
<div style="background: #fffff">
Isi content
</div>
2. Buatlah halaman website.
Untuk menu Beranda, Biodata, dan Nilai harus bisa melakukan hyperlink. Menu
Biodata berhubungan dengan tugas modul 1 dan menu Nilai dapat link ke tabel
latihan pada modul 2.
Skrip :
<html>
<head> <title> HyperLink </title> </head> <body> <table border=”2″ color=”black” align=”center” width=”100%”> <tr> <td colspan=”3″ align=”center”><img src="Kop.PNG" width="709" height="178" alt=""/></td> </tr> <table> <tr> <td width=”15%” valign=”top” bgcolor="pink"> <ul type=”disc”> <li><a href="Tugas.html" target="”main”">Beranda</a></li> <li><a href="Biodata.html" target="”blank”">Biodata</a></li> <li><a href="Daftar Nilai.html" target="”blank”">Daftar Nilai</a></li> </ul> </td> <td width=”50%”><center> <h3> UNIVERSITAS KUNINGAN </h3> <h3> Fakultas Ilmu Komputer </h3> <h3> Program Studi Sistem Informasi Jenjang S1 </h3><br><br> </center> <pre> NIM : 20160910128 <br> Nama : Muhamad Nur Jamaludin Lufi <br> Tempat, Tanggal Lahir : Kuningan, 05 September 1996 <br> <br> <b> Pendidikan </b> <ol> <blockquote><li> SD : SDN 03 Cikarang </li></blockquote> <blockquote><li> SMP : SMPN 1 Cikarang </li></blockquote> <blockquote><li> SMA : SMK 1 Cikarang </li></blockquote> </ol> </pre> </td> <td width=”15%” valign=”top” bgcolor="pink"> <ul type=”disc”> <li><a href=”tag.html” target=”main”> Tags </a></li> <li><a href=”kat.html” target=”blank”> Kategories </a></li> </ul> </td> </tr> <tr> <td colspan=”3″ align=”center” bgcolor="pink"> ©Copyright : Regipermana.idt </td> </tr> </table> </table> </body> </html> |
Komentar
Posting Komentar