Module I – Introduction to HTML & CSS
Module I
Introduction to HTML
What Is HTML and Where Did It Come from?
HTML is a markup language
First public specification of the HTML was published by Tim Berners-Lee in 1991
HTML’s codification by the World Wide Web Consortium (better known as the W3C)
started in 1997.
The Netscape Navigator and Microsoft Internet Explorer of the early and mid-1990s, a time
when intrepid developers working for the two browser manufacturers ignored the W3C and
brought forward a variety of essential new tags (such as, for instance, the <table> tag), and
features such as CSS and JavaScript, all of which have been essential to the growth and
popularization of the web.
In 1998 the W3C froze the HTML specification at version 4.01.
XHTML
In 1990s, the W3C developed a new specification called XHTML 1.0, which was a version
of HTML that used stricter XML (extensible markup language) syntax rules.
The goal of XHTML with strict rules was to make page rendering more predictable by
forcing web authors to create web pages without syntax errors.
There are two versions of XHTML.
A) XHTML 1.0 Transitional and B) XHTML 1.0 Strict
The Transitional version of HTML is the most common type of HTML. It has a flexible
syntax, or grammar. Over the years, transitional HTML has been used without syntax
restrictions. If tags are misspelled, the browsers do not correct web developer’s errors,
and they display the content anyway. Browsers do not report HTML errors, they simply
display what they can.
The strict version of HTML is meant to specify rules into HTML and make it more
reliable. As a clean and error-free code helps to load pages faster, it uses the tag support
described by the W3C XHTML 1.0 Strict specification. For example, the strict type
requires closing all tags for all opened tags.
HTML versus XHTML
There are some commonly heard arguments for using HTML rather than XHTML,
especially XHTML 1.0 Strict. First, because of its less syntax rules, HTML is much easier
to write, whereas XHTML requires a level of discipline many of us naturally resist.
Because of the huge number of HTML documents available on the Web, browsers will
continue to support HTML as far as one can see into the future. Indeed, some older
browsers have problems with some parts of XHTML.
There are strong reasons that one should use XHTML. One of the most compelling is
Page 1
Module I – Introduction to HTML & CSS
that quality and consistency in any endeavour
HTML has few syntactic rules, and HTML processors (e.g., browsers) do not enforce
the rules it does have. Therefore, HTML authors have a high degree of freedom to use their
own syntactic preferences to create documents. Because of this freedom, HTML documents
lack consistency, both in low-level syntax and in overall structure. XHTML has strict
syntactic rules that impose a consistent structure on all XHTML documents.
Another significant reason for using XHTML is that when you create an XHTML
document, its syntactic correctness can be checked, either by an XML browser or by a
validationtool.
XML
XML is a textual markup language, the formal rules for XML were set by the W3C. The XML-
syntax rules are pretty easy to follow. The main rules are:
There must be a single root element.
Element names are composed of any of the valid characters (most punctuation symbols
and spaces are not allowed) in XML.
Element names can’t start with a number.
Element and attribute names are case sensitive.
Attributes must always be within quotes.
All elements must have a closing element (or be self-closing).
XML also provides a mechanism for validating its content : for instance, whether the text inside
an element called <date> is actually a valid date, or the text within an element called <year> is a
valid integer and falls between, say, the numbers 1950 and 2010.
HTML5
A group of developers at Opera and Mozilla formed the WHATWG (Web Hypertext
Application Technology Working Group) group within the W3C, and worked to enhance the
features of HTML to higher versions.
The WHATWG group was very small group led by Ian Hickson. By 2009, the W3C
supported the WHATWG group and the work done by them and named it as HTML5.
There are three main aims of HTML5:
1. Specify unambiguously how browsers should deal with invalid markup.
2. Provide an open, nonproprietary programming framework (via JavaScript) for creating
rich web applications.
3. Be backwards compatible with the existing web programs.
Page 2
Module I – Introduction to HTML & CSS
Structure of HTML Documents
A simple html program
Defines the type of document
<!DOCTYPE html>
<html> Root element – indicates that webpage is written in html
<head>
<title> A simple Program Contains title & information about this web page
</title>
</head>
<body>
<p> A simple program to
show the working of html Contents to be displayed on webpage
documents</p>
</body>
</html> Closing of html document
The DOCTYPE (Document Type Definition) element informs the browser, the type of
document it is about to process.
<!DOCTYPE html > specifies that the web page contains HTML code.
Head and Body
HTML5 does not require the use of the <html>, <head>, and <body> elements. However,
most web authors continue to use them.
The <html> element is sometimes called the root element as it contains all the other HTML
elements in the document.
It has a ‘lang’ attribute - This attribute tells the browser the natural language that is being
used for textual content in the HTML document. Eg: <head lang = “en”>
HTML pages are divided into two sections: the head and the body, which correspond to the
<head> and <body> elements.
The head contains descriptive elements about the document, such as its title, any style sheets or
JavaScript files it uses, and other types of meta information used by search engines and other
programs. The body contains content (both HTML elements and regular text) that will be
displayed by the browser.
Eg: <head>
<meta charset = “utf-8” />
<link rel = “stylesheet” href = “[Link]” />
<script src = “[Link]”> </script>
<title> Student activity </title>
<head>
Page 3
Module I – Introduction to HTML & CSS
The <meta> element declares that the character encoding for the document is UTF- 8.
Character encoding refers to which character set standard, is used to encode the characters in
the document. UTF-8 is a more complete variable-width encoding system that can encode all
110,000 characters in the Unicode character set.
The <link> element specifies an external CSS style sheet file by name ‘[Link]’ is used with
this document. The style sheets is used to define the visual display of the HTML elements in
the document. The styles can also be included within the document.
The <script> element references an external JavaScript file. The JavaScript code can also be
written directly within the HTML document.
The <title> element is used to provide a broad description of the content. It is displayed by
the browser in its window and/or tab.
Uses of <title> element –
1. To provide a broad description of content
2. Used by the browser for its bookmarks
3. Used by the browser to store the history list
4. Search engines use it as the linked text in their result pages.
HTML Syntax
Elements and Attributes
HTML documents are composed of textual content and HTML elements.
The term HTML element is often used interchangeably with the term tag.
However, an HTML element consists of the element name within angle brackets (i.e., the
tag) and the content within the tag.
A tag consists of the element name within angle brackets.
The element name appears in both the
beginning tag and the closing tag.
The closing tag contains a forward slash followed by the element name, all enclosed within
angle brackets.
Opening tag content closing tag
<p style = “font-size:40”> Hello I am a paragraph </p>
In the above example, <p> is the tag and “Hello I am a paragraph” is the content. HTML
elements can also contain attributes.
An HTML attribute is a ‘name = value’ pair that provides more information about the
HTML element. In the above example, style is an attribute.
An element which does not contain any text or image content is called an empty element. It
is an instruction to the browser to do something.
Page 4
Module I – Introduction to HTML & CSS
Eg: <img> (image element) is an empty element.
The empty elements are terminated by a trailing slash.
Eg: <img src= “[Link]” /> --------- empty element
Nesting HTML Elements
An HTML element may contain other HTML elements. The container element is said to be a
parent of the contained element (child).
Any elements contained within the child are said to be descendants of the parent element.
Any given child element, may have a variety of ancestors
<body>
<p> This is some big <b> text </b> <body> (parent element)
</p>
<h3>A small title here </h3>
<p> This is <span> important </span> <p>,<h3>, <p> (child elements)
</p>
Siblings elements
</body>
Each HTML element must be nested properly. That is, a child’s ending tag must occur before
its parent’s ending tag. As shown in the above example, <span> tag must be closed first and
then the <p> tag is closed.
Page 5
Module I – Introduction to HTML & CSS
Semantic Markup
HTML documents should focus on the structure of the document. Information about how the
content should look when it is displayed in the browser is taken care by CSS(Cascading Style
Sheets).
HTML document should not describe how to visually present content, but only describe its
content’s structural semantics or meaning.
Structure is a vital way of communicating information in paper and electronic documents. It
makes it easier for the reader to quickly grasp the hierarchy of importance as well as broad
meaning of information in the document.
Importance of writing HTML markup and its advantages:
Maintainability. Semantic markup is easier to update and change than web pages that
contain a great deal of presentation markup. More time is spent maintaining and
modifying existing code than in writing the original code.
Faster. Semantic web pages are typically quicker and faster to download.
Accessibility. Not all web users are able to view the content on web pages. Users with
sight disabilities experience the web using voice reading software. Visiting a web page
using voice reading software can be a very frustrating experience if the site does not use
semantic markup.
Search engine optimization. The most important users of a website are the various
search engine crawlers. These crawlers are automated programs that cross the web
scanning sites for their content, which is then used for users’ search queries. Semantic
markup provides better instructions for these crawlers.
Some basic HTML Elements
HTML5 contains many structural and presentation elements, few elements are explained below -
Headings
Text is often separated into sections in documents by beginning each section with a
heading.
Larger sections sometimes have headings that appear more prominent than headings for
sections nested inside them.
In XHTML, there are six levels of headings, specified by the tags <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>, where <h1> specifies the highest-level heading.
Headings are usually displayed in a boldface font whose default size depends on the
number in the heading tag.
On most browsers, <h1>, <h2>, and <h3> use font sizes that are larger than that of the
default size of text, <h4> uses the default size, and <h5> and <h6> use smaller sizes.
Page 6
Module I – Introduction to HTML & CSS
The heading tags always break the current line, so their content always appears on a new
line.
The following example illustrates the use of headings:
<!DOCTYPE html>
<!-- [Link] An example to illustrate headings-->
<head> <title> Headings </title>
</head>
<body>
<h1> Aidan's Airplanes (h1) </h1>
<h2> The best in used airplanes (h2) </h2>
<h3> "We've got them by the hangarful" (h3) </h3>
<h4> We're the guys to see for a good used airplane (h4) </h4>
<h5> We offer great prices on great planes (h5) </h5>
<h6> No returns, no guarantees, no refunds, all sales are final! (h6) </h6>
</body>
</html>
Output:
Paragraphs and Divisions
Text is normally organized into paragraphs in the body of a document. T
he HTML standard does not allow text to be placed directly in a document body. Instead,
textual paragraphs appear as the content of a paragraph element, specified with the tag <p>.
The <p> tag leaves a line before and after the tag. In displaying the content of a paragraph,
the browser puts as many words as will fit on the lines in the browser window. The browser
supplies a line break at the end of each line.
Page 7
Module I – Introduction to HTML & CSS
For example, the following paragraph might be displayed by a browser as shown below.
<p>
Mary had
a
little lamb, its fleece was white as
snow. And everywhere that
Mary went, the lamb
was sure to go.
</p>
Notice that multiple spaces in the source paragraph element are replaced by single Spaces. If
the content of a paragraph tag is displayed at a position other than the beginning of the line, the
browser breaks the current line and inserts a blank line. For example, the following line would
be displayed as shown below.
<p> Mary had a little lamb, </p> <p> its
fleece was white as snow. </p>
The <p> tag is a container and can contain HTML and other inline HTML elements (the
<strong> and <a> elements). Inline HTML elements are elements that do not cause a paragraph
break but are part of the regular flow of the text.
The <div> element is also a container element and is used to create a logical grouping of content
Links (anchor tag <a>)
Links are an essential feature of all web pages. Links are created using the <a> element (the “a”
stands for anchor).
<a> is an inline tag. A link has two main parts: the destination and the label. The label of a link
can be text or another HTML element such as an image.
Page 8
Module I – Introduction to HTML & CSS
destination label
<a href = “[Link]”> click here </a>
<a href = “[Link]”><img src = “[Link]”></a>
A link specifies the address of the destination. Such an address might be a file name, a
directory path and a file name, or a complete URL.
The document whose address is specified in a link is called the target of that link.
The value assigned to href (hypertext reference) specifies the target of the link. If the target
is in another document in the same directory, the target is just the document’s file name.
If the target file is in a subdirectory named ‘lab’, then the access to file is done by specifying
the directory name. < a href = “lab/[Link]”> clickhere</a>.
<!DOCTYPE html >
<html>
<head>
<title >sdfsfdfddddd</title>
</head>
<body>
<p> Mary had a little
<a href="lab/[Link]"> lamb,</a>
</p> <p> its fleece was white as snow. </p>
</body>
</html>
Output:
Mary had a little lamb,
Its fleece was white as snow.
Anchor element <a> can be used to create a wide range of links. These include:
Links to external file (or to individual resources such as images or movies on an external
site).
Links to other pages or resources within the current file.
Links to other places within the current page.
Page 9
Module I – Introduction to HTML & CSS
Links to particular locations on another page (whether on the same site or on an external
site).
Links that are instructions to the browser to start the user’s email program.
Links that are instructions to the browser to execute a JavaScript function.
Links that are instructions to the mobile browser to make a phone call.
Targets within Documents
If the target of a link is not at the beginning of a document, it must be some element within the
document, in which case there must be some means of specifying it. The target element can
include an id attribute, which can then be used to identify it in an href attribute. Consider the
following example:
<h2 id = “avionics”> Avionics </h2>
Nearly all elements can include an id attribute. The value of an id attribute must be unique
within the document. If the target is in the same document as the link, the target is specified in
the href attribute value by preceding the id value with a pound sign (#), as in the following
example:
<a href = “#avionics”> What about avionics? </a>
When the What about avionics? link is taken; the browser moves the display so that the h2
element whose id is avionics is at the top.
When the target is a part or fragment of another document, the name of the part is specified
at the end of the URL, separated by a pound sign (#), as in this example:
<a href = “[Link]#avionics”> Avionics </a>
One common use of links to parts of the same document is to provide a table of contents in
which each entry has a link. This technique provides a convenient way for the user to get to the
various parts of the document simply and quickly
Page 10
Module I – Introduction to HTML & CSS
URL Relative Referencing
To construct links with the <a> element, reference images with the <img> element, or
include external JavaScript or CSS files, the files should be successfully referred using
relative referencing from the document.
If the referred file is an external file then absolute reference is required. Absolute path
contains the full path including the domain name, any paths, and then finally the file name of
the desired resource.
However, when referencing a resource that is on the same server as the HTML document,
then relative referencing is done. Relative paths change depending upon where the links are
present.
There are several rules to create a link using the relative path:
links in the same directory as the current page have no path information listed filename
sub-directories are listed without any preceding slashes weekly/filename
links up one directory are listed as ../filename
Page 11
Module I – Introduction to HTML & CSS
Sl. Relative Link Type Example
No.
1 Same Directory – To link to a file within the same <a href = “[Link]”>
folder, simply use the file name.
2 Child Directory – To link to a file within a <a href = “images/[Link]”>
subdirectory, use the name of subdirectory and a
slash before the file name.
3 Grandchild/Descendant Directory – To link to a <a href = “css/images/[Link]”>
file that is multiple subdirectories below the current
one, construct the full path by including each
subdirectory name before the file name.
4 Parent/Ancestor Directory – use “../” to reference <a href = “../[Link]”>
a folder above the current one. If trying to reference
a file several levels above the current one, simply <a href = “../../[Link]”>
string together multiple “../”.
5 Sibling Directory – use “../” to move up to the <a href = “../[Link]”>
appropriate level, and then use the same technique
as for child or grandchild directories. <a href = “../images/[Link]”>
6 Root Reference – An alternative approach for <a href = “/[Link]”>
ancestor and sibling references is to use the root
reference approach. Ie. Begin the reference with the <a href = “/images/[Link]”>
root reference (“/”) and then use the same technique
as for child or grandchild directories.
7 Default Document -Web servers allow references <a href = “members”>
to directory names without file names. In such a or
case, the web server will serve the default document. <a href = “/members”>
Inline Text Elements
Few HTML elements do not disrupt the flow of text (i.e., do not cause a line break), they are
called inline elements. Eg: ,<u>,<i>,<b>, <a>, <strong>, <time>, <small> elements).
Page 12
Module I – Introduction to HTML & CSS
Images
The <img> tag is the oldest method for displaying an image.
<img src = “[Link]” alt = “Central Park” title = “Central-Park” width = “80” height = “40” />
src attribute - specifies the file containing the image;
alt - specifies text to be displayed when it is not possible to display the image.
title – specifies the title to be displayed in pop-up tool tip when user moves mouse over image.
width and height - can be included to specify (in pixels) the size of the rectangle for the image
Eg:
<html>
<head>
<head> <title>Image display</title>
</head>
<body>
<p >Displays the image</p>
<img src="[Link]" width="200" height="200">
<p >qqqqqqqq,</p>
</body>
</html>
Page 13
Module I – Introduction to HTML & CSS
Output:
Character entities
These are special characters for symbols for which there is either no easy way to type them
via a
keyboard (such as the copyright symbol or accented characters) or which have a reserved
meaning in HTML (for instance the “<” or “>” symbols).
There are many HTML character entities. They can be used in an HTML document by using
the entity name or the entity number.
Page 14
Module I – Introduction to HTML & CSS
& Ampersand
" Double quote
' Single quote (apostrophe)
° Degree
Lists
HTML provides simple and effective ways to specify lists in documents.
There are three types of lists:
■ Unordered lists. Collections of items in no particular order; these are by default rendered by
the browser as a bulleted list. However, it is common in CSS to style unordered lists without the
bullets. Unordered lists have become the conventional way to markup navigational menus.
■ Ordered lists. Collections of items that have a set order; these are by default rendered by the
browser as a numbered list.
■ Definition lists. Collection of name and definition pairs. These tend to be used infrequently.
Perhaps the most common example would be a FAQ list.
<html >
<head> <title> list </title>
</head>
<body>
<h3> Cessna 210 Engine Starting Instructions </h3>
<ul >
<li>sssss,</li>
Page 15
Module I – Introduction to HTML & CSS
<li>saaaaa</li>
</ul>
<hr size="5" />
<ol >
<li> Set propeller to high RPM </li>
<li> Set ignition switch to "BOTH" </li>
<li> Set auxiliary fuel pump switch to "LOW PRIME" </li>
<li> When fuel pressure reaches 2 to 2.5 PSI, push starter button </li>
</ol>
</body>
</html>
Output:
HTML5 Semantic Structure Elements
The different sections of a website are usually divided by using <div> tag.
Most complex websites are packed solid with <div> elements. Most of these are marked with
different id or class attributes, that are styled by using various CSS.
But many <div> elements make the markup confusing and hard to modify.
Developers typically give suitable names to id or class of <div>, so as to provide some clue
to understand what that part of code means. The new elements help the bots to view sites and
the codes more like people.
The idea behind using new semantic block structuring elements in HTML5 is to make it
easier to understand, what a particular part of document does.
Page 16
Module I – Introduction to HTML & CSS
Some of <div> tag is replaced with self-explanatory HTML5 elements. There is no
predefined presentation for these new tags. The new semantic elements in HTML5 are listed
below -
1. Headers and Footer
2. Heading Groups
3. Navigation
4. Articles and Sections
5. Figure and Figure Captions
6. Aside
Header and Footer
Most website pages have a recognizable header and footer section. Typically the header contains
the site logo and title (and perhaps additional subtitles or taglines), horizontal navigation links,
and perhaps one or two horizontal banners. The typical footer contains less important material,
such as smaller text versions of the navigation, copyright notices, information about the site’s
privacy policy, and perhaps twitter feeds or links to other social sites.
Both the HTML5 <header> and <footer> element can be used not only for page headers and
footers, but also for header and footer elements within other HTML5 containers, such as
<article> or <section>.
Heading Groups
A header may contain multiple headings <hgroup> element is usually used in such cases. The
<hgroup> element can be used in contexts other than a header. For instance, one could also use
an <hgroup> within an <article> or a <section> element. The <hgroup> element can only contain
<h1>, <h2>, etc., elements.
Page 17
Module I – Introduction to HTML & CSS
Navigation
The <nav> element represents a section of a page that contains links to other pages or to other
parts within the same page. Like the other new HTML5 semantic elements, the browser does not
apply any special presentation to the <nav> element. The <nav> element was intended to be used
for major navigation blocks. However, like all the new HTML5 semantic elements, from the
browser’s perspective, there is no definite right or wrong way to use the <nav> element. Its sole
purpose is to make the document easier to understand.
Articles and Sections
The new HTML5 semantic elements <section> and <article> are used to group the tags. Suppose
a book is divided into smaller blocks of content called chapters, which makes the book easier to
read. If each chapter is further divided into sections (and these sections into even smaller
subsections), this makes the content of the book easier to manage for both the reader and the
authors.
The article element represents a section of content that forms an independent part of a document
or site. The section element represents a section of a document, typically with a title
or heading. It is a broader element.
Page 18