Format Teks Halaman Web

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 :

SEKIAN PEMBAHASAN TENTANG FORMAT TEKS HTML, SEMOGA BERMANFAAT..

Bee01

Breaking News