An in-class debugging exercise. All based upon real errors.

Slides:



Advertisements
Similar presentations
The University of Adelaide HTML Basics: Getting your code to work Peter Murdoch March 2014 PREPARING GOOD LOOKING DOCUMENTS.
Advertisements

HTML and CSS. HTML Hyper Text Markup Language Tells browser how to display text and images.
HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.
Advance CSS (Menu and Layout). CSS Navigation MENU.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Web Pages Week 10 This week: CSS Next week: CSS – Part 2.
CSS Styling CSS Box Model & CS110: Computer Science and the Internet.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets
/k/k 1212 Cascading Style Sheets Part one Marko Boon
Chapter 6 More CSS Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Today CSS HTML A project.
CSS Cascading Style Sheets Please fasten your seat belt.
Introduction to CSS. What is CSS? A CSS (cascading style sheet) file allows you to separate your web sites (X)HTML content from it’s style. Use your (X)HTML.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Murach's PHP and MySQL, C1© 2010, Mike Murach & Associates, Inc.Slide 1.
Start menu -> all program -> Microsoft Visual SourceSafe-> Microsoft Visual Studio 2010 Click.
Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.
Very quick intro HTML and CSS. Sample html A Web Title.
Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
Session 4: CSS Positioning Fall 2006 LIS Web Team.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
1 Dreamweaver CS5 intermediate class by Cookie Setton Build a CSS website WITHOUT TABLES Just when you thought you were starting to understand HTML coding,
Diliev.com & pLOVEdiv.com  DIliev.com.
Cascade Style Sheet Demo. Cascading Style Sheets Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to.
กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Unit 20 - Client Side Customisation of Web Pages
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
An in-class debugging exercise.. Alex B Cook Alex Having a dog can be a very rewarding experience. However, there are a few challenges that any canine.
Principles of Web Design 6 th Edition Chapter 10 – Data Tables.
Ch 10 HTML and CSS Web Standards Solutions A Web Standardistas’ Approach.
Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.
Microsoft Expression Web-Illustrated Unit F: Enhancing a Design with CSS.
Web Design (12) CSS Introduction. Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML.
 Look especially at › File Tips and Shortcuts › Student video.
WebD Introduction to CSS By Manik Rastogi.
CSS.
Style Sheets.
Unit 3 - Review.
Creating Your Own Webpage
Creating Page Layouts with CSS
Chapter 7 Page Layout Basics Key Concepts
Cascading Style Sheets
CSS.
Chapter 6 More CSS Basics Key Concepts
Web Authoring Task 8– Create the following Style Sheet:
Style Sheet Create a new CSS called Cameras.CSS TD Web Authoring
Table CSS Create a new CSS called tablestyle.CSS Green Background
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
The Internet 10/13/11 The Box Model
Debugging exercise. Debugging exercise A few problems? funny.jpg
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
How to use the CSS box model for spacing, borders, and backgrounds
Principles of Web Design 5th Edition
Session IV Chapter 15 - How Work with Fonts and Printing
Introduction to Cascading Style Sheets (CSS)
Introduction to Styling
Presentation transcript:

An in-class debugging exercise. All based upon real errors.

Alex B Cook Alex Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware. Identification Your dog should wear a collar at all times. :

Alex B Cook Alex Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware. Identification Your dog should wear a collar at all times. :

American Bobtail Burmese Egyptian Mau Manx Sphynx

American Bobtail Burmese Egyptian Mau Manx Siamese Sphynx End li tags are not required. Always watch out for i vs 1. American Bobtail Burmese Egyptian Mau Manx Sphynx

Visit the Vet Your dog should be checked with a local veterinarian. He should be fully vaccinated. Booster vaccination will be required yearly. It is especially important that your dog is neutered before he comes in contact with other dogs. Neutering will prevent many of the dogs more anti-social habits. The First Day Home It is best to keep him on a leash. :

Visit the Vet Your dog should be checked with a local veterinarian. He should be fully vaccinated. Booster vaccination will be required yearly. It is especially important that your dog is neutered before he comes in contact with other dogs. Neutering will prevent many of the dogs more anti-social habits. The First Day Home It is best to keep him on a leash. :

Alex B Cook

Alex B Cook

funny.jpg The image files are in the same folder as the page with this code.

 removed images funny.jpg The image files are in the same folder as the page with this code.

The penalty for killing a cat, 4,000 years ago in Egypt, was death. 95% of cat guardians admit they talk to their cats. A cat can be either right-pawed or left-pawed. A cat can jump as much as seven times its height. A cat has 230 bones in its body. A human only has 206 bones. A cat has four rows of whiskers. Source:

The penalty for killing a cat, 4,000 years ago in Egypt, was death. 95% of cat guardians admit they talk to their cats. A cat can be either right-pawed or left-pawed. A cat can jump as much as seven times its height. A cat has 230 bones in its body. A human only has 206 bones. A cat has four rows of whiskers. Source:

td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } h1, h2, h3, h4, p { font-family: Verdana, Arial, Helvetica, sans-serif; } #mainnav { background: skyblue: text-align: center; margin: 0; padding: 0.25em; } #info { background-color: #8BB381; }

td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } h1, h2, h3, h4, p { font-family: Verdana, Arial, Helvetica, sans-serif; } #mainnav { background: skyblue;  change colon to semicolon text-align: center; margin: 0; padding: 0.25em; }.info {  a class should have a period before its name background-color: #8BB381; }

.content first-letter { font-size: 3em; float: left; line-height: 0.8em; } footer.callout:before { content: images/.globe.png); }.left,.right { width: 200px; height: 150px; position: absolute; top: 130px; index: 2; }

.content :first-letter {  missing colon font-size: 3em; float: left; line-height: 0.8em; } footer.callout:before { content: url("images/globe.png");.left,.right { width: 200px; height: 150px; position: absolute; top: 130px; z-index: 2; }

| Project 3 | Project 4 | Unit E | Dog Rescue | Bottom of Page

| Project 3 | Project 4 | Unit E | Dog Rescue | Bottom of Page | Project 3 | Project 4 | Unit E | Dog Rescue | Bottom of Page

: Be Consistent Your new dog must learn a whole set of new rules. Be patient and be consistent. If you want him off the furniture, don't allow him to sit on the couch "sometimes". Don't allow him to do something one time and forbid it another. Your name: Alex b Cook Your section number: HTML5,CSS3 Unit Z Project 0

: Be Consistent Your new dog must learn a whole set of new rules. Be patient and be consistent. If you want him off the furniture, don't allow him to sit on the couch "sometimes". Don't allow him to do something one time and forbid it another. Your name: Alex b Cook Your section number: HTML5,CSS3 Unit Z Project 0

Style sheet for TASK h2 h3 { text-align: center; h4 { text-align: right } #resp { margin left: auto; margin-right; auto; border style: solid; border width: 0.1em; padding: 1; }

/* Style sheet for TASK */ h2, h3 { text-align: center; } h4 { text-align: right; } #resp { margin-left: auto; margin-right; auto; border-style: solid; border-width: 0.1em; padding: 1em; }  Missing comment tags  Missing comma  Missing }  Missing ;  Missing –  ; should be a :  Missing -  Missing –  Missing em

Alex B Cook Alex Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware. Identification :

Alex B Cook Alex Having a dog can be a very rewarding experience. However, there are a few challenges that any canine owner should be aware. Identification :