1 html hypertext markup language. 2 objectives n to be able to create simple web pages n to...
TRANSCRIPT
1
HTML
Hypertext Markup Language
2
Objectives
To be able to create simple Web pages To understand certain advanced HTML
concepts such as tables and frames To understand the future of HTML
3
Outline Day 1
HTML Overview Basic HTML
– Text formatting– Lists– Hyperlinks– Images
4
Outline Day 2
Advanced HTML– Tables– Frames
Design Guidelines Future of HTML Wrap-up What an advanced HTML /Web course would
entail
5
Definition : HTML
Hypertext Markup Language Simplified subset of Standardized Markup
Language (SGML) Defines the structure of a document Contrary to assumption, it does NOT
completely define the document look as explicit rendering depends on the browser
6
Definition : Tags
Features or elements delineated inside of brackets (<>)
In these slides, the current style of tags will be shown in black and the deprecated style will be shown below in italics
7
Definition : Attributes
Parameters inside of tags that define values for a given tag
8
Definition : Events
Actions that occur within a Web page that can be realized by an HTML document
9
Basic Structure of anHTML Page
<HTML>
<HEAD>
<TITLE> Title goes here </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
10
BODY Attributes
BGCOLOR=“#000000” TEXT=“#000000” LINK=“#000000” VLINK=“#000000” ALINK=“#000000” BACKGROUND=“URL of image”
11
Comments
<!-- This is a comment -->
12
Headers
<H1> First-level heading </H1>
<H2> Second-level heading </H2>
<H3> Third-level heading </H3>
<H4> Fourth-level heading </H4>
<H5> Fifth-level heading </H5>
<H6> Sixth-level heading </H6>
13
Character Formatting : Fonts
<FONT SIZE=1> Tiny text </FONT>
<FONT SIZE=2> Smaller text </FONT>
<FONT SIZE=3> Small text </FONT>
<FONT SIZE=4> Normal text </FONT>
<FONT SIZE=5> Large text </FONT>
<FONT SIZE=6> Big text </FONT>
<FONT SIZE=7> Huge text </FONT>
14
Character Formatting :Base Font for Document
<BASEFONT SIZE=1 />
<BASEFONT SIZE=2 />
<BASEFONT SIZE=3 />
<BASEFONT SIZE=4 />
<BASEFONT SIZE=5 />
<BASEFONT SIZE=6 />
<BASEFONT SIZE=7 />
15
Character Formatting :Base Font for Document
Deprecated Style
<BASEFONT SIZE=1>
<BASEFONT SIZE=2>
<BASEFONT SIZE=3>
<BASEFONT SIZE=4>
<BASEFONT SIZE=5>
<BASEFONT SIZE=6>
<BASEFONT SIZE=7>
16
Character Formatting : Fonts
<FONT SIZE=-3> Tiny text </FONT>
<FONT SIZE=-2> Smaller text </FONT>
<FONT SIZE=-1> Small text </FONT>
<FONT SIZE=+1> Large text </FONT>
<FONT SIZE=+2> Big text </FONT>
<FONT SIZE=+3> Huge text </FONT>
17
Character Formatting :Font Color
<FONT COLOR=“#FF0000”> Red </FONT>
<FONT COLOR=“#00FF00”> Green </FONT>
<FONT COLOR=“#0000FF”> Blue </FONT>
18
Character Formatting : Emphasis (Usually Italic)
<EM> Emphasized text </EM>
19
Character Formatting : Strong (Usually Bold)
<STRONG> Strong text </STRONG>
20
Character Formatting : Code (Usually Courier)
<CODE> Code text </CODE>
21
Character Formatting : Keyboard (Usually Courier)
<KBD> Text to be typed </KBD>
22
Character Formatting : Variable
<VAR> Variable text </VAR>
23
Character Formatting : Sample
<SAMP> Sample text </SAMP>
24
Character Formatting : Definition
<DFN> Definition of a term </DFN>
25
Character Formatting : Citation
<CITE> Citation text </CITE>
27
Character Formatting : Deprecated “Physical” Tags
<B> Bold text </B><I> Italic text </I><TT> Typewriter text </TT><U> Underlined text </U><S> Strike through text </S><BIG> Bigger text </BIG><SMALL> Smaller text </SMALL><SUB> Subscript text </SUB><SUP> Superscript text </SUP>
28
Horizontal Rule
<HR />
Deprecated style
<HR> HR Attributes
– SIZE=10 (thickness in pixels)– WIDTH=100 (width in pixels)– WIDTH=50%– ALIGN=LEFT, CENTER, RIGHT– NOSHADE
29
Line Break
<BR />
Deprecated style
<BR>
30
Paragraphs
<P>
This is a paragraph. This can include any number of sentences. Yadda yadda ya.
</P>
Deprecated style
<P> This is a paragraph. This can include any number
of sentences. Yadda yadda ya.
31
Block Quote
<BLOCKQUOTE>
Four score and seven years ago…
</BLOCKQUOTE>
32
Preformatted Text
<PRE>Whatever,
However this text is displayed
======================
Just as it is here
</PRE>
33
Divisions
<DIV></DIV>
DIV AttributesALIGN=LEFT, CENTER, RIGHT
Note: <DIV ALIGN=CENTER> Whatever </DIV>should be the same as:<CENTER> Whatever </CENTER>
34
Lists
Ordered (Numbered) list Unordered list Menu list Directory list Definition (Glossary) list
35
Ordered (Numbered) List
<OL>
<LI /> Item 1
<LI /> Item 2
</OL>
Deprecated Style
<OL>
<LI> Item 1
<LI> Item 2
</OL>
36
Ordered (Numbered) List :Type Attribute
<OL TYPE=“1”>
<LI /> Item 1
<LI /> Item 2
</OL>
Deprecated Style
<OL TYPE=“1”>
<LI> Item 1
<LI> Item 2
</OL>
37
Ordered (Numbered) List :Type Attribute
<OL TYPE= “a”>
<LI /> Item a
<LI /> Item b
</OL>
Deprecated Style
<OL TYPE=“a”>
<LI> Item a
<LI> Item b
</OL>
38
Ordered (Numbered) List :Type Attribute
<OL TYPE=“A”>
<LI /> Item A
<LI /> Item B
</OL>
Deprecated Style
<OL TYPE=“A”>
<LI> Item A
<LI> Item B
</OL>
39
Ordered (Numbered) List :Type Attribute
<OL TYPE=“i”>
<LI /> Item i
<LI /> Item ii
</OL>
Deprecated Style
<OL TYPE=“i”>
<LI> Item i
<LI> Item ii
</OL>
40
Ordered (Numbered) List :Type Attribute
<OL TYPE=“I”>
<LI /> Item I
<LI /> Item II
</OL>
Deprecated Style
<OL TYPE=“I”>
<LI> Item I
<LI> Item II
</OL>
41
Ordered (Numbered) List :Start Attribute
<OL START=10>
<LI /> Item 10
<LI /> Item 11
</OL>
Deprecated Style
<OL START=10>
<LI> Item 10
<LI> Item 11
</OL>
42
Ordered (Numbered) List :Type and Start Attributes
<OL TYPE=“I” START=5>
<LI /> Item V
<LI /> Item VI
</OL>
Deprecated Style
<OL TYPE=“I” START=5>
<LI> Item V
<LI> Item VI
</OL>
43
Unordered List
<UL>
<LI /> First Item
<LI /> Second Item
</UL>
Deprecated Style
<UL>
<LI> First Item
<LI> Second Item
</UL>
44
Unordered List : Type Attribute
<UL TYPE=“disk”>
<LI /> First Disk Item
<LI /> Second Disk Item
</UL>
Deprecated Style
<UL TYPE=“disk”>
<LI> First Disk Item
<LI> Second Disk Item
</UL>
45
Unordered List : Type Attribute
<UL TYPE=“square”>
<LI /> First Square Item
<LI /> Second Square Item
</UL>
Deprecated Style
<UL TYPE=“square”>
<LI> First Square Item
<LI> Second Square Item
</UL>
46
Unordered List : Type Attribute
<UL TYPE=“circle”>
<LI /> First Circle Item
<LI /> Second Circle Item
</UL>
Deprecated Style
<UL TYPE=“circle”>
<LI> First Circle Item
<LI> Second Circle Item
</UL>
47
Menu List
<MENU>
<LI /> Menu Item 1
<LI /> Menu Item 2
</MENU>
Deprecated Style
<MENU>
<LI> Menu Item 1
<LI> Menu Item 2
</MENU>
48
Directory List
<DIR>
<LI /> Directory Item 1
<LI /> Directory Item 2
</DIR>
Deprecated Style
<DIR>
<LI> Directory Item 1
<LI> Directory Item 2
</DIR>
49
Definition (Glossary) List
<DL>
<DT /> Term 1 <DD /> Definition 1
<DT /> Term 2 <DD /> Definition 2
</DL>
Deprecated Style
<DL>
<DT> Term 1 <DD> Definition 1
<DT> Term 2 <DD> Definition 2
</DL>
50
Links
<A HREF=“URL”> URL related text </A><A HREF=“URL”> <IMG SRC=“URL2” /> </A>
URLs can be any of the following:http://hostname:port/directory/filename.htmlftp://username:[email protected]/directory/filefile://directory/file.txtmailto://[email protected]://hostname/directory/filenews:site
51
Links Note
Replace : in a pathname with a |– DO
<A HREF=“c|\X\Y.html”> Definition </A>
– DON’T <A HREF=“c:\X\Y.html”> Definition </A>
52
Links Internal to a Document
A named point in a document
<A NAME=nameValue> </A>
Linking to point in the same document
<A HREF=“#nameValue”> name </A>
Linking to point from another document
<A HREF=“URL#nameValue”> name </A>
53
Other Uses of the Link Tag
Audio files Video files Other multimedia files
54
Images
<IMG SRC=“filename” />
Deprecated Style
<IMG SRC=“filename”>
55
Images : IMG Attributes
ALT=“Text if image can’t be shown” ALIGN=TOP, MIDDLE, BOTTOM ALIGN=LEFT, RIGHT (word wrapping margin) CLEAR=LEFT, RIGHT, ALL (remove margin) HEIGHT=200 (in pixels) WIDTH=200 (in pixels) VSPACE=20 (in pixels) HSPACE=20 (in pixels) BORDER=5 (in pixels)
56
Applets Using the APPLET Tag
<APPLET
CODE=“URL.class”
WIDTH=200
HEIGHT=200>
<PARAM NAME=“Param1” VALUE=“1” />
<PARAM NAME=“Param2” VALUE=“xyz” />
</APPLET>
57
Applets Using the APPLET Tag
Deprecated Style
<APPLET
CODE=“URL.class”
WIDTH=200
HEIGHT=200>
<PARAM NAME=“Param1” VALUE=“1”>
<PARAM NAME=“Param2” VALUE=“xyz”>
</APPLET>
58
Tables
<TABLE BORDER><CAPTION> Title for the Table </CAPTION>
<TR><TH> Column 1 </TH> <TH> Column 2 </TH>
</TR><TR>
<TD> Data 1 </TD> <TD> Data 2 </TD></TR>
</TABLE>
59
Tables : TABLE Attributes
BORDER or BORDER=0, 1, 2, 3, … ALIGN=LEFT, CENTER, RIGHT WIDTH=0, 100 CELLSPACING=0, 1, 2, 3, … CELLPADDING=0, 1, 2, 3, …
60
Tables : CAPTION Attributes
ALIGN=TOP, BOTTOM
61
Tables : TR (Table Row) Attributes
ALIGN=LEFT, CENTER, RIGHT
62
Tables : TH (Table Heading) Attributes
ALIGN=LEFT, CENTER, RIGHT VALIGN=TOP, MIDDLE, BOTTOM ROWSPAN=1 COLSPAN=1 NOWRAP BGCOLOR=“#0000FF”
63
Tables : TD (Table Data) Attributes ALIGN=LEFT, CENTER, RIGHT VALIGN=TOP, MIDDLE, BOTTOM ROWSPAN=1 COLSPAN=1 NOWRAP BGCOLOR=“#0000FF”
64
Working With Multiple Windows<BASE TARGET=“window name” />
Deprecated Style
<BASE TARGET=“window name”>
Special values for TARGET Attribute– TARGET=“_blank” New window– TARGET=“_self” This window– TARGET=“_parent” Parent of _self– TARGET=“_top” Whole Web browser
65
Working With Multiple Windows
<A HREF=“URL”
TARGET=“window name”>
URL on a SEPARATE Web browser window called window name
</A>
66
Frames Using FRAMESET Tag
<HTML>
<HEAD>
<TITLE> Title Text </TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
67
Supporting Browsers Without Frames
<HTML><HEAD>
<TITLE> Title Text </TITLE></HEAD><FRAMESET></FRAMESET><NOFRAMES></NOFRAMES>
</HTML>
68
FRAMESET Attributes
COLS=“100” (number in pixels) COLS=“33%” (percentage of the screen) COLS=“*” (division of all remaining space)
ROWS=“100” (number in pixels) ROWS=“33%” (percentage of the screen) ROWS=“*” (division of all remaining space)
69
FRAMESET Attributes
FRAMEBORDER=YES, NO BORDERCOLOR=“#000000” BORDER=0, 1, 2, 3, … (width in pixels)
70
FRAME Attributes
SRC=“URL” SCROLLING=AUTO, NO, YES NORESIZE FRAMEBORDER=YES, NO BORDERCOLOR=“#000000” MARGINHEIGHT=100 (in pixels) MARGINWIDTH=100 (in pixels)
71
Frame Example 1
<FRAMESET ROWS=“100, 33%, *”>
<FRAME SRC=“URL1” />
<FRAME SRC=“URL2” />
<FRAME SRC=“URL3” />
</FRAMESET>
72
Frame Example 1
Deprecated Style
<FRAMESET ROWS=“100, 33%, *”>
<FRAME SRC=“URL1”>
<FRAME SRC=“URL2”>
<FRAME SRC=“URL3”>
</FRAMESET>
73
Frame Example 2
<FRAMESET ROWS=“*, 80”>
<FRAMESET COLS=“30%, *”>
<FRAME SRC=“URL Table of Contents” />
<FRAME SRC=“URL Body” />
</FRAMESET>
<FRAME SRC=“URL Footer” />
</FRAMESET>
74
Frame Example 2
Deprecated Style
<FRAMESET ROWS=“*, 80”>
<FRAMESET COLS=“30%, *”>
<FRAME SRC=“URL Table of Contents”>
<FRAME SRC=“URL Body”>
</FRAMESET>
<FRAME SRC=“URL Footer”>
</FRAMESET>
75
Design Guideline 1
DO– Learn from existing Web pages by viewing
their sources DON’T
– Repeat mistakes of most Web sites such as missing links (i.e. files), pages “under construction”, improper HTML, etc.
76
Design Guideline 2
DO– Save HTML in files ending in the
extension .html (or .htm if on a DOS-based system)
Filename.html
DON’T– Place HTML in files with other extensions
Filename.txt
77
Design Guideline 3
DO– Follow the format on “Basic Structure of an
HTML Page” slide DON’T
– Leave out <HTML> , <HEAD> , <TITLE> , </TITLE> , </HEAD> , <BODY> , </BODY> , or </HTML> tags
78
Design Guideline 4
DO– All “document” content belongs in the BODY
section– All style sheets go in the HEAD section
79
Design Guideline 5
DO– ALWAYS close “open” tags that have
corresponding “close” tags <H1> Some text </H1>
DON’T <H1> Some text
80
Design Guideline 6
DO– ALWAYS close tags in the opposite order in
which they are opened. <P> <H1> Some text </H1> </P>
DON’T <P> <H1> Some text </P> </H1>
81
Design Guideline 7
DO– Keep images and other downloaded
components small in size and limited in number DO
– Limit even the text length of a single Web page to avoid overwhelming users
82
Design Guideline 8
DO– Limit the number of style changes such as
color, font size, centering, and data content made in the Web page
83
Design Guideline 9
DO– Make the Web site / collection of Web
documents relate in a logical fashion Hierarchical Linear Non-linear, but centered around a small core set of
“home”, “help”, etc. pages that exist as links from every single site
– Minimize “click count” between any two pages
84
Design Guideline 10
DO– Expect the Web to advance incredibly fast, but
realize that most users will not support cutting edge or non-standardized technology or language versions
85
Future of HTML
World Wide Web Consortium (W3C) is currently re-mapping HTML into eXtensible Markup Language (XML) which is also a subset of SGML
XML is being brought into the OMG’s efforts on CORBA and UML
CORBA is evolving in tandem with Java, especially the Enterprise Java Beans component model
86
Future of HTML
HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 (current bug fix) XHTML 1.0 (HTML mapped into XML) XHTML 1.1 (Simple event handling) XHTML 2.0 (June 2000 expected)
87
Wrap-up
HTML is a markup language to describe the content, but not precisely the look of the page
HTML will only describe the layout of a page, while most Web pages will actually require functionality not provided by a markup language
HTML requires “true” languages such as Java, Perl, or C/C++ to process data
88
What would an Advanced HTML / Web Course Entail?
“Outmoded technologies”– “Pure” HTML– Forms– CGI Programming– JavaScript (Renamed ECMA Script)
89
What would an Advanced HTML /Web Course Entail?
“Current technologies”– Image maps (client and server side)– Applets– Java Servlets– Embedded technologies and “plug-ins”– Style Sheets– Dynamic HTML
90
What would an Advanced HTML / Web Course Entail?
“Future Technologies”– Java Server Pages (JSP) versus Microsoft
Application Server Pages (ASP)– XML– True distributed computing
Java and/or CORBA
91
References
World Wide Web Consortium (HTML, XML, and ECMA Script)– http://www.w3.org/
Sunsoft (Java)– http://www.javasoft.com/
Microsoft (XML, ASP, and SOAP)– http://www.microsoft.com/
Object Management Group (CORBA)– http://www.omg.org/
Sam's Teach Yourself Web Publishing with HTML 4 in 21 days