Iml140 cs sbasics_week5
•Descargar como PPT, PDF•
0 recomendaciones•1,761 vistas
The document provides instructions for creating a basic webpage layout using HTML div tags and CSS styling. It involves: 1) Creating a basic HTML page structure using div tags with IDs to segment the page into sections like header, navigation, content, etc. 2) Linking an external CSS stylesheet to style each div tagged section with properties like background color, width, height. 3) Styling each div tagged section within the CSS stylesheet to position and format the page sections.
Recomendados
Más contenido relacionado
Similar a Iml140 cs sbasics_week5
Similar a Iml140 cs sbasics_week5 (20)
Más de Evan Hughes
Más de Evan Hughes (20)
Último
Último (20)
Iml140 cs sbasics_week5
- 1. 1) Create a basic stylesheet using HTML <div> tags and a CSS stylehseet
- 2. 2) create a basic HTML document using <div> tags and "id": (example) <div id="wrapper"> </div>
- 3. <div> tags serve as anchors for your Webpage. You can assign IDs to them to differentiate one div tag from another on your stylesheet (example) <div> content </div> (name the div by assigning an ID attribute) <div id=“content”> content </div>
- 4. <html> <head> <title> My Page </title> </head> <body> This is where <div> tags go </body> </html> 3) HTML Structure:
- 5. 4) Save as index.html
- 6. 5) Structure within <body> </body> tags (creating anchor points) : <div id="wrapper"> <div id="header"> </div><!--Header--> <div id="navigation"> </div><!--Navigation--> <div id="menu"> </div><!--Menu--> <div id="content"> </div><!--Content--> <div id="footer"> </div><!--Footer--> </div>
- 7. Let’s dissect the example <div id="header"> </div><!--Header--> So <div> </div> is the tag Id=“header” is attribute that modifies tag <!—Header--!> just notes and won’t appear on your site, but keeps you organized
- 8. 6) Create a document called: style.css
- 9. 7) Link your stylesheet to your .html document in the <head> </head> tags: <link rel="stylesheet" type="text/css" href="style.css />
- 10. 8) CSS structure: A) Reference the "class" attribute you created using # B) The define the characteristics #wrapper { background: #ffffff; margin: 60px auto; width: 900px; height: 1024px; }
- 11. *From this point forward check your work after each slide in Firefox to see what your styling of the <div> tags is doing to the document. You will begin to see structure and style emerge
- 12. 9) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #header { background: #838283; height: 200px; width: 900px; }
- 13. 10) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #navigation { background: #a2a2a2; width: 900px; height: 20px; }
- 14. 11) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #menu { background: #333333; float: left; width: 200px; height: 624px; }
- 15. 12) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #content { background: #d2d0d2; width: 900px; height: 624px; }
- 16. 13) CSS structure: A) Reference the "class" attribute you created using # B) The define the attributes #footer { background: #838283; height: 180px; width: 900px; }
- 17. 14) CSS structure: A) At the top of document define the <body> attributes: body { background: #f3f2f3; color: #ffffff; font family: Trebuchet MS, Arial, Times New Roman; font size: 12px; }
- 18. This will really only matter when you add text to the body body { background: #000000; color: #ffffff; font family: Trebuchet MS, Arial, Times New Roman; font size: 12px; }