Week Two: July 2-6

Tuesday   Thursday   TO DO



Coding with basic XHTML and embedded CS styles, validating code, creating basic templates, and using FTP to upload files. Discuss layout and content basics. Book: Introduction, Chapters 9-12.


DUE Thursday, July 7 - Assignment 1





  • Naked XHTML Code and commenting
  • Creating a basic template
  • BAD Tags
  • Validating code
  • Links, images, accessibility
  • Your URL
  • Assignment 1 Prep: Assignment Links Portal page




XHTML Basics - Recap


BAD Tags: DO NOT EVER USE these old, deprecated, ancient, bad tags:

  • center
  • font
  • basefont
  • menu
  • font
  • br
  • b
  • i
  • u
  • NO on these attributes: align=, valign=, bgcolor=, bgANYTHING=, border=, height=, hspace=, alink=, vlink=, width=, vspace=, size=, hr=noshade, border=, link=, type=, value=




Basic Inline emphasis

  • Horizontal Rule <hr />
  • Break <br />
  • Bold and Italics <strong>, <em>
  • Sub and superscripts: <sub>, <sup>
  • Blockquotes: <blockquote> - long quotes
  • Pre: <pre>
  • Quote: <q> - not supported in IE, use characters instead
  • HTML Characters Cheatsheet



  • Ordered lists: <ol><li></li></ol>
  • Unordered lists: <ul><li></li></ul>
  • Definition lists: <dl><dt>term <dd>def</dd></dt></dl>
  • NOTE: About native indents


Block-level manipulation problems

  • <span>


Linking and URLs

  • Links <a href></a>
  • Absolute urls - full length, external links, thank you pages
  • Relative urls - relative to file location
  • Moving down a level (foldername/file)
  • Moving up a level (../ ../foldername/file)
  • Moving up multiple levels (../../file)
  • Accessibility - title=" required with all <a href> tags



  • Link name attributes
  • Image alt tags for IE, general browsers
  • Image title tags for Firefox
  • Link ID tags


Link Types

  • Anchor links - name for spot to jump to, link to named spot
  • Back to Top link - using ID not Name
  • Change links in Portal page to be relative if you have any absolute
  • Always use title="" with every link
  • Images as links - create image, and build link around it: <a href><img /></a>
  • Always use alt="" and title="" with every image


Tag basics

  • Element - the tag: <p style="___">
  • Attribute - affects the tag: <p style="____">
  • Value - the qualification of how the attribute affects the tag: <p style="____">
  • Block-level elements: when rendered visually, block-level elements usually begin on a new line, and they can include inline elements inside of them. A block level tag cannot be inside another one. Examples: <p>, <h1>, <table>, <div>, <ul>
  • Inline elements: typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line. Examples: <br />, <a>, <img />, <em>


Validating your code


Web coding tools


FTP/File Directory QUIZ - Due Thursday, July 5.

  • Email me your student login and your password.
  • This is Pass/Fail
  • 15 points
  • You MUST be using exactly the file directories I instructed
  • ALL your file names MUST be one word and use no spaces or dashes
  • ALL your file names MUST be lower case.
  • ALL your file extansions must be lower case.


Assignment 1: Assignment Links Portal page

  • Banner/ID
  • Navigation: Links to your assignments
  • Content: Image, about you, your 5 fave links
  • Footer: copyright, email, links
  • Not public use
  • Where it goes



Get started on your existing Assignment Links Portal page work

  • New file, save in web110 as index.html
  • GrabIt: Basic Page XHTML Code
  • Set up class assignment navigation using relative (not absolute) URLs
  • Think of fun stuff to personalize your portal over next couple of days
  • Validate code with W3C Validator
  • MUST Upload by 11:55pm Thursday Night so I can grade
  • MUST Post your URL (http://edison.seattlecentral.edu/~yourlogin/web110/ ) today in our Forum today!!











  • FTP with Edison
  • Layout basics
  • Inline/Embedded Cascading Styles - Chapter 15
  • HTML colors
  • Assignment 2 Prep: Basic Tables.




File Transfer Protocol (FTP)

  • Save your hw/basicpage.html page as index.html in your web110 folder.
  • Save a copy of your hw/images/image file into your web110/images folder.
  • Filezilla - Start, utilities, Filezilla
  • Look over for passive FTP, queue time


Edison Free Webhost


Basic readability

  • Above the scroll / First screen priority information
  • Readers scan, not read
  • Breaking up information
  • Basic reading styles - Z-style, F-pattern


Layout basics

  • Web site resolution.width: standard is 1024 x 768, so site widths of 900px, 950px, and 975px can be good.
  • Clear web site identification
  • Clear page identification
  • Clear section identification
  • White space
  • Alignment
  • Think in "blocks"


Style basics

  • Good contrast - background to text, size, etc.
  • Colors that communicate
  • Ease of reading
  • Appropriate font sizing/color
  • Usability - color blindness, cultural, etc


Content basics

  • Banner is a web site wide identifier
  • Primary vs. secondary navigation
  • Scannable text
  • Pertinent images
  • Limited inline links


Inline/Embedded Cascading Styles - Chapter 15

  • For anything not basic
  • For anything otherwise deprecated
  • Limited use - prelude to CSS of 2nd quarter
  • Always use inside a parent tag, like <p style="">
  • Never use = signs or quote marks inside of a style rule


Using inline style rules

  • Good for fonts - family, size, weight, style
  • Good for table-related - background color, vertical alignment, width
  • Good for the <body> tag to set the same attribute/value through whole document, like the font color or font family
  • Better for combining attribute/value pairs in a set, such as multiple image or font needs, like style="border black solid;"
  • Good for combining unlike items, such as body background, text color, etc.
  • ALWAYS follow every attribute/value pair with a semicolon, even the last one


Usage and Examples

  • Rule = style="attribute:value;" - no equal signs or inside quotes.
  • Always use style="" inside the tag you want to affect
  • You CANNOT use the deprecated ways of styling you may have learned before.
  • Text tags allow text alignment, color, and font variations
  • Font color: style="color:black;"
  • Text alignment: style="text-align:center;"
  • Border: style="border:1px;"
  • Background Color: style="background-color:green;"



  • For main graphic elements
  • For links
  • For backgrounds - <body style="background-image:url(path/img.ext); background-repeat:repeat;"> </body>


Image Sizing

  • Native size - how it imports
  • Width - changes appearance only
  • Height - changes appearance only
  • Can choose width or height and image will resize proportionally


Image placement

  • Alignment - needs to be aligned through the text tag in a style rule.
  • Images need to be aligned through the text tag style rule by placing inside the text tag sets
  • Text wrapping - image is floated to the left or right of the text to wrap around it - must be done inside of a <p> </p> tage set and be styled with float.


Image borders

  • Build into original in image editing program, or
  • Using code <img style="border:2; bordercolor:#990000;>


Images as navigation links

  • Consistent - style and size
  • Images can be icons, small pics, and buttons
  • Logos/icons for inline use


Styles - push your content around

  • Alignment - center, right, justify
  • Margin
  • Padding


Styles - Text and links

  • Text decoration
  • Text transformation
  • Text indentation
  • Line height


Styles - Colors

  • Background-color


HTML Web Safe Colors

  • Colors that are expected to render accurately regardless of the browser they are displayed on
  • These days, many colors are accessible, but you need the HEX# - 6 digits
  • Do not use the color words, like black, gray, red, etc. Use the HEX#.
  • From now forward, only HEX#s will be acceptable


How to Find


Rule of Thumb for HEX colors

  • Always use the # in front of the color: #ffffff
  • Use small letters whenever you have them in the HEX color code: #cc0000
  • When all the HEX numbers are the same, you can shortcut to 3 digits: #000000 = #000
  • When the HEX numbers have 3 pairs of repeating digits, you can also shortcut it: #ff3344 = #f34




FTP/File Directory QUIZ

  • If time I will look at in class
  • Otherwise I NEED your student login and password emailed to me.
  • This is Pass/Fail for 15 points.
  • You MUST be using exactly the file directories I instructed
  • ALL your file names MUST be one word and use no spaces or dashes
  • ALL your file names MUST be lower case.
  • ALL your file extensions must be lower case.



  • Reading: Chapters 11 - 12








  • Finish/upload your Assignment 1: Assignment Links Portal page by Thursday evening 11:55pm.
  • Practice W3C Validation.
  • POST your Edison URL into the Student Help Forum in reply to my WEEK 2 post.
  • Add comment in Forum to WEEK 3: Your Final Project choice.
  • READ Ahead on Chapter 13 - Tables.



  • Assignment 1: Your Assignment Links Portal page, 30 points, due tonight, Thursday, July 5.
  • Assignment 2: Your Basic Tables page, 30 points, due next week, Thursday, July 12.