HTML

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 :

<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>

i

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 6Contoh : <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. HeadMerupakan 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. TitleMerupakan 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. BodyMerupakan 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. ParagrafInformasi yang disajikan dalam dokumen harus mengikuti kaidah-kaidah dalam penulisan. Misalnya satu pikiran utama disimpan dalam satu paragraph.<p>

6. Line BreakMerupakan tag yang digunakan untuk menampilkan suatu teks untuk ditampilkan pada baris yang baru dalam suatu paragraf. <br>

7. HeadingMerupakan 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>

ii

8. Horizontal LineMerupakan tag yang digunakan untuk pemisah antarbagian atau paragraf.<hr>

9. AcronymMerupakan 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. QuotationMerupakan tag yang digunakan untuk membuat kutipan teks dalam dokumen.<blockquote> … </blockquote><q> … </q>

11. Ins dan DelTag <ins> digunakan untuk menampilkan suatu koreksi pada teks.Tag <del> digunakan untuk menampilkan teks yang dikoreksi.<ins> … </ins><del> … </del>

12. Entitas KarakterBeberapa 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 entitasTanda titik koma (;)Contoh : < atau < menghasilkan <

> atau = menghasilkan >× atau × menghasilkan x÷ atau ÷ menghasilkan ÷

13. LinkHTML 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>

iii

http://www.microsoft.com/

G. Latihan Program HTMLa. 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>

c. html_entitas

d. html_garis

v

<html><head><title>Entitas Karakter - Programmer : Nama-Kelas</title></head><body><p>&#174 adalah simbol trademark (merek dagang)</p><p>&#8482 adalah simbol trademark (merek dagang)</p><p>&#38 adalah simbol operator penggabungan (ampersand)</p><p>&#60 adalah simbol operator kurang dari</p><p>&#62 adalah simbol operator lebih dari</p><p>&#61 adalah simbol operator sama dengan</p><p>&#215 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>

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>

g. html_linebreak

h. html_link

i. html_paragraf

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>

<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>

j. html_linkpage

viii

<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>

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 asaGema menyusup ke nadi-nadiMenggenggam asa baru, lahirnya sebuah negeri

Kan kembali aku dalam saf-safkuMeski 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 dirinyadengan akhlaq yg muliamaka kita akan menemukannyasebagai 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>

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>

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>

HTML

Education

Transcript of HTML