1 html hypertext markup language. 2 objectives n to be able to create simple web pages n to...
TRANSCRIPT
![Page 1: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/1.jpg)
1
HTML
Hypertext Markup Language
![Page 2: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/2.jpg)
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
![Page 3: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/3.jpg)
3
Outline Day 1
HTML Overview Basic HTML
– Text formatting– Lists– Hyperlinks– Images
![Page 4: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/4.jpg)
4
Outline Day 2
Advanced HTML– Tables– Frames
Design Guidelines Future of HTML Wrap-up What an advanced HTML /Web course would
entail
![Page 5: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/5.jpg)
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
![Page 6: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/6.jpg)
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
![Page 7: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/7.jpg)
7
Definition : Attributes
Parameters inside of tags that define values for a given tag
![Page 8: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/8.jpg)
8
Definition : Events
Actions that occur within a Web page that can be realized by an HTML document
![Page 9: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/9.jpg)
9
Basic Structure of anHTML Page
<HTML>
<HEAD>
<TITLE> Title goes here </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
![Page 10: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/10.jpg)
10
BODY Attributes
BGCOLOR=“#000000” TEXT=“#000000” LINK=“#000000” VLINK=“#000000” ALINK=“#000000” BACKGROUND=“URL of image”
![Page 11: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/11.jpg)
11
Comments
<!-- This is a comment -->
![Page 12: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/12.jpg)
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>
![Page 13: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/13.jpg)
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>
![Page 14: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/14.jpg)
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 />
![Page 15: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/15.jpg)
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>
![Page 16: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/16.jpg)
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>
![Page 17: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/17.jpg)
17
Character Formatting :Font Color
<FONT COLOR=“#FF0000”> Red </FONT>
<FONT COLOR=“#00FF00”> Green </FONT>
<FONT COLOR=“#0000FF”> Blue </FONT>
![Page 18: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/18.jpg)
18
Character Formatting : Emphasis (Usually Italic)
<EM> Emphasized text </EM>
![Page 19: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/19.jpg)
19
Character Formatting : Strong (Usually Bold)
<STRONG> Strong text </STRONG>
![Page 20: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/20.jpg)
20
Character Formatting : Code (Usually Courier)
<CODE> Code text </CODE>
![Page 21: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/21.jpg)
21
Character Formatting : Keyboard (Usually Courier)
<KBD> Text to be typed </KBD>
![Page 22: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/22.jpg)
22
Character Formatting : Variable
<VAR> Variable text </VAR>
![Page 23: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/23.jpg)
23
Character Formatting : Sample
<SAMP> Sample text </SAMP>
![Page 24: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/24.jpg)
24
Character Formatting : Definition
<DFN> Definition of a term </DFN>
![Page 25: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/25.jpg)
25
Character Formatting : Citation
<CITE> Citation text </CITE>
![Page 27: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/27.jpg)
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>
![Page 28: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/28.jpg)
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
![Page 29: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/29.jpg)
29
Line Break
<BR />
Deprecated style
<BR>
![Page 30: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/30.jpg)
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.
![Page 31: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/31.jpg)
31
Block Quote
<BLOCKQUOTE>
Four score and seven years ago…
</BLOCKQUOTE>
![Page 32: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/32.jpg)
32
Preformatted Text
<PRE>Whatever,
However this text is displayed
======================
Just as it is here
</PRE>
![Page 33: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/33.jpg)
33
Divisions
<DIV></DIV>
DIV AttributesALIGN=LEFT, CENTER, RIGHT
Note: <DIV ALIGN=CENTER> Whatever </DIV>should be the same as:<CENTER> Whatever </CENTER>
![Page 34: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/34.jpg)
34
Lists
Ordered (Numbered) list Unordered list Menu list Directory list Definition (Glossary) list
![Page 35: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/35.jpg)
35
Ordered (Numbered) List
<OL>
<LI /> Item 1
<LI /> Item 2
</OL>
Deprecated Style
<OL>
<LI> Item 1
<LI> Item 2
</OL>
![Page 36: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/36.jpg)
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>
![Page 37: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/37.jpg)
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>
![Page 38: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/38.jpg)
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>
![Page 39: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/39.jpg)
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>
![Page 40: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/40.jpg)
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>
![Page 41: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/41.jpg)
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>
![Page 42: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/42.jpg)
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>
![Page 43: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/43.jpg)
43
Unordered List
<UL>
<LI /> First Item
<LI /> Second Item
</UL>
Deprecated Style
<UL>
<LI> First Item
<LI> Second Item
</UL>
![Page 44: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/44.jpg)
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>
![Page 45: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/45.jpg)
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>
![Page 46: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/46.jpg)
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>
![Page 47: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/47.jpg)
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>
![Page 48: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/48.jpg)
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>
![Page 49: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/49.jpg)
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>
![Page 50: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/50.jpg)
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
![Page 51: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/51.jpg)
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>
![Page 52: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/52.jpg)
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>
![Page 53: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/53.jpg)
53
Other Uses of the Link Tag
Audio files Video files Other multimedia files
![Page 54: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/54.jpg)
54
Images
<IMG SRC=“filename” />
Deprecated Style
<IMG SRC=“filename”>
![Page 55: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/55.jpg)
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)
![Page 56: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/56.jpg)
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>
![Page 57: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/57.jpg)
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>
![Page 58: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/58.jpg)
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>
![Page 59: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/59.jpg)
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, …
![Page 60: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/60.jpg)
60
Tables : CAPTION Attributes
ALIGN=TOP, BOTTOM
![Page 61: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/61.jpg)
61
Tables : TR (Table Row) Attributes
ALIGN=LEFT, CENTER, RIGHT
![Page 62: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/62.jpg)
62
Tables : TH (Table Heading) Attributes
ALIGN=LEFT, CENTER, RIGHT VALIGN=TOP, MIDDLE, BOTTOM ROWSPAN=1 COLSPAN=1 NOWRAP BGCOLOR=“#0000FF”
![Page 63: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/63.jpg)
63
Tables : TD (Table Data) Attributes ALIGN=LEFT, CENTER, RIGHT VALIGN=TOP, MIDDLE, BOTTOM ROWSPAN=1 COLSPAN=1 NOWRAP BGCOLOR=“#0000FF”
![Page 64: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/64.jpg)
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
![Page 65: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/65.jpg)
65
Working With Multiple Windows
<A HREF=“URL”
TARGET=“window name”>
URL on a SEPARATE Web browser window called window name
</A>
![Page 66: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/66.jpg)
66
Frames Using FRAMESET Tag
<HTML>
<HEAD>
<TITLE> Title Text </TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
![Page 67: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/67.jpg)
67
Supporting Browsers Without Frames
<HTML><HEAD>
<TITLE> Title Text </TITLE></HEAD><FRAMESET></FRAMESET><NOFRAMES></NOFRAMES>
</HTML>
![Page 68: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/68.jpg)
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)
![Page 69: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/69.jpg)
69
FRAMESET Attributes
FRAMEBORDER=YES, NO BORDERCOLOR=“#000000” BORDER=0, 1, 2, 3, … (width in pixels)
![Page 70: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/70.jpg)
70
FRAME Attributes
SRC=“URL” SCROLLING=AUTO, NO, YES NORESIZE FRAMEBORDER=YES, NO BORDERCOLOR=“#000000” MARGINHEIGHT=100 (in pixels) MARGINWIDTH=100 (in pixels)
![Page 71: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/71.jpg)
71
Frame Example 1
<FRAMESET ROWS=“100, 33%, *”>
<FRAME SRC=“URL1” />
<FRAME SRC=“URL2” />
<FRAME SRC=“URL3” />
</FRAMESET>
![Page 72: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/72.jpg)
72
Frame Example 1
Deprecated Style
<FRAMESET ROWS=“100, 33%, *”>
<FRAME SRC=“URL1”>
<FRAME SRC=“URL2”>
<FRAME SRC=“URL3”>
</FRAMESET>
![Page 73: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/73.jpg)
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>
![Page 74: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/74.jpg)
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>
![Page 75: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/75.jpg)
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.
![Page 76: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/76.jpg)
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
![Page 77: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/77.jpg)
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
![Page 78: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/78.jpg)
78
Design Guideline 4
DO– All “document” content belongs in the BODY
section– All style sheets go in the HEAD section
![Page 79: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/79.jpg)
79
Design Guideline 5
DO– ALWAYS close “open” tags that have
corresponding “close” tags <H1> Some text </H1>
DON’T <H1> Some text
![Page 80: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/80.jpg)
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>
![Page 81: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/81.jpg)
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
![Page 82: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/82.jpg)
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
![Page 83: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/83.jpg)
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
![Page 84: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/84.jpg)
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
![Page 85: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/85.jpg)
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
![Page 86: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/86.jpg)
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)
![Page 87: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/87.jpg)
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
![Page 88: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/88.jpg)
88
What would an Advanced HTML / Web Course Entail?
“Outmoded technologies”– “Pure” HTML– Forms– CGI Programming– JavaScript (Renamed ECMA Script)
![Page 89: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/89.jpg)
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
![Page 90: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/90.jpg)
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
![Page 91: 1 HTML Hypertext Markup Language. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and](https://reader030.vdocuments.us/reader030/viewer/2022032517/56649c995503460f9495604a/html5/thumbnails/91.jpg)
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