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, Adobe Dreamweaver or NotePad.
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>
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>
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.
5 responses to “Beginners guide to coding your first HTML webpage”
Great beginner info. Thanks!!
Thank you so much for sharing this beginner tut; much appreciated.
Such valuable information explained so simply. Thank You so much!!!
Thanks so much this is very informative!
Grande y simple explicacion!! thanks