CIS 1315 – Web Development for Educators
CIS 1315
HTMLTutorial 1: Developing a Web Page
CIS 1315 – Web Development for Educators
Hypertext
Hypertext Document
Electronic File
Contains Elements that Can Open Other Documents
Customized v. Linear Progression
i.e., Windows Help
CIS 1315 – Web Development for Educators
Web Hardware
Web Server
Stores Pages that Visitors Access
Apache (Windows/Unix/Linux)
IIS (Windows)
Security Issues
CIS 1315 – Web Development for Educators
Web Software
Web Browser
Client Software
Accesses Web Pages & Renders Them
IE 7.0
Firefox 3.0
Safari 3.2
Chrome 1.0
CIS 1315 – Web Development for Educators
HTML & XHTML
CIS 1315 – Web Development for Educators
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
CIS 1315 – Web Development for Educators
Syntax
Elements (Tags)
Codes that Control Content Appearance
Opening/Closing
Two-Sided
<tagName>Content</tagName>
One-Sided
<tagName />
Lowercase
CIS 1315 – Web Development for Educators
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
CIS 1315 – Web Development for Educators
Syntax
Attributes Controls Behavior or Appearance of Element
<tagName attrib#1=“Value” attrib#2=“Value” />
Nesting Placing Sets of Tags Within Each Other
<b><i>…</i></b> instead of <b><i>…</b></i>
Comments <!-- . . . -->
<!-- This is a comment. -->
CIS 1315 – Web Development for Educators
<html>
<html>…</html>
Surround All Markup & Text
Required
Used To Begin & End Every HTML Document
CIS 1315 – Web Development for Educators
<head>
<head>…</head> Contains the Document's Header Information
Required
Important Information
Document Title
META Tags
Text Included Does Not Render
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<p> & <br>
<p>…</p>
Inserts Blank Line Before Tag
Separates Paragraphs of Text
<br />
Causes Text To Break Wherever Tag is Placed
CIS 1315 – Web Development for Educators
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
CIS 1315 – Web Development for Educators
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
CIS 1315 – Web Development for Educators
Lists
<li>…</li> Defines an Item in a List
<dl>…</dl> Definition List <dt>…</dt>
Defined Term
<dd>…</dd> Definition
CIS 1315 – Web Development for Educators
Block Level Elements
CIS 1315 – Web Development for Educators
Inline Elements
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<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
CIS 1315 – Web Development for Educators
<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;”
CIS 1315 – Web Development for Educators
Special Characters
Begin with Ampersand End with Semicolon
