E-Commerce Bab 02

2
TAG HTML DASAR
Tujuan Instruksional :
1. Mahasiswa mengetahui tag-tag tingkat dasar pada HTML

2. Mahasiswa dapat menyusun dan menyimpan sebuah dokumen HTML
dengan tag HTML dasar
3. Mahasiswa dapat menerapkan tag HTML dasar untuk mengatur
tampilan teks dengan format-format tertentu
Tag HTML Dasar
A. Konsep Dasar
Tag HTML Dasar
Tag HTML yang penting adalah tag yang mendefinisikan heading, paragraf,
dan line breaks.
Heading
Heading ditandai dengan penggunaan tag <h1> sampai <h6>. Tag <h1>
akan menampilkan heading paling besar, sedangkan tag <h6> akan menam-
pilkan heading terkecil.
<h1>Ini adalah heading 1</h1>

Paragraf
Paragraf ditandai dengan digunakannya tag <p>.
<p>Ini adalah paragraf</p>

<p>Ini adalah paragraf lainnya</p>
Line Breaks
Tag <br> digunakan untuk menandai perpindahan baris (line breaks), yaitu
bila ingin berpindah ke baris baru tetapi tidak ingin membuat paragraf baru.
<p>Ini <br> adalah contoh para<br>graf dengan tag

line breaks</p>
Baris Komentar di HTML
Tag komentar digunakan untuk menyisipkan komentar pada kode HTML. Baris
komentar akan diabaikan oleh web browser dan tidak akan ditampilkan. Baris
komentar digunakan untuk memudahkan menjelaskan dan menelusuri kode
HTML yang dibuat bila suatu saat ingin diedit kembali.
Penulisan baris komentar adalah sebagai berikut :

Garis Horizontal
8 E-Commerce - Akademi Akuntansi Y.A.I

Tag HTML Dasar
HTML menyediakan tag khusus untuk membuat garis horizontal, yaitu dengan
menggunakan tag <hr>. Garis horizontal dapat digunakan untuk memisahkan
bagian-bagian pada halaman HTML yang ingin ditampilkan.
Penulisan garis horizontal adalah sebagai berikut :
Garis horizontal memisahkan bagian halaman di atas

ini <hr> dengan bagian halaman yang ada di bawah
B. Format Teks dan Dokumen
 Latihan 1 : Dokumen HTML Sederhana

1. Jalankan aplikasi Notepad
2. Ketik baris perintah berikut ini :
<html>
<body>
Isi dari elemen body ditampilkan di web browser.
</body>
</html>
3. Simpan file di My Document sebagai “coba2-1.html” dengan cara klik

menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada
bagian Save as type pilih All Files, lalu ketik “coba3-1.html” pada
bagian File name, klik tombol Save.
4. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang
muncul klik Browse, cari file “coba2-1.html” yang baru dibuat tadi
(misalnya di C:\My Documents\coba2-1.html), lalu klik OK.
 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana teks yang ter-
dapat di dalam elemen body ditampilkan pada web browser.
 Latihan 2 : Paragraf Sederhana

<html>
<body>
<p>Ini adalah paragraf.</p>

<p>Ini adalah paragraf.</p>
<p>Elemen paragraf ditandai dengan tag p.</p>
</body>
</html>
E-Commerce - Akademi Akuntansi Y.A.I 9

Tag HTML Dasar
3. Simpan file sebagai “coba2-2.html”

 Penjelasan
dapat di dalam elemen paragraf ditampilkan pada web browser.
 Latihan 3 : Heading Sederhana

<html>
<body>
<h1>Ini adalah judul</h1>
<p>Ini adalah isi.</p>
</body>
</html>

 Penjelasan
dapat di dalam elemen heading ditampilkan pada web browser. Head-
ing akan ditulis dengan huruf besar dan tebal, sementara paragraf
akan ditampilkan seperti teks biasa.
 Latihan 4 : Baris Komentar dan Garis Horizontal

<html>
<body>

<p>Ini adalah contoh penggunaan baris horizontal
:</p>
<hr>
<p>Ini adalah baris paragraf.</p>
<hr>
<p>Ini adalah baris paragraf.</p>
</body>
</html>

Tag HTML Dasar

 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana baris komentar
yang ada pada kode HTML tidak ditampilkan di web browser. Garis
horizontal yang ditampilkan berfungsi sebagai pembatas antara baris-
baris paragraf pada halaman HTML.
Format Teks HTML
Ada beberapa tag HTML yang digunakan untuk mengatur format teks, seperti
misalnya teks miring dan teks tebal. Latihan-latihan berikut akan menjelaskan
format teks yang tersedia pada kode HTML.
 Latihan 5 : Format Teks

<html>
<body>
<b>Teks ini tebal</b>

<br>
<strong>Teks ini juga tebal</strong>
<br>
<big>Teks ini besar</big>
<br>
<small>Teks ini kecil</small>
<br>
<u>Teks ini bergaris bawah</u>
<br>
<em>Teks ini mendapat penekanan</em>
<br>
<i>Teks ini miring</i>
<br>
Teks ini berisi <sub>subscript</sub>
<br>
Teks ini berisi <sup>superscript</sup>
</body>
</html>


Tag HTML Dasar
 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana teks yang
terda-pat di dalam elemen body ditampilkan pada web browser sesuai
format tag HTML yang diberikan :
<b></b> dan <strong></strong> membuat format teks tebal

<big></big> membuat format teks besar
<small></small> membuat format teks kecil
<u></u> membuat teks bergaris bawah
<em></em> membuat format teks penekanan

<i></i> membuat format teks miring
<sub></sub> membuat format teks subscript (huruf kecil di
bawah)
<sup></sup> membuat format teks superscript (huruf kecil di
atas)
 Latihan 6 : Teks Preformat

<html>
<body>
<pre>
Ini adalah
Teks yang tidak diformat.
Hal ini membuat baik spasi
dan pergantian baris
tidak berubah.
</pre>
<p>Preformat digunakan untuk penulisan kode

program:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>


Tag HTML Dasar
 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana teks yang ber-
ada di dalam tag <pre></pre> tidak akan diformat oleh web browser,
dan akan ditampilkan apa adanya sesuai dengan apa yang dituliskan.
Spasi dan pergantian baris akan diabaikan oleh web browser. Seperti
pada contoh, spasi dan pergantian baris akan ditampilkan persis
seper-ti yang dituliskan pada kode HTML.
 Latihan 7 : Teks Kutipan

<html>
<body>
Ini adalah teks kutipan panjang:

<blockquote>Ini adalah teks kutipan panjang Ini
adalah teks kutipan panjang Ini adalah teks kutipan
panjang Ini adalah teks kutipan
panjang.</blockquote>
Ini adalah teks kutipan pendek:

<q>Ini adalah teks kutipan pendek</q>
</body>
</html>

muncul klik Browse, cari file “coba2-7.html” yang baru dibuat tadi (mi-
salnya di C:\My Documents\coba2-7.html), lalu klik OK.
 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana teks kutipan di-
tampilkan pada web browser. Ada dua format teks kutipan dalam
HTML :
• Teks kutipan panjang dengan tag <blockquote></blockquote>

• Teks kutipan pendek dengan tag <q></q>
Dengan tag <blockquote> pergantian baris dan batas margin (indent)

untuk teks akan secara otomatis diformat oleh web browser. Sedang-
kan untuk teks kutipan pendek dengan tag <q> teks tidak mengalami
format apapun.
C. List HTML

Tag HTML Dasar
Pada bagian sebelumnya telah dijelaskan sedikit mengenai list, namun pada
bagian ini akan dijelaskan secara lebih detil mengenai list dalam HTML.
Ada tiga jenis list yang dapat ditampilkan melalui dokumen HTML, yaitu :
1. Unordered list
2. Ordered list
3. Definition list
Masing-masing akan dijelaskan berikut ini.
Unordered List
1. Sebuah unordered list adalah list (daftar) dari beberapa item.

2. Setiap item ditandai dengan tanda bullet (biasanya berupa lngkaran
hitam kecil).
3. Unordered list diawali dengan tag <ul> dan diakhiri dengan tag </ul>.
4. Setiap item dalam list diawali dengan tag <li>
<ul>
<li>Kopi</li>
<li>Teh</li>
</ul>
Akan ditampilkan di web browser seperti berikut ini :
• Kopi
• Teh
Ordered List
1. Sebuah unordered list adalah juga list (daftar) dari beberapa item.
2. Setiap item ditandai dengan angka atau nomer.
3. Unordered list diawali dengan tag <ol> dan diakhiri dengan tag </ol>.
4. Setiap item dalam list diawali dengan tag <li>
<ol>
<li>Kopi</li>
<li>Teh</li>
</ol>
1. Kopi
2. Teh
Definition List
1. Sebuah definition list bukan merupakan list (daftar) dari beberapa

item, tapi lebih merupakan list (daftar) istilah dan penjelasan dari is-
tilah tersebut.
2. Definition list diawali dengan tag <dl> dan diakhiri dengan tag </dl>.
3. Setiap istilah dalam list diawali dengan tag <dt> dan diakhiri dengan
tag </dt>.
4. Setiap penjelasan dalam list diawali dengan tag <dd> dan diakhiri
dengan tag </dd>.

Tag HTML Dasar
<dl>
<dt>Kopi</dt>
<dd>Minuman panas pahit</dd>
<dt>Teh</dt>
<dd>Minuman dingin manis</dd>
</dl>
Kopi
Minuman panas pahit
Teh
Minuman dingin manis
 Latihan 8 : Ordered List

1. Jalankan aplikasi Notepad dan ketik baris perintah berikut ini :
<html>
<body>
<h4>List dengan angka :</h4>

<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>List dengan huruf besar :</h4>

<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>List dengan huruf kecil :</h4>

<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>List dengan angka romawi besar :</h4>

<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>List dengan angka romawi kecil :</h4>

Tag HTML Dasar
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>

 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana tag <ol> dapat
digunakan untuk menampilkan berbagai variasi list dengan mengguna-
kan angka dan huruf. Hal ini dimungkinkan dengan adanya atribut
TYPE. Tanpa atribut TYPE secara default HTML akan menampilkan list
dengan menggunakan angka. Tetapi bila diatur TYPE sesuai dengan
huruf awal yang diinginkan maka list yang ditampilkan akan bervariasi.
Misalnya TYPE=A akan menampilkan list dengan huruf besar, TYPE=i
akan menampilkan list dengan angka romawi kecil, dan seterusnya.
List dengan angka :
1. Apples
2. Bananas
3. Lemons
4. Oranges
List dengan huruf besar :
A. Apples
B. Bananas
C. Lemons
D. Oranges
List dengan huruf kecil :
a. Apples
b. Bananas
c. Lemons
d. Oranges
List dengan angka romawi besar :

Tag HTML Dasar
I. Apples
II. Bananas
III. Lemons
IV. Oranges
List dengan angka romawi kecil :
i. Apples
ii. Bananas
iii. Lemons
iv. Oranges
 Latihan 9 : Unordered List

<html>
<body>
<h4>List dengan lingkaran hitam :</h4>

<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>List dengan lingkaran kosong :</h4>

<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>List dengan kotak hitam :</h4>

<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>

muncul klik Browse, cari file “coba2-9.html” yang baru dibuat tadi (mi-
salnya di C:\My Documents\coba2-9.html), lalu klik OK.
 Penjelasan

Tag HTML Dasar
Contoh latihan di atas mendemonstrasikan bagaimana tag <ul> dapat

digunakan untuk menampilkan berbagai variasi list dengan mengguna-
kan bullet. Hal ini juga dimungkinkan dengan adanya atribut TYPE.
Tanpa atribut TYPE secara default HTML akan menampilkan list dengan
menggunakan bullet lingkaran hitam. Tetapi bila diatur TYPE sesuai
dengan jenis bullet yang diinginkan maka list yang ditampilkan juga
akan bervariasi. Misalnya TYPE=CIRCLE akan menampilkan list dengan
lingkaran kosong, TYPE=SQUARE akan menampilkan list dengan ben-
tuk kotak.
List dengan lingkaran hitam :
• Apples
• Bananas
• Lemons
• Oranges
List dengan lingkaran kosong :
o Apples
o Bananas
o Lemons
o Oranges
List dengan kotak hitam :
 Apples
 Bananas
 Lemons
 Oranges
 Latihan 10 : List Bersarang

<html>
<body>
<h4>Contoh list bersarang :</h4>

<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>The hitam</li>
<li>The hijau</li>
</ul>
</li>
<li>Susu</li>
</ul>
<h4>List bersarang 3 level :</h4>

<ul>

Tag HTML Dasar
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh hitam</li>
<li>Teh hijau
<ul>
<li>Cina</li>
<li>Afrika</li>
</ul>
</li>
</ul>
</li>
<li>Susu</li>
</ul>
</body>
</html>

(misalnya di C:\My Documents\ coba2-10.html), lalu klik OK.
 Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana list dalam HTML
dapat dibuat secara bersarang sebanyak 2 level dan 3 level seperti
berikut ini.
Contoh list bersarang :
• Kopi
• Teh
o The hitam
o The hijau
• Susu
List bersarang 3 level :
• Kopi
• Teh
o Teh hitam
o Teh hijau
 Cina
 Afrika
• Susu
 Latihan 11 : Definition List

1. Jalankan aplikasi Notepad dan ketik baris perintah berikut ini :
<html>
<body>

Tag HTML Dasar
<h4>Definition List :</h4>

<dl>
<dt>Kopi</dt>
<dd>Minuman panas pahit</dd>
<dt>Teh</dt>
<dd>Minuman dingin manis</dd>
</dl>
</body>
</html>

(misalnya di C:\My Documents\ coba2-11.html), lalu klik OK.
 Penjelasan
Contoh latihan di atas mendemonstrasikan pembuatan definition list
yang akan ditampilkan web browser seperti berikut ini :
Definition List :
Kopi
Minuman panas pahit
Teh
Minuman dingin manis
D. Soal Latihan
No. Soal Nilai

1 Buatlah sebuah halaman Web yang menampilkan data
seperti berikut ini :
DAFTAR GROUP PIALA DUNIA 2006
• Group A
1. Jerman
2. Ekuador
3. Polandia
4. Kostarika
• Group B
1. Inggris
2. Swedia
3. Paraguay
4. Trinidad & Tobago

E-Commerce Bab 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

E-Commerce Bab 02

Diunggah oleh

Hak Cipta:

Format Tersedia

2

TAG HTML DASAR

1. Mahasiswa mengetahui tag-tag tingkat dasar pada HTML

Tag HTML Dasar

<h1>Ini adalah heading 1</h1>

Paragraf ditandai dengan digunakannya tag <p>.

<p>Ini adalah paragraf</p>

<p>Ini <br> adalah contoh para<br>graf dengan tag

Baris Komentar di HTML

Penulisan baris komentar adalah sebagai berikut :

8 E-Commerce - Akademi Akuntansi Y.A.I

Penulisan garis horizontal adalah sebagai berikut :

Garis horizontal memisahkan bagian halaman di atas

B. Format Teks dan Dokumen

 Latihan 1 : Dokumen HTML Sederhana

3. Simpan file di My Document sebagai “coba2-1.html” dengan cara klik

 Latihan 2 : Paragraf Sederhana

<p>Ini adalah paragraf.</p>

<p>Elemen paragraf ditandai dengan tag p.</p>

E-Commerce - Akademi Akuntansi Y.A.I 9

3. Simpan file sebagai “coba2-2.html”

 Latihan 3 : Heading Sederhana

3. Simpan file sebagai “coba2-3.html”

 Latihan 4 : Baris Komentar dan Garis Horizontal

3. Simpan file sebagai “coba2-4.html”

10 E-Commerce - Akademi Akuntansi Y.A.I

4. Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang

Format Teks HTML

 Latihan 5 : Format Teks

<b>Teks ini tebal</b>

3. Simpan file di My Document sebagai “coba2-5.html” dengan cara klik

E-Commerce - Akademi Akuntansi Y.A.I 11

<b></b> dan <strong></strong> membuat format teks tebal

<em></em> membuat format teks penekanan

 Latihan 6 : Teks Preformat

<p>Preformat digunakan untuk penulisan kode

3. Simpan file sebagai “coba2-6.html”

12 E-Commerce - Akademi Akuntansi Y.A.I

 Latihan 7 : Teks Kutipan

Ini adalah teks kutipan panjang:

Ini adalah teks kutipan pendek:

3. Simpan file sebagai “coba2-7.html”

• Teks kutipan panjang dengan tag <blockquote></blockquote>

Dengan tag <blockquote> pergantian baris dan batas margin (indent)

E-Commerce - Akademi Akuntansi Y.A.I 13

1. Sebuah unordered list adalah list (daftar) dari beberapa item.

Akan ditampilkan di web browser seperti berikut ini :

Akan ditampilkan di web browser seperti berikut ini :

1. Sebuah definition list bukan merupakan list (daftar) dari beberapa

14 E-Commerce - Akademi Akuntansi Y.A.I

Akan ditampilkan di web browser seperti berikut ini :

 Latihan 8 : Ordered List

<h4>List dengan angka :</h4>

<h4>List dengan huruf besar :</h4>

<h4>List dengan huruf kecil :</h4>

<h4>List dengan angka romawi besar :</h4>

<h4>List dengan angka romawi kecil :</h4>

E-Commerce - Akademi Akuntansi Y.A.I 15

2. Simpan file di My Document sebagai “coba2-8.html” dengan cara klik

List dengan angka :

List dengan huruf besar :

List dengan huruf kecil :

List dengan angka romawi besar :