UNIT 1: HTML Basics

(Introduction to WWW and HTML, Steps for hosting a website, Structure of HTML,
HTML elements and attributes, Headings, Paragraphs, Formatting tags, line breaks,
Comments, Links, Images, Lists, HTML5 Semantic Elements (header, footer, nav,
section, article, nav, aside), HTML Tables.)
 HTML

Introduction to Internet and Web

What is the Internet?
The Internet is a huge collection of computers around the world. These computers are all linked
together, and they can "talk" to each other, sharing information. If your computer is connected to
the Internet, it can connect to millions of other computers, in many different parts of the world.
The popular term for the Internet is the “information highway”. Rather than moving through
geographical space, it moves your ideas and information through cyberspace – the space of
electronic movement of ideas and information.
What can you do on the Internet?
 Email
 Obtain information.
 Entertainment such as games, radio, reviews of movies.
 Discussion Groups (chat rooms)
 Online Shopping
 Services such as online banking
What do you need to connect to the Internet?
 Personal Computer
 Modem
 Phone Line
 Internet Service Provider
 Web Browser
History of Internet
The Internet was the result of some visionary thinking by people in the early 1960s who saw
great potential value in allowing computers to share information on research and development in
scientific and military fields. J.C.R. Licklider of MIT first proposed a global network of
computers in 1962, and moved over to the Defense Advanced Research Projects Agency
(DARPA) in late 1962 to head the work to develop it. Leonard Kleinrock of MIT and later
UCLA developed the theory of packet switching, which was to form the basis of Internet
connections. Lawrence Roberts of MIT connected a Massachusetts computer with a California
computer in 1965 over dial-up telephone lines. It showed the feasibility of wide area networking,
but also showed that the telephone line's circuit switching was inadequate. Kleinrock's packet
switching theory was confirmed. Roberts moved over to DARPA in 1966 and developed his plan
for ARPANET. These visionaries and many more left unnamed here are the real founders of the
Internet. The Internet, then known as ARPANET, was brought online in 1969 under a contract
let by the renamed Advanced Research Projects Agency (ARPA) which initially connected four
major computers at universities in the southwestern US (UCLA, Stanford Research Institute,
UCSB, and the University of Utah). The contract was carried out by BBN of Cambridge, MA
under Bob Kahn and went online in December 1969. By June 1970, MIT, Harvard, BBN, and
Systems Development Corp (SDC) in Santa Monica, Cal. were added. By January 1971,
Stanford, MIT's Lincoln Labs, Carnegie-Mellon, and Case-Western Reserve U were added. In
months to come, NASA/Ames, Mitre, Burroughs, RAND, and the U of Illinois plugged in. After
that, there were far too many to keep listing here.
World Wide Web
The World Wide Web (abbreviated as WWW or W3, commonly known as the Web), is a system
of interlinked hypertext documents accessed via the Internet. With a web browser, one can view
web pages that may contain text, images, videos, and other multimedia, and navigate between
them via hyperlinks. The Web (World Wide Web) consists of information organized into Web
pages containing text and graphic images. A collection of linked Web pages that has a common
theme or focus is called a Web site. A collection of linked Web pages that has a common theme
or focus is called a Web site.
Internet Service Provider (ISP)
A commercial organization with permanent connection to the Internet that sells temporary
connections to subscribers.
How to access the Web?
Once you have your Internet connection, then you need special software called a browser to
access the Web. Web browsers are used to connect you to remote computers, open and transfer
files, display text and images. Web browsers are specialized programs. Examples of Web
browser: Netscape Navigator (Navigator) and Internet Explorer.
Client/Server Structure of the Web
Web is a collection of files that reside on computers, called Web servers that are located all over
the world and are connected to each other through the Internet. When you use your Internet
connection to become part of the Web, your computer becomes a Web client in a worldwide
client/server network. A Web browser is the software that you run on your computer to make it
work as a web client.
Hypertext Markup Language (HTML)
The public files on the web servers are ordinary text files, much like the files used by word-
processing software. To allow Web browser software to read them, the text must be formatted
according to a generally accepted standard. The standard used on the web is Hypertext markup
language (HTML).
An overview of internet programming
In these classes, we present a number of powerful software technologies that will enable you to
build systems that can integrate Internet and web components, and remote databases. We present
the “client-side” and “server-side” of web programming. For the client side we present a
carefully paced introduction to using the popular JavaScript language and the closely related
technologies of XHTML (Extensible Hyper Text Markup Language), CSS (Cascading Style
Sheets) and the DOM (Document Object Model). The third class concentrates on using
technologies such as web servers, databases (integrated collections of data), PHP, Ruby on Rails,
ASP.NET, ASP.NET Ajax and Java Server Faces (JSF) to build the server side of web-based
applications. These portions of applications typically run on “heavy-duty” computer systems on
which organizations’ business-critical websites reside. By mastering the technologies in these
courses, you’ll be able to build substantial web-based, client/server, database-intensive,
“multitier” applications.
Internet applications are client-server applications, and can be split into two pieces:
1. Forms
2. Server-side programs
The form is the part your end-user sees. It is displayed in a Web browser, and provides controls
through which your end-user can enter data. The picture below shows you a simple form:
When the end-user clicks the Send Form button, the information on the form is packaged, and
sent to a server-side program. The server-side program only runs when it is started from a form,
or from a link on a Web page. The server-side program processes the information on the form,
and returns a result to the end-user.
Depending on what the program does, the result is displayed on another form, or perhaps a
simple HTML page showing text.
Introduction to HTML
HyperText Markup Language (HTML) is a markup language used to create the content and
semantic structure of Web pages. A Web page is comprised of a number of HTML elements,
each of which has a particular meaning in the context of a Web page. Some elements are stand-
alone, while others can be nested to create increasingly complex structure for your content. Web
browsers interpret HTML to build the content of a page, and interpret that HTML in the context
of Cascading Style Sheets (CSS) that affect the visual appearance of that content.
A brief history of HTML
HTML was originally developed by Tim Berners-Lee while at CERN, and popularized by the
Mosaic browser developed at NCSA. During the course of the 1990s it has blossomed with the
explosive growth of the Web. During this time, HTML has been extended in a number of ways.
The Web depends on Web page authors and vendors sharing the same conventions for HTML.
This has motivated joint work on specifications for HTML.
Most people agree that HTML documents should work well across different browsers and
platforms. Achieving interoperability lowers costs to content providers since they must develop
only one version of a document. If the effort is not made, there is much greater risk that the Web
will devolve into a proprietary world of incompatible formats, ultimately reducing the Web's
commercial potential for all participants.
Each version of HTML has attempted to reflect greater consensus among industry players so that
the investment made by content providers will not be wasted and that their documents will not
become unreadable in a short period of time.
HTML has been developed with the vision that all manner of devices should be able to use
information on the Web: PCs with graphics displays of varying resolution and color depths,
cellular telephones, hand held devices, devices for speech for output and input, computers with
high or low bandwidth, and so on.
What is HTML?
HTML is a language for describing web pages.
1. HTML stands for Hyper Text Markup Language
2. HTML is not a programming language, it is a markup language
3. A markup language is a set of markup tags
4. The purpose of the tags are to describe page content
Introduction to the structure of an HTML document
An HTML 4 document is composed of three parts:
 A line containing HTML version information,
 A declarative header section (delimited by the HEAD element), contains title and meta
data of a web document.
 A body, which contains the document's actual content which are displayed by web
browser. The body may be implemented by the BODY element or the FRAMESET
element.
White space (spaces, newlines, tabs, and comments) may appear before or after each section.
Here's an example of a simple HTML document:
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
 </HEAD>
<BODY>
<P>Hello world!
</BODY>
</HTML>
HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end tag,
including the tags:
 An HTML element starts with a start tag / opening tag
 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Elements are the structures that describe parts of an HTML document. For example, the P
element represents a paragraph while the EM element gives emphasized content.
The basic unit of information in HTML is conveyed by the element. Elements basically answer
the question "what kind of information is this?" and define the semantic meaning of their
content. Some elements have very precise meaning, as in "this is an image," "this is a header," or
"this is an ordered list," while some are less specific as in "this is a part of the page" or "this is a
part of the text", and yet others are used for technical reasons. But in some way or the other they
all have a semantic value.
Most elements may contain other elements, forming a hierarchic structure, a tree, called the
DOM - the Document Object Model.
An element has three parts: a start tag, content, and an 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).
HTML tags
HTML markup tags are usually called HTML tags
  HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 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, with a forward slash before the tag name
 Start and end tags are also called opening tags and closing tags
General syntax
<tagname>content</tagname>
A tag is special text--"markup"--that is delimited by "<" and ">". An end tag includes a "/" after
the "<". For example, the EM element has a start tag, <EM>, and an end tag, </EM>. The start
and end tags surround the content of the EM element:
<EM>This is emphasized text</EM>
Starting and ending tags
HTML uses plain text as a foundation and attaches special meaning to anything that starts with
the less than sign (<) and ends with the greater than sign (>). Such markup is called a tag. Here is
a simple example:
<p>This is text within a paragraph.</p>
In that example there is a start tag and a closing tag. Closing tags use the same tag name as the
starting tag, but also contain a forward slash immediately after the leading less than sign. Most
elements in HTML are written using both start and closing tags. Start and closing tags should be
properly nested, that is closing tags should be written in the opposite order of the start tags.
Proper nesting is one rule that must be obeyed in order to write valid code.
This is an an example of valid code:
<em>I <strong>really</strong> mean that</em>.
Element names are always case-insensitive, so <em>, <eM>, and <EM> are all the same.
Elements cannot overlap each other. If the start tag for an EM element appears within a P, the
EM's end tag must also appear within the same P element.
Some elements allow the start or end tag to be omitted. For example, the LI end tag is always
optional since the element's end is implied by the next LI element or by the end of the list:
<UL>
<LI>First list item; no end tag
<LI>Second list item; optional end tag included</LI>
 <LI>Third list item; no end tag
</UL>
Some elements have no end tag because they have no content. These elements, such as the BR
element for line breaks, are represented only by a start tag and are said to be empty elements.
Attributes
The start tag may contain additional information. Such information is called an attribute.
Attributes give additional meaning to an element. An element's attributes define various
properties for the element. For example, the IMG element takes a SRC attribute to provide the
location of the image and an ALT attribute to give alternate text for those not loading images:
<IMG SRC="wdglogo.gif" ALT="Web Design Group">
Attributes usually consist of 2 parts:
 An attribute name.
 An attribute value.
An attribute is included in the start tag only--never the end tag--and takes the form
Attribute-name="Attribute-value".
The attribute value is delimited by single or double quotes. The quotes are optional if the
attribute value consists solely of letters in the range A-Z and a-z, digits (0-9), hyphens ("-"),
periods ("."), underscores ("_"), and colons (":"). Attribute names are case-insensitive, but
attribute values may be case-sensitive.
HTML Documents = Web Pages
 HTML documents describe web pages
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
Comments
Comments in HTML have a complicated syntax that can be simplified by following this rule:
Begin a comment with "<!--", end it with "-->", and do not use "--" within the comment.
<!-- An example comment -->
HTML Document Example
<!DOCTYPE html>
 <html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.
HTML Example Explained
The <p> element:
<p>This is my first paragraph.</p>
The <p> element defines a paragraph in the HTML document.
The element has a start tag <p> and an end tag </p>.
The element content is: This is my first paragraph.
The <body> element:
<body>
<p>This is my first paragraph.</p>
</body>
The <body> element defines the body of the HTML document.
The element has a start tag <body> and an end tag </body>.
The element content is another HTML element (a p element).
The <html> element:
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The <html> element defines the whole HTML document. The element has a start tag <html> and
an end tag </html>. The element content is another HTML element (the body element).
HTML <html> Tag
Example
A simple HTML document, with the minimum of required tags:
<html>
 <head> <title>HTML 4.01 Tag Reference</title> </head>
<body> The content of the document......</body>
</html>
Definition and Usage
The <html> tag tells the browser that this is an HTML document. The <html> element is also
known as the root element. The <html> tag is the container for all other HTML elements (except
for the<!DOCTYPE> tag).
HTML <title> Tag
Define a title for your HTML document:
Example
<html>
<head> <title>HTML 4.01 Tag Reference</title> </head>
<body> The content of the document......</body>
</html>
Definition and Usage
The <title> tag is required in all HTML documents and it defines the title of the document.
The <title> element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
HTML <body> Tag
Definition and Usage
The <body> tag defines the document's body. The <body> element contains all the contents of
an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Attributes
background - Specifies a background image for a document
bgcolor - Specifies the background color of a document
The <body> tag supports the following standard attributes:
Attribute Value Description
class Classname Specifies a classname for an element
 rtl Specifies the text direction for the content in
dir
ltr an element
id Id Specifies a unique id for an element
Specifies a language code for the content in
lang language_code
an element
style style_definition Specifies an inline style for an element
title Text Specifies extra information about an element
Event Attributes
The <body> tag supports the following event attributes:
Attribute Value Description
onclick Script Script to be run on a mouse click
ondblclick Script Script to be run on a mouse double-click
onload Script Script to be run when a document load
onmousedown Script Script to be run when mouse button is pressed
onmousemove Script Script to be run when mouse pointer moves
Script to be run when mouse pointer moves out of an
onmouseout Script
element
Script to be run when mouse pointer moves over an
onmouseover Script
element
onmouseup Script Script to be run when mouse button is released
onkeydown Script Script to be run when a key is pressed
onkeypress Script Script to be run when a key is pressed and released
onkeyup Script Script to be run when a key is released
onunload Script Script to be run when a document unload
Physical Style Tags
There are nine physical styles provided by the current HTML and XHTML standards, including
bold, italic, monospaced, underlined, strike-through, larger, smaller, superscripted, and
subscripted text. As we discuss each physical tag in detail, keep in mind that they convey an
acute styling for the immediate text.
The <b> Tag
The <b> tag is the physical equivalent of the <strong> content-based style tag, but without the
latter's extended meaning. The <b> tag explicitly boldfaces a character or segment of text that is
enclosed between it and its corresponding (</b>) end tag. If a boldface font is not available, the
browser may use some other representation, such as reverse video or underlining.
The <big> Tag
The <big> tag makes it easy to increase the size of text. It couldn't be simpler: the browser
renders the text between the <big> tag and its matching </big> ending tag one font size larger
than the surrounding text. If that text is already at the largest size, <big> has no effect.
Even better, you can nest <big> tags to enlarge the text. Each <big> tag makes the text one size
larger, up to a limit of size seven, as defined by the font model.
Be careful with your use of the <big> tag, though. Because browsers are quite forgiving and try
hard to understand a tag, those that don't support <big> often interpret it to mean bold.
The <blink> Tag
Text contained between the <blink> tag and its end tag </blink> does just that: blink on and off.
Netscape for Macintosh, for example, simply and reiteratively reverses the background and
foreground colors for the <blink> enclosed text.
We cannot effectively reproduce the animated effect in these static pages, but it is easy to
imagine and best left to the imagination, too. That's because blinking text has two primary
effects: it gets your reader's attention, and then promptly annoys them to no end. Blinking text
should be used sparingly in any context.
The <i> Tag
The <i> tag is like the <em> content-based style tag. It and its necessary (</i>) end tag tell the
browser to render the enclosed text in an italic or oblique typeface. If the typeface is not
available to the browser, highlighting, reverse video, or underlining might be used.
The <s> Tag
The <s> tag is an abbreviated form of the <strike> tag supported by both Internet Explorer and
Netscape. It is now a deprecated tag in HTML 4 and XHTML, meaning don't use it; it will
eventually go away.
The <small> Tag
The <small> tag works just like its <big> counterpart (see previous description), except it
decreases the size of text instead of increasing it. If the enclosed text is already at the smallest
size supported by the font model, <small> has no effect.
Like <big>, you may also nest <small> tags to sequentially shrink text. Each <small> tag makes
the text one size smaller than the containing <small> tag, down to a limit of size one.
The <strike> Tag
Most browsers will put a line through ("strike through") text that appears inside the <strike> tag
and its </strike> end tag. Presumably, it is an editing markup that tells the reader to ignore the
text passage, reminiscent of the days before typewriter correction tape. You'll rarely, if ever, see
the tag in use today, and probably never will: it is deprecated in HTML 4 and XHTML, just one
version away from complete elimination from the standard.
The <sub> Tag
The text contained between the _{tag and its} end tag gets displayed half a character's
height lower, but in the same font and size as the current text flow. Both <sub> and its <sup>
counterpart is useful for math equations and in scientific notation, as well as with chemical
formula.
The <sup> Tag
The ^{tag and its} end tag superscripts the enclosed text; it gets displayed half a
character's height higher, but in the same font and size as the current text flow. This tag is useful
for adding footnotes to your documents, along with exponential values in equations.
The <tt> Tag
In a manner like the <code> and <kbd> tags, the <tt> tag and necessary </tt> end tag direct the
browser to display the enclosed text in a monospaced typeface. For those browsers that already
use a monospaced typeface, this tag may make no discernible change in the presentation of the
text.
The <u> Tag
This tag tells the browser to underline the text contained between the <u> and the corresponding
</u> tag. The underlining technique is simplistic, drawing the line under spaces and punctuation
as well as the text. This tag is deprecated in HTML 4 and XHTML and will be eliminated in the
next version of the standard.
The dir and lang Attributes
The dir attribute lets you advise the browser as to which direction the text within the physical tag
ought to be displayed, and lang lets you specify the language used within the tag.
The class, id, style, and title Attributes
Although each physical tag has a defined style, you can override that style by defining your own
look for each tag. This new look can be applied to the physical tags using either the style or class
attributes.
You also may assign a unique id to the physical style tag, as well as a less rigorous title, using
the respective attribute and accompanying quote-enclosed string value.
Event Attributes
Like with content-based style tags, user-initiated mouse and keyboard events can happen in and
around a physical-style tag's contents. Many of these events are recognized by the browser if it
conforms to current standards, and, with the respective "on" attribute and value, you may react to
the event by displaying a user dialog box or activating some multimedia event.
Summary of Physical Style Tags
The various graphical browsers render text inside the physical style tags in similar fashion. Table
4-2 summarizes these browser's display styles for the native tags. Style sheet definitions may
override these native display styles.
Tag Meaning Display Style
<b> Bold contents bold
<big> Increased font size bigger text
<blink> Alternating fore- and background colors blinking text
<i> Italic contents italic
<small> Decreased font size smaller text
<s>, <strike> Strike-through text strike
<sub> Subscripted text subscript
<sup> Superscripted text superscript
<tt> Teletypewriter style monospaced
<u> Underlined contents underlined
HTML Lines
The <hr /> tag creates a horizontal line in an HTML page. The hr element can be used to
separate content:
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br />a para<br />graph with line breaks</p>
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>
HTML Paragraphs
HTML Paragraphs Paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML Lists
HTML supports five types of lists. A list is first marked with the start and end list tag and then
each list item is indicated with a list item tag <LI> (unless it is a definition list). List item tags
have end tags, but they are optional since a new list item tag implies the end of the previous item.
Lists may be nested and if they are nested lists are indented farther than their parent list when
displayed. Any type of list can have a compact attribute, which forces the list items closer
together both horizontally and vertically.
Unordered List: <UL>
A list of items which may appear in any particular order. It is usually displayed as a bulleted list
of items. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
 <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
How the HTML code above looks in a browser:
 Coffee
 Milk
Attributes
Attribute Value Description
disc
type square Specifies the kind of marker to use in the list
circle
Ordered List: <OL>
A list of items to be displayed in a particular order. These are usually numbered when displayed.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
How the HTML code above looks in a browser:
1. Coffee
2. Milk
Attributes
Attribute Value Description
start Number Specifies the start value of an ordered list
type 1, A, a, I, i Specifies the kind of marker to use in the list
Definition List
A definition list <DL> is a list of terms <DT> and their definitions <DD>. Each definition is
usually displayed indented slightly in relation to the term. Each term should have a
corresponding definition. A definition list is a list of items, with a description of each item. The
<dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item
in the list) and <dd> (describes the item in the list):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
 white cold drink
The HTML Image Tag
The image tag is used to place an image on the web page. In its most simple form it looks like
this:
<img src="image1.jpg">
It is very important to understand that images are not technically "part" of the web page file, they
are separate files which are inserted into the page when it is viewed by a browser. So a simple
web page with one image is actually two files - the HTML file and the image file. The above
example illustrates this. In this example the two files are both located in the same folder. The
HTML file includes an image tag which refers to image1.jpg. When the HTML file is displayed
in a browser, it requests the image file and places it on the page where the tag appears.
Attributes
As you can see, the most important attribute of the image tag is src, which means source and tells
the browser where the image file is. The major attributes are listed below
Attribute Value Description
alt Text Specifies an alternate text for an image
src URL Specifies the URL of an image
align Top, bottom Deprecated. Use styles instead.
 middle, left Specifies the alignment of an image according to
right surrounding elements
Deprecated. Use styles instead.
border Pixels
Specifies the width of the border around an image
pixels
height Specifies the height of an image
%
Deprecated. Use styles instead.
hspace Pixels
Specifies the whitespace on left and right side of an image
ismap Ismap Specifies an image as a server-side image-map
Specifies the URL to a document that contains a long
longdesc URL
description of an image
usemap #mapname Specifies an image as a client-side image-map
Deprecated. Use styles instead.
vspace Pixels
Specifies the whitespace on top and bottom of an image
pixels
width Specifies the width of an image
%
Example
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
</body>
</html>
HTML <a> Tag
The HTML anchor element is used to create a link to a resource (another web page, a file, etc.)
or to a specific place within a web page. The anchor tag is written like this:
<a>
The anchor tag alone won't do anything without an attribute and value, so let's look at the
attributes we can use.
The <a> tag defines an anchor. An anchor can be used in two ways:
 1. To create a link to another document, by using the href attribute
2. To create a bookmark inside a document, by using the name attribute
The <a> element is usually referred to as a link or a hyperlink. The most important attribute of
the <a> element is the href attribute, which indicates the link’s destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Attributes
Attribute Value Description
charset char_encoding Specifies the character-set of a linked document
coords coordinates Specifies the coordinates of a link
href URL Specifies the URL of the page the link goes to
hreflang language_code Specifies the language of the linked document
name section_name Specifies the name of an anchor
Specifies the relationship between the current document
rel text
and the linked document
Specifies the relationship between the linked document
rev text
and the current document
Default,rect
shape Specifies the shape of a link
circle, poly
_blank
_parent
target _self Specifies where to open the linked document
_top
framename
Tabindex number Specifies the tab order of an element
Title text Specifies extra information about an element
Example
<!DOCTYPE html>
 <html>
<body>
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
</body>
</html>
The HREF Attribute
To create a link, you have to know the web address of the file you want to link to, whether it's
another web page of your own site, another website, or a link to file such as a PDF document,
sound file, or another type of file.
Suppose you want to link to the front page of my site. The web address is
: http://www.boogiejack.com. You'd code the link like this:
<a href="http://www.boogiejack.com">Boogie Jack</a>
The href part, shown in dark blue text, is short for hypertext reference. This is the attribute that
defines the address of the file you want to link to.
The equal sign always connects an attribute to the attribute's value. So in this case, href is the
attribute, and http://www.boogiejack.com is the value. The value is always enclosed in quotation
marks.
The Boogie Jack part, shown in green text, is the anchor text, or sometimes called the link text.
This is the part of a link that is clickable.
If you link to a page on another site you need to use the full web address as shown in the
example above. If you're linking to a different page on your own site you only need to use the
page name and extension if the page is keep in the same directory.
For example, suppose you want to link to a page you've saved with the name of MyPage.html.
You'd code it like this:
<a href="MyPage.html">My Page</a>
By linking to your own internal pages without using the full web address your pages will load
faster. If you use the full web address the browser goes back out to the Internet to find your site
all over again, which takes longer. If you don't use the full path the browser only checks on your
site for the file.
File names, which includes the name of the web page and the extension, are case sensitive. That
means you must use the same capitalization in the web address of the file that was used when the
file was saved.
The NAME Attribute
The name attribute allows an anchor tag to be used to point to a specific place on a web page.
You might link from the bottom of a long page to the top of the page, or link from an item in a
Table of Contents to the corresponding item where it appears on the page.
The syntax for using the name attribute is like this:
<a name="top"></a> » or...
<a name="TOC">Table of Contents</a>
You can leave out the text between the "a" tags or use them to surround some text. The
appearance of the text won't change unless you have defined a hover color for your links. If you
have, then the text will change to the hover color when a user's cursor is on it. It will not be
clickable, however, because this is not the link, this is the anchor a link will point to.
In the first example you would link to the top of a page from the bottom of a long page, and
maybe other points in between so your visitors could jump back to the top instead of scrolling.
Or, you might place a named anchor as shown in the second example around the Table of
Contents for an online newsletter, for example, then link to it from strategic places down the
page so your visitors can quickly jump to the Table of Contents after reading an article.
For the newsletter example, to link to that named anchor you'd code your link like this:
<a href="#TOC">Table of Contents</a>
As you can see, it's simply a hash mark (#) in front of the actual anchor name. The hash mark
tells the browser the link is on the current page.
You can also link to a named anchor on another page. The syntax for that is:
<a href="AnotherPage.html#name">Link Text</a>
That would be a page located in the same directory as the current page. You can link to anchor
points on other sites (if they have an anchor point) by including the full web address of the page.
As you probably noticed, it's a normal link followed by the hash mark and the anchor name. That
tells the browser to go to the other page, then to find the named anchor on that page.
The TARGET Attribute
The target attribute allows you to determine where the link will open. With a framed site, it
allows you to target a link to a specific frame. The most common use is to have off-site links
open in a new browser window.
Here's how to open a link in a new window:
<a href="http://www.site.com" target="_blank">Link Text</a>
By adding the part in green to a link, the link will open in a new window or a new tab, depending
on the browser in use and how it's configured.
Syntax
<a target="_blank|_self|_parent|_top|framename">
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
HTML Table
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each
row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content
of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc. A more
complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and
<tbody> elements.
HTML <table> Tag
The <table> tag defines an HTML table.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
 <th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
The <table> tag is supported in all major browsers.
Attributes
Attribute Value Description
rgb(x,x,x)
Deprecated. Use styles instead.
bgcolor #xxxxxx
Specifies the background color for a table
colorname
border pixels Specifies the width of the borders around a table
Specifies the space between the cell wall and the cell
cellpadding pixels
content
cellspacing pixels Specifies the space between cells
None, groups
Specifies which parts of the inside borders that should be
rules rows, cols
visible
all
pixels
width Specifies the width of a table
%
Table rows - <tr> tag
The <tr> tag defines a row in an HTML table. A <tr> element contains one or more <th> or <td>
elements.
 <tr>
<th>Month</th>
<th>Savings</th>
</tr>
Table Cells - <th> and <td> tags
The <th> tag defines a header cell in an HTML table. The <td> tag defines a standard cell in an
HTML table.
An HTML table has two kinds of cells:
 Header cells - contains header information (created with the <th> element)
 Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default. The text in <td> elements are regular
and left-aligned by default.
<th>Month</th>
<td>February</td>
Attributes
Attribute Value Description
Not supported in HTML5. Specifies an
abbr text
abbreviated version of the content in a cell
Left, right
Not supported in HTML5. Aligns the content in a
align center, justify
cell
char
rgb(x,x,x)
Not supported in HTML5. Deprecated in HTML
bgcolor #xxxxxx
4.01. Specifies the background color of a cell
colorname
Not supported in HTML5. Aligns the content in a
char character
cell to a character
Specifies the number of columns a cell should
colspan number
span
pixels Not supported in HTML5. Deprecated in HTML
height
% 4.01.
 Sets the height of a cell
rowspan number Sets the number of rows a cell should span
Top, middle
Not supported in HTML5. Vertical aligns the
valign bottom
content in a cell
baseline
pixels Not supported in HTML5. Deprecated in HTML
width
% 4.01. Specifies the width of a cell
Height attribute
The <td> height attribute is not supported in HTML5. Use CSS instead. The height attribute of
<td> is deprecated in HTML 4.01. The height attribute specifies the height of a cell. Normally, a
cell takes up the space it needs to display the content. The height attribute is used to set a
predefined height of a cell.
Width attribute
The <table> width attribute is not supported in HTML5. Use CSS instead. The width attribute
specifies the width of a table. If the width attribute is not set, a table takes up the space it needs
to display the table data.
Rowspan attribute
The rowspan attribute specifies the number of rows a cell should span.
Colspan attribute
The colspan attribute defines the number of columns a cell should span.
Border attribute
The border attribute specifies if a border should be displayed around the table cells or not. The
value "1" indicates borders should be displayed, and that the table is NOT being used for layout
purposes.
Example
<html>
<body>
<table border=1 width=100 height=150>
<tr><th rowspan=2>name</th><th colspan=3>sub</th></tr>
<tr><th>c</th><th>c++</th><th>java</th></tr>
</table>
 </body>
</html>
HTML 5 Semantic Elements

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Semantic Elements in HTML
Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div
id="footer"> to indicate navigation, header, and footer. In HTML there are some semantic
elements that can be used to define different parts of a web page:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
 HTML <header> Element
The <header> element represents a container for introductory content or a set of
navigational links. A <header> element typically contains:
 one or more heading elements (<h1> - <h6>)
 logo or icon
 authorship information
Example
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment,
and build a future in which humans live in harmony with nature.</p>
</article>
HTML <footer> Element
The <footer> element defines a footer for a document or section
A <footer> element typically contains:
 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents
HTML <nav> Element
The <nav> element defines a set of navigation links.
Example:
A set of navigation links:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <section> Element
The <section> element defines a section in a document.
A web page could normally be split into sections for introduction, content, and contact
information.
Example:
Two sections in a document:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working
on issues regarding the conservation, research and restoration of the environment,
formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF
originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the
London Zoo in the same year of the establishment of WWF.</p>
</section>
HTML <article> Element
The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to distribute it
independently from the rest of the web site.
Examples of where an <article> element can be used:
 Forum post
 Blog post
 Newspaper article
Example:
Three articles with independent, self-contained content:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is
the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has
been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
HTML <aside> Element
The <aside> element defines some content aside from the content it is placed in (like a
sidebar).
The <aside> content should be indirectly related to the surrounding content.
Example:
Display some content aside from the content it is placed in:
<p>My family and I visited The Epcot center this summer. The weather was nice, and
Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
 Unit II:HTML Forms and CSS
HTML Forms (input, select, textarea, button, datalist), Input types (text, password,
submit, radio, checkbox, date, email), Input attributes (value, readonly, disabled,
maxlength, autocomplete, list, min, max, placeholder), HTML5 form validation (required
and pattern attribute of input type), Applying style to html using CSS (Inline, Internal and
External CSS, Colors, Fonts, Borders, Padding, Applying style using class and id
attribute)
 HTML forms
Form is used to collect information from a user. They are used to pass data to a server.An HTML
form is a section of a document containing normal content, markup, special elements called
controls (checkboxes, radio buttons, menus, etc.), and labels on those controls. Users generally
"complete" a form by modifying its controls (entering text, selecting menu items, etc.), before
submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)
<form>
input elements
</form>
The <form> tag is used to create an HTML form for user input. The <form> element can contain
one or more of the following form elements:
 <input>
 <textarea>
 <button>
 <select>
 <option>
 <optgroup>
 <fieldset>
 <label>
Here's a simple form that includes labels, radio buttons, and push buttons (reset the form or
submit it):
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
 <INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
Attributes
Attribute Value Description
Specifies where to send the form-data when a form is
action URL
submitted
get Specifies the HTTP method to use when sending
method
post form-data
name Text Specifies the name of a form
_blank, _self Specifies where to display the response that is
target
_parent, _top received after submitting the form

 The layout of the form (given by the contents of the element).

 The program that will handle the completed and submitted form (the action attribute).
The receiving program must be able to parse name/value pairs in order to make use of
them.
 The method by which user data will be sent to the server (the method attribute).
 A character encoding that must be accepted by the server in order to handle this form (the
accept-charset attribute). User agents may advise the user of the value of the accept-
charset attribute and/or restrict the user's ability to enter unrecognized characters.
Controls
Users interact with forms through named controls. A control's "control name" is given by its
name attribute. The scope of the name attribute for a control within a FORM element is the
FORM element.
Each control has both an initial value and a current value, both of which are character strings.
Please consult the definition of each control for information about initial values and possible
constraints on values imposed by the control. In general, a control's "initial value" may be
specified with the control element's value attribute.
The control's "current value" is first set to the initial value. Thereafter, the control's current value
may be modified through user interaction and scripts.
When a form is submitted for processing, some controls have their name paired with their current
value and these pairs are submitted with the form. Those controls for which name/value pairs are
submitted are called successful controls.
Control types
HTML defines the following control types:
buttons
Authors may create three types of buttons:
 submit buttons: When activated, a submit button submits a form. A form may contain
more than one submit button.
 reset buttons: When activated, a reset button resets all controls to their initial values.
 push buttons: Push buttons have no default behavior. Each push button may have client-
side scripts associated with the element's event attributes. When an event occurs (e.g., the
user presses the button, releases it, etc.), the associated script is triggered.
We can create buttons with the BUTTON element or the INPUT element. Please consult the
definitions of these elements for details about specifying different button types.
checkboxes
Checkboxes (and radio buttons) are on/off switches that may be toggled by the user. A switch is
"on" when the control element's checked attribute is set. When a form is submitted, only "on"
checkbox controls can become successful.
Several checkboxes in a form may share the same control name. Thus, for example, checkboxes
allow users to select several values for the same property. The INPUT element is used to create a
checkbox control.
radio buttons
Radio buttons are like checkboxes except that when several share the same control name, they
are mutually exclusive: when one is switched "on", all others with the same name are switched
"off". The INPUT element is used to create a radio button control.
If no radio button in a set sharing the same control name is initially "on", user agent behavior for
choosing which control is initially "on" is undefined.
menus
Menus offer users options from which to choose. The SELECT element creates a menu, in
combination with the OPTGROUP and OPTION elements.
text input
We can create two types of controls that allow users to input text. The INPUT element creates a
single-line input control and the TEXTAREA element creates a multi-line input control. In both
cases, the input text becomes the control's current value.
file select
This control type allows the user to select files so that their contents may be submitted with a
form. The INPUT element is used to create a file select control.
hidden controls
We may create controls that are not rendered but whose values are submitted with a form. We
generally use this control type to store information between client/server exchanges that would
otherwise be lost due to the stateless nature of HTTP. The INPUT element is used to create a
hidden control.
object controls
Authors may insert generic objects in forms such that associated values are submitted along with
other controls. Authors create object controls with the OBJECT element.
The elements used to create controls generally appear inside a FORM element, but may also
appear outside of a FORM element declaration when they are used to build user interfaces.
The <INPUT> tag
The <input> tag specifies an input field where the user can enter data. <input> elements are used
within a <form> element to declare input controls that allow users to input data. An input field
can vary in many ways, depending on the type attribute.
Attributes
Attribute Value Description
Left, right Not supported in HTML5. Deprecated in HTML 4.01.
align top, middle Specifies the alignment of an image input (only for
bottom type="image")
Specifies an alternate text for images (only for
alt Text
type="image")
 Specifies that an <input> element should be pre-selected
checked Checked
when the page loads (for type="checkbox" or type="radio")
disabled Disabled Specifies that an <input> element should be disabled
Specifies the maximum number of characters allowed in an
maxlength Number
<input> element
name Text Specifies the name of an <input> element
readonly Readonly Specifies that an input field is read-only
size Number Specifies the width, in characters, of an <input> element
Specifies the URL of the image to use as a submit button
src URL
(only for type="image")
button
checkbox, color
date, email, file
hidden, image
type password Specifies the type <input> element to display
radio, range
reset, search
submit, text,
time, url, week
value Text Specifies the value of an <input> element
Examples of forms containing INPUT controls
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
Password Field
<input type="password" /> defines a password field:
 <form>
Password: <input type="password" name="pwd" />
</form>
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a
limited number of choices:
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ZERO or MORE
options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
</form>
Submit Button
<input type="submit" /> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
The following sample HTML fragment defines a simple form that allows the user to enter a first
name, last name, email address, and gender. When the submit button is activated, the form will
be sent to the program specified by the action attribute.
<FORM action="http://somesite.com/prog/adduser" method="post">
<P>
 First name: <INPUT type="text" name="firstname"><BR>
Last name: <INPUT type="text" name="lastname"><BR>
email: <INPUT type="text" name="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
This form might be rendered as follows:

In the section on the LABEL element, we discuss marking up labels such as "First name".
The BUTTON element
Buttons created with the BUTTON element function just like buttons created with the INPUT
element, but they offer richer rendering possibilities: the BUTTON element may have content.
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference
between this element and buttons created with the <input> element.
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
</html>
Date
The <input type="date"> is used for input fields that should contain a date.
<form>

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday">

</form>
Email
The <input type="email"> is used for input fields that should contain an e-mail address.
Depending on browser support, the e-mail address can be automatically validated when
submitted.

<form>

<label for="email">Enter your email:</label>

<input type="email" id="email" name="email">

</form>

The SELECT and OPTION elements

The <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
 Input Attributes
The value Attribute
The input value attribute specifies an initial value for an input field:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The readonly Attribute
The input readonly attribute specifies that an input field is read-only. A read-only input field
cannot be modified (however, a user can tab to it, highlight it, and copy the text from it). The
value of a read-only input field will be sent when submitting the form.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.A disabled input field
is unusable and un-clickable. The value of a disabled input field will not be sent when submitting
the form.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters allowed in an input
field.
Note: When a maxlength is set, the input field will not accept more than the specified number of
characters.
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>
The autocomplete Attribute
The input autocomplete attribute specifies whether a form or an input field should have
autocomplete on or off. Autocomplete allows the browser to predict the value. When a user starts
to type in a field, the browser should display options to fill in the field, based on earlier typed
values. The autocomplete attribute works with <form> and the following <input> types: text,
search, url, tel, email, password, datepickers, range, and color.
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
The list Attribute
The input list attribute refers to a <datalist> element that contains pre-defined options for an
<form>
<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
The min and max Attributes
The input min and max attributes specify the minimum and maximum values for an input field.
The min and max attributes work with the following input types: number, range, date, datetime-
local, month, time and week.
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
The placeholder Attribute
The input placeholder attribute specifies a short hint that describes the expected value of an input
field (a sample value or a short description of the expected format). The short hint is displayed in
the input field before the user enters a value. The placeholder attribute works with the following
input types: text, search, url, tel, email, and password.
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
 HTML 5 Form Vlidation
Form validation is of vital importance to a website’ssecurity as well as its usability. The
validation process evaluates whether the input value is in the correct format before submitting it.
For example, if we have an input fileld for an email address, the value must certainly contain a
valid email address; it should start with a letter or a number, followed by the @ symbol, then end
with a domain name.
The HTML 5 specification has made validation that bit easier with the introduction of new input
type such as email,url, and tel, and these also come packaged up with predefined validation.
Whenever the value given is not met with the expected formatting, these inpu type will throw an
error message thus preventing submission.
Required Attribute
The required attribute is a Boolean attribute. It specifies that an input filed must be filled out
before submitting the form. The required attribute works with the following input types: text,
search, url, tel,email,password,date pickers,number,checkbox,radio,and file.
Syntax
<input required>
Example:
<form>
<input type=”text” placeholder=”Enter Name” required>
</form>
Pattern Attribute
The pattern attribute is only applicable on the input element. It allows us to define our own rule
to validate the input value using Regular Expressions (RegEx). Again, if the value does not
match the specified pattern,the input will throw an error.
The username should only consist of lowercase letters; no capital letters,number or other special
characters allowed. In addition, the user name length shouldn’t be more than 15 characters. In
RegEx, this rule can be expressed as [a-z]{1,15}
Example: Add [a-z]{1,15} as the value of the pattern attribute in our username input:
<form action=”somefile.php”>
<input type=”text” name=”usename” placeholder=”Username” pattern=”[a-z]{1,15}”>
</form>
Now, since it only accepts lowercase letters, submitting any other value will throw an error
message:

Customizing the validation Message

Fortunatily, we can customize the message to be more helpful, and we have a couple of ways to
do so. The easiest approach is to specify a title attribute within our input element:
<form action=”somefile.php”>
<input type=”text” name=”username” placeholder=”username” pattern=”[a-z]{1,15}”
title=”User name should contain lowercase letters e.g.john”>
</form>
Now the title is included along with the defaut message.

Applying style to html using CSS

Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can
control the color, font, the size of text, the spacing between elements, how elements are
positioned and laid out, what background images or background colors are to be used, different
displays for different devices and screen sizes, and much more.
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
  External - by using a <link> element to link to an external CSS file.
The most common way to add CSS, is to keep the styles in external CSS files.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the
style attribute of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the
<p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in
the <head> section of an HTML page, within a <style> element.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and
the text color of ALL the <p> elements to red. In addition, the page will be displayed with a
"powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages. To use an external
style sheet, add a link to it in the <head> section of each HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
The external style sheet can be written in any text editor. The file must not contain any HTML
code, and must be saved with a .css extension.
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
CSS Colors, Fonts and Sizes
The CSS color property defines the text color to be used. The CSS font-family property defines
the font to be used. The CSS font-size property defines the text size to be used.
<!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>
CSS Border
The CSS border property defines a border around an HTML element. We can define a border for
nearly all HTML elements.
p{
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
p{
border: 2px solid powderblue;
padding: 30px;
}
 Applying style using class and id attribute
HTML id Attribute
The HTML id attribute is used to specify a unique id for an HTML element. We 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 {}.
In the following example we have an <h1> element that points to the id name "myHeader".
This <h1> element will be styled according to the #myHeader style definition in the head
section:
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
 HTML class Attribute
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>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
The Syntax For Class
To create a class; write a period (.) character, followed by a class name. Then, define the CSS
properties within curly braces {}.
Example: Create a class named "city":
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<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>
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:
Example
<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>
<!-- 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>