1 / 19

The .htm/.html Mystery

Learn the basics of Cascading Style Sheets (CSS) for web design, troubleshoot file extension issues, and improve your page layout with this helpful guide.

bjillian
Download Presentation

The .htm/.html Mystery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The .htm/.html Mystery • When saving the template files in Internet Explorer, they will be named .htm by default. To be consistent with how the code was written in the template, you must rename the file extension: .html or else the links in your navigation bar will not work. • Our current recommendation is to save the files from Mozilla Firefox in order to avoid this issue. Firefox saves the files as .html by default.

  2. Troubleshooting If have problems with naming or re-naming the file extension (ex. .txt, .doc, .htm, .html, etc.): Open up Control Panel in your PC. Within Control Panel search for “Folder Options”. Open it and click on the View tab and un-check the box for “Hide extensions for known file types”.

  3. CSS Basics LIS Webteam October 15, 2010

  4. Why CSS? • What’s wrong with HTML? • Structure vs Style • Early web design used hacks to style webpages with HTML – like tables to set aside parts of a page • Cascading Style Sheets designed to solve a number of problems

  5. Why CSS • Separate style from structure, this lets programs and devices read HTML for what it is • Cascading feature allows designers multiple levels of control • Global style changes that took tedious work to do in HTML now takes seconds in CSS

  6. What can you do with CSS • Colors, backgrounds • Fonts • Spacing • Page positioning

  7. CSS Basic structure selector { property : value; } Examples h1 { color : red; } p { background-color : #00FFFF; } a { font-size : 3em; color : red; }

  8. Cascades • 3 levels of CSS • Checked in this order, each overrides the previous • External style sheet – applies to many pages • Internal style sheet – applies to all of 1 page • Inline style – applies to single HTML element

  9. 3 levels of CSS External Style Sheet Ex.: eportfolio.css

  10. 3 levels of CSS Internal Style Sheet Placed near the beginning of an html document between the <head></head> tags, and enclosed by the <style type=“text/css”> </style> tags.

  11. 3 levels of CSS Internal Style Sheet Example <html> <head> <style type="text/css"> p {color: white; } body {background-color: blue; } </style> </head> <body> <p>White text on a blue background!</p> </body> </html> The “Internal Style Sheet”

  12. How code from the last slide would appear in your browser:

  13. 3 levels of CSS Inline Style Overrides the rules in the external and internal style sheets. Goes right in the HTML tag as an attribute. Ex.: <p style = “background = red;”>blah blah blah</p>

  14. That would look something like:

  15. The CSS Box Model Margin Border Padding Content

  16. Page Layout Block 1 Block 3 Block 2 Block 4

  17. Time to Practice • Work through the handout exercises • Play around with CSS • RGB Calculator!

  18. Where to go for more • LIS Webteam • w3schools.com

  19. Good Luck, Have Fun

More Related