FORMAT TEKS HALAMAN WEB
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 <br>
~ penomoran sebuah daftar
teks menggunakan list item dengan tag <li>
~ pembuatan format teks
dalam bentuk paragraph menggunakan tag <p>
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 <br>.
~ mencetak kalimat tanpa
tag <br>
<!—file studikasus2-2.html-->
<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 <br>
<!—file studikasus2-3.html-->
<html>
<head>
<title>mencetak
halaman web dengan br</title>
</head>
<body>
NIS : 110211178
<br>
Nama : Farah Dea Fanny
<br>
Kelas : XII TKJC
</body>
</html>
5. Membentuk Paragraf
Dengan memberikan tanda
tag awal paragraf <p> diikuti teks yang akan ditampilkan pada web browser
dan diakhiri tag akhir paragraf </p>, maka informasi teks akan disusun menyerupai
model paragraf.
6. Garis Horizontal
Untuk membuat garis
horizontal menggunakan tag <hr>.
<!—file studikasus2-6.html-->
<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 “-->”
<!—file studikasus2-7.html-->
<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 :
<b>teks</b>
b. Mencetak tebal teks dengan strong :
<strong>teks</strong>
c. Mencetak miring teks :
<i>teks</i>
d. Mencetak teks bergaris bawah :
<u>teks</u>
e. Memberi tekanan teks :
<em>teks</em>
f.
Membesarkan
huruf : <big>teks</big>
g. Mengecilkan huruf :
<small>teks</small>
h. Mencetak superscript teks :
<sup>teks</sup>
i.
Mencetak
subscript teks : <sub>teks</sub>
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
<br>, sementara untuk format paragraf menggunakan tag <p>. Besar
jarak spasi antarbaris dalam halaman web adalah 1 spasi, sehingga ketika ingin
menambahkan jaraknya menjadi 2 spasi, perlu ditambahkan tag <br>. 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
<!—file
studikasus2-20.html-->
<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.
Artikelnya sangat membantu dan mudah dipahami Gan. Dengan adanya artikel tentang format teks dan tulisan HTML ini membantu saya untuk mempelajari dasar-dasar pemrograman web. Semoga kedepannya bisa membuat kreasi artikel yang bermanfaat lagi Gan. Perkenalkan nama saya Tessa Hervika ini alamat website kampus saya https://www.atmaluhur.ac.id/.
BalasHapusWah, Terima Kasih Broo Artikel mengenai Format Teks HTML ini sangat membantu saya dn teman2 yang lain juga yg baru belajar tentang dasar- dasar pemrograman web, Terus berkarya lagi ya , smoga bisa memberikan artikel yang lainnya juga yg sangat bermanfaat lagii, Sukses trss broo. Perkenalkan saya Mutia Amirah Rahim ..oh yaa silakan kunjungi website kampus saya ya https://www.atmaluhur.ac.id/
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusWaaawww artikelnya sangat bagus dan sangat bermanfaat untuk saya yang masih belum tau tentang pemograman web khususnya format teks untuk HTML. Kami sangat terbantu sekali dengan membaca artikel yang kakak buat terutama saya yang belum tau jadi lebih tau dan lebih mengerti. Terimakasih kak...semangat terus dan selalu beri artikel terbaik kak yang lainnya..hhmmm
BalasHapusoohhh yaaa perkenalkan nama saya ADEKA SRI PURWANTI website kampus saya https://www.atmaluhur.ac.id/
artikelnya bagus kak mudah dipahami dan tutorialnya telah membantu saya sebagai seorang pemula. semoga artikel ini juga bermanfaat bagi orang lain. semangat terus kak dalam membuat blog tutorial ini. semoga blog ini masih update dalam hal format halaman web terima kasih.
BalasHapusperkenalkan nama saya reza pahlevi dari kampus STMIK atmaluhur pangkalpinang.
kunjungi juga website kampus saya kak https://www.atmaluhur.ac.id/