Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK Al Munawwariyyah 1
MODUL BELAJAR MUATAN LOKAL (MULOK)
PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN
SMK
Al Munawwariyyah
DESAIN WEB SITE
Dengan pokok materi pelajaran :
1. Pemrograman web dasar
2. Desain Grafis (Paint dan Photoshop)
3. Animasi (Flash MX)
4. Desain Web Dinamis (Dream waver, Photoshop, MySQL,
PHP dan Web Server)
OLEH :
Embajori
PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN
SMK
Al Munawwariyyah - Sudimoro Bululawang Malang
Jl. Raya Sudimoro, Bululawang Malangg, Kode Pos 65171
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 2
1. menggunakan tag Hx (Heading nomor 1-7) untuk format huruf
dengan ukuran terbesar sampai terkecil
<html>
<head>
<title>
::Latihan membuat web 1...
</title>
</head>
<body>
<h1>mau pintar ya belajar...</h1>
<h2>mau pintar ya belajar...</h2>
<h3>mau pintar ya belajar...</h3>
<h4>mau pintar ya belajar...</h4>
<h5>mau pintar ya belajar...</h5>
<h6>mau pintar ya belajar...</h6>
<h7>mau pintar ya belajar...</h7>
</body>
</html>
Tampilan hasilnya sbb:
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 3
2. Menggunakan tag font untuk format huruf dengan tanpa parameter
<html>
<head>
<title>
::Latihan membuat web 2...
</title>
</head>
<body>
<h1>Membuat format tulisan dengan tag font selain Hx...</h1>
<hr>
<font size="7" color=”red”>mau pintar ya belajar...</font>
<font size="6" color=”#00ff00”>mau pintar ya belajar...</font>
<font size="5">mau pintar ya belajar...</font>
<font size="4">mau pintar ya belajar...</font>
<font size="3">mau pintar ya belajar...</font>
<font size="2">mau pintar ya belajar...</font>
<font size="1">mau pintar ya belajar...</font>
</body>
</html>
Tampilan hasil sbb:
Catatan :
· penggunaan tag font tanpa ada tag <br> maka akan menjadi baris bersambung.
· Parameter color=”red” dengan warna dlm bahasa inggris atau color=”00ff00”
dengan warna kode heksadesimal.
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 4
3. Menggunakan tag font dan tag br untuk ganti baris
<html>
<head>
<title>
::Latihan membuat web 2...
</title>
</head>
<body>
<h1>Membuat format tulisan dengan tag font selain Hx...</h1>
<hr>
<font size="7">mau pintar ya belajar...</font><br>
<font size="6">mau pintar ya belajar...</font><br>
<font size="5">mau pintar ya belajar...</font><br>
<font size="4">mau pintar ya belajar...</font><br>
<font size="3">mau pintar ya belajar...</font><br>
<font size="2">mau pintar ya belajar...</font><br>
<font size="1">mau pintar ya belajar...</font><br>
</body>
</html>
Tampilan hasilnya sbb:
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 5
4. Membuat format tulisan dengan parameter size, color dan tipe
<html>
<head>
<title>
::Latihan membuat web 2...
</title>
</head>
<body>
<h1>Membuat format tulisan dengan tag font dengan parameter size,color dan tipe
<hr>
<font size="7" color="green" type="Arial Black">mau pintar ya belajar...</font><br>
<font size="6" color="yellow" type="arial">mau pintar ya belajar...</font><br>
<font size="5" color="blue" type="Georgia">mau pintar ya belajar...</font><br>
<font size="4" color="red" type="arial">mau pintar ya belajar...</font><br>
<font size="3" color="#225566" type="Times">mau pintar ya belajar...</font><br>
<font size="2" color="#ff0099" type="arial">mau pintar ya belajar...</font><br>
<font size="1" color="#1199ff" type="arial">mau pintar ya belajar...</font><br>
</body>
</html>
hasilnya sbb:
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 6
5. membuat background gambar dan menyisipkan gambar
<html>
<head>
<title>
::Latihan membuat web 2...
</title>
</head>
<body background="file:///D:/images/abu.jpg">
<h1>Membuat format tulisan dengan tag font dengan parameter size,color dan tipe
<hr>
<font size="7" color="green" type="Arial Black">mau pintar ya belajar...</font><br>
<font size="6" color="yellow" type="arial">mau pintar ya belajar...</font><br>
<font size="5" color="blue" type="Georgia">mau pintar ya belajar...</font><br>
<img border="0" src="file:///D:/ahmadsafingi/images/bunga.jpg" width="187"
height="283">
<font size="4" color="red" type="arial">mau pintar ya belajar...</font><br>
<font size="3" color="#225566" type="Times">mau pintar ya belajar...</font><br>
<font size="2" color="#ff0099" type="arial">mau pintar ya belajar...</font><br>
<font size="1" color="#1199ff" type="arial">mau pintar ya belajar...</font><br>
</body>
</html>
hasil sbb:
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 7
<HTML>
<HEAD>
<TITLE>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 8
::belajar web hari kedua ..
</TITLE>
</HEAD>
<BODY BACKGROUND="..\images\abu.jpg">
<H1>BELAJAR WEB ITU ASYIK..</H1>
<H2>BELAJAR WEB ITU ASYIK..</H2>
<H3>BELAJAR WEB ITU ASYIK..</H3>
<H4>BELAJAR WEB ITU ASYIK..</H4>
<H5>BELAJAR WEB ITU ASYIK..</H5>
<H6>BELAJAR WEB ITU ASYIK..</H6>
<H7>BELAJAR WEB ITU ASYIK..</H7>
</BODY>
<HTML>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 9
<HTML>
<HEAD>
<TITLE>
::belajar web hari kedua ..
</TITLE>
</HEAD>
<BODY BGCOLOR="#d6ddfb">
<p align="center">
<IMG SRC="..\ahmadsafingi\images\enak.jpg" width="400" height="400">
</p>
<H1>BELAJAR WEB ITU ASYIK..</H1>
<H2>BELAJAR WEB ITU ASYIK..</H2>
<H3>BELAJAR WEB ITU ASYIK..</H3>
<H4>BELAJAR WEB ITU ASYIK..</H4>
<H5>BELAJAR WEB ITU ASYIK..</H5>
<H6>BELAJAR WEB ITU ASYIK..</H6>
<H7>BELAJAR WEB ITU ASYIK..</H7>
</BODY>
<HTML>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 10
<HTML>
<HEAD>
<TITLE>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 11
::belajar web hari kedua ..
</TITLE>
</HEAD>
<BODY BGCOLOR="#d6ddfb">
<p align="center">
<IMG SRC="..\ahmadsafingi\images\enak.jpg" width="400" height="400">
</p>
<font size="7">BELAJAR WEB ITU ASYIK..</font>
<font size="6">BELAJAR WEB ITU ASYIK..</font>
<font size="5">BELAJAR WEB ITU ASYIK..</font>
<font size="4">BELAJAR WEB ITU ASYIK..</font>
<font size="3">BELAJAR WEB ITU ASYIK..</font>
<font size="2">BELAJAR WEB ITU ASYIK..</font>
<font size="1">BELAJAR WEB ITU ASYIK..</font>
</BODY>
<HTML>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 12
<HTML>
<HEAD>
<TITLE>
::belajar web hari kedua ..
</TITLE>
</HEAD>
<BODY BGCOLOR="#d6ddfb">
<p align="center">
<font size="7">
Belajar membuat Tabel untuk alat bantu desain web site...jadi
perhatikan baik - baik
</font>
</p>
<TABLE BORDER ="1" WIDTH= "500" ALIGN="CENTER"
<TR>
<TD> BARIS 1 KOLOM 1 </TD>
<TD> BARIS 1 KOLOM 2 </TD>
</TR>
<TR>
<TD> BARIS 2 KOLOM 1 </TD>
<TD> BARIS 2 KOLOM 2 </TD>
</TR>
</TABLE>
</BODY>
<HTML>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 13
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 14
<HTML>
<HEAD>
<TITLE>
::belajar web hari kedua ..
</TITLE>
</HEAD>
<BODY BGCOLOR="#d6ddfb">
<p align="center">
<font size="7">
Belajar membuat Tabel untuk alat bantu desain web site...jadi perhatikan baik - baik
</font>
</p>
<TABLE BORDER ="0" WIDTH= "500" ALIGN="CENTER"
<TR>
<TD> <IMG SRC="..\ahmadsafingi\images\header.jpg" width="850" height="180"
</TD>
</TR>
<TR>
<TD>
<p align="left"><font size="7">BELAJAR WEB ITU ASYIK..</font></p>
<p align="center"><font size="6">BELAJAR WEB ITU ASYIK..</font></p>
<p align="right"><font size="5">BELAJAR WEB ITU ASYIK..</font></p>
<p align="center"><font size="4">BELAJAR WEB ITU ASYIK..</font></p>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 15
<p align="left"><font size="3">BELAJAR WEB ITU ASYIK..</font></p>
<p align="center"><font size="2">BELAJAR WEB ITU ASYIK..</font></p>
<p align="right"><font size="1">BELAJAR WEB ITU ASYIK..</font></p>
</TD>
</TR>
<TR>
<TD> <P ALIGN="CENTER"><FONT SIZE="3"> copyright 2009 Ahmad Banjar
Group </font></p>
</TR>
</TABLE>
</BODY>
<HTML>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 16
<html>
<head>
<title>
::ini judul web ::
</title>
</head>
<body>
<table width="800" border="1" align="center">
<tr>
<td><div align="center"><span class="style1">INI ADALAH UNTUK HEADER
</span></div></td>
</tr>
<tr>
<td><table width="100%" border="1">
<tr>
<td width="77%" align="left" valign="top"><p><strong>info terbaru
</strong></p>
<p>Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI
TAMPILKAN... </p>
<p>Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI
TAMPILKAN... </p>
<p><strong>info tadi pagi </strong></p>
<p>Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI
TAMPILKAN... </p>
<p>Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI
TAMPILKAN... </p>
<p><strong>INFO KEMARIN </strong></p>
<p>Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI
TAMPILKAN... </p>
<p>Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI
TAMPILKAN... </p></td>
<td width="23%" align="left" valign="top"><table width="100%" border="1">
<tr>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 17
<td align="left" valign="top"><div align="center"><strong>MENU - MENU
</strong></div></td>
</tr>
<tr>
<td align="left" valign="top"><A HREF="menu1.html">MENU 1</A> </td>
</tr>
<tr>
<td align="left" valign="top"><A HREF="menu2.html">MENU 2 </A></td>
</tr>
<tr>
<td align="left" valign="top">MENU 3 </td>
</tr>
<tr>
<td align="left" valign="top">MENU 4 </td>
</tr>
<tr>
<td align="left" valign="top">MENU 5 </td>
</tr>
<tr>
<td align="left" valign="top">MENU 6 </td>
</tr>
<tr>
<td align="left" valign="top">MENU 7 </td>
</tr>
<tr>
<td align="left" valign="top">MENU 8 </td>
</tr>
<tr>
<td align="left" valign="top">MENU 9 </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><div align="center"><strong>INI NAMA PEMILIK WEB
</strong></div></td>
</tr>
</table>
</body>
</html>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 18
Membuat master desain web dengan system table, terdiri dari
3 sistem table.
· Tabel utama berisi 3 baris dan 1 kolom dengan lebar width=85% dari
tampilan lebar monitor atau sekitar 850 piksel. Berfungsi sebagai
header atau kepala web yang dapat diisi dengan gambar grafis.
· Tabel kedua terdiri dari 1 baris dan dua kolom yang menggunakan
lebar “width=100% dari lebar table utama. Untuk table kedua, lebar
kolom 1 = 78% dan kolom 2=22% jadi total 100% dari table utama.
Berfungsi sebagai bagian isi web yang terdiri kolom menampilkan
berita atau info di kolom 1 (sebelah kiri) dan untuk menampilkan
system menu di kolom 2 (sebelah kanan).
· Tabel ketiga terdiri dari 10 baris dan 1 kolom dengan lebar 100%
dari kolom kedua pada table kedua atau sama dengan 22%.
Digunakan untuk memudahkan pemasangan menu sehingga tiap
menu ada dalam satu baris.
<body>
<table width="85%" border="1" align="center">
<tr>
<td><img src=”..\ahmadsafingi\header.jpg” width=”900” height=”200”></td>
</tr>
<tr>
<td><table width="100%" border="1">
<tr>
<td width="78%" align="left" valign="top">Ini untuk berita atau info</td>
Tabel
Utama
3 baris,
1kolom Tabel
Kedua
1 baris,
2 kolom
Tabel
Ketiga
10 baris
1kolom
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 19
<td width="22%" align="left" valign="top">
<table width="100%" border="1">
<tr>
<td>menu - menu</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 20
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 21
Contoh desain web yang menggunakan system table pada web site Politeknik Negeri
Semarang yang beralamat di http://www.polines.ac.id
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Al Munawwariyyah 22
Modul ini masih belum selesai…. Dan merupakan rilisan edisi no.x.1
Moga bermanfaat untuk membantu belajar.
Trimakasih.
