Lecture3
Upcoming SlideShare
Loading in...5
×
 

Lecture3

on

  • 435 views

 

Statistics

Views

Total Views
435
Views on SlideShare
435
Embed Views
0

Actions

Likes
0
Downloads
10
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Lecture3 Lecture3 Presentation Transcript

  • Introduction to HTML and CSS Lecture 3
  • Goals CSS ID CSS Border-box Model HTML: Tables Tables Forms Navigation Bars Finish the Web Page
  • CSS IDs Used for single unique elements Use the ID attribute of an HTML element to specify it’s ID Name the selector by preceding it with a # symbol
  • CSS Box Model THANKS W3SCHOOLS.COM !!
  • CSS Box Model Cont... Margin: The area around the outside of the border Has nothing to do with background color Border: The border that goes around the padding and the content Padding: The area around the inside of the border. This area separates the border and content. This is affected by the background color Content: The content area
  • Box Model Notes When you define the width and height of an element you are specifying the size of its content area All HTML elements can be considered as boxes The box model allows us to stylistically space elements in relation to each other
  • HTML Tables Used to display tabular data (ONLY!) Table based layout are in the past people... Tables are divided into rows and each row is divided into cells
  • HTML Tables Cont... <th>: table header wrapped by <tr> tag These will appear bold <tr>: table row wraps <th> and <td> tags <td>: Table data is wrapped by <tr> tag A data cell
  • HTML Tables Cont... <table border="1"> <tr> <td><th>Heading 1</th></td> <td><th>Heading 2</ht></td> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
  • HTML Forms Used to pass data to a server Common elements found in forms Text fields Checkbox Radio-buttons Selection Boxes Text Areas
  • HTML Forms Example
  • Navigation Bars Unordered Lists are the standard html structure used when building a navigation bar Give the <li> a width and float it left
  • Navigation Example
  • Finish the Web Page
  • Helpful links http://www.w3schools.com/html/html_forms.asp http://www.w3schools.com/html/html_tables.asp http://www.w3schools.com/css/css_id_class.asp http://www.w3schools.com/css/css_navbar.asp