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/HT ML6ed_examples/localindex.html http://perleybrook.umfk.maine.edu/classes/cos125/HT ML6ed_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 Set the DTD Tells browser what “rules” you are using Set the namespace Instructions for tag sets Create the page Head & title Body

5. Template for Transitional XHTML 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 For Western European

7. USING xHTML in Dreamweaver File>>NEW

8. Adding a title Type The Title Between In Dreamweaver Untitled Document 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_ex amples/foundation/headers.html http://perleybrook.umfk.maine.edu/classes/cos125/HTML6ed_ex amples/foundation/headers.html

10. Examples of Headers Header 1 header 2 header 3 header 6

11. Starting a Paragraph (Block) Type Type your paragraph Type 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 http://perleybrook.umfk.maine.edu/classes/cos125/H TML6ed_examples/foundation/paragraphs.html http://perleybrook.umfk.maine.edu/classes/cos125/H TML6ed_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 Spans Inline 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

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 Making text italic Making Text Bigger Making Text Smaller Can be “nested” ??????

17. Basic XHTML Formatting Using a Monospaced Font Using Preformatted text Used when you want the browser to display text as it is written in the code

18. Quoting text Either Block or in-line Block http://someserver.com Inline quote (doesn’t work with IE)

19. Other stuff Super script Sub script Revised Text (underlined) Revised Text Deleted text (strike through) Deleted text Abbreviations (doesn’t work with IE) 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 “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 stuff Works on most elements Center block elements in middle of page Centers inline element in space allowed for element

22. Offering Alternative Text If the image won’t appear, the “alternative text” will 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.ht m http://perleybrook.umfk.maine.edu/samples/UsingImages.ht m

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