How Do You Create Your First Web Page?

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

In this article, you will find tips and advice which will help you create your first web page from scratch. Therefore, we will be as detailed as possible.
You only need two things to make a web page:

  1. A text editor
  2. A browser

As a text editor, you can use Microsoft Notepad or some other more advanced programs. Let’s examine some of these text editors:

Text Editors

Notepad is a standard Windows program. To create a document in this editor, you have to click on the desktop with the right mouse button, select “Create,” and then “Text document.”

Notepad++ is basically a more complex version of Notepad, but it has HTML-syntax highlighting, which makes the code easier to read. I recommend you use this editor in the learning process.
To download Notepad++, we need to go to their website and click “download.” Once downloaded, install it on your computer. The program is absolutely free.

Also, it is possible to install plug-ins in Notepad++ which will allow you avoid a lot of handwork. For starters though, we need to roll up our sleeves and write hundreds of meters of code manually. So, for now, we will neglect the plug-ins.

Do you remember, back in first grade, how you wrote the same letters over and over again in a special notebook with the help of a horizontal line? 🙂 Well, think of the exercises that follow like those letter exercises, because, just like those notebooks did, these exercises will improve your understanding and memorizing.

Sublime Text is very handy because it suggests tags (code completion), makes indents, closes tags, and much more. In short, it makes working with HTML documents much easier, but I recommend you use it later, when you have learned at least the basic tags and have understood the main rules of syntax. However, if you use an operating system other than Windows, then you should install Sublime right away.

Here you can choose version that is appropriate to your operation system and download the program. You can use it for free, but if you want to remove the “unregistered” message, you need to pay $70.

Browsers

You can use any of your choice. However, most developers use Chrome for web development, because it has a number of tools which make a developer’s life easier. Keep in mind that some browsers may display the same code differently and that’s why, when it comes to creating a serious site, you need to check your code in all the popular browsers.


Well, we've finalized our working inventory.

Now you need to create a folder with any name (for example: “HTML_Start”) and save your first HTML document in it:

  1. Open Notepad++
  2. In the upper-left corner, click “File”, then “Save as”, and select your folder
  3. Name the file “index.html” or simply “index” and in the “file type” line, select Hyper Text Markup Language file
  4. Click “Save”

Of course, you can give your first file any name, but I suggest that you practice doing it right from the very beginning.

Why index.html?

Usually, we get to a site from its home page. When a site has a lot of pages, the web server is prompted about which of the pages need to be loaded automatically. In most cases, the site address is written concisely, without unnecessary files at the end. Compare "vertex-academy.com" and "vertex-academy.com/index" – they are the same page, but the first option is clearly better. When the browser goes to the folder of the site, it determines which file it needs to display. If there is no index.html in the folder, then the browser displays a list of all the files that are in the folder.

Now you are at last ready to create your first web page. But first...

A Few Words about Tags

HTML code is always written in angle brackets. For example:

It is the HTML element which tells the browser some information about the text between the tags (where it needs to be, how it should be displayed, and so on). Typically, tags are paired (i.e. there is an opening tag and there is a closing tag which has a slash added before the tag name).

There are also unpaired tags, but we will talk about them a little bit later.

Well, let’s begin to code! 😉

Each html document contains a set of specific tags. These tags are like the Lord’s Prayer; you can either learn them or you can just ctrl+c, ctrl+v to make this structure every time you create a new HTML document.

Let’s examine each of these tags in detail.

This tag isn’t case-sensitive, so you can write it as <!doctype html>. It tells the browser which version of HTML the document is written in.
For example, for HTML 4.01, this element would look as follows:

Ever since the fifth version of HTML came out, the elements have been much shorter. And by the way, notice how this tag is unpaired.

Now, in order to better describe the other paired tags, let’s look at them from a different angle:

html_structure

Elements are like containers. We open a box (by writing a tag), put something in it, and close it (by writing a closing tag).

You must always close the tags. Browsers often do a disservice to us; they close the tags if we forget to do it. So if you make a mistake in the code, you can check the code in the browser and everything looks fine. But browsers aren't always smart enough to know exactly where you wanted to close a particular tag. Sometimes, it just guesses. For example, if we forget to close a <head>tag, it will automatically close it before the <body> tag, because this is the standard structure of an HTML document. But when it comes to other tags, it is more complicated and it can close the tag in the wrong place and thereby ruin the whole document. Therefore, make it a rule:

exclamation-28996_640When making paired tags, you should start by immediately writing the opening and closing tags, so you don’t put it off and then forget to do it later.

Let’s take another look at the structure of a HTML document:

vertex_html_structure

 

question-mark-295272_640We purposely made a mistake in this picture. Can you find it? 🙂

 

Here we have another tag:

In order to understand what it does, let’s try to create an HTML document without it. Open our saved index.html file with Notepad++ and write the following code:

 

Select the encoding of the document: «Encoding» - «Convert to UTF-8»

Now save it. The easiest way to do this is either to press ctrl + s or to click on the floppy disk in the top left corner of the editor. Run the saved index.html file in your browser.

1st_web_page

 

Ta-da, you've created your first web page! 🙂

But what kind of text should be displayed in the browser tab? This is the path to our file… but it looks long and ugly. In order to give a web page a name, there exists a special tag <title>. It is always written inside the element <head>. Let’s try it:

Save the file, refresh the page, and voila! Our page has a name.

nazyvaem_veb-stranicu

 

exclamation-28996_640It’s considered good manners to write every enclosed element indented (by pressing tab, with two or four spaces). In our example, <head> and <body> are inside the <html> element. That’s why they are written indented from it. The <title> element in embedded in <head> and that’s why it’s indented from <head>. If you write without indentation, the browser will understand. But if you write a lot of code, it may be hard for you to figure it out. And it will be even more difficult for a developer who didn't write it.

The <head> Element

What else can be placed in the head of the document? Usually, it contains information for search bots and browser counters, such as keywords and other service information. Apart from the <title> element, the user doesn't see anything from the <head> element. There is also another important tag that tells the browser which encoding it should read your document in:

We have already specified the needed encoding in the notebook, but it is desirable to also inform the browser about it, because some browsers can misunderstand you. By the way, you don’t need to close the metatags.

Let’s commit the structure of our HTML document to memory:

From now on, we will show only the code contained within the <body>, but keep your head! 😉
Well, we've looked at the skeleton of our document. Now it’s time to add a bit of muscle to it 😉

Meet Headings and Paragraph

<h1></h1> is the heading of the first level. By default, the browser highlights it in bold with a 24 font size. <h1> is the most important heading on the page and it often displays the name of the page. Search bots use it to identify the page.

<h2></h2>is the heading of the second level. The font is 18 pixels, smaller than <h1>. This heading is used to indicate the names of large sections of the page. It defines less important headings than <h1>.

And so on and so forth until…

<h6></h6> is the heading of the sixth level. It defines the least important heading. By default, it has the smallest font size.

<p></p> is the paragraph. The browser automatically adds the spaces between the paragraphs and writes each paragraph on a new line whenever several <p> tags are employed.

Now, let’s check out how it looks:

Hmm, that was kind of a mess. Although we wrote each phrase on a new line, for some reason the browser didn’t understand it. The thing is that the spaces are not displayed in HTML code, and the browser interpreted everything that was placed in container <p> as a single paragraph. But what if we enclose each phrase in <p>tag?

Note: the editor below gives you an opportunity to look at the code in the HTML tab, check the Result, and play with the code by clicking “Edit in JSFiddle”

We used several <p> tags and, as a result, the browser wrote each element on a new line 🙂

The <br> Tag

There is one more tag: <br>, which stands for break. It inserts a single line break. By the way, this tag is unpaired, so you don’t need to close it because it doesn’t contain anything.
Let’s see how the text will look if we use <p> instead of <br>:

It is also quite readable, although there is no spacing between each line, which we earlier added by means of several <p> tags. You can choose either way to divide the text, depending on the content that you want to display.

The <pre> Tag

The <pre> tag indicates some preliminary text formatting, most often in Courier. It’s very convenient to use with pieces of poetry.

The <hr> Tag

For a tidbit, here is another tag used to make breaks: <hr>. It is unpaired, so, just like with <br>, you don’t need to close it. It is mainly used to separate a number of texts with different meanings (for example, with several jokes). It's also used simply for the visual design of the page.

We have learned about the structure of an HTML document and the purpose of some frequently used tags. In the next article, we will start learning how to beautify our web pages 🙂

For those who want to take a deeper look at this topic, we recommend the following guide:
w3schools.com - It has the following advantages:

  • There are recommendations from the W3C (i.e. here you can find the most accurate information about HTML5)
  • Here you can find some exercises for beginners, where you can immediately check if the code is right or not. For example, we recommend you try this exercise.

Until we meet again!

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr