Shivajirao Kadam Institute of Technology and Management (Atc), Indore

SHIVAJIRAO KADAM INSTITUTE OF TECHNOLOGY
AND MANAGEMENT (ATC) , INDORE

Department of
Computer Science and Engineering
Internet and Web Technology
Presentation on HTML
Presented by:
Guided by: Aashutosh Solanki
Prof. Chaitanya Das Enroll:
0875CS181004
HTML
BASICS
 What is HTML?
 HTML stands for Hyper Text Markup Language.
 It is used to create web pages.
 It is a platform independent language.
 The HTML file is saved using the extension .html or .htm
 HTML documents can be made in any text editor.
 A web browser is used to view the pages created in HTML.
HTML Elements
 HTML elements tell the browser how to display the content
 An HTML element is defined by a start tag, some content, and an end tag
<start tag> The content comes here… </end tag>

 Example:
 <H1> My first HTML code </H1>
 Structure of a HTML document
<!doctype html> // defines that is a HTML5 document

<html> // Root element of HTML page
<head> // Contains information about the html page
<title> This is the title of page </title>
</head>
<body> // Body of the document. Contains all the visible elements.
<h1> My first heading </h1> // Defines the headings
<p> My paragraph </p> // Defines a paragraph
</body>
</html>
 HTML Headings
 There are six levels of headings defined by HTML.

 These six heading elements are H1, H2, H3, H4, H5, and H6.
 H1 being the highest level and H6 the least.
 Headings are used for highlighting the important information.
• Example of heading:
<!doctype html> :::OUTPUT:::
<html>
<body>
<h1> H1 </h1>
<h2> H2 </h2>
<h3> H3 </h3>
<h4> H4 </h4>
<h5> H5 </h5>
<h6> H6 </h6>
</body>
</html>
 Paragraph Tag
 The <p> tag in HTML defines a paragraph.

 These have both opening and closing tag. So anything mentioned within <p> and
</p> is treated as a paragraph.
 Example:
:
<body>
<p> This is first Paragraph </p>
<p> This is second Paragraph </p>
</body>
:
 Text Formatting
 Tags used for text formatting are:
 <b> The bold tag </b>
 <i> Italic </i>
 <em> emphasis </em>
 <mark> Highlight text </mark>
 <sup> Superscript </sup>
 <sub> Subscript </sub>
 <small> makes text smaller </small>
 <del> Used for strike through </del>
 Etc…
 HTML Links
 It is a connection from one web resource to another.
 An anchor tag is used to create links in HTML document.
 Syntax:
<a href = “url / page name”> Text of link </a>
Here <a> is anchor tag.
href is the attribute is used to specify the destination address of the link.
Text link is the part visible on the web page
 Images
 Images can also be added to the HTML page.
 <img> tag is used to add images to the page.
 Syntax:
<img src = “url” alt = “text”>

Here img is the tag name.
src is the url or path to the image.
alt is the alternate text shown in place of image when image is not
displayed.
 Lists
 A list is a record of short pieces of information.
 The types of lists that can be used in HTML are :
 ul : An unordered list. This will list items using plain bullets.
 ol : An ordered list. This will use different schemes of numbers to list your items.
 dl : A definition list. This arranges your items in the same way as they are arranged
in a dictionary.
 <li> tag is used to define the list item.
• Example of list
<!DOCTYPE html>
:::OUTPUT:::
<html>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
 Tables
 A table is an arrangement of data in rows and columns, or possibly in a more
complex structure.
 Tables are useful for various tasks such as presenting text information and
numerical data.
 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. Table headings are bold and centered.
 A table data/cell is defined with the “td” tag.
• Example of a table
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
:::OUTPUT:::
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Aashutosh</td>
<td>Solanki</td>
<td>20</td>
</tr>
<tr>
<td>Lakshya</td>
<td>Solanki</td>
<td>16</td>
</tr>
<tr>
<td>Priya</td>
<td>Solanki</td>
<td>40</td>
</tr>
</table>
</body>
 Advantages and Disadvantages
 Advantages:
 HTML is used to build a websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.
 Disadvantages:
 HTML can create only static webpages so for dynamic web page other languages
have to be used.
 Large amount of code has to be written to create a simple web page.
 Security feature is not good.

Shivajirao Kadam Institute of Technology and Management (Atc), Indore

Uploaded by

Copyright:

Available Formats

Shivajirao Kadam Institute of Technology and Management (Atc), Indore

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

Shivajirao Kadam Institute of Technology and Management (Atc), Indore

Uploaded by

Copyright:

Available Formats

SHIVAJIRAO KADAM INSTITUTE OF TECHNOLOGY

AND MANAGEMENT (ATC) , INDORE

<start tag> The content comes here… </end tag>

<!doctype html> // defines that is a HTML5 document

 There are six levels of headings defined by HTML.

 The <p> tag in HTML defines a paragraph.

<img src = “url” alt = “text”>

You might also like