In this tutorial we’ll build a simple web page using HTML. This is aimed at people who are starting out with HTML but have a basic understanding of the syntax. If you’re completely new to HTML you can still follow along and learn a few things. Make sure to check out the W3C introduction to HTML if you’re interested in a deep dive about HTML.
You can find the completed code for this tutorial here.
Table Of Contents
- How to create an HTML file
- How to create a basic HTML document
- Sections, headings & paragraph text
- How to preview the web page
- Creating a list
- Formatting text
- Hyperlinks
- Basic styling
- Adding images
- Create a new HTML file First we’ll need to do is create a new document. There are a few ways we can create a document but I’ll be using the text editor VS Code to do this. You can use any text editor you prefer.
Here are the steps for creating a new file in VS Code.
Open VS Code
Select “New File” in the File menu or press Ctrl + N on Windows or Cmd + N on macOS.
Select “Save” in the File menu or press Ctrl + S on Windows or Cmd + S on macOS. You will then be prompted to enter a name of the file.
creating an HTML file
HTML documents should have .html file extensions.
Generally the homepage of a site is named “index.html”. “index” indicates that this is the default file that the browser will load.
You should only use alphanumerics, dashes, underscores, or tildes in the page name.
Don’t use spaces in the file name
Use lower case letters when naming HTML files. The name of an HTML resource is typically used in a URL. URLs are generally case-sensitive.
- Create a basic HTML document Now that we have an HTML file we can start writing some HTML to create our web page. We’ll start by adding a few elements that are typically found in most HTML files.
<!DOCTYPE html>
<html lang="en">
<head> </head>
</html>
<body> - The body element represents the contents of the document. There can only be one body element in a document.
Add the body element inside the html element right after the head:
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body></body>
</html>
Add the title element inside the head element and name it however you’d like:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Introduction to winter camping</title>
</head>
<body></body>
</html>
You’ll noticed how some of the elements are now indented, this is done to make the code easier to read. Indenting is an opinionated area of coding. Everyone has there own preferences but as long as it’s consistent and serves to increase readability then use any style you prefer. For this tutorial I’m using a code formatter called Prettier which is set to automatically format the HTML document when I save.
There is one more element that we’ll add to this basic layout, which you’ll frequently see.
- The meta element represents different types of metadata. There are many different uses for the meta tag, but there are two which you’ll regularly see (especially if you’re using HTML snippets) and these are the ones we’ll discuss.
Let’s add the two meta elements inside the head element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Introduction to winter camping</title>
</head>
<body></body>
</html>
The first meta element with the attribute charset="UTF-8" is called a character encoding declaration., this indicates which character encoding is used to store or transmit the document. If you’re just starting out, don’t worry too much about the technical aspects of this element, but it’s a good idea to understand what it does if you see it.
The second second meta element is called a viewport meta tag and it was introduced by Apple so that developers could modify the viewport size and scale. While this meta tag is very common due to the need to support mobile devices, it is not necessary for all web pages.
- Sections, headings & paragraph text If we were to view this page in a browser you wouldn’t actually see anything rendered in the viewport. That’s because we haven’t added any content to the body element. So let’s add some content to this web page.
- A section element can represent a certain section of the document. In this example the web page is going to have an introduction section, a camping gear section, a photo section.
h1, h2, h3, h4, h5 & h6 elements - These represent headings in the document are an important part of a web page. Headlines have an SEO value and are also important for accessibility. We’ll learn more about semantics and structuring web pages in future tutorials, for now note that headings are important parts of a web page.
- The p element represent paragraph text. Let’s go ahead and add the first section and it’s elements, feel free to follow along with this example or put your own spin on the web page.
</p>
Introduction to winter camping
<h1>Winter Camping for Beginners</h1>
<h2>Introduction</h2>
<p>
With careful planning and preparation, winter camping can be an amazing
experience. If you're thinking about going camping in the winter, this
page is a great place to start.
</p>
<p><br>
</p>
<pre class="highlight plaintext"><code>
</code></pre>
<p><!DOCTYPE html><br>
<br>
</p><br>
<br>
<br>
Introduction to winter camping<br>
<br>
<br>
<h1>Winter Camping for Beginners</h1><br>
<br>
<h2>Introduction</h2><br>
<p><br>
With careful planning and preparation, winter camping can be an amazing<br>
experience. If you're thinking about going camping in the winter, this<br>
page is a great place to start.<br>
</p><br>
<br>
<br>
<h2>Winter Camping Gear</h2><br>
<p><br>
<mark>Winter camping</mark> requires a bit more gear than a summer<br>
camping trip would. It's <strong>important to be prepared</strong> for<br>
the cold temperatures which <em>can become dangerous.</em> Here is a<br>
list of gear that would be helpful when <mark>winter camping.</mark><br>
</p><br>
<ul>
<br>
<li>Snowshoes</li>
<br>
<li>Winter tent</li>
<br>
<li>Cold-weather sleeping bag</li>
<br>
<li>Insulated sleeping pad</li>
<br>
<li>Handwarmers & footwarmers</li>
<br>
<li>Winter boots</li>
<br>
</ul><br>
<br>
<br>
<pre class="highlight plaintext"><code>
6. Formatting the text
Now that we have a bit more content let’s add some formatting to the text. Formatting will change the appearance of the text and help make the page more readable. There are several different elements we can use to accomplish this:
<b> - This element represents bold text. It’s used to draw attention to or convey extra importance to specific text.
<strong> - This will render the same as the <b> element, however <strong> is semantic and helps describe the text it surrounds.
<i> - This element represents italic text and is used for an alternate mood from the regular text.
<em> - This marks the text to have emphasis
<mark> - This represents text that is highlighted or marked for reference.
<small> - This represents side-comments and the text it surrounds will render smaller.
<del> - This represents deleted text.
<ins> - This is used to represent inserted text. ins and del are both used to help track changes of a document.
<sub> - This element represents subscript text. Subscripts are rendered with a lowered baseline & smaller text.
<sup> - This element represents superscript text. The text is rendered with a raised baseline & smaller text.
Let’s go ahead and add a few of these elements to the previous paragraph section that we added.
7. Create a hyperlink
Start of the World Wide Web is the ability to define links from one page to another, and to follow links at the click of a button. This is Hyperlink.
— World Wide Web Consortium (W3C)
Hyperlinks are what make the web an actual web and are an important part of any web page. Almost any type of content can be converted to a hyperlink so that when a user clicks on that link they are brought to another URL.
We can create a hyperlink using the following element:
<a> - The a elemet or anchor element, has an attribute called href , that when used creates a hyperlink.
Let’s have a look at an example below:
<a href="https://www.w3.org/">the World Wide Web Consortium homepage</a>.
Which would result in:
the World Wide Web Consortium homepage.
Okay so know that we know the basics, let’s add a couple of hyperlinks to the list of winter camping gear. When a user activates them they will be brought to another address.
</code></pre>
<p><!DOCTYPE html><br>
<br>
</p><br>
<br>
<br>
Introduction to winter camping<br>
<br>
<br>
<h1>Winter Camping for Beginners</h1><br>
<br>
<h2>Introduction</h2><br>
<p><br>
With careful planning and preparation, winter camping can be an amazing<br>
experience. If you're thinking about going camping in the winter, this<br>
page is a great place to start.<br>
</p><br>
<br>
<br>
<h2>Winter Camping Gear</h2><br>
<p><br>
<mark>Winter camping</mark> requires a bit more gear than a summer<br>
camping trip would. It's <strong>important to be prepared</strong> for<br>
the cold temperatures which <em>can become dangerous.</em> Here is a<br>
list of gear that would be helpful when <mark>winter camping.</mark><br>
</p><br>
<ul>
<br>
<li>Snowshoes</li>
<br>
<li>
<br>
<a href="https://www.rei.com/c/backpacking-tents/f/se-4-season">
>Winter tent</a>
><br>
</li>
<br>
<li>
<br>
<a href="https://www.rei.com/c/sleeping-bags-and-accessories">
>Cold-weather sleeping bag</a>
><br>
</li>
<br>
<li>Insulated sleeping pad</li>
<br>
<li>Handwarmers & footwarmers</li>
<br>
<li>Winter boots</li>
<br>
</ul><br>
<br>
<br>
<pre class="highlight plaintext"><code>
8. Style the web page
If we have preview the web page right now we’ll see that it’s not the most exciting to look at. We can change that by adding some basic styles to the HTML document. To do this we’ll add a <style> element which allow us to embed CSS in the HTML document.
We’ll add the style element in the head element of the HTML document. I won’t go into detial about the CSS that I’ve included, if you’re curious about anything specific check out the MDN CSS reference docs.
</code></pre>
<p><!DOCTYPE html><br>
<br>
</p><br>
<br>
<br>
Introduction to winter camping<br>
<br>
html {<br>
max-width: 800px;<br>
}<br>
body {<br>
background-color: white;<br>
margin: 0 4rem;<br>
font-family: Arial, Helvetica, sans-serif;<br>
font-size: 1.15rem;<br>
}<br>
section {<br>
border-bottom: lightblue solid 2px;<br>
}<br>
h1 {<br>
font-size: 3em;<br>
}<br>
ul,<br>
li {<br>
list-style: square;<br>
}<br>
em {<br>
color: red;<br>
}<br>
<br>
<br>
<br>
<h1>Winter Camping for Beginners</h1><br>
<br>
<h2>Introduction</h2><br>
<p><br>
With careful planning and preparation, winter camping can be an amazing<br>
experience. If you're thinking about going camping in the winter, this<br>
page is a great place to start.<br>
</p><br>
<br>
<br>
<h2>Winter Camping Gear</h2><br>
<p><br>
<mark>Winter camping</mark> requires a bit more gear than a summer<br>
camping trip would. It's <strong>important to be prepared</strong> for<br>
the cold temperatures which <em>can become dangerous.</em> Here is a<br>
list of gear that would be helpful when <mark>winter camping.</mark><br>
</p><br>
<ul>
<br>
<li>Snowshoes</li>
<br>
<li>
<br>
<a href="https://www.rei.com/c/backpacking-tents/f/se-4-season">
>Winter tent</a>
><br>
</li>
<br>
<li>
<br>
<a href="https://www.rei.com/c/sleeping-bags-and-accessories">
>Cold-weather sleeping bag</a>
><br>
</li>
<br>
<li>Insulated sleeping pad</li>
<br>
<li>Handwarmers & footwarmers</li>
<br>
<li>Winter boots</li>
<br>
</ul><br>
<br>
<br>
<pre class="highlight plaintext"><code>
Let’s have a look at what the web page looks like now.
web page with image inserted
As the The Net Ninja would say, it’s not going to win any design awards but for our first web page it’s starting to take shape.
Wrap up
In this tutorial we learned how to create an HTML document, we learned about some commonly used elements such as lists, images, hyperlinks, headings and paragraphs. We applied some basic styles and formatting to the text to make the design a bit more appealing.
From here I’d suggest to roll up your sleeves and start coding your own HTML page from scratch. Once you’re a bit more confident, build something more complex using just HTML. There are a ton of trendy frameworks, libraries and other tooling out there to help you build web pages but you can build some incredible things just with HTML and sharpening your HTML skills will make you a better developer and the web a better place.
</code></pre>
Top comments (1)
There seems to a lot of formatting errors in the post, like '<b>' to describe the bold text.