1 / 90

Writing HTML and CSS From the Ground Up

Writing HTML and CSS From the Ground Up. Writing the HTML and CSS code for your website. Basics. Old School vs. New School. Old school: build site entirely in HTML Use tables to build “shelves” to put content (headers, navigation, images, footers)

palmer-malone
Download Presentation

Writing HTML and CSS From the Ground Up

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. Writing HTML and CSS From the Ground Up Writing the HTML and CSS code for your website

  2. Basics

  3. Old School vs. New School • Old school: build site entirely in HTML • Use tables to build “shelves” to put content (headers, navigation, images, footers) • Fixed width tables don’t translate well to other platforms (PDAs, cellphones, widescreen monitors) • Lots of code, often messy • New school: build site in HTML and CSS • HTML, which is just bare-bones content. • CSS, which provides format and layout. • Code is clean and lean • Use tables only for tabular data (row/column format: names and phone numbers, date and frequency)

  4. Why? • Separates content from presentation - change the look of entire site by changing one CSS file.  • More flexibility and control over sites that will be seen on a variety of browsers and platforms, including PDA's, cellphones, wide-screen monitors and text-to-speech monitors. • Faster download • Simple HTML content more “transparent” for text-to-speech browsers, browsers with images turned off, old browsers • Navigation is in lists, paragraphs within paragraph tags, less code and fewer images in the HTML • HTML uncluttered by code formatting layout and design

  5. Xhtml • XHTML is the new HTML • XHTML is the same as HTML, but stricter and cleaner • Fully backwards compatible, but can also work with the coming generation of platforms. • Fewer tags used, fewer attributes used • Stricter rules • Use CSS to do the heavy lifting: format and presentation • HTML is content only, so requires fewer tags and attributes

  6. HTML tags • Tags are applied in pairs, an opening tag and a closing tag.  Everything between the opening and closing tag is affected by the tag. • <h2>Everything between the opening and closing tag is affected by the tag.</h2> • Some tags can have attributes added to them.  The <img> tag, for instance, inserts an image onto you page.  To define the image source, the size of the image, the alt text of the image and so on, you need to use add attributes to the tag: • <img src="images/staff1.jpg" width="100px" height="50px" border="1px" alt="Pueblo County Extension staff">

  7. XHTML • In XHTML, the rules are stricter than in HTML: • All tags must be closed, even tags that normally aren't closed in HTML: <br> <img> <input>. • WorkAround: <br /> instead of <br>; <imgsrc="pic1" /> • Must be closed in reverse order they appear (nesting) • <body><h2>My headline</h2></body> • All letters must be lowercase • Some old HTML tags are deprecated, meaning they won't work in XHTML: <center> <font> <strong> • Some attributes are deprecated as well: background, bgcolor, hspace, vspace, align • Validate code at W3C (World Wide Web Consortium).  Once validated, they let you have this cool icon for your site:

  8. 8 tags all webpages need • <html><head> Description, keywords, title, and CSS – or link to external CSS – go here. <title>The title goes here.</title></head><body>All the content of your page goes here.</body></html>

  9. 2 more • DOCTYPE tag, to let the browser know what "rulebook" your page will follow: • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • You also need to append the <html> tag so that it reads:<html xmlns="http://www.w3.org/1999/xhtml">Get these from Dreamweaver, or www.w3.org, or from these lessons • Cut and paste them into every new page you start • XHTML is less forgiving than (but preferable to) HTML • “Transitional” is more forgiving than “strict” • “Strict” gives you more control than “transitional”

  10. CSS • Internal CSS start with this line:<style rel="stylesheet" type="text/css"><!-- • and end with this line: • --></style> • Note the comment code: <!--comment--> • External stylesheets use this line:<link rel="stylesheet" type="text/css" href=“my_styles.css" />

  11. All The Tags You Need <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style rel="stylesheet" type="text/css"><!— --></style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="this is my website" /> <meta name="keywords“ content="keyword one, keyword two“ /> <title>My website </title> </head> <body>All content goes here. </body> </html>

  12. Css syntax element { property-1: value; property-2: value; } body { background-color: #ded8cc; font-family: verdana, helvetica, arial, sans-serif; } #wrapper { width: 750px; text-align: left; } These properties will be applied to everything within the “body” tags (which is all the content of your page) These properties will be applied to any tag (usually a div tag) where id=“wrapper”

  13. Previewing Your Page • Webpage should have .htm or .html extension • CSS should have .css extension • In browser, go to File> Open File (Firefox) or File> Open>Browse (IE) • Need to preview in several browsers • IE 7 (22% of market*) • Firefox 1&2 (37%*) • IE 6 (31%*) (tough browser!) • IE 5 (2%*) • Others (under 4% each*): Safari, Opera, NN 4, IE 4 *Numbers from W3 Schools – February 2008

  14. Multiple IE Browsers • IE likes to write over previous versions of itself, and will often not let you install earlier versions • http://tredosoft.com/Multiple_IE will install IE 3, 4, 5, 5.5 and 6 (or any combination of them) on your system • Install IE7 first, then run this • Doesn’t play well with Vista

  15. Building A Page Layout

  16. Starting Tags, Meta-content • We’re going to start with internal CSS, to keep everything in one document • Easy to split off to external CSS, which we’ll do later • Add some basic meta-content: • All within head tags • Description <meta name="description" content="this is my website" /> • Keyword <meta name="keywords“ content="one, two“ /> • Title <title>Title goes here</title>

  17. Add Some Basic Content • Between <body> tags, type this text: • My header • Home | Programs | Registration | About Us | Contact Us • Staff • My headline • My content • CSU Home | Extension Home | Webmaster

  18. Define the body • In CSS, between the style tags • Apply only those elements that will be default for all content of all pages • Will affect everything within body tags (everything!) • Font style, background color, “zero out” margins and padding body { background-color: #ded8cc; font-family: verdana, arial, helvetica, sans-serif; margin: 0; padding: 0; }

  19. Define a heading Tag h1 { text-align: center; color: #006633; font-size: 1.5em; } • Put headline between <h1> and </h1> tags • A block-level tag, so line breaks are automatically applied before and after • Adding CSS to tags is a blunt instrument approach – affects every instance of that tag

  20. Div tags • You can apply CSS between <div> tags • Create an ID in CSS with # followed by ID #header { position: relative; width: 750px; height: 121px; margin: 10px; background-color: #dcedd1; } • Then put div tags with IDs around that content you are manipulating • <div id=“header”>My header</div> • Can only be used once per page • Good strategy for one-use structural elements (header, body, nav bar, footer)

  21. Define Wrapper, Center Wrapper • Common design strategy is to wrap your content in one big box • Useful for centering, background color, overall width #wrapper { position: relative; width: 770px; margin-left: auto; margin-right: auto; border: 1px solid #ffffff; } • Put <div id=“wrapper”> just after <body> tag, close it just before closing body tag

  22. Centering the Wrapper in IE5-6 • Setting margins to equal values will center in most browsers, but NOT in IE 6 or before. • Add text-align: center; to body CSS for IE workaround • Add text-align: left to wrapper CSS to reset it to left

  23. Define Header and Navbar #header { position: relative; width: 750px; height: 121px; margin: 10px; background-color: #dcedd1; } #top { position: relative; width: 750px; height: 45px; margin: 10px; background-color: #dcedd1; } • Add div tags with appropriate IDs around header and navbar content <div id=“top”></div>

  24. Reposition Text In Navbar • Add these 2 line to center horizontally and vertically: • text-align: center; • line-height: 45px; (size of parent element) #top { position: relative; width: 750px; height: 45px; margin: 10px; background-color: #dcedd1; text-align: center; line-height: 45px; }

  25. Define Left And Main columns, Footer #left { position: relative; width: 200px; height: 400px; margin: 10px; background-color: #dcedd1; } #main { position: absolute; top: 186px; left: 210px; width: 540px; height: 400px; margin: 10px; background-color: #dcedd1; } #footer { position: relative; width: 750px; height: 45px; margin: 10px; background-color: #dcedd1; text-align: center; line-height: 45px; } • Notice the #main ID is position: absolute, followed by “top” and “left” values • Pulls it out of the flow of the HTML • Footer CSS is identical to Top CSS

  26. Result (Firefox, IE5, 5.5, 6, 7)

  27. Adding Images

  28. Two Ways To Add images • HTML • Use the image tag <img> • Add attributes for source, width, height, and alt text • <img src=“images/header.jpg” width=“750px” height=“121px” alt=“Colorado State University Extension” /> • Note the self-closing tag • CSS • Use background-image #header { position: relative; width: 750px; height: 121px; background-image: url(nav-1.jpg); } • Background-position (left, right, top, bottom, center) • Background-repeat (repeat, repeat-x, repeat-y, no-repeat)

  29. Adding The Header, Nav And Footer Images • Put the header image tag in the HTML between the header <div>s • <img src=“images/header.jpg” width=“750px” height=“121px” alt=“Colorado State University Extension” /> • Put nav-1 in the #top CSS background-image: url(nav-1.jpg); background-repeat: repeat-x; • Put nav-2 in the #footer CSS background-image: url(nav-2.jpg); background-repeat: repeat-x;

  30. Adding an Image To the Main Column • <img src="heron.jpg" width=“233px” height=“252px” alt=“The Great Grey Heron” align=“left” /> • The attribute “align” is depricated • We’ll learn how to do it via the CSS “float” property later in the workshop • Vspace and hspace (set margin areas in html for images) are depicated too • We’ll add margins later in CSS

  31. Result

  32. Margins, Padding and Borders

  33. The box model • Margin is the area outside the box • Border is the line around the box itself • Padding is the area between the box and the content of the box • In IE 5 and 6, width of an element INCLUDES border and padding (not the margin) • All other browsers ADD margin, border and padding to width of element

  34. Working Around the Width Property Difference • There is a “hack” for it: div {    width: 100px;  }  div {    \width: 140px;    w\idth: 100px;  } • \width resets IE5, IE5.5, IE6 to new width (element width + padding + border) • w\idth sets IE 6 back to real width (element width only) • Won’t work for NN 4 • We’ll use this later

  35. Margin Values • margin: 10px; will put 10 pixel margin on each side • Can specify different values for top, right, bottom, left • Like a clock: start at top, work your way around clockwise • margin: 0 10px 0 10px; will put 10px margins on sides, none on top and bottom • For a single margin value, you can use margin-left, margin-right, margin-top, margin-bottom • margin-left: 10px; will estabish a 10 pixel margin only on the left side

  36. Padding Values • padding: 10px; will put 10 pixel of padding on each side • Can specify different values for top, right, bottom, left • Like a clock: start at top, work your way around clockwise • padding: 0 10px 0 10px; will put 10px margins on sides, none on top and bottom • For a single padding value, you can use padding-left, padding-right, padding-top, padding-bottom • padding-left: 10px; will estabish 10 pixels of padding only on the left side

  37. Two Value Shorthand • Can specify 2 values, 1st for top/bottom, 2nd for left/right • margin: 0 10px; will put 10px margins on sides, none on top and bottom • padding: 0 10px; will put 10px of padding on sides, none on top and bottom

  38. Border Values • Like margins, borders can be done with same value for all 4 sides, or just for specific sides • Unlike margins, borders have more variables: • Size (e.g. – 2px) • Style (e.g. – solid, inset, outset, dashed) • Color (e.g. – blue, #cccccc) • border: 2px solid #cccccc; will put a 2 pixel solid gray border around all sides • Border-left: 2px solid #cccccc; will put 2 pixel solid gray border on left border only

  39. Rework Padding and Margin • Remove lower margin from #nav • Remove top, right and bottom margin form #left • Remove all but right margin from #main • Remove top margin from #footer • Add 10px padding to #left and #main • Add 3px left border to #main

  40. Result

  41. Lists, Links and Navbars

  42. Lists and Links • Good ideas to make navigation bars or columns HTML lists • They are easier to manipulate that way • More “transparent” HTML: since it is literally a “list” of links, let the end user know that by making it an HTML list

  43. Html Lists • Begin list with <ol> or <ul> • <ol> - ordered list – numbered or lettered (used less often) • <ul> - bullet pointed (they can be removed, or replaced with an image) • End with </ol> or </ul> • Each list item is enclosed with <li> and </li> • Within the list tags, you need anchor tags for the link itself

  44. Sample Html List Code Opening unordered list tag • Notice the tags are nested together, opening in this order: <ul>,<li>,<a> • Closing in reverse order: </a>, </li>, </ul> <ul> <li><a href=“http://www.link1.com/”>link 1</a></li> <li><a href=“http://www.link2.com/”>link 2</a></li> <li><a href=‘http://www.link3.com/”>link 3</a></li> <li><a href=“http://www.link4.com/”>link 4</a></li> </ul> Closing unordered list tag Opening list item tag Opening anchor tag and link Link text Closing anchor tag Closing list item tag

  45. Creating the List • Cut the navbar text form the top horizontal bar, and paste it between the “#left” div tags • Add a couple more links • Add anchor tags, list item tags, unordered list tags <ul> <li><a href=“#”>Home</a></li> <li><a href=“#”>Programs </a></li> <li><a href=“#”>Registration </a></li> <li><a href=“#”>About Us </a></li> <li><a href=“#”>Contact Us </a></li> </ul>

  46. Zeroing out Margins and Padding • IE automatically gives list elements a margin, Firefox automatically gives them padding • Set both to 0 in the CSS for your <ul> sets all browsers to the same value of 0 so you can set those values on your own

  47. List style types • Default is round bullet (disc) • Other values for list-style-type • None, circle, disc, square • List-style-image: url(your_image.gif); will allow you to use your own image for bullet • For ordered lists there are many more options: upper-roman, lower-roman, upper-alpha, lower-alpha, even hebrew and armenian • List-style-position: inside; will put the bullets inside the whatever container encloses it in the code

  48. New Css Rule • If you specify a CSS div ID, followed by an HTML element, it will only effect that HTML element within that specific div • Why? Your manipulation of one list with CSS won’t affect other lists • With all that in mind…. #left ul { list-style-type: none; Margin: 0; Padding: 0; }

  49. Manipulating list Text, Spacing and Borders #left ul li { font-size: .8em; line-height: 1.5em; border-bottom: 1px solid #ffffff; width: 170px; } • This affects only list items within the #left div • Lowers font size to 80% of default • Raises height between lines by 150% • Gives each list item a bottom 1 pixel solid white border • Sets the width of that border at 170 pixels

  50. Adding Link Behaviors • Set the initial state: black, no underline #left a:link, a:visited { color: #000000; text-decoration: none; } • Set the rollover state: white, underline, green background color #left a:hover { color: #ffffff; text-decoration: underline; background-color: #75a375; }

More Related