Download presentation
Presentation is loading. Please wait.
Published byMelanie Marshall Modified over 9 years ago
1
HTML and CSS- Layout
2
HTML Layout Frame Table – Block HTML5 layout elements
3
Example
4
HTML5 Layout
5
HTML Layout – using Frame HTML Frames Your browser does not support frames.
6
HTML Layout – using Frame HTML Frames Your browser does not support frames.
7
HTML5 doesn’t support Frame anymore!!!
8
iFrame – inline Frame
9
iFrame – inline CSS <!– dotted style and size = 5px
10
iFrame – Try this and see what happen
11
What do you see any differences between them? This is an iframe. This is an iframe.
12
HTML – Table layout
13
HTML Layout – using Tables HTML Layout using Tables This is Web Page Main title Main Menu HTML PHP PERL... Technical and Managerial Tutorials Copyright © 2007 Tutorialspoint.com
14
HTML Layout – using Tables Three Column HTML Layout Main Menu HTML PHP PERL... Technical and Managerial Tutorials Right Menu HTML PHP PERL...
15
HTML Layout using HTML Layouts using DIV, SPAN This is Web Page Main title Main Menu HTML PHP PERL... Technical and Managerial Tutorials Right Menu HTML PHP PERL... Copyright © 2007 Tutorialspoint.com
16
HTML using #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } City Gallery London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Copyright � W3Schools.com
17
HTML5 Layout
18
header { background-color:black; color:white; text-align:center; padding:5px; } nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } section { width:350px; float:left; padding:10px; } footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } City Gallery London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Copyright � W3Schools.com
19
Semantic Elements A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content. Examples of semantic elements:,, and - Clearly defines its content.
20
New Semantic Elements in HTML5
21
According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading." WWF The World Wide Fund for Nature (WWF) is....
22
An article should make sense on its own, and it should be possible to read it independently from the rest of the web site. Examples of where an element can be used: Forum post Blog post Newspaper article What Does WWF Do? WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.
23
A element should contain information about its containing element. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc. Posted by: Hege Refsnes Contact information: someone@example.com.
24
The element defines a set of navigation links. The element is intended for large blocks of navigation links. However, not all links in a document should be inside a element! HTML | CSS | JavaScript | jQuery
25
The element defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content. My family and I visited The Epcot center this summer. Epcot Center The Epcot Center is a theme park in Disney World, Florida.
26
Example Please see this code SampleSample
28
Layout trends 2015 1.Split screens – http://www.deweyspizza.comhttp://www.deweyspizza.com – http://tympanus.net/Blueprints/SplitLayout/index.html http://tympanus.net/Blueprints/SplitLayout/index.html – http://www.pixelatingbits.com/latest-web-trend-22-fantastic-vertically-split-layout-website-designs- for-inspiration/ http://www.pixelatingbits.com/latest-web-trend-22-fantastic-vertically-split-layout-website-designs- for-inspiration/ 2.Block grids -http://www.sitepoint.com/web-layout-ideas-2015/http://www.sitepoint.com/web-layout-ideas-2015/ 3.No chrome – http://www.webdesignerdepot.com http://www.webdesignerdepot.com 4.Single Screen – http://hatchcollective.co.uk http://hatchcollective.co.uk 5.Big backgrounds/parallax - http://mintdesigncompany.com/http://mintdesigncompany.com/ http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/
29
Resources w3schools.com www.tutorialspoint.com
30
Practical Please see practical #4 on my website
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.