materi -...
TRANSCRIPT
TAG UTAMA
HTML
Materi
Heading
Paragraf
Font
Breakline
Horisontal Line
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
35 35
PERTEMUAN KE-2
TAG UTAMA HTML
2.1 PENGANTAR
Dalam Bab Pertemuan ke-2 ini akan disinggung tentang tag
utama dasar yang digunakan untuk membentuk sebuah dokumen
HTML secara utuh. Tag dasar HTML sangat mutlak diperlukan
browser untuk mengenali sebuah dokumen HTML dan media editor
teks digunakan untuk membangun dokumen tersebut seperti yang
telah dijelaskan pada bab sebelumnya.
Tag utama HTML merupakan tag yang digunakan untuk
memanipulasi sebuah dokumen HTML. Adapun tag utama HTML
yang akan dibahas pada pertemuan kali ini antara lain : Heading,
Paragraf, Font, Breakline, dan Horisontal line.
2.2 HEADING
Tag utama yang pertama adalah heading. Heading merupakan
teks dalam dokumen yang umumnya mempunyai judul topik, pada
dokumen HTML. Ciri dari heading ini adalah tulisan akan
ditampilkan dengan huruf yang dicetak tebal dan dapat berukuran
besar maupun kecil. Tag heading mempunyai 6 bilangan yang mana
digunakan untuk mengubah ukuran tulisan tersebut yang terdiri dari
1,2,3,4,5,dan 6. Masing – masing bilangan yang terdapat pada tag
heading berfungsi untuk mewakili ukuran, semakin besar bilangan
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
36 36
yang diberikan maka semakin kecil ukuran tulisan headingnya, dan
sebaliknya jika bilangan yang diberikan bilangan pertama maka
tulisan heading merupakan ukuran terbesarnya.
2.2.1. BENTUK PENULISAN TAG HEADING
Ada 6 tingkatan heading dalam HTML seperti yang telah
dijelaskan sebelumnya. Setiap heading dalam dokumen harus
diberikan tag, bentuk penulisannya sebagai berikut :
<hn> Tulisan yang akan dibuat menjadi Heading</hn>
Penjelasan :
1. <hn> merupakan tag pembuka dari heading, dimana h yang
berartikan heading sedangkan n merupakan bilangan yang
akan mengatur besar atau kecilnya tulisan heading ( yaitu
bilangan 1,2,3,4,5,atau 6 ). Semakin besar angka yang
diberikan untuk menggantikan n maka semakin kecil tulisan
headingnya.
2. </hn> merupakan tag penutup dari heading, dimana sebelum
huruf h terdapat tanda atau simbol / yang berfungsi sebagai
penutup dan n merupakan bilangan yang sama dengan
bilangan yang diberikan pada tag pembukanya.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
37 37
2.2.2. PENERAPAN DALAM HTML
Tag heading bila diterapkan dalam media editor teks sebagai
berikut :
<html>
<head>
<title>Contoh Heading HTML</title>
</head>
<body>
<h1>Contoh Heading Nomor 1</h1>
<h2>Contoh Heading Nomor 2</h2>
<h3>Contoh Heading Nomor 3</h3>
<h4>Contoh Heading Nomor 4</h4>
<h5>Contoh Heading Nomor 5</h5>
<h6>Contoh Heading Nomor 6</h6>
</body>
</html>
Silahkan disimpan dengan nama file contoh_heading.htm atau
contoh_heading.html, kemudian jalankan dengan membuka browser
web. Cara menjalankan program setelah membuka browser web tekan
tombol CTRL + O secara bersamaan pada keyboard, lalu cari file
notepad atau letak penyimpanan file tersebut sehingga hasilnya seperti
pada gambar dibawah ini :
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
38 38
Gambar 2.1 Hasil Tampilan contoh_heading.htm
Tidak berhenti sampai di sini saja untuk penggunaan tag
heading, tetapi masih ada lagi beberapa contoh penerapan yang perlu
diketahui bahwa didalam tag heading tersebut terdapat sebuah attribut
untuk mengatur perataan tulisannya, yaitu dengan menggunakan
attribut align.
Attribut tersebut juga biasa dijumpai pada aplikasi – aplikasi
office untuk mengatur perataan pekerjaan namun dalam dokumen
HTML alignment yang terdapat pada heading hanyalah rata kiri,
kanan, dan tengah, untuk lebih jelasnya penggunaan dan
penerapannya dapat dilihat listing kode program berikut :
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
39 39
<html>
<head>
<title>Contoh Heading HTML</title>
</head>
<body>
<h1 align=“center”>Contoh Heading Nomor 1</h1>
<h2 align=“center”>Contoh Heading Nomor 2</h2>
<h3 align=“center”>Contoh Heading Nomor 3</h3>
<h4 align=“center”>Contoh Heading Nomor 4</h4>
<h5 align=“center”>Contoh Heading Nomor 5</h5>
<h6 align=“center”>Contoh Heading Nomor 6</h6>
</body>
</html>
Simpanlah listing kode program tersebut dengan nama yang
berbeda dengan sebelumnya, misalkan contoh_heading2.htm atau
contoh_heading2.html. kemudian jalankan file notepad tersebut
sehingga dapat tampil seperti pada gambar berikut :
Gambar 2.2 Hasil Tampilan contoh_heading2.htm
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
40 40
Bilamana tadi telah diberikan contoh pemberian attribut align
dengan rata tengah untuk tag heading, maka berikutnya contoh untuk
pemberian attribut align dengan rata kanan pada tag headingnya.
Simpanlah dengan nama file contoh_heading.htm atau
contoh_heading.html
<html>
<head>
<title>Contoh Heading HTML</title>
</head>
<body>
<h1 align=“right”>Contoh Heading Nomor 1</h1>
<h2 align=“ right”>Contoh Heading Nomor 2</h2>
<h3 align=“ right”>Contoh Heading Nomor 3</h3>
<h4 align=“ right”>Contoh Heading Nomor 4</h4>
<h5 align=“ right”>Contoh Heading Nomor 5</h5>
<h6 align=“ right”>Contoh Heading Nomor 6</h6>
</body>
</html>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
41 41
Berikut hasil tampilan dari listing coding diatas :
Gambar 2.3 Hasil Tampilan contoh_heading3.htm
2.3 PARAGRAF
Informasi yang ditampilkan dalam dokumen HTML haruslah
mengikuti kaidah – kaidah penulisan yang benar, salah satunya
pembuatan sebuah paragraf. Paragraf dalam format dokumen HTML
sering dapat dijumpai pada saat terkoneksi dengan internet mencari
sebuah artikel – artikel atau membaca sebuah biografi seseorang,
cerita pendek, dan lain sebagainya yang menggunakan paragraf dalam
dokumen HTML.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
42 42
2.3.1. BENTUK PENULISAN TAG PARAGRAF
Setiap paragraf dalam dokumen HTML harus dimulai dengan
memberikan tag pembuka dan tag penutup yang telah ditentukan,
yaitu tag <p> untuk pembukanya dan tag </p> untuk mengakhiri atau
penutupnya. Setiap pergantian paragraf haruslah dimulai dengan
pemberian tag pembukanya kembali, yaitu <p>.
<p> ...Isian dari paragraf...</p>
2.3.2. PENERAPAN DALAM HTML
Contoh untuk menerapkan tag paragraf pada dokumen
HTML, misalkan seperti yang kode program dibawah ini dan
disimpan dengan nama contoh_paragraf.htm atau
contoh_paragraf.html.
<html>
<head>
<title>Contoh Paragraf HTML</title>
</head>
<body>
<p>Pada bab ini kita akan membahas mengenai tag utama
dalam dokumen HTML, diantaranya : Heading, Paragraf, Font,
Breakline, dan Horisontal Line. Tag – tag tersebut akan dikupas satu
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
43 43
per satu dengan lebih terperinci dan mudah untuk dipahami, sehingga
Anda dapat menerapkan dan mengimplementasikannya dalam sebuah
program HTML. </p>
<p>Heading merupakan tag utama pertama yang telah kita
pelajari sebelumnya. Tag ini digunakan untuk memberikan efek tebal
pada sebuah tulisan yang biasa menjadi sebuah topik ataupun judul.
Tulisan pada heading dapat dirubah ukurannya dengan memberikan
bilangan 1,2,3,4,5, atau 6 dengan pemahaman semakin besar bilangan
yang diberikan pada heading maka semakin kecil tulisan heading yang
dihasilkan. </p>
</body>
</html>
Dari kode program yang telah diterapkan dalam media editor
teks, maka langkah selanjutnya adalah menjalankan program tersebut
ke dalam browser web sehingga hasil yang diperoleh seperti gambar
dibawah :
Gambar 2.4 Hasil Tampilan contoh_paragraf.htm
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
44 44
Dapat dilihat bahwa hasil tampilan diatas masih belum tampak
sempurna. Kesempurnaan dari sebuah paragraf adalah dengan adanya
attribut align didalamnya sehingga akan tampak tertata dengan rapi
dan enak dilihat mata. Berikut ini adalah penerapan attribut align pada
paragraf dokumen HTML.
Contoh berikut ini adalah contoh_paragraf2.htm atau
contoh_paragraf2.html yang menggambarkan sebuah paragraf
dengan rata tengah.
<html>
<head>
<title>Contoh Paragraf HTML</title>
</head>
<body>
<p align=“center”>Pada bab ini kita akan membahas mengenai
tag utama dalam dokumen HTML, diantaranya : Heading, Paragraf,
Font, Breakline, dan Horisontal Line. Tag – tag tersebut akan dikupas
satu per satu dengan lebih terperinci dan mudah untuk dipahami,
sehingga Anda dapat menerapkan dan mengimplementasikannya
dalam sebuah program HTML. </p>
<p align=“center”>Heading merupakan tag utama pertama
yang telah kita pelajari sebelumnya. Tag ini digunakan untuk
memberikan efek tebal pada sebuah tulisan yang biasa menjadi sebuah
topik ataupun judul. Tulisan pada heading dapat dirubah ukurannya
dengan memberikan bilangan 1,2,3,4,5, atau 6 dengan pemahaman
semakin besar bilangan yang diberikan pada heading maka semakin
kecil tulisan heading yang dihasilkan. </p>
</body>
</html>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
45 45
Sehingga pada saat dijalankan kode program tersebut pada
sebuah browser web seperti gambar berikut ini :
Gambar 2.5 Hasil Tampilan contoh_paragraf2.htm
Contoh berikut ini adalah contoh_paragraf3.htm atau
contoh_paragraf3.html yang menggambarkan sebuah paragraf
dengan rata kanan.
<html>
<head>
<title>Contoh Paragraf HTML</title>
</head>
<body>
<p align=“right”>Pada bab ini kita akan membahas mengenai
tag utama dalam dokumen HTML, diantaranya : Heading, Paragraf,
Font, Breakline, dan Horisontal Line. Tag – tag tersebut akan dikupas
satu per satu dengan lebih terperinci dan mudah untuk dipahami,
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
46 46
sehingga Anda dapat menerapkan dan mengimplementasikannya
dalam sebuah program HTML. </p>
<p align=“right”>Heading merupakan tag utama pertama yang
telah kita pelajari sebelumnya. Tag ini digunakan untuk memberikan
efek tebal pada sebuah tulisan yang biasa menjadi sebuah topik
ataupun judul. Tulisan pada heading dapat dirubah ukurannya dengan
memberikan bilangan 1,2,3,4,5, atau 6 dengan pemahaman semakin
besar bilangan yang diberikan pada heading maka semakin kecil
tulisan heading yang dihasilkan. </p>
</body>
</html>
Sehingga pada saat dijalankan kode program tersebut pada
sebuah browser web seperti gambar berikut ini :
Gambar 2.6 Hasil Tampilan contoh_paragraf3.htm
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
47 47
Contoh berikut ini adalah contoh_paragraf4.htm atau
contoh_paragraf4.html yang menggambarkan sebuah paragraf
dengan rata kiri-kanan atau yang biasa dikenal dengan justify.
<html>
<head>
<title>Contoh Paragraf HTML</title>
</head>
<body>
<p align=“justify”>Pada bab ini kita akan membahas
mengenai tag utama dalam dokumen HTML, diantaranya : Heading,
Paragraf, Font, Breakline, dan Horisontal Line. Tag – tag tersebut
akan dikupas satu per satu dengan lebih terperinci dan mudah untuk
dipahami, sehingga Anda dapat menerapkan dan
mengimplementasikannya dalam sebuah program HTML. </p>
<p align=“ justify”>Heading merupakan tag utama pertama
yang telah kita pelajari sebelumnya. Tag ini digunakan untuk
memberikan efek tebal pada sebuah tulisan yang biasa menjadi sebuah
topik ataupun judul. Tulisan pada heading dapat dirubah ukurannya
dengan memberikan bilangan 1,2,3,4,5, atau 6 dengan pemahaman
semakin besar bilangan yang diberikan pada heading maka semakin
kecil tulisan heading yang dihasilkan. </p>
</body>
</html>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
48 48
Sehingga pada saat dijalankan kode program tersebut pada
sebuah browser web seperti gambar berikut ini :
Gambar 2.7 Hasil Tampilan contoh_paragraf4.htm
2.4 FONT
Tag font digunakan untuk mengatur bentuk dari suatu huruf
dalam dokumen HTML.
2.4.1. BENTUK PENULISAN TAG FONT
Bentuk penulisan tag font dalam sebuah dokument HTML
dibuka dengan <font> dan diberikan tag penutup atau diakhiri
</font>. Didalam tag font terdapat beberapa attribut yang akan
dijelaskan berikut :
<font> Teks atau huruf yang akan diubah </font>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
49 49
Penjelasan :
1. <font> merupakan penulisan baku untuk tag pembuka format
font.
2. </font> merupakan penulisan baku untuk mengakhiri atau
menutup tag font.
3. Attribut yang terdapat di dalam tag pembuka font, antara lain :
Attribut Keterangan
Face Digunakan untuk mengubah jenis tulisan atau huruf,
misalkan : Arial. Jenis tulisan dapat disesuaikan dengan
yang ada pada Aplikasi Office PC.
Size Digunakan untuk mengubah ukuran besar maupun
kecilnya tulisan atau huruf, skala yang diberikan adalah
bilangan 1,2,3,4,5,6, atau 7.
Semakin besar bilangan yang diberikan maka semakin
besar pula ukuran huruf atau tulisannya.
Color Digunakan untuk mengubah warna pada huruf maupun
tulisan.
Dapat dilakukan dengan menggunakan kode warna,
maupun bahasa internasional untuk menyebutkan
warnanya.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
50 50
2.4.2. PENERAPAN DALAM HTML
Penerapan tag Font jika tanpa adanya sebuah attribut maka tak
jauh berbeda dengan apa yang dituliskan diantara tag pembuka
<body> dan tag penutup </body>. Oleh karena itu, contoh penerapan
yang akan diberikan untuk tag Font dalam dokumen HTML yaitu
menggunakan attribut Face sebagai berikut :
<html>
<head>
<title>Contoh Font HTML</title>
</head>
<body>
<font face=“jokerman”>Ini merupakan contoh dari mengubah
jenis Font Jokerman</font>
</body>
</html>
Maka hasil yang diperoleh dari listing program yang disimpan
dengan nama file contoh_font.htm atau contoh_font.html dengan
menggunakan attribut Face ( mengubah jenis huruf atau tulisan )
diatas sebagai berikut :
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
51 51
Gambar 2.8 Hasil Tampilan contoh_font.htm
Setelah melakukan percobaan contoh font yang pertama, yaitu
dengan mengubah jenis huruf atau tulisannya, sekarang akan
diberikan contoh kedua yaitu dengan mengubah ukuran dari huruf
maupun tulisannya. Yang mana seperti dikatakan sebelumnya, bahwa
untuk menentukan sebuah ukurannya diberikan bilangan 1,2,3,4,5,6,
atau 7. Semakin besar bilangan yang diberikan maka semakin besar
pula ukuran dari huruf atau tulisannya. Sebagai contoh seperti pada
kode program contoh_font2.htm atau contoh_font2.html berikut ini :
<html>
<head>
<title>Contoh Font HTML</title>
</head>
<body>
<font size=“7”>Ini merupakan contoh dari mengubah Ukuran
Font sebesar 7</font>
</body>
</html>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
52 52
Sehingga hasil dari kode program tersebut pada sebuah
browser web sebagai berikut :
Gambar 2.9 Hasil Tampilan contoh_font2.htm
Berikutnya penerapan attribut Color pada Font dapat dituliskan
seperti pada kode program contoh_font3.htm atau
contoh_font3.html :
<html>
<head>
<title>Contoh Font HTML</title>
</head>
<body>
<font color=“blue”>Ini merupakan contoh dari mengubah
Warna Font dengan warna biru</font>
</body>
</html>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
53 53
Pemberian nilai warna pada attribut diatas adalah
menggunakan penyebutan warna dengan bahasa internasional,
sebetulnya pemanggilan warna dapat dilakukan dengan menggunakan
kode warna seperti contoh_font4.htm atau contoh_font4.html berikut
ini penulisan kode programnya :
<html>
<head>
<title>Contoh Font HTML</title>
</head>
<body>
<font color=“#00ff00”>Ini merupakan contoh dari mengubah
Warna Font dengan kode warna hijau</font>
</body>
</html>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
54 54
Sehingga hasil tampilan dari kedua program tersebut seperti
gambar dibawah ini :
Gambar 2.10 Hasil Tampilan contoh_font3.htm
Berikut ini adalah hasil tampilan dari penggunaan kode warna
untuk contoh_font4.htm.
Gambar 2.11 Hasil Tampilan contoh_font4.htm
Sebagai catatan, untuk membuat perubahan warna menggunakan kode
warna pada format font dokumen HTML dapat diperoleh dari
perangkat lunak seperti Corel maupun Photoshop.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
55 55
2.5 BREAKLINE
Breakline digunakan untuk memotong kalimat atau kata pada
dokumen HTML dengan cara pindah baris. Tag breakline dituliskan
dengan bentuk <BR> yang berasal dari kata breakline tersebut.
2.5.1. BENTUK PENULISAN TAG BREAKLINE
Bentuk penulisan untuk tag breakline adalah sebagai berikut
ini :
........kata / kalimat sebelum <br> kata / kalimat berikutnya.........
2.5.2. PENERAPAN DALAM HTML
Contoh_breakline.htm atau contoh_breakline.html merupakan
contoh kode program dari tag breakline bilamana diterapkan ke dalam
media editor teks sebagai berikut :
<html>
<head>
<title>Contoh Breakline HTML</title>
</head>
<body>
BIODATA<br>Nama : Siska Aprillia Wati Ningrum <br>
Jenis Kelamin : Perempuan <br> Alamat : Jalan Kelengan Kecil No.
90<br>Facebook : Siezka Poenya_DiaSzaja
</body>
</html>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
56 56
Hasil kode program diatas setelah dijalankan pada browser
web sebagai berikut :
Gambar 2.12 Hasil Tampilan contoh_breakline.htm
2.6 HORISONTAL LINE
Horisontal line merupakan sebuah garis mendatar yang dapat
disisipkan dalam dokumen HTML, pada umumnya tag ini digunakan
untuk pemisah antar bagian pada objek.
2.6.1. BENTUK PENULISAN TAG HORISONTAL LINE
Bentuk penulisan tag untuk membuat sebuah garis mendatar
atau horisontal line tersebut adalah <hr>. Pada kasus berikut, tag
horisontal line merupakan jenis tag tunggal. Yang dimaksut dengan
tag tunggal adalah tidak adanya tag pembuka dan tag penutup.
....kalimat / kata / objek sebelumnya...<hr>...objek berikutnya.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
57 57
2.6.2. PENERAPAN DALAM HTML
Berikut ini adalah contoh menerapkan tag horisontal line ke
dalam media editor teks dan disimpan dengan nama file
contoh_hr.htm atau contoh_hr.html :
<html>
<head>
<title>Contoh Horisontal Line HTML</title>
</head>
<body>
BIODATA<hr>Nama : Siska Aprillia Wati Ningrum <hr>
Jenis Kelamin : Perempuan <hr> Alamat : Jalan Kelengan Kecil No.
90<hr>Facebook : Siezka Poenya_DiaSzaja
</body>
</html>
Contoh kode program yang diberikan memang sengaja dibuat
sama dengan contoh breakline, dimana maksut dan tujuannya adalah
agar dapat belajar memahami dan membedakan fungsi dari masing –
masing tag. Sehingga hasil yang diperoleh, bilamana tag <BR>
sebelumnya diganti dengan menggunakan tag <HR> :
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
58 58
Gambar 2.13 Hasil Tampilan contoh_hr.htm
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
59 59
2.7 RANGKUMAN
Tag utama HTML merupakan tag yang digunakan untuk
memanipulasi sebuah dokumen HTML. Adapun tag utama HTML,
antara lain : Heading, Paragraf, Font, Breakline, dan Horisontal line.
Heading merupakan teks dalam dokumen yang umumnya
mempunyai judul topik, pada dokumen HTML. Ciri dari heading
adalah tulisan akan ditampilkan dengan huruf yang dicetak tebal dan
dapat berukuran besar maupun kecil.
Tag heading mempunyai 6 bilangan yang digunakan untuk
mengubah ukuran tulisannya. Bilangan tersebut antara lain : terdiri
dari 1,2,3,4,5,dan 6. Semakin besar bilangan yang diberikan maka
semakin kecil ukuran tulisan headingnya.
Bentuk penulisannya sebagai berikut :
<hn> Tulisan yang akan dibuat menjadi Heading</hn>
Penjelasan :
1. <hn> merupakan tag pembuka dari heading, dimana h yang
berartikan heading sedangkan n merupakan bilangan yang
akan mengatur besar atau kecilnya tulisan heading ( yaitu
bilangan 1,2,3,4,5,atau 6 ). Semakin besar angka yang
diberikan untuk menggantikan n maka semakin kecil tulisan
headingnya.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
60 60
2. </hn> merupakan tag penutup dari heading, dimana sebelum
huruf h terdapat tanda atau simbol / yang berfungsi sebagai
penutup dan n merupakan bilangan yang sama dengan
bilangan yang diberikan pada tag pembukanya.
Membuat sebuah Paragraf dalam dokumen HTML harus
dimulai dengan memberikan tag pembuka dan tag penutup yang telah
ditentukan, yaitu tag <p> untuk pembukanya dan tag </p> untuk
mengakhiri atau penutupnya. Setiap pergantian paragraf haruslah
dimulai dengan pemberian tag pembukanya kembali, yaitu <p>.
<p> ...Isian dari paragraf...</p>
Tag Font digunakan untuk mengatur bentuk dari suatu huruf
dalam dokumen HTML.
Bentuk penulisan tag font dalam sebuah dokument HTML
dibuka dengan <font> dan diberikan tag penutup atau diakhiri
</font>. Didalam tag font terdapat beberapa attribut yang akan
dijelaskan berikut :
<font> Teks atau huruf yang akan diubah </font>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
61 61
Penjelasan :
1. <font> merupakan penulisan baku untuk tag pembuka format
font.
2. </font> merupakan penulisan baku untuk mengakhiri atau
menutup tag font.
3. Attribut yang terdapat di dalam tag pembuka font, antara lain :
Attribut Keterangan
Face Digunakan untuk mengubah jenis tulisan atau huruf,
misalkan : Arial. Jenis tulisan dapat disesuaikan dengan
yang ada pada Aplikasi Office PC.
Size Digunakan untuk mengubah ukuran besar maupun
kecilnya tulisan atau huruf, skala yang diberikan adalah
bilangan 1,2,3,4,5,6, atau 7.
Semakin besar bilangan yang diberikan maka semakin
besar pula ukuran huruf atau tulisannya.
Color Digunakan untuk mengubah warna pada huruf maupun
tulisan.
Dapat dilakukan dengan menggunakan kode warna,
maupun bahasa internasional untuk menyebutkan
warnanya.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
62 62
Breakline digunakan untuk memotong kalimat atau kata pada
dokumen HTML dengan cara pindah baris. Tag breakline dituliskan
dengan bentuk <BR> yang berasal dari kata breakline tersebut.
Bentuk penulisannya sebagai berikut :
........kata / kalimat sebelum <br> kata / kalimat berikutnya.........
Horisontal line merupakan sebuah garis mendatar yang dapat
disisipkan dalam dokumen HTML, pada umumnya tag ini digunakan
untuk pemisah antar bagian pada objek.
Bentuk penulisan tag untuk membuat sebuah garis mendatar
atau horisontal line tersebut adalah <hr>. Pada kasus berikut, tag
horisontal line merupakan jenis tag tunggal. Yang dimaksut dengan
tag tunggal adalah tidak adanya tag pembuka dan tag penutup.
....kalimat / kata / objek sebelumnya...<hr>...objek / kata / kalimat
berikutnya.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
63 63
2.8 LATIHAN
1. Jelaskan bagaimana bentuk penulisan dari tag heading ?
2. Jelaskan bagaimana bentuk penulisan dari tag paragraf ?
3. Jelaskan bagaimana bentuk penulisan dari tag font ?
4. Jelaskan bagaimana bentuk penulisan dari tag breakline ?
5. Jelaskan bagaimana bentuk penulisan dari tag horisontal line ?
Jawaban :
1. Bentuk penulisan dari heading sebagai berikut :
<hn> Tulisan yang akan dibuat heading </hn>
Penjelasan :
<hn> : Merupakan tag pembuka dari heading yang mana
didalam tanda kurung lancip tersebut terdapat 2
huruf, yaitu h dan n. Didalamnya terdapat attribut
untuk mengatur rata dari heading, yaitu : rata kiri,
tengah ataupun kanan.
H : huruf h pada tag pembuka dan tag penutup
menunjukkan bahwa tag tersebut membentuk sebuah
heading.
N : huruf n disini menunjukkan bilangan, dimana
bilangan yang digunakan terdiri dari : 1,2,3,4,5, dan
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
64 64
6. Dengan asumsi semakin besar bilangan yang
diberikan maka semakin kecil hasil headingnya.
</hn> : mengakhiri tag dari heading.
2. Bentuk penulisan dari paragraf sebagai berikut :
<p> Isi dari paragraf yang akan dibuat, misalkan ini merupakan isi dari
paragraf pertama </p>
Penjelasan :
<p> : merupakan tag pembuka untuk membuat sebuah
paragraf. Didalam tag pembuka tersebut terdapat
attribut, yaitu alignment. Yang fungsinya digunakan
untuk mengatur rata dari paragraf tersebut, antara
lain : rata kiri, kanan, center atau rata kiri dan
kanan ( justify).
</p> : digunakan untuk mengakhiri sebuah paragraf.
3. Bentuk penulisan dari font sebagai berikut :
<font> tulisan yang akan diubah jenis / warna / ukurannya </font>
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
65 65
Penjelasan :
<font> : tag pembuka untuk memulai pengubahan pada
font. Didalam tag pembuka tersebut terdapat beberapa
attribut, diantaranya : face, color, dan size.
Face : merupakan attribut dari tag pembuka font yang
digunakan untuk mengubah jenis tulisannya.
Color : attribut dari font yang digunakan untuk mengubah
warna dari tulisan tersebut.
Size : attribut dari font yang digunakan untuk mengubah
ukuran dari tulisannya. Untuk mengubah ukuran
menggunakan bilangan yang terdiri dari bilangan
1,2,3,4,5,6, dan 7. Dengan asumsi, semakin besar
bilangan yang diberikan maka semakin besar pula
hasilnya.
</font> : mengakhiri tag font.
4. Bentuk penulisan dari breakline sebagai berikut :
Tulisan / kata / objek ...<BR>...objek / kata / tulisan
Penjelasan :
<br> : pada bagian breakline biasa disebut dengan tag
tunggal, dikarenakan tidak adanya tag penutup untuk
mengakhirinya.
Bahasa Pemrograman Berbasis Web I - STMIK Duta Bangsa Surakarta
66 66
5. Bentuk penulisan dari horisontal line sebagai berikut :
Tulisan / kata / objek ...<HR>...objek / kata / tulisan
Penjelasan :
<hr> : pada bagian horisontal line biasa disebut dengan
tag tunggal, dikarenakan tidak adanya tag penutup
untuk mengakhirinya.