Anda di halaman 1dari 23

Sumber : Core WebProgramming

Pengarang : Marty Hall Larry Brown


Slide : Riyanto Sigit
Desain WEB
Desain WEB
Materi
1. Internet dan WWW
2. PengenaIan HTML
3. Browser dan Editor
4. Tag-tag HTML
5. Kode Warna
6. Heading, Paragraph dan Break
7. Pemformatan Karakter
8. Listing
9. MenempeIkan Image
10. Membuat Link
11. Membuat TabIe
nternet dan WWW WWW WWW WWW
nternet merupakan jaringan global yang
menghubungkan suatu network dengan network
lainya di seluruh dunia, TCP/P 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 karena kemampuan grafiknya.
Dan HTML merupakan program yang dipakai untuk
membuat document WWW yang bisa di akses
melalui web.
Pengenalan Pengenalan Pengenalan Pengenalan HTML HTML HTML HTML
Hypertext Markup Language merupakan standard
bahasa yang digunakan untuk menampilkan
document web, yang bisa dipakai untuk :
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa di
akses
Membuat online form yang bisa di gunakan untuk
menangani pendaftaran, transaksi secara online.
Menambahkan object-object seperti image, audio, video
dan juga java applet dalam document HTML
Browser Browser Browser Browser dan dan dan dan Editor Editor Editor Editor
Browser merupakan software yang di install di
mesin client yang berfungsi untuk menterjemahkan
tag-tag HTML menjadi halaman web. Browser yang
sering di gunakan biasanya nternet Explorer,
Netscape Navigator dan masih banyak yang lainya.
Editor merupakan Program yang di gunakan untuk
membuat document HTML, ada banyak HTML
editor yang bisa anda gunakan diantaranya: Ms
FrontPage, Dreamweaver, Notepad.
Tag Tag Tag Tag- -- -tag HTML tag HTML tag HTML tag HTML
Command HTML biasanya disebut
TAG, TAG digunakan untuk
menentukan tampilan dari document
HTML.
Setiap document HTML di awali dan di
akhiri dengan tag HTML
Tag Tag Tag Tag- -- -tag HTML tag HTML tag HTML tag HTML
HTML~
HEAD~
TITLE~ berisi text yang akan muncul pada title bar browser
/TITLE~
/HEAD~
BODY~
berisi tentang text, gambar, atau apapun yang ingin ditampilkan
/BODY~
/HTML~
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html>
keduanya menghasilkan output yang sama.
Tag Tag Tag Tag- -- -tag HTML tag HTML tag HTML tag HTML
Dalam tag HTML di dalamnya kita bisa
memberikan element dan atribut yang
melekat di dalamnya. Sintaxnya adalah
sbb :
<ELEMENT ATTRBUTE = value>
Element - nama tag
Attribute - atribut dari tag
Value - nilai dari atribut.
Program 1
HTML~
HEAD~
TITLE~ text title /TITLE~
/HEAD~
BODY~
BODY BGCOLORlavender~
/BODY~
/HTML~
BODY merupakan element, BGCOLOR(Background) merupakan atribut yang
memiliki nilai lavender, yang artinya body html kita warna backgroundnya kita
beri warna lavender.
Untuk memulai bekerja dengan HTML anda bisa gunakan editor NotePad
atau editor lainya. Caranya:
1. Ketikkan teks yang ada dalam box tersebut di notepad.
2. Simpan dengan nama file satu.htm atau satu.html
3. Buka dengan browser internet explorer atau yang lain file satu.htm
Kode Kode Kode Kode Warna Warna Warna Warna
Pengaturan warna di halaman HTML menggunakan
mode kombinasi RGB. Yang mana setiap warna
ditampilkan dalam dua digit nilai
heksadesimal(0,1,2..F). Setiap bagian dua digit
menunjukkan intensitas dari kombinasi warna
merah, hijau dan biru. Sebagai contoh 00 pada dua
digit pertama berarti tidak ada warna merah dalam
kombinasi warna ,dst.
Color merupakan attribute yang bisa anda
tambahkan pada beberapa element seperti body,
background, bgcolor, text, link, vlink, alink, font dan
lainya.
Tabel warna
Heading, Paragraph dan
Break
Tag Heading <hx> digunakan untuk memformat heading (judul
dan sub judul) dari suatu halaman web. Heading ini akan
memperbesar ukuran huruf untuk setiap jenis heading. Ada
enam buah heading yang dikenal di HTML, yaitu <h1>
</h1>sampai <h6></h6>.
Tag paragraph <p> </p> berfungsi layaknya untuk pengaturan
antar paragraph dalam halaman web anda. Dalam elemen
paragraph terdapat atribut align=[left|center|right] yang
berfungsi pengaturan perataan paragraph.
Tag Break <br> berfungsi untuk memberikan baris baru suatu
paragraph dalam halaman web anda. Tag break ini tidak
memerlukan tag penutup break.
Tag Horizontal ruler <hr> berfungsi untuk menampilkan garis
horisontal tiga dimensi di dalam halaman web. Tag ini juga tidak
memerlukan penutup.
Program 2
HTML~
HEAD~
TITLE~ paragrap, break dan hr /TITLE~
/HEAD~
BODY BGCOLOR#990066 text#FFCCFF ~
h1~TOKO BUKU SERBA MURAH/h1~
hr width50 alignleIt~
h2~Toko kami menyediakan/h2~
h3~Alat Tulis/h3~
p~ Pensil br~ballpointbr~penggarisbr~dll/p~
h3~Buku buku Pelajaran/h3~
p~ Ilmu Pasti br~Ilmu Bumibr~Sejarahbr~dll/p~
h3~Alat Kantor/h3~
p~Meja br~Kursibr~File Managementbr~dll/p~
/BODY~
/HTML~
Pemformatan Pemformatan Pemformatan Pemformatan Karakter Karakter Karakter Karakter
Karakter/kalimat pada halaman HTML bisa diformat
sesuai design yang kita butuhkan, baik ukuran ,
jenis maupun warna dengan menggunakan tag
<font> </font>.
Atribut elemen font sbb :
Size=angka (ukuran huruf, default 3)
color=warna(warna huruf, default black)
face=jenis huruf (default Times New Roman)
Elemen ragam karakter :
<b> teks disini </b> menghasilkan huruf tebal
<i> teks disini </i> menghasilkan huruf miring
<u>teks disini</u> menghasilkan huruf bergaris bawah
Program 3
HTML~
HEAD~
TITLE~ Iormat karakter/TITLE~
/HEAD~
BODY BGCOLOR#000000 text#FFFFFF ~
h1 align center~Iont color#FFFF00 IaceArial~TOKO BUKU
SERBA MURAH/Iont~/h1~
hr width360 aligncenter~
h2~Toko kami menyediakan/h2~
h3~Iont colorred~Alat Tulis/Iont~/h3~
p aligncenter~ Pensil br~ballpointbr~penggarisbr~dll/p~
h3 Iont colorred~Buku buku Pelajaran/h3~
p alignright~ Ilmu Pasti br~Ilmu Bumibr~Sejarahbr~dll/p~
h3~Alat Kantor/h3~
p alignleIt~Meja br~Kursibr~File Managementbr~dll/p~
/BODY~
/HTML~
Listing Listing Listing Listing
Properti <li> digunakan untuk menampilkan
informasi dalam bentuk daftar/list. Ada dua
jenis daftar yang dikenal di HTML, yaitu :
<ul> daftar dalam format bullet/unordered list
type=[disc|square|circle|] default disc
<ol> daftar dalma format ordered list
type=[1|a|A|i|] default 1
Program 4
html~
head~
title~Ordered List/title~
/head~
body~
P~Shedule Ior HTML Course/P~
ol start"1" type"I"~
li~Sunday/li~
ol type"a"~
li~Introduction to HTML/li~
li~Creating List/li~
/ol~
li~Monday/li~
ol type"A"~
li~Creating table/li~
li~Inserting Image/li~
/ol~
li~Tuesday/li~
ol type"I"~
li~Creating Link/li~
li~Preparing Website/li~
/ol~
li~Wednesday/li~
/body~
/html~
Menempelkan Menempelkan Menempelkan Menempelkan mage mage mage mage
Kita dapat menempelkan gambar dalam html dengan
format file JPG atau GF. Untuk menampilkannya
digunakan tag MG :
<MG SRC=namafilegambar>
atribut elemen gambar :
SRC = lokasi dan nama gambar
Alt = teks (teks alternatif)
Width = lebar gambar dalam pixel
Height = tinggi gambar dalm pixel
Align =[top|middle|bottom|left|right] perataan gambar
Border = pixel (tebal garis tepi gambar)
Membuat Membuat Membuat Membuat Link Link Link Link
Elemen link berfungsi sebagai penghubung antara
suatu halaman dengan halaman yang lain, atau ke
URL lain, bahkan dalam satu halaman berpindah ke
sub judul yang lain. Format tag link adalah sbb :
<a href = URL_tujuan>hypertext</a>
URL_tujuan bernilai lokasi dan nama file yang akan
dituju
Hypertext nilainya akan ditampilkan dibrowser sbg
text link atau tombol penghubung.
Membuat Membuat Membuat Membuat Table Table Table Table
Tag <table> </table>digunakan untuk membuat table dalam
document HTML. Elemen tabel berisi property :
<tr> . </tr> untuk menentukan baris (table row)
<td> .. </td> untuk menampilkan data pada sel tabel (table
data)
Sedangkan atribut elemen tabel adalah :
Width = dalam satuan panjang (dipakai untuk lebar table ukuran bisa
dalam pixel atau persen)
Height = dalam satuan panjang (dipakai untuk tinggi tabel, ukuran bbisa
dalam pixel atau persen)
Border = dalam satuan pixel (dipakai tebal garis tepi)
CeIIspacing = dalam satuan pixel (dipakai untuk spasi antar sel)
CeIIpading = dalam satuan pixel (dipakai untuk spasi di dalam sel)
AIign = [left|center|right] (dipakai untuk perataan tabel)
BgcoIor = dalam satuan warna/hexadesimal (dipakai untuk warna latar
belakang tabel)
Membuat Membuat Membuat Membuat Table Table Table Table
Atribut table row :
AIign = [left|center|right] (dipakai untuk perataan dalam satu baris sel secara
horizontal)
VaIign = [top|middle|bottom] (dipakai untuk perataan dalam satu baris sel secara
vertikal)
BgcoIor = dalam satuan warna/hexadesimal (dipakai untuk warna latar belakang
baris)
Atribut tabel data :
Rowspan = penggabungan baris
CoIspan = penggabungan kolom
AIign = [left|center|right] (dipakai untuk perataan sel secara horisontal)
VaIign = [top|middle|bottom] (dipakai untuk perataan sel secara vertikal)
Width = dalam satuan panjang (dipakai untuk lebar sel ukuran bisa dalam pixel atau
persen)
Height = dalam satuan panjang (dipakai untuk tinggi sel, ukuran bbisa dalam pixel
atau persen)
BgcoIor = dalam satuan warna/hexadesimal (dipakai untuk warna latar belakang sel)
Program 5
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table bgcolor=CCCCFF width="62%" border="1"
cellpadding="0">
<tr>
<td colspan="3" align="center">Quarter 1</td>
<td colspan="3" align="center">Quarter 2</td>
</tr>
<tr align="center">
<td>Jan</td>
<td>Feb</td>
<td>Mar</td>
<td>Apr</td>
<td>May</td>
<td>Jun</td>
</tr>
<tr>
<td>100</td>
<td>5000</td>
<td>200</td>
<td>1500</td>
<td>2500</td>
<td>1750</td>
</tr>
<tr>
<td>290</td>
<td>5050</td>
<td>2300</td>
<td>100</td>
<td>270</td>
<td>300</td>
</tr>
</table>
</body>
</html>
Tugas
Membuat Halaman Web untuk Jurusan
Teknik nformatika
Membuat Halaman Web untuk
Program Studi Teknik Komputer