-
KONSEP DASAR HTML
HTML ( HyperText Mark up Language )
hypertext adalah kata yang dapat menunjukkan hubungan suatu
naskah dokumen dengan naskah-naskah lainnya
markup menunjukkan bahwa pada file HTML berisi suatu instruksi
tertentu yang dapat memberikan suatu format pada dokumen yang akan
ditampilkan pada World Wide Web
Language menunjukkan bahwa HTML bukan merupakan bahasa
pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang
dapat digunakan untuk mengubah-ubah format suatu naskah atau
dokumen
-
contoh
FORMAT PENULISAN HTML
Contoh HTML
Belajar Desain Web
-
PENGATURAN BACKGROUND
Background warna Background gambar
-
AquaBlackBlueFuchsia
GrayGreenLimeMaroon
NavyOlivePurpleRed
SilverTealWhiteYellow
PENGATURAN BACKGROUND WARNA
Warna Dasar
Belajar Desain Web
Contoh:
-
PENGATURAN BACKGROUND WARNAKombinasi Warna
#_ _ _ _ _ _
R G B 0 1 2 3 4 5 6 7 8 9 A B C D E F
terang
gelap
contoh #FFFFFF = putih#000000 = hitam
Belajar Desain Web
Contoh:
-
PENGATURAN GAMBAR
Keterangan GIF JPEGDukungan Browser Sangat Bagus Bagus
Jenis Warna 256 16,7 juta
Interlace Image Ya Tidak
Transparent Image Ya Tidak
Animasi Ya Tidak
Jenis Pemadatan Lossless Compression Lossy Compression
Ukuran File Lebih Kecil Lebih Besar
Pemadatan Gambar Logo/Icon Sangat Bagus Kurang
Fotografi Jelek Sangat Bagus
Waktu Menampilkan Lebih Cepat Lebih Lambat
Syarat : - Ukuran file maksimal 100 Kb- Lebar : 500 pixel,
Tinggi : 400 pixel
Format Gambar : - GIF- JPG- Bitmap- Tiff- Targa
- Windows Metafiles- Sun Raster- PostScript- PCD- PCX
-
MENAMPILKAN GAMBAR
Format Penulisan:
< IMG SRC = WIDTH = HEIGHT = ALT = BORDER = >
menampilkan file gambar
Mengatur lebar gambar
Mengatur tinggi gambar
menampilkan teks pada saat mouse didekatkan pada gambar
menampilkan frame pada gambar
Contoh:
-
PENGATURAN BARIS DAN PARAGRAPH
Belajar Desain Web
Belajar Desain Web
Pengaturan barisPengaturan paragraph
-
PENGATURAN PARAGRAPH
Belajar Desain Web Belajar Desain Web Belajar Desain Web
Pengaturan Paragraph : . . . . .
Left Right Center
-
PREFORMAT TEKS
Preformat teks digunakan untuk menampilkan teks sesuai dengan
yang ditulis pada editor teks
Belajar
DesainWeb
Belajar Desain
Web
Contoh 1: Contoh 2:
-
PENGATURAN FONT
.
Digunakan untuk mengatur ukuran font (1,2,3,4,5,6,7)
Digunakan untuk mengatur jenis huruf,misal: Arial, Times New
Roman, Courier, dll
Digunakan untuk mengatur warna font,misal: Red, Yellow, #00FF00,
dll
BELAJAR DESAIN WEB
Contoh:
-
..
..
..
..
..
..
..
..
MODIFIKASI FONT
Cetak tebal font
Garis bawah
Cetak miring font
Garis tengah
Subscript
Superscript
Font cetak kecil
Font cetak besar
-
CONTOH MODIFIKASI FONT
Teks Cetak TebalGaris Bawah TeksTeks Cetak MiringTeks Coret
TengahH2O24smallbig
-
MEMBUAT JUDUL (HEADING)
.. .. .. .. .. ..
..
left right center
Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6
Contoh:
-
NUMBERING (ORDERED LIST)
... ... ...
Format Penulisan:
Daftar Matakuliah:
KalkulusDesain WebBahasa Inggris
Contoh:
-
NUMBERING (ORDERED LIST)
... ... ...
Format Penulisan:
Daftar Matakuliah:
KalkulusDesain WebBahasa Inggris
Type: 1 : 1,2,3,a : a,b,c,d,A : A,B,C,D,.i : i,ii,iii,iv,I :
I,II,III,IV,
Contoh:
-
NUMBERING (ORDERED LIST)
... ... ...
Format Penulisan:
Daftar Matakuliah:
KalkulusDesain WebBahasa Inggris
Contoh:
-
... ... ...
Format Penulisan:
Daftar Matakuliah:
KalkulusDesain WebBahasa Inggris
BULLETS (UN-ORDERED LIST)
Contoh:
-
BULLETS (UN-ORDERED LIST)
... ... ...
Format Penulisan:
Daftar Matakuliah:
KalkulusDesain WebBahasa Inggris
Type: - Disc- Circle- Square
Contoh:
-
HYPERLINKFormat Penulisan:
.
File yang akan dijadikan linkMenentukan obyek window yang akan
dijadikan link ( _blank, _parent )
-
CONTOH HYPERLINK
Klik disini
Klik disini
-
Buatlah 5 halaman web desain (5 file .htm) yang berisi informasi
atau tema dari sebuah tabloid on-line, dengan ketentuan sebagai
berikut :
Masing-masing bagian berisi background halaman yang berbeda-beda
Masing-masing halaman dapat dibuat link ke halaman yang lain
Matakuliah : Web Desain
-
TABEL
Format Penulisan:
. : untuk pindah baris baru . : untuk menampilkan data pada
setiap kolom
-
PENGATURAN UKURAN TABELFormat Penulisan:
-
PENGATURAN BACKGROUND PADA TABELFormat Penulisan:
-
PENGATURAN DATA PADA TABEL
Format Penulisan:
RightCenterLeft
TopMiddleBottom
ALIGN VALIGN
-
MENGGABUNGKAN KOLOM PADA TABEL
A
B C D
A
B C D
1 2 3
A
B C D
-
MENGGABUNGKAN BARIS PADA TABEL
A
B
C
D
A
B
C
D
1
2
3
A B
C
D
-
CONTOH APLIKASI PEMAKAIAN TABEL
30%
25%
30%
25%
-
TUGAS 1 Buatlah desain web minimal terdiri dari 5 halaman,
dengan ketentuan masing-
masing halaman mempunyai isi, background, desain, tabel yang
berbeda-beda satu sama lain. Dan setiap halaman mempunyai tombol
yang dapat dibuat link ke halaman yang lain.
Contoh tampilan desain:
MENU 1
MENU 2
MENU 3
MENU 4
MENU 5
Selamat datang di web site tabloid on-line yang telah di
launching pada tanggal .. ..