33
TAG UTAMA HTML Materi Heading Paragraf Font Breakline Horisontal Line

Materi...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

  • Upload
    others

  • View
    6

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Materi...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

TAG UTAMA

HTML

Materi

Heading

Paragraf

Font

Breakline

Horisontal Line

Page 2: Materi...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

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

Page 3: Materi...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

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.

Page 4: Materi...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

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 :

Page 5: Materi...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

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 :

Page 6: Materi...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

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

Page 7: Materi...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

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>

Page 8: Materi...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

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.

Page 9: Materi...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

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

Page 10: Materi...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

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

Page 11: Materi...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

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>

Page 12: Materi...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

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,

Page 13: Materi...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

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

Page 14: Materi...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

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>

Page 15: Materi...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

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>

Page 16: Materi...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

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.

Page 17: Materi...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

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 :

Page 18: Materi...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

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>

Page 19: Materi...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

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>

Page 20: Materi...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

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>

Page 21: Materi...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

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.

Page 22: Materi...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

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>

Page 23: Materi...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

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.

Page 24: Materi...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

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> :

Page 25: Materi...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

58 58

Gambar 2.13 Hasil Tampilan contoh_hr.htm

Page 26: Materi...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

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.

Page 27: Materi...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>

Page 28: Materi...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

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.

Page 29: Materi...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

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.

Page 30: Materi...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

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

Page 31: Materi...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

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>

Page 32: Materi...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

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.

Page 33: Materi...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

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.