Melakukan Pemformatan Dasar pada Dokumen HTML


Postingan ini merupakan kelanjutan dari postingan berjudul “Memahami Dasar-Dasar HTML” yang telah diposting sebelumnya. Dengan telah memahami dasar-dasar HTML seperti aturan penulisan tag dan struktur dasar HTML, Kami harap tidak akan mempersulit Anda dalam melakukan pemformatan atau pemberian tanda pada teks dokumen HTML. Dalam melakukan pemformatan ini Kita akan menerapkan berbagai tag-tag HTML sebagai tindak lanjut dari pemahaman dasar tentang HTML yang telah Kita miliki.

  • Heading

Heading berbeda dengan header yang menunjukkan kepala dokumen HTML, heading di sini dapat disebut sebagai kepala teks/naskah. Heading biasanya akan diberikan untuk menunjukkan bagian-bagian dokumen yang menjadi judul, atau subjudul dengan memberikan perbedaan pada ukuran teks/huruf. Terdapat 6 tingkatan heading yang diawali dengan heading level 1 (<h1>) yang akan memberikan ukuran teks terbesar, sedangkan pada tingkat terakhir terdapat heading level 6 (<h6>) dengan ukuran teks yang terkecil.

Community of Learners-Living to Learn-Tutorial Komputer-Computer Tutorial-HTML-Heading
Gambar 1. Contoh penerapan Heading dalam dokumen HTML

———————————————————Heading———————————————————

 

<head>

<title>

Heading

</title>

</head>

<body>

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

</body>

 

</html>

 

 

———————————————————Heading———————————————————


 

  • Paragraph

Dengan menggunakan tag <p> akan dihasilkan sebuah paragraf yang kemudian diakhiri dengan tag </p>. Antara sebuah paragraf dengan paragraf lainnya akan diberi jarak dengan sebuah baris kosong. Dengan atribut align yang dapat Kita tambahkan pada tag <p>, dapat ditentukan perataan teks pada paragraf yang diinginkan. Untuk menentukannya, dapat diberi nilai center untuk perataan tengah, left untuk perataan kiri, dan right untuk perataan kanan.

————————–————–—————Paragraph——————————-————————

<html>

 

<head>

<title>Paragraph</title>

</head>

<body>

<p>Paragraf ini ditulis dalam bentuk default (tanpa atribut align)</p>

<p align=left>Paragraf ini ditulis dengan perataan teks kiri (left)</p>

<p align=center>Paragraf ini ditulis dengan perataan teks tengah (center)</p>

<p align=right>Paragraf ini ditulis dengan perataan teks kanan (right)</p>

<p align=justify>Paragraf ini ditulis dengan perataan teks kiri kanan (justify)</p>

</body>

</html>

Community of Learners-Computer Tutorial-Tutorial Komputer-HTML-Heading
Gambar 2. Contoh hasil dari penggunaan tag <p>…</p> dalam dokumen HTML

 

————————–————–—————Paragraph——————————-————————


  • Line Break

Line break berfungsi untuk membuat baris baru sehingga Kita dapat menampilkan teks pada baris berikutnya. Line break dapat diberikan dengan tag tunggal <br>. Dalam dokumen HTML, untuk membuat baris baru tidak dapat diberikan dengan hanya menekan tombol Enter pada keyboard sehingga kursor berpindah ke baris berikutnya di HTML editor (misalnya Notepad, kecuali beberapa HTML editor seperti Macromedia Dreamweaver pada mode designer).

————————–————–—————Line Break——————————-————————

<html>

 

<head>

<title>Line Break</title>

</head>

<body>

<p align=left>

Selamat datang di<br>

Community of Learners<br>

communityoflearners.wordpress.com<br>

Living to Learn</p>

<p align=left>

Semoga dapat Memberikan Manfaat bagi Kami dan <br>

Semua Pengunjung Blog Kami</p>

</body>

 

</html>

 

Community of Learners-Computer Tutorial-Tutorial Komputer-Living to Learn-HTML-Line Break

 

————————–————–—————Line Break——————————-————————


  • List

Dalam menampilkan data berurut (daftar), HTML menyediakan 3 jenis pengurutan, antara lain:

    1. Ordered List

Ordered List digunakan untuk membuat baris-baris daftar teks yang memiliki penanda sebagai identitas urutan suatu list. Sehingga teks/naskah akan ditampilkan dengan penomoran seperti 1,2,3,… atau I,II,III,… serta bentuk-bentuk daftar bernomor lainnya. Ordered list dapat ditampilkan dengan menggunakan tag <ol> sebagai tanda bahwa Ordered List dimulai, dan diakhiri dengan tag </ol>. Untuk menampilkan penomorannya, digunakan tag <li> tanpa tag penutup di setiap awal teks yang akan Kita beri penomoran. Untuk menentukan tipe Ordered List yang akan ditampilkan, dapat digunakan atribut type pada tag <li>. Sedangkan nilainya dapat diisi dengan:

No. Tag Fungsi
1 <li type=1> Menampilkan daftar berurut dengan identitas penomoran berbentuk angka Arab (1, 2, 3,…)
2 <li type=A> Menampilkan daftar berurut dengan identitas penomoran berbentuk huruf kapital (A, B, C,…)
3 <li type=a> Menampilkan daftar berurut dengan identitas penomoran berbentuk huruf kecil (a, b, c,…)
4 <li type=I> Menampilkan daftar berurut dengan identitas penomoran berbentuk angka romawi kapital (I, II, III,…)
5 <li type=i> Menampilkan daftar berurut dengan identitas penomoran berbentuk angka romawi kecil (i, ii, iii,…)

————————–————–—————Ordered List——————————-————————

<html>

 

<head>

<title>Ordered List</title>

</head>

<body>

Jurusan-Jurusan Bidang Komputer SMK 01 Sintang:

<ol>

<li>Teknik Rekayasa Perangkat Lunak

<li>Teknik Multimedia

<li>Teknik Komputer dan Jaringan

</ol>

 

</body>
</html>

 

Community of Learners-Living to Learn-Tutorial Komputer-Computer Tutorial-HTML-Ordered List

 

 

————————–————–—————Ordered List——————————-————————


Namun apabila tag <li> tidak diberi atribut type beserta nilainya, maka secara default list akan ditampilkan dengan penomoran berbentuk 1, 2, 3,…, seperti pada contoh di atas.

    1. Unordered List

Selain list bernomor, HTML juga dapat menampilkan bentuk list yang menggunakan sebuah simbol sebagai ganti penomoran. Dalam Microsoft Word, hal seperti ini lebih dikenal sebagai Bullets. Unordered List dimulai dengan menggunakan tag <ul> dan diakhiri dengan tag </ul>. Sedangkan untuk menampilkan bulletsnya, digunakan tag <li> tanpa tag penutup sebagaimana pada Ordered List. Dalam Unordered List, Kita juga dapat menggunakan berbagai jenis bullets lainnya sesuai keinginan Kita dengan menggunakan atribut type dengan nilainya seperti berikut ini:

No. Tag Fungsi
1 <li> Menampilkan daftar berurut dengan tanda lingkaran
2 <li> Menampilkan daftar berurut dengan tanda cakram
3 <li> Menampilkan daftar berurut dengan tanda kotak

————————–—————————Unordered List——————————-————–——–

<html>

<head>

<title>Unordered List</title>

</head>

<body>

Jurusan-Jurusan Bidang Komputer SMK 01 Sintang:

<ul>

<li>Teknik Rekayasa Perangkat Lunak

<li>Teknik Multimedia

<li>Teknik Komputer dan Jaringan

</ul>

</body>
</html>

Community of Learners-Tutorial Komputer-Computer Tutorial-Living to Learn-HTML-Unordered List
Gambar 5. Contoh hasil dari penggunaan Unordered List dalam HTML

————————————–—————Unordered List—————————–————————


Namun apabila tag <li> tidak diberi atribut type beserta nilainya, maka secara default list akan ditampilkan dengan bentuk lingkaran seperti pada contoh di atas. Selain yang telah dicontohkan di atas, juga terdapat model lain dari Unordered List yang dapat dilakukan pada HTML, yaitu Directory List dan Menu List. Directory list biasanya dilakukukan untuk menampilkan direktori dengan menggunakan tag <dir>…</dir>. Sedangkan Menu List biasanya dilakukan untuk menangani menu pilihan yang berbentuk list pada dokumen HTML. Menu list diawali dengan tag <menu> dan ditutup/diakhiri dengan tag </menu>.

————————–—————————Directory List——————————-————–——–

<html>

<head>

<title>Directory List</title>

</head>

<body>

Isi direktori Komputer/RPL

<dir>

<li>Guru

<li>Siswa

<li>Jadwal

</dir>

</body>

</html>

Community of Learners-Computer Tutorial-Tutorial Komputer-Living to Learn-HTML-Directory List
Gambar 6. Penggunaan Directory List untuk menampilkan daftar direktori

————————————–—————Directory List—————————–————————


————————–——————————Menu List——————————-—————–——–

<html>

<head>

<title>Menu List</title>

</head>

<body>

Masuk ke Menu:

<menu>

<li>Guru

<li>Siswa

<li>Jadwal

</menu>

</body>

</html>

Community of Learners-Computer Tutorial-Tutorial Komputer-Living to Learn-HTML-Directory List
Gambar 7. Menu List pada sebuah dokumen HTML

————————————–——————Menu List——————————–————————


    1. Definition List
        • <dl>…</dl>

      Tag ini digunakan untuk menunjukkan bahwa definition list dimulai dengan tag <dl> dan diakhiri dengan tag </dl>

        • <dt>…</dt>

      Di antara tag pembuka dan penutup inilah Kita menuliskan kata yang akan didefinisikan.

        • <dd>…</dd>

      Di antara kedua tag inilah Kita menuliskan definisi dari Kata yang akan didefinisikan yang telah Kita tuliskan di antara tag <dt>…</dt>.

Definition List biasanya digunakan untuk membuat daftar definisi yang tampilannya mirip dengan susunan penulisan pada Kamus, dimana pada definisi suatu istilah ditampilkan lebih menjorok ke dalam dari istilah yang didefinisikan. Tidak seperti Ordered List dan Unordered List yang hanya menggunakan dua buah tag dasar, dalam Definition List digunakan 3 tag yang saling berpasangan. Tag-tag tersebut antara lain:

————————–—————————Definition List——————————-————–——–

<html>

<head>

<title>Unordered List</title>

</head>

<body>

Daftar singkatan:

<dl>

<dt>RPL</dt>

<dd>Rekayasa Perangkat Lunak</dd>

<dt>TKJ</dt>

<dd>Teknik Komputer dan Jaringan</dd>

</dl>

</body>

</html>

Community of Learners-Computer Tutorial-Tutorial Komputer-Living to Learn-HTML-Directory List
Gambar 8. Contoh hasil dari penggunaan Definition List pada dokumen HTML

————————————–—————Definition List—————————–————————


  • Font

Satu hal yang bisa dikatakan hampir pasti dilakukan dalam membuat dokumen HTML adalah mengatur font/tulisan. Untuk mengaturnya, Kita gunakan tag <font> untuk mendefinisikan font dan mengakhiri pengaturan font yang telah Kita definisikan dengan tag </font>. Ada banyak atribut-atribut yang dapat Kita berikan untuk mengatur font, antara lain:

    • Atribut size —> <font size=5>…</font>

Atribut ini dugunakan untuk mendefinisikan ukuran font yang akan digunakan. Atribut ini dapat Kita isi dengan nilai terkecil 1, dan nilai terbesar 7.

    • Atribut face —> <font face=”Comic Sans MS”>…</font>

Atribut ini digunakan untuk mendefinisikan jenis font yang akan Kita gunakan.

  • Atribut color —> <font color=”blue”>…</font>

Atribut ini diberikan untuk menentukan warna yang akan Kita terapkan pada teks dokumen Kita.

————————–———————————–Font—————————————————–——–

<html>

<head>

<title>Unordered List</title>

</head>

<body>

<font size=5 face=”Comic Sans MS”>

Community of Learners<br>

<font color=”blue”>

Living to Learn<br>

</font></font>

4lwayzmil3

</body>

</html>

Community of Learners-Computer Tutorial-Tutorial Komputer-Living to Learn-HTML-Directory List
Gambar 9. Contoh penggunaan tag … beserta atribut-atributnya dalam sebuah dokumen HTML

————————————–———————–Font————————————-————————

Demikianlah pemformatan-pemformatan dasar pada dokumen HTML yang dapat Kita gunakan. Pembahasan ini merupakan pembahasan yang sangat sederhana, dan masih banyak pembahasan-pembahasan lainnya yang sekiranya dapat lebih memperdalam pengetahuan Kita di bidang web developing. Pembahasan-pembahasan tersebut dapat diperoleh dari berbagai sumber yang menyediakan informasi mengenai web developing. Namun atas kepercayaan Anda untuk membaca dan menerapkan pengetahuan dari blog Kami, Kami ucapkan Terima Kasihbanyak. Insya Allah pembahasan dalam tutorial komputer ini masih akan berlanjut pada postingan-postingan Kami berikutnya, sekali lagi kami ucapkan Terima Kasih banyak.

by: 4lwayzmil3

One thought on “Melakukan Pemformatan Dasar pada Dokumen HTML

  1. Agus Purwoko 15 Januari 2010 / 07:29

    Wah infonya menambah wawasan sekali!
    Trims atas kunjungannya!
    Salam “guspur”

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s