• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Week 3&4: HTML and CSS Coding
 

Week 3&4: HTML and CSS Coding

on

  • 943 views

 

Statistics

Views

Total Views
943
Views on SlideShare
943
Embed Views
0

Actions

Likes
0
Downloads
27
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

    Week 3&4: HTML and CSS Coding Week 3&4: HTML and CSS Coding Presentation Transcript

    • HTML & CSS
      February 21, 2010
    • Stands for… ?
      Made up of:
      Tags
      <imgsrc>, <a href>, <b>, <em>, etc
      Angle brackets < >
      Can load scripts such as Javascript & CSS
      HTML
    • More about HTML
      All HTML tags should be opened AND closed. Otherwise, bad things happen.
      <a>link</a> <b>font to be bolded</b>
      A few exceptions – like <p> and <br>
      Tags can have attributes, which use quotation marks
      <font size=“3”>Font to be styled</font>
      Best Practice: HTML should be a standalone, presentation-free document.
    • A Basic HTML Page Looks Like:
      <html>
      <head>
      <title> favorites / bookmark title goes here </title>
      </head>
      <body>
      <h1> My first page </h1>
      This is my first web page and I can say anything I want in here.
      </body>
      </html>
    • Let’s Review
      Because HTML can be tricky at first.
      • Page Titles
      • You have to code in spacing
      • <h1> through <h6>
      • Anchor tags
      • Absolute or Relative
      <a href=“http://htmldog.com”>link</a>
      <a href=“flower.jpg”>link to pic on your web server</a>
    • CSS
    • CSS stands for Cascading Style Sheets
      Defines how to display HTML elements
      CSS was added to HTML 4.0 to address the issue of maintenance
      CSS = Cascading Style Sheets
    • CSS SYNTAX
      p {color:red;text-align:center;}
      Each Declaration consists of a Property and a Value.
      The Selector is the HTML element to be styled.
    • CSS Formatting
      Let’s TRY IT OUT
      And here too.
      COMMENTS
      • Can explain your code
      • Comments are ignored by browsers
      p{text-align:center;/*Here’s the color and font type*/color:black;font-family:arial;}
      More readable:
      You can put one declaration on each line
      p{color:red;text-align:center;}
    • Three Ways to Insert CSS
      Best Practice: External Style Sheet.
      This is ideal when you’re applying styles to multiple pages on the same website.
    • CSS Method #1: External Style Sheet
      Let’s view a demo
      You can change the look of an entire website by changing one file.
      Each page must link to the style sheet by using a <link> tag inside the <head> section of the HTML document.
      Can be written in any text editor, and saved as a .css document.
    • <head>
      <title>Page Title Example</title>
      <style type="text/css">
      p {
      color: red;
      }
      </style>
      </head>
      CSS Method #2: Internal Style Sheet
      • Also called “embedded” styles
      • You define internal styles in the <head> section of an HTML page, by using the <style> tag.
      • Pro: Internal style sheets affect only the page they are on.
      • Con: They increase page load times (external style sheets are cached by browsers).
    • CSS Method #3: Inline Styles
      Placed inside HTML tags. Only affect the exact tag they are applied to.
      Con: The extra characters and text can affect how your page is viewed by a search engine bot.
      Con: Inline styles make your pages bigger in file size.
      Con: Just doesn’t make sense.
      <p style="color: red">text</p>
      This CSS code uses the style attribute to make the following paragraph red.
    • CSS id and class Selectors
      id Selector
      Specifies a style for a single element.
      Is defined with a#
      #para1 {text-align:center; color:red;}
      .center {text-align:center;}
      class Selector
      The class selector is used on several elements.
      Defined with a .