30
| Date post: | 12-Jan-2016 |
| Category: |
Documents |
| Upload: | melanie-marshall |
| View: | 248 times |
| Download: | 2 times |
HTML Layout• Frame• Table• <div> – Block• HTML5 layout elements
Example
HTML5 Layout
HTML Layout – using Frame<!DOCTYPE html><html><head><title>HTML Frames</title></head><frameset rows="10%,80%,10%"> <frame name="top" src="top_frame.html" /> <frame name="main" src="main_frame.html" /> <frame name="bottom" src="bottom_frame.html" /> <noframes> <body> Your browser does not support frames. </body> </noframes></frameset></html>
HTML Layout – using Frame
<!DOCTYPE html><html><head><title>HTML Frames</title></head><frameset cols="25%,50%,25%"> <frame name="top" src="top_frame.html" /> <frame name="main" src="main_frame.html" /> <frame name="bottom" src="bottom_frame.html" /> <noframes> <body> Your browser does not support frames. </body> </noframes></frameset></html>
HTML5 doesn’t support Frame anymore!!!
iFrame – inline Frame<!DOCTYPE html><html><body>
<iframe src="demo_iframe.html" width="200" height="200"></iframe>
</body></html>
iFrame – inline CSS
<!– no border --><iframe src="demo_iframe.htm" style="border:none"></iframe>
<!– dotted style and size = 5px <iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>
iFrame – Try this and see what happen
<!DOCTYPE html><html><body>
<iframe src="http://www.w3schools.com" style="border:medium solid black"></iframe>
</body></html>
What do you see any differences between them?
<iframe src="me.html" style="overflow: scroll;">This is an iframe.</iframe>
<iframe src=”me.html" scrolling="no">This is an iframe.</iframe>
HTML – Table layout
HTML Layout – using Tables<!DOCTYPE html><html><head><title>HTML Layout using Tables</title></head><body><table width="100%" border="0"> <tr> <td colspan="2" bgcolor="#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign="top"> <td bgcolor="#aaa" width="50"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#eee" width="100" height="200"> Technical and Managerial Tutorials </td> </tr> <tr> <td colspan="2" bgcolor="#b5dcb3"> <center> Copyright © 2007 Tutorialspoint.com </center> </td> </tr></table></body></html>
HTML Layout – using Tables<!DOCTYPE html><html><head><title>Three Column HTML Layout</title></head><body><table width="100%" border="0"> <tr valign="top"> <td bgcolor="#aaa" width="20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#b5dcb3" height="200" width="60%"> Technical and Managerial Tutorials </td> <td bgcolor="#aaa" width="20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr><table></body></html>
HTML Layout using <div> <!DOCTYPE html><html><head><title>HTML Layouts using DIV, SPAN</title></head><body><div style="width:100%"> <div style="background-color:#b5dcb3; width:100%"> <h1>This is Web Page Main title</h1> </div> <div style="background-color:#aaa; height:200px;width:100px;float:left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#eee; height:200px;width:350px;float:left;"> <p>Technical and Managerial Tutorials</p> </div> <div style="background-color:#aaa; height:200px;width:100px;float:right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color:#b5dcb3;clear:both"> <center> Copyright © 2007 Tutorialspoint.com </center> </div></div></body></html>
HTML using <div>#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; }
<body>
<div id="header"><h1>City Gallery</h1></div>
<div id="nav">London<br>Paris<br>Tokyo<br></div>
<div id="section"><h2>London</h2><p>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.</p><p>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.</p></div>
<div id="footer">Copyright W3Schools.com�</div></body>
HTML
CSS
HTML5 Layout
HTML5 Layoutheader { 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; }
<body>
<header><h1>City Gallery</h1></header>
<nav>London<br>Paris<br>Tokyo<br></nav>
<section><h1>London</h1><p>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.</p><p>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.</p></section>
<footer>Copyright W3Schools.com�</footer>
HTML
CSS
Semantic Elements• A semantic element clearly describes its meaning to both the browser and
the developer.• Examples of non-semantic elements: <div> and <span> - Tells nothing
about its content.• Examples of semantic elements: <form>, <table>, and <img> - Clearly
defines its content.
New Semantic Elements in HTML5• <article>• <aside>• <details>• <figcaption>• <figure>• <footer>• <header>• <main>• <mark>• <nav>• <section>• <summary>• <time>
<section>• According to W3C's HTML5 documentation: "A section is a thematic
grouping of content, typically with a heading."
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p></section>
<article>• 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 <article> element can be used:• Forum post• Blog post• Newspaper article
<article> <h1>What Does WWF Do?</h1> <p>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.</p></article>
<footer>• A <footer> 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.
<footer> <p>Posted by: Hege Refsnes</p> <p>Contact information: <a href="mailto:[email protected]"> [email protected]</a>.</p></footer>
<nav>• The <nav> element defines a set of navigation links.• The <nav> element is intended for large blocks of navigation links.
However, not all links in a document should be inside a <nav> element!
<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a></nav>
<aside>• The <aside> 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.
<p>My family and I visited The Epcot center this summer.</p>
<aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p></aside>
Example• Please see this code Sample
Layout trends 20151. Split screens
– http://www.deweyspizza.com– http://tympanus.net/Blueprints/SplitLayout/index.html– http://www.pixelatingbits.com/latest-web-trend-22-fantastic-vertically-split-layout-website-designs-for-insp
iration/
2. Block grids- http://www.sitepoint.com/web-layout-ideas-2015/
3. No chrome– http://www.webdesignerdepot.com
4. Single Screen– http://hatchcollective.co.uk
5. Big backgrounds/parallax- http://mintdesigncompany.com/
http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/
Resources• w3schools.com• www.tutorialspoint.com
Practical• Please see practical #4 on my website
![2019 html5 [Mode de compatibilit ]) - e-monsitesalimaouadfel.e-monsite.com/medias/files/2019-html5-1-.pdf · HTML5. HTML 5 –Introduction • HTML: est l’abréviation de HyperText](https://static.documents.pub/doc/80x56/5f482b136b115a12a627e597/2019-html5-mode-de-compatibilit-e-monsitesalimaouadfele-html5-html-5-aintroduction.jpg)
