09 December 2019
Study Anytime Any Where
09 December 2019
We Will Open The Knowledge For You
09 December 2019
Anish Sir 24x7 Learning solution
09 December 2019
Before you begin, it's important that you know Windows or Unix. A working knowledge of Windows or Unix makes it much easier to learn HTML.
You should be familiar with:
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts:
<table> element, and contains a number of table cells ( <td>, for “table data” ) which are organized into table rows ( <tr>). The markup (HTML code) for a table is always based on rows, never columns.<th> (table header) element.colspan and rowspan attributes.<thead> — Table header<tbody> — Table body<tfoot> — Table footer<caption> element.<col> and <colgroup> to define table columns for styling. However, there are a number of limitations with this practice.<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
| Name | Favorite Color |
|---|---|
| Bob | Yellow |
| Michelle | Purple |
<table>
<caption>A complex table</caption>
<thead>
<tr>
<th colspan="3">Invoice #123456789</th>
<th>14 January 2025
</tr>
<tr>
<td colspan="2">
<strong>Pay to:</strong><br>
Acme Billing Co.<br>
123 Main St.<br>
Cityville, NA 12345
</td>
<td colspan="2">
<strong>Customer:</strong><br>
John Smith<br>
321 Willow Way<br>
Southeast Northwestershire, MA 54321
</td>
</tr>
</thead>
<tbody>
<tr>
<th>Name / Description</th>
<th>Qty.</th>
<th>@</th>
<th>Cost</th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr>
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">Subtotal</th>
<td> 110.00</td>
</tr>
<tr>
<th colspan="2">Tax</th>
<td> 8% </td>
<td>8.80</td>
</tr>
<tr>
<th colspan="3">Grand Total</th>
<td>$ 118.80</td>
</tr>
</tfoot>
</table>
| Invoice #123456789 | 14 January 2025 | ||
|---|---|---|---|
| Pay to: Acme Billing Co. 123 Main St. Cityville, NA 12345 |
Customer: John Smith 321 Willow Way Southeast Northwestershire, MA 54321 |
||
| Name / Description | Qty. | @ | Cost |
| Paperclips | 1000 | 0.01 | 10.00 |
| Staples (box) | 100 | 1.00 | 100.00 |
| Subtotal | 110.00 | ||
| Tax | 8% | 8.80 | |
| Grand Total | $ 118.80 | ||
It was common in the early days of the web to use tables as a layout device. Before the advent of modern standards-based browsers, this was the easiest way to make sure that page elements were arranged properly on the screen.
This design pattern is now considered very bad. It is bad for the user experience, bad for SEO, and bad for developers who have to maintain pages.
However, that doesn’t mean you should avoid tables — tables should be used whenever you need to present information in a tabular format.
(A (document) markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text.)
Used to create web pages. It is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>). HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end tag (they are also called opening tags and closing tags).
Web browsers can read HTML files and compose them into visible or audible web pages. Browsers do not display the HTML tags and scripts, but use them to interpret the content of the page. HTML describes the structure of a website semantically along with cues for presentation, making it a markup language, rather than a programming language.
HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages.
Web browsers can also refer to Cascading Style Sheets (CSS) to define the look and layout of text and other material. The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards, encourages the use of CSS over explicit presentational HTML.
HTML markup consists of several key components, including tags (and their attributes), character-based data types, character references and entity references. Another important component is the document type declaration, which triggers standards mode rendering.
The following is an example of the classic Hello world program, a common test employed for comparing programming languages, scripting languages and markup languages.
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
(The text between <html> and </html> describes the web page, and the text between <body> and </body> is the visible page content. The markup text "<title>This is a title</title>" defines the browser page title.)
This Document Type Declaration is for HTML5. If the <!DOCTYPE html> declaration is not included, various browsers will revert to "quirks mode" for rendering
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>A Heading</h1>
<p>text, text text, text</p>
<h2>Subhead</h2>
<p>text, text text, text</p>
</body>
</html>
Now it is time to learn seven new elements.
In the same way you emphasise the text by putting it between the openning tag <em> and the closing tag </em>, you can give stronger emphasis by using the openning tag <strong> and the closing tag </strong>.
<strong>Stronger emphasis.</strong>
Will look like this in the browser:
Likewise, you can make your text smaller using small:
<small>This should be in small.</small>
Will look like this in the browser:
This should be in small.
You can easily use several elements at the same time as long as you avoid overlapping elements. This is best illustrated by an example:
If you want to emphasise small text, it must be done like this:
<em><small>Emphasised small text</small></em>
And NOT like this:
<em><small>Emphasise small text</em></small>
The difference is that in the first example, we closed the tag we first opened last. This way we avoid confusing both ourselves and the browser.
As mentioned in Lesson 3 there are elements which are opened and closed in the same tag. These so-called empty elements are not connected to a specific passage in the text but rather are isolated labels. An example of such a tag is <br /> which creates a forced line break:
Some text<br /> and some more text in a new line
Will look like this in the browser:
Some text
and some more text in a new line
Notice that the tag is written as a contraction of an opening and closing tag with an empty space and a forward slash at the end: <br />.
Another element that is opened and closed in the same tag is <hr /> which is used to draw a horizontal line ("hr" stands for "horizontal rule"):
<hr />
Will look like this in the browser:
Examples of elements that needs both an opening tag and a closing tag - as most elements do - is ul, ol and li. These elements are used when you want to make lists.
ul is short for "unordered list" and inserts bullets for each list item. ol is short for "ordered list" and numbers each list item. To make items in the list use the li tag ("list item"). Confused? See the examples:
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
will look like this in the browser:
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>
will look like this in the browser:
That is all for now. Again, experiment and make your own pages using some of the seven new elements you learned in this lesson:
<strong>Stronger emphasis</strong>
<small>Small text</small>
<br /> Line shift
<hr /> Horizontal line
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>
As you probably remember, elements give structure to a HTML document and tells the browser how you want your website to be presented (for example, <br /> informs the browser to make a line break). In some elements you can add more information. Such additional information is called an attribute.
<h2 style="background-color:#ff0000;">My friendship with HTML</h2>
Attributes are always written within a start tag and are followed by an equals sign and the attribute details written between inverted commas. The semicolon after the attribute is for separating different style commands. We will get back to that later.
There are many different attributes. The first one you will learn is style. With the style attribute you can add layout to your website. For instance a background colour:
Example 2:
<html>
<head>
</head>
<body style="background-color:#ff0000;">
</body>
</html>
will show a completely red page in the browser - go ahead and see for yourself. We will explain in greater detail how the colour system works in a few moments.
Note that some tags and attributes use US spelling i.e. color instead of colour. It is important that you are careful to use the same spelling as we use in the examples in this tutorial - otherwise, browsers will not be able to understand your codes. Also, don't forget to always close the inverted commas (quotation marks) after an attribute.
In the above example, we asked for the background colour with the code "#ff0000". This is the colour code for red using so called hexadecimal numbers (HEX). Each colour has its own hexadecimal number. Here are some examples:
White: #ffffff
Black: #000000 (zeros)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00
A hexadecimal colour code consists of # and six digits or letters. There are more than 1000 HEX codes and it is not easy to figure out which HEX code is tied to a specific colour. To make it easier we have made a chart of the 216 most commonly used colours: 216 Web Safe Colour Chart.
You can also use the English name for the most common colours (white, black, red, blue, green and yellow).
<body style="background-color: red;">
To make links, you use what you always use when coding HTML: an element. A simple element with one attribute and you will be able to link to anything and everything. Here is an example of what a link to HTML.net could look like:
<a href="http://www.toshiyas.in/">Here is a link to Toshiyas</a>
Would look like this in the browser:
Here is a link to Toshiyas
If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.htm to page2.htm could look like this:
Example 2:
<a href="/page2.htm">Click here to go to page 2</a>
If page 2 were placed in a subfolder (named "subfolder"), the link could look like this:
<a href="/subfolder/page2.htm">Click here to go to page 2</a>
The other way around, a link from page 2 (in the subfolder) to page 1 would look like this:
<a href="/../page1.htm">A link to page 1</a>
"../" points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing "../../".
Did you understand the system? Alternatively, you can always type the complete address for the file (URL).
You can also create internal links within a page - for example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called id (identification) and the symbol "#".
Use the id attribute to mark the element to which you want to link. For example:
<h1 id="heading1">heading 1</h1>
You can now create a link to that element by using "#" in the link attribute. The "#" must be followed by the id of the tag you want to link to. For example:
<a href="#heading1">Link to heading 1</a>
All will become clear with an example
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link to heading 1</a></p>
<p><a href="#heading2">Link to heading 2</a></p>
<h1 id="heading1">heading 1</h1>
<p>Text text text text</p>
<h1 id="heading2">heading 2</h1>
<p>Text text text text</p>
</body>
</html>
will look like this in the browser (click on the two links):
Text text text text
Text text text text
(Note: An id attribute must start with a letter)
<a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">Send an e-mail to info at toshiyas.in</a>
will look like this in the browser:
Send an e-mail to nobody at toshiyas.in
The only difference between a link to an e-mail and a link to a file is that instead of typing the address of a document, you type mailto:followed by an e-mail address. When the link is clicked, the default e-mail program opens with a new blank message addressed to the specified e-mail address. Please note that this function will only work if there is an e-mail program installed on your computer. Give it a try!
To create a link, you always have to use the href attribute. In addition, you can also put a title on your link:
<a href="http://www.toshiyas.in/" title="Visit toshiyas.in and learn HTML">toshiyas.in</a>
Would look like this in the browser:
Toshiyas.in
<img src="/toshiyas.jpg" alt="David" />
All you need do is first tell the browser that you want to insert an image (img) and then where it is located (src, short for "source"). Do you get the picture?
Notice how the img element is opened and closed using the same tag. Like the <br /> tag, it is not tied to a piece of text.
"david.jpg" is the name of the image file you want to insert in your page. ".jpg" is the file type of the image. Just like the extension ".htm" shows that a file is an HTML document, ".jpg" tells the browser that a file is a picture. There are three different types of image file types you can insert into your pages:
GIF images are usually best for graphics and drawings, while JPEG images are usually better for photographs. This is for two reasons: first, GIF images only consist of 256 colours, while JPEG images comprise of millions of colours and second, the GIF format is better at compressing simple images, than the JPEG format which is optimized for more complex images. The better the compression, the smaller the size of the image file, the faster your page will load. As you probably know from your own experience, unnecessarily 'heavy' pages can be extremely annoying for the user.
Traditionally, the GIF and JPEG formats have been the two dominant image types, but lately, the PNG format has become more and more popular (primarily at the expense of the GIF format). The PNG format contains in many ways the best of both the JPEG and GIF format: millions of colours and effective compressing.
To make your own images, you need an image editing program. An image editing program is one of the most essential tools you need to create beautiful websites.
Unfortunately, no good image editing programs comes with Windows or other operating systems. Thus, you might consider investing in either Paint Shop Pro, PhotoShop or Macromedia Fireworks, which are three of the best image editing programs currently on the market.
However, as we said before, it will not be necessary to buy expensive programs to complete this tutorial. For now, you can download the excellent image editing program Irfan View which is so-called freeware and therefore costs nothing.
Or you can just borrow images from other sites by downloading them. But please be careful not to violate copyrights when downloading pictures. Still, it's useful to know how to download pictures, so here's how you do it:
Do this with the image below and save it on your computer at the same location as your HTML documents. (Notice that the logo is saved as a PNG file: logo.png):
There are a few more things you should know about images.
First, you can easily insert pictures located in other folders, or even pictures that are located on other websites:
<img src="/images/logo.png" />
<img src="http://www.toshiyas.in/logo.png" />
Second, images can be links:
<a href="http://www.toshiyas.in">
<img src="/logo.png" /></a>
You always need to use the attribute src, which tells the browser where the image is located. Besides that, there are a number of other attributes which can be useful when inserting images.
The alt attribute is used to give an alternate description of an image if, for some reason, the image is not shown for the user. This is especially important for users with impaired vision, or if the page is loaded very slowly. Therefore, always use the alt attribute:
<img src="/logo.gif" alt="toshiyas logo" />
Some browsers let the text of the alt attribute appear as a small pop-up box when the user places their cursor over the picture. Please note that when using the alt attribute, the aim is to provide an alternative description of the picture. The alt attribute should not be used to create special pop-up messages for the user since then visually impaired users will hear the message without knowing what the picture is.
The title attribute can be used to add information to the image:
<src="logo.gif" title="Learn HTML from toshiyas.in" />
If you, without clicking, place the cursor over the image, you will see the text "Learn HTML from HTML.net" appear as a pop-up box.
Two other important attributes are width and height:
<img src="/logo.png" width="141px" height="32px" />
The width and height attributes can be used to set the height and width of an image. The value that is used to set the width and height is pixels. Pixels are the units of measurement used to measure the resolution of screens. (The most common screen resolution is 1024x768 pixels). Unlike centimetres, pixels are relative units of measurement which depend on the resolution of the screen. To a user with a high screen resolution, 25 pixels may correspond to 1 centimetre, while the same 25 pixel in a low screen resolution may correspond to 1.5 centimetres on the screen.
If you do not set the width and height, the image will be inserted in its actual size. But with width and height you can manipulate the size:
<img src="/logo.gif" width="32px" height="32px" />
Tables are used when you need to show "tabular data" i.e. information that is logically presented in rows and columns.
Building tables in HTML may at first seem complicated but if you keep cool and watch your step, it is actually strictly logical - just like everything else in HTML.
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr> <
/table>
|
Cell 1 |
Cell 2 |
|
Cell 3 |
Cell 4 |
Will look like this in the browser:
As you will see from the above example, this is probably the most complicated HTML example we have given you so far. Let's break it down and explain the different tags:
3 different elements are used to insert tables:
Here is what happens in Example 1: the table starts with a <table>, followed by a <tr>, which indicates the beginning of a new row. Two cells are inserted in this row: <td>Cell 1</td> and <td>Cell 2</td>. The row is hereafter closed with a </tr> and a new row <tr> begins immediately after. The new row also contains two cells. The table is closed with </table>.
Just to make it clear: rows are horizontal lines of cells and columns are vertical lines of cells:
|
Cell 1 |
Cell 2 |
|
Cell 3 |
Cell 4 |
Cell 1 and Cell 2 form a row. Cell 1 and Cell 3 form a column.
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td>Cell 9</td>
<td>Cell 10</td>
<td>Cell 11</td>
<td>Cell 12</td>
</tr>
</table>
Will look like this in the browser:
|
Cell 1 |
Cell 2 |
Cell 3 |
Cell 4 |
|
Cell 5 |
Cell 6 |
Cell 7 |
Cell 8 |
|
Cell 9 |
Cell 10 |
Cell 11 |
Cell 12 |
Of course there are attributes. For example, the border attribute is used to specify the thickness of the border around your table:
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
|
Cell 1 |
Cell 2 |
|
Cell 3 |
Cell 4 |
Example 4:
<table border="1" width="30%">
This example will be displayed in the browser as a table with the width of 30% of the screen. Try it yourself.
There are lots of attributes for tables. Here are two more:
<td align="right" valign="top">Cell 1</td>
The title "More about tables" may sound a bit boring. But look at the positive side, when you master tables, there is absolutely nothing about HTML that will knock you out.
The two attributes colspan and rowspan are used when you want to create fancy tables.
Colspan is short for "column span". Colspan is used in the <td> tag to specify how many columns the cell should span:
<table border="1">
<tr>
<td colspan="3">Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
|
Cell 1 |
||
|
Cell 2 |
Cell 3 |
Cell 4 |
By setting colspan to "3", the cell in the first row spans three columns. If we instead had set colspan to "2", the cell would only have spanned two columns and it would have been necessary to insert an additional cell in the first row so that the number of columns will fit in the two rows.
<table border="1">
<tr>
<td colspan="2">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
Will look like this in the browser:
|
Cell 1 |
Cell 2 |
|
|
Cell 3 |
Cell 4 |
Cell 5 |
As you might already have guessed, rowspan specifies how many rows a cell should span over:
<table border="1">
<tr>
<td rowspan="3">Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
</tr>
</table>
Will look like this in the browser:
|
Cell 1 |
Cell 2 |
|
Cell 3 |
|
|
Cell 4 |
<HEAD>
<TITLE>Tosh!Yas Basic HTML Sample Page</TITLE>
</HEAD>
<BODY BGCOLOR="WHITE">
<CENTER>
<H1>A Simple Sample Web Page</H1>
<IMG SRC="http://toshiyas.in/images/call.jpg">
<H4>By Tosh!Yas Information Technology</H4>
<H2>Demonstrating a few HTML features</H2>
</CENTER>
HTML is really a very simple language. It consists of ordinary text, with commands that are enclosed by "<" and ">" characters, or bewteen an "&" and a ";". <P>
You don't really need to know much HTML to create a page, because you can copy bits of HTML from other pages that do what you want, then change the text!<P>
This page shows on the left as it appears in your browser, and the corresponding HTML code appears on the right. The HTML commands are linked to explanations of what they do.
<H3>Line Breaks</H3>
HTML doesn't normally use line breaks for ordinary text. A white space of any size is treated as a single space. This is because the author of the page has no way of knowing the size of the reader's screen, or what size type they will have their browser set for.<P>
If you want to put a line break at a particular place, you can use the "<BR>" command, or, for a paragraph break, the "<P>" command, which will insert a blank line. The heading command ("<4></4>") puts a blank line above and below the heading text.
<H4>Starting and Stopping Commands</H4>
Most HTML commands come in pairs: for example, "<H4>" marks the beginning of a size 4 heading, and "</H4>" marks the end of it. The closing command is always the same as the opening command, except for the addition of the "/".<P>
Modifiers are sometimes included along with the basic command, inside the opening commands < >. The modifier does not need to be repeated in the closing command.
<H1>This is a size "1" heading</H1>
<H2>This is a size "2" heading</H2>
<H3>This is a size "3" heading</H3>
<H4>This is a size "4" heading</H4>
<H5>This is a size "5" heading</H5>
<H6>This is a size "6" heading</H6>
<center>
<H4>Copyright © 2015, by
<A HREF="http://toshiyas.in/index.html">Tosh!Yas</A>
</H4>