Materi Pemograman Web
tentang HTML Dibaca Yaa , Semoga Bermanfaat.
HTML ( hyper text markup
language) adalah skrip untuk menyimpan dokumen web.
Struktur dasar dokumen HTML :
<html>
<head>
<title> diisi dokumen html </title>
</head>
Diisi penulisan informasi web
</body>
</html>
Struktur dasar HTML :
a. Tag
Adalah teks khusus (markup) berupa
dua karakter < dan > sebagai contoh <body> adalah tag dengan body .
secara umumteks ditulis berpasangan yang terdiri atas tag pembuka dan tag
penutup ( di tambahkan karakter / setelah karakter < sebagai contoh
<body> adalah tag pembuka isi dokumen html dan </body> ini adalah
tag penutup isi dokumen html.
b. Element
Terdiri dari :
Tag pembuka
Isi
Penutup
Untuk menampilakan judul dokumen
html pada web browser digunakkan element title. <title> adalah tag
pembuka judul dokumen html tag-tag yang ditulis pada html tidak boleh tumpang
tindih harus berpasangan.
Contoh penulisan yang
benar
<p>
<b>
</b>
</p>
ü Attribute
Mendefinisikan property daru suatu
element html yang terdiri atas nama dan nilai.
Contoh:
<tag>
Nama-attr=”nilai-attr”
Nama-attr=”nilai-attr”
……………………………………………….
<tag>
Contoh untuk membuat warna pada
background.
<body bgcolor=”black”
text=”yellow”>
ü Element
html
Menyatakan pada browser bahwa
dokumen yang digunakan adalah html.
Sintaks:
<html>
………………………
</html>
ü Element
head
ü Element
title
ü Element
body
Tag
|
Atrribut
|
Fungsi
|
<Body>
|
<body bgcolor=”red> Text=”….”
Link=”…”
Vlink=”…”
Alink=”….”
<body
background=”D:\gambar.jpg”>
|
Background berwarna merah
Memberi warna teks
Warna link
Link yg sudah dikunjungi
Memberi gambar pada halaman
|
<a>….</a>
|
<a herf=”D:\home.html”>
home </a>
<a
href=”html://www.yahoo.com/”>
yahoo ! </a>
|
Membuat hyperlink
|
<img>
|
<img src=”nama gambar.jpg
width=”50” height=”50” >
|
Memasukkan gambar dengan lebar
50px tinggi 50px
|
<font>….</font>
|
<font size=”2” color=”#ffffoo”
face=”arial”>…..</font>
|
Mengatur font dengan ukuran 2,
warna kuning.huruf arial.
|
<big> ….</big>
|
<big> contoh </big>
|
Tag untuk membuat teks menjadi
besar
|
<small<…</small>
|
<small> contoh
</small>
|
Untug membuat teks menjadi kecil
|
<b>…</b>
|
<b> contoh </b>
|
Untuk membuat teks menjadi bold
|
<i>…</i>
|
<i>contoh</i>
|
Untuk membuat teks menjadi italic
|
<strike>…</strike>
|
<strike>contoh</strike>
|
Untuk membuat teks tercoret
|
<u>…</u>
|
<u>contoh</u>
|
Teks underline
|
<h1>….</h1>
|
<h1>contoh</h1>
|
Teks heading 1 tingkant heading
bisa sampai 6 semakin besar tingkatannya headong semakin kecil.
|
<hr>…</hr>
|
<hr widht=”600”>
<hr align=”center”
size=”5=”80%”>
|
Garis dengan lebar 600
Tag <hr> tidak perlu di
tutup, dengan tinggi 5, lebar 80% dari lebra layar browser dan rata tengah .
|
<p align=”center”>
</p>
|
Pargraf rata tengah perintah ini
dapat ditulis juga dengan <center>…</center>
|
|
<br>
|
Tag untuk ganti baris
|
|
<sup>…</sup>
|
Tag untuk superscript
|
|
<sub>…</sub>
|
Tag untuk subscript
|
|
<pre>..</pre>
|
Untuk menampilkan teks sesuai asli
nya
|
TABLE
Beberapa perintah
penting untuk membuat tabel:
1. <table
border=”1”> .... </table> _ merupakan
perintah utama dalam pembuatan tabel,
tabel dengan
ketebalan 1px
2. <tr> ...
</tr> _
tag
untuk membuat baris
3. <td> ...
</td> _
tag
untuk membuat kolom/cell
4. colspan _ merge/melebarkan kolom/cell
5. rowspan _ merge/melebarkan baris
Tag
|
Atribut/Contoh
penulisan
|
Fungsi
|
<table>
...
</table>
|
border=”...”
|
Ketebalan tabel.
Contoh:
<table
border=”1”>
|
align=”...”
|
Pengaturan tabel
(rata tengah,
kanan
atau kiri)
|
|
width=”...”
|
Lebar tabel. Bisa
diisi dengan
satuan pixel atau
persen.
Contoh:
<table
width=”80%”> atau
<table
width=”600”>
|
|
valign=”...”
|
Perataan secara
vertikal dari
suatu cell.
(top,
middle, bottom)
|
|
bordercolor=”...”
|
Warna border
|
|
bgcolor=”...”
|
Warna background tabel,
baris
atau cell
|
·
Color
Merupakan attribute yang bisa anda tambahkan pada beberapa
element seperti body, font, link, dll. Color dibagi menjadi 3 kategori warna
primer yaitu red, green & blue. Masing-masing color didefinisikan dalam 2
digit hexadecimal number.
#RRGGBB
Hexadesimal Color
#FF0000
Red
#00FF00
Green
#0000FF
Blue
#000000
Black
#FFFFFF
White
·
Pre
Tag untuk menampilkan text sesuai dengan aslinya.
·
Hyperlink
Link Address
ú
Absolute Address :
merupakan full internet address (URL) yang meliputi protocol, network location
and path & nama file.
Contoh : http://www.yahoo.com/index.html
ú
Relative Address :
URL yang tidak menyebutkan protocol & network location-nya (hanya path
& nama file).
Anchor
Tag <a> untuk menentukan hyperlink dalam document
HTML, HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut.
Contoh :
<a href=”URL”> Hypertext </a>
<a href “protocol”//hoat : Jomain : port/path/file
name”> Hypertext </a>
·
Table
¨ Membuat Table
Tag <table> digunakan untuk membuat table dalam doc.
HTML, bagian pokok dari table adalah cell yang didefinisikan dengan tag
<td>.
Berikutnya, jika ingin membuat beberapa baris cell dalam
table menggunakan tag <tr>.
¨ Menambahkan Heading Cell
Menggunakan tag <th>
¨ Pemformatan Table
Untuk memformat perataan text didalam table anda bisa
gunakan attribute align &b valign (vertical align).
Attribute
Value
Align
Center Justify Right Left
Valign
Baseline
Top Bottom Middle
Ü
Image
3 jenis yang sering digunakan :
-
GIF (Graphical
Interchange Format).
-
JPEG (Joint
Photographic Expert Image).
-
PNG (Portable Network
Grapgics).
<img
src=”URL”>
Attribute
|
Value
|
Description
|
Align
|
Center,
Justify, Left, Right, Baseline, Top, Bottom, Middle
|
Top,
Bottom, Middle digunakan untuk menentukan posisi image terhadap text.
|
Left,
right, center untuk menentukan posisi image di doc.
|
Ü
Form
Kegunaan Form
1.
Memperoleh data-data
user baik nama, alamat & data lainnya.
2.
Memperoleh informasi
pembelian secara online.
3.
Memperoleh feedback
dari user mengenai website anda.
Kegunaan Element
Tag <form> digunakan untuk membuat form di HTML.
Attribute
|
Description
|
Accept
|
Mendefinisikan MIME yang diizinkan oleh server yang memuat
script untuk memproses form. Sintax :
Accept = “Internet Media Type”
|
Method
|
Menentukan bagaimana data akan dikirim ke server. Get data
akan dikirim dengan menggunakan query string pada URL Post data akan dikirim
ke server sebagai block data ke script. Sintax :
Method = “Post/Get”
|
Action
|
Menentukan lokasi dari script yang akan memproses data
dari form. Sintax :
Action = “URL”
|
Ü
Frame
Dasar Penggunaan
Frame
Frame memungkinkan 1 halaman web / lebih ditampilkan pada
sebuah jendela browser. Untuk mempraktikan frame, buatlah terlebih dahulu 2
berkas HTML bersama framekir.htm & framekan.htm.
~ File framekir.htm :
<html>
<head>
<title> Frame Kiri </title>
</head>
<body bgcolor=”white”>
<head>
<title> Frame Kiri </title>
</head>
<body bgcolor=”white”>
<h1> Frame disebelah kiri </h1>
</body>
</html>
</html>
~File
framekan.htm :
<html>
<head>
<title> Frame Kanan </title>
</head>
<body bgcolor=”white”> <h1> Frame di sebelah kanan </h1>
</body>
</html>
<head>
<title> Frame Kanan </title>
</head>
<body bgcolor=”white”> <h1> Frame di sebelah kanan </h1>
</body>
</html>
Halaman berbasis frame dibentuk dengan menggunakan pasangan
<frameset> & </frameset>, attribute cols digunakan untuk
menentukan lebar masing-masing frame.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frame src=”framekir.htm”>
<frame src=”framekan.htm”>
</frameset>
</html>
</html>
Mengantisipasi Tidak
Adanya Dukungan Frame
Ada kemungkinan bahwa web browser yang digunakan pemakai
tidak mendukung fitur frame. Untuk mengatur agar ada pemberitahuan bahwa
halaman web hanya bisa dilihat denga browser yang mendukung frame digunakan
pasangan tag <noframes> & </noframes>.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frameset cols=”30%,*”>
<frame scr=”framekir.htm”>
<frame scr=”framekan.htm”>
<noframes> Sayang sekali halaman ini tak dapat dibuka
karena browser anda tidak mendukung frame. </noframe>
</frameset>
</html>
</html>
Menggunakan Border
Attribute BORDER pada tag <frameset> berguna untuk
mengatur ketebalan garis pemisah antar frame. Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*” border=”0”>
<frame scr=”framekir.htm”>
<frame scr=”framekan.htm”>
<frame scr=”framekan.htm”>
</frameset>
</html>
</html>
·
Menghilangkan
Scrolling
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*” border=”0”>
<frameset cols=”30%,*” border=”0”>
<frame src=”framekir.htm” scrolling=”no”>
<frame src=”framekan.htm”>
</frameset>
</html>
</html>
·
Frame & Link
Untuk mempraktekan penggabungan pemakaian frame yang
melibatkan link ke frame yang lain, buatlah 3 file HTML berikut!
1.
File redflash.htm :
<html>
<head>
<title> </title>
<head>
<title> </title>
</head>
<body>
<h2> Redflash </h2>
<body>
<h2> Redflash </h2>
Mempunyai warna merah disekitar tulang daun &
bintik-bintik putih di daerah yang berwarna hijau.
</body>
</html>
</html>
2.
File rosebud.htm :
<html>
<head>
<title> </title>
<head>
<title> </title>
</head>
<body>
<h2> Rosebud </h2>
<body>
<h2> Rosebud </h2>
Mempunyai warna dasar hijau dibagian pinggir, disekitar
tulang daun berwarna merah jembu & bagian tepi daun berwarna putih.
</body>
</html>
</html>
3.
File daftar.htm :
<html>
<head>
<title> </title>
</head>
<body>
<center>
<a href=”redflash.htm” target=”dinamis”>
</head>
<body>
<center>
<a href=”redflash.htm” target=”dinamis”>
<h2> Redflash </h2>
</a>
<a href=”rosebud.htm”> target=”dinamis”>
<h2> Rosebud </h2>
</a>
</center>
</body>
</html>
</body>
</html>
Pada file daftar.htm, attribute Target digunakan untuk
menentukan frame yang ditempati oleh halaman web yang dipanggil.
Kode yang digunakan untuk menggabungkan ke 3 file diatas
adalah seperti berikut :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset cols=”30%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” name=”dinamis”>
</frameset>
</html>
</html>
§
Frame Horizontal
HTML juga memungkinkan pembuatan frame horizontal. Caranya
dengan attribute cols pada <frameset> menjadi rows. Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” pdname=”dinamis”>
</frameset>
</html>
</html>
-
Penggunaan Noresize
Attribute noresize pada tag <frame> digunakan agar
frame tidak bisa diubah ketika ditampilkan pada browser.
Contoh :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame src=”daftar.htm”>
<frame src=”redflash.htm” noresize name=”dinamis”>
</frameset>
</html>
</html>
Gabungan frame horizontal & vertical :
<html>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<head>
<title> Contoh penggunaan frame </title>
</head>
<frameset rows=”30%,*”>
<frame src=”judul.htm” scrolling=”no”>
<frameset border=”0” cols=”30%,*”>
<frame src=”daftar.htm” scrolling=”no”>
<frame src=”redflash.htm” name=”dinimis”>
</frameset>
</frameset>
</html>
</frameset>
</html>
File judul.htm :
<html>
<head>
<title> </title>
<body background=”keladi.jpg”>
<center>
<img src=”judul.gif”>
<head>
<title> </title>
<body background=”keladi.jpg”>
<center>
<img src=”judul.gif”>
</body>
Postingan
0 komentar:
Posting Komentar