Today:

  • Quick review of the first half semester
  • Revisit the background Image
  • Styling the Text Content
  • Styling HTML Exercises with CSS
  • Converting Design Layout into CSS
HTML tags, elements, attributes

Basic HTML skeleton
<!DOCTYPE html>
<html>
<head>
<title>Sample HTML</title>
</head>
<body>
</body>
<html>
Tags can be nested inside other tags.
The <head> and <body> tags are nested inside the <html> tag.
HTML tags, elements, attributes

                               <h1> to <h6> Defines HTML headings

                               <p> Defines a paragraph

                               <b> Bold Text

                               <i> ItalicText

                               <a> Defines a hyperlink

                               <ul> Defines an unordered list

                               <ol> Defines an ordered list

                               <li> Defines a list item

                               <audio> tag
                               <video> tag

Semantic HTML structure and tags

Providing Context to the Content
Semantic HTML structure and tags

LIST of Semantic HTML LAYOUT ElEMENTS

  • article
  • aside
  • details
  • figcaption
  • figure
  • footer
  • header
  • nav
  • section
HTML forms

HTML <form> tag
A container for a collection of <input> tags
                 Required Attributes:
  • action = "URL to server script" (php, asp, perl, cgi)
  • method = "get" or "post" (get server response)


HTML form <input> elements

                 Required Attributes:
  • type = "text", "checkbox", "radio button"
  • name = variable id name for server usage
  • value = "default" value if there is no input
CSS styling selectors, property : value

<!DOCTYPE html>
<html>
               <head>
                          <link rel="stylesheet"  href="style.css">
               </head>


Selector { Property:  Value ; }
       Examples:
body { background-color: gray;} 
p { color: blue;} 
h3 { font-size: 12pt;}

CSS box model :  border, padding, margin


  • Every element in a html document is considered to be a box
  • Margins are always transparent
  • Borders come in various styles
  • Background settings apply to the the area of the padding and content areas


CSS positioning

  • position  - (absolute or relative)
  •  float - (left, right or none)      


Revisiting the background Image

Review Exercise

Create Semantic HTMLmarkup page
and insert background images

body {background-image: url(logo.gif); }




Styling Text Content : Fonts


Styling Text Content : Text


Styling Text Content : Hyperlinks (pseudo-class)

         Example:
a:link {	color: blue;}a:visited {		color: purple;}a:active {		background-color: yellow;}a:hover {		color:red;}

Styling Text Content : Multiple Columns


         Example:
div { 
      -moz-column-count:3;    /* Firefox */
      -webkit-column-count:3; /* Safari and Chrome */
      -ms-column-count:3;     /* IE */
      column-count:3;
}
         Note: Some CSS properties require the use of prefixes for items not yet official CSS spec


Styling HTML Content Exercises


  • Exercise 1:  Styling HTML text
  • Exercise 2:  Converting a layout into CSS
  • Exercise 3:  Creating a horizontal Nav bar


http://goo.gl/VVHkmx


    Styling HTML Content Exercises


    • Exercise 4:  Style a 2 column layout
    • Exercise 5:  Style an article page layout
    • Exercise 6:  Modify a blog page layout


    http://goo.gl/unAEdk




      Converting Site Design Layout into CSS

      1. Arrange Your HTML Page with Semantic HTML elements Classes/ID's
      2. Use CSS Float and Alignment to layout the Containers elements
      3. Position Content using the CSS Box Model
      4. Finish Styling the Content

      Converting a Site Design Layout into CSS

      Walk-through a couple of example layouts

      • Layout 1: Journal Entry
      • Layout 2: Company Website


      http://goo.gl/xx3xtP

      http://goo.gl/wygo9d

        Made with Slides.com