HTML Lectures
Uploaded by
monjurmorshedosama75HTML Lectures
Uploaded by
monjurmorshedosama75Dr. Md.
Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
What is HTML?
HTML is a markup language for describing web documents (web pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content
• Markup:
➢ Embedded codes in documents
➢ Codes are called `tags’
➢ Codes
✓ Describe the structure documents
✓ Include instructions for processing
• Markup language:
➢ Computer language for describing syntax of tags
➢ May be used with other tools to specify rendering
HTML Example
A small HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Example Explained
• The DOCTYPE declaration defines the document type to be HTML
• The text between <html> and </html> describes an HTML document
• The text between <head> and </head> provides information about the document
• The text between <title> and </title> provides a title for the document
• The text between <body> and </body> describes the visible page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a heading and a paragraph.
HTML Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag.
Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and
display them.
The browser does not display the HTML tags, but uses them to determine how to display the
document:
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Only the <body> area (the white area) is displayed by the browser.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are different document types on the web.
To display a document correctly, the browser must know both type and version.
The doctype declaration is not case sensitive. All cases are acceptable:
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
Common Declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML Editors
Write HTML Using Notepad or Text Edit
HTML can be edited by using professional HTML editors like:
• Microsoft Web Matrix
• Sublime Text
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.
Step 1: Open Notepad
To open Notepad in Windows 7 or earlier:
Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click
Notepad.
To open Notepad in Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Step 2: Write Some HTML
Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer.
Select File > Save as in the Notepad menu.
Name the file "[Link]" or any other name ending with html or htm.
UTF-8 is the preferred encoding for HTML files.
ANSI encoding covers US and Western European characters only.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
You can use either .htm or .html as file extension. There is no difference, it is up to you.
Step 4: View HTML Page in Your Browser
Open the saved HTML file in your favorite browser. The result will look much like this:
To open a file in a browser, double click on the file, or right-click, and choose open with.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Basic Examples
HTML Documents
All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Headings
HTML headings are defined with the <h1> to <h6> tags:
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
Example
<a href="[Link] is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as
attributes:
Example
<img src=" [Link]" alt="[Link] " width="104" height="142">
HTML documents are made up by HTML elements.
HTML Elements
HTML elements are written with a start tag, with an end tag, with the content in between:
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first HTML paragraph.</p>
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>
Some HTML elements do not have an end tag.
Nested HTML Elements
HTML elements can be nested (elements can contain elements).
All HTML documents consist of nested HTML elements.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
This example contains 4 HTML elements:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Example Explained
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
</body>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>
Don't Forget the End Tag
Some HTML elements will display correctly, even if you forget the end tag:
Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
The example above works in all browsers, because the closing tag is considered optional.
Never rely on this. It might produce unexpected results and/or errors if you forget the end tag.
Empty HTML Elements
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter validation, or you
need to make your document readable by XML parsers, you should close all HTML elements.
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in
HTML4, and demands lowercase for stricter document types like XHTML.
HTML Attributes
Attributes provide additional information about HTML elements.
HTML Attributes
• HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like: name="value"
The lang Attribute
The document language can be declared in the <html> tag.
The language is declared in the lang attribute.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Declaring a language is important for accessibility applications (screen readers) and search
engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The first two letters specify the language (en). If there is a dialect, use two more letters (US).
The title Attribute
HTML paragraphs are defined with the <p> tag.
In this example, the <p> element has a title attribute. The value of the attribute is "About ICE":
Example
<p title="About ICE">
ICE is one of the emerging department at Pabna University of Science and Technology.
It provides friendly environment for teachers and students. We are proud to be a part of it.
</p>
When you move the mouse over the element, the title will be displayed as a tooltip.
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
Example
<a href="http:// [Link] ">This is a link</a>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
You will learn more about links and the <a> tag later in this tutorial.
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height) are all provided as
attributes:
Example
<img src="[Link]" width="104" height="142">
The image size is specified in pixels: width="104" means 104 screen pixels wide.
You will learn more about images and the <img> tag later in this tutorial.
The alt Attribute
The alt attribute specifies an alternative text to be used, when an HTML element cannot be
displayed.
The value of the attribute can be read by "screen readers". This way, someone "listening" to the
webpage, i.e. a blind person, can "hear" the element.
Example
<img src=" [Link]" alt=" [Link]" width="104" height="142">
We Suggest: Always Use Lowercase Attributes
The HTML5 standard does not require lower case attribute names.
The title attribute can be written with upper or lower case like Title and/or TITLE.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
W3C recommends lowercase in HTML4, and demands lowercase for stricter document types
like XHTML.
Lower case is the most common. Lower case is easier to type.
We Suggest: Always Quote Attribute Values
The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written as:
Example
<a href=[Link]
W3C recommends quotes in HTML4, and demands quotes for stricter document types like
XHTML.
Sometimes it is necessary to use quotes. This will not display correctly, because it contains a
space:
Example
<p title=About ICE>
Using quotes are the most common. Omitting quotes can produce errors.
Single or Double Quotes?
Double style quotes are the most common in HTML, but single style can also be used.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
In some situations, when the attribute value itself contains double quotes, it is necessary to use
single quotes:
<p title='John "ShotGun" Nelson'>
Or vice versa:
<p title="John 'ShotGun' Nelson">
Chapter Summary
• All HTML elements can have attributes
• The HTML title attribute provides additional "tool-tip" information
• The HTML href attribute provides address information for links
• The HTML width and height attributes provide size information for images
• The HTML alt attribute provides text for screen readers
HTML Attributes
Below is an alphabetical list of some attributes often used in HTML:
Attribute Description
alt Specifies an alternative text for an image
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
value Specifies the value (text content) for an input element.
A complete list of all attributes for each HTML element, is listed in our: HTML Tag Reference.
HTML Headings
Headings are important in HTML documents.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Note: Browsers automatically add some empty space (a margin) before and after each heading.
Headings Are Important
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document
structure.
h1 headings should be main headings, followed by h2 headings, then the less important h3, and
so on.
HTML Horizontal Rules
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
The HTML <head> Element
The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
Meta data means data about data. HTML meta data is data about the HTML document.
The HTML <title> Element
The HTML <title> element is meta data. It defines the HTML document's title.
The title will not be displayed in the document, but might be displayed in the browser tab.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The HTML <meta> Element
The HTML <meta> element is also meta data.
It can be used to define the character set, and other information about the HTML document.
More Meta Elements
In the chapter about HTML styles you discover more meta elements:
The HTML <style> element is used to define internal CSS style sheets.
The HTML <link> element is used to define external CSS style sheets.
HTML Tip - How to View HTML Source
Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source"
(in IE), or similar in another browser. This will open a window containing the HTML code of the
page.
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their attributes.
You will learn more about HTML tags and attributes in the next chapters of this tutorial.
Tag Description
<html> Defines an HTML document
<body> Defines the document's body
<head> Defines the document's head element
<h1> to <h6> Defines HTML headings
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<hr> Defines a horizontal line
HTML Paragraphs
HTML documents are divided into paragraphs.
HTML Paragraphs
The HTML <p> element defines a paragraph.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Browsers automatically add an empty line before and after a paragraph.
HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML
code.
The browser will remove extra spaces and extra lines when the page is displayed.
Any number of spaces, and any number of new lines, count as only one space.
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
Don't Forget the End Tag
Most browsers will display HTML correctly even if you forget the end tag:
Example
<p>This is a paragraph
<p>This is another paragraph
The example above will work in most browsers, but do not rely on it.
Forgetting the end tag can produce unexpected results or errors.
Stricter versions of HTML, like XHTML, do not allow you to skip the end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Example
<p>This is<br>a para<br>graph with line breaks</p>
The <br> element is an empty HTML element. It has no end tag.
The Poem Problem
Example
<p>This poem will display as one line:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Oh, bring back my Bonnie to me.
</pre>
HTML Tag Reference
W3Schools' tag reference contains additional information about HTML elements and their
attributes.
Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
HTML Styles
I am Red
I am Blue
HTML Styling
Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to lightgrey:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
The bgcolor attribute, supported in older versions of HTML, is not valid in HTML5.
The HTML Style Attribute
The HTML style attribute has the following syntax:
style="property:value"
The property is a CSS property. The value is a CSS value.
HTML Text Color
The color property defines the text color to be used for an HTML element:
Example
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element:
Example
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The <font> tag, supported in older versions of HTML, is not valid in HTML5.
HTML Text Size
The font-size property defines the text size to be used for an HTML element:
Example
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>
HTML Text Alignment
The text-align property defines the horizontal text alignment for an HTML element:
Example
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>
The <center> tag, supported in older versions of HTML, is not valid in HTML5.
Chapter Summary
• Use the style attribute for styling HTML elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Text Formatting Elements
Text Formatting
This text is bold
This text is italic
This is superscript
HTML Formatting Elements
In the previous chapter, you learned about HTML styling, using the HTML style attribute.
HTML also defines special elements, for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
• Bold text
• Important text
• Italic text
• Emphasized text
• Marked text
• Small text
• Deleted text
• Inserted text
• Subscripts
• Superscripts
HTML Bold and Strong Formatting
The HTML <b> element defines bold text, without any extra importance.
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<p>This text is normal.</p>
<p><b>This text is bold</b>.</p>
The HTML <strong> element defines strong text, with added semantic "strong" importance.
Example
<p>This text is normal.</p>
<p><strong>This text is strong</strong>.</p>
HTML Italic and Emphasized Formatting
The HTML <i> element defines italic text, without any extra importance.
Example
<p>This text is normal.</p>
<p><i>This text is italic</i>.</p>
The HTML <em> element defines emphasized text, with added semantic importance.
Example
<p>This text is normal.</p>
<p><em>This text is emphasized</em>.</p>
Browsers display <strong> as <b>, and <em> as <i>.
However, there is a difference in the meaning of these tags: <b> and <i> defines bold and
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
italic text,
but <strong> and <em> means that the text is "important".
HTML Small Formatting
The HTML <small> element defines small text:
Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML Marked Formatting
The HTML <mark> element defines marked or highlighted text:
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML Deleted Formatting
The HTML <del> element defines deleted (removed) of text.
Example
<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting
The HTML <ins> element defines inserted (added) text.
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<p>My favorite <ins>color</ins> is red.</p>
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
Example
<p>This is <sub>subscripted</sub> text.</p>
HTML Superscript Formatting
The HTML <sup> element defines superscripted text.
Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML Quotation and Citation Elements
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Quotation
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world's leading
conservation organization, WWF works in 100 countries and is supported by 1.2 million
members in the United States and close to 5 million globally.
HTML <q> for Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
Example
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML <blockquote> for Long Quotations
The HTML <blockquote> element defines a quoted section.
Browsers usually indent <blockquote> elements.
Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="[Link]
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems and search-
engines.
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner) of a document or
article.
The <address> element is usually displayed in italic. Most browsers will add a line break before
and after the element.
Example
<address>
Written by Jon Doe.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
The HTML <cite> element defines the title of a work.
Browsers usually display <cite> elements in italic.
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
HTML Computer Code Elements
Computer Code
var person = {
firstName:"John",
lastName:"Doe",
age:50,
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
eyeColor:"blue"
}
HTML Computer Code Formatting
Normally, HTML uses variable letter size, and variable letter spacing.
This is not wanted when displaying examples of computer code.
The <kbd>, <samp>, and <code> elements all support fixed letter size and spacing.
HTML Keyboard Formatting
The HTML <kbd> element defines keyboard input:
Example
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
HTML Sample Formatting
The HTML <samp> element defines a computer output:
Example
<samp>
[Link] login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Code Formatting
The HTML <code> element defines programming code:
Example
<code>
var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }
</code>
The <code> element does not preserve extra whitespace and line-breaks:
Example
<p>Coding Example:</p>
<code>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</code>
To fix this, you must wrap the code in a <pre> element:
Example
<p>Coding Example:</p>
<code>
<pre>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
</pre>
</code>
HTML Variable Formatting
The HTML <var> element defines a mathematical variable:
Example
<p>Einstein wrote:</p>
<p><var>E = m c<sup>2</sup></var></p>
HTML Computer Code Elements
Tag Description
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a mathematical variable
<pre> Defines preformatted text
HTML Comments
Comment tags <!-- and --> are used to insert comments in HTML.
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.
Comments are not displayed by the browser, but they can help document your HTML.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Comments are also great for debugging HTML, because you can comment out HTML lines of
code, one at a time, to search for errors:
Example
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
Conditional Comments
You might stumble upon conditional comments in HTML:
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
Conditional comments defines HTML tags to be executed by Internet Explorer only.
Software Program Tags
HTML comments tags can also be generated by various HTML software programs.
For example <!--webbot bot--> tags wrapped inside HTML comments by FrontPage and
Expression Web.
As a rule, let these tags stay, to help support the software that created them.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Styles - CSS
CSS = Styles and Colors
M a n i p u l a t e T e x t
C o l o r s , B o x e s
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgray}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Styling HTML with CSS
CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:
• Inline - using a style attribute in HTML elements
• Internal - using a <style> element in the HTML <head> section
• External - using one or more external CSS files
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The most common way to add styling, is to keep the styles in separate CSS files. But, in this
tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it
yourself.
CSS Syntax
CSS styling has the following syntax:
element { property:value; property:value }
The element is an HTML element name. The property is a CSS property. The value is a CSS
value.
Multiple styles are separated with semicolon.
Inline Styling (Inline CSS)
Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:
Example
<h1 style="color:blue">This is a Blue Heading</h1>
Internal Styling (Internal CSS)
An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styling is defined in the <head> section of an HTML page, using a <style> element:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External Styling (External CSS)
External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire web site by changing one file.
External styles are defined in an external CSS file, and then linked to in the <head> section of
an HTML page:
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
CSS Fonts
The CSS color property defines the text color to be used for the HTML element.
The CSS font-family property defines the font to be used for the HTML element.
The CSS font-size property defines the text size to be used for the HTML element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The CSS Box Model
Every HTML element has a box around it, even if you cannot see it.
The CSS border property defines a visible border around an HTML element:
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Example
p{
border:1px solid black;
}
The CSS padding property defines a padding (space) inside the border:
Example
p{
border:1px solid black;
padding:10px;
}
The CSS margin property defines a margin (space) outside the border:
Example
p{
border:1px solid black;
padding:10px;
margin:30px;
}
The CSS examples above use px to define sizes in pixels.
The id Attribute
All the examples above use CSS to style HTML elements in a general way.
To define a special style for one special element, first add an id attribute to the element:
Example
<p id="p01">I am different</p>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
then define a different style for the (identified) element:
Example
p#p01 {
color:blue;
}
The class Attribute
To define a style for a special type (class) of elements, add a class attribute to the element:
Example
<p class="error">I am different</p>
Now you can define a different style for all elements with the specified class:
Example
[Link] {
color:red;
}
Use id to address single elements. Use class to address groups of elements.
Deprecated Tags and Attributes in HTML5
In older HTML versions, several tags and attributes were used to style documents.
These tags and attributes are not supported in HTML5!
Avoid using the <font>, <center>, and <strike> elements.
Avoid using the color and bgcolor attributes.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Chapter Summary
• Use the HTML style attribute for inline styling
• Use the HTML <style> element to define internal CSS
• Use the HTML <link> element to refer to an external CSS file
• Use the HTML <head> element to store <style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for visible element borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border
HTML Style Tags
Tag Description
<style> Defines style information for a document
<link> Defines a link between a document and an external resource
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another document.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<a href="url">link text</a>
Example
<a href="[Link] our HTML tutorial</a>
The href attribute specifies the destination address ([Link]
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text, will send you to the specified address.
The link text does not have to be text. It can be an HTML image or any other HTML
element.
Without a trailing slash on subfolder addresses, you might generate two requests to the
server. Many servers will automatically add a trailing slash to the address, and then create
a new request.
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL (without [Link]
Example
<a href="html_images.asp">HTML Images</a>
HTML Links - Colors
When you move the mouse over a link, two things will normally happen:
• The mouse arrow will turn into a little hand
• The color of the link element will change
By default, a link will appear like this (in all browsers):
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
You can change the default colors, by using styles:
Example
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.
This example will open the linked document in a new browser window or in a new tab:
Example
<a href="[Link] target="_blank">Visit W3Schools!</a>
Target Value Description
_blank Opens the linked document in a new window or tab
Opens the linked document in the same frame as it was clicked (this is
_self
default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
If your webpage is locked in a frame, you can use target="_top" to break out of the frame:
Example
<a href="[Link] target="_top">HTML5 tutorial!</a>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Links - Image as Link
It is common to use images as links:
Example
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
border:0 is added to prevent IE9 (and earlier) from displaying a border around the image.
HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks are practical if your website has long pages.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
First, create a bookmark with the id attribute:
<h2 id="tips">Useful Tips Section</h2>
Then, add a link to the bookmark ("Useful Tips Section"), from within the same page:
<a href="#tips">Visit the Useful Tips Section</a>
Or, add a link to the bookmark ("Useful Tips Section"), from another page:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<a href="html_tips.htm#tips">Visit the Useful Tips Section</a>
Chapter Summary
• Use the HTML <a> element to define a link
• Use the HTML href attribute to define the link address
• Use the HTML target attribute to define where to open the linked document
• Use the HTML <img> element (inside <a>) to use an image as a link
• Use the HTML id attribute (id="value") to define bookmarks in a page
• Use the HTML href attribute (href="#value") to link to the bookmark
HTML Link Tags
Tag Description
<a> Defines a hyperlink
HTML Images
Example
GIF Images
JPG Images
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
PNG Images
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>
Always specify the width and height of an image. If width and height are not specified, the
page will flicker while the image loads.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text">
The alt Attribute
The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The alt attribute provides alternative information for an image if a user for some reason cannot
view it (because of slow connection, an error in the src attribute, or if the user uses a screen
reader).
If a browser cannot find an image, it will display the alt text:
Example
<img src="[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
The alt attribute is required. A web page will not validate correctly without it.
HTML Screen Readers
A screen reader is a software programs that can read what is displayed on a screen.
Screen readers are useful to people who are blind, visually impaired, or learning disabled.
Screen readers can read the alt attribute.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
The values are specified in pixels (use px after the value):
Example
<img src="[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
Alternatively, you can use width and height attributes. Here, the values are specified in pixels by
default:
Example
<img src="[Link]" alt="HTML5 Icon" width="128" height="128">
Width and Height or Style?
Both the width, height, and style attributes are valid in the latest HTML5 standard.
We suggest you use the style attribute. It prevents styles sheets from changing the original size of
images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<img src="[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="[Link]" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the web page.
However, it is common to store images in a sub-folder. You must then include the folder name in
the src attribute:
Example
<img src="/images/[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
Example
<img src="[Link] alt="[Link]">
Animated Images
The GIF standard allows animated images:
Example
<img src="[Link]" alt="Computer Man" style="width:48px;height:48px;">
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Note that the syntax of inserting animated images is no different from non-animated images.
Using an Image as a Link
To use an image as a link, simply nest the <img> tag inside the <a> tag:
Example
<a href="[Link]">
<img src="[Link]" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the image.
Image Floating
Use the CSS float property to let the image float.
The image can float to the right or to the left of a text:
Example
<p>
<img src="[Link]" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="[Link]" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p>
Image Maps
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Use the <map> tag to define an image-map. An image-map is an image with clickable areas.
The name attribute of the <map> tag is associated with the <img>'s usemap attribute and creates
a relationship between the image and the map.
The <map> tag contains a number of <area>tags, that defines the clickable areas in the image-
map:
Example
<img src="[Link]" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="[Link]">
<area shape="circle" coords="90,58,3" alt="Mercury" href="[Link]">
<area shape="circle" coords="124,58,8" alt="Venus" href="[Link]">
</map>
Chapter Summary
• Use the HTML <img> element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if it cannot be
displayed
• Use the HTML width and height attributes to define the size of the image
• Use the CSS width and height properties to define the size of the image (alternatively)
• Use the CSS float property to let the image float
• Use the HTML <map> element to define an image-map
• Use the HTML <area> element to define the clickable areas in the image-map
• Use the HTML <img>'s element usemap attribute to point to an image-map
Loading images takes time. Large images can slow down your page. Use images carefully.
HTML Image Tags
Tag Description
<img> Defines an image
<map> Defines an image-map
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<area> Defines a clickable area inside an image-map
HTML Tables
1
HTML Table Example
Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50
Defining HTML Tables
Example
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Example explained:
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
An HTML Table with a Border Attribute
If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
The border attribute is on its way out of the HTML standard! It is better to use CSS.
To add borders, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
Remember to define borders for both the table and the table cells.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
An HTML Table with Collapsed Borders
If you want the borders to collapse into one border, add CSS border-collapse:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
An HTML Table with Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
HTML Table Headings
Table headings are defined with the <th> tag.
By default, all major browsers display table headings as bold and centered:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
To left-align the table headings, use the CSS text-align property:
Example
th {
text-align: left;
}
An HTML Table with Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
Example
table {
border-spacing: 5px;
}
If the table has collapsed borders, border-spacing has no effect.
Table Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Table Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
An HTML Table With a Caption
To add a caption to a table, use the <caption> tag:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
The <caption> tag must be inserted immediately after the <table> tag.
A Special Style for One Table
To define a special style for a special table, add an id attribute to the table:
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Now you can define a special style for this table:
table#t01 {
width: 100%;
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
background-color: #f1f1c1;
}
And add more styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}
Chapter Summary
• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Lists
Unordered lists and ordered lists are commonly used in
HTML:
Unordered List
• The first item
• The second item
• The third item
• The fourth item
Ordered List
1. The first item
2. The second item
3. The third item
4. The fourth item
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Unordered HTML Lists
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML Lists - The Style Attribute
A style attribute can be added to an unordered list, to define the style of the marker:
Style Description
list-style-type:disc The list items will be marked with bullets (default)
list-style-type:circle The list items will be marked with circles
list-style-type:square The list items will be marked with squares
list-style-type:none The list items will not be marked
Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Circle:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
None:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
type="i" The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
List items can contain new list, and other HTML elements, like images and links, etc.
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to be displayed horizontally:
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
With a little extra style, you can make it look like a menu:
Example
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
}
ul#menu li a:hover {
background-color: orange;
}
Chapter Summary
• Use the HTML <ul> element to define an unordered list
• Use the HTML style attribute to define the bullet style
• Use the HTML <ol> element to define an ordered list
• Use the HTML type attribute to define the numbering type
• Use the HTML <li> element to define a list item
• Use the HTML <dl> element to define a description list
• Use the HTML <dt> element to define the description term
• Use the HTML <dd> element to define the description data
• Lists can be nested inside lists
• List items can contain other HTML elements
• Use the CSS property display:inline to display a list horizontally
HTML List Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines the term in a description list
<dd> Defines the description in a description list
HTML Block and Inline Elements
Every HTML element has a default display value depending on what type of element it is. The
default display value for most elements is block or inline.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Block-level Elements
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.
Examples of block-level elements:
• <div>
• <h1> - <h6>
• <p>
• <form>
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
This is an inline <span> element inside a paragraph.
Examples of inline elements:
• <span>
• <a>
• <img>
The <div> Element
The <div> element is a block-level element that is often used as a container for other HTML
elements.
The <div> element has no required attributes, but style and class are common.
When used together with CSS, the <div> element can be used to style blocks of content:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
The <span> Element
The <span> element is an inline element that is often used as a container for some text.
The <span> element has no required attributes, but style and class are common.
When used together with CSS, the <span> element can be used to style parts of the text:
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML Grouping Tags
Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
HTML Classes
Classing Block Elements
The HTML class attribute makes it possible to define equal styles for "equal" <div> elements:
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.
Paris
Paris is the capital and most populous city of France.
Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the
région parisienne.
Within its metropolitan area is one of the largest population centers in Europe, with over 12
million inhabitants.
Tokyo
Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese
Imperial Family.
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million
people and the world's largest urban economy.
Example
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</body>
</html>
Classing Inline Elements
The HTML class attribute also makes it possible to define equal styles for "equal" <span>
elements:
Example
<!DOCTYPE html>
<html>
<head>
<style>
[Link] {font-size:120%;color:red;}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
HTML Layouts
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Websites often display content in multiple columns (like a magazine or newspaper).
City Gallery
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history
going back to its founding by the Romans, who named it Londinium.
Copyright © [Link]
HTML Layout Using<div> Elements
The <div> element is often used as a layout tool, because it can easily be positioned with
CSS.
This example uses 4 <div> elements to create a multiple column layout:
Example
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © © [Link]
</div>
</body>
The CSS:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
Website Layout Using HTML5
HTML5 offers new semantic elements that define different parts of a web page:
header Defines a header for a document or a section
nav Defines a container for navigation links
section Defines a section in a document
article Defines an independent self-contained article
Defines content aside from the content (like a
aside
sidebar)
footer Defines a footer for a document or a section
details Defines additional details
summary Defines a heading for the details element
This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:
Example
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright © [Link]
</footer>
</body>
The CSS
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
HTML Layout Using Tables
The <table> element was not designed to be a layout tool.
The purpose of the <table> element is to display tabular data.
Layout can be achieved using the <table> element, because table elements can be styled with
CSS:
Example
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/[Link]" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
The CSS
<style>
[Link] {
width:100%;
border:1px solid #d4d4d4;
}
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
[Link] th, td {
padding:10px;
}
[Link] th {
width:40px;
}
</style>
HTML Responsive Web Design
What is Responsive Web Design?
• RWD stands for Responsive Web Design
• RWD can deliver web pages in variable sizes
• RWD is a must for tablets and mobile devices
Creating Your Own Responsive Design
One way to create a responsive design, is to create it yourself:
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>W3Schools Demo</h1>
<h2>Resize this responsive page!</h2>
<div class="city">
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous
metropolitan area in the world.</p>
</div>
</body>
</html>
Using [Link]
Another way to create a responsive design, is to use a responsive style sheet, like [Link]
[Link] makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or
phone:
[Link] Demo
Resize the page to see the responsivenes!
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.
Paris
Paris is the capital of France.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The Paris area is one of the largest population centers in Europe, with more than 12 million
inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="[Link]
<body>
<div class="w3-container w3-orange">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
</div>
</body>
</html>
HTML Iframes
An iframe is used to display a web page within a web page.
Iframe Syntax
The syntax for adding an iframe is:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the iframe page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size.
The attribute values are specified in pixels by default, but they can also be in percent (like
"80%").
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - Remove the Border
By default, an iframe has a black border around it.
To remove the border, add the style attribute and use the CSS border property:
Example
<iframe src="demo_iframe.htm" style="border:none"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:
Example
<iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>
Use iframe as a Target for a Link
An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:
Example
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="[Link] target="iframe_a">[Link]</a></p>
HTML iframe Tag
Tag Description
<iframe> Defines an inline frame
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Color Names
Color Names Supported by All Browsers
All modern browsers support the following 140 color names (click on a color name, or a hex
value, to view the color as the background-color along with different text colors):
Click here to see the 140 colors sorted by HEX
Color Name HEX Color Shades Mix
AliceBlue #F0F8FF Shades Mix
AntiqueWhite #FAEBD7 Shades Mix
Aqua #00FFFF Shades Mix
Aquamarine #7FFFD4 Shades Mix
Azure #F0FFFF Shades Mix
Beige #F5F5DC Shades Mix
Bisque #FFE4C4 Shades Mix
Black #000000 Shades Mix
BlanchedAlmond #FFEBCD Shades Mix
Blue #0000FF Shades Mix
BlueViolet #8A2BE2 Shades Mix
Brown #A52A2A Shades Mix
BurlyWood #DEB887 Shades Mix
CadetBlue #5F9EA0 Shades Mix
Chartreuse #7FFF00 Shades Mix
Chocolate #D2691E Shades Mix
Coral #FF7F50 Shades Mix
CornflowerBlue #6495ED Shades Mix
Cornsilk #FFF8DC Shades Mix
Crimson #DC143C Shades Mix
Cyan #00FFFF Shades Mix
DarkBlue #00008B Shades Mix
DarkCyan #008B8B Shades Mix
DarkGoldenRod #B8860B Shades Mix
DarkGray #A9A9A9 Shades Mix
DarkGreen #006400 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
DarkKhaki #BDB76B Shades Mix
DarkMagenta #8B008B Shades Mix
DarkOliveGreen #556B2F Shades Mix
DarkOrange #FF8C00 Shades Mix
DarkOrchid #9932CC Shades Mix
DarkRed #8B0000 Shades Mix
DarkSalmon #E9967A Shades Mix
DarkSeaGreen #8FBC8F Shades Mix
DarkSlateBlue #483D8B Shades Mix
DarkSlateGray #2F4F4F Shades Mix
DarkTurquoise #00CED1 Shades Mix
DarkViolet #9400D3 Shades Mix
DeepPink #FF1493 Shades Mix
DeepSkyBlue #00BFFF Shades Mix
DimGray #696969 Shades Mix
DodgerBlue #1E90FF Shades Mix
FireBrick #B22222 Shades Mix
FloralWhite #FFFAF0 Shades Mix
ForestGreen #228B22 Shades Mix
Fuchsia #FF00FF Shades Mix
Gainsboro #DCDCDC Shades Mix
GhostWhite #F8F8FF Shades Mix
Gold #FFD700 Shades Mix
GoldenRod #DAA520 Shades Mix
Gray #808080 Shades Mix
Green #008000 Shades Mix
GreenYellow #ADFF2F Shades Mix
HoneyDew #F0FFF0 Shades Mix
HotPink #FF69B4 Shades Mix
IndianRed #CD5C5C Shades Mix
Indigo #4B0082 Shades Mix
Ivory #FFFFF0 Shades Mix
Khaki #F0E68C Shades Mix
Lavender #E6E6FA Shades Mix
LavenderBlush #FFF0F5 Shades Mix
LawnGreen #7CFC00 Shades Mix
LemonChiffon #FFFACD Shades Mix
LightBlue #ADD8E6 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
LightCoral #F08080 Shades Mix
LightCyan #E0FFFF Shades Mix
LightGoldenRodYellow #FAFAD2 Shades Mix
LightGray #D3D3D3 Shades Mix
LightGreen #90EE90 Shades Mix
LightPink #FFB6C1 Shades Mix
LightSalmon #FFA07A Shades Mix
LightSeaGreen #20B2AA Shades Mix
LightSkyBlue #87CEFA Shades Mix
LightSlateGray #778899 Shades Mix
LightSteelBlue #B0C4DE Shades Mix
LightYellow #FFFFE0 Shades Mix
Lime #00FF00 Shades Mix
LimeGreen #32CD32 Shades Mix
Linen #FAF0E6 Shades Mix
Magenta #FF00FF Shades Mix
Maroon #800000 Shades Mix
MediumAquaMarine #66CDAA Shades Mix
MediumBlue #0000CD Shades Mix
MediumOrchid #BA55D3 Shades Mix
MediumPurple #9370DB Shades Mix
MediumSeaGreen #3CB371 Shades Mix
MediumSlateBlue #7B68EE Shades Mix
MediumSpringGreen #00FA9A Shades Mix
MediumTurquoise #48D1CC Shades Mix
MediumVioletRed #C71585 Shades Mix
MidnightBlue #191970 Shades Mix
MintCream #F5FFFA Shades Mix
MistyRose #FFE4E1 Shades Mix
Moccasin #FFE4B5 Shades Mix
NavajoWhite #FFDEAD Shades Mix
Navy #000080 Shades Mix
OldLace #FDF5E6 Shades Mix
Olive #808000 Shades Mix
OliveDrab #6B8E23 Shades Mix
Orange #FFA500 Shades Mix
OrangeRed #FF4500 Shades Mix
Orchid #DA70D6 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
PaleGoldenRod #EEE8AA Shades Mix
PaleGreen #98FB98 Shades Mix
PaleTurquoise #AFEEEE Shades Mix
PaleVioletRed #DB7093 Shades Mix
PapayaWhip #FFEFD5 Shades Mix
PeachPuff #FFDAB9 Shades Mix
Peru #CD853F Shades Mix
Pink #FFC0CB Shades Mix
Plum #DDA0DD Shades Mix
PowderBlue #B0E0E6 Shades Mix
Purple #800080 Shades Mix
RebeccaPurple #663399 Shades Mix
Red #FF0000 Shades Mix
RosyBrown #BC8F8F Shades Mix
RoyalBlue #4169E1 Shades Mix
SaddleBrown #8B4513 Shades Mix
Salmon #FA8072 Shades Mix
SandyBrown #F4A460 Shades Mix
SeaGreen #2E8B57 Shades Mix
SeaShell #FFF5EE Shades Mix
Sienna #A0522D Shades Mix
Silver #C0C0C0 Shades Mix
SkyBlue #87CEEB Shades Mix
SlateBlue #6A5ACD Shades Mix
SlateGray #708090 Shades Mix
Snow #FFFAFA Shades Mix
SpringGreen #00FF7F Shades Mix
SteelBlue #4682B4 Shades Mix
Tan #D2B48C Shades Mix
Teal #008080 Shades Mix
Thistle #D8BFD8 Shades Mix
Tomato #FF6347 Shades Mix
Turquoise #40E0D0 Shades Mix
Violet #EE82EE Shades Mix
Wheat #F5DEB3 Shades Mix
White #FFFFFF Shades Mix
WhiteSmoke #F5F5F5 Shades Mix
Yellow #FFFF00 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
YellowGreen #9ACD32 Shades Mix
HTML Color Values
Colors are displayed combining RED, GREEN, and BLUE light.
HTML Colors
Colors in HTML can be specified by the following methods:
• Hexadecimal colors
• RGB colors
• Color names
Hexadecimal Colors
Hexadecimal color values are supported in all major browsers.
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB
(blue) hexadecimal integers specify the components of the color. All values must be between 00
and FF.
For example, the #0000FF value is rendered as blue, because the blue component is set to its
highest value (FF) and the others are set to the lowest value (00).
RGB Colors
RGB color values are supported in all major browsers.
An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and
blue) defines the intensity of the color and can be an integer between 0 and 255.
For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its
highest value (255) and the others are set to 0.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Color Names
All major browsers also support 140 standard color names.
Examples
Example
Color Color HEX Color RGB Color Name
#FF0000 rgb(255,0,0) Red
#00FF00 rgb(0,255,0) Green
#0000FF rgb(0,0,255) Blue
Shades of grey are often defined using equal values for all the 3 light sources:
Example
Color Color HEX Color RGB Color Name
#000000 rgb(0,0,0) Black
#808080 rgb(128,128,128) Gray
#FFFFFF rgb(255,255,255) White
Colors Sorted by HEX Value
Click here to see the colors sorted by name
Color Name HEX Color Shades Mix
Black #000000 Shades Mix
Navy #000080 Shades Mix
DarkBlue #00008B Shades Mix
MediumBlue #0000CD Shades Mix
Blue #0000FF Shades Mix
DarkGreen #006400 Shades Mix
Green #008000 Shades Mix
Teal #008080 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
DarkCyan #008B8B Shades Mix
DeepSkyBlue #00BFFF Shades Mix
DarkTurquoise #00CED1 Shades Mix
MediumSpringGreen #00FA9A Shades Mix
Lime #00FF00 Shades Mix
SpringGreen #00FF7F Shades Mix
Aqua #00FFFF Shades Mix
Cyan #00FFFF Shades Mix
MidnightBlue #191970 Shades Mix
DodgerBlue #1E90FF Shades Mix
LightSeaGreen #20B2AA Shades Mix
ForestGreen #228B22 Shades Mix
SeaGreen #2E8B57 Shades Mix
DarkSlateGray #2F4F4F Shades Mix
LimeGreen #32CD32 Shades Mix
MediumSeaGreen #3CB371 Shades Mix
Turquoise #40E0D0 Shades Mix
RoyalBlue #4169E1 Shades Mix
SteelBlue #4682B4 Shades Mix
DarkSlateBlue #483D8B Shades Mix
MediumTurquoise #48D1CC Shades Mix
Indigo #4B0082 Shades Mix
DarkOliveGreen #556B2F Shades Mix
CadetBlue #5F9EA0 Shades Mix
CornflowerBlue #6495ED Shades Mix
RebeccaPurple #663399 Shades Mix
MediumAquaMarine #66CDAA Shades Mix
DimGray #696969 Shades Mix
SlateBlue #6A5ACD Shades Mix
OliveDrab #6B8E23 Shades Mix
SlateGray #708090 Shades Mix
LightSlateGray #778899 Shades Mix
MediumSlateBlue #7B68EE Shades Mix
LawnGreen #7CFC00 Shades Mix
Chartreuse #7FFF00 Shades Mix
Aquamarine #7FFFD4 Shades Mix
Maroon #800000 Shades Mix
Purple #800080 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Olive #808000 Shades Mix
Gray #808080 Shades Mix
SkyBlue #87CEEB Shades Mix
LightSkyBlue #87CEFA Shades Mix
BlueViolet #8A2BE2 Shades Mix
DarkRed #8B0000 Shades Mix
DarkMagenta #8B008B Shades Mix
SaddleBrown #8B4513 Shades Mix
DarkSeaGreen #8FBC8F Shades Mix
LightGreen #90EE90 Shades Mix
MediumPurple #9370DB Shades Mix
DarkViolet #9400D3 Shades Mix
PaleGreen #98FB98 Shades Mix
DarkOrchid #9932CC Shades Mix
YellowGreen #9ACD32 Shades Mix
Sienna #A0522D Shades Mix
Brown #A52A2A Shades Mix
DarkGray #A9A9A9 Shades Mix
LightBlue #ADD8E6 Shades Mix
GreenYellow #ADFF2F Shades Mix
PaleTurquoise #AFEEEE Shades Mix
LightSteelBlue #B0C4DE Shades Mix
PowderBlue #B0E0E6 Shades Mix
FireBrick #B22222 Shades Mix
DarkGoldenRod #B8860B Shades Mix
MediumOrchid #BA55D3 Shades Mix
RosyBrown #BC8F8F Shades Mix
DarkKhaki #BDB76B Shades Mix
Silver #C0C0C0 Shades Mix
MediumVioletRed #C71585 Shades Mix
IndianRed #CD5C5C Shades Mix
Peru #CD853F Shades Mix
Chocolate #D2691E Shades Mix
Tan #D2B48C Shades Mix
LightGray #D3D3D3 Shades Mix
Thistle #D8BFD8 Shades Mix
Orchid #DA70D6 Shades Mix
GoldenRod #DAA520 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
PaleVioletRed #DB7093 Shades Mix
Crimson #DC143C Shades Mix
Gainsboro #DCDCDC Shades Mix
Plum #DDA0DD Shades Mix
BurlyWood #DEB887 Shades Mix
LightCyan #E0FFFF Shades Mix
Lavender #E6E6FA Shades Mix
DarkSalmon #E9967A Shades Mix
Violet #EE82EE Shades Mix
PaleGoldenRod #EEE8AA Shades Mix
LightCoral #F08080 Shades Mix
Khaki #F0E68C Shades Mix
AliceBlue #F0F8FF Shades Mix
HoneyDew #F0FFF0 Shades Mix
Azure #F0FFFF Shades Mix
SandyBrown #F4A460 Shades Mix
Wheat #F5DEB3 Shades Mix
Beige #F5F5DC Shades Mix
WhiteSmoke #F5F5F5 Shades Mix
MintCream #F5FFFA Shades Mix
GhostWhite #F8F8FF Shades Mix
Salmon #FA8072 Shades Mix
AntiqueWhite #FAEBD7 Shades Mix
Linen #FAF0E6 Shades Mix
LightGoldenRodYellow #FAFAD2 Shades Mix
OldLace #FDF5E6 Shades Mix
Red #FF0000 Shades Mix
Fuchsia #FF00FF Shades Mix
Magenta #FF00FF Shades Mix
DeepPink #FF1493 Shades Mix
OrangeRed #FF4500 Shades Mix
Tomato #FF6347 Shades Mix
HotPink #FF69B4 Shades Mix
Coral #FF7F50 Shades Mix
DarkOrange #FF8C00 Shades Mix
LightSalmon #FFA07A Shades Mix
Orange #FFA500 Shades Mix
LightPink #FFB6C1 Shades Mix
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Pink #FFC0CB Shades Mix
Gold #FFD700 Shades Mix
PeachPuff #FFDAB9 Shades Mix
NavajoWhite #FFDEAD Shades Mix
Moccasin #FFE4B5 Shades Mix
Bisque #FFE4C4 Shades Mix
MistyRose #FFE4E1 Shades Mix
BlanchedAlmond #FFEBCD Shades Mix
PapayaWhip #FFEFD5 Shades Mix
LavenderBlush #FFF0F5 Shades Mix
SeaShell #FFF5EE Shades Mix
Cornsilk #FFF8DC Shades Mix
LemonChiffon #FFFACD Shades Mix
FloralWhite #FFFAF0 Shades Mix
Snow #FFFAFA Shades Mix
Yellow #FFFF00 Shades Mix
LightYellow #FFFFE0 Shades Mix
Ivory #FFFFF0 Shades Mix
White #FFFFFF Shades Mix
HTML Color Shades
Shades of Gray
Gray colors are displayed using an equal amount of power to all of the light sources.
To make it easy for you to select a gray color we have compiled a table of gray shades for you:
Gray Shades HEX RGB
#000000 rgb(0,0,0)
#080808 rgb(8,8,8)
#101010 rgb(16,16,16)
#181818 rgb(24,24,24)
#202020 rgb(32,32,32)
#282828 rgb(40,40,40)
#303030 rgb(48,48,48)
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
#383838 rgb(56,56,56)
#404040 rgb(64,64,64)
#484848 rgb(72,72,72)
#505050 rgb(80,80,80)
#585858 rgb(88,88,88)
#606060 rgb(96,96,96)
#686868 rgb(104,104,104)
#707070 rgb(112,112,112)
#787878 rgb(120,120,120)
#808080 rgb(128,128,128)
#888888 rgb(136,136,136)
#909090 rgb(144,144,144)
#989898 rgb(152,152,152)
#A0A0A0 rgb(160,160,160)
#A8A8A8 rgb(168,168,168)
#B0B0B0 rgb(176,176,176)
#B8B8B8 rgb(184,184,184)
#C0C0C0 rgb(192,192,192)
#C8C8C8 rgb(200,200,200)
#D0D0D0 rgb(208,208,208)
#D8D8D8 rgb(216,216,216)
#E0E0E0 rgb(224,224,224)
#E8E8E8 rgb(232,232,232)
#F0F0F0 rgb(240,240,240)
#F8F8F8 rgb(248,248,248)
#FFFFFF rgb(255,255,255)
16 Million Different Colors
The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16
million different colors to play with (256 x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
If you look at the color table below, you will see the result of varying the red light from 0 to 255,
while keeping the green and blue light at zero.
To see a full list of color mixes when the red light varies from 0 to 255, click on one of the HEX
or RGB values below.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Red Light HEX RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)
Web Safe Colors?
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Some years ago, when computers supported maximum 256 different colors, a list of 216 "Web
Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.
This is not important now, since most computers can display millions of different colors, but the
choice is left to you.
The 216 cross-browser color palette was created to ensure that all computers would display the
colors correctly when running a 256 color palette:
000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF
HTML Scripts
JavaScripts make HTML pages more dynamic and interactive.
Try it Yourself - Examples
Insert a script
How to insert a script into an HTML document.
Use of the <noscript> tag
How to handle browsers that do not support scripting, or have scripting disabled.
The HTML <script> Tag
The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements or it points to an external script file
through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of
content.
The script below writes Hello JavaScript! into an HTML element with id="demo":
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Example
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
The HTML <noscript> Tag
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in
their browser or have a browser that doesn't support client-side scripting.
The <noscript> element can contain all the elements that you can find inside the <body> element
of a normal HTML page.
The content inside the <noscript> element will only be displayed if scripts are not supported, or
are disabled in the user's browser:
Example
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
A Taste of JavaScript (From Our JavaScript Tutorial)
Here are some examples of what JavaScript can do:
JavaScript can change HTML content:
[Link]("demo").innerHTML = "Hello JavaScript!";
JavaScript can change HTML styles:
[Link]("demo").[Link] = "25px";
JavaScript can change HTML attributes:
[Link]("image").src = "[Link]";
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML Script Tags
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
HTML Head
The HTML <head> Element
The <head> element is a container for metadata (data about data).
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define document title, styles, links, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.
Omitting <html> and <body>?
In the HTML5 standard, the <html> tag, the <body> tag, and the <head> tag can be omitted.
The following code will validate as HTML5:
Example
<!DOCTYPE html>
<title>Page Title</title>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
We do not recommend omitting the <html> and <body> tags.
The <html> element is the document root. It is the recommended place for specifying the page
language:
<!DOCTYPE html>
<html lang="en-US">
Declaring a language is important for accessibility applications (screen readers) and search
engines.
Omitting <html> and <body> can crash badly-written DOM/XML software.
Finally, omitting <body> can produce errors in older browsers (IE9).
Omitting <head>
In the HTML5 standard, the <head> tag can also be omitted.
By default, browsers will add all elements before <body>, to a default <head> element.
You can reduce the complexity of HTML, by omitting the <head> tag:
Example
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Omitting tags is unfamiliar to web developers. It needs time to be established as a
guideline.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The HTML <title> Element
The <title> element defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
The <title> element:
• defines a title in the browser tab
• provides a title for the page when it is added to favorites
• displays a title for the page in search engine results
A simplified HTML document:
Example
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
The content of the document......
</body>
</html>
The HTML <style> Element
The <style> element is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser:
Example
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The HTML <link> Element
The <link> element defines the page relationship to an external resource.
The <link> element is most often used to link to style sheets:
Example
<link rel="stylesheet" href="[Link]">
The HTML <meta> Element
The <meta> element is used to specify page description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords), and other
web services.
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Define the character set used:
<meta charset="UTF-8">
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example of <meta> tags:
Example
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
The HTML <script> Element
The <script> element is used to define client-side JavaScripts.
The script below writes Hello JavaScript! into an HTML element with id="demo":
Example
<script>
function myFunction {
[Link]("demo").innerHTML = "Hello JavaScript!";
}
</script>
To learn all about JavaScript, visit our JavaScript Tutorial!
The HTML <base> Element
The <base> element specifies the base URL and base target for all relative URLs in a page:
Example
<base href="[Link] target="_blank">
HTML head Elements
Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Defines the relationship between a document and an external
<link>
resource
<meta> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document
HTML Entities
Reserved characters in HTML must be replaced with character entities.
Characters, not present on your keyboard, can also be replaced by entities.
HTML Entities
Some characters are reserved in HTML.
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 <
The advantage of using an entity name, instead of a number, is that the name is easier to
remember.
The disadvantage is that browsers may not support all entity names, but the support for
numbers is good.
Non-breaking Space
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
A common character entity used in HTML is the non-breaking space ( ).
Remember that browsers will always truncate spaces in HTML pages. If you write 10 spaces in
your text, the browser will remove 9 of them. To add real spaces to your text, you can use the
character entity.
Some Other Useful HTML Character Entities
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® registered trademark ® ®
Entity names are case sensitive.
Combining Diacritical Marks
A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave ( ̀) and acute ( ́) are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and between two
letters.
Diacritical marks can be used in combination with alphanumeric characters, to produce a
character that is not present in the character set (encoding) used in the page.
Here are some examples:
Mark Character Construct Result
̀ a à à
́ a á á
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
̂ a â â
̃ a ã ã
̀ O Ò Ò
́ O Ó Ó
̂ O Ô Ô
̃ O Õ Õ
You will see more HTML symbols in the next chapter of this tutorial.
HTML Symbols
HTML Symbol Entities
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add these symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number; 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 €</p>
<p>I will display €</p>
<p>I will display €</p>
Will display as:
I will display €
I will display €
I will display €
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
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
∋ ∋ ∋ CONTAINS AS MEMBER
∏ ∏ ∏ N-ARY PRODUCT
∑ ∑ ∑ N-ARY SUMMATION
Full Math Reference
Some Greek Letters Supported by HTML
Char Number Entity Description
Α Α Α GREEK CAPITAL LETTER ALPHA
Β Β Β GREEK CAPITAL LETTER BETA
Γ Γ Γ GREEK CAPITAL LETTER GAMMA
Δ Δ Δ GREEK CAPITAL LETTER DELTA
Ε Ε Ε GREEK CAPITAL LETTER EPSILON
Ζ Ζ Ζ GREEK CAPITAL LETTER ZETA
Full Greek Reference
Some Other Entities Supported by HTML
Char Number Entity Description
© © © COPYRIGHT SIGN
® ® ® REGISTERED SIGN
€ € € EURO SIGN
™ ™ ™ TRADEMARK
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
← ← ← LEFTWARDS ARROW
↑ ↑ ↑ UPWARDS ARROW
→ → → RIGHTWARDS ARROW
↓ ↓ ↓ DOWNWARDS ARROW
♠ ♠ ♠ BLACK SPADE SUIT
♣ ♣ ♣ BLACK CLUB SUIT
♥ ♥ ♥ BLACK HEART SUIT
♦ ♦ ♦ BLACK DIAMOND SUIT
Full Currency Reference
Full Arrows Reference
Full Symbols Reference
HTML Encoding (Character Sets)
To display an HTML page correctly, a web browser must know the character set (character
encoding) to use.
What is Character Encoding?
ASCII was the first character encoding standard (also called character set). It defines 127
different alphanumeric characters that could be used on the internet.
ASCII supported numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( )
@ <> .
ANSI (Windows-1252) was the original Windows character set. It supported 256 different
character codes.
ISO-8859-1 was the default character set for HTML 4. It also supported 256 different character
codes.
Because ANSI and ISO were limited, the default character encoding was changed to UTF-8 in
HTML5.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
All HTML 4 processors also support UTF-8.
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:
For HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
For HTML5:
<meta charset="UTF-8">
If a browser detects ISO-8859-1 in a web page, it defaults to ANSI, because ANSI is
identical to ISO-8859-1 except that ANSI has 32 extra characters.
Differences Between Character Sets
The following table displays the differences between the character sets described above:
UTF-
Numb ASCII ANSI 8859 Description
8
32 space
33 ! ! ! ! exclamation mark
34 " " " " quotation mark
35 # # # # number sign
36 $ $ $ $ dollar sign
37 % % % % percent sign
38 & & & & ampersand
39 ' ' ' ' apostrophe
40 ( ( ( ( left parenthesis
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
41 ) ) ) ) right parenthesis
42 * * * * asterisk
43 + + + + plus sign
44 , , , , comma
45 - - - - hyphen-minus
46 . . . . full stop
47 / / / / solidus
48 0 0 0 0 digit zero
49 1 1 1 1 digit one
50 2 2 2 2 digit two
51 3 3 3 3 digit three
52 4 4 4 4 digit four
53 5 5 5 5 digit five
54 6 6 6 6 digit six
55 7 7 7 7 digit seven
56 8 8 8 8 digit eight
57 9 9 9 9 digit nine
58 : : : : colon
59 ; ; ; ; semicolon
60 < < < < less-than sign
61 = = = = equals sign
62 > > > > greater-than sign
63 ? ? ? ? question mark
64 @ @ @ @ commercial at
65 A A A A Latin capital letter A
66 B B B B Latin capital letter B
67 C C C C Latin capital letter C
68 D D D D Latin capital letter D
69 E E E E Latin capital letter E
70 F F F F Latin capital letter F
71 G G G G Latin capital letter G
72 H H H H Latin capital letter H
73 I I I I Latin capital letter I
74 J J J J Latin capital letter J
75 K K K K Latin capital letter K
76 L L L L Latin capital letter L
77 M M M M Latin capital letter M
78 N N N N Latin capital letter N
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
79 O O O O Latin capital letter O
80 P P P P Latin capital letter P
81 Q Q Q Q Latin capital letter Q
82 R R R R Latin capital letter R
83 S S S S Latin capital letter S
84 T T T T Latin capital letter T
85 U U U U Latin capital letter U
86 V V V V Latin capital letter V
87 W W W W Latin capital letter W
88 X X X X Latin capital letter X
89 Y Y Y Y Latin capital letter Y
90 Z Z Z Z Latin capital letter Z
91 [ [ [ [ left square bracket
92 \ \ \ \ reverse solidus
93 ] ] ] ] right square bracket
94 ^ ^ ^ ^ circumflex accent
95 _ _ _ _ low line
96 ` ` ` ` grave accent
97 a a a a Latin small letter a
98 b b b b Latin small letter b
99 c c c c Latin small letter c
100 d d d d Latin small letter d
101 e e e e Latin small letter e
102 f f f f Latin small letter f
103 g g g g Latin small letter g
104 h h h h Latin small letter h
105 i i i i Latin small letter i
106 j j j j Latin small letter j
107 k k k k Latin small letter k
108 l l l l Latin small letter l
109 m m m m Latin small letter m
110 n n n n Latin small letter n
111 o o o o Latin small letter o
112 p p p p Latin small letter p
113 q q q q Latin small letter q
114 r r r r Latin small letter r
115 s s s s Latin small letter s
116 t t t t Latin small letter t
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
117 u u u u Latin small letter u
118 v v v v Latin small letter v
119 w w w w Latin small letter w
120 x x x x Latin small letter x
121 y y y y Latin small letter y
122 z z z z Latin small letter z
123 { { { { left curly bracket
124 | | | | vertical line
125 } } } } right curly bracket
126 ~ ~ ~ ~ tilde
127 DEL
128 € euro sign
129 • • • NOT USED
130 ‚ single low-9 quotation mark
131 ƒ Latin small letter f with hook
132 „ double low-9 quotation mark
133 … horizontal ellipsis
134 † dagger
135 ‡ double dagger
136 ˆ modifier letter circumflex accent
137 ‰ per mille sign
138 Š Latin capital letter S with caron
139 ‹ single left-pointing angle quotation mark
140 ΠLatin capital ligature OE
141 • • • NOT USED
142 Ž Latin capital letter Z with caron
143 • • • NOT USED
144 • • • NOT USED
145 ‘ left single quotation mark
146 ’ right single quotation mark
147 “ left double quotation mark
148 ” right double quotation mark
149 • bullet
150 – en dash
151 — em dash
152 ˜ small tilde
153 ™ trade mark sign
154 š Latin small letter s with caron
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
155 › single right-pointing angle quotation mark
156 œ Latin small ligature oe
157 • • • NOT USED
158 ž Latin small letter z with caron
159 Ÿ Latin capital letter Y with diaeresis
160 no-break space
161 ¡ ¡ ¡ inverted exclamation mark
162 ¢ ¢ ¢ cent sign
163 £ £ £ pound sign
164 ¤ ¤ ¤ currency sign
165 ¥ ¥ ¥ yen sign
166 ¦ ¦ ¦ broken bar
167 § § § section sign
168 ¨ ¨ ¨ diaeresis
169 © © © copyright sign
170 ª ª ª feminine ordinal indicator
171 « « « left-pointing double angle quotation mark
172 ¬ ¬ ¬ not sign
173 soft hyphen
174 ® ® ® registered sign
175 ¯ ¯ ¯ macron
176 ° ° ° degree sign
177 ± ± ± plus-minus sign
178 ² ² ² superscript two
179 ³ ³ ³ superscript three
180 ´ ´ ´ acute accent
181 µ µ µ micro sign
182 ¶ ¶ ¶ pilcrow sign
183 · · · middle dot
184 ¸ ¸ ¸ cedilla
185 ¹ ¹ ¹ superscript one
186 º º º masculine ordinal indicator
187 » » » right-pointing double angle quotation mark
188 ¼ ¼ ¼ vulgar fraction one quarter
189 ½ ½ ½ vulgar fraction one half
190 ¾ ¾ ¾ vulgar fraction three quarters
191 ¿ ¿ ¿ inverted question mark
192 À À À Latin capital letter A with grave
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
193 Á Á Á Latin capital letter A with acute
194 Â Â Â Latin capital letter A with circumflex
195 Ã Ã Ã Latin capital letter A with tilde
196 Ä Ä Ä Latin capital letter A with diaeresis
197 Å Å Å Latin capital letter A with ring above
198 Æ Æ Æ Latin capital letter AE
199 Ç Ç Ç Latin capital letter C with cedilla
200 È È È Latin capital letter E with grave
201 É É É Latin capital letter E with acute
202 Ê Ê Ê Latin capital letter E with circumflex
203 Ë Ë Ë Latin capital letter E with diaeresis
204 Ì Ì Ì Latin capital letter I with grave
205 Í Í Í Latin capital letter I with acute
206 Î Î Î Latin capital letter I with circumflex
207 Ï Ï Ï Latin capital letter I with diaeresis
208 Ð Ð Ð Latin capital letter Eth
209 Ñ Ñ Ñ Latin capital letter N with tilde
210 Ò Ò Ò Latin capital letter O with grave
211 Ó Ó Ó Latin capital letter O with acute
212 Ô Ô Ô Latin capital letter O with circumflex
213 Õ Õ Õ Latin capital letter O with tilde
214 Ö Ö Ö Latin capital letter O with diaeresis
215 × × × multiplication sign
216 Ø Ø Ø Latin capital letter O with stroke
217 Ù Ù Ù Latin capital letter U with grave
218 Ú Ú Ú Latin capital letter U with acute
219 Û Û Û Latin capital letter U with circumflex
220 Ü Ü Ü Latin capital letter U with diaeresis
221 Ý Ý Ý Latin capital letter Y with acute
222 Þ Þ Þ Latin capital letter Thorn
223 ß ß ß Latin small letter sharp s
224 à à à Latin small letter a with grave
225 á á á Latin small letter a with acute
226 â â â Latin small letter a with circumflex
227 ã ã ã Latin small letter a with tilde
228 ä ä ä Latin small letter a with diaeresis
229 å å å Latin small letter a with ring above
230 æ æ æ Latin small letter ae
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
231 ç ç ç Latin small letter c with cedilla
232 è è è Latin small letter e with grave
233 é é é Latin small letter e with acute
234 ê ê ê Latin small letter e with circumflex
235 ë ë ë Latin small letter e with diaeresis
236 ì ì ì Latin small letter i with grave
237 í í í Latin small letter i with acute
238 î î î Latin small letter i with circumflex
239 ï ï ï Latin small letter i with diaeresis
240 ð ð ð Latin small letter eth
241 ñ ñ ñ Latin small letter n with tilde
242 ò ò ò Latin small letter o with grave
243 ó ó ó Latin small letter o with acute
244 ô ô ô Latin small letter o with circumflex
245 õ õ õ Latin small letter o with tilde
246 ö ö ö Latin small letter o with diaeresis
247 ÷ ÷ ÷ division sign
248 ø ø ø Latin small letter o with stroke
249 ù ù ù Latin small letter u with grave
250 ú ú ú Latin small letter u with acute
251 û û û Latin small letter with circumflex
252 ü ü ü Latin small letter u with diaeresis
253 ý ý ý Latin small letter y with acute
254 þ þ þ Latin small letter thorn
255 ÿ ÿ ÿ Latin small letter y with diaeresis
The ASCII Character Set
ASCII uses the values from 0 to 31 (and 127) for control characters.
ASCII uses the values from 32 to 126 for letters, digits, and symbols.
ASCII does not use the values from 128 to 255.
The ANSI Character Set (Windows-1252)
ANSI is identical to ASCII for the values from 0 to 127.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
ANSI has a proprietary set of characters for the values from 128 to 159.
ANSI is identical to UTF-8 for the values from 160 to 255.
The ISO-8859-1 Character Set
8859-1 is identical to ASCII for the values from 0 to 127.
8859-1 does not use the values from 128 to 159.
8859-1 is identical to UTF-8 for the values from 160 to 255.
The UTF-8 Character Set
UTF-8 is identical to ASCII for the values from 0 to 127.
UTF-8 does not use the values from 128 to 159.
UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.
UTF-8 continues from the value 256 with more than 10 000 different characters.
For a closer look, study our Complete HTML Character Set Reference.
HTML Uniform Resource Locators
A URL is another word for a web address.
A URL can be composed of words ([Link]), or an Internet Protocol (IP) address
([Link]).
Most people enter the name when surfing, because names are easier to remember than numbers.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
URL - Uniform Resource Locator
Web browsers request pages from web servers by using a URL.
When you click on a link in an HTML page, an underlying <a> tag points to an address on the
web.
A Uniform Resource Locator (URL) is used to address a document (or other data) on the web.
A web address, like [Link] follows these syntax rules:
scheme://[Link]:port/path/filename
Explanation:
• scheme - defines the type of Internet service (most common is http)
• host - defines the domain host (default host for http is www)
• domain - defines the Internet domain name ([Link])
• port - defines the port number at the host (default for http is 80)
• path - defines a path at the server (If omitted: the root directory of the site)
• filename - defines the name of a document or resource
Common URL Schemes
The table below lists some common schemes:
Scheme Short for Used for
http HyperText Transfer Protocol Common web pages. Not encrypted
Secure HyperText Transfer
https Secure web pages. Encrypted
Protocol
ftp File Transfer Protocol Downloading or uploading files
file A file on your computer
URL Encoding
URLs can only be sent over the Internet using the ASCII character-set.
Since URLs often contain characters outside the ASCII set, the URL has to be converted into
ASCII.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
URL encoding converts characters into a format that can be transmitted over the Internet.
URL encoding replaces non ASCII characters with a "%" followed by hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or
%20.
Try It Yourself
Hello Günter
If you click "Submit", the browser will URL encode the input before it is sent to the server.
A page at the server will display the received input.
Try some other input and click Submit again.
ASCII Encoding Examples
Your browser will encode input, according to the character-set used in your page.
The default character-set in HTML5 is UTF-8.
Character From Windows-1252 From UTF-8
€ %80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
 %C2 %C3%82
à %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
HTML and XHTML
XHTML is HTML written as XML.
What Is XHTML?
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is almost identical to HTML
• XHTML is stricter than HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
Why XHTML?
Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does not follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
Today's market consists of different browser technologies. Some browsers run on computers, and
some browsers run on mobile phones or other small devices. Smaller devices often lack the
resources or power to interpret "bad" markup.
XML is a markup language where documents must be marked up correctly (be "well-formed").
If you want to study XML, please read our XML tutorial.
By combining the strengths of HTML and XML, XHTML was developed.
XHTML is HTML redesigned as XML.
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
The Most Important Differences from HTML:
Document Structure
• XHTML DOCTYPE is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
XHTML Elements
• XHTML elements must be properly nested
• XHTML elements must always be closed
• XHTML elements must be in lowercase
• XHTML documents must have one root element
XHTML Attributes
• Attribute names must be in lower case
• Attribute values must be quoted
• Attribute minimization is forbidden
<!DOCTYPE ....> Is Mandatory
An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute
in <html> must specify the xml namespace for the document.
This example shows an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link]
<head>
<title>Title of document</title>
</head>
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
<body>
some content
</body>
</html>
XHTML Elements Must Be Properly Nested
In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
XHTML Elements Must Always Be Closed
This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Also Be Closed
This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="[Link]" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="[Link]" alt="Happy face" />
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
XHTML Elements Must Be In Lower Case
This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
XHTML Attribute Names Must Be In Lower Case
This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">
Attribute Values Must Be Quoted
This is wrong:
<table width=100%>
This is correct:
<table width="100%">
Attribute Minimization Is Forbidden
Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
Wrong:
<input type="text" name="lastname" disabled />
Correct:
<input type="text" name="lastname" disabled="disabled" />
How to Convert from HTML to XHTML
1. Add an XHTML <!DOCTYPE> to the first line of every page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values
Validate XHTML With The W3C Validator
Put your web address in the box below:
[Link] w w .w [Link]/html/demo_xhtml.asp
eference of all URL encodings, visit our URL Encoding Reference.
<p><span class="best_studio">STUDIO X</span> is the best studio ever.</p>
and use CSS to define the style
Dr. Md. Sarwar Hosain
Associate Professor
Dept. of ICE, PUST
.best_studio {
font-family: Arial,
font-size: 22px
}
<p>
<span>STUDIO X</span> is the best studio ever
</p>
CSS
p {
font-size:12px;
}
span {
font-size:16px;
font-weight:bold;
}
You might also like
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure74 pages
- HTML Basics: Structure and Elements GuideNo ratings yetHTML Basics: Structure and Elements Guide117 pages
- Understanding HTML Structure and ElementsNo ratings yetUnderstanding HTML Structure and Elements5 pages
- Understanding HTML Basics and StructureNo ratings yetUnderstanding HTML Basics and Structure26 pages
- Understanding HTML Elements and AttributesNo ratings yetUnderstanding HTML Elements and Attributes23 pages
- 44 - Chapter 1 - HTML-4 Handouts - ZeeshanNo ratings yet44 - Chapter 1 - HTML-4 Handouts - Zeeshan26 pages
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure99 pages
- Introduction to HTML Basics and StructureNo ratings yetIntroduction to HTML Basics and Structure155 pages
- Remedies for Longevity and Health IssuesNo ratings yetRemedies for Longevity and Health Issues3 pages
- Mid-Term Test 5: Listening & ComprehensionNo ratings yetMid-Term Test 5: Listening & Comprehension5 pages
- Pre-Bid Conference Notes for Tender ZW1PC25001No ratings yetPre-Bid Conference Notes for Tender ZW1PC250012 pages
- AgriNurture Inc.: Growth Strategies in AgricultureNo ratings yetAgriNurture Inc.: Growth Strategies in Agriculture74 pages
- Preventive Maintenance for Light Duty VehiclesNo ratings yetPreventive Maintenance for Light Duty Vehicles7 pages
- Social Styles Handbook Adapt Your Style To Win Trust The Ebook100% (1)Social Styles Handbook Adapt Your Style To Win Trust The Ebook167 pages
- Ina Company Financial Statement ChallengesNo ratings yetIna Company Financial Statement Challenges3 pages
- Chocolate Ridge - Knitted Sweater in DROPS AirNo ratings yetChocolate Ridge - Knitted Sweater in DROPS Air7 pages
- Digital Classroom Revolution in EducationNo ratings yetDigital Classroom Revolution in Education2 pages
- RERA Sale Agreement Draft for Mumbai PropertyNo ratings yetRERA Sale Agreement Draft for Mumbai Property53 pages