week 1 8/10/2015istts, 2008. agenda introduction to html creating and publishing a web page...
TRANSCRIPT
Week 1
04/19/23 iSTTS, 2008
AgendaIntroduction to HTMLCreating and publishing a Web pageValidating a documentMain HTML elementsBlock-level HTML elementsText-Level HTML elementsCreating Hypertext linksAdding images to documentsTableFrames
04/19/23 iSTTS, 2008
The World Wide WebDefinitions
The World Wide Web The set of computers on the Internet that support
HTTPNot a separate network
HTTPThe HyperText Transfer ProtocolThe 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
04/19/23 iSTTS, 2008
HTML FileHTML 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
04/19/23 iSTTS, 2008
HTML Document Template<HTML><HEAD>
<TITLE> My First Page </TITLE></HEAD><BODY>
<H1> My First Heading </H1><b> Welcome to My Page </b><!-- Rest of the page goes here -->
</BODY></HTML>
04/19/23 iSTTS, 2008
Goes on browser’stitle bar
Main heading. Often used as title.
HTML CommentReplace with body of WWW page
HTML ElementsHTML documents are text files made up of
HTML elements.HTML elements are defined using HTML
tags.
04/19/23 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>
04/19/23 iSTTS, 2008
Tag AttributesTags can have attributes. Attributes provide additional information to
an HTML element.
04/19/23 iSTTS, 2008
Basic HTML TagsThe most important tags in HTML are tags
that define headings, paragraphs and line breaks.
04/19/23 iSTTS, 2008
Basic HTML TagsTag 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 comment04/19/23 iSTTS, 2008
HTML Text FormattingTag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text04/19/23 iSTTS, 2008
HTML Character EntitiesSome 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.
04/19/23 iSTTS, 2008
HTML Character EntitiesResult Description
Entity Name
Entity Number
non-breaking
space  
< less than < <
> greater than > >
& ampersand & &
" quotation mark " "
04/19/23 iSTTS, 2008
HTML ListsUnordered Lists
<ul> <li>Coffee</li> <li>Milk</li> </ul>
Ordered Lists<ol> <li>Coffee</li> <li>Milk</li> </ol>
04/19/23 iSTTS, 2008
HTML Links<a href="lastpage.htm">
This text</a> is a link to a page on
this Web site.
04/19/23 iSTTS, 2008
HTML Image<p>
An image from another folder:
<img src="/images/netscape.gif"
width="33" height="32">
</p>
04/19/23 iSTTS, 2008
Tips for writing tagsUse lowercase tags and attributes
World Wide Web Consortium (W3C) recommends lowercase tags
Always quote attribute values
04/19/23 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><TR> <TD>21</TD> <TD>22</TD> <TD>23</TD></TR></TABLE>
11 12 13
21 22 23
CellPadding and CellSpacing
<TABLE border=1 height=100 cellpadding=15 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>
cellpadding
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 3 4
5 6 7 8Colspan = 2
Rowspan
15
2 3 4
6 7 8Rowspan = 2
Complex Table
use nested table
?
FrameXanth Series
by Piers Anthony
A Spell for Chameleon
Source of Magic
Castle Roogna
Centaur Aisle
Ogre! Ogre!
Source=atas.html
Name=topFrame
Source=kiri.html
Name=leftFrame
Source=01.html
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.htmlA Spell for ChameleonSource of MagicCastle RoognaCentaur AisleOgre! Ogre!
<a href="01.htm" target="mainFrame">A Spell for Chameleon</a>