1. HTML (Hypertext Markup Language)
A. Apakah Itu Dokumen HTML
• Dokumen HTML adalah file teks murni yang dapat dibuat dengan editor teks sembarang.
• Dokumen ini dikenal sebagai web page
• Dokumen ini umumnya berisi informasi atau interface aplikasi di dalam Internet
B. Penamaan Dokumen HTML
• Ekstensi dokumen HTML adalah .htm atau .html
• Contoh : Profile.htm atau Profile.html
C. Definisi Elemen
• “Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen
HTML.
• Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.
• Beberapa contoh elemen adalah : head, body, table , paragraph , list
D. Definisi Tag
• Tag digunakan untuk menandai berbagai elemen dalam suatu dokumen HTML.
• Tag HTML terdiri atas sebuah tanda lebih kecil (<), sebuah nama tag, dan tanda lebih
besar (>).
• Contoh tag : <H1> … </H1>
Tag awal Tag akhir
• Tag umumnya berpasangan, dan tag akhir selalu diberi tanda garis miring (/)
• Ada beberapa elemen yang tidak mengharuskan tag-nya ditulis berpasangan,
diantaranya :
<p> paragraph - mengganti paragraf
<br> line break - ganti baris
<hr> horizontal rule - garis mendatar
<li> list - daftar item
E. Elemen HTML yang Dibutuhkan
• Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag :
i
2. <html> … </html>
<head> … </head>
<body> … </body>
• Elemen head berisi tentang informasi dokumen tersebut, dan elemen body berisi teks
yang sebenarnya, dimana tersususn dari link, grafik, paragraph, dan lemen lainnya.
• Pola dasar dokumen html :
<html>
<head>
… informasi tentang dokumen HTML
</head>
<body>
… informasi yang ditampilkan dalam browser web
</body>
F. Tag-Tag Dasar HTML
• Tag dasar berarti elemen dasar.
• Dokumen HTML secara mendasar akan terdiri atas teks informasi.
• Tag informasi disimpan dalam section atau elemen body, di dalam tag <body> dan
</body>.
• Teks disusun dalam paragraf-paragraf menggunakan tag <p>.
• Teks mempunyai judul-judul yang menunjukkan topik-topik atau bagian-bagian dalam
dokumen yang disebut heading. Dalam HTML, heading mempunyai level 1 s.d. level 6
Contoh : <H1> … <H1/>
• Tag-tag dalam dokumen html antara lain :
1. HTML
Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen
HTML. Tag ini merupakan satu keharusan bagi pemrograman web untuk
menuliskannya sebagai tag pertama dalam dokumen HTML.
<html> di awal dokumen dan </html> di akhir dokumen
2. Head
Merupakan tag berikutnya setelah <html> untuk menuliskan keterangan tentang
dokumen web yang akan ditampilkan.
<head> di awal setelah <html> dan </head> di akhir section head
3. Title
Merupakan tag di dalam head yang harus dituliskan untuk memberikan
judul/informasi pada caption browser web tentang topic atau judul dari dokumen
web yang ditampilkan dalam browser.
<title> Judul dokumen </title>
4. Body
ii
3. Merupakan section utama dalam dokumen web. Pada section ini semua isi dokumen
yang akan ditampilkan di dalam browser harus dituliskan.
<body> di awal, segera setelah tag </head>
</body> di akhir, diletakkan sebelum tag </html>
5. Paragraf
Informasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam
penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraph.
<p>
6. Line Break
Merupakan tag yang digunakan untuk menampilkan suatu teks untuk ditampilkan
pada baris yang baru dalam suatu paragraf.
<br>
7. Heading
Merupakan tag yang digunakan untuk menunjukkan tingkat keberartian dari teks
yang akan dituliskan. Teks heading akan ditampilkan dengan huruf yang lebih besar
dan tebal.
<H1> … </H1>
8. Horizontal Line
Merupakan tag yang digunakan untuk pemisah antarbagian atau paragraf.
<hr>
9. Acronym
Merupakan tag yang digunakan untuk menyimpan data kepanjangan dari suatu
singkatan yang ditampilkan dalam dokumen tersebut dengan menggunakan atribut
title.
<abbr title =”kepanjangannya”>singkatan</abbr>
<acronym title =”kepanjangannya”>singkatan</acronym>
10. Quotation
Merupakan tag yang digunakan untuk membuat kutipan teks dalam dokumen.
<blockquote> … </blockquote>
<q> … </q>
11. Ins dan Del
Tag <ins> digunakan untuk menampilkan suatu koreksi pada teks.
Tag <del> digunakan untuk menampilkan teks yang dikoreksi.
<ins> … </ins>
<del> … </del>
12. Entitas Karakter
Beberapa karakter mempunyai arti khusus dalam HTML, seperti tanda “<” untuk
awal tag HTML dan “>” untuk akhir tag HTML.
Entitas karakter mempunyai 3 bagian :
Sebuah ampersand (&)
Sebuah nama entitas atau sebuah (#)
Nomor entitas
Tanda titik koma (;)
Contoh : < atau < menghasilkan <
> atau = menghasilkan >
× atau × menghasilkan x
÷ atau ÷ menghasilkan ÷
13. Link
iii
4. HTML menggunakan tag <a> atau anchor untuk membuat suatu link kepada
dokumen lain dalam web. Atribut href digunakan untuk mendefinisikan lokasi link.
Anchor berikut menunjuk ke Microsoft :
<a href=”http://www.microsoft.com”>This text is displayed </b>
Ada 3 (tiga) jenis link :
a. Link relatif
<a href=”file_2.html”>Berikutnya</a>
b. Link absolut
<a href=http://www.google.com/>Pusat informasi dunia</a>
c. Link dalam dokumen yang sama
<a href=”#namabagian”>Bagian tentang link</a>
G. Latihan Program HTML
a. html_dasar
b. html_acronym
iv
<html>
<head>
<title>Judul Halaman : Nama-Kelas</title>
</head>
<body>Perangkat Keras Jaringan Komputer
<b>Antara Lain : </b>
<br>
<i>Server</i>
<br>
<i>Client</i>
<br>
<i>LAN Card</i>
<br>
<i>Hub</i>
<br>
<i>Konektor</i>
<br>
<i>Repeater</i>
<br>
<i>Bridge</i>
<br>
<i>Router</i>
</body>
</html>
<html>
<head>
<title>Daftar Singkatan - Programmer : Nama-Kelas</title>
</head>
<body>
<abbr title="Hypertext Markup Language">
HTML
</abbr>
<br>
<acronym title="World Wide Web">
WWW
</acronym>
<br>
<acronym title="HyperText Transfer Protocol">
HTTP
</acronym>
<br>
<acronym title="Post Office Protocol">
POP
</acronym>
<br>
<acronym title="File Transfer Protocol">
FTP
</acronym>
<br>
<acronym title="Packet Internet Gopher">
Ping
</acronym>
<br>
<acronym title="Internet Relay Chat">
IRC
</acronym>
</body>
</html>
5. c. html_entitas
d. html_garis
v
<html>
<head>
<title>Entitas Karakter - Programmer : Nama-Kelas</title>
</head>
<body>
<p>
® adalah simbol trademark (merek dagang)
</p>
<p>
™ adalah simbol trademark (merek dagang)
</p>
<p>
& adalah simbol operator penggabungan (ampersand)
</p>
<p>
< adalah simbol operator kurang dari
</p>
<p>
> adalah simbol operator lebih dari
</p>
<p>
= adalah simbol operator sama dengan
</p>
<p>
× adalah simbol operator perkalian
</p>
</body>
</html>
<html>
<head>
<title>Horizontal Line - Programmer:Nama-Kelas</title>
</head>
<body>
<p>Layer Protokol TCP/IP :</p>
<hr>
<hr>
<p> Application Layer </p>
<hr>
<p> Transport Layer </p>
<hr>
<p> Internet Layer </p>
<ul>
<li> IP </li>
<li> ARP </li>
<li> ICMP </li>
</ul>
<hr>
<p> Network Interface Layer </p>
</body>
</html>
6. e. html_heading
f. html_insdel
vi
<html>
<head>
<title>Heading - Programmer:Nama-Kelas</title>
</head>
<body>
<h1> Keamanan Data Jaringan </h1>
<h2> Hacking </h2>
<h3> Cracking </h3>
<h4 align="center"> Teknik Pengamanan Data </h4>
<h3 align="center"> Internet Firewall </h3>
<h4 align="center"> Kriptografi </h4>
<h5 align="center"> SSL (Secure Socket Layer) </h5>
<h6 align="right"> Kriptografi ada 2 </h6>
<h6 align="right"> Enkripsi </h6>
<h6 align="right"> Dekripsi </h6>
</body>
</html
<html>
<head>
<title>Sisip Hapus Teks : Programmer-Nama Kelas Absen</title>
</head>
<body>
<p>
Satu lusin adalah :
<del>duapuluh</del>
<ins>duabelas</ins>
buah
</p>
Satu gros adalah :
<del>120</del>
<ins>144</ins>
buah
</p>
Satu dasawarsa adalah :
<del>duapuluh</del>
<ins>sepuluh</ins>
tahun
</p>
Satu windu adalah :
<del>delapanbelas</del>
<ins>delapan</ins>
tahun
</p>
Satu abad adalah :
<del>limapuluh</del>
<ins>seratus</ins>
tahun
</p>
</body>
</html>
7. g. html_linebreak
h. html_link
vii
<html>
<head>
<title>Ganti Baris - Programmer:Nama-Kelas </title>
</head>
<body>
<p>
Manfaat Jaringan Komputer
<br>Membagi sumber daya
<br>Reliabilitas tinggi
<br>Menghemat uang
<br>Sarana komunikasi
</p>
<p>
Berbagai Jaringan Komputer
<br>LAN (Local Area Network)
<br>MAN (Metropolitas Area Network)
<br>WAN (Wide Area Network)
<br>Internet (Interconnected Network)
</p>
</body>
</html>
<html>
<head>
<title>LINK - Programmer: Nama-Kelas</title>
</head>
<body>
<p>
<a href="html_entitas.htm">
Teks ini</a> merupakan link ke suatu halaman dengan nama
html_entitas.htm pada website yang sama.
</p>
<p>
<a href="http://permai.or.id">
Teks ini</a> merupakan link ke suatu halaman website sekolah
Permai.
</p>
<p>
<a href="http://google.com" target="_blank">
Teks ini</a> merupakan link ke suatu halaman website Google
dengan jendela baru.
</body>
</html>
8. i. html_paragraf
j. html_linkpage
viii
<html>
<head>
<title>Sebuah contoh HTML sederhana</title>
</head>
<body>
<p>HTML mudah dibuat. Selamat datang di dunia HTML. </p>
<i>Nama-Kelas-Absen</i>
</body>
</html>
<html>
<head>
<title>Link_Halaman : Nama Kelas Absen</title>
</head>
<body>
<p>
<a name="top">
<a href="#B4">
Lihat Bab 4
</a>
</a>
</p>
<p>
<p>
<h2> ABSTRAK </h2>
<p>
<h2> KATA PENGANTAR </h2>
<p>
<h2> DAFTAR ISI </h2>
<p>
<h2> DAFTAR GAMBAR </h2>
<p>
<h2> DAFTAR TABEL </h2>
<p>
<h2> DAFTAR RUMUS </h2>
<p>
<h2>Bab1</h2>
<h2>PENDAHULUAN</h2>
<p> 1.1. Latar Belakang 1
1.2. Tujuan Penulisan
1.2.1. Tujuan Umum
1.2.2. Tujuan Khusus
1.3. Pembatasan Masalah
1.4. Metode Penulisan
1.5. Metode Pengumpulan Data
1.6. Sistematika Penulisan
</p>
<h2>Bab2</h2>
<h2>TEORI DASAR</h2>
<p> 2.1. Pengertian Defibrillator
2.2. Pengetahuan Jantung
2.3. Teori Penunjang
2.3.1 Dioda
2.3.2 Dioda Zener
2.3.3 Relay
2.3.4 Resistor
2.3.5 Kapasitor
2.3.6 Transistor
2.3.7 Transformator
2.3.8 Osilator
2.3.9 Multiplier
</p>
<h2>Bab3</h2>
<h2>PEMBAHASAN</h2>
<p> 3.1. Spesifikasi Alat
3.2. Gambar Alat
3.2.1 Gambar Alat
3.2.2 Penjelasan Gambar Alat
3.2.3 Panel Kontrol
3.3. Accessoris Dan Perlengkapan
3.4. Block Diagram
</p>
<a name="B4">
<h2>Bab4</h2>
</a>
<h2>PENUTUP</h2>
<p> 4.1. Kesimpulan
4.2. Saran
</p>
<a href="#top">Kembali ke atas</a>
<h2> DAFTAR PUSTAKA </h2>
<p>
<h2> LAMPIRAN </h2>
<p>
</body>
</html>
9. k. html_preformat
l. html_quotation
ix
<html>
<head>
<title>Teks Preformat</title>
</head>
<body>
<code>Puisi : Kemerdekaan</code>
<br>
<pre> Sauh riuh lantang bergema
Titik akhir hilirnya asa
Gema menyusup ke nadi-nadi
Menggenggam asa baru, lahirnya sebuah negeri
Kan kembali aku dalam saf-safku
Meski tak tentu mana pangkal dan ujungku
</pre>
<tt>Nama : xxxxx </tt>
<br>
<tt>Kelas : 9x </tt>
<br>
<tt>Absen : xx </tt>
<br>
<address>
SMP Permai
<br>
Jl.Pluit Karang Barat
<br>
Blok O-VI No.1
<br>
Jakarta Utara 14450
</address>
</body>
</html>
<html>
<head>
<title>Teks Blockquote - Programmer:Nama-Kelas </title>
</head>
<body>
Berikut adalah penggalan puisi dengan quotation yang panjang :
<blockquote>
seorang yang menghiasi dirinya
dengan akhlaq yg mulia
maka kita akan menemukannya
sebagai pribadi yang utuh.
</blockquote>
Berikut adalah penggalan puisi dengan quotation yang pendek :
<br>
<q>
Puisi : Akhlak Mulia
</q>
<p>
Quotation merupakan tag yang digunakan untuk membuat kutipan
teks dalam dokumen.
</p>
</body>
</html>
10. m. html_teksdirect
n. html_teksformat
x
<html>
<head>
<title>Arah Teks - Programmer: Nama-Kelas</title>
</head>
<body>
<p>
Saya sedang belajar membuat dokumen Hypertext Markup Language
</p>
<bdo dir ="rtl">
Saya sedang belajar membuat dokumen Hypertext Markup Language
</bdo>
<p>
Materi yang sedang dipelajari adalah tentang arah penulisan teks
</p>
<bdo dir ="rtl">
Materi yang sedang dipelajari adalah tentang arah penulisan teks
</bdo>
<p>
Tujuan materi ini adalah dapat menciptakan sebuah teknik sandi
</p>
<bdo dir ="rtl">
Tujuan materi ini adalah dapat menciptakan sebuah teknik sandi
</bdo>
</body>
</html>
<html>
<head>
<title>Format Teks HTML</title>
</head>
<body>
<b>Teks Ini Tebal</b>
<br>
<big>Teks Ini Besar</big>
<br>
<small>Teks Ini Kecil</small>
<br>
<I>Teks Ini Miring</I>
<br>
Teks Ini Berisi H<sub>2</sub>O
<br>
Teks Ini Berisi x<sup>2</sup>=5+4
</body>
</html>
11. o. html_javascript
xi
<html>
<head>
<title>HTML JavaScript</title>
</head>
<body>
<pre>
<script language="JavaScript">
var a, b, c;
a = 10;
b = 20;
c = 30;
c = a + b;
document.writeln('c = a + b adalah ' + c);
c = a - b;
document.writeln('c = a - b adalah ' + c);
c = a * b;
document.writeln('c = a * b adalah ' + c);
c = a / b;
document.writeln('c = a / b adalah ' + c);c = a % b;
document.writeln('c = a % b adalah ' + c);
c = -a + b;
document.writeln('c = -a + b adalah ' + c);
c = a + b++;
document.writeln('c = a + b++ adalah ' + c);
c = a + --b;
document.writeln('c = a + --b adalah ' + c);
</script>
</pre>
<p>Programmer : Nama-Kelas</p>
</body>
</html>
