Basic principles involved in developing a web site

An effective website design should fulfill its intended function by conveying

its particular message whilst simultaneously engaging the visitor.

Several factors such as consistency, colors, typography, imagery, simplicity

and functionality all contribute to good website design.
1. WEBSITE PURPOSE
Your website needs to accommodate the needs of the user.

Having a simple clear intention on all pages will help the user interact with what
you have to offer.

There are many different purposes that websites may have but there are core
purposes common to all websites;

1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care
2. SIMPLICITY
Simplicity is the best way to go when considering the user experience and the
usability of your website.

Below are ways to achieve simplicity through design.

Colour
Colour has the power to communicate messages and evoke emotional responses.
Finding a colour palette that fits your brand will allow you to influence your
customer’s behaviour towards your brand.
Keep the colour selection limited to less than 5 colours.
Complementary colours work very well.
Pleasing colour combinations increase customer engagement and make the user
feel good.
Type
Typography has an important role to play on your website.
It commands attention and works as the visual interpretation of the brands voice.
Typefaces should be legible and only use a maximum of 3 different fonts on the
website.
Imagery

Imagery is every visual aspect used within communications.

This includes still photography, illustration, video and all forms of graphics.

All imagery should be expressive and capture the spirit of the company and act as
the embodiment of their brand personality.

Most of the initial information we consume on websites is visual and as a first

impression it is important that high quality images are used to form an
impression of professionalism and credibility in the visitors mind.
3. NAVIGATION

Navigation is the way finding system used on websites where visitors interact and
find what they are looking for.

Website navigation is key to retaining visitors.

If the websites navigation is confusing visitors will give up and find what they
need elsewhere.

Keeping navigation simple, intuitive and consistent on every page is key.

4. F-SHAPED PATTERN READING

The F- based pattern is the most common way visitors scan text on a website.

Eye tracking studies have found that most of what people see is in the top and
left area of the screen.

The F’ shaped layout mimics our natural pattern of reading in the West (left to
right and top to bottom).

An effective designed website will work with a readers natural pattern of

scanning the page.
5. VISUAL HIERARCHY
Visual hierarchy is the arrangement of elements is order of importance.
This is done either by size, colour, imagery, contrast, typographically, whitespace,
texture and style.
One of the most important functions of visual hierarchy is to establish a focal
point; this shows visitors where the most important information is.

6. CONTENT
An effective web design has both great design and great content.
Using compelling language great content can attract and influence visitors by
converting them into customers.
7. GRID BASED LAYOUT
Grids help to structure your design and keep your content organized.
The grid helps to align elements on the page and keep it clean.
The grid based layout arranges content into a clean rigid grid structure with
columns, sections that line up and feel balanced and impose order and results in
an aesthetically pleasing website.

8. LOAD TIME
Waiting for a website to load will lose visitors.
Nearly half of web visitors expect a site to load in 2 seconds or less and they will
potentially leave a site that isn’t loaded within 3 seconds.
Optimising image sizes will help load your site faster.
9. MOBILE FRIENDLY

More people are using their phones or other devices to browse the web.

It is important to consider building your website with a responsive layout where

your website can adjust to different screens.
Website
A website is a combination of different web pages
linked together in a certain fashion according to
the designer’s will and organizational need served
through the same domain name server.

The developed website is prepared and

maintained by a person, group or an organization.
Website
Website is typically hosted on single web server for its access
through network.

Each website is provided with a unique uniform resource

locator (URL) and accessed through the hyper text transfer
protocol (HTTP) responsible for making communication
possible between client machine and the server.
Types of Website
1. Static Website 2. Dynamic Website

Static Website:

In Static Websites, Web pages are written in languages such as HTML,

JavaScript, CSS, etc.

The web pages are prebuilt and the Content of pages is same for all visitors.

For static web pages when a server receives a request for a web page, then
the server sends the response to the client without doing any additional
process hence static Websites are fast.

And these web pages are seen through a web browser.

Types of Website
In static web pages, Pages will remain the same until someone
changes it manually.

There is no processing of content on the server (according to

the user) in Static Websites.
Types of Website
Web pages are returned by the server with no change
therefore, There is no interaction with databases.

Also, they are less costly as the host does not need to support
server-side processing with different languages.

Note: Static does not mean that it will not respond to user
actions, These Websites are called static because these cannot
be manipulated on the server or interaction with databases
(which is the case in Dynamic Websites).
Dynamic Website:

In Dynamic Websites, Web pages are returned by the server

which are first processed and then sent to users.

It means they are not prebuilt web pages but they are built
according to the user’s demand with the help of server-side
scripting languages such as PHP, Node.js, ASP.NET and many
more supported by the server.

So, they are slower than static websites but updates and
interaction with databases are possible.
Dynamic Websites are used over Static Websites as updates can be
done very easily as compared to static websites (Where altering in
every page is required) but in Dynamic Websites, it is possible to do a
common change once and it will reflect in all the web pages.

In dynamic web pages, the Content of pages is different for different

visitors.

It takes more time to load than the static web page.

Dynamic web pages are used where the information is changed

frequently, for example, stock prices, weather information, etc.
SL.NO STATIC WEB PAGE DYNAMIC WEB PAGE
In static web pages, Pages will remain same until In dynamic web pages, Content of pages are
1.
someone changes it manually. different for different visitors.

Same content is delivered everytime the page is Content may change everytime the page is loaded.
2.
loaded.
3. Static Web Pages are simple in terms of complexity. Dynamic web pages are complicated.

In dynamic web page, Information are change

4. In static web pages, Information are change rarely.
frequently.
Static Web Page takes less time for loading than
5. Dynamic web page takes more time for loading.
dynamic web page.
6. In Static Web Pages, database is not used. In dynamic web pages, database is used.
7.
Cheaper Development costs. More Development costs.

8. No feature of Content Management. Feature of Content Management System.

Static web pages are written in languages such as: Dynamic web pages are written in languages such
9.
HTML, JavaScript, CSS, etc. as: CGI, AJAX, ASP, ASP.NET, etc.
 What is a Domain Name?
Domain name is the address of your website that people type in the browser’s URL
bar to visit your website.

In other words, if your website was a house, then your domain name will be its
address. That’s really hard to memorize and type. Which is why a unique domain
name will be easier for users to remember and type.

It’s basically a string of recognizable words that, when typed in the browser, redirects
the user to your server IP.

You see, when a website is created, it often comes with a unique address known as a
Domain Name Servers (DNS) which often looks like this:

Yahoo.co.in
Xyz.org
Internet is basically a giant network of computers connected to each
other through cables and other medium.

To easily identify them, each computer is assigned a series of numbers

called IP Address.

This IP address is a combination of numbers separated with dots.

Typically, IP addresses look like this:
66.249.66.1

Computers have no problem identifying and remembering these

numbers. However, it is impossible for humans to remember and use
these numbers to connect to websites on the internet.
To solve this problem, domain names were invented.

A domain name can have words which makes it easy to

remember website addresses.

Now if you wanted to visit a website on the internet,

you don’t need to type a string of numbers. Instead, you
can type in an easy to remember domain name, for
example, xyz.com.
When you want to start a website, you need to have a domain name.

To own your own domain, you will need to register your domain with a domain
registrar.

Guidelines to create your domain name:

• Keep it short and easy to remember Avoid trademarked names

• Get a .com or .net whenever it's possible
• Don't be afraid to make up a word or use a compound word
• Write it out and read it repeatedly before purchasing
Checking on whether a domain name’s availability is easy
enough.

You can do a simple search with one of the domain registrars;

or, use a Whois search engines such to verify whether your
domain name is available or has been taken.

When you register a domain name, all of your contact

information and ownership details will be detailed into WHOIS.

This means details such as your email address, home address,

telephone number, etc., will be made available to the public.
What is Web Hosting?
 Web hosting is the place where all the files of your website reside. It is like the
home of your website where it actually lives.

 A web hosting is a computer where people store their websites.

 Web hosting refers to the company that rent out their computer/servers to
store your website and provide Internet connectivity so that other users can
access to the files on your website.

 For most cases, these hosting companies will handle server maintenance
work, such as backup, root configuration, maintenance, disaster recoveries,
and so on.
All websites on the internet, need web hosting.

When someone enters your domain name in a browser,

the domain name is translated into the IP address of
your web hosting company’s computer.

This computer contains your website’s files, and it sends

those files back to the users’ browsers.
Web hosting companies specialize in storing and serving
websites. They offer different types of hosting plans to their
customers.

Without domain names, it will not be possible for people to

find your website and without web hosting you cannot build a
website.

You can buy domain name and web hosting from two different
companies. However, in that case you will have to point your
domain name to your web hosting company by editing its DNS
settings.
How does Web Hosting Work?
Think of it as a house where you store all your stuffs; but instead of storing your
clothes and furniture, you store digital files (HTML, documents, images, videos,
etc) in a web host.

Usually, a web hosting company do more than just storing your website. Here
are some value-added services and features to expect from your hosting
provider:
• Domain registration – So you can buy and manage domain and hosting from
the same provider
• Website builder – Drag-and-drop web editing tool to create a website
• Email hosting – To send and receive emails from [email protected]
• Basic hardware (server setup) and software (CMS, server OS, etc) support.
Different Types of Web Host
While all types of servers will act as a storage center for your website, they differ
in the amount of storage capacity, control, technical knowledge requirement,
server speed, and reliability.

Shared Hosting: In shared hosting, one’s web site is placed on the same server as
many other sites, ranging from a few to hundreds or thousands.

Virtual Private Server (VPS) Hosting:A virtual private server hosting divides a
server into virtual servers, where each websites is like hosted on their own
dedicated server, but they’re actually sharing a server with a few different other
users.
Different Types of Web Host

Dedicated Server Hosting:A dedicated server offers the maximum control over
the web server your website is stored on – You exclusively rent an entire server.
Your website(s) is the only website stored on the server.

Cloud Hosting: Cloud hosting offers unlimited ability to handle high traffic or
traffic spikes. Here’s how it works: A team of servers (called a cloud) work
together to host a group of websites. This allows multiple computers to work
together to handle high traffic levels or spikes for any particular website.
Responsive Web Designing
Responsive Web Design is about using HTML and CSS to automatically resize,
hide, shrink, or enlarge, a website, to make it look good on all devices (desktops,
tablets, and phones):
 Setting The Viewport

When making responsive web pages, add the following <meta> element in all
your web pages:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This will set the viewport of your page, which will give the browser instructions
on how to control the page's dimensions and scaling.
Responsive Image
Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale
up and down:

<img src="img_girl.jpg" style="width:100%;">

Notice that in the example above, the image can be scaled up to be larger than its
original size. A better solution, in many cases, will be to use the max-width
property instead.
Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be
larger than its original size:

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

Resize the browser window to see how the image below change depending on the width:
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
Responsive Text Size

• The text size can be set with a "vw" unit, which means the "viewport width".
• That way the text size will follow the size of the browser window:

<h1 style="font-size:10vw">Hello World</h1>

Viewport is the browser window size.

1vw = 1% of viewport width.

If the viewport is 50cm wide, 1vw is 0.5cm.

 HTML – OVERVIEW
HTML stands for Hypertext Markup Language, and it
is the most widely used language to write Web
Pages.

Hypertext refers to the way in which Web pages

(HTML documents) are linked together. Thus, the link
available on a webpage is called Hypertext.
 HTML – OVERVIEW
HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web
browser how to structure it to display.

Originally, HTML was developed with the intent of defining the

structure of documents like headings, paragraphs, lists, and so
forth to facilitate the sharing of scientific information between
researchers.

Now, HTML is being widely used to format web pages with the
help of different tags available in HTML language.
• HTML is the standard markup language for creating Web pages.

• HTML stands for Hyper Text Markup Language

• HTML describes the structure of a Web page

• HTML consists of a series of elements

• HTML elements tell the browser how to display the content

• HTML elements are represented by tags

• HTML tags label pieces of content such as "heading", "paragraph", "table", and so on

• Browsers do not display the HTML tags, but use them to render the content of the page
Basic HTML Document

In its simplest form, following is an example of an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
let's save it in an HTML file test.htm using your favorite text editor.

Finally open it using a web browser like Internet Explorer or Google Chrome, or
Firefox etc.

The <!DOCTYPE html> declaration defines this document to be HTML5

The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags

HTML is a markup language and makes use of various tags to format the content.

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</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 forward slash inserted before the tag name

Except few tags, most of the tags have their corresponding closing tags.

For example, <html> has its closing tag</html> and <body> tag has its closing tag </body> tag etc.
• We need to study various tags and understand how they behave, while
formatting a textual document.

• Learning HTML is simple as users have to learn the usage of different tags in
order to format the text or images to make a beautiful webpage.

• World Wide Web Consortium (W3C) recommends to use lowercase tags

starting from HTML 4.
Web Browsers

• The purpose of a web browser (Chrome, Edge, 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:
HTML Document Structure

*Only the content inside the <body> section (the white area above) is displayed in a browser .
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>
HTML Versions
Since the early days of the web, there have been many versions of
HTML:
Write HTML Using Notepad or
TextEdit
• Web pages can be created and modified by using professional HTML
editors.

• However, for learning HTML a simple text editor like Notepad (PC) or
TextEdit (Mac) is sufficient.
HTML Documents
All HTML documents must start with a document 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>.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
 HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

<h6> defines the least important heading:

<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

<!DOCTYPE html>
<html>
<body>

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

</body>
• </html> HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
• <!-- Write your comments here -->
 HTML Links

HTML links are defined with the <a> tag:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://xyz.com">This is a link</a>

</body>
</html>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

 HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src=“yyy.jpg" alt=“xyz.com" width="104" height="142">

</body>
</html>
HTML Buttons
HTML buttons are defined with the <button> tag:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>

<button>Click me</button>

</body>
</html>
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the <ol> (ordered/numbered list) tag, followed by <li> tags
(list items):

<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
HTML Elements
An HTML element usually consists of a start tag and an end tag, with
the content inserted in between:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

HTML elements with no content are called empty elements. Empty elements do not have an
end tag, such as the <br> element (which indicates a line break).
Nested HTML Elements
HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

Inside the <html> element is the <body> element.

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

Inside the <body> element is two other HTML elements: <h1> and <p>.

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading. The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

Do Not Forget the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

<!DOCTYPE html>
<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
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):

<!DOCTYPE html>
<html>
<body>

<p>This is a <br> paragraph with a line break.</p>

</body>
</html>

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 if you need to make your

document readable by XML parsers, you must close all HTML elements
properly.
 HTML Is Not Case Sensitive
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 HTML, and demands lowercase for stricter
document types like XHTML.

At W3Schools we always use lowercase tags.

HTML Attributes

Attributes provide additional information about HTML elements.

• HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in the href attribute:

<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href
attribute:</p>

<a href="https://www.w3schools.com">This is a link</a>

</body>
</html>
You will learn more about links and the <a> tag later in this tutorial.

The src Attribute

HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>

<p>HTML images are defined with the img tag, and the filename of the image source is specified in the src
attribute:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>
 The width and height Attributes
HTML images also have width and height attributes, which specifies the width and height of the image:

<!DOCTYPE html>
<html>
<body>

<h2>Size Attributes</h2>
<p>Images in HTML have a set of size attributes, which specifies the width and height of the image:</p>

<img src="img_girl.jpg" width="500" height="600">

</body>
</html>

The width and height are specified in pixels by default; so width="500" means 500 pixels wide.
The alt Attribute

The alt attribute specifies an alternative text to be used, if an image cannot be

displayed.

The value of the alt attribute can be read by screen readers.

This way, someone "listening" to the webpage, e.g. a vision impaired person,
can "hear" the element.
<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>

<p>The alt attribute should reflect the image content, so users who cannot
see the image gets an understanding of what the image contains:</p>

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

</body>
</html>
The alt attribute is also useful if the image cannot be displayed (e.g. if it does
not exist):
<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="Girl with a jacket">

<p>If we try to display an image that does not exist, the value of the alt attribute
will be displayed instead. </p>

</body>
</html>
The style Attribute
The style attribute is used to specify the styling of an element, like color, font, size etc.

<!DOCTYPE html>
<html>
<body>

<h2>The style Attribute</h2>

<p>The style attribute is used to specify the styling of an element, like color:</p>

<p style="color:red">This is a paragraph.</p>

</body>
</html>
The lang Attribute

The language of the document can be declared in the <html> tag.

The language is declared with the lang attribute.

Declaring a language is important for accessibility applications (screen readers) and search engines:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>
 The title Attribute

Here, a title attribute is added to the <p> element.

The value of the title attribute will be displayed as a tooltip when you mouse
over the paragraph:

<p title="I'm a tooltip">

This is a paragraph.
</p>
 Single or Double Quotes
Double quotes around attribute values are the most common in HTML, but single
quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:

<p title='John "ShotGun" Nelson'>

All HTML elements can have attributes

The title attribute provides additional "tool-tip" information
The href attribute provides address information for links
The width and height attributes provide size information for images
The alt attribute provides text for screen readers
HTML Headings

Search engines use the headings to index the structure and content of your
web pages.

It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.

Use HTML headings for headings only. Don't use headings to make text BIG or
bold.
 Bigger Headings

Each HTML heading has a default size.

However, you can specify the size for any heading with the style attribute, using the
CSS font-size property:

<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:60px;">Heading 1</h1>
<p>You can change the size of a heading with the style attribute, using the font-size
property.</p>
</body>
</html>
 HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

<!DOCTYPE html><html><body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text</p>
</body>
</html>
The HTML <head> Element
The HTML <head> element is a container for metadata.
HTML metadata is data about the HTML document.
Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:

<!DOCTYPE html><html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
HTML Paragraphs

The HTML <p> element defines a paragraph:

<!DOCTYPE html>
<html><body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body></html>

Browsers automatically add some white space (a margin) before and after a
paragraph.
Most browsers will display HTML correctly even if you forget the end tag:

<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.
<p>This is a paragraph.
<p>This is a paragraph.
<p>Don't forget to close your HTML tags!</p>
</body>
</html>

The example above will work in most browsers, but do not rely on it. Dropping the end
tag can produce unexpected results or errors.
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:

<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>
The <br> tag is an empty tag, which means that it has no end tag
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:

<!DOCTYPE html><html><body><p>The pre tag preserves both spaces and line breaks:</p>
<pre>
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.

</pre>
</body>
</html>
The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

The CSS background-color property defines the background color for an HTML
element.
This example sets the background color for a page to powderblue:

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

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

</body>
</html>

The CSS color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
The CSS font-family property defines the font to be used for an HTML element:

<!DOCTYPE html><html><body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body></html>

The CSS font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

The CSS text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
HTML Formatting Elements

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:

<b> - Bold text

<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
The HTML <b> element defines bold text, without any extra importance.
<b>This text is bold</b>

The HTML <strong> element defines strong text, with added semantic "strong"
importance.
<strong>This text is strong</strong>

The HTML <i> element defines italic text, without any extra importance.

The HTML <em> element defines emphasized text, with added semantic importance.
<em>This text is emphasized</em>

The HTML <small> element defines smaller text:

<h2>HTML <small>Small</small> Formatting</h2>
The HTML <mark> element defines marked/highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>

The HTML <del> element defines deleted/removed text.

<p>My favorite color is <del>blue</del> red.</p>

The HTML <ins> element defines inserted/added text.

<p>My favorite <ins>color</ins> is red.</p>

The HTML <sub> element defines subscripted text.

<p>This is _subscripted text.</p>

The HTML <sup> element defines superscripted text.

<p>This is ^{superscripted} text.</p>

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element.

<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
The HTML <abbr> element defines an abbreviation or an acronym.

Marking abbreviations can give useful information to browsers, translation

systems and search-engines.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>

The HTML <address> element defines contact information (author/owner) of a

document or an article.

The <address> element is usually displayed in italic. Most browsers will add a line
break before and after the element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

The HTML <bdo> element defines bi-directional override.

The <bdo> element is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

Notice that 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 source code.
With comments you can place notifications and reminders in your HTML:
<!-- 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:
<!-- Do not display this image at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

In HTML, a color can be specified by using a color name:

<!DOCTYPE html><html><body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body></html>
You can set the color of borders:

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and
HSLA values:

Same as color name "Tomato":

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
RGB Value

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

Experiment by mixing the RGB values below:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

</body>
</html>
RGBA Value
RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:

<!DOCTYPE html><html><body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>You can make transparent colors by using the RGBA color value.</p></body></html>
HTML HEX Colors
In HTML, a color can be specified using a hexadecimal value in the form: #rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

Experiment by mixing the HEX values below:

<!DOCTYPE html><html><body>

<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>

<p>In HTML, you can specify colors using Hex values.</p></body></html>

HTML HSL Colors
In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
Experiment by mixing the HSL values below:

<!DOCTYPE html><html><body>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>
<p>In HTML, you can specify colors using HSL values.</p></body></html>
Saturation
Saturation can be described as the intensity of a color.

• 100% is pure color, no shades of gray

• 50% is 50% gray, but you can still see the color.
• 0% is completely gray, you can no longer see the color.

<!DOCTYPE html><html><body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>

<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>
Lightness

The lightness of a color can be described as how much light you want to give the color, where 0%
means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

<!DOCTYPE html><html><body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>

<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>
</body>
</html>
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100%
to get darker/lighter shades:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>

<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>

<p>With HSL colors, shades of gray are made by setting the saturation to 0%, and adjusting the lightness
according to how dark/light the gray color should be.</p>

</body>
</html>
HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a
color.

An HSLA color value is specified with:hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the HSLA values below:

<!DOCTYPE html><html><body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>
HTML Links - Hyperlinks
Links are found in nearly all web pages. Links allow users to click their way from
page to page.

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
hand.

A link does not have to be text. It can be an image or any other HTML element.
HTML Links - Syntax
Hyperlinks are defined with the HTML <a> tag:

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

<!DOCTYPE html><html><body>
<h2>HTML Links</h2>
<p><a href="https://www.xyz.com/html/">Visit our HTML</a></p>
</body></html>

The href attribute specifies the destination address (https://www.xyz.com/html/) of the link.

The link text is the visible part.

Clicking on the link text will send you to the specified destination address.
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 https://www....).

<!DOCTYPE html><html><body>
<h2>Local Links</h2>

<p><a href="html_images.asp">HTML Images</a> is a link to a page on this website.</p>

<p><a href="https://www.w3.org/">W3C</a> is a link to a website on the World Wide

Web.</p>

</body>
</html>
HTML Links - The target Attribute
The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

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

_self - Opens the linked document in the same window/tab as it was clicked (this is default)

_parent - Will open the in the linked document next level up of a frame if they were nested to inside
one another

_top - This breaks outside of all the frames it is nested in and opens the link as top document in the
browser window.

framename - Opens the linked document in a named frame

<!DOCTYPE html><html><body>

<h2>The target Attribute</h2>

<a href="https://www.xyz.com/html/" target="_blank">Visit HTML</a>

<p>If you set the target attribute to "_blank", the link will open in a new
browser window or tab.</p>

</body>
</html>
HTML Links - Image as Link

<!DOCTYPE html><html><body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML visit"
style="width:42px;height:42px;border:0">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a
border around the image.</p>
</body></html>
Link Titles

The title attribute specifies extra information about an element. The information
is most often shown as a tooltip text when the mouse moves over the element.

<!DOCTYPE html><html><body>
<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves over
the element.</p>
<a href="https://www.xyz.com/html/" title="Go to xyz HTML section">Visit our
HTML</a>
</body>
</html>
External Paths

External pages can be referenced with a full URL or with a path relative to the
current web page.

This example uses a full URL to link to a web page:

<!DOCTYPE html><html><body>
<h2>External Paths</h2>
<p>This example uses a full URL to link to a web page:</p>
<p><a href="https://www.w3schools.com/html/default.asp">HTML
tutorial</a></p>
</body></html>
This example links to a page located in the html folder on the current web site:

<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example links to a page located in the html folder on the current web site:</p>

<p><a href="/html/default.asp">HTML tutorial</a></p>

</body>
</html>
This example links to a page located in the same folder as the current page:

<!DOCTYPE html>
<html>
<body>

<h2>External Paths</h2>

<p>This example links to a page located in the same folder as the current page:</p>

<p><a href="default.asp">HTML tutorial</a></p>

</body>
</html>
In this example, the file path points to a file in the images folder located in the
folder one level above the current folder:

<!DOCTYPE html>
<html>
<body>

<h2>Using a Relative File Path</h2>

<img src="../images/picture.jpg" alt="Mountain" style="width:300px">

</body>
</html>
HTML Link Colors

By default, a link will appear like this (in all browsers):

• 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 CSS:

<!DOCTYPE html><html><head>
<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></head><body>
A links can also be styled as a button, by using CSS:

<!DOCTYPE html><html><head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style></head><body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body></html>
 HTML Links - Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if a webpage is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the
bookmark.

Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<!DOCTYPE html><html><body>
<p><a href="#C4">Jump to Chapter 4</a></p><p><a href="#C10">Jump to Chapter
10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
You can also add a link to a bookmark on another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
 HTML Images

Images can improve the design and the appearance of a web page.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">

</body>
</html>
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">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some reason
cannot view it (because of slow connection, an error in the src attribute).

The value of the alt attribute should describe the image:

<!DOCTYPE html> <html> <body>

<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the
image gets an understanding of what the image contains:</p>
<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
</body></html>

If a browser cannot find an image, it will display the value of the alt attribute:
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.

<!DOCTYPE html><html><body>
<h2>Image Size</h2>
<p>Use the style attribute to specify the width and height of an image:</p>
<img src=“myimg.jpg" alt=“boy in a jacket" style="width:500px;height:600px;">
</body></html>

Alternatively, you can use the width and height attributes:

<!DOCTYPE html><html><body>
<p><h2>Image Size</h2>
In this example, we specify the width and height of an image with the width and
height attributes:</p>
<img src="imgpic.jpg" alt=“boy in a jacket" width="500" height="600">
</body></html>

The width and height attributes always defines the width and height of the image
in pixels.

It prevents styles sheets from changing the size of images:

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:

<!DOCTYPE html><html><body>
<h2>Images in Another Folder</h2>
<p>It is common to store images in a sub-folder. You must then include the folder
name in the src attribute:</p>
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body></html>
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:

<!DOCTYPE html><html><body>

<h2>Images on Another Server</h2>

<img src="https://www.xyz.com/images/im_green.jpg" alt=“xyz.com"

style="width:104px;height:142px;">

</body></html>
Animated Images
HTML allows animated GIFs:

<!DOCTYPE html><html><body>

<p><h2>The GIF standard allows moving images.Animated Images</h2></p>

<img src="programming.gif" alt="Computer man"
style="width:48px;height:48px;">

</body></html>
<!DOCTYPE html><html><body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around
the image.</p>
</body></html>

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border
around the image (when the image is a link).
 Image Floating

<!DOCTYPE html><html><body>

<h2>Floating Images</h2>

<p><strong>Float the image to the right:</strong></p>

<p>

<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a
floating image.</p>

</body></html>
HTML Image Maps

With image maps, you can add clickable areas on an image.

The <map> tag defines an image-map.
<!DOCTYPE html><html><body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the
topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body></html>
The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image map.

Then add a <map> element.

The <map> element is used to create an image map, and is linked to the image
by using the name attribute:

The name attribute must have the same value as the usemap attribute.

Then add the clickable areas.

You must define the shape of the area, and you can choose one of these values:

rect - defines a rectangular region

circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region

Coordinates
You must define some coordinates to be able to place the clickable area onto the image.

The coordinates come in pairs, one for the x-axis and one for the y-axis.

The coordinates 34, 44 is located 34 pixels from the left margin and 44 pixels from the top:
The coordinates 270, 350 is located 270 pixels from the left margin and 350 pixels from the
top:
To add a circle area, first locate the coordinates of the center of the circle:
337, 300

Then specify the radius of the circle:

44 pixels

A clickable area does not have to be a link to another page, it can also trigger a
JavaScript function.

<area shape="circle" coords="337,300,44" onclick="myFunction()">

HTML Background Images
To add a background image in HTML, use the CSS property background-image.

To add a background image on an HTML element, you can use the style attribute:

<h2>Background Image</h2>

<div style="background-image: url('img_girl.jpg');">

You can specify background images<br>
for any visible HTML element.<br>
</div>

</body></html>
You can also specify the background image in the <style> element:
<!DOCTYPE html><html><style>
div {
background-image: url('img_girl.jpg');
}
</style>
<body>
<h2>Background Image</h2>
<div>
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>
If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it
has reach the end of the element.

To avoid the background image from repeating itself, use the background-repeat property.

To avoid the background image from repeating itself, use the background-repeat property.
<html>
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

<body><h2>Background No Repeat</h2>
<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

</body></html>
Background Cover
If you want the background image cover the entire element, you can set the background-size property to cover.

Also, to make sure the entire element is always covered, set the background-attachment property to fixed:
<!DOCTYPE html>
<html>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
<body>
<h2>Background Cover</h2>
<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the
BODY element.</p>
</body></html>
Background Stretch

If you want the background image stretch to fit the entire image in the element, you can set the
background-size property to 100% 100%:

<!DOCTYPE html><html>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style><body>
<h2>Background Stretch</h2>
<p>Set the background-size property to "100% 100%r" and the background image will be stretched to
cover the entire element, in this case the BODY element.</p>
</body></html>
The HTML <picture> Element

HTML5 introduced the <picture> element to add more flexibility when

specifying image resources.

The <picture> element contains a number of <source> elements, each

referring to different image sources. This way the browser can choose the
image that best fits the current view and/or device.

Each <source> element have attributes describing when their image is the
most suitable.
<!DOCTYPE html><html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>The picture Element</h2>
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
<p>Resize the browser to see different versions of the picture loading at different viewport sizes.

The browser looks for the first source element where the media query matches the user's current viewport width,and
fetches the image specified in the srcset attribute.</p>

<p>The img element is required as the last child tag of the picture declaration block.The img element is used to provide
backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>
<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>
</body></html>
There are two main purposes for the <picture> element:

1. Bandwidth
If you have a small screen or device, it is not necessary to load a large
image file. The browser will use the first <source> element with
matching attribute values, and ignore any of the following elements.

2. Format Support
Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the
browser will use the first format it recognizes and ignore any of the
following.
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head><body>
<h2>The picture Element</h2>
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>
<p>The picture element can be used when the image format is not supported by all
devices.</p>
<p>The device will use the first image format it supports, and ignore the rest of the images.</p>
</body></html>
The browser will use the first <source> element with matching attribute values, and ignore any
following <source> elements.
A reference within an html document always begins with an
ampersand(&) and ends with a semicolon(;).The form of the data
between these characters determines the type of reference.

One other html entity reference that is frequently used is &nbps; the
non breaking space character.

The define purpose of this character is to insert a space between

two strings while also informing the browser that it should not
perform word wrapping between these strings.

<p>
keep&nbsp;together keep&nbsp;together keep&nbsp;together
keep&nbps;together
</p>
Not all characters have entity references associated with them but many do; some examples of entity references are contained
in table 2.1,as shown below:

CHARACTER ENTITY REFERENCES

< &lt;
> &gt;
& &amp;
“ &quot;
‘ &apos;
© &copy;
n &ntilde;
Α &alpha;
V &forall;

We can use &nbsp; to produce multiple consecutive spaces in html document.

<p>
Hey, you.&nbps; Yes,&nbps; You are learning to create web pages.
</p>
TABLES:
• Define an HTML Table
• The <table> tag defines an HTML table.
• Each table row is defined with a <tr> tag. Each table header is defined
with a <th> tag. Each table data/cell is defined with a <td> tag.
• By default, the text in <th> elements are bold and centered.
• By default, the text in <td> elements are regular and left-aligned.
FRAMES:

A frame is a rectangular region within a browser window that displays a web page, alongside
other pages in other frames.

Frames are like tables in that they allow you to arrange text and graphics into rows and
columns.

Unlike a table cell, any frame can contain links that change the contents of other frames.

As in table a frameset starts filling it’s content(frames) row-wise.

A frame set document actually has no content.

It only tells the browser which other pages to load and how to arrange then in the browser
window.

A frame set document is an HTML page that instructs the web browser to split its window into
multiple frames and specifies which web page should be displayed in each frame.

An example of frameset is given below which divides the browser window into two frames as
rows.
firstpage.html

<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>first page</h1>
</body>
</html>

secondpage.html

<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>second page</h1>
</body>
</html>
myframe.html

<html><head><title>frame preview</title></head>
<frameset rows=”50%,50%”>
<frame src=”firstpage.html” name=”first”/>
<frame src=”secondpage.html” name=”second”/>
</frameset>
</html>
we can also size the fames using pixels.such a example is shown below.

<html><head><title>frame preview</title></head>
<frameset rows=”150,*,150”>
<frame src=”firstpage.html name=”first”/>
<frame src=”secondpage.html” name=”second”/>
</frameset>
</html>

the example divide the browser window into three rows, first row’s height is of 150 pixels,
third row’s height is also of 150 pixels and the second row’s height is of the rest of the pixels
of browser window size, means second row’s height is [(browser window size in pixels)-
(150+150).
Whenever you specify any frame size in pixels there must also be at least one
frame in the same frameset with the variable(*) width so that the document
can be displayed in a window of n size.

Because you can not predict the size of the window in which someone will view
your web page, it is often convenient to use percentages rather than the exact
pixel values to dictate the size of the rows and the columns.
For example to make a left frame 20% of the width of the browser window with the right
frame taking up the remaining 80% you would type the following:

<frameset cols=”20%,80%”>

To divide the browser window into four parts consider the following example
thirdpage.html

<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>third page</h1>
</body>
</html>
<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>fourth page</h1>
</body>
</html>

fourframe.html

<html><head><title>frame preview</title></head>
<frameset rows 50%,50% col=”50%,50%”>
<frame src=”firstpage.html name=”first”/>
<frame src=”secondpage.html” name=”second”/>
<frame src=”thirdpage.html name=”third”/>
<frame src=”fourth.html” name=”fourth”/>
</frameset>
</html>
<FRAME /> Tag

Within the <frameset> and </frameset> tags you should have a <frame/> tag indicating
which html document to display in each frame.

Include a src attribute in each <frame> tag with the address of the web page to load in that
frame.

You can include any html page you want to in a frame.

When you give a name to a frame with the name attribute in the <frame/> tag, you can
make any link on the page change the contents of that frame by using the target attribute
in an <a> tag.
For example:

<frame src=”mypage.html” name=”main”>

This displays the mypage.html page in that frame when the page loads and names the frame
main.

In the tag below:

<a href=”mypage.html” target=”main”>push here</a>

when the user clicks the link “push here” mypage.html is displayed in the frame named
“main” as the target attribute is set to the frame name “main”. If the target=”main” attribute
had not been included in the anchor tag the mypage.html page could have been displayed in
the current frame instead.
Nested frames:
By nesting one <frameset> within an other, you can create rather complex frame layout. For example the document shown in figure 2.9 the
nestframe.html document has a total of 9 frames. A cols frame set is used to split each row of the rows frameset into three pieces.

Figure 2.9

fifthpage.html

<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>fourth page</h1>
</body>
</html>

sixthpage.html

<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>fourth page</h1>
</body>
</html>

seventhpage.html

<
<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>fourth page</h1>
</body>
</html>

eighthpage.html

<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>fourth page</h1>
</body>
</html>
ninthpage.html

<html><head><title>top page</title></head>
<body><br/><br/><br/><br/><center><h1>fourth page</h1>
</body>
</html>

nestframe.html
<html><head><title>nesting of frame</title></head>
<frameset rows=”33%,*,33%”>
<frameset cols=”33%,*,33%”>
<frame src=”firstpage.html” name=”first”/>
<frame src=”secondpage.html” name=”second”/>
<frame src=”thirdpage.html” name=”third”/>
</frameset>
<frameset cols=”33%,*,33%”>
<frame src=”fourthpage.html” name=”fourth”/>
<frame src=”fifthpage.html” name=”fifth”/>
<frame src=”sixthpage.html” name=”sixth”/>
</frameset>
<frameset cols=”33%,*,33%”>
<frame src=”seventhpage.html” name=”seventh”/>
<frame src=”eighthpage.html” name=”eighth”/>
<frame src=”ninthpage.html” name=”ninth”/>
</frameset>
</frameset>
</html>

“nestframe.html”
 HTML Forms

Forms allow you to receive feedback, orders, or other information from your web page
readers.an html form is a web page that includes areas where readers can enter information
to be sent back to you, the publisher of the web page.

Every form must include a button for the user to submit the form. When someone clicks that
button, all the information he or she has filled in is sent (in a standard format) to an internet
address that you specify in the form itself. You have to put a special forms-processing
program at that address in order for that information to get to you.
CREATING A FORM:

Every form must begin with a <form> tag, which can be located anywhere in the body of the html document.
The form tag normally has two attributes, method and action
<form method=”post” action=”myprocess.jsp”>

The method is almost always post which means to send the form entry results as a document. Another method
is get which submits the results as part of the url header instead.

The action attribute specifies the address to which to send the form data. The form in figure 2.12 includes every
type of input you can currently use on html forms.
<html><head><title> my resume </title></head>
<body bgcolor="pink">
<h1> My details </h1>
<center><b>I want you to know about me</b></center>
<form method=”post” action=”resumeprocess.jsp”>
<input type=hidden name=”mail-to” [email protected]/>
Name <input type=”text” name=”myname” size=”30”/>
Father’s name <input type= ”text” name=”myfather” size=”30”/>
Age <select name=”myage”>
<option selected>0-10</option>
<option>11-20</option><option>21-30</option>
<option>31-40</option></select>
Gender <input type=radio name=”mygen” value=”male”
checked/>male
<input type=radio name=”mygen” value=”female”
/>female
Address <textarea name=”myaddress” rows=”5” cols=”70”></textarea>
Skills <input type=checkbox name=”myc” value="c/c++" checked=”checked”/>C/C++
<input type=checkbox name=”myj2ee” value="j2ee"/ >J2EE
<input type=checkbox name=”mynet” value=".net"/>.NET
Location <select size=”5” name=”mylocation”>
<option selected> new delhi </option>
<option> mumbai </option>
<option> kolkatta </option>
<option> orissa </option>
<option> bhopal </option>
<option> chennai </option>
<option> gujrat </option>
<option> bangalore </option>
</select>
<input type="submit" size="50" value="Click here to submit"/>
<input type=reset size="50" value="Clear"/>
</form>
</body></html>
Text input
To ask the user for a specific piece of information within a form, use the <input/> tag.

This tag must fall between the <form> and </form> tag but can be anywhere on the
page in relation to text, images, and other html tags for example, to ask for someone
names you can type the following :

Your first name<input type=text size=”20” maxlength=”30” name=”firstname”/>

The type attribute indicates what type of form elements to display a simple one line
text entry box in this case.

The size attribute indicates approximately how many characters wide the text input
box should be.

The maxlength determines the number of characters the user is allowed to ty[pe into
the textbox.
HIDDEN DATA:

When you want to send certain data items to the server that
processes a form but don’t want the user to see that, use
input type=hidden attribute. This attribute has no effect on
the browser display at all. It just adds any name and value you
specify to the form results when they are submitted.
For example the following makes the name value pair mail to,
[email protected]:
<input type=”hidden” name=”mail-to” xyz=
[email protected]/>
CHECK BOX:

The simplest input type is a check box, which appears as a small square the user can
select or deselect by clicking. You must give each check box a name. If you want a check
box to be checked by default when the forms comes up, include the checked attribute.

<input type=”checkbox” name=”myc” checked=”checked”/>

C/C++
<input type=”checkbox” name=”myjava”/> J2EE

the one labeled C/C++ would be checked. The one marked J2EE would be unchecked to
begins with, so the user would have to click it to turn it on.
Radio buttons

Radio buttons ,where only one choice can be selected at a time, are almost as simple
to implement as check boxes. Use the same name for all of the radio buttons in a
group:
Gender<input type=radio name=”mysex” value=”male” checked/>male
<input type=radio name=”mysex” value=”female” />female

if you include the checked attribute, that button is selected by default when the form
is displayed on the browser.
Selection Lists

Both scrolling list and pull-down pick lists are created with the
<select> tag. You use this tag together with the<option>tag:
<select name=”extras” size=”3” multiple>
<option selectd>electric window</option>
<option>AM/FM</option>
<option>turbo</option>
<option>J2ME</option> </select>

no html tags other than <option> and </option> should appear

between the <select> and </select> tags.
The size attribute here determines how many items show at once on the
selection list.

If size=”3” were used in the preceding code only the first two items would
be visible, and a scrollbar would appear next to the list so the user could
scroll down to see the fourth option.

Including the multiple attribute allows users to select more than one option
at a time, and the selected attribute makes an option selected by default.

If the user selects first two options the result returned by the selection list
are:

Extras=electric window
Extras=AM/FM
Text Area:

When you want to allow multiple lines of text in a single input item, use the
<textarea> and</textarea> tags instead.

any text you include between these two tags is displayed as the default entry. for
example

Address
<textarea name=”myaddress” rows=”5” cols=”70”>my address is:</textarea>

rows and cols attributes control the number of rows and columns of text that fit in the
input box.

Textarea boxes do have a scrollbar, however ,so the user can enter more text than fits
in the display area.
Submit:

Every form must include a button that submits the form data to the server. You can put
any label you like on this button with the value attribute:

Input type=”submit” value=”place my order now”/>

A gray button will be sized to fit the label you put in the value attribute. When the user
clicks, all the data items on the form are sent to the address of the form action attribute.

Custom submit button:

There is an easy way to substitute your own graphics for submit and reset button. Type
the following to use an image of your choice for a submit button.
<input type=”image” scr=”myimage.gif”/>
 CSS
CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work.

It can control the layout of multiple web pages all at once

External stylesheets are stored in CSS files CSS is a language that describes the style of an
HTML document.

CSS describes how HTML elements should be displayed.

CSS is used to define styles for your web pages, including the design, layout and variations
in display for different devices and screen sizes.
<!DOCTYPE html><html><head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head><body><h1>My First CSS Example</h1><p>This is a paragraph.</p>
</body></html>
CSS Syntax
A CSS rule-set consists of a selector and a declaration
block:
The selector points to the HTML element you want to style.

The declaration block contains one or more declarations

separated by semicolons.

Each declaration includes a CSS property name and a value,

separated by a colon.

A CSS declaration always ends with a semicolon, and declaration

blocks are surrounded by curly braces.
<!DOCTYPE html><html><head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head><body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body></html>
p is a selector in CSS (it points to the HTML element you want to style:
<p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
 CSS Selectors
We can divide CSS selectors into five categories:

1.Simple selectors (select elements based on name, id, class)

2.Combinator selectors (select elements based on a specific
relationship between them)
3.Pseudo-class selectors (select elements based on a certain state)
4.Pseudo-elements selectors (select and style a part of an element)
5.Attribute selectors (select elements based on an attribute or
attribute value).
 Simple selectors

i-The CSS element Selector

The element selector selects HTML elements based on the

element name.

Here, all <p> elements on the page will be center-aligned, with

a red text color
#para1 {
text-align: center;
color: red;
}:
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
• External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.
• <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

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

</body>
</html>
• External styles are defined within the <link> element, inside the
<head> section of an HTML page:
• Mystyle.css
• body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.
• Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
• <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>
Inline CSS
• An inline style may be used to apply a unique style for a single element.
• To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
• Inline styles are defined within the "style" attribute of the relevant
element:
• <!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Multiple Style Sheets
• If some properties have been defined for the same selector (element)
in different style sheets, the value from the last read style sheet will
be used.
• If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
• Assume that an external style sheet has the following style for the <h1>
element:
• h1 {
color: navy;
}
• Then, assume that an internal style sheet also has the following style for
the <h1> element:
• h1 {
color: orange;
}
Example
• If the internal style is defined after the link to the external style sheet,
the <h1> elements will be "orange":
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Example
• However, if the internal style is defined before the link to the external
style sheet, the <h1> elements will be "navy":
• <head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
What style will be used when there is more than one style specified for
an HTML element?
• All the styles in a page will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:
• Inline style (inside an HTML element)
• External and internal style sheets (in the head section)
• Browser default
So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
Block-level Elements
• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• Two commonly used block elements are: <p> and <div>.
• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML
document.
• <!DOCTYPE html>
• <html>
• <body>

• <p style="border: 1px solid black">Hello World</p>

• <div style="border: 1px solid black">Hello World</div>

• <p>The P and the DIV elements are both block elements, and they will
always start on a new line and take up the full width available (stretches
out to the left and right as far as it can).</p>

• </body>
• </html>
• Here are the block-level elements in HTML:
• <address> <article> <aside> <blockquote> <canvas> <dd> <div> <
dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <
h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <
pre> <section> <table> <tfoot> <ul> <video>
Inline Elements
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.
• This is a <span> element inside a paragraph.
• <!DOCTYPE html>
• <html>
• <body>

• <p>This is an inline span <span style="border: 1px solid black">Hello

World</span> element inside a paragraph.</p>

• <p>The SPAN element is an inline element, and will not start on a new
line and only takes up as much width as necessary.</p>

• </body>
• </html>
• Here are the inline elements in HTML:
• <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <
code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <
object> <output> <q> <samp> <script> <select> <small> <span> <
strong> <sub> <sup> <textarea> <time> <tt> <var>
• An inline element cannot contain a block-level element!
The <div> Element
• The <div> element is often used as a container for other HTML
elements.
• The <div> element has no required attributes,
but style, class and id are common.
• When used together with CSS, the <div> element can be used to style
blocks of content:
• !DOCTYPE html>
• <html>
• <body>

• <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>
• <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>

• </body>
• </html>
• The <span> Element
• The <span> element is an inline container used to mark up a part of a
text, or a part of a document.
• The <span> element has no required attributes,
but style, class and id are common.
• When used together with CSS, the <span> element can be used to
style parts of the text:
• <!DOCTYPE html>
• <html>
• <body>

• <h1>The span element</h1>

• <p>My mother has <span

style="color:blue;font-weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-weight:bold">dark
green</span> eyes.</p>

• </body>
• </html>
• The HTML class attribute is used to specify a class for an HTML
element.
• Multiple HTML elements can share the same class.
• Using The class Attribute
• The class attribute is often used to point to a class name in a style
sheet. It can also be used by a JavaScript to access and manipulate
elements with the specific class name.
• In the following example we have three <div> elements with
a class attribute with the value of "city". All of the
three <div> elements will be styled equally according to the .city style
definition in the head section:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• .city {
• background-color: tomato;
• color: white;
• border: 2px solid black;
• margin: 20px;
• padding: 20px;
• }
• </style>
• </head>
• <body>

• <div class="city">
• <h2>London</h2>
• <p>London is the capital of England.</p>
• </div> </body>
• </html>
HTML id Attribute

• The HTML id attribute is used to specify a unique id for an HTML

element.
• You cannot have more than one element with the same id in an HTML
document.
• Using The id Attribute
• The id attribute specifies a unique id for an HTML element. The value
of the id attribute must be unique within the HTML document.
• The id attribute is used to point to a specific style declaration in a
style sheet. It is also used by JavaScript to access and manipulate the
element with the specific id.
• The syntax for id is: write a hash character (#), followed by an id
name. Then, define the CSS properties within curly braces {}.
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #myHeader {
• background-color: lightblue;
• color: black;
• padding: 40px;
• text-align: center;
• }
• </style> </head> <body>
• <h2>The id Attribute</h2>
• <p>Use CSS to style an element with the id "myHeader":</p>

• <h1 id="myHeader">My Header</h1>

• </body>
• </html>
Difference Between Class and ID
A class name can be used by multiple HTML elements, while an
id name must only be used by one HTML element within the
page:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• /* Style the element with the id "myHeader" */
• #myHeader {
• background-color: lightblue;
• color: black;
• padding: 40px;
• text-align: center;
• }

• /* Style all elements with the class name "city" */

• .city {
• background-color: tomato;
• color: white;
• padding: 10px;
• }
• </style>
• </head>
• <body>
• <h2>Difference Between Class and ID</h2>
• <p>A class name can be used by multiple HTML elements, while an id name must only be used by one HTML
element within the page:</p>

• <!-- An element with a unique id -->

• <h1 id="myHeader">My Cities</h1>

• <!-- Multiple elements with same class -->

• <h2 class="city">London</h2>
• <p>London is the capital of England.</p>

• <h2 class="city">Paris</h2>
• <p>Paris is the capital of France.</p>

• <h2 class="city">Tokyo</h2>
• <p>Tokyo is the capital of Japan.</p>

• </body>
• </html>