I came to know about the internet when I was twelve or thirteen, give or take, and I wasn't - back then - even surfing on the net. I was playing with Microsoft paint, if you remember Windows XP before Vista changed the whole foundation of Windows. At that time, I had no care for software or anything that complicated.
I was just amazed at the fact that I could move the mouse and the screen would show its movements. I would click on the clicker and if I held it and moved the mouse, the paint canvas would paint. And I was proud, to say the least, of getting the hang of it and soon surpassing my mentor in just one week. Back then, the computers were big and square design with a loping back that reminds one about Majin Buu's top knot-like head feeler. And don't worry if you don't get the meaning. It's called dry joke, like HTML without CSS. Anyhow, moving on.
When I was a kid, older than early teens but younger than out of teens, I was too hyperactive to be able to sit down for longer than 10 minutes. And because of it, I was unable to actually do anything with the little knowledge that I had about computing. I was introduced to python when I was 16 years old, or was it 17? yeah, time eludes me. So let us just say, in between those years I was introduced to python and I loved it. But had no aptitude for it. And later on I was introduced to hacking, but I was busy chasing girls and figuring out who I really was. Growing up is a messy business if you don't have a stable mentor that understands your predicament and takes your age into the equation and patiently sticks by you, even when you seem to be a hopeless case. I wish I could say that I had such a person in my life. But no, reality is far far removed from movie depictions, so believe me when I say this, I was hit with facts and life painted a different picture for me, than what I had planned out, shaping me through the actions and wordings that was being uttered by me, myself and I. That road took me to a world that has judged me, questioned me and made me prove my worth each and every time the toll bridge was raised before me. I got tired of it, in the end and just left all that to itself. It was exhausting.
I found freeCodeCamp, where I began my first journey as a student learning about HTML, CSS and JavaScript, the last of which I fell in love with. I couldn't get enough of it. And so my story of how I got into coding is done here.
To those of you, who are intimidated my look of codes, be they HTML, CSS or Python for that matter, remember that it is just a language of a sort. You learned this language called English, and might be you already speak more than one language. Well, coding is essentially the same thing. It is a language invented for us to interact with the computer, the dumbest helper that needs exact instructions on how to help.
In the case of Hyper Text Markup Language or HTML, you have <!DOCTYPE html> which is not a tag. It is "information" for the browser. It tells the browser what type of document to expect. And therefore it must be included into your code. And in HTML5 it has been made easier for us to use. For more info regarding the DOCTYPE refer to
The next thing we will touch upon is the <html> tag. That is an open tag, or an HTML element of which you will hear the tag reference being used more than element, unless you are dealing with Cascading Stylesheet also know as CSS. And no, we will not touch upon here on this post.
The <html> element or tag can be considered as the root or the container of all other tags, excluding the <!DOCTYPE> that identifies to the browser what type of documents it sits on. The closing tag </html> has forward slash and it is an indicator that tells you the tag of html ends here with the closing tag. And all the tags found inside it are valid code blocks for the browsers that displays them.
Of course you need more code blocks before you are actually ready to display your website's content through the browsers. So let us just list the remaining tags here. Inside the open and closing tags of your <html></html> the elements that has to be used, must be done so in a structural order. And I'll show you just what that entails.
First comes <html> tags, inside the root tags comes the <head> tags and here you place meta data, links and the title of the page. And then beneath the <head> tags, but still inside the <html> tags you need another element called the <body> tag. This is where the content of the website is put and here is where all the contents that the browser displays are found. From navigation, home, about etc. all are inclusive to the <body>.
Every developer who has made or published a website has used these two elements to display content. And they are <h1> and <p> tags where <h1> or header 1 goes down all the way to header 6 or <h6> and the <p> tag or paragraph tag that doesn't have any siblings like the headers. And the term sibling is actually used in CSS when styling the page through selectors - another phrase - and such methods, so please don't quote me on this when explaining about <h1> headers.
Now let us look at what we have covered, and then I will use these tags to create a simple web site.
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The element is the root element of an HTML page
-
The
element contains meta information about the HTML page -
The
element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) -
The
element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. -
The
element defines a large heading
-
The
element defines a paragraph
Let us use these tag elements and make a simple website.
<!DOCTYPE html>
<html>
<head>
<meta name="here goes the name of the meta" content="here goes the meta information">
<title>Here Goes The Title</title>
</head>
<body>
<h1>This is header one. Change the number to see the differences. It takes up to 6</h1>
<p>Here is where you put the paragraph content</p>
</body>
</html>
And that in a nutshell is how you create a website.
Top comments (2)
Hey, just wanted to let you know that I really enjoyed your article on HTML fundamentals.
How has your progress with HTML been so far?
Thank you. I am still a novice, but I am progressing. The repetition is killing me, and freecodecamp are hardcore when it comes to teaching. Honestly, I am enjoying it. Thank you for reading, glad you enjoyed it.