What is HTML?
It is specially designed hypertext for web browsers, with meaningful tags or
elements in simple English language.
HTML Versions
From W3C organization there are fallowing versions released.
Version Specification Release Date
1.0 N/A (HTML 1.0) 1993-dec/1994
2.0 HTML 2.0 24-Nov-1995
3.2 W3C: HTML 3.2 14-Jan-1997
4.0 W3C: HTML 4.0 24-Apr-1998
4.1 W3C: HTML 4.1 24-Dec-1999
5.0 WHATWG 28-Oct-2014
(Adv Markup Language For Mobiles)
5.1 W3C: HTML 5.1 -Nov-2016
(Adv Markup Language For Small Electronic Devices)
5.2 W3C: HTML 5.2 14-Dec-2017
HTML introduction
1. HTML was developed by “Tim-Berners-Lee”, released in 1993 and
maintained by W3C Org.
GML SGML HTML
DHTML, XML, XHTML (XML+HTML), WML , UML
Web introduce => 1989/90
Which version is bare bone? Html1
Html dev based on which structure?
Html is sub set of which lang? SGML
2. HTML stands for “Hypertext Markup Language”.
“Hypertext” means the text that can be transferred from internet
server to internet client.
"Markup" means which syntax will be in the form of tags or you
simply "markup" a text document with tags that tell a Web browser how
to structure it to display.
“Language” is an interface between web developer and web
browser
3. Technically, HTML is not a programming language, but
rather a markup language.
4. HTML is used to design "static web pages", means HTML is used to
create elements (such as headings, paragraphs, icons, menus, logos,
images, textboxes, button etc) in the web pages.
static webpage means, that pages always showing same information.
5. HTML is very easy to understand (no pre-requisites).
6. HTML is “client side tech”. That means the html code executes on
the client browser but not in server.
7. HTML is supported by all the browsers such as Google Chrome,
Mozilla Firefox, Microsoft Internet Explorer, Safari, Opera and other
browsers.
Cross platform comp
8. HTML is used in all real time web sites today; html is the
only language available in world for designing Web pages.
9. The file extension either "filename.html" or "filename.htm"
10. For working html no need installs any software, and browser
is responsible for executing & producing output of html
programs.
Typing & saving notepad
Execution & result Browser
Notepad++, editplus
VS Code, Sublime, Ec, netbeans
11. Html is error free programming.
(Displaying images, playing audio & video)
12. HTML is not a case sensitive language that means you can
write the html code in either upper case or lower case.
13. HTML is an interpreter-based language. Browser interprets HTML
code.
C, cpp, java, .net … compiler
Html, javascript, oracle … interpreter
Vlsi, algol, matlabs Assembler
Translators: converting high level code (human) into machine level code
(MP/OS) is called as translation. Who performs this operation those
called translators.
Types: compiler, interpreter, assembler
interpreter it translates code line-by-line and executes line-by-line
(interpretation)
interpreter
html code 🡸=============== machine code
(English) (Binary code)
Tag:
● A tag is a keyword, enclosed within "<" and ">" in HTML language.
● It is special kind of text placed between left angular brace and right
angular brace(<tag_name>).
● Tag is predefined program, program is instructions / command to
browser.
● Tag is used to display some specific output in the web page.
● Browser was not identified the tag; it shows blank page or it prints
as text.
● tags also represented as elements.
types of tags
in html we have two types tags, those are:
paired tags
⇨ Contains open tag and closing tag.
⇨ Opening tag specifies starting point of operation/output, closing tag
specifies ending point of operation/output.
Syn: <tagname> text </tagname>
ex: <html> ... </html>
<head> ... </head>
<body> … </body>
<script> ... </script>
<style> ... </style>
<p> … </p>
note: paired tags also called as body-full tags
unpaired tags
⇨ contains only open tag.
Syn: <tagname> or <tagname/>
ex: <br/> <img/> <input/> <hr> <link> <meta>
VOID tags => ITS not RETURNING ANY VALUE
Unpaired tags also called as body-less tags
Structure of HTML
as per W3C Org we have to follow the following structure to design web
pages (but it’s not comp).
<!DOCTYPE html>
<html lang=”en”> web page/document designing starts here
<head>
</head>
<body>
</body>
</html> web page/document designing ends here
Generally, html program contains three parts, those are:
> versioning section
> head section
> body section
Html1 to html5
versioning section
This is providing information to the browser which version we
are using in the web page/program. So, browser is interpreting
code and producing output as per given specification.
Syn: <!DOCTYPE html version-url>
documentation type (lib)
HTML4.0:
<!DOCTYPE html public "-//W3C//DTD HTML 4.0//EN"
"http://www.w3c.org/TR/html4/strict.dtd">
<!DOCTYPE html> it represents new version of html
Head section
🡺 it contains web page settings code & configuration code
Ex: title, link, base, style, script, meta tags (total 6 tags)
Body section
🡺 it contains web page designing code
Ex: h1, p, table, button, input, a, img, br, ol, ul etc…
C prog 🡺 compile 🡺 execute 🡺 o/p
C#.net 🡺 compile 🡺 execute 🡺 o/p
Html 🡺execute 🡺 o/p (web page)
public "-//W3C//DTD HTML 3.0//EN" "http://www.w3c.org/TR/html3/strict.dtd
public "-//W3C//DTD HTML 2.0//EN" "http://www.w3c.org/TR/html2/strict.dtd
<!DOCTYPE html>
HTML5:
<!DOCTYPE html> it uses current version of html
strcit.dtd file (document type definition) contains definitions of tags and
specifications.
html tag
The <html> tag represents the starting and ending of an html program. html tag
contains two child/sub tags those are head tag and body tag.
head tag
head tag represents a non-content section (means not output) of the web page.
This information doesn't appear on the web page/in the browser (it's called as
non-content), but it's used internally by the browser.
This tag is used to set icons, title, to provide some meta data (info about web app),
css settings, java scripting etc...
head tag contains some child/sub tags, those are
<link>, <title>, <meta>, <style>, <script> and <base> tags
body tag
body tag represents content information (means output) of the web page.
this information appears on the web page/in the browser (it’s called content).
This tag is used to design UI or to display output.
body tag contains so many child/sub tags.
some of tags: p, img, h1, table, div, a, table, audio, video, input, button, form, ol,
ul, li, hr tags …
html is a collection of tags(elements) and every tag has some
attributes.
how design & execute html programs
⇒ open any text editor (sw) and type program.
notepad, editplus, notepad++, textpad, sublime, vs code, atom, coffee, ...
⇒ save that program with any name (.html or .htm) and anywhere in the system.
⇒ execution:
1st Approach: goto file location, then double click on file
2nd Approach: goto file location, then right click on file and click on open
then select browser
3rd Approach: open any browser, then goto address bar and type filename
with address.
for ex: d:/siva/test.html e:/test.html
comment lines
⇒ Comment lines are to provide some description about our program.
⇒ Comments are not executed by browser.
Syn:
<!-- comments -->
heading tags
These tags are used to print data/text in heading format with different
sizes.
html provides 6 heading tags, those are h1, h2, h3, h4, h5, h6.
six tags are paired tags and block level elements.
Syn:
<h1> text </h1>
<h2> text </h2>
<h3> text </h3>
…
Note: inside the body section we can repeat any tag and no.of times.
p tag
> p stands for paragraph.
> this tag is used to display/print more lines of text (paragraph)
> its paired tag and block level.
Syn:
<p> text or info </p>
Note:
>browser/html doesn't accept more than one space (space bar & tab key), means
while designing the program we are given more space but browser prints only one
space.
>browser/html doesn't accept enter key (line breaking), means while designing a
program we use enter key but browser prints data without breaking line.
br tag
Ø br stands for break line (enter key)
Ø it moves the cursor to the beginning of the next line.
Ø its un-paired
Syn: <br> or <br/>
Html entities
=> Entities nothing but Special characters or operators
=> Special characters are used to perform some task or to print
some Symbols .
=> Special characters is a English word
Syn: &word; 99
¾ ÷
⇨ Html hexa-decimal codes, these operators are starts with #
Hexa-dec base 16 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
Syn: &#hex-code;
digits; digits;
😎
b tag or strong
> b stands for bold
> b & strong tags used to print text in bold format
> both are paired tags & inline tags
Syn:
<b> text </b>
<strong> text </strong>
I or em tag
>i stand for italic (inclined)
>i & em tags used to print text in italic format
>i is paired
Syn:
<i> text </i>
<em> text </em>
u tag
> u stands for underline
> u tag used to print text with underline (draws a line base of text)
> u is paired tag
Syn:
<u> text </u>
strikeout tag
> strikeout tag used to print text with line (draws a line middle of text)
>strikeout is paired tag
Syn:
<strike> text </strike>
superscript tag
>this tag used to display text top of upper line
> superscript is paired tag
Syn:
<sup> text </sup>
subscript tag
>this tag used to display text bottom of baseline
> subscript is paired tag
Syn:
<sub> text </sub>
All these tags are paired tags & inline tags
Span tag
>span tag used for small textual data, like as error message, mandatory
specification.
> in continuity of text, if we want to highlight couple of word or letters,
we use span tag
>its paired tag, inline tag
Syn: <span> text </span>
pre tag
> pre stands for pre-formatting (alignment)
> pre tag is used to print data/text, how we typed in same format
> pre is paired tag, block level
Syn:
<pre> text </pre>
Label tag
> label tag used for displaying prompting text.
> its paired tag, inline tag
Syn: <label> text </label>
HTML Attributes
⇒ Attribute is a special feature/setting of a tag.
⇒ Every tag they have attributes 99%
⇒ An HTML attribute is a piece of markup language used to adjust the behavior or
display of an HTML element. For example, attributes can be used to change the
color, size, or functionality of HTML elements.
⇒ HTML Attribute is something that we use in the starting tag of HTML Elements
or HTML Tags which provides extra information about those HTML Elements or
HTML Tags.
Syn:
<tagname attribute="value" attribute=’value’ ...>
Note:
⇒ Parameters(values) should be enclosed within “ “ or ‘ ‘ or without quotes.
⇒ Every attribute must be separated by a space
Types of attributes
⇒ general attributes
These attributes are common for most tags (99% of tags). These attributes are used
to adjust the behavior or display of an HTML element, to provide extra information
about those HTML Elements to the browser.
those attributes are:
class, id, name, style, align, action, method, href, src, target, width, height,
alt, title, lang, min, max, step, maxlength, type, checked, selected, value,
readonly, placeholder etc…
⇒ event attributes
An event is a notification that is triggered when something changes in the
browser.
With event attributes these events are directed to JavaScript which then
responds to the event.
These attributes are used to perform some logical operations.
logical operations we can perform by using JavaScript, these also called dynamic
attributes.
By using event attributes From Html page we can trigger JavaScript code or we can
call JavaScript functions
attributes are:
onclick, ondblclick, onfocus, onblur, onkeypress, onkeyup, onkeydown,
onsubmit, onchange, oninput, onreset, onselect, onmousemove, onmouseout,
onmouseover, onwheel, onload, onsubmit, onchange etc…
optional attributes
same as gen attribute
there attributes are not comp to use
ex: lang, method, type, …
title tag
this tag used to set the title for a webpage, means every webpage they have
individual title.
Web site => 10 web pages => 10 titles (1page : 1title)
its paired tag.
<title> is the sub tag of <head> tag.
Syn:
<title> text </title>
Link tag
Link tag used to set the favicon/logo for a webpage.
Also used to link with external files (css files, bootstrap file)
Unpaired tag.
<link> is the sub tag of <head> tag.
Syn: <link rel=”icon” href=”filename” />
Relative => icon or stylesheet
Hyper reference => address of image
.jpg .bmp .png .jfif .gif .tif .ico .webp .svg
images
> "img" tag is used to display images on webpage.
> in one web pages we can display any no.of images and any type of
images.
.jfif .svg .jpg .bmp .gif .tif .png .webp
> its un-paired tag, and its inline element
Syn:
<img attributes/>
Note:
It is strongly recommended to place all images in side root folder or
create sub folder with name images in root folder
attributes:
src => to specify which img you want to display
width => width of image (pixel)
height => height of image (pixel)
title => it is used to specify tool tip. (whenever mouse pointer comes on top of
image)
alt => alternative text, if image not loaded in webpage/not display, we want to
display text message to user it called as alt
+
global attributes
opacity: 0.5;
filter: blur(5px);
brightness(125%)
contrast(135%)
grayscale(100%)
invert(100%)
hue-rotate(180deg)
saturate(8)
sepia(100%)
drop-shadow(8px 8px 10px green)
hyperlinks
> a tag stand for "anchor”
>"a" tag is used to create hyperlink, hyperlinks are used to move
from one webpage to another webpage.
>whenever user clicks on the hyperlink, it moves to the specified
page.
> Destination page sometime within same application or other
application.
> by default, every browser provides built-in style for each hyperlink,
i.e blue color + hand symbol + under line.
> its paired tag and inline element
Syn:
<a attributes>Display Text</a>
<a attributes> <img> </a>
Types:
External links
Internal links
attributes:
href : hyper reference, used to specify the address of webpage or web site,
i.e whenever user clicks on this link, which page you want to open
url may be html page, server-side file, image, audio file, video, pdf file,
documents etc...
href=”url”
“https://www.abc.com/login.aspx”
“” self-calling
“.” home page of web site/home dir of web application
“#id” it creates book marks (moving within same page)
target : where you want open destination page
_blank ==> opens the link in a window/tab
_self ==> opens the link in current working tab/window (its default)
_parent ==> opens the link in parent frame
_top ==> opens the link in full body of window
framename ==> opens the link in specified frame
working with list tags
these tags are used to display data/info in points wise.
html supports three types of list, those are
Ordered list numbering
Unorderedlist bulleting
ol tag
>ol stands for "Ordered List".
>it is used to display the text(names, colors, team names, course name...) with
numbering.
>it supports 5types numbering, those are 1, A, a, i, I. by default it displaying in
number.
>by using "ol" tag we can create ordered list
>ol is paired tag & block level element
li tag
> li stands for "list item"
> li is sub tag of ol tag
> li tag is used to print text/data in points wise
> li is paired tag & block level element
Syn:
<ol attributes>
<li> text </li>
<li> text </li>
<li> text </li>
...
</ol>
ol attributes:
type : which type numbering to display (Default is 1)
start : from where u want to start numbering (default is 1)
reversed : to displaying numbers in desc order
li attributes:
value : used for restarting numbering with specified value
ul tag
>ul stands for "Un-Ordered List".
>it is used to display the list of items(names, colors, team names, course name...)
with bulleting.
>it supports 3types bulleting, those are dot, circle, square. by default, is dot.
>by using "ul" tag we can create un-ordered list items
> ul is paired tag
>"li" tag used for creating list items
Syn:
<ul type="dot/circle/square">
<li> text </li>
<li> text </li>
<li> text </li>
...
</ul>
dl tag
>dl stands for Definition list (since html5 description list)
>dl tag used for to display definitions/full forms (collection of definitions)
>its paired tag
> "dt" and "dd" are sub tags of "dl" tag
> "dt" stands for definition title, "dd" stands for definition data.
> dt & dd are paired
Syn:
<dl>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
<dt>title/word</dt>
<dd>information</dd>
...
</dl>
fieldset tag
> this tag used for drawing a common border around elements/tags.
> its paired tag and block level
> we can draw any no.of borders
Syn: <fieldset attributes>
<legend>text</legend>
Sub elements
</fieldtset>
attributes:
align : align of elements, it supports 3 alignments center, left, right
left is default align
border : style of line, thickness of line, color of line
width : width of box (size in % )
legend tag
>legend tag used for set title/heading for fieldset
>legend is sub tag of fieldset tag
>its paired tag
Syn:<legend attributes>Heading</legend>
attributes:
align :align of elements, it supports 3 alignments center, left, right
left is default align
color :
div tag
>div is a container, means its grouping elements of html.
>inside div tag we can place any content like normal text or images.
>div tag is used to divide web page as no.of subpages/parts, each part is
rep as div.
> for better maintained, effective design of web page and simplifying css
code.
>its paired tag, and block level element
Syn: <div attributes>
content
</div>
table tag
>table tag is used to display the data in form rows & cols in the web page.
> a table is a collection of rows, each row is collection of cells/col/field.
> a table is represented as <table> tag, a row represented as <tr> tag, a colheading
is represented as <th> tag, data rep as <td> tag.
> table heading is represented as <caption> tag.
><thead> tag is rep of table head part, <tbody> tag is rep of table body part and
<tfoot> tag Is rep of table footer part.
table used to draw a table, means it grouping no of rows
caption to set main heading of table
tr table row, used to draw a row, means it grouping no of columns
th table heading, used to set column headings
td table data, used to pri0nt the data in columns
+
since html4:
thead table header section
tbody table body section
tfoot table footer section
> all these 8 tags are paired tags
> table, tr, caption, thead, tbody & tfoot are block level eles
> th & td are inline eles
Syn:
<table>
<tr>
<th>heading</th> <th>heading</th>
</tr>
<tr>
<td>data</td> <td>data</td>
</tr>
...
</table>
NOte:
<th> and <td> are sub tags of <tr>
<tr> is sub tag of <table>
table attributes:
border : border of table (0 means no border, 1-n border req)
align : alignment of table
width : width of table (%)
...
th& td attributes:
colspan : specifies the no.of columns to merge/expend
rowspan : specifies the no.of rows to merge/expend
...
