HTML Tutorial 1: Developing a Web Page
description
Transcript of HTML Tutorial 1: Developing a Web Page
![Page 1: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/1.jpg)
CIS 1315 – Web Development for Educators
CIS 1315
HTMLTutorial 1: Developing a Web Page
![Page 2: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/2.jpg)
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
![Page 3: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/3.jpg)
CIS 1315 – Web Development for Educators
Web Hardware
Web Server
Stores Pages that Visitors Access
Apache (Windows/Unix/Linux)
IIS (Windows)
Security Issues
![Page 4: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/4.jpg)
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
![Page 5: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/5.jpg)
CIS 1315 – Web Development for Educators
HTML & XHTML
![Page 6: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/6.jpg)
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
![Page 7: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/7.jpg)
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
![Page 8: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/8.jpg)
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
![Page 9: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/9.jpg)
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. -->
![Page 10: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/10.jpg)
CIS 1315 – Web Development for Educators
<html>
<html>…</html>
Surround All Markup & Text
Required
Used To Begin & End Every HTML Document
![Page 11: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/11.jpg)
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
![Page 12: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/12.jpg)
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
![Page 13: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/13.jpg)
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
![Page 14: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/14.jpg)
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
![Page 15: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/15.jpg)
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
![Page 16: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/16.jpg)
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
![Page 17: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/17.jpg)
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
![Page 18: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/18.jpg)
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
![Page 19: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/19.jpg)
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
![Page 20: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/20.jpg)
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
![Page 21: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/21.jpg)
CIS 1315 – Web Development for Educators
Block Level Elements
![Page 22: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/22.jpg)
CIS 1315 – Web Development for Educators
Inline Elements
![Page 23: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/23.jpg)
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
![Page 24: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/24.jpg)
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
![Page 25: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/25.jpg)
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
![Page 26: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/26.jpg)
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;”
![Page 27: HTML Tutorial 1: Developing a Web Page](https://reader035.fdocuments.net/reader035/viewer/2022062521/5681692d550346895de07003/html5/thumbnails/27.jpg)
CIS 1315 – Web Development for Educators
Special Characters
Begin with Ampersand End with Semicolon