KONSEP DASAR HTML HTML ( HyperText Mark up
hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskahnaskah lainnya
Language )
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
FORMAT PENULISAN HTML
Contoh HTML Belajar Desain Web
contoh
PENGATURAN BACKGROUND
background = “...“ >
Background warna
Background gambar
PENGATURAN BACKGROUND WARNA Warna Dasar
Aqua Black Blue Fuchsia
Gray Green Lime Maroon
Contoh: Belajar Desain Web
Navy Olive Purple Red
Silver Teal White Yellow
PENGATURAN BACKGROUND WARNA Kombinasi Warna terang
#_ _ _ _ _ _ R
G
B
0 1 2 3 4 5 6 7 8 9 A B C D E F gelap
contoh
#FFFFFF #000000
Contoh: Belajar Desain Web
= =
putih hitam
PENGATURAN GAMBAR 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
Keterangan
GIF
JPEG
Dukungan 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
MENAMPILKAN GAMBAR Format Penulisan: Mengatur lebar gambar
menampilkan teks pada saat mouse didekatkan pada gambar
< IMG SRC = ”…” WIDTH = ”…” HEIGHT = ”…” ALT = ”…” BORDER = ”…” >
menampilkan file gambar
menampilkan frame pada gambar Mengatur tinggi gambar
Contoh:
![Contoh File Gambar](“judul-1.Gif")
PENGATURAN BARIS DAN PARAGRAPH Pengaturan baris Pengaturan paragraph
Belajar
Desain Web
Belajar
Desain Web
PENGATURAN PARAGRAPH Pengaturan Paragraph :
. . . . .
Left
Right
Center
Belajar Desain Web
Belajar Desain Web
Belajar Desain Web
PREFORMAT TEKS Preformat teks digunakan untuk menampilkan teks sesuai dengan yang ditulis pada editor teks Contoh 1:
Contoh 2:
Belajar
Belajar
Desain
Desain
Web
Web
PENGATURAN FONT Digunakan untuk mengatur jenis huruf, misal: Arial, Times New Roman, Courier, dll
……………….
Digunakan untuk mengatur warna font, misal: Red, Yellow, #00FF00, dll
Digunakan untuk mengatur ukuran font (1,2,3,4,5,6,7) Contoh:
BELAJAR DESAIN WEB
MODIFIKASI FONT …..
Cetak tebal font
…..
Garis bawah
…..
Cetak miring font
<strike> …..
Garis tengah
<sub> …..
Subscript
<sup> …..
Superscript
<small> …..
Font cetak kecil
…..
Font cetak besar
CONTOH MODIFIKASI FONT
<pre> Teks Cetak Tebal Garis Bawah Teks Teks Cetak Miring <strike>Teks Coret Tengah H<sub>2O 2<sup>4 <small>small big
MEMBUAT JUDUL (HEADING) …..
…..
…..
…..
…..
…..
Contoh:
<pre> Heading Heading Heading Heading Heading Heading
…..
left
1
2 3 4 5 6
right
center
NUMBERING (ORDERED LIST) Format Penulisan:
- ...
- ...
- ...
Contoh: Daftar Matakuliah: - Kalkulus
- Desain Web
- Bahasa Inggris
NUMBERING (ORDERED LIST) Format Penulisan:
- ...
- ...
- ...
Contoh:
Daftar Matakuliah: - Kalkulus
- Desain Web
- Bahasa Inggris
Type: 1 a A i I
: : : : :
1,2,3,… a,b,c,d,… A,B,C,D,…. i,ii,iii,iv,… I,II,III,IV,…
NUMBERING (ORDERED LIST) Format Penulisan:
- ...
- ...
- ...
Contoh:
Daftar Matakuliah: - Kalkulus
- Desain Web
- Bahasa Inggris
BULLETS (UN-ORDERED LIST) Format Penulisan:
Contoh: Daftar Matakuliah: - Kalkulus
- Desain Web
- Bahasa Inggris
BULLETS (UN-ORDERED LIST) Format Penulisan:
Contoh:
Daftar Matakuliah: - Kalkulus
- Desain Web
- Bahasa Inggris
Type: - Disc - Circle - Square
HYPERLINK Format Penulisan: …………….
File yang akan dijadikan link
Menentukan obyek window yang akan dijadikan link ( _blank, _parent )
CONTOH HYPERLINK Klik disini
Klik disini
Matakuliah : Web Desain 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
TABEL Format Penulisan:
……….
: untuk pindah baris baru ………. | : untuk menampilkan data pada setiap kolom
PENGATURAN UKURAN TABEL Format Penulisan:
PENGATURAN BACKGROUND PADA TABEL Format Penulisan:
PENGATURAN DATA PADA TABEL Format Penulisan:
ALIGN
Right Center Left
VALIGN
Top Middle Bottom
MENGGABUNGKAN KOLOM PADA TABEL
A
B
C
D
MENGGABUNGKAN BARIS PADA TABEL B
3
D
CONTOH APLIKASI PEMAKAIAN TABEL 30%
25%
25%
TUGAS 1 •
Buatlah desain web minimal terdiri dari 5 halaman, dengan ketentuan masingmasing 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 ……………….. …………………………… ………………………….. ……………………………
