Webpage layout - Revision history

Sfws: /* The next article to read …… */

2020-05-23T09:37:01Z

The next article to read ……

← Older revision		Revision as of 09:37, 23 May 2020
Line 338:		Line 338:

	= The next article to read …… =		= The next article to read …… =
			Editing_content_of_a_webpage_using_either_HTML_or_Script. See [[Editing_content_of_a_webpage_using_either_HTML_or_Script]].

	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)		Original article [[User:Daj\|Daj]] 18:07, 13 February 2011 (UTC)

SaratogaWX: Text replacement - "cumuluswiki.wxforum.net" to "cumuluswiki.org"

2020-04-21T19:23:26Z

Text replacement - "cumuluswiki.wxforum.net" to "cumuluswiki.org"

← Older revision		Revision as of 19:23, 21 April 2020
Line 287:		Line 287:
	Here is the complete source code, with the style sheet written into the HTML. Normally the Stylesheet would be in it's own file, as per the discussion on the previous article		Here is the complete source code, with the style sheet written into the HTML. Normally the Stylesheet would be in it's own file, as per the discussion on the previous article

	https://cumuluswiki.~~wxforum.net~~/files/divlayout.txt		https://cumuluswiki.org/files/divlayout.txt

SaratogaWX: Text replacement - "http://wiki.sandaysoft.com/" to "https://cumuluswiki.wxforum.net/"

2018-11-02T14:55:46Z

Text replacement - "http://wiki.sandaysoft.com/" to "https://cumuluswiki.wxforum.net/"

← Older revision		Revision as of 14:55, 2 November 2018
Line 287:		Line 287:
	Here is the complete source code, with the style sheet written into the HTML. Normally the Stylesheet would be in it's own file, as per the discussion on the previous article		Here is the complete source code, with the style sheet written into the HTML. Normally the Stylesheet would be in it's own file, as per the discussion on the previous article

	~~http~~://~~wiki~~.~~sandaysoft~~.~~com~~/files/divlayout.txt		https://cumuluswiki.wxforum.net/files/divlayout.txt

Sfws: /* And finally */ now it does!

2015-04-23T07:01:04Z

And finally: now it does!

← Older revision		Revision as of 07:01, 23 April 2015
Line 335:		Line 335:
	<pre><main> some HTML content </main></pre>.		<pre><main> some HTML content </main></pre>.

	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'.		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 …… =		= The next article to read …… =

Sfws: /* And finally */ looks right at last!

2015-04-23T07:00:11Z

And finally: looks right at last!

← Older revision		Revision as of 07:00, 23 April 2015
Line 327:		Line 327:
	</article></pre>		</article></pre>

	To further develop the design, include:		To further develop the design, include

	'<aside> some HTML content </aside>'		<pre><aside> some HTML content </aside></pre>

	to add in information not directly related to the		to add in information not directly related to the

	'<main> some HTML content </main>.		<pre><main> some HTML content </main></pre>.

	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'.		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'.

Sfws: /* And finally */ tidy up look

2015-04-23T06:57:26Z

And finally: tidy up look

← Older revision		Revision as of 06:57, 23 April 2015
Line 327:		Line 327:
	</article></pre>		</article></pre>

			To further develop the design, include:
⚫	~~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'.

			'<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 …… =		= The next article to read …… =

Sfws: /* Aside, Section, Article, Header, Footer - the alternative HTML tags */ added 'main'

2015-04-23T06:54:39Z

Aside, Section, Article, Header, Footer - the alternative HTML tags: added 'main'

← Older revision		Revision as of 06:54, 23 April 2015
Line 202:		Line 202:

	[[file:Divlayout3.png]]		[[file:Divlayout3.png]]
	=Aside, Section, Article, Header, Footer - the alternative HTML tags=		=Aside, Section, Article, Header, Main, Footer - the alternative HTML tags=
	In HTML5, where you could use Div before, you can now use header, footer, aside, article or section. These were introduced because they are more meaningful terms.		In HTML5, where you could use Div before, you can now use header, footer, aside, main, article or section. These were introduced because they are more meaningful terms.


	header - this is used to group elements at the start of an article, aside, or section;
	~~footer~~ - this is used to group elements at the ~~end~~ of an article, aside, or section;		<header> - this is used to group elements at the start of an article, aside, or section;

⚫	aside - this is used to group elements that are not an essential part of the content and typically appear to one side;
	~~article~~ - this is used to group elements ~~that~~ ~~have~~ a ~~logical~~ ~~connection~~ ~~with~~ ~~each other~~, ~~but are not essential to be related to the elements outside the article~~ ~~grouping~~;		<footer> - this is used to group elements at the end of an article, aside, or section;

⚫	section - ~~Like~~ div ~~this~~ is a way of grouping elements, ~~but~~ it is often used when the grouped elements do have a connection with those outside the section grouping.
		⚫	<aside> - this is used to group elements that are not an essential part of the content and typically appear to one side;

			<article> - this is used to group elements that have a logical connection with each other, but are not essential to be related to the elements outside the article grouping, you can have several ''article'' elements and can nest them like ''div'';

		⚫	<section> - this is very like 'div', it is a way of grouping elements, it can appear multiple times and be nested; it is often used when the grouped elements do have a connection with those outside the section grouping.

			<main> - this is a special grouping tag, it can only appear once, it should not include any navigation links, header nor footer information; it is used to denote the part of a web-page that really matters, the bit you might choose to read first or have displayed when you first visit the page.

	=Spans=		=Spans=

Sfws: update

2015-04-23T06:41:11Z

update

← Older revision		Revision as of 06:41, 23 April 2015
Line 291:		Line 291:

	=And finally=		=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>		<pre><body>
	<~~div~~ id=”container”>		<article id=”container”>
			<h1> some text </h1>
	<div id=”header”>
	<~~/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”>
			<section>
⚫	</~~div~~>
			<h2> some text </h2>
			other HTML
			<section>
			<section>
			<h2> some text </h2>
			other HTML
			<section>
		⚫	</main>

			<footer>
	<div id=”footer”>
	</~~div~~>		</footer>
	</~~div~~></pre>		</article></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]]		[[Category:WebTips]]

Sfws: /* Spans */ correcting

2013-04-28T14:24:54Z

Spans: correcting

← Older revision		Revision as of 14:24, 28 April 2013
Line 213:		Line 213:
	=Spans=		=Spans=

	Spans are used far less frequently than Divs, but worth a few moments ….		Spans are used far less frequently than Divs, because little else than text can be embedded within a span element, but worth a few moments ….

	A span allows you to reference a ~~section~~ within an element. So let's keep it simple..		A span allows you to reference a piece of text within an element. So let's keep it simple.

	<pre><p>This text could be red</p></pre>		<pre><p>This text could be red</p></pre>
Line 232:		Line 232:

	You will use 'span' rarely but it occasionally has a use.		You will use 'span' rarely but it occasionally has a use.


	=Float Warning=		=Float Warning=

Sfws: HTML5 alternatives - initial mention

2013-01-25T18:02:46Z

HTML5 alternatives - initial mention

← Older revision		Revision as of 18:02, 25 January 2013
Line 202:		Line 202:

	[[file:Divlayout3.png]]		[[file:Divlayout3.png]]
			=Aside, Section, Article, Header, Footer - the alternative HTML tags=
			In HTML5, where you could use Div before, you can now use header, footer, aside, article or section. These were introduced because they are more meaningful terms.

			header - this is used to group elements at the start of an article, aside, or section;
			footer - this is used to group elements at the end of an article, aside, or section;
			aside - this is used to group elements that are not an essential part of the content and typically appear to one side;
			article - this is used to group elements that have a logical connection with each other, but are not essential to be related to the elements outside the article grouping;
			section - Like div this is a way of grouping elements, but it is often used when the grouped elements do have a connection with those outside the section grouping.

	=Spans=		=Spans=