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

Pres

on

  • 336 views

 

Statistics

Views

Total Views
336
Views on SlideShare
336
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

    Pres Pres Presentation Transcript

    • Building and Marketing Websites
    • <html> <head> <title>Simple Website</title> </head> Web Server <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> HTML
    • HTML Example <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>
    • “Nesting” • Putting one element inside another
    • Nesting Relationship <html> <head> <html> <title>Simple Website</title> </head> <body> <head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> <title> <h1> </html> <p>
    • <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> • The Head provides information about the document
    • <html> <head> <title>Simple Website</title> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html> • Body contains everything that we want to show up in the browser window.
    • Tags We’ve Seen • <h1> … </h1> • <h2> … </h2> • <p> … <p> • <ol> … </ol> • <ul> … <ul>
    • Image Tag <html> <head> <title>Simple Website</title> </head> <body> <h1>Peanut Butter</h1> <img src=“peanut-butter.jpg” /> </body> </html>
    • How Browser Displays Images 1. Loads HTML 2. Looks through HTML for image tags 3. Asks Server for each image it finds in HTML peanut-butter.jpg HTML
    • Empty Elements • Don’t have text content • Don’t have a closing tag • They end with “ /> ” – This is called terminating (or closing) the element <img src=“peanut-butter.jpg” /> <h1 />
    • Element Attributes • Instructions that clarify or modify an element. • src (short for source) is example of attribute • For img tags, src attribute is required <img src=“peanut-butter.jpg” alt=“Google” />
    • Element Attributes <element attribute-name="value">Content</element> <element attribute-name="value" /> • May be several attributes applied to an element, separated by spaces <img src=“peanut-butter.jpg” alt=“Sandwich” />
    • Summary <img src=“peanut-butter.jpg” /> • Tells the browser to get an graphic file from Server and insert it into page • Empty Elements • Element Attributes
    • Tags for adding emphasis • <em> … </em> – Emphasized text • <strong> … </strong> – Strongly emphasized text • Used only for text!
    • Block Elements vs Inline 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> • <img src=“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
    • CSS
    • • HTML describes the content in a Web page • CSS describes how you want that content to look
    • HTML for Structure CSS for Presentation
    • CSS • www.csszengarden.com • Separate language with its own syntax
    • Style element <html> <head> <title>Simple Website</title> <style type=“text/css”> </style> </head> <body> <h1>Welcome</h1> <p>This is a demonstration.</p> </body> </html>