3.2 Memahami format teks pada halaman web
Anatomi halaman web
1. HTML (Hypertext Markup Language).
Dikatakan markup language karena HTML berfungsi untuk
‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal
ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag
pada file teks biasa tersebut.
‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal
ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag
pada file teks biasa tersebut.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai
dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag
ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag
<contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut
sebagai elemen dan biasanya dalam suatu elemen terdapat atributatribut untuk mengatur elemen itu. Dalam penulisan tag HTML tidaklah case sensitive artinya
pengguna huruf kecil ataupun capital tidaklah menjadi masalah.
dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag
ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag
<contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut
sebagai elemen dan biasanya dalam suatu elemen terdapat atributatribut untuk mengatur elemen itu. Dalam penulisan tag HTML tidaklah case sensitive artinya
pengguna huruf kecil ataupun capital tidaklah menjadi masalah.
Struktur Dasar Dokumen 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.
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.
Pemformatan teks dan paragraf
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 :
seperti teks tebal atau miring.
Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :
Tag HTML Pemformatan Teks
<b> Mendefinisikan teks tebal
<em> Mendefinisikan teks menekankan
<i> Mendefinisikan teks miring
<small> Mendefinisikan teks kecil
<strong> Mendefinisikan teks penting
<sub> Mendefinisikan teks di bawah garis
<sup> Mendefinisikan teks di atas garis
<ins> Mendefinisikan teks sisipan
<del> Mendefinisikan teks dicoret
<mark> Mendefinisikan teks ditandai
<b> Mendefinisikan teks tebal
<em> Mendefinisikan teks menekankan
<i> Mendefinisikan teks miring
<small> Mendefinisikan teks kecil
<strong> Mendefinisikan teks penting
<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”
<code> Mendefinisikan teks kode komputer
<kbd> Mendefinisikan teks keyboard
<samp> Mendefinisikan teks contoh kode
<var> Mendefinisikan teks variabel
<pre> Mendefinisikan teks terformatHTML Citations, Quotations, and Definition Tags
<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 defines
<code> Mendefinisikan teks kode komputer
<kbd> Mendefinisikan teks keyboard
<samp> Mendefinisikan teks contoh kode
<var> Mendefinisikan teks variabel
<pre> Mendefinisikan teks terformatHTML Citations, Quotations, and Definition Tags
<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 defines
Pemformatan ParagrapTag HTML untuk paragrap adalah <p>, dengan tag penutup </p>.
Pembuatan list minimal
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. List dapat juga berupa prosedur (urutan langkah-langkah) dari
suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan
dari langkah pertama sampai langkah terakhir.
kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema
kuliner, list dapat berupa daftar dari makanan dan minuman, beserta
harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari
suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan
dari langkah pertama sampai langkah terakhir.
Tipe Daftar dalam Dokumen HTMLDalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :
Daftar berurutan (ordered list) Daftar tidak berututan (unordered list)
Daftar definisi (definition list)
Daftar berurutan (ordered list) Daftar tidak berututan (unordered list)
Daftar definisi (definition list)
1) 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.
2) 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).
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).
3) Daftar Definisi (Definition List)Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah
tertentu, misalnya daftar definisi istilah HTML
tertentu, misalnya daftar definisi istilah HTML
Pembuatan list kombinasi
List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan
sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau
mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali
dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan
memberi atribut start=” ”
sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau
mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali
dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan
memberi atribut start=” ”
