Modul HTML

Modul 1 – Web Basic
Requirement
1. Web Browser (Ex: Mozilla Firefox, Chrome, IE, dll)
2. Teks Editor (Ex: Notepad ++, Sublime Text 3, Intellij Idea, dll)
Penjelasan
1. Website
Secara umum website dapat diartikan sebagai halaman yang berisi informasi
berupa gambar, suara, maupun text. Menurut Wikipedia pengertian dari website
adalah sebuah sistem yang menghubungkan dokumen dengan tipe multi fungsi
tekstual yang diakses melalui jaringan internet.
2. HTML
HTML adalah bahasa markah yang digunakan untuk mendeskripsikan struktur
sebuah halaman website. Halaman website juga dikenal dengan istilah dokumen
HTML. HTML bukan merupakan bahasa pemrograman(ex : C,JAVA,VB, dll)
melainkan berupa bahasa markup. Dokumen HTML terdiri dari tag-tag yang dapat
diterjemahkan oleh web browser( ex: Mozilla, Chrome, IE, Safari, dll) sehingga
halaman web dapat ditampilkan sesuai deskripsi yang diinginkan pembuat.
Tidak seperti bahasa pemrograman(ex : C,JAVA,VB, dll) yang membutuhkan
IDE khusus untuk membuatnya, HTML dapat dibuat dengan banyak text editor,
misalnya Notepad, Notepad++, Sublime Text, Comodo Editor dll.
HTML merupakan bahasa pemrograman yang digunakan untuk membuat
sebuah halaman web. Biasanya dibuka dengan <html> dan di akhiri dengan
</html>. <!DOCTYPE html> merupakan sebuah deklarasi yang menunjukkan ke
browser mengenai tipe dari dokumen yang digunakan sehingga memungkinkan
browser untuk menampilkan dokumen secara akurat.
3. HTML <!DOCTYPE>
Deklarasi doctype harus diletakkan paling pertama dalam dokumen
HTML, sebelum tag <html>. Doctype bukan merupakan tag HTML melainkan
intruksi kepada web browser mengenai versi dari bahasa markup yang di pakai
(Pada contoh diatas versi HTML yang dipakai adalah HTML 5). Deklarasi doctype
mengacu pada Document Type Definition (DTD) yang merupakan aturan-aturan
yang harus dipatuhi oleh browser untuk menampilkan halaman web.
Berbagai Doctype:
● HTML 4.01 Strict
2
Berisi semua elemen dan atribut HTML kecuali elemen-elemen yang
sudah di depresiasi. Frameset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
● HTML 4.01 Transitional

Berisi semua elemen dan atribut HTML dan juga elemen-elemen yang
sudah di depresiasi. Frameset tidak diperbolehkan.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
● HTML 4.01 Frameset

Mirip dengan Transitional hanya saja menyertakan Frameset.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
4. Tag HTML
● Tag HTML selalu diapit oleh tanda "<" dan ">", misalnya <html> , <p> dll.
● Pada umumnya setiap tag selalu memiliki pasangan untuk pembuka dan
penutupnya, <b> contoh tag </b>. Namun ada juga tag-tag yang tidak
berpasangan. Tag seperti ini dinamakan tag kosong, misal <hr/> , <img/> dll.
● Tag HTML tidak akan ditampilkan oleh web browser saat halaman web dibuka.
● Tag HTML bersifat non-case sensitive. Artinya penulisan <B> ataupun <b> sama
saja (kecuali pada XHTML). Namun, biasakan menuliskan tag dalam huruf kecil
(lowercase).
5. Pengenalan Elemen dan Atribut HTML

Berdasarkan isi elemennya, elemen HTML dibedakan menjadi dua, yaitu
elemen kosong dan elemen tidak kosong.
Format penulisan elemen tidak kosong adalah sebagai berikut :
<namatagpembuka namaatribut1 = 'isiatribut1' namaatribut2 =
'isiatribut2'> isi elemen </namatagpenutup> Contoh: <p align
='center'> Hello world </p>
Isi elemen HTML dapat berupa teks atau elemen HTML yang lainnya.
<namatagpembuka namaatribut1='isiatribut1'/>
Lain halnya dengan elemen tidak kosong, elemen kosong tidak memiliki isi dan tag
penutup. Contoh elemen-elemen kosong tersebut adalah img, br, hr dsb.
6. Atribut HTML
Elemen HTML dapat memiliki atribut, atribut merupakan tambahan
informasi bagi browser untuk menampilkan/memproses elemen HTML. Atribut
3
di letakkan pada tag pembuka dan harus merupakan pasangan nama dan nilai,
seperti: <p align = "justify" >Ini adalah paragraf satu yang memiliki
rata kanan dan kiri.</p>.
Elemen p(paragraph) di atas memiliki atribut "align" yang memiliki nilai

"justify" artinya isi paragraf akan rata kanan kiri. Format penulisan atribut adalah
namaatribut = "nilai" atau namaatribut = ‘nilai'
Satu elemen HTML dapat memiliki lebih dari satu elemen. Contoh dibawah
merupakan elemen gambar yang memiliki atribut src, title dan alt.
<img src = "www.example.com/example.jpg" alt = "ini contoh gambar"
title = "klik untuk memperbesar"/>
7. Elemen HTML
Elemen adalah satu kesatuan pasangan tag beserta isinya. Misalkan elemen
<body> Ini HTML Body </body>. Berikut beberapa elemen umum HTML :
● b - Bold text ● img - Inline image

● body - Document body ● input - Form input
● br - Line break ● label - Form field label
● button - Button ● li - List item
● col - Table column ● link - Document relationship
● div - Generic block-level container ● meta - Metadata
● em - Emphasis ● noscript - Alternate script content
● form - Interactive form ● object - Object
● h1 - Level-one heading ● ol - Ordered list
● h2 - Level-two heading ● optgroup - Option group
● h3 - Level-three heading ● option - Menu option
● h4 - Level-four heading ● p - Paragraph
● h5 - Level-five heading ● pre - Preformatted text
● h6 - Level-six heading ● script - Client-side script
● head - Document head ● select - Option selector
● hr - Horizontal rule ● span - Generic inline container
● html - HTML document ● strong - Strong emphasis
● i - Italic text ● style - Embedded style sheet
4
● sub - Subscript
● sup - Superscript
● table - Table
● tbody - Table body
● td - Table data cell
● textarea - Multi-line text input
● th - Table header cell
● title - Document title
● tr - Table row
● ul - Unordered list
5
Heading & Body
Heading berisikan informasi dari halaman web seperti judul,style css yang
digunakan dll. Tag yang bisa digunakan dalam head <title>, <style>, <meta>, <link>,
<script>
Body merupakan isi dari sebuah halam web / konten dalam web tersebut.
Dalam body dapat berisikan foto, paragraf, tabel dll. Menggunakan tag <body>
8. Title
Elemen title digunakan untuk memberikan judul pada halaman web. Judul
halaman web akan ditampilkan pada tab web browser atau window web browser.
Elemen title diletakkan dalam elemen head. Format penulisan elemen title adalah :
<title> judul halaman web </title>
9. Komentar Pada HTML

Kita dapat memberikan komentar pada dokumen HTML kita. Komentar yang
kita berikan tidak akan ditampilkan pada browser. Format komentar pada dokumen
HTML adalah :  Pada dokumen HTML, setiap
komentar yang kita tuliskan tidak akan ditampilkan dalam bentuk apapun.
10. Paragraph
Elemen paragraf biasa digunakan dalam penulisan berita, biografi, lirik dsb.
Bisasanya elemen paragraf di letakkan pada elemen <body>. Dengan
mengelompokkan kalimat-kalimat dalam elemen paragraf, nantinya akan
mempermudah pengeditan halaman. Format pembuatan paragraf pada HTML adalah
sebagai berikut :
6
11. List
Terdapat 3 macam list pada HTML, Unordered List, Ordered List dan
Definition List. Unordered list digunakan untuk menyajikan daftar yang isinya tidak
diberi penomoran sebagai urutan.Format penulisan unordered list adalah sebagai
berikut :
<ol>
<li>isi pertama</li>
<li>isi selanjutnya...</li>
</ol>
12. Image
Pada elemen Image digunakan untuk menampilkan gambar pada halaman.
Elemen ini termasuk elemen kosong. Fomat dasar penulisan elemen image pada
HTML adalah sebagai berikut :
<img src=”namafilegambar.jpg"></img> .JPG merupakan format dari gambar
yang ingin dimasukan.
13. Anchor
Elemen a (Anchor) berfungsi untuk menambahkan fungsi hyperlink pada isi HTML.
Hyperlink dapat dilakukan ke dalam dokumen yang sama ataupun ke luar dokumen
yang berbeda. Pada praktikum ini akan diperlihatkan cara hyperlink ke dokumen
HTML atau website yang berbeda.
Format penulisan elemen anchor pada HTML adalah sebagai berikut :
<a href="halamantarget">isi elemen</a> Atribut yang harus ada pada elemen a
adalah "href" yang berisi target halaman. Contoh penggunaan elemen ini adalah
seperti dibawah :
14. Table
Elemen table digunakan untuk menyajikan data tabular. Tabel terdiri dari
header dan body yang masing-masing tersusun oleh kolom dan baris. Pertemuan kolom
dan baris pada tabel dinamakan cell.
Format penulisan elemen table adalah sebagai berikut :
7
Tabel dibuka tag <table> dan ditutup tag </table>. Elemen thead berfungsi untuk header
tabel. Elemen tbody menyatakan badan tabel. Elemen tr menyatakan table row. Satu
elemen tr menyatakan satu baris tabel. Elemen td menyatakan data tabel. Banyaknya
elemen td dalam satu elemen tr menyatakan banyak kolom dalam satu baris.
Table rowspan dan table colspan
Anda dapat menyatukan beberapa kolom tabel menjadi satu kolom atau beberapa
baris tabel menjadi satu.
Rowspan akan menggabungkan beberapa baris menjadi satu. Format penulisan rowspan
adalah :
<td rowspan = "banyakbaris"> ... </td>
Pada contoh diatas banyak baris yang dirowspan ada 3. Maka syntax HTML untuk
melakukan rowpan diatas adalah :
<td rowspan = "3"> ... </td>
Dengan penggabungan 3 baris, Anda perlu menghilangkan 2 baris yang ada pada kolom
yang sama pada tabel.
8
Colspan akan menggabungkan beberapa kolom menjadi satu. Format penulisan colspan
adalah :
<td colspan = "banyakkolom"> ... </td>
Pada contoh diatas banyak kolom yang dirowspan ada 3. Maka syntax HTML untuk
melakukan colspan diatas adalah :
<td colspan = "3"> ... </td>
Dengan penggabungan 3 baris, Anda perlu menghilangkan 2 kolom yang ada pada baris
yang sama pada tabel.
9
10
Guided
Buat dalam 1 folder yang sama. Penamaan setiap file adalah

GDx.html dengan x adalah nomor soal.
1. Membuat halaman web
<!DOCTYPE html>
<html>
<head>
<title>Guided 1</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Setelah di save buka file dengan browser maka akan terlihat seperti berikut
11
2. Memasukan image dalam halaman web
Buat file html dengan isi
<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img src="http://www.uajy.ac.id/wp-
content/uploads/2013/09/header.jpg">
</body>
</html>
Buka halaman dengan browser maka akan tampil halaman seperti berikut
12
3. Membuat table
Buat file html dengan isi
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:100%" border="solid">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
13
</body>
</html>
<tr> merupakan kolom
<td> merupakan row
Untuk menggabungkan cell dengan rowspan <tr><th

rowspan="2">....</th></tr>untuk menggabungkan row atau colspan <tr><th
colspan="2">....</th></tr>untuk menggabungkan kolom
Maka akan tampil sebagai berikut
4.membuat link halaman

Dengan membuat file dengan isi
<!DOCTYPE html>
<html>
<body>
<head>
</head>


<a href="./GD3.html" >tabel</a>
</body>
</html>
Kemudian buka dengan browser maka hasilnya
14
Bila link di klik maka akan berpindah halaman ke halaman yang di referensikan.
15
Reference
1. https://www.w3schools.com/
2. https://developer.mozilla.org/en-US/docs/Web/HTML
3. https://devdocs.io/
4. https://docs.emmet.io/cheat-sheet/
16

Modul HTML

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

Modul HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul 1 – Web Basic

● HTML 4.01 Transitional

● HTML 4.01 Frameset

5. Pengenalan Elemen dan Atribut HTML

Elemen p(paragraph) di atas memiliki atribut "align" yang memiliki nilai

● b - Bold text ● img - Inline image

9. Komentar Pada HTML

Buat dalam 1 folder yang sama. Penamaan setiap file adalah

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<table style="width:100%" border="solid">

<tr> merupakan kolom

<td> merupakan row

Untuk menggabungkan cell dengan rowspan <tr><th

Maka akan tampil sebagai berikut

4.membuat link halaman

Kemudian buka dengan browser maka hasilnya

Anda mungkin juga menyukai