• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week 3 html_css_basics
 

Week 3 html_css_basics

on

  • 611 views

Week Three, Introduction to CSS stylesheets

Week Three, Introduction to CSS stylesheets

Statistics

Views

Total Views
611
Views on SlideShare
610
Embed Views
1

Actions

Likes
1
Downloads
13
Comments
0

1 Embed 1

http://xwiki.usc.edu 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Week 3 html_css_basics Week 3 html_css_basics Presentation Transcript

    • 1) Review your "Web" folder contents:
        • index.html
        • .jpg, .gif, or .png
        • at lest one more page.html
        • at least one more image
        • check folder structure
    • 2) Change some attributes of other pages
        • add justify attributes to <p> tag
        • try this by adding a <div> </div tag
    • 3) Get embed code for VuVox presentation
    • 4) Paste embed code into <body> </body> tags
    • 5) Now try it between the <head> </head> tags
    • 6) Create a link: <a href=&quot;http://www...&quot;>text</a>
    • 7) Create an email link:   <a href=&quot;mailto:ehughes@usc.edu&quot;> contact me </a>
    • 8) Create an &quot;unordered&quot; list in header: <ul> </ul>
    • 9) Link list contents to other pages:   <ul> <a href=&quot;about.html&quot;> about </a> <a href=&quot;media.html&quot;> media </a> </ul>
    • 10) Enter CSS & next phase in the evolution of Web development:  
    • 10) create a basic HTML document using <div> tags and &quot;id&quot;:   <div id=&quot;wrapper&quot;> </div>
    • 11) Structure:     <html>     <title>      </title>       <head>        </head>       <body>             <div>              </div>       </body> </html>
    • 11) Structure within <body> </body> tags :    <div id=&quot;wrapper&quot;>          <div id=&quot;header&quot;>          </div><!--Header-->            <div id=&quot;navigation&quot;>               </div><!--Navigation-->     <div id=&quot;menu&quot;>       </div><!--Menu-->        <div id=&quot;content&quot;>          </div><!--Content-->     <div id=&quot;footer&quot;>        </div><!--Footer-->   </div>
    • 11) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the characteristics                     #wrapper {                   background: #ffffff;                margin: 60px auto;                width: 900px;                height: 1024px;           } 
    • 11) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #header {                   background: #838283;                height: 200px;                width: 900px;                         } 
    • 11) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #navigation {                   background: #a2a2a2;                width: 900px;                height: 20px;                         } 
    • 11) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #menu {                   background: #333333;                float: left;                width: 200px;                height: 624px;                         } 
    • 11) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #content {                   background: #d2d0d2;                width: 900px;                height: 624px;                         } 
    • 11) CSS structure:    A) Reference the &quot;class&quot; attribute you created using # B) The define the attributes                     #footer {                   background: #838283;                height: 180px;                width: 900px;                         } 
    • 11) 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;         } 
    • 12) Name your stylesheet:   style.css
    • 13) Link your style sheet to your .html documents in the <head> </head> tags:   <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css />