![7 Best AI Coding Assistants In 2023 [Free + Paid]](https://cdn.hackr.io/uploads/posts/small/16952882603BlLlO1oza.jpg)
![30 Cool, Easy & Fun Python Projects + Source Code [2023]](https://cdn.hackr.io/uploads/posts/small/1655865129YUz5V1MDab.png)
![The 14 Best TensorFlow Courses in 2023 [Free + Paid]](https://cdn.hackr.io/uploads/posts/small/1624550510XoNRRYd0t0.png)
![10 Best Design Books for Design Students [Updated]](https://cdn.hackr.io/uploads/posts/small/1642872008wCnbdSvF6Q.png)
![I Ranked the Top 5 Best AI Image Generators [with Image Examples]](https://cdn.hackr.io/uploads/posts/small/1682848644STLtM9YNp6.jpg)
In the last tutorial, we briefly covered how the client and server web model works and went through a short demo on how to launch a WordPress website. You should also have a basic idea of the functions of HTML, CSS, and JavaScript.
This lesson will focus on how to create a website using HTML, teaching you the various elements of the markup language and how they come together to structure and create a simple web page.
While creating WordPress websites (or websites on any other platform) are useful and convenient, they have their disadvantages. In your quest to learn web development, you must learn how to use HTML, CSS, and JavaScript. Knowing how these work will also make you better at WordPress development.
Learning HTML will be your first big step in creating a website, and you’ll be doing everything by yourself. The focus here will only be on HTML, as CSS and JavaScript are two broader topics better suited for their own tutorials. You’ll learn what HTML is and the tools to create a basic HTML page, and view a step-by-step process on how to make a website with HTML.
What is HyperText Markup Language (HTML)?
HyperText Markup Language, or HTML for short, is a language that describes how webpages should be structured. HTML dictates what is the main body of content, and where pieces of text should go. In other words, HTML determines the display and order of content.
A website is simply a series of web pages, connected with internal links, buttons, text, and more — all of which are “elements.”
Cascading Style Sheets (CSS) is a language. HTML and CSS go hand-in-hand, as, after all, you don’t want a web page that looks like this:
This was created using just HTML — no CSS.
But we’ll leave the design capabilities of CSS for a later tutorial. Let's move on to an important part of HTML: elements and tags.
What Are Elements And Tags?
The entire HTML document simply consists of a series of elements. These elements are, in most cases, defined by both an opening and a closing tag. For example, the first element you create will be:
<HTML>
.
.
.
</HTML>
The HTML element is the root element of that page and is defined with the opening tag <HTML> and the closing tag </HTML>.
Closing tags are defined by putting a forward slash in front of the element name. Some elements don’t have a closing tag — these are called singleton tags. A common example is <img>, which displays an image from a source on the web page.
What Elements Does a Basic Web Page Contain?
If you want to know how to make a web page, you’ll need to know what elements you need to include. Technically, all you need to start creating a web page is the simplest of HTML elements. A basic HTML page will always be your starting point for creating a website.
Most HTML pages have a set of common components, which are created using the elements we mentioned earlier. These components are usually the following:
- Header
- Footer
- Navigation bar
- Main content
For the demo that we’re going to practice today, we’ll focus on creating a page with just a body of content.
To summarize, every website you develop will contain the following elements:
- <!DOCTYPE>
- HTML tags
- Head tags (not to be confused with headings!)
- Body tags
- Headings (<H2>, <H3>, <H4>, etc.)
In this exercise, we’ll make use of all of these elements to create a simple web page that displays textual information. We’ll learn more about these elements throughout the exercise.
Common HTML Tags
It’s worth knowing some of the most common HTML tags, as you’ll use them often in your quest to learn how to create a website. Don’t worry if you’re not sure how to use some of these yet; it’s just useful for reference and, of course, you can always google these (and that’s encouraged) when you need to. It’ll soon become second nature.
The following are some of the most used tags:
- <html>...</html>: The root of the document, specifies the document as HTML
- <head>...</head>: Contains metadata about the document, including the style, scripts, character set and title, among other things
- <body>...</body>: Defines the body of the document, where all the content goes, including headings, paragraphs, links and images
- <title>...</title>: Defines the title of the web page
- <h2>...</h2>: Defines text as heading, and may be anything from h1 to h6
- <p>...</p>: Defines content as a paragraph
- <a href =” ”>...</a>: Defines a hyperlink with the link going inside the quotes. The text between the opening and closing tag will act as the hyperlink
- <img src = “ ”>: Defines an image with the source of the image going between the quotes
- <b>...</b>: Boldens the text between the tags
- <i>...</i>: Italicizes the text between the tags
- <u>...</u>: Underlines the text between the tags
Tools to Create an HTML Page
Notepad, WordPad, and Microsoft Office all function as text editors, except they’re just a little more purpose-oriented. Code editors like Sublime Text, Atom, Vim, and Notepad++ are some examples of popular code editors. Many of these have free versions that will suit your goals nicely, so pick any you like!
To start, a code editor is all you’ll need. However, do note that once you start working with CSS and JavaScript, you’ll probably want to use some helpful tools to make the process more convenient.
For now, download a code editor and proceed with the guide below. If you don’t know which one to pick, then Sublime Text is a good option for beginners.
How To Create a Website Using HTML: Step-by-Step
Follow these steps and you’ll know how to create a simple web page with HTML in no time.
Step 1: In Your Code Editor, Define the Doctype as HTML
Open up your code editor and create a new file. Save this as “name.html”, where the name can be whatever you like.
All your HTML documents will start with the <!DOCTYPE> declaration. This simply tells your browser what kind of file this document is. In this case, it is an HTML file.
We declare the documentation as an HTML file as follows:
<!DOCTYPE html>
In your code editor, it would look like this:
<!DOCTYPE> is considered a meta tag. There are other doctypes for older versions of HTML, but you won’t need to worry about those. Just remember that DOCTYPE informs your browser that this is an HTML file.
Step 2: Add the HTML Tags
Now we’ll move on to adding HTML tags, under which all other elements will fall. Your text, markup information, information — everything comes under the HTML tag. It is often called the “root” of an HTML document.
HTML tags have both an opening and closing tag, and are defined as follows:
<html>
</html>
Your code should now look like this:
Step 3: Add the Head and Body Tags
After defining our document as HTML, we can now add the “head” and “body” of a web page. These go inside the HTML tag, which you should remember as the root tag.
The head represents a section where you can add metadata. These are things like your title (what you see on the browser tab), linked stylesheets, and scripts. We’ll leave this empty for our exercise, but go ahead and define the head section as follows:
<head>
</head>
The body section is where all the content that the user views will go. Your text, images, buttons — all the interactable elements go here. You can define the body section like this:
<body>
</body>
Your HTML page should be coming along nicely now. It should look like this:
Step 4: Add Headings and Paragraphs
Now we’ll add some text to the web page. Many of you might already be familiar with headings and paragraphs if you’ve worked with a blog before. Headings are the “big text” that separates sections, and paragraphs are your regular bodies of text that follow and explain an idea.
But headings and paragraphs serve a larger purpose on the web, telling search engines how to read a web page. For that reason, when you design a website, you should include a clearly defined set of headings on the page.
There are six kinds of headings: h1, h2, h3, h4, h5, and h6. They decrease in size in that order. The actual text of the heading will go between the tags. Often you’ll see headings nested under each other, i.e., an h3 heading under an h2 heading — this is just a method of organizing the text.
You can define a heading as follows:
<h2></h2>
<h3></h3>
You can define other headings similarly. Go ahead and add an h2 tag to your HTML document, with some text inside.
Next, we’ll add a body of text to the page. Large bodies of text are placed inside the paragraph tag, defined as follows:
<p> </p>
Add the paragraph tag to the document, with your favorite color, dish, and animal as text inside. It should look like this:
That’s it! We now have our very first web page. It’s a simple one, but it’s most definitely a web page!
Step 6: Load the Website in Your Browser
Of course, you’re going to want to see what your efforts look like. Open the saved file with a browser and voila! If you’ve saved the file as a html file (as mentioned in the first step) then all you need to do is double click the file to get it to open in a browser. You can also right-click the file, click “open with” and choose a browser from the list. See the image below if you’re unsure.
Your web page should load and on a server, it would look something like this:
Conclusion
Of course, this is just the beginning. How many websites look like the one that you’ve just created? HTML only defines the structure of a web page, not the way it looks.
How to Create A Website: An HTML Tutorial and CSS Tutorial
To spruce up your web page, you’ll need more HTML elements or CSS, both of which will add style to your page, from colors and buttons to progress bars. CSS is also easy to learn, but you’ll see that when we go over some of the basic concepts behind styling your page in a later lesson.
For now, continue to work with HTML and see what else you could add to your web page. It could be an image, a text field, bulleted lists — there is a lot more to it, and googling HTML tags will teach you a lot.
If you're looking to use your HTML skills to build your own website, we recommend using NameCheap to buy your domain name and web hosting services. They're the best in the industry and super affordable.
