MODUL BELAJAR MUATAN LOKAL (MULOK) PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN SMK N 2 BAWANG DESAIN WEB SITE

(1)

MODUL BELAJAR MUATAN LOKAL (MULOK)

PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN

SMK N 2 BAWANG

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 :

AHMAD SAFINGI, S.Pd.T.

Guru Produktif TKJ

http://afing.wordpress.com langitcool@yahoo.com

PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN

SMK NEGERI 2 BAWANG - BANJARNEGARA

Jl. Raya Mantrianom, Bawang, Kode Pos 53471

Telp. (0286) 597070 Web site : http://www.smkn2bawang.com E-mail : smkn2bawang@yahoo.com

(2)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₂

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>

(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.

(4)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₄

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>

(5)

4. Membuat format tulisan dengan parameter size, color dan tipe <html>

::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:

(6)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₆

5. membuat background gambar dan menyisipkan gambar <html>

::Latihan membuat web 2... </title>

</head>

<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:

(7)

(8)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₈ ::belajar web hari kedua ..

</TITLE> </HEAD>

<BODY BACKGROUND="..\ahmadsafingi\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>

(9)

::belajar web hari kedua .. </TITLE>

</HEAD>

<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>

(10)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₁₀ <HTML>

(11)

</HEAD>

<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>

(12)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₁₂ <HTML>

</HEAD>

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>

(13)

(14)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₁₄

</HEAD>

Belajar membuat Tabel untuk alat bantu desain web site...jadi perhatikan baik - baik </font>

</p>

</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>

(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>

</TR> </TABLE>

</BODY> <HTML>

(16)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₁₆

::ini judul web :: </title>

</head> <body>

<td><div align="center"><span class="style1">INI ADALAH UNTUK HEADER </span></div></td>

</tr> <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><strong>INFO KEMARIN </strong></p>

<p>Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI TAMPILKAN... </p></td>

(17)

</tr> <tr>

<tr>

<td><div align="center"><strong>INI NAMA PEMILIK WEB </strong></div></td>

</tr> </table> </body> </html>

(18)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₁₈

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>

<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

(19)

<table width="100%" border="1">

(20)

(21)

Contoh desain web yang menggunakan system table pada web site Politeknik Negeri Semarang yang beralamat di http://www.polines.ac.id

(22)

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang ₂₂

Modul ini masih belum selesai…. Dan merupakan rilisan edisi no.x.1 Moga bermanfaat untuk membantu belajar.

Trimakasih.

Kritik dan saran bisa lewat blog http://afing.wordpress.com atau lewat email : langitcool@yahoo.com