Date post: | 18-Jan-2016 |
Category: |
Documents |
Upload: | mildred-douglas |
View: | 217 times |
Download: | 0 times |
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev1
Internet Technology(week 6)
Recap: Validating HTML Page Layout
Internet TechnologyDr Jing LU
October2013 2
<!DOCTYPE html>
<html
lang="en">
1. Define a DOCTYPEUse the following two lines at the start of each html page:
Recap: Validating HTML
2. Nest tags properly
3. Close HTML tags
4. Write code in lower case
5. Add image descriptions
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev3
Recall: HTML Lists
http://w3schools.com/css/css_navbar.asp
• Navigation Bar = List of Links
• Ordered Lists <ol> … </ol>• Unordered Lists <ul> … </ul>• Element for each <li>Item Content</li>
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev4
Recall: Relative URLs Example
./
details
index.html
contact.html
<a href="details/contact.html">Contact us</a>
<a href="../index.html">Home</a>
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev5
<div style="text-align:center"><p> …</p><table border="1"> …</table>
</div>
Recall: <div> Tag
• Defines a division or a section in an HTML document
• Used to group elements to format them with styles
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev6
Internet Technology(week 6)
Recap: Validating HTML Page Layout
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev7
Recall: The Box Model (week 4)
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev8
Recall: position Property
static – elements are laid out in the normal flow (default)
relative – element is moved relative to its “normal” place
absolute – element is positioned with respect to the first positioned (non-static) element that contains it
fixed – element is positioned relative to browser window and remains exactly where it is when the page is scrolled
Further examples from w3schools …
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev9
Positioning Scheme
• Normal flow− block elements begin new block and inline elements laid out
in line within their containing block element− for elements with a static or relative position property
• Absolute position− elements having a position property value of absolute or
fixed are absolutely positioned
• Floated− element is shifted to the left or right within its current line
until reaches the edge of its containing block
More on “float” property from w3schools …
Internet TechnologyDr Jing LU
October2013 10
HTML5 Layout Elements
• <header>: defines a header for a document or a section
• <nav> - defines a container for navigation links
• <section> - defines a section in a document
• <article> - defines an independent self-contained article
• <aside> - defines content aside from the content (like a sidebar)
• <footer>: defines a footer for a document or a section
/ww
w.w
3sc
hoo
ls.c
om
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev11
Floated Multi-column Layout
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev12
Step 1. Start with the basic page structure
HTML CODE<body> <header> <h1>Header</h1> </header> <nav> <p> This is your left navigation … </p> </nav> <section> <h2>Subheading</h2> <p> This is the content part … </p> </section> <footer> <p> Footer </p> </footer></body>
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev13
Step 2.1 Styling the Container
CSS CODEbody{ margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray;}
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev14
Step 2.2 Styling the Top Banner
CSS CODEheader{ padding: .5em; background-color: #ddd; border-bottom: 1px solid gray;}
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev15
Step 2.3 Styling the Left nav
CSS CODEnav{ float: left; width: 160px; margin: 0px; padding: 1em;}
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev16
Step 2.4 Styling the Content
CSS CODEsection{ margin-left: 200px; border-left: 1px solid gray; padding: 1em;}
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev17
Step 2.5 Styling the Footer
CSS CODEfooter{ clear: both; margin: 0px; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev18
<body> <header> <h1>Header</h1> </header> <nav> <p>Links… </p> </nav> <section> <h2>Subheading</h2> <p>Content… </p> </section> <footer> <p> Footer </p> </footer></body>
HTML
<head><style type="text/css">
body {…}header {…}nav {…}section {…}footer {…}
</style></head>
CSS
Floated Multi-column Layout: Summary
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev19
Other Page Layouts
• Fluid (or Liquid) Layouts
• Elastic Layout
− specify the width using ems
Further example from w3C …
− specify the width using percentages
− adjust to the user’s setup
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev20
Task 1: A New Web PageYou should have completed an essay that describes and discusses the “Background and Future of the World Wide Web”.
Create a web page based on this, adding page layout (using layout tags & external CSS) in the format of two or three columns, including:
• Top Banner• Left Navigation Bar• Content• Footer
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev21
Task 2: OptionalChange your page to use a liquid or an elastic
layout.
All pages: Validate HTMLContinue to validate all the web pages you have
created to make sure they meet HTML requirements.
Internet TechnologyDr Jing LU
Updated 2014-15 Dr Violet Snell / Dr Kalin Penev22
References Three Ways to Insert (use) CSS http://www.w3schools.com/css/css_howto.asp
CSS Validation Service http://www.css-validator.org/
CSS Selector Reference http://www.w3schools.com/cssref/css_selectors.asp
CSS Pseudo-elements http://www.w3schools.com/css/css_pseudo_elements.asp
CSS Box Model http://w3schools.com/css/css_boxmodel.asp
CSS margin Property http://www.w3schools.com/cssref/pr_margin.asp
CSS float Property http://www.w3schools.com/cssref/pr_class_float.asp
CSS Positioning http://w3schools.com/css/css_positioning.asp
HTML5 Semantic Elements http://
www.w3schools.com/html/html5_semantic_elements.asp