Webpage layout: Difference between revisions

Webpage layout (view source)

Revision as of 06:41, 23 April 2015

1,024 bytes added , 06:41, 23 April 2015

update

Sfws

5,838

edits

@@ Line 291: / Line 291: @@
 =And finally=
-So there we have it, <nowiki><div></nowiki> in a nutshell.  You will learn to love Divs as they give you excellent control, and you will use them everywhere.  My basic shell for a webpage often starts like this...
+So there we have it, <nowiki><div>, <section>, <article> etc.</nowiki> in a nutshell.  You will learn to love HTML 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. A basic shell for a webpage often starts like this...
+[[file:Divlayout6.png|200px|left]]
 <pre><body>
-<div id=”container”>
+<article id=”container”>
-	<div id=”header”>
+        <h1> some text </h1>
-	</div>
+	<header>
+         <h2> some text </h2>
+           <p> some text </p>
+	</header>
-	<div id=”menu”>
+	<nav id=”menu”>
-	</div>
+	</nav>
-	<div id=”content”>
+	<main id=”content”>
-	</div>
+          <section>
+          <h2> some text </h2>
+            other HTML
+          <section>
+          <section>
+          <h2> some text </h2>
+            other HTML
+          <section>
+	</main>
-	<div id=”footer”>
+	<footer>
-	</div>
+	</footer>
-</div></pre>
+</article></pre>
-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:
+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'.
+= The next article to read …… =
-[[file:Divlayout6.png|200px]]
+Learn how to use a PHP script to generate HTML web pages. See [[PHP|PHP Hypertext Preprocessor]].
+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]]