Kamis, 26 Maret 2015

HALAMAN WEBSITE

LANGKAH – LANGKAH MEMBUAT HALAMAN WEBSITE SEDERHANA DENGAN DREAMWEAVER

1. Buka aplikasi dreamweaver lalu pilih HTML pada Create New, atau buka File, New, BlankPage, HTML.
1.jpg
2. Isikan background yang kosong dengan gambar atau pilih dengan warna pada tombol Page Properties yang ada dibawah.
2.jpg
3. Kemudian Ketikkan dahulu isi biodata di atas halaman yang sedang dikerjakan.
3.jpg
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).
4.jpg7.jpg
5. Lalu tambahkan koding style="font-size:36px" pada font yang ingin diperbesar ukurannya.
5.jpg6.jpg
6. Tambahkan AP DIV pada insert, Layout Objects, AP DIV untuk menempatkan gambar.
9.jpg
7. Letakkan kursor di dalam kotak AP DIV yang berwarna biru, kemudian klik insert, image lalu pilih gambar yang diinginkan.
10.jpg
8. Kemudian atur gambar dan kotak AP DIV sesuai yang diinginkan.
11.jpg
9. Tambahkan kodingan <marquee> …….. </marquee> pada kata biodata, agar kata dapat bergerak.
13.jpg 
10. Jalankan dengan F12 dan sekaligus menyimpan data tersebut, dan web sudah jadi.
12.jpg





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.

Tidak ada komentar:

Posting Komentar