Scribd
Upload
4 views

HTML

This document provides an introduction to HTML, explaining its purpose as a markup language for web pages, including the structure and function of HTML tags. It covers key elements such as formatting tags, links, lists, tables, and frames, along with their syntax and attributes. The document serves as a foundational guide for understanding and using HTML in web development.

Uploaded by

kaanphodgaana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML

This document provides an introduction to HTML, explaining its purpose as a markup language for web pages, including the structure and function of HTML tags. It covers key elements such as formatting tags, links, lists, tables, and frames, along with their syntax and attributes. The document serves as a foundational guide for understanding and using HTML in web development.

Uploaded by

kaanphodgaana
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Web Technology: Unit-2

Introduction to HTML

HTML stands for Hyper Text Markup Language. It is a formatting language used to define
the appearance and contents of a web page. It allows us to organize text, graphics, audio, and
video on a web page.

Key Points:

 The word Hypertext refers to the text which acts as a link.


 The word markup refers to the symbols that are used to define structure of the text. The
markup symbols tells the browser how to display the text and are often called tags.
 The word Language refers to the syntax that is similar to any other language.

HTML was created by Tim Berners-Lee at CERN Labs.

HTML Tags

Tag is a command that tells the web browser how to display the text, audio, graphics or video on
a web page.

Key Points:

 Tags are indicated with pair of angle brackets.


 They start with a less than (<) character and end with a greater than (>) character.
 The tag name is specified between the angle brackets.
 Most of the tags usually occur in pair: the start tag and the closing tag.
 The start tag is simply the tag name is enclosed in angle bracket whereas the closing tag
is specified including a forward slash (/).
 Some tags are the empty i.e. they don’t have the closing tag.
 Tags are not case sensitive.
 The starting and closing tag name must be the same. For example <b> hello </i> is
invalid as both are different.
 If you don’t specify the angle brackets (<>) for a tag, the browser will treat the tag name
as a simple text.
 The tag can also have attributes to provide additional information about the tag to the
browser.

HTML Basics

A web page will include the following HTML codes:

<HTML>
<HEAD>
<TITLE>The page title goes here.</TITLE>
</HEAD>
<BODY BGCOLOR="ffffff">
<P>Here is a simple paragraph.</P>
</BODY>
</HTML>

HTML Formatting Tags

Formatting elements were designed to display special types of text:

<b> - Bold text </b>


<strong> - Important text </strong>
<i> - Italic text </i>
<em> - Emphasized text </em>
<mark> - Marked text </mark>
<small> - Small text </small>
<del> - Deleted text </del>
<ins> - Inserted text </ins>
<sub> - Subscript text </sub>
<sup> - Superscript text </sup>

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
You can click on a link and jump to another document. When you move the mouse over a link,
the mouse arrow will turn into a little hand.

Syntax:
<a href="url">link text</a>

Example:
<a href="https://www.w3schools.com/html/"> HTML</a>

HTML Links - The Target Attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _blank - Opens the linked document in a new window or tab


 _self - Opens the linked document in the same window/tab as it was clicked (this is
default)
 _parent - Opens the linked document in the parent frame
 _top - Opens the linked document in the full body of the window
 framename - Opens the linked document in a named frame

Image Link
It is common to use images as links:
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Email Tag
HTML <a> tag provides you option to specifiy an email address to send an email. While using
<a> tag as an email tag, you will use mailto:email address along with href attribute. Following
is the syntax of using mailto instead of using http.

<a href= "mailto:[email protected]"> Mail Message</a>

This code will generate following link which you can use to send email.

Mail Message

Now if a user clicks this link, it launches one Email Client ( like Lotus Notes, Outlook Express
etc. ) installed on your user's computer.

Default Settings
You can specify a default email subject and email body alongwith your email address. Following
is the example to use default subject and body.

<a href="mailto:[email protected]?subject=Feedback&body=Message">
Send Feedback
</a>

This code will generate following link which you can use to send email.

Send Feedback

HTML Lists

HTML provide three ways for specifying lists of information. All lists must contain one or more
list elements. Lists may contain:
 <ol> - An ordered list. This will use different schemes of numbers to list your items.
 <ul> - An unordered list. This will list items using plain bullets.
 <dl> - A definition list. This arranges your items in the same way as they are arranged in
a dictionary.

Ordered Lists
An ordered list is a collection of related items that have an order or sequence. This list is created
by using HTML <ol> tag. Each item in the list is marked with a bullet using <li> tag.

Eg.
<ol type="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>

Type attribute specifies the type of number used. It may have the following values:
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options:

<ol type="1" start="4"> - Numerals starts with 4.


<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.

Un-ordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list
is created by using HTML <ul> tag. Each item in the list is marked with a bullet using <li> tag.

Eg.
<ul type="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
Type attribute specifies the type of bullet. It may have three values – square, disc, circle

Definition Lists
HTML support a list style which is called definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms,
or other name/value list.

Definition List makes use of following three tags.

 <dl> - Defines the start of the list


 <dt> - A term
 <dd> - Term definition
 </dl> - Defines the end of the list

Eg.:

<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

Output
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

Tables in HTML

The HTML tables allow to arrange data like text, images, links, other tables, etc. into rows and
columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table
rows and <td> tag is used to create data cells. <th> tag is used to specify table heading row.

Eg.
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>

Output

Name Salary
Ramesh Raman 5000
Shabbir Hussein 7000

Cellpadding and Cellspacing Attributes


There are two attribiutes called cellpadding and cellspacing which you will use to adjust the white
space in your table cells. The cellspacing attribute defines the width of the border, while
cellpadding represents the distance between cell borders and the content within a cell.

Colspan and Rowspan Attributes


You will use colspan attribute if you want to merge two or more columns into a single column.
Similar way you will use rowspan if you want to merge two or more rows.

Tables Backgrounds
You can set table background using one of the following two ways:

 bgcolor attribute - You can set background color for whole table or just for one cell.
 background attribute - You can set background image for whole table or just for one
cell.

Table Height and Width


You can set a table width and height using width and height attrubutes. You can specify table
width or height in terms of pixels or in terms of percentage of available screen area.

<table border="1" width="300" height="150">


Creating Frames
HTML frames are used to divide the browser window into multiple sections where each section
can load a separate HTML document. A collection of frames in the browser window is known as
a frameset.
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines
how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal
frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it
defines which HTML document shall open into the frame.
Eg.:
Horizontal Frames

<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
</frameset>

Vertical Frames

<frameset cols="25%,50%,25%">
<frame name="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
</frameset>

You might also like