Desain Web 01

MATERI DESAIN WEB
HTML
Script dasar untuk membuat web
XaraWebStyle
Untuk membuat Grafik
SwishMax
Untuk membuat Animasi 2 dimensi
CSS
Script Desain Web lanjutan
JavaScript
Untuk membuat program dinamis dalam web
KONSEP DASAR HTML
HTML
( HyperText Mark up Language )
hypertext adalah kata markup menunjukkan Language menunjukkan

yang dapat menunjukkan bahwa pada file HTML bahwa HTML bukan
hubungan suatu naskah berisi suatu instruksi merupakan bahasa
dokumen dengan naskah- tertentu yang dapat pemrograman, HTML
naskah lainnya memberikan suatu merupakan kumpulan
format pada dokumen dari beberapa instruksi
yang akan ditampilkan yang dapat digunakan
pada World Wide Web untuk mengubah-ubah
format suatu naskah
atau dokumen
FORMAT PENULISAN HTML
<html> <html>
<head> <head>
<title>
Contoh HTML
</head> </title>
contoh </head>
<body> <body>
Belajar Desain Web
</body>
</body> </html>
</html>
PENGATURAN BACKGROUND
<html>
<body bgcolor = ... background = ... >
</body>
</html>
Background warna
Background gambar
PENGATURAN BACKGROUND WARNA
Warna Dasar
Aqua Gray Navy Silver

Black Green Olive Teal
Blue Lime Purple White
Fuchsia Maroon Red Yellow
Contoh:
<html>
<body bgcolor="green">
Belajar Desain Web
</body>
</html>
PENGATURAN BACKGROUND WARNA
Kombinasi Warna
#_ _ _ _ _ _ terang
0 1 2 3 4 5 6 7 8 9 A B C D E F
R G B
gelap
#FFFFFF = putih
contoh
#000000 = hitam
Contoh:
<html>
<body bgcolor="#5A9B55">
Belajar Desain Web
</body>
</html>
PENGATURAN GAMBAR
Syarat : - Ukuran file maksimal 100 Kb
- Lebar : 500 pixel, Tinggi : 400 pixel
Format Gambar : - GIF - Windows Metafiles

- JPG - Sun Raster
- Bitmap - PostScript
- Tiff - PCD
- Targa - PCX
Keterangan GIF JPEG
Dukungan Browser Sangat Bagus Bagus
Jenis Warna 256 16,7 juta
Interlace Image Ya Tidak
Transparent Image Ya Tidak
Animasi Ya Tidak
Jenis Pemadatan Lossless Compression Lossy Compression
Ukuran File Lebih Kecil Lebih Besar
Pemadatan Gambar Logo/Icon Sangat Bagus Kurang
Fotografi Jelek Sangat Bagus
Waktu Menampilkan Lebih Cepat Lebih Lambat
MENAMPILKAN GAMBAR
Format Penulisan:
menampilkan teks pada saat mouse
Mengatur lebar gambar didekatkan pada gambar
< IMG SRC = WIDTH = HEIGHT = ALT = BORDER = >
menampilkan file gambar menampilkan frame pada gambar
Mengatur tinggi gambar
Contoh: <HTML>
<BODY Background=bg-01.jpg>
<IMG SRC=judul-1.Gif" ALT="Contoh File Gambar">
<IMG SRC=judul-2.Gif>
</BODY>
</HTML>
PENGATURAN BARIS DAN PARAGRAPH
Pengaturan baris
Pengaturan paragraph
<HTML> <HTML>
<BODY> <BODY>
Belajar <BR> Desain Web Belajar <P> Desain Web </P>
</BODY> </BODY>
</HTML> </HTML>
PENGATURAN PARAGRAPH
Pengaturan Paragraph : <P ALIGN = > . . . . . </P>
Left Right Center
<HTML>
<BODY>
<P ALIGN="RIGHT"> Belajar Desain Web </P>

<P ALIGN="CENTER"> Belajar Desain Web </P>
<P ALIGN="LEFT"> Belajar Desain Web </P>
</BODY>
</HTML>
PREFORMAT TEKS
Preformat teks digunakan untuk menampilkan teks sesuai dengan yang ditulis
pada editor teks
Contoh 1: Contoh 2:
<HTML> <HTML>
<BODY> <BODY>
<PRE>
Belajar Belajar
Desain Desain
Web Web
</PRE>
</BODY> </BODY>
</HTML> </HTML>
PENGATURAN FONT
Digunakan untuk mengatur jenis huruf,

misal: Arial, Times New Roman, Courier, dll
<FONT SIZE= FACE= COLOR=> .</FONT>
Digunakan untuk mengatur warna font,

misal: Red, Yellow, #00FF00, dll
Digunakan untuk mengatur ukuran font (1,2,3,4,5,6,7)

Contoh:
<HTML>
<BODY>
<FONT COLOR="green" FACE="ARIAL" SIZE="6">
BELAJAR DESAIN WEB
</BODY>
</HTML>
MODIFIKASI FONT
<b> .. </b> Cetak tebal font
<u> .. </u> Garis bawah
<i> .. </i> Cetak miring font
<strike> .. </strike> Garis tengah
<sub> .. </sub> Subscript
<sup> .. </sup> Superscript
<small> .. </small> Font cetak kecil
<big> .. </big> Font cetak besar

CONTOH MODIFIKASI FONT
<html>
<body>
<pre>
<b>Teks Cetak Tebal</b>

<u>Garis Bawah Teks</u>
<i>Teks Cetak Miring</i>
<strike>Teks Coret Tengah</strike>
H<sub>2</sub>O
2<sup>4</sup>
<small>small</small>
<big>big</big>
</pre>
</body>
</html>
MEMBUAT JUDUL (HEADING)
<h1> .. </h1> <h1 ALIGN = .. > .. </h1>

<h2> .. </h2>
<h3> .. </h3>
<h4> .. </h4> left right center
<h5> .. </h5>
<h6> .. </h6>
Contoh: <html>
<body>
<pre>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</pre>
</body>
</html>
NUMBERING (ORDERED LIST)
Format Penulisan: Contoh:
<ol> <html>
<li> ... </li> <body>
<li> ... </li> Daftar Matakuliah:
<li> ... </li> <ol>
<li>Kalkulus</li>
<li>Desain Web</li>
<li>Bahasa Inggris </li>
</ol>
</ol>
</body>
</html>
Format Penulisan:
<ol type=> Type: 1 : 1,2,3,
<li> ... </li> a : a,b,c,d,
<li> ... </li> A : A,B,C,D,.
<li> ... </li> i : i,ii,iii,iv,
I : I,II,III,IV,
</ol>
Contoh: <html>
<body>
Daftar Matakuliah:
<ol type=a>
<li>Kalkulus</li>
<li>Desain Web</li>
</ol>
</body>
</html>
Format Penulisan:
<ol type= start=>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ol>
Contoh: <html>
<body>
Daftar Matakuliah:
<ol type=a start=4>
<li>Kalkulus</li>
<li>Desain Web</li>
</ol>
</body>
</html>
BULLETS (UN-ORDERED LIST)
Format Penulisan: Contoh:
<ul> <html>
<li> ... </li> <body>
<li> ... </li> Daftar Matakuliah:
<li> ... </li> <ul>
<li>Kalkulus</li>
<li>Desain Web</li>
</ul>
</ul>
</body>
</html>
BULLETS (UN-ORDERED LIST)
Format Penulisan:
<ul type=> Type: - Disc
<li> ... </li> - Circle
<li> ... </li> - Square
<li> ... </li>
</ol>
Contoh:
<html>
<body>
Daftar Matakuliah:
<ul type=circle>
<li>Kalkulus</li>
<li>Desain Web</li>
</ul>
</body>
</html>
HYPERLINK
Format Penulisan:
<A HREF = TARGET= > . </A>
Menentukan obyek window

File yang akan dijadikan link yang akan dijadikan link
( _blank, _parent )
CONTOH HYPERLINK
<HTML>
<BODY>
<A HREF="materi-2a.htm">
Klik disini<P>
</A>
<A HREF="materi-2b.htm" TARGET="_blank">

Klik disini<P>
</A>
<A HREF="materi-2c.htm" TARGET="_parent">

<IMG SRC="tombol.gif" BORDER=0><P>
</A>
</BODY>
</HTML>
Matakuliah : Web Desain
Buatlah 5 halaman web desain (5 file .htm) yang berisi informasi atau tema dari
sebuah tabloid on-line, dengan ketentuan sebagai berikut :
Masing-masing bagian berisi background halaman yang berbeda-beda

Masing-masing halaman dapat dibuat link ke halaman yang lain
TABEL
Format Penulisan:
<TABLE BORDER = >

<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
<TR> . </TR> : untuk pindah baris baru

<TD> . </TD> : untuk menampilkan data pada setiap kolom
PENGATURAN UKURAN TABEL
Format Penulisan:
<TABLE WIDTH = HEIGHT = >
<TR>
<TD WIDTH = HEIGHT = > </TD>
</TR>
</TABLE>
PENGATURAN BACKGROUND PADA TABEL
Format Penulisan:
<TABLE BGCOLOR = BACKGROUND = >
<TR>
<TD BGCOLOR = BACKGROUND = > </TD>
</TR>
</TABLE>
PENGATURAN DATA PADA TABEL
Format Penulisan:
<TABLE >
<TR>
<TD ALIGN = VALIGN = > </TD>
</TR>
</TABLE>
Right Top
ALIGN Center VALIGN Middle
Left Bottom
MENGGABUNGKAN KOLOM PADA TABEL
<HTML>
A <BODY>
<TABLE BORDER="1">
<TR>
B C D <TD COLSPAN="3"> A </TD>
</TR>
<TR>
<TD> B </TD>
1 2 3 <TD> C </TD>
<TD> D </TD>
</TR>
A
</TABLE>
</BODY>
B C D </HTML>
MENGGABUNGKAN BARIS PADA TABEL
<HTML>
B <BODY>
<TABLE BORDER="3" >

A C
<TR>
<TD ROWSPAN="3" > A </TD>
D <TD> B </TD>
</TR>
<TR>
<TD> C </TD>
</TR>
1 B <TR>
<TD> D </TD>
</TR>
2 A C
</TABLE>
</BODY>
3 D
</HTML>
CONTOH APLIKASI PEMAKAIAN TABEL
<HTML>
30% <BODY>
<TABLE BORDER=3 WIDTH =90%HEIGHT=90%">

<TR>
<TD COLSPAN=2" HEIGHT="30%"> <BR> </TD>
</TR>
<TR>
<TD WIDTH="25%"> <BR> </TD>
25% <TD > <BR> </TD>
</TR>
30% </TABLE>
</BODY>
</HTML>
25%
TUGAS 1
Buatlah desain web minimal terdiri dari 5 halaman, dengan ketentuan masing-
masing halaman mempunyai isi, background, desain, tabel yang berbeda-beda
satu sama lain. Dan setiap halaman mempunyai tombol yang dapat dibuat link ke
halaman yang lain.
Contoh tampilan desain:
MENU 1
Selamat datang di web
MENU 2 site tabloid on-line yang
telah di launching pada
MENU 3 tanggal ..

MENU 4
..
MENU 5
MENAMPILKAN FRAME
FRAME digunakan untuk membagi window browser menjadi beberapa bagian

window, sehingga dapat menampilkan beberapa file dalam window yang
berbeda-beda
Format Penulisan:
<HTML>
<FRAMESET ROWS= COLS=>
<FRAME NAME= SRC=>
<FRAME NAME= SRC=>
</FRAMESET>
</HTML>
MEMBAGI FRAME MENJADI BARIS
Membagi frame menjadi baris:
<HTML>
<FRAMESET ROWS=>
<FRAME NAME= SRC=>
<FRAME NAME= SRC=>
</FRAMESET>
</HTML>
<HTML>
<FRAMESET ROWS="*,*">
<FRAME NAME="atas" SRC="atas.htm">
<FRAME NAME="bawah" SRC="bawah.htm">
</FRAMESET>
</HTML>
MEMBAGI FRAME MENJADI KOLOM
Membagi frame menjadi kolom:

<HTML>
<FRAMESET COLS=>
<FRAME NAME= SRC=>
<FRAME NAME= SRC=>
</FRAMESET>
</HTML>
<HTML>
<FRAMESET COLS="*,*">
<FRAME NAME="kiri" SRC="kiri.htm">
<FRAME NAME="kanan" SRC="kanan.htm">
</FRAMESET>
</HTML>
MEMBAGI FRAME MENJADI BARIS DAN KOLOM
Membagi frame menjadi baris dan kolom:
<HTML>
<FRAMESET ROWS= COLS=> Atas kiri Atas kanan
<FRAME NAME= SRC=>
<FRAME NAME= SRC=>
</FRAMESET> Bawah kiri Bawah kanan

</HTML>
<HTML>
<FRAMESET COLS="*,*" ROWS="*,*">
<FRAME NAME="ataskiri" SRC="ataskiri.htm">
<FRAME NAME="bawahkiri" SRC="ataskanan.htm">
<FRAME NAME="ataskanan" SRC="bawahkiri.htm">
<FRAME NAME="bawahkanan" SRC="bawahkanan.htm">
</FRAMESET>
</HTML>
MENENTUKAN UKURAN FRAME
<HTML>
<FRAMESET ROWS="25%,*">
judul 25%
<FRAME NAME="judul" SRC="judul.htm">
<FRAMESET COLS="20%,*">
<FRAME NAME="menu" SRC="menu.htm">
<FRAME NAME="utama" SRC="utama.htm">
menu utama </FRAMESET>
</FRAMESET>
</HTML>
20%
JUDUL.HTM UTAMA.HTM
<HTML> <HTML>
<BODY> <BODY>
<P ALIGN="center"> <H1 ALIGN="center">

<IMG SRC="judul-1.gif"> HALAMAN UTAMA<P>
WEB SITE
</BODY>
</HTML> </BODY>
</HTML>
MENU.HTM
<HTML>
<BODY>
<A HREF="menu-1.htm" TARGET="utama">

<IMG SRC="tombol-1.gif"></A><P>

<IMG SRC="tombol-2.gif"><P>

<IMG SRC="tombol-3.gif"><P>
</BODY>
</HTML>
PENGATURAN BORDER DAN SCROLLING PADA FRAME
Format Penulisan:
<HTML>
<FRAMESET ROWS= COLS= BORDER=>
<FRAME NAME= SRC= SCROLLING=>
<FRAME NAME= SRC= SCROLLING=>
</FRAMESET>
</HTML>
yes
SCROLLING no
auto
FORM
Form digunakan untuk interaksi antara pengunjung web dan aplikasi web
tersebut
Format Penulisan:
<form name=" method="..." action=...">
</form>
post
method
get
Action : - alamat e-mail,

contoh: action=mailto:ali@yahoo.co.id
- alamat file,
contoh: action=coba.asp
FORM INPUT TYPE TEXT
Format Penulisan:
<input type="text" name=..." size=..." maxlength=...">
Contoh:
<html>
<body>
<pre>
<form name="FormKu" method="post" action="">

Nama : <input type="text" name=nama" size="20"
maxlength="15">
</form>
</pre>
</body>
</html>
FORM INPUT TYPE PASSWORD
Format Penulisan:
<input type=password" name=..." size=..." maxlength=...">
Contoh:
<html>
<body>
<pre>

Password : <input type="password" name="katakunci"
size="20" maxlength="15">
</form>
</pre>
</body>
</html>
FORM TEXTAREA
Format Penulisan:
<textarea name=..." cols=..." rows=...">
</textarea>
Contoh:
<html>
<body>
<pre>

Alamat :
<textarea name="alamat" cols="20" rows="5">
</textarea>
</form>
</pre>
</body>
</html>
FORM INPUT TYPE FILE
Format Penulisan:
<input type="file" name="..." size="..." maxlength="...">
Contoh:
<html>
<body>
<pre>

File yang dikirim : <input type="file" name="fileku"
size="20" maxlength="100">
</form>
</pre>
</body>
</html>
FORM INPUT TYPE IMAGE
Format Penulisan:
<input type="image" name="..." value="..." src="..."
alt="..." width="..." height="...">
Contoh:
<html>
<body>

Pilih salah satu gambar:<br>
<input type="image" name="gambar1" value="gambarA"
src="gambar1A.jpg" alt="pilih gambar 1"
width="200" height="200">
<input type="image" name="gambar2" value="gambarB"
src="gambar2B.jpg" alt="pilih gambar 2"
width="200" height="200">
</form>
</body>
</html
FORM INPUT TYPE HIDDEN
Format Penulisan:
<input type="hidden" name="..." value="...">
Contoh:
<html>
<body>
<pre>

Dataku : <input type="hidden" name="rahasia" value="dataku">
</form>
</pre>
</body>
</html>
FORM INPUT TYPE RADIO
Format Penulisan:
<input type="radio" name=..." value=..." checked>
Contoh:
<html>
<body>
<pre>

Jenis Kelamin : <input type="radio" name="Jenis" checked
value="Pria"> Laki-laki
<input type="radio" name="Jenis"
value="Wanita"> Wanita
</form>
</pre>
</body>
</html>
FORM INPUT TYPE CHECKBOX
Format Penulisan:
<input type=checkbox" name=..." value=..." checked>
Contoh:
<html>
<body>
<pre>

Pekerjaan : <input type="checkbox" name="pekerjaan"
value="PNS">PNS
<input type="checkbox" name="pekerjaan"
value="Swasta">Swasta
<input type="checkbox" name="pekerjaan"
value="Lain">Lain-lain
</form>
</pre>
</body>
</html>
FORM SELECT
Format Penulisan:
<select name="status">
<option value="..." selected>...</option>
<option value="...">...</option>
<option value="...">...</option>
</select>
Contoh:
<html>
<body>
<pre>
Status : <select name="status">
<option value="WNI" selected>WNI</option>
<option value="WNA">WNA</option>
</select>
</form>
</pre>
</body>
</html>
FORM INPUT TYPE BUTTON, SUBMIT, DAN RESET
Format Penulisan:
<input type="button" name="..." value="...">

<input type=submit" name="..." value="...">
<input type=reset" name="..." value="...">
Contoh:
<html>
<body>
<pre>

<input type="button" name="tombol" value="Klik Disini" >
<input type="submit" name="submit" value="OK" >
<input type="reset" name="reset" value="Batal" >
</form>
</pre>
</body>
</html>

Desain Web 01

Diunggah oleh

Informasi Dokumen

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

Desain Web 01

Diunggah oleh

Hak Cipta:

Format Tersedia

MATERI DESAIN WEB

hypertext adalah kata markup menunjukkan Language menunjukkan

Aqua Gray Navy Silver

Format Gambar : - GIF - Windows Metafiles

< IMG SRC = WIDTH = HEIGHT = ALT = BORDER = >

menampilkan file gambar menampilkan frame pada gambar

Mengatur tinggi gambar

Belajar <BR> Desain Web Belajar <P> Desain Web </P>

Pengaturan Paragraph : <P ALIGN = > . . . . . </P>

Left Right Center

<P ALIGN="RIGHT"> Belajar Desain Web </P>

Digunakan untuk mengatur jenis huruf,

<FONT SIZE= FACE= COLOR=> .</FONT>

Digunakan untuk mengatur warna font,

Digunakan untuk mengatur ukuran font (1,2,3,4,5,6,7)

<b> .. </b> Cetak tebal font

<u> .. </u> Garis bawah

<i> .. </i> Cetak miring font

<strike> .. </strike> Garis tengah

<sub> .. </sub> Subscript

<sup> .. </sup> Superscript

<small> .. </small> Font cetak kecil

<big> .. </big> Font cetak besar

<b>Teks Cetak Tebal</b>

<h1> .. </h1> <h1 ALIGN = .. > .. </h1>

<A HREF = TARGET= > . </A>

Menentukan obyek window

<A HREF="materi-2b.htm" TARGET="_blank">

<A HREF="materi-2c.htm" TARGET="_parent">

Masing-masing bagian berisi background halaman yang berbeda-beda

<TABLE BORDER = >

<TR> . </TR> : untuk pindah baris baru

<TABLE BORDER="3" >

<TABLE BORDER=3 WIDTH =90%HEIGHT=90%">

Contoh tampilan desain:

FRAME digunakan untuk membagi window browser menjadi beberapa bagian

Membagi frame menjadi kolom:

</FRAMESET> Bawah kiri Bawah kanan

<P ALIGN="center"> <H1 ALIGN="center">

<A HREF="menu-1.htm" TARGET="utama">

<A HREF="menu-2.htm" TARGET="utama">

<A HREF="menu-3.htm" TARGET="utama">

<form name=" method="..." action=...">

Action : - alamat e-mail,

<form name="FormKu" method="post" action="">

<form name="FormKu" method="post" action="">

<form name="FormKu" method="post" action="">

<form name="FormKu" method="post" action="">

<form name="FormKu" method="post" action="">

<input type="hidden" name="..." value="...">

<form name="FormKu" method="post" action="">

<form name="FormKu" method="post" action="">

<form name="FormKu" method="post" action="">

<input type="button" name="..." value="...">

<form name="FormKu" method="post" action="">

Anda mungkin juga menyukai