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.
·
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>
2. Bagian Head
Fungsinya memberikan informasi tentang halaman web itu sendiri.
2. Bagian Head
Fungsinya memberikan informasi tentang halaman web itu sendiri.
Formatnya :
<head>
<title>Ini
adalah halaman web</title>
</head>
3. Bagian Body
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 <br>
5. Membentuk Paragraf
Dengan memberikan tag awal <p> dan
tag akhir </p>
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 “<!--“ dan diakhiri tanda “-->”. Penulisan
komentar dalam kode program HTML tidak akan memengaruhi penerjemahan kode
program web browser karena tidak dieksekusi.
B. Format Teks
1. Memanipulasi Tampilan Teks pada Halaman Web
a.
Menetak tebal teks
Format: <b>teks dicetak tebal</br>
b.
Mencetak tebal teks dengan tag strong
Format: <strong>teks dicetak tebal dengan strong</strong>
c.
Menetak miring teks
Format: <i>teks dicetak miring</i>
d.
Mencetak teks bergaris bawah
Format: <u>teks dicetak dengan garis bawah</u>
e.
Memberi tekanan teks
Format: <em>teks dicetak dengan tekanan</em>
f.
Membesarkan huruf
Format: <big>membesarkan teks yang dicetak</big>
g.
Mengecilkan huruf
Format: <small>mengecilkan teks</small>
h.
Mencetak superscript teks
Format: <sup>teks dicetak dengan superscript</sup>
i.
Mencetak subscript teks
Format: <sub>teks dicetak dengang subscipt</sub>
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>
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..
Blognya sangat keren ...
BalasHapusiya, terima kasih
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusartikelnya bagus dan mudah untuk dipahami... tks yaa untuk penjelasannya... sukses selalu... Kunjungi juga website kampus saya : http://www.atmaluhur.ac.id dan blog saya : https://kima.mahasiswa.atmaluhur.ac.id
BalasHapusWoww ini adalah salah satu artikel yg cukup lengkap yg pernah saya lihat, sayapun dapat mengerti sedikit simbol-simbol ttg html , dtunggu artikel-artikel selanjutnya gan ,ohya nama saya putra laksana, website kampus saya https://www.atmaluhur.ac.id/
BalasHapusTerimakasih telah membuat blog ini, sehingga saya dapat dengan mudah mempelajari tentang html ini... Teruslah membuat beragam hal mengenai html, supaya mempermudah saya dan rekan2 lainnya dlm mempelajari html...
BalasHapusKunjungi website kampus saya di https://www.atmaluhur.ac.id/
Termikasih kak atas artikelnya, dengan artikel yang kakak buat, saya bisa belajar dalam materi pemrograman web, semangat kakak dalam membuat artikel yang seperti ini, agar saya yang masih pemula bisa belajar dari kakak, dan bermanfaat bagi saya dalam penerapannya.
BalasHapusPerkenalkan nama saya Dela Novitasari dari kampus STMIK ATMA LUHUR PANGKALPINANG, web kampus kami ( https://www.atmaluhur.ac.id/ )
terimakasih min atas informasinya, banyak sekali pelajaran yang saya dapat dari sini terutama di bagian nested list. ini sangat berguna bagi saya yang masih pemula didunia perkomputeran semangat terus ya min terus berkarya
BalasHapusperkenalkan nama saya Rida Anggraini
kunjungi Website kampus saya di link ( https://www.atmaluhur.ac.id/ )
makasih ya buat artikelnya sangat membantu sekali .. berkat artikel ini saya mulai mengerti dan memahami mengenai format teks HTML .. terus buat artikel yg agus lain nya ya :)
BalasHapusmakasih min:)
perkenalkan nama saya Laila Huriana Anisah Rohmawati dari kampus STMIK ATMA LUHUR BangkaBelitung
Website kampus saya di link https://www.atmaluhur.ac.id/
Terima kasih admin untuk artikel nyaa..
BalasHapusArtikel ini sangat bermanfaat untuk saya sebagai mahasiswa yang sedang belajar html. Terus membuat artikel seperti ini ya. Sukses selalu..
Oh iya perkenalkan nama saya Mozza Muthia Rahman dari kampus atma luhur
(Website kampus saya di https://www.atmaluhur.ac.id/)
terimakasih gan artikelnya sangat sangat membatu saya yg masih pemula ini untuk mempelajari format text html,artikelnya sangat menarik dan bermanfaat,semoga kedepannya masih dapat membuat artikel lain yang bermanfaat lagi,perkanalkan nama saya Risa Aprilia,kunjungi juga gan website kampus saya ,di link ini https://www.atmaluhur.ac.id/
BalasHapusThank you Min, this article really helps me who are studying and programming web enthusiasm min to make the article better and more enthusiastic. My name is Gazza Muhammad Suryansah https://www.atmaluhur.ac.id/
BalasHapus