HTML

1

Mark Up Language

• Mark up : informasi tambahan yang ditempatkan padateks untuk menjelaskan bagaimana teks tersebutdiinterpretasi• Mark up ditambahkan bukan untuk tampilan tetapiuntuk memberikan struktur interpretasi/pemberian arti• HTML (HyperText Markup Language) merupakan subsetdari SGML (Standard Generalized Markup Language)Contoh subset lain dari SGML :• XML (eXtensible Markup Language)• SMIL (Synchronized Multimedia Integration Language)• MathML (Mathematical Markup Language)• CML (Chemical Markup Language)

2

Tentang HTML

• HTML : format standar untuk membuat dokumenweb• HTML versi terakhir : HTML 4.01• Spesifikasi HTML standar :http://www.w3.org/TR/html4• HTML merupakan bahasa bertanda,menggunakan rangkaian teks tertentu (tag)untuk menandai teks yang mempunyaiinterpretasi khusus• File HTML berupa file teks (plain text file), bukanbinary file

3

Contoh Dokumen HTML

Homepage saya

SayaPerkenalan

Perkenalkan, nama saya ..... Ini adalah homepagepertama saya, karena saya baru belajar tentangcara membuat homepage.

4

HTML Authoring Tools

Visual Editor• MacromediaDreamWeaver• MS Word• dl

Text Editor• OS default– notepad (Windows)– vi (Unix)• Third party– EditPlus, CrimsonEditor, UltraEdit(Windows)– joe (Linux)– dl

l

l

5

Daftar Tag

Ganti baris Fontd Enumerasi Garis mendatar Gambar Link (kaitan) Tabel Komentar

Dokumen Header Judul dokumen Isi dokumen Judul paragraf

Paragraf Atribut

6

Mengenai Penulisan Tag

• Tag dibentuk oleh suatu kata (keyword) yangdiapit oleh tanda kurung lancip ()• Tag boleh ditulis dalam huruf kecil maupunkapitald• Tag harus berpasangan, yaitu tag awal diikutitag akhir, kecuali tag tunggal

teks

• Di antara tag awal dan tag akhir bisa terdapattag lain• Penulisan tag tidak boleh tumpang tindih teks → penulisan yang salah teks → penulisan yang benar

7

Skema Dasar HTML

Judul dokumen

Isi dokumen

8

Mengenai Penulisan HTML

• Browser HTML menginterpretasikan satu ataubeberapa space yang berdekatan sebagai sebuahspaceteks teks teks teksdianggap sebagai :teks teks teks teks• Browser HTML menginterpretasikan Carriage Return(Enter) dan indentasi (Tab) sebagai sebuah space• Ada beberapa karakter khusus yang dapatdirepresentasikan dengan kode tertentu–   spasi– < <– > >– & &– " "

9

Tag Dasar

• HTML: menandai awal dan akhir dokumen HTMLdokumen• Head: menandai bagian header dokumen HTMLheader• Title: memberi judul pada dokumen HTMLjudul dokumen• Body: menandai awal dan akhir isi dokumenisi dokumenisi dokumen

10

Tag Judul (Heading)

Judul paragrafn = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu paragraf

11

Tag Paragraf (Paragraph)

paragraf

Untuk menandai suatu paragraf.Suatu paragraf akan terlihat dibatasi oleh satu bariskosong sebelum dan sesudahnya.

12

Tag Atribut 1 (Bold, Italic, Underline)

Kalimat yang dicetak tebalKalimat yang dicetak miringKalimat yang digarisbawahiUntuk menandai bagian kalimat agar dicetak tebal,miring, dan/atau digarisbawahi.

13

Tag Atribut 2 (Superscript, Subscript)

bagian yang dicetak tinggibagian yang dicetak rendahUntuk menandai bagian karakter agar dicetaktinggi atau rendah, biasanya untuk rumusmatematika atau kimia.

14

Tag Ganti Baris (Break line)

Untuk pindah ke baris berikutnya.Bentuk penulisan lain yang dianjurkan (XML style) :

15

Tag Fontd (size)

Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color

16

Tag Fontd (face)

Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color

17

Tag Fontd (color)

Memformat suatu bagian kalimat dengan ukuran,jenis huruf, atau warna tertentu.Tag : font Parameter : size, face, color

18

Tag Enumerasi(List, Unnumbered List, Ordered List)

itemUntuk menandai suatu item dari daftar (enumerasi), diawalidengan simbol • (bullet)Kelompok item harus diapit oleh tag dalam daftar bertingkat.Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan

tag

19

Tag Garis Mendatar (Horizontal Line)

membentuk garis pemisah mendatar.Bentuk penulisan lain yang dianjurkan (XML style) :

20

Tag Gambar (Image)

NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.

Untuk menampilkan sebuah file gambar.Bentuk penulisan lain yang dianjurkan (XML style) :

21

Tag Link (Anchor)

Kata yang di-clickKata yang ditujuLink = Alamat URL atau nama file dan/atau acuan yang ditujuAcuan = Kata sembarang sebagai penandamembentuk link ke URL/file/bagian dokumen lain.

22

Tag Tabel (Table) - data

definisi tabel Menampilkan data dalam bentuk tabelTabel didefinisikan dengan cara menyatakan baris-baris dan kolom-

kolom.Tag untuk penanda baris adalah definisi baris Tag untuk penanda kolom adalah data

23

Tag Tabel (Table) - layout

Untuk menata letak (layout) isi dokumen (walaupunhakikatnya bukan untuk keperluan ini)

24

HTMLMark Up LanguageTentang HTMLContoh Dokumen HTMLHTML Authoring ToolsDaftar TagMengenai Penulisan TagSkema Dasar HTMLMengenai Penulisan HTMLTag DasarTag Judul (Heading)Tag Paragraf (Paragraph)Tag Atribut 1 (Bold, Italic, Underline)Tag Atribut 2 (Superscript, Subscript)Tag Ganti Baris (Break line)Tag Fontd (size)Tag Fontd (face)Tag Fontd (color)Tag Enumerasi (List, Unnumbered List, Ordered List)Tag Garis Mendatar (Horizontal Line)Tag Gambar (Image)Tag Link (Anchor)Tag Tabel (Table) - dataTag Tabel (Table) - layout