Scribd
Upload
2 views12 pages

Introduction of HTML

The document provides an introduction to HTML, explaining its purpose as the standard markup language for creating web pages and detailing the structure of an HTML document. It covers essential elements such as headings, paragraphs, images, lists, tables, and forms, along with examples of each. Additionally, it discusses the use of physical and logical tags, as well as attributes for images and forms.

Uploaded by

Pooja Bhandari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views12 pages

Introduction of HTML

The document provides an introduction to HTML, explaining its purpose as the standard markup language for creating web pages and detailing the structure of an HTML document. It covers essential elements such as headings, paragraphs, images, lists, tables, and forms, along with examples of each. Additionally, it discusses the use of physical and logical tags, as well as attributes for images and forms.

Uploaded by

Pooja Bhandari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

1- Introduction to HTML

Introduction to HTML

What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

 All HTML documents must start with a document type declaration: <!DOCTYPE html>.
 The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is between <body> and </body>

A Simple HTML Document


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
 HTML Elements
 The HTML element is everything from the start tag to the end tag:
 <tagname>Content goes here...</tagname>
 Examples of some HTML elements:
 <h1>My First Heading</h1>
 <p>My first paragraph.</p>
Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Physical and Logical Tags in HTML



Physical and Logical tags are used in HTML for better visibility and understanding of the text by
the user on the web page. However, both tags differ from each other as suggested by their
names.
Logical Tags :
Logical Tags are used in HTML to display the text according to the logical styles. Following are
the Logical tags commonly used in HTML.
Logical Tags

Tag Description

<abbr> Defines an abbreviation

<acronym> Defines an acronym

<address> Defines an address element

<cite> Defines citation

<code> Defines computer code text

<blockquote> Defines a long quotation

<del> Defines text

<dfn> Defines a definition term

<ins> Defines inserted text

<kbd> Defines keyboard text

<pre> Defines preformatted text

<q> Defines short quotation


Tag Description

<samp> Defines sample computer code

<strong> Defines strong text

<var> Defines a variable

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1> Logical Tags </h1>

Welcome to <abbr title="ABC "> GFG</abbr> <br>

This is <acronym title="XYZ ">GFG</acronym> <br>

<address>, 5th & 6th Floor, Royal Kapsons, A- 118, Sector- 136, Noida,
Uttar Pradesh (201305) </address> <br>

<cite> Mumbai</cite> is my favourite website. <br>

<code> Sample code: system.out.println(); </code>

<blockquote cite="https://www.geeksforgeeks.org/">
A Computer Science portal for geeks. It contains well written, well thought and well
explained computer science and programming articles, and quizzes.
</blockquote>

<del> This contains deleted content.</del>

<ins> Newly inserted content.</ins>

<p>
<dfn> GeeksforGeeks </dfn> is a Computer Science portal for geeks. It contains well
written, well thought and well explained computer science and programming articles,
and quizzes.
</p>

<kbd> GeeksforGeeks - This is a Keyboard input </kbd>

<pre> Dear User,

Congratulations !!

We are delighted to inform you that you are going to be part of GfG journey.

This is a predefine formatted text </pre>

</body>
</html>

Types of Images

Images can improve the design and the appearance of a web page.
HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages.
The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image


 alt - Specifies an alternate text for the image

Syntax

<img src="url" alt="alternatetext">

The src Attribute

The required src attribute specifies the path (URL) to the image.
Example

<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute, or if the user uses a
screen reader).

The value of the alt attribute should describe the image:

Example

<img src="img_chania.jpg" alt="Flowers in Chania">

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size
of images:

Example

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">


The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">


The image will float to the left of the text.</p>

Lists in HTML

There are ordered and unordered lists in HTML. Here’s how you can create both:

Unordered List (<ul>)


html
CopyEdit
<ul>
<ul>

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

Ordered List (<ol>)


html
CopyEdit
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Description List (<dl>)


html
CopyEdit
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Tables in HTML

A table is created using the <table> tag with nested elements like <tr>, <th>, and <td>.

Example:
html
CopyEdit
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>

able Tags Breakdown:

 <table>: Container for the table


 <tr>: Defines a row
 <th>: Defines a header cell (bold, centered)
 <td>: Defines a standard data cell

Frames in HTML

Frames are created using the <iframe> tag, which allows embedding another HTML page within
the current page.

Example:
html
CopyEdit
<iframe src="https://www.example.com" width="600" height="400" title="Description of the
page"></iframe>

Frame Attributes:

 src: URL of the page to display


 width, height: Dimensions of the frame
 title: Descriptive text for accessibility

Embedding Audio in HTML

You can embed audio using the <audio> tag.

Example:
html
CopyEdit
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Attributes:

 controls: Adds play, pause, volume, etc.


 autoplay: Starts the audio automatically (not recommended for user experience).
 loop: Makes the audio play continuously.

Embedding Video in HTML

The <video> tag allows you to embed videos directly into your page.

Example:
html
CopyEdit
<video controls width="600">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video element.
</video>

Attributes:

 controls: Adds video controls (play, pause, volume, etc.).


 autoplay: Makes the video start automatically.
 loop: Loops the video after it finishes.
 muted: Starts the video with no sound.
 poster: Image shown before the video starts.

HTML Form and Form Elements

Forms are used to collect user input. A form starts with the <form> tag.

Basic Form Example:


html
CopyEdit
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>

<input type="submit" value="Submit">


</form>
Common Form Elements:

 Text Input: <input type="text">


 Password Input: <input type="password">
 Email Input: <input type="email">
 Radio Buttons:

html
CopyEdit
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

 Checkbox:

html
CopyEdit
<input type="checkbox" name="subscribe" value="newsletter"> Subscribe

 Select Dropdown:

html
CopyEdit
<select name="country">
<option value="usa">USA</option>
<option value="canada">Canada</option>
</select>

 Textarea:

html
CopyEdit
<textarea name="message" rows="4" cols="50"></textarea>

Form Attributes:

 action: The URL to send the form data to


 method: HTTP method (GET or POST)
 enctype: Specifies how the form data should be encoded (used for file uploads).

You might also like