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

HTML PowerPoint PPT Presentation


  • 113 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

HTML

Hypertext Markup Language


Objectives

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

Outline Day 1

  • HTML Overview

  • Basic HTML

    • Text formatting

    • Lists

    • Hyperlinks

    • Images


Outline day 2

Outline Day 2

  • Advanced HTML

    • Tables

    • Frames

  • Design Guidelines

  • Future of HTML

  • Wrap-up

  • What an advanced HTML /Web course would entail


Definition html

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

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

Definition : Attributes

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


Definition events

Definition : Events

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


Basic structure of an html page

Basic Structure of anHTML Page

<HTML>

<HEAD>

<TITLE> Title goes here </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>


Body attributes

BODY Attributes

  • BGCOLOR=“#000000”

  • TEXT=“#000000”

  • LINK=“#000000”

  • VLINK=“#000000”

  • ALINK=“#000000”

  • BACKGROUND=“URL of image”


Comments

Comments

<!-- This is a comment -->


Headers

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

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

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 document1

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 fonts1

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

Character Formatting :Font Color

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

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

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


Character formatting emphasis usually italic

Character Formatting : Emphasis (Usually Italic)

<EM> Emphasized text </EM>


Character formatting strong usually bold

Character Formatting : Strong (Usually Bold)

<STRONG> Strong text </STRONG>


Character formatting code usually courier

Character Formatting : Code (Usually Courier)

<CODE> Code text </CODE>


Character formatting keyboard usually courier

Character Formatting : Keyboard (Usually Courier)

<KBD> Text to be typed </KBD>


Character formatting variable

Character Formatting : Variable

<VAR> Variable text </VAR>


Character formatting sample

Character Formatting : Sample

<SAMP> Sample text </SAMP>


Character formatting definition

Character Formatting : Definition

<DFN> Definition of a term </DFN>


Character formatting citation

Character Formatting : Citation

<CITE> Citation text </CITE>


Character formatting addresses

Character Formatting : Addresses

<ADDRESS>

[email protected] John Doe

</ADDRESS>


Character formatting deprecated physical tags

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

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

Line Break

<BR />

Deprecated style

<BR>


Paragraphs

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

Block Quote

<BLOCKQUOTE>

Four score and seven years ago…

</BLOCKQUOTE>


Preformatted text

Preformatted Text

<PRE>

Whatever,

However this text is displayed

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

Just as it is here

</PRE>


Divisions

Divisions

<DIV>

</DIV>

  • DIV Attributes

    ALIGN=LEFT, CENTER, RIGHT

  • Note:

    <DIV ALIGN=CENTER> Whatever </DIV>

    should be the same as:

    <CENTER> Whatever </CENTER>


Lists

Lists

  • Ordered (Numbered) list

  • Unordered list

  • Menu list

  • Directory list

  • Definition (Glossary) list


Ordered numbered 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

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 attribute1

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 attribute2

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 attribute3

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 attribute4

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

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

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

Unordered List

<UL>

<LI /> First Item

<LI /> Second Item

</UL>

Deprecated Style

<UL>

<LI> First Item

<LI> Second Item

</UL>


Unordered list type attribute

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 attribute1

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 attribute2

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

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

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

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:[email protected]/directory/file

file://directory/file.txt

mailto:[email protected]

gopher://hostname/directory/file

news:site


Links note

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

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

Other Uses of the Link Tag

  • Audio files

  • Video files

  • Other multimedia files


Images

Images

<IMG SRC=“filename” />

Deprecated Style

<IMG SRC=“filename”>


Images img attributes

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

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 tag1

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

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

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

Tables : CAPTION Attributes

  • ALIGN=TOP, BOTTOM


Tables tr table row attributes

Tables : TR (Table Row) Attributes

  • ALIGN=LEFT, CENTER, RIGHT


Tables th table heading attributes

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

Tables : TD (Table Data) Attributes

  • ALIGN=LEFT, CENTER, RIGHT

  • VALIGN=TOP, MIDDLE, BOTTOM

  • ROWSPAN=1

  • COLSPAN=1

  • NOWRAP

  • BGCOLOR=“#0000FF”


Working with multiple windows

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 windows1

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

Frames Using FRAMESET Tag

<HTML>

<HEAD>

<TITLE> Title Text </TITLE>

</HEAD>

<FRAMESET>

</FRAMESET>

</HTML>


Supporting browsers without frames

Supporting Browsers Without Frames

<HTML>

<HEAD>

<TITLE> Title Text </TITLE>

</HEAD>

<FRAMESET>

</FRAMESET>

<NOFRAMES>

</NOFRAMES>

</HTML>


Frameset attributes

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 attributes1

FRAMESET Attributes

  • FRAMEBORDER=YES, NO

  • BORDERCOLOR=“#000000”

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


Frame attributes

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

Frame Example 1

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

<FRAME SRC=“URL1” />

<FRAME SRC=“URL2” />

<FRAME SRC=“URL3” />

</FRAMESET>


Frame example 11

Frame Example 1

Deprecated Style

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

<FRAME SRC=“URL1”>

<FRAME SRC=“URL2”>

<FRAME SRC=“URL3”>

</FRAMESET>


Frame example 2

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 21

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

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

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

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

Design Guideline 4

  • DO

    • All “document” content belongs in the BODY section

    • All style sheets go in the HEAD section


Design guideline 5

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

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

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

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

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

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

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 html1

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

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

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 entail1

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 entail2

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

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