Unit - 2 Half HTML

UNIT 2 (MWA)
HTML
HTML stands for HyperText Markup Language. It is used to design web pages
using a markup language. HTML is a combination of Hypertext and Markup
language. Hypertext defines the link between web pages. A markup language is
used to define the text document within the tag which defines the structure of
web pages. This language is used to annotate (make notes for the computer)
text so that a machine can understand it and manipulate text accordingly. Most
markup languages (e.g. HTML) are human-readable. The language uses tags to
define what manipulation has to be done on the text.
HTML is a markup language used by the browser to manipulate text, images, and
other content, in order to display it in the required format. HTML was created by
Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the
first standard version was HTML 2.0, published in 1995.
Elements and Tags: HTML uses predefined tags and elements which tell the
browser how to properly display the content. Remember to include closing tags.
If omitted, the browser applies the effect of the opening tag until the end of the
page.
UNIT 2 (MWA)
HTML page structure: The basic structure of an HTML page is laid out below. It
contains the essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created.
<! DOCTYPE html>: This is the document type declaration (not technically a tag).
It declares a document as being an HTML document. The doctype declaration is
not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained
within it.
<head>:
<body>: The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file
using .html or .htm. Once saved as an HTML document, the file can be opened
as a webpage in the browser.
Example:
<! DOCTYPE html>
UNIT 2 (MWA)
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Demo Web Page</title>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A computer science portal for geeks</p>
</body>
</html>
Output:
Features of HTML:
 It is easy to learn and easy to use.
 It is platform-independent.
 Images, videos, and audio can be added to a web page.
 Hypertext can be added to the text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
UNIT 2 (MWA)
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
 HTML can only create static web pages. For dynamic web pages, other
languages have to be used.
 A large amount of code has to be written to create a simple web page.
 The security feature is not good.
Basic HTML Page

There are various tags that we must consider and include while starting to code
in HTML. These tags help in the organization and basic formatting of elements in
our script or web pages. These step-by-step procedures will guide you through
the process of writing HTML.
Basic HTML Document: Below mentioned are the basic HTML tags that divide
the whole document into various parts like head, body, etc.
 Every HTML document begins with a HTML document tag. Although this is
not mandatory, it is a good convention to start the document with this
below-mentioned tag. Please refer to the HTML Doctypes article for more
information related to Doctypes.
<! DOCTYPE html>
 <html> : Every HTML code must be enclosed between basic HTML tags. It
begins with <html> and ends with </html> tag.
 <head>: The head tag comes next which contains all the header information
of the web page or documents like the title of the page and other
miscellaneous information. This information is enclosed within the head tag
which opens with <head> and ends with </head>. The contents will of this
tag will be explained in the later sections of the course.
The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML
elements used inside the <head> element include:
UNIT 2 (MWA)
 <style>-This html tag allows us to insert styling into our webpages and
make them appealing to look at with the help of CSS.
 <title>-The title is what is displayed on the top of your browser when you
visit a website and contains the title of the webpage that you are viewing.
 <base>-It specifies the base URL for all relative URL’s in a document.
 <noscript>– Defines a section of HTML that is inserted when the scripting
has been turned off in the users browser.
 <script>-This tag is used to add functionality in the website with the help
of JavaScript.
 <meta>-This tag encloses the meta data of the website that must be
loaded every time the website is visited. For eg: - the metadata charset
allows you to use the standard UTF-8 encoding in your website. This in
turn allows the users to view your webpage in the language of their
choice. It is a self-closing tag.
 <link>– The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is
self-closing.
 <body>: Next step is the most important of all the tags we have learned so
far. The body tag contains the actual body of the page which will be visible to
all the users. This opens with <body> and ends with </body>. All content
enclosed within this tag will be shown on the web page be it writings or
images or audio or videos or even links. We will see later in the section how
using various tags we may insert mentioned contents into our web pages.
HTML Headings: These tags help us to give headings to the content of a
webpage. These tags are mainly written inside the body tag. HTML provides
us with six heading tags from <h1> to <h6>. Every tag displays the heading in
a different style and font size.
Most HTML heading tag that we use:-
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Example
UNIT 2 (MWA)
<html>
<head>
<title>GeeksforGeeks</title>
</head>
<body>
<h1>Hello GeeksforGeeks</h1>
</body>
</html>
Output:
HTML Paragraph: These tags help us to write paragraph statements on a

webpage. They start with the <p> tag and ends with </p>.
HTML Break: – These tags are used for inserting a single line type break. It
does not have any closing tag. In HTML the break tag is written as <br>.
Example:
<! DOCTYPE html>
<html>
<head>
UNIT 2 (MWA)
<title>GeeksforGeeks</title>
</head>
<body>
<p> A Computer Science portal for geeks<br>

A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
</body>
</html>
Output:
HTML Horizontal Line: The <hr> tag is used to break the page into various parts,
creating horizontal margins with help of a horizontal line running from the left to
right-hand side of the page. This is also an empty tag and doesn’t take any
additional statements.
HTML Images: The image tag is used to insert an image into our web page. The
source of the image to be inserted is put inside the <img
src=”source_of_image“> tag.
Image can be inserted in the image tag in two formats: –
 If the image is in the same folder, then we can just write the name of the
image and the format as the path.
 If the image is in another folder, then we do need to mention the path of the
image and the image name as well as the format of the image.
UNIT 2 (MWA)
Text Formatting
HTML Formatting is a process of formatting text for better look and feel. HTML
provides us ability to format text without using CSS. There are many formatting
tags in HTML. These tags are used to make text bold, italicized, or underlined.
There are almost 14 options available that how text appears in HTML and XHTML.
In HTML the formatting tags are divided into two categories:
o Physical tag: These tags are used to provide the visual appearance to the
text.
o Logical tag: These tags are used to add some logical or semantic value to
the text.
Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML
formatting –
1) Bold Text
HTML<b> and <strong> formatting elements
The HTML <b> element is a physical tag which display text in bold font, without
any logical importance. If you write anything within <b>............</b> element, is
shown in bold letters.
<p> <b>Write Your First Paragraph in bold text.</b></p>
Output:
Write Your First Paragraph in bold text.
The HTML <strong> tag is a logical tag, which displays the content in bold font and
informs the browser about its logical importance. If you write anything between
<strong>???????. </strong>, is shown important text.
<p><strong>This is an important content</strong>, and this is normal content</

p>
UNIT 2 (MWA)
Output:
This is an important content, and this is normal content
2) Italic Text
HTML <i> and <em> formatting elements
The HTML <i> element is physical element, which display the enclosed content in
italic font, without any added importance. If you write anything within
<i>............</i> element, is shown in italic letters.
See this example:
<p> <i>Write Your First Paragraph in italic text.</i></p>
Output:
Write Your First Paragraph in italic text.
The HTML <em> tag is a logical element, which will display the enclosed content
in italic font, with added semantics importance.
See this example:
<p><em>This is an important content</em>, which displayed in italic font.</p>
Output:
This is an important content, which displayed in italic font.
3) HTML Marked formatting
If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
UNIT 2 (MWA)
See this example:
<h2> I want to put a <mark> Mark</mark> on your face</h2>
Output:
I want to put a Mark on your face
4) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
See this example:
<p> <u>Write Your First Paragraph in underlined text.</u></p>
Output:
Write Your First Paragraph in underlined text.
5) Strike Text
Anything written within <strike>.......................</strike> element is displayed with

strikethrough. It is a thin line which cross the statement.
See this example:
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
Output:
Write Your First Paragraph with strikethrough.
6) Monospaced Font
UNIT 2 (MWA)
If you want that each letter has the same width then you should write the content
within <tt>.............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because
different letters have different width. (For example: 'w' is wider than 'i').
Monospaced Font provides similar space among every letter.
See this example:
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
Output:
Hello Write Your First Paragraph in monospaced font.
7) Superscript Text
If you put the content within <sup>..............</sup> element, is shown in

superscript; means it is displayed half a character's height above the other
characters.
See this example:
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
Output:
Hello Write Your First Paragraph in superscript.
8) Subscript Text
If you put the content within <sub>..............</sub> element, is shown in

subscript; means it is displayed half a character's height below the other
characters.
See this example:

UNIT 2 (MWA)
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
Output:
Hello Write Your First Paragraph in subscript.
9) Deleted Text
Anything that puts within <del>..........</del> is displayed as deleted text.
See this example:
<p>Hello <del>Delete your first paragraph.</del></p>
Output:
Hello
10) Inserted Text
Anything that puts within <ins>..........</ins> is displayed as inserted text.
See this example:
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</

ins></p>
Output:
Delete your first paragraph. Delete your first paragraph.Write another paragraph.
11) Larger Text
If you want to put your font size larger than the rest of the text then put the
content within <big>.........</big>. It increase one font size larger than the previous
one.
UNIT 2 (MWA)
See this example:
<p>Hello <big>Write the paragraph in larger font.</big></p>
Output:
Hello Write the paragraph in larger font.
12) Smaller Text
If you want to put your font size smaller than the rest of the text then put the
content within <small>.........</small>tag. It reduces one font size than the
previous one.
See this example:
<p>Hello <small>Write the paragraph in smaller font.</small></p>
Output:
Hello Write the paragraph in smaller font.
HTML Tables
HTML Table is an arrangement of data in rows and columns, or possibly in a

more complex structure. Tables are widely used in communication, research,
and data analysis. Tables are useful for various tasks such as presenting text
information and numerical data. It can be used to compare two or more items in
the tabular form layout. Tables are used to create databases.
Defining Tables in HTML: An HTML table is defined with the “table” tag. Each
table row is defined with the “tr” tag. A table header is defined with the “th”
tag. By default, table headings are bold and centered. A table data/cell is
defined with the “td” tag.
UNIT 2 (MWA)
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
UNIT 2 (MWA)
Adding a border to an HTML Table: A border is set using the CSS border
property. If you do not specify a border for the table, it will be displayed without
borders.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
UNIT 2 (MWA)
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
Adding Collapsed Borders in an HTML Table: For borders to collapse into one
border, add the CSS border-collapse property.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border-collapse: collapse;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
UNIT 2 (MWA)
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
Output:
Adding Cell Padding in an HTML Table: Cell padding specifies the space between
the cell content and its borders. If we do not specify a padding, the table cells
will be displayed without padding.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
UNIT 2 (MWA)
td {
border-collapse: collapse;
}
th,
td {
padding: 20px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
UNIT 2 (MWA)
Output:
Adding Left Align Headings in an HTML Table: By default, the table headings are
bold and centered. To left-align the table headings, we must use the CSS text-
align property.
Adding Border Spacing in an HTML Table: Border spacing specifies the space
between the cells. To set the border-spacing for a table, we must use the CSS
border-spacing property.
Adding a Background Color to the Table: A color can be added as a background

in an HTML table using the “background-color” option.
UNIT 2 (MWA)
Creating Nested Tables: Nesting tables simply means making a Table inside
another Table. Nesting tables can lead to complex tables layouts, which are
visually interesting and have the potential of introducing errors.
<!DOCTYPE html>
<html>
<body>
<table border=5 bordercolor=black>
<tr>
<td> First Column of Outer Table </td>
<td>
<table border=5 bordercolor=grey>
<tr>
<td> First row of Inner Table </td>
</tr>
<tr>
<td> Second row of Inner Table </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Output:

Unit - 2 Half HTML

Uploaded by

Document Information

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

Unit - 2 Half HTML

Uploaded by

Copyright:

Available Formats

UNIT 2 (MWA)

<p>A computer science portal for geeks</p>

Basic HTML Page

HTML Paragraph: These tags help us to write paragraph statements on a

<p> A Computer Science portal for geeks<br>

In HTML the formatting tags are divided into two categories:

HTML<b> and <strong> formatting elements

<p> <b>Write Your First Paragraph in bold text.</b></p>

Write Your First Paragraph in bold text.

<p><strong>This is an important content</strong>, and this is normal content</

This is an important content, and this is normal content

HTML <i> and <em> formatting elements

See this example:

<p> <i>Write Your First Paragraph in italic text.</i></p>

Write Your First Paragraph in italic text.

See this example:

<p><em>This is an important content</em>, which displayed in italic font.</p>

This is an important content, which displayed in italic font.

3) HTML Marked formatting

<h2> I want to put a <mark> Mark</mark> on your face</h2>

I want to put a Mark on your face

If you write anything within <u>.........</u> element, is shown in underlined text.

See this example:

<p> <u>Write Your First Paragraph in underlined text.</u></p>

Write Your First Paragraph in underlined text.

Anything written within <strike>.......................</strike> element is displayed with

See this example:

<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Write Your First Paragraph with strikethrough.

See this example:

<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>

Hello Write Your First Paragraph in monospaced font.

If you put the content within <sup>..............</sup> element, is shown in

See this example:

<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>

Hello Write Your First Paragraph in superscript.

If you put the content within <sub>..............</sub> element, is shown in

See this example:

Hello Write Your First Paragraph in subscript.

Anything that puts within <del>..........</del> is displayed as deleted text.

See this example:

<p>Hello <del>Delete your first paragraph.</del></p>

10) Inserted Text

Anything that puts within <ins>..........</ins> is displayed as inserted text.

See this example:

<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</

11) Larger Text

<p>Hello <big>Write the paragraph in larger font.</big></p>

Hello Write the paragraph in larger font.

12) Smaller Text

See this example:

<p>Hello <small>Write the paragraph in smaller font.</small></p>

Hello Write the paragraph in smaller font.

HTML Table is an arrangement of data in rows and columns, or possibly in a

Adding a Background Color to the Table: A color can be added as a background

You might also like