Learn HTML – an interactive tutorial
Learn HTML – an interactive tutorial
Introduction
Markup Language (HTML) is the coding format used for the creation of web pages. It’s a way of describing how a set of text and images should look and how to be displayed to the viewer. It provides system for the structure of text-based information in the page by denoting certain text as headings, paragraphs, lists- alongwith supplementing the text with interactive forms, embedded images etc. It has a special structure to instruct computer programmes in a readable way.
HTML is written in the form of labels (Tags) surrounded by < and > signs. It’s much simpler and is not a programming language in real like Java or C.
A brief look at history of HTML
The original HTML was created by Tim Berners-Lee and Robert Cailliau in 1989 on a NeXTcube workstation in the NeXTSTEP development environment. But at that time, HTML was just a collection of loosely defined elements without any specification. Even its earlier versions were defined with loose syntactic rules.
Later on CERN and the Massachusetts Institute of Technology (MIT) in 1994 formed the ‘world wide web consortium (W3C)’ to maintain the HTML specifications with input from commercial software vendors. However, in 2000, HTML also became an international standard (ISO/IEC 15445:2000). The present syntax of HTML is much stricter with more precise codes. For in depth understanding of the HTML you should better visit w3schools ; my purpose of writing this article is to give the basic idea of the value of HTML for a skilled web designing. Let’s we begin.
Basic Commands in HTML
Web pages look all glittering, walking, dancing multimedia packages in general but they are simply text files in reality. Means all you need to create web pages is a text editor. You then save the document as “.html” or “.htm” file. HTML code consists of “tags”, which instruct the browser to display a certain thing on the screen. Tags have “<” sign with certain words inbetween and then followed by a “>”. Start tag always looks like -”<html>” and an end tag looks - “</html>”. The only difference between a start tag and the end tag is the slash (/). Properties of the tag are defined by whatever occurs between the two tags. There are two sections within the <html> and </html> tags- <head> (header) section and the <body> (body) section.
Header Section
The header is the section of the web page which includes all the stuff where you edit certain controls of the page without making it known to the viewers. In header section you do control the title of the page, set the base for hyperlinks, set up the <ISINDEX> tag, show relationships (using <link>), set up meta pages, and set up style sheets. This section is contained within a <head> tag and </head> tag.
Body Section
Body section contains all that can be seen when the user loads the page. Whatever seen on the web pages is done in between two body tags. You can set the background picture, background color, link color, text color and active link color within the <body> tag.
Color
HTML colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB).The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF). So, here black would be #000000. White would be #FFFFFF. Red would be #FF0000. Green would be #00FF00. Blue would be #0000FF. The code is a six digit number. The first two digits are the red value. The second two digits are the green value. The last two digits are the blue value.
|
Color |
Color HEX Notation |
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFFFF |
Take utmost care in choosing text color so that it contrasts with the picture and the text should be readable. Use the background color in case if you do not wish to put a picture in the background. Text color is the color of the words on a document. Link color is the color of the words that are links. Visited link color is the color that links turn if you’ve already visited a particular site. Active link color is the color that the link turns when you click on a link. If you click on a link really fast, it will flash another color.
Links
| <a href=”http://www.webdesigningcompany.net/”>click here</a> |
The web concept works on the idea of documents linked to other documents. In order to link to another document, firstly you must have the URL. It can be a server name with proper designations or have a document name attached. Then you have to make an anchor (<a> tag). To make a link to http://www.webdesigningcompany.net/, and make the words “click here” be the link, you should add this to your html document:
Never forget to use the </a> tag otherwise all of the text that appears after the<a href=”http://www.webdesigningcompany.net/”> tag will be a link to http://www.webdesigningcompany.net/. When you have a large document, and you want to link to a certain part then you can set the name location of an anchor and link to it. You can also create an anchor to the place in you documents where you want to jump to and you put a link to it somewhere else. In this way there’s a link from an anchor to an anchor.
| <a name=”location1″></a> |
If that was in the file “home.html” and you wanted to make a link to that particular spot on home.html, you shall do so like this:
| <a href=”home.html#location1″>go to location 1</a> |
On a web page text is entered just by writing words in your HTML document. But in order to add style to them, the text must be surrounded by certain tags. These are the text styling tags:
| <b>bold</b><big>big text</big><cite>citations</cite><em>emphasis</em><i>italics</i>
<small>small</small> <strike>strike</strike> <strong>strong</strong> <sub>subscript</sub> <sup>superscript</sup> <tt>teletype</tt> <u>underlined</u> <pre>preformatted</pre> |
| Heading size 1 : <h1>Heading size 1</h1>Heading size 2 :<2>Heading size 2</h2>Heading size 3 : <h3>Heading size 3</h3>
Heading size 4 : <h4>Heading size 4</h4> Heading size 5 : <h5>Heading size 5</h5> Heading size 6 : <h6>Heading size 6</h6> |
If you want to start a new line then use the <br> tag. It stands for “break return.” You can also use <p> and </p> around each paragraph. You should specify variables within the <p> tag. For aligning paragraph centered in the middle of the screen, you can use <p align=”center”>, to move it to the right use- align=”right” and to move it to the left use -align=”left”.
Images
Images in a web page if used correctly and sparingly, they’ll make page exciting; also irrational usage shall make your page sluggish, tedious & monotonous. To insert a image to your document you’ll have to add this tag:
| <img src=”picturefilename.gif”> |
Where picturefilename.gif is the name of a gif file. There are two types of images mainly used on the web. They are gif and jpg. Jpg can also be written as jpeg. To insert the file called “htmlcolor.gif”, you should use the tag <img src=”htmlcolor.gif”>
But you must be sure that the image is in the same directory as the html file that you just put the tag in. Because the document is /both/beginner/images.html and the image is /both/images/htmlcolor.gif. You have to <img src=”../images/htmlcolor.gif”> where the two periods (..) mean “up one directory level” which was the “both” directory.
Tables
Tables represents relationships between data and are generally defined with the <table> tag. It is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for “table data,” which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. For instance:
| <html><table border=”1″><tr><td>HTML Tutorial</td><td>create web page</td>
</tr> <tr> <td>Begin reading</td> <td>Easy stuff</td> </tr> </table> </html> |
This text will look in the web browser as:
| HTML Tutorial | create web page |
| Begin reading | Easy stuff |
Tables are used on websites for arranging information in a table and for creating a page layout with the use of hidden tables. Use of tables in order to divide the page into different sections is the widely usable tool as almost all major sites on the web are using invisible tables to layout the pages. The content of a table is not shown until the entire table is loaded. In case if you have longer pages, you should divide it into two or more tables; so that user can read the upper content while the rest of the page is getting loaded.
In conclusion, HTML is harder to learn but more customizable & independent and if you’re looking serious to the web design then HTML is a must.
The Author is the owner of a Web Site Design Company, and providing Web Design and Development Solutions to clients across USA and UK for affordable and sensible prices.
Leave a Reply
You must be logged in to post a comment.