HTML
Sponsored Links
This presentation is the property of its rightful owner.
1 / 91

HTML PowerPoint PPT Presentation


  • 128 Views
  • Uploaded on
  • Presentation posted in: General

HTML. Hypertext Markup Language. 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. Outline Day 1. HTML Overview Basic HTML Text formatting Lists Hyperlinks Images. Outline Day 2.

Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


HTML

Hypertext Markup Language


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


Outline Day 1

  • HTML Overview

  • Basic HTML

    • Text formatting

    • Lists

    • Hyperlinks

    • Images


Outline Day 2

  • Advanced HTML

    • Tables

    • Frames

  • Design Guidelines

  • Future of HTML

  • Wrap-up

  • What an advanced HTML /Web course would entail


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


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


Definition : Attributes

  • Parameters inside of tags that define values for a given tag


Definition : Events

  • Actions that occur within a Web page that can be realized by an HTML document


Basic Structure of anHTML Page

<HTML>

<HEAD>

<TITLE> Title goes here </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>


BODY Attributes

  • BGCOLOR=“#000000”

  • TEXT=“#000000”

  • LINK=“#000000”

  • VLINK=“#000000”

  • ALINK=“#000000”

  • BACKGROUND=“URL of image”


Comments

<!-- This is a comment -->


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>


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>


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 />


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>


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>


Character Formatting :Font Color

<FONT COLOR=“#FF0000”> Red </FONT>

<FONT COLOR=“#00FF00”> Green </FONT>

<FONT COLOR=“#0000FF”> Blue </FONT>


Character Formatting : Emphasis (Usually Italic)

<EM> Emphasized text </EM>


Character Formatting : Strong (Usually Bold)

<STRONG> Strong text </STRONG>


Character Formatting : Code (Usually Courier)

<CODE> Code text </CODE>


Character Formatting : Keyboard (Usually Courier)

<KBD> Text to be typed </KBD>


Character Formatting : Variable

<VAR> Variable text </VAR>


Character Formatting : Sample

<SAMP> Sample text </SAMP>


Character Formatting : Definition

<DFN> Definition of a term </DFN>


Character Formatting : Citation

<CITE> Citation text </CITE>


Character Formatting : Addresses

<ADDRESS>

john.doe@email.com John Doe

</ADDRESS>


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>


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


Line Break

<BR />

Deprecated style

<BR>


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.


Block Quote

<BLOCKQUOTE>

Four score and seven years ago…

</BLOCKQUOTE>


Preformatted Text

<PRE>

Whatever,

However this text is displayed

======================

Just as it is here

</PRE>


Divisions

<DIV>

</DIV>

  • DIV Attributes

    ALIGN=LEFT, CENTER, RIGHT

  • Note:

    <DIV ALIGN=CENTER> Whatever </DIV>

    should be the same as:

    <CENTER> Whatever </CENTER>


Lists

  • Ordered (Numbered) list

  • Unordered list

  • Menu list

  • Directory list

  • Definition (Glossary) list


Ordered (Numbered) List

<OL>

<LI /> Item 1

<LI /> Item 2

</OL>

Deprecated Style

<OL>

<LI> Item 1

<LI> Item 2

</OL>


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>


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>


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>


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>


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>


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>


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>


Unordered List

<UL>

<LI /> First Item

<LI /> Second Item

</UL>

Deprecated Style

<UL>

<LI> First Item

<LI> Second Item

</UL>


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>


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>


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>


Menu List

<MENU>

<LI /> Menu Item 1

<LI /> Menu Item 2

</MENU>

Deprecated Style

<MENU>

<LI> Menu Item 1

<LI> Menu Item 2

</MENU>


Directory List

<DIR>

<LI /> Directory Item 1

<LI /> Directory Item 2

</DIR>

Deprecated Style

<DIR>

<LI> Directory Item 1

<LI> Directory Item 2

</DIR>


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>


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.html

ftp://username:password@ftp.site.com/directory/file

file://directory/file.txt

mailto://joe.doe@email.com

gopher://hostname/directory/file

news:site


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>


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>


Other Uses of the Link Tag

  • Audio files

  • Video files

  • Other multimedia files


Images

<IMG SRC=“filename” />

Deprecated Style

<IMG SRC=“filename”>


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)


Applets Using the APPLET Tag

<APPLET

CODE=“URL.class”

WIDTH=200

HEIGHT=200>

<PARAM NAME=“Param1” VALUE=“1” />

<PARAM NAME=“Param2” VALUE=“xyz” />

</APPLET>


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>


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>


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, …


Tables : CAPTION Attributes

  • ALIGN=TOP, BOTTOM


Tables : TR (Table Row) Attributes

  • ALIGN=LEFT, CENTER, RIGHT


Tables : TH (Table Heading) Attributes

  • ALIGN=LEFT, CENTER, RIGHT

  • VALIGN=TOP, MIDDLE, BOTTOM

  • ROWSPAN=1

  • COLSPAN=1

  • NOWRAP

  • BGCOLOR=“#0000FF”


Tables : TD (Table Data) Attributes

  • ALIGN=LEFT, CENTER, RIGHT

  • VALIGN=TOP, MIDDLE, BOTTOM

  • ROWSPAN=1

  • COLSPAN=1

  • NOWRAP

  • BGCOLOR=“#0000FF”


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


Working With Multiple Windows

<A HREF=“URL”

TARGET=“window name”>

URL on a SEPARATE Web browser window called window name

</A>


Frames Using FRAMESET Tag

<HTML>

<HEAD>

<TITLE> Title Text </TITLE>

</HEAD>

<FRAMESET>

</FRAMESET>

</HTML>


Supporting Browsers Without Frames

<HTML>

<HEAD>

<TITLE> Title Text </TITLE>

</HEAD>

<FRAMESET>

</FRAMESET>

<NOFRAMES>

</NOFRAMES>

</HTML>


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)


FRAMESET Attributes

  • FRAMEBORDER=YES, NO

  • BORDERCOLOR=“#000000”

  • BORDER=0, 1, 2, 3, … (width in pixels)


FRAME Attributes

  • SRC=“URL”

  • SCROLLING=AUTO, NO, YES

  • NORESIZE

  • FRAMEBORDER=YES, NO

  • BORDERCOLOR=“#000000”

  • MARGINHEIGHT=100 (in pixels)

  • MARGINWIDTH=100 (in pixels)


Frame Example 1

<FRAMESET ROWS=“100, 33%, *”>

<FRAME SRC=“URL1” />

<FRAME SRC=“URL2” />

<FRAME SRC=“URL3” />

</FRAMESET>


Frame Example 1

Deprecated Style

<FRAMESET ROWS=“100, 33%, *”>

<FRAME SRC=“URL1”>

<FRAME SRC=“URL2”>

<FRAME SRC=“URL3”>

</FRAMESET>


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>


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>


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.


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


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


Design Guideline 4

  • DO

    • All “document” content belongs in the BODY section

    • All style sheets go in the HEAD section


Design Guideline 5

  • DO

    • ALWAYS close “open” tags that have corresponding “close” tags

      • <H1> Some text </H1>

  • DON’T

    • <H1> Some text


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>


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


Design Guideline 8

  • DO

    • Limit the number of style changes such as color, font size, centering, and data content made in the Web page


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


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


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


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)


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


What would an Advanced HTML / Web Course Entail?

  • “Outmoded technologies”

    • “Pure” HTML

    • Forms

    • CGI Programming

    • JavaScript (Renamed ECMA Script)


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


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


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


  • Login