How to Create Your First Website with HTML in 30 Minutes
Have you ever dreamed of creating a website? If your answer is yes, then you are in luck because today you will create your very first website and the only requirements are: A text-editor, a web-browser, and this guide.
So read carefully and I promise you: You can tick ”build a website” off your bucket list in just 30 minutes.
You will learn how to create a basic HTML document and how to display it in your browser.
What is HTML and How do Websites Work?
Every single website on the internet is made of HTML.
Every time you type an URL in your browser’s address bar. The browser sends out a request to the webserver associated with this URL.
The web server replies with an HTML document which the browser displays after it received the response from the server.
HTML is a markup language. That means it is not a real programming language. It is used to define the basic structure of a website so the browser knows how to display it.
The programming language of browsers is Javascript which can be used to add dynamic functionalities to your website.
Javascript should not be the topic here because it goes beyond the scope of this post.
So let’s focus on HTML here and get started.
Open your Text-Editor
The first thing you have to do to write your first Website with HTML is opening a text editor.
The following editors come with your operating system you don’t have to install anything to get started.
- Windows — Press the Windows key and type ”Editor”.
- macOS — Open Spotlight CMD+Space and type ”TextEdit”.
Now you are prepared to start typing in your very first lines of HTML.
Create your first HTML Document
Talk is cheap! So let’s get right into writing HTML now.
With your text editor open type in the following code.
<!DOCTYPE html>
<html>
...
</html>Now save your HTML document to your computer by clicking the \”save\” button in your editor. Name the file for example \”hello.html\”.
Congratulations, you have successfully created your first website. To be honest it is only the most basic form of a website but everyone starts small.
So let me explain the code.
The first statement <!DOCTYPE html> tells the browser that this document is a html document.
The next piece of code is <html>, this is the primary tag of of an HTML document.
Its corresponding closing tag is </html>, a closing tag can be identified by the "/" character.
Everything in between the opening and the closing <html> tag is the content of your website, so all the texts, images and other elements that you want to display will go there.
Add a Title to Your First HTML Website
HTML documents are tag based, so each element or node which you want to add consists of an opening and closing tag.
Let me demonstrate this by adding a title to our website.
<!DOCTYPE html>
<html>
<head>
<title>My Very First Website</title>
</head>
</html>We added a <head> tag to the HTML document which contains meta-information about your website that is not displayed directly as content.
For example you can define the title which is displayed in the browser tab.
The Text in between the opening and closing <title> tag is used as your website's title.
As you might see the tags of an HTML document make up an hierarchical tree-like structure.
The <title> element is a child of the <head> element, and the <head> element itself is a child of the <html> element.
You use indentation to make this hierarchy of HTML nodes obvious.
Add a Welcome Message to the Site
We now have set up our basic HTML document and added a title, it is time to add some content to our website.
Let’s start by creating a welcome message for your visitors.
Add the following code below the closing </head> tag.
<body>
<p>Welcome to my very first Website! :)</p>
</body>Now we added the <body> element to the website, everything between the opening and closing <body> tag is the content of your website.
To add the welcome message, we add a <p> element containing the text message which we want to show to your site's visitors.
<p> means “paragraph” and it's one of the basic tags to display text using HTML.
Save and Open the Website in Your Browser
It’s time to harvest the fruits of our hard work by opening the website in the browser.
- Save your HTML file
- Open your browser
- Drag and drop the html file into the browser
- Admire your first website!
Add More Great Content to Your Website
Now we created the basics your HTML document. Let me sum up quickly what we’ve done so far:
- Added an
<html>tag to define an HTML document - Defined a
<head>tag which is generally used to add meta information to HTML documents - Created a
<title>tag to define the title of the website which is displayed in the browser tab - Added a welcome message to the
<body>of our website
Now we want to add even more content to the <body> section.
Add a Headline to Your Website
Let’s start with a headline.
Insert the following code above the <p> tag.
<h1>My first Website</h2>Headings in HTML are numbered, a lower numbered headline means that it is more prominent within the whole page.
The <h1> heading should only occur once in each HTML page because it is the main headline.
In addition headings are ordered, which means a <h2> heading should be placed on the second level in the headings hierarchy just below the <h1> heading, the <h3> headings should be on the third level and so on.
Check out this example to make things clear:
h<h1>Main Heading</h1>
...
<h2>Hello World</h2>
...
<h3>The weather is great today</h3>\n...
<h4>The sun is shining</h4>
...
<h3>The weather will be rainy tomorrow</h3>
...
<h2>Next H2 Heading</h2>
...Add Images to your Website
In the age of Instagram a website needs images to be cool, so let me show you how to add an image to your website with HTML.
It is very easy!
<img src="path/to/your/image.png" />You just have to add an <img> tag to your <body> section.
Have you recognized that the <img> tag does not have a closing tag?
If a node has no children like other HTML nodes or tags expected inside of it the closing tag is optional, you can use a slash ”/” just next to the closing bracket of the opening tag.
There is another thing, which differs compared to the other tags that you know so far.
I’m talking about the src attribute which is used to define the path to the image file which should be displayed.
HTML attributes are used to customize the look and feel of HTML elements. There are many different attributes some are common across all HTML elements and other ones are specific to the HTML element.
The src attribute has no effect when used with a <p> element for example.
But you could try changing the text color of your <p> element to blue by using color="blue" within the opening tag in the same way the src attribute is used for the image.
How to Publish your Website to the Internet
The website you have just created is currently only available locally on your own computer.
You might want to publish it on the internet to show it to your friends. To achieve that, you must host your website.
There are many good web hosting providers out there. I don’t want to advertise particular ones, so I don’t list them here.
Just ask your favorite search engine for something like: ”Good and cheap web hosting”
Try to compare the offers and pick one which you like. For a simple website like the one you’ve just created there is no need to worry too much about the features of the web hosting. Make the price your main decision factor.
