Scribd
Upload
3 views

Chapter 10 - HTML

The document provides a comprehensive guide on HTML, covering its definition, features, and the basic structure of web pages. It explains various HTML tags, including paired and singular tags, attributes, and how to create static and dynamic web pages. Additionally, it includes practical exercises and demonstrations for creating, saving, and editing web pages using different HTML elements.

Uploaded by

shashwat
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Chapter 10 - HTML

The document provides a comprehensive guide on HTML, covering its definition, features, and the basic structure of web pages. It explains various HTML tags, including paired and singular tags, attributes, and how to create static and dynamic web pages. Additionally, it includes practical exercises and demonstrations for creating, saving, and editing web pages using different HTML elements.

Uploaded by

shashwat
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 98

How to present

your information
electronically
using internet.
Warm up - 5 Minutes
https://www.bbc.com/news
Lesson 10 - HTML
Objectives :-
1. Define HTML with its features.
2. Define tags and attributes with its types.
3. Identify the basic structure of web page.
4. Create, save, view and edit the web page.
5. Create web page using heading,paragraph, line break, center,
horizontal and preformatted tag.
6. Create web page using text formatting tags such bold,italics,
underline, superscript and subscript..
7. Insert inline image ,table and listing on the web page.
8. Use the marquee tag on the web page.
9. Create link between web pages.
START UP
Web Page
A web page is a document commonly written in Hypertext
Markup Language (HTML) that is accessible through the
internet using a web browser.
Web Site
The collection of webpages is called website. A website
can have one web page or more than one pages depending
on the website. It is stored on web server. Ex:-
www.facebook.com
Web Page Designing
Web page designing is the process of creating and publishing simple to
complex pages with hypertext so that such pages can be viewed and shared
by every users on the web. HTML,CSS, JavaScript etc. are used to create
web page.
Types of Web Page
1. Static Web Page
2. Dynamic Web Page
Static Web Pages
Static Web pages are very simple. It is written in
languages such as HTML, JavaScript, CSS, etc. In static
web pages, pages will remain the same until someone
changes it manually.
Dynamic Web Page
Dynamic Web Pages are written in languages such as
CGI, ASP.NET, PHP, Python, JSP etc. In dynamic web
pages, the content of pages is different for different
visitors. It takes more time to load than the static web
page. Dynamic web pages are used where the information
is changed frequently, for example, stock prices, weather
information, etc.
Difference between Static and
Dynamic Webpage
Static Webpage Dynamic Webpage
Static web page are same for every Dynamic web pages are different for
viewers. different viewers.

Static web pages are changed manually Dynamic web pages changes automatically

Eg: Wikipedia. Eg: Youtube.

12
DAY 1
Introduction to
HTML
Day 1 - Objectives
1. Define HTML with its features.
2. Define tags and attributes with its types.
3. Identify the basic structure of web page.

14
HTML

HTML stands for Hyper Text Markup Language (HTML),


a markup language which is a set of markup tags that are
used to create web pages. HTML was published by Tim
Berners Lee in 1993.
...cont.
"Hypertext" refers to the hyperlinks that an HTML page
may contain. "Markup language" refers to the way tags
are used to define the page layout and elements within the
page.
Features of HTML
1. HTML is easy and simple to use.
2. HTML is case insensitive.
3. HTML is supported by different text editors like Notepad,
Wordpad,Sublime Text Editor etc.
4. HTML documents can be executed in different web browsers such as
Mozilla Firefox, Internet Explorer, Netscape Navigator etc.
5. HTML supports different hyperlinks and Image formats.
HTML Tags
HTML tags are all the keywords or commands used in
HTML that tell the browser how to display document in the
webpages. They are surrounded by angle brackets like
<html>.
Video
https://youtu.be/aSiI9B6rzRM
Types of HTML Tags
1. Container or Paired Tags
2. Empty or Singular Tags
Container or Paired Tag
A container tag is such type of tag which has its related ending tag with
start tag. Start tags are written within angular brackets and the end tags
are written within angular bracket with a slash(/) in front.

The text and other tags are written between the start and end tags. The
starting tag activate the effect and the closing tag turns off the effect.
Some examples of container tags are: <HTML></HTML>,
<HEAD></HEAD>,<TITLE></TITLE>, <BODY></BODY>,
<H2></H2>, <B></B>, <I></I>, <U></U>, <P></P>, etc.
The Basic Structure or Syntax of
Paired Tag
Empty or Singular Tag
The tags which have no ending tags are called empty tags. They are
also called stand alone or singular tags. Some examples of empty
tags are <IMG>, <BR>, <HR>, etc.
Attributes
The attributes are the keywords used to provide additional
information to describe the HTML elements. They are always
included in the start tag of the element with some value after
equal to sign. Some of the common attributes are color, height,
width or the location of the linked file.
Video
https://youtu.be/SHQjWmvfz_A
The Basic Structure or Syntax of
Attribute
...cont.
Basic Structure of HTML
Basic Structure of HTML
1. !DOCTYPE

The !DOCTYPE declaration must be the very first


thing in your html document. It is not an html tag, it
is an instruction to the web browser about what
version of HTML the page is written in.
2. <html>
The <html> element is the root element of an HTML
page.The html tag tells the browser that this is a
html document.
3. <head>
The <head> element contains meta information
about the HTML page. The head element is a
container for all the head elements, which can
include a title for a document, scripts, styles, and
more.
5. <title>
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).
6. <body>
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.This is a container tag in which all the
contents and tags of the HTML document are included.
A web page can have only one <BODY> tag. The body
tag starts from <BODY> and ends with </BODY>.
CLASS WORK, Self Reflection and
Exit Ticket
1. Write the answer of the following question on
notebook
a. What is HTML? List its features.
b. What is tag ? Write its types .
c. Define paired tag with its syntax.
d. Define empty tag with its syntax.
e. What is attribute? Write the syntax of using
attributes.
f. Write the basic structure of web (HTML) document.
DAY 2
Body and other
basics tags.
Revision of Day 1 - 5 minutes
1. What is tag?
2. What is attribute?
3. How to write tag and attributes?
4. Write the basic structure of web (HTML)
page.
Day 2 - Objectives
1. Use the different attributes of body tags.
2.Create web page using heading,paragraph,
linebreak, center, horizontal and
preformatted tag.

38
Demonstration - 5 minutes
Creating, Saving , Viewing and Editing
HTML Document.
Color used in HTML -2 minutes
HTML used to recognize 16 color names ("black", "white", "gray", "silver",
"maroon", "red", "purple", "fuchsia", "green", "lime", "olive", "yellow", "navy",
"blue", "teal", and "aqua")
HTML Tags
1. <BODY> tag
2. <br> tag
3. <p> tag
4. <hr> tag
5. <center>
6. <pre>
Attributes of <BODY> tag - 10
minutes
The body tag consists some attributes that allows
setting different formats in the web document. Using
these attributes we can set background, background
color, text color, etc.
The structure of <BODY> tag with attributes
<BODY BGCOLOR="color_name" | BACKGROUND =
"image file" TEXT = "color_name">
any text content
</BODY>
BGCOLOR Attribute
This attribute is used to set the background color of
the web page. By default, a web page has white
background color. We can set our own background
colors by white.

Syntax :- <body bgcolor= “value”> ………


</body>

Example :- <body bgcolor = “pink”> …………


Example with Demonstration -5
minutes
Background Attribute
Example with Demonstration
Text Attribute
Example with Demonstration
Line Break <br> tag - 3 minutes
Example with Demonstration
<HR> tag
The <hr> tag defines a thematic break in an HTML
page (e.g. a shift of topic). The <hr> element is most
often displayed as a horizontal rule that is used to
separate content (or define a change) in an HTML
page.
Paragraph <p> tag
Heading Tag
HTML headings are titles or subtitles that you want
to display on a webpage.
Types of Heading Tags
HTML headings are defined with the <h1> ( is the
biggest) to <h6> (is the smallest) tags. <h1>
defines the most important heading. <h6> defines
the least important heading.
Attributes of Heading Tags
CENTER TAG
The <center> tag is used in HTML to put content at
center of the webpage.

SYNTAX :- <center> content </center>


Demonstration of above tags.
DAY 3
Lab Work
Day 3 Lab - Objective
● Create ,save , view and edit web page.
● Set background color, and image on a web
page.
● Use p, br, hr, heading tags on web pages.

61
DAY 4
Formatting Tags
Day 4 - Objectives
● Identify and use of font tag and other text
formatting tag such b,i, u, pre, sup, sub and
create a web page like

63
Font Tag
This tag is used to set font face, size and color of
given text.
Syntax :- <font face= “value” size = “value” color
= “value”> content </font>
Size Value of face = 1 to 7.
Default value is 3.
Examples and Demonstration

65
Formatting Tags
1. <b> content </b> => To crete bold on text.
2. <i> content </i> => To create italics on text.
3. <u> content </u> => To create underline on text.
4. <sup> content </sup> => To create superscript.
5. <sub> content</sub> => To create subscript.
6. <strike> content </strike => Strikethrough text.
Examples and Demonstration
Insert Image
<img> tag is used to insert inline image on web
page.
Syntax :- <img src = “path” height = “value” width =
“value” align = “value”>
Example and Demonstration

69
DAY 5
LAB WORK
Day 5 Lab Objectives
● Use font tag and other text formatting tag
such b,i, u, pre, sup, sub and create a web
page.

71
DAY 6
MARQUEE AND
TABLE TAG
Day 6 - Objectives
● Identify and use the tag that used to scroll
text on web page.
● Identify and use the tag that used to create
table on web page.

73
Marquee Tag
<marquee> tag is used to animate text or pictures on the webpage.
Syntax: - <marquee behavior = “slide or scroll or alternate” bgcolor
= “color_name”
direction = “left or right or up or down” scrolldelay = “time in
millisecond”> content </marquee>
Examples:- <marquee behavior = “alternate” bgcolor = “red”
direction = “left” scrolldelay = “100”>Animation </marquee>
Examples And Demonstration

75
What is this?
Table Tag
The <table > tag is used to create table structure on the
web page. The <tr> , <td> and <th> tags are used with
table.
1. The <tr> tag is used to define table row.
2. The <td> tag is used to define table column or cell data.
3. The <th> tag is used to define the heading of table
column.
Table Structure in HTML
Syntax of table tag.
<table border= “value” bgcolor= “color_name”
align = “left or center or right” width = “value”
height = “value” cellspacing = “value”
cellpadding = “value”>
<tr> <td> content </td> <td> content </tr>
</table>
Demonstration of creating table.
Example and Demonstration

82
DAY 7
LAB ACTIVITIES
Lab Activities

84
DAY 8
HTML List
Day 8 - Objectives
● Identify and use the tag used to create
ordered and unordered list on web page.
● Identify and use the tag used to create a link
between pages.

86
HTML List
HTML offers 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.

87
Unordered List
An unordered list is a collection of related items that have no
special order or sequence. This list is created by using the
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.

Syntax :- <ul type = “circle|disc|square”>


<li> List </li>
</ul>
88
Example and Demonstration

89
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>.

90
The Sart and Type Attributes of
OL Tag
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.

91
Example and Demonstration

92
Hyperlink
It is most important features of HTML document. It is
special link which allows to connect the HTML
document in many ways. To create hyperlink on the
web page anchor tag <a> is used . <a> anchor tag is
used to create all types of hyperlink in the web page.
In general, the anchor tag tells the browser to anchor
to attach to something else.
Syntax of Hyperlink
<a href = “url” > text or image to describe link
</a>
Here, href is a attribute to specify the url of the
destination anchor or file. The full forms of href
is hypertext reference.
Examples and Demonstration 1

95
Examples and Demonstration 2

96
Day 9 -
Lab
Activity
Lab activity

98

You might also like