Learn the Basics of HTML Coding

There’s no doubt that knowing a bit of HMTL is very useful. HTML stands for HyperText Markup Language. HyperText is the links that let you go to other web pages, and Markup means you’ll use some simple characters to mark how you want your words to appear. While you can do very complicated things with HTML, the basics are straightforward.

If you’ve used a word processor that has styles, you probably already understand the basic idea – you may want some words to be bold, and others to be italic. In HMTL, type plain text, and use markup to describe how it should display. When you view your text in a web browser, the formatted text is shown. Different browsers may display the text slightly differently. You’ll also use markup to make your links to other pages.

website html basics tutorial

One important thing to know is that any HTML5 formatting you type in your editor, like tabs, extra spaces and carriage returns are ignored when the page is displayed. You must use the markup to do your formatting.

How To Enter Markup

In HTML, the markup has a standard format – the markup instructions go inside angle brackets, like these <>. you can compose your documents in notepad or another very popular option is using an online HTML editor. There’s always a start and end to a markup. If you want some text to be bold, you start with <b> and you end with </b>. The slash indicates you’re done with the bold markup. For example:

Do <b>not</b> leave the door open, <b>or else!</b>

Displays as

Do not leave the door open, or else!

Here are some of the common markup types, also called tags:
<p> Starts a paragraph.
<i> Italic
<b> Bold
<h1>, <h2>,<h3> Header1, Header2, Header3

How these display depends on your browser, but they are headings, and usually are a bigger font than the main text.

How to create an HTML page?

Every HTML pages has the following parts – it is marked as an html document, has a head, and a body.
The head typically has material related to managing the page. Except for the title, we won’t look at the thing you can do there in this article.

The body is where you put your page’s content. A basic page looks like this:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a brand-new web page.</p>
</body>
</html>

Copy this text into an editor, like Notepad, and save it as text. Name the file “mypage.html”. Now open file with your web browser. Look at the top of your browser – you should see the title, and in the browser, you’ll see the words in the body.

Experiment with this a bit. Add some more text, and use the <b> and <i> to format the text. Add another paragraph. Don’t forget to close any markup you start with a matching end markup.

Adding links

To add a link, you use markup again. The HTML6 source code editor has a great feature to create HTML tags with its wizard, but for now let’s say you want a link to your company’s web site URL, http://www.wwweeebbb.com. You need to do two things: mark which part of your text will be a link, and indicate the URL. The tag <a> shows what part is to be linked. In this example, “our website” will have a link:

<p>If you’d like to know more, visit <a>our website</a>.</p>

To complete setting up the link, you must add the URL to the starting <a> tag, using a hypertextreference (an href). The format for this is

href=”http://www.wwweeebbb.com”

Some hints: The URL is quoted. There are no spaces between the href, equal sign or the location. Here’s how it to enter it in your web page:

<p>If you’d like to know more, visit <a href=”http://www.wwweeebbb.com”>our website</a>. </p>

When you open the page in a browser, you’ll see:

If you’d like to know more visit our website.

Experiment with adding links to different popular websites, until you feel comfortable with using the links. To link to another page in the same directory as your current web page, you use the same format. You don’t have to enter the full URL, just the page name.

<p>See the <a href=”page2.html”>Next Page</a></p>

When you open the page in a browser, you’ll see:

Getting links to work right can be a challenge. Probably the most common mistake is a typo in the URL. On way to avoid this is to go to the site to which you’re linking and copy the URL directly from the address bar in the browser. Another common mistake is to forget to enclose the URL in quotes.

Summary

I hope this article has given you the basics of HTML. Always try to avoid Bad HTML code There are more things you can do in HTML. There are many resources that can help you learn more: online tutorials, books, and courses. The W3C, the group that standardized HMTL, has a good tutorial at http://www.w3schools.com/html. When working with HMTL, it’s good to try things, and then look at the pages you create in a browser, to see the results.