Modul Belajar Mulok Desain Web Site Juru (1)

(1)

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 [email protected]

PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN

SMK NEGERI 2 BAWANG - BANJARNEGARA

Jl. Raya Mantrianom, Bawang, Kode Pos 53471

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

</body>

</html>

(3)

2. Menggunakan tag font untuk format huruf dengan tanpa parameter

<html>

<head>

<title>

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

</body>

</html>

Tampilan hasil sbb:

Catatan :

• penggunaan tag font tanpa ada tag <br> maka akan menjadi baris bersambung.

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

</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="4">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>

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

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

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

(9)

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

(10)

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

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

</HEAD>

Belajar membuat Tabel untuk alat bantu desain web site...jadi perhatikan baik - baik

</font> </p>

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

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

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

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

<tr>

<tr>

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

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

<tr>

<tr>

<tr>

<td width="78%" align="left" valign="top">Ini untuk berita atau info</td> Tabel

Utama 3 baris,

1kolom Tabel

(19)

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

<tr>

(20)

(21)

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