2. HTML is used to create web documents Including
text,images,formatting,& hyperlinks to other documents.
HTML documents consists of text & ‘markup’ tags which
are used to define the strucuture apperance & function of
the information.
HTML was created by Berners-Lee in late 1991.
A HTML file must have an .htm or .html file extension
Introduction Of HTML
3. The HTML document itself begins with <html> and ends with
</html>.
The visible part of the HTML document is between <body> and
</body>.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML BASICS
5. HTML elements are written with a start tag, with an end
tag, with the content in between.
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first HTML paragraph.</p>
HTML ELEMENT
Start tag
Element
content
End tag
<h1>
My First
Heading
</h1>
<p>
My first
paragraph.
</p>
6. Attributes provide additional information about an element.
Attributes are always specified in the start tag.
1.The title Attribute:-
<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
2.The href Attribute:-
<a href="http://www.w3schools.com">This is a link</a>
HTML ATTRIBUTES
7. Attribute Description
alt
Specifies an alternative text for an
image
disabled
Specifies that an input element
should be disabled
href
Specifies the URL (web address) for
a link
id Specifies a unique id for an element
src
Specifies the URL (web address) for
an image
style
Specifies an inline CSS style for an
element
title
Specifies extra information about an
element (displayed as a tool tip)
8. Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Headings
9. The HTML <p> element defines a paragraph.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
HTML PARAGRAPHS
10. HTML Background Color:-
The background-color property defines the background color for an HTML
element.
<body style="background-color:lightgrey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Color:-
The color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
HTML Styles
11. Unordered HTML Lists:-
An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
HTML Lists
12. An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered HTML Lists
13. HTML Comment Tags:-
Comments are not displayed by the browser, but they can
help document your HTML.
With comments you can place notifications and reminders in
your HTML:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
HTML TAGS
14. In HTML, images are defined with the <img> tag.
The src attribute specifies the URL (web address) of the
image.
The alt attribute provides alternative information for an image
if a 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).
HTML Images
15. Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML TABLE
17. The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
<!DOCTYPE html>
<html>
<body>
<p>
To break lines<br>in a text,<br>use the br element.
</p>
</body>
</html>
HTML <br> Tag
18. The <div> tag defines a division or a section in an HTML.
<!DOCTYPE html>
<html>
<body>
<p>This is some text.</p>
<div style="color:#0000FF">
<h3>This is a heading in a div element</h3>
<p>This is some text in a div element.</p>
</div>
<p>This is some text.</p>
</body>
</html>
HTML <div> Tag
19. HTML forms are used to collect user input.
The <form> element defines an HTML form.
<form>
.
form elements
.
</form>
Form elements are different types of input elements,
checkboxes, radio buttons, submit buttons, and more.
HTML FORMS
20. The <input> element is the most important form element.
The <input> element has many variations, depending on the
type attribute.
The <input> Element
Type Description
text Defines normal text input
radio
Defines radio button input (for
selecting one of many choices)
submit
Defines a submit button (for
submitting the form)