• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Pres

on

  • 281 views

 

Statistics

Views

Total Views
281
Views on SlideShare
281
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

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
  • http://berkeleydecal.com/demo/simple.html
  • http://berkeleydecal.com/demo/simple.html

Pres Pres Presentation Transcript

  • Building and Marketing Websites
  • Box Model
    Every element in a document, both block-level and inline, generates a rectangular element box
  • Block ElementsvsInline Elements
  • Block Elements
    Paragrahs <p> … </p>
    Headings <h1> … </h2>
    Lists <ol> … </ol>
    Block-level element begins on a new line, and some space is also usually added above and below the entire element by default.
  • Inline Elements
    <em> … </em>
    <strong> … </strong>
    <imgsrc=“test” />
    Go with the flow
  • Block vs Inline
    Block elements are the major building blocks of your Web page
    Inline elements for small pieces of content
  • Class Identifier
    Used to classify elements into a conceptual group.
  • <html>
    <head>
    <title>Simple Website</title>
    </head>
    <body>
    <h1>Welcome</h1>
    <p class=“green”>This is a demonstration.</p>
    <p>Business as usual</p>
    </body>
    </html>
  • The CSS Rule
    Select <p> elements that belong to a certain class.
    Make them green.
    p.green {
    color: green;
    }
  • If you want all elements that are in the green class to have a style, then you can just write your rule like this:
    .green {
    color: green;
    }
  • Id Identifier
    Used to identify a unique element in the document.
  • <html>
    <head>
    <title>Simple Website</title>
    </head>
    <body>
    <h1>Welcome</h1>
    <p id=“startline”>This is a demonstration.</p>
    <p>Business as usual</p>
    </body>
    </html>
  • Id Identifier
    Giving an element an id is similar to adding an element to a class.
    Differences:
    attribute is called “id”, not “class”,
    an element can’t have multiple ids
    can nothave more than one element on a page with the same id.
  • The CSS Rule
    #start {
    color: green;
    }
  • Generic Elements
  • Generic block-level element
    <div> … </div>
    Generic inline element
    <span> … </span>
  • Generic Elements
    Noinherent presentation qualities of their own
    You can use style sheets to format the content however you like.
  • div element
    Short for “division”
    A container around a logical grouping of elements on the page
    Used for structure
  • span element
    Same benefits as the div element
    Used for inline elements that do not introduce line breaks