A step-by-step walk through of your first HTML page
Coding ninjas Official Blog
A step-by-step walk through of your first HTML page
HTML is short for Hyper Text Markup Language Basically, it's the "code" behind every webpage - even this one. If you're just beginning to learn HTML, let us tell you that it's a fairly easy task. HTML without styling, can't do anything more than setting a layout, drawing a table, or creating frames- but it is handy as it helps you structure the content correctly, which is important when you sit down to add style to your HTML.
However simple this might seem, it is a mighty useful tool when it comes to full-fledged web development. Various tools easily eliminate the HTML coding from your work process - but if you want to be in full control of your web-page, you'll need to have some command over HTML.
Through this article, we aim to give you the essential HTML building blocks that'll help you get up and running. Reading this, you'll be able to understand an HTML source code and even modify it for your own good!
Step One - TAGS
Tags are what you'll see the most when you look at any HTML source code. A tag can ideally be seen as a wrapper to any item on your HTML document. Tags tell what magic is to be done on the content enclosed by them.
Let's look at two types of tags:
- <tag-example-1>I need a closing tag tag-example-1>
- <tag-example-2/>I don't need a closing tag
In the first example, the sentence is wrapped by two tags. The first one is called the opening tag and the second one is called the closing tag. Everything in between is affected by the properties of the tag. Very commonly used examples of such tags are <html> <head> <body>, <strong>, etc.
The second example tags about loner tags - as in, they don't need a closing tag to function. Although it's not required, these type of tags are often written as <tag> to make the debugging of code easier Common examples of such tags are <hr/>- used for horizontal line, <br>-to break the line, etc.
Step Two - HTML, HEAD, and BODY: The three pillars of your document
These tags are essential for any HTML document. They parcel out the significant parts of your HTML code.
- <BODY> </BODY> is placed below your <HEAD> tag, and everything that you want to be displayed on your screen comes under this tag. Text, images, links, and pretty much anything you can see in your browser live inside this tag.
- <HTML> <HTML> wraps your entire code. Everything else in your HTML document needs to come inside these tags.
- <HEAD> <HEAD> includes things like title, styles, and scripts. Head is usually present at the top (hah!), just inside the <HTML> tag.
Step three - A few tags that'll make your page pretty
Now that you know how to set up the skeleton of your document, let's proceed with the things that will go inside your <BODY> tag and do some magic!
Some basic text formatting tags:
- <b></b> makes your text look bold
- <i></i>makes you write in cursive
- <u></u> underlines what you just wrote
For example, this piece of code
<html>
<head> </head>
<body>
<i> I am italics! </i> <br/>
<b> I am bold! </b> <br/>
<u> And me, well, I'm underlined! </u> <br/>
</body>
</html>
Should produce something like this on your browser. Don't fret too much about the <br/>. It's just for breaking the line so that you can start from the next line. Enter key does little when it comes to changing lines in your HTML document.
I am italic
I am bold
And me? Well I'm underlined!
Comments
Post a Comment