Scribd
Unggah
28 tayangan6 halaman

Bab 2 - Dasar HTML

Diunggah oleh

wiridsaputra
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
28 tayangan6 halaman

Bab 2 - Dasar HTML

Diunggah oleh

wiridsaputra
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 6

BAB 2

DASAR HTML

1.1 TUJUAN
• Mahasiswa Dapat Memahami Dan Mengenal Perintah-Perintah Dasar HTML.
• Mahasiswa Dapat Mempelajari Kode-Kode HTML.
1.2 PENGANTAR
1.2.1 Pengertian HTML
HTML (HyperText Markup Language) merupakan suatu bahasa yang
menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang
harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara
benar. HTML itu bahasa yang digunakan untuk membantu dalam menyediakan
struktur halaman website seperti pembuatan table, form list, heading dan
beberapa elemen lain. Fungsi dari HTML antara lain
a. Menyusun kerangka dan struktur halaman website.
b. Menampilkan multimedia pada halaman website.
c. Membantu mengarahkan pengguna menuju ke halaman lain melalui
hyperlink.
1.2.2 Struktur Dokumen HTML
Dalam pembuatan HMTL dibutuhkan 3 struktur yaitu tag, elemen, dan atribut.
A. Tag Dasar HTML
Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di
HTML. Tag dibuat dengan kurung siku (<…>), lalu di dalamnya berisi
nama tag dan kadang juga ditambahkan dengan atribut. Tag selalu ditulis
berpasangan. Ada tag pembuka dan ada tag penutupnya.
Tag pembuka
<namaTag>

Tag penutup
</namaTag>

Dokumen HTML juga menyertakan tiga pasang tag yaitu:


• Tag <head> dan </head> berfungsi untuk menyertakan informasi
mengenai dokumen HTML.
• Tag <title> dan </title> berfungsi untuk menambahkan title di title bar
browser.
• Tag <body> dan </body> berfungsi untuk melingkupi semua teks yang
terdapat di halaman HTML.
Tabel 1. Tag Dasar HTML
Tag HTML Keterangan
<html> Mendefinisikan sebuah document html.
<body> Mendefinisikan isi/badan suatu dokumen.
<h1> - <h6> Mendefinisikan heading 1 s/d heading 6.
<p> Mendefinisikan sebuah paragraph.
<br> Menyisipkan sebuah line break.
<hr> Mendefinisikan sebuah garis horizontal.
Mendefinisikan komentar dalam kode
<!-->
HTML.

Tabel 2. Tag List


Nama Tag Keterangan
<ol> Mendefinisikan sebuah list ordered.
<ul> Mendefinisikan sebuah list unordered.
<li> Mendefinisikan sebuah item dalam list.
<dl> Mendefinisikan sebuah list definisi.
<dt> Mendefinisikan sebuah istilah list definisi.
Mendefinisikan sebuah keterangan list
<dd>
definisi.

Tabel 3. Tag Formating


Nama tag Keterangan
<b> Mendefinisikan teks tebal.
<big> Mendefinisikan teks yang lebih besar.
<em> Mendefinisikan teks miring.
<i> Mendefinisikan tek miring.
<small> Mendefinisikan teks yang lebih kecil.
<strong> Mendefinisikan teks tebal.
Mendefinisikan teks yang posisinya lebih
<sub>
kebawah.
Mendefinisikan teks yang posisinya lebih
<sup>
keatas.
<ins> Mendefinisikan teks yang bergaris bawah.
<del> Mendefinisikan teks coret.

B. Element
Element HTML merupakan komponen penyusun dalam dokumen
HTML.Dokumen HTML terdiri dari beberapa dokumen yang terkait satu
sama lain. Masing-masing elemen diapit dengan tanda ( < ) dan ( > ).

Tabel 3. Daftar tag yang wajib ada di HTML


Nama Tag Keterangan
<!DOCTYPE html> Digunakan untuk deklarasi type dokumen
<html> Sebagai tag utama dalam HTML.
<head> Sebagai header pada dokumen HTML
<title> Sebagai judul pada dokumen HTML yang akan
ditampilkan pada jendela browser.
<body> Digunakan untuk menampilkan isi dokumen
HTML yang dibuat.

C. Atribut
Attribut digunakan sebagai informasi tambahan yang diperlukan
dalam suatu tag. Penulisan atribut dalam tag memilki aturan sebagai
berikut:
Tabel 4. Penulisan Atribut dalam Tag
Atribut Keterangan
scr Untuk menentukan URL untuk gambar.
href Untuk menentukan URL untuk tautan.
Untuk menentukan teks alternatif mengenai
alt
gambar.
Untuk menentukan style dari isi atau elemen
style
dokumen.
Untuk menentukan informasi tambahan dari
title
elemen website.
1.3 KEGIATAN PRAKTIKUM
1.3.1 Kegiatan 1 : Tag HTML
<html>
<head>
<title>Tag HTML</title>
</head>
<body>
<!--tag Heading-->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!--Tag Paragraf-->
<p>ini adalah paragraf.</p> <br>
<p align="left">Paragraf ini berada dikiri</p>
<p align="center">Paragraf ini berada ditengah</p>
<p align="right">Paragraf ini berada dikanan</p>
</body>
</html>

1.3.2 Kegiatan 2 : Tag Formating


<html>
<head>
<title>Tag Formating HTML</title>
</head>
<body>
<h2>Tag Formating HTML</h2>
<b>Teks ini tebal</b> <br>
<strong>Teks ini juga tebal</strong> <br>
<em>Teks ini miring</em> <br>
<i>Teks ini juga miring</i> <br>
<small>Teks ini hurufnya kecil</small> <br>
<p>Teks ini berisi <sub>subscript</sub></p>
<p>Teks ini berisi <sup>superscript</sup></p>
<pre>
ini adalah
Teks yang di preformat.
Preformat akan menampilkan spasi dan
linebreak apa adanya.
</pre>
</body>
</html>
1.3.3 Kegiatan 3 : List HTML
<html>
<head>
<title>List HTML</title>
</head>
<body>
<h1>Membuat Tag List Pada HTML</h1>
<p> Ordered List HTML angka</p>
<ol>
<li>Jeruk</li>
<li>Mangga</li>
<li>Anggur</li>
</ol>
<p>Ordered List HTML type huruf</p>
<ol type="A">
<li>Jeruk</li>
<li>Mangga</li>
<li>Anggur</li>
</ol>
<p>Unordered HTML List</p>
<ul>
<li>Jeruk</li>
<li>Mangga</li>
<li>Anggur</li>
</ul>
<p>Unordered HTML List</p>
<ul type="circle">
<li>Jeruk</li>
<li>Mangga</li>
<li>Anggur</li>
</ul>
</body>
</html>

1.4 TUGAS
1. Buatlah script HTML untuk menampilkan Biodata Diri berupa: Nama,
Tempat/Tanggal Lahir, Asal Daerah, Jenis Kelamin, Jurusan, Alamat, dan Hobi.
Kemudian lampirkan hasil screenshoot tugas dalam laporan dan berikan analisanya.

Anda mungkin juga menyukai