Beginners guide to coding your first HTML webpage

I received a lot of questions regarding learning HTML basics. So that’s where we’ll start today, at the very beginning of HTML. I’ve tried to break this down as much as I can. Throughout the series I will cover the basics of HTML and then how to relate that to your blog. Fun fact – the first design related post I ever published was on the basics of HTML, back in July 2011 and that’s what started the idea for xomisse!

What is HTML?

HTML stands for HyperText Markup Language. It is a computer language used to create documents on the web. These documents are text files containing your content (text, images, videos, etc) and HTML tags used to structure that content. Browsers read the HTML page and the HTML tags tell them what to show. Tags don’t appear in the browser. All tags start with a left angled bracket/less than sign like < and end with a right angled bracket/greater than sign like >. To build a basic HTML page you need a text editor, simple text editors include TextEdit, TextWrangler, SimpleText, TextPad or even NotePad. You can get more advanced versions such as Adobe Dreamweaver but it isn’t necessary. Don’t use Microsoft Word!! HTML is not case sensitive, but it’s common practise to use lowercase.

More about tags

There are two kinds of tags: container and empty. The container tag wraps around text or images and must consist of an opening and closing tag such as <html></html>. A closing tag has a forward slash / telling the browser that the tag has ended.

The empty tag stands alone such as <br> for a line break or <hr> for horizontal rule. Empty tags do not require a closing tag as they don’t wrap around anything.

How to set up a HTML page

Let’s take a look at a very basic HTML template to start with.

<html>
<head>
<title>SITE TITLE</title>
</head>
<body>

CONTENT PLACED HERE

</body>
</html>

Notice how when we open a tag, we also close it. HTML documents are divided into two main parts – head and body. The <html> tag tells the browser that this is a HTML document. The <head> tags includes information about your document such as the title tag <title> which appears in the browsers title bar as well as author, keywords, description etc. The stylesheet also appears here but we’ll cover that in the next post. Finally, the <body> tag holds all of your sites content: text, images, graphics, etc.

Create your first HTML page

Open your text editor and paste the following code into a new document

<html>
<head>
<title>MY FIRST WEBPAGE</title>
</head>
<body>

Learning HTML

Hello!

This is my first web page.

I'm learning about - 
HTML Basics and Tags
Headings
Paragraphs
Line Breaks
Horizontal Rule

HTML BASICS by xomisse

</body>
</html>

HTML-Basics

Save the file as example.html to your desktop. Open the file in your web browser to see how it converts the tags. It will look pretty boring right now, but it’s a start that we can build on over this series.

Text Formatting

We can add tags to the text to give it more structure. Today we’ll be covering headings, paragraphs, line breaks and horizontal rule but I’ll talk about more in the future.

Headings

There are 6 levels of headings in HTML, these define the level of importance. For example on a blog, your blog title may be a h1 tag while your post title may be a h2 or h3 tag.

<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h5>Level 4 Heading</h5>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>

Paragraphs

To separate sections of text we use the paragraph tag to add a space between the sections.

<p> This is a paragraph </p> <p> and this is a second paragraph </p>

Line Breaks

To add a single line break we use <br> this is an empty tag, meaning it doesn’t get wrapped around any code or need to be closed. It creates a blank line and sends the following code to the next line.

Horizontal Rule

To create a horizontal line across your webpage we use <hr>

Add text formatting to your page

Open example.html in your text editor again and let’s include some text formatting.

<html>
<head>
<title>MY FIRST WEBPAGE</title>
</head>
<body>

<h1>Learning HTML</h1>

<p>Hello!</p>

<p>This is my first webpage.</p>

<p>I'm learning about - <br>
HTML Basics and Tags<br>
Headings<br>
Paragraphs<br>
Line Breaks<br>
Horizontal Rule</p>

<br>
<hr>

<p>HTML BASICS by xomisse.</p>

</body>
</html>

HTML-Basics-Beginners

So that’s the absolute basics of HTML and probably the most boring part! I’ll be covering more in future posts including CSS, different techniques, how this relates to Blogger and WordPress and how Bloggers Template structure works, but if you have any questions please let me know. You can see all posts in this series by visiting HTML Basics.

    1. The Basics of HTMLthis post
    2. Creating a text or image link and making it open in a new tab/window
    3. Creating and using lists
    4. Text Formatting in HTML

Basics of CSS – The Introduction

Buy me a coffeeBuy me a coffee

5 Comments

Sorry, comments are closed!