IT Unit 1 Understand The Principles of Web Designing (PDF) 1

Unit I: Understand the principles of Web Designing,
use of HTML Tags and apply style sheets, XML
By,
Asmatullah Khan,
CP, GIOE,
Secunderabad.
Outline
1.1 Describe the anatomy of web page and format of web
page. 1.14 Apply cascading style sheets
1.2 List and explain Web page elements and the process
of navigation through web pages 1.15 Create Inline styles.
1.3 State the steps in building, launching and 1.16 Create embedded style sheets.
maintenance of a web site
1.4 Describe the importance of HTML and applications of 1.17 Resolve style conflicts.
HTML 1.18 Link external style sheets to a HTML
1.5 Illustrate the use of the basic tags <html>, page.
<head>, <title>, <body>.
1.6 Illustrate the use of the following tags with 1.19 Place HTML elements at required
attributes : <h1> to <h6>, <q>, <strong>, <cite>, position.
<big>, <small>, <ins> and <del>
1.7 Illustrate the use of the presentation tags with 1.20 Change background colors, images
attributes: <b>, <i>, <u>, <strike>, <sub>, <sup>, etc.
<center>, <font>, <marquee>
1.8 Illustrate the use of hyperlink and imaging tags 1.21 Set the properties margin, padding,
with attributes, <object> tag with all important height, width to an element.
attributes.
1.9 Illustrate the use of the listing tags along with 1.22 Illustrate the use of XML file
attributes. 1.23 Describe the organization of data in
1.10 Illustrate the use of colors to various HTML
elements. the form of XML.
1.11 Illustrate the use of the following table creation 1.24 State the significance of Namespace
tags with attributes:<table>, <col>, <colgroup>, <tr>,
<td>, <th>, <tbody>, <thead>, <tfoot> 1.25 Compare and Contrast DTD and
1.12 Illustrate the use of the following control tags Schema
with attributes: <form>, <input>, <button>,
<label>, <select>, <options>, <textarea>, <legend>. 1.26 Understand the parsing process of
1.13 the use of the following frame tags with XML by DOM and SAX.
attributes: <frame>, <frameset>, <noframe>,
<iframe> 1.27 List the applications of XML
Prerequisite - How web applications
works? Or Anatomy of Web site
• The World Wide Web, or web, consists of many components that work together
to bring a web page to your desktop over the Internet.
• The web applications consist of clients and web servers.
▫ The clients are the computers that use the web applications.
 They access the web pages through programs known as web browsers.
▫ The web servers hold the files that make up each web application.
• URL – An address to a web resource.
• A network is a system that allows clients and servers to communicate.
• The Internet in turn is a large network that consists of many smaller networks
and can be classified into:
▫ WAN
▫ MAN
▫ LAN
▫ PAN
• An Internet service provider (ISP) is a company that owns a WAN that is
connected to the Internet.
▫ An ISP leases access to its network to other companies that need to be connected to the
Internet.
• ISPs connect their WANs together at large routers called Internet exchange
points (IXP).
▫ This allows anyone connected to the Internet to exchange information with anyone
else.
• Hypertext Markup Language (HTML) is the language used to
design the web pages of an application.
• A static webpage is an HTML document that's stored on the
web server and doesn't change.
▫ The file names for static web pages have .htm or .html extensions.
• When the user requests a static web page, the browser sends an
HTTP request to the web server that includes the name of the
file that's being requested.
• When the web server receives the request, it retrieves the web
page and sends it back to the browser in an HTTP response.
▫ This response includes the HTML for the page.
• When the browser receives the HTTP response, it renders the
HTML into a web page that is displayed in the browser.
• A dynamic web page is a web page that's generated by a server-
side program or script.
• When a web server receives a request for a dynamic web page, it
looks up the extension of the requested file to find out which
application server should process the request.
• When the application server receives a request, it runs the specified
script.
▫ Often, this script uses the data that it gets from the web browser to get the
appropriate data from a database server.
▫ This script can also store the data that it receives in the database.
• When the application server finishes processing the data, it generates
a web page and returns it to the web server.
• Then, the web server returns the web page to the web browser.
• In contrast to the server-side processing that's done for dynamic web
pages, JavaScript provides for client-side processing.
• JavaScript is a client-side scripting language that is run by the JavaScript
engine of a web browser and controls the operation of the browser.
▫ As a result, the work is done on the client, not the server.
• JavaScript’s common use is to validate the data that the user enters into an
HTML form before it is sent to the server for processing.
▫ This saves unnecessary trips to the server.
• Other common uses of JavaScript are
▫ to run slide shows,
▫ rotate headlines or products in one area of a web page, and
▫ provide animation.
• In fact, whenever you see a portion of a web page cycle through a series of
text blocks or images, that's probably being done by JavaScript.
Anatomy, a study of the structure
or internal workings of web page
and its format
A closer look at Web Page Anatomy
• Header Header
▫ Its one area that remains relatively
consistent throughout a Web site.
▫ Headers establish the brand look and feel Navigation
for a site.
▫ Often presents a user with a call to action
such as Feature
 Search,
 Buy,
 Register, etc.
▫ Header of a page must perform these
tasks without overpowering the contents
of the page.
▫ The code behind the header contains
information for search engine Content
optimization - from meta data (keywords
and descriptions) to the page title
 SEO use these elements to begin indexing
contents of the page.
Footer
Background Margins
A closer look at Web Page Anatomy cont...
• Feature Area
▫ A focal point area in the composition Header
that is perceived before all others and
serves as an entry point into the
layout. Navigation
▫ This area usually takes up a large
portion of the home page, has the
most vibrant color and typography, Feature
and usually features some sort of
motion or animation.
▫ The most common option for a
feature area is a slideshow of imagery
and content from the site.
▫ This can be achieved using SEO-
friendly technology like JavaScript
and Ajax. Content
▫ Adobe Flash can also be used for
highly interactive feature areas or
ones that involve sophisticated
animation.
Footer
Background Margins
• Body / Content
▫ The body or content area of a Web site is where users
spend most of their time, as it usually represents the end of
their search for content.
▫ This is where traditional design ideas of legibility and
clarity come into play, but with some added
considerations.
▫ A Web page can be any height; therefore, it’s important to
break up long stretches of content with white space and
subheadings.
 These breaks in the content allow users to skim the page
quickly, and it gives them multiple entry points into the
content.
▫ Dividing up the content by using heading tags (<H1>,
<H2>, and so on) helps search engines evaluate the
content of a page.
▫ Some search engines place a higher value on words
contained within these tags, since they tend to summarize
the key points from the content.
Anatomy of Web Page - notes
• <!DOCTYPE html>: The doctype.
▫ In the mists of time, when HTML was young (about 1991/2), doctypes were meant to act as links to a set of rules that the
HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful
things.
▫ They used to look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
▫ However, these days no-one really cares about them, and they are really just a historical artifact that needs to be included
for everything to work right.
▫ <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype; that's all you really need to know.
• <html></html>: The <html> element.
▫ This element wraps all the content on the entire page, and is sometimes known as the root element.
• <head></head>: The <head> element.
▫ This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are
showing to your page's viewers.
▫ This includes things like keywords and a page description that you want to appear in search results, CSS to style our
content, character set declarations, and more.
• <meta charset="utf-8">:
▫ This element sets the character set your document should use to utf-8, which includes most characters from all
known human languages.
▫ Essentially it can now handle any textual content you might put on it.
▫ There is no reason not to set this, and it can help avoid some problems later on.
• <title></title>:
▫ This sets the title of your page, which is the title that appears in the browser tab the page is loaded in, and is used to describe
the page when you bookmark/favourite it.
• <body></body>: The <body> element.
▫ This contains all the content that you want to show to web users when they visit your page, whether that's text, images,
videos, games, playable audio tracks, or whatever else.
Some Introduction to HTML Coding
Steps in building, launching and maintenance of a web site
• Learning —
▫ discovering and understanding what
you need to build in the first place —
is the most important part of the
entire website design process.
• A creative brief is basically a series of
questions that you ask your clients so
that you can understand
the scope and goals of a project.
▫ What kind of questions should you
ask in your creative brief?
 The client’s target audience
 Their primary and secondary goals for
the website
 Current branding characteristics
 Budget
 Deadlines they need to meet
cont…
• Planing —
▫ Before starting design of a website, one need
to know exactly what, and how, to design it in
the first place — and it all starts with creating
a design strategy.
• Research and Note-Taking While
researching, start brainstorming about what
colors to use, where to place the call(s)-to-
action, what kind of fonts you should use
and other similar details.
• Sketching and Mock-Up best and a good
place to experiment with different ideas
before actually hitting Photoshop or
Illustrator to create something more
concrete.
• Pick Your Tools content management
system would work the best considering the
site’s goals, whether or not including Flash
at all is a good idea, and so on.
cont…
• Designing —
▫ The design phase itself is straightforward.
▫ Just open up Photoshop (or your graphics
creation tool of choice) and start bringing
your mock-up to life.
• During the design phase, it is incredibly
important to seek feedback often to
make sure all specified requirements
have been met. If the client wants to
make changes, now is the time to do it
before the design is sliced and coded,
making it ten times more difficult to
make what would be a simple change if
you were to do it during the design
phase.
cont…
• Coding
A set of starter HTML and CSS files ready to
go that are already linked to each other and
already contain some basic starter code.
▫ it’s a good idea to go ahead and add in your
title, descriptions and meta tags, or at least
make a note of what they should be if you are
going to be using a content management
system later on.
Lay Out the Main Sections and Content
▫ Begin carving up your HTML/CSS by inserting the major
sections (your main<div>s) for your header, footer and content
area..
▫ Avoid divitis — the act of utilizing too many divs.
▫ Try using an <h1> or a <p> instead — it can be styled exactly the same way
Validate and Test
▫ Don’t forget to make sure your code validates by using the validation tool provided
by the W3C (but also understand that validation tools have shortcomings)
▫ Use Firebug and YSlow to debug your site and make sure
your work is running at an optimal speed.
▫ One last thing: don’t forget to implement Google
Analytics or your favorite analytics alternative so you won’t
miss out on tracking the stats during the big launch.
cont…
• Launching — it’s time to

release it to the public.
▫ Launching can mean different
things to different people,
mostly because there are
various content management
systems and development
circumstances out there.
cont…
• Maintaining —
▫ If a client is unable to maintain the
site, you may want to suggest that
they hire you on a regular or as
needed basis to manage and
perform maintenance tasks.
• During the hand-off/closeout of
the project, it might also help to
provide some guidelines and basic
training to your client to make
sure they understand how to
properly maintain the site.
Importance of HTML and its applications
• HTML or Hyper-text Mark-up Language is a globally accepted programming language for formatting web
pages.
• In today's world, it is commonly used along with JavaScript and Cascading Style Sheets (CSS) to give web
pages the look and feel we desire.
• Through HTML, the look and appearance of images, links, headings, text, page layout and just about every
element of a web page can be formatted.
• While there are other globally-recognized web programming languages and tools like content management
systems today, HTML continues to be the predominant programming language for creating web pages.
• It is also the most optimal for most small and growing businesses that do not really need advanced
functionality on their website.
• Below are some of the advantages of using HTML while creating your website.
▫ HTML is easy to use and understand
▫ All browsers support HTML
▫ HTML and XML syntax is very similar
▫ HTML is free
▫ Most development tools support HTML
▫ HTML is most search engine friendly
▫ In most cases, HTML is all you need
• Applications of HTML
▫ HTML, is used to create web pages.
▫ Site authors use HTML
 to format text as titles and headings,
 to arrange graphics on a webpage,
 to link to different pages within a website, and
 to link to different websites.
▫ HTML is also used to auto-generate documentation of Software programs through doc-comments.
▫ HTML is also used to create eBooks which are easy to navigate and are saved with .chm extension.
Basics of HTML Tags
• HTML
▫ Hyper is the opposite of linear.
 When a computer program executes one action it goes to the next line and after that, the next line and so on.
 But HTML is different - you can go wherever you want and whenever you want.
▫ Text is self-explanatory.
▫ Mark-up is what you do with the text.
 You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so
on.
▫ Language is what HTML is. It uses many English words.
• Elements and Tags
▫ Elements give structure to a HTML document and tells the browser how you want your website to be
presented.
▫ Generally elements consists of a start tag, some content, and an end tag.
▫ Tags
 Tags are labels you use to mark up the begining and end of an element.
 All tags begin with a less-than sign "<" and end with a greater-than sign ">".
 Generally speaking, there are two kinds of tags - opening tags: <html> and closing tags: </html>.
 You label content by putting it between an opening tag and a closing tag.
 HTML is all about elements. To learn HTML is to learn and use different tags.
▫ So, I always need an opening tag and a closing tag?
 Exceptions exists, Ex: </br> - self closing tags.
▫ Should tags be typed in uppercase or lowercase?
 <HTML>, <html> or <HtMl> will normally give the same result.
Basic HTML Tags and example
<html> • What you just made is a skeleton html document.
• This is the minimum required information for a
<head> web document and all web documents should
contain these basic components.
<title>My First • The first tag in your html document is <html>.
Webpage</title> ▫ This tag tells your browser that this is the start of
an html document.
</head> ▫ The last tag in your document is </html>.
<body>  This tag tells your browser that this is the end of the
html document.
This is my first homepage. • The text between the <head> tag and the </head>
<b>This text is bold</b> tag is header information.
▫ Header information is not displayed in the browser
</body> window.
</html> • The text between the <title> tags is the title of your
document.
▫ The <title> tag is used to uniquely identify each
document and is also displayed in the title bar of
the browser window.
• The text between the <body> tags is the text that
will be displayed in your browser.
• The text between the <b> and </b> tags will be
displayed in a bold font.
HTML Header Tags (<h1>) … (<h6>)
<html> • <h1> to <h6> are header tags and are used to
<head> define headings in a HTML document.
<title>My First Webpage</title>
</head> • <h1> defines the most important heading.
<body> • <h6> defines the least important heading.
<h1>This is heading 1</h1> • Browsers automatically add some white space
<h2>This is heading 2</h2> (a margin) before and after a heading.
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
• Search engines use the headings to index the
<h5>This is heading 5</h5> structure and content of your web pages.
<h6>This is heading 6</h6> • Users skim your pages by its headings. It is
</body> important to use headings to show the
</html> document structure.
• <h1> headings should be used for main
headings, followed by <h2> headings, then the
less important <h3>, and so on.
Note: Use HTML headings for headings only.
Don't use headings to make text BIG or bold.
HTML Quote Element (<q>)
<html> • The HTML Quote Element (<q>) indicates that
<head> the enclosed text is a short inline quotation.
</head> • This element is intended for short quotations that
<body> don't require paragraph breaks;
<p> • For long quotations use <blockquote> element.
<cite>Sean Stephenson</cite>
said
• Most modern standards-aware browsers, like
<q cite="http://seanstephenson.com/"> Mozilla Firefox, Opera, and Safari, should add
You'll always have an ego. The moment you forget that, it will quotes around text enclosed within
start running the show the <q> element.
</q>
• The HTML <blockquote> Element (or HTML
and I tend to agree.
</p>
Block Quotation Element) indicates that the
<blockquote cite="http://developer.mozilla.org"> enclosed text is an extended quotation. Usually,
This is a Block quotation . this is rendered visually by indentation.
</blockquote> • A URL for the source of the quotation may be
</body> given using the cite attribute, while a text
</html> representation of the source can be given using
the <cite> element.
HTML Strong Tag (<strong>)
<html> • The HTML <strong> tag is used for indicating strong
<head> importance for its contents. The strong tag surrounds the
emphasised word / phrase.
</head>
• Bold vs. Strong
<body> ▫ It is often confusing to new developers why there are so
This is many ways to express the same thing on a rendered
<strong>important</strong> website.
. It ▫ Bold and Strong are perhaps one of the most common.
<strong>really is important. ▫ Strong is a logical state, and bold is a physical state.
<strong>And this is even more important! ▫ Logical states separate presentation from the content, and
by doing so allow for it to be expressed in many different
</strong> ways.
</strong> ▫ Perhaps instead of rendering some text as bold you want to
render it red, or a different size, or underlined, or
</body> whatever.
</html> ▫ In physical state there is no separation of presentation and
content, and making bold do anything other than bold text
would be confusing and illogical.
• Emphasis vs. Strong
▫ In HTML5, the element is described as representing
"strong importance for its contents."
▫ While Emphasis is used to change the meaning of a
sentence ("I love carrots" vs. "I love carrots"),
▫ Strong is used to give portions of a sentence added
importance (e.g., "Warning! This is very dangerous.")
▫ Both Strong and Emphasis can be nested to increase the
relative degree of importance or stress emphasis,
respectively.
HTML Citation Tag (<cite>)
<html> • The HTML Citation Element (<cite>)
represents a reference to a creative work.
<head> • It must include the title of a work or a
URL reference, which may be in an
<title>My First Webpage</title> abbreviated form according to the
</head> conventions used for the addition of
citation metadata.
<body> • To avoid the default italic style from
More information can be found in being used for the <cite> element use
the CSS font-style property.
<cite>[ISO-0000]</cite>. • A creative work may include a book, a
</body> paper, an essay, a poem, a score, a song,
a script, a film, a TV show, a game, a
</html> sculpture, a painting, a theater
production, a play, an opera, a musical,
an exhibition, a legal case report, a
computer program, a web site, a web
page, a blog post or comment, a forum
post or comment, a tweet, a written or
oral statement, etc.
• The W3C spec states that a reference to a
creative work may include the author's
name.
HTML (<big>) and (<small>)
<html> • The HTML <big> tag is used for specifying
<head> large text.
<title>My First Webpage</title> ▫ This tag is obsolete in HTML5, so it's best
</head> to avoid using it.
<body> • In HTML 4, the <small> tag is used for
<p> specifying small text.
The HTML big tag specifies • The HTML 5, <small> tag is used for
<big>large</big> specifying small print.
(or <big>big</big>) text. ▫ Small print (also referred to as "fine print"
</p> or "mouseprint") usually refers to the part
<p> of a document that contains disclaimers,
The HTML small tag specifies caveats, or legal restrictions, such as
<small>small</small> text. copyrights.
</p>
<footer>
<address>
Contact:
<a href="mailto:hs@example.com">
Homer Simpson
</a>.
</address>
<p><small>© Copyright 2058, Example
Corporation</small>
</p>
</footer>
</body>
</html>
• The HTML <ins> tag is used for markup of
HTML (<ins>) and (<del>) Tags inserted text.
▫ Markup of inserted text can be useful in
determining differences between multiple
<html> versions of the same document. Browsers will
<head>
normally underline inserted text and strike a
line through deleted text.
</head> • The HTML Deleted Text Element (<del>)
<body> represents a range of text that has been deleted
<p> from a document.
<del datetime="2012-09-13"> ▫ This element is often (but need not be)
Todo: add a datetime example here. rendered with strike-through text.
</del> • Attributes
<ins datetime="2012-09-14T10:21:44+09:00"> ▫ This element includes the global attributes.
This inserted text has the date and time it ▫ Cite
was added indicated via the datetime attribute.
 This attribute defines the URI of a resource that
</ins>
explains the change, like a link to some meeting
</p> minutes or a ticket in a troubleshooting system.
</body> ▫ Datetime
</html>
 This attribute indicates the time and date of the
change and must be a valid date with an optional
time string.
 If the value cannot be parsed as a date with an
optional time string, the element does not have an
associated time stamp.
HTML (<b>), (<i>), and (<u>) Tags
<html> • The HTML BOLD <b> Element represents a span of text
<head> stylistically different from normal text, without conveying any
<title>HTML Practice Webpage</title> special importance or relevance.
</head>
<body>
• It is typically used for keywords in a summary, product
<p>
names in a review, or other spans of text whose typical
This article describes several <b>text-level</b> presentation would be boldfaced.
elements. It explains their usage in an <b>HTML</b> • Another example of its use is to mark the lead sentence of
document. each paragraph of an article.
</p>
Keywords are displayed with the default style of the <b> ▫ According to the HTML 5 specification, this tag should be
element, likely in bold. used as a last resort when no other tag is more appropriate.
▫ In particular, headers should use the <h1> to <h6> tags,
<p>The Latin phrase <i>Veni, vidi, vici</i> is often stress emphasis should use the <em>tag, importance
mentioned in music, art, and literature</p>
should be denoted with the <strong> element, and text
marked or highlighted should use the<mark> tag.
<u>Today's Special</u>: Salmon<br />
<span style="text-decoration:underline;">Today's ▫ You can also use the CSS 'font-weight' property to set bold
Special</span>: Salmon text.
</body> • The HTML ITALICS <i> Element represents a range of text
</html> that is set off from the normal text for some reason,.
• For example, technical terms, foreign language phrases,
or fictional character thoughts are typically displayed in
italic type.
• The HTML UNDERLINED (<u>) Element renders text
with an underline, a line under the baseline of its content.
▫ In HTML5, this element represents a span of text with an
unarticulated, though explicitly rendered, non-textual
annotation, such as labeling the text as being a proper
name in Chinese text (a Chinese proper name mark), or
labeling the text as being misspelled.
HTML (<sub>), (<sup>), (<center>)and (<strike>) Tags
<html> • The HTML Subscript Element (<sub>) defines a span of text
<head>
that should be displayed, for typographic reasons, lower, and often
<title>HTML Practice Webpage</title>
</head> smaller, than the main span of text.
<body> ▫ This element should be used for typographical reasons only, i.e.
<p>The chemical formula of water is H<sub>2</sub>O</p> changing the position of the text changing its meaning like in
mathematical (like t2, though the use of a MathML formula
<p>This text is <sup>superscripted</sup></p>
should be considered) or chemical formulas (like H2O).
<strike>Today's Special: Salmon</strike> NO LONGER ▫ This element must not be used for styling purpose like the
AVAILABLE<br /> styling of the product name Latex.
<s>Today's Special: Salmon</s> SOLD OUT
▫ In that case CSS style should be used: the vertical-align property
<center>This text will be centered. with the sub value will achieve the same effect.
<p>So will this paragraph.</p></center> • The HTML Superscript Element (<sup>) defines a span of text
that should be displayed, for typographic reasons, higher, and often
<div style="text-align:center">This text will be centered. smaller, than the main span of text.
<p>So will this paragraph.</p></div>
• The HTML Strikethrough Element (<strike>) renders text
<p style="text-align:center">This line will be centered.<br> with a strikethrough, or a line through it.
And so will this line.</p> • As with all purely styling elements, <strike> has been
</body>
deprecated in HTML 4 and XHTML 1, and obsolete in HTML5.
</html>
If semantically appropriate, i.e., if it represents deleted content,
use the <del> instead; in all other cases use a <s> element.
• The HTML Center Element (<center>) is a block-level
element that can contain paragraphs and other block-level and inline
elements.
▫ The entire content of this element is centered horizontally within its
containing element (typically, the <body>).
▫ This tag has been deprecated in HTML 4 (and XHTML 1) in favor of
the CSS text-align property, which can be applied to
the <div> element or to an individual <p>.
▫ For centering blocks, use other CSS properties like margin-
left and margin-right and set them to auto (or set margin to 0 auto).
HTML (<font>) Tag • The HTML Font Element (<font>) defines the font size, color
and face for its content.
<html> ▫ Do not use this element!
<head>  Though once normalized in HTML 3.2, it was deprecated in
<title>HTML Practice Webpage</title> HTML 4.01, at the same time as all elements related to
styling only, then obsolete in HTML5.
▫ For any new web development, styling should be written
<style type="text/css"> using CSS only.
.new { ▫ The former behavior of the <font> element can be achieved, and
font: italic small-caps 14pt/16pt sans-serif; even better controlled using the CSS Fonts CSS properties.
} ▫ Attributes
.menu {  Like all other HTML elements, this element supports
font: menu; the global attributes.
}  color This attribute sets the text color using either a named
color or a color specified in the hexadecimal #RRGGBB
</style>
format.
 face This attribute contains a comma-separated list of one
</head> or more font names.
<body>  The document text in the default style is rendered in the
<p> first font face that the client's browser supports.
<font face="cursive,serif" color="#ff9900" size="4">  If no font listed is installed on the local system, the
The HTML font tag is now deprecated. browser typically defaults to the proportional or fixed-
width font for that system.
You should use CSS font to set font properties instead.
 size This attribute specifies the font size as either a numeric
<p>Normal font.</p>
or relative value.
<p class="new">New font.</p>  Numeric values range from 1 to 7 with 1 being the
<p class="menu">Menu font.</p> smallest and 3 the default.
</font>  It can be defined using a relative value, like +2 or -3,
</p> which set it relative to the value of the size attribute of
</body> the <basefont> element, or relative to 3, the default
value, if none does exist.
</html>
HTML (<marquee>) Tag
• The HTML <marquee> element is used to insert a scrolling area of text.
• Attributes
▫ behavior Sets how the text is scrolled within the marquee. Possible values are scroll, slide and alternate. If no
value is specified, the default value is scroll.
▫ bgcolor Sets the background color through color name or hexadecimal value.
▫ direction Sets the direction of the scrolling within the marquee. Possible values are left, right, up and down. If no
value is specified, the default value is left.
▫ height Sets the height in pixels or percentage value.
▫ hspace Sets the horizontal margin
▫ loop Sets the number of times the marquee will scroll. If no value is specified, the default value is −1, which
means the marquee will scroll continuously.
▫ scrollamount Sets the amount of scrolling at each interval in pixels. The default value is 6.
▫ scrolldelay Sets the interval between each scroll movement in milliseconds. The default value is 85. Note that
any value smaller than 60 is ignored and the value 60 is used instead, unless truespeed is specified.
▫ truespeed By default, scrolldelay values lower than 60 are ignored. If truespeed is present, those values are not
ignored.
▫ vspace Sets the vertical margin in pixels or percentage value.
▫ width Sets the width in pixels or percentage value.
• Event handlers
▫ onbounce Fires when the marquee has reached the end of its scroll position. It can only fire when the behavior
attribute is set to alternate.
▫ onfinish Fires when the marquee has finished the amount of scrolling that is set by the loop attribute. It can only
fire when the loop attribute is set to some number that is greater than 0.
▫ onstart Fires when the marquee starts scrolling.
• Methods
• start Starts scrolling of the marquee.
• stop Stops scrolling of the marquee.
<html>
<head>
</head>
<body>
<marquee>This text will scroll from right
to left</marquee>
<marquee direction="up">This text will

scroll from bottom to top</marquee>
<marquee direction="down" width="250"

height="200" behavior="alternate"
style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>
</body>
</html>
Tags for Hyperlinks in HTML
• Hyperlinks are the primary method used to navigate between pages and
Web sites.
• Links can point to other web pages, web sites, graphics, files, sounds, e-
mail addresses, and other locations on the same web page.
• When text is used as a hyperlink, it is usually underlined and appears as a
different color.
• There are four types of hyperlinks.
▫ Local:
 A page on the same server or directory.
▫ Internal:
 A section on the current page or document.
▫ External:
 A page or site on a different server or directory.
▫ Download:
 A file for the visitor to download.
▫ E-mail:
 Opens the visitor’s e-mail program.
Local and Internal Hyperlinks
• Local link uses a page name (including sub-directories if needed) as the target.
• It is “local” to the current server.
<a href=”Page_in_the_same_server.html“>Click here to go to the local page </a>
• Internal links can also be called page jump, u can make this jump with two simple
steps
▫ First step:
 Assign the place of the page where you want the pointer to move, and bookmark it by
adding this cod in it
<A NAME=”your bookmark name“></A>
▫ you will need the “your bookmark name” in the next step.
▫ Second step:
 you need to add a link in anyplace in your page to let the user move to your bookmark
point from it
<A HREF=”#your bookmark name “> Add the text to be displayed and
clicked by the user</A>
• Example: lets add a link to move the user to the top of the current page
first step: we add the bookmark code at the top of the page
<A NAME=”top“></A>
second step: add the link anywhere in your page
<A HREF=”#top “> click here to go to the top of this page </A>
The A stands for Anchor.
HREF stands for Hypertext REFerence.
External and Download Hyperlinks
• External Links are used to link any URL page in the world.
<a href = “URL for the website“> text to click on </a>
▫ Example:
<a href = “http://www.google.com/“> Want to Google something! </a>
• Download links are used for allowing a visitor to download a file.
▫ These links are set up exactly the same as the local or external links.
▫ Instead of “pointing” to another page or site, it points to a file.
▫ The types of files available to be used for download depends on your online server.
<a href=”File URL.zip“> Click here to download this file</a>
• E-mail links are for receiving e-mail and feedback from visitors.
▫ This link will prompt the browser’s e-mail program to start and place the e-mail
address in automatically.
<a href= “mailto: mail_address@mail.com“>click here to send me e-
mail </a>
▫ Note the mailto: in the HREF value. This is how the browser detects an e-mail setting
instead of a web page setting.
▫ The subject line of an e-mail can be filled in automatically by adding a SUBJECT
property:
<a href = “mailto: mail_address@mail.com?subject = ‘e-mail from the web-site’“>click
here to send me e-mail </a>
▫ The cc and bcc can be added in the same way.
HTML Link colors and Link targets
• Link Colors:
▫ Links, by default, are show up in different colors from the rest of the text on your web
page.
▫ These settings are found in the individual browser settings.
▫ To over-ride these settings, one can declare own link colors in the opening BODY tag:
 LINK: Color of an non-activated link. (default blue)
 VLINK: Color of a previously visited link. (default red)
 ALINK: Color of a currently active link. (default orange)
<body link= “#0000ff” vlink= “#ff0000” alink= “#ff8429” >
ur HTML code here
</body>
▫ Using the hex color codes, you can choose the colors to suit your page.
• Link Targets:
▫ The target attribute defines how each link will open when clicked.
▫ Will each one open in a new window, or will each one open in the current browser
window?
Target= Description
▫ _blank Opens new page in a new browser window
▫ _self Loads the new page in the current window
▫ _parent Loads new page into a parent frame
▫ _top Loads new page into the current browser window, cancelling all
frames
HTML Image (<img>) Tags
• HTML <img> tag are for inserting image into a web document.
• path of the image is define/declare inside <img> tag.
• The <img> tag is empty tag, i.e., no closing tag.
• <img> tag have some attributes, some commonly used attributes:
▫ The src attribute, src stands for "source", that is path of image URL.
▫ alt Attribute used to define an "alternate text" for an image.
 This specifies text to be identified in the image name.
▫ width and height specifies the size of image to display on webpage.
Sample Image Tag HTML Code
<html>
<head>
</head>
<body>
<img src="jix/img_nat.png" width="120" height="80" alt="Natural"
align="right"/>
<p>Natural resources (economically referred to as land or raw materials) occur naturally
within environments that exist relatively undisturbed by mankind, in a natural form. A
natural resource is often characterized by amounts of biodiversity existent in various
ecosystems.
</p>
</body>
</html>
Responsive Design - Extra
• If your website needs to be displayed on multiple sized screens (eg, mobiles, tablets, desktops,
laptops, etc) you may find that your images are too large for some devices.
• This will be particularly true if you use the width and height attributes to set the dimensions of a
large image.
Here are two ways of dealing with this situation.
1. CSS
▫ One trick is to use the CSS max-width property to set a maximum width for the image of 100%.
 By specifying a maximum width, you are not explicitly setting the actual width.
 You are simply telling the browser not to go any bigger than the width that you specify -100%.
 In this case, the browser should still reduce the size of the image if 100% is too big for the screen.
2. The srcset & sizes Attributes
▫ HTML 5.1 and the HTML Living Standard have introduced the srcset and sizes attributes.
▫ These are designed to deal with the issue of multiple sized screens and resolutions.
▫ The srcset Attribute
 The srcset attribute accepts a comma-separated list of URLs combined with a pixel-density value.
 Each of these would normally represent the same image but at a different size.
 You should still use the standard src attribute to cater for user agents that don't support the srcset attribute.
 Depending on your resolution, and whether your browser supports the srcset attribute, you should have
seen one of the following images:
 If your browser doesn't support the srcset attribute: boracay-white-beach-sunset-300x225.jpg
 1x (one device pixel per CSS pixel): phi-phi-200x150.jpg
 2x (two device pixels per CSS pixel): boracay-resort-1000x750.jpg
▫ The sizes Attribute
 The sizes attribute specifies how large the image should render within the layout. You can use media queries
to specify a list of width values to use, depending on the space available for the image.
 For example, sizes="(min-width: 36em) 33.3vw, 100vw".
Image Maps - Extra
• You can use the <img> tag along with
the <area> and <map> tags to create an image map.
• Image maps enables one image to link to multiple pages.
• You can specify different shapes for the "hotspot" area too.
• The following example demonstrates this (click on each
country to see where the link goes).
<img src ="/pix/examples/australia-nz-map.gif"

width="200" height="142"
alt="Map of Australia and New Zealand"
usemap ="#aus-nz">
<map name="aus-nz">
<area shape ="poly" coords ="3,47,45,12,105,7,140,60,120,125,12,90"
href ="http://www.travel-explorer.com/category/places/australia/" target="_blank"
alt="Australia">
<area shape ="poly" coords ="180,85,200,98,167,142,157,138"

href ="http://www.travel-explorer.com/category/places/new-zealand/" target="_blank"
alt="New Zealand">
</map>
HTML (<object>) Tag
• The HTML Embedded Object Element (<object>)
represents an external resource, which can be treated as
an image, a nested browsing context, or a resource to be
handled by a plugin.


<object data="move.swf" type="application/x-shockwave-
flash"></object>


<object data="move.swf" type="application/x-shockwave-
flash"> <param name="foo" value="bar"> </object>
The HTML <param> Element (or HTML Parameter

Element) defines parameters for <object>
HTML List Tags
<html>
<body>
<h3> Unordered List </h3>
<ul>
• Lists are the preferred <li>An item</li>
<li>Another item</li>
way to display items </ul>
one after the other, <h3> Ordered List </h3>
<ol>
instead of just <li>Item one</li>
using <br> tags. <li>Item two</li>
</ol>
• There are three types of <h3> Definition List </h3>
<dl>
lists, <dt>Term 1</dt>
▫ ordered, <dd>Definition of term 1</dd>
<dt>Term 2</dt>
▫ Unordered, and <dd>Definition of term 2</dd>
▫ definition lists. </dl>
<h3> Modified Ordered List </h3>
<ol type="A" start="6">
<li>List item 1</li>
<li value="12">List item 3</li>
</ol>
</body>
</html
Explanation for HTML List Tags
• Unordered List
▫ An unordered list is an unnumbered list.
▫ Unordered lists simply have a plain bullet point for each item in the list.
▫ Unordered lists are created using
 <ul> tag (to define the list) combined with
 <li> tag (to define each item in the list).
• Ordered List
▫ Ordered lists are ordered by an ordering system (eg, numbers, letters, etc).
▫ Ordered lists are created using
 <ol> tag (to define the list) combined with
• Definition List
▫ Definition lists are similar to other lists but in a definition list, each list item contains two or more
entries;
 a term and at least one description.
▫ Definition lists are created using the HTML
 <dl> tag (to define the list) combined with
 <dt> tag (to define each term in the list) and
 <dd> (to define the description, definition, or value of the term).
• Menu List
▫ HTML5 has introduced a <menu> for defining a menu list.
▫ Menu lists are intended to specify a list of commands.
▫ Menu lists are created using
 <menu> tag (to define the list) combined with
HTML Ordered List Attributes
• Compact
▫ This Boolean attribute hints that the list should be rendered in a compact style.
▫ The interpretation of this attribute depends on the user agent and it doesn't work in all
browsers.
Note: Do not use this attribute, as it has been deprecated.
• Reversed HTML5
▫ This Boolean attribute specifies that the items of the item are specified in the reverse
order, i.e. that the least important one is listed first.
• Start HTML5
▫ This integer attribute specifies the start value for numbering the individual list items.
▫ Note: This attribute was deprecated in HTML4, but reintroduced in HTML5.
• Type
▫ Indicates the numbering type:
 'a' indicates lowercase letters,
 'A' indicates uppercase letters,
 'i' indicates lowercase Roman numerals,
 'I' indicates uppercase Roman numerals,
 and '1' indicates numbers (default).
▫ The type set is used for the entire list unless a different type attribute is used within an
enclosed <li> element.
HTML Tables • The HTML <table> tag
▫ is used for defining a table in an HTML document.
• Tables are defined with the <table> tag.
▫ The <table> tag contains other tags that define the
• A table is divided into rows (with the <tr> tag), and structure of the table.
each row is divided into data cells (with the <td> • The HTML <tr> tag
tag).
▫ represents a row of cells in an HTML table.
▫ A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc. • The HTML <th> tag
• The look and style of your tables is defined ▫ is used for specifying a header cell (or table header)
using Cascading Style Sheets (CSS). within a table.
• Prior to the creation of CSS, HTML <table> elements • The HTML <td> tag
were often used as a method for page layout. ▫ represents a data cell (or table data) in an HTML
table.
▫ This usage has been discouraged since HTML 4,
and the <table> element should not be used • The HTML <thead> tag
for layout purposes. ▫ represents the headers within an HTML table.
▫ However, HTML emails are an exception where ▫ This is the block of rows that consist of the column
tables are still commonly used for layout labels for the parent <table> element.
purposes. • The HTML <tfoot> tag
• HTML Table Elements ▫ represents the footers within an HTML table.
▫ In HTML, tables are created using the following ▫ This is the block of rows that consist of the column
elements: summaries for the parent <table> element.
1. <table> • The HTML <tbody> tag
2. <tr> ▫ is used for grouping table rows.
3. <th> ▫ Specifically, it represents a block of rows that consist
of a body of data for the parent <table> element.
4. <td>
• The HTML <caption> tag
5. <thead>
▫ is used for creating captions for the <table> element.
6. <tfoot>
▫ A <caption> element represents the title of the table.
7. <tbody>
• The HTML <colgroup> tag
8. <caption>
▫ represents a group of one or more columns within a
9. <colgroup> table in an HTML document.
Table Tag Attributes
• align
▫ This enumerated attribute indicates how
the table must be aligned in regard of
the containing document.
▫ It may have the following values:
• cellpadding
 left, meaning that the table is to be
displayed to the left of the document; ▫ This attribute defines the space between
the content of a cell and the border,
 center, meaning that the table is to be displayed or not, of it.
displayed centered in the document;
▫ If it is a pixel length, this pixel-sized space
 right, meaning that the table is to be will be applied on all four sides; if it is a
displayed to the right of the document. percentage length, the content will be
• bgcolor centered and the total vertical space (top
▫ This attribute defines the background and bottom) will represent this percentage.
color of the table and its content. ▫ The same is true for the total horizontal
▫ It is one of the 6-digit hexadecimal code space (left and right).
as defined in sRGB, prefixed by a '#'. • cellspacing
▫ One of the sixteen predefined color ▫ This attribute defines the size, in
strings may be used – fig. percentage or in pixels, of the space
between two cells (both horizontally and
• border vertically), between the top of the table and
▫ This integer attribute defines, in pixels, the cells of the first row, the left of the table
the size of the frame surrounding the and the first column, the right of the table
table. and the last column and the bottom of the
▫ If set to 0, it implies that table and the last row.
the frame attribute is set to void.
<p>Simple table <p>Table with thead, tfoot, and <p>Table with colgroup</p> <p>Table with colgroup and
col</p>
tbody</p> <table>
with <table>
<table> <colgroup>
header</p> <thead> <colgroup span="4"> <col style="background-
<table> </colgroup> color: #0f0">
<tr> <col span="2">
<tr> <th>Header content 1</th>
<tr> </colgroup>
<th>Header content 2</th>
<th>First <th>Countries</th> <tr>
</tr> <th>Capitals</th>
name <th>Lime</th>
</thead> <th>Population</th> <th>Lemon</th>
</th> <th>Language</th> <th>Orange</th>
<th>Last <tfoot> </tr> </tr>
name <tr>
<tr> <tr>
<td>Footer content 1</td> <td>Green</td>
</th> <td>USA</td> <td>Yellow</td>
<td>Footer content 2</td>
</tr> <td>Washington D.C. <td>Orange</td>
</tr> </td> </tr>
<tr> </tfoot> <td>309 million</td>
<td>John</td> <td>English</td> </table>
<tbody> </tr>
<td>Doe</td> <tr>
<p>Simple table with
caption</p>
</tr> <td>Body content 1</td> <tr> <table>
<td>Sweden</td> <caption>Awesome caption
<tr> <td>Body content 2</td>
<td>Stockholm</td> </caption>
</tr>
<td>Jane</td> <td>9 million</td>
</tbody> <td>Swedish</td> <tr>
<td>Doe</td> </table> <td>Awesome data</td>
</tr>
</tr>
</tr> </table> </table>
</table>
HTML Control Tags – Form Tags
• The HTML <form> element represents a document section that
contains interactive controls to submit information to a web server.
• The <form> tag is used in conjunction with form-associated
elements.
• To create a form, you can nest form-associated elements inside the

opening/closing <form> tags.
• Form-Associated Elements - here are the elements that you can use
with your forms.
▫ <input>
▫ <textarea>
▫ <button>
▫ <select>
▫ <option>
▫ <optgroup>
▫ <fieldset>
▫ <label>
• These elements allow the user to provide information to the website -
information which can be submitted to the server for processing.
HTML (<form>) Tag Attributes
Sample HTML <form> tag Code
<html>
<head><title></title></head>
<body>
<form action="/html/home.html"
method="get">
First name:
<input type="text" name="first_name"

value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name"

value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>
<body>
</html>
HTML (<input>) tag
• HTML <input>
tag is used
within a form to
declare an input
element - a
control that
allows the user
to input data.
• Using
the <input> tag,
one can add
controls such as
text input, radio
buttons,
checkbox
controls, submit
buttons, and
more.
HTML (<textarea>) tag
• HTML <textarea> tag is used within a form to declare
a textarea element - a control that allows the user to
input text over multiple rows.
<textarea rows="3" cols="40"> Textarea provides space for
as many characters as you like.
</textarea>
HTML (<button>) Tag
• The HTML <button> tag is used for creating a button within
forms.
• Although you can also use the <input> tag to create an HTML
button, the <button> tag does have some advantages.
▫ You can put content like text or image within the
<button>........</button> tag.
• You should always specify the type attribute for a <button>
tag. Different browsers use different default type for the
button element.
• HTML Button tag can be used inside and outside the form.
▫ If you use it inside the form, it works as the submit button.
You can also use it as reset button.
▫ If you use it outside the form, you can call JavaScript
function on it.
Ex 1:
<button name="button" type="button">Click Here</butto
n>
Ex 2:
<button name="button" value="OK" type="button" onclick=
"hello()">Click Here</button>
<script>
function hello(){
alert("hello Button tag user");
}
</script>
Ex 3:
<form>
Enter Name:<input type="text" name="name"/><br/>
<button type="reset">reset</button>
</form>
HTML (<select>) and (<option>) Tags
• The HTML <select> tag is used for defining a select list.
<select>
<option value ="sydney">Sydney</option>
<option value ="melbourne">Melbourne</option>
<option value ="cromwell" selected>Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>
• The HTML <option> tag is used in conjunction with
the <select> tag and is used for defining option items within the
select list.
HTML (<optgroup>), (< fieldset>) and
(<label>) Tags
• The HTML <optgroup> tag is used for • The HTML <fieldset> tag is used for
grouping related options within your
select list. grouping related form elements and
▫ This makes it easier for users to a <legend> tag provides a title or a
comprehend their choices when looking legend for the <fieldset> tag.
at a large list.
<select>
▫ Check for example in next slide.
<optgroup label="Australia"> • The HTML <label> tag is used for
<option value adding a label to a form control.
="sydney">Sydney</option>
<option value ▫ If you use the label tag, in some
="melbourne">Melbourne</option> browsers, users can select a radio
</optgroup> button or checkbox option by
<optgroup label="New Zealand">
clicking on its label.
<option value
="cromwell">Cromwell</option>
<option value
="queenstown">Queenstown</option>
</optgroup>
</select>
▫ Attribute – label
 Specifies a label for the option group.
HTML (< fieldset>) and (<legend>) Tags - Examples
Frames
• Frames let you divide its main display window
into independent window partitions -- frames,
 each simultaneously displaying a different document
▫ something like a wall of monitors in a TV control
room.
HTML Frames
• Frames allow for multiple .html documents to be displayed inside of
one browser window at a time.
• A web browser uses three HTML tags to comprise the frame
document:
▫ frameset,
▫ frame, and
▫ noframes.
• <frameset> is simply the collection of frames that make up the
browser's window.
▫ column (COLS) and row (ROWS attributes for the frameset tag) let you
define the number and initial sizes for the columns and rows of frames.
▫ The <frameset> tag replaces the <BODY> tag
 THEY MUST NOT BE MIXED.
• <frame> tag defines what document--HTML or otherwise--initially
goes into the frames within those framesets, and is where you may
give the frame a name to use for document hypertext links.
• <noframes> tag
▫ Frame-compatible browsers display your frames
▫ non-compatible browsers display the alternative NOFRAMES content.
Sample Frame Tag Code
<html>
<head> <title>Frames Layout</title> </head>
<frameset rows="60%,*" cols="65%,20%,*">
<frame src="frame1.html">
<frame src="frame3.html"
name="fill_me">
<frame scrolling=yes
src="frame4.html">
<noframes> Sorry, this document can be viewed

only with Netscape Navigator version 2.0 or
later.
<a href = "frame1.html">Take this link</a>
to the first HTML document in the set.
</noframes>
</frameset>
</html>
HTML (<frameset>) and (<frame>) tags
• The <frameset> Tag
▫ The <frameset> tag pair define how your frames will be laid out.
▫ Cols divides the page into vertical strips.
▫ For the cols attribute you are working left-to-right.
▫ So the first percentage is the first ‘strip’ and the second belongs to the second ‘strip’.
 You can use absolute numbers – so cols="200,600" would divide up a screen which is 800pixels wide into one
frame of 200 pixels and one frame of 800 pixels.
▫ In today’s technological environment where screen sizes vary massively, if you’re going to use HTML
Frames, please use percentages.
• The <frame> Tag
▫ Each frame is then defined in the same left-to-right approach.
▫ So the first<frame> tag relates to the first percentage defined.
▫ The <frame>tag can take various attributes:
 src (required):
 the URL to load in the frame, or the file name.
 If you stored your individual files in the same folder as your frameset HTML document, then you’re fine just to use
the file name
 noresize:
 If you don’t specify this then users will be able to resize your frames at will.
 scrolling:
 Do you want users to be able to scroll this frame?
 name (highly recommended):
 give each frame a unique name.
 This is vital for frames based websites in order for your links to work correctly.
 frameborder (highly recommended):
 set a thickness of the border.
 The most common use of frameborder is to set frameborder="0" which makes them invisible.
HTML (<iframe>) tag
• The HTML <iframe> tag is used to specify an inline frame, or, as the HTML5 specification refers to it, a nested
browsing context.
• An inline frame allows you to embed another document within the current HTML document.
• It also allows you to provide an inline frame without using another document –
▫ by simply passing the content to the <iframe> via the srcdoc attribute.
• Usage
▫ Inline frames are often used in online advertising, where the contents of the <iframe> is an ad from an external party.
• Inline frames are typically created using a second HTML document.
▫ This second document contains the content within the inline frame. You use the iframe src attribute to specify the
source of the other document, as well as other attributes to determine the height, width etc.
• Inline frames can also be created without a second document.
▫ To do this, you need to use the srcdoc attribute to pass the content that should appear within the inline frame/nested
browsing context.
Ex 1:
<iframe srcdoc="<p>Hello world!</p>" src="demo_iframe_srcdoc.htm"></iframe>
Ex 2:
<iframe src="/html_5/tags/html_iframe_tag_example.cfm" width="150" height="150" seamless></iframe>
CSS is a style language that defines layout of HTML documents.
CSS covers fonts, colors, margins, lines, height, width,
background images, advanced positions and many other things.
Introduction to CSS
• Cascading Style Sheets (CSS) is a fantastic tool to add layout to your
websites.
• CSS is a must for anyone working with web design, and requires basic
experience with HTML.
• Which software do I need?
▫ Please avoid using software such as FrontPage, DreamWeaver or Word.
▫ Advanced software will not help you learn CSS; instead, it will limit you and slow
down your learning curve significantly.
▫ All you need is a free and simple text editor.
• CSS is a style language that defines layout of HTML documents.
• CSS covers fonts, colours, margins, lines, height, width, background images,
advanced positions and many other things.
• HTML can be (mis-)used to add layout to websites.
• But CSS offers more options and is more accurate and sophisticated.
• HTML is used to structure content.
• CSS is used for formatting structured content.
• CSS is supported by all browsers today.
• CSS was invented to separate presentation style of documents from the
content of documents, makes site maintenance a lot easier.
Basic CSS syntax
• Imagine, we want a nice red color as the background of a
webpage:
▫ Using HTML we could have done it like this:
 <body bgcolor="#FF0000">
▫ With CSS the same result can be achieved like this:
 body {background-color: #FF0000;}
• Fundamental CSS model:
Applying CSS to an HTML Document
• There are three ways you can apply CSS to an HTML
document.
Method 1: In-line (the attribute style)
• One way to apply CSS to HTML is by using the
HTML style attribute.
Method 2: Internal or Embedded (the tag style)
• Another way is to include the CSS codes using the
HTML tag <style>.
Method 3: External (link to a style sheet)
• The recommended method is to link to a so-called
external style sheet.
• An external style sheet is simply a text file with the
extension .css.
Sample CSS code
• In-line (the attribute style) • Internal (the tag style)
<html>
<html> <head>
<head> <title>Example</title>
<title>Example</title> <style type="text/css">
body
</head> {
<body style="background- background-color:#FF0000;
color: #FF0000;"> }
</style>
<p>This is a red page</p>
</head>
</body> <body>
</html> <p>This is a red page</p>
</body>
</html>
External (link to a style sheet)
• An external style sheet is simply a text file with the extension .css.
• Like any other file, you can place the style sheet on your web server or
hard disk.
• The trick is to create a link from the HTML document (default.htm) to
the style sheet (style.css).
▫ Such link can be created with one line of HTML code:
<link rel="stylesheet" type="text/css" href="style/style.css" />
• The line of code must be inserted in the header section of the HTML
code i.e. between the <head>and </head> tags.
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css“
href="style/style.css" />
</head>
<body> ...
• This link tells the browser that it should use the

layout from the CSS file when displaying the
HTML file.
• The really smart thing is that several HTML
documents can be linked to the same style sheet.
▫ In other words, one CSS file can be used to control
the layout of many HTML documents
Try it…
Background Colors
• Foreground color: the 'color' property
▫ The color property describes the foreground color of an element.
h1 { color: #ff0000; }
▫ Colors can be entered as hexadecimal values as in the example above (#ff0000), or
you can use the names of the colors ("red") or rgb-values (rgb(255,0,0)).
• Background color: the 'background-color' property
▫ The background-color property describes the background color of elements.
 To change the background color of an entire page, the background-color property
should be applied to the<body> element.
 You can also apply background colors to other elements including headlines and text.
body
{
background-color: #FFCC66;
}
h1
{
color: #990000;
background-color: #FC9804;
}
Background Images
• Background images: the ‘background-image’ property
▫ The CSS property background-image is used to insert a background image.
body
{ background-color: #FFCC66; background-image: url(“pic.jpeg"); }
h1
{ color: #990000; background-color: #FC9804; }
• Repeat background image: the ‘background-repeat’ property
▫ The CSS property background-repeat controls the how to repeat image both horizontally and vertically to cover
the entire screen.
 Four different values for background-repeat.
• Lock background image: the ‘background-attachment’ property

▫ The property background-attachment specifies whether a background picture
is fixed or scrolls along with the containing element.
body { background-color: #FFCC66; background-image: url(“image1.gif");
background-repeat: no-repeat; background-attachment: fixed; }
h1 { color: #990000; background-color: #FC9804; }
Background Images cont…
• Place background image:
‘background-position’ property
▫ The property background-
position allows you to change
default (top left corner of the
screen) and position the
background image anywhere you
like on the screen.
body
{
background-color: #FFCC66;
background-image:
url(“image2.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right
bottom;
}
h1 { color: #990000;
background-color: #FC9804;
}
CSS Font Style Properties
• Font family: ‘font-family’ property • Generic family
▫ Generic families can best be
▫ The property font-family is used to described as groups of family-
set a prioritized list of fonts to be names with uniformed
used to display a given element or appearances.
web page. ▫ An example is sans-serif, which is a
▫ If the first font on the list is not collection of fonts without "feet".
installed on the computer used to
access the site, the next font on the
list will be tried until a suitable font
is found.
• There are two types of names used to
categorize fonts:
▫ family-names and
▫ generic families.
• Family-name
▫ Examples of a family-name (often
known as "font") can e.g. be "Arial",
"Times New Roman" or "Tahoma".
h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}
CSS Font Style Properties cont…
• Font style : ‘font-style’ property • Font weight: ‘font-weight’ property
▫ The property font-style defines the ▫ The property font-weight describes
how bold or "heavy" a font should
chosen font either in be presented.
 normal, ▫ A font can either
 italic or oblique. be normal or bold.
h1 {font-family: arial, verdana, sans-serif;} p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-

h2 {font-family: "Times New Roman", serif; font-weight: bold;}
serif; font-style: italic;}
• Font size: ‘font-size’ property
• Font variant: ‘font-variant’ property ▫ The size of a font is set by the
property font-size.
▫ The property font-variant is used to
▫ There are many different units (e.g.
choose between normal or small- pixels and percentages) to
caps variants of a font. choose from to describe font sizes.
h1 {font-size: 30px;}
h1 {font-variant: small-caps;} h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
h2 {font-variant: normal;}
CSS Text Formatting Properties
• Text indention: ‘text-indent’ property • Text decoration: ‘text-decoration’ property
▫ The property text-indent allows you ▫ The property text-decoration makes it is
to add an elegant touch to text possible to add different "decorations"
paragraphs by applying an indent to or "effects" to text.
the first line of the paragraph. ▫ Example, you can underline the text,
p { text-indent: 30px; } have a line through or above the text,
• Text alignment: ‘text-align’ property etc.
▫ The CSS property text-
align corresponds to the attribute
align used in old versions of HTML. h1 {text-decoration: underline;}
▫ Text can either be aligned to the left, h2 {text-decoration: overline;}
to the right or centered or justify h3 {text-decoration: line-through;}
will stretch each line so that both the
right and left margins are straight. • Text transformation: ‘text-transform’
th { text-align: right; } property
td { text-align: center; }
p { text-align: justify; }
▫ The text-transform property controls the
capitalization of a text.
• Letter space: ‘letter-spacing’ property
▫ You can choose to capitalize, none,
▫ The spacing between text characters
can be specified using the use uppercase or lowercase regardles
property letter-spacing. s of how the original text is looks in the
HTML code.
▫ The value of the property is simply
the desired width.
h1 {letter-spacing: 6px; } h1 { text-transform: uppercase; }
p {letter-spacing: 3px; } li { text-transform: capitalize; }
CSS Link Properties
• What is a pseudo-class? • Pseudo-class: link
▫ A pseudo-class allows you to take into ▫ The pseudo-class :link is used for
account different conditions or events
when defining a property for an HTML links leading to pages that the
tag. user has not visited.
▫ A link can have different states. For a:link {color: #6699CC;}
example, it can be visited or not • Pseudo-class: visited
visited. ▫ The pseudo-class :visited is used for links
▫ You can use pseudo-classes to leading to pages that the user has visited.
assign different styles to visited and a:visited {color: #660099; }
unvisited links.
• Pseudo-class: active
▫ The pseudo-class :active is used for links
a:link {color: blue;}
that are active.
a:active {background-color: #FFFF00;
a:visited {color: red;} }
Note: • Pseudo-class: hover
Use a:link and a:visited for unvisited and ▫ The pseudo-class :hover is used when the
visited links respectively. mouse pointer hovers over a link.
Links that are active have the pseudo- ▫ This can be used to create interesting
effects.
class a:active and a:hover is when the
a:hover {color: orange;font-style: italic;}
cursor is on the link.
Sample Code for Link CSS property
Example 1: Spacing between letters Example 3: Remove underline of links
a:hover a:link
{
{ color: blue;
letter-spacing: 10px; text-decoration:none;
font-weight:bold; }
color:red; a:visited
} {
color: purple;
text-decoration:none;
Example 2: UPPERCASE and }
lowercase a:active
{
a:hover background-color: yellow;
{ text-decoration:none;
text-transform: uppercase; }
font-weight:bold; a:hover
{
color:blue;
color:red;
background-color:yellow; text-decoration:none;
} }
Identification of elements using id attribute
• In addition to grouping elements, you might need to identify one unique
element, this is done by using the attribute id.
• What is special about the attribute id is that there can not be two elements in
the same document with the same id.
• Each id has to be unique.
<h1 id="c1">Chapter 1</h1>

...
<h2 id="c1-1">Chapter 1.1</h2>
...
...
<h1 id="c2">Chapter 2</h1>
...
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...
• We can define the properties in a specific element by using #id in the stylesheet of the
document.
#c1-2 { color: red; }
Grouping of elements using class attribute
• Sometimes we want one set of links
to be yellow, and another set of links <p>Second category of Grapes :</p>
to be red and the rest of the existing <ul>
links on the webpage to stay blue by <li>
default. <a href="cs.htm" class=“second">Cabernet Sauvignon</a>
• To achieve this, we divide the links </li>
into two categories. <li>
• This is done by assigning a class to <a href="me.htm" class=" second ">Merlot</a>
each link using the attribute class </li>
<li>
<p>First category of Grapes :</p> <a href="pn.htm" class=" second ">Pinot Noir</a>
<ul> </li>
<li> </ul>
<a href="ri.htm" class=“first">Riesling</a>
</li> We can hereafter define special properties
for links belonging to first set and second
<li>
<a href="ch.htm" class=“first">Chardonnay</a>
set, respectively.
</li>
<li> a{ color: blue; }
<a href="pb.htm" class=“first">Pinot Blanc</a>
</li> a.first { color: #FFBB00; }
</ul>
a.second { color: #800000; }
Grouping of elements using <span> and <div> tag
• The elements <span> and <div> are • Grouping with <div>
used to group and structure a document ▫ Whereas <span> is used within a block-
and will often be used together with the level element, <div> is used to group one
attributes class and id. or more block-level elements.
• Grouping with <span> ▫ Aside from this difference, the grouping
with <div> works in more or less the same
▫ The element <span> is what you way.
could call a neutral element which <div id="democrats"> <div id="republicans">
does not add anything to the
document itself. <ul> <ul>
<li>Franklin D. Roosevelt</li> <li>Dwight D.
▫ But with CSS, <span> can be used to <li>Harry S. Truman</li> Eisenhower</li>
add visual features to specific parts of <li>John F. Kennedy</li> <li>Richard Nixon</li>
text in your documents. <li>Lyndon B. Johnson</li> <li>Gerald Ford</li>
<li>Jimmy Carter</li> <li>Ronald Reagan</li>
<p>Early to bed and early to rise <li>Bill Clinton</li> <li>George Bush</li>
makes a man </ul> <li>George W. Bush</li>
<span class="benefit"> </div>
</ul>
healthy</span>, </div>
<span class="benefit">
wealthy</span>
and • And in our style sheet, we can utilize the
<span class="benefit"> grouping in the exact same way as above:
wise</span>.
</p> #democrats { background:blue; }
#republicans { background:red; }
• The CSS belonging to it:
span.benefit {color:red;}
CSS box model
• The box model in CSS describes the boxes which are being generated
for HTML-elements.
• The box model also contains detailed options regarding adjusting
margin, border, padding and content for each element.
CSS box model Example
Resolving Style Conflicts
• Two or more conflicting CSS rules are sometimes applied to
the same element.
▫ So what are the rules in CSS that resolve the question of which
style rule will actually be used when a page is rendered by a
browser?
 The answer is, “it’s complicated”, several factors are involved.
 For example, body {font-family: Georgia;} this rule in a style sheet
would be inherited by all child elements of the body and make
every font on the page display as Georgia.
• The Cascade
▫ Within the cascade, more than one factor can figure into
determining which one of several conflicting CSS rules will
actually be applied.
▫ These factors are:
 source order,
 Specificity, and
 Importance.
 Location is part of the cascade, too.
CSS Margin and padding
• Set the margin in an element
▫ An element has four sides:
 right, left, top and bottom.
▫ The margin is the distance from each side to the neighboring element (or the
borders of the document).
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px; }
▫ Or you could choose a more elegant compilation:
body {
margin: 100px 40px 10px 70px; }
p{
margin: 5px 50px 5px 50px; }
• Set padding in an element
▫ Padding can also be understood as "filling".
▫ That is, padding does not affect the distance of the element to other elements
but only defines the inner distance between the border and the content of the
element.
h1 {
background: yellow;
padding: 20px 20px 20px 80px; }
h2 {
background: orange;
padding-left:120px; }
CSS Borders
• Borders can be used for many things, for example as a decorative element or
to underline a separation of two things.
• CSS gives you endless options when using borders in your pages.
• The width of borders: ‘border-width’ property
▫ The width of borders is defined by the property border-width, which can
obtain the values thin, medium, and thick, or a numeric value, indicated
in pixels.
• The color of borders: ‘border-color’ property
▫ The property border-color defines which color the border has.

▫ The values are the normal color-values for example "#123456",
"rgb(123,123,123)" or "yellow" .
• Types of borders: ‘border-style’ property
▫ There are different types of borders to choose from.
▫ All examples are shown with the color "gold" and the thickness "thick" but
can naturally be shown in other colors and thicknesses.
 The values none or hidden can be used if you do not want any border.
p {
border-width: 1px; p {
border-style: solid; border: 1px solid blue;
border-color: blue; }
}
CSS Height and width
• Setting the width: ‘width’ property
▫ With the width-property, you can define a certain
width of an element.
• Setting the height: ‘height’
▫ You can affect the height of an element with the
property height.
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
CSS Float and Clear
• Floating elements (floats)
▫ An element can be floated to the right or to left by using
the property float.
• Clearing the Float (clear)
▫ An element that has the clear property set on it will not
move up adjacent to the float like the float desires, but
will move itself down past the float.
Principle behind CSS Positioning of elements
• The principle behind CSS positioning is
that you can position any box anywhere in
the system of browser coordinates. h1 {
• Positioning with CSS is a very precise
technique to place elements. position:absolute;
• It is much easier than trying to use tables, top: 100px;
transparent images or anything else. left: 200px;
• Absolute positioning }
▫ An element which is positioned absolute does
not obtain any space in the document. This
means that it does not leave an empty space
after being positioned.
 To position an element absolutely,
the position property is set as absolute.
• Relative positioning
▫ To position an element relatively, the
property position is set as relative.
▫ The position for an element which is
relatively positioned is calculated from the
original position in the document.
 That means that you move the element to the
right, to the left, up or down.
 This way, the element still obtains a space in
the document after it is positioned.
Resolving Style Conflicts cont…
• Source order means the order in which rules appear in the style
sheet.
▫ A rule that appears later in the source order will generally overrule an
earlier rule.
▫ Example:
body {font-family: Georgia;}
h1, h2, h3 {font-family: Arial;}
▫ Because the h1, h2, and h3 selectors are in the source order after the body
rule, the headings would display in Arial, not in Georgia.
▫ There’s also the fact that the selector is picking specific elements.
• Specificity is determined by a mathematical formula, but common
sense can help you understand it.
▫ Example:
p {font-family: Georgia;}
.feature p {font-family: Arial;}
▫ In this case, the selector .feature p is more specific than the selector p.
▫ For any paragraph assigned to the class ‘feature’ the font-family would be
Arial.
▫ The more specific selector overrules the less specific selector.
Resolving Style Conflicts cont…
• !important rules always overrule other rules,
▫ no matter what inheritance, source order or specificity might otherwise
do.
▫ Example:
*{font-family: Arial !important;}
▫ This rule would mean that everything (* selects everything) would be
Arial no matter what other rules were used in the CSS.
• Location
▫ The location of a rule also plays into determining which rule actually ends
up being implemented.
▫ The locations are:
 Browser style rules
 External style rules
 Internal style (in the document head) rules
 Inline style rules
 Individual user style rules
▫ In the list, the browser style rules are the most “distant” from the HTML
page, the individual user styles are the “closest.”
 Within this cascade of style declarations, the closest rule wins.
 An inline style overrules an external style, which overrules a browser style.
Appendix – I – Difference between GET and POST form methods
HTML Tags Ordered by Category
• Basic HTML Tags
Tag Description
<!DOCTYPE Defines the document type
>
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
 Defines a comment
• Formatting HTML Tags
Tag Description
<acronym> Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<abbr> Defines an abbreviation or an acronym
<address> Defines contact information for the author/owner of a document/article
<b> Defines bold text
<bdi> Isolates a part of text that might be formatted in a different direction from other text
outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote> Defines a section that is quoted from another source
<center> Not supported in HTML5. Use CSS instead.
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Represents the defining instance of a term
<em> Defines emphasized text
<font> Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
• Formatting HTML Tags
Tag Description
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
<strike> Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<time> Defines a date/time
<tt> Not supported in HTML5. Use CSS instead.
Defines teletype text
<u> Defines text that should be stylistically different from normal text
<var> Defines a variable

<wbr> Defines a possible line-break
• Frames HTML Tags
Tag Description
<frame> Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.
Defines a set of frames
<noframes> Not supported in HTML5.
Defines an alternate content for users that do not support
frames
<iframe> Defines an inline frame
• Images HTML Tags
Tag Description
<img> Defines an image
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
<canvas> Used to draw graphics, on the fly, via scripting (usually
JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<picture> Defines a container for multiple image resources
• Audio / Video HTML Tags
Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements
(<video>, <audio> and <picture>)
<track> Defines text tracks for media elements (<video> and
<audio>)
<video> Defines a video or movie
• Links HTML Tags
Tag Description
<a> Defines a hyperlink
<link> Defines the relationship between a document and an external
resource (most used to link to style sheets)
<nav> Defines navigation links
• Lists HTML Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from
a popup menu
• Tables HTML Tags
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col> Specifies column properties for each column within a
<colgroup> element
<colgroup> Specifies a group of one or more columns in a table for
formatting
• Styles and Semantics HTML Tags
Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element
<data> Links the given content with a machine-readable translation
• Meta Info HTML Tags
Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a
document
<basefont> Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a
document
• Programming HTML Tags
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support
client-side scripts
<applet> Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object
HTML Attributes
Attribute Belongs to Description
accept <input> Specifies the types of files that the server accepts
(only for type="file")
accept-charset <form> Specifies the character encodings that are to be
used for the form submission
accesskey Global Attributes Specifies a shortcut key to activate/focus an

element
action <form> Specifies where to send the form-data when a
form is submitted
align Not supported in HTML 5. Specifies the alignment according to surrounding
elements. Use CSS instead
alt <area>, <img>, <input> Specifies an alternate text when the original
element fails to display
async <script> Specifies that the script is executed
asynchronously (only for external scripts)
autocomplete <form>, <input> Specifies whether the <form> or the <input>
element should have autocomplete enabled
autofocus <button>, <input>, <keygen>, <select>, <textare Specifies that the element should automatically
a> get focus when the page loads
autoplay <audio>, <video> Specifies that the audio/video will start playing as
soon as it is ready
bgcolor Not supported in HTML 5. Specifies the background color of an element. Use
CSS instead
border Not supported in HTML 5. Specifies the width of the border of an element.
Use CSS instead
challenge <keygen> Specifies that the value of the <keygen> element
should be challenged when submitted
HTML Attributes
charset <meta>, <script> Specifies the character encoding
checked <input> Specifies that an <input> element should be pre-selected
when the page loads (for type="checkbox" or
type="radio")
cite <blockquote>, <del>, <ins>, <q> Specifies a URL which explains the
quote/deleted/inserted text
class Global Attributes Specifies one or more classnames for an element (refers
to a class in a style sheet)
color Not supported in HTML 5. Specifies the text color of an element. Use CSS instead
cols <textarea> Specifies the visible width of a text area

colspan <td>, <th> Specifies the number of columns a table cell should span
content <meta> Gives the value associated with the http-equiv or name
attribute
contenteditable Global Attributes Specifies whether the content of an element is editable or
not
contextmenu Global Attributes Specifies a context menu for an element. The context
menu appears when a user right-clicks on the element
controls <audio>, <video> Specifies that audio/video controls should be displayed

(such as a play/pause button etc)
coords <area> Specifies the coordinates of the area

data <object> Specifies the URL of the resource to be used by the object
data-* Global Attributes Used to store custom data private to the page or
application
HTML Attributes
datetime <del>, <ins>, <time> Specifies the date and time
default <track> Specifies that the track is to be enabled if the user's
preferences do not indicate that another track would be
more appropriate
defer <script> Specifies that the script is executed when the page has
finished parsing (only for external scripts)
dir Global Attributes Specifies the text direction for the content in an element
dirname <input>, <textarea> Specifies that the text direction will be submitted
disabled <button>, <fieldset>, <input>, <keygen>, Specifies that the specified element/group of elements
<optgroup>, <option>, <select>, <textare should be disabled
a>
download <a>, <area> Specifies that the target will be downloaded when a user
clicks on the hyperlink
draggable Global Attributes Specifies whether an element is draggable or not
dropzone Global Attributes Specifies whether the dragged data is copied, moved, or
linked, when dropped
enctype <form> Specifies how the form-data should be encoded when
submitting it to the server (only for method="post")
for <label>, <output> Specifies which form element(s) a label/calculation is

bound to
form <button>, <fieldset>, <input>, <keygen>, Specifies the name of the form the element belongs to
<label>, <meter>, <object>, <output>, <s
elect>, <textarea>
formaction <button>, <input> Specifies where to send the form-data when a form is
submitted. Only for type="submit"
headers <td>, <th> Specifies one or more headers cells a cell is related to
HTML Attributes
height <canvas>, <embed>, <iframe>, <img>, <i Specifies the height of the element
nput>, <object>, <video>
hidden Global Attributes Specifies that an element is not yet, or is no longer,
relevant
high <meter> Specifies the range that is considered to be a high value
href <a>, <area>, <base>, <link> Specifies the URL of the page the link goes to
hreflang <a>, <area>, <link> Specifies the language of the linked document
http-equiv <meta> Provides an HTTP header for the information/value of the
content attribute
id Global Attributes Specifies a unique id for an element
ismap <img> Specifies an image as a server-side image-map
keytype <keygen> Specifies the security algorithm of the key
kind <track> Specifies the kind of text track
label <track>, <option>, <optgroup> Specifies the title of the text track
lang Global Attributes Specifies the language of the element's content
list <input> Refers to a <datalist> element that contains pre-defined
options for an <input> element
loop <audio>, <video> Specifies that the audio/video will start over again, every
time it is finished
low <meter> Specifies the range that is considered to be a low value
max <input>, <meter>, <progress> Specifies the maximum value
maxlength <input>, <textarea> Specifies the maximum number of characters allowed in
an element
media <a>, <area>, <link>, <source>, <style> Specifies what media/device the linked document is
optimized for
method <form> Specifies the HTTP method to use when sending form-
data
min <input>, <meter> Specifies a minimum value
multiple <input>, <select> Specifies that a user can enter more than one value
HTML Attributes
name <button>, <fieldset>, <form>, <iframe>, <input>, <keygen>, Specifies the name of the element
<map>, <meta>, <object>, <output>, <param>,
<select>, <textarea>
novalidate <form> Specifies that the form should not be validated when submitted
onabort <audio>, <embed>, <img>, <object>, <video> Script to be run on abort
onafterprint <body> Script to be run after the document is printed
onbeforeprint <body> Script to be run before the document is printed
onbeforeunload <body> Script to be run when the document is about to be unloaded
onblur All visible elements. Script to be run when the element loses focus
oncanplay <audio>, <embed>, <object>, <video> Script to be run when a file is ready to start playing (when it has
buffered enough to begin)
oncanplaythrough <audio>, <video> Script to be run when a file can be played all the way to the end
without pausing for buffering
onchange All visible elements. Script to be run when the value of the element is changed
onclick All visible elements. Script to be run when the element is being clicked
oncontextmenu All visible elements. Script to be run when a context menu is triggered
oncopy All visible elements. Script to be run when the content of the element is being copied
oncuechange <track> Script to be run when the cue changes in a <track> element
oncut All visible elements. Script to be run when the content of the element is being cut
ondblclick All visible elements. Script to be run when the element is being double-clicked
ondrag All visible elements. Script to be run when the element is being dragged
ondragend All visible elements. Script to be run at the end of a drag operation
ondragenter All visible elements. Script to be run when an element has been dragged to a valid
drop target
ondragleave All visible elements. Script to be run when an element leaves a valid drop target
ondragover All visible elements. Script to be run when an element is being dragged over a valid
drop target
ondragstart All visible elements. Script to be run at the start of a drag operation
ondrop All visible elements. Script to be run when dragged element is being dropped
HTML Attributes
ondurationchan <audio>, <video> Script to be run when the length of the media changes
ge
onemptied <audio>, <video> Script to be run when something bad happens and
the file is suddenly unavailable (like unexpectedly
disconnects)
onended <audio>, <video> Script to be run when the media has reach the end (a
useful event for messages like "thanks for listening")
onerror <audio>, <body>, <embed>, <img>, <object>, <scri Script to be run when an error occurs
pt>, <style>, <video>
onfocus All visible elements. Script to be run when the element gets focus
onhashchange <body> Script to be run when there has been changes to the
anchor part of the a URL
oninput All visible elements. Script to be run when the element gets user input
oninvalid All visible elements. Script to be run when the element is invalid
onkeydown All visible elements. Script to be run when a user is pressing a key
onkeypress All visible elements. Script to be run when a user presses a key
onkeyup All visible elements. Script to be run when a user releases a key
onload <body>, <iframe>, <img>, <input>, <link>, <script Script to be run when the element is finished loading
>, <style>
onloadeddata <audio>, <video> Script to be run when media data is loaded
onloadedmetad <audio>, <video> Script to be run when meta data (like dimensions and
ata duration) are loaded
onloadstart <audio>, <video> Script to be run just as the file begins to load before
anything is actually loaded
HTML Attributes
onmousedown All visible elements. Script to be run when a mouse button is

pressed down on an element
onmousemove All visible elements. Script to be run as long as the mouse pointer
is moving over an element
onmouseout All visible elements. Script to be run when a mouse pointer moves
out of an element
onmouseover All visible elements. Script to be run when a mouse pointer moves
over an element
onmouseup All visible elements. Script to be run when a mouse button is
released over an element
onmousewheel All visible elements. Script to be run when a mouse wheel is being
scrolled over an element
onoffline <body> Script to be run when the browser starts to
work offline
ononline <body> Script to be run when the browser starts to
work online
onpagehide <body> Script to be run when a user navigates away
from a page
onpageshow <body> Script to be run when a user navigates to a
page
HTML Attributes
onpaste All visible elements. Script to be run when the user pastes some content in an
element
onpause <audio>, <video> Script to be run when the media is paused either by the
user or programmatically
onplay <audio>, <video> Script to be run when the media is ready to start playing
onplaying <audio>, <video> Script to be run when the media actually has started
playing.
onpopstate <body> Script to be run when the window's history changes.
onprogress <audio>, <video> Script to be run when the browser is in the process of
getting the media data
onratechange <audio>, <video> Script to be run each time the playback rate changes (like
when a user switches to a slow motion or fast forward
mode).
onreset <form> Script to be run when a reset button in a form is clicked.
onresize <body> Script to be run when the browser window is being

resized.
onscroll All visible elements. Script to be run when an element's scrollbar is being
scrolled
onsearch <input> Script to be run when the user writes something in a
search field (for <input="search">)
onseeked <audio>, <video> Script to be run when the seeking attribute is set to false
indicating that seeking has ended
onseeking <audio>, <video> Script to be run when the seeking attribute is set to true
indicating that seeking is active
onselect All visible elements. Script to be run when the element gets selected
onshow <menu> Script to be run when a <menu> element is shown as a
context menu
HTML Attributes
onstalled <audio>, <video> Script to be run when the browser is unable to fetch
the media data for whatever reason
onstorage <body> Script to be run when a Web Storage area is updated
onsubmit <form> Script to be run when a form is submitted

onsuspend <audio>, <video> Script to be run when fetching the media data is
stopped before it is completely loaded for whatever
reason
ontimeupdate <audio>, <video> Script to be run when the playing position has
changed (like when the user fast forwards to a
different point in the media)
ontoggle <details> Script to be run when the user opens or closes the
<details> element
onunload <body> Script to be run when a page has unloaded (or the
browser window has been closed)
onvolumechange <audio>, <video> Script to be run each time the volume of a
video/audio has been changed
onwaiting <audio>, <video> Script to be run when the media has paused but is
expected to resume (like when the media pauses to
buffer more data)
onwheel All visible elements. Script to be run when the mouse wheel rolls up or
down over an element
open <details> Specifies that the details should be visible (open) to
the user
optimum <meter> Specifies what value is the optimal value for the gauge
HTML Attributes
pattern <input> Specifies a regular expression that an

<input> element's value is checked against
placeholder <input>, <textarea> Specifies a short hint that describes the

expected value of the element
poster <video> Specifies an image to be shown while the

video is downloading, or until the user hits
the play button
preload <audio>, <video> Specifies if and how the author thinks the
audio/video should be loaded when the page
loads
readonly <input>, <textarea> Specifies that the element is read-only
rel <a>, <area>, <link> Specifies the relationship between the current
document and the linked document
required <input>, <select>, <textarea> Specifies that the element must be filled out
before submitting the form
reversed <ol> Specifies that the list order should be

descending (9,8,7...)
rows <textarea> Specifies the visible number of lines in a text
area
rowspan <td>, <th> Specifies the number of rows a table cell
should span
HTML Attributes
sandbox <iframe> Enables an extra set of restrictions for

the content in an <iframe>
scope <th> Specifies whether a header cell is a
header for a column, row, or group of
columns or rows
scoped <style> Specifies that the styles only apply to

this element's parent element and that
element's child elements
selected <option> Specifies that an option should be pre-

selected when the page loads
shape <area> Specifies the shape of the area
size <input>, <select> Specifies the width, in characters (for

<input>) or specifies the number of
visible options (for <select>)
sizes <img>, <link>, <source> Specifies the size of the linked resource
span <col>, <colgroup> Specifies the number of columns to

span
HTML Attributes
spellcheck Global Attributes Specifies whether the element is to

have its spelling and grammar
checked or not
src <audio>, <embed>, <iframe>, <img>, Specifies the URL of the media file
<input>, <script>, <source>, <track>,
<video>
srcdoc <iframe> Specifies the HTML content of the
page to show in the <iframe>
srclang <track> Specifies the language of the track

text data (required if
kind="subtitles")
srcset <img>, <source> Specifies the URL of the image to use
in different situations
start <ol> Specifies the start value of an

ordered list
step <input> Specifies the legal number intervals
for an input field
style Global Attributes Specifies an inline CSS style for an

element
HTML Attributes
tabindex Global Attributes Specifies the tabbing order of an element
target <a>, <area>, <base>, <form> Specifies the target for where to open the
linked document or where to submit the
form
title Global Attributes Specifies extra information about an
element
translate Global Attributes Specifies whether the content of an

element should be translated or not
type <button>, <embed>, <input>, <link>, <menu>, Specifies the type of element
<object>, <script>, <source>, <style>
usemap <img>, <object> Specifies an image as a client-side image-

map
value <button>, <input>, <li>, <option>, <meter>, Specifies the value of the element
<progress>, <param>
width <canvas>, <embed>, <iframe>, <img>, <input>, Specifies the width of the element
<object>, <video>
wrap <textarea> Specifies how the text in a text area is to be

wrapped when submitted in a form

IT Unit 1 Understand The Principles of Web Designing (PDF) 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IT Unit 1 Understand The Principles of Web Designing (PDF) 1

Uploaded by

Copyright:

Available Formats

Unit I: Understand the principles of Web Designing,

use of HTML Tags and apply style sheets, XML

• Launching — it’s time to

<marquee direction="up">This text will

<marquee direction="down" width="250"

<img src ="/pix/examples/australia-nz-map.gif"

<area shape ="poly" coords ="180,85,200,98,167,142,157,138"

The HTML <param> Element (or HTML Parameter

• To create a form, you can nest form-associated elements inside the

<input type="text" name="first_name"

<input type="text" name="last_name"

<input type="submit" value="Submit" />

<noframes> Sorry, this document can be viewed

• This link tells the browser that it should use the

• Lock background image: the ‘background-attachment’ property

h1 {font-family: arial, verdana, sans-serif;}

h1 {font-family: arial, verdana, sans-serif;} p {font-family: arial, verdana, sans-serif;}

td {font-family: arial, verdana, sans-

<h1 id="c1">Chapter 1</h1>

▫ The property border-color defines which color the border has.

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<var> Defines a variable

accesskey Global Attributes Specifies a shortcut key to activate/focus an

cols <textarea> Specifies the visible width of a text area

controls <audio>, <video> Specifies that audio/video controls should be displayed

coords <area> Specifies the coordinates of the area

for <label>, <output> Specifies which form element(s) a label/calculation is

onmousedown All visible elements. Script to be run when a mouse button is

onresize <body> Script to be run when the browser window is being

onsubmit <form> Script to be run when a form is submitted

pattern <input> Specifies a regular expression that an

placeholder <input>, <textarea> Specifies a short hint that describes the

poster <video> Specifies an image to be shown while the

reversed <ol> Specifies that the list order should be

sandbox <iframe> Enables an extra set of restrictions for

scoped <style> Specifies that the styles only apply to

selected <option> Specifies that an option should be pre-

size <input>, <select> Specifies the width, in characters (for

span <col>, <colgroup> Specifies the number of columns to

spellcheck Global Attributes Specifies whether the element is to

srclang <track> Specifies the language of the track

start <ol> Specifies the start value of an

style Global Attributes Specifies an inline CSS style for an

tabindex Global Attributes Specifies the tabbing order of an element

translate Global Attributes Specifies whether the content of an

usemap <img>, <object> Specifies an image as a client-side image-

wrap <textarea> Specifies how the text in a text area is to be

You might also like