COMPUTER SCIENCE
SUBJECT NAME : WEB TECHNOLOGY
CHAPTER NO : 1
CHAPTER NAME : HTML TAGS
LECTURE NO : 1
Web Technology
⚫ The methods by which computers communicate with each other
through the use of markup languages is known as web
technology.
⚫ Web technology involves the use of Hypertext markup language
(HTML), cascading style sheets (CSS), Java Script and Server
Side Programming tools.
HTML overview
⚫ HTML stands for Hyper Text Markup Language
⚫ HTML is the standard markup language for Web pages.
⚫ With HTML you can create your own Website.
⚫ HTML is an application conforming to International Standard
ISO 8879 -- Standard Generalized Markup Language (SGML)
⚫ SGML is a system for defining structured document types, and
markup languages to represent instances of those document types.
Features of HTML
⚫ HTML describes the structure of a Web page
⚫ HTML consists of a series of elements called as Tags
⚫ 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“ and etc
What is an 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:
⚫ Example
<html></html>
<body>Visual Content Goes Here<body>
Web Browsers
⚫ Web browser are client software application to access website
through internet connection.
⚫ The purpose of a web browser is to read HTML documents and
display them correctly.
⚫ A browser does not display the HTML tags, but uses them to
determine how to display the document:
Example Browser Software's are
➢ Google Chrome
➢ Mozilla Firefox
➢ Internet Explorer
➢ Netscape Navigator
➢ Opera
Who invented HTML?
⚫ Tim Berners-Lee
⚫ He invented world wide web(www) in 1989.
⚫ He invented HTML in 1991
⚫ Later, it was enhanced by W3C
⚫ The World Wide Web Consortium (W3C) is an international community that
develops open standards to ensure the long-term growth of the Web and it
is Led by Web inventor and Director Tim Berners-Lee
▪ https://www.w3.org/
⚫ HTML5 is the latest evolution of the standard that defines HTML
HTML Page Structure
Structure HTML Page
Structure of HTML Page
⚫ <!DOCTYPE html>
⚫ declaration defines that this document is an HTML5 document
⚫ <html>
⚫ element is the root element of an HTML page
⚫ <head>
⚫ element contains meta information about the HTML page
⚫ <title>
⚫ element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
⚫ <meta>
⚫ element tells browser about page settings.
⚫ <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.
HTML comment tag
⚫ <!-- some comments -->
<meta> tag
⚫ <meta> tag defines metadata about an HTML document.
⚫ <meta> tags always go inside the <head> element, and
are typically used to specify
⚫ character set
⚫ page description
⚫ keywords
⚫ author of the document
⚫ viewport settings
⚫ Refresh time limit
<meta> tag
HTML Headings
⚫ HTML headings are defined with the <h1> to <h6> tags.
⚫ <h1> defines the bigger heading.
⚫ <h6> defines the smaller heading:
Paragraph
⚫ HTML <p> Tag
⚫ Used to display any paragraph of text content in a web page.
⚫ Browsers automatically add a single blank line before and
after each <p> element.
Line break using <br> tag
⚫ The <br> tag inserts a single line break.
⚫ The <br> tag is useful for writing addresses or poems.
⚫ The <br> tag is an empty tag which means that it has no end tag.
Add Section
⚫ The <div> tag defines a division or a section in an HTML
document.
⚫ The <div> tag is used as a container for HTML elements
The <div> tag
⚫ Any sort of content can be put inside the <div> tag!
⚫ It is a container element.
⚫ By default, browsers always place a line break before and after the
<div> element.
Horizontal Divider Line: <hr> tag
<center> tag
⚫ The <center> tag was used in HTML4 to center-align text or contents of <body>,
<div>,<p>.
⚫ But, in HTML5 it is not recommended, use CSS instead.
HTML Attributes
⚫ HTML attributes provide additional information for HTML elements
or tag.
⚫ All HTML elements can have attributes
⚫ Attributes are always specified in the start tag
⚫ Attributes usually come in name/value pairs like: name="value“
⚫ Example attributes
⚫ lang - to set the language of web page
⚫ bgcolor – to set the background color of a web page
⚫ text - to set the text color
⚫ title - to give information about a particular element
HTML Attribute
- Example en-English
Character set – Universal
Transfer Format
Attributes:
background color and
text color
This will be displayed when
you keep the mouse over it.
Other basic attributes
⚫ align – to set the alignment of text content
⚫ id – to set unique identifier to the tag or element(also used to style)
⚫ class – to set one or more class names to style the element.
Text Formatting Tags
⚫ <b> - Bold text
⚫ <u> - Underlined 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
Text Formatting Tags - Example
Alternate tag for <del>
⚫ <s> tag specifies text that is no longer correct, The text will
be displayed with a line through it.
Alternate tag for <b>
⚫ <strong> used to indicate a text in bold
<small> tag
⚫ The <small> tag defines smaller text (like copyright and other
side-comments).
<!DOCTYPE html> Example Program
<html lang="en">
<head>
<title>My Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="refresh" content="10">
</head>
<body bgcolor="yellow" text="blue">
<div title="Division1" align="center" id="d1">
<p>This is sample text1</p>
<p>This is sample text2</p>
</div>
<div title="Division2" align="left" id="d2">
<p>This is sample text1</p>
<p>This is sample text2</p>
</div>
</body>
</html>
