HTML

SOFIA SOFTWARE SOLUTIONS
Web Technology – HTML Technical Guide
HTML (HyperText Markup Language)

HISTORY:
• 1992 – Tim’s Berners Lee
Current Version: HTML 5.2

Current Version Release Date: December 14, 2017
Purpose:
• Creating Static WebPages

• Static means providing from the information from the server is static
Advantage:
• The First Markup Language is SGML (Standard Generalized Markup Language)

• Hypertext is text displayed on a computer display or other electronic devices with references to other
text that the reader can immediately access.
• Easy to Learn and widely used.
• Markup languages are designed for the processing, definition and presentation of text.
• Saved as .html or .htm
• The tag is common keyword for calling html entities. Each tag having separate attribute
• There are 2 type of Tag available,
o Container Tag (or) Double Tag
o Non-Container Tag (or) Single Tag
Tag means, < HyperText >
Standard Generalized Markup Language (SGML)
HTML XML
(Hyper Text Markup Language) (Extensible Markup Language)
➔ Pre Defined Tags ➔ User Defined Tags

➔ Used to Create Static WebPages ➔ Exchange data between urls
1
HTML STRUCTURES:
<html>
<head>
<title> TITLE OF THE WEBPAGE </title>
</head>
Head is used to contain specific information about a web page often referred to as metadata. This
information includes things like the title of the document (which is mandatory),
as well as scripts or links to scripts, and CSS files.
<body>
</body>
When writing in HTML, the <body> tag is used to contain a web page's content, including hyperlinks,
images, tables, text, etc. It is required in every HTML document, and there may only be one
<body> tag per page.
</html>
TAGS:
• The Predefined Text is called Tags.

• It is text which comes between two Angle Brackets.
• Each tags has own attribute like Property.
There are 5 Types of tags in HTML, They are
➢ Basic Tags
➢ List
➢ Hyperlinks
➢ Form Objects
➢ Frameset
1. BASIC TAGS:
• Basic Tags are tags which are primarily used in the html.
• Example: <p>, <table>
1. PARAGRAPH TAG :
HTML paragraphs are defined with the <p> tag
SYNTAX:
2
<p>you’re Text Here…. <p>
TABLE TAG :
• An HTML table is defined with the <table> tag.
• Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, table headings are bold and centered. A table data/cell is defined with
the <td> tag.
EXAMPLE:
<table border='1'>
<tr><caption>Student list</caption></tr>
<tr>
<th>Roll No</th>
<th>Name</th>
</tr>
<tr>
<td>101</td>
<td>Rama</td>
</tr>
<tr>
<td>102</td>
<td>Ragu</td>
</tr>
</table>
OUTPUT:
Other Basic Tag:
<b> Bold Text </b> - Bold for Text
<u> UnderLine Text </u> - Underline for text
<center> Center Text </center> - Center Align for the Text
<i> Italic Format Text </i> - Italic format for the Text
3
Subscript:
<sub> Subscript Text </sub>
Ex: H<sub>2</sub>0
Superscript:
<sup> Superscript Text </sup>
Ex: H<sup>2</sup>
Heading Tag:
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of
headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
Ex:
<h1>This is heading 1</h1>

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line.
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the
current position in the document to the right margin and breaks the line accordingly.
<p>This is paragraph one and should be on top</p>

<hr />
<p>This is paragraph two and should be at bottom</p>
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
4
<p>I want to drink <del>cola</del> <ins>pepsi</ins></p>
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
<p>The following word has been <mark>marked</mark> with yellow</p>
Meta Tags
The META elements can be used to include name/value pairs describing properties of the HTML document,
such as author, expiry date, a list of keywords, document author etc.
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
HTML – Comments
HTML comments are placed in between  tags. So, any content placed with-in  tags
will be treated as comment and will be completely ignored by the browser.
HTML - Images
You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.
<img src = "/html/images/test.png" alt = "Test Image" />
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
5
2. Hyperlinks:
• To make a hyperlink in an HTML page, use the <a> and </a> tags, which are the tags used to define
the links.
SYNTAX:
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |

<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
3. List:
• To make a list of Items in HTML in Order wise or in unordered Manner.
• <ul> − An unordered list. This will list items using plain bullets.
<ul type = "square">

<ul type = "disc">
<ul type = "circle">
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
• <ol> − An ordered list. This will use different schemes of numbers to list your items.
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
6
4. Form Objects:
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script
or PHP script etc. The back-end application will perform required processing on the passed data based on
defined business logic inside the application.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
File
hidden
checkbox
radio
password
<input type=”text” name=””>
Button
Submit
Reset
Image
Label
<select>……</select>
<textarea>………</textarea>
</form>
FORM OBJECTS:
LABEL:
To Print the Data in Browser
SYNTAX:
<label>NAME:</label>
TEXTBOX / PASSWORD / HIDDEN:
To get / Keep single line input data from user or server
7
Syntax:
<input type=text/password/hidden name=”” value=”” size=”” readonly>
Example:
<input type=text name=t1 value=”Welcome to HTML”>

<input type=text name=t2>
<input type=text name=t3 value=”HTML” readonly>
<input type=password name=t4>
<input type=hidden name=hidden1 value=”am hidden”>
TEXTAREA:
If we get multi-line input from user by using this object.
SYNTAX:
<textarea name=” ” cols=” “ rows=” “></textarea>
Ex:
<textarea name=”addr” cols=”15” rows=”5”></textarea>
RADIO BUTTON:
User is selecting own single choice by using this object.
Syntax:
<input type=radio name=” “ value=” “ checked>xxx
Example:
<input type=radio name=”r1” value=”M”>Male

<input type=radio name=”r1” value=”F”>Female
CHECK BOX:
To select Multiple Option in the Group of Items
Syntax:
<input type=checkbox name=”xx” value=”xx”>XXX
Ex:
<input type="Checkbox" name="c1" Checked>Playing
8
<input type="Checkbox" name="c1">Singing

<input type="Checkbox" name="c1">Dancing
BUTTON / SUBMIT / RESET:

Button/ Submit Form objects are used to submit data to server and reset also used to reset the form object.
Ex:
<input type=button name=”xx” value=”SUBMIT”> =>indirect data submission to server

<input type=submit name=”xx” value=”SUBMIT”> => direct submission to server
<input type=reset name=”reset1” value=”RESET”>
IMAGE:
The form object also used to show the image.
Ex:
<input type=image src=”c:\Test\demo.jpg”>
FILE:
This object is content or object upload object.
Ex:
<input type=file name=”xxx”>
OUTPUT:
5. Frameset:
• The <frameset> tag defines a frameset.
• The <frameset> element holds one or more <frame> elements. Each <frame> element can hold a
separate document.
9
• The tags should be entered in the head tags.
• The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and
HOW MUCH percentage/pixels of space will occupy each of them.
SYNTAX:
<frameset cols=”50%,50%”>
<frame src=”Address”>
<frame src=”Address”>
</frameset>
10

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

SOFIA SOFTWARE SOLUTIONS

Web Technology – HTML Technical Guide

HTML (HyperText Markup Language)

• 1992 – Tim’s Berners Lee

Current Version: HTML 5.2

• Creating Static WebPages

• The First Markup Language is SGML (Standard Generalized Markup Language)

Tag means, < HyperText >

Standard Generalized Markup Language (SGML)

(Hyper Text Markup Language) (Extensible Markup Language)

➔ Pre Defined Tags ➔ User Defined Tags

<title> TITLE OF THE WEBPAGE </title>

• The Predefined Text is called Tags.

There are 5 Types of tags in HTML, They are

<p>you’re Text Here…. <p>

• An HTML table is defined with the <table> tag.

Other Basic Tag:

<b> Bold Text </b> - Bold for Text

<u> UnderLine Text </u> - Underline for text

<center> Center Text </center> - Center Align for the Text

<sub> Subscript Text </sub>

<sup> Superscript Text </sup>

<h1>This is heading 1</h1>

Line Break Tag

<p>This is paragraph one and should be on top</p>

<p>I want to drink <del>cola</del> <ins>pepsi</ins></p>

<p>The following word has been <mark>marked</mark> with yellow</p>

<img src = "/html/images/test.png" alt = "Test Image" />

<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>

<a href = "/html/index.htm" target = "_blank">Opens in New</a> |

• To make a list of Items in HTML in Order wise or in unordered Manner.

<ul type = "square">

<ol type = "1"> - Default-Case Numerals.

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.

To Print the Data in Browser

TEXTBOX / PASSWORD / HIDDEN:

To get / Keep single line input data from user or server

<input type=text/password/hidden name=”” value=”” size=”” readonly>

<input type=text name=t1 value=”Welcome to HTML”>

<input type=password name=t4>

<input type=hidden name=hidden1 value=”am hidden”>

<textarea name=” ” cols=” “ rows=” “></textarea>

<textarea name=”addr” cols=”15” rows=”5”></textarea>

<input type=radio name=” “ value=” “ checked>xxx

<input type=radio name=”r1” value=”M”>Male

<input type=checkbox name=”xx” value=”xx”>XXX

<input type="Checkbox" name="c1" Checked>Playing

<input type="Checkbox" name="c1">Singing

BUTTON / SUBMIT / RESET:

<input type=button name=”xx” value=”SUBMIT”> =>indirect data submission to server

<input type=image src=”c:\Test\demo.jpg”>

<input type=file name=”xxx”>

• The <frameset> tag defines a frameset.

• The tags should be entered in the head tags.

You might also like