INTRODUCTION
TO
HTML
HTML
HTML stands for hypertext markup language. It is not a programming language.
A markup language specifies the layout and style of a document. A markup language
consists of a set of markup tags. HTML uses markup tags to describe web pages.
HTML tags are keywords surrounded by angle brackets like <html>.
Most HTML tags normally come in pairs like <b> and </b>. The first tag is called the
start tag (or opening tag) and the second tag is called the end tag (or closing tag).
HTML documents describe Web pages. HTML documents contain HTML tags and plain
text. HTML documents are also called Web pages. A web browser read HTML
documents and displays them as Web pages. The browser does not display the HTML
tags, but uses the tags to interpret the content of the page.
HTML (Cont…)
A simple HTML document is given below:
<html>
<head>
<title>This is my first web page</title>
</head>
<body>
<h1>My first heading</h1>
<p>My first paragraph</p>
</body>
</html>
Save this page with .html or .htm extension. However, it is good practice to use .htm extension.
Elements of HTML Document
HTML documents are defined by HTML elements.
An HTML element is everything from the start tag to the end tag. For example,
<p>My first paragraph</p>.
An HTML element consists of start tag, end tag, and element content. The
element content is everything between the start tag and end tag.
Empty elements are closed in the start tag. Most HTML elements can have
attributes. For example, src attribute of img tag.
HTML Attributes
Attributes provide additional information about HTML elements.
Attributes are always specified in the start tag.
Attributes come in name/value pair like name = “value”.
For example, HTML links are defined with <a> tag and the link address is
provided as an attribute
href like <a href =“http://www.uniteduniversity.edu.in”>cdcsit</a>.
Note: Always quote attribute values and use lowercase attributes.
HTML Attributes
HTML Attributes
<a href="https://student.uuonline.in/Login.aspx">Visit Student ERP</a>
HTML Attributes
HTML Attributes
HTML Attributes
HTML Attributes
HTML Attributes
Headings
Headings
Paragraph
Paragraph
Paragraph
Paragraph
Division
Division
Formatting: bold, italic, small, sup script,
subscript
Formatting: bold, italic, small, sup script,
subscript
Formatting: bold, italic, small, sup script,
subscript
Formatting: bold, italic, small, sup script,
subscript
Formatting: bold, italic, small, sup script,
subscript
Formatting: bold, italic, small, sup script,
subscript
Spacing: Pre, Br
Spacing: Pre, Br
Image element
Images can improve the design and the appearance of a web page.
Image element
Syntax
<img src="url" alt="alternate_text">
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
<img src="img_girl.jpg" alt="Girl in a jacket">
<img src="img_chania.jpg" alt="Flowers in Chania">
Image element
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
Image element
The src Attribute
The required src attribute specifies the path (URL) to the image.
Note: When a web page loads, it is the browser, at that
moment, that gets the image from a web server and inserts it
into the page. Therefore, make sure that the image actually
stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and
the alt text are shown if the browser cannot find the image.
Image element
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
If a browser cannot find an image, it will display the value of the alt attribute
Image element
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;">
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the image in
pixels.
Image element
Images on Another Server/Website:
Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute
(full) URL in the src attribute:
Example
<img src="https://www.india.com/images/flag.jpg" alt=“FlagImage">
Image element
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 NOTES“
style="width:42px;height:42px;">
</a>
Anchors
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates
the link's destination.
By default, links will appear as follows in all browsers:
❖An unvisited link is underlined and blue
❖A visited link is underlined and purple
❖An active link is underlined and red
Lists: Ordered and Unordered and Definition
HTML lists allow web developers to group a set of related items in lists.
Lists: Ordered and Unordered and Definition
Unordered HTML List:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Lists: Ordered and Unordered and Definition
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lists: Ordered and Unordered and Definition
HTML Description Lists:
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Tables
HTML tables allow web developers to arrange data into rows and columns.
Tables
Tables
Define an HTML Table:
Table Cells:
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Tables
Tables
Table Rows:
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Tables
Table Borders:
HTML tables can have borders of different styles and shapes.
Tables
Tables
Tables
Tables
Tables
Frames
Not Supported in HTML5.
The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>.
What to Use Instead?
Example
Use the <iframe> tag to embed another document within the current HTML document:
<iframe src="https://student.uuonline.in/Login.aspx" title="W3Schools Free Online Web Tutorials">
</iframe>
Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
Form Elements
The HTML <form> element is used to create an HTML form for user input:
Form Elements
Form Elements
Form Elements
Form Elements
Form Elements
Form Elements
ID attributes
The HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML
document.
Note: The id name is case sensitive!
Note: The id name must contain at least one character, cannot start with a
number, and must not contain whitespaces (spaces, tabs, etc.).
ID attributes
Class Attributes of HTML Elements
The class attribute specifies one or more classnames for an element.
The class attribute is mostly used to point to a class in a style sheet.
However, it can also be used by a JavaScript (via the HTML DOM) to make
changes to HTML elements with a specified class.
The class attribute specifies one or more classnames for an element.
The class attribute is mostly used to point to a class in a style sheet.
Meta Tag
Meta Tag
Meta Tag
Audio
To play an audio file in HTML, use the <audio> element:
Audio
Audio
Video
The HTML <video> element is used to show a video on a web page.
Video
Video
Canvas
Canvas
Canvas
Main
Main
Main
Section
The <section> tag defines a section in a document.
Article
Article
Header
Header
Footer
Footer
Aside
Aside
Aside
Nav
Figure Tags
HTML Event Attributes
▪When a browser reacts on user action, then it is called as
an event. For example, when you click on the submit
button, then if the browser displays an information box.
▪In HTML5 there are lots of event attributes available which
can be activated using a programming language such as
JavaScript.
Windows Event Attributes
Form Events Attributes
Keyboard Events Attributes
Mouse Events Attributes
