Validation, CSS, and Templates

Validation, CSS, and Templates Mrs. Brownfield Webpage Design

Validation • “Approving” your code • Checking code for errors • Errors known as “tag soup” • Ensure browsers will display correctly • Professionalism

Validations • Where do we validate • http://validator.w3.org/ • Upload document or Type URL • What happens • Finds mistakes or problems in code • Correct on original document • Re-upload, and Validation code for image will appear

Assignment • Update Assignments Page with all new projects • Open Activity 1 • Practice Validation on Activity 1 • Validate all former assignments

Validation Problems • Check for start and close tags • Check for quotes around attributes • Correct doctype declaration? • ALT attribute on image tags? • Self close certain tags?

Meta Tags • Might be a common problem with Validation • Meta tags do all of the following: • Describes what can be found on your page • Used by search engines • http://www.w3schools.com/tags/tag_meta.asp • Two main parts (Name, Content) • Third meta tag to describe written content

CSS Extending Dreamweaver Knowledge

What is CSS? • Cascading Style Sheets • Control style and layout of multiple pages at one time • Defines how html elements display • Can be internal styles or attached as external style sheets

How does CSS work?

CSS Extended • ID verses Class • ID – giving certain elements in your page an identifier and then setting styles to that identifier • Class – a specific type of style that you can apply to multiple elements

What does it look like? ID Class p.center {text-align:center;} #para1{text-align:center;color:red;}

CSS Code Example <head><style type="text/css">hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

CSS Code Examples http://www.w3schools.com/css/tryit.asp?filename=trycss_color http://www.w3schools.com/css/tryit.asp?filename=trycss_link

CSS – You try it • Open a previous activity done in html • Add CSS to change text, background colors, and/or links

CSS in Dreamweaver • Mainly use external style sheets and apply to pages • Create a new document in Dreamweaver and save it as CSS • Expand CSS Styles tab on the right • Use new CSS Rule button on that panel • Save and apply document to html documents

You Try It • Open the directions page on the shared drive in the Spring Folder • Spring Website – work together

Validation, CSS, and Templates