1 / 27

HTML Tutorial 1: Developing a Web Page

CIS 1315. HTML Tutorial 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)

garvey
Télécharger la présentation

HTML Tutorial 1: Developing a Web Page

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CIS 1315 HTMLTutorial 1: Developing a Web Page

  2. Hypertext • Hypertext Document • Electronic File • Contains Elements that Can Open Other Documents • Customized v. Linear Progression • i.e., Windows Help

  3. Web Hardware • Web Server • Stores Pages that Visitors Access • Apache (Windows/Unix/Linux) • IIS (Windows) • Security Issues

  4. Web Software • Web Browser • Client Software • Accesses Web Pages & Renders Them • IE 7.0 • Firefox 3.0 • Safari 3.2 • Chrome 1.0

  5. HTML & XHTML

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

  7. Syntax • Elements (Tags) • Codes that Control Content Appearance • Opening/Closing • Two-Sided • <tagName>Content</tagName> • One-Sided • <tagName /> • Lowercase

  8. 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 • &nbsp;

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

  10. <html> • <html>…</html> • Surround All Markup & Text • Required • Used To Begin & End Every HTML Document

  11. <head> • <head>…</head> • Contains the Document's Header Information • Required • Important Information • Document Title • META Tags • Text Included Does Not Render

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

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

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

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

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

  17. <p> & <br> • <p>…</p> • Inserts Blank Line Before Tag • Separates Paragraphs of Text • <br /> • Causes Text To Break Wherever Tag is Placed

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

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

  20. Lists • <li>…</li> • Defines an Item in a List • <dl>…</dl> • Definition List • <dt>…</dt> • Defined Term • <dd>…</dd> • Definition

  21. Block Level Elements

  22. Inline Elements

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

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

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

  26. <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;”

  27. Special Characters • Begin with Ampersand • End with Semicolon

More Related