How to Make a Simple HTML Website?

HTML or HyperText Markup Language is, as its name says, a Markup language. It’s not considered to be a programming language in the traditional sense. It’s a language in which the creator can create documents and mark different parts using HTML tags. HTML was inspired by SGML, and its first version appeared in the year 1990 at CERN.

HTML was originally designed for simple static documents, back when the World Wide Web was thought of as a document retrieval system. Currently, almost every web page uses HTML, and it became the language of the Web. The last iteration is HTML5, which is supported by all the major browsers and comes as an improvement to HTML 4 which was “standardized” in 1997.

This article will pinpoint the basics of making a simple HTML website, something that anyone can learn, regardless of their chosen profession.

Why Should You Learn HTML?

One could argue that with today’s technology anyone can create a fast and nice looking website without the need to code a single line of HTML, and while this is certainly true, it can always become handy to know how to tweak it a bit.

Often times, people will add plugins/modules/extension to a CMS like WordPress, Drupal, Joomla, etc. to expand it with simple feature that could have been achieved with a couple of lines of HTML. While the plugin might be simpler, it could add to page load times, and it’s just another thing to worry about in terms of security and updates.

It is pretty easy to learn HTML, and it can be a lot of fun, because you instantly see the results, unlike a programming language where you have to compile the code you have written. You already have all the tools needed to start learning HTML, you have a Web Browser and you certainly have a simple text editor like notepad. Applications like Microsoft Word won’t do it, you will need a basic plain text editor: notepad, notepad++. There are so called IDEs (Integrated Development Environment), which will help you with writing HTML with features like syntax highlighting or auto-completing.

Hello World!

You can grab a free text editor like Notepad++ or Sublime Text Editor and start it up. Save the empty file to your Desktop as “hello.html“. This will change the editor in HTML mode, so you can enjoy the benefits of an IDE. Now go ahead and type in the following text into it:

Save the file, and then open it up using your web browser. It wasn’t that hard at all, right? You can go ahead and modify the file, save it and refresh the page in your browser, and you will see all the changes that you have done. You don’t need to be afraid, there is no way in which you can affect your operating system. You cannot delete files or things of that nature. And don’t be afraid of failures, as the saying goes “The master has failed more times than the beginner has even tried.”

HTML Basics and 101

HTML consists of tags and text. A HTML tag has a special meaning for the browser, basically this is the method of marking-up the document. Some tags can contain other tags in it like for example the unordered list tag <ul> can contain list items <li> in it. A paragraph tag <p> can contain a new line tag <br>, an anchor tag <a>, bold <b>, italic <i>, etc. tags.

In our example, the main HTML tag contains a head tag and a body tag. In the head tag, we can specify the title of the document, which will be displayed in the browser tab title. In the body, we have a H1 tag or a Heading 1 tag.

HTML tags can have attributes which can alter the tag behavior, for example, we can add a “style” attribute to our H1 to specify its style. If we add style=”color:red”, so it becomes <h1 style=”color:red”>Hello World!</h1> we can change its color from the default black to red. Of course, in a larger web page styling our elements one by one can become problematic, and it will clutter up our HTML. A better method would be to give the element a class attribute or an id, and then specify its style by that class or id.

There are plenty HTML tutorials and resources on the internet, you can watch tutorials on YouTube or The Great Curses Plus or read one of the thousands of articles on the internet about HTML.

One thing to keep in mind is that, no matter how much you read or watch, you will need to get your hands dirty and start to write HTML. It is the only way you will learn, because the minute you start writing, you will have more questions and those questions will lead to even more questions, until you become confident and fluent in HTML.

Styling and Scripting

A pure HTML web page is static. This means that it can’t contain dynamically changing parts, for example, “Our latest news”. If you create a website that features a news section, which is constantly being updated, then simply creating the articles and then updating the references to it can become a pretty huge task.

On the other hand, if you create a business card or about me type of website in HTML, which does not change that often, maybe once or twice a month, then a static HTML website is perfect. Because it does not have “moving” parts, like Database, Server side processing (PHP, Python, Ruby, etc.) there are fewer things to go wrong, and it’s also blazingly fast.

You can make a static page dynamic by adding JavaScript (ECMA Script to be precise) to it, which is a scripting programming language. With JavaScript, you can respond to user input by hiding or showing some parts of the HTML, you can also change the look and feel of the web page. With AJAX, you can request extra resources from your website, like sub-pages, contact form or your latest Tweets, and you can incorporate them into your website.

The default HTML styles are pretty boring, it’s black text on white background. You can change the style of any HTML element with CSS (Cascading Style Sheets). In HTML, you do not have control over how your document will be rendered, it is a feature of HTML, not a shortcoming. With CSS, you can try to be a bit more precise, but you still won’t have 100% control. Some browsers will do things a bit differently than others. The current CSS version, which is supported by all of the major browsers is CSS3, and has a lot of useful features which the previous standard lacked.

To understand CSS, you should start with the box model, it will save you a lot of confusion in the beginning, and it is important for you to understand the difference between border, padding, margins, etc. CSS is pretty easy to learn and like with HTML you will instantly see the changes that you have made. As already mentioned, you can add an id or class element to any HTML tag and you can write CSS rules for those ids and classes. To come back to our example, in the head section if we write the following text,

it will change the default white document color to blue.

One thing to keep in mind with CSS is that there are a lot of browser specific tags, so make sure that you test your website using different browsers or at least Google Chrome, Mozilla Firefox, Internet Explorer 11, and Edge. It won’t hurt to have a quick look on some mobile browsers as well, especially Safari IOS.

Conclusion

Learning HTML and CSS is easier than most programming languages, and it can be a very rewarding experience. With HTML, you will be able to create web pages exactly how you want them to be, without compromises like in the cases of CMS. Building HTML websites will allow you to host them anywhere and they will be extremely fast loading and smooth.

Even with the emergence of all types of drag and drop DIY website builders, HTML cannot be considered outdated. It underpins every website, and even with powerful CMS and website builder tools, which enable you to build a professionally-looking website without any coding knowledge, you may want to do some tweaking here and there on your site to get things just the way you want them to be. Learning some HTML will allow you to do that.

Knowing the basics of HTML can be a handy skill to acquire for anyone, not just those planning a career in IT. Those working with web content, online marketing, translation and anyone who requires an online presence will benefit from a crash course in HTML.