Friday, December 28, 2018
GETTING STARTED WITH HTML 5| ALL YOU NEED TO KNOW
HTML 5 is the latest version of HTML. This means that HTML has older versions such as HTML 4, HTML 3,and so on. HTML 5 came with numerous features that made it uniquely unique. It has, for instance, a default character encoding commonly known as ‘charset.’ The ‘’charset’’ of a thing is expressed in the manner below:
<meta charset=’’UTF=8’’>.
Another striking feature of HTML 5 is its introduction of ‘’DOCTYPE’’ (document type) at the beginning of HTML document. My mentor often calls it ‘Door-opener’ of markup language.
This means that for a code to be valid in HTML 5, you must first declare the ‘’DOCTYPE’’. In other words, you have to signify the language you are using before you proceed. The format you can use to declare your document type is below:
<!DOCTYPE html>
It is also pertinent to note that some special elements are included in HTML 5. These elements include <video>, <audio>, <datalist>, <aside>, <canvas>, <progress> and many more. More so, this newest version of HTML has API (That is, Application Programming Interface). That sounds amazing.
But wait a minute… you seem confused? Hmm, well, never mind, as we progress you will understand better, I promise.
If you’ve not studied our previous lessons on HTML, then double confusion continues. But if you’ve practically been following me, can I once again take you by hand and walk you through this HTML hot-cake? Okay, let’s move on.
THE IMPORTANT PAGE ELEMENTS OR STRUCTURES IN HTML 5
One of the important page elements or structure in HTML 5 is the <header> (this is totally different from the <head> tag we discussed in our first lesson on HTML). The <header> here may contain things such as the site logo, etc. Other HTML 5 elements include: the <nav> element (for easy navigations), the <footer> element (usually at the bottom of a website), the <video>, the <audio>, the <section>, the <canvas>, the <aside> element and so on.
These are the most important aspect of HTML 5, hence, I will try my possible best to resist every temptation of rushing over the lesson. Make sure you practice with me, please.
For easy comprehension, I will be considering the first three most important page element in this lesson. Are we good to go? That’s splendid!
1. The <header> element
This element is different from the <head> as we’ve stated above. The <header> element is used between the <body> tags to indicate website or blog headings. It is also good for placing advertisements. For instance, If you are applying for Google AdSense (for monetization of a blog), they will request you place a certain ad code within your blog <header> section.
The example below provides us with a resplendent illustration on how the <header element work. Open your text editor and type in the following codes (Remember, we will first declare our doctype.
In a jiffy, can you succinctly tell me the doctype we will be using? ….no, try again…… Yes, you got it!).
So write the following code below
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>Happy Christmas Dear</h1>
<h4>And Happy New Year</h4>
</header>
</body>
</html>
It will look like this on your text editor
Save it and then open it with your web browser. It will look like this ( Note: it doesn’t require internet connection)
2. The <nav> element
The <nav> Element is used to define a page or part of a page that is linked to another page or part of a page.
Let’s critically examine the example below:
(NOTE: the hashtag symbol (#) is where you can put your link to the page.)
<nav>
<ul>
<li><a href=’’#’’>Home</a></li>
<li><a href=’’#’’>About Us</a></li>
<li><a href=’’#’’>Contact Us</a></li>
<li><a href=’’#’’>Disclaimer</a></li>
<li><a href=’’#’’>Privacy Policy</a></li>
</ul>
</nav>
It will look like this in your text editor
Save it and then open it. You will definitely see something like this
3. The <footer> element
The <footer> element as the name suggests, is located at the bottom of every website or blog. When building or designing the footer of a website or blog, this element usually plays a very significant role.
Follow the format below whenever you want to work on the footer section of a website or a blog.in ot
<footer></footer>
For example,
<footer>About the Author</footer>
WRAPPING UP
Practice, Practice, Practice. That is the success secret that remained secret to most people reading this. See you in my next lesson.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment