Anda di halaman 1dari 27

FORMAT TEKS

HALAMAN WEB
Surya R. Labetubun
Apa yang Akan Dipelajari?
Anatomi dokumen web.
Pemformatan teks dan
paragrap.
Pembuatan list minimal.
Pembuatan list kombinasi.
Anatomi Dokumen Web
Secara umum, dokumen web dibagi menjadi
dua bagian, yakni: head dan body.

<html>
<head>…informasi tentang dokumen
HTML
</head>
<body>
Informasi yang ditampilkan oleh browser
</body>
</html>
Bagian HEAD
Elemen head ditandai
dengan tag <head> di
awal dan tag </head> di
akhir. Bagian ini dapat
berisi informasi dari
dokumen HTML
bersangkutan.
Bagian BODY
Bagian body ditandai
dengan tag <body> dan
</body>. Body umumnya
merupakan bagian terbesar
dari setiap dokumen HTML
yang dapat meliputi
paragraf, gambar, tautan,
tabel, dan lain sebagainya.
Pemformatan Teks dan Paragraf
Beberapa element dalam format teks
dan paragraf, yaitu:
- Element P
- Element BR
- Element HEADER
- Element BOLD
- Element ITALIC
- Element UNDERLINE
- Element FONT
- Element HR
Element P
Element P berfungsi untuk
ganti paragraf yang diikuti
dengan baris kosong di awal
dan akhir paragraf. Tag
penutup </p> sifatnya optional
jika suatu paragraf diikuti oleh
paragraf berikutnya. Jika tag
</p> diabaikan, maka paragraf
itu tidak akan diikuti dengan
baris kosong di akhir paragraf.
Element P mempunyai attribute
yaitu align yang bernilai "left",
"center", "right" yang
menspesifikasikan posisi tepi
horizontal dari paragraf
(default: "left").

Sintaks:
<p align="left"|"center"|"right">
..........................
</p>
Element BR
Element BR berfungsi untuk
ganti baris. Dan element BR ini
tidak mempunyai tag penutup.

Sintaks:
<br>
Element HEADER
Element H1,H2,H3,H4,H5,H6
berfungsi untuk membuat header
dengan format 6 jenis ukuran
huruf dan tercetak tebal. Nilai
ukuran huruf terbesar adalah H1
dan terkecil adalah H6. Element
ini mempunyai attribute yaitu
align yang bernilai "left",
"center", "right" yang
menspesifikasikan posisi
horizontal dari header (default:
"left").
Sintaks:
<hx
align="left"|"center"|"right">
..........................
</hx>

x : 1 ... 6
Element BOLD
Element B berfungsi untuk
membuat tampilan teks
tercetak tebal (bold).

Sintaks:
<b>..........................</b>
Element ITALIC
Element I berfungsi untuk
membuat tampilan teks
tercetak miring (italic).

Sintaks:
<i>..........................</i>
Element UNDERLINE
Element U berfungsi untuk
membuat tampilan teks
tercetak garis bawah
(underline).

Sintaks:
<u>..........................</u>
Element FONT
Element FONT berfungsi untuk
merubah jenis, ukuran dan warna
dari tampilan huruf. Element ini
mempunyai attribute color untuk
merubah warna huruf, face untuk
merubah jenis huruf (jika lebih dari
satu jenis huruf, harus dibatasi
dengan koma), dan size untuk
merubah ukuran huruf (pixel).
Sintaks:
<font color="warna" face="font"
size="pixel">..........................</font>
Element HR
Element HR berfungsi untuk
membuat suatu garis
horizontal. Element ini tidak
mempunyai tag penutup dan
mempunyai attribute align
untuk menempatkan posisi
secara horizontal ("left",
"center", "right"), size untuk
ukuran ketebalan garis
("pixel"), width untuk ukuran
panjang garis ("persen").
Sintaks:
<hr align="left"|"center"|"right" size="pixel"
width="persen" >
Pembuatan List/Daftar
Terdapat tiga daftar utama yang dapat
dibuat dengan HTML, yaitu:

- Unordered List (Daftar Tidak Terurut),


seperti namanya, memungkinkan kita
untuk membuat daftar dari hal-hal yang
tidak memiliki urutan tertentu.
- Ordered List (Daftar Terurut),
kembali lagi, sesuai namanya,
memberikan kita fasilitas untuk
membuat daftar hal-hal yang
harus diurutkan dengan benar.
- Definition List (Daftar
Definisi), digunakan untuk
membuat daftar definisi dari
istilah-istilah yang ada dalam
dokumen, digunakan terutama
untuk glosarium dan indeks.
Unordered List
Pembuatan unordered list
dilakukan dengan
menggunakan elemen ul
(unordered list), yang
merupakan sebuah block level
element. Untuk mengisikan
daftar, kita dapat menggunakan
elemen li (list item), seperti
pada kode di bawah:
<ul>
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ul>
Ordered List
Elemen untuk pembuatan
ordered list yaitu ol (ordered
llist), dan isi dari list sendiri
dibuat dengan menggunakan
elemen li, sama seperti pada
unordered lsit.
<ol>
Ordered List
<li>Windows 8</li>
<li>Microsoft Office 2013</li>
<li>Visual Studio 2012</li>
</ol>
Definition List
Membuat glosarium dalam HTML dilakukan
dengan menggunakan elemen dl (definition
list), dan kemudian alih-alih menggunakan li
untuk mengisikan daftar, kita menggunakan
dua elemen lain, yaitu dt (definition term -
istilah yang akan didefinisikan) dan dd
(definition description - penjelasan dari
istilah).
<dl>
<dt>study</dt>
<dd>the devotion of
time and attention to
acquiring knowledge
on an academic subject,
esp. by means of
books</dd>
<dt>design</dt>
<dd>a plan or drawing produced to show
the look and function or workings of a
building, garment, or other object before
it is built or made</dd>
<dd>purpose, planning, or intention
that exists or is thought to exist behind an
action, fact, or material object</dd>
<dt>business</dt>
<dt>work</dt>
<dd>a person's regular occupation,
profession, or trade</dd>
</dl>

Anda mungkin juga menyukai