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

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

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

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.

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

3

3. Menggunakan tag font dan tag br untuk ganti baris ::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 hasilnya sbb:

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

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
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...
hasilnya sbb:

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

5

5. membuat background gambar dan menyisipkan gambar ::Latihan membuat web 2...

Membuat format tulisan dengan tag font dengan parameter size,color dan tipe
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...
hasil sbb:

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

6

<br /> <br /> Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang<br /> <br /> 7<br /> <br /> ::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..

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

8

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

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

9

<br /> <br /> Modul Belajar Mulok “Desain Web Site” Jurusan TKJ SMK N 2 Bawang<br /> <br /> 10<br /> <br /> ::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..

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

11

::belajar web hari kedua ..

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


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

12

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

13

::belajar web hari kedua ..

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

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

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

14

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

BELAJAR WEB ITU ASYIK..

copyright 2009 Ahmad Banjar Group





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

15

::ini judul web ::
INI ADALAH UNTUK HEADER

info terbaru

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

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

info tadi pagi

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

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

INFO KEMARIN

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

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



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

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


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

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







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

18

Ini untuk berita atau info

menu - menu
 
 
 
 
 
 
 
 
 
 


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

19

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

20

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 N 2 Bawang

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]

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

22

modul-belajar-desain-web.pdf

Desain Grafis (Paint dan Photoshop). 3. ... E-mail : [email protected] ... Menggunakan tag font untuk format huruf dengan tanpa parameter. <html>.

1MB Sizes 3 Downloads 249 Views

Recommend Documents

No documents