Komputer Aplikasi IT-1
Free of Charge – IT 1 / HTML
Overview
Tujuan Akhir Materi Kuliah IT-1
Pada akhir Semester 1 (Mata kuliah IT-1) ini diharapkan mahasiswa dapat :
1. Mendefinisikan pengertian file HTML (HyperText Mark up Language)
2. Memahami konsep hypertext
3. Menjelaskan struktur dasar suatu file HTML
4. Mengetahui beberapa tag HTML dasar yang sering digunakan
5. Membuat web page sederhana
6. Memahami penggunaan fasilitas link dan penyisipan citra pada file HTML.
Pengenalan HTML
HTML (HyperText Mark up Language) merupakan suatu
mengimplementasikan konsep hypertext dalam suatu naskah
HTML sendiri bukan tergolong pada suatu bahasa pemrograman
yang hanya memberikan tanda (marking up) pada suatu naskah
sebagai program.
metoda untuk
atau dokumen.
karena sifatnya
teks dan bukan
Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi
menjadi :
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu
naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau
frase untuk mengikuti link ini maka web browser akan memindahkan tampilan
pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi
suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen
yang akan ditampilkan pada World Wide Web.
Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan
kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah
format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset
SGML (Standard
Generalized Mark-up Language). Karena HTML didedikasikan untuk
ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana
daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi
pada aplikasi.
Free of Charge – IT 1 / HTML
Notes :
•
HTML dikembangkan dari konsep SGML
•
HTML bukan merupakan bahasa pemrograman
•
Konsep HyperText untuk memudahkan mencari informasi
Apa yang dapat dilakukan dengan HTML ?
•
Menentukan Format Suatu Teks
•
Membuat List Tentang Sekelompok Hal
•
Membuat Link ke Dokumen Lain atau Bagian lain dari
Dokumen Yang Sama
•
Menyisipkan Citra Atau Gambar
•
Menampilkan Informasi Dalam Bentuk Tabel
Memodifikasi format teks
Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau
format dokumen yang akan kita transmisikan melalui media Internet.
Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini
adalah :
Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran
yang dapat digunakan untuk judul, heading dan sebagainya.
Kita dapat menampilkan teks dalam bentuk cetakan tebal
Kita dapat menampilkan sekelompok kata dalam bentuk miring
Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan
hasil ketikan mesin ketik
Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
Menampilkan daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam
bentuk point-point sehingga lebih mudah dibaca dan dipahami
Membuat link
Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada
suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam
World Wide Web. Ada tiga macam link yang dapat kita gunakan :
Link menuju bagian lain dari page
Link menuju page lain dalam satu web site
Link menuju resource atau web site yang berbeda
Free of Charge – IT 1 / HTML
Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik,
interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk
teks.
Menampilkan informasi dalam bentuk tabel
Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca
untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga
dapat dilakukan untuk menambah nilai estetika dari page yang akan kita
rancang.
Free of Charge – IT 1 / HTML
Struktur Dasar Web Page
•
Tag HTML
•
Tag dan
•
Tag dan
•
Tag dan
•
Judul Page (tag )
•
Pembuatan Paragrap (Tag )
File-file HTML dapat ditampilkan sesuai dengan keinginan kita seperti pada
contoh-contoh
sebelumnya
adalah
karena
terdapat
marker
yang
diimplementasikan dalam bentuk tag-tag HTML. Secara umum format tag
HTML tersebut dapat dituliskan sebagai berikut:
Teks yang akan dipengaruhi oleh tag
Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka
yang harus kita tuliskan dalam file HTML adalah:
B>Tulisan yang tercetak tebal
Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga
beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini.
Tag yang paling dasar yang digunakan dalam file HTML adalah dan
. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang
terdapat di antara kedua tag tersebut adalah dalam format HTML.
Teks
Untuk mendefinisikan head,
kita dapat menambahkan tag dan
setelah penggunaan tag sedemikian hingga struktur page menjadi :
Free of Charge – IT 1 / HTML
Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks
dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web
page. Bagian ini dapat didefinisikan dengan meletakkan tag dan
di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan
sesudah tag , sehingga struktur dasar sebuah page dapat dituliskan
sebagai :
Untuk mendefinisikan judul page (title) maka kita dapat melakukannya
dengan meletakkan naskah judul di antara tag dan . Judul
ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat
sebuah page dengan judul "Latihan HTML" maka kita harus menambahkan:
Latihan HTML
Perhatikan bahwa tag dan ini harus diletakkan pada
bagian head, sehingga dokumen HTML dasar kita menjadi:
Latihan HTML
Free of Charge – IT 1 / HTML
Teks yang akan ditampilkan pada bagian body
Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk
membuat
atau
mendefinisikan
naskah
dalam
bentuk
paragraf
harus
ditambahkan tag khusus yakni . Sebagai contoh kita dapat menampilkan
beberapa paragraf sekaligus dalam satu dokumen HTML.
Latihan HTML
Teks yang akan ditampilkan pada bagian body
Paragraf satu
Paragraf dua
Free of Charge – IT 1 / HTML
Format Teks Dasar 2
Paragraf
•
Paragraf digunakan untuk mengatur susunan tekas dalam suatu paragraf
halaman web.
•
tag …..
•
Tag ALIGN digunakan untuk mengatur struktur sebuah paragraf pada
halaman web
Contoh Penggunaan ;
Latihan Paragraf
Contoh Paragraf rata kanan …………………
Contoh Paragraf rata kiri …………………
Contoh Paragraf rata kiri …………………
BlockQuote
•
Indentasi Teks dengan BlockQuote
•
Perintah Taq ini digunakan untuk menulis kutipan teks.
•
Dengan perintah ini browser akan menampilkan teks menjorok ke dalam
(indentasi).
Contoh Penggunaan ;
Latihan Paragraf
Free of Charge – IT 1 / HTML
Latihan Membuat BlockQuote
Seorang pakar IT menyatakan bahwa : ……
Sudah waktunya kita berbenah……………………………………………………
Break
•
Break (BR)
•
Break adalah tag yang digunakan untuk mengatur tampilan halaman
web ke dalam satu baris yang baru.
•
Tag membuat baris barupa tanpa memberi baris kosong.
Latihan Line Break
Latihan Membuat Line Break
Banyak metoda yang digunakan dalam membangun sebuah
halaman web, namun secara garis besar di kategorikan
ke dalam dua jenis, yaitu :
1. Client Side Scripting
2. Server Side Secripting
Free of Charge – IT 1 / HTML
Font
•
Tag Font digunakan untuk mengatur tampilan huruf dalam dokumen HTML.
•
Secara garis besar terdapat beberapa atribut yang
•
digunakan untuk mengatur ukuran, jenis dan warna huruf yang akan digunakan,
yaitu : Font Size, Font Face, Font Color
Font Size
•
Font Size, merupakan atribut yang digunakan dalam Tag Font, untuk mengatur
ukuran huruf.
•
Ukuran font dimulai dari ukuran 1 sebagai ukuran terkecil dan 7 sebagai ukuran
terbesar.
Latihan Ukuran Font
Latihan Membuat Ukuran Huruf Ukuran Font
1 Ukuran Font 2
Ukuran Font 3 Ukuran Font
4 Ukuran Font 5
Ukuran Font 6
Ukuran Font 7
Font Face
•
Font Face, atribut ini digunakan untuk mengtur jenis huruf yang akan
digunakan.
•
Atribut Face ini diisi dengan string jenis huruf yang akan digunakan, seperti
jenis huruf Arial, Times News Roman, Verdana dan sebagainya.
Latihan Jenis Font
Latihan Membuat Jenis Huruf
Jenis Huruf Arial
Free of Charge – IT 1 / HTML
Jenis Huruf Verdana
Jenis Huruf Tahoma
Font Color
•
Font Color, digunakan untuk mengatur warna huruf yanga akan digunakan.
•
Terdapat dua cara pemberian atribut warna :
•
Menuliskan nama warna secara langsung, seperti Red, Blue, Green
sebagainya
•
Menggunakan nilai RGB (Red Green Blue) dari suatu warna.
Latihan Warna Font
Warna Huruf Merah
Coba tebak warna apa ini
Yang wananya apa ya?
dan
Free of Charge – IT 1 / HTML
TAG LIST
OL = Ordered List
UL = UnOrdered List
LI = List
DL = Definition List
Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa jenis list yang
dikenal oleh HTML yaitu :
1. List bernomor (ordered list), tag yang dipakai adalah dan diakhiri dengan
2. List tidak bernomor (unordered list) , tag yang dipakai adalah dan
3. List definisi (definition list), tag yang dipakai adalah dan
4. Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak
bernomor adalah dengan perintah dan ditutup dengan . Sedangkan
untuk list definisi, dan sebagai definisi term dan dan
sebagai definisi description (keterangan dari definisi term).
OL (Ordered List)
Bentuk umum untuk membuat list bernomor adalah :
item 1
item 2
item 3
Untuk tipe nomor, nilai yang bisa diisi adalah 1 (Arabic Number), A (huruf besar), a
(huruf kecil), I (romawi kapital), i (romawi kecil).
UL (Unordered List)
Bentuk umum untuk membuat list simbol adalah :
Free of Charge – IT 1 / HTML
item 1
item 2
item 3
Untuk tipe Simbol nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran),
square (segiempat).
DL (Definition List)
Untuk list definisi, bentuk umumnya adalah :
Term 1Keterangan lengkap mengenai Term 1
Term 2Keterangan lengkap mengenai Term 2
Term 3Keterangan lengkap mengenai Term 3
Contoh script adalah :
FORM HTML
Yang Termasuk Negara ASEAN (memakai angka)
Indonesia
Thailand
Brunei
Yang Termasuk Negara ASEAN (memakai huruf kapital)
Indonesia
Thailand
Free of Charge – IT 1 / HTML
Brunei
Kota Yang Termasuk Negara ASEAN (memakai bulatan)
Indonesia
Thailand
Brunei
Kota Yang Termasuk Negara ASEAN (memakai segiempat)
Indonesia
Thailand
Brunei
Kota-Kota
Besar
Di
Pulau
Jawa
(dalam
bentuk
pustaka)
Bandung
Bandung adalah ibukota Jawa Barat
Jakarta
Jakarta adalah ibukota DKI Jakarta
Surabaya
Surabaya adalah ibukota Jawa Timur
seperti
daftar
Free of Charge – IT 1 / HTML
“Complicated List”
Daftar Menu
1. Makanan
a. Timbel Komplit
b. Timbel Tidak Komplit
c. Sayur Asem
d. Kurang Asem
2. Minuman
i.
Es Campur Rujak
ii.
Es Teller
iii.
Sirup Jagung
3. Makanan Ringan
40.
41.
Kurupuk Jengkol Jajahean
Kurupuk Udang dibalik Batu
List
Daftar Menu
Makanan
Timbel Komplit
Timbel Tidak Komplit
Sayur Asem
Kurang Asem
Minuman
Es Campur Rujak
Es Teller
Sirup Jagung
Makanan Ringan
Kurupuk Jengkol Jajahean
Kurupuk Udang dibalik Batu
“ Closed Ordered List Type
=1”
“ Closed Ordered List Type
= a”
“ Closed Ordered List Type = I “
“ Closed Ordered List Start = n “
Free of Charge – IT 1 / HTML
Penyisipan Citra atau Gambar
Penyisipan citra pada page dimaksudkan agar tampilan dari page tersebut dapat
lebih menarik dan informatif. Ada beberapa hal yang perlu diperhatikan dalam
penyisipan citra atau gambar ke page, yakni:
Ukuran file citra
Ukuran file yang terlalu besar akan membuat pengunjung web harus menunggu
lebih lama dalam mengakses web karena musti terlebih dahulu mendownload file
citra atau gambar yang ukurannya besar
Tipe file citra
Tipe file yang mendukung untuk transmisi melalui aplikasi web adalah JPEG, GIF
atau PNG
File citra dapat disisipkan ke dalam suatu file HTML dengan menggunakan tag
, yakni dalam format penuh:
• Atribut ALT berfungsi sebagai alternatif jika browser yang digunakan oleh
pengguna tidak dapat menampilkan citra.
• Atribut ALIGN dapat diisi dengan nilai-nilai TOP, MIDDLE, BOTTOM, LEFT, dan
RIGHT.
• Atribut WIDTH dapat digunakan untuk mengatur ukuran lebar citra/gambar
dengan menentukan nilai dalam satuan pixel atau persen
• Atribut WIDTH dapat digunakan untuk mengatur ukuran lebar citra/gambar
dengan menentukan nilai dalam satuan pixel atau persen
• Atribut BORDER digunakan
jika gambar/citra akan ditampilkan dengan
menggunakan bingkai. Ketebalan border dapat ditentukan dengan memasukan
nilai dengan satuan pixel
Free of Charge – IT 1 / HTML
Contoh penggunaan tag :
Aligning Text and Images
Teks
ini akan diposisikan pada bagian atas gambar.This text appears at
the top of the image.
Teks ini akan diposisikan pada bagian tengah gambar. This text
appears in the middle of the image.
Male
Overview
Tujuan Akhir Materi Kuliah IT-1
Pada akhir Semester 1 (Mata kuliah IT-1) ini diharapkan mahasiswa dapat :
1. Mendefinisikan pengertian file HTML (HyperText Mark up Language)
2. Memahami konsep hypertext
3. Menjelaskan struktur dasar suatu file HTML
4. Mengetahui beberapa tag HTML dasar yang sering digunakan
5. Membuat web page sederhana
6. Memahami penggunaan fasilitas link dan penyisipan citra pada file HTML.
Pengenalan HTML
HTML (HyperText Mark up Language) merupakan suatu
mengimplementasikan konsep hypertext dalam suatu naskah
HTML sendiri bukan tergolong pada suatu bahasa pemrograman
yang hanya memberikan tanda (marking up) pada suatu naskah
sebagai program.
metoda untuk
atau dokumen.
karena sifatnya
teks dan bukan
Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi
menjadi :
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu
naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau
frase untuk mengikuti link ini maka web browser akan memindahkan tampilan
pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi
suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen
yang akan ditampilkan pada World Wide Web.
Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan
kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah
format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset
SGML (Standard
Generalized Mark-up Language). Karena HTML didedikasikan untuk
ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana
daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi
pada aplikasi.
Free of Charge – IT 1 / HTML
Notes :
•
HTML dikembangkan dari konsep SGML
•
HTML bukan merupakan bahasa pemrograman
•
Konsep HyperText untuk memudahkan mencari informasi
Apa yang dapat dilakukan dengan HTML ?
•
Menentukan Format Suatu Teks
•
Membuat List Tentang Sekelompok Hal
•
Membuat Link ke Dokumen Lain atau Bagian lain dari
Dokumen Yang Sama
•
Menyisipkan Citra Atau Gambar
•
Menampilkan Informasi Dalam Bentuk Tabel
Memodifikasi format teks
Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau
format dokumen yang akan kita transmisikan melalui media Internet.
Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini
adalah :
Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran
yang dapat digunakan untuk judul, heading dan sebagainya.
Kita dapat menampilkan teks dalam bentuk cetakan tebal
Kita dapat menampilkan sekelompok kata dalam bentuk miring
Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan
hasil ketikan mesin ketik
Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
Menampilkan daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam
bentuk point-point sehingga lebih mudah dibaca dan dipahami
Membuat link
Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada
suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam
World Wide Web. Ada tiga macam link yang dapat kita gunakan :
Link menuju bagian lain dari page
Link menuju page lain dalam satu web site
Link menuju resource atau web site yang berbeda
Free of Charge – IT 1 / HTML
Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik,
interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk
teks.
Menampilkan informasi dalam bentuk tabel
Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca
untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga
dapat dilakukan untuk menambah nilai estetika dari page yang akan kita
rancang.
Free of Charge – IT 1 / HTML
Struktur Dasar Web Page
•
Tag HTML
•
Tag dan
•
Tag dan
•
Tag dan
•
Judul Page (tag )
•
Pembuatan Paragrap (Tag )
File-file HTML dapat ditampilkan sesuai dengan keinginan kita seperti pada
contoh-contoh
sebelumnya
adalah
karena
terdapat
marker
yang
diimplementasikan dalam bentuk tag-tag HTML. Secara umum format tag
HTML tersebut dapat dituliskan sebagai berikut:
Teks yang akan dipengaruhi oleh tag
Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka
yang harus kita tuliskan dalam file HTML adalah:
B>Tulisan yang tercetak tebal
Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga
beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini.
Tag yang paling dasar yang digunakan dalam file HTML adalah dan
. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang
terdapat di antara kedua tag tersebut adalah dalam format HTML.
Teks
Untuk mendefinisikan head,
kita dapat menambahkan tag dan
setelah penggunaan tag sedemikian hingga struktur page menjadi :
Free of Charge – IT 1 / HTML
Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks
dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web
page. Bagian ini dapat didefinisikan dengan meletakkan tag dan
di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan
sesudah tag , sehingga struktur dasar sebuah page dapat dituliskan
sebagai :
Untuk mendefinisikan judul page (title) maka kita dapat melakukannya
dengan meletakkan naskah judul di antara tag dan . Judul
ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat
sebuah page dengan judul "Latihan HTML" maka kita harus menambahkan:
Latihan HTML
Perhatikan bahwa tag dan ini harus diletakkan pada
bagian head, sehingga dokumen HTML dasar kita menjadi:
Latihan HTML
Free of Charge – IT 1 / HTML
Teks yang akan ditampilkan pada bagian body
Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk
membuat
atau
mendefinisikan
naskah
dalam
bentuk
paragraf
harus
ditambahkan tag khusus yakni . Sebagai contoh kita dapat menampilkan
beberapa paragraf sekaligus dalam satu dokumen HTML.
Latihan HTML
Teks yang akan ditampilkan pada bagian body
Paragraf satu
Paragraf dua
Free of Charge – IT 1 / HTML
Format Teks Dasar 2
Paragraf
•
Paragraf digunakan untuk mengatur susunan tekas dalam suatu paragraf
halaman web.
•
tag …..
•
Tag ALIGN digunakan untuk mengatur struktur sebuah paragraf pada
halaman web
Contoh Penggunaan ;
Latihan Paragraf
Contoh Paragraf rata kanan …………………
Contoh Paragraf rata kiri …………………
Contoh Paragraf rata kiri …………………
BlockQuote
•
Indentasi Teks dengan BlockQuote
•
Perintah Taq ini digunakan untuk menulis kutipan teks.
•
Dengan perintah ini browser akan menampilkan teks menjorok ke dalam
(indentasi).
Contoh Penggunaan ;
Latihan Paragraf
Free of Charge – IT 1 / HTML
Latihan Membuat BlockQuote
Seorang pakar IT menyatakan bahwa : ……
Sudah waktunya kita berbenah……………………………………………………
Break
•
Break (BR)
•
Break adalah tag yang digunakan untuk mengatur tampilan halaman
web ke dalam satu baris yang baru.
•
Tag membuat baris barupa tanpa memberi baris kosong.
Latihan Line Break
Latihan Membuat Line Break
Banyak metoda yang digunakan dalam membangun sebuah
halaman web, namun secara garis besar di kategorikan
ke dalam dua jenis, yaitu :
1. Client Side Scripting
2. Server Side Secripting
Free of Charge – IT 1 / HTML
Font
•
Tag Font digunakan untuk mengatur tampilan huruf dalam dokumen HTML.
•
Secara garis besar terdapat beberapa atribut yang
•
digunakan untuk mengatur ukuran, jenis dan warna huruf yang akan digunakan,
yaitu : Font Size, Font Face, Font Color
Font Size
•
Font Size, merupakan atribut yang digunakan dalam Tag Font, untuk mengatur
ukuran huruf.
•
Ukuran font dimulai dari ukuran 1 sebagai ukuran terkecil dan 7 sebagai ukuran
terbesar.
Latihan Ukuran Font
Latihan Membuat Ukuran Huruf Ukuran Font
1 Ukuran Font 2
Ukuran Font 3 Ukuran Font
4 Ukuran Font 5
Ukuran Font 6
Ukuran Font 7
Font Face
•
Font Face, atribut ini digunakan untuk mengtur jenis huruf yang akan
digunakan.
•
Atribut Face ini diisi dengan string jenis huruf yang akan digunakan, seperti
jenis huruf Arial, Times News Roman, Verdana dan sebagainya.
Latihan Jenis Font
Latihan Membuat Jenis Huruf
Jenis Huruf Arial
Free of Charge – IT 1 / HTML
Jenis Huruf Verdana
Jenis Huruf Tahoma
Font Color
•
Font Color, digunakan untuk mengatur warna huruf yanga akan digunakan.
•
Terdapat dua cara pemberian atribut warna :
•
Menuliskan nama warna secara langsung, seperti Red, Blue, Green
sebagainya
•
Menggunakan nilai RGB (Red Green Blue) dari suatu warna.
Latihan Warna Font
Warna Huruf Merah
Coba tebak warna apa ini
Yang wananya apa ya?
dan
Free of Charge – IT 1 / HTML
TAG LIST
OL = Ordered List
UL = UnOrdered List
LI = List
DL = Definition List
Tag list digunakan untuk menampilkan beberapa daftar. Ada beberapa jenis list yang
dikenal oleh HTML yaitu :
1. List bernomor (ordered list), tag yang dipakai adalah dan diakhiri dengan
2. List tidak bernomor (unordered list) , tag yang dipakai adalah dan
3. List definisi (definition list), tag yang dipakai adalah dan
4. Untuk item listnya, tag yang digunakan dalam list bernomor dan tidak
bernomor adalah dengan perintah dan ditutup dengan . Sedangkan
untuk list definisi, dan sebagai definisi term dan dan
sebagai definisi description (keterangan dari definisi term).
OL (Ordered List)
Bentuk umum untuk membuat list bernomor adalah :
item 1
item 2
item 3
Untuk tipe nomor, nilai yang bisa diisi adalah 1 (Arabic Number), A (huruf besar), a
(huruf kecil), I (romawi kapital), i (romawi kecil).
UL (Unordered List)
Bentuk umum untuk membuat list simbol adalah :
Free of Charge – IT 1 / HTML
item 1
item 2
item 3
Untuk tipe Simbol nilai yang bisa diisikan adalah disc (bulatan), circle (lingkaran),
square (segiempat).
DL (Definition List)
Untuk list definisi, bentuk umumnya adalah :
Term 1Keterangan lengkap mengenai Term 1
Term 2Keterangan lengkap mengenai Term 2
Term 3Keterangan lengkap mengenai Term 3
Contoh script adalah :
FORM HTML
Yang Termasuk Negara ASEAN (memakai angka)
Indonesia
Thailand
Brunei
Yang Termasuk Negara ASEAN (memakai huruf kapital)
Indonesia
Thailand
Free of Charge – IT 1 / HTML
Brunei
Kota Yang Termasuk Negara ASEAN (memakai bulatan)
Indonesia
Thailand
Brunei
Kota Yang Termasuk Negara ASEAN (memakai segiempat)
Indonesia
Thailand
Brunei
Kota-Kota
Besar
Di
Pulau
Jawa
(dalam
bentuk
pustaka)
Bandung
Bandung adalah ibukota Jawa Barat
Jakarta
Jakarta adalah ibukota DKI Jakarta
Surabaya
Surabaya adalah ibukota Jawa Timur
seperti
daftar
Free of Charge – IT 1 / HTML
“Complicated List”
Daftar Menu
1. Makanan
a. Timbel Komplit
b. Timbel Tidak Komplit
c. Sayur Asem
d. Kurang Asem
2. Minuman
i.
Es Campur Rujak
ii.
Es Teller
iii.
Sirup Jagung
3. Makanan Ringan
40.
41.
Kurupuk Jengkol Jajahean
Kurupuk Udang dibalik Batu
List
Daftar Menu
Makanan
Timbel Komplit
Timbel Tidak Komplit
Sayur Asem
Kurang Asem
Minuman
Es Campur Rujak
Es Teller
Sirup Jagung
Makanan Ringan
Kurupuk Jengkol Jajahean
Kurupuk Udang dibalik Batu
“ Closed Ordered List Type
=1”
“ Closed Ordered List Type
= a”
“ Closed Ordered List Type = I “
“ Closed Ordered List Start = n “
Free of Charge – IT 1 / HTML
Penyisipan Citra atau Gambar
Penyisipan citra pada page dimaksudkan agar tampilan dari page tersebut dapat
lebih menarik dan informatif. Ada beberapa hal yang perlu diperhatikan dalam
penyisipan citra atau gambar ke page, yakni:
Ukuran file citra
Ukuran file yang terlalu besar akan membuat pengunjung web harus menunggu
lebih lama dalam mengakses web karena musti terlebih dahulu mendownload file
citra atau gambar yang ukurannya besar
Tipe file citra
Tipe file yang mendukung untuk transmisi melalui aplikasi web adalah JPEG, GIF
atau PNG
File citra dapat disisipkan ke dalam suatu file HTML dengan menggunakan tag
, yakni dalam format penuh:
• Atribut ALT berfungsi sebagai alternatif jika browser yang digunakan oleh
pengguna tidak dapat menampilkan citra.
• Atribut ALIGN dapat diisi dengan nilai-nilai TOP, MIDDLE, BOTTOM, LEFT, dan
RIGHT.
• Atribut WIDTH dapat digunakan untuk mengatur ukuran lebar citra/gambar
dengan menentukan nilai dalam satuan pixel atau persen
• Atribut WIDTH dapat digunakan untuk mengatur ukuran lebar citra/gambar
dengan menentukan nilai dalam satuan pixel atau persen
• Atribut BORDER digunakan
jika gambar/citra akan ditampilkan dengan
menggunakan bingkai. Ketebalan border dapat ditentukan dengan memasukan
nilai dengan satuan pixel
Free of Charge – IT 1 / HTML
Contoh penggunaan tag :
Aligning Text and Images
Teks
ini akan diposisikan pada bagian atas gambar.This text appears at
the top of the image.
Teks ini akan diposisikan pada bagian tengah gambar. This text
appears in the middle of the image.
Male