The document provides a comprehensive overview of HTML, including its structure, basic tags, and various versions. It covers elements like headings, text formatting, links, images, tables, and form controls, along with examples for practical understanding. Additionally, it introduces CSS and modern HTML5 elements to enhance web page design.
The presentation is introduced by Yogita Solanki, a student in the 5th semester of Computer Science.
This section covers HTML introduction, its structure, basic tags, versions, doctype declaration, and HTML elements. Describes how to write HTML in text editors, save files, and the importance of DOCTYPE for proper page rendering.
Lists the various versions of HTML from 1991 to HTML5 in 2014 and their corresponding DOCTYPE declarations.
Details the six levels of heading elements in HTML, demonstrating their usage with examples.
Lists various HTML text formatting tags such as <b>, <i>, <em>, etc., with usage examples and visualizations.
Discusses the <font> tag for modifying text styles and attributes for background and text color in HTML.
Explains the concept of hyperlinks in HTML, their structure with <a> tags, and how to create links.
Outlines how to use the <img> tag for displaying images on web pages, including attributes like src and alt.
Describes how to create tables using the <table>, <tr>, <td> tags and explains various table attributes.
Introduces lists in HTML using <ol>, <ul>, and <dl> tags, along with examples of nested lists.
Covers how to create forms in HTML, including various input types and common form elements.
Explains CSS and its role in styling HTML, detailing selectors and example CSS rules.
Lists new HTML5 tags such as <video>, <audio>, and <canvas> that enhance multimedia capabilities.
Ends the presentation with a simple 'Thank You' message.
Introduction ofhtml
Structure of html
Basic html tags
Versions of html
Doctype declaration
Html heading
Text formatting
Html link
Html image
Html tables
Html input tags
Extra markups
Css
3.
Html standsfor hypertext markup language.
Html is derived from a language SGML(standard
generlised markup language).
A markup language is a set of markup tags.
Html is not case sensitive language.
HTML documents are described by HTML tags.
Opening tag can carry attributes.
Attributes require name and values.
4.
HTML tagsare keywords (tag names) surrounded
by angle brackets:
<tagname>content</tagname>
The start tag is often called the opening tag. The
end tag is often called the closing tag
HTML tags normally come in pairs like <p> and
</p>
The first tag in a pair is the start tag, the second
tag is the end tag
The end tag is written like the start tag, but with
a slash before the tag name
Html code is in blue.
5.
Write htmlcode in notepad or any text editor.
Save the file by (.html)/(.htm) extension.
View the page in any web browser.
The purpose of web browser is to read html
document and display them as web page.
6.
Container element–containertags contain
start tag and end tag i.e
<html>……</html>.
Empty element-empty tag contain start tag
i.e <br>.
7.
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
8.
The DOCTYPEdeclaration defines the document type to be HTML. It help
the browser to display web page correctly.
The text between <html> and </html> describes an HTML document.
The text between <head> and </head> provides information about the
document.
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page
content
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
9.
Version Year
HTML1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
10.
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-transitional.dtd">
11.
Heading element–there are six heading
element.
(<H1>,<H2>,<H3>,<H4>,<H5>,<H6>
<h1> will print largest heading.
<h6> will print smallest heading.
<b> Definesbold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscript text
<super> Defines superscript text
<strike> Defines strike text
<ins> Defines inserted text
<del> Defines deleted text
<tt> Defines teletype text
<u> Defines underline text
14.
<html>
<head><title></title></head>
<body>
<b>this text is bold</b>
<br><i><s>this text is italic</s></i>
<br><em><int>this text is emphasized<int></em>
<br><small><del>this text is small</del></small>
<br><strong>this text is strong</strong>
<br><sub>this text is subscript</sub>
<br><super>this text is superscript</super>
<br><tt>this text is teletype</tt>
<br><u>this text is underlined</u>
<br><strike><q>this text is strike</q></strike>
<abbr title=“automatic teller mmachine”>ATM</abbr>
</body>
</html> view page
15.
This elementis used to format the size ,
typeface and color of the enclosed text.
The size attribute on font tag take values
from 1 to 7.
The commonly used font in web page is Arial
, Arial black ,Impact , courier new , verdana ,
Arial narrow, Times new roman.
16.
The attributebgcolor is use to change the
background color of page.
<body bgcolor=“green”>
Text is used to change the color of enclosed
text.
<body text=“black”>
17.
A hyperlinkis a reference(an address) to the
resourse on the web.
hyperlink can point to any resourse on web:
html page , image ,video etc.
The html anchor element <a> define both
hyperlinks and anchors
<a href=“url”>link text<a>
href attribute defines a link address.
mailto:
18.
To displayan image on page we need to use
src attribute.
Src stands for “source”. The value of the src
attribute is the url of image.
It is empty tag.
<img src=“url”>
19.
<img> Definesan image
<src> Display an image on page src
stand for source.
<alt> Define ‘alternate text’ for image
<width> Defines width of image
<height> Defines height of image
<border> Defines border of image
<hspace> horizontal space of image
<vspace> vertical space of image
<align> align an image within the text
<background> add a background image
20.
<table> usedto create table
<tr> table is divided into rows
<td> each row is divided into data cells
<th> headings on the table
<caption> caption to the table
<colgroup> defines group of table columns
<col> define attriute value for one or more
column .
<thead> defines a table head
<tbody> defines a table body
<tfoot> defines a table footer
<cellspacing> amount of space between table cells
<cellpadding> space around the edges of each cell
<colspan> no. of column working with will span
<rowspan> no. of row working with will span
<border> defines border of table
<ul>(unordered list),<ol>(orderedlist) tags
are used and type attribite is used.
Each item in the list placed between
<li></li>,li stands for list item.
Defination list is created with <dl> tag ,
inside <dl> tag you will usually see the pair
of <dt> and <dd>.
<dt> stands for defination term is used to
contain the term being defined.
<dd> this contain the defination.
Lists can be nested inside one another.
<form> formcontrols contain form
content
action ulr for page on server that will
receive info
method
<input> different form controls
Type text , password ,radio
,checkbox, submit
<textarea> used to take mutiline textinput
checked used to select by default value
<select>,<option>,<label>,<fieldset>,
<legend>
Css associatesstyle rules with html elements.
Css rules contains 2parts selector and
declaration
eg. P {font-color:yellow;} here p is selector &
font-color:yellow is declaration
External css use <link href=“”>
Internal css use <style>
27.
universal selector- *{}
type selector- h1,h2 {}
Id selector- #id{}
Adjacent sibling selector- h1+p{}
General sibling selector-h1-p{}
Child selector-li>a{}