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

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

DESAIN WEB SITE Dengan pokok materi pelajaran : 1. 2. 3. 4.

Pemrograman web dasar Desain Grafis (Paint dan Photoshop) Animasi (Flash MX) 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 Telp. (0286) 597070 Web site : http://www.smkn2bawang.com E-mail : [email protected]

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

1

1. menggunakan tag Hx (Heading nomor 1-7) untuk format huruf dengan ukuran terbesar sampai terkecil ::Latihan membuat web 1...
mau pintar ya belajar...






Tampilan hasilnya sbb:


2

2. Menggunakan tag font untuk format huruf dengan tanpa parameter ::Latihan membuat web 2...
Membuat format tulisan dengan tag font selain Hx...

mau pintar ya belajar... mau pintar ya belajar... mau pintar ya belajar... mau pintar ya belajar... mau pintar ya belajar... mau pintar ya belajar... mau pintar ya belajar...

Tampilan hasil sbb:

Catatan : •

•

penggunaan tag font tanpa ada tag
maka akan menjadi baris bersambung. Parameter color=”red” dengan warna dlm bahasa inggris atau color=”00ff00” dengan warna kode heksadesimal.


3

3. Menggunakan tag font dan tag br untuk ganti baris ::Latihan membuat web 2...
Membuat format tulisan dengan tag font selain Hx...


Tampilan hasilnya sbb:


4

4. Membuat format tulisan dengan parameter size, color dan tipe ::Latihan membuat web 2...
Membuat format tulisan dengan tag font dengan parameter size,color dan tipe
hasilnya sbb:


5

5. membuat background gambar dan menyisipkan gambar ::Latihan membuat web 2...
Membuat format tulisan dengan tag font dengan parameter size,color dan tipe
hasil sbb:


6

<TITLE>


7

::belajar web hari kedua ..
BELAJAR WEB ITU ASYIK..







8

<TITLE> ::belajar web hari kedua ..








9

<TITLE>


10

::belajar web hari kedua ..

BELAJAR WEB ITU ASYIK.. BELAJAR WEB ITU ASYIK.. BELAJAR WEB ITU ASYIK.. BELAJAR WEB ITU ASYIK.. BELAJAR WEB ITU ASYIK.. BELAJAR WEB ITU ASYIK.. BELAJAR WEB ITU ASYIK..


11

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

BARIS 1 KOLOM 1 BARIS 1 KOLOM 2

BARIS 2 KOLOM 1 BARIS 2 KOLOM 2


12


13

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





14




copyright 2009 Ahmad Banjar Group


15

::ini judul web ::

INI ADALAH UNTUK HEADER

info terbaru

Di sini untuk INFO - INFO WEB atau ISI WEB YANG MAU DI TAMPILKAN...


info tadi pagi



INFO KEMARIN




16

MENU - MENU

MENU 1

MENU 2

MENU 3

MENU 4

MENU 5

MENU 6

MENU 7

MENU 8

MENU 9

INI NAMA PEMILIK WEB


17

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 baris 1kolom


18

Ini untuk berita atau info

menu - menu


19


20

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


21

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


22

BARIS 1 KOLOM 1	BARIS 1 KOLOM 2
BARIS 2 KOLOM 1	BARIS 2 KOLOM 2

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

Recommend Documents

mau pintar ya belajar...

mau pintar ya belajar...

mau pintar ya belajar...

mau pintar ya belajar...

mau pintar ya belajar...

mau pintar ya belajar...

Membuat format tulisan dengan tag font selain Hx...

Membuat format tulisan dengan tag font selain Hx...

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..