A Step-By-Step Tutorial For Coding Your First HTML Document- I | Codin India
Now that we’ve looked at the basics of HTML, HTML Tags and HTML elements and attributes it’s time to put this knowledge to use by creating an HTML document
In this
tutorial, we’ll go through all the steps required to turn a blank text document
into a fully functional HTML document that can be viewed in a browser. We’ll
look at how to add some of the most commonly used elements to a document, and
we’ll try using some attributes for extra customization.
By the
end of this tutorial, you’ll have your own “HTML Cheat Sheet” document. In the
future, if you forget how to add an image to an HTML document or you’re
confused about whether you should be using “ordered” or “unordered” lists, you
can come back and check your HTML cheat sheet.
Step 1 – Create A New Document In Your Text
Editor
The first thing
we’re going to do is open up our text editor and create a new document.
For this guide
we’ll be using the Brackets text editor, but you can use any text editor you
like.
Once you’ve
created a new blank document, click “Save” and give the document a name. There
are a number of naming conventions that you need to follow when creating an
HTML document.
- HTML
documents should be saved with the .html file extension.
- The default
homepage of a website will usually be named “Example.html”, as this is the
default file that browsers look for when accessing a website.
- You should
only use alphanumerics (a-z, 0-9), dashes (-), underscores (_) or tildes
(~) in the page name.
- You should
only use lower case letters as some servers are sensitive to case.
- Never use
spaces in the file name of HTML documents.
- It’s a good
idea to create a naming convention and stick to it when planning a complex
site.
You can pick any
name you like as long as it follows these rules. For this guide, we’re going to
name our document “Example.html”.
Step 2 – Create A Basic HTML Template
Next, we’re going
to create a basic HTML template that you can use for any future HTML documents.
We’re going to add four elements – DOCTYPE, html, head and
body.
On the first line
of the document, add this element:
<!DOCTYPE
html>
This is a special
declaration that helps the browser display the page correctly by telling it the
type of code we’re writing (in this case it’s HTML5). It should appear once at
the start of the document before any other elements. This is a special element
that doesn’t require a closing tag.
Next, we’re going
to add the HTML opening and closing tags. These tags tell the browser that
everything between the two tags is the HTML code that the browser needs to
interpret.
We’re going to be
adding lots of code between these two tags, so we’ll write each tag on a
separate line. Add these two lines to your code:
<html>
</html>
Next, we’re going
to add the head opening and closing tags on separate lines inside the html
element.
The head element
contains meta information about the document that will not be displayed
by the browser. We’re going to add things to the head element later, so we’ll
put a blank line between the two head tags to make it easier to read. Go ahead
and add <head>, a blank line and </head> to the html element. It
should look like this:
<!DOCTYPE
html>
<html>
<head>
</head>
</html>
The last thing
we’re going to add to our template is the body element. The body element
contains important information about the document that will be displayed
by the browser. This is where we will write most of our code.
The body element
requires an opening tag and a closing tag, and it should be written inside
the html element, after the head element. Go ahead and add the two body
tags, as well as a blank line in-between. It should look like this:
<!DOCTYPE
html>
<html>
<head>
</head>
<body>
</body>
</html>
This template
will form the foundation of our HTML document. In your text editor, it should
look something like this (note: the numbers on the left side are included by
some text editors to make your code easier to read – they are NOT part of the
code):
Step 3 – Add A Page Title And Practice Some
Indenting
The next thing we’re
going to do is add a title to our page.
The page title is
different from the file name. The page title is what is displayed in the
browser tab, and it is also what is indexed when search engines (such as
Google) crawl your site.
We write the page
title inside the title element, which we add to the head element of our
document. When we add the title element to the head, we’re going to indent
it.
Indenting an
element simply means moving it one step to the right. The reason we do
this is to make our code easier to read.
Go ahead and add
an opening title tag, the title of your page (it can be anything you like), and
a closing title tag to the head element. Don’t forget to indent your element
one step. When you’ve done that, the document should look like this:
Step 4 – Add Some Headings And Preview In The
Browser
It’s time to
start adding some content to the body of our HTML document. The first thing
we’ll start adding are headings.
Headings are very
important.
Headings define
the structure of your document. Search engines use headings to index the
structure and content of your page. If you don’t have your headings set up
properly, it may be harder for people to find your page when they use a search
engine.
People also use
headings to skim through webpages, so having a good heading structure makes
your page more reader friendly.
We can use the <h1>
to <h6> tags to define our headings. <h1> the most important
heading and <h6> is the least important heading.
To see how
headings work, let’s go ahead and add six headings to our document. The
headings should be in the body element, and should be indented one step. You
can put any text you’d like as the heading content. For this guide, we’ll just
name them “Heading X”.
Add these lines
to your body element:
<h1>Heading
1</h1>
<h2>Heading
2</h2>
<h3>Heading
3</h3>
<h4>Heading
4</h4>
<h5>Heading
5</h5>
<h6>Heading
6</h6>
Your document
should look like this:
Now that we’ve
got some content in our document, let’s see what the document looks like in our
browser.
Save the HTML
file in your text editor. Now go to the directory where you save the file then
open the file using browser.
When you open the
document in the browser, it should look like this:
Notice how we
have six different sized headings. We also have the page title showing in the
browser tab.
From now on,
anytime you make changes to the HTML document you should save the file and
preview it in your browser, just to make sure that you haven’t made any errors.
Step 5 – Add Some Paragraph Text
The next thing
we’ll do is add some paragraph elements. Paragraphs contain all our
basic text content, and can be created using the <p> tag.
Adding text to a
paragraph element is much the same as writing regular text except for one
important difference: the browser will remove any extra spaces or lines when
displaying the text.
For example, this
code:
<p>
This is
a long paragraph.
It has
many lines
of HTML code.
</p>
Will actually
display as:
This
is a long paragraph. It has many lines of HTML code.
Another example
is this code:
<p> This
code has some extra spaces in some very strange places. </p>
Will actually
display as:
This
code has some extra spaces in some very strange places.
If we want to our
code to display on a new line, we can use the <br> page break
tag. Anytime we insert this tag into our paragraph code, the following text
will start on a new line. The page break tag is always empty, so it doesn’t
require a closing tag.
If we add some
page break tags to the first example, we can make it display on separate lines.
This code:
<p>
This is<br>
a long
paragraph.<br>
It has<br>
many
lines<br>
of HTML code.
</p>
Should display
like this:
This
is
a
long paragraph.
It
has
many
lines
of
HTML code.
Let’s add two
paragraphs to our HTML document. We’ll add them below the headings. The first
paragraphs will be a simple short paragraph:
<p>This is
a short paragraph</p>
The second
paragraph will be a long paragraph that we’ll break up over a few lines:
<p>
This is a longer
paragraph.<br>
We’re using page
breaks<br>
to have it
display<br>
on four lines.
</p>
Our code should
look like this:
You can open the
file in your browser to make sure it displays properly.
The Output window
will show:
In our next blog we talk about how to add formatting and style to text etc.
I hope you like this post. Kindly don't forget to subscribe our YouTube channel too - Codin India
Comments
Post a Comment