internet technology dr jing lu updated 2014-15 dr violet snell / dr kalin penev 1 internet...

Internet TechnologyDr Jing LU

Updated 2014-15 Dr Violet Snell / Dr Kalin Penev1

Internet Technology(week 6)

Recap: Validating HTML Page Layout


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



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>





Recall: Relative URLs Example

./

details

index.html

contact.html

<a href="details/contact.html">Contact us</a>

<a href="../index.html">Home</a>



<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 Technology(week 6)

Recap: Validating HTML Page Layout



Recall: The Box Model (week 4)



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 …

http://w3schools.com/css/css_positioning.asp



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 …

http://www.w3schools.com/cssref/pr_class_float.asp


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



Floated Multi-column Layout



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>



Step 2.1 Styling the Container

CSS CODEbody{ margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray;}



Step 2.2 Styling the Top Banner

CSS CODEheader{ padding: .5em; background-color: #ddd; border-bottom: 1px solid gray;}



Step 2.3 Styling the Left nav

CSS CODEnav{ float: left; width: 160px; margin: 0px; padding: 1em;}



Step 2.4 Styling the Content

CSS CODEsection{ margin-left: 200px; border-left: 1px solid gray; padding: 1em;}



Step 2.5 Styling the Footer

CSS CODEfooter{ clear: both; margin: 0px; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray;}



<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



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

http://www.w3.org/TR/WCAG20-TECHS/G146.html




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



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.



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

http://www.w3schools.com/css/css_howto.asp



http://www.css-validator.org/

http://www.css-validator.org/

http://www.w3schools.com/cssref/css_selectors.asp

http://www.w3schools.com/cssref/css_selectors.asp

http://www.w3schools.com/css/css_pseudo_elements.asp

http://www.w3schools.com/css/css_pseudo_elements.asp

http://w3schools.com/css/css_boxmodel.asp

http://w3schools.com/css/css_boxmodel.asp

http://www.w3schools.com/cssref/pr_margin.asp

http://www.w3schools.com/cssref/pr_margin.asp





http://www.w3schools.com/html/html5_semantic_elements.asp



internet technology dr jing lu updated 2014-15 dr violet snell / dr kalin penev 1 internet...

Documents