INTRODUCTION TO
HTML
ARINDAM CHAKRABORTY
IIT KANPUR (2019)
WHAT IS HTML?
• A markup language for creating web pages and web applications
• Invented by Tim Berners-Lee in 1989, it is widely used to interpret and compose text, images,
and other material into visual or audible web pages.
• Web browsers receive HTML documents from a web server or from local storage and render
the documents into multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.
• HTML elements are the building blocks of HTML pages.
WHY HTML?
• Wide usage; supported by all web browsers
• Easy to learn and code
• Available by default in WINDOWS; no extra software is needed
• Fast downloading due to text compressibility
• Editing is easy in plain text.
• Can be used to present most contents in a webpage.
• For more involved requirements, upgrades in terms of XML, dHTML are available.
CREATING AND VIEWING HTML CONTENT
• HTML files are created using various HTML editors (plain text or otherwise) with an
extension .htm/.html.
• Save the file every time changes are made, so that they are reflected in the document.
• Open HTML files either by double-clicking the file or by opening the file in a browser by a
right-click
HTML EDITORS
• Notepad and plain text editors
• WYSIWYG editors (online and offline): An online free editor (not recommended as the
document loses human legibility)
• Professional custom editors (CoffeeCup, CKEditor, MS FrontPage etc.)
STRUCTURE OF AN HTML DOCUMENT
• HTML documents are delivered as "documents".
• Parsing to fix syntax and conversion to an internal representation called “DOM”.
• Follows SGML standard defining declarative markups for document preparation.
• <html>...</html> is the root element of the document that contain all other elements.
STRUCTURE OF AN HTML DOCUMENT CONT …
An HTML document is divided into two parts:–
• Head
•<head> metadata </head>
Contains information about the HTML document
The title tag defines the document title in the browser tab. It describes the web page.
• Body
Contains text, graphics, and other elements.
•<body> </body>
It is the visible content of the page.
HTML ELEMENTS
• HTML is composed of a tree of HTML element nodes which may contain other nodes, texts
and can represent semantics also.
• Generally, position of an element is indicated as spanning from a start tag, possibly including
some child content, and is terminated by an end tag.
• Void/empty elements
• HTML attributes
• Raw text elements and normal elements
HTML ELEMENTS CONT …
• <link rel="stylesheet" href="fancy.css" type="text/css">
<link > element points the browser at a style sheet to use when presenting the HTML document
to the user. Attributes may not be quoted if they are composed only of certain characters: letters,
digits, the hyphen-minus and the full stop.
• Standardization of HTML elements: IETF and W3C
HEADING AND PARAGRAPHS
LISTS
• <ul> </ul> and <ol> </ol> <ul style="list-style-type:disc;">
<li> Cricket</li>
HTML lists are defined with <ul> and <ol> tags. < <li> Soccer</li>
ul > contains unordered lists, and <ol> defines the <li> Hockey</li>
numbered lists (•<li> tags for items). <ul> and <ol>
</ul>
are container tags while <li> is a void element.
<ul>
<li> Black</li> <ul style="list-style-type:square;">
<li> Cricket</li>
<li> Blue</li>
<li> Soccer</li>
</ul> <li> Hockey</li>
• <p></p> </ul>
LISTS
Unordered List with Disc Bullets Unordered List with Square Bullets
• Cricket § Cricket
• Soccer § Soccer
• Hockey § Hockey
A SHORT COLLECTION OF HTML TAGS
• <b>defines bold text </b> • <a> anchor and <blockquote> for blocking
quote
• <strong>defines strong text </strong>
• <img> for image and <!--...-->for comment
• <i>defines italic text </i>
• <!DOCTYPE> for document type
• <u>defines underline text </u>
• <abbr> defines an acronym.
• <center>centres the text </center> • <address> defines contact information for the
author/owner of a document/article
• <div> for division </div>
• A comprehensive list of html tags can be
• <hr> for horizontal ruling found in HTML Tags
(://www.w3schools.com/tags/ref_byfunc.asp)
•   adds spaces
HTML ATTRIBUTES
• Provide additional information about an element (specified in the start tag). A modifier for a
given element type.
• Required, optional, standard / global, event: four types of attributes
• Usually the required and optional attributes modify specific HTML elements, while the
standard attributes can be applied to most HTML elements. Event attributes allow an element
to specify scripts to be run under specific circumstances.
• <element attribute="value">element content</element> : A typical structure of element
attribute.
• <abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup
Language">HTML</abbr>
HTML ATTRIBUTES CONT …
• <link rel="stylesheet" href="fancy.css" type="text/css">
• Hyperlinks: <a href=“ref”>Link Text</a>
• Direct a word/phrase/sentence to a different part of the same page or a separate page
altogether. Destination is specified in the href attribute.
• Images: The <img> tag is used to define an image. The source file (src), alternative text (alt),
width, and height are provided as attributes.
<img src=“xyz.jpeg” alt=“name” width=“100” height= “150”>
SOME GLOBAL ATTRIBUTES
• Global attributes can be used on any HTML element. They provide a global meaning and
context to the element. Specifies the text direction for the content in an
dir
element
Specifies a shortcut key to activate/focus an
accesskey
element
Specifies one or more classnames for an element
class
(refers to a class in a style sheet)
id Specifies a unique id for an element
lang Specifies the language of the element's content
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
EVENT ATTRIBUTES
• Lets events trigger actions in a browser, like starting a JavaScript when a user clicks on an
element.
• Event attributes are global and can be added to elements to define specific actions.
• A list of supported tags are usually provided for such an event description.
• <img src="image.gif" onerror="myFunction()"> (A script to run in case of an error)
• <body onload="myFunction()">
• Similarly form control events like mouse hover, mouse click, keyboard and drag events can be
defined globally with an associated list of supported tags.
HTML: SOME ONLINE HELP
• Site 1
• Site2
• Site 3
• Site 4
• And many more out their in the net
HTML: SOME CAVEATS
• Static and not centralised
• Limited styling capabilities
• Different vendors added (mostly, Microsoft early on) their own custom tags that are not
widely supported if at all by most browsers.
• As a declarative language, has less possibilities available to the coder than functional languages.
Definitions of the tags are as in Image Credits: W3C
w3cschools standard repository. and IETF bulletins
