Bab 2

BAB 2 : FORMAT TEKS HALAMAN WEB
A. STRUKTUR HTML
1. Elemen Halaman
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head,
body, title, link, text, paragraph, list, dan sebagainya. Tag merupakan bentuk simbol
berbentuk “<” sebagai tanda awal penulisan elemen dan diakhiri tanda “>” sebagai
tanda akhir penulisan sebuah elemen. Format penulisan sebuah elemen adalah
sebagai berikut.
<tag_awal_nama_elemen>
“isi script program html”
</tag_akhir_nama_elemen>
Tidak semua elemen dalam dokumen HTML dalam penulisannya harus menggunakan
tag awal dan akhir secara berpasangan. Contohnya adalah sebagai berikut:
~ untuk mencetak garis horizontal menggunakan tag <hr>
~ untuk mencetak kalimat pada baris selanjutnya menggunakan tag 
~ penomoran sebuah daftar teks menggunakan list item dengan tag <li>
~ pembuatan format teks dalam bentuk paragraph menggunakan tag 
Kelebihan dokumen web berbasis HTML adalah kemampuan untuk mendukung
penulisan script bahasa pemrograman web lainnya dalam badan HTML seperti
Vbscript, JavaScript, PHP, ASP, dan Ajax.
2. Bagian Head
Bagian head memiliki fungsi untuk memberikan informasi tentang halaman web itu
sendiri, baik judul halaman, konten, jenis halaman, dan jenis karatket penulisan. Diawali
dengan <head> diakhiri dengan </head>. Contoh:
<head>
<title>ini adalah halaman web</title>
</head>
Penjelasan:
~ <head> = sebagai awal penanda script bagian head HTML
~ <title> = sebagai awal tanda judul sebuah halaman web
~ ini adalah halaman web = judul halaman web yang akan ditampilkan
~ </title> = tag akhir title
~ </head> = tag akhir head
3. Bagian Body
Diawali dengan <body> diakhiri dengan </body>. Perhatikan contoh script berikut:
<body>
Isi halaman web
</body>
<!—file studikasus2-1.html-->
<html>
<head>
<title>ini biodataku</title>
</head>
<body>
Ini adalah web pertama saya dengan html
</body>
<html>
4. Mengganti Baris
Untuk mencetak baris selanjutnya menggunakan tag .
~ mencetak kalimat tanpa tag 
<html>
<head>
<title>mencetak halaman web tanpa tag br</title>
</head>
<body>
NIS : 110211178
Nama : Farah Dea Fanny
Kelas : XII TKJC
</body>
</html>
~ mencetak kalimat dengan tag 
<html>
<head>
<title>mencetak halaman web dengan br</title>
</head>
<body>
NIS : 110211178 
Nama : Farah Dea Fanny 
Kelas : XII TKJC
</body>
</html>
5. Membentuk Paragraf
Dengan memberikan tanda tag awal paragraf diikuti teks yang akan ditampilkan
pada web browser dan diakhiri tag akhir paragraf , maka informasi teks akan
disusun menyerupai model paragraf.
6. Garis Horizontal
Untuk membuat garis horizontal menggunakan tag <hr>.
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
Kalimat diatas garis mendatar. <hr> kalimat dibawah ini garis mendatar.
</body>
</html>
7. Membuat Komentar
Untuk menambahkan komentar diawali dengan tanda “<!—“ diikuti komentar kemudian
diakhiri dengan tanda “-->”
<html>
<head>
<title>garis horizontal</title> <!—judul halaman web-->
</head>
<body>
Kalimat diatas garis mendatar. <hr> kalimat dibawah ini garis mendatar. <!—
konten halaman web-->
</body>
</html>
B. FORMAT TEKS
1. Memanipulasi Tampilan Teks pada Halaman Web
a. Mencetak tebal teks : teks
b. Mencetak tebal teks dengan strong : teks
c. Mencetak miring teks : teks
d. Mencetak teks bergaris bawah : teks
e. Memberi tekanan teks : teks
f. Membesarkan huruf : <big>teks</big>
g. Mengecilkan huruf : teks
h. Mencetak superscript teks : teks
i. Mencetak subscript teks : teks
j. Mencetak teks berkedip : <blink>teks</blink>
k. Mencetak teks berjalan : <marquee>teks</marquee>
l. Mencetak teks dengan coretan : <s>teks</s>
2. Format Heading
Fungsi utama heading adalah untuk mengatur besar ukuran teks dalam halaman web
yang biasanya diterapkan pada sebuah judul atau tema informasi yang terdapat pada
halaman web. Penulisan heading diawali dengan tag <h1> dan diakhiri dengan tag
</h1> ,dengan formasi heading yang memiliki 6 ukuran dari 1 sampai 6.
3. Bentuk Preformat teks
Seperti telah dijelaskan sebelumnya bahwa untuk mencetak teks pada baris selanjutnya
digunakan tag , sementara untuk format paragraf menggunakan tag . Besar
jarak spasi antarbaris dalam halaman web adalah 1 spasi, sehingga ketika ingin
menambahkan jaraknya menjadi 2 spasi, perlu ditambahkan tag . Dalam HTML
fungsi preformat teks yang berguna untuk mencetak teks pada web browser sesuai
jarak, ukuran, dan lebar teks dengan penulisan kode program HTML bagian body
dengan menambahkan tag awal <pre> dan diakhiri tag </pre>.
4. Format Address
Tag <address> merupakan standar kode HTML yang digunakan untuk penulisan
sebuah alamat institusi yang berfungsi sebagai informasi kontak sebuah institusi. Hasil
output yang ditampilkan akan dicetak miring, dan ketika penulisan alamat lebih dari satu
baris, maka harus diserakan tag ganti baris.
5. Format Keluaran Program Komputer
Bebrapa script HTML yang dapat digunakan untuk mendefinisikan proses secara
komputerisasi adalah sebagai berikut.
~ <code>...</code> = untuk mendefinisikan kode pogram tertentu yang ditampilkan
pada web page
~ <var>...</var> = untuk mendefinisikan variabel dalam program
~ <samp>...</samp> = untuk mendefinisikan contoh keluaran program
~ <tt>...</tt> = untuk mendefinisikan teletype text
6. Format Abbr dan Acronym
Tag <abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi
kepanjangan sebuah teks. Ini sering digunakan untuk mempersingkat sebuah istilah
dengan tujuan mempermudah pengguna ketika menjelajah internet dalam mencari
keyword tertentu.
7. Mengubah Arah Tampilan Teks
Untuk mengubah arah tampilan penulisan teks dari kanan ke kiri menggunakan <bdo>.
Secara default web browser akan mencetak teks dari arah kiri menuju ke kanan,
sebagai contoh “selamat datang”. Dengan tag <bdo dir=”rtl”>, maka hasil penulisannya
menjadi terbalik. Argument rtl digunakan untuk menulis teks dari arah kanan ke kiri
(right to left), sedangkan argument ltr digunakan untuk menulis teks dari arah kiri ke
kanan (left to right).
8. Membuat Kutipan Teks
a. Tag <q> digunakan untuk membuat kutipan pendek. Kutipan menggunakan tag <q>
akan ditulis tanpa menjorok ke dalam halaman web. Selain itu kutipan diawali dengan
tanda petik dua (“) dan diakhiri dengan tanda petik dua (“)
b. Tag <blockquote>, digunakan untuk menyatakan kutipan panjang, yang akan diawali
dengan penulisan teks secara menjorok kedalam.
9. Penyisipan dan Penghapusan Teks
Untuk menghapus data salah, dapat digunakan tag <del> yang memiliki efek teks
dicoret tengah. Efek teks dicoret mirip dengan efek teks ketika menggunakan tag <s>
seperti yang telah dijelaskan pada subbab sebelumnya. Untuk melakukan koreksi
informasi yang salah pada web, dapat digunakan tag <ins> yang memiliki efek tulisan
bergaris bawah seperti efek tulisan dengan tag <a href=” “>
C. LIST HTML
List berarti daftar, ukuran, rangkaian, atau menu. List HTML merupakan bentuk struktur
dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
1. List Bernomor Urut (Ordered List)
List bernomor adalah teknik menampilkan daftar tertentu dalam halaman web
menggunakan item penomoran, seperti 1,2,3 hingga seterusnya. Untuk menggunakan
List bernomor, digunakan tag <ol> dan diakhiri dengan </ol>.
Argumen Fungsi
I Untuk menampilkan nomor urut dengan angka dalam romawi
besar (I,II,III, dan seterusnya)
i Untuk menampilkan nomor urut dengan angka dalam romawi
kecil (i,ii,iii, dan seterusnya
a Untuk menampilkan nomor urut dengan menggunakan abjad kecil
(a,b,c,d, dan seterusnya)
A Untuk menampilkan nomor urut dengan menggunakan abjad
besar (A,B,C,D, dan seterusnya)
2. List Tanpa Urutan Nomor (Unordered List)

Untuk membuat daftar tertentu tanpa mempergunakan sebuah urutan penomoran dapat
menggunakan tag <ul> dan diakhiri dengan </ul>. Ada beberapa macam jenis tanda
unordered list seperti berikut
Argumen Fungsi
Disc Untuk menampilkan pengurutan dengan tanda lingkaran (bullet)
tanpa warna pada sisi tengahnya
Square Untuk menampilkan pengurutan dengan tanda kotak hitam
penuh
Circle Untuk menampilkan pengurutan dengan tanda lingkaran (bullet)
hitam penuh
3. List Bersarang
<html>
<head>
<title>list bersarang</title>
</head>
<body>
Menu bersarang
<ol>
<li>daging</li>
<ul>menu ayam
<li>ayam bakar</li>
<li>bebek panggang</li>
</ul>
<li>sayur</li>
<ol>menu sayur
<li>sayur sup</li>
<li>sayur sup</li>
</ol>
</body>
</html>
4. List Terdefinisi
List terdefinisi (definition list) adalah sebuah daftar yang menggunakan tag <dl> dan
diakhiri dengan </dl>. Untuk menyatakan terminasi sub list digunakan tag <dt> dan
diakhiri dengan </dt>, sedangkan untuk menjelaskan pengertian dari sub list yang telah
dijelaskan sebelumnya digunakan tag <dd> dan diakhiri dengan </dd> yang memiliki
efek penulisan teks agak menjorok kedalam.
A. Struktur Dasar HTML
Untuk membantu mengingat kode-kode HTML, sebaiknya gunakan aplikasi Sublime atau
Notepad++ sebagai editor teks default.
1. Elemen Halaman
Merupakan bagian-bagian pembentuk halaman web yang meliputi head, body, title, link,
text, paragraph, list, dsb. Setiap elemen HTML ditandai dengan symbol tag. Tag merupakan
bentuk symbol berbentuk “<” sebagai awal penulisan elemen dan diakhiri “>” sebagai
tanda akhir penulisan elemen.
Akan tetapi, tidak semua elemen dalam penulisannya harus menggunakan tag awal dan
akhir secara berpasangan.
Penulisan kode elemen terdiri dari tag awal dan tag akhir.
Formatnya sebagai berikut.
↠
Contohnya :
 Untuk mencetak garis horizontal menggunakan tag <hr>
 Untuk mencetak kalimat pada baris selanjutnya menggunakan tag 
 Penomoran sebuah daftar teks menggunakan list item dengan tag <li>
 Pembuatan format teks dalam bentuk paragraph menggunakan tag 
2. Bagian Head
Fungsinya memberikan informasi tentang halaman web itu sendiri.
Formatnya :
<head>
<title>Ini adalah halaman web</title>
</head>
3. Bagian Body
Pada bagian ini, semua script akan diterjemahkan menjadi bentuk informasi pada halaman
web.
Formatnya :
<body>
Isi halaman web
</body>
4. Mengganti Baris
Menggunakan tag 
5. Membentuk Paragraf
Dengan memberikan tag awal dan tag akhir 
6. Garis Horizontal
Tagnya <hr> , sehingga secara otomatis informasi teks yang dituliskan setelah
tag <hr> akan ditampilkan pada baris selanjutnya di bawah garis mendatar tersebut.
7. Membuat Komentar
Diawali tanda “”. Penulisan komentar dalam kode program
HTML tidak akan memengaruhi penerjemahan kode program web browser karena tidak
dieksekusi.
Sehingga secara keseluruhan formatnya seperti di bawah ini.
Dan hasilnya menjadi
B. Format Teks
1. Memanipulasi Tampilan Teks pada Halaman Web

a. Menetak tebal teks
Format: teks dicetak tebal
b. Mencetak tebal teks dengan tag strong
Format: teks dicetak tebal dengan strong
c. Menetak miring teks
Format: teks dicetak miring
d. Mencetak teks bergaris bawah
Format: teks dicetak dengan garis bawah
e. Memberi tekanan teks
Format: teks dicetak dengan tekanan
f. Membesarkan huruf
Format: <big>membesarkan teks yang dicetak</big>
g. Mengecilkan huruf
Format: mengecilkan teks
h. Mencetak superscript teks
Format: teks dicetak dengan superscript
i. Mencetak subscript teks
Format: teks dicetak dengang subscipt
j. Mencetak teks berkedip
Format: <blink>teks dicetak kelap-kelip</blink>
k. Mencetak teks berjalan
Format: <marquee>teks dicetak berjalan</marquee>
l. Mencetak teks dengan coretan
Format: <s>tampilan teks dicoret dengan garis</s>
Sehingga secara keseluruhan formatnya adalah:
Dan hasilnya sebagai berikut.
2. Format Heading
Fungsinya untuk mengatur besar ukuran teks dalam halaman web yang biasanya
diterapkan pada sebuah judul atau tema informasi uang terdapat pada halaman web.
Penulisan diawali dengan tag <h1> dan diakhiri tag </h1>,dengan formasi heading yang
memilik 6 ukuran dari 1 (terbesar) sampai 6 (terkecil).
Formatnya adalah:
Dan hasilnya:
3. Bentuk Preformat Teks

Fungsinya adalah mencetak teks pada web browser sesuai jarak, ukuran dan lebar teks
dengan penulisan tag <pre>... </pre>.
Format :
4. Format Address
Digunakan untuk penulisan sebuah alamat institusi yang berfungsi sebagai informasi
kontak sebuah instiusi. Output yang ditampilkan akan dicetak miring.
Contoh :
Hasil :
5. Format Keluaran Program Komputer

Beberap script HTML yang dapat digunakan untuk mendefinisakn proses secara
komputerisasi adalah:
 <code>…</code>
Script ini digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada
web page.
 <var>…</var>
Digunakan untuk mendefinisikan variable dalam program.
 <samp>..</samp>
untuk mendefinisikan contoh keluaran program.
 <tt>…</tt>
Untuk mendefinisikan teletype text.
Contoh secara keseluruhan sbb:
6. Format Abbr dan Acronym

Digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks. Kepanjangan dari
sebuah singkatan istilah tidak akan ditampilkan dalam halaman web, tetapi akan membantu system
penelusuran keyword dalam mesin pencari internet, seperti Google dan Yahoo.
Format:
Hasil:
7. Mengubah Arah Tampilan Teks

Untuk mengubah arah penulisan teks dari kanan ke kiri seperti ketentuan penulisan huruf
Arab, dapat menggunakan tag <bdo>.
Contohnya :
8. Membuat Kutipan Teks
 Tag <q> untuk membuat kutipan pendek. Kutipan ini akan ditulis tanpa menjorok ke
dalam halaman web. Selain itu, kutipan diawali dan diakhiri dengan tanpa petik
dua(“).
 Tag <blockquote>, untuk menyatakan kutipan panjang, yang akan diawali dengan
penulisan teks secara menjorok ke dalam.
Contoh :
9. Penyisipan dan Penghapusan Teks

Untuk menghapus data yang salah, dapat digunakan tag <del> yang memiliki efek teks
dicoret tengah. Sementara itu, untuk melakukan koreksi informais yang salah pada web,
dapat digunakan tag <ins> yang memiliki efek tulisan bergaris bawah.
Contohnya :
C. List HTML
1. List Bernomor Urut (Ordered List)

Teknik menampilkan daftar tertentu dalam halaman web menggunakan item penomoran,
seperti 1,2,3, dst. Tagnya <ol>…</ol>
Contoh :
Adapun untuk menapilkan nomor urut dengan model tertentu, dapat digunakan argument
berikut.
Argumen Fungsi
I Menampilkan nomor urut dengan angka dalam romawi besar(I, II,
III, dst)
i Menampilkan nomor urut dengan angka romawi kecil (i, ii, iii, dst)
a Menampilkan nomor urut dengan menggunakan abjad kecil (a, b, c,
dst)
A Menampilkan nomor urut dengan menggunakan abjad besar (A, B,
C, dst)
Contoh :
2. List tanpa Urutan Nomor (Unordered List)

Tag <ul>..</ul>
Ada beberapa jenis tanda unordered list seperti berikut.
Argumen Fungsi
Disc Menampilkan pengurutan dengan tanda
lingkaran(bullet) tanpa warna pada sisi
tengahnya
Square Menampilkan pengurutan dengan tanda kotak
hitam penuh
Circle Menampilkan pengurutan dengan tanda
lingkaran(bullet) hitam penuh
Contoh :
3. List Bersarang (nested list)
Merupakan suatu subdaftar baru di daam sebuah daftar.
Contoh :
4. List Terdefinisi
Menggunakan tag <dl>..</dl>.
Untuk menyatakan terminasi sub list, gunakan tag <dt>…</dt>.
Untuk menjelaskan pengertian dari sub list digunakan tag <dd>…</dd> yang memiliki efek
penulisan teks agak menjorok ke dalam.
Contoh :

Bab 2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab 2

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 2 : FORMAT TEKS HALAMAN WEB

2. List Tanpa Urutan Nomor (Unordered List)

Sehingga secara keseluruhan formatnya seperti di bawah ini.

Dan hasilnya menjadi

1. Memanipulasi Tampilan Teks pada Halaman Web

Dan hasilnya sebagai berikut.

3. Bentuk Preformat Teks

5. Format Keluaran Program Komputer

6. Format Abbr dan Acronym

7. Mengubah Arah Tampilan Teks

9. Penyisipan dan Penghapusan Teks

1. List Bernomor Urut (Ordered List)

2. List tanpa Urutan Nomor (Unordered List)

Anda mungkin juga menyukai