Introduction to Web
Technology
Unit 3 HTML
Introduction
HTML stands for Hyper Text Markup Language, which is the most widely
used language on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995.
HTML 4.01 was a major version of HTML and it was published in late 1999.
Though HTML 4.01 version is widely used but currently we are having HTML-5
version which is an extension to HTML 4.01, and this version was published in
2012.
Why HTML?
HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific
information between researchers.
Now, HTML is being widely used to format web pages with the help of different
tags available in HTML language.
HTML is a MUST for students and working professionals to become a great
Software Engineer specially when they are working in Web Development
Domain.
Advantages of HTML
• Create Web site - You can create a website or customize an existing web
template if you know HTML well.
• Become a web designer - If you want to start a carrer as a professional web
designer, HTML and CSS designing is a must skill.
• Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.
• Learn other languages - Once you understands the basic of HTML then other
related technologies like javascript, php, or angular are become easier to
understand.
Applications of HTML
• Web pages development - HTML is used to create pages which are rendered
over the web. Almost every page of web is having html tags in it to render its
details in browser.
• Internet Navigation - HTML provides tags which are used to navigate from one
page to another and is heavily used in internet navigation.
• Responsive UI - HTML pages now-a-days works well on all platform, mobile,
tabs, desktop or laptops owing to responsive design strategy.
• Offline support HTML pages once loaded can be made available offline on the
machine without any need of internet.
• Game development- HTML5 has native support for rich experience and is now
useful in gaming developent arena as well.
Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Simple HTML Document
Example Explained
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Tags
<tagname>content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted
before the tag name
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE
html>. The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>. Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings and Paragraphs
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading:
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com”>This is a link</a>
</body>
</html>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:
Example
<img src="w3schools.jpg" alt=“google.com" width="104" height="142">
HTML Elements
HTML Elements
An HTML element usually consists of a start tag and end tag, with the content inserted in
between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line
break). Empty elements can be "closed" in the opening tag like this: <br />.
HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers, you
must close all HTML elements properly.
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
HTML Attributes
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height
of the image: Example
<img src="img_girl.jpg" width="500" height="600">
The style Attribute
The style attribute is used to specify the styling of an element, like color, font,
size etc. Example
<p style="color:red">I am a paragraph</p>
HTML Attributes
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading. Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Bigger Headings
Each HTML heading has a default size. However, you can specify the size
for any heading with the style attribute:
Example
<h1 style="font-size:60px;">Heading 1</h1>
HTML Attributes
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an
HTML page: Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Source Code
To find out, right-click in the page and select "View Page Source" (in Chrome)
or "View Source" (in IE), or similar in other browsers. This will open a window
containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element"
to see what elements are made up of (you will see both the HTML and the CSS). You
can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new
paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML <pre> element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually
Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Formatting Elements
HTML also defines special elements for defining text with a special
meaning. HTML uses elements like <b> and <i> for formatting
output, like bold or italic text. Formatting elements were designed to
display special types of text:
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML Comments
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag, but not in the closing
tag.
Comments are not displayed by the browser, but they can help document your
HTML source code.
With comments you can place notifications and reminders in
your HTML
HTML Colour
HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
HTML Colour
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Hello</p>
Text Color Example
<h1
style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">
Hello World.</p>
<p
style="color:MediumSeaGreen;
"> Hello World</p>
Border Color Example
<h1 style="border:2px solid
Tomato;">Hello World</h1>
<h1 style="border:2px solid
DodgerBlue;">Hello
HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the
<th> tag. By default, table headings are bold and centered. A table data/cell is
defined with the <td> tag.
The <td> elements are the data containers of the table. They can contain all
sorts of HTML elements; text, images, lists, other tables, etc.
Adding Border :
If you do not specify a border for the table, it will be displayed without
borders.
A border is set using the border property:
HTML Table
Collapsed Border :
If you want the borders to collapse into one border, add the border-collapse
property
Cell padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without
padding.
To set the padding, use the padding property:
Left align heading:
By default, table headings are bold and centered.
To left-align the table headings, use the text-align property
HTML Table
Adding a Caption
To add a caption to a table, use the <caption> tag
A Special Style for One Table
To define a special style for a special table, add an id attribute to the table
HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default
nordered HTML List - Choose List Item Marker
The list-style-type property is used to define the style of the list item marker
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked
HTML Lists
Ordered HTML List
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
The list items will be marked with numbers by default
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item marker
HTML Description List
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the
<dd> tag describes each term
Block-Level Element
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.
Inline Elements
An inline element does not start on a new line and only takes up as much width
as necessary.
This is an inline <span> element inside a paragraph.
<div>
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but both style and class are
common.
When used together with CSS, the <div> element can be used to style
blocks of content:
Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
<span>
The <span> element is often used as a container for some text.
The <span> element has no required attributes, but both style and class are
common. When used together with CSS, the <span> element can be used
to style parts of the text
Example
<h1>My <span style="color:red">Important</span> Heading</h1>
HTML class atrribute
Using The class Attribute The class attribute specifies one or more class names for an
HTML element.
The class name can be used by CSS and JavaScript to perform certain tasks for
elements with the specified class name.
HTML Iframe
An iframe is used to display a web page within a web page.
Iframe - Set Height and Width
Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent
(like "80%").
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the border
property: Example
<iframe src="demo_iframe.htm" style="border:none;"></iframe>
HTML Layouts
Websites often display content in multiple columns (like a magazine or
newspaper).
HTML5 offers new semantic elements that define the different parts of a web
page:
• <header> - Defines a header for a document or a section
• <nav> - Defines a container for navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent self-contained article
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section
• <details> - Defines additional details
• <summary> - Defines a heading for the <details> element
HTML Form
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>
an HTML form contains form elements.
Form elements are different types of input elements, like text fields, checkboxes,
radio buttons, submit buttons, and more.
HTML Form
The <input> Element
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type
attribute. Here are some examples:
Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many
choices)
<input Defines a submit button (for submitting the form)
type="submit">
Image Mapping
Image Map is a list of coordinates relating to a specific Image that allows users
to access different web pages by clicking on different areas of an Image.
Elements required in Mapping an Image :
There are three basic html elements which are required for creating a
mapped image.
1. Map : It is used to create a map of the image with clickable areas.
2. Image : It is used for the image source on which mapping is done.
3. Area : It is used within the map for defining clickable areas.
Image Mapping
Steps to create a mapped image :
Determining Image size :
Determining the size of the image is very important because if the size of the
image is changed then the area coordinates will also require updation.
Creating a map for overlaying the image :
Determine the coordinates of the areas that you want to map :
It can be done in three shapes which are rectangle, circle and polygon. Coordinates
can be found easily by using MS-Paint.
Image Mapping
Server-side and client-side image maps
The implementation of image maps requires the processing of the mouse click
coordinates in conjunction with knowing the image areas and their associated
hypertext links. The processing can take place in one of two places:
• On the server where the Web pages are stored.
• In the Web browser.
Originally, the only option for processing image maps was to do so on the
server. However, later versions of HTML have added features allowing client-
side processing. Many people are now developing their new pages (and
updating older pages) to process image maps in the Web browser itself, thus
reducing the amount of processing required by the server.
Server-side image mapping
Server-side image mapping uses images, .map files and CGI scripts. Often
server-side image maps use the Imagemap programme.
The programme processing image maps needs to be on the server, usually in
the cgi-bin/ directory.
The HREF attribute of server side imagemaps is always a hyperlink to the cgi-
bin directory:
<a href="/cgi-bin/imagemap/user_dir/image.map">
<img src="/user_dir/image.gif">
</a>
Server-side image mapping
In fact, the HREF path can sometimes be interpreted as a combination of two paths:
The location of the "imagemap" programme, such as /cgi-bin/imagemap
The location of the (coordinate) map for the image, user_dir/image.map. This
describes the various areas of the image.
A major disadvantage of server-side image maps is that their implementation can
differ between different server systems. This means that the author of the website
using image maps needs to communicate closely with the Web server's administrator
to ensure that the maps work correctly.
Since there are so many advantages to client-side imagemaps, and almost all
current browser versions support them, we shall not explore server-side image maps
further in this unit (although most image map programmes still provide features to
output/edit server-side map files).
Client-side image mapping
Clients-side image maps have a number of advantages over server-side maps.
• Reduced server load, since the mapping is done on the client.
• There is no need to communicate with server side scripts.
• The user can see the image maps associated hypertext URLs in the status bar
of their browser before clicking.
JSON
JSON or JavaScript Object Notation is a lightweight text-based open standard designed
for human-readable data interchange. JSON stands for JavaScript Object Notation.
• The format was specified by Douglas Crockford.
• It was designed for human-readable data interchange.
• It has been extended from the JavaScript scripting language.
• The filename extension is .json.
• JSON Internet Media type is application/json.
• The Uniform Type Identifier is public.json.
Uses of JSON
• It is used while writing JavaScript based applications that includes browser
extensions and websites.
• JSON format is used for serializing and transmitting structured data over
network connection.
• It is primarily used to transmit data between a server and web applications.
• Web services and APIs use JSON format to provide public data.
• It can be used with modern programming languages.
Characteristics of JSON
• JSON is easy to read and write.
• It is a lightweight text-based interchange format.
• JSON is language independent.
