Anda di halaman 1dari 22

MODUL BELAJAR MUATAN LOKAL (MULOK) PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN SMK PLUS ALHILAL

DESAIN WEB SITE

Dengan pokok materi pelajaran :

1. Pemrograman web dasar

OLEH :

YUSRONI / PC (Pongel Cah) Guru Produktif TKJ

pongel@pongel.com

PROGRAM KEAHLIAN TEKNIK KOMPUTER JARINGAN SMK PLUS ALHILAL TEGALGUBUG ARJAWINANGUN Jl. Suropati Raya No. 13 Tegalgubug Arjawinangun Cirebon

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK PLUS ALHILAL

1

Raya No. 13 Te galgubug Arjawinangun Cirebon Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK

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:

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

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

</h1>

</font>

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.

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

</h1>

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 size="3" color="#225566" type="Times">mau pintar ya belajar </font><br>

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

5. membuat background gambar dan menyisipkan gambar <html> <head> <title> ::Latihan membuat web 2 </title> </head> <body background="file:///D:/ahmadsafingi/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

height="283">

border="0"

src="file:///D:/ahmadsafingi/images/bunga.jpg"

width="187"

<font size="4" color="red" type="arial">mau pintar ya belajar

<font size="3" color="#225566" type="Times">mau pintar ya belajar

</font><br>

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

<HTML>

<HEAD>

<TITLE>

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

<BODY

<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

<H7>BELAJAR WEB ITU ASYIK </H7>

</H6>

BACKGROUND=" \ahmadsafingi\images\abu.jpg">

ITU

ASYIK

</BODY>

<HTML>

<HTML>

<HEAD>

<TITLE>

::belajar web hari kedua </TITLE> </HEAD> <BODY BGCOLOR="#d6ddfb"> <p align="center">

<IMG SRC="

</p> <H1>BELAJAR WEB

<H2>BELAJAR WEB ITU ASYIK </H2>

</H1>

\ahmadsafingi\images\enak.jpg"

ITU

ASYIK

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

width="400" height="400">

<HTML>

<HEAD>

<TITLE>

::belajar web hari kedua </TITLE> </HEAD> <BODY BGCOLOR="#d6ddfb"> <p align="center">

<IMG SRC="

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

\ahmadsafingi\images\enak.jpg"

width="400" height="400">

<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 baik - baik </font> </p>

"500" ALIGN="CENTER"

<TABLE BORDER

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

="1" WIDTH=

</BODY>

<HTML>

jadi perhatikan

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

<TABLE BORDER ="0" WIDTH= "500" ALIGN="CENTER" <TR>

<TD> <IMG SRC=" </TD>

jadi

perhatikan baik - baik

\ahmadsafingi\images\header.jpg"

width="850" height="180"

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

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

</TABLE> </BODY> <HTML> Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK

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

terbaru

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

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

</table> </body> </html> Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK

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.

Tabel

Utama

3 baris,

1kolom

Tabel

Kedua

1 baris,

2 kolom

Tabel

Ketiga

10

1kolom

baris

<body>

<table width="85%" border="1" align="center">

<tr>

<td><img

</tr>

<tr>

src=”

\ahmadsafingi\header.jpg”

width=”900”

height=”200”></td>

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

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

<td width="22%" align="left" valign="top">

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

<tr> <td>menu - menu</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td>&nbsp;</td> </tr> </table>

</tr> </table> Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK
Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK PLUS ALHILAL 2 0

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

SELAMAT BERKREASI SEMOGA SUKSES

Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK PLUS ALHILAL

22

SELAMAT BERKREASI SEMOGA SUKSES Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK PLUS ALHILAL 2