Modul yang disajikan sebagai acuan untuk bahan praktikum TIK
Kelas VII Semester Genap
MTs. Husnul Khotimah 2 Kuningan
Modul Praktikum TIK Semester Genap Page 1
PENGENALAN HTML
Tujuan
1. Siswa mengetahui dasar-dasar HTML
2. Siswa mengetahui HTML Editor
3. Siswa mampu membuat dokumen HTML dan melakukan formatting terhadap dokumen
tersebut.
4. Siswa mampu melakukan text formatting
5. Siswa mampu melakukan listing pada dokumen HTML
6. Siswa mampu membuat listing bersarang pada dokumen HTML
Overview
Sebuah aplikasi web dibangun menggunakan tag HTML. Hypertext Markup
Language atau HTML adalah bahasa markup yang digunakan untuk membuat sebuah halaman
web. Isinya terdiri dari berbagai kode yang dapat menyusun struktur suatu website.
HTML terdiri dari kombinasi teks dan simbol yang disimpan dalam sebuah file. Dalam
membuat file HTML, terdapat standar atau format khusus yang harus diikuti. Format tersebut
telah tertuang dalam standar kode internasional atau ASCII (American Standard Code for
Information Interchange).
Dengan adanya HTML, pengguna dapat membuat atau menyusun heading, paragraf,
gambar, link, dan lainnya supaya dapat dilihat banyak orang melalui halaman website. Untuk
praktikum ini akan menggunakan notepad, Notepad ++, sebagai HTML editornya.
Mengenal Tag HTML, Elemen, dan Atribut.
1. Tag
Adalah tanda awalan dan akhiran dalam perintah HTML yang akan dibaca oleh web
browser. Tag dibuat dengan menggunakan kurung siku <…>, di mana di dalamnya berisi
nama tag.
Misalnya: <bold>. Tag tersebut akan meminta browser untuk menampilkan teks dengan
format tebal.
Modul Praktikum TIK Semester Genap Page 2
2. Elemen
Merupakan komponen HTML yang berupa keseluruhan kode dari tag pembuka hingga tag
penutup. Elemen terdiri dari teks dan simbol yang berupa tag pembuka, isi tag atau konten,
dan tag penutup.
Contohnya: <bold>Belajar HTML</bold>.
3. Atribut
Adalah informasi atau perintah tambahan yang berada dalam elemen. Atribut ini berfungsi
sebagai penjelas perintah tag pada elemen.
Misalnya, <img src=”gambar.jpg” alt “Bunga Matahari.”>
Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>, <body>
beserta tag penutupnya masing-masing. Susunan tag – tag tersebut membentuk
dokumen HTML sebagai berikut :
Untuk menyimpan dokumen html dengan ektensi/tipe file nya .htm atau .html
1.1. Tag Dasar dalam HTML
1.3.1 Heading
Heading merupakan sekumpulan kata yang menjadi judul atau sub judul dalam dokumen
HTML, dengan berbagai ukuran yang berbeda.
Format : <H1>...........</H1> sampai <H6> ........................</H6> Page 3
Contoh :
<HTML>
<BODY>
<H1>Heading 1 adalah 24 Point</H1>
<br>
<H2>Heading 2 adalah 18 Point</H2>
<br>
<H3>Heading 3 adalah 14 Point</H3>
<br>
<H4>Heading 4 adalah 12 Point</H4>
<br>
<H5>Heading 5 adalah 10 Point</H5>
<br>
<H6>Heading 6 adalah 7 Point</H6>
<br>
Modul Praktikum TIK Semester Genap
1.3.2 Paragraf
a. Melakukan Formating Paragraf
Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan menyajikan
informasi-informasi yang diperlukan. HTML juga mendefinisikan elemen khusus, untuk
mendefinisikan teks dengan makna khusus.
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output, seperti
teks tebal atau miring.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:
teks tebal : menggunakan tag <b>
teks penting : menggunakan tag <strong>
teks miring : menggunakan tag <i>
teks menekankan : menggunakan tag <em>
teks menandai : menggunakan tag <mark>
teks kecil : menggunakan tag <small>
teks menghapus : menggunakan tag <del>
teks memasukkan : menggunakan tag <ins>
subscript / pangkat dibawah : menggunakan tag <sub>
superscripts / pangkat di atas : menggunakan tag <sup>
b. Menggunakan Line Break
Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu tidak berlaku
dalam penulisan dokumen HTML. Seberapa banyak kita memencet tombol Enter, maka tidak
kan dianggap 1 pun.
Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru layaknya fungsi
tombol Enter pada keyboard. Line break menggunakan tag <br>
c. Membuat garis Horizontal
Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara
visual. Tag yang digunakan adalah <hr>.
1.3.3 List Page 4
Modul Praktikum TIK Semester Genap
List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar dengan
urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list, unordered list dan
definition list.
a. List Tanpa Urutan (Unordered Lists)
Unordered list adalah metode mengurutkan daftar dengan menggunakan simbol atau special
character pada HTML. Tag yang digunakannya adalah <ul>
b. List Berurut (Ordered Lists)
Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka, abjad dan
angka romawi pada HTML. Dalam ordered list ini akan ada dua jenis elemen yang dibutuhkan
yaitu <ol> yang merupakan singkatan ordered list dan <li> yang merupakan singkatan list
item.
c. Definition List
Definition list merupakan jenis daftar yang umumnya digunakan untuk mendefinisikan sesuatu.
Definition list akan menggunakan tiga jenis tag : Diawali dengan <dl> yang merupakan
singkatan definition list; <dt> yang merupakan singkatan definition term (digunakan untuk kata
yang akan didefinisikan); <dd> definition description yang merupakan penjelasan dari suatu
istilah (<dt>).
Modul Praktikum TIK Semester Genap Page 5
Tugas : TIK
Materi : Web Programing (Praktikum HTML)
Rincian Tugas :
1. Tulislah script html biodata santri HK2 di buku catatan
2. Baca dan hapalkan kode script di bawah sebagai acuan Ujikom Pekan depan
<html>
<head>
<title>Membuat Tabel Biodata Diri dengan HTML</title>
</head>
<body>
<h1 align="center">BIODATA DIRI</h1>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="800">
<tr align="center" bgcolor="#1fe5d5">
<td width="200">DATA DIRI</td>
<td width="400">KETERANGAN</td>
<td width="200">FOTO</td>
</tr>
<tr>
<td>Nama</td>
<td>Santri HK2</td>
<td rowspan="7"><img src="riski.jpeg" width="200"></td>
</tr>
<tr>
<td>Tempat/Tanggal Lahir</td>
<td>Pancalang, 10 Oktober 2009</td>
</tr>
<tr>
<td>Alamat</td>
<td>Desa Pancalang Kabupaten Kuningan</td>
</tr>
<tr>
<td>Agama</td>
<td>Islam</td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td>Pekerjaan</td>
<td>Santri</td>
</tr>
<tr>
<td>Hobi</td>
<td>Futsal</td>
</tr>
</table>
</body>
</html>
</html>
Modul Praktikum TIK Semester Genap Page 6
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
Materi dasar web programing untuk kelas VII MTs. Husnul Khotimah 2 Kuningan
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
HTML Kelas VII
- 1 - 6
Pages: