Week Two: July 2-6

Tuesday   Thursday   TO DO

 

WEEK'S OBJECTIVE

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

 

Tuesday

 

GAMEPLAN

  • 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

 

DISCUSSION

 

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=
  • NO NO NO NO NONONONONONO!!!!

 

Images

 

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

 

Lists

  • 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

 

Accessibility

  • 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

 

DEMO

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!!

 

TASKS

 

BACK TO TOP

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

Thursday

 

GAMEPLAN

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

 

DISCUSSION

 

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;"

 

Images

  • 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

 

 

DEMO

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.

 

TASKS

  • Reading: Chapters 11 - 12

 

BACK TO TOP

 

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

 

TO DO

 

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

 

ASSIGNMENTS

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

 

 

BACK TO TOP