Learn the basics of web development with ‘How to Create a Web Page with HTML.’ This step-by-step guide walks you through the essentials of HTML coding, enabling you to build your first web page from scratch with ease.
Today, we’re going to learn how to create a basic webpage using HTML, which is a language for building websites. This lesson is for folks who know a little bit about HTML but not too much. Don’t worry if you’re completely new to HTML – you can still join in and pick up some useful tips! If you want to dive deeper into HTML, there’s a great resource called the W3C introduction to HTML that you can check out for more detailed information.
You can find the completed code for this tutorial here.
Table of Contents
1. Create a new HTML file
The first step is to create a new document. We can do this using a text editor like VS Code. However, you can use any text editor you like.
Here are the steps for creating a new file in VS Code.
- Open VS Code
- To create a new file, select “New File” in the File menu or press
Ctrl + Non Windows orCmd + Non macOS. - To save a file, choose “Save” in the File menu or press
Ctrl + Son Windows orCmd + Son macOS, and then enter the file name when prompted.
- HTML documents should use the “.html” file extension.
- The homepage of a site is conventionally named “index.html” to signify it as the default file for the browser to load.
- Page names should only include alphanumerics, dashes, underscores, or tildes, and should not contain spaces.
- Lowercase letters are preferred in HTML file names because URLs are generally case-sensitive.
2. 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>– The purpose of the DOCTYPE declaration is to ensure that the correct rendering mode is triggered by the browser. This is important for legacy reasons, but if you’re just starting out, it’s not something you need to focus on.<!DOCTYPE html>is recommended by HTML5 and is commonly used for most projects, including the one in this tutorial. It must be the first thing in the HTML file and does not require a closing tag.
Add the DOCTYPE to the first line of the HTML file:
<!DOCTYPE html>
<html>– The<html>element represents the foundation of the document. Everything else in the document is nested inside this element. It tells the browser that everything within it is HTML content. The<html>element usually has a closing tag, but sometimes it’s not required. It also has alangattribute, which specifies the document’s language and helps with speech synthesis for accessibility purposes.
Now add the html element to your file like this:
<!DOCTYPE html> <html lang="en"></html>
<head>– The<head>element holds important information about the document that is read by machines (like web browsers) but not typically shown directly to users. This information includes things like the title of the webpage, scripts, CSS stylesheets, analytics codes, and other settings that affect how the content is presented or behaves, as well as its relationship with other documents.
Add the head element inside the html element:
<!DOCTYPE html> <html lang="en"> <head> </head> </html>
<body>– The<body>element holds all the content you see on a webpage. There’s only one body element in a document, and it contains everything that’s visible to users.
Add the body element inside the html element right after the head:
<!DOCTYPE html> <html lang="en"> <head> </head> <body></body> </html>
<title>– The<title>element represents the name of the document, which is what appears in the browser tab. It’s considered metadata and is placed inside the<head>element. There should be only one<title>element per document.
Add the title element inside the head element and name it however you’d like:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exploring Desert Landscapes</title>
</head>
<body></body>
</html>
You’ll notice that some of the elements are now indented. This is done to make the code easier to read. Indenting is a matter of personal preference in coding. Everyone has their own style, but as long as it’s consistent and improves readability, feel free to use any style you prefer. For this tutorial, I’m using a code formatter called Prettier, which automatically formats the HTML document when I save it.
There is one more element that we’ll add to this basic layout, which you’ll frequently see.
<meta>– The<meta>element represents various types of metadata. While there are many uses for the<meta>tag, there are two common ones you’ll often encounter, especially if you’re using HTML snippets. These are the ones we’ll talk about.
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>Exploring Desert Landscapes</title>
</head>
<body></body>
</html>
The first <meta> element with the attribute charset="UTF-8" is called a “character encoding declaration.” It tells the browser which character encoding is used to store or transmit the document. If you’re new to this, you don’t need to worry too much about the technical details of this element. Just know that it’s important for ensuring that characters are displayed correctly on the webpage.
The second <meta> element is called a “viewport meta tag.” It was introduced by Apple to allow developers to adjust the viewport size and scale. While this meta tag is commonly used to support mobile devices, it’s not always necessary for all web pages.
3. 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.
<section>– This element represents a specific part of the document. For example, our webpage will have an introduction section, a camping gear section, and a photo section.- h1, h2, h3, h4, h5 & h6 elements – These represent headings in the document and are important for organizing content on a webpage. Headings are valuable for SEO (search engine optimization) and accessibility. We’ll learn more about how to structure web pages effectively in future tutorials, but for now, understand that headings are key parts of a webpage.
<p>– This element represents paragraph text, which is the main body of content on a webpage.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exploring Desert Landscapes</title>
</head>
<body>
<h1>Discovering Desert Adventures</h1>
<section>
<h2>Introduction</h2>
<p>
Embrace the beauty and challenges of desert camping! If you're
considering exploring the desert landscapes, this guide will help you
get started.
</p>
</section>
</body>
</html>
4. Preview in the browser
Now that we’ve added content to the body of the document, let’s take a look at how it appears in the browser. One of the easiest ways to do this is by dragging the HTML file into an open browser tab. This will open the HTML file in the browser, allowing you to see how the content is displayed.
To view any changes you’ve made to the HTML, you’ll need to reload the browser tab. Alternatively, you can use a live preview feature. For example, in VS Code, there’s a popular extension called Live Server that you can install. Once installed, you can click a button to view the file, and Live Server will listen for changes and update the preview accordingly. This makes it easier to see your changes in real-time without having to manually reload the page.
5. Create a list
For the second content section on our webpage, which will be a list of gear for winter camping, we’ll need the following elements:
<ul>: Stands for “unordered list” and represents a list of items where the order is not important.<li>: Stands for “list item” and represents each item in the list.
Now that we know what elements we will use, let’s go ahead and create another section that will contain our list of camping gear:
<!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>
<h1>Discovering Desert Adventures</h1>
<section>
<h2>Introduction</h2>
<p>
Embrace the beauty and challenges of desert camping! If you're
considering exploring the desert landscapes, this guide will help you
get started.
</p>
</section>
<section>
<h2>Essential Gear for Desert Camping</h2>
<p>
Desert camping demands specific gear to handle the
extreme conditions. It's crucial to prepare adequately
for the harsh environment which can be unforgiving. Here's a
list of essential gear for desert camping.</mark>
</p>
<ul>
<li>Sun protection: Wide-brimmed hat, sunglasses, and sunscreen</li>
<li>Hydration system: Water bottles and a hydration pack</li>
<li>Shelter: Lightweight tent or hammock with mosquito net</li>
<li>Sleeping gear: Lightweight sleeping bag and sleeping pad</li>
<li>Navigation tools: Map, compass, and GPS device</li>
<li>First aid kit: Including supplies for treating heat-related illnesses</li>
</ul>
</section>
</body>
</html>
6. Formatting the text
Now that we’ve added more content, let’s make it look better by adding some formatting to the text. Formatting changes the appearance of the text and makes the page more readable. We have several elements to choose from to achieve this:
<b>: Makes text bold to draw attention or convey importance.<strong>: Same as<b>, but semantic and helps describe important text.<i>: Makes text italic for a different mood.<em>: Marks text to have emphasis.<mark>: Represents highlighted or marked text for reference.<small>: Renders text smaller for side-comments.<del>: Represents deleted text.<ins>: Represents inserted text for tracking changes.<sub>: Renders subscript text with a lowered baseline and smaller size.<sup>: Renders superscript text with a raised baseline and smaller size.
Let’s go ahead and add a few of these elements to the previous paragraph section that we added.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exploring Desert Landscapes | @codingstella</title>
</head>
<body>
<h1>Discovering Desert Adventures</h1>
<section>
<h2>Introduction</h2>
<p>
Embrace the beauty and challenges of desert camping! If you're
considering exploring the desert landscapes, this guide will help you
get started.
</p>
</section>
<section>
<h2>Essential Gear for Desert Camping</h2>
<p>
<mark>Desert camping</mark> demands specific gear to handle the
extreme conditions. It's <strong>crucial to prepare adequately</strong>
for the harsh environment which <em>can be unforgiving.</em> Here's a
list of essential gear for <mark>desert camping.</mark>
</p>
<ul>
<li>Sun protection: Wide-brimmed hat, sunglasses, and sunscreen</li>
<li>Hydration system: Water bottles and a hydration pack</li>
<li>Shelter: Lightweight tent or hammock with mosquito net</li>
<li>Sleeping gear: Lightweight sleeping bag and sleeping pad</li>
<li>Navigation tools: Map, compass, and GPS device</li>
<li>First aid kit: Including supplies for treating heat-related illnesses</li>
</ul>
</section>
</body>
</html>
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 crucial for navigating the web and are a fundamental part of any webpage. They allow users to click on links and be taken to different web addresses, connecting various pieces of content together. Almost any type of content can be turned into a hyperlink, enabling users to easily access related information or navigate between different pages on the internet.
We can create a hyperlink using the following element:
<a>– The<a>element, also known as the anchor element, has an attribute calledhref. When you use this attribute, it 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.
Now that we understand the basics, let’s add a few hyperlinks to the list of Exploring Desert Landscapes. When users click on them, they’ll be taken to another web address.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exploring Desert Landscapes | @codingstella</title>
</head>
<body>
<h1>Discovering Desert Adventures</h1>
<section>
<h2>Introduction</h2>
<p>
Embrace the beauty and challenges of desert camping! If you're
considering exploring the desert landscapes, this guide will help you
get started.
</p>
</section>
<section>
<h2>Essential Gear for Desert Camping</h2>
<p>
<mark>Desert camping</mark> demands specific gear to handle the
extreme conditions. It's <strong>crucial to prepare adequately</strong>
for the harsh environment which <em>can be unforgiving.</em> Here's a
list of essential gear for <mark>desert camping.</mark>
</p>
<ul>
<li><a href="https://www.example.com/sun-protection">Sun protection</a>: Wide-brimmed hat, sunglasses, and sunscreen</li>
<li><a href="https://www.example.com/hydration">Hydration system</a>: Water bottles and a hydration pack</li>
<li><a href="https://www.example.com/shelter">Shelter</a>: Lightweight tent or hammock with mosquito net</li>
<li>Sleeping gear: Lightweight sleeping bag and sleeping pad</li>
<li>Navigation tools: Map, compass, and GPS device</li>
<li>First aid kit: Including supplies for treating heat-related illnesses</li>
</ul>
</section>
</body>
</html>
8. Style the web page
If we preview the webpage now, it might look a bit dull. But we can make it more exciting by adding some basic styles. To do this, we’ll use a ‘<style>’ element to embed CSS directly into our HTML document.
We’ll place the ‘<style>’ element inside the ‘<head>’ element of the HTML document. I won’t explain the CSS in detail here, but if you’re curious about specific details, you can check out the MDN CSS reference docs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exploring Desert Landscapes | @codingstella</title>
<style>
html {
max-width: 800px;
}
body {
background-color: #f3f3f3;
margin: 0 4rem;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.15rem;
}
section {
border-bottom: #ccc solid 2px;
}
h1 {
font-size: 3em;
color: #333;
}
ul,
li {
list-style: circle;
color: #555;
}
em {
color: #ff5733;
font-style: italic;
}
</style>
</head>
<body>
<h1>Discovering Desert Adventures</h1>
<section>
<h2>Introduction</h2>
<p>
Embrace the beauty and challenges of desert camping! If you're
considering exploring the desert landscapes, this guide will help you
get started.
</p>
</section>
<section>
<h2>Essential Gear for Desert Camping</h2>
<p>
<mark>Desert camping</mark> demands specific gear to handle the
extreme conditions. It's <strong>crucial to prepare adequately</strong>
for the harsh environment which <em>can be unforgiving.</em> Here's a
list of essential gear for <mark>desert camping.</mark>
</p>
<ul>
<li>Sun protection: Wide-brimmed hat, sunglasses, and sunscreen</li>
<li>Hydration system: Water bottles and a hydration pack</li>
<li>Shelter: Lightweight tent or hammock with mosquito net</li>
<li>Sleeping gear: Lightweight sleeping bag and sleeping pad</li>
<li>Navigation tools: Map, compass, and GPS device</li>
<li>First aid kit: Including supplies for treating heat-related illnesses</li>
</ul>
</section>
</body>
</html>
9. Add an image to the page
Let’s make our webpage more interesting by adding a picture. We’ll use the ‘img’ element to do this.
<img>– The<img>tag is used to show pictures on a webpage. It needs a “src” attribute to tell the browser where the picture is located. Adding an “alt” attribute is important too. It provides a description of the picture for people who can’t see it, like those using screen readers. This way, even if the picture doesn’t show up, the “alt” text can still give an idea of what it’s supposed to be.
We’re going to add a Random picture of Desert camping from a stock photo website. You can also use a picture saved on your computer. Let’s add another part to our webpage with a title, a short description, and then our picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exploring Desert Landscapes</title>
<style>
html {
max-width: 800px;
}
body {
background-color: #f3f3f3;
margin: 0 4rem;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.15rem;
}
section {
border-bottom: #ccc solid 2px;
}
h1 {
font-size: 3em;
color: #333;
}
ul,
li {
list-style: circle;
color: #555;
}
em {
color: #ff5733;
font-style: italic;
}
</style>
</head>
<body>
<h1>Discovering Desert Adventures</h1>
<section>
<h2>Introduction</h2>
<p>
Embrace the beauty and challenges of desert camping! If you're
considering exploring the desert landscapes, this guide will help you
get started.
</p>
</section>
<section>
<h2>Essential Gear for Desert Camping</h2>
<p>
<mark>Desert camping</mark> demands specific gear to handle the
extreme conditions. It's <strong>crucial to prepare adequately</strong>
for the harsh environment which <em>can be unforgiving.</em> Here's a
list of essential gear for <mark>desert camping.</mark>
</p>
<ul>
<li>Sun protection: Wide-brimmed hat, sunglasses, and sunscreen</li>
<li>Hydration system: Water bottles and a hydration pack</li>
<li>Shelter: Lightweight tent or hammock with mosquito net</li>
<li>Sleeping gear: Lightweight sleeping bag and sleeping pad</li>
<li>Navigation tools: Map, compass, and GPS device</li>
<li>First aid kit: Including supplies for treating heat-related illnesses</li>
</ul>
</section>
<section>
<h2>Desert Camping Experiences</h2>
<p>Here are some captivating moments from desert camping adventures!</p>
<img
src="https://source.unsplash.com/random/?camp,desert"
alt="A scenic view of desert dunes under a clear blue sky"
/>
</section>
</body>
</html>
Let’s have a look at what the web page looks like now.
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 covered how to create an HTML document and learned about commonly used elements like lists, images, hyperlinks, headings, and paragraphs. We also applied some basic styles to make the design more attractive.
Now it’s time to put your knowledge into practice! I encourage you to dive in and start coding your own HTML page from scratch. As you gain confidence, try building something more complex using only HTML. While there are many trendy frameworks, libraries, and tools available for web development, mastering HTML skills will make you a better developer and contribute to making the web a better place. So, keep practicing and exploring the possibilities of HTML!
Click / activate this link to view the final code for this web page.
