Hello and welcome again to my little corner. I am appreciative of the response I got to my previous post and if anything, that has motivated me to continue to make this a date.
So without further ado, let’s begin to get our hands dirty. I promise to keep it simple for my absolute beginners.
WHAT IS HTML?
The full meaning of HTML is Hyper Text Markup Language. This is the language used to create web page documents. Let me break this down for you.
HTML is the building blocks/foundation of web pages. If I were referring to a human, I would call it the skeleton. It is the underlying structure of a web page. If you are interested in (Front end) web development, then HTML is a good and sensible place to start.
Now let me give you a little tip for learning any computer language(s). Like I said in my previous post, it is a language like any other. You can understand it. All you need is patience and a lot of confidence in yourself and maybe me on the side, with my little blogs.
So get out your computer/laptop/MacBook. You’re not just going to read a bunch of text. You’re going to figure out how it all actually works.
I’ll throw you into the deep end and then we’ll work our way back wards. Sound good? Okay then.
View Website
View Website
View Website
You’ve put on your laptop. Go ahead and download Sublime Text/Visual Code Studio. This is our code editor. This is where we write down our languages, where the magic happens. That’s all you’ll be needing... for now.
Right click and something like this will pop up, then create a new folder and title it whatever you want.
Now go to your code editor, open up a new file and title it ‘index.html’, without the quotes, obviously. ‘Ctrl’ ‘S’ to save and when that little box, comes up, go to the folder you just named and save it in there.
Done? Great! Well done!
Now let’s open up our File Explorer. Go to that new document. What do you see? Index.html sitting pretty. Click on it and what happens? A fresh layout for the web page we’re about to build. Great.
At this point, we have to talk about tags. HTML tags are like keywords that dictate how the browser will display the content. HTML tags normally come in pairs (start tag and end tag).
Examples:
<h1>...</h1> (Heading Tag)
<p>...</p> (Paragraph Tag)
<footer>...</footer> (Footer tag)
Notice the forward slash in the end tag. Necessary!
There are self closing tags that are not accompanied with end tags however. eg <br>, <img> etc
Enough chit chat. Let’s go back to our code editor and start building with our tags.
Write this out on your code editor (each code on a new line):
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Now let’s study the 8 lines of code very carefully. The first line tells us the type of document this is. The second and eight line is the opening and closing tag of the HTML element. The third and fifth line is the head tag. I talked about HTML being like the human skeleton. Which makes sense, because the head comes before the body. We have the title tag which contains the title of our webpage. And then the body tag.
So in the title tag, go ahead and write the title of your web page.
Eg:
<title>A baddie</title>
‘Ctrl’ ‘S’ and then refresh your browser. What do you have?
The title of our webpage. Good.
Now let’s do something else in our body tag.
<body>
<h1>A Baddie’s Blog</h1>
</body>
Refresh your browser and see what you have there.
Now let’s say, we want more content in a baddie’s blog. What do we do? We create more content. In this case, we’ll use the paragraph tag to do that.
Note that we can type ‘Lorem’ and then the ‘tab’ keypad to create dummy text. So let me give you a little assignment. Under the heading tag, open up a paragraph tag and put in some dummy text for your blog. How’d you do?
Great!
When I first built my heading and a paragraph, I was over the moon. And trust me, it gets better when you learn CSS. We have to make that page look pretty. You’re only just getting started. Are you as excited as I am for you?
Play around with other tags. Think of something you want to build with HTML and see how you can make that happen. I scratched the surface with HTML; but do well to explore other resources. Traversy Media on Youtube, Code academy, free code camp etc.
The response(s) to this article will give me an inkling into whether I should write out a Part 2 of HTML 5 or move on to CSS.
Once again, I’ll leave my mail below for any questions and/or inquiries. I’m taking compliments too. ([email protected])
Comments (0)