Embed Size (px)
Citation preview
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 Chaps 3 & 4
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
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>
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 automaticallyhttp://www.w3schools.com/Xhtml/xhtml_dtd.asp
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" />
USING xHTML in Dreamweaver
File>>NEW
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
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
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>
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
  Add a blank line
<br/> http://perleybrook.umfk.maine.edu/classes/cos125/H
TML6ed_examples/foundation/paragraphs.html
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”
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)
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 -->
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
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> ??????
Basic XHTML Formatting
Using a Monospaced Font <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>
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>
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
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 <img src=“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
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
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
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
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
