HTML - Sang Widy

Download Report

Transcript HTML - Sang Widy 

Week 1
4/9/2016
iSTTS, 2008
Agenda










Introduction to HTML
Creating and publishing a Web page
Validating a document
Main HTML elements
Block-level HTML elements
Text-Level HTML elements
Creating Hypertext links
Adding images to documents
Table
Frames
4/9/2016
iSTTS, 2008
The World Wide Web
 Definitions
 The World Wide Web
 The set of computers on the Internet that support
HTTP
 Not a separate network
 HTTP
 The HyperText Transfer Protocol
 The protocol used by a WWW client (e.g. Netscape
Internet Explorer) to request documents from a
WWW server (i.e. the program running at Web sites
like amazon.com or yahoo.com)
 HTML
4/9/2016
iSTTS, 2008
HTML File
 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small
markup tags
 The markup tags tell the Web browser how to
display the page
 An HTML file must have an htm or html file
extension
4/9/2016
iSTTS, 2008
HTML Document Template
<HTML>
<HEAD>
Goes on browser’s
<TITLE> My First Page </TITLE>
title bar
</HEAD>
<BODY>
Main heading. Often
<H1> My First Heading </H1>
used as title.
<b> Welcome to My Page </b>
<!-- Rest of the page goes here -->
</BODY>
HTML Comment
</HTML>
Replace with body of
WWW page
4/9/2016
iSTTS, 2008
HTML Elements
 HTML documents are text files made up of
HTML elements.
 HTML elements are defined using HTML
tags.
4/9/2016
iSTTS, 2008
HTML Elements ( cont’d)
 HTML Element
<b>This text is bold</b>
 The HTML element starts with a start tag:
<b>
 The HTML element ends with an end tag:
</b>
4/9/2016
iSTTS, 2008
Tag Attributes
 Tags can have attributes.
 Attributes provide additional information to
an HTML element.
4/9/2016
iSTTS, 2008
Basic HTML Tags
 The most important tags in HTML are tags
that define headings, paragraphs and line
breaks.
4/9/2016
iSTTS, 2008
Basic HTML Tags
Tag
Description
<html>
Defines an HTML document
<body>
Defines the document's body
<h1> to <h6>
Defines header 1 to header 6
<p>
Defines a paragraph
<br>
Inserts a single line break
<hr>
Defines a horizontal rule
<!-->
Defines a comment
4/9/2016
iSTTS, 2008
HTML Text Formatting
Tag
<b>
<big>
<em>
<i>
<small>
<strong>
<sub>
<sup>
4/9/2016
Description
Defines bold text
Defines big text
Defines emphasized text
Defines italic text
Defines small text
Defines strong text
Defines subscripted text
Defines superscripted text
iSTTS, 2008
HTML Character Entities
 Some characters like the < character, have
a special meaning in HTML, and therefore
cannot be used in the text.
 To display a less than sign (<) in HTML, we
have to use a character entity.
4/9/2016
iSTTS, 2008
HTML Character Entities
Entity
Name
Entity
Number
non-breaking
space
&nbsp;
&#160;
<
less than
&lt;
&#60;
>
greater than
&gt;
&#62;
&
ampersand
&amp;
&#38;
"
quotation mark
&quot;
&#34;
Result Description
4/9/2016
iSTTS, 2008
HTML Lists
 Unordered Lists
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
 Ordered Lists
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
4/9/2016
iSTTS, 2008
HTML Links
<a href="lastpage.htm">
This text</a> is a link to a page on
this Web site.
4/9/2016
iSTTS, 2008
HTML Image
 <p>
An image from another folder:
<img src="/images/netscape.gif"
width="33" height="32">
</p>
4/9/2016
iSTTS, 2008
Tips for writing tags
 Use lowercase tags and attributes
 World Wide Web Consortium (W3C)
recommends lowercase tags
 Always quote attribute values
4/9/2016
iSTTS, 2008
Simple Table
(1 row and 1 column)
<TABLE border=1
align=center
width=50%
height=100>
<TR>
<TD>Table 1 </TD>
</TR>
</TABLE>
Table 1
Simple table 2
(2 row and 3 column)
<TABLE border=1 align=center width=50% height=100>
<TR>
<TD>11</TD>
<TD>12</TD>
<TD>13</TD>
</TR>
11
12
13
<TR>
<TD>21</TD>
<TD>22</TD>
<TD>23</TD>
21
22
23
</TR>
</TABLE>
CellPadding and CellSpacing
<TABLE border=1 height=100 cellpadding=15 cellpadding
cellspacing=5>
<TR>
<TD >1 1</TD>
<TD>1 2</TD>
<TD>1 3</TD>
</TR>
<TR>
<TD >2 1</TD>
<TD>2 2</TD>
<TD>2 3</TD>
</TR>
</TABLE>
cellspacing
Cell Alignment
<TABLE border=1 align=center width=50%
height=100>
<TR>
<TD align=center>21</TD>
<TD valign=middle>22</TD>
<TD valign=bottom>23</TD>
</TR>
</TABLE>
Colspan and Rowspan
1
2
3
4
5
6
7
8
Colspan
12
5
6
3
4
7
Colspan
=2
8
Rowspan
2
3
6
7
4
15
Rowspan
=2
8
Complex Table
?
use nested table

Frame
Source=atas.html
Name=topFrame
Xanth Series
by Piers Anthony
A Spell for Chameleon
Source of Magic
Castle Roogna
Centaur Aisle
Ogre! Ogre!
Source=kiri.html
Source=01.html
Name=leftFrame
Name=mainFrame
Tag HTML Frame
<frameset rows=25%,* cols=* >
<frame src="atas.htm" name="topFrame">
<frameset rows="*" cols="100,*" >
<frame src="kiri.htm" name="leftFrame">
<frame src="01.htm" name="mainFrame">
</frameset>
</frameset>
Tag HTML Kiri.html
A Spell for Chameleon
Source of Magic
Castle Roogna
Centaur Aisle
<a
Ogre! Ogre!
href="01.htm"
target="mainFrame">
A Spell for Chameleon
</a>