Post by Skyrocket on Mar 30, 2006 14:33:47 GMT -5
Some of you will be sitting there wondering what HTML is, let alone what it stands for ! Well let me put your mind at rest right now. HTML is Hyper Text Markup Language and it is the name of the code behind a webpage. If you open any webpage and in your browser choose View and Source or Page Source, then You will see the HTML that actually creates the webpage in your browser. From now on I’ll refer to the HTML as the code.
A web browser such as Internet Explorer, Netscape Navigator or Firefox, simply reads the code and then formats the webpage according to the instructions in the code. So if the code says the text should be red, the browser will show it as red.
The only things that are physically in the code are formatting instructions, hyperlinks, text and hidden instructions to the browser or search engines. Well that is the basics that you need to know anyway. Things like images or sound would sit in your webspace and will appear on your webpage if the code requests them. So in essence the code would say, put my image here.
The code must be laid out in a specific order and certain rules apply so that browsers can read it and display your webpage correctly. There are two main areas in the code, the HEAD and BODY areas.
There are also tags in the code, which are always inbetween more-than and less-than symbols, like this <head>. These tags are used to define or format areas of the code. The important rule with the tags is that they all have a opening tag and an end tag, however there are a few exceptions to this rule which I’ll point out as we go.
Another important rule is that tags are opened and closed in a specific order. This is that the first one opened is the last one closed. So if you have a paragraph where you want the text to be bold and italic, you would use the opening bold tag, then the opening italic tag, then after the string of text has finished, you would first close the italic tag and the close the bold tag. It doesn’t matter which you open first, as long as you close it last.
All the HEAD content is held between the <head> and </head> tags. You will notice that the closing </head> tag has a forward slash before the word head. This identifies it as a closing tag.
The HEAD section will hold things that don’t appear on the webpage. The only thing that does appear is in the <title> tag, which puts the title you give your webpage at the top of the window. Other things that are placed in the HEAD area are meta-tags, which tell search engines and browsers information such as the author, copyright, description and keywords. You can also use the HEAD section to hold JavaScript and Cascading Style Sheets. Don’t worry if you don’t understand some of this, it will all become a lot clearer when you start building your site and read through other sections of this Tool Kit.
A typical HEAD section might look like this :
<head>
<title>Work At Home Directory</title>
<meta name="copyright" content="Copyright © Joe Bloggs">
<meta name="subject" content="work at home ideas and opportunities">
<meta name="description" content="Work at Home Ideas and Opportunities">
<meta name="keywords" content="work at home,work at home ideas,work at home opportunities">
</head>
The BODY section is where everything a web browser displays is kept. The tags it all sits between are <body> and </body>
You can have attributes in the opening tag. So for the body tag you can set things like the font color, background color and link colors. To do this you could have something like :
<body color= "red" bgcolor="yellow" link="blue">
It depends on the tag as to which attributes you can use. Some tags are purely formatting tags, so they don’t have attributes, such as bold, which is known as <strong>. So if you wanted to make some text look bold, you would write the code like this : <strong>This is bold text</strong>
The idea of this section is to explain a bit about HTML so that you are not totally unfamiliar when you need to look at the code of a site. So I’m not going to go into all the tags and attributes here, I just want you to understand how the coding works.
So just to summarise. Webpages are displayed in browsers when a browser reads the code and processes all the formating and text in the code. If there are mistakes in the way the code is ordered or written, the browser may display it in an unpredictable way or not at all! So make sure you test your webpages before uploading them to the Internet.
The sections in the code are HEAD and BODY. The HEAD section holds information for the browsers or search engines, but the information isn’t displayed on the actual webpage. The BODY section holds everything that is displayed, although it doesn’t physically hold objects like images, only tells the browser where the objects are held.
Tags are read by the browsers and tell them about the information held between them. So if it is the body tags, then it tells the browser this is the body information. If it is a formating tag like <strong> then it tells the browser to make the text bold.
OK, that is where I’ll end this section, I think you’re probably sufficiently confused by now! I haven’t explained it all so don’t think that You will be able to look at the source code of a webpage and instantly understand what’s going on. However the intention is that you now have the basic understanding of how webpage coding is put together, so that you can move on and learn about some of the specifics, such as adding images, links and more advanced formating such as Cascading Style Sheets (CSS). For now though I would take a break, maybe look at some code and see if you can pick out some of the things I have explained above.
A web browser such as Internet Explorer, Netscape Navigator or Firefox, simply reads the code and then formats the webpage according to the instructions in the code. So if the code says the text should be red, the browser will show it as red.
The only things that are physically in the code are formatting instructions, hyperlinks, text and hidden instructions to the browser or search engines. Well that is the basics that you need to know anyway. Things like images or sound would sit in your webspace and will appear on your webpage if the code requests them. So in essence the code would say, put my image here.
The code must be laid out in a specific order and certain rules apply so that browsers can read it and display your webpage correctly. There are two main areas in the code, the HEAD and BODY areas.
There are also tags in the code, which are always inbetween more-than and less-than symbols, like this <head>. These tags are used to define or format areas of the code. The important rule with the tags is that they all have a opening tag and an end tag, however there are a few exceptions to this rule which I’ll point out as we go.
Another important rule is that tags are opened and closed in a specific order. This is that the first one opened is the last one closed. So if you have a paragraph where you want the text to be bold and italic, you would use the opening bold tag, then the opening italic tag, then after the string of text has finished, you would first close the italic tag and the close the bold tag. It doesn’t matter which you open first, as long as you close it last.
All the HEAD content is held between the <head> and </head> tags. You will notice that the closing </head> tag has a forward slash before the word head. This identifies it as a closing tag.
The HEAD section will hold things that don’t appear on the webpage. The only thing that does appear is in the <title> tag, which puts the title you give your webpage at the top of the window. Other things that are placed in the HEAD area are meta-tags, which tell search engines and browsers information such as the author, copyright, description and keywords. You can also use the HEAD section to hold JavaScript and Cascading Style Sheets. Don’t worry if you don’t understand some of this, it will all become a lot clearer when you start building your site and read through other sections of this Tool Kit.
A typical HEAD section might look like this :
<head>
<title>Work At Home Directory</title>
<meta name="copyright" content="Copyright © Joe Bloggs">
<meta name="subject" content="work at home ideas and opportunities">
<meta name="description" content="Work at Home Ideas and Opportunities">
<meta name="keywords" content="work at home,work at home ideas,work at home opportunities">
</head>
The BODY section is where everything a web browser displays is kept. The tags it all sits between are <body> and </body>
You can have attributes in the opening tag. So for the body tag you can set things like the font color, background color and link colors. To do this you could have something like :
<body color= "red" bgcolor="yellow" link="blue">
It depends on the tag as to which attributes you can use. Some tags are purely formatting tags, so they don’t have attributes, such as bold, which is known as <strong>. So if you wanted to make some text look bold, you would write the code like this : <strong>This is bold text</strong>
The idea of this section is to explain a bit about HTML so that you are not totally unfamiliar when you need to look at the code of a site. So I’m not going to go into all the tags and attributes here, I just want you to understand how the coding works.
So just to summarise. Webpages are displayed in browsers when a browser reads the code and processes all the formating and text in the code. If there are mistakes in the way the code is ordered or written, the browser may display it in an unpredictable way or not at all! So make sure you test your webpages before uploading them to the Internet.
The sections in the code are HEAD and BODY. The HEAD section holds information for the browsers or search engines, but the information isn’t displayed on the actual webpage. The BODY section holds everything that is displayed, although it doesn’t physically hold objects like images, only tells the browser where the objects are held.
Tags are read by the browsers and tell them about the information held between them. So if it is the body tags, then it tells the browser this is the body information. If it is a formating tag like <strong> then it tells the browser to make the text bold.
OK, that is where I’ll end this section, I think you’re probably sufficiently confused by now! I haven’t explained it all so don’t think that You will be able to look at the source code of a webpage and instantly understand what’s going on. However the intention is that you now have the basic understanding of how webpage coding is put together, so that you can move on and learn about some of the specifics, such as adding images, links and more advanced formating such as Cascading Style Sheets (CSS). For now though I would take a break, maybe look at some code and see if you can pick out some of the things I have explained above.