Post on 15-Sep-2015
description
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 .. ..