HTML Tutorial 1: Developing a Web Page

CIS 1315 – Web Development for Educators

CIS 1315

HTMLTutorial 1: Developing a Web Page


Hypertext

Hypertext Document

Electronic File

Contains Elements that Can Open Other Documents

Customized v. Linear Progression

i.e., Windows Help


Web Hardware

Web Server

Stores Pages that Visitors Access

Apache (Windows/Unix/Linux)

IIS (Windows)

Security Issues


Web Software

Web Browser

Client Software

Accesses Web Pages & Renders Them

IE 7.0

Firefox 3.0

Safari 3.2

Chrome 1.0


HTML & XHTML


HTML & XHTML

HTML Advantages Platform Portability Speed (size of file) Text File

HTML Disadvantages Rendering Differences Extensions

Proprietary Functionality Added by Browsers XHTML Advantages

Resolve Issues with Different HTML Versions


Syntax

Elements (Tags)

Codes that Control Content Appearance

Opening/Closing

Two-Sided

<tagName>Content</tagName>

One-Sided

<tagName />

Lowercase


Syntax

Deprecated Obsolete Elements or Syntax

Future Support Not Guaranteed

White Space Does Not Render Multiple Spaces

Tab, Enter do not Render

Use Non-breaking Space


Syntax

Attributes Controls Behavior or Appearance of Element

<tagName attrib#1=“Value” attrib#2=“Value” />

Nesting Placing Sets of Tags Within Each Other

… instead of …

Comments 




<html>

<html>…</html>

Surround All Markup & Text

Required

Used To Begin & End Every HTML Document


<head>

<head>…</head> Contains the Document's Header Information

Required

Important Information

Document Title

META Tags

Text Included Does Not Render


<title>

<title>…</title> Supplies the Title for the HTML Document

Appears in the Browser Window Title Bar

Title Should be 7 – 10 Words

Descriptive Rather Than General

Many Search Engines List Pages by Title

Often the First Impression a User Gets of Your Page


<body>

<body>…</body> Contains All Content to be Rendered

Attributes

leftmargin=number

Sets The Left Margin for Page

topmargin=number

Sets the Top Margin for the Page


<body>

Styles style=“color: colorName | #rrggbb | rgb(#,#,#);”

Specifies the Color of the Regular Text

style=“background-color: colorName | #rrggbb | rgb(#,#,#);”

Specifies the Background Color

style=“background-image: url(filename.ext);” Points to Location of Image that is Used as Background

Image is Tiled


<body>

Styles style=“background-position: horizontal vertical;”

Specifies the Positioning of the Background Image

Can Specify Keywords or Percentages

style=“background-repeat: repeat | repeat-x | repeat-y | no-repeat;”

Specifies the Tiling of the Background Image

style=“background-attachment: scroll | fixed;” Background Image Scrolls with Page or Acts as Watermark


<h#>

<h#>…</h#> Create a Heading Numbered from h1 through h6

h1 is the Top Head Level While h6 is the Bottom Should not be Used for Text Formatting Convey Page & Content Organization Should be Used in Descending Order

Style style=“text-align: left | center | right | justify;”

Specifies the Alignment of the Heading Text


 & 

…

Inserts Blank Line Before Tag

Separates Paragraphs of Text

 

Causes Text To Break Wherever Tag is Placed


Lists

<ul>…</ul> Unordered List Renders a Bulleted List Use Where Order or Rank is Unimportant

Style style=“list-style-type: disc | square | circle;”

Changes Style of Bullet Before Item

style=“list-style-image: url(filename.ext);” Image Used as Bullet


Lists

<ol>…</ol> Ordered List Tags Render a Numbered List

Style style=“list-style-type: decimal | upper-roman | upper-

alpha | . . .;” Changes Number / Letter Style Before Item

style=“list-style-position: inside | outside;” Changes Wrapped Item Placement


Lists

<li>…</li> Defines an Item in a List

<dl>…</dl> Definition List <dt>…</dt>

Defined Term

<dd>…</dd> Definition


Block Level Elements


Inline Elements


<img>

<img /> Inserts an Image Into a Document Secondary to Content

Attributes alt=“text”

Provides Alternative Text that Describes the Image IE Displays ALT Text When User Hovers on Image

Users Who Surf With Graphics Turned Off Non-graphical Browsers

Alt Text is Displayed in Place of Image Required


<img>

Attributes height=“pixels”

Specifies the Image's Height

src=“URL” Specifies Location of Image to Place in Web Page

Required

width=“pixels” Specifies the Image's Width


<img>

Style style=“float: none | left | right;”

Place Image on Left / Right & Wrap Text Around It

style=“clear: none | left | right;” Display Content After Margin is Clear of Floating Elements

style=“margin: top# right# bottom# left#;”

style=“border-width: #;” Rendered in Designated Link Color if Image is a Link


<hr>

<hr /> Inserts Plain Line (Horizontal Rule) Across Page Emphasize Divisions & Transitions In Content

Style style=“background-color: #RRGGBB | colorname;” style=“color: #RRGGBB | colorname;” style=“height: number;” style=“width: number;”


Special Characters

Begin with Ampersand End with Semicolon