<![CDATA[Forums - A Web Page]]> http://forum.notjustbrowsing.org:/ Thu, 28 May 2026 21:37:27 +0000 MyBB <![CDATA[TEMPLATE CONSTRUCTION - The End (Layout creation for each content space)]]> http://forum.notjustbrowsing.org:/showthread.php?tid=2957 Wed, 24 Feb 2016 23:06:33 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=2957 TEMPLATE CONSTRUCTION - Final we have prepared particular spaces (header, latest_news, links2contents, main_content_area, footer) to show contents.
.png   template_construction_stage_8_2.png (Size: 344.22 KB / Downloads: 1340)

Now is the time to create layout for each of the content space separately one by one.

Important thing to consider is to place layout information in a separate .css file for each space. That is, we should have header.css, latest_news.css, links2contents.css, main_content_area.css and footer.css. Reason: we want to keep ourselves in 'objected orientation' mode.]]> TEMPLATE CONSTRUCTION - Final we have prepared particular spaces (header, latest_news, links2contents, main_content_area, footer) to show contents.
.png   template_construction_stage_8_2.png (Size: 344.22 KB / Downloads: 1340)

Now is the time to create layout for each of the content space separately one by one.

Important thing to consider is to place layout information in a separate .css file for each space. That is, we should have header.css, latest_news.css, links2contents.css, main_content_area.css and footer.css. Reason: we want to keep ourselves in 'objected orientation' mode.]]> <![CDATA[TEMPLATE CONSTRUCTION - Final]]> http://forum.notjustbrowsing.org:/showthread.php?tid=1976 Sat, 19 Dec 2015 22:42:24 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=1976
In this part, we will identify particular spaces of our template with user friendly names. In our template we have seven spaces and we named them by "header", "top_menu", "slide_show", "latest_news", "links2contents", "main_content_area" and "footer".

In the following pictures code and its result can be seen. Addition of div tags at desired places in "index.html", definitions of those tags in "default.css" and result in browser. Names of the div areas in the second picture are superimposed on picture for clarity.

.png   template_construction_stage_8_1.png (Size: 85.61 KB / Downloads: 1352)
.png   template_construction_stage_8_2.png (Size: 344.22 KB / Downloads: 1261)
]]>
In this part, we will identify particular spaces of our template with user friendly names. In our template we have seven spaces and we named them by "header", "top_menu", "slide_show", "latest_news", "links2contents", "main_content_area" and "footer".

In the following pictures code and its result can be seen. Addition of div tags at desired places in "index.html", definitions of those tags in "default.css" and result in browser. Names of the div areas in the second picture are superimposed on picture for clarity.

.png   template_construction_stage_8_1.png (Size: 85.61 KB / Downloads: 1352)
.png   template_construction_stage_8_2.png (Size: 344.22 KB / Downloads: 1261)
]]> <![CDATA[TEMPLATE CONSTRUCTION - VII]]> http://forum.notjustbrowsing.org:/showthread.php?tid=1438 Thu, 05 Nov 2015 12:35:35 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=1438 TEMPLATE CONSTRUCTION - VI), I will show you the code and its result for one sub-division in each post.

Let us go for the first split from A to B and C as shown in the following figure. In the following figure, 'A' that is in our code as 'main_page'

.png   MyFirstTemplate_1.png (Size: 4.83 KB / Downloads: 1285)

Following picture shows the division by using two
tags in index.html and their attributes described in default.css

.png   template_construction_stage_7_1.png (Size: 104.59 KB / Downloads: 1285) ]]> TEMPLATE CONSTRUCTION - VI), I will show you the code and its result for one sub-division in each post.

Let us go for the first split from A to B and C as shown in the following figure. In the following figure, 'A' that is in our code as 'main_page'

.png   MyFirstTemplate_1.png (Size: 4.83 KB / Downloads: 1285)

Following picture shows the division by using two
tags in index.html and their attributes described in default.css

.png   template_construction_stage_7_1.png (Size: 104.59 KB / Downloads: 1285) ]]> <![CDATA[TEMPLATE CONSTRUCTION - VI]]> http://forum.notjustbrowsing.org:/showthread.php?tid=1405 Mon, 02 Nov 2015 13:27:36 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=1405 TEMPLATE CONSTRUCTION - V, now we are going to set a specific area within our page.

We are going to take first main area out of our web page. In the following picture this area is called "main_page". HTML tag
is used, in particular
where id of this div is main_page.

.png   template_construction_stage_6_1.png (Size: 119.5 KB / Downloads: 1117)

In the following picture we see the result of the divisions, it is the basis of our template that we started in TEMPLATE CONSTRUCTION - I

.png   template_construction_stage_6_2.png (Size: 49.89 KB / Downloads: 1179)
90% of the width of browser page
5% margin on left, right and top
Shadow and Curvature is set for our main_page

Remember: You should never go back a step to fix something that you don't like now. Move to next step only if you are 100% satisfied with your current step/action. It means your page outline and your main_page should be how you want it to be.

You should also try to make your template partitions as colorful as possible, when complete you can always clear or change partition colors.

Next step is First Split: TEMPLATE CONSTRUCTION - VII
]]> TEMPLATE CONSTRUCTION - V, now we are going to set a specific area within our page.

We are going to take first main area out of our web page. In the following picture this area is called "main_page". HTML tag
is used, in particular
where id of this div is main_page.

.png   template_construction_stage_6_1.png (Size: 119.5 KB / Downloads: 1117)

In the following picture we see the result of the divisions, it is the basis of our template that we started in TEMPLATE CONSTRUCTION - I

.png   template_construction_stage_6_2.png (Size: 49.89 KB / Downloads: 1179)
90% of the width of browser page
5% margin on left, right and top
Shadow and Curvature is set for our main_page

Remember: You should never go back a step to fix something that you don't like now. Move to next step only if you are 100% satisfied with your current step/action. It means your page outline and your main_page should be how you want it to be.

You should also try to make your template partitions as colorful as possible, when complete you can always clear or change partition colors.

Next step is First Split: TEMPLATE CONSTRUCTION - VII
]]> <![CDATA[TEMPLATE CONSTRUCTION - V]]> http://forum.notjustbrowsing.org:/showthread.php?tid=1300 Mon, 26 Oct 2015 17:35:22 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=1300
First thing to know is that a web page is written in two parts
Part 1: Head
Part 2: Body

Head: In this part instructions can be passed on to the reader of this page (a web browser) to follow, to be able to understand the instructions within Body part of the document. HTML , tag pair is used to mark the Head part of the page.

Body: This is where actual instructions are placed that make up a web page.
HTML , tag pair is used to mark the Body part of the page.


.png   template_construction_stage_5_1.png (Size: 98.08 KB / Downloads: 1143)
In part of our web page template ("index.html"), we are telling browser to look for "default.css" file for styling instructions in a sub-folder called "css".

In the "default.css" we have only one instruction about the body of the page and that is to set body's background to an image "background.jpg" that we placed in "images" directory.

Also, shown in this picture is "background.jpg" and 8x8 pixel image to be used as a background of the of our web page.]]>
First thing to know is that a web page is written in two parts
Part 1: Head
Part 2: Body

Head: In this part instructions can be passed on to the reader of this page (a web browser) to follow, to be able to understand the instructions within Body part of the document. HTML , tag pair is used to mark the Head part of the page.

Body: This is where actual instructions are placed that make up a web page.
HTML , tag pair is used to mark the Body part of the page.


.png   template_construction_stage_5_1.png (Size: 98.08 KB / Downloads: 1143)
In part of our web page template ("index.html"), we are telling browser to look for "default.css" file for styling instructions in a sub-folder called "css".

In the "default.css" we have only one instruction about the body of the page and that is to set body's background to an image "background.jpg" that we placed in "images" directory.

Also, shown in this picture is "background.jpg" and 8x8 pixel image to be used as a background of the of our web page.]]> <![CDATA[TEMPLATE CONSTRUCTION - IV]]> http://forum.notjustbrowsing.org:/showthread.php?tid=1276 Sun, 25 Oct 2015 21:59:11 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=1276 TEMPLATE CONSTRUCTION - II

Having notepad++ ready to be used, you open "index.html" and "default.css".

Both files are empty to start with.


.png   template_construction_stage_3_12.png (Size: 106.12 KB / Downloads: 1168)
]]> TEMPLATE CONSTRUCTION - II

Having notepad++ ready to be used, you open "index.html" and "default.css".

Both files are empty to start with.


.png   template_construction_stage_3_12.png (Size: 106.12 KB / Downloads: 1168)
]]> <![CDATA[TEMPLATE CONSTRUCTION - III]]> http://forum.notjustbrowsing.org:/showthread.php?tid=1263 Thu, 22 Oct 2015 13:16:46 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=1263 TEMPLATE CONSTRUCTION - II, the next stage is Stage 3

There are two steps

Step 1: Logically splitting your template into portions using a drawing/graphics application.

The Rule of Splitting: is to split one portion in to two parts.

Starting from the template created in Stage 1


.png   MyFirstTemplate.png (Size: 4.08 KB / Downloads: 1204) ]]> TEMPLATE CONSTRUCTION - II, the next stage is Stage 3

There are two steps

Step 1: Logically splitting your template into portions using a drawing/graphics application.

The Rule of Splitting: is to split one portion in to two parts.

Starting from the template created in Stage 1


.png   MyFirstTemplate.png (Size: 4.08 KB / Downloads: 1204) ]]> <![CDATA[TEMPLATE CONSTRUCTION - II]]> http://forum.notjustbrowsing.org:/showthread.php?tid=1204 Mon, 19 Oct 2015 19:38:35 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=1204 TEMPLATE CONSTRUCTION - I, the next stage is Stage 2

Step 1: Choose a name for your template
In the picture it is "MyFirstTemplate"
Step 2: Create a directory/folder of the name of your template
Step 3: Create sub directories/folders "css", "images", "scripts"

For steps 4 & 5, use notepad++ to create empty files as shown in the picture.
Step 4: Create an empty file "index.html" and place it in your template named directory/folder
Step 5: Create an empty file "default.css" and place it in the sub directory/folder named "css"

It will also be good to keep template picture created in Stage 1("MyFirstTemplate.png") in your template folder.


.png   template_construction_stage_2.png (Size: 339.5 KB / Downloads: 1122)

For Stage 3 see TEMPLATE CONSTRUCTION - III
]]> TEMPLATE CONSTRUCTION - I, the next stage is Stage 2

Step 1: Choose a name for your template
In the picture it is "MyFirstTemplate"
Step 2: Create a directory/folder of the name of your template
Step 3: Create sub directories/folders "css", "images", "scripts"

For steps 4 & 5, use notepad++ to create empty files as shown in the picture.
Step 4: Create an empty file "index.html" and place it in your template named directory/folder
Step 5: Create an empty file "default.css" and place it in the sub directory/folder named "css"

It will also be good to keep template picture created in Stage 1("MyFirstTemplate.png") in your template folder.


.png   template_construction_stage_2.png (Size: 339.5 KB / Downloads: 1122)

For Stage 3 see TEMPLATE CONSTRUCTION - III
]]> <![CDATA[TEMPLATE CONSTRUCTION - I]]> http://forum.notjustbrowsing.org:/showthread.php?tid=838 Fri, 16 Oct 2015 12:52:38 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=838
My aim is to enable a person, 10-80 years of age, to construct templates with ease.

Follow these steps and you will have no difficulty in creating your desired template.

Stage 1
Step 1: Drawing your template by hand with a pencil on a paper.
Step 2a: Drawing your template on a computer using a drawing application. For example see this
Step 2b: Optional - Copy & Paste similar contents to what you want in your web page from other web sites.

Use Paint program in your computer for drawing template.

.png   template_in_paint.png (Size: 69.51 KB / Downloads: 1150)

Stage 2
Step 1: Choose a name for your template
Step 2: Create a directory/folder of the name of your template
Step 3: Create sub directories/folders "css", "images", "scripts"
Step 4: Create an empty file "index.html" and place it in your template named directory/folder
Step 5: Create an empty file "default.css" and place it in the sub directory/folder named "css"

Stage 3
Step 1: Logically splitting your template into portions using a drawing/graphics application.
Step 2: Starting construction of template using HTML and CSS, one portion at a time.

Use notepad++ for editing your files (index.html, default.css).

For Stage 2 see TEMPLATE CONSTRUCTION - II

]]>
My aim is to enable a person, 10-80 years of age, to construct templates with ease.

Follow these steps and you will have no difficulty in creating your desired template.

Stage 1
Step 1: Drawing your template by hand with a pencil on a paper.
Step 2a: Drawing your template on a computer using a drawing application. For example see this
Step 2b: Optional - Copy & Paste similar contents to what you want in your web page from other web sites.

Use Paint program in your computer for drawing template.

.png   template_in_paint.png (Size: 69.51 KB / Downloads: 1150)

Stage 2
Step 1: Choose a name for your template
Step 2: Create a directory/folder of the name of your template
Step 3: Create sub directories/folders "css", "images", "scripts"
Step 4: Create an empty file "index.html" and place it in your template named directory/folder
Step 5: Create an empty file "default.css" and place it in the sub directory/folder named "css"

Stage 3
Step 1: Logically splitting your template into portions using a drawing/graphics application.
Step 2: Starting construction of template using HTML and CSS, one portion at a time.

Use notepad++ for editing your files (index.html, default.css).

For Stage 2 see TEMPLATE CONSTRUCTION - II

]]> <![CDATA[What is in a web page?]]> http://forum.notjustbrowsing.org:/showthread.php?tid=839 Sun, 20 Sep 2015 16:32:57 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=839 instructions for the web browser about

1. layout of the web page and locations of its contents (HTML/CSS)
2. various actions to be performed within web page (JavaScript)
3. various actions to be performed before contents are delivered (PHP)


When a user requests for a web page through a web browser (Internet Explorer, Firefox, Chrome, Opera, NotJustBrowsing etc.), web browser show the web page as per instructions within the requested web page.]]> instructions for the web browser about

1. layout of the web page and locations of its contents (HTML/CSS)
2. various actions to be performed within web page (JavaScript)
3. various actions to be performed before contents are delivered (PHP)


When a user requests for a web page through a web browser (Internet Explorer, Firefox, Chrome, Opera, NotJustBrowsing etc.), web browser show the web page as per instructions within the requested web page.]]> <![CDATA[Template: Organization of contents on a web page]]> http://forum.notjustbrowsing.org:/showthread.php?tid=795 Thu, 17 Sep 2015 09:31:28 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=795
For example,
.png   template_001.png (Size: 6.37 KB / Downloads: 1227)

To learn how to construct a template please follow in order
TEMPLATE CONSTRUCTION - I
TEMPLATE CONSTRUCTION - II
TEMPLATE CONSTRUCTION - III
TEMPLATE CONSTRUCTION - IV
TEMPLATE CONSTRUCTION - V
TEMPLATE CONSTRUCTION - VI
TEMPLATE CONSTRUCTION - VII]]>
For example,
.png   template_001.png (Size: 6.37 KB / Downloads: 1227)

To learn how to construct a template please follow in order
TEMPLATE CONSTRUCTION - I
TEMPLATE CONSTRUCTION - II
TEMPLATE CONSTRUCTION - III
TEMPLATE CONSTRUCTION - IV
TEMPLATE CONSTRUCTION - V
TEMPLATE CONSTRUCTION - VI
TEMPLATE CONSTRUCTION - VII]]> <![CDATA[What is a Web Page?]]> http://forum.notjustbrowsing.org:/showthread.php?tid=780 Wed, 16 Sep 2015 18:09:06 +0000 http://forum.notjustbrowsing.org:/showthread.php?tid=780


How contents are shown through a web page is determined by the creator of that web page?

]]>


How contents are shown through a web page is determined by the creator of that web page?

]]>