LANGKAH
– LANGKAH MEMBUAT HALAMAN WEBSITE SEDERHANA DENGAN DREAMWEAVER
1. Buka aplikasi dreamweaver lalu pilih HTML pada Create New, atau buka File,
New, BlankPage, HTML.
2. Isikan background yang kosong dengan gambar atau
pilih dengan warna pada tombol Page
Properties yang ada dibawah.
3. Kemudian Ketikkan dahulu isi biodata di atas
halaman yang sedang dikerjakan.
4. Untuk memainkan style font yang telah dibuat,
cukup dengan drag font yang diinginkan, lalu klik kanan, untuk posisi pilih align, untuk jenis font pilih font, untuk style (bold, italic, underline dll).
5. Lalu tambahkan koding style="font-size:36px" pada font yang ingin diperbesar
ukurannya.
6. Tambahkan AP
DIV pada insert, Layout Objects, AP DIV untuk menempatkan gambar.
7. Letakkan kursor di dalam kotak AP DIV yang berwarna biru, kemudian klik
insert, image lalu pilih gambar yang diinginkan.
8. Kemudian atur gambar dan kotak AP DIV sesuai yang diinginkan.
9. Tambahkan kodingan <marquee> …….. </marquee> pada kata biodata, agar kata
dapat bergerak.
10. Jalankan dengan F12 dan sekaligus menyimpan data tersebut, dan web sudah jadi.
CODE
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color:
#9C9;
}
#apDiv1 {
position:
absolute;
width:
345px;
height:
287px;
z-index:
1;
left:
384px;
top:
108px;
}
</style>
</head>
<body>
<p align="center"
style="font-size:36px"><strong><marquee>BIODATA</marquee></strong></p>
<p><strong>Nama: Ryan
Naufal</strong></p>
<p><strong>Tempat Tanggal Lahir:
Jakarta, 9 Oktober 1993</strong></p>
<p><strong>Alamat: Depok</strong></p>
<p><strong>Jenis Kelamin: Laki
Laki</strong></p>
<p><strong>Agama:
Islam</strong></p>
<p><strong>Status Perkawinan:
Bujangan</strong></p>
<p><strong>Pekerjaan: Seniman
</strong>
<p><strong>Kewarganegaraan:
Indonesia</strong>
<div id="apDiv1"><img
src="poto.jpg" width="344" height="285"
/></div>
</body>
</html>
Tag pertama pada
dokumen HTML diatas adalah: " <html>" tag ini merupakan awal
dari suatu dokumen HTML, dan tag " </html>" merupakan akhir
dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada
diantara tag <html>…</html>.
Kemudian tag "
<head>…</head>" (header) adalah informasi dari dokumen HTML.
Informasi di dalam header meliputi: title, meta, style, script dll. Selain
Title informasi di dalam header ini nantinya tidak akan di tampilkan di web
browser.
Tag berikutnya adalah
" <title>…</title>" merupakan bagian dari Head, tag ini
adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab
browser.
Tag
"<body>…</body>" merupakan isi dari suatu dokumen HTML
yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format
file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
Untuk membuat suatu paragraf, tag elemennya adalah
<p>…</p>
<strong> = Huruf
menjadi tebal (mirip Bold)
<align=....> =
Untuk mengatur letak tulisan. Klo kanan, right. Tengah, center dst. Klo mau
ngatur letak judul, tulis awalan div. Jadinya <div align=...>
AP Div adalah singkatan
DIV mutlak-posisi; item dengan posisi absolut adalah tetap di lokasi tertentu
pada halaman. Ketika Anda menggambar sebuah AP Div, posisinya biasanya diatur
dengan menggunakan properti CSS atas dan kiri, dengan sudut kiri atas halaman
sebagai titik referensi.
