Materi Pemrograman Web Ke 3

(MELETAKKAN KONTEN DALAM HALAMAN WEB)
Desain website adalah tentang meletakkan dan menata konten di jendela

browser. Konten bisa berbentuk teks ataupun gambar. Paragraf, teks, dan gambar
memegang peranan cukup penting dalam desain website. Oleh karena itu, kita
perlu mengetahui tag dan aturan menulis kode HTML untuk membuat paragraf,
teks, serta gambar yang menarik.
Tag Paragraf
Sebuah paragraf dapat diisi dengan teks, tabel, maupun gambar. Untuk
memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan
contoh struktur HTML sederhana. Contoh penggunaan tag paragraf untuk
membuat paragraf baru adalah sebagai berikut:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Mengenal Paragraf</title>
5. </head>
6. <body>
7. Ayo belajar HTML (paragraf 1)
8. Bersama Jubilee (paragraf 2)
9. </body>
10. </html>
Terlihat dalam jendela browser kalau kedua paragraf tersebut tidak

dipisah pada baris berbeda namun berada pada satu baris yang sama walaupun
dalam penulisannya dipisah. Dalam HTML, baris baru yang tidak ditandai dengan
tag akan diabaikan. Dengan begitu, kode HTML di atas pada dasarnya tidak
menghasilkan tampilan berbeda dengan kode HTML di bawah ini:
1. <!DOCTYPE html>
2. <html>
3. <head>
5. </head>
6. <body>
7. Ayo belajar HTML (paragraf 1) Bersama Jubilee (paragraf 2)
8. </body>
9. </html>
Kalau kita ingin memisah dua baris teks itu, kita harus memberi tahu web
browser bahwa keduanya harus dibuat terpisah. Salah satunya adalah dengan
membuat tag untuk paragraf.
HTML menyediakan tag khusus untuk membuat paragraf, yaitu tag <p>.
Pada kode HTML di bawah ini, kita akan menambahkan tag <p> pada masing
masing baris teks dan melihat bagaimana hasilnya di dalam jendela browser.
1. <!DOCTYPE html>
2. <html>
3. <head>
5. </head>
6. <body>
7. <p>Ayo belajar HTML (paragraf 1)</p>
8. <p>Bersama Jubilee (paragraf 2)</p>
9. </body>
10. </html>
Kali ini, kita akan melihat bahwa kedua paragraf itu sudah berada
pada posisi masing-masing, yaitu satu teks dalam satu baris.
Tag <break>
Selain tag <p> untuk membuat paragraf baru, cara lain untuk memisahkan
teks-teks menjadi baris yang berbeda-beda adalah dengan menggunakan tag <br>
(break). Dengan demikian, Anda bisa menulis contoh penggunaan tag <br>
berikut ini:
1. <!DOCTYPE html>
2. <html>
3. <head>
5. <head>
6. <body>
7. Ayo belajar HTML (paragraf 1)<br/>
8. Bersama Jubilee (paragraf 2)
9. </body>
10. </html>
Jika kode HTML di atas ditampilkan pada jendela browser, hasilnya hampir
sama dengan menggunakan tag <p>. Namun pemisahan baris menggunakan tag
<br> tidaklah dimaksudkan untuk membuat paragraf baru. Tag <br> hanya sekadar
berfungsi untuk membuat baris baru. Umumnya, tag <br>diletakkan di dalam tag
<p>... </p>.
Tag untuk Menebalkan dan Memiringkan Teks

Di dalam sebuah paragraf, kadang-kadang kita ingin membuat penekanan
pada bagian teks tertentu. Penekanan ini bisa dilakukan dengan berbagai cara,
misalnya dengan menebalkan atau memiringkan teks tersebut. Ada beberapa
metode untuk menebalkan dan memiringkan teks, namun umumnya dengan
memanfaatkan tag emphasis (penekanan) yang terdiri dari dua tag, yaitu:
 <em> untuk memiringkan teks
 <strong> untuk menebalkan teks
Contoh penggunaan tag <em> dan <strong> di dalam kode HTML adalah sebagai
berikut:
1. <!DOCTYPE html>
2. <html>
3. <head>
5. </head>
6. <body>
7. <p>
8. Ini adalah teks <em> miring</em>
9. <br/>
10. Sementara ini adalah teks <strong> tebal </tebal>
11. </p>
12. </body>
13. </html>
Selain <em> dan <strong>, Anda juga bisa menggunakan tag <i> (italic) untuk
memiringkan huruf, dan <b> (bold) untuk menebalkan huruf.
Heading
Dokumen, seperti buku, umumnya dibuat berstruktur yang ditandai dengan
adanya judul, sub judul, sub subjudul atau bab, subbab, sub subbab, dan
seterusnya. Di dalam HTML, struktur dokumen pun bisa dibuat menggunakan tag
tertentu. HTML menyediakan tag khusus untuk membuat judul atau di dalam
HTML lebih dikenal dengan istilah heading. Heading dibuat terpisah dari paragraf
karena tag Heading biasanya digunakan untuk pembuatan judul dari suatu
paragraf atau bagian dari teks yang dianggap sebagai judul.
Tag heading di dalam HTML terdiri dari 6 jenis yang mewakili masing-
masing tingkatan, yaitu mulai dari <h1>, <h2>, <h3>, <h4>, <hS>, dan yang
terakhir <h6>. Tag heading secara default akan ditampilkan oleh web browser
dengan huruf tebal (bold) dengan ukuran yang beragam.
Tag header <h1> memiliki ukuran huruf paling besar, sedangkan tag <h6>
berukuran terkecil. Berikut adalah contoh penggunaan tag heading di dalam
HTML:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Mengenal Heading</title>
5. </head>
6. <body>
7. <h1>Heading</h1>
8. <h2>Heading</h2>
9. <h3>Heading</h3>
10. <h4>Heading</h4>
13. </body>
14. </html>
Dalam praktiknya, tag heading dikombinasikan dengan tag paragraf

agar terbentuk struktur dokumen yang enak dibaca dan dipahami. Berikut adalah
contoh struktur dokumen HTML sederhana dengan menggunakan tag <p> dan
beberapa tag heading:
1. <!DOCTYPE htm1>
2. <html>
3. <head>
4. <title>Mengenal Heading</title>
5. </head>
6. <body>
7. <h1>Mengenal HTML</h1>
8. <p>...HTML adalah Hypertext Markup Language</p>
9. <h2>Editor HTML</h2>
10. <p>...Gunakan Sublime atau Notepad ++ cukup bagus...</p>
11. <h3>Browser</h3>
12. <p>...Browser apapun bisa dimanfaatkan...</p>
13. </body>
14. </html>
Dengan menggunakan beberapa tag heading dan paragraf, kita bisa membuat
struktur dokumen sederhana menggunakan HTML.
Jika Anda belajar tentang SEO (Search Engine Optimization), gunakan tag
heading ini dengan baik. Search Engine, misalnya Google, akan memberikan nilai
lebih untuk teks yang ditulis sebagai heading. Semakin tinggi tingkat heading
pada sebuah teks, semakin tinggi pula penekanan search engine. Sebagai
contoh, tag
<h1> dianggap lebih bernilai dari pada <h2>, dan seterusnya karena tag <h1>
umumnya digunakan untuk mewakili judul sebuah konten / berita sehingga
dianggap dapat mewakili keseluruhan isi.
Mengenal List
List adalah sebuah daftar. Dalam HTML, list dibuat menggunakan tag
bernama list. Tag ini sendiri terdiri dari dua jenis, yaitu ordered list
(untuk membuat list berurutan) dan unordered list (untuk membuat list tidak
berurutan). Maksudnya, ordered list akan ditampilkan dengan angka atau huruf,
sedangkan unordered list disajikan dengan bulatan atau kotak.
Ordered list dibuat dengan menggunakan tag <ol>,dan unordered list
dibuat dengan menggunakan tag <ul>. Sedangkan isi dari list itu sendiri dibuat
dengan menggunakan tag <li>.
Ordered List
Berikut adalah contoh kode HTML untuk membuat ordered list
menggunakan tag <ol>:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Menggunakan Ordered List</title>
5. </head>
6. <body>
7. <h1> Daftar Inventaris </h1>
8. <ol>
9. <li>Kursi</li>
10. <li>Meja</li>
11. <li>Lemari</li>
12. <li>Ayunan</li>
Membuat Unordered List
Secara umum, untuk membuat unordered list, tinggal ganti tag <ol>
menjadi <ul>. Berikut adalah contoh kode HTML untuk membuat unordered list
menggunakan tag <ul>:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Menggunakan Ordered List</title>
5. </head>
6. <body>
7. <h1> Daftar Inventaris </h1>
8. <ul>
9. <li>Kursi</li>
10. <li>Meja</li>
11. <li>Lemari</li>
12. <li>Ayunan</li>
13. <li>Pot</li>
14. </ul>
15. </body>
16. </html>
Style untuk List

Bulleted dan Numbered List dapat dipercantik dengan menggunakan
attribute list-style-type. Sebagai contoh, Anda tidak mau poin-poin yang ditulis
menggunakan angka 1, 2, 3, dan seterusnya, namun ingin memakai angka Romawi
I, II, III atau Anda ingin poin-poin dalam Bulleted List memanfaatkan kotak-kotak
kecil berwarna hitam alih-alih lingkaran.
Berikut tabel penggunaannya:
Atribut ini diletakan di dalam tag <ul>atau <ol>. Sebagai contoh, Anda bisa
menuliskannya seperti ini:
<ul style="list-style-type: square">
Atau ordered list:
<ol style="list-style-type: lower-alpha">

Materi Pemrograman Web Ke 3

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Materi Pemrograman Web Ke 3

Diunggah oleh

Hak Cipta:

Format Tersedia

(MELETAKKAN KONTEN DALAM HALAMAN WEB)

Desain website adalah tentang meletakkan dan menata konten di jendela

Terlihat dalam jendela browser kalau kedua paragraf tersebut tidak

Tag untuk Menebalkan dan Memiringkan Teks

Dalam praktiknya, tag heading dikombinasikan dengan tag paragraf

Style untuk List

Anda mungkin juga menyukai