Top Banner
Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana teks tersebut diinterpretasi • Mark up ditambahkan bukan untuk tampilan tetapi untuk memberikan struktur interpretasi/pemberian arti Pemrograman Web/TI/ AK 045216/2 sks • HTML (HyperText Markup Language) merupakan subset dari 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)
23

Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Dec 05, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

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)

Pemrograman Web/TI/ AK 045216/2 sks

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

Page 2: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

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

Pemrograman Web/TI/ AK 045216/2 sks

• 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

Page 3: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Contoh Dokumen HTML

<html><head><title>Homepage saya</title></head><body><h1>Saya</h1><h2>Perkenalan</h2><p>Perkenalkan, nama saya ..... Ini adalah <i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentangcara membuat <b><i>homepage</i></b>.</p></body></html> <!-- akhir dokumen HTML -->

Pemrograman Web/TI/ AK 045216/2 sks

<html><head><title>Homepage saya</title></head><body><h1>Saya</h1><h2>Perkenalan</h2><p>Perkenalkan, nama saya ..... Ini adalah <i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentangcara membuat <b><i>homepage</i></b>.</p></body></html> <!-- akhir dokumen HTML -->

Page 4: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

HTML Authoring Tools

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

Visual Editor• MacromediaDreamWeaver• MS Word• dll

Pemrograman Web/TI/ AK 045216/2 sks

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

Page 5: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Daftar Tag

<html> Dokumen<head> Header<title> Judul dokumen<body> Isi dokumen<h1> Judul paragraf<p> Paragraf<b> <i> <u><sup> <sub> Atribut

<br> Ganti baris<font> Fontd<li> Enumerasi<hr> Garis mendatar<img> Gambar<a> Link (kaitan)<table> Tabel<!-- --> Komentar

Pemrograman Web/TI/ AK 045216/2 sks

<html> Dokumen<head> Header<title> Judul dokumen<body> Isi dokumen<h1> Judul paragraf<p> Paragraf<b> <i> <u><sup> <sub> Atribut

<br> Ganti baris<font> Fontd<li> Enumerasi<hr> Garis mendatar<img> Gambar<a> Link (kaitan)<table> Tabel<!-- --> Komentar

Page 6: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Mengenai Penulisan Tag

• Tag dibentuk oleh suatu kata (keyword) yangdiapit oleh tanda kurung lancip (<tag>)• Tag boleh ditulis dalam huruf kecil maupunkapitald• Tag harus berpasangan, yaitu tag awal diikutitag akhir, kecuali tag tunggal<p> teks </p> <br> <hr />• Di antara tag awal dan tag akhir bisa terdapattag lain• Penulisan tag tidak boleh tumpang tindih<tag1><tag2> teks </tag1></tag2> → penulisan yang salah<tag1><tag2> teks </tag2></tag1> → penulisan yang benar

Pemrograman Web/TI/ AK 045216/2 sks

• Tag dibentuk oleh suatu kata (keyword) yangdiapit oleh tanda kurung lancip (<tag>)• Tag boleh ditulis dalam huruf kecil maupunkapitald• Tag harus berpasangan, yaitu tag awal diikutitag akhir, kecuali tag tunggal<p> teks </p> <br> <hr />• Di antara tag awal dan tag akhir bisa terdapattag lain• Penulisan tag tidak boleh tumpang tindih<tag1><tag2> teks </tag1></tag2> → penulisan yang salah<tag1><tag2> teks </tag2></tag1> → penulisan yang benar

Page 7: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Skema Dasar HTML

<HTML><HEAD><TITLE>Judul dokumen</TITLE></HEAD><BODY>Isi dokumen</BODY></HTML>

Pemrograman Web/TI/ AK 045216/2 sks

<HTML><HEAD><TITLE>Judul dokumen</TITLE></HEAD><BODY>Isi dokumen</BODY></HTML>

Page 8: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

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– &nbsp; spasi– &lt; <– &gt; >– &amp; &– &quot; "

Pemrograman Web/TI/ AK 045216/2 sks

• 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– &nbsp; spasi– &lt; <– &gt; >– &amp; &– &quot; "

Page 9: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Dasar

• HTML: menandai awal dan akhir dokumen HTML<html>dokumen</html>• Head: menandai bagian header dokumen HTML<head>header</head>• Title: memberi judul pada dokumen HTML<title>judul dokumen</title>• Body: menandai awal dan akhir isi dokumen<body>isi dokumen</body><body text="#xxxxxx" bgcolor="#xxxxxx"background="filegambar" link="#xxxxxx"vlink="#xxxxxx">isi dokumen</body>

Pemrograman Web/TI/ AK 045216/2 sks

• HTML: menandai awal dan akhir dokumen HTML<html>dokumen</html>• Head: menandai bagian header dokumen HTML<head>header</head>• Title: memberi judul pada dokumen HTML<title>judul dokumen</title>• Body: menandai awal dan akhir isi dokumen<body>isi dokumen</body><body text="#xxxxxx" bgcolor="#xxxxxx"background="filegambar" link="#xxxxxx"vlink="#xxxxxx">isi dokumen</body>

Page 10: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Judul (Heading)

<hn>Judul paragraf</hn>n = 1,2,3,4,5,6 (tingkat judul)Untuk menuliskan judul suatu paragraf

Pemrograman Web/TI/ AK 045216/2 sks

Page 11: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Paragraf (Paragraph)

<p>paragraf</p>Untuk menandai suatu paragraf.Suatu paragraf akan terlihat dibatasi oleh satu bariskosong sebelum dan sesudahnya.

Pemrograman Web/TI/ AK 045216/2 sks

Page 12: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Atribut 1 (Bold, Italic, Underline)

<b>Kalimat yang dicetak tebal</b><i>Kalimat yang dicetak miring</i><u>Kalimat yang digarisbawahi</u>Untuk menandai bagian kalimat agar dicetak tebal,miring, dan/atau digarisbawahi.

Pemrograman Web/TI/ AK 045216/2 sks

Page 13: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Atribut 2 (Superscript,Subscript)

<sup>bagian yang dicetak tinggi</sup><sub>bagian yang dicetak rendah</sub>Untuk menandai bagian karakter agar dicetaktinggi atau rendah, biasanya untuk rumusmatematika atau kimia.

Pemrograman Web/TI/ AK 045216/2 sks

Page 14: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Ganti Baris (Break line)

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

Pemrograman Web/TI/ AK 045216/2 sks

Page 15: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Fontd (size)

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

Pemrograman Web/TI/ AK 045216/2 sks

Page 16: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Fontd (face)

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

Pemrograman Web/TI/ AK 045216/2 sks

Page 17: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Fontd (color)

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

Pemrograman Web/TI/ AK 045216/2 sks

Page 18: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Enumerasi(List, Unnumbered List, Ordered List)

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

tag <ol> </ol>

Pemrograman Web/TI/ AK 045216/2 sks

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

tag <ol> </ol>

Page 19: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Garis Mendatar (Horizontal Line)

<hr>membentuk garis pemisah mendatar.Bentuk penulisan lain yang dianjurkan (XML style) :<hr />

Pemrograman Web/TI/ AK 045216/2 sks

Page 20: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Gambar (Image)

<img src="NamaFileGambar"> NamaFileGambar = file gambar yangmempunyai ekstensi .GIF, .JPG, atau .PNG.

Untuk menampilkan sebuah file gambar.Bentuk penulisan lain yang dianjurkan (XML style) :<img src="NamaFileGambar" />

Pemrograman Web/TI/ AK 045216/2 sks

Page 21: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Link (Anchor)

<a href="Link">Kata yang di-click</a><a name="#Acuan">Kata yang dituju</a>Link = Alamat URL atau nama file dan/atau acuan yang ditujuAcuan = Kata sembarang sebagai penandamembentuk link ke URL/file/bagian dokumen lain.

Pemrograman Web/TI/ AK 045216/2 sks

Page 22: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Tabel (Table) - data

<table> definisi tabel </table>Menampilkan data dalam bentuk tabelTabel didefinisikan dengan cara menyatakan baris-baris dan kolom-

kolom.Tag untuk penanda baris adalah <tr> definisi baris </tr>Tag untuk penanda kolom adalah <td>data</td>

Pemrograman Web/TI/ AK 045216/2 sks

<table> definisi tabel </table>Menampilkan data dalam bentuk tabelTabel didefinisikan dengan cara menyatakan baris-baris dan kolom-

kolom.Tag untuk penanda baris adalah <tr> definisi baris </tr>Tag untuk penanda kolom adalah <td>data</td>

Page 23: Mark Up Languageagungsr.staff.gunadarma.ac.id/Downloads/files/71625/... · Mark Up Language • Mark up : informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana

Tag Tabel (Table) - layout

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

Pemrograman Web/TI/ AK 045216/2 sks