Anatomy Of A Web Page
Guide to building a web Page.
- A Web Page is an electronic document written in a language called HTML, short for Hypertext Markup Language, also referred to as code.
- Each web page has a unique address, called a URL or Uniform Resource Locator that identifies where it's located on the network.
- A website has one or more related web pages, depending on how it's designed.
- Web pages on a site are linked together through a system of hyperlinks, enabling you to browse between them by clicking on a link.
The page above can
be viewed in full online at the following URL link:
http://www.myscribeweb.com/News_MyScribeWeb.com.html
Whilst you are there you may want to sign up to receive our free Newsletter.
http://www.myscribeweb.com/News_MyScribeWeb.com.html
Whilst you are there you may want to sign up to receive our free Newsletter.
There are many different ways
that you
can design the style of your web page but for starters let's look at
the basics.
The first element you can see in the page above is the header, not to be confused by <head> in the source of the page.
If you go to the live page via the URL link above and right click your mouse over the header section, then click on "Properties" from the drop down menu; you will see that the header which looks like font is actually an image banner 448 x 127 pixels. You will also notice that the image URL is given as: http://www.myscribeweb.com/MyScribeWebIndexBanner.jpg in the properties. This is the address where the image that creates the header is stored on the server.
So to create this header for the page:
The first element you can see in the page above is the header, not to be confused by <head> in the source of the page.
If you go to the live page via the URL link above and right click your mouse over the header section, then click on "Properties" from the drop down menu; you will see that the header which looks like font is actually an image banner 448 x 127 pixels. You will also notice that the image URL is given as: http://www.myscribeweb.com/MyScribeWebIndexBanner.jpg in the properties. This is the address where the image that creates the header is stored on the server.
So to create this header for the page:
- An image was created and stored on the hosting server.
- The image was inserted into the page.
This is the code
that created the above page header:
<div style="text-align: center;"><img style="width: 448px; height: 127px;" alt="Subscribe to News from MyScribeWeb.com" src="MyScribeWebIndexBanner.jpg" /><br />
</div>
NOTE: If you hover your mouse over the header on the live page you get a message "Subscribe to News from MyScribeWeb.com"
It is important to always give an alternative text message to your images, as this is what will be seen by visitors to your pages if their browsers do not display images. It is also important to realize that search engines do not recognise images, audio, video or flash files. Therefore if you want to optimize your web pages, to get more search engine visitors, avoid using too many of these files and always use alternative text behind your images.
Next we have inserted another image to form the header. This image has the description "For Writers, Authors, Ghost writers and Web builders" The reason these fonts were created as images is that these fonts if just written on the page as text, would not resolve in this fancy font if the viewers computer is not equipped with this type of font. Instead they would see something like this:
<div style="text-align: center;"><img style="width: 448px; height: 127px;" alt="Subscribe to News from MyScribeWeb.com" src="MyScribeWebIndexBanner.jpg" /><br />
</div>
NOTE: If you hover your mouse over the header on the live page you get a message "Subscribe to News from MyScribeWeb.com"
It is important to always give an alternative text message to your images, as this is what will be seen by visitors to your pages if their browsers do not display images. It is also important to realize that search engines do not recognise images, audio, video or flash files. Therefore if you want to optimize your web pages, to get more search engine visitors, avoid using too many of these files and always use alternative text behind your images.
Next we have inserted another image to form the header. This image has the description "For Writers, Authors, Ghost writers and Web builders" The reason these fonts were created as images is that these fonts if just written on the page as text, would not resolve in this fancy font if the viewers computer is not equipped with this type of font. Instead they would see something like this:
My Scribe Web
For Writers, Authors, Ghost writers and Web builders
Below the header we have
inserted a table and divided the first row into 7 cells for
our "navigational tabs" we have named the tabs:
"MEMBERS LOGIN, SUBSCRIBE, AUTHORS, BLOG, PUBLISHERS, WHAT'S NEW, HOME"
Each one of these tabs is hyperlinked to another page.
Then we have inserted another table and divided it into 3 columns, changed the background color of the second column to grey and the third column to a darker grey.
The first column contains an image, some text content and a couple of links.
The second column contains a list of topics with links.
The third column contains linked images.
The background color of the page is white and all borders have been set to 0.
To View the full code of this page go to the URL http://www.myscribeweb.com/News_MyScribeWeb.com.html
Left mouse click on the "View" tab in your browser, select "source" from the drop down menu. The source code for the web page will pop up in your note pad.
Hand coding requires in-depth knowledge of coding languages such as XHTML [extended hypertext markup Language].
It is a tedious task to hand code a website. Fortunately there are programs which do most of the work for you. However understanding the workings of these programs requires some understanding of how coding works.
Following is a little example of hand coding you can try in your note pad. This is a simplified formula to demonstrate the elements of a .html web page. There are many more html tags needed to format the page to show background color, Font; position, size, color, paragraph formating etc. Only the content between the <body> tags will be visible on the web page when viewed in the browser.
Write the following code into your notepad [do not copy and paste, copy and paste can corrupt the code].
<html>
<head>
<title>My First Web Page</title>
</head>
<body>This is an example of hand coding a page.</body>
</html>
Then save the notepad file to your desktop in the following manner.
Click on the "file" menu in your notepad, then;
save as: MyWebPage.html
Save as Type: All Files
Encoding: UTF-8
Now open the file "MyWebPage.html in your browser.
You will see that none of the code is visible on the page except the text between the <body></body> tags;
"This is an example of hand coding a page."
The tab in your browser will show the title of your page "My First Web Page" which was the text inside the <title></title> tags.
NOTE: That the <title></title> tags are within the <head></head> tags and all the tags are within the <html></html> tags.
And the URL in your browser will point to the address of your page where it is stored on your computer. If you saved the page on your desktop it should read something like "C:\Documents and Settings\User\Desktop\MyWebPage.html"
Now if you had a published site online with the domain name [lets say it was "XXXX.com] hosted and you loaded the page you just created from your desktop to your public.html directory on the hosting server. The URL for your page would now show as: "http://www.XXXX.com/MyWebPage.html" and would be accessible to anyone who typed this URL into their browser.
2. Using a program that does most of the coding for you.
There are many programs available with which you can build your web pages.
These programs are commonly referred to as HTML editors, or HTML WYSIWYG editor [What You See Is What You Get].
They look and operate very similarly to any word processor and are relatively simple to use.
An HTML WYSIWYG editor, conceals the markup and allows the Web page developer to think entirely in terms of how the content should appear. One of the trade-offs, however, is that an HTML WYSIWYG editor sometimes inserts the markup code it thinks is needed all on its own. Then, the developer has to know enough about the markup language to go back into the source code and clean it up.
At http://www.myscribeweb.com members have access to a good HTML WYSIWYG editor that minimises extraneous code insertion with step by step video instructions on how to use it. Members also have access to a very handy "HTML TAGS & CODE CHART" for quick easy reference, making editing a snap. To check out the resources available for absolute beginners to advanced web builders more.............
"MEMBERS LOGIN, SUBSCRIBE, AUTHORS, BLOG, PUBLISHERS, WHAT'S NEW, HOME"
Each one of these tabs is hyperlinked to another page.
Then we have inserted another table and divided it into 3 columns, changed the background color of the second column to grey and the third column to a darker grey.
The first column contains an image, some text content and a couple of links.
The second column contains a list of topics with links.
The third column contains linked images.
The background color of the page is white and all borders have been set to 0.
To View the full code of this page go to the URL http://www.myscribeweb.com/News_MyScribeWeb.com.html
Left mouse click on the "View" tab in your browser, select "source" from the drop down menu. The source code for the web page will pop up in your note pad.
Basic Methods Of Building A Web Page.
There are basically 2 methods of building a web page.- Hand Coding.
- Using a program that does most of the coding for you.
Hand coding requires in-depth knowledge of coding languages such as XHTML [extended hypertext markup Language].
It is a tedious task to hand code a website. Fortunately there are programs which do most of the work for you. However understanding the workings of these programs requires some understanding of how coding works.
Following is a little example of hand coding you can try in your note pad. This is a simplified formula to demonstrate the elements of a .html web page. There are many more html tags needed to format the page to show background color, Font; position, size, color, paragraph formating etc. Only the content between the <body> tags will be visible on the web page when viewed in the browser.
Write the following code into your notepad [do not copy and paste, copy and paste can corrupt the code].
<html>
<head>
<title>My First Web Page</title>
</head>
<body>This is an example of hand coding a page.</body>
</html>
Then save the notepad file to your desktop in the following manner.
Click on the "file" menu in your notepad, then;
save as: MyWebPage.html
Save as Type: All Files
Encoding: UTF-8
Now open the file "MyWebPage.html in your browser.
You will see that none of the code is visible on the page except the text between the <body></body> tags;
"This is an example of hand coding a page."
The tab in your browser will show the title of your page "My First Web Page" which was the text inside the <title></title> tags.
NOTE: That the <title></title> tags are within the <head></head> tags and all the tags are within the <html></html> tags.
And the URL in your browser will point to the address of your page where it is stored on your computer. If you saved the page on your desktop it should read something like "C:\Documents and Settings\User\Desktop\MyWebPage.html"
Now if you had a published site online with the domain name [lets say it was "XXXX.com] hosted and you loaded the page you just created from your desktop to your public.html directory on the hosting server. The URL for your page would now show as: "http://www.XXXX.com/MyWebPage.html" and would be accessible to anyone who typed this URL into their browser.
2. Using a program that does most of the coding for you.
There are many programs available with which you can build your web pages.
These programs are commonly referred to as HTML editors, or HTML WYSIWYG editor [What You See Is What You Get].
They look and operate very similarly to any word processor and are relatively simple to use.
An HTML WYSIWYG editor, conceals the markup and allows the Web page developer to think entirely in terms of how the content should appear. One of the trade-offs, however, is that an HTML WYSIWYG editor sometimes inserts the markup code it thinks is needed all on its own. Then, the developer has to know enough about the markup language to go back into the source code and clean it up.
At http://www.myscribeweb.com members have access to a good HTML WYSIWYG editor that minimises extraneous code insertion with step by step video instructions on how to use it. Members also have access to a very handy "HTML TAGS & CODE CHART" for quick easy reference, making editing a snap. To check out the resources available for absolute beginners to advanced web builders more.............
My Scribe Web For Writers & Web Builders ¦ Free Report Automated marketing System ¦ How To Start A Home Business Online
Make Money Online | One-Stop-Shop-Online For Safe Online Shopping