1 / 24

COS 125

COS 125. Internet Fundamentals and Web Page Design Day 3. Agenda. Questions Assignment 1 posted Due Feb 2 @ 9:35 AM Source Code for text book examples http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html Today discuss Basic XHTML Structure & Formatting

urania
Download Presentation

COS 125

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. COS 125 Internet Fundamentals and Web Page Design Day 3

  2. Agenda • Questions • Assignment 1 posted • Due Feb 2 @ 9:35 AM • Source Code for text book examples • http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/localindex.html • Today discuss Basic XHTML Structure & Formatting • Chaps 3 & 4

  3. Ftp using Windows Explorer • In address bar • ftp://perleybrook.umfk.maine.edu • Login with the same info you used to login in to lab computers • Select COS 125 folder • Select the folder with your first name • Moving files • Drag and drop files • Use menu edit copy/paste • Click on file and right mouse for context menu

  4. Basic XHTML • Declare the page as XML • <?xml version=“” encoding=“” ?> • Set the DTD • <!DOCTYPE … > • Tells browser what “rules” you are using • Set the namespace • <html xmlns=“”> </html> • Instructions for tag sets • Create the page • Head & title • <head><title> </title></head> • Body • <body> </body>

  5. Template for Transitional XHTML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> </body> </html> Dreamweaver does this for you automatically http://www.w3schools.com/Xhtml/xhtml_dtd.asp

  6. Declaring the Encoding • Not a required component • Tells web browser how to translate the 1’s and 0’s as characters • for Cyrillic character set • <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> • For Western European • <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

  7. USING xHTML in Dreamweaver File>>NEW

  8. Adding a title • Type <title> The Title </title> • Between <head> </head> • In Dreamweaver • <title>Untitled Document</title> • Just change text • The text in the title are indexed by Search engines

  9. Creating Headers • Used as Dividers and Title for sections of your page • Always displayed with a line return at end (Block element!) • Six levels • h1, h2, h3, h4, h5, h6 • h1 is largest font • Can be formatted with styles • Can be aligned (left, right, center) • Can be “named” (id=“aName”) • Naming elements is a good idea since it allows for DHTML and DOM manipulations • http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/foundation/headers.html

  10. Examples of Headers • <h1 align="center" id="fred">Header 1</h1> • <h2 align="right" id="barney">header 2</h2> • <h3 align="left">header 3</h3> • <h6 id="wilma" align="right" > header 6</h6>

  11. Starting a Paragraph (Block) • Type <p> • Type your paragraph • Type </p> • Can be aligned (deprecated) • Left, right, center, justified • Can be named (id’d) • Can formatted with style rules • Add a space • &nbsp • Add a blank line • <br/> • http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_examples/foundation/paragraphs.html

  12. Naming and Classifying Elements • All HTML element can be named and/or made a member of class group • Why • For Style Sheet Formatting • For page navigation • Naming is creating a unique name for a specific element • id=“daName” • Classifying is for grouping elements in a group with similar characteristics • class=“daGroup”

  13. Breaking a page into parts • Two ways • Division • Block level • <div> </div> • Spans • Inline • <span></span> • Useful for formatting with style sheets • Can (and should) be named (ID’d)

  14. Adding comments • Comments are for the maintainers of the XHTML code • Comments are viewable in the code but NOT in the web page • What should you put in comments • Your name (prove ownership) • Notes to yourself so that you can edit your code • Identify places in the code that need work or updates • <!-- Write your comments here -->

  15. Gee Whiz Tip of the Day • Adding Titles to your elements • Title=“daTitle” • When the user puts his mouse cursor over the element in the web page a little box with the “daTitle” will appear http://perleybrook.umfk.maine.edu/samples/basicXHTML.htm

  16. Basic XHTML Formatting • Making text Bold • <b></b> • Making text italic • <i></i> • Making Text Bigger • <big></big> • Making Text Smaller • <small></small> • Can be “nested” • <big><big></big></big> • <big><small></small></big> ??????

  17. Basic XHTML Formatting • Using a MonospacedFont • <tt></tt> • <code></code> • <kbd></kbd> • <samp></samp> • Using Preformatted text • Used when you want the browser to display text as it is written in the code • <pre></pre>

  18. Quoting text • Either Block or in-line • Block • <blockquote cite=“http://someserver.com”> </blockquote> • Inline quote (doesn’t work with IE) • <q></q> • <q xml:lang=“xx” lang=“xx”></q>

  19. Other stuff • Superscript • Super<sup>script</sup> • Subscript • Sub<sub>script</sub> • Revised Text (underlined) • Revised<ins>Text</ins> • Deleted text (strike through) • Deleted<del>text</del> • Abbreviations (doesn’t work with IE) • <abbr title=“explanation”></abbr> • <acronym title=“explanation”></ ></acronym> • Examples • http://perleybrook.umfk.maine.edu/samples/xhtmlformat.htm

  20. Inserting a Image • Determine after what element in your WebPage you want the Image to appear • Place cursor in your code after the element • Type <imgsrc=“image.url”/> • “image.url” is location of the file • http://www.server.com/images/image.gif • ../images/image.gif • images/image.gif • image.gif • For this class • It is easier just to copy the image into the same directory as the xHTML page

  21. Centering elements • <center>stuff</center> • Works on most elements • Center block elements in middle of page • Centers inline element in space allowed for element Works on Graphics

  22. Offering Alternative Text • If the image won’t appear, the “alternative text” will • <img src=“cat.gif” alt=“Picture of a cat”/> • alt is REQUIRED for XHTML • Can also use title attribute • On some browsers “Alt” text will be a mouse over pop-up • Examples • http://perleybrook.umfk.maine.edu/samples/UsingImages.htm

  23. Second Gee-Wiz tip of the day • Wed documents can be validated against the standards for correct syntax • http://validator.w3.org/ • If your web document passes you can place a icon on your page

  24. In class excerise • Create an XHTML page using Dreamweaver Code Mode • Do an example of each of the elements shown today • Headers • Paragraph • Division and spans • Line breaks and Spaces • Names, classes and titles • Text formatting • Bold, Italics • Big, small, Superscript, subscript • Insert, delete, quotes, abbreviations • Preformatted text

More Related