HTML - Introduction
A webpage is made up of various different types of content such as text, images, links and headings. HTML (Hypertext Markup Language) is a computer language which contains a set of instructions to tell a browser the type of content to be displayed and where this content fits into the structure of the page.
TAGS
These instructions are collectively known as 'markup' - hence the 'M' in HTML. They are most often called tags and are placed at the start and end of the content to which they apply being referred to as opening and closing tags. A web page is made up of a series of opening and closing tag pairs surrounding the text, images and other content to be displayed.
ELEMENTS
Each tag pair and the content it contains is called an element and a webpage is made up of a series of elements placed together to achieve the desired page display.
As an example, the instruction to start a new paragraph is the opening tag <p> which is placed at the start of the paragraph of text.
At the end of the paragraph we tell the browser that it is the end by using the closing tag </p> .
The code for a paragraph element could be written as:
This shows the opening and closing <p> </p> tags enclosing the paragraph of text and the tags plus content make up
the paragraph element. This would be displayed as:
THIS IS A PARAGRAPH OF TEXT.
Notice that the tags are enclosed by the less than and greater than signs (otherwise known as angled brackets) <>, this tells the browser
that this is an instruction to be acted upon and not part of the text of the page.
Additionally the closing tag contains a forward slash / , this indicates a closing tag as opposed to an opening tag.
As another example here is the code to instruct the browser to display bold text using the <b> element:
Will give you: display bold text using the b element.
Essential page elements
Out of the HTML elements there are four which need to be included on every page and a good place to start your HTML education is to have an understanding of these elements and how they relate to each other.
The <html> </html> element.
This element contains all the information about the page - both what is displayed and any other non-display information which may be needed and as the name suggests tells the browser that what is coming is HTML (Hypertext Markup Language).
The first opening tag of the document is the <html> tag and the final closing tag is
</html> - all the other elements are contained within these two tags.
The <head> </head> element.
The <head> element is used to contain information that will be needed to display the page correctly but this information is not shown on the screen as part of the page.
The <head> section of a document can contain links to stylesheets or scripts that the page needs and other information about the page which may be needed by browsers or search engines.
The <head> element follows the opening <html> tag and is the first complete element in the page code.
The <title> </title> element.
This element contains the page title which is shown in the browser when looking at the page - in Firefox at the very top left corner of the screen and in Chrome and IE in the page tab.
As the title is not part of the main body of the page the <title> element is located inside the head section of the document between the <head> </head>
opening and closing tags.
The <body> </body> element.
Everything which needs to be shown on the screen as part of the individual Web page must be placed inside the <body> element. All the text, images and page navigation shown in the
browser window is placed between the opening and closing <body> </body> tags in the page code.
How the elements fit together.
These four building block elements are the foundation of any Web page and here is an illustration of how they are positioned in relation to each other in the page code:
<html><head><title>......</title></head><body>PAGE CONTENT - TEXT, IMAGES etc.
</body></html>Hopefully now you will have a basic understanding of HTML, of tags and elements and the principal structural elements of a page. If you want to have a go at some coding and see the results on your computer please have a look at making your first HTML page.