Pemrograman Web - FORMAT TEXT DENGAN HTML (Bab 2)(Kelas XI)
BAB 2
FORMAT TEXT DENGAN HTML
A. KOMPETENSI DASAR
3.2 Menerapkan format teks pada halaman web
4.2 Membuat kode html untuk menampilkan teks dalam format tertentu pada halaman web
B. MATERI PEMBELAJARAN
HTML bukanlah bahasa pemrograman. HTML merupakan singkatan dari Hyper Text Markup Language. Disebut markup language karena HTML berfungsi untuk memperindah file teks biasa yang akan ditampilkan pada browser dengan menambahkan tag-tag pada file teks biasa tersebut. Tag-tag HTML diawali dengan tanda < dan diakhiri dengan tanda >. Walaupun beberapa tag HTML berpasangan, namun ada beberapa tag HTML yang tidak berpasangan. Kelebihan dokumen web berbasis HTML adalah kemampuan untuk mendukung penulisan script bahasa pemrograman lainnya seperti Javascript, ASP, PHP dan lain-lain. HTML tidak bersifat case sensitive, yaitu huruf besar dan kecil pada tag HTML artinya sama. Kesalahan pada penulisan tag HTML pun tidak fatal, tulisan yang kita ketikkan pada editor teks akan tetap dapat kita lihat di browser.
Struktur dasar HTML:
Pembuatan web dengan tag HTML diawali dengan tag <html> dan diakhiri dengan tag </html>. Didalam Tag <html> terdapat tag <head> yang merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle> ... </tittle> yang berfungsi untuk mengeluarkan judul pada tittle bar window web browser, setelah tag </tittle> ditutup dengan tag </head>. Sedangkan diantara tag <body>...</body> merupakan bagian yang akan ditampilkan pada halaman web browser nantinya, yang merupakan isi web.
Pengaturan Properti Dokumen
Pengaturan properti dokumen dilakukan diantara tag <body>...</body>. Banyak macam pengaturan properti dokumen, salah satunya adalah pengaturan warna. Ada pengaturan warna untuk background, untuk teks / tulisan, untuk link dan lain-lain. Pengaturan warna dapat menggunakan nama warna atau kode warna. Kode warna merupakan kode RGB yang ditampilkan dalam nilai hexadecimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Berikut merupakan contoh warna yang sering diterapkan dalam desain web beserta kode hexadecimal nya :
Elemen Heading <h1>... <h6>
Heading berfungsi untuk membuat format judul dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada 6 buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>. Semakin besar ukuran Heading nya maka semakin kecil ukuran teks nya.
Tanda <!-- .......... --> merupakan simbol dari komentar. Jadi semua tulisan yang berada diantara simbol tersebut tidak akan ditampilkan dalam web browser.
Tampilan nya sebagai berikut :
Elemen yang dihilangkan di HTML5
PENGATURAN TEKS
Pemformatan teks digunakan untuk memformat teks, seperti huruf tebal, miring dsb. Perfomatan teks ini juga digunakan untuk menampilkan "keluaran komputer", HTML Citations, Quotations, and Definition.
Elemen <BODY> memiliki beberapa atribut, yaitu :
Ada beberapa tag HTML yang biasa digunakan untuk pengaturan teks:
Contoh penerapan 1 :
Tampilan pada browser:
Contoh penerapan 2:
Tampilan pada browser:
Pada tampilan untuk contoh penerapan 2 diatas jenis font dan ukuran font dan warna font masih default yaitu times new roman 12 hitam karena tidak ada pengaturan font. Pada judul menggunakan tag <H3>. Paragraf pertama ada di antara tag <p>...</ p>. Sehingga untuk paragraph berikutnya berjarak 1,5 baris. Sedangkan paragraph ke 2 berada di antara tag <blockquote>...</blockquote> sehingga menjorok kekanan sebanyak 1 tab. Untuk menampilkan gambar menggunakan tag <img src="nama lokasi/nama file gambar" width="" height="">. Untuk src jika penyimpanan gambar diletakkan pada 1 folder yang sama dengan file HTML nya maka tidak perlu mencantumkan nama lokasi nya tetapi langsung ke nama file.
List Minimal
List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman.
Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :
Daftar berurutan (ordered list)
Membuat daftar berurutan menggunakan tag <ol> yang berpasangan dengan tag </ ol>. Secara default tag <ol> dimulai dari angka 1, 2, 3,....dst nya. Namun penomoran dapat juga berupa abjad atau romawi dan dapat kita atur sendiri awalnya, tidak harus di awali dengan angka 1. Pengaturannya dengan menyisipkan Type sebagai atribut tag <ol>. Berikut merupakan type untuk data berurutan :
Contoh :
Tampilan pada browser :
Pada daftar diatas untuk penomoran nya menggunakan I, karena pada tag <ol> diberi atribut type="I", Jika tanpa atribut type maka penomoran secara default adalah 1.
Daftar tidak berututan (unordered list)
Daftar tidak berurutan merupakan suatu list yang boleh tidak urut atau acak dengan menggunakan symbol atau bullet. Membuat daftar tidak berurutan menggunakan tag <ul>...</ul>. Ada beberapa tipe untuk data ridak berurutan, yaitu:
Contoh :
Tampilan pada browser:
Secara default jika tidak menggunakan type maka bullet berupa disc atau bulatan hitam.
Daftar definisi (definition list)
Daftar definisi biasanya digunakan untuk menampilkan penjelasan atau deskripsi, seperti kamus. Tag yang digunakan untuk membuat definition list adalah <dl>. Di dalam tag <dl> terdapat tag data term <dt> dan data description <dd>.
Contoh penerapan :
Tampilan di browser:
List Kombinasi
List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan memberi atribut start=" nilaiawal".
Contoh penerapan :
Tampilan di browser:
C. TUGAS MANDIRI (5 SOAL URAIAN)
Jawablah pertanyaan-pertanyaan di bawah ini dengan benar!
1. Didalam membangun website, para web programmer menggunakan HTML sebagai markup language. HTML merupakan singkatan dari Hyper Text Markup Language. Analisislah apa yang dimaksud dengan markup language!
2. HTML memiliki bagian-bagian dalam penulisannya. Tuliskan struktur dasar HTML dan jelaskan tiap-tiap bagian tersebut !
3. Pada HTML kita dapat mengatur penggunaan tulisan. Apakah tag pada HTML yang digunakan untuk mengatur tulisan dan atribut apa saja yang ada dalam tag tersebut, sebutkan dan jelaskan !
4. Halaman web akan lebih menarik jika terdapat gambar yang menerangkan isi dari web tersebut. Tag HTML apa yang digunakan untuk menyisipkan gambar pada halaman web dan analisislah atribut yang ada di dalam tag tersebut!
5. Ada kalanya konten website juga mengandung daftar. Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, sebutkan dan analisislah tag dari tiap-tiap daftar tersebut!
D. TUGAS KELOMPOK (5 SOAL URAIAN)
Buatlah kelompok dengan jumlah anggota 2 siswa setiap kelompoknya, dan bacalah petunjuk lalu kerjakan soal-soal di bawah ini dengan cermat dan teliti!
1. Carilah sumber informasi dari internet atau sumber bacaan lain tentang versi HTML dengan berbagai fiturnya mulai dari versi pertama muncul!
2. Diberikan gambar tampilan halaman web seperti di bawah ini :
Amatilah gambar di atas lalu analisislah tag HTML apa saja yang digunakan untuk menampilkan output seperti gambar di atas dengan cara menuliskan tag-tag HTMLnya!
3. Diberikan gambar tampilan halaman web seperti di bawah ini :
Amatilah gambar di atas lalu analisislah tag HTML apa saja yang digunakan untuk menampilkan output seperti gambar di atas dengan cara menuliskan tag-tag HTMLnya!
4. Diberikan perintah HTML seperti di bawah ini :
Ketiklah tag-tag HTML di atas pada text editor anda, lalu tuliskan output yang tampil pada web browser anda!
5. Diberikan gambar tampilan halaman web seperti di bawah ini:
Amatilah gambar di atas lalu analisislah tag HTML apa saja yang digunakan untuk menampilkan output seperti gambar di atas dengan cara menuliskan tag-tag HTMLnya!
E. UJI KOMPETENSI
PILIHAN GANDA
Berilah tanda silang (X) pada pilihan jawaban yang benar!
1. Untuk memperindah file teks biasa yang akan ditampilkan pada browser dengan menambahkan tag-tag pada file teks biasa tersebut digunakanlah HTML. Yang merupakan kepanjangan HTML adalah...
A. Hyper Text Markup Language
B. Hyperlinks and Text Markup Language
C. Home Tool Markup Language
D. Hyper Train Markup Language
E. Hyper Trill Markup Language
2. Pemberian warna pada halaman website dapat menggunakan nama warna atau dengan menggunakan kode hexadecimal sesuai dengan warna yang diinginkan. Kode untuk hexadecimal #000000 merupakan kode untuk warna ....
A. Hitam
B. Putih
C. Merah
D. Abu-abu
E. Kuning
3. Diberikan bacaan seperti di bawah ini:
HTML element body menunjukkan konten sebuah dokumen. Isi dari sebuah dokumen HTML yang akan ditampilkan pada jendela browser terdapat pada elemen <body>, sedangkan informasi dan keterangan lainnya yang berkaitan dengan dokumen tersebut dapat ditulis pada element <head>.
Jika kita ingin membuat tulisan lebih tebal daripada teks normal pada halaman web seperti teks dokumen pada bacaan diatas adalah menggunakan tag HTML...
A. <b>
B. <i>
C. <s>
D. <p>
E. <u>
4. Perhatikan bacaan pada soal no 3!
Jika kita ingin membuat tulisan miring pada halaman web seperti teks informasi pada
bacaan diatas adalah menggunakan tag HTML...
A. <b>
B. <i>
C. <s>
D. <p>
E. <u>
5. Dalam penulisan file HTML, teks yang akan muncul pada title bar didefinisikan diantara tag
A. <HEAD> dan </HEAD>
B. <TITLE> dan </TITLE>
C. <BAR dan </BAR>
D. <TITLE BAR> dan </TITLE BAR>
E. <BODY> dan </BODY>
6. Tag HTML yang digunakan untuk menandai sebuah paragraf dari dokumen HTML yang dibuat adalah ...
A. <PARAGRAF>
B. <PARAGRAPH>
C. <P>
D. <PG>
E. <PRG>
7. Tag HTML yang benar untuk menyisipkan baris baru adalah...
A. <LB>
B. <BREAK>
C. <BR>
D. <SPACE>
E. <NEW ROW>
8. Tag HTML yang digunakan untuk memisahkan teks menjadi baris baru adalah ....
A. <HR>
B. <BB>
C. <TEKS>
D. <BREAK>
E. <BR>
9. Untuk membuat animasi teks berjalan dari kiri ke kanan dalam halaman web digunakan perintah ....
A. <marquee> teks </marquee >
B. <marquee direction="left"> teks </marquee
C. <marquee direction ="right"> teks </marquee >
D. <marquee ><direction ="left"> teks </direction ></marquee >
E. <marquee ><direction ="right"> teks </direction ></marquee >
10. Berikut ini contoh penulisan tag HTML dan atribut untuk menentukan warna latar
belakang dari badan dokumen yang benar, kecuali .....
A. <BODY BGCOLOR="red">
B. <BODY BACKGROUND="red">
C. <BODY BGCOLOR="#FFFFFF">
D. <BODY BGCOLOR="#ffffff">
E. <BODY BGCOLOR="ff0022">
11. Tag heading yang terkecil dalam HTML adalah ....
A. <H6>heading</H6>
B. <H5>heading</H5>
C. <H4>heading</H4>
D. <H2>heading</H2>
E. <H1>heading</H1>
12. Tag HR memiliki atribut ....
A. size
B. width
C. height
D. size dan width
E. size dan height
13. Disajikan rumus kimia sebagai berikut :
Untuk membuat teks menjadi seperti angka 6 dan 12 dalam rumus kimia di atas dalam HTML digunakan tag...
A. C<superscript>6</superscript>H<superscript>12</>O<superscript>6</superscript>
B. C<subscript>6</subcript>H<subscript>12</subscript>O<subscript>6</subscript>
C. C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>
D. C<sup>6</sup>H<sup>12</sup>O<sup>6</sup>
E. <SUPERSCRIPT>C6H12O6</SUPERSCRIPT>
14. Disajikan rumus matematika sebagai berikut :
Tag HTML yang digunakan untuk membuat angka 2 pada rumus matematika diatas adalah...
A. <superscript>...</ superscript>
B. <sup>...</sup>
C. <sscript>...</sscript>
D. <subscript>...</subscript>
E. <sub>...</sub>
15. Berikut ini contoh penulisan tag HTML dan atribut untuk menentukan warna latar belakang dari badan dokumen yang benar, kecuali
A. <BODY BGCOLOR="red">
B. <BODY BACKGROUND="red">
C. <BODY BGCOLOR="#FFFFFF">
D. <BODY BGCOLOR="#ffffff">
E. <BODY BGCOLOR="ff0022">
16. Atribut FACE digunakan untuk ....
A. Menentukan warna teks
B. Menentukan ukuran huruf
C. Menentukan ketebalan teks
D. Menentukan posisi teks
E. Menentukan jenis huruf
17. Berikut ini adalah bentuk atribut type pada tag <UL>, kecuali ....
A. disc
B. square
C. circle
D. disc dan squre
E. number
18. Disajikan tampilan halaman web berupa daftar harga makanan sebagai berikut:
Tag HTML yang tepat untuk membuat bullet pada daftar harga makanan di atas adalah...
A. disc
B. square
C. circle
D. disc dan squre
E. number
19. Secara default, tipe ordered list yang keluar dalam halaman web adalah ....
A. 1
B. i
C. I
D. O
Ε. Ω
20. Tag HTML yang digunakan untuk menampilkan sebuah gambar dalam halaman web adalah ....
A. <IMG>
B. <IMAGE>
C. <JPG>
D. <BMP>
E. <GAMBAR>
MENJODOHKAN
Pilihlah jawaban yang benar dari soal-soal pada kotak jawaban yang telah tersedia
di bawah ini :
Perhatikan tampilan web dibawah ini lalu jawablah pertanyaan-pertanyaan di bawah dengan memilih jawaban pada kotak yang tersedia :
1. Tag HTML yang digunakan untuk membuat teks seperti pada no 1 adalah...
2. Tag HTML yang digunakan untuk membuat teks seperti pada no 2 adalah...
3. Tag HTML yang digunakan untuk menyisipkan gambar seperti pada no 3 adalah...
4. Tag HTML yang digunakan untuk membuat teks seperti pada no 4 adalah...
5. Tag HTML yang digunakan untuk membuat teks seperti pada no 5 adalah...
6. Tag HTML yang digunakan untuk membuat daftar seperti pada no 6 adalah...
7. Tag HTML yang digunakan untuk membuat teks seperti pada no 7 adalah...
8. Tag HTML yang digunakan untuk membuat teks seperti pada no 8 adalah...
9. Tag HTML yang digunakan untuk membuat teks seperti pada no 9 adalah...
10. Tag HTML yang digunakan untuk membuat garis seperti pada no 10 adalah.....
Kotak Jawaban
Tag <s>
tag <i>
tag<u>
Tag <img>
tag <hr>
tag <H2>
Tag <p>
Tag <sub>
tag <sup>
tag <a>
tag <ul>
tag <ol>
