BAB 2 : Format Teks Halaman Web



A. Struktur Dasar HTML

HTML (HyperText Markup Language) merupakan file teks biasa dengan ekstensi .htm atau .html yang terdiri atas script program dengan aturan tertentu.

1. Elemen Dasar

Dalam memberikan nama dokumen web berbasis HTML menggunakan editor teks Notepad sebaiknya selalu memilih tipe all files agar dokumen web tersebut tidak memiliki ekstensi ganda sehingga dideteksi sebagai dokumen biasa.
Elemen HTML adalah bagian-bagian pembentuk halaman web yang  meliputi head, body, title, link, text, paragraph, list, dan sebagainya. Setiap elemen HTML ditandai dengan sebuah simbol tag. Tag merupakan bentuk simbol berbentuk "<" sebagai tanda awal penulisan elemen dan diakhiri tanda ">" sebagai tanda akhir penulis sebuah elemen. Penulisan kode elemen terdiri atas dua bagian, yaitu tag awal dan tag akhir. Tag awal digunakan sebagai tanda awal bagian script elemen sampai pada akhir penulisan script elemen dengan tanda tag akhir. Format penulisan sebuah elemen adalah sebagai berikut:

<tag_awal_nama_elemen>
"isi script program html"
</tag_akhir_nama_elemen>
CONTOH:
<b>
Teks dicetak tebal
</b>
Tag awal disimbolkan dengan tanda <nama_elemen> sedangkan tag akhir disimbolkan dengan </nama_dokumen>. Akan tetapi, 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>
Dalam menulis tag, huruf besar atau kecil tidak dipermasalahkan dalam standar HTML. Struktur dasar halaman web berbasis HTML adalah sebagai berikut:
CONTOH:
<html>      -> Tag awal HTML
<head>      -> Head
<title> Judul Situs</title>
</head>     
<body>      -> Body
Isi halaman web   
</body>    
</html>    -> Tag akhir HTML
KELEBIHAN  HTML:
  • 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 karakter penulisan. Bagian head selalu diawali dengan tag awal <head> dan diakhiri dengan tag akhir </head>. Perhatikan contoh script berikut:
CONTOH:
<head>
<title> Ini adalah halaman web </title>
</head>
Penjelasan:
  • <head>
Tag awal head digunakan sebagi awal penanda script bagian head HTML.
  • <title>
Tag awal title digunakan sebagai awal tanda judul sebuah halaman web.
  • Ini adalah halaman web
Judul halaman web yang akan ditampilkan pada web browser.
  • </title>
Tag akhir title
  • </head>
Tag akhir head 
3. Bagian Body
Pada bagian body, semua script program HTML akan diterjemahkan menjadi bentuk informasi pada halaman web, baik berupa teks, audio, video, gambar, dan animasi. Bagian body sebuah halaman web HTML selalu diawali tag <body> dan diakhiri tag </body>. Perhatikan contoh script program berikut:
<body>
Isi halaman web
</body>
CONTOH:
Membuat halaman web sederhana
<!--file studi1.html-->
<html>
<head>
<title> Ini biodataku </title>
</head>
<body>
Ini adalah halaman web pertama saya dengan html
</body>
</html>
4. Mengganti Baris

Script program HTML yang ditulis pada bagian body akan dicetak memanjang dalam satu baris ketika ditampilkan dalam satu baris. Oleh karena itu, diperlukan script tambahan untuk mencetak pada baris selanjutnya dengan tag <br>.

CONTOH:
<!--file studi2.html-->
<html>
<head>
<title> Mencetak Halaman Web dengan br</title>
</head>
<body>
NIS : 123456789
Nama : Elisabeth Noviana Devi
Kelas : XI TKJ 2
</body>
</html>
5.Membentuk Paragraf
      Pada dasarnya setiap informasi berupa teks dalam halaman web berbasis HTML merupakan script yang ditulis pada bagian body. Jika anda menuliskan sebuah string yang cukup panjang, teks yang ditampilkan akan menyesuaikan lebar web browser. 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.
CONTOH:
 <!--file studi3.html-->
<html>
<head>
<title> Mencetak Halaman Web dengan Paragraf </title>
</head>
<body>
<p> Pada dasarnya setiap informasi berupa teks dalam halaman web berbasis HTML merupakan script yang ditulis pada bagian body. </p>
<p> Jika kita menuliskan sebuah string yang cukup panjang, ketika ditampilkan akan menyesuaikan lebar web browser. </p>
<p> Dengan memberikan tanda tag awal paragraf diikuti teks yang akan ditampilkan pada web browser dan diakhiri tag akhir paragraf mak informasi teks akan disusun menyerupai model  paragraf. </p>
</body>
</html>

6. Garis Horizontal

Untuk membuat garis horizontal atau mendatar pada halaman web, Anda dapat menggunakan tag <hr>. Dengan menggunakan tag <hr>, maka secara otomatis informasi teks yang dituliskan setelah tag <hr> akan ditampilkan pada baris selanjutnya dibawah garis mendatar tersebut.

CONTOH:
<!--file studi4.html-->
<html>
<head>
<title>Garis Horizontal</title>
</head>
<body>
Kalimat diatas garis mendatar. <hr> Kalimat di bawah garis mendatar.
</body>

7. Membuat Komentar
 
Komentar berguna untuk memberikan catatan khusus tentang baris kode tertentu dalam halaman web. Untuk menambahkan komentar diawali dengan tanda "<!--" diikuti komentar kemudian diakhiri dengan tanda "-->". Penulisan komentar dalam dalam kode program HTML tidak akan memengaruhi penerjemahan kode program oleh web browser karena tidek dieksekusi, kecuali terjadi kesalahan penulisan tanda komentar.
CONTOH:
<!--file studi5.html-->
<html>
<head>
<title> Garis Horizontal </title> <!--Judul Halaman Web-->
</head>
</body>
B Format Teks
1. Memanipulasi Tampilan Teks pada Halaman Web
 Berikut ini beberapa script dalam HTML yang digunakan untuk memanipulasi bentuk format teks ketika ditampilkan dalam web browser.
a. Mencetak tebal teks   Format: <b> teks dicetak tebal </b>
b. Mencetak tebal teks dengan tag strong Format: <strong> teks dicetak tebal dengan strong </strong>
c. Mencetak 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 yang dicetak </small>
h. Mencetak superscript teks Format: <sup> teks dicetak dengan mode superscript </sup>
i. Mencetak subscript teks Format: <sub> teks dicetak dnegan mode subscript </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>

CONTOH: Memanipulasi tampilan teks pada web browser
<!--file studi2-1.html--> <html> <head> <title> Memformat Tampilan Teks </title> </head> <body> <b> Teks dicetak tebal </b> <br> <strong> Teks dicetak tebal dengan strong </strong> <br> <i> Teks dicetak miring </i> <br> <u> Teks dicetak dengan garis bawah </u> <br> <em> Teks dicetak dengan tekanan </em> <br> <big> Membesarkan teks yang dicetak </big> <br> <small> Mengecilkan teks yang dicetak </small> <br> <sup> Teks dicetak dengan mode superscript </sup> <br> <sub> Teks dicetak dengan mode subscription </sub> <br> <blink> Teks dicetak kelap-kelip </blink> <br> <s> Tampilan teks dicoret dengan garis </s> <br> <marquee> Teks dicetak berjalan </marquee> <br> </body> </html>
2. Format Heading   Fungsi utama heading adalah untuk mengetahui besar ukuran teks dalam halaman web yang biasanya diterapkan pada sebuah judul. Penulisan heading diawali dengan tag <h1> dan diakhiri dengan tag </h1>, dengan formasi heading yang memiliki 6 ukuran dari 1 sampai 6.
CONTOH: Menampilkan teks dengan heading
<!-- file studi 2-2.html--> <html> <head> <title> Heading </title> </head> <body> <h1> Teks dengan heading berukuran 1 </h1> <h2> Teks dengan heading berukuran 2 </h2> <h3> Teks dengan heading berukuran 3 </h3> <h4> Teks dengan heading berukuran 4 </h4> <h5> Teks dengan heading berukuran 5 </h5> <h6> Teks dengan heading berukuran 6 </h6> </body> </html>
3. Bentuk Preformat Teks Untuk menambahkan besar spasi antarkata dalam kalimat perlu ditambahkan kode "&nbsp". Dalam HTML terdapat juga 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>.
CONTOH: Menampilkan contoh dengan preformat
<!--file studi2-3.html> <html> <head> <title>Preformat
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 disertakan tag ganti baris. CONTOH:
Menampilkan alamat institusi dengan tag <address>
<!--file studi2-4.html--> <html> <head> <title>SMKN 2 Kediri</title> </head> <body> <address> SMK Negeri 2 Kediri<br>Jl. Veteran No. 05 <br> Kota Kediri <br> Jawa Timur <br> </address> </body> </html>
5. Format Keluaran Program Komputer
    Beberapa script HTML yang dapat digunakan untuk 
mendefinisikan proses secar komputerisasi adalah sebagai berikut. <code> ....</code>          Script ini digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada web page.<var> ....</var>         Script ini digunakan untuk mendefinisikan variabel dalam program.<samp> ....</samp>         Script ini digunakan untuk mendefinisikan contoh keluaran program.<tt> ....</tt>         Script ini digunakan untuk mendefinisikan teletype text.
CONTOH:
Menampilkan kode progran dengan tag<code>
<!--file studi2-5.html--> <html> <head> <title>Menampilkan teks output program</title> </head> <body> <code>Kode Program Pascal</code><br><pre> Program Pascal; uses crt; var i : string; begin clrsr; i := 'Pascal';write(i); end. </pre> <samp>Pascal</samp><br> <var> i:='Pascal';</var><br> <tt>Contoh teks teletype</tt> </body> </html>
6. Format Abbr dan Acronym     Tag<abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks. Teknik ini sering digunakan untuk mempersingkat sebuah istilah dengan tujuan mempermudah pengguna ketika menjelajah internet dalam mencari keyword tertentu. Kepanjangan dari sebuah singkatan istilah tidak akan ditampilkan dalam halaman web, tetapi akan membantu sistem penelusuran keyword dalam mesin pencari internet, seperti Google dan Yahoo.
CONTOH:
Penggunaan abbr dan acronym
<!--file studi2-6.html--> <html> <head> <title> Memersingkat istilah</title> </head> <body> <abbr title="Palang Merah Indonesia">PMI</abbr><br> <acronym title="SMK Negeri 2 Kediri">estemoneska</acronym> </body> </html>
7. Mengubah Arah Tampilan Teks     Untuk mengubah arah tampilan penlisan teks dari kanan ke kiri seperti ketentuan penulisan huruf Arab, dapat menggunakan tag<bdo>. Bdo merupakan singkatan dari bidirectional override yang berguna untuk mengubah arah penulisan teks pada halaman web. Secara defdault, web browser akan mencetak teks dari arah kiri menuju ke kanan, sebagai contoh "Selamat Datang Siswa SMK". Dengan tag<bdo dir="rtl">, maka hasil penulisannya menjadi terbalik.
CONTOH: Penggunaan tag<bdo>

<!--file studi2-7.html--> <html> 
<head>
<title> Membalikkan Arah Teks</title>
</head>
<body>
<bdo dir="rtl">Pemrigraman Web dengan HyperText Markup Language</bdo> <br> 
<bdo dir="rtl">Teknologi Informasi dan Komunikasi</bdo> <br>
</body> 
</html>
8. Membuat Kutipan Teks 
    Terdapat dua macam kutipan yang dapat digunakan pada dokumen HTML, yaitu sebagai berikut.
a. Tag<q> digunakana untuk membuat kutipan pendek. Kutipan menggunakan taq<q> akan ditulis tanpa menjorok ke dalam halaman web. Selain itu, kutipan diawali dengan tanda petik dua(") dan diakhiri dengan petik dua(").
b. Tag<blockquote>, digunakan untuk menyatakan kutipan panjang, yang akan diawali dengan penulisan teks secara menjorok ke dalam.
CONTOH:
Penggunaan tag<q> dan tag<blockquote>
<!--file studi2-8.html-->
<html>
<head>
<title>Kutipan Teks</title>
</head>
<body>
Di bawah ini adalah cara mengutip kalimat yang panjang.
<blockquote>
Baris kalimat ke 1 dalam blockquote<br>
Baris kalimat ke 2 dalam blockquote<br>
Baris kalimat ke 3 dalam blockquote<br>
Baris kalimat ke 4 dalam blockquote<br>
Baris kalimat ke 5 dalam blockquote<br>
</blackquote>
Sementara itu, dibawah ini adalah kutipan pendek. <br> 
<q>
Baris kalimat ke 1 dengan kutipan pendek<br>
Baris kalimat ke 2 dengan kutipan pendek<br>
</q>
</body>
</html>




9. Penyisipan dan Penghapusan Teks
    Ketika anda menampilkan informasi dalam dokumen web, terkadang terjadi kesalahan. Oleh karena itu, kesalahan informasi tersebut harus dikoreksi tanpa menghilangkan data yang salah tersebut. Untuk menghapus data yang salah, dapat digunakan tag<del> yang memiliki efek teks dicoret tengah. Efek teks dicoret mirip dengan efek teks ketika menggunakan tag<s>. Sementara itu, untuk melakukan koreksi informasi yang salah pada web, dapat digunakna tag<ins> yang memiliki efek tulisan bergaris bawah seperti efek tulisan dengan tag <a href=" ">
<!--file studi2-7.html--> 
<html>
<head>
<title>Hapus dan Sisip Teks</title>
</head>
<body>
Nilai grosir 1 kodi adalah sama dengan ,,,<br>
Jawaban :<br>
a.<del>12 Pcs</del> jawaban yang salah<br>
b.<del>20 Pcs</del> jawaban yang sudah dikoreksi
</body>
</html>


C. List HTML
 List HTML merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web. List HTML dibagi menjaid empat jenis, yaitu:
1. List Bernomor Urut (Ordered List) 
 Adalah tekknik 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 tag</ol>
Contoh: 
Penggunaan tag<ol> untuk list bernomor>

<!--file studikasus2-17.html-->
<html>
<head>
<title>List bernomor</title>
</head>
<body>
Menu Restoran 
<ol>
 <li>Ayam Bakar</li>
 <li>Ayam Goreng</li>
 <li>Ayam Penyet</li>
</ol>
</body>
</html>
Adapun untuk menampilkan nomor urut dengan model tertentu, dapat digunakan argumen berikut.
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, dan seterusnya)
A
Untuk menampilkan nomor urut dengan menggunakan abjad besar (A,B,C, dan seterusnya)

CONTOH:
Penggunaan argumen pada tag <ol> untuk list bernomor
<!--file studi3-2.html-->
<html>
<head>
<title>List Bernomor</title>
</head>
<body>
Menu Restoran:
<ol>
<li>Ayama Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
Menu Restoran dengan argumen A
<ol type-"A">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
Menu Restoran dengan argumen a
<ol type-"a">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
Menu Restoran dengan argumen I
<ol type-"I">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
Menu Restoran dengan argumen i
<ol type-"i">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ol>
</body>
</html>


2. List Tanpa Urutan Nomor
        Untuk membuat daftar tertentu tanpa menggunakan sebuah urutan penomoran, Anda dapat menggunakan tag <ul> dan diakhiri dengan</ul>. Ada beberapa macam jenis unorderedlist 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
CONTOH:
Penggunaan argumen pada tag<ul> untuk list tanpa nomor
<!--file studi3-3.html-->
<html>
<head>
<title>List Tidak Bernomor</title>
</head>
<body>
Menu Restoran default (Tanpa Argumen)
<ul>
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
Menu Restoran dengan argumen bulat
<ul type="circle">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
Menu Restoran dengan argumen disc
<ul type="disc">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
Menu Restoran dengan argumen kotak
<ul type="square">
<li>Ayam Bakar</li>
<li>Ayam Goreng</li>
<li>Ayam Penyet</li>
</ul>
</body>
</html>
3. List Bersarang
     Menu bersarang atau nested list adalah suatu subdfatar baru didalam sebuah daftar. Contoh cara menampilkan unordered list didalam sub ordered list dan sebaliknya, serta ordered list didalam sub unordered list adalah sebagai berikut.
CONTOH:
List Bersarang atau nested list
<!--file studi3-4.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>
</ol>
</body>
</html>
4. List Terdefinisi 
     List Terdefinisi(definition list) adalah sebuah daftar yang menggunakan tag<dl> dan diakhiri dengan tag </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 menggunakan tag</dd> yang memiliki efek penulisan teks agak menjorok kedalam. 
CONTOH: List Terdifinisi(definition list)
<!--file studi3-5.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>
</ol>
</body>
</html>
--Selesai--

Komentar

Posting Komentar

Postingan Populer