GUIDE

How to make an HTML website in 2016

How to make an HTML website in 2016

You may have stumbled across this page are asking yourself: Why should I learn how to make an HTML website in 2016? Isn’t HTML defunct and outdated at this point?

Every Web page you see on the Internet, regardless of the technology powering the website, is the output of an HTML file. About ten years ago, quite a lot of Web developers used to code directly into HTML, using the kind of language we will introduce below.

Make a Website

Making a website by directly coding HTML has become increasingly optional as time has moved on. Programmers have introduced innovative and user-friendly technologies which currently rule the market, or at least so it seems on the surface!

Nowadays you can also create a website through coding in a number of different ways. Whether it is through using a CMS such as WordPress or Joomla, a site building service such as Wix or Squarespace, or a complex programming language like Ruby on Rails or Django, there has never before been such an abundance of ways to create an impressive website.

The one constant that remains, however, is the common property of using HTML to build any website on the Internet today. No matter what language or technology–HTML is at it’s core.

As a result, having a basic knowledge of HTML is useful if you are looking to get into web development. We’ve outlined a few basic instructions and a step-by-step guide to better help you understand how to make a website using HTML.

What is HTML?

HTML stands for Hypertext Markup Language and is currently in its “HTML 5” release. It is a markup language for the Web that forms the building blocks of every Web page.

make an HTML website

To understand what HTML does, you should think of webpages as files – HTML files interpreted by the browser. When you design your website using HTML (without additional more advanced Web programming in the form of PHP, ASP.NET, and the like) all your pages will be static in nature. That means they have no means of displaying dynamic content, and each must be created manually.

It is therefore easy to make an HTML website, as long as you do not have a large number of pages, or the need to update them regularly.

Getting started with HTML is pretty easy, as all you need to do is understand all the tags and rules used in the language.

A Basic HTML webpage

Let’s look at an example of a HTML file which will be displayed on our browser as a Web page. For a quick demo, you can copy and paste the following code into Notepad (on Windows) or any other text editor (such as Notepad++) and save the file as index.html. You will then be able to open this file as a web page using your web browser.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Basic HTML Document Layout</title>
</head>
<body>
<h1>My First Web Page</h1>
<hr>
<p>This is my <strong>first</strong> web page written in HTML.</p>
<h3>HTML</h3>
<p>HTML uses <em>markup tag</em> to <em>markup</em> a document.</p>
</body>
</html>

The Web page actually begins with the !DOCTYPE tag, letting the browser know that this is a HTML document. You are starting a new html file with this tag – if it’s missing, the browser won’t recognize the file as a HTML file. You must signal the end of the Web page at the bottom by closing with a  /html tag. Everything contained within these two tags forms the Web page content. As you’ll later find out, most HTML tags have an opening and closing tag.

A web page has two major sections: the head and the body. The head is declared using the tag <head> and duly closed with </head>. The title of the page is defined within this section using the <title> tag.

The other section, the body, contains the bulk of the web page elements. It is within this section of a webpage that things such as text paragraphs, sub headings, images, tables, page divisions etc. are added.

Example Tags

<h1>

– Heading 1, the largest header text. Smaller header text can be defined with h2, h3 etc. down to h6, with h6 being the smallest.

<img/>

– The image tag, no closing tag is applied here as all the attributes of the image are declared within the tag.

<p>

– Starting and closing a paragraph – any elements that need to start on a new line on the page can be included within these tags, including text blocks, images and links.

<a>

– Adding a link. The text being linked (anchor text) is used before the closing tag, while the attributes of the link, such as the web address and target are declared in the opening <a> tag.


In the screenshot below, you can see what is displayed in the browser when you load the code above. Take note that this is just the standard HTML format, additional features such as links, images, and lists will lead to increasingly complex tags.

Make a HTML website

Learning how to make an HTML website

The above tags are by no means all there is to know when it comes to HTML. You can find many great online resources where you can learn about everything related to HTML, in addition to tons of educational websites and videos for those looking to learn both beginner and advanced features of HTML.

Check out our helpful post on how to learn web development (including HTML), fast and free!

You can also take advantage of several WYSIWYG visual editors, which can give you an instant, effective way of testing and viewing your HTML code (and in some cases, CSS too!).

Want to know the best way to learn how to use HTML? Simply put, Practice!

Use one of the web editors we mentioned above or even get started in a Notepad file to learn quickly on the go. Practice makes perfect, and this statement holds true especially when it comes to coding.

What about CSS and JavaScript?

Pages made of pure HTML are plain and static. They contain content but lack styling – as you’ve can probably see from the uninspiring screenshot above!

CSS (Cascading Style Sheets) is the language used to style Web page elements and define their layout on a Web page. JavaScript is used to add to some life to these elements – for instance a pop-up box explaining some text on the page.

With CSS, you can define, with precision, the color of your text elements, size, position, etc. You can, for example, decide that you want all of your images to be contained in a rounded grey frame with a simple style declaration, for example:

border: 1px solid #d0d0d0; border-radius: 2px;

 

With JavaScript, you can add cool effects such as image slideshows, a countdown clock, moving text etc.

However, you can now do all of this and more using CMS platforms, as discussed earlier in this article. By all means learn the basics of HTML, as they will help you, but you may find advanced functionality is now best left to these well-developed systems – unless you are a serious enthusiast!

Make an HTML website- Conclusion

HTML is not “out of date.” As we said at the beginning, it still underpins every website you ever visit.

However, new tools and systems have overtaken the need to learn it in detail. If you are new to Web design, we would first recommend getting familiar with a Content Management System, and we would recommend WordPress as it is the most approachable. Yes, you can still open Notepad and begin to program a website from scratch – but the question to ask yourself is if you truly need to?

You will find a step-by-step guide to WordPress here, or check out our Squarespace or Wix guides if you are looking for a simple site builder.

Meanwhile, learning the basics of HTML in the background will give you a deeper understanding of how things fit together. We hope we have helped you in this regard and given you the knowledge to make an HTML website on your own.

Let us know below if you have any questions or comments!


Published on: June 22,2016.
Thomas Ujj is an expat/traveler and IT enthusiast with a passion for IT security and privacy. When he isn’t planning his next trip, he likes to take time to practice his Italian cooking as well as religiously watching Italian football team AS Roma.

Related Coverage


Leave a Reply

Your email address will not be published. Required fields are marked *