Pemrograman Berbasis Web

advertisement
Pemrograman Berbasis Web
Pertemuan 2 – HTML
Program Diploma IPB - Aditya Wicaksono, S.Komp
1
Overview
Program Diploma IPB - Aditya Wicaksono, S.Komp
•
•
•
•
Markup Language
Sejarah HTML
HTML
Tag
2
Markup Language
• Markup merupakan informasi tambahan yang ditempatkan pada teks untuk
menjelaskan bagaimana teks tersebut diinterpretasi
• Markup ditambahkan bukan untuk tampilan tetapi untuk memberikan
struktur interpretasi / pemberian arti
Program Diploma IPB - Aditya Wicaksono, S.Komp
3
Program Diploma IPB - Aditya Wicaksono, S.Komp
4
SGML
(Standard Generalized Markup Language)
Program Diploma IPB - Aditya Wicaksono, S.Komp
•
•
•
•
•
HTML (HyperText Markup Language)
XML (eXtensible Markup Language)
SMIL (Syncronized Multimedia Integration Language)
MathML (Mathematical Markup Language)
CML (Chemical Markup Language)
5
Sejarah HTML
• W3C (World Wide Web Consortium) dibentuk pada Oktober 1994, dengan
jumlah anggota lebih dari 400 organisasi dari seluruh dunia
• Melakukan spesifikasi dalam standar web, seperti HTML, CSS, dan XML
Program Diploma IPB - Aditya Wicaksono, S.Komp
6
HTML
• HTML merupakan format standar untuk membuat dokumen web
• HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu
(tag) untuk menandai teks yang mempunyai interpretasi khusus
• File HTML berupa file teks (plain text file), bukan binary file
• Ekstensi file *.htm atau*.html
• Versi terakhir HTML 5
Program Diploma IPB - Aditya Wicaksono, S.Komp
7
Tag
• Digunakan untuk menandai Elemen HTML
• Penulisan diapit < dan >
• Selalu berpasangan
• Tidak Case Sensitive
• Diantara tag pembuka dan tag penutup disebut Content Element, dapat
memuat tag lain
Program Diploma IPB - Aditya Wicaksono, S.Komp
8
Atribut Tag
• Atribut menyatakan sesuatu tentang tag tersebut
• Atribut digunakan untuk mengubah default pemformatan dokumen dengan
tag yang bersangkutan
Program Diploma IPB - Aditya Wicaksono, S.Komp
9
Syntax
TAG
<ELEMENT ATTRIBUT=“ATTRIBUT VALUE”>CONTENT ELEMENT</ELEMENT>
TAG PEMBUKA
Program Diploma IPB - Aditya Wicaksono, S.Komp
TAG PENUTUP
10
Tag Dasar
•
•
•
•
•
•
<html>…</html>
<head>…</head>
<title>…</title>
<body>…</body>
<div>…</div>
•
•
•
•
•
<p>…</p>
<pre>…</pre>
<h1>…</h1>
<ul>…</ul>
<ol>…</ol>
<span>…</span>
Program Diploma IPB - Aditya Wicaksono, S.Komp
11
Tag Dasar
•
•
•
•
•
•
<a href=“…”>…</a>
<img src=“…” />
<br />
<hr />
<table></table>
•
•
•
•
•
<form>…</form>
<input type=“...” />
<textarea>…</textarea>
<select>…</select>
<button>…</button>
<frameset>…</frameset>
Program Diploma IPB - Aditya Wicaksono, S.Komp
12
Terima Kasih
Program Diploma IPB - Aditya Wicaksono, S.Komp
13
Download