Full HTML

Development Types
1. Application Development- The softwares

which execute under an operating system are
known as application softwares.
Ex.
Ms-Word, PageMaker, Photoshop etc
Technologies are- C,C++,VB,VB.NET,C#,
Java(Swing,AWT,JDBC)
2. Web Development- The Applications which
executes under a web server are known as web
applications. During development each technology
requires their own web server. These are-
Technology Web Server Name

Sun Java(JSP,Servlet) Apache Tomcat
Microsoft(ASP,ASP.NET) IIS
PHP WAMP
Web Development
In Development Pont of View their are two categories of

web development, these are-
1. Client Side Development- Here we design the
interface of website, means it decides how a web
page will look and the client side technologies are-
HTML,DHTML,JavaScript etc
2. Server Side Developement- The Server Side

Technology focus about the functioning of a website.The
Server Side Technologies are - ASP, JSP & Servlet, PHP
HTML
1. HTML stands for HyperText Markup Language.

2. It is a client side programming languages.
3. The extension of HTML may be .htm or .html
4. It is not a case sensitive language
5. it is a Tag based language, & the tags could be classified into two types
a) single tag (<tag> or <tag/>) ex. <br>,<hr>
b) paired tag (<tag>.....</tag>) ex <html>,<body> etc
6. you can write html program on any editor like notepad, but some
specific IDEs are-
a) Dreamweaver
b) FrontPage
7. It executes on a web browser.
• <!DOCTYPE html>
• <html>
• <head>
• <title>My First Web Page</title>
• </head>
• <body bgcolor="pink">
• Hello Friends
• </body>
• </html>
Basic HTML Tags
• <html>- indicates starting of a html program
• <head>- it is container tag contains
<title>,<script>,<style> etc
• <title>- sets the title of a page
• <body>- specifies the contents of a page
Attributes
1. bgcolor- sets the background color
2. background- sets the background image
HTML <!DOCTYPE>
• All HTML documents must start with a

<!DOCTYPE> declaration.
• The declaration is not an HTML tag. It is an
"information" to the browser about what
document type to expect.
• In HTML5, the <!DOCTYPE> declaration is
simple:
<!DOCTYPE html>
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>
HTML Attributes
• All HTML elements can have attributes

• Attributes provide additional information about
elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs
like: name="value"
• Example
• <a href="https://www.w3schools.com">Visit
W3Schools</a>
HTML Comment Tags
• You can add comments to your HTML source by using the

following syntax:

Notice that there is an exclamation point (!) in the start tag, but
not in the end tag.
• Example

<p>This is a paragraph.</p>


HTML Headings
• HTML headings are titles or subtitles that you
want to display on a webpage.
• HTML headings are defined with
the <h1> to <h6> tags.
• <h1> defines the most important
heading. <h6> defines the least important
heading.
• Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
HTML Paragraphs
• A paragraph always starts on a new line, and is

usually a block of text.
• The HTML <p> element defines a paragraph.
• A paragraph always starts on a new line, and
browsers automatically add some white space (a
margin) before and after a paragraph.
• Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Text Formatting Tags-
• <font> - sets the font color & style

• Attributes
• 1. face- sets the font name
• 2. color- sets the font color
• 3. size - sets the font size
• <hr>- draw the horizontal line, it is a single tag
• <br>- change a line, it is also a single tag
• <b>- Bold
• <i>- Italic
• <u>- Underline
Text Formatting Tags-
• <big>- Big Text

• <small>- Small Text
• <pre>- pre formatted Text
• <sup> - Superscript
• <sub>- Subscript
• <mark> - Marked text
• <del> - Deleted text
• <ins> - Inserted text
HTML Links - Hyperlinks
• HTML links are hyperlinks.

• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse
arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an

image or any other HTML element!
• HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following
syntax:
<a href="url">link text</a>

Cont..
• The most important attribute of the <a> element is
the href attribute, which indicates the link's destination.
• The link text is the part that will be visible to the reader.
• Clicking on the link text, will send the reader to the specified
URL address.
• Example
• This example shows how to create a link to google.com:
• <a href="https://www.google.com/">Visit google.com!</a>
• By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
HTML Links - The target Attribute
• By default, the linked page will be displayed in the current browser
window. To change this, you must specify another target for the link.
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
– _self - Default. Opens the document in the same window/tab as it was

clicked
– _blank - Opens the document in a new window or tab
Example
Use target="_blank" to open the linked document in a new browser window or
tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Link to an Email Address
• Use mailto: inside the href attribute to create a

link that opens the user's email program (to let
them send a new email):
Example
<a href="mailto:[email protected]">Send email</a>

HTML Images
• 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">
Example
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
HTML Image Maps
• The HTML <map> tag defines an image map. An image map is an image
with clickable areas. The areas are defined with one or more <area> tags.
Example:-
Here is the HTML source code for the image map above:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
HTML Marquee Tag
• The <marquee> tag is a container tag of HTML is implemented for
creating scrollable text or images within a web page from either left
to right or vice versa, or top to bottom or vice versa. But this tag
has been deprecated in the new version of HTML, i.e., HTML 5.
• Attributes
1. behavior- it may be scroll or alternate
2. direction- sets the direction may be left, right, up, down.
Example
<marquee direction="right" behavior="alternate">
<h1>United College</h1>
</marquee>
HTML Lists
HTML Lists
• HTML lists allow web developers to group a set of related
items in lists.
Example
An unordered HTML list:
 Item
 Item
 Item
 Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Attribute-
type- specifies the list type
for numbering use (A,a,I,i etc)
for bullets use (sqaure,circle)
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list

HTML Tables
HTML Table
• The <table> tag defines an HTML table.

• Each table row is defined with a <tr> tag. Each
table header is defined with a <th> tag. Each
table data/cell is defined with a <td> tag.
• By default, the text in <th> elements are bold
and centered.
• By default, the text in <td> elements are
regular and left-aligned.
<table> creates a table
Attributes
1. border
2. align
3. width
4. bgcolor
5. background
6. height
<tr> Table Row
<td> Table Cell Value
Attributes
1. rowspan- merge the rows
2. colspan- merge the columns
<th> Table Cell Heading
<caption> element to define a table
caption
Example
A simple HTML table:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Forms
HTML Forms
• An HTML form is used to collect user input. The user input is most often
sent to a server for processing.
• The <form> Element

• The HTML <form> element is used to create an HTML form for user input:
• <form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as: text
fields, checkboxes, radio buttons, submit buttons, etc
The <input> Element
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways,
depending on the type attribute.
• Here are some examples:
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one
of many choices)
<input type="checkbox"> Displays a checkbox (for selecting zero or

more of many choices)
<input type="submit"> Displays a submit button (for submitting

the form)
<input type="button"> Displays a clickable button

HTML Input Types
• <input type="button"> • <input type="number">

• <input type="checkbox"> • <input type="password">
• <input type="color"> • <input type="radio">
• <input type="date"> • <input type="range">
• <input type="datetime-local"> • <input type="reset">
• <input type="email"> • <input type="search">
• <input type="file"> • <input type="submit">
• <input type="hidden"> • <input type="tel">
• • <input type="text">
<input type="image">
• <input type="time">
• <input type="month">
• <input type="url">
• <select > &<option>
• <input type="week">
HTML DIV and SPAN
Block-level Elements (DIV)
• A block-level element always starts on a new
line and takes up the full width available
(stretches out to the left and right as far as it
can).
• The <div> element is a block-level element.
Example 1:-
<div>Hello World</div>
Here are the block-level elements in HTML:
• <form>
• <address> • <h1>-<h6>
• <article> • <header>
• <aside> • <hr>
• <blockquote> • <li>
• <canvas> • <main>
• <dd> • <nav>
• <div> • <noscript>
• <dl> • <ol>
• <dt> • <p>
• <fieldset> • <pre>
• <figcaption> • <section>
• <figure> • <table>
• <footer> • <tfoot>
• <ul>
Inline Elements (SPAN)
• An inline element does not start on a new line
and it only takes up as much width as necessary.
• This is a <span> element inside a paragraph.
Example
<span>Hello World</span>
Here are the inline elements in HTML:
• <a> • <label>
• <abbr> • <map>
• <acronym> • <object>
• <b> • <output>
• <bdo> • <q>
• <big> • <samp>
• <br> • <script>
• <button> • <select>
• <cite> • <small>
• <code> • <span>
• <dfn> • <strong>
• <em> • <sub>
• <i> • <sup>
• <img> • <textarea>
• <input> • <time>
• <kbd> • <tt>
HTML frames
Frame
• Frame- Frame is used for splitting the window into different
individual parts. and each part you can embed a new html page.
• Tags Meaning
<frameset> Creates a frame
Attributes
1. rows - creates horizontal frame
2. cols- create vertical frame
<frame> creates individual window
Attributes
1. src- sets the name of file which will
show in the window
2. name- sets the name of window
Example
<frameset cols="40%,30%,30%">
<frame src="demo.html" name="f1">
<frame src="" name="f2">
<frame src="" name="f3">
</frameset>
HTML Iframes
HTML Iframes
• The HTML <iframe> tag specifies an inline frame.

• An inline frame is used to embed another
document within the current HTML document.
• Syntax
<iframe src="url" title="description">
Tip: It is a good practice to always include

a title attribute for the <iframe>. This is used by screen
readers to read out what the content of the iframe is.
• The HTML <iframe> tag specifies an inline frame
• The src attribute defines the URL of the page to
embed
• Always include a title attribute (for screen readers)
• The height and width attributes specifies the size
of the iframe
• Use border:none; to remove the border around
the iframe
HTML Multimedia
HTML Video
• The HTML <video> element is used to show a

video on a web page.
Example
<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
How it Works
• The controls attribute adds video controls, like play, pause, and
volume.
• It is a good idea to always include width and height attributes. If

height and width are not set, the page might flicker while the
video loads.
• The <source> element allows you to specify alternative video

files which the browser may choose from. The browser will use
the first recognized format.
• The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.
HTML Audio
• The HTML <audio> element is used to play an

audio file on a web page.
Example
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio - How It Works
• The controls attribute adds audio controls, like play,

pause, and volume.
• The <source> element allows you to specify

alternative audio files which the browser may choose
from. The browser will use the first recognized
format.
• The text between the <audio> and </audio> tags will

only be displayed in browsers that do not support
the <audio> element.
HTML Entities
HTML Entities
• Reserved characters in HTML must be replaced with character
entities.
• If you use the less than (<) or greater than (>) signs in your text,
the browser might mix them with tags.
• Character entities are used to display reserved characters in

HTML.
• A character entity looks like this:
&entity_name;OR
&#entity_number;
• To display a less than sign (<) we must write: < or <

Some Useful HTML Character Entities
Result Description Entity Name Entity Number

non-breaking space
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '

(apostrophe)
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®

HTML Symbol Entities
• Many mathematical, technical, and currency symbols, are not present on a
normal keyboard.
• To add such symbols to an HTML page, you can use the entity name or the
entity number (a decimal or a hexadecimal reference) for the symbol.
Example
Display the euro sign, €, with an entity name, a decimal, and a

hexadecimal value:
<p>I will display €</p>
• Will display as:

I will display €
I will display €
I will display €
Some Mathematical Symbols Supported by HTML
Char Number Entity Description

∀ ∀ ∀ FOR ALL
∂ ∂ ∂ PARTIAL DIFFERENTIAL
∃ ∃ ∃ THERE EXISTS
∅ ∅ ∅ EMPTY SETS
∇ ∇ ∇ NABLA
∈ ∈ ∈ ELEMENT OF
∉ ∉ ∉ NOT AN ELEMENT OF
∋ ∋ &ni; CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION

HTML Emojis
HTML Emojis
• Emojis are characters from the UTF-8 character set: 😄
😍💗
• Emojis look like images, or icons, but they are not.
• They are letters (characters) from the UTF-8 (Unicode)
character set.
The HTML charset Attribute

• To display an HTML page correctly, a web browser must
know the character set used in the page.
• This is specified in the <meta> tag:
<meta charset="UTF-8">
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>I will display A B C</p>

<p>I will display A B
C</p>
</body>
</html>
Some Emoji Symbols in UTF-8
Emoji Value
🗻 🗻
🗼 🗼
🗽 🗽
🗾 🗾
🗿 🗿
😀 😀
😁 😁
😂 😂
😃 😃
😄 😄
😅 😅
DHTML
Dynamic Hyper Text Markup

Language

Full HTML

Uploaded by

Copyright:

Available Formats

Full HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Full HTML

Uploaded by

Copyright:

Available Formats

Development Types

1. Application Development- The softwares

Technology Web Server Name

In Development Pont of View their are two categories of

2. Server Side Developement- The Server Side

1. HTML stands for HyperText Markup Language.

• All HTML documents must start with a

• The HTML element is everything from the

• Examples of some HTML elements:

• All HTML elements can have attributes

• You can add comments to your HTML source by using the

• A paragraph always starts on a new line, and is

• <font> - sets the font color & style

• <big>- Big Text

• HTML links are hyperlinks.

Note: A link does not have to be text. A link can be an

<a href="url">link text</a>

• By default, links will appear as follows in all browsers:

– _self - Default. Opens the document in the same window/tab as it was

– _blank - Opens the document in a new window or tab

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

• Use mailto: inside the href attribute to create a

<a href="mailto:[email protected]">Send email</a>

• The <img> tag has two required attributes:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

• The <table> tag defines an HTML table.

• The <form> Element

<input type="checkbox"> Displays a checkbox (for selecting zero or

<input type="submit"> Displays a submit button (for submitting

<input type="button"> Displays a clickable button

• <input type="button"> • <input type="number">

• The HTML <iframe> tag specifies an inline frame.

Tip: It is a good practice to always include

• The HTML <video> element is used to show a

<video width="320" height="240" controls>

• It is a good idea to always include width and height attributes. If

• The <source> element allows you to specify alternative video

• The HTML <audio> element is used to play an

• The controls attribute adds audio controls, like play,

• The <source> element allows you to specify

• The text between the <audio> and </audio> tags will

• Character entities are used to display reserved characters in

• To display a less than sign (<) we must write: &lt; or &#60;

Result Description Entity Name Entity Number

< less than &lt; &#60;

> greater than &gt; &#62;

& ampersand &amp; &#38;

" double quotation mark &quot; &#34;

' single quotation mark &apos; &#39;

¢ cent &cent; &#162;

£ pound &pound; &#163;

¥ yen &yen; &#165;

€ euro &euro; &#8364;

• To display a less than sign (<) we must write: < or <

< less than < <

> greater than > >

& ampersand & &

" double quotation mark " "

' single quotation mark ' '

¢ cent ¢ ¢

£ pound £ £

¥ yen ¥ ¥

€ euro € €

© copyright © ©

® registered trademark ® ®

∂ ∂ ∂ PARTIAL DIFFERENTIAL

∃ ∃ ∃ THERE EXISTS

∅ ∅ ∅ EMPTY SETS

∇ ∇ ∇ NABLA

∈ ∈ ∈ ELEMENT OF

∉ ∉ ∉ NOT AN ELEMENT OF

∋ ∋ &ni; CONTAINS AS MEMBER

∏ ∏ ∏ N-ARY PRODUCT

∑ ∑ ∑ N-ARY SUMMATION