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:
Heading and Horizontal rules
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.
LIST
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
FONT SIZE
HTML <font> size Attribute
The HTML <font> size attribute adjusts text size within `<font>` elements,
simplifying font size modification directly. Deprecated in HTML5, it ranged
from 1 to 7, defaulting to 3. For modern practices, CSS is recommended for
more flexible and maintainable text styling.
Note: The <font> size attribute is not supported by HTML5.
Syntax:
<font size="number">
This example illustrates the use of the font size property whose value ranges
from 1 to 7 in HTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML font size Attribute</title>
</head>
<body>
<font size="1">GeeksforGeeks!</font><br />
<font size="2">GeeksforGeeks!</font><br />
<font size="3">GeeksforGeeks!</font><br />
<font size="4">GeeksforGeeks!</font><br />
<font size="5">GeeksforGeeks!</font><br />
<font size="6">GeeksforGeeks!</font><br />
<font size="7">GeeksforGeeks!</font>
</body>
</html>
Face and color
The HTML <font> face Attribute is used to specify the font family of the text
inside <font> element. Using the <font> tag for styling is outdated. Modern web
design recommends using CSS instead of<font> tag.
Note: The <font> face attribute is not supported by HTML5.
Syntax:
<font face="font_family">
<!DOCTYPE html>
<html>
<head>
<title>
HTML font face and color Example
</title>
</head>
<body>
<font size="6" face="cursive" color="green">
GeeksforGeeks!
</font>
<br>
<font size="6" face="fantasy" color="green">
GeeksforGeeks!
</font>
<br>
<font size="6" color="green">
GeeksforGeeks!
</font>
</body>
</html>
Output:
HTML align Attribute
HTML align Attribute in HTML is used to specify the alignment of the text
content of The Element. This attribute is used in all elements.
Syntax:
<element_name align="left | right | center | justify">
Attribute Values:
Attribute Values Description
left It sets the text left-align.
right It sets the text right-align.
center It sets the text center-align.
It stretches the text of a
justify paragraph to set the width of all
lines equal.
<!DOCTYPE html>
<html>
<head>
<title>
HTML p align Attribute </title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML p align Attribute</h2>
<p align="left">
Left align content
</p>
<p align="center">
center align content
</p>
<p align="right">
Right align content
</p>
</body>
</html>
Output:
HTML Tables
HTML Tables allow you to arrange data into rows and columns on a web
page, making it easy to display information like schedules, statistics, or
other structured data in a clear format.
What is an HTML Table?
An HTML table is created using the <table> tag. Inside this tag, you use
● <tr> to define table rows,
● <th> for table headers, and
● <td> for table data cells
Each <tr> represents a row, and within each row, <th> or <td> tags
represent the cells in that row.
HTML <frame> Tag
Example
Use the <iframe> tag to embed another document within the current HTML
document:
<iframe src="[Link]