Step-by-step guide to make you an HTML-guru (part 1)

Step-by-step guide to make you an HTML-guru (part 1)

Let`s face it, who hasn`t pondered of being a computer whiz? You Google thoroughly, read a number of forum articles, buy programming books, read them all … and realize to your shame that you don`t understand a single word of this. Do you recognize yourself? Unfortunately, your idea of being a cool programmer failed miserably. But as we know a good beginning is half the battle. The hardest thing (and the most important) in our case is to choose the right direction to start with.

HTML development

We suggest to start with HTML. It`s not really a programming language in the conventional sense, but a text markup language. In other words, it is responsible for content and its layout on a webpage. HTML makes webpage look readable rather than a bunch of code. Browsers read the given code and convert it into a regular page on your screen.

Creating your first page

Let’s make a website with HTML. Probably your computer already has a standard text editor (Notepad, Notepad ++). You can use it. However, you can find dozens of good HTML editors on the Internet. Believe me, they will make your life easier. Choose the one that you like, open it and type Hello! Save your document with .html extension (for example: mysite.html) Please note! The extension defines the file type and is always separated from a file name by a dot.

Double click on the file to open your first web page in browser.

Tags

Tag is a special piece of code that tells the browser how your webpage should look like. Each tag has angle brackets <>. Most tags come in pairs: an opening tag and a closing one. They surround content (word, phrase, image, etc.) and add meaning to it. The first tag is placed before the subject (word or phrase), while closing tag is placed immediately after it.
For example:is the opening tag which tells the browser that everything between that and theclosing tag is an HTML document. The stuff between <p> and </p> is the content of one paragraph.

The most important tags

The first line on the top <! DOCTYPE html> is a document type declaration which lets your browser know the type of document you open.
HTML document must have the following tags: <html>, <head> and <body>.
<html> is a container where your webpage is to be stored. <head> contains the data which are necessary for the browser and the search engine. <body>includes the content of the page displayed by your browser.

Your code should always contain the following lines:

<pre class="html">
<!DOCTYPE html>
<html>
<head></head>
<body></pre>
Your page content
</body>
</html></pre>

Key tags

Now when you have a basic structure of your HTML document, it is time to add some content to your web page. Write few sentences or just copy any text into your editor. This text will be displayed in your browser.
Save your file and open it in your browser. All sentences are placed in line, huh? The point is HTML does not notice lines and spaces. You have to explicitly state it.
There are several tags which help you to make structured text. These tags must be contained between the tags <body> и </body>.

Marking up paragraphs. <p></p> is a tag, which will help you to divide your text into paragraphs.
Change your document as following:

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <p>I love HTML. I am very responsible and serious person. I never do things by halves. I always achieve set goals.</p>
 </body>
</html>

Making headlines. For better text structuring there is the whole group of heading tags: <h1>, <h2>,…<h6>. <h1> – is the most important tag. Note! <h1> can only be used once. Other tags can be used according to your wish.

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <h1>My first page</h1>
 <p>I love HTML. I am very responsible and serious person. I never do things by halves. I always achieve set goals.</p>
 <h2> Why would I do this?</h2>
I`ll be smarter. I`ll be all-around person. Because Mom said so. My cat will respect me.
 </body>
</html>

Make lists. Place your text in lists with the help of <ul>, <ol> tags. Use <ul> if you need unordered lists,ol> is needed to define ordered ones. Each list item has a pair of <li>, </li> tags.

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <h1>My first page</h1>
 <p>I love HTML. I am very responsible and serious person. I never do things by halves. I always achieve set goals</p>
 <h2>Why would I do this?</h2>
<ul>
 <li>I`ll be smarter.</li> 
 <li>I`ll be all-around person. </li>
 <li>Because Mom said so.</li> 
 <li>My cat will respect me.</li>
</ul>
 <h2>What`s stopping me from being a computer whiz?</h2>
<ol>
 <li> self-doubt</li>
 <li>fear</li>
 <li>laziness</li>
</ol>
 </body>
</html>

Emphasiz. To emhasize your text use text in bold or italics using paired tags <b> и <i> respectively.

Line breaks. Use <br> tag to separate lines. To draw a horizontal line separating the text, use <hr>. Note: These two tags are unpaired, thus there is no need in ending tags.

Highlighting. Paired tag <mark> highlights the selected text in yellow. Put the word or phrase you want to select between the opening and closing tags.

Experiment with your text. Apply different tags to your content to make your HTML-page nice.

Links and images

Links are introduced into text by means of <a> tag and href attribute, which defines the destination of the link. Put your link before a word or phrase by clicking on which you will be taken to a specified resource. Thus the code line could be as follows:
<a href=”https://unihost.com/”> Your word or phrase </a>

To make your website less boring and more attractive for visitors use media content.The image is the most common and the most simple example. The <img> tag is used to insert image into your HTML document. This tag also needs the src attribute which specifies the address of the image. If the image is on your computer, then simply write a place where your picture is stored. Your code will look like this:
< src = “/ images / cat.png” width = “120” height = “90” alt = “happy cat”>
Note! You can set your own image size.
Use alt (alternative description)attribute to provide users information about the image content.
Using all this stuff, your document takes the form:

<!DOCTYPE html>
<html>
 <head></head>
 <body>
 <h1>My first page</h1>
<p><a href=”http://howtolearnhtml.com”>I love HTML.</a> I am <strong>very</strong> <b>responsible</b> and serious person. I never do things by halves. I always achieve set goals.</p>
<img src=”success.png” width=”120” height=”90” alt=”successful man”>
 <h2>Why would I do this?</h2>
<ul>
 <li>I`ll be smarter.</li> 
 <li>I`ll be all-around person. </li>
 <li>Because Mom said so.</li> 
 <li><i>My cat</i> will respect me.</li>
</ul>
<hr>
 <h2>What`s <em>stopping</em> me from being a computer whiz?</h2>
<ol>
 <li> <mark>self-doubt</mark></li>
 <li><mark>feat</mark></li>
 <li><mark>laziness</mark></li>
</ol>
 </body>
</html>

In our next lesson we will continue our free html course for beginners and learn how to make tables and simple forms. Remember that the programming is quite difficult and bulky knowledge section. As in any field, it demands efforts to achieve certain results. However, we hasten to please you. Many successful professionals from leading IT companies were doctors, managers or emploees. Some of them do not have college diplomas at all. Their enthusiasm and hard work has made them on top. If they can, why can`t you? :)

GET THE MOST INTERESTING, USEFUL AND PRACTICAL ARTICLES IN YOUR MAILBOX

About author

You might also like

Building Your Website 0 Comments

5 Tips to Increase Your Website Traffic For Sure

Every website owner is interested how to increase website traffic. The first thing that comes to mind is, of course, SEO optimization, but there are also other (equally effective!) methods

Building Your Website 0 Comments

HTML Step-by-Step Guide: Part 2

In the first part of our express course you’ve touched the basics of HTML: you’ve found out what are tags and what are they for. We are sure that you

Building Your Website 0 Comments

8 Simple Rules to Stay Safe on Public Wi-Fi Networks

Public Wi-Fi is a symbol of happy life. If you have free Internet it is impossible not to use it, right? But you should remember: the opportunity to be all