Assalamualaikum,wr.wb saat ini saya sedang kuliah di
STMIK AMIKOM YOGYAKARTA saya akan membagi ilmu yang telah saya pelajari selama
kuliah di amikom, ok gays kita mulai dari materi perancangan web basic, semoga
bermanfaat
PERANCANGAN
WEB
BASIC HTML
HTML
HTML digunakan untuk
membangun suatu halaman web. Sekalipun banyak orang
menyebutnya sebagai
suatu bahasa pemrograman, HTML sama sekali bukan bahasa
pemrograman, tapi
merupakan bahasa markup (penandaan), terhadap sebuah dokumen
teks. Simbol markup
yang digunakan oleh HTML ditandai dengan tanda lebih kecil ( < )
dan tanda lebih besar
( > ) yang biasa disebut tag.
1. Dokumen dan
Penamaan HTML
Sebuah file HTML
merupakan file teks biasa yang mengandung tag-tag HTML. Karena
merupakan file teks,
maka HTML dapat dibuat dengan menggunakan teks editor yang
sederhana, misalnya
notepad. Dapat juga menggunakan HTML editor yang bersifat
WYSIWYG ( What You
See Is What You Get ), misalnya Frontpage atau Dreamwaver.
Untuk menandai bahwa
sebuah file teks merupakan file HTML, maka ciri yang paling
nampak jelas adalah
ekstensi filenya, yaitu .htm atau .html. Dalam pemberian nama
sebuah dokumen
bersifat case sensitive sehingga dokumen dengan nama a.html akan
berbeda dengan
dokumen A.html.
2. Elemen dan Tag
HTML
Elemen HTML yaitu
komponen penyusun terkecil dari sebuah dokumen HTML. Untuk
menandainya. Elemen
dapat berupa teks murni, atau bukan teks, atau keduanya.
Untuk menandai sebuah
elemen dalam suatu dokumen HTML digunakan tag. Tag HTML
terdiri dari sebuah
simbol lebih kecil ( < ) dan dan lebih besar ( > ).
Nama elemen
ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan
pasangan tag,
walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa
harus berpasangan.
Diantaranya:
• Image ( <img
/> )
• Ganti Baris – Break
( <br /> )
• Horizontal Rule (
<hr /> )
1
• Input Field (
<input /> )
Tag dapat mempunyai
atribut. Atribut mendefinisikan sesuatu tentang tag tersebut. Atribut
digunakan untuk
mengubah default pemformatan dokumen dengan tag yang
bersangkutan.
Struktur Element
<p
align="center"> .....
</p>
Struktur Dasar H T ML
<html>
<head>
....informasi
dokumen....
</head>
<body>
....konten yang di
tampilkan
pada halaman
browser.....
</body>
</html>
3. Penggunaan Tag dan
Atributnya
Dalam pembuatan
dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag
HTML, memiliki syarat
penulisan yaitu:
• Tag HTML diapit
dengan dua karakter kurung sudut ( < dan > )
• Tag HTML secara
normal selalu berpasangan misal (<i>...</i>)
• Tag pertama dalam
suatu pasangan adalah tag awal, dan tag yang kedua
merupakan tag akhir.
2
Name Value
Atribut
Content
Tag Pembuka Tag Penutup
Element
• Tag html tidak case
sensitive. Ini artinya <b> sama dengan <B>
• Jika dalam suatu
tag terdapat tag lain, maka penulisan tag akhir tidak boleh
bersilang dan harus
berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
4. Tag Dasar HTML
4.1
HTML
Merupakan tag dasar
yang mendifinisikan bahwa dokumen adalah dokumen html. Tag ini
merupakan suatu
keharusan bagi pemrogram web untuk menuliskannya sebagai tag
pertama dalam dokumen
html. Penulisan tag seperti berikut ini :
<html>
pada awal dokumen dan </html> pada akhir dokumen
4.2
Head
Bagian Head
sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head
yang benar akan
meningkatkan kegunaan suatu dokumen HTML. Isi bagian head –
kecuali judul dokumen
– tidak akan terlihat oleh pembaca dokumen tersebut. Penulisan
tag seperti berikut
ini :
<head>
di awal setelah <html> dan </head> di
akhir section head.
Elemen-elemen pada
bagian head akan mengerjakan tugas-tugas sebagai berikut :
• Menyediakan judul
dokumen
• Menjembatani
hubungan antar dokumen
• Memberitahu browser
untuk membuat form pencarian
• Menyediakan metode
untuk mengirim pesan ke tipe browser
Elemen yang mungkin
terdapat pada bagian head :
• Tag <title>,
digunakan untuk memberi judul dokumen. Penggunaannya adalah
sebagai berikut :
<title>Judul
Dokumen</title>
• Tag <base>,
digunakan untuk menentukan basis URL sebuah dokumen. Contoh
penggunaannya adalah
sebagai berikut berikut :
<base
href="//www.alamat.com/direktori" />
3
• Tag <link>,
digunakan untuk menunjukkan relasi antar dokumen HTML.
Tag ini mempunyai
beberapa atribut :
Atribut
Fungsi
href Menunjuk pada
URL / dokumen lain
rel Mendefinisikan
relasi terhadap sebuah dokumendan dokumen lain
yang berisi informasi
tentang personil yang member kontribusi
terhadap dokumen
tersebut
rev Mendefinisikan
relasi sebuah dokumen HTML dengan dokumen lain
type Menentukan tipe
dan paramenter dari relasi
Contoh penggunaannya
adalah sebagai berikut:
<link
rel="stylesheet" href="http://alamat.com/style.css"
type="text/css" />
• Tag <meta>,
digunakan untuk mendefinisikan informasi-informasi di luar HTML
Informasi meta dapat
digunakan oleh browser untuk menjalankan suatu aktivitas
yang belum didukung
oleh HTML.
Tag <meta> mempunyai
atribut :
Atribut
Fungsi
http-equiv
Mendefinisikan properti dari elemen
name Menyediakan
deskripsi tambahan dari elemen
url Mendefinisikan
target dokumen dari sebuah properti
content Menyediakan
nilai respon dari properti
Untuk lebih
memperjelas penggunaan atribut tag <META> perhatikan contoh
berikut ini :
Perintah diatas akan
diterjemahkan oleh browser sebagai “tunggu 60 detik,
kemudian panggil
dokumen baru pada www.alamat.com". Jika atribut URL tidak
disertakan, maka
halaman itu sendiri yang akan dipanggil, jadi setara dengan
mengklik tombol
Refresh / Reload pada browser.
Penggunaan elemen <meta>
yang paling populer adalah penggunaan properti
Keyword dan
Description. Kedua properti ini sangat berguna untuk membantu kerja
search engine.
Biasanya search engine akan menggunakan teks yang disebutkan
4
<meta
http-equiv="refresh" content="60"
url="www.alamat.com" />
pada properti Keyword
untuk mengindeks dokumen dan menggunakan teks yang
terdapat pada
properti Description untuk mendeskripsikan indeks tersebut.
4.3
BODY
Bagian BODY merupakan
isi dari dokumen HTML. Semua informasi yang akan
ditampilkan, mulai
dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti telah
disebutkan di atas, bagian BODY diawali oleh tag <body> dan
ditutup
</body>.
Atributnya:
Atribut
Fungsi
alink Menunjukkan
warna link aktif
background Merujuk
URL atau direktori dari gambar yang digunakan sebagai
latar belakang
bgcolor Menentukan
warna latar belakang
bgproperties Jika
nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut
tergulung
leftmargin Batas kiri
dokumen
link Menentukan warna
link yang belum dikunjungi
text Menentukan warna
teks
topmargin Menentukan
batas atas
vlink Menentukan
warna link yang telah dikunjungi
01.latihan_01.html
<html>
<head>
<title>Penggunaan
BODY</title>
</head>
<body
bgcolor="silver" text="blue"
vlink="#ff0000" link="green">
Ini adalah contoh
penggunaan body.
Dan ini adalah sebuah
<a href="">link</a>.
</body>
</html>
5
Warna
Nilai
Black #000000
Maroon #800000
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #c0c0c0
Red #ff0000
Lime #00ff00
Yellow #ffff00
Blue #0000ff
Fuchsia #ff00ff
Aqua #00ffff
White #ffffff
Table Warna
6
Title
Body
4.4
Memberikan Komentar
Untuk mempermudah
pembacaan kembali kode-kode HTML, kadang-kadang
ditambahkan komentar
ke dalam sebuah dokumen. Agar komentar tidak dapat dibaca
pada browser, maka
harus digunakan tanda khusus, yaitu <!-- dan diakhiri dengan tanda
-->.
01.latihan_0 2 .htm l
<html>
<head>
<title>Penggunaan
Komentar</title>
</head>
<body>
<!--
ini merupakan suatu komentar -->
Selamat belajar html<br>.
Semoga sukses!
</body>
</html>
4.5
Memformat Dokumen HTML
Dalam HTML terdapat
beberapa tag yang dapat digunakan untuk memformat dokumen.
Tag-tag tersebut
diantaranya adalah :
• Tag <h#>,
membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.
01.latihan_0 3 .htm l
<html>
<head>
<title>Latihan
Heading</title>
</head>
<body>
<h1>Ini
Heading 1</h1>
<h2>Ini
Heading 2</h2>
<h3>Ini
Heading 3</h3>
<h4>Ini
Heading 4</h4>
<h5>Ini
Heading 5</h5>
<h6>Ini
Heading 6</h6>
</body>
</html>
• Tag <br />,
membuat baris baru, tidak memerlukan penutup </br>
• Tag <p>,
memulai paragaraf baru.
• Tag <hr
/>, membuat garis batas horizontal, tidak memerlukan penutup </hr>
7
01.latihan_0 4 .htm l
<html>
<head>
<title>Cerita
Ramayana</title>
</head>
<body>
Cerita wayang
Ramayana, di Kerajaan Alengka Diraja
<br>Rahwana
membuat geger karena menculik Dewi Sinta
<p>Anoman,
Si Kera Putih
ditugaskan Tukul
Arwana untuk menjemput Sinta
</p>
Tukul Arwana tidak
sempat menjeputnya, karena sedang
mengisi acara di
stasiun TV Swasta
<hr
/>
Rama Tukul Arwana
<hr
/>
<br
/>
<h1>Bab
I HTML</h1>
Ini adalah isi Bab I
<h2>1.1
Subbab HTML</h2>
Ini adalah isi Subbab
1.1
<h3>1.1.1
Sub-Subbab HTML</h3>
Ini adalah isi Sub
Subbab 1.1.1
</body>
</html>
8
• Tag <pre>,
membuat tampilan dokumen HTML pada browser sama dengan
tampilan pada teks
editor. Dengan tag <pre>, maka tag <p> dan tag <br
/> jadi
tidak diperlukan
lagi.
01.latihan_0 5 .htm l
<html>
<head>
<title>Latihan
PRE</title>
</head>
<body>
<pre>
Tampilan ini sma
dengan tampilan di teks editor.
Klasemen
Team Main Menang Seri
Kalah
=================================================
Team A 3 2 1 0
Team B 3 2 0 1
Team c 3 1 1 1
=================================================
Kode program :
For I = 1 to 10
For J = 1 to 5
A(I,J)=I*J
Next
Next
</pre>
</body>
</html>
9
• Tag <center>,
Teks rata tengah
• Tag <ul> dan
<ol>
Pemformat dokumenlain
yang akan sangat banyak berguna adalah LIST (daftar).
Ada dua macam daftar,
yaitu ORDERED lists (ol) dan UNORDERED lists (ul).
01.latihan_0 6 .htm l
<html>
<head>
<title>Latihan
LIST</title>
</head>
<body>
<p>Keluarga
Pandawa</p>
<ol>
<li>Yudhistira</li>
<li>Bima</li>
<li>Arjuna</li>
<li>Nakula</li>
<li>Sadewa</li>
</ol>
<p>Jenis
Musik</p>
<ul>
<li>Campur
Sari</li>
<li>Dangdut</li>
<li>Jazz</li>
<li>Pop</li>
<li>Rock</li>
</ul>
</body>
</html>
10
4.6
Memformat Karakter
Melakukan format
terhadap karakter yang ditampilkan akan sangat berguna untuk
membuat sebuah
dokumen menjadi menarik dan informatif.
4.6.1
Logical Format
Logical format akan
menerapkan layout dokumen secara logis dan terstruktur. Semua tag
ini memerlukan tag
penutup. Tag-tag yang termasuk logical format adalah sebagai
berikut :
• <cite>,
digunakan untuk menandai suatu kutipan (citation).
• <code>,
digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa
C.
• <em>,
digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh
penulis.
• <kbd>,
digunakan untuk menandai suatu teks yang harus dimasukkan oleh user
melalui keyboard.
• <samp>,
digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
• <strong>,
digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu
teks.
• <var>,
digunakan untuk menampilkan nama variabel.
• <dfn>,
digunakan untuk menandai sebuah subdefinisidari daftar definisi.
4.6.2
Physical Format
Physical format
adalah format terhadap fisik suatu font. Semua tag ini memerlukan tag
penutup. Tag-tag yang
termasuk physical format adalah sebagai berikut :
• <b>,
untuk menampilkan huruf tebal.
• <i>,
untuk menampilkan huruf miring.
• <u>,
untuk menampilkan garis bawah pada teks. <tt>, untuk menampilkan
huruf
seperti huruf mesin
ketik.
• <strike>,
untuk menampilkan garis horizontal pada bagian tengah huruf.
• <big>,
untuk menampilkan ukuran huruf yang lebih besar.
• <small>,
untuk menampilkan ukuran huruf yang lebih kecil.
• <sub>,
untuk menampilkan subscript.
• <sup>,
untuk menampilkan superscript.
11
01.latihan_0 7 .htm l
<html>
<head>
<title>Memformat
Karakter</title>
</head>
<body>
<b>Kalimat
ini akan dicetak tebal</b><br>
<i>Kalimat
ini akan dicetak miring</i><br>
<u>Kalimat
ini akan bergaris bawah</u><br>
<strike>Kalimat
ini akan bergaris tengah</strike>
</body>
</html>
4.6.3
Tag Font
Tag font digunakan
untuk mengatur jenis, ukuran dan warna font. Contoh penggunaannya:
01.latihan_0 8 .htm l
<html>
<head>
<title>Memformat
FONT</title>
</head>
<body>
<font
face="arial" size="3"
color="#ff0000">
Jenis font ini adalah
Arial, berwarna merah, ukurannya 3
</font>
<br
/>
<font
face="times new roman" size="6"
color="blue">
Jenis font ini adalah
Times New Roman, berwarna biru, ukurannya 6
</font>
</body>
</html>
12
4.7
Menambahkan Gambar
Dokumen HTML akan
terlihat lebih menarik apabila disisipkan gambar. Format gambar
yang dapat
ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll. Sedangkan format gambar
yang dikenal oleh
hampir semua browser adalah GIF dan JPEG. Untuk menambah
gambar digunakan tag <img
/>.
Tag <img /> mempunyai
atribut :
Atribut
Fungsi
src Merujuk kepada
URL atau direktori lokasi gambar
align Posisi text
disekitar gambar, nilainya adalah top, middle, bottom,
left,
right
width Lebar gambar
dalam satuan pixel
height Tinggi gambar
dalam satuan pixel
alt Menampilkan text
pengganti jika gambar tidak tampil
01.latihan_0 9 .htm l
<html>
<head>
<title>Menambahkan
Gambar</title>
</head>
<body>
<img
src="bubbles.jpg" alt="gambar
gelembung" align="middle" />
Gambar ini terdapat
pada windows 98 secara default, anda boleh
menggantinya.
</body>
</html>
13
4.8
Menambahkan Link
Link merupakan suatu
gambar atau teks yang terkait dengan suatu alamat tertentu. Jika
Link diklik maka
dokumen HTML akan menuju ke alamat tersebut. Ditandai dengan
Anchor, yaitu tag <a>.
Tag <a> mempunyai atribut HREF yang digunakan sebagai link
tujuan.
01.latihan_ 1 0.htm l
<html>
<head>
<title>Menggunakan
Link</title>
</head>
<body>
<a
href="http://www.yahoo.com">Klik
disini</a> untuk menuju situs
Yahoo.com.<br
/>
Atau dapat juga
mengklik gambar ini :
<a
href="http://www.yahoo.com">
<img
src="bubbles.jpg" alt="gambar
gelembung" align="middle" />
</a>
</body>
</html>
4.9
Tabel
HTML menyediakan
tag-tag untuk membuat sebuah tabel, yaitu:
• Tag <table> :
Mendefinisikan sebuah tebel
• Tag <tr> :
Mendefinisikan baris tabel
• Tag <th> :
Mendefinisikan judul kolom
• Tag <td> :
Mendefinisikan isi tiap kolom
01.latihan_ 1 1 .htm
l
<html>
<head>
<title>HTML
Tabel</title>
</head>
<body>
<table
border="1">
<tr>
<th>Kolom
1</th>
<th>Kolom
2</th>
<th>Kolom
3</th>
</tr>
<tr>
<td>Baris
1 kolom 1</td>
<td>Baris
1 kolom 2</td>
<td>Baris
1 kolom 3</td>
</tr>
<tr>
14
<td>Baris
2 kolom 1</td>
<td>Baris
2 kolom 2</td>
<td>Baris
2 kolom 3</td>
</tr>
</table>
</body>
</html>
