Scribd
Upload
28 views46 pages

WEB UNI-2 HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, defining their structure and content. It consists of various elements, tags, and attributes that allow for formatting and linking, making it easy to create interactive and visually appealing web pages. Key features include its simplicity, platform independence, and the ability to incorporate multimedia elements.

Uploaded by

manishgangwal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views46 pages

WEB UNI-2 HTML

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, defining their structure and content. It consists of various elements, tags, and attributes that allow for formatting and linking, making it easy to create interactive and visually appealing web pages. Key features include its simplicity, platform independence, and the ability to incorporate multimedia elements.

Uploaded by

manishgangwal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 46

What is HTML?

I. HTML stands for Hyper Text Markup


Language
II. HTML is the standard markup language for
creating Web pages
III. HTML describes the structure of a Web page
HTML is an acronym which stands for Hyper Text Markup
Language which is used for creating web pages and web
applications.

Hyper Text: Hypertext simply means "Text within Text." A text has
a link within it, is a hypertext. Whenever you click on a link which
brings you to a new webpage, you have clicked on a hypertext.
Hypertext is a way to link two or more web pages (HTML
documents) with each other.

Markup language: A markup language is a computer language


that is used to apply layout and formatting conventions to a text
document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document which is commonly written


in HTML and translated by a web browser. A web page can be
identified by entering an URL. A Web page can be of the static or
dynamic type. With the help of HTML only, we can create
static web pages.

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Description of HTML Example
<!DOCTYPE>: It defines the document type or it instruct the browser
about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all
other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which
contains the metadata(information about the document). It must be
closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page
which appears at the top of the browser window. It must be placed inside
the head tag and should close immediately. (Optional)

<body> : Text between body tag describes the body content of the page
that is visible to the end user. This tag contains the main content of the
HTML document.

<h1> : Text between <h1> tag describes the first level heading of the
webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.

Features of HTML

1) It is a very easy and simple language. It can be easily


understood and modified.

2) It is very easy to make an effective presentation with


HTML because it has a lot of formatting tags.

3) It is a markup language, so it provides a flexible way to


design web pages along with the text.

4) It facilitates programmers to add a link on the web pages


(by html anchor tag), so it enhances the interest of browsing of
the user.

5) It is platform-independent because it can be displayed on


any platform like Windows, Linux, and Macintosh, etc.

6) It facilitates the programmer to add Graphics, Videos, and


Sound to the web pages which makes it more attractive and
interactive.
7) HTML is a case-insensitive language, which means we can
use tags either in lower-case or upper-case.

Building blocks of HTML


An HTML document consist of its basic building blocks which are :

o Tags: An HTML tag surrounds the content and apply meaning to it.
It is written between < and > brackets.
o Attribute: An attribute in HTML provides extra information about
the element, and it is applied within the start tag. An HTML attribute
contains two fields: name & value.

Syntax
1. <tag name attribute_name= " attr_value"> content </ tag name>
o Elements: An HTML element is an individual component of an HTML file. In an HTML
file, everything written within tags are termed as HTML elements.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>The basic building blocks of HTML</title>
5. </head>
6. <body>
7. <h2>The building blocks</h2>
8. <p>This is a paragraph tag</p>
9. <p style="color: red">The style is attribute of para
graph tag</p>
10. <span>The element contains tag, attribute a
nd content</span>
11. </body>
12. </html>

Output:

The building blocks


This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

HTML Tags
HTML tags are like keywords which defines that how web browser will
format and display the content. HTML tags contain three main parts:
opening tag, content and closing tag. But some HTML tags are unclosed
tags.

When a web browser reads an HTML document, browser reads it from top
to bottom and left to right. HTML tags are used to create HTML documents
and render their properties. Each HTML tags have different properties.

You can use as many tags you want as per your code requirement.

o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)
Syntax
<tag> content </tag>

HTML Tag Examples


Note: HTML Tags are always written in lowercase letters. The basic HTML tags are given
below:

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>


<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

Unclosed HTML Tags

Some HTML tags are not closed, for example br and hr.

<br> Tag: br stands for break line, it breaks the line of the code.

<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line
across the webpage.

HTML Attribute
o HTML attributes are special words which provide additional
information about the elements or attributes are the
modifier of the HTML element.
o Each element or tag can have attributes, which defines
the behaviour of that element.
o Attributes should always be applied with start tag.
o The Attribute should always be applied with its name and
value pair.
o You can add multiple attributes in one HTML element, but
need to give space between two attributes.

Syntax
1. <element attribute_name="value">content</element>

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. </head>
5. <body>
6. <h1> This is Style attribute</h1>
7. <p style="height: 50px; color: blue">It will add style property in elemen
t</p>
8. <p style="color: red">It will change the color of content</p>
9. </body>
10. </html>

Output:
Explanation of above example:

1. <p style="height: 50px; color: blue">It will add style property in element
</p>

In the above statement, we have used paragraph tags in which we have


applied style attribute. This attribute is used for applying CSS property on
any HTML element. It provides height to paragraph element of 50px and
turns it colour to blue.

1. <p style="color: red">It will change the color of content</p>

In the above statement we have again used style attribute in paragraph


tag, which turns its colour red.

The href attribute in HTML

Description: The href attribute is the main attribute of <a>


anchor tag. This attribute gives the link address which is
specified in that link. The href attribute provides the
hyperlink, and if it is blank, then it will remain in same
page.

Example
With link address:

1. <a href="https://www.google.com>This is a link</a>

Without link address:

1. <a href="">This is a link</a>


The src Attribute
The src attribute is one of the important and required attribute
of <img> element. It is source for the image which is required to display
on browser. This attribute can contain image in same directory or another
directory. The image name or source should be correct else browser will
not display the image.

Example
1. <img src="whitepeacock.jpg" height="400" width="600">

Note: The above example also have height and width attribute, which define the height and width of image on
web page.

Output:
HTML 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.
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.

See this example:

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

See this example:

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

Output:

This is an important content, and this is normal content

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of formatting element</h1>
8. <p><strong>This is an important content</strong>, and this is normal content</p>
9. </body>
10. </html>

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:

1. <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:

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


nt.</p>

Output:

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

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>formatting elements</title>
5. </head>
6. <body>
7. <h1>Explanation of italic formatting element</h1>
8. <p><em>This is an important content</em>, which displayed in italic font.</p>
9. </body>
10. </html>

3) HTML Marked formatting


If you want to mark or highlight a text, you should write the
content within <mark>.........</mark>.

See this example:

1. <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:

1. <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:

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


strike>.</p>

Output:

Write Your First Paragraph with strikethrough.

6) Monospaced Font
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:

1. <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:

1. <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:

1. <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:

1. <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:

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


raph.</ins></p>

Output:

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.

See this example:

1. <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:

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

2. Output:

3. Hello Write the paragraph in smaller font.


HTML Anchor
The HTML anchor tag defines a hyperlink that links one page
to another page. It can create hyperlink to other web page as
well as files, location, or any URL. The "href" attribute is the
most important attribute of the HTML a tag. and which links to
destination page or URL.

href attribute of HTML anchor tag

The href attribute is used to define the address of the file to be linked. In
other words, it points out the destination page.

The syntax of HTML anchor tag is given below.

<a href = "..........."> Link Text </a>

Let's see an example of HTML anchor tag.

1. <a href="second.html">Click for Second Page</a>

Specify a location for Link using target attribute


If we want to open that link to another page then we can use target
attribute of <a> tag. With the help of this link will be open in next page.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title></title>
5. </head>
6. <body>
7. <p>Click on <a href="https://www.google.com/" target="_blank"> this-link </a>to go on ho
me page of JavaTpoint.</p>
8. </body>
9. </html>

Output:
Note:

o The target attribute can only use with href attribute in anchor tag.
o If we will not use target attribute then link will open in same page.

Appearance of HTML anchor tag


An unvisited link is displayed underlined and blue.

A visited link displayed underlined and purple.

An active link is underlined and red.

HTML Image
HTML img tag is used to display image on the web page. HTML img tag
is an empty tag that contains attributes only, closing tags are not used in
HTML image element.

Let's see an example of HTML image.

1. <h2>HTML Image Example</h2>


2. <img src="good_morning.jpg" alt="Good Morning Friends"/>

Output:
Attributes of HTML img tag
The src and alt are important attributes of HTML img tag. All attributes of HTML image tag are
given below.

1) src
It is a necessary attribute that describes the source or path of
the image. It instructs the browser where to look for the image
on the server.

The location of image may be on the same directory or another


server.

2) alt
The alt attribute defines an alternate text for the image, if it
can't be displayed. The value of the alt attribute describe the
image in words. The alt attribute is considered good for SEO
prospective.

3) width

It is an optional attribute which is used to specify the width to


display the image. It is not recommended now. You should
apply CSS in place of width attribute.

4) height

It h3 the height of the image. The HTML height attribute also


supports iframe, image and object elements. It is not
recommended now. You should apply CSS in place of height
attribute.
Use of height and width attribute with img tag
You have learnt about how to insert an image in your web page, now if we
want to give some height and width to display image according to our
requirement, then we can set it with height and width attributes of image.

Example:
1. <img src="animal.jpg" height="180" width="300" alt="animal image">

Output:

Align your images


It is also important to align your images. For example, you can have
an image
displayed at the center of the paragraph, or you could have it flushed
to the right.
You could do this using the align attribute.
● To align your images to the left, use <img align="left">
● To align your images to the right, use <img align="right">
● To align your images to the middle, use <img align="middle">
● To align your images to the top, use <img align="top">
● To align your images to the bottom, use <img align="bottom">
The align attribute for the <img> tag, however, has already been
deprecated in HTML
4.01, and if you are using HTML 5, it is not supported anymore.
You could still, however, use CSS to align your images by using the
following syntax:
<img style="float:right"> in order to align your image to the right.

Use of alt attribute

We can use alt attribute with tag. It will display an alternative text
in case if image cannot be displayed on browser. Following is the example
for alt attribute:

1. <img src="animal.png" height="180" width="300" alt="animal image">

Output:
How to get image from another directory/folder?
To insert an image in your web, that image must be present in your same
folder where you have put the HTML file. But if in some case image is
available in some other directory then you can access the image like this:

1. <img src="E:/images/animal.png" height="180" width="300" alt="animal


image">

In above statement we have put image in local disk E------>images


folder------>animal.png.

Note: If src URL will be incorrect or misspell then it will not display your image on web page, so try to put correct
URL.

Use <img> tag as a link


We can also link an image with other page or we can use an image as a
link. To do this, put <img> tag inside the <a> tag.

Example:

<a href="https://www.google.com/what-is-
robotics"><img src="robot.jpg" height="100"
width="100"></a>
Output:
HTML pre tag
The HTML <pre> tag is used to specify pre formatted
texts. Texts within <pre>.......</pre> tag is displayed in
a fixed-width font. Usually it is displayed in Courier font.
It maintains both space and line break.

It is widely used to display language examples e.g.


Java, C#, C, C++ etc because it displays the code as it
is typed.

HTML pre tag example

1. <pre>
2. This is a formatted text
3. by using the HTML pre tag. It maintains
4. both space and line break.
5. </pre>

Output:
This is a formatted text
by using the HTML pre tag. It maintains
both space and line break.

HTML pre tag example: Java code within pre

1. <pre>
2. package com.javatpoint;
3. public class FirstJava{
4. public static void main(String args[]){
5. System.out.println("hello java");
6. }
7. }
8. </pre>
Output:

package com.javatpoint;
public class FirstJava{
public static void main(String args[]){
System.out.println("hello java");
}
}
If you remove pre tag from the above example, all the text will be displayed in a single line.

Output without pre:

package com.javatpoint; public class FirstJava{ public static void


main(String args[]){ System.out.println("hello java"); } }

STRUCTURING TEXT Using Quotes

You can indicate quoted text in the document using the "BLOCKQUOTE and Q
elements. BLOCKQUOTE is used for long quotations and is displayed as an
indented paragraph. If the quotations bort and does not require paragraph breaks,
the Q element works fine. When using the Q element you have to specify delimiting
quotation marks.

<HTML>

<HEAD> <TITLE>my first page</TITLE>

<BODY>

<P> The blockquote element is used to format the content in blocks of text <BLOCKQUOTE><FONT
color = green>

I work hard,

I don't work miracly

Words move a life of there own.

think Before you speak

</FONT>

</BLOCKQUOTE>
<P>If you notice the content is rendered as a block of text.

</BODY> </HTML>

Using special characters

You can insert special characters into the text of the HTML document. To ensure that the
browser does not confuse them with HTML tags, you have to attach escape codes to the
special characters.

Greater Than (>)

&gt;

Example

<HTML>

<HEAD> <TITLE>Working with HTML document

</TITLE> <BODY>

<CODE>If A &gt; BThen <BR>

A=A+1

</CODE>

<p>the above statement used</p>

</body>

</html>

Less than (<)

&lt;

Ex:
< HTML >

<TITLE>Working with HTML docum </TITLE>

<HEAD>

<BODY>

<CODE>If A &lt; BThen <BR >

A=A+1 </CODE>

<P> The above statement usedspecial characters</p>

</BODY> </HTML>

QUOTES “ “

&quot;

<HTML>

<HEAD> <TITLE>Leaming HTML</TITLE>

<BODY>

&quot; To be or not to be ? &quot; That is the question

</BODY> </HTML>

Space

& nbsp

<body>

Hi &nbsp; this &nbsp; is &nbsp, my &nbsp ;first &nbsp;page

</body>

Ampersand &

&amp;
<P> Give Respect &amp; Get Respect</P>
Lists
We can use three types of lists to represent different types of data in HTML:
1. Unordered List <ul>
2. Ordered List <ol>
3. Description List <dl>

Unordered List (square,circle,disc,bullets)


The unordered list is used to represent data in a list for which the order
of items does not matter.
In HTML, we use the <ul> tag to create unordered lists. Each item of
the list must be a <li> tag which represents list items. For example,

Dot,secqur

Ex…

<ul>

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

output

Ordered List(A,a,1,i,)
The ordered list is used to represent data in a list for which the order of
items has significance.
The <ol> tag is used to create ordered lists. Similar to unordered lists,
each item in the ordered list must be a <li> tag. For example,

Ex..

<ol>

<li>Ready</li>

<li>Set</li>

<li>Go</li>

</ol>

output

Description List
The HTML description list is used to represent data in the name-value
form. We use the <dl> tag to create a definition list and each item of the
description list has two elements:
term/title - represented by the <dt> tag
description data of the term - represented by the <dd> tag

Ex…

<dl>

<dt>HTML</dt>

<dd>Hyper-Text Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading StyleSheets</dd>

<dt>JS</dt>

<dd>Javascript</dd>

</dl>

Output

HTML Links
HTML links or hyperlinks connect one resource on the web to another. The resource
may be an image, a web page, a program, a video clip, an audio clip, an element
within a web page, etc, or anything that can be hosted on the internet.
We use the HTML <a> tag to create hyperlinks. The syntax for the <a> tag is

Ex..

<a href="URL"> Text </a>

URL - the destination of the link


Text - the part that will be visible as a link

<a href="https://www.programiz.com/swift-programming/continue-statement"> Swift Continue


Statement </a>

Output
Default Link Styles

By default, browsers will style links differently depending on whether the link is
active, visited, or unvisited.

Image Links

You can insert almost any content inside a <a> tag to make it a link.
Hence, we can also use images as a link.

Ex…

<a href="https://www.programiz.com">

<img src="programiz-logo.png" alt="Programiz Logo">

</a>

Output
target Attribute

By default, any link clicked will open in the same browser window.
This may lead to a bad user experience. This is where
the target attribute becomes useful

<a href="https://www.programiz.com" target="_blank">Programiz</a>

Here, target= "_blank" opens the link in a new browser tab.


We use the target attribute to specify where the link is opened. The target attribute
has 4 values.

Target Description

_self (Default) Opens the link in the same browser tab.

_blank Opens the link in a new browser tab.

_parent Opens the link in the parent frame.

_top Opens the link in the current tab window (topmost parent).

download Attribute

When linking to a web resource, we can specify that the resource is to be


downloaded by using the download attribute.

Ex..

<a href="/files/logo.png" download> Download Image </a>

HTML Tables
HTML tables allow web developers to arrange data into rows
and columns.

Example

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Define an HTML Table


A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

output
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
output
Emil Tobias Linus

Note: A table cell can contain all sorts of HTML elements: text, images,
lists, links, other tables, etc.

Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Emil Tobias Linus

16 14 10

You can have as many rows as you like in a table; just make sure that the
number of cells are the same in each row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases
use the <th> tag instead of the <td> tag:

th stands for table header.

Example

Let the first row be table header cells:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Person 1 Person 2 Person 3

Emil Tobias Linus

16 14 10

By default, the text in <th> elements are bold and centered, but you can
change that with CSS.

EX…

<h4>One row, multi column:</h4>

<table border="1">

<tr>

<td>column 1</td>

<td>column 2</td>

<td>column 3</td>

</tr>

</table>

output
One row, multi column:
column 1 column 2 column 3

EX..
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Working with cells that take up two rows or two columns


There are times when you need to have headers or cells that spans two or more rows

or columns. You can accomplish this using colspan or rowspan.

For example, to create this type of table:

rowspan

Category Examples

Fruits Apples Oranges Grapes

You would write this HTML code:

<table border="1">
<tr>

<th>Category</th>

<th colspan="3">Examples</th>

</tr>

<tr>

<td>Fruits</td>

<td>Apples</td>

<td>Oranges</td>

<td>Grapes</td>

</tr>

</table>

Output
Category Examples
Fruits Apples Oranges Grapes
Colspan:
<table border="1">
<tr>
<th>Department:</th>
<td>Accounting</td>
</tr>
<tr>
<th rowspan="2">Contact Person:</th>
<td>Freya Olsen</td>
</tr>
<tr>
<td>Maita Cot</td>
</tr>
</table>
Output:

Department: Accounting

Freya Olsen
Contact Person:
Maita Cot

Note-Cellpadding= text padding in a cell.

FORM
<form> tag

Each HTML form is introduced by the <form> tag, and is made


up of different input
elements. The <form> tag has several attributes that would
tell the browser what to do
with the information that is entered in the different fields.
These attributes are:
● action
● method
The action attribute tells your browser the location of the cgi
script that you are going to
use to process the form. On the other hand, the method
attribute has two possible
values, method=get or method=post, both of which specify a
method of submitting data
to the script you have specified in the action attribute.

Any HTML form can contain the following fields.


First you have the input elements:
<input type=”elements” >
Text = <input type="text" name="shortnameforfield">
Password = <input type="password" name="passwd">
Checkbox= <input type="checkbox" name="color"
value="yes">
Radio= <input type="radio" name="gender"
value="m">Male
<input type="radio" name="gender" value="f">Female

Submit= <input type="submit" value="Submit">


Reset= <input type="reset" value="Reset">
File=

Image= <input type="image" src="image.gif"


name="image">

Button=<input type="submit" value="Submit">


<button type="button"
onclick="alert('WELCOME')">SUBMIT</button>

Select= What's more, dropdown menus tend to take up


less space than both checkboxes and
radio buttons because you do not have to lay out
everything. For example, with radio
buttons and checkboxes, you would need to allot five
lines for five options, but with a
dropdown box you only have to allot one line.
Ex…
<select name="alphabets">
<option value="a">Apple</option>
<option value="b">Ball</option>
<option value="c" selected>C</option>
<option value="d">D</option>
</select>

This HTML code will force your visitors to choose only one option. If you
need to allow

your visitors to choose more than one option, you just add the multiple
attribute to the

<select> tag, like so:

<select multiple name="alphabets">

Text Area= A text area acts like a text field, only that you
have more space than just one line. It is not defined by an
<input> tag, but by a tag such as.
This will show a text box with the words "Input text here" filled in.
You can also specify

the number of rows and columns to control the size of your text box,
i.e.,<textarearows="15" cols="20">

Ex…
<textarea>

Input text here

</textarea>
Grouping Form Data with <fieldset>
The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset>
element.

EX..
<form>
< fieldset>
<legend>form:</legend>
First name:<br>
<input type="text" name="firstname" value="Text"
placeholder="ENTER THE NAME"><br>
Last name:<br>
<input type="text" name="lastname" value="Text "
placeholder="ENTER THE LAST NAME"><br> <br>
<input type="submit" value="Submit">
</fieldset>
</form>

EX…..
<form>
NAME: <input type="text" name="na" placeholder="a/c
holder name"required><br>
F_NAME: <input type="text"name="fname"><br>
ADDRESS: <textarea name="add"></textarea><br>
DOB: <input type="date" name="d"><br>
Gender: <input type="radio" name="gender"
value="m">Male
<input type="radio" name="gender" value="f">Female<br>
EMAIL: <input
type="text"name="email"required><br>
CONTACT: <input type="text" pattern="[0-9]{10}"
name="cont"><br>
ACOUNT NO: <input type="text" name="acno"
required><br>
IFSC-COD: <select name="ifsc"><br>
<option>BOB34412jpr </option>
<option>UCO7676jpr</option>
<option>HDFC868jpr</option>
<option>SBI98IN</option>
<option>PNB1143</option>
<option>AU00501jpr</option>
</select><br>
BANKNAME: <select name="bank">
<option>--select--</option>
<option>BOB</option>
<option>UCO</option>
<option>HDFC</option>
<option>SBI</option>
<option>PNB</option>
<option>AU</option>
</select><br>
AC TYPE:<select name="actype">
<option>SAVING</option>
<option>CREDIT</option>
</select><br>
<input type="Submit" value="Submit" name="Submit">
</form>

Placeholder: specifies a short hint that describes the expected


value of an input field.
Required
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled
out before submitting the form.
Note: The required attribute works with the following input
types: text, search, url, tel, email, password, date pickers,
number, checkbox, radio, and file.

IFRAME
The <iframe> tag specifies an inline frame. An inline
frame is used to embed another document within the
current HTML document.

EX….

<h1>The iframe element</h1>


<iframe src="https://www.w3schools.com"
title="W3Schools Free Online Web Tutorials">
</iframe>
ID #
The syntax for id is: write a hash character (#), followed
by an id name. Then, define the CSS properties within
curly braces {}.
CLASS .
The class attribute is often used to point to a class name
in a style sheet.

DIVISION <div>

The <div> tag is used as a container for HTML


elements - which is then styled with CSS or
manipulated with JavaScript.
The <div> tag is easily styled by using the class or
id attribute.
EX…

<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>

Thank you..!

You might also like