LANDASAN TEORI
Hypertext Markup
Language (HTML) adalah bahasa yang
digunakan untuk menulishalaman web. Ciri
utama dokumen HTML adalah adanya tag
dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua
yaitu elemen <HEAD> yang berfungsi memberikan informasi tentang dokumen
tersebut dan elemen <BODY> yang menentukan bagaimana isi suatu dokumen ditampilkan oleh
browser, seperti paragraf, list(daftar), tabel dan lain-lain. Sedangkan tag dinyatakan dengan
tanda lebih kecil “ < “ ( tag awal ) dan tanda lebih besar “
> “ (tag akhir). Dalam penggunaannya sebagian besar
kode HTML tersebut harus terletak di
antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri
dengan </namatag> (terdapat tanda "/").
Dokumen HTML mempunyai
tiga buah tag utama yang membentuk struktur dari dokumen HTML yaitu
HTML,HEAD dan BODY. Tag HTML berfungsi untuk menyatakan
suatu dokumen HTML, tag HEAD berfungsi
untukmemberikan informasi tentang dokumen HTML
dan tag BODY berfungsi untuk menyimpan informasi
atau data yang akan ditampilkan dalam dokumen HTML.
LISTS
Tag utama
untuk tabel yaitu <TABLE> </TABLE> dan
untuk membuat judul tabel tag-nya table
header <TH></TH> lalu untuk membuat
data tabel atau isi tabel menggunakan
tag table <TD></TD> dan untuk membuat
baris adalah memakai tag Table Rows <TR> </TR>
FORM
Form biasanya digunakan
untuk mengumpulkan informasi dari user, sehingga memungkinkan suatu web server
untuk menerima informasi dari pemakai melalui sejumlah elemen yang disebut kontrol.
Kontrol ini bisa berupa suatu textbox, checkbox, radio button, push button,
list menu
dan lainnya.
Standart penulisan
form :
<form method=”post/get”
action=url”>
……..
…….
</form>
Atribut action berisi URL dari program yang
dipanggil oleh form tersebut.
Textbox
Textbox merupakan salah
satu jenis kontrol untuk memasukan data. HTML menyediakan tag
<input> dengan
atribut type=”text” untuk membuat kotak input. Atribut lain yaitu name untuk memberi
nama input, atribut Value untuk memberi nilai suatu input dan atribut size
untuk menentukan batas terpanjang sebuah masukan.
Dalam textbox
kita juga dapat menyembunyikan masukan yang
ditulis user dengan member nilai type=”password”. Masukan
akan menjadi karakter “*”.
- PERTEMUAN I
MATERI :
1.
Memahami Tag <table>
2.
Memahami tag <a href>
3.
Memahami tag <img src>
Latihan
1.
Buka notepad
2.
Ketikkan struktur HTML
3.
Simpan kode html dengan nama prak2.html
 |
4.
Aktifkan web browser (Mozilla Firefox, Opera,
Google Chrome, Apple Safari, Netscape Navigator, dsb)
5.
Buka file prak2.html dari web browse
<html>
<head>
<title>latihan
1</title>
</head>
<body>
<body
bgcolor="blue">
<p
align="center"> <h1>
WELCOME TO FIKOM</h1>
<h2> WELCOME TO FIKOM</h2>
<h3> WELCOME TO FIKOM</h3>
<h4> WELCOME TO FIKOM</h4>
<h5> WELCOME TO FIKOM</h5>
<h6> WELCOME TO FIKOM</h6>
<marquee> Good Day
Everibody</marquee>
</body>
</html>
Catatan :
- bgcolor = Mewarnai latarbelakang sebuah wbsite
- align = untuk
membuat suatu tulisan rata tengah
ada 6 tag untuk ukuran
tuliasan yakni :
<h1><h2>……………<h6>
Dimana jika tambah besar
ukuran angka pada <h> maka semakin kecil ukuran huruf ditampilkan..
Sedangkan maquee adalah
untuk membuat teks bejalan.
2.
PERTEMUAN II
Cara pembuatan table pada
html
<html>
<head>
<title>latihan
1</title>
<body>
<table border=3px>
<tr>
<td>
</td>
</tr>
</body>
</html>
Table diatas terdiri atas
1 baris dan 1 kolom.
<tr> = menyatakan
banyak baris
<td> = menyatakan
banyak kolom
Border = menampilkan border
pada table
Membuat Table 2 baris dan 2 kolom
<html>
<head>
<title>latihan
1</title>
</head>
<body>
<table
bordercolor='red' border='3px' width=50% height=50%>
<tr>
<td colspan=2>
</td>
</tr>
<tr>
<td >
<height = 30% >
</td>
<td >
<height = 30%>
</td>
</tr>
</table>
</body>
</html>
Bordercolor digunakan
untuk mewarnai border ada tabel
Width dan height digunakan
untuk mengatur lebar dan tinggi tabel pada website
Colspan digunakan untuk
menghilangkan kolom dalam baris tabel
Membuat tabel 3 baris dan 3
kolom
<html>
<head>
<title>latihan
1</title>
</head>
<body>
<table bordercolor='red'
border='3px' width=50% height=50%>
<tr>
<td rowspan=2
> 1,1 </td>
<td colspan=2> 1,2
</td>
</tr>
<tr>
<td> 2,1 </td>
<td> 1,2 </td>
</tr>
<tr>
<td colspan = 3 > 3,1 </td>
</tr>
</table>
</body>
</html>
Membuat tabel 4 baris 3 kolom
<html>
<head>
<title>latihan
1</title>
</head>
<body>
<table
bordercolor='red' border='3px' color='red' width=50% height=50%>
<tr>
<td colspan=2> 1,1
</td>
<td> 1,3
</td>
</tr>
<tr>
<td> 2,1 </td>
<td> 1,2 </td>
</tr>
<tr>
<td colspan = 2 > 3,1 </td>
</tr>
<tr>
</tr>
<td colspan = 2> 4,1
</td>
</table>
</body>
</html>
Membuat table 3 baris dan 3 kolom
<html>
<head>
<title>lat_2</title>
</head>
<body >
<table align=center
border=1xp width="80%" height="100%">
<tr>
<td colspan=2
bgcolor="maroon">1</td>
<td>4</td>
</tr>
<tr height="80%">
<td width=20% bgcolor="blue">3</td>
<td>6</td>
<td rowspan=2 width=30% bgcolor="blue">b</td>
</tr>
<tr>
<td colspan=2 bgcolor="green">5</td>
</tr>
</table>
</body>
</html>
3.
PERTEMUAN
III
Materi :
1.
Memahami tag <table>
2.
Memahami tag <form>
Layout à letak suatu informasi di halaman web
Tabel dapat
digunakan sebagai salah satu alat untuk mendesain web
Ilustrasi
tabel:
Membuat from
LOGIN
|
|||||
User
|
________________
|
||||
Password
|
________________
|
||||
|
|||||
Tabel.8
<html>
<head>
<title> pertemuan 3
</title>
</head>
<body bgcolor=red topmargin="200xp">
<form>
<table border=1px
width=20% align=center>
<tr bgcolor=white>
<td colspan=3
align=center>LOGIN</td>
</tr>
<tr>
<td>User</td>
<td><input
type=text size=25 name=txtuser></td>
</tr>
<tr>
<td
width=35%>password</td>
<td><input
type=password size=25 name=txtpass></td>
</tr>
<tr>
<td colspan=3
align=center><input type=submit value=login>
<input type=reset
value=CANCEL> </td>
</tr>
</table>
</form>
<td> </td>
</body>
</html>
Latihan 1.
1.
Aktifkan notepad
2.
Ketikkan struktur HTML
3.
Rancang tabel 4 baris 2kolom
4.
Simpan kode dengan nama prak3.html
5.
Aktifkan web browser
6.
Buka file prak3.html dari web browser
Soal :
Buatlah kode
html untuk desain berikut ini:
|
|||||||||||||
1.
Buka jendela baru di notepad
2.
Ketikkan struktur html
3.
Rancanglah tabel terluar dengan ukuran 3 baris 2
kolom
<html>
<head>
<title>lat_2</title>
</head>
<body >
<table align=center border=1xp
width="90%" height="90%">
<tr
>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td
>
<form>
<table border=1xp align=center>
<tr
bgcolor=white>
<td colspan=3
align=center>LOGIN</td>
</tr>
<tr>
<td>User</td>
<td><input type=text size=25
name=txtuser></td>
</tr>
<tr>
<td width=35%>password</td>
<td><input type=password size=25
name=txtpass></td>
</tr>
<tr>
<td colspan=3 align=center><input
type=submit value=login>
<input type=reset
value=CANCEL> </td>
</tr>
</table>
</form>
</td>
<td
width=60%>1</td>
</tr>
<tr>
<td
colspan=2>1</td>
</tr>
</table>
 |
</body>
</html>
MEMBUAT LINK DAN FROM
<html>
<head>
<title> PERTEMUAN III </title>
</head>
<body
bgcolor="green">
<table border =
"1px" width="70%"
align="center"height="90%" bgcolor="red">
<tr>
<td
valign="top"align="center"colspan="4">
<font
color="BLUE"size="+2"><blink>Google</blink></font>
<br><br>
<form>
<input type=text
size=30>
<input type= submit
value="Search">
</form>
</td>
</tr>
<tr>
<td>
<marquee
direction="left"><img src ="koala.jpg
"width="50px"height="50px"</marquee>>
<a
href=prak1.html><blink>prak-1</blink></a>
</td>
<td>
<img src
="desert.jpg "width="50px" height="50px">
<a
href=prak3.html><blink>prak-2</blink></a>
</td>
<td>
<img src
="lighthouse.jpg "width="50px" height="50px">
prak-3
</td>
<td>
<img src ="penguins.jpg
"width="50px" height="50px">
prak-4
</td>
</td>
</tr>
</table>
</body>
</html>
Kesimpulan
Dari pembuatan coding di
atas bawah pemahaman atas pembuatan
dasar web sehingga kami tahu dasar dasarnya dimana pembuatan tag-tag dan
tabel dalam pembuatan web dan strukturnya
dalam pembuatan html yang menggunakan notepad
0 comments:
Post a Comment