HTML Tutorial Tutorialspoint

HTML Tutorial Tutorialspoint - pdf

This tutorial is designed to teach you some the basics of HyperText Markup Language (HTML), with an emphasis on transforming a word-processing document into a simple Web page.

Contents
This tutorial will guide you through the following steps:

HTML – OVERVIEW
HTML – BASIC TAGS
HTML – ELEMENTS
HTML – ATTRIBUTES
HTML – FORMATTING
HTML – PHRASE TAGS
HTML – META TAGS
HTML – COMMENTS
HTML – IMAGES
HTML – TABLES
HTML – LISTS
HTML - TEXT LINKS
HTML – IMAGE LINKS
HTML – EMAIL LINKS
HTML – FRAMES
HTML – IFRAMES
HTML – BLOCKS
HTML – BACKGROUNDS
HTML – COLORS
HTML – FONTS
HTML – FORMS
HTML – EMBED MULTIMEDIA
HTML - MARQUEES
HTML – HEADER
HTML – STYLE SHEET
HTML - JAVASCRIPT
HTML - LAYOUTS
HTML - EVENTS REFERENCE
HTML – ATTRIBUTE REFERENCE
HTML – FONTS REFERENCE
HTML – COLOR NAMES
HTML – URL ENCODING
LANGUAGE ISO CODES
HTML – CHARACTER ENCODINGS
HTML – DEPRECATED TAGS

pdf HTML Tutorial Tutorialspoint

HTML – BACKGROUNDS

HTML body background color tag with "bgcolor" attribute




<body bgcolor="lightgray">

HTML body background color tag with "bgcolor" attribute, using Hex color codes




<body bgcolor="#D3D3D3">

Body tag attribute "bgcolor" is not supported in HTML5.
Instead, css property background-color should be used.



<body style="background-color:#D3D3D3;">

HTML – IMAGES

To insert images on HTML pages, the <img> tag is required with the "src" attribute.

Using the width and height attributes, you can specify the size of the image in pixels or percentages.

HTML – TABLES

The table is defined using the <table> and </table> tags.
Tables consist of columns and rows that are created using the following tags:

<tr> TABLE ROWS </tr> this tag is used to create rows in a table
<th> TABLE HEADER </th> this tag is used to create table header
<td> TABLE DATA </td> this tag is used to create a table cells for a table data

<caption> TABLE CAPTION </caption> tag defines the caption (or title) of a table. This tag must be inserted immediately after the <table> tag

<table border="1"> <caption>GEOGRAPHICAL OVERVIEW</caption> <tr> <th>country</th> <th>capital</th> <th>currency</th> </tr> <tr> <td>America</td> <td>Washington</td> <td>dollar</td> </tr> <tr> <td>Russia</td> <td>Moscow</td> <td>ruble</td> </tr> <tr> <td>Germany</td> <td>Berlin</td> <td>euro</td> </tr> <tr> <td>China</td> <td>Beijing</td> <td>yuan</td> </tr> <tr> <td>India</td> <td>New Delhi</td> <td>rupee</td> </tr> </table>

GEOGRAPHICAL OVERVIEW
country	capital	currency
America	Washington	dollar
Russia	Moscow	ruble
Germany	Berlin	euro
China	Beijing	yuan
India	New Delhi	rupee

HTML – LISTS

There are three list types in HTML:

<ul>unordered list</ul>
<ol>ordered list</ol>
<dl>definition list</dl>

Each item begins with a <li> tag.

UNORDERED list <ul> used to group a set of related items in no particular order

code:



<ul>

<li>Gold</li>
<li>Silver</li>
<li>Bronze</li>

</ul>

result:

Gold
Silver
Bronze

ORDERED list <ol> used to group a set of related items in a specific order

code:

<ol> <li>Gold</li> <li>Silver</li> <li>Bronze</li> </ol>

result:

Gold
Silver
Bronze

DESCRIPTION list <dl> used to display name/value pairs such as terms and definitions

code:

<dl> <dt>FRUIT</dt> <dd>apple</dd> <dd>pear</dd> <dt>VEGETABLES</dt> <dd>cucumber</dd> <dd>tomatoes</dd> </dl>

result:

FRUIT: apple; pear
VEGETABLES: cucumber; tomatoes

HTML – IMAGE LINKS

Unlike text links, image links are more appealing to users.
To create image links, an image tag <img> should be inserted between the anchor element <a> </a>

example:
<a href="https://websitebackgrounds.itpresent.com"><img src="backgrounds.jpg"></a>

result:

click to image

HTML – IFRAMES

The HTML Iframe element (inline frame) is used to display the content of other html documents within a web page.
This allows you to open a subwindow in the browser window.
The size of the Iframe element is determined by using the SRC width and SRC height attributes.