UNIVERSITY INSTITUTE OF

COMPUTING
UNIT-1
Bachelor of Computer Applications
Web Designing

INTRODUCTION TO BASICS OF HTML DISCOVER . LEARN . EMPOWER

UNIT 1 HTML
Chapter1.1 An Introduction to HTML, History-Versions. Basic structure of an HTML document, creating an
HTML document. Mark up Tags, Heading-Paragraphs, and Line Breaks HTML Tags

Chapter 1.2 Working with Text, Working with Lists, Working with Hyperlinks, Images and Multimedia.
Formatting Tags, Links, List, Tables, Frames, forms, Comments in HTML.
Chapter 1.3 Working with tables in HTML, working with Forms and controls, Audio and video tags in
HTML
Chapter 1.4 Working with Frames in HTML, frames types
 CONTENT OF THE SYLLABUS

TEXT BOOKS
• T1 Honey Cutt, Using the Internet, 4thed., PHI
• T2 Douglas E. C., Computer Networks and Internets, Addison Wisely
REFERENCES
• R1 Robert W. Sebesta, Programming with World Wide Web, Pearson Education
• R2 Xavier, World Wide Web Design with HTML,TMH.
• R3 Thomas A. Powell, The Complete Reference HTML & XHTML, Fourth Edition, Tata Mcgraw Hill,
NewDelhi.
• R4 Internet and World Wide Web, How to Program, Deitel and Goldberg, PHI
HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.

4
HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must
specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

5
HTML Links - Different Colors

An HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is
active.
HTML Link Colors
By default, a link will appear like this (in all browsers):
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

6
HTML Links - Create Bookmarks

Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.

7
Example
First, use the id attribute to create a bookmark:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
Example
<a href="#C4">Jump to Chapter 4</a>

8
HTML IMAGES

Images can improve the design and the appearance of a web page.
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a
holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image

9
HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see, like images,
music, sound, videos, records, films, animations, and more.
Web pages often contain multimedia elements of different types and formats.
Browser Support
The first web browsers had support for text only, limited to a single font in a single color.
Later came browsers with support for colors, fonts, images, and multimedia!

10
HTML5 has introduced two new multimedia tags, AUDIO and VIDEO, for displaying the audio and video
streams on a Web page.

You can play the multimedia files, which are stored in your local computer, on the Web page by specifying their
location. The src attribute is used to specify the multimedia file to play it on the Web page.

If the Web browser does not support AUDIO and VIDEO tags, then the text defined between the starting and the
closing tags of these tags are displayed on the Web page.

Attributes of AUDIO Tag

The AUDIO tag of HTML5 supports only three audio file formats i.e. .oog, .mp3, .wav
11
Attributes of the AUDIO tag

Attribute Description

autoplay Plays the audio file as soon as the Web page loads

controls Displays the controls on the Web page, such as play and pause buttons

loop Replays the audio file

preload Specifies whether the audio file is preloaded on the Web page or not

src Provides the location of the audio file to play

12
Attributes of the VIDEO tag

• Attribute Description

• audio Controls the default state of the video's audio channel

• autoplay Plays the audio file as soon as the Web page loads
• controls Displays the controls on a Web page, such as play and pause buttons
• height Specifies the height of the VIDEO tag
• loop Replays the video file
• preload Specifies whether the video file is preloaded on the Web page or not
• poster Provides an image to be displayed when the video file is not available
• src Provides the location of the video file to play
• width Specifies the width of the VIDEO tag
13
 REFERENCES

• www.w3schools.com/html-introduction

• Complete Reference to HTML, Edition 4, Powell, Chapter 1.

• https://www.tutorialspoint.com/html/

• https://www.w3schools.com/tags/tag_audio.asp

• https://www.w3schools.com/tags/tag_video.asp

14
THANK YOU