Satish Mulgi Satishkumarmulgi@dypvp - Edu.in

HTML
Introduction
Satish Mulgi
smulgi7@gmail.com
satishkumarmulgi@dypvp.edu.in
HTML Introduction
🠶 HTML stands for Hyper Text Markup Language
🠶 HTML is the standard markup language for creating Web pages
🠶 HTML describes the structure of a Web page
🠶 HTML consists of a series of elements
🠶 HTML elements tell the browser how to display the content
🠶 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
A 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>
🠶 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
🠶 The <html> element is the root element of an HTML page
🠶 The <head> element contains meta information about the HTML page
🠶 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the
page's tab)
🠶 The <body> element defines the document's body, and is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.
🠶 The <h1> element defines a large heading
🠶 The <p> element defines a paragraph
Common Html Tags
Html Tag: <html> …</html>
🠶 The <html> tag represent the root of an html document
🠶 The <html> tag tells the browser that this is an html document
🠶 All other html tags are nested between the <html> and </html>
Head Tag: <head>..</head>
🠶 It is used for indicating the head section of html document
🠶 The head tag includes a title for the document, scripts, styles and so on
Title Tag: <title> .. </title>
🠶 The title tag is used for declaring title of the html document
🠶 The title usually displayed in the browsers title bar (at the top)
🠶 The title tag is placed between the opening and closing head tag
Body Tag: <body> … </body>
🠶 The body tag define the document body
🠶 The body tag is used for indicating the main content section of html document
🠶 The body tag contains all the content of html document such as text, images, lists, tables, hyperlink etc.
Attributes of Body Tag:
🠶 Bgcolor: specifies the background color for a web page
🠶 e.g. <body bgcolor=red> .. </body>
🠶 Background: specifies a background image of a web page
🠶 e.g. <body background=“ path of image file”>..</body>
🠶 Text: Specifies color of text for a web page
🠶 e.g. <body text=Yellow>..</body>
🠶 Link: specifies the color of unvisited links of a web page
🠶 e.g. <body link=blue> .. </body>
🠶 Vlink: specifies the color of visited links of a web page
🠶 e.g. <body vlink=green>.. </body>
What is an HTML Element and Attributes ?
HTML Element
🠶 An HTML element is defined by a start tag, some content, and an end tag:
🠶 <tagname>Content goes here...</tagname>
🠶 The HTML element is everything from the start tag to the end tag:
🠶 <h1>My First Heading</h1>
🠶 <p>My first paragraph.</p>
HTML Attributes
🠶 All HTML elements can have attributes
🠶 Attributes provide additional information about elements
🠶 Attributes are always specified in the start tag
🠶 Attributes usually come in name/value pairs like: name="value“
🠶 The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
<a href="https://google.com">Visit Google Site </a>
🠶 The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to
the image to be displayed:
<img src="img_girl.jpg“ width="500" height="600">
HTML Headings & 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>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
🠶 <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Formatting Elements
🠶 Formatting elements were designed to display special types of text:

🠶 <b> - Bold text
🠶 <strong> - Important text
🠶 <i> - Italic text
🠶 <em> - Emphasized text
🠶 <mark> - Marked text
🠶 <small> - Smaller text
🠶 <del> - Deleted text
🠶 <ins> - Inserted text
🠶 <sub> - Subscript text
🠶 <sup> - Superscript text
Font Tag: <font>….</font>
🠶 <font> tag is used to add style, size an color to the text on your site
🠶 This tag specifies the font face, font size and font color of text
🠶 Attributes of Font tag:
🠶 color: specifies color of text
🠶 Face: specifies the font of the text
🠶 Size: specifies the size of text
🠶 e.g. <font color=red> Text in Red Color</font>
🠶 <font color=blue face=arial size=14> Sample Text</font>
Marquee Tag:
🠶 A marquee tag is used to display scrolling text on a web page
🠶 Scrolling text is displayed either horizontally across or vertically down of a web page depending on the setting
🠶 Attributes of marquee tag:
🠶 Direction: specifies the direction of scrolling. This will have value either up, down, left or right
🠶 Behavior: specifies type of scrolling. This will have value either scroll, slide and alternate
🠶 Bgcolor: specifies background color for marquee text
🠶 Width: specifies width of marquee text. This will have value like 10%, 20% and so on
🠶 Height: specifies Height of marquee text. This will have value like 10%, 20% and so on
HTML <img> Tag:
🠶 The <img> tag defines an image in an HTML page. It is used to insert image on web page
🠶 In HTML the <img> tag has no end tag.
🠶 Ex. <img src="smiley.jpg">
🠶 Commonly used attributes of <Img> tag:
align left Specifies the alignment of an image according to

right surrounding elements
border Pixels Specifies the width of the border around an image

height Pixels Specifies the height of an image
hspace Pixels Specifies the whitespace on left and right side of an image
src URL Specifies the URL of an image
vspace Pixels Specifies the whitespace on top and bottom of an image
width Pixels Specifies the width of an image
Creating Hyperlink through 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 you move the mouse over a link, the mouse arrow will turn into a little hand.
🠶 Hyperlinks are defined with the HTML <a> tag:
🠶 <a href="url">link text</a>
🠶 Ex.
🠶 <a href=“d:\Satish data \test.html">Click Here</a>
🠶 The href attribute specifies the destination address
🠶 The link text is the visible part (Click Here).
🠶 Clicking on the link text will send you to the specified address.
HTML Links - Image as Link:
🠶 It is common to use images as links:

🠶 <a href="default.asp">
<img src="smiley.gif" width=10% height=10%>
🠶 </a>
HTML Links - Create a Bookmark:
HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks can be useful if your webpage is
very long. To make a bookmark, you must first create the bookmark, and then add a link to it. When the link is clicked, the page will
scroll to the location with the bookmark.
First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:
<a href="#C4">Jump to Chapter 4</a>
Assignments
🠶 Create an html5 page which will display names of your family members on separate lines in different sizes. State
size of each line in its text.
🠶 Create an html5 page which will display names of players of Indian cricket team with all the different text styles
(bold, italic and underlined) and its combinations on separate lines. State style of each line in its text.
🠶 Create an html5 page containing the polynomial expression as follows
ao + a1x+ a2x2 + a3 x3
🠶 Create an html5 page with following specifications
🠶 Title should be about MYCOLLEGE
🠶 Put the windows Logo image in the background
🠶 Place your College name at the top of the page in large text followed by address in smaller size
🠶 Add names of courses offered each in a different color, style and typeface.
🠶 Add scrolling text with a message of your choice
🠶 Add college image at the bottom

🠶 Create an html5 page with following specifications
🠶 Title should be about MYCITY
🠶 Place your City name at the top of the page in large text and in blue color
Creating List through HTML
🠶 HTML offers web authors three ways for specifying lists of information.
🠶 All lists must contain one or more list elements. Lists may contain −
❑ <ul> − An unordered list. This will list items using plain bullets.
🠶 <ol> − An ordered list. This will use different schemes of numbers to list your items.
<dl> − A definition list. This arranges your items in the same way as they are arranged in a dictionary.
🠶 HTML Unordered Lists (<ul>):
🠶 An unordered list is a collection of related items that have no special order or sequence. This list is created by using
HTML <ul> tag. Each item in the list is marked with a bullet.
🠶 The type Attribute:
🠶 You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the
possible options −
🠶 <ul type = "square">
🠶 <ul type = "disc">
🠶 <ul type = "circle">
🠶 HTML Ordered Lists:
🠶 If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is
created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element
tagged with <li>.
🠶 The type Attribute:
🠶 You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are
the possible options −
🠶 <ol type = "1"> - Default-Case Numerals.
🠶 <ol type = "I"> - Upper-Case Numerals.
🠶 <ol type = "i"> - Lower-Case Numerals.
🠶 <ol type = "A"> - Upper-Case Letters.
🠶 <ol type = "a"> - Lower-Case Letters.
🠶 The start Attribute:
🠶 You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible
options −
🠶 <ol type = "1" start = "4"> - Numerals starts with 4.
🠶 <ol type = "I" start = "4"> - Numerals starts with IV.
🠶 <ol type = "i" start = "4"> - Numerals starts with iv.
🠶 <ol type = "a" start = "4"> - Letters starts with d.
🠶 <ol type = "A" start = "4"> - Letters starts with D.
🠶 HTML Definition Lists:
🠶 HTML supports a list style which is called definition lists where entries are listed like in a dictionary
or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other
name/value list.
🠶 Definition List makes use of following three tags.
🠶 <dl> − Defines the start of the list
🠶 <dt> − A term
🠶 <dd> − Term definition
🠶
Assignments
🠶 Write a HTML code to generate the following output
🠶 Undergraduate Courses
🠶 BBA(CA)
🠶 BCA(Science)
🠶 B.Sc.(Computer Science)
🠶 Post Graduate Courses
🠶 M.Sc.(Comp.Sci.)
🠶 M.Sc.(CA)
🠶 MCA
🠶 Write a HTML code to generate the following output
🠶 Flowering Plant
1. Rose
2. Lily
3. Jasmin
🠶 Non Flowering Plant
1. Fern
2. Spore
Creating Tables through HTML
🠶 The HTML <table> tag is used for defining a table. The table tag contains other tags that define the structure
of the table. The <table> tag defines an HTML table.
🠶 An HTML table consists of the <table> element and one or more <tr>, <th>, and <td> elements.
🠶 The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a
table cell.
🠶 Specific Attributes:
Attribute Value Description
align right Specifies Visual alignment.

left
center
justify
char
bgcolor rgb(x,x,x) Specifies the background color of the table.
#hexcode
colorname
border Pixels Specifies the border width. A value of "0" means no border.
cellpadding pixels or % Specifies the space between the cell borders and their contents.
cellspacing pixels or % Specifies the space between cells.
🠶 Attributes of <th> and <td> tag:
align left Aligns the content in a cell

right
center
justify
char
bgcolor rgb(x,x,x) Specifies the background color of a cell
#xxxxxx
colorname
colspan Number Specifies the number of columns a cell should span

rowspan Number Sets the number of rows a cell should span
valign top Vertical aligns the content in a cell

middle
bottom
baseline
height pixels Sets the height of a cell
%
width pixels Specifies the width of a cell
%
Write html code to create following table
RollNo Name Marks
101 Nilesh Patil 80.56%
102 Pranav Kadam 90.45%
103 Suhas Choudhari 67.89%

Write the HTML code to create the following table
Price
Book_No Book_Name
RS Paise
101 DBMS 200 50
102 C-Prog 150 75
103 JAVA 300 00
104 PHP 250 50
105 ASP 100 00

Write the HTML code which generates the following output.
Country Population (in Crores)

1998 85
INDIA 1999 90
2000 100
1998 30
USA 1999 35
2000 40
1998 25
UK 1999 30
2000 35
Write the HTML code which generates the following output.
Price
Book_No Book_Name
RS Paise
101 DBMS 200 50

102 C-Prog 150 75
103 JAVA 300 00
104 PHP 250 50
105 ASP 100 00
Creating Frames through HTML
🠶 <Frameset> Tag:
🠶 The <frameset> tag defines a frameset.
🠶 The <frameset> element holds one or more <frame> elements. Each <frame> element can
hold a separate document.
🠶 The <frameset> element specifies HOW MANY columns or rows there will be in the
frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
🠶 Attributes of Frameset Tag:

cols pixels Specifies the number and
% size of columns in a
* frameset
rows pixels Specifies the number and
% size of rows in a frameset
*
🠶 <frame> tag:
🠶 The <frame> tag defines one particular window (frame) within a <frameset>.
🠶 Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to
resize, etc.
🠶 Attributes of <frame>:

name Text Specifies the name of a
frame
scrolling yes Specifies whether or not
no to display scrollbars in a
auto frame
src URL Specifies the URL of the
document to show in a
frame
Assignment
🠶 Create HTML page to Divide the frames in to different sections as shown below and add
appropriate HTML files to each frame.
First Frame : Your Name and address

Second Frame : Third Frame :
Bulleted list of favourite colours Numbered List of
Cities
Fourth Frame: Fifth Frame: Sixth Frame:
Scrolling Blinking Name of
Message Reminders Countries
Write HTML code to design a web as per given specification. Divide the browser screen into two
frames. The first frame will display the heading. Divide the second frame into two columns. The
frame on the left should be name of cities consisting of hyperlinks. Clicking on any one of these
hyperlinks will display related information in right hand side frame as shown below
IT Industries in INDIA
City Pune
1. Pune ∙ Infosys
2. Mumbai ∙ Persistent

Satish Mulgi Satishkumarmulgi@dypvp - Edu.in

Uploaded by

Copyright:

Available Formats

Satish Mulgi Satishkumarmulgi@dypvp - Edu.in

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

Satish Mulgi Satishkumarmulgi@dypvp - Edu.in

Uploaded by

Copyright:

Available Formats

HTML

<h1>My First Heading</h1>

🠶 HTML headings are defined with the <h1> to <h6> tags.

🠶 Formatting elements were designed to display special types of text:

align left Specifies the alignment of an image according to

border Pixels Specifies the width of the border around an image

🠶 It is common to use images as links:

HTML Links - Create a Bookmark:

First, create a bookmark with the id attribute:

align right Specifies Visual alignment.

align left Aligns the content in a cell

colspan Number Specifies the number of columns a cell should span

valign top Vertical aligns the content in a cell

RollNo Name Marks

101 Nilesh Patil 80.56%

102 Pranav Kadam 90.45%

103 Suhas Choudhari 67.89%

101 DBMS 200 50

102 C-Prog 150 75

103 JAVA 300 00

104 PHP 250 50

105 ASP 100 00

Country Population (in Crores)

101 DBMS 200 50

Attribute Value Description

Attribute Value Description

First Frame : Your Name and address

You might also like