Kita akan mempelajari BAB selanjutnya adalah :-)
Menyajikan format teks dalam dokumen web
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file
sebagai berikut :
<html>
<head>
<title>Judul
Halaman</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web.
</body> </html>
Struktur file HTML
diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di
dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh
tag<head>…</head> dan tag <body>…</body>.
Bagian yang diapit oleh
tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser.
Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang
berpungsi untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang
diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web
browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi
berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada
pengguna nantinya.
Pengaturan Properti Dokumen
Properti document diatur
melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh
adalah pengaturan warna latar belakng halaman, wana teks, warna link dan
lain-lain.
Kode Warna
Dalam pengaturan warna
menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap
bagian dua gigit kode menunjukkan banyaknya intensitas dari kombinasi warna
merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak
ada warna merah dalam kobinasi warna berikut ini adalah contoh kode warna :
Color
hexadecimal
Color
Hexadecimal White
#FFFFFF Black #000000
Red
#FF0000
Green
#00FF00 Blue #0000FF
Magenta #FF00FF
Cyan
#00FFFF
Yellow
#FFFF00 Aquamarine
#70DB93 Chocolate #5C3317
Violet
#9F5F9F
Brass
#B5A642 Coper #B87333
Pink #FF6EC7
Atribut Elemen <body>
BACKGROUND = Lokasi dan
nama file (latar belakng dokumen image dokumrn)
BGCOLOR = Warna (warna
latar belakng dokumen, default putih)
TEXT = Warna (warna teks
dokumen, default hitam)
LINK = Warna (warna link
dokumen, default biru)
VLINK = Warna (warna
visited link dokumen, default ungu)
ALINK = Warna (warna
aktif link dokumen, default merah)
Elemen Heading <h1>… <h6>
Tag heading berfungsi
untuk memformat heading (judul dan sub-judul) dari suatu halam web. Heading ini
akan memperbesar ukuran huruf unruk setiap jenis heading. Ad 7 buah heading
yang dikenal di HTML, yaitu dari <h1> sampai <h6>.
Menyajikan pemformatan Teks dan Paragraf Web
1. Pemformatan Teks
Berikut ini adalah
contoh yang dihasilkan pemformatan teks pada dokumen web :
HTML menggunakan tag
seperti <b> dan <i> untuk memformat output, seperti teks tebal atau
miring.
Tag HTML ini disebut tag
format, selengkapnya dalam tabel berikut :
Tag HTML Pemformatan
Teks
Tag
Deskripsi <b>
Mendefinisikan teks tebal
<em>
Mendefinisikan teks
menekankan <i> Mendefinisikan teks miring
<small>
Mendefinisikan teks
kecil <strong> Mendefinisikan teks penting
PEMROGRAMAN WEB SEMESTER
1
56 | P a g e
<sub>
Mendefinisikan teks di
bawah garis <sup> Mendefinisikan teks di atas garis
<ins>
Mendefinisikan teks
sisipan <del> Mendefinisikan teks dicoret
<mark>
Mendefinisikan teks
ditandai
Tag HTML “keluaran
computer”
Tag
Deskripsi <code>
Mendefinisikan teks kode komputer
<kbd>
Mendefinisikan teks
keyboard <samp> Mendefinisikan teks contoh kode
<var>
Mendefinisikan teks
variabel <pre> Mendefinisikan teks terformat
HTML Citations,
Quotations, and Definition Tags
Tag
Deskripsi <abbr> Mendefinisikan
sebuah singkatan
<address>
Mendefinisikan alamat
atau kontak informasi <bdo> Mendefinisikan arah teks
<blockquote>
Mendefinisikan sebuah
bagian yang dikutip dari sumber lain <q> Mendefinisikan sebuah kutipan
pendek
<cite>
Mendefinisikan judul
karya <dfn> Mendefinisikan sebuah istilah definisi
2. Pemformatan Paragrap
Tag HTML untuk paragrap
adalah <p>, dengan tag penutup </p>. Berikut ini contohnya :
<p>ini adalah paragrap</p>
Pemrograman Web Semester
1
57 | P a g e
<p>Ini paragrap
yang lain</p>
Menyajikan hasil Pembuatan List
1) Pengertian List
List adalah bagian teks
di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup
tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat
berupa daftar dari makanan dan minuman, beserta harganya.
2) Tipe Daftar dalam Dokumen HTML
Dalam dokumen HTML, tipe
daftar dibedakan menjadi tiga, yaitu :
Daftar berurutan (ordered list)·
Daftar tidak berututan (unordered list)·
Daftar definisi (definition list)·
3) Daftar Berurutan (Ordered List)
Daftar yang berurutan
biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias
menggunakan angka (1, 2, 3,…) maupun karakter alphabet terntentu (a, b, c,…
atau i, ii, iii,…). Daftar yang berurutan umumnya dipakai untuk item-item yang
saling berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau
prosedur dari kegiatan terntentu yang tidak dapat dilakukan secara acak.
Contoh daftar yang
berurutan adalah pada cara membuat dokumen HTML, misalnya :
Langkah-langkah membuat
dokumen HTML :
1. Jalankan
aplikasi Text Editor
2. Isikan kode
HTML ke dalam Text Editor
3. Simpan file dengan
ekstension .htm atau .html
4. Jalankan file HTML
menggunakan aplikasi Web browser untuk menampilkan hasilnya
Untuk membuat suatu
daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered
list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk
memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk
menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di
dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian
perlu ditutup dengan tag </li>.
Contoh penulisan adalah
sebagai berikut : <ol> <li>Urutan Pertama</li>
<li>Urutan
Kedua</li> </ol>
Adapun atribut untuk tag
<ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart,
tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.
Selain tipe default,
tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list
adalah :
Tipe
Keterangan A Membuat
list dengan penomoran berupa karakter A, B, C, dst
a
Membuat list dengan
penomoran berupa karakter a, b, c, dst I Membuat list dengan penomoran berupa
karakter I, II, III, dst
i
Membuat list dengan
penomoran berupa karakter i, ii, iii, dst
4) Daftar Tidak Berurutan (Unordered List)
Daftar yang tidak
berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak.
Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya
dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat
(bullet).
Contoh : Daftar buah
:
Mangga·
Jambu ·
Semangka ·
Rambutan ·
Jeruk·
Untuk membuat suatu
daftar yang tidak berurutan dalam dokumen HTML, digunakan tag <ul>
(unordered list), yang berpasangan dengan tag </ul>. Tag <ul>
digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul>
berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di
dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian
perlu ditutup dengan tag </li>.
Contoh penulisan adalah
sebagai berikut : <ul> <li>Item satu</li> <li>Item
dua</li> </ul>
Adapun atribut untuk tag
<ul> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa
tanda bulatan untuk defaultnya..
Selain tipe default,
tipe lain yang dapat digunakan untuk keperluan unordered list adalah :
Tipe
Keterangan
Contoh Penulisan Disk
Tanda bulatan hitam <ul type=”disk”>
Circle
Tanda bulatan putih
<ul type=”circle”>
Square Tanda kotak <ul type=”square”>
5) Daftar Definisi (Definition List)
Daftar Definisi adalah
suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu,
misalnya daftar definisi istilah HTML.
Contoh : HTML Hyper Text
Mark-up Language WWW World Wide Web
c. Rangkuman Tag Fungsi
<div> ...
</div>
Sebuah wilayah teks yang
akan diformat
<dl> ...
</dl>
Sebuah daftar definisi
<dt> ...
</dt>
Sebuah istilah definisi,
sebagai bagian dari daftar definisi.
<dd> ...
</dd>
Sesuai untuk istilah
definisi, sebagai
bagian dari daftar
definisi
<ol> ...
</ol>
Ordered List atau daftar
berurutan
<ul> ...
</ul>
Un-Ordered List atau
daftar tidak berurutan
<li> ...
</li>
Sebuah daftar item untuk
digunakan dengan <ol> atau <ul>.
Menyajikan format teks dalam dokumen web
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file
sebagai berikut :
<html>
<head>
<title>Judul
Halaman</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web.
</body> </html>
Struktur file HTML
diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di
dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh
tag<head>…</head> dan tag <body>…</body>.
Bagian yang diapit oleh
tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser.
Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang
berpungsi untuk mengeluarkan judul pada tittle bar window web browser.
Bagian kedua, yang
diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web
browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi
berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada
pengguna nantinya.
Pengaturan Properti Dokumen
Properti document diatur
melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh
adalah pengaturan warna latar belakng halaman, wana teks, warna link dan
lain-lain.
Kode Warna
Dalam pengaturan warna
menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap
bagian dua gigit kode menunjukkan banyaknya intensitas dari kombinasi warna
merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak
ada warna merah dalam kobinasi warna berikut ini adalah contoh kode warna :
Color
hexadecimal
Color
Hexadecimal White
#FFFFFF Black #000000
Red
#FF0000
Green
#00FF00 Blue #0000FF
Magenta #FF00FF
Cyan
#00FFFF
Yellow
#FFFF00 Aquamarine
#70DB93 Chocolate #5C3317
Violet
#9F5F9F
Brass
#B5A642 Coper #B87333
Pink #FF6EC7
Atribut Elemen <body>
BACKGROUND = Lokasi dan
nama file (latar belakng dokumen image dokumrn)
BGCOLOR = Warna (warna
latar belakng dokumen, default putih)
TEXT = Warna (warna teks
dokumen, default hitam)
LINK = Warna (warna link
dokumen, default biru)
VLINK = Warna (warna
visited link dokumen, default ungu)
ALINK = Warna (warna
aktif link dokumen, default merah)
Elemen Heading <h1>… <h6>
Tag heading berfungsi
untuk memformat heading (judul dan sub-judul) dari suatu halam web. Heading ini
akan memperbesar ukuran huruf unruk setiap jenis heading. Ad 7 buah heading
yang dikenal di HTML, yaitu dari <h1> sampai <h6>.
Menyajikan pemformatan Teks dan Paragraf Web
1. Pemformatan Teks
Berikut ini adalah
contoh yang dihasilkan pemformatan teks pada dokumen web :
HTML menggunakan tag
seperti <b> dan <i> untuk memformat output, seperti teks tebal atau
miring.
Tag HTML ini disebut tag
format, selengkapnya dalam tabel berikut :
Tag HTML Pemformatan
Teks
Tag
Deskripsi <b>
Mendefinisikan teks tebal
<em>
Mendefinisikan teks
menekankan <i> Mendefinisikan teks miring
<small>
Mendefinisikan teks
kecil <strong> Mendefinisikan teks penting
PEMROGRAMAN WEB SEMESTER
1
56 | P a g e
<sub>
Mendefinisikan teks di
bawah garis <sup> Mendefinisikan teks di atas garis
<ins>
Mendefinisikan teks
sisipan <del> Mendefinisikan teks dicoret
<mark>
Mendefinisikan teks
ditandai
Tag HTML “keluaran
computer”
Tag
Deskripsi <code>
Mendefinisikan teks kode komputer
<kbd>
Mendefinisikan teks
keyboard <samp> Mendefinisikan teks contoh kode
<var>
Mendefinisikan teks
variabel <pre> Mendefinisikan teks terformat
HTML Citations,
Quotations, and Definition Tags
Tag
Deskripsi <abbr> Mendefinisikan
sebuah singkatan
<address>
Mendefinisikan alamat
atau kontak informasi <bdo> Mendefinisikan arah teks
<blockquote>
Mendefinisikan sebuah
bagian yang dikutip dari sumber lain <q> Mendefinisikan sebuah kutipan
pendek
<cite>
Mendefinisikan judul
karya <dfn> Mendefinisikan sebuah istilah definisi
2. Pemformatan Paragrap
Tag HTML untuk paragrap
adalah <p>, dengan tag penutup </p>. Berikut ini contohnya :
<p>ini adalah paragrap</p>
Pemrograman Web Semester
1
57 | P a g e
<p>Ini paragrap
yang lain</p>
Menyajikan hasil Pembuatan List
1) Pengertian List
List adalah bagian teks
di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup
tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat
berupa daftar dari makanan dan minuman, beserta harganya.
2) Tipe Daftar dalam Dokumen HTML
Dalam dokumen HTML, tipe
daftar dibedakan menjadi tiga, yaitu :
Daftar berurutan (ordered list)·
Daftar tidak berututan (unordered list)·
Daftar definisi (definition list)·
3) Daftar Berurutan (Ordered List)
Daftar yang berurutan
biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias
menggunakan angka (1, 2, 3,…) maupun karakter alphabet terntentu (a, b, c,…
atau i, ii, iii,…). Daftar yang berurutan umumnya dipakai untuk item-item yang
saling berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau
prosedur dari kegiatan terntentu yang tidak dapat dilakukan secara acak.
Contoh daftar yang
berurutan adalah pada cara membuat dokumen HTML, misalnya :
Langkah-langkah membuat
dokumen HTML :
1. Jalankan
aplikasi Text Editor
2. Isikan kode
HTML ke dalam Text Editor
3. Simpan file dengan
ekstension .htm atau .html
4. Jalankan file HTML
menggunakan aplikasi Web browser untuk menampilkan hasilnya
Untuk membuat suatu
daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered
list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk
memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk
menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di
dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian
perlu ditutup dengan tag </li>.
Contoh penulisan adalah
sebagai berikut : <ol> <li>Urutan Pertama</li>
<li>Urutan
Kedua</li> </ol>
Adapun atribut untuk tag
<ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart,
tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.
Selain tipe default,
tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list
adalah :
Tipe
Keterangan A Membuat
list dengan penomoran berupa karakter A, B, C, dst
a
Membuat list dengan
penomoran berupa karakter a, b, c, dst I Membuat list dengan penomoran berupa
karakter I, II, III, dst
i
Membuat list dengan
penomoran berupa karakter i, ii, iii, dst
4) Daftar Tidak Berurutan (Unordered List)
Daftar yang tidak
berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak.
Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya
dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat
(bullet).
Contoh : Daftar buah
:
Mangga·
Jambu ·
Semangka ·
Rambutan ·
Jeruk·
Untuk membuat suatu
daftar yang tidak berurutan dalam dokumen HTML, digunakan tag <ul>
(unordered list), yang berpasangan dengan tag </ul>. Tag <ul>
digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul>
berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.
Masing-masing item di
dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian
perlu ditutup dengan tag </li>.
Contoh penulisan adalah
sebagai berikut : <ul> <li>Item satu</li> <li>Item
dua</li> </ul>
Adapun atribut untuk tag
<ul> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa
tanda bulatan untuk defaultnya..
Selain tipe default,
tipe lain yang dapat digunakan untuk keperluan unordered list adalah :
Tipe
Keterangan
Contoh Penulisan Disk
Tanda bulatan hitam <ul type=”disk”>
Circle
Tanda bulatan putih
<ul type=”circle”>
Square Tanda kotak <ul type=”square”>
5) Daftar Definisi (Definition List)
Daftar Definisi adalah
suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu,
misalnya daftar definisi istilah HTML.
Contoh : HTML Hyper Text
Mark-up Language WWW World Wide Web
c. Rangkuman Tag Fungsi
<div> ...
</div>
Sebuah wilayah teks yang
akan diformat
<dl> ...
</dl>
Sebuah daftar definisi
<dt> ...
</dt>
Sebuah istilah definisi,
sebagai bagian dari daftar definisi.
<dd> ...
</dd>
Sesuai untuk istilah
definisi, sebagai
bagian dari daftar
definisi
<ol> ...
</ol>
Ordered List atau daftar
berurutan
<ul> ...
</ul>
Un-Ordered List atau
daftar tidak berurutan
<li> ...
</li>
Sebuah daftar item untuk
digunakan dengan <ol> atau <ul>.
0 komentar: