Getting a website built is not a difficult task in the digital age. It is no more limited to sophisticated coding and complex web designing. There are tons of options you could choose to build a website, and using HTML is considered a cost-effective way to create a website. You wouldn’t need a lot of technical know-how to start writing HTML codes. If you have some time on your hands to get your website up and running, you might as well learn HTML and build an HTML website.
This article serves two purposes. The first is to act as a guide to HTML for beginners who want to create an HTML website for their business. And the other one is to give them a clear idea of other options they have, in case they find out that building an HTML website isn’t really their cup of tea.
We will start by taking you through the basics of HTML and show you the steps needed to set up a functional HTML website. But, in order to understand basic website HTML, you must know some of the basic terms and their functions in an HTML website.
What is HTML and How Does it Work?
If you want to learn HTML and build an HTML website on your own without the help of a developer, you might want to go through this HTML tutorial to get up to speed with building your HTML website.
Knowing what HTML stands for might not be key to building your HTML website but it's sure to help you somewhere down the line.
HTML stands for Hypertext Markup Language. It isn’t a programming language. It cannot be used to create dynamic web designs and graphics but allows the user to organize and format website design and structure. You can do anything like creating sections, paragraphs, headings, links, and applications using HTML.
Components of an HTML Website
In order to build your HTML website, you need to know some key components. HTML websites have two major components:
- Tags
- Attributes
Though they are used concurrently, the purposes they serve vary.
• HTML tags
An HTML tag is the means for you to give instructions to your HTML website. If you want your website to display a header, or organize page layout, you would use a tag. A tag is generally denoted by angle brackets and the text contained within them is the instruction for the tag.
An example of a tag is:
<h1>
Most tags must be opened < h1 > and closed < /h1 > in order to function.
• HTML Attributes
HTML attributes on the other hand provide instructions mainly relating to functionality, for specific tags. They usually go within a tag and are marked by the same angle brackets. It is used to add images, videos, links, and other external design and functionality aspects for the HTML website.
An example of an attribute is:
<img src="product.jpg" alt="Our latest product.">
Here, the image source (src) and the alt text (alt) are attributes of the < img > tag.
How to Make a Website Using HTML
You don’t need fancy software on a high-end computer to create an HTML website. You can do it on the HTML editor on your system, which is mostly your notepad. Once you open the notepad, you can follow these steps to start building your HTML website.
• The Doctype
Let’s start with the HTML doctype. Your HTML website creation begins the moment you create a Doctype file. This file tells the web browser that the document is an HTML website file.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
This is how you start the basic HTML of your HTML website. Even if you want to create a fairly simple website, you’ll have to write a lot of code. Hence it’s always advised to keep all the HTML files in a single folder so that you have it all in one place.
Here’s a representation of how your web is organized.
The doctype file just tells the browser how to read the file. Now, you need to put in codes that specify the pages, their design, content, and layout. For example, About-us.html, Product.html, Services.html, Contact-us.html, etc.
Each of these pages is created separately with codes that define their specifics.
• Further Tags
The Doctype is the file that outlines the basic layout of the page. You then need to add other elements and attributes to your HTML website.
The < head > tag contains all elements and attributes related to the title, meta tag, etc.
The < title > tag is where you insert the title of your page. It appears on the header of your page.
The < meta > tag is used to add information about the document such as character encoding, name (page context), description.
Take a look at how the code for the head section will look like.
<head>
<title>My HTML Website</title>
<meta charset="UTF-8">
<meta name="description" content="The information bout your page will be displayed here.">.
</header>
How to Add Content
The next section is the < body > tag.
All the content on your HTML website is displayed here. It includes text, images, tables, forms, and all other design inputs on your HTML website.
• Adding Headings to Your HTML Website
In HTML, headings are written in the following elements:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
The tags < h1 > and < h2 > are the most important titles, while the remaining tags are used as subheadings and other additional content.
Note: This information helps Search engine bots to understand what to display on search results.
• Creating Your Heading
Let’s try it out. On a new line in the HTML editor, type:
<h1>Welcome to My HTML Website</h1>
Save this file as “index.html” in a new folder and designate it as “my webpage.” Open the file on your web browser to view the changes.
• How to Add Text in HTML
Adding text to our HTML page is simple using an element opened with the tag < p > which creates a new paragraph. We place all of our regular text inside the element < p >.
When we write text in HTML, we also have a number of other elements we can use to customize the text or make it appear in a certain way.
Commonly used HTML tags
These tags must be opened and closed around the text in question.
Let’s try it out. On a new line in the HTML editor, type the following HTML code:
<p>Welcome to <em>my</em> HTML website. You can all my <strong>latest updates<strong> here.</p>
Save your page to view your changes.
Adding Stylesheet
Create a stylesheet and designate it as ‘style.css’ and save it to a new folder named ‘css’. And this file style.css will help us to style your web page.
Remember right before closing the head tagadd a line that reads…
<link href="css/style.css" rel="stylesheet" type="text/css">
This line of code informs the browser that it needs to look for the stylesheet while it loads the web page.
Now you’re set to start creating your own HTML website.
Why Not to Code Your Own Website
Coding your own website can seem like the best way to set up a website. But there are certain downsides that you might want to look at before you go on and start coding for your website.
- It’s not enough if you just have some basic coding knowledge if you want to set up a full-fledged website. You need to have a good grasp of coding HTML or you’re just going to waste valuable time that you could have put somewhere else.
- Coding isn’t quick. Even if you’re gonna hire a professional, it is bound to take time. So you can imagine how it can be if you were planning to follow some HTML tutorials and build your HTML website.
- And it’s not like your work is done once you’ve built the website. No. You’ll have to keep your website up-to-date, meaning you’ll need to constantly alter the codes. This can hamper your SEO ranking.
Learning HTML is not as easy as some tutorial videos make it seem. There are a lot of intricacies that you might not understand and that might create a block in your business. You could use ready-made HTML templates but that doesn’t make it much different from how it is. And even though you have numerous advantages with an HTML website, you need to weigh in on what works best for you rather than go with mass opinion.
A website builder is a tool that can help you reach the same goal but on an alternative path. Unlike an HTML website where you need to manually write all the codes for each and every aspect of design and functionality, website builders have in-built codes. All you need to do is know what type of design or function you would like your website to possess. After that, you just click on the options you like and bang! You have your website ready.
It can be much simpler than using HTML codes and equally impressive.
Website Builder tool helps your customers build fully-fledged websites quickly. Your customer can be charged on the basis of the Web Space and the number of web pages specified with a particular plan.
Modifying your HTML website isn’t as difficult as it is time-consuming. When your business is running on all cylinders, you might not have the time to write HTML codes for each and every change on your website. On the other hand, website builders have built-in design templates, color palettes, and functionality that just needs a click of a button.
Advantages of Using a Website Builder
Here are some compelling reasons to convince you to build your website using a professional website builder.
- No need to code – One great benefit is that you have everything readily available. You don’t have to learn any coding or understand how website builders work. All you need is to set up an account with a website builder like Strikingly and start editing one of many free website templates.
- Fast – If you’re gonna learn HTML and build a website, it’s not gonna happen in a day. But building a website on a platform like Strikingly is way faster when compared to building an HTML website. The process is quick as the codes are in-built. You just have to apply the right set of codes to create your website.
- User-friendly – You can be a total stranger to using a website building platform. Even so, you can build a website that looks much better than an HTML website. You can take Strikingly’s simple user interface for example. Anyone with basic computer skills can create a fully functional website without any external assistance.
- Easily Updated In an HTML website, it's a real task to change or update the website. Website builders like Strikingly are remarkably simple. The user-friendly aspect reduces website management to a few clicks. Anything from adding a new page, changing the banner, adding an email list, etc can be done with the utmost ease.
- Create Great Websites – The wide variety of choices in design, layout, color schemes and widgets can help you build a website right out of your imagination. When compared to an HTML website, when built on a platform such as Strikingly, you not only have options to create a breath-taking website. With a Strikingly website, your business is pitched to the top stakeholders in your business, giving you the push your business needs.
Customization Using HTML vs. Strikingly
This is a comparison of how you would build your site using HTML versus using a website builder. Website builders have remarkable simplicity and ease of use when compared to HTML websites.
Image taken from Strikingly
The example here shows what you need to do to change text color. In an HTML website, you need to add in the specific tag, the code for the color and size individually. On a website builder like Strikingly, it’s just a few clicks and you’re done.
So you get why you could just go for a website builder like Strikingly and avoid coding altogether. But you don’t know how to go about the process of website building? Don’t worry! Strikingly has taken the ease of website building to the next level.
How to Build a Website Using Strikingly
Here’s a quick method to get your website up and running:
1. Create an Account
The first thing you need is an account registered under Strikingly. You can use your email ID or sign in with your Google account.
Image taken from Strikingly
2. Choose a Template
Once you’ve registered, you’ll be able to choose one of many remarkable templates from Strikingly’s vast library. There are templates categorized to make choosing the right template for your business hassle-free.
Image taken from Strikingly
3. Edit the Template
After choosing the template, you’ll be redirected to the page where you can begin editing your page. This is where the magic happens. You can customize any aspect of your website. Be sure to add in all the necessary pages, buttons, pictures, text, and content to make your page stand out among the rest.
Image taken from Strikingly
4. Publish Your Site
The next step is to publish your site and see how it looks on the web. You can test all the visual and functional aspects of the website.
Your website is ready to go. Be sure to register a domain for your website. This will register your website on the internet and create a space where your website is hosted.
And there you have it. It’s that simple. No need to learn HTML codes, no problems with editing or updating, and all that in a day’s work. It's a no-brainer if you’re short on time and resources or need a personal website for your start-up business. So what are you waiting for? Get your free website at Strikingly and forget about your website building problems.
