samlak
In this lesson we learn about one of the main types of data websites send to our computers over the internet: HTML.
If you haven’t completed the first part of our Website Design course “What is the internet” make sure you read those first to get a good understanding of how websites are sent to your browser.
Remember what HTML stands for? It stands for HyperText Markup Language.
Let’s look in more detail what this means.
‘Markup’ in computing means adding extra data to text in order to tell computers more information about that text. For example, in HTML we tell the computer which parts of the HTML document are to be displayed, which parts make up the navigation, even which parts are titles and which are content.
What is a HTML document?
A HTML document is just what it sounds like – a document that contains HTML! It’s nothing more special than that. All we have to do is type our HTML into a document in a writing program – for example Notepad, or even Microsoft Word – and we have a HTML document.
Starting from the next lesson of this course we’re going to make our own simple HTML pages on our own computers, and learn all about HTML as we go.
First let’s understand what makes HTML special.
What are HTML tags?
HTML is just normal text, with additional information. This additional information is delivered throughtags.Tagsare the fundamental building blocks of HTML.
A tag looks like this:
<tag>
Anything inside the “<” and “>” symbols defines the tag.
Can anything be a HTML tag?
Yes and no. Technically you could put anything inside a “<” and “>” symbol. However, browsers only understand certain tags, so unless you use the tags that are officially defined as part of HTML then your tags will not work correctly.
We will learn all about the important HTML tags as we proceed through this course.
More about tags
Tags can be bothopenedandclosed. For example, let’s look at a <span> tag (don’t worry about what a <span> tag is for now – we’ll get to it later):
<span>This is inside my span! I can put anything I like here.</span>
You can see that a tag isopenedby having an initial tag such as <span>. It is thenclosedwith a second tag that has an additional “/” symbol. Anything can go between the opening and closing tags – this is known as thetag contents.
This whole example from theopening tagto thetag contentsto theclosing tagis known as a HTMLelement. In this case we have created aspan element, because we are using a span tag to define the element.
Elementsare made up oftags.
Self-closing Tags
Some tags don’t require opening and closing tags, they can effectively open and close themselves in just one tag. These are often known asself-closing tags.
Technically in HTML 5, which is currently the most advanced version of HTML, self-closing tags don’tactuallyclose themselves, but it’s a helpful way to picture what is happening. (If you’re interested in why: it’s because HTML is similar to a markup language called XML. In XML tags are required to either be closed in a pair, or to self-close. HTML is not as strict as XML, so you don’thaveto self-close your tags. However, it doesn’t hurt, and keeps your HTML neat so it is not a bad habit to have.)
A self-closing tag looks like this: <tag />
Tags that can exist on their own, i.e. be self-closed include: <img />, <link /> and <meta />, amongst others.
Again, we will understand more about each of these tags as we encounter them when we start building our own website!
Tag attributes
The last important concept to understand about tags is that tags can haveattributesas well as contents. Let’s add an attribute to our <span> tag from before:
<spanclass=”exampleTag”>This is inside my span! I can put anything I like here.</span>
Now our tag has aclass attribute. Attributes can havevalues. In this case our attribute has the valueexampleTag.
As with tag names, attributes can technically be anything. For example, we could have said:
<spanlemon=”fruityAttribute”>This is inside my span! I can put anything I like here.</span>
This gives our <span> tag an attributenamed“lemon” and with avalueof “fruityAttribute”.
However, just like with tags there are certain attributes that are important and have meaning. We will learn about these as we learn about each tag.
Putting it all together
Here we can see all of the parts that make up an element.
Make sure you understand which part of theelementis atag, which part is anattribute, which part is anattribute valueand which part is theelement contents.
We will be referring to all of these throughout the course so try and memorise these now. TO BE CONTINUED.....
