How To Make Website Using HTML

HTML websites enjoyed widespread popularity in the 90s and 2000s. Simply because there were no particular alternatives. Their creation is the basis of the basics, the alphabet of a web developer. Now they are mainly used for teaching the basics of web page layout, learning HTML and CSS, which is useful when working with any engine in general.

Despite the stereotypes, HTML sites don’t have to be with primitive designs. There are many free HTML templates that are as attractive as those used in website builders or CMS. But large projects are inconvenient to work with them. Many pages have a lot of hassle, since editing each one requires digging through the code. They don’t have a control panel, and all pages will be static – no blogs, forums, etc.

HTML sites are most often in the format of landing pages or business card sites. In these scenarios, they more or less justify themselves – they work quickly, do not load the server, and do not require a database connection. All content is contained within the pages themselves. HTML is responsible for the layout, the structure of the blocks, and with the help of Cascading Style Sheets (CSS), these elements can be given the necessary appearance and format (font, color, background, shape, indentation, etc.).

Layout in HTML can be tabular (table is an outdated standard) and block (div – that’s what they use now). The language uses an extensive set of tags, almost all of which are used as a pair of opening and closing tags (for example, <p> </p> is a paragraph tag), which contain content. CSS uses attributes, properties and their values ​​that are connected to individual elements of the HTML page wireframe. That is, you can selectively give the desired look to each element on the site separately.

I do not aim to teach you the syntax of languages ​​- if necessary, you can easily find hundreds of lessons and reference books on them on the Web. Let’s show you the basics – how to make a simple HTML website in a notepad, create a web page with your own hands according to the same standards that all the sites you visit use. Using an example, you can grasp the essence of the process, evaluate for yourself whether this topic is interesting at all.

Step 1 – creating an HTML page

Open standard notepad for Windows (or any other text editor – Notepad ++, Sublime Text – it doesn’t matter), open the File menu, select Save As, change the encoding from ANSI to UTF-8 (for the correct display of Russian letters in the browser), enter the title of the web page and change the extension to HTML (it comes after the period), then save the changes.

Step 2 – add the web page markup

Now let’s start editing the file. The first step is to add web markup, a standard piece of code that allows browsers to recognize content contained within internal tags. Just copy and paste it:

<! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 Transitional // EN”>

<html>

<head>

<meta http-equiv = “Content-Type” content = “text / html; charset = UTF-8”>

<title> Top Newbie Site </title>

</head>

<body>

<h1> This is the first level heading tag for the page content </h1>

<p> First paragraph </p>

<p> Second paragraph </p>

<p> Third paragraph, etc. </p>

</body>

</html>

 

These are the basic elements that any web resource has. All page content must be between the <body> </body> tags (this is the body of the document), everything that goes beyond them above and below will not be displayed on the site.

Step 3 – working with CSS styles

Let’s say that you added some text to your paragraphs, now you need to style them – select fonts, background, padding, page area width, etc. It might look like this:

body {

background: # F2F2F2;

max-width: 900px;

margin: 10px auto;

padding: 30px;

} 

h1 {

color: # 4C4C4C;

padding-bottom: 20px;

margin-bottom: 20px;

border-bottom: 2px solid #BEBEBE;

}

p {

font: italic;

}

In the example, you can see the background color and the value of this attribute (# F2F2F2), the page width (900 pixels), padding, title color, padding and margin from the body text and page borders (padding and margin), as well as the colored border of the footer of the site. 2 pixels (border-bottom). The complete page with markup, content and styles will look like this:

<! DOCTYPE html PUBLIC “- // W3C // DTD HTML 4.01 Transitional // EN”>

<html>

<head>

<meta http-equiv = “Content-Type” content = “text / html; charset = UTF-8”>

<title> Top Newbie Site </title>

<style>

body {

background: # F2F2F2;

max-width: 900px;

margin: 10px auto;

padding: 30px;

}

 

h1 {

color: # 4C4C4C;

padding-bottom: 20px;

margin-bottom: 20px;

border-bottom: 2px solid #BEBEBE;

}

p {

font: italic;

}

</style>

</head>

<body>

<h1> This is the first level heading tag for the page content </h1>

<p> First paragraph </p>

<p> Second paragraph </p>

<p> Third paragraph, etc. </p> 

</body>

</html>

As you can see, we’ve added CSS properties between the <style> </style> tags. After completing all operations, save the result. Now, if you try to open the resulting page, it will automatically launch in the browser. Congratulations, you’ve created your first simple notepad site.

Step 4 – uploading the site to hosting

It is clear that the site from the example is not one that is published on the Internet and is spent on paid hosting. But, if you follow the same principles, having studied HTML and CSS, create a really worthwhile website to achieve some goals, then hosting and a domain will be required to display it on the Internet.

Choosing a hosting is an important task. HTML sites are lightweight and don’t require any superpower to run, but nevertheless, we recommend using a quality hosting like Bluehost. It is one of the most reliable and popular foreign providers with a huge client base (serves over 2 million domains), an impressive number of servers around the world (about 120) and good conditions. It costs $2.95 / month, plus a domain is given for the first year as a gift, free SSL and other interesting buns.

The speed of the Bluehost sites is high, since the servers are located in the cloud, and CDN technology is used. The provider is bulletproof – this means that your site will not be disabled under any circumstances – you do not have to be afraid of competitors’ complaints and other things. Everything will work reliably. Technical support around the clock.

In order to run an HTML-site on a hosting, you just need to copy its files to the directory with the domain name. You can use the built-in FTP server or a program like Filezilla, but in this case, you will have to configure it to work with the hosting. No database needed.

Conclusions and recommendations

To sum up, the simplest HTML website can be created in a notepad in a few minutes. Building more complex structures that can perform specific tasks and look at the level will require an in-depth knowledge of HTML5 and CCS3. This approach is useful for beginners to learn, or maybe you can hire HTML developer. In general, it makes little sense to create such sites in other scenarios – it is much more efficient to use website builders (for example, uCoz, uKit and others) or even the WordPress engine, if you have experience.