Tags are the essential part of HTML but what are they really and why should you know about them?
This article is aimed at readers who don’t have any knowledge of web and programming and helps to make some discussions much easier to understand.
- The basics
- A document
- Dropping some names
[read more=”Read more” less=”Read less”]
The basics
Basic formatting
We want to make some text bold, so we add a tag for bold. Now the problem is when does it stop. So we have to add an end tag. to mark the end
Hello World this is a simple example
is written in HTML as
Hello World this is a simple example
You are now a HTML programmer.
There are other simple ones such as italics which use the tag.
Can you work out how this was done?
Headings
So in documents breaking them up into sections makes them far easier to read. So there is a whole system of levels.
, , and so on.
and so on.
The title of “The basics” is wrapped in a
The basics
set of tagsWhere “Basic formatting” and “Headings” are wrapped in
tags.
This is easy isn’t it.
To be honest it can remain easy but we want to make our documents more interesting.
Fonts
You can set the font tag so text has a chosen font.
Hello World!
This introduces the concept of an attribute. Attributes are handy extensions to tags to make them more useful. There are three attributes to the font tag shown here, face, size and color.
Attributes need things wrapped in double inverted commas
size="3"
Please also note that all the attributes are in the open tag and inside the opening < and >.
All of HTML tagging is american spelling so watch your colour and your centre as they become color and center.
Images
So let’s add a splash of colour to our document. is the tag for this. We need to add something to it through which is “where is the image?”. This is called the source of the image or src for short.
Still with me? one final tag of note to come.
Document sharing
Lets say we’re in university and we need to share a document. The document makes reference to many other documents. Rather than just put reference numbers in wouldn’t it be useful if the document linked. This introduces the anchor or a tag. It has to have an attribute called href also known as the Html REFerence attribute.
So I decide I’m going to put a link into my HTML document which links to Google. I put in
Try it yourself
Open up notepad on your computer.
Put in the following
Hello World this is a simple example
and it should look like this
I don’t mean to scare you but that is your first bit of programming… congratulations.
Go to File and save. Give it the name example.html and save it on your desktop.
Now you can open it in a browser by double clicking it and it will look something like this
You just built your first web page and it worked in a browser.
Documents
A bit of structure
Now HTML documents have a bit of structure in them to help on a few fronts. Here is a sample structure.
Hello World this is a simple example
Notice the html document which lets the computer know when the document starts and ends. i.e. if the computer doesn’t see the bottom