How to create your first web page

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

In this article you can find tips and advices, which will help you to create your first web page from scratch. Therefore, the material will be delivered as detailed as possible.
To do it you need only two things:

  1. Text editor
  2. Browser

As a text editor you can use both regular Microsoft Notepad and other more advanced programs. Let’s talk about some of them:

Text editors

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

Notepad++ is basically a more complex version of Notepad, but it has a HTML-syntax highlighting, what makes the code easier to read. I recommend you to use this editor in the learning process.
To download Notepad++ we 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 it which will allow you avoid a lot of handwork, but first we need to get hand in it and write hundreds of meters of code in a manual way. Therefore, for now we neglect the plug-ins.

Do you remember how in the first class we wrote the same letter for a few lines in a special exercise book with diagonal line? 🙂 You can consider that now I ask you to write these letters, because it will improve your understanding and memorizing of the code.

Sublime Text is very handy because it suggests the tags (code completion), makes indents, closes the tags and much more. In short, it makes the work with HTML-documents much easier, but I recommend you to use it later, when you will learn at least the basic tags and understand the basic rules of the syntax. However, if you use an OS different from Windows you should install Sublime outright.

Здесь you can choose the proper system and download the program. You can use it for free, but if you want to remove the message “unregistered” you will need to pay 70$.

Browser

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


Well, we finalized our working inventory.

Now you need to create a folder with any name, e.g. “HTML_Start”, and save your first HTML-document in it:

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

Of course you can give any name to your first file, but I suggest you to learn how to do it right from the very beginning.

Why index.html?

Usually we get in a site from its home page. When the site has a lot of pages, we prompt the web-server which of them need to be loaded automatically. In most cases, the site address is written shortly, without unnecessary files at the end. Compare vertex-academy.com and vertex-academy.com/index – it is the same page, but we certainly will choose the first variant. At this moment the browser goes to the folder of the site and decides which file to display. If index.html is missing in the folder, then the browser displays the list of all files that are in this folder.

Now we are finally 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 bowser some information about the text between the tags (in which place it need to be, how to display it and so on). Typically, the tags are paired, i.e. there are opening and closing tags, where the slash is added before the tag name:

There are also unpaired tags, 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 Player – you need to learn them, or you can also just ctrl+c, ctrl+v this structure every time you create a new HTML-document.

Let’s analyze each of these tags in details.

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

Since the fifth version it became much shorter, which I can’t say without smiling :). As you can see, this tag is unpaired.

Now in order to describe other paired tags more evident, let’s look at them from a different angle.

html_structure

The elements are like containers. We open a box (write a tag), put something in it and close it (write a closing tag).

You must always close the tags. Often browsers do a disservice to us – they close the tags if we forget to do it. That’s why having made a mistake in the code you can check the code in the browser, everything is fine, profit! But the browser isn’t smart enough to know exactly where you need to close a particular tag. Sometimes it manages to “guess”. If we, for example, forgot to close <head>tag, it would automatically close it before <body> tag, because this is the standard structure of the document. But when it comes to other tags, it is more complicated and it can close the tag in the wrong place, which can ruin the whole document. Therefore, make it a rule:

exclamation-28996_640When writing the paired tags, it is convenient to use opening and closing tags, so you don’t forget anything.

Let’s look at the structure of the document one more time:

vertex_html_structure

 

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

 

Here we have another tag:

In order to understand what it’s for, 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 it 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 created your first web page! 🙂

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

Save the file, refresh the page and voila! Our page has its own 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 case <head> and <body> are inside the <html>element, that’s why they are written indented from it. The <title> element in embedded in <head>, that’s why it’s indented. If you write it without indentation, the browser will understand it. But if you write a lot of code it can be hard for you to puzzle it out. It will be even more difficult to a developer from outside.

element <head>

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

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

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

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

Meet the headings and paragraph

<h1></h1> is the heading of the first level. Be default, the browser highlights it in bold with 24 font size. It is the most important heading on the page and often represents the name of the page. The search bots use it to identify the page.

<h2></h2>is the heading of the second level, the font is smaller in comparison to <h1>. The font size is 18 p. This heading is used to indicate the names of large sections of the page. It defines less important heading, then h1.

And so on, 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 will automatically add the inter-paragraph spacing and write each paragraph on the new line, using multiple <p> tags.

Now let’s check how it looks:

Hmm, that was kind of a mess. Although we wrote each phrase on the new line, for some reason the browser didn’t understand it. The case is that the spaces are not displayed in HTML-code, and the browser interpreted everything that is 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, to check the result and to play with the code by clicking “Edit in JSFiddle”

We used several

tags and as a result the browser wrote each element on the new line 🙂

tag <br>

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 check how the text would look if we used <p> instead of <br>:

It is also quite readable, although there is no spacing between each line, which earlier we added by means of several <p>. You should choose the way of dividing the text depending on the content that you need to write.

tag <pre>

Тег <pre> tag indicates some preliminary text formatting, most often in the Courier format. It’s very convenient to use it with pieces of poetry.

tag <hr>

For a tidbit here is another tag used for break - <hr>. It is unpaired, you don’t need to close it, just as <br> It is mainly used to separate a number of texts with different meanings (for example, it is appropriate to use it with several funny stories). It also can be used just for the visual design of the page.

We learned the structure of HTML-document and frequently used tags. From now on we will start to learn how to beautify our web pages 🙂

For those who want to take a deeper look in this topic, we recommend you the following guides:
webref.ru - a guide to the layout in Russian.
w3schools.com - a guide in English. It has the following advantages:

  • There are recommendations from the W3C, i.e. here you can find the most proper information about HTML5
  • At the same time, you can improve your knowledge of English language, if it is not perfect yet 🙂
  • Here упражнения you can find some exercises for beginners, where you can immediately check the correctness of the code. For example, we recommend you to try this exercise

See you!

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Facebooktwittergoogle_plustumblrFacebooktwittergoogle_plustumblr

Publiction author

offline 4 hours

Vertex Academy

Comments: 0Publics: 274Registration: 06-03-2016

Leave a Reply

Your email address will not be published.

Subscribe news

Subscribe to our newsletter we will keep you up-to-date!

Самоучители--узнать детальнее--