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:





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.

<img src=”earth.png” >

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

<img src=”earth.png” width="150px" height ="125px" >



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:

  1. Gold
  2. Silver
  3. 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:
Backgrounds for Websites
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.

<iframe> </iframe> IFRAME HTML TAG



Iframe The HTML element uses the SRC attribute that contains the URL address of the HTML document.

example IFRAME with relative url address:

<iframe width="560" height="415" src="index.html"> </iframe>

result:


example IFRAME with absolute url address:

<iframe width="560" height="415" src="https://itpresent.com"> </iframe>

result:






pdf HTML Tutorial Tutorialspoint