As touched on in the previous tutorial introduction to HTML, HTML put simply is a way to markup plain text to increase its visual appeal and functionality of it. This mark up is achieved by the addition of HTML tags surrounding the text that you wish to effect. It is these tags which tell the browser what to do and how to display the text.
For example you may tag an important word or phrase to appear in bold, when the browser encounters the tag it will know that the enclosed text is to appear as bold text and will display it so to the user.
The best way to show this concept is with some actual example code, shown below...
This text is normal <b>This text is bold</b> This text is normal
The above example shows the very basic bold tag in action, at its name would suggest it is used to make text appear bold in relation to its surrouding. Before we get into any more specific tags take a minuite to notice the format of the above code.
General Rules For Tags
HTML tags for the most part always take on the same format, that being the opening tag which is defined by the less than symbol, the tag name and then the greater than symbol giving <TagName>. The closing tag takes on a very similar format only with the addition of the forward slash between the less than symbol and the tag name like </TagName>.
It is important to understand that...
- The tags them selves will not be visible to the every day user viewing your web page.
- The functionality of the tags will apply to anything which occurs within them.
In fact nothing that appears within the < and > symbol will display within a browser regardless of whether it is valid HTML or not.
HTML Tags Worked Example.
Let us try a quick example, type or copy the code below into your text editor and save the file, the file name its self is not important just save it in a place where you can find it easily you must however use the file extension (end part of the file name) .html as this will tell your system that the file is HTML.
<h1>This is the header tag</h1> <p>The paragraph tag is used to group text into a simple paragraph block.</p> <p>The <i>italic tag here</i> is embeded within the paragraph tag.</p>
Opening Your File In A Browser
Once you have done this and without closing the HTML file itself you now need to open the file within a browser. Depending on how your system is configured you may be able to double click on the file and it will automatically open in your browse. If not you will need to right click on the file scroll down to the open with option and select your chosen browser. You should now have a very simple web page similar to that shown below.
Changing The HTML Code
What you can do now is edit the original HTML file that you created, via your text editor. If you then save the file again and refresh the browser you will see that the page will change as you re-save, this is a very basic but usefull trick to use when first using HTML as you can quickly display what you have created on screen and check it for errors.
Play around with the above code to get a feel for the format, do not worry to much about what specific tags do and how they should be used just yet we will come on to this in later chapters.
How Are HTML Tags And Elements Related.
Often when people are talking about HTML and HTML tags you will here them mention elements. An element is a componet of a HTML document, most likely the document will contain many different element all of which come together to make the web page you see in your browser.
Actually you have already created some elements in the previous example they are the code blocks created by the opening and closing tags we learnt about earlier. A example of an element would be <p>some standard text here</p>.
Elements And Structure
It is important to note that the element includes the text between the tags and is not technically the tags themselves. Of course an element does not have to contain plain text as above they may contain yet more elements which in turn may contain more elements. This is the basic structure of any web page and gives a tree like structure to the code which browser will interpret and display on screen.
For a full list of all valid HTML elements and a brief description of their application as of HTML 4.0 (the lastest version) visit the elements glossary here.
When your happy you understand the HTML markup style and structure click the next article below and we will continue.
blog comments powered by Disqus