HTML

Pertemuan 2
HTML
Tim Dosen – TI – USD
HTML
 HyperText Markup Language
 Bukan merupakan bahasa pemrograman.
– Tidak dapat digunakan untuk mendiskripsikan komputasi.
– Untuk mendiskripsikan layout dan form dokumen yang akan
ditampilkan oleh browser.
 Berupa “Content” dan “Control”
 Dokumen HTML adalah text-based yang
direpresentasikan melalui struktur susunan tree dari tag.
 Spesifikasi terkini: HTML 5.0
– Future : XHTML
 Standar dikelola oleh W3C.
– HTML, CSS, XML, XHTML, …
HTML evolution
 HTML 1 [awal 90-an]
– Diperkenalkan oleh Tim Berners-Lee (CERN)
 Ditujukan sebagai format standar untuk
memfasilitasi kolaborasi antar fisikawan.
– Berbasis pada SGML framework
 Standar ISO (lama) untuk struktur documen
– Tag untuk paragraph, heading, list, dll.
 HTML menambahkan hyperlink, sehingga
menciptakan dokumen web
– Dirender pada prototipe formatter
HTML evolution
 HTML+ [pertengahan 94]
– Didefinisikan oleh grup peneliti (kecil)
– Beberapa tag baru ditambahkan
 contoh, IMG untuk menempelkan imej pada
dokumen
– Banyak browser dibuat
 Browser text-based pertama (Lynx) dirilis 03/93
 Browser graphical pertama (Mosaic) dirilis 04/93
 Konferensi W3 pertama [5/94]
– HTML+ dipresentasikan
HTML evolution
 HTML 2 [7/94 - 11/95]
– Banyak variasi untuk browser yang berbeda,
mis. Nescape dan IE.
– Perluasan penggunaan tag
 misal, form
– Tidak mendukung custom style
 misal, tanpa pewranaan (color)
 W3 consortium dibentuk [akhir 94]
– Misi: Open standard untuk web
HTML evolution
 Netscape dibentuk [11/94]
– Menjadi penengah dalam memimpin pasar
 Dukungan home user
– Form menjadi standar de-facto
 menggunakan “Netscape proprietary tags”
– Sulit direplikasi ke browser lain
– Document direnderi dengan cara berbeda
 Tambahan stylistic tags
– misal, font color dan size, background, image alignment
HTML evolution
 Draft HTML 3.0 diusulkan
– TErlalu banyak tambhan pada bahasa
 Table, math, footnote, dll
 Mendukung style sheet
– Browser sangat sulit untuk beradaptasi
 Setiap browser mengimplementasikan subset yang
berbeda
– Tetapi mengklaim mendukung standar
 Dan menambahkan tag baru…
 Standar dibatalkan
– Perubahan dimulai dari sini ….
HTML evolution
 Microsoft memperkenalkan Internet explorer [8/95]
– Berkompetisi (war) dengan Netscape
– Mulai memperkenalkan tag sendiri
 misal, MARQUEE
 Memecah website menjadi halaman Microsoft dan Netscape.
– Banyak situs memiliki dua versi
 Microsoft memulai dukungan “interactive application
embedding” dengan ActiveX
– Netscape merespon dengan memunculkan teknologi Java
– Memulai dukungan JavaScript
 Microsoft memperkenalkan VBScript
HTML evolution
 HTML 3.2 [1/97]
– Mengimplementasikan beberapa usulan HTML
3.0
 Secara mendasar mengambil beberapa fitur yang
banyak digunakan.
– Mendukung applet
– Memdukung scripting dan stylesheet
HTML evolution
 HTML 4 [12/97]
– Banyak perubahan
 Dukungan Stylesheet
 Tag identifier attribute
 Internationalization dan bidirectional text
 Accessibility
 Frame dan inline frame
 <object> tag untuk multimedia dan embedded objects
– Diadaptasi oleh IE (pemimpin pasar)
 Netscape lambat mengadaptasi
 XML 1.0 standard [2/98]
 XHTML 1.0 [1/00, 8/02]
Batasan HTML
 Tidak mendukung accessibility sampai HTML 4
 Tidak mendukung internationalization sampai HTML 4
 Tidak dynamic content pada definisi awal
 Tidak mendukung inherent untuk konfigurasi display
yang berbeda (misal., grayscale screen)
– Kecuali tag alt untuk imej
– Ditambahkan pada CSS2
 Tidak ada separasi data, struktur dan pemformatan
– Sampai versi 4
Wireless Markup Language
(WML)
 Markup language untuk WAP browser
– WAP = Wireless Application Protocol
– Berbasis pada limited HTML, menggunakan notasi
XML
– Menggunakan WMLScript scripting language, berbasis
pada JavaScript
 Halaman disebut “deck”, ditampilkan pada
bagian tersendiri yang disebut “cards”
– Task digunakan untuk membentuk event
– Variable digunakan untuk mengelola state antar card
HTML Tag
 Minimal Dokumen HTML (4 elemen dasar)
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>Hello World!
</body>
</html>
 Dokumen HTML berisi nested tag dan teks

– Start tag (<tag>) dan end tag (</tag>) adalah case-insensitive
dan membentuk single-rooted tree
– Beberapa start tag tidak membutuhkan end tag (mis., <p>, <br>)
– Tag memformat informasi, teks adalah konten aktual
– Spesifikasi HTML mendefinisikan valid tag dan konstrain pada
urutan dan nesting tag
Attribute dan Value
 Tag dapat diparameterisasi dengan attribute
<html>
<head>
<title>Title</title>
</head>
<body BGCOLOR=black TEXT=white>
<p>Hello World!
</body>
</html>
 Attribute berupa pasangan name/value

– Attribute dapat tanpa value
 Attribute biasanya optional
– Spesifikasi HTML mendefinisikan valid attribute
Elemen pada Head
 Elemen Optional
<html>
<head>
<base href="..."> Path for relative URLs
<script>...</script> Embedded script program
<style>...</style> Cascading style sheet
<link...> File associations
<meta...> Document information
<meta Name=“B. Herry S” Content=“Modul 1”>
</head>
<body>
</body>
</html>
Heading
 Bagian title/header
<html>
<head>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Paragraph
 Control formatting
<html>
<head>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>
Line 1<br>
Line 2
</p>
<p align=center>Paragraph (centered)</p>
<p align=right>Paragraph (left aligned)</p>
<pre>Pre-formatted text (spaces and line breaks
are preserved)</pre>
<hr>
</body>
</html>
Logical Style Tag
 Mengubah style dari teks
<html>
<head>
</head>
<body>
<em>Emphasis</em><br>
<strong>Strong</strong><br>
<cite>Citation</cite><br>
<code>Code</code><br>
</body>
</html>
Physical Style Tag
 Mengubah physical
<html>
<head>
</head>
<body>
<i>Italic</i><br>
<b>Bold</b><br>
<u>Underline</u><br>
<tt>Typewriter</tt><br>
A<sub>i</sub><sup>j</sup><br>
<font size="+3">Relative</font> size<br>
<font size=24>Absolute</font> size<br>
<font color=blue face="Helvetica,Arial">
Face/color</font>
</body>
</html>
List
 numbered atau unnumbered list
<html>
<head>
</head>
<body>
<ul>
<li>Apples
<li>Oranges
<li>Bananas
</ul>
<ol>
<li>First
<li>Second
<li>Third
</ol>
</body>
</html>
Imej
 Menyisipkan imej pada dokumen HTML
(imej terpisah pada transaksi HTTP!)
<html>
<head>
</head>
<body>
<p>This is a GIF image<br>
<img src="valid-html401.gif"
alt="Valid HTML 4.01!" height="31" width="88">
</body>
</html>
Tabel
 membuat tabel dari row dan cell data/header
<html>
<head>
</head>
<body>
<table border cellpadding=6>
<tr>
<th>1</th>
<td>2</td>
<td rowspan=2 colspan=2>3,4,7,8</td>
</tr>
<tr>
<th>5</th>
<td>6</td>
</tr>
</table>
</body>
</html>
 Tabel dapat di-nested

Link (Anchor)
 Teks dan imej dapat
digunakan sebagai link
<html>
<head>
</head>
<body>
See <a href="1-9.html">previous</a> example<br>
See <a href="#bottom">part II</a><br>
...
<a name=bottom>Part II</a><br>
...
</body>
</html>
Form
 Form memberikan kemampuan user untuk meng-input teks
<html>
<head><title>Title</title></head>
<body>
<form method=GET action="http://www.usd.ac.id ”>
<p>Name: <input type=text name=name>
<p>Sex:
<input type=radio name=sex value="M"> M
<input type=radio name=sex value="F"> F
<p>Marital status:
<input type=checkbox name=ms value="m"> Married
<input type=checkbox name=ms value="c"> Children
<p>Income:
<select name=income>
<option>Under $50k
<option>Over $50k
</select>
<p><input type=submit value="Validate">
</form>
</body>
</html>

Text Input Fields
 Used when you want the  Output
user to type letters,
number, etc. First name:
<form> Last name:
First name: <input
type="text"
name="firstname">
<br>
Last name: <input
type="text"
name="lastname">
</form>
Submission Button
 When user clicks on the  Output
“Submit” button, the
content of the form is Username:
sent to another file.
<form name="input"
action="html_form_actio
n.asp" method="get">
Username: <input
type="text"
name="user">
<br>
<input type="submit"
value="Submit">
</form>
Checkboxes
user to select one or more
options of a limited number
of choices. I have a bike
<form> I have a car
<input type="checkbox"
name="bike“
value=“bike”> I have a
bike
<br>
<input type="checkbox"
name="car“ value=“car”>
I have a car </form>
Radio Buttons
user to select one of a
limited number of choices.
Male
<form>
Female
<input type="radio"
name="sex"
value="male"> Male
<br>
<input type="radio"
name="sex"
value="female"> Female
</form>
Text Box
 Used when you want to • Output
get input from user. •
<form> • Please provide your
<p>Please provide your suggestion in the text box
suggestion in the text box below:
below:</p>
•
<textarea row=“10”
cols=“30”>
</textarea>
</form>
Pull-down Menu
 Used when you want user • Output
to respond with one •
specific answer with • Select a fruit:
choices you given.
•
<p>Select a fruit:</p>
<select name"Fruit">
<option selected> Apples
<option> Bananas
< option > Oranges
</select>

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan 2

 Dokumen HTML berisi nested tag dan teks

 Attribute berupa pasangan name/value

 Tabel dapat di-nested

Anda mungkin juga menyukai