Scribd
Upload
30 views104 pages

MWA Programs

Uploaded by

rupakkumar47071
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
30 views104 pages

MWA Programs

Uploaded by

rupakkumar47071
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 104

1 <html>

. <head>
<title>My Webpage</title>
</head>
<body>
This is my first Web Page!!!
</body>
</html>
2 The comment in HTML can be denoted as
. follows –
<!—It is a comment statement-->
3 <!DOCTYPE html>
. <html>
<head>
</head>
<body>
<h1>This is a first header</h1>
<h2>This is a second header</h2>
<h3>This is a third header</h3>
<h4>This is a forth header</h4>
<h5>This is a fifth header</h5>
<h6>This is a sixth header</h6>
</body>
</html>
4 <p> tag: This tag should be put at the end of
. every paragraph.

<html>
<head>
</head>
<body>
<p>
Once upon a time, there was a king who
kept a monkey as a pet. The monkey served
the king by all the possible ways.
</p>
<div>
It was very hot in those days. So one day,
when the king was sleeping, monkey was
fanning the king. Suddenly monkey noticed
a fly on the chest of the king. The monkey
tried to swish it away. But fly would go away
for one moment and come back again
</div>
<div>
So monkey decided to teach a lesson to the
fly.
</div>
<pre>
The monkey then looked for something to
hit a fly. It then found a stick. It picked up
the stick and tried to beat the fly using stick.
Hmmm at last it found a fly and with all the
force it hit the fly as a result of which the
king died.
Lesson from the story: Never keep a fool
servant!!!
</pre>
</body>
</html>

5 Line Break
For the line break the <br> tag is used. This
is a single line break tag. Generally this tag
is kept at the end of every line.
<!DOCTYPE html>
<html>
<head>
<title>Line Break Demo</title>
</head>
<body>
<p>
Here the line breaks
and new line starts. Again line
breaks<br>Bye.
</p>
</body>
</html>

6 The font style can be of various types such


. as boldface, italics, and strikethrough.

TAG PURPOSE
<b> </b> Displays the text
in bold
<i> </i> Displays the text
in italics
<strong> Displays the text
</strong> in bold
<strike> Displays the text
</strike> with strike

<!DOCTYPE html>
<html>
<head>
<title>Font Style Demo</title>
</head>
<body>
<b>This is a bold text</b>
<i>This is in italics</i>
<strong>This is strongly emphasized
text</strong><br>
<strike>This is striked text</strike>
<center>This will appear at the
center</center><br>
</body>
</html>

7 Text Alignment
.
We can align the text at left, right or at the center using a <div> tag. Here is a HTML
program which shows the text aligned left, right and centre.

<!DOCTYPE html>
<html>
<head>
<title>Text Alignment</title>
</head>
<body>
<div align=”center”>This is aligned at
center</div>
<div align=”left”>This is aligned at
left</div>
<div align=”right”>This is aligned at
right</div>
</body>
</html>

8 Setting the Font and Color:


. We can set the font, size and color of the text
in the web page. The tag <basefont> is used
for this purpose. The optional attributes
used with <basefont> tag are as given below
:

Att Value Purpose


rib
ute
colo Color value such as It displays the
r “red”, “yellow” and text with
so on. specified color.
face Font-family such as It displays the
“arial”, text with
“verdana”,”sans- specific font
serif” and so on. family.
size Number The text of
specified size
will be
displayed using
this attribute
value.

<!DOCTYPE html>
<html>
<head>
<title>Font styles for text</title>
</head>
<body>
<basefont face=”arial” size=”10”>
Varsha is sweet and <br>
Jayashree is very naughty!!<br>
But Sachin is a serious guy<br>
And Rashmi is a new-comer in this
group<br>
</body>
</html>

The <basefont> tag is supported in Internet


Explorer 9 and not by FireFox, Chrome,
Opera and so on.
Most of the web designers prefer to have
their web pages white in color. HTML
allows the web developer to use color
attribute for coloring the text or for setting
the background color.

First of all we will learn how to display a


text colourful on the webpage.

ColorFont.html:
<!DOCTYPE html>
<html>
<head>
<title>coloring the text</title>
</head>
<body>
<basefont face=”arial” size=”10”
color=”blue”>
Great people are simple and<br>
<font face=”Times new roman” color=”red”
size=”8”>
Simple people are great!!!<br>
<font face=”GoudyHandtooled BT”
color=”green” size=”14”>
Great people rule the world.
</body>
</html>

Script Explanation :
1) In the above HTML document, we
have used font face tag to set the font.
2) Using the attributes color and size we
can specify values color and size in
double quotes. We can set the
background color of the web page using
the attribute bgcolor. Following program
sets the background color of the web
page to red.

<!DOCTYPE html>
<html>
<head>
<title>coloring the background</title>
</head>
<body bgcolor=”#FFFF00”>
<h3>This is document has colored
background</h3>
</body>
</html>

Script Explanation :
1) In above document we have specified
background color using the bgcolor
attribute.
2) The color can be specified by either
using the color name in double quotes or
using the hex.code as given in above
document.
3) The first two digits of Hex code
represents the Red value, then next two
digits specify the green value and final
two digits specify the blue value.
Note that the background color is specified
by the hexadecimal value. Following table
shows the hex. and corresponding decimal
values –

Deci Hexade
mal cimal
Value Value
1 1
2 2
3 3
4 4
5 5
6 6
7 7
8 8
9 9
10 A
11 B
12 C
13 D
14 E
15 F

In HTML, the colors are specified by


beginning with # and the FF denotes 255. In
this color code first two digits specify the
amount of red color then next two digits
specify the green color and the last two
digits specify blue color
# FF 00 00
red colour
Hence is used to set the background color
red. Each pair of digits specifies 0 to 255
color values. Thus hexadecimal color coding
helps us to specify.
256 * 256 * 256 = 16777216 colors.
The color can also be specified by its name
as follows –
<html>
<body bgcolor=”yellow”>
</html>
Following is a list of colors that can be
specified for setting the background colors
Aq N
ua av
y
Bla Ol
ck iv
e
Bl Pu
ue rp
le
Fu Re
chs d
ia
Gr Sil
ay ve
r
Gr Te
een al
Li W
me hit
e
Ma Ye
roo llo
n w
9 Special Character
.  In HTML certain symbols are treated as
special. For example - < i.e. less than
symbol is considered as special symbol
because it is used as the beginning of the
tag.
 Hence we cannot directly use certain
symbols such as <,>, “,© and so on.
 To print these symbols we use the units
which are called as reference. This
reference always begins with ampersand
(&) sign. Such reference is called as
entity reference.
 Following table enlists some characters
and entity references –

Cha Mean Entity


ract ing Refere
er nce
< Less &lt;
than
> Great &gt;
er
than
& Ampe &amp;
rsand
“ Doub &quot;
le
quote
’ Apost &apos;
rophe
s
© copyr &copy
ight ;

 Another type of entity reference that is


used frequently is &nbsp; that is non
breaking space character.
 This entity reference is useful for
defining the space between two string
and informing browser for not
performing the word wrapper between
the strings.
 Following is a sample script that makes
use of &nbsp.

<!DOCTYPE html>
<html>
<head>
<title>Space Demo</title>
</head>
<body>
<h3>
Method1:
</h3>
<p>
Jony&nbsp; Jony&nbsp; Yes&nbsp; Papa&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Eating&
nbsp;sugar&nbsp;no&nbsp;Papa&nbsp;&n
bsp;&nbsp;&nbsp;Open&nbsp;Your&nbsp
;mouth&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;Ha!Ha!Ha
</p>
<h3>
Method 2:
</h3>
<p>
Jony Jony Yes Papa Eating sugar no papa
Open Your mouth Ha!Ha!Ha!
</p>
</body>
</html>

How Divide and Pound symbol can be put


on HTML document ?
Sol. : With the help of entity references
denoted using & these two symbols can be
put in HTML document. The code can be
<html>
<head>
</head>
<body>
<p>This &divide symbol</p>
<p> This &pound symbol</p>
</body>
</html>
1 Relative URLs
0  There is a common practice to specify the
. web link in the web page. The link acts as a
pointer to some web page or some resource.
 Use of hyperlink in the web page allows
that page to link logically with other page.
 We can use hyperlinks by using a tag <a>
and by specifying the URL for href.
 The value assigned to href specifies the
target of the link.
 The <a> means beginning of the web link
and </a> means end of the web link.
 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 :
1) An unvisited link is underlined and blue.
2) A visited link is underlined and purple
3) An active link is underlined and red
 Following are the steps to be followed to
specify web link in the web page.
Step 1 : The beginning of web link can be
specified by the tag <a href=” “.Inside the
double quotes mention the URL of desired
link.
Step 2 : Write some text that should act as
a hyperlink.
Step 3 : End the web link </a>
Here is a sample program which
implements the above given idea –
<!DOCTYPE html>
<html>
<head>
<title> Use of Hyperlink on the web
Page</title>
</head>
<body>
Click here to get a
<a
href=”http://www/vtubooks.com”>book</a>
on engineering
</body>
</html>

The target attribute

 If we want to get that link opened in


another window we can mention _target
property. Various targets can be –
 _self loads the page into the current
window.
 _blank loads the page into a new separate
browser window.

1 Develop a HTML page to use image as a


1 link to another page.
. Sol.:
Step 1 : Write the HTML document
containing an hyperlink to an image. When
we click on the image the html page referred
by the <a href> tag must get opened.
<!DOCTYPE html>
<html>
<head>
<title>Image Demo</title>
</head>
<body>
<h1>Indian Heritage</h1>
<a href=”TajMahal.html” target=”_blank”>
<img src=”TajMahal.jpg” alt=”Taj
Mahal!!”/>
</a>
<br>History of Taj Mahal
<br>
</body>
</html>

Step2 : Write the HTML


document(TajMahal.html) mentioned by the
tag in Step 1 as follows.
<!DOCTYPE html>
<html>
<head>
<title>Information on TajMahal </title>
</head>
<body>
<h1>Indian Heritage</h1>
<p>Taj Mahal is one of the wonders of the
World. It is located in Agra,India.<br>
Taj Mahal is built by<strong> Shah
Jahan</strong> in memory of his wife
<strong>Mumtaz Mahal</strong><br>
It is considered to be the excellent example
of Mughal Architecture
</p><br>
</body>
</html>

Step 3 : Open some web browser and specify


the file name ImgLink.html in the address
bar and you will get following output.
Plying an Audio File
Using HTML script we can play the audio
files. The simplest way to play audio file is
the use of hyperlinks. Following script
shows how simple it is to a play a sound file
using HTML.
<html>
<body>
<h2>Playing The Audio</h2>
<form>
<a href=”chimes.wav”>Click here to Play
the sound</a>
</form>
</body>
</html>

The above script executes in almost all the


web browsers such as Internet explorer,
Mozilla Firefox, Opera and so on. But the
above HTML document launches the Media
player software and then the audio file is
played within it. For playing the audio files
using hyperlinks it is necessary to get the
audio file downloaded first.

1 Uses of Links
3 Following are the uses of the hyperlinks for
. a web document –
1. One can link logically related documents
together using the links in the web page.
2. Use of link enhances the readability of the
web document.
3. User can click on the link and can learn
more about a subtopic and then can return
to the main topic. This navigation within the
web pages is possible due to the links.
1 Lists
4  List is nothing but the collections of
. items or elements. There are two types of
lists - unordered lists and ordered lists.
 The unordered list is useful for simply
listing the items but if we want the items
in some specific sequence then the
ordered lists are used. Let us discuss how
to use these types lists in the HTML
document.
Unordered List
Following HTML document makes use of
unordered list.

Basic HTML
Tag Description

<!DOCTYPE> Defines the document type

<html> Defines an HTML document

<head> Contains metadata/information for the document

<title> Defines a title for the document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<p> Defines a paragraph

<br> Inserts a single line break

<hr> Defines a thematic change in the content

<!--...--> Defines a comment


Formatting
Tag Description

<acronym> Not supported in HTML5. Use <abbr> instead.


Defines an acronym

<abbr> Defines an abbreviation or an acronym

<address> Defines contact information for the author/owner of a document/article

<b> Defines bold text

<bdi> Isolates a part of text that might be formatted in a different direction from
other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Use CSS instead.


Defines big text

<blockquote> Defines a section that is quoted from another source

<center> Not supported in HTML5. Use CSS instead.


Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<del> Defines text that has been deleted from a document


<dfn> Specifies a term that is going to be defined within the content

<em> Defines emphasized text

<font> Not supported in HTML5. Use CSS instead.


Defines font, color, and size for text

<i> Defines a part of text in an alternate voice or mood

<ins> Defines a text that has been inserted into a document

<mark> Defines marked/highlighted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<s> Defines text that is no longer correct

<small> Defines smaller text

<strike> Not supported in HTML5. Use <del> or <s> instead.


Defines strikethrough text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<time> Defines a specific time (or datetime)

<u> Defines some text that is unarticulated and styled differently from normal
text
<var> Defines a variable

Forms and Input


Tag Description

<form> Defines an HTML form for user input

<input> Defines an input control

<textarea> Defines a multiline input control (text area)

<button> Defines a clickable button

<select> Defines a drop-down list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<label> Defines a label for an <input> element

<fieldset> Groups related elements in a form

<legend> Defines a caption for a <fieldset> element

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation

Frames
Tag Description

<frame> Not supported in HTML5.


Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5.


Defines a set of frames

<noframes> Not supported in HTML5.


Defines an alternate content for users that do not support frames

<iframe> Defines an inline frame

Images
Tag Description

<img> Defines an image

<map> Defines a client-side image map

<area> Defines an area inside an image map

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<picture> Defines a container for multiple image resources

<svg> Defines a container for SVG graphics


Attributes
Attribute Value Description

alt text Specifies an alternate text for an image

height pixels Specifies the height of an image

Sizes sizes Specifies image sizes for different page layouts

src URL Specifies the path to the image

Srcset URL-list Specifies a list of image files to use in different


situations

usemap #mapname Specifies an image as a client-side image map

width pixels Specifies the width of an image

Audio / Video
Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements (<video>, <audio>
and <picture>)

<track> Defines text tracks for media elements (<video> and <audio>)

<video> Defines a video or movie

Links
Tag Description

<a> Defines a hyperlink

<link> Defines the relationship between a document and an external resource


(most used to link to style sheets)

<nav> Defines navigation links

Lists
Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dir> Not supported in HTML5. Use <ul> instead.


Defines a directory list
<dl> Defines a description list

<dt> Defines a term/name in a description list

<dd> Defines a description of a term/name in a description list

Tables
Tag Description

<table> Defines a table

<caption> Defines a table caption

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

Styles and Semantics


Tag Description
<style> Defines style information for a document

<div> Defines a section in a document

<span> Defines a section in a document

<header> Defines a header for a document or section

<footer> Defines a footer for a document or section

<main> Specifies the main content of a document

<section> Defines a section in a document

<article> Defines an article

<aside> Defines content aside from the page content

<details> Defines additional details that the user can view or hide

<dialog> Defines a dialog box or window

<summary> Defines a visible heading for a <details> element

<data> Adds a machine-readable translation of a given content

Meta Info
Tag Description

<head> Defines information about the document

<meta> Defines metadata about an HTML document


<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Use CSS instead.


Specifies a default color, size, and font for all text in a document

Programming
Tag Description

<script> Defines a client-side script

<noscript> Defines an alternate content for users that do not support client-side scripts

<applet> Not supported in HTML5. Use <embed> or <object> instead.


Defines an embedded applet

<embed> Defines a container for an external (non-HTML) application

<object> Defines an embedded object

<param> Defines a parameter for an object

Attribute Options Function

Align right, left, center Horizontally aligns tags

Valign top, middle, bottom Vertically aligns tags within an HTML element.

Bgcolor numeric, hexidecimal, RGB Places a background color behind an element


values

background URL Places a background image behind an element

Id User Defined Names an element for use with Cascading Style


Sheets.
Class User Defined Classifies an element for use with Cascading Style
Sheets.

Width Numeric Value Specifies the width of tables, images, or table cells.

Height Numeric Value Specifies the height of tables, images, or table cells.

Title User Defined "Pop-up" title of the elements.

The dir Attribute


The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir
attribute can take one of two values, as you can see in the table that follows −

Value Meaning

Ltr Left to right (the default value)

Rtl Right to left (for languages such as Hebrew or Arabic that are read right to left)

The HTML <body> tag also supports the following additional attributes −

Attribute Value Description

Alink rgb(x,x,x) Deprecated − Specifies the color of the active links in


#xxxxxx the document.
colorname

background URL Deprecated − Specifies the background image file


path.

bgcolor rgb(x,x,x) Deprecated − Specifies the background color.


#xxxxxx
colorname

Link rgb(x,x,x) Deprecated − Specifies the color of all the links in the
#xxxxxx document.
colorname

Text rgb(x,x,x) Deprecated − Specifies the color of the text in the


#xxxxxx document.
colorname

Vlink rgb(x,x,x) Deprecated − Specifies the color of the visited links in


#xxxxxx the document.
colorname

Following tags have been introduced in older versions of HTML but all the tags marked with are part of
HTML-5.

Tag Description Version

<!--...--> Specifies a comment

<!DOCTYPE> Specifies the document type

<a> Specifies an anchor

<abbr> Specifies an abbreviation

<acronym> Specifies an acronym

<address> Specifies an address element

<area> Specifies an area inside an image map

<article> Specifies an article

Specifies some content loosely related to the page content. If it


<aside>
is removed, the remaining content still makes sense

<audio> Specifies a sound content

<b> Specifies bold text

<base> Specifies a base URL for all the links in a page

<basefont> Deprecated. Specifies a base font

<bdo> Specifies the direction of text display

Represents text that must be isolated from its surrounding for


<bdi> bidirectional text formatting. It allows embedding a span of text
with a different, or unknown, directionality

<bgsound> Specifies background music

<big> Specifies big text


<blink> Specifies a text which blinks

<blockquote> Specifies a long quotation

<body> Specifies the body element

<br> Inserts a single line break

<button> Specifies a push button

<canvas> For making graphics with a script

<caption> Specifies a table caption

<center> Deprecated. Specifies centered text

<cite> Specifies a citation

<code> Specifies computer code text

<col> Specifies attributes for table columns

<colgroup> Specifies groups of table columns

<comment> Puts a comment in the document

<datalist> A list of options for input values

<dd> Specifies a definition description

<del> Specifies deleted text

<dfn> Specifiesa definition term

<dialog> Specifiesa dialog box or window

<dir> Deprecated. Specifies a directory list

<div> Specifies a section in a document

<dl> Specifies a definition list

<dt> Specifies a definition term

<em> Specifies emphasized text


<embed> Specifiesa container for an external (non-HTML) application

<fieldset> Specifies a fieldset

<figcaption> Specifiesa caption for a <figure> element

<figure> Specifies self-contained content

<font> Deprecated. Specifies text font, size, and color

<footer> Specifies a footer for a document or section

<form> Specifies a form

<frame> Specifies a sub window (a frame)

<frameset> Specifies a set of frames

<h1> to <h6> Specifies header 1 to header 6

<head> Specifies information about the document

<header> Specifies a header for a document or section

<hr> Specifies a horizontal rule

<html> Specifies an html document

<i> Specifies italic text

<iframe> Specifies an inline sub window (frame)

<ilayer> Specifies an inline layer

<img> Specifies an image

<input> Specifies an input field

<ins> Specifies inserted text

<isindex> Deprecated. Specifies a single-line input field

<kbd> Specifies keyboard text

<keygen> Generate key information in a form


<label> Specifies a label for a form control

<layer> Specifies a layer

<legend> Specifies a title in a fieldset

<li> Specifies a list item

<link> Specifies a resource reference

Specifies the main or important content in the document. There


<main>
is only oneelement in the document

<map> Specifies an image map

Specifies a text highlighted for reference purposes, that is for its


<mark>
relevance in another context

<marquee> Creates a scrolling-text marquee

<menu> Deprecated. Specifies a menu list

Specifies a command/menu item that the user can invoke from a


<menuitem>
popup menu

Specifies meta data of an html document which is not displayed


<meta>
on the page

<meter> Specifies a scalar measurement within a known range (a gauge)

<multicol> Specifies a multicolumn text flow

<nav> Specifies a section that contains only navigation links

<nobr> No breaks allowed in the enclosed text

Specifies content to be presented by browsers that do not


<noembed>
support the <embed>tag

<noframes> Specifies a noframe section

<noscript> Specifies a noscript section

<object> Specifies an embedded object

<ol> Specifies an ordered list


<optgroup> Specifies an option group

<option> Specifies an option in a drop-down list

<output> Specifies the result of a calculation

<p> Specifies a paragraph

<param> Specifies a parameter for an object

Deprecated. Render the remainder of the document as


<plaintext>
preformatted plain text

<pre> Specifies preformatted text

<progress> Specifies a completion progress of a task

<q> Specifies a short quotation

Specifies to show browsers that do not support the ruby


<rp>
element

<rt> Specifies an text ruby annotation

<ruby> Specifies an ruby annotation

<s> Deprecated. Specifies strikethrough text

<samp> Specifies sample computer code

<script> Specifies a script

<section> Specifies a section in a document

<select> Specifies a selectable list

<spacer> Specifies a white space

<small> Specifies small text

Specifies a media resources for media elements, defined inside


<source>
video or audio elements

<span> Specifies a section in a document


<strike> Deprecated. Specifies strikethrough text

<strong> Specifies strong text

<style> Specifies a style definition

<sub> Specifies subscripted text

<summary> Specifies a summary, caption, or legend for a given <details>

<sup> Specifies superscripted text

<table> Specifies a table

<tbody> Specifies a table body

<td> Specifies a table cell

<textarea> Specifies a text area

<tfoot> Specifies a table footer

<th> Specifies a table heading

<thead> Specifies a table header

<time> Specifies a date and time <details>

<title> Specifies the document title

<tr> Specifies a table row

<track> Specifies a text tracks used in mediaplayers

<tt> Specifies teletype text

<u> Deprecated. Specifies underlined text

<ul> Specifies an unordered list

<var> Specifies a variable

<video> Specifies a text tracks used in media players

<wbr> Indicates a potential word break point within a <nobr> section


<xmp> Deprecated. Specifies preformatted text
Attribute Value Description

charset character_encoding Defines the


character
encoding of
the linked
document.

Cords if shape = "rect" then coords = "left, top, right, bottom" Specifies the
coordinates
if shape = "circ" then coords = "centerx,centery,radius"
appropriate to
if shape = "poly" then coords = "x1, y1, x2, y2,..,xn,yn" the shape
attribute to
define a
region of an
image for
image maps.

download filename This


downloads
the target
when user
clicks on the
hyperlink.

Href URL Specifies the


URL of a page
or the name
of the anchor
that the link
goes to.

hreflang language_code Language


code of the
destination
URL.
media media_query It specifies
what media
the linked
document is
optimized for

Name section name Marks an area


of the page
that a link
jumps to.

Rel alternate Describes the


designates relationship
stylesheet between the
start current
next document and
prev the
contents destination
index URI.
glossary
copyright
chapter
section
subsection
appendix
help
bookmark

Rev alternate Specifies the


designates relationship
stylesheet between the
start target URL
next and the
prev current
contents document.
index
glossary
copyright
chapter
section
subsection
appendix
help
bookmark

Shape rect Specifies the


rectangle shape of the
circ image map
circle
poly
polygon

Target _blank Where to


_parent open the
_self target URL.
_top
_blank - the
target URL will
open in a new
window.

_self - the
target URL will
open in the
same frame as
it was clicked.

_parent - the
target URL will
open in the
parent
frameset.

_top - the
target URL will
open in the
full body of
the window.

type mime_type Specifies the


MIME
(Multipurpose
Internet Mail
Extensions)
type of the
target URL

<base>

Attribute Value Description

Href URL Specifies the URL of a page or the name of the anchor that
the link goes to.

Target _blank Where to open the target URL.


_parent
_blank − the target URL will open in a new window.
_self
_top _self − the target URL will open in the same frame as it
was clicked.
_parent − the target URL will open in the parent frameset
_top − the target URL will open in the full body of the
window

Unordered List

Following HTML document makes use of unordered list.

HTML Document [UnordLstDemo.html]

<!DOCTYPE html>

<html>

<head>

<title> Use of Unordered List </title>

</head>

<body>

<h2>All About Computer ...</h2>

Following are some popular operating systems used in computer

<ul type="disc">

<li>DOS</li>

<li>Windows 98</li>

<li>Windows XP</li>

<li>Windows Professional</li>

<li>Windows Vista</li>

<li>Unix</li>

</ul>

Following are some core subjects on computer science

<ul type="circle">

<li>Operating system</li>

<li>Computer Network</li>

<li>Database management Systems</li>

<li>Web Programming</li>

<li>Software Engineering</li>

</ul>

Following are some popular Web browsers


<ul type="square">

<li>Intenet Explorer</li>

<li>Mozilla Firefox</li>

<li>Netscape Navigator</li>

</ul>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
<title> Ordered List Demo </title>
</head>
<body>
<h4>This is a typical List</h4>
<ol type="A">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li> and so on</li>
</ol>
<h4>The list is starting from 5</h4>
<ol start="5">
<li>Ice cream</li>
<li>Mango</li>
<li>Juice</li>
<li>Pop Corn</li>
<li> and so on</li>
</ol>
</body>
</html>

Tables
 For systematic arrangement of information we often require tabular structure. HTML allows us
 to create tables on the web pages.
 Many web designers are using invisible tables on the web pages.
 The biggest advantage of using tables on the web pages is that the information gets arranged
 systematically.
 The table is a matrix of rows and columns and the area formed due to intersection of a row and a
 column is called cell.
 2.8.1 Basic Table Tag
 To create a table on the web page the table beginning tag is <table> and </table> tag is used for
 ending the table.
 Within <table> … </table> tag we can create rows and columns.
 The rows are created using <tr> </tr> and columns are created using <td> </td>
Example
HTML Document[TabDemo.html]
<!DOCTYPE html>
<html>
<head>
<title> Table Demo </title>
</head>
<body>
<br/><br/>
<center>
<table border="5">
<caption align="bottom">
<b> Table Demo </b>
</caption>
<tr>
<td>This is Left cell-row 1</td>
<td>This is Right cell -row 1</td>
</tr>
<tr>
<td>This is Left cell-row 2</td>
<td>This is Right cell-row 2</td>
</tr>
</table>
</center>
</body>
</html>

Sol. :
<html>
<head>
<title>My Table</title>
</head>
<body>
<table border=1>
<tr>
<td rowspan="3">
<p align=center>Sr.No.</p>
<p>&nbsp</td>
</td>
<td colspan="4">
<p align="center">College Name</p>
<
d>
<
/t
r>
<
tr
/t
>
<td width="40%" colspan="2" align="center">Section A</td>
<td width="40%" colspan="2" align="center">Section B</td>
<
r>
<
tr
>
<td align="center">X</td>
<td align="center">Y</td>
<td align="center">X</td>
<td align="center">Y</td>
<
/t
r>
<
tr
>
<td align="center">1</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
<
/t
r>
<
tr
>
<td align="center">2</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
<td align="center">&nbsp</td>
</tr>
</table>
</body>
</html>
FORMS:
 Form is a typical layout on the web page by which a user can interact
with the web page.
 Typical component of forms are text, text area, checkboxes, radio
buttons and push buttons.
 HTML allows us to place these form components on the web page and
send the desired information to the destination server.
 All these form contents appear in the <form> tag. The form has an
attribute action which gets executed when user clicks a button on the
form.
Various attributes of form are –
Attribute Description
Action It specifies the url where the form should be submitted.
Method It specifies the HTTP methods such as GET, POST
Name This attribute denotes the name of the form.
target It specifies the target of the address in the action attribute.

Let us learn various form components with the help of simple HTML
documents.

Text:
 Text is typically required to place one line text. For example if you
want to enter some name then it is always preferred to have Text field
on the form.
 The text field can be set using
<input type="text" size=”30” name =”username” value=" ">
 The input type is text and the value of this text field is “ ” That means
the blank text field is displayed initially and we can enter the text of
our choice into it. There is size parameter which allows us to enter
some size of the text field.
Some other parameters or attributes can be
 maxlength that allows us to enter the text of some maximum length.
 name indicates name of the text field.
 align denotes the alignment of the text in the text field. The alignment
can be left, right, bottom and top.
Example:
<html xmlns=https://www.w3.org/1999/xhtml>
<head>
<title>My Page</title>
</head>
<body>
<form>
<b>Input String:</b><input type=”text” size=”25” value=” “>
</form>
</body></html>
Ex: Password type
<form name=”form1”>
Password:<input type=”password”/>
</form>
Text Area
Text field is a form component which allows us to enter single line
text, what if we want to have multiple line text? Then you must use
textarea component.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<form>
Enter the Desired text here
<textarea cols="40" rows="5" name="myname">
</textarea>
</form>
</body>
</html>

Various parameters that can be set for the text area can be
 row denotes total number of rows in the text area.
 col specifies total number of columns in the text area.
 name denotes the name of the text area which can be utilised for
handling that component for some specific purpose.
 wrap can be virtual or physical. If the wrap is virtual then the line
breaks get disappeared when the text is actually submitted to the
server. But if the wrap is assigned to the physical then the line breaks
(if any) appear as it is in the text.
Checkbox
It is the simplest component which is used particularly when we want to
make some selection from several options.
For having the checkbox we have to specify the input type as checkbox. For
example

<input type="checkbox" name="option1" value="mango"


checked="checked">Mango<br/>
If we want to get the checkbox displayed as checked then set
checked="checked"

Ex:
<!DOCTYPE html>
<html>
<head>
<title>My Form with Check box</title>
</head>
<body>
<form name ="checkboxForm">
<div align="center"><br>
Select the fruit(s) of your choice<br/>
<input type="checkbox" name="option1" value="mango"
checked="checked">Mango<br/>
<input type="checkbox" name="option2" value="apple">Apple<br/>
<input type="checkbox" name="option3" value="guava">Guava<br/>
</div>
</form>
</body>
</html>

Radio Button

 This form component is also use to indicate the selection from several
choices.
 Using input type=“radio” we can place radio button on the web page.
 This component allows us to make only one selection at a time.
 We can create a group of some radio button component.
 Following HTML document displays the radio buttons for two different
groups.

Ex:
<!DOCTYPE html>
<html >
<head>
<title>My Form with radio buttons Page</title>
</head>
<body>
<form name="myform">
<div align="left"><br>
<b>Select Fruit which you like the most</b><br/>
<input type="radio" name="group1" value="Mango">Mango<br/>
<input type="radio" name="group1" value="Apple" checked> Apple<br/>
<input type="radio" name="group1" value="Grapes"> Grapes
<br/><br/><br/>
<b>Select Flower which you like the most</b><br/>
<input type="radio" name="group2" value="Rose"> Rose<br/>
<input type="radio" name="group2" value="Lotus">Lotus<br/>
<input type="radio" name="group2" value="Jasmine"
checked>Jasmine<br/>
</div>
</form>
</body>
</html>

Button
We can create the button using <input type =”button”> tag.
There are two types of buttons that can be created in HTML. One is called
submit button and the another one is reset button.
Various parameters of submit button are
1) name denotes the name of the submit button.
2) value is for writing some text on the text on the button.
3) align specifies alignment of the button.

Ex:
<!DOCTYPE html>
<html >
<head>
<title> My Page </title>
</head>
<body>
<form name="myform" action="http://www.localhost.com/cgi-
bin/hello.cgi" method="POST">
<div align="center">
<br/><br/>
<input type="text" size="35" value=" ">
<br><input type="submit" value="Send">
<input type="reset" value="Reset"><br>
</div>
</form>
</body>
</html>

Menus
 HTML allows us to have pop down menu on the web page so that the
desired selection can be made.
 The parameter select is for the menu component and option
parameter is for setting the values to the options of drop down menu.
 We can make some specific option selected by selected value = .
 In the following HTML document we have created one drop down
menu in which various fruits are enlisted. By default “Banana” is set as
selected.

Ex:
<!DOCTYPE html>
<html >
<head>
<title> My Page </title>
</head>
<body>
<form name="myform">
<div align="center">
<select name="My_Menu">
<option value="Mango">Mango</option>
<option value="Strawberry">Strawberry</option>
<option selected value="Banana">Banana </option>
<option value="Apple">Apple</option>
</select>
</div>
</form>
</body>
</html>

Ex1:
<form action="mailto:[email protected]">
Name: <input name="Name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br>
<center><input type="submit"></center>
</form>
Ex2:
<input> input field
Example 1:
<form method=post action="/cgibin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Example 2:

<form method=post action="/cgibin/example.cgi">


<input type="text" style="color: #ffffff; font-family: Verdana; font-weight:
bold; fontsize: 12px; background-color: #72a4d2;" size="10"
maxlength="30">
<input type="Submit" value="Submit">
</form>

Example 3:

<form method=post action="/cgibin/example.cgi">


<table border="0" cellspacing="0" cellpadding="2">
<tr>
<td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td>
<td bgcolor="#8463ff" valign="Middle"> <input type="image"
name="submit" src="yourimage.gif"></td>
</tr> </table>
</form>
Example 4:

<form method=post action="/cgibin/example.cgi">


Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20
maxlength=100></textarea><br>
<input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>
Example 5:

<form method=post action="/cgibin/example.cgi">


<center>
Select an option:
<select>
<option >option 1</option>
<option selected>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit" value="Submit">
</center>
</form>

Example 6:
<form method=post action="/cgibin/example.cgi">
Select an option: <br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3
<br> <br>
Select an option: <br>
<input type="checkbox" name="selection">
Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>

Ex3:
<marque bgcolor=”#cccccc” loop=”-1” scrollamount=”2”
width=”100%”>Example of Marque tag</marquee>

Ex4:
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>

Frames

HTML frames allow us to present documents in multiple views.


Using multiple views we can keep certain information visible and at the
same time other views are scrolled or replaced.
For example, within the same window, one frame can display a company
information, a second frame can be a navigation menu and a third frame
may display selected document that can be scrolled through or replaced
by navigating in the second frame.
Various frames can be set in one browser window .
To set the frames in the browser window we use frame set.
For example -
<frameset cols="150,*">
Frame 2

Frame1

Frame 3

Fig. 2.9.1 Frames


will allow us to divide the window into two columns (i.e. in two vertical
frames). One frame occupying the size of 150 pixels and the other
occupies the remaining portion of the window. Here * means any number
of pixels.
Similarly
<frameset rows="*,120">
will divide the window into two rows (i.e. in two horizontal frames). The
second part of horizontal frame will be of 120 pixels and upper horizontal
frame will occupy remaining portion of the window.
Similarly we can also specify the frameset in percentage form. For
example
<frameset rows="30%,70%">
Using frameset we can divide the rows and columns in any number of
frames. For example
<frameset rows = “20%,30%,50%” cols = “30%,*”>
This will create a frames in the browser’s window as follows –

Attribute Value Purpose

Frameborder 0 or 1 Value 1 specifies that


the frame is
displayed with
border and 0
indicates that there is
no border.

Name Some name It specifies name of


the frame

Nosize Due to this attribute


we cannot resize the
particular frame.

Scrolling Yes, no or auto It specifies whether


or not to display the
scrollbar along with
the frame.

src URL It specifies the name


of the Document to
be displayed within
the frame.

FrameSet.html
<!DOCTYPE html>
<html>
<frameset cols="25%,*,50%">
<frame src="frame1.html">
<frame src="frame2.html">
<frame src="frame3.html">
</frameset>
</html>

Step 2 : Create frame1.html, frame2.html and frame3.html files as follows


–
Frame1.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 1 </h1>
</body>
</html>
Frame2.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 2 </h1>
</body>
</html>
Frame3.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 3 </h1>
</body>
</html>

Frames with Scrollbars


<!DOCTYPE html>
<html>
<frameset cols="25%,*,50%">
<frame src="frame1.html" scrolling=no>
<frame src="frame2.html" scrolling=auto>
<frame src="frame3.html">
</frameset>
</html>

Create XHTML document that has two frames. The left frame displays the
contents.html and the right frame displays the cars.html where second
frame is the target of link from the first frame.
[Note : Contents.html is a list of links for the cars description]
Step 1 : We will create the basic html file that contains the left and right
frames. The HTML
document is as follows :
CarDemo.html
<!DOCTYPE html >
<html>
<head>
<title>My Frames Page</title>
</head>
<frameset cols="50%,50%">
<frame src="contents.html" name="Left_Vertical" noresize />
<frame src="Description.html" name="Right_Vertical" scrolling=no/>
</frameset>
</html>
Step 2 : Following is a HTML document that displays the contents that are
loaded at first.
The left frame HTML document is as follows –
contents.html
<!DOCTYPE html >
<html >
<head>
<title>My Frames Page</title>
</head>
<body>
<h3>
<a href="Innova.html" target="Right_Vertical">Toyota Innova</a>
<h3/>
<h3>
<a href="Scorpio.html" target="Right_Vertical">Mahindra Scorpio</a>
<h3/>
<h3>
<a href="Etios.html" target="Right_Vertical">Toyota Etios Liva</a>
<h3/>
</body>
</html>
The right frame HTML document is as follows-

Description.html
<!DOCTYPE html >
<html >
<head>
<title>My Frames Page</title>
</head>
<body>
<center>
<h3> WELCOME <h3/>
This page displays the details of a car you have chosen.
</center>
</body>
</html>
Step 3 : Following are the three html documents each containing the
description of each car.
Innova.html
<!DOCTYPE html >
<html>
<head>
<title>My Frames Page</title>
</head>
<body>
<h2> TOYOTA INNOVA</h2>
<ul type="disc">
<li>Price: Rs.9,35,731-Rs.14,82,852</li>
<li><td>Mileage: </td><td>10Kmpl(City) and 13 Kmpl(hwy)</li>
</ul>
</body>
</html>
Scorpio.html
<!DOCTYPE html>
<html >
<head>
<title>My Frames Page</title>
</head>
<body>
<h2> MAHINDRA SCORPIO</h2>
<ul type="disc">
<li>Price: </td><td>Rs.7,49,583-Rs.12,85,479</li>
<li>Mileage: </td><td>12Kmpl(City) and 16 Kmpl(hwy)</li>
</ul>
</body>
</html>

Etios.html
<!DOCTYPE html>
<html >
<head>
<title>My Frames Page</title>
</head>
<body>
<h2> TOYOTA ETIOS LIVA</h2>
<ul type="disc">
<li> Price: </td><td>Rs.4,46,276-Rs.6,86,426</li>
<li> Mileage: </td><td>17Kmpl(City) and 19 Kmpl(hwy)</li>
</ul>
</body>
</html>
Step 4 : Open the suitable web browser and invoke the
CarDemo.html(created in Step 1), the
output will be as follows –
Create a HTML document for a company home page and explain.
Sol. : For creation of this web page the frames are used.
Step 1 : The main page is created as follows -
Main.html
<?xml version = "1.0" encoding ="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<frameset rows="20%,80%">
<frame src="logo.html">
<frameset cols="30%,70%">
<frame src="menu.html">
<frame src="contents.html">
</frameset>
</frameset>
</html>
AU : May-13, Marks 16
TM
Technical Publications
- An up thrust for knowledge
Web Technology
2 - 50
HTML
Step 2 : In the main page a layout of the company home page is created.
Various html files
that are called in this HTML document are as given below -
Menu.html
<html>
<head><title>LOGO</title></head>
<body bgcolor="aqua">
<h3><a href="about.html"> About us<a/></h3>
<h3><a href="download1.html"> Free Downloads<a/></h3>
<h3><a href="download2.html"> Download Catalogue<a/></h3>
<h3><a href="download3.html">Download Orderform<a/></h3>
<h3><a href="catalogues.html">Catalogues<a/></h3>
<h3><a href="distributors.html">Distributors<a/></h3>
<h3><a href="Contacts.html">Contact Us<a/></h3>
<h3><a href="feedback.html">Feedback<a/></h3>
</body>
</html>
Logo.html
<html>
<head><title>LOGO</title></head>
<body bgcolor="magenta">
<h1><img src="books.jpg"/> Technical Publications</h1>
</body>
</html>
Contents.html
<html>
<head><title>LOGO</title></head>
<body bgcolor="khaki">
<center>
<h2>BOOKS</h2>
</center>
<p>TECHNICAL PUBLICATIONS is known for commitment to quality and
innovation. We are
Leaders in our chosen scholarly and educational markets, serving the book
Industry & Academic
Institutions.
</p>
<p>We have been in the industry for the last 18 years and are known for
the quality and scholarly
publications in Engineering books. We publish more than 1000 titles of
text books, for various
Universities across the India.
</p>
<p>We are specialized in Engineering text books and have been publishing
titles for various
Engineering branches such as Electrical, Electronics, Computer Science,
Information
Technology,Mechanical etc. and other management books.
</p>
</body>
</html>
Step 3 : Open the suitable web browser and type the address for
main.html. The output will
be as follows -

UTF-8 Mathematical Operators


Range: Decimal 8704-8959. Hex 2200-22FF.
If you want any of these characters displayed in HTML, you can use the
HTML entity found in the table below.

If the character does not have an HTML entity, you can use the decimal
(dec) or hexadecimal (hex) reference.

To print summation:

<p>I will display &sum;</p>


<p>I will display &#8721;</p>
<p>I will display &#x2211;</p>

Char Dec Hex Entity Name


∀ 8704 2200 &forall; FOR ALL
∁ 8705 2201 COMPLEMENT
∂ 8706 2202 &part; PARTIAL DIFFERENTIAL
∃ 8707 2203 &exist; THERE EXISTS
∄ 8708 2204 THERE DOES NOT EXIST
∅ 8709 2205 &empty; EMPTY SET
∆ 8710 2206 INCREMENT
∇ 8711 2207 &nabla; NABLA
∈ 8712 2208 &isin; ELEMENT OF
∉ 8713 2209 &notin; NOT AN ELEMENT OF
∊ 8714 220A SMALL ELEMENT OF
∋ 8715 220B &ni; CONTAINS AS MEMBER
∌ 8716 220C DOES NOT CONTAIN AS MEMBER
∍ 8717 220D SMALL CONTAINS AS MEMBER
∎ 8718 220E END OF PROOF
∏ 8719 220F &prod; N-ARY PRODUCT
∐ 8720 2210 N-ARY COPRODUCT
∑ 8721 2211 &sum; N-ARY SUMMATION
− 8722 2212 &minus; MINUS SIGN
∓ 8723 2213 MINUS-OR-PLUS SIGN
∔ 8724 2214 DOT PLUS
∕ 8725 2215 DIVISION SLASH
∖ 8726 2216 SET MINUS
∗ 8727 2217 &lowast; ASTERISK OPERATOR
∘ 8728 2218 RING OPERATOR
· 8729 2219 BULLET OPERATOR
√ 8730 221A &radic; SQUARE ROOT
∛ 8731 221B CUBE ROOT
∜ 8732 221C FOURTH ROOT
∝ 8733 221D &prop; PROPORTIONAL TO
∞ 8734 221E &infin; INFINITY
∟ 8735 221F RIGHT ANGLE
∠ 8736 2220 &ang; ANGLE
∡ 8737 2221 MEASURED ANGLE
∢ 8738 2222 SPHERICAL ANGLE
∣ 8739 2223 DIVIDES
∤ 8740 2224 DOES NOT DIVIDE
∥ 8741 2225 PARALLEL TO
∦ 8742 2226 NOT PARALLEL TO
∧ 8743 2227 &and; LOGICAL AND
∨ 8744 2228 &or; LOGICAL OR
∩ 8745 2229 &cap; INTERSECTION
∪ 8746 222A &cup; UNION
∫ 8747 222B &int; INTEGRAL
∬ 8748 222C DOUBLE INTEGRAL
∭ 8749 222D TRIPLE INTEGRAL
∮ 8750 222E CONTOUR INTEGRAL
∯ 8751 222F SURFACE INTEGRAL
∰ 8752 2230 VOLUME INTEGRAL
∱ 8753 2231 CLOCKWISE INTEGRAL
∲ 8754 2232 CLOCKWISE CONTOUR INTEGRAL
∳ 8755 2233 ANTICLOCKWISE CONTOUR INTEGRAL
∴ 8756 2234 &there4; THEREFORE
∵ 8757 2235 BECAUSE
∶ 8758 2236 RATIO
∷ 8759 2237 PROPORTION
∸ 8760 2238 DOT MINUS
∹ 8761 2239 EXCESS
∺ 8762 223A GEOMETRIC PROPORTION
∻ 8763 223B HOMOTHETIC
∼ 8764 223C &sim; TILDE OPERATOR
∽ 8765 223D REVERSED TILDE
∾ 8766 223E INVERTED LAZY S
∿ 8767 223F SINE WAVE
≀ 8768 2240 WREATH PRODUCT
≁ 8769 2241 NOT TILDE
≂ 8770 2242 MINUS TILDE
≃ 8771 2243 ASYMPTOTICALLY EQUAL TO
≄ 8772 2244 NOT ASYMPTOTICALLY EQUAL TO
≅ 8773 2245 &cong; APPROXIMATELY EQUAL TO
≆ 8774 2246 APPROXIMATELY BUT NOT ACTUALLY
EQUAL TO
≇ 8775 2247 NEITHER APPROXIMATELY NOR ACTUALLY
EQUAL TO
≈ 8776 2248 &asymp; ALMOST EQUAL TO
≉ 8777 2249 NOT ALMOST EQUAL TO
≊ 8778 224A ALMOST EQUAL OR EQUAL TO
≋
8779 224B TRIPLE TILDE
≌ 8780 224C ALL EQUAL TO
≍ 8781 224D EQUIVALENT TO
≎ 8782 224E GEOMETRICALLY EQUIVALENT TO
≏ 8783 224F DIFFERENCE BETWEEN
≐ 8784 2250 APPROACHES THE LIMIT
≑ 8785 2251 GEOMETRICALLY EQUAL TO
≒ 8786 2252 APPROXIMATELY EQUAL TO OR THE IMAGE
OF
≓ 8787 2253 IMAGE OF OR APPROXIMATELY EQUAL TO
≔ 8788 2254 COLON EQUALS
≕ 8789 2255 EQUALS COLON
≖ 8790 2256 RING IN EQUAL TO
≗ 8791 2257 RING EQUAL TO
≘ 8792 2258 CORRESPONDS TO
≙ 8793 2259 ESTIMATES
≚ 8794 225A EQUIANGULAR TO
≛ 8795 225B STAR EQUALS
≜ 8796 225C DELTA EQUAL TO
≝ 8797 225D EQUAL TO BY DEFINITION
≞ 8798 225E MEASURED BY
≟ 8799 225F QUESTIONED EQUAL TO
≠ 8800 2260 &ne; NOT EQUAL TO
≡ 8801 2261 &equiv; IDENTICAL TO
≢ 8802 2262 NOT IDENTICAL TO

≣ 8803 2263 STRICTLY EQUIVALENT TO


≤ 8804 2264 &le; LESS-THAN OR EQUAL TO
≥ 8805 2265 &ge; GREATER-THAN OR EQUAL TO
≦ 8806 2266 LESS-THAN OVER EQUAL TO
≧ 8807 2267 GREATER-THAN OVER EQUAL TO
≨ 8808 2268 LESS-THAN BUT NOT EQUAL TO
≩ 8809 2269 GREATER-THAN BUT NOT EQUAL TO
≪ 8810 226A MUCH LESS-THAN
≫ 8811 226B MUCH GREATER-THAN
≬ 8812 226C BETWEEN
≭ 8813 226D NOT EQUIVALENT TO
≮ 8814 226E NOT LESS-THAN
≯ 8815 226F NOT GREATER-THAN
≰ 8816 2270 NEITHER LESS-THAN NOR EQUAL TO
≱ 8817 2271 NEITHER GREATER-THAN NOR EQUAL TO
≲ 8818 2272 LESS-THAN OR EQUIVALENT TO
≳ 8819 2273 GREATER-THAN OR EQUIVALENT TO
≴ 8820 2274 NEITHER LESS-THAN NOR EQUIVALENT TO
≵ 8821 2275 NEITHER GREATER-THAN NOR EQUIVALENT
TO
≶ 8822 2276 LESS-THAN OR GREATER-THAN
≷ 8823 2277 GREATER-THAN OR LESS-THAN
≸ 8824 2278 NEITHER LESS-THAN NOR GREATER-THAN
≹ 8825 2279 NEITHER GREATER-THAN NOR LESS-THAN

≺ 8826 227A PRECEDES


≻ 8827 227B SUCCEEDS
≼ 8828 227C PRECEDES OR EQUAL TO
≽ 8829 227D SUCCEEDS OR EQUAL TO
≾ 8830 227E PRECEDES OR EQUIVALENT TO
≿ 8831 227F SUCCEEDS OR EQUIVALENT TO
⊀ 8832 2280 DOES NOT PRECEDE
⊁ 8833 2281 DOES NOT SUCCEED
⊂ 8834 2282 &sub; SUBSET OF
⊃ 8835 2283 &sup; SUPERSET OF
⊄ 8836 2284 &nsub; NOT A SUBSET OF
⊅ 8837 2285 NOT A SUPERSET OF
⊆ 8838 2286 &sube; SUBSET OF OR EQUAL TO
⊇ 8839 2287 &supe; SUPERSET OF OR EQUAL TO
⊈ 8840 2288 NEITHER A SUBSET OF NOR EQUAL TO
⊉ 8841 2289 NEITHER A SUPERSET OF NOR EQUAL TO
⊊ 8842 228A SUBSET OF WITH NOT EQUAL TO
⊋ 8843 228B SUPERSET OF WITH NOT EQUAL TO
⊌ 8844 228C MULTISET
⊍ 8845 228D MULTISET MULTIPLICATION
⊎ 8846 228E MULTISET UNION
⊏ 8847 228F SQUARE IMAGE OF
⊐ 8848 2290 SQUARE ORIGINAL OF
⊑ 8849 2291 SQUARE IMAGE OF OR EQUAL TO
⊒ 8850 2292 SQUARE ORIGINAL OF OR EQUAL TO
⊓ 8851 2293 SQUARE CAP
⊔ 8852 2294 SQUARE CUP
⊕ 8853 2295 &oplus; CIRCLED PLUS
⊖ 8854 2296 CIRCLED MINUS
⊗ 8855 2297 &otimes; CIRCLED TIMES
⊘ 8856 2298 CIRCLED DIVISION SLASH
⊙ 8857 2299 CIRCLED DOT OPERATOR
⊚ 8858 229A CIRCLED RING OPERATOR
⊛ 8859 229B CIRCLED ASTERISK OPERATOR
⊜ 8860 229C CIRCLED EQUALS
⊝ 8861 229D CIRCLED DASH
⊞ 8862 229E SQUARED PLUS
⊟ 8863 229F SQUARED MINUS
⊠ 8864 22A0 SQUARED TIMES
⊡ 8865 22A1 SQUARED DOT OPERATOR
⊢ 8866 22A2 RIGHT TACK
⊣ 8867 22A3 LEFT TACK
⊤ 8868 22A4 DOWN TACK
⊥ 8869 22A5 &perp; UP TACK
⊦ 8870 22A6 ASSERTION
⊧ 8871 22A7 MODELS
⊨ 8872 22A8 TRUE
⊩ 8873 22A9 FORCES
⊪ 8874 22AA TRIPLE VERTICAL BAR RIGHT TURNSTILE
⊫ 8875 22AB DOUBLE VERTICAL BAR DOUBLE RIGHT
TURNSTILE
⊬ 8876 22AC DOES NOT PROVE
⊭ 8877 22AD NOT TRUE
⊮ 8878 22AE DOES NOT FORCE
⊯ 8879 22AF NEGATED DOUBLE VERTICAL BAR DOUBLE
RIGHT TURNSTILE
⊰ 8880 22B0 PRECEDES UNDER RELATION
⊱ 8881 22B1 SUCCEEDS UNDER RELATION
⊲ 8882 22B2 NORMAL SUBGROUP OF
⊳ 8883 22B3 CONTAINS AS NORMAL SUBGROUP
⊴ 8884 22B4 NORMAL SUBGROUP OF OR EQUAL TO
⊵ 8885 22B5 CONTAINS AS NORMAL SUBGROUP OR
EQUAL TO
⊶ 8886 22B6 ORIGINAL OF
⊷ 8887 22B7 IMAGE OF
⊸ 8888 22B8 MULTIMAP
⊹ 8889 22B9 HERMITIAN CONJUGATE MATRIX
⊺ 8890 22BA INTERCALATE
⊻ 8891 22BB XOR
⊼ 8892 22BC NAND
⊽ 8893 22BD NOR
⊾ 8894 22BE RIGHT ANGLE WITH ARC
⊿ 8895 22BF RIGHT TRIANGLE
⋀ 8896 22C0 N-ARY LOGICAL AND
⋁ 8897 22C1 N-ARY LOGICAL OR
⋂ 8898 22C2 N-ARY INTERSECTION
⋃ 8899 22C3 N-ARY UNION
⋄ 8900 22C4 DIAMOND OPERATOR
⋅ 8901 22C5 &sdot; DOT OPERATOR
⋆ 8902 22C6 STAR OPERATOR
⋇ 8903 22C7 DIVISION TIMES
⋈ 8904 22C8 BOWTIE
⋉ 8905 22C9 LEFT NORMAL FACTOR SEMIDIRECT
PRODUCT
⋊ 8906 22CA RIGHT NORMAL FACTOR SEMIDIRECT
PRODUCT
⋋ 8907 22CB LEFT SEMIDIRECT PRODUCT
⋌ 8908 22CC RIGHT SEMIDIRECT PRODUCT
⋍ 8909 22CD REVERSED TILDE EQUALS
⋎ 8910 22CE CURLY LOGICAL OR
⋏ 8911 22CF CURLY LOGICAL AND
⋐ 8912 22D0 DOUBLE SUBSET
⋑ 8913 22D1 DOUBLE SUPERSET
⋒ 8914 22D2 DOUBLE INTERSECTION
⋓ 8915 22D3 DOUBLE UNION
⋔ 8916 22D4 PITCHFORK
⋕
8917 22D5 EQUAL AND PARALLEL TO
⋖ 8918 22D6 LESS-THAN WITH DOT
⋗ 8919 22D7 GREATER-THAN WITH DOT
⋘ 8920 22D8 VERY MUCH LESS-THAN
⋙ 8921 22D9 VERY MUCH GREATER-THAN
⋚ 8922 22DA LESS-THAN EQUAL TO OR GREATER-THAN
⋛ 8923 22DB GREATER-THAN EQUAL TO OR LESS-THAN
⋜ 8924 22DC EQUAL TO OR LESS-THAN
⋝ 8925 22DD EQUAL TO OR GREATER-THAN
⋞ 8926 22DE EQUAL TO OR PRECEDES
⋟ 8927 22DF EQUAL TO OR SUCCEEDS
⋠ 8928 22E0 DOES NOT PRECEDE OR EQUAL
⋡ 8929 22E1 DOES NOT SUCCEED OR EQUAL
⋢ 8930 22E2 NOT SQUARE IMAGE OF OR EQUAL TO
⋣ 8931 22E3 NOT SQUARE ORIGINAL OF OR EQUAL TO
⋤ 8932 22E4 SQUARE IMAGE OF OR NOT EQUAL TO
⋥ 8933 22E5 SQUARE ORIGINAL OF OR NOT EQUAL TO
⋦ 8934 22E6 LESS-THAN BUT NOT EQUIVALENT TO
⋧ 8935 22E7 GREATER-THAN BUT NOT EQUIVALENT TO
⋨ 8936 22E8 PRECEDES BUT NOT EQUIVALENT TO
⋩ 8937 22E9 SUCCEEDS BUT NOT EQUIVALENT TO
⋪ 8938 22EA NOT NORMAL SUBGROUP OF
⋫ 8939 22EB DOES NOT CONTAIN AS NORMAL
SUBGROUP
⋬ 8940 22EC NOT NORMAL SUBGROUP OF OR EQUAL TO

⋭ 8941 22ED DOES NOT CONTAIN AS NORMAL


SUBGROUP OR EQUAL
⋮ 8942 22EE VERTICAL ELLIPSIS
⋯ 8943 22EF MIDLINE HORIZONTAL ELLIPSIS
⋰ 8944 22F0 UP RIGHT DIAGONAL ELLIPSIS
⋱ 8945 22F1 DOWN RIGHT DIAGONAL ELLIPSIS
8946 22F2 ELEMENT OF WITH LONG HORIZONTAL
STROKE
8947 22F3 ELEMENT OF WITH VERTICAL BAR AT END
OF HORIZONTAL STROKE
8948 22F4 SMALL ELEMENT OF WITH VERTICAL BAR AT
END OF HORIZONTAL STROKE
8949 22F5 ELEMENT OF WITH DOT ABOVE
8950 22F6 ELEMENT OF WITH OVERBAR
8951 22F7 SMALL ELEMENT OF WITH OVERBAR
8952 22F8 ELEMENT OF WITH UNDERBAR
8953 22F9 ELEMENT OF WITH TWO HORIZONTAL
STROKES
8954 22FA CONTAINS WITH LONG HORIZONTAL
STROKE
8955 22FB CONTAINS WITH VERTICAL BAR AT END OF
HORIZONTAL STROKE
8956 22FC SMALL CONTAINS WITH VERTICAL BAR AT
END OF HORIZONTAL STROKE
8957 22FD CONTAINS WITH OVERBAR
8958 22FE SMALL CONTAINS WITH OVERBAR
8959 22FF Z NOTATION BAG MEMBERSHIP

UTF-8 Greek and Coptic


Range: Decimal 880-1023. Hex 0370-03FF.
If you want any of these characters displayed in HTML, you can use the
HTML entity found in the table below.

If the character does not have an HTML entity, you can use the decimal
(dec) or hexadecimal (hex) reference.

To print delta

<p>I will display &Delta;</p>


<p>I will display &#916;</p>
<p>I will display &#x0394;</p>

Char Dec Hex Entity Name

Ͱ 880 0370 GREEK CAPITAL LETTER HETA

ͱ 881 0371 GREEK SMALL LETTER HETA

Ͳ 882 0372 GREEK CAPITAL LETTER ARCHAIC SAMPI

ͳ 883 0373 GREEK SMALL LETTER ARCHAIC SAMPI

ʹ 884 0374 GREEK NUMERAL SIGN


͵ 885 0375 GREEK LOWER NUMERAL SIGN

Ͷ 886 0376 GREEK CAPITAL LETTER PAMPHYLIAN DIGAMMA

ͷ 887 0377 GREEK SMALL LETTER PAMPHYLIAN DIGAMMA

ͺ 890 037A GREEK YPOGEGRAMMENI

ͻ 891 037B GREEK SMALL REVERSED LUNATE SIGMA SYMBOL

ͼ 892 037C GREEK SMALL DOTTED LUNATE SIGMA SYMBOL

ͽ 893 037D GREEK SMALL REVERSED DOTTED LUNATE SIGMA SYMBOL

; 894 037E GREEK QUESTION MARK

΄ 900 0384 GREEK TONOS

΅ 901 0385 GREEK DIALYTIKA TONOS

Ά 902 0386 GREEK CAPITAL LETTER ALPHA WITH TONOS

· 903 0387 GREEK ANO TELEIA

Έ 904 0388 GREEK CAPITAL LETTER EPSILON WITH TONOS

Ή 905 0389 GREEK CAPITAL LETTER ETA WITH TONOS

Ί 906 038A GREEK CAPITAL LETTER IOTA WITH TONOS


Ό 908 038C GREEK CAPITAL LETTER OMICRON WITH TONOS

Ύ 910 038E GREEK CAPITAL LETTER UPSILON WITH TONOS

Ώ 911 038F GREEK CAPITAL LETTER OMEGA WITH TONOS

ΐ 912 0390 GREEK SMALL LETTER IOTA WITH DIALYTIKA AND TONOS

Α 913 0391 &Alpha; GREEK CAPITAL LETTER ALPHA

Β 914 0392 &Beta; GREEK CAPITAL LETTER BETA

Γ 915 0393 &Gamma; GREEK CAPITAL LETTER GAMMA

Δ 916 0394 &Delta; GREEK CAPITAL LETTER DELTA

Ε 917 0395 &Epsilon; GREEK CAPITAL LETTER EPSILON

Ζ 918 0396 &Zeta; GREEK CAPITAL LETTER ZETA

Η 919 0397 &Eta; GREEK CAPITAL LETTER ETA

Θ 920 0398 &Theta; GREEK CAPITAL LETTER THETA

Ι 921 0399 &Iota; GREEK CAPITAL LETTER IOTA

Κ 922 039A &Kappa; GREEK CAPITAL LETTER KAPPA

Λ 923 039B &Lambda; GREEK CAPITAL LETTER LAMBDA

Μ 924 039C &Mu; GREEK CAPITAL LETTER MU


Ν 925 039D &Nu; GREEK CAPITAL LETTER NU

Ξ 926 039E &Xi; GREEK CAPITAL LETTER XI

Ο 927 039F &Omicron; GREEK CAPITAL LETTER OMICRON

Π 928 03A0 &Pi; GREEK CAPITAL LETTER PI

Ρ 929 03A1 &Rho; GREEK CAPITAL LETTER RHO

Σ 931 03A3 &Sigma; GREEK CAPITAL LETTER SIGMA

Τ 932 03A4 &Tau; GREEK CAPITAL LETTER TAU

Υ 933 03A5 &Upsilon; GREEK CAPITAL LETTER UPSILON

Φ 934 03A6 &Phi; GREEK CAPITAL LETTER PHI

Χ 935 03A7 &Chi; GREEK CAPITAL LETTER CHI

Ψ 936 03A8 &Psi; GREEK CAPITAL LETTER PSI

Ω 937 03A9 &Omega; GREEK CAPITAL LETTER OMEGA

Ϊ 938 03AA GREEK CAPITAL LETTER IOTA WITH DIALYTIKA

Ϋ 939 03AB GREEK CAPITAL LETTER UPSILON WITH DIALYTIKA

ά 940 03AC GREEK SMALL LETTER ALPHA WITH TONOS


έ 941 03AD GREEK SMALL LETTER EPSILON WITH TONOS

ή 942 03AE GREEK SMALL LETTER ETA WITH TONOS

ί 943 03AF GREEK SMALL LETTER IOTA WITH TONOS

ΰ 944 03B0 GREEK SMALL LETTER UPSILON WITH DIALYTIKA AND TONOS

α 945 03B1 &alpha; GREEK SMALL LETTER ALPHA

β 946 03B2 &beta; GREEK SMALL LETTER BETA

γ 947 03B3 &gamma; GREEK SMALL LETTER GAMMA

δ 948 03B4 &delta; GREEK SMALL LETTER DELTA

ε 949 03B5 &epsilon; GREEK SMALL LETTER EPSILON

ζ 950 03B6 &zeta; GREEK SMALL LETTER ZETA

η 951 03B7 &eta; GREEK SMALL LETTER ETA

θ 952 03B8 &theta; GREEK SMALL LETTER THETA

ι 953 03B9 &iota; GREEK SMALL LETTER IOTA

κ 954 03BA &kappa; GREEK SMALL LETTER KAPPA

λ 955 03BB &lambda; GREEK SMALL LETTER LAMBDA

μ 956 03BC &mu; GREEK SMALL LETTER MU


ν 957 03BD &nu; GREEK SMALL LETTER NU

ξ 958 03BE &xi; GREEK SMALL LETTER XI

ο 959 03BF &omicron; GREEK SMALL LETTER OMICRON

π 960 03C0 &pi; GREEK SMALL LETTER PI

ρ 961 03C1 &rho; GREEK SMALL LETTER RHO

ς 962 03C2 &sigmaf; GREEK SMALL LETTER FINAL SIGMA

σ 963 03C3 &sigma; GREEK SMALL LETTER SIGMA

τ 964 03C4 &tau; GREEK SMALL LETTER TAU

υ 965 03C5 &upsilon; GREEK SMALL LETTER UPSILON

φ 966 03C6 &phi; GREEK SMALL LETTER PHI

χ 967 03C7 &chi; GREEK SMALL LETTER CHI

ψ 968 03C8 &psi; GREEK SMALL LETTER PSI

ω 969 03C9 &omega; GREEK SMALL LETTER OMEGA

ϊ 970 03CA GREEK SMALL LETTER IOTA WITH DIALYTIKA

ϋ 971 03CB GREEK SMALL LETTER UPSILON WITH DIALYTIKA


ό 972 03CC GREEK SMALL LETTER OMICRON WITH TONOS

ύ 973 03CD GREEK SMALL LETTER UPSILON WITH TONOS

ώ 974 03CE GREEK SMALL LETTER OMEGA WITH TONOS

Ϗ 975 03CF GREEK CAPITAL KAI SYMBOL

ϐ 976 03D0 GREEK BETA SYMBOL

ϑ 977 03D1 &thetasym; GREEK THETA SYMBOL

ϒ 978 03D2 &upsih; GREEK UPSILON WITH HOOK SYMBOL

ϓ 979 03D3 GREEK UPSILON WITH ACUTE AND HOOK SYMBOL

ϔ 980 03D4 GREEK UPSILON WITH DIAERESIS AND HOOK SYMBOL

ϕ 981 03D5 &straightphi; GREEK PHI SYMBOL

ϖ 982 03D6 &piv; GREEK PI SYMBOL

ϗ 983 03D7 GREEK KAI SYMBOL

Ϙ 984 03D8 GREEK LETTER ARCHAIC KOPPA

ϙ 985 03D9 GREEK SMALL LETTER ARCHAIC KOPPA

Ϛ 986 03DA GREEK LETTER STIGMA

ϛ 987 03DB GREEK SMALL LETTER STIGMA


Ϝ 988 03DC &Gammad; GREEK LETTER DIGAMMA

ϝ 989 03DD &gammad; GREEK SMALL LETTER DIGAMMA

Ϟ 990 03DE GREEK LETTER KOPPA

ϟ 991 03DF GREEK SMALL LETTER KOPPA

Ϡ 992 03E0 GREEK LETTER SAMPI

ϡ 993 03E1 GREEK SMALL LETTER SAMPI

Ϣ 994 03E2 COPTIC CAPITAL LETTER SHEI

ϣ 995 03E3 COPTIC SMALL LETTER SHEI

Ϥ 996 03E4 COPTIC CAPITAL LETTER FEI

ϥ 997 03E5 COPTIC SMALL LETTER FEI

Ϧ 998 03E6 COPTIC CAPITAL LETTER KHEI

ϧ 999 03E7 COPTIC SMALL LETTER KHEI

Ϩ 1000 03E8 COPTIC CAPITAL LETTER HORI

ϩ 1001 03E9 COPTIC SMALL LETTER HORI

Ϫ 1002 03EA COPTIC CAPITAL LETTER GANGIA


ϫ 1003 03EB COPTIC SMALL LETTER GANGIA

Ϭ 1004 03EC COPTIC CAPITAL LETTER SHIMA

ϭ 1005 03ED COPTIC SMALL LETTER SHIMA

Ϯ 1006 03EE COPTIC CAPITAL LETTER DEI

ϯ 1007 03EF COPTIC SMALL LETTER DEI

ϰ 1008 03F0 &varkappa; GREEK KAPPA SYMBOL

ϱ 1009 03F1 &varrho; GREEK RHO SYMBOL

ϲ 1010 03F2 GREEK LUNATE SIGMA SYMBOL

ϳ 1011 03F3 GREEK LETTER YOT

ϴ 1012 03F4 GREEK CAPITAL THETA SYMBOL

ϵ 1013 03F5 &straightepsilon; GREEK LUNATE EPSILON SYMBOL

϶ 1014 03F6 &backepsilon; GREEK REVERSED LUNATE EPSILON SYMBOL

Ϸ 1015 03F7 GREEK CAPITAL LETTER SHO

ϸ 1016 03F8 GREEK SMALL LETTER SHO

Ϲ 1017 03F9 GREEK CAPITAL LUNATE SIGMA SYMBOL

Ϻ 1018 03FA GREEK CAPITAL LETTER SAN


ϻ 1019 03FB GREEK SMALL LETTER SAN

ϼ 1020 03FC GREEK RHO WITH STROKE SYMBOL

Ͻ 1021 03FD GREEK CAPITAL REVERSED LUNATE SIGMA SYMBOL

Ͼ 1022 03FE GREEK CAPITAL DOTTED LUNATE SIGMA SYMBOL

Ͽ 1023 03FF GREEK CAPITAL REVERSED DOTTED LUNATE SIGMA SYMBOL

HTML Symbols
HTML Symbol Entities
HTML symbols like mathematical operators, arrows, technical symbols and shapes, are not present on
a normal keyboard.

To add these symbols to an HTML page, you can use the HTML entity name.

If no entity name exists, you can use the entity number.

If the character does not have an entity name, you can use a decimal (or hexadecimal) reference.

If you use an HTML entity name or a hexadecimal number, the character will always display correctly.
This is independent of what character set (encoding) your page uses!

Example
<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>

Will display as:


I will display €

I will display €

I will display €
Yourself »

Some Mathematical Symbols Supported by HTML


Char Number Entity Description

∀ &#8704; &forall; for all

∂ &#8706; &part; part

∃ &#8707; &exist; exists

∅ &#8709; &empty; empty

∇ &#8711; &nabla; nabla

∈ &#8712; &isin; isin

∉ &#8713; &notin; notin

∋ &#8715; &ni; ni

∏ &#8719; &prod; prod

∑ &#8721; &sum; sum

Some Greek Letters Supported by HTML


har Number Entity Description

Α &#913; &Alpha; Alpha


Β &#914; &Beta; Beta

Γ &#915; &Gamma; Gamma

Δ &#916; &Delta; Delta

Ε &#917; &Epsilon; Epsilon

Ζ &#918; &Zeta; Zeta

Full Greek Reference

Some Other Entities Supported by HTML


Char Number Entity Description

© &#169; &copy; COPYRIGHT SYMBOL

® &#174; &reg; REGISTERED SIGN

€ &#8364; &euro; EURO SIGN

™ &#8482; &trade; trademark

← &#8592; &larr; LEFTWARDS ARROW

↑ &#8593; &uarr; UPWARDS ARROW

→ &#8594; &rarr; RIGHTWARDS ARROW


↓ &#8595; &darr; DOWNWARDS ARROW

♠ &#9824; &spades; BLACK SPADE SUIT

♣ &#9827; &clubs; BLACK CLUB SUIT

♥ &#9829; &hearts; BLACK HEART SUIT

♦ &#9830; &diams; BLACK DIAMOND SUIT

ASCII Printable Characters


Char Number Description

0 - 31 Control characters (see below)

32 space

! 33 exclamation mark

" 34 quotation mark

# 35 number sign

$ 36 dollar sign

% 37 percent sign

& 38 ampersand
' 39 apostrophe

( 40 left parenthesis

) 41 right parenthesis

* 42 asterisk

+ 43 plus sign

, 44 comma

- 45 hyphen

. 46 period

/ 47 slash

0 48 digit 0

1 49 digit 1

2 50 digit 2

3 51 digit 3

4 52 digit 4

5 53 digit 5
6 54 digit 6

7 55 digit 7

8 56 digit 8

9 57 digit 9

: 58 colon

; 59 semicolon

< 60 less-than

= 61 equals-to

> 62 greater-than

? 63 question mark

@ 64 at sign

A 65 uppercase A

B 66 uppercase B

C 67 uppercase C

D 68 uppercase D
E 69 uppercase E

F 70 uppercase F

G 71 uppercase G

H 72 uppercase H

I 73 uppercase I

J 74 uppercase J

K 75 uppercase K

L 76 uppercase L

M 77 uppercase M

N 78 uppercase N

O 79 uppercase O

P 80 uppercase P

Q 81 uppercase Q

R 82 uppercase R

S 83 uppercase S
T 84 uppercase T

U 85 uppercase U

V 86 uppercase V

W 87 uppercase W

X 88 uppercase X

Y 89 uppercase Y

Z 90 uppercase Z

[ 91 left square bracket

\ 92 backslash

] 93 right square bracket

^ 94 caret

_ 95 underscore

` 96 grave accent

a 97 lowercase a

b 98 lowercase b
c 99 lowercase c

d 100 lowercase d

e 101 lowercase e

f 102 lowercase f

g 103 lowercase g

h 104 lowercase h

i 105 lowercase i

j 106 lowercase j

k 107 lowercase k

l 108 lowercase l

m 109 lowercase m

n 110 lowercase n

o 111 lowercase o

p 112 lowercase p

q 113 lowercase q
r 114 lowercase r

s 115 lowercase s

t 116 lowercase t

u 117 lowercase u

v 118 lowercase v

w 119 lowercase w

x 120 lowercase x

y 121 lowercase y

z 122 lowercase z

{ 123 left curly brace

| 124 vertical bar

} 125 right curly brace

~ 126 tilde

ADVERTISEMENT
ASCII Device Control Characters
The ASCII control characters (range 00-31, plus 127) were designed to control hardware devices.

Control characters (except horizontal tab, line feed, and carriage return) have nothing to do inside an
HTML document.

Char Number Description

NUL 00 null character

SOH 01 start of header

STX 02 start of text

ETX 03 end of text

EOT 04 end of transmission

ENQ 05 enquiry

ACK 06 acknowledge

BEL 07 bell (ring)

BS 08 backspace

HT 09 horizontal tab

LF 10 line feed

VT 11 vertical tab
FF 12 form feed

CR 13 carriage return

SO 14 shift out

SI 15 shift in

DLE 16 data link escape

DC1 17 device control 1

DC2 18 device control 2

DC3 19 device control 3

DC4 20 device control 4

NAK 21 negative acknowledge

SYN 22 synchronize

ETB 23 end transmission block

CAN 24 cancel

EM 25 end of medium

SUB 26 substitute
ESC 27 escape

FS 28 file separator

GS 29 group separator

RS 30 record separator

US 31 unit separator

DEL 127 delete (rubout)

<!DOCTYPE html>

<html>

<style>

span {

font-size: 100px;

</style>

<body>

<p><span>&#9757;</span> No skin tone</p>

<p><span>&#9757;&#127999;</span> Dark skin tone</p>

<p><span>&#9757;&#127998;</span> Medium Dark skin tone</p>

<p><span>&#9757;&#127997;</span> Medium skin tone</p>

<p><span>&#9757;&#127996;</span> Medium Light skin tone</p>

<p><span>&#9757;&#127995;</span> Light skin tone</p>

</body>
</html>

You might also like