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 <b> for bold. Now the problem is when does it stop. So we have to add an end tag. </b> to mark the end
Hello World this is a simple example
is written in HTML as
Hello World <b>this is</b> a simple example
You are now a HTML programmer.
There are other simple ones such as italics which use the <i> 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.
<h1>, <h2>, <h3> and so on.
The title of “The basics” is wrapped in a <h1>The basics</h1> set of tags
Where “Basic formatting” and “Headings” are wrapped in <h2> 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.
<font face="Arial" size="3" color="red">Hello World!</font>
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. <img> 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.
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></img>
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
<a href="https://www.google.ie">Google</a>
Try it yourself
Open up notepad on your computer.
Put in the following
Hello World <b>this is</b> a simple example <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></img> <a href="https://www.google.ie">Google</a>
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.
<html>
<head>
</head>
<body>
Hello World <b>this is</b> a simple example
</body>
</html>
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 </html> it knows it doesn’t have the whole document yet.
The head in this example is empty. It carries some very useful information we will get to. Anything in the head is hidden from users but can give a lot of information about the document.
The body has our bold example from above. Most of what you want your users to see will go inside the body tags.
Not too scary I hope? You’ve learnt how to build HTML documents for the Internet.
The browser
So as you can tell we’re building in a special language. This language is called HTML. HyperText Markup Language.
The markup part refers to tags. We can mark up basic text with tags.
The hypertext refers to links to images and documents which is very useful.
Language because you have to learn the jargon of this language to make it work, using < and > and knowing which letters do what in the tags.
There is a special program on your phone or computers called a browser. This browser let’s you browse these HTML documents and it understands what to do when it see link tags such as the a and can get you to them.
There are many many makes of browsers. Here are the major ones… you’re using one of these right now to read this document.
- Microsoft Internet Explorer
- Microsoft Edge
- Apple Safari
- Google Chrome
- Mozilla Firefox
- Opera’s Opera
There are many others including Maxathon, Vivaldi. They share one thing in common… reading HTML and making it useful.
Standards
There is a bit of a long ongoing fight over HTML. HTML 4.01 is a standard which came out in December 24, 1999 and the whole world agreed on it. Mainly because the Internet wasn’t as big then as it is today.
All of the world’s browsers work with HTML 4.01. The problem is that technology has moved on in the interim and so people do more and more clever things with the browser.
The big changes all centre around videos and multimedia. How do you make videos play?
Most of these solutions use special software and ideas to make videos smaller and easier to download but they’re owned and licenced from companies. The Internet is free, so there’s a strong debate going on how to approach the complicated licencing bits and the big companies all think their approach is the best.
HTML5 was proposed in 2014 but because so many big companies have input into it, they can’t all agree on how it should work.
So HTML5 is NOT a standard and different browsers treat it differently. The last update was HTML 5.2 which was a Recommendation not a Standard in December 2017.
On the web
So you have your special web page. You want the world to get to it. This is where you need to get it into a cyber library.
Imagine you had a library like the Rathbeale Library in Swords. I’m very fond of the library where I spent a lot of my youth hence my reference to them here in this simple example. The library has an eircode K67 YP79. Good luck remembering that when you need it.
https://www.fingal.ie/council/service/fingal-library-network
Your documents are available in there. The whole world can link there and it’s easy, if you want the document link to there.
Each library has it’s own unique address, like an eircode, called an IP address which looks like 123.123.123.123. This isn’t very user friendly so you can buy custom names like custom naming a house. This is where www.google.ie comes in and makes getting to 216.58.213.99 a lot easier on the eye and is far easier to remember.
So in this example the document is “hosted” by the Rathbeale Library. You can decide to create your own library if Rathbeale won’t let you in or they have rules you don’t like.
Getting your own spot in hyperspace is called web hosting. It’s not very expensive but it does give you your own piece of cyber real-estate with your own library with your own rules. Expect to pay about $100 a year all in.
This website you’re reading this on is hosted by Hosting Ireland who I’ve used for years. €4.95 a month for my own cyber chunk of real estate. https://www.hostingireland.ie
Still with me? I hope so
Dropping some names
Getting fancy
Ok, so you’ve picked up a lot of information so far and I don’t want to melt your brain too much so for now let’s just mention some names so that you have them. These titles will be in future articles. You can skip to the wrap up if you’re tired. 🙂
We talked about the font tag earlier but modern websites are colourful with lots of fonts, text colours, sizes and so on. A very good system for managing these was agreed upon called Cascading Style Sheets (CSS). Like the way HTML 4.01 is being upgraded to HTML5, the font tag got upgraded to an approach called CSS. There are different versions of CSS with the latest currently being CSS 4 but they’re only Notes at this stage.
CSS information goes into the head tags mentioned earlier.
I’ll spend time on CSS in a different article.
Mind blowing
Instead of just a document you might want to make magic happen. HTML was opened up to a programming language called JavaScript. This is not the programming language Java but rather a language specially designed to work inside the rules of HTML.
This programming language allows you do exceptionally funky stuff to the page including changing text or making magic happen.
I like your mind in one piece so just when you hear terms from nerds like JQuery, AJAX, React, Angular.JS, vue.js, backbone.js, ember.js remember they are all based on the one language JavaScript.
Again more on this in another article.
People don’t use that kind of language… this is the real world.
!! Warning the following clip is for some light relief and has adult language in it. You’ve been warned.!!
As the expression from the tv series goes… what follows is the land of complicated and most people don’t use this kind of language in the real world.
I’m always complete in my descriptions as a result I’ll very quickly mention “server side programming languages”.
Way too much for here but the names include ASP, ASP.NET / .NET (pronounced dot Net), PHP, Java, C# ( pronounced C sharp ), Perl, Python amongst many others.
Wrap up
So well done on your introduction to HTML documents. You built one and hopefully you understand what a markup language like HTML is… just tags.
You also have all the major terms even if they haven’t fully been explained yet.
More articles will follow in this vein. Knowledge in the right hands is a powerful thing so I hope this helped you learn something new.
[/read]
