Pertemuan 2,3 Web

Pertemuan Ke 2
Design Web
Instructure
Bayu Setyawan S.Kom
NEXT
Nama : Bayu Setyawan S.kom
Alamat : Perumahan Pesona Residence F-12a Mojosari-mojokerto
No.telp: 083856635851
Email : sibayu87@gmail.com
Pengenalan adobe dreamweaver
Merancang sebuah website tidak terlepas dari pembuatan

desain tampilan web tersebut, karena desain web merupakan
langkah awal dari pembuatan website. Dasar pembuatan website
menggunakan bahasa HTML (HyperText Markup Language) yaitu
bahasa pemrograman dalam pembuatan web. Penggunaan HTML
dalam pembuatan web tidak semua orang dapat menggunakannya
untuk mempermudah dalam pembuatan web ini kita dapat
menggunakan aplikasi editor web yang bersifat visual.
Salah satu aplikasi untuk melakukan perancangan desain

web secara visual adalah Adobe Dreamweaver. Aplikasi ini secara
umum sudah sangat poluler digunakan untuk merancang desain
website. Aplikasi Adobe Dreamweaver menyediakan banyak fasilitas
yang dapat memudahkan user dalam menghasilkan sebuah website
yang interaktif dan menarik
BACK NEXT
Objectives
Setelah menyelesaikan bab ini,
anda diharapkan dapat:
 Memahami konstruksi dasar halaman web.
 Mengerti tentang WWW
 Mengerti tag-tag dasar HTML
 Membuat halaman web dengan HTML
sederhana.
4
World Wide Web (WWW)
 Internet merupakan jaringan global yang
menghubungkan suatu network dengan
network lainya di seluruh dunia.
 TCP/IP menjadi protocol penghubung
antara jaringan-jaringan yang beragam di
seluruh dunia untuk dapat berkomunikasi.
 World Wide Web (WWW) merupakan
bagian dari internet yang paling cepat
berkembang dan paling populer.
5
WWW - continued
 WWW bekerja merdasarkan pada tiga
mekanisme berikut:
• Protocol standard aturan yang di gunakan
untuk berkomunikasi pada computer
networking, Hypertext Transfer Protocol
(HTTP) adalah protocol untuk WWW.
• Address WWW memiliki aturan penamaan
alamat web yaitu: URL(Uniform Resource
Locator) yang di gunakan sebagai standard
alamat internet.
• HTML digunakan untuk membuat document
yang bisa di akses melalui web.
 http://www.detik.com/index.html
6
Dasar Tag HTML
 HTML Template
<html>
<head>
<title></title>
</head>
<body> </body>
</html>
NEXT
Dasar Tag HTML
Table
Salah satu cara yang paling kompak dan paling mudah dibaca dalam menampilkan
item informasi adalah dengan tabel.
Manfaat Tabel:
 Tabel dapat digunakan untuk menampilkan teks, link, grafik atau item lainnya yang
dapat dikirimkan ke tempat lain manapun melalui halaman web.
 Tabel dapat digunakan untuk menyajikan informasi, atau bahkan dapat diperkuat
dengan batas, warna, dan grafik sedemikian rupa, sehingga tabel itu sendiri menjadi
item – item dekorasi.
NEXT
Dasar Tag HTML
Table
<table>
<tr>
<td>Columns Item</td>
</tr>
<tr>
</tr>
</table>
Tabel dibentuk dari kiri atas, dan melintasi kolom - kolomnya. Setiap item
diapit dengan tag <td></td>, dan setiap baris diapit dengan tag
<tr></tr>.
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
<title>Latihan 17</title>
</head>
<body>
<table>
<tr>
<td>Earth</td>
<td>Air</td>
</tr>
<tr>
<td>Fire</td>
<td>Water</td>
</tr>
</table>
</body>
</html>
BACK NEXT
Dasar Tag HTML
Table
Table Properties:
 BORDER = akan memberikan garis pembatas pada tabel.
 CELLSPACING = akan menset jarak dalam piksel antara batas dalam dan batas
luar.
 CELLPADDING= akan menset jarak dalam piksel antara batas dalam dan teksnya.
 ALIGN = penjajaran rata kanan, kiri atau tengah.
 BGCOLOR = akan memberikan efek warna pada tabel.
 ROWSPAN = untuk menset jumlah baris ke bawah.
 COLSPAN = untuk menset jumlah kolom ke kanan.
 WIDTH = untuk menset batas lebar / panjang tabel.
 HEIGHT = untuk menset batas tinggi tabel.
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3>
<tr>
<td align=center>NIM</td>
<td align=center>NAMA LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
BACK NEXT
Dasar Tag HTML
Table
(kolom bewarna)
<html>
<head>
</head>
<body>
<table border=1 cellpadding=3 cellspacing=3>
<tr bgcolor=silver>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3 align=center>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3
align=center>
<tr bgcolor=silver>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
BACK NEXT
Dasar Tag HTML
Table
<html>
<head>
</head>
<body>
<h3 align=center>Daftar Nama Siswa</h3>
<table border=1 cellpadding=3 cellspacing=3
align=center>
<tr bgcolor=silver>
<td align=center colspan=2>
NIM & NAMA LENGKAP
</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table></body></html>
BACK NEXT
Dasar Tag HTML
 Soal (8)
Tuliskan Source Code dari tampilan berikut:
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (9)
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (10)
VIEW
BACK NEXT
Dasar Tag HTML
 Images
Tag HTML untuk memasukkan gambar:

<img src=filename>
Catatan: img src=image source
BACK NEXT
Dasar Tag HTML
 Images
Images Properties:
 HSPACE = memberikan spasi di kanan dan di kiri gambar.
 VSPACE = memberikan spasi di atas dan di bawah gambar.
 WIDTH = untuk menset batas lebar / panjang gambar.
 HEIGHT = untuk menset tinggi gambar.
 BORDER = memberikan garis batas yang mengelilingi gambar.
BACK NEXT
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<img src=test.gif
width=400 height=300>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<h2 align=center>Images Center</h2>
<center>
<img src= test.jpg
width=400 height=300>
</center>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Images
<html>
<head>
</head>
<body>
<h2 align=center>Images Border</h2>
<center>
<img src= test2.jpg
width=400 height=300 border=1>
</center>
</body>
</html>
BACK NEXT
Dasar Tag HTML
 Images & Body Background
<html>
<head>
</head>
<body background=bg.gif>
</body>
</html>
VIEW
BACK NEXT
Dasar Tag HTML
 Images & Table
<html>
<head>
</head>
<body>
<table border=1 cellpadding=3
cellspacing=3>
<tr align=center>
<td background=bg2.gif>NIM</td>
<td background=bg2.gif>NAMA
LENGKAP</td>
</tr>
<tr>
<td>04102001</td>
<td>Nur Qomari</td>
</tr>
</table>
</body></html>
VIEW
BACK NEXT
Dasar Tag HTML
 Images & Table
<html>
<head>
</head>
<body>
<table border=10 cellspacing=10 cellpadding=10>
<tr>
<td><img src=photo1.jpg width=200 height=200></td>
</tr>
<tr>
<td>Wallpaper1.JPG 800 X 600</td>
</tr>
</table>
</body>
</html>
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (11)
Filename:logo_unnar.gif
Size:250X250
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (12)
Filename:bg2.gif
Size:7X30
VIEW
BACK NEXT
Dasar Tag HTML
 Soal (13)
Filename:photo1.gif
Size:300X400
Filename:photo2.gif
Size:300X400
VIEW
BACK NEXT
Dasar Tag HTML
Link
Tag Link pada HTML:

<a href=url/filename>……..</a>
Catatan:
HREF=Hypertext REFerence
NEXT
Dasar Tag HTML
Link URL
<html>
<head>
</head>
<body>
<a href=http://yahoo.com>Yahoo</a>
<p>
<a href=http://google.com>Google</a>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Link File
<html>
<head>
</head>
<body>
<a href=latihan_27.html>Latihan 27</a>
<p>
<a href=latihan_28.html>Latihan 28</a>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Link E-mail
<a href=mailto:nama_email>Send to E-mail</a>
BACK NEXT
Dasar Tag HTML
Marquee
Marquee = Menampilkan objek dengan memberikan efek

berjalan.
BACK NEXT
Dasar Tag HTML
Marquee
Tag Marquee pada HTML:

<marquee behavior=…>……..</marquee>
BACK NEXT
Dasar Tag HTML
Marquee
Style Maquee:
 ALTERNATE
 SCROLL
 SLIDE
BACK NEXT
Dasar Tag HTML
Marquee
Direction Maquee:
 Down
 Left
 Right
 Up
BACK NEXT
Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate direction=up>Universitas Narotama
Surabaya</marquee>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate width=100>Universitas Narotama
Surabaya</marquee>
</body>
</html>
PREVIEW BACK NEXT

Dasar Tag HTML
Marquee
<html>
<head>
</head>
<body>
<marquee behavior=alternate width=100 scrolldelay=500>
Universitas Narotama Surabaya
</marquee>
</body>
</html>
PREVIEW BACK NEXT

Pertemuan 2,3 Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 2,3 Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan Ke 2

Merancang sebuah website tidak terlepas dari pembuatan

Salah satu aplikasi untuk melakukan perancangan desain

Tag HTML untuk memasukkan gambar:

Catatan: img src=image source

 Images & Body Background

 Images & Table

 Images & Table

Tuliskan Source Code dari tampilan berikut:

Tuliskan Source Code dari tampilan berikut:

Tuliskan Source Code dari tampilan berikut:

Tag Link pada HTML:

PREVIEW BACK NEXT

PREVIEW BACK NEXT

<a href=mailto:nama_email>Send to E-mail</a>

Marquee = Menampilkan objek dengan memberikan efek

Tag Marquee pada HTML:

PREVIEW BACK NEXT

PREVIEW BACK NEXT

PREVIEW BACK NEXT

Anda mungkin juga menyukai