html hands on
TRANSCRIPT
![Page 1: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/1.jpg)
HTML Hands-on
Cornelius Koo, ST
JavaSchool
2005
Jl. Cemara 2/20, Salatiga
![Page 2: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/2.jpg)
What is HTML ?
• Hyper Text Markup Language
• .htm / .html
• <tag></tag>
• <tag attribute1=“value1”
attribute2=“value2”></tag>
![Page 3: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/3.jpg)
Simple HTML
<html>
<head>
<title>My Simple Page</title>
</head>
<body>
This is My Simple Page
</body>
</html>
![Page 4: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/4.jpg)
Basic Tag
![Page 5: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/5.jpg)
Header
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</body>
![Page 6: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/6.jpg)
Alignment Attribute
<body>
<h1 align="center">Header 1</h1>
<h2 align="left">Header 2</h2>
<h3 align="right">Header 3</h3>
<h4 align="justify">Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</body>
![Page 7: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/7.jpg)
Paragraf
<body>
This is ordinary text
<p>This is the paragraf</p>
</body>
![Page 8: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/8.jpg)
Line Break
<body>
This is ordinary text
<br>
Line break
<br>
Line break again
This time without line break
</body>
![Page 9: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/9.jpg)
Horizontal Rule
<body>
Report
<hr>
Put your text here...
<hr>
</body>
![Page 10: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/10.jpg)
Comment
<body>
<!-- This is the html comment -->
</body>
![Page 11: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/11.jpg)
Text Formatting Tag
![Page 12: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/12.jpg)
Simple Text Formatting
<body>
Biasa<br>
<strong>Strong</strong><br>
<b>Bold</b><br>
<big>Big</big><br>
<em>Emphasized</em><br>
<i>Italic</i><br>
<small>Small</small><br>
x<sub>8</sub><br>
x<sup>2</sup><br>
Text <ins>inserted / underlined</ins><br>
Text <del>deleted</del>
</body>
![Page 13: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/13.jpg)
Preformatted
<body>
<pre>
int[] array = {3,5,4,6};
for (int i = 0; i < array.length; i++) {
System.out.println(array[i]);
}
</pre>
</body>
![Page 14: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/14.jpg)
Computer Related
<body>
<code>Computer code</code><br>
<kbd>Keyboard Input</kbd><br>
<tt>Teletype Text</tt><br>
<samp>Sample Text</samp><br>
<var>Variable</var><br>
</body>
![Page 15: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/15.jpg)
Address
<body>
<address>
German Center, 5th floor<br>
Bumi Serpong Damai, Serpong
</address>
</body>
![Page 16: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/16.jpg)
Abbreviation
<body>
<abbr title="United States of
America">USA
</abbr><br>
<acronym title="United States of
America">USA
</acronym>
</body>
![Page 17: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/17.jpg)
Text Direction
<body>
<bdo dir="ltr">From left to right</bdo><br>
<bdo dir="rtl">From right to left</bdo>
</body>
![Page 18: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/18.jpg)
Quotation
<body>
<blockquote>
"Jika
cinta memanggilmu pasrahlah kepadanya..."
</blockquote>
<q>"Walaupun bilah bilah pedang yang terselip diantara sayapnya menyakitimu..."</q>
</body>
![Page 19: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/19.jpg)
Font
<body>
<p><font size="1">Font 1</font></p>
<p><font color="#9933FF" size="2">Font 2</font> </p>
<p><font color="#FF00CC" size="3">Font 3</font></p>
<p><font color="#006633" size="4">Font 4</font></p>
<p><font color="#FFFF00" size="5">Font 5</font></p>
<p><font color="#0000FF" size="6">Font 6</font></p>
<p><font color="#FF0000" size="7">Font 7</font></p>
</body>
<font> has been removed since HTML 4.0 and won’t be
found in xhtml, use css instead.
![Page 20: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/20.jpg)
Font Face
<font
color="#FF0000"
size="7"
face="Courier New, Courier, mono">
Font 7
</font>
![Page 21: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/21.jpg)
Blink
<blink>Bagaikan bintang di langit</blink>
Only works on Netscape… ;(
![Page 22: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/22.jpg)
Character Entities Tag
![Page 23: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/23.jpg)
<body>
Copyright©<br>
Registered®<br>
Microsoft™<br>
Non Breaking Space <br>
Ampersand&<br>
«Angle Quote»<br>
"Quote"<br>
1<10<br>
10>1<br>
1×2=2<br>
4÷2=2<br>
</body>
![Page 24: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/24.jpg)
Link Tag
![Page 25: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/25.jpg)
Open New Window
<a href="paragraf.html"
target="_blank">Paragraf</a>
![Page 26: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/26.jpg)
On The Same Window
<a href="quotation.htm"
target="_self">Quotation</a>
![Page 27: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/27.jpg)
Other Target
• _top
• _parent
![Page 28: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/28.jpg)
No Line
• <a href="simpletextformat.htm" style="text-
decoration:none">Simple Text Format</a>
![Page 30: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/30.jpg)
Relative
<a href="charentity.html"> Character Entity
</a>
![Page 31: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/31.jpg)
Absolute
<a href="http://localhost/html/address.htm">
Address</a>
![Page 32: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/32.jpg)
Document
<br>
<a href="#part1">Part 1</a><br>
<a href="#part2">Part 2</a><br>
<a href="#part3">Part 3</a><br>
<a href="#part4">Part 4</a><br>
<a href="#part5">Part 5</a><br>
<a href="#part6">Part 6</a><br>
<a href="#part7">Part 7</a><br>
<br>
![Page 33: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/33.jpg)
• <a name="part1">When love beckons to
you, follow him,</a>
• <a name="part2">And when his wings
enfold you yield to him,</a>
• <a name="part3">And when he speaks to
you believe in him.</a>
• <a name="part4">For even as love crowns
you so shall he crucify you.</a>
• …
![Page 34: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/34.jpg)
List Tag
![Page 35: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/35.jpg)
Unordered List
Penerus Kungfu XingYi Quan <Unordered List>
<ul>
<li type="circle">Yue Fei</li>
<li type="disc">Ji LongFeng</li>
<li type="square">Mai Jia Ren</li>
<li>Ma Jia Ren</li>
<li>Dai LongBang & Dai LingBan</li>
<li>Li LaoNeng</li>
<li>Guo YunShen</li>
</ul>
![Page 36: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/36.jpg)
Ordered List
Pancasila <Ordered List>
<ol>
<li type="1">Ketuhanan Yang Maha Esa</li>
<li type="a">Kemanusiaan Yang Adil dan Beradab</li>
<li type="i">Persatuan Indonesia</li>
<li>Kerakyatan Yang Dipimpin Oleh Hikmat Kebijaksanaan Dan Permusyawaratan Perwakilan</li>
<li>Keadilan Sosial Bagi Seluruh Rakyat Indonesia</li>
</ol>
![Page 37: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/37.jpg)
Nested List
Nested List
<ul>
<li>Apel</li>
<li>Jeruk</li>
<ul>
<li>Jeruk Manis</li>
<li>Jeruk Bali</li>
<li>Jeruk Nipis</li>
</ul>
</ul>
![Page 38: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/38.jpg)
Definition List
Definition List
<dl>
<dt>Tie Sha Zhang</dt>
<dd>improved external energy on your palm, it
is hard nei gong</dd>
<dt>Ying Jiauw</dt>
<dd>the ability of eagle grasp, it trains our hard
nei gong too</dd>
</dl>
![Page 39: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/39.jpg)
Image Tag
![Page 40: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/40.jpg)
Image
<img
src="img/javangelist-logo.png"
width="207" height="209"
hspace="6" vspace="6"
border="0"
usemap="#Map">
![Page 41: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/41.jpg)
Image Map
<map name="Map">
<area shape="poly"
coords="8,41,12,29,20,22,28,18,39,18,49,11,57,
8,56,21,61,28,65,34,67,38,73,34,77,29,79,34,81
,43,81,51,67,49,63,57,57,62,56,69,49,69,46,64,
41,65,31,65,21,62,14,56,18,54,21,50,25,54,30,4
8,34,50,35,45,34,39,29,38,27,44,22,38,15,45,7,
40" href="list.html">
</map>
![Page 42: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/42.jpg)
Table Tag
![Page 43: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/43.jpg)
Elements
• <table></table>
• Define a table in HTML document
![Page 44: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/44.jpg)
• <caption></caption>
• Define table’s title
![Page 45: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/45.jpg)
• <tr></tr>
• Specifiy a row on table
![Page 46: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/46.jpg)
• <td></td>
• Specify a data cell on table
![Page 47: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/47.jpg)
• <th></th>
• Specify a header on table
![Page 48: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/48.jpg)
Attributes
• align={left|center|right}
• valign={top|middle|bottom}
• colspan=n
• Rowspan=n
• nowrap
![Page 49: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/49.jpg)
Frame Tag
![Page 50: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/50.jpg)
Inline Frame
• <iframe name=“…”
src=“…”
rows=#
cols=# >
</iframe>
![Page 51: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/51.jpg)
Frame Set
<frameset cols=“30%,30%,*”>
<frame src=“a.html”>
<frame src=“b.html”>
<frame src=“c.html”>
</frameset>
![Page 52: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/52.jpg)
<frameset rows=“30%,30%,*”>
<frame src=“a.html”>
<frame src=“b.html”>
<frame src=“c.html”>
</frameset>
![Page 53: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/53.jpg)
<frameset cols=“30%,*”>
<frame src=“a.html”>
<frameset rows=“30%,*”>
<frame src=“b.html”>
<frame src=“c.html”>
</frameset>
</frameset>
![Page 54: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/54.jpg)
Form Tag
![Page 55: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/55.jpg)
<form action=“URL”
method=“get | post”>
enctype=“”
</form>
![Page 56: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/56.jpg)
Form Component
See form.html for more detail on form
components
![Page 57: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/57.jpg)
Head Tag
![Page 58: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/58.jpg)
Title
• <title>Ini Judul Web Page Kita</title>
![Page 59: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/59.jpg)
Base
• <base target=“_blank”>
• Building common target to all link on the
page.
![Page 60: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/60.jpg)
Style
• <style></style>
• Define the style we used in our page.
![Page 61: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/61.jpg)
Script
• <script></script>
• Define the script we used in our page.
![Page 62: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/62.jpg)
Meta Tag
![Page 63: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/63.jpg)
Informational Purpose
• <meta name=“author” content=“Wrox”>
• <meta name=“generator”
content=“Macromedia Dreamweaver MX”>
![Page 64: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/64.jpg)
Page Refresh
• <meta http-equiv=“refresh”
content=“3;url=http://java.sun.com”>
![Page 65: Html Hands On](https://reader034.vdocuments.us/reader034/viewer/2022042816/558fd09a1a28ab4b1b8b46b0/html5/thumbnails/65.jpg)
Reference
• Teach YourSelf Web Publishing with
HTML and XHTML in 21 days, Laura
Lemay, Sams, 2001.
• HTML Reference
• www.w3c.org