Html which stands for Hyper Text Mark-Up Language is a mark-up language for creating web pages and web application. Html is used to build the structure of web pages, it’s the most basic block of the web.
Html is the main technology for building webpages having evolved over the years, the latest version of it is HTML 5 which is generally referred to as html.
You can think of a webpage as a human body and we all know for our bodies to take the shape it has we need our skeletons. Html is the skeleton of webpages, web applications and in extension native mobile applications and some desktop applications too (which we won’t look at today).
You can see already that html is a skill everyone should have.
Html contrary to what people (non-programmers and some newbie programmers) think is not a programming language (I chipped this one in so you guys won’t feel the weight or hype of having to learn programming yet).
Html is easy to learn and I’m going to take us through the basics in this short tutorial to get us up and running. So getting the introduction part done from your fellow noob let’s get started!
Html documents are files with the extension .html as shown in the picture below. There are various text editors for viewing and editing them. I would recommend Sublime Text for you guys it’s partially free and you can download it here
Html tags are like the commands we use to structure our website. Let’s say you want pictures on your website you use the picture tag, you want a big text Like this one you use the header tag, you want an italics as text like this one you use the emphasizes tag. Think of tags just like mark-down styling guides we use on steemit (You can use html directly to style your code on steemit once you get a hang of it).
Here we would just take a look at a little percentage of the tags we have. I don’t want to stretch you too much, I would leave of good tutorials for you to further you learning.
Tags in html are written in special ways as you may have noticed already in some of the pictures used above. The basic way of writing tags in html is beginning with “<” then followed by the tag name (we would use the paragraph tag here which is “p”) “<p” then you end with “>” “<p>”. This “<p>” is referred to as the opening tag (if it sounds confusing we would clarify it soon).
Most html tags have an opening and a closing tag, the content you want to modify or structure goes between the opening and closing tag.
Think of tags like burgers, the top part of the bread is the opening tag, the meat and everything inside the burger is the content and the other bread is the closing tag (hope that was understandable).
Writing the closing tag is pretty easy and is a similar syntax (way of writing) to the opening tag. The closing tag starts with “<” followed by “/” “</” and then the tag name (the paragraph tag)“</p” then it ends with “>” "</p>”.
So when writing the paragraph tag we write it like this
“<p>” Our content “</p>”.
So the basic syntax is
“<tagname>” Content “</tagname>”(easy as eating pie right?).
Now that we know how to write tags let us get busy then.
This is the first tag in our html document and it’s needed in every html file. It’s only written once per file. It’s written this way “<!DOCTYPE html>” (This is an exception to the opening and closing tag rule as you may have noticed).
This tag basically tells your browser what kind of document it is viewing. It’s mainly just for formality
Our document begins with this tag and all other tags are nested inside it. It starts with “<html>” and ends with (yes you got it) “</html>”.
This tag houses all the technical details of our site. The language, title, keywords for search engines etc. Mostly technical things our site need that we can’t see.“<head>” ”</head>”
This tag resides inside the head and as the name implies it houses the title of our site or application. “<title>”Our Cool Site “</title>”
This is the part that contains all the visible and cool stuffs of our site. Just like the name implies it houses the body of our site. “<body” “</body>”
This is the tag we use for making big titles in our site (like the title above). They range from header one (h1) to header six (h6). “<h1>”Big Text “</h1>”
As the name implies are used to define paragraphs.“<p>”Our paragraph “</p>”
The strong tag is used to bold text.“<strong>” “</strong>”
Tag is used to make text look like this.“<em>” “</em>”
This tag is used to create links to other sites. “<a href=’https://www.google.com.ng>’”Google”</a>”. Href here is an attribute that contains the address of the site we want to link to.
Defined with the “img” tag, we use it to display images on our site. Src here is the path to our image.
There are various ways of listing items on our website. I think three or four, but we are going to talk about just two here. The ordered “<ol>” “</ol>” and unordered “<ul>” “</ul>” list. Examples are shown in the pictures below.
I would want to stop here, please note this is just a minimal part of what is to be learnt about html. I just wanted to give us a good foundation about the language. We have other tags like the input tag, form tag and so much. I have left links below to good tutorials that you can use to get up and running.
Thanks for reading and hope you enjoyed the tutorial. Forgive my presentation I’m not really a good teacher, but am working on that.
All credit goes to Bucky Roberts for helping guys like us get up to speed with programming
Image Credit goes to my sweet ubuntu system
thanks to
@malos10 for this very nice gif contact him if you want yours
