WEB DESIGNING
UNIT 1
What is HTML?
● 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.
History of HTML
In 1993, Tim Berners-Lee, the creator of the World Wide Web, developed HTML 1.0, the
first version of HTML
HTML5
HTML5 is the newest version of HyperText Markup language. The first draft of this version was
announced in January 2008.
Hypertext Markup Language (HTML) has many features, including
● Markup language: HTML is a markup language that annotates text to
define how it's displayed and structured by web browsers.
● Easy to learn: HTML is relatively easy to learn and use, making it a good
starting language for beginners.
● Platform independent: HTML is supported across most browsers and is
not dependent on a specific platform.
● Case insensitive: HTML is case insensitive.
A Simple HTML Document
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
OUTPUT:
My First Heading
My first paragraph
Example Explained
● 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
TAG BASIC
<html> - The main container for HTML pages
<head> - The container for page header information
<title> - The title of the page
<body> - The main body of the page
The <html> Element:
The <html> element is the containing element for the whole HTML
document. Each HTML
document should have one <html> and each document should end with a
closing </html> tag.
The <head> Element:
The <head> element is just a container for all other header elements. It
should be the first
thing to appear after the opening <html> tag.
Each <head> element should contain a <title> element indicating the title of
the document.
The <title> Element:
You should specify a title for every page that you write inside the <title>
element. This element is a
child of the <head> element). It is used in several ways:
• It displays at the very top of a browser window.
• Its is used by search engines that use its content to help index pages.
Example:
Here is the example of using title tag:
<head>
<title>HTML Basic tags</title>
</head>
The <body> Element:
you actually see in the main browser window, which is sometimes referred to
as body content.
A <body> element may contain anything from a couple of paragraphs under
a heading to more
Example:
Here is the example of using body tag:
<body>
<p>This is a paragraph tag.</p>
</body>
Create Headings
Any documents starts with a heading. You use different sizes for your headings. HTML also have
six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
EXAMPLE:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
OUTPUT
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
PAGE STRUCTURE
Comments Working with texts
The comment tag is used to insert comments in the source code. Comments
are not displayed in the browsers.
You can use comments to explain your code, which can help you when you
edit the source code at a later date.
<!-- comment-->
Example :
Create Paragraph - The <p> Element
The <p> element offers a way to structure your text. Each paragraph of text should go in
between an opening <p> and closing </p> tag as shown below in the example:
<p>Here is a paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
OUTPUT
Here is a paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
Create Line Breaks - The <br /> Element:
Whenever you use the <br /> element, anything following it starts on the next line.
EXAMPLE
Hello<br />You come most carefully upon your hour.<br />
Thanks<br />Mahnaz
OUTPUT
Hello
You come most carefully upon your hour.
Thank
Mahnaz
Emphasizing test
This example uses <em> tag to create emphasized text.
<!DOCTYPE html>
<html>
<head>
<title>
How to render as emphasized
text using HTML?
</title>
</head>
<body style="text-align: center;">
<h3>
How to render as emphasized
text using HTML?
</h3>
<em>Emphasized text content</em>
</body>
</html>
Output:
