Webpage layout: Difference between revisions

From Cumulus Wiki
Jump to navigationJump to search

Webpage layout (view source)

Revision as of 06:41, 23 April 2015

1,024 bytes added ,  23 April 2015
update
m (→‎Spans: correcting)
(update)
 
=And finally=
So there we have it, <nowiki><div>, <section>, <article> etc.</nowiki> in a nutshell. You will learn to love DivsHTML content grouping elements as they give you excellent control, and you will use them everywhere. Most designs have an overall 'container' to wrap everything up. Try to visualise the layout with boxes around it, you should be thinking something like that shown in the figure. MyA basic shell for a webpage often starts like this...
 
[[file:Divlayout6.png|200px|left]]▼
<pre><body>
<divarticle id=”container”>
<h1> some text </h1>
<div id=”header”>
</divheader>
<h2> some text </h2>
<p> some text </p>
</header>
 
<divnav id=”menu”>
</divnav>
 
<divmain id=”content”>
<section>
</div>▼
<h2> some text </h2>
other HTML
<section>
<section>
<h2> some text </h2>
other HTML
<section>
▲ </divmain>
 
<footer>
<div id=”footer”>
</divfooter>
</divarticle></pre>
 
To further develop the design, include '<aside> some HTML content </aside>' to add in information not directly related to the '<main> some HTML content </main>. Your [[Stylesheets]] could position this to the right hand side of the content in 'main' for viewing on a monitor, but below it for narrower media when you print or view on some other devices. Have a look at the HTML used on those web-sites you like, as most browsers offer 'view source'.
Notice I have an overall 'container' div to wrap everything up. Try to visualise the layout with boxes around it, you should be thinking something like this:
 
= The next article to read …… =
 
Learn how to use a PHP script to generate HTML web pages. See [[PHP|PHP Hypertext Preprocessor]].
▲[[file:Divlayout6.png|200px]]
 
Original article [[User:Daj|Daj]] 18:07, 13 February 2011 (UTC)▼
 
Updated to HTML5 standard [[User:Sfws|Sfws]] ([[User talk:Sfws|talk]]) 23:41, 22 April 2015 (PDT)
 
Happy 'Div' ing!
 
▲[[User:Daj|Daj]] 18:07, 13 February 2011 (UTC)
 
[[Category:WebTips]]
Sfws
5,838

edits

Retrieved from "https://www.cumuluswiki.org/a/Special:MobileDiff/3746"

Navigation menu