Kait - Modul #02

KOMPUTER APLIKASI IT
SEMESTER 3 | SI/MI | S1/D3 | UNIKOM | 2017
Materi 2
Kompetensi Dasar Tag-tag Dasar HTML dan Format Teks HTML
 Tag-tag Dasar HTML; HTML, Head, Body, Paragraf, Line Break,
Heading, Penggaris Mendatar, dan Komentar.
Pokok Bahasan
 Format teks HTML; Pemformatan teks, Computer-Output, Citation,
Quotation, & Definition, dan Font.
I. Elemen Dasar HTML

1.1 HTML, Head, dan Body
Berikut adalah struktur dasar dokumen HTML yang disusun oleh tag-tag berikut:
a. HTML
<html> ... </html>
Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen HTML.
Tag ini merupakan tag yang harus dituliskan sebagai tag awal dalam dokumen HTML.
b. Head
<head> ... </head>
Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang dokumen
web yang akan ditampilkan seperti judul dan icon yang tampil di web browser, meta data,
keterkaitan dengan dokumen lain (css dan javascript), dan lainnya. Beberapa tag yang ada
dalam <head> ... </head>:
1. <title> ... </title>
Merupakan salah satu tag yang dituliskan dalam tag <head> ... </head> yang
berfungsi untuk menampilkan judul/topik pada tab web browser pada saat dokumen
HTML ditampilkan.
2. <link />
Merupakan tag untuk menghubungkan dengan dokumen CSS atau untuk
menampilkan icon pada tab web browser.
3. <style> ... </style>
Merupakan tag untuk menyimpan bahasa CSS.
4. <script> ... </script>
Merupakan tag untuk menyimpan bahasa JavaScript atau menghubungkan dengan
dokumen JavaScript.
5. <meta />
Mendefinisikan informasi meta. Beberapa atribut yang biasanya di tampilkan adalah
charset, name, http-equiv, dan content. Meta tag tidak dimaksudkan untuk
menambah atau mempengaruhi isi dari konten dokumen web, namun lebih kepada
1
keterangan tambahan tentang dokumen itu sendiri. Meta tag merupakan tag yang
berdiri sendiri, atau disebut juga self-closing tag.
6. <base />
Merupakan definisi suatu refrensi default kepada suatu resource eksternal.
c. Body
<body> ... </body>
Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen yang
akan ditampilkan didalam browser harus dituliskan.
1.2 Paragraf
Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan.
Misalnya satu pikiran utama disimpan dalam satu paragraf. Setiap paragrad dimulai dengan
memberi tag <p>. Diakhir paragraf tidak diharuskan menuliskan </p> sebagai tag akhir paragraf.
1 <html>
2 <head>
3 <title>
4 Latihan Paragraf
5 </title>
6 </head>
7 <body>
8 <p align=”left”>Belajar Paragraf HTML</p>
9 </body>
10 </html>
Penjelasan:
 Pada baris 8 merupakan contoh penggunaan tag <p> </p> untuk membuat elemen paragraf.
 Pada baris 8 terdapat penggunaan atribut align pada tag <p> yang berfungsi untuk mengatur
tata letak paragraf, dan value yang tersedia adalah:
- Left; untuk rata kiri
- Right; untuk rata kanan
- Center; untuk rata tengah
- Justify; untuk rata kiri kanan
1.3 Line Break

Tag yang digunakan untuk membuat baris baru pada sebuah dokumen HTML. Membuat
garis baru dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti
paragraf. Tag yang digunakan untuk membuat baris baru adalah <br>.
1 <html>
2 <head>
3 <title>
4 Latihan Line Break
5 </title>
6 </head>
2
7 <body>
8 <p>
9 Memotong <br>baris <br>dalam suatu <br>paragraf,
10 <br>gunakan tag br.
11 </p>
12 </body>
13 </html>
Penjelasan:
 Pada baris 9 merupakan contoh penggunaan tag <br> untuk pembuatan baris baru didalam
sebuah paragraf.
 Penggunaan tag <br> diketikan di ujung kalimat yang akan dijadikan baris baru.
1.4 Heading
Informasi yang ditampilakan pada web dengan bentuk teks biasanya terdapat judul bab atau
subbab. Dalam dokumen HTML diterapkan dengan menggunakan elemen heading. Heading
tulisan akan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Terdapat 6 tingkatan
heading dalam HTML.
1 <html>
2 <head>
3 <title>
4 Latihan Heading
5 </title>
6 </head>
7 <body>
8 <h1> Ini Heading 1</h1>
14 </body>
15 </html>
Penjelasan:
 Pada baris 8-13 merupakan contoh penggunaan heading untuk pembuatan judul.
 Tag <h1> merupakan heading terbesar sedangkan tag <h6> merupakan heading terkecil.
 Untuk mengatur tata letak heading menggunakan atribut align dengan value:
- Left; untuk rata kiri
- Right; untuk rata kanan
- Center; untuk rata tengah
- Justify; untuk rata kiri kanan
3
1.5 Penggaris Mendatar
Sebuah penggaris dapat disisipkan dalam dokumen web, umumnya digunakan sebagai
pemisah antar bagian teks atau paragraf. Tag <hr> disisipkan pada tempat garis yang akan
disisipkan dalam dokumen.
1 <html>
2 <head>
3 <title>
4 Latihan Penggaris Mendatar
5 </title>
6 </head>
7 <body>
8 <p>Tag hr digunakan untuk mendefinisikan garis
9 pada:</p>
10 <hr>
11 <p>Paragraf 1</p><hr>
14 </body>
15 </html>
1.6 Komentar
Dalam sebuah dokumen HTML dapat diberikan komentar untuk keterangan atau catatan
yang tidak perlu ditampilkan pada web browser. Teks yang berfungsi sebagai komentar dapat
disimpan diantara tag .
1 <html> 
3 <head>
4 <title>
5 Latihan Komentar
6 </title>
7 </head>
8 <body>
9 <p> Ini Paragraf</p> 
10 <h2> Ini Heading 2</h2> 
11 Ini Break Line<br> 
12 <p> Ini Penggunaan Garis Mendatar</p><hr> 
14 </body>
15 </html>
4
1.7 Tag-tag Dasar HTML
Tag Awal Kegunaan
<html> Definisi sebuah dokumen HTML
<body> Definisi body dokumen
<h1> - <h6> Definisi heading 1 s.d 6
<p> Definisi sebuah paragraf
<br> Sisipkan line break
<hr> Definisi sebuah penggaris mendatar
<!-- Definisi komentar dalam dokumen HTML
II. Format Teks HTML

Teks dalam dokumen HTML dapat diformat secara khusus untuk menunkukan perbedaan
dan penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam bentuk
huruf tebal, miring, garis bawah, dan lainnya.
2.1 Pemformatan Teks

Beberapa pemformatan teks:
a. Menebalkan huruf
b. Memiringkan huruf
c. Memberi tekanan pada teks
d. Mengecilkan huruf
e. Superscript
f. Subscript
g. dll
1 <html>
2 <head>
3 <title>
4 Latihan Pemformatan Teks
5 </title>
6 </head>
7 <body>
8 <h2>Karakter pada Teks</h2>
9 <b>Teks Bold</b><br>
10 <strong>Teks Strong</strong><br>
11 <big>Teks Big</big><br>
12 <small>Teks Small</small><br>
13 <em>Teks Emphasize</em><br>
14 <i>Teks Italic</i><br>
15 <u>Teks Underline</u><br>
16 <strike>Teks Strike</strike><br>
17 <del>Teks Deleted</del><br>
18 <mark>Teks Mark</mark><br>
19 <ins>Teks Inserted</ins><br>
5
20 2X<sub>2</sub>+5X-1=0 - <sub>Subscript</sub><br>
21 H<sup>2</sup>O - <sup>Superscript</sup><br>
22 </body>
23 </html>
Penjelasan:
Tag Kegunaan
<b> Menebalkan teks
<strong> Menandai teks dengan menebalkan teks
<big> Teks yang besar ukurannya
<small> Teks yang kecil ukurannya
<em> Penekanan teks
<i> Memiringkan teks
<u> Menggarisbawahi teks
<strike> Mencoret teks
<del> Menandai teks dengan mencoret teks
<mark> Menandai teks dengan highlight
<ins> Menandai teks dengan menggarisbawahi teks
<sub> Teks menjadi subscript
<sup> Teks menjadi superscript
2.2 Computer-Output
Menampilkan beberapa tag terkait tampilan tertentu pada web browser. Salah satu
penggunaannya adalah untuk menampilkan suatu source program dalam web.
1 <html>
2 <head>
3 <title>
4 Latihan Tag Computer-Output
5 </title>
6 </head>
7 <body>
8 <code>Mendefinisikan teks computer code</code><br>
9 <kbd>Mendefinisikan teks keyboard</kbd><br>
10 <samp>Mendefinisikan sample computer code</samp><br>
11 <tt>Mendefinisikan teks teletype</tt><br>
12 <var>Mendefinisikan variabel</var><br>
13 <pre>
14 void node:: remove()
15 {
16 if (prev)
17 prev -> next = next;
18 else if (parent)
19 parent -> SetContent(null);
20
21 if (next)
22 next -> prev = prev;
6
23 parent = null;
24 }
25 </pre>
26 <listing>Penggunaan sama dengan tag pre</listing><br>
27 <plaintext>Menampilkan seluruh teks dan tagnya - <p>
28 ... </p></plaintext><br>
29 <xmp>Penggunaan sama dengan tag pre </xmp><br>
30 </body>
31 </html>
Penjelasan:
Tag Kegunaan
<code> Mendefinisikan teks computer code
<kbd> Mendefinisikan teks keyboard
<samp> Mendefinisikan sample computere code
<tt> Mendefinisikan teks teletype
<var> Mendefinisikan variabel
<pre> Mendefinisikan teks preformated
<listing> Penggunaan sama dengan tag pre
<plaintext> Menampilkan seluruh teks dan tag-tag lainnya
<xmp> Penggunaan sama dengan tag pre
2.3 Citation, Quotation, & Definition

Berikut adalah penerapan dari tag citation, quotation, dan definition.
1 <html>
2 <head>
3 <title>
4 Latihan Tag Citation, Quotation, dan Definition
5 </title>
6 </head>
7 <body>
8 <h2>Singkatan</h2>
9 <abbr title=”dan lain-lain”>dll</abbr>
10
11 <h2>Akronim</h2>
12 <acronym title=”World Wide Web”>WWW</acronym>
13
14 <h2>Alamat</h2>
15 <address>
16 Lab 8 dan 9<br>
17 Jl. Dipati Ukur No 114<br>
18 Bandung<br>
19 Indonesia<br>
20 </address>
21
22 <h2>BDO</h2>
7
23 <bdo>
24 Satu Dua Tiga Empat Lima
25 </bdo>
26
27 <h2>Blockquote</h2>
28 <blockquote>
29 Berikut adalah teks dengan quotation yang panjang
36 </blockquote>
37
38 <h2>Q</h2>
39 <q>
40 Isi quotation pendek
41 </q>
42 <br>
43 <br>
44 <b>Catatan</b>:<br>
45 Dengan elemen blockquote, browser menyisipkan line
46 break dan margin baru, tetapi elemen q tidak
47 melakukan sesuatu yang khusus<br>
48
49 <h2>Cite</h2>
50 <cite>
51 Tinggalkanlah kesenangan yang menghalangi
52 pencapaian kecemerlangan hidup yang diidamkan. dan
53 berhati-hatilah, karena beberapa kesenangan adalah
54 cara gembira menuju kegagalan
55 </cite>
56
57 <h2>Dfn</h2>
58 <dfn>Web Browser</dfn> adalah sebuah software
59 aplikasi untuk menerima, menampilkan, dan
60 menterjemahkan informasi dari <dfn>world wide
61 web</dfn> (wikipedia).
62 </body>
63 </html>
Penjelasan:
Tag Kegunaan
<abbr> Mendefinisikan suatu singkatan
<acronym> Mendefinisikan suatu akronim
<address> Mendefinisikan penulisan alamat
8
<bdo> Mendefinisikan arah penulisan
<blockquote> Mendefinisikan kutipan panjang
<q> Mendefinisikan kutipan pendek
<cite> Mendefinisikan kutipan
<dfn> Menandai definisi suatu istilah
2.4 Font
Pengaturan font dengan menggunakan tag <font> ... </font> untuk mengatur ukuran,
warna, dan jenis huruf yang akan digunakan pada dokumen HTML. Tag ini memiliki 3 atribut
yaitu size untuk mengatur ukuran huruf, color untuk mengatur warna huruf, dan face untuk
mengatur jenis huruf yang akan digunakan. Untuk lebih jelasnya silakan coba contoh di bawah
ini:
1 <html>
2 <head>
3 <title>
4 Latihan Font
5 </title>
6 </head>
7 <body>
8 <font size=”1”>Font dengan ukuran 1</font><br>
15 <hr>
16 <font color=”red”>Font dengan warna merah</font><br>
17 <font color=”green”>Font dengan warna
18 hijau</font><br>
19 <font color=”blue”>Font dengan warna biru</font><br>
20 <font color=”00FFFF”>Font dengan warna
21 aqua</font><br>
22 <hr>
23 <font face=”arial”)Font jenis arial</font><br>
24 <font face=”comic sans ms”)Font jenis comic sans
25 ms</font><br>
26 <font face=”tahoma”)Font jenis tahoma</font><br>
27 </body>
28 </html>
Penjelasan:
 Untuk tag <font> ... </font> terdapat tiga atribut yaitu size, color, dan face.
 Untuk value pada atribut color dapat menggunakan hex code. Sedang cara penulisannya
dimulai dari karakter #, kemudian diikuti kombinasi berupa hex 2 karakter. Misalnya
9
#FFEEA4 yang artinya intensitas Red=FF=255, Green=EE=238, Blue=A4=164. Apabila
kita menginginkan warna terang maka unsur F digunakan, sebaliknya jika warna gelap
maka unsur 0 dipergunakan. Untuk melihat nama dan hex suatu warna dapat dilihat pada
halaman web dibawah ini:
- http://www.w3schools.com/html/html_colornames.asp
- http://www.w3schools.com/html/html_colorvalues.asp
- http://www.w3schools.com/html/html_colors.asp
III. Soal Latihan

Buatlah dokumen HTML sesuai dengan tampilan web dibawah ini.
10

Kait - Modul #02

Diunggah oleh

Informasi Dokumen

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

Kait - Modul #02

Diunggah oleh

Hak Cipta:

Format Tersedia

KOMPUTER APLIKASI IT

SEMESTER 3 | SI/MI | S1/D3 | UNIKOM | 2017

I. Elemen Dasar HTML

1.3 Line Break

II. Format Teks HTML

2.1 Pemformatan Teks

2.3 Citation, Quotation, & Definition

III. Soal Latihan

Anda mungkin juga menyukai