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.
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.
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>
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?
You might also like
If an Egyptian salesman hit the top, then I am sure you can do it either! Who wants to be the first one in Google ranking? I want! I do
Website building is not an easy task. Even if you have a brilliant idea you need to think about lots of technical details to put it into practice. Users who