Scribd
Upload
7 views31 pages

Unit 1

HTML (HyperText Markup Language) is the standard markup language for creating web pages, utilizing tags to structure content. It is easy to learn and allows for the integration of multimedia elements, making web pages interactive. The document outlines the basic structure of HTML, various tags, and their uses, including formatting, lists, tables, and more.

Uploaded by

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

Unit 1

HTML (HyperText Markup Language) is the standard markup language for creating web pages, utilizing tags to structure content. It is easy to learn and allows for the integration of multimedia elements, making web pages interactive. The document outlines the basic structure of HTML, various tags, and their uses, including formatting, lists, tables, and more.

Uploaded by

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

HTML

Introduction to HTML
HTML stands for HyperText Markup Language. It is the standard markup language used to
create and design web pages. HTML is not a programming language; it’s a markup language
used to define the structure and content of web documents.
●​ HyperText refers to links that connect web pages.
●​ Markup Language means it uses tags to annotate text, images, and other content for
display in a web browser.
HTML forms the skeleton of all websites and works together with CSS (for styling) and
JavaScript (for behavior) to create complete web applications.
Tim Berners-Lee is known as father of HTML. The first available description of HTML was a
document called "HTML Tags" proposed by Tim in late 1991.

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

Basic Structure of an HTML Document


An HTML document is made up of elements enclosed in tags. Here's the basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph.</p>
</body>
</html>

Explanation of the Structure


1.​ <!DOCTYPE html>​
Declares the document type and version of HTML (HTML5 in this case).
2.​ <html>​
The root element that wraps all content on the web page.
3.​ <head>​
Contains meta-information about the web page such as title, links to CSS, scripts, etc.
4.​ <title>​
Sets the title of the web page shown on the browser tab.
5.​ <body>​
Contains the content that is visible on the web page such as text, images, videos, etc.
6.​ <h1> to <h6>​
Heading tags used to define headings. <h1> is the largest and most important, <h6> is the
smallest.
7.​ <p>​
Paragraph tag used to define blocks of text.

HTML Tags
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.
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 Meta Tags


DOCTYPE, title, link, meta and style

HTML Text Tags


<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>,
<address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>,
<pre>, <samp>, <var> and <br>

HTML Link Tags


<a> and <base>

HTML Image and Object Tags


<img>, <area>, <map>, <param> and <object>
HTML List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags


table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption

HTML Form Tags


form, input, textarea, select, option, optgroup, button, label, fieldset and legend

HTML Scripting Tags


script and noscript

HTML Formatting

HTML Formatting
HTML Formatting is a process of formatting text for better look and feel. There are many
formatting tags in HTML. These tags are used to make text bold, italicized, or underlined.
There are almost 12 options available that how text appears in HTML and XHTML.

Here, we are going to learn 12 HTML formatting tags.

1) Bold Text
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.


2) Italic Text
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.

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 Delete your first paragraph.

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 paragraph.</ins><


/p>
Output:

Delete your first 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>


Output:

Hello Write the paragraph in smaller font.

HTML Heading
A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to
display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the text
depends on the number of heading.

There are six different HTML headings which are defined with the <h1> to <h6> tags.
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important
heading and h6 is used for least important.

See this example:

1.​ <h1>Heading no. 1</h1>


2.​ <h2>Heading no. 2</h2>
3.​ <h3>Heading no. 3</h3>
4.​ <h4>Heading no. 4</h4>
5.​ <h5>Heading no. 5</h5>
6.​ <h6>Heading no. 6</h6>
Output:

Heading no. 1
Heading no. 2

Heading no. 3

Heading no. 4

Heading no. 5

Heading no. 6

HTML Paragraph
HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a
simple example to see how it work. It is a notable point that a browser itself add an empty
line before and after a paragraph.

See this example:

1.​ <p>This is first paragraph.</p>


2.​ <p>This is second paragraph.</p>
3.​ <p>This is third paragraph.</p>

Output:

4.​ This is first paragraph.


5.​ This is second paragraph.
6.​ This is third paragraph.

1.​ <marquee>This is an example of html marquee </marquee>


HTML Table
HTML table tag is used to display data in tabular form (row * column). There can be many
columns in a row.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar,
body content, footer section etc. But it is recommended to use div tag over table to manage
the layout of the page .

HTML Table Tags


Tag Description

<table> It defines a table.

<tr> It defines a row in a table.

<th> It defines a header cell in a table.

<td> It defines a cell in a table.

<caption> It defines the table caption.

<colgroup> It specifies a group of one or more columns in a table for formatting.

<col> It is used with <colgroup> element to specify column properties for each column.

<tbody> It is used to group the body content in a table.

<thead> It is used to group the header content in a table.

<tfooter> It is used to group the footer content in a table.

1.​ <table>
2.​ <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
3.​ <tr><td>a</td><td>b</td><td>60</td></tr>
4.​ <tr><td>c</td><td>d</td><td>80</td></tr>
5.​ <tr><td>e</td><td>f</td><td>82</td></tr>
6.​ <tr><td>g</td><td>h</td><td>72</td></tr>
7.​ </table>
Output:

First_Name Last_Name Marks


A B 60
C D 80
E f 82
G h 72

In the above html table, there are 5 rows and 3 columns = 5 * 3 = 15 values.

HTML Table with Border


There are two ways to specify border for HTML tables.

1.​ By border attribute of table in HTML


2.​ By border property in CSS
3.​ <table border="1">
4.​ <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
5.​ <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
6.​ <tr><td>James</td><td>William</td><td>80</td></tr>
7.​ <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
8.​ <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
9.​ </table>

Output:

First_Name Last_Name Marks


Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

2) CSS Border property


It is now recommended to use border property of CSS to specify border in table.

1.​ <style>
2.​ table, th, td {
3.​ border: 1px solid black;
4.​ }
5.​ </style>
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

1.​ Ordered List or Numbered List (ol)


2.​ Unordered List or Bulleted List (ul)
3.​ Description List or Definition List (dl)

HTML Ordered List or Numbered List


In the ordered HTML lists, all the list items are marked with numbers. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li>
tag.

1.​ <ol>
2.​ <li>Aries</li>
3.​ <li>Bingo</li>
4.​ <li>Leo</li>
5.​ <li>Oracle</li>
6.​ </ol>

Output:

1.​ Aries
2.​ Bingo
3.​ Leo
4.​ Oracle

HTML Ordered List | HTML Numbered List


HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol
tag is used for ordered list. There can be different types of numbered list:

●​ Numeric Number (1, 2, 3)


●​ Capital Roman Number (I II III)
●​ Small Romal Number (i ii iii)
●​ Capital Alphabet (A B C)
●​ Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type "1" This is the default type. In this type, the list items are numbered with numbers.

Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example


Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we
are not defining type="1" because it is the default type.

1.​ <ol>
2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ol>

HTML Ordered List | HTML Numbered List


HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol
tag is used for ordered list. There can be different types of numbered list:

●​ Numeric Number (1, 2, 3)


●​ Capital Roman Number (I II III)
●​ Small Romal Number (i ii iii)
●​ Capital Alphabet (A B C)
●​ Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description

Type "1" This is the default type. In this type, the list items are numbered with numbers.
Type "I" In this type, the list items are numbered with upper case roman numbers.

Type "i" In this type, the list items are numbered with lower case roman numbers.

Type "A" In this type, the list items are numbered with upper case letters.

Type "a" In this type, the list items are numbered with lower case letters.

HTML Ordered List Example


Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we
are not defining type="1" because it is the default type.

1.​ <ol>
2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ol>
Output:

1.​ HTML
2.​ Java
3.​ JavaScript
4.​ SQL

ol type="I"
Let's see the example to display list in roman number uppercase.

1.​ <ol type="I">


2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ol>
Output:

I.​ HTML
II.​ Java
III.​ JavaScript
IV.​ SQL
ol type="i"
Let's see the example to display list in roman number lowercase.

1.​ <ol type="i">


2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ol>
Output:

i.​ HTML
ii.​ Java
iii.​ JavaScript
iv.​ SQL

ol type="A"
Let's see the example to display list in alphabet uppercase.

1.​ <ol type="A">


2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ol>
Output:

A.​ HTML
B.​ Java
C.​ JavaScript
D.​ SQL

ol type="a"
Let's see the example to display list in alphabet lowercase.

1.​ <ol type="a">


2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ol>
Output:
a.​ HTML
b.​ Java
c.​ JavaScript
d.​ SQL

start attribute
The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".

1.​ <ol type="i" start="5">


2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ol>

Output:

v.​ HTML
vi.​ Java
vii.​ JavaScript
viii.​ SQL

HTML Unordered List | HTML Bulleted List


HTML Unordered List or Bulleted List displays elements in bulleted format. The HTML ul
tag is used for the unordered list. There can be 4 types of bulleted list:

●​ disc
●​ circle
●​ square
●​ none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.

Type Description
Type "disc" This is the default style. In this style, the list items are marked with bullets.

Type "circle" In this style, the list items are marked with circles.

Type "square" In this style, the list items are marked with squares.

Type "none" In this style, the list items are not marked .

HTML Unordered List Example


1.​ <ul>
2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ul>
Output:

●​ HTML
●​ Java
●​ JavaScript
●​ SQL

ul type="circle"
1.​ <ul type="circle">
2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ul>
Output:

o​ HTML
o​ Java
o​ JavaScript
o​ SQL

ul type="square"
1.​ <ul type="square">
2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ul>
Output:

▪​ HTML
▪​ Java
▪​ JavaScript
▪​ SQL

ul type="none"
1.​ <ul type="none">
2.​ <li>HTML</li>
3.​ <li>Java</li>
4.​ <li>JavaScript</li>
5.​ <li>SQL</li>
6.​ </ul>

Output:

●​ HTML
●​ Java
●​ JavaScript
●​ SQL

HTML Description List | HTML Definition List


HTML Description List or Definition List displays elements in definition form like in
dictionary. The <dl>, <dt> and <dd> tags are used to define description list.

The 3 HTML description list tags are given below:

1.​ <dl> tag defines the description list.


2.​ <dt> tag defines data term.
3.​ <dd> tag defines data definition (description).

1.​ <dl>
2.​ <dt>HTML</dt>
3.​ <dd>is a markup language</dd>
4.​ <dt>Java</dt>
5.​ <dd>is a programming language and platform</dd>
6.​ <dt>JavaScript</dt>
7.​ <dd>is a scripting language</dd>
8.​ <dt>SQL</dt>
9.​ <dd>is a query language</dd>
10.​</dl>

Output:

HTML
is a markup language
Java
is a programming language and platform
JavaScript
is a scripting language
SQL
is a query language

HTML Form
An HTML form is a section of a document which contains controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.

Why use HTML Form


HTML forms are required if you want to collect some data from of the site visitor.

For example: If a user want to purchase some items on internet, he/she must fill the form
such as shipping address and credit/debit card details so that item can be sent to the given
address.

HTML Form Syntax


1.​ <form action="server url" method="get|post">
2.​ //input controls e.g. textfield, textarea, radiobutton, button
3.​ </form>

HTML Form Tags


Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.


<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.

<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

Label Tag in Form


It is considered better to have label in form. As it makes the code parser/browser/user
friendly.

If you click on the label tag, it will focus on the text control. To do so, you need to have for
attribute in label tag that must be same as id attribute of input tag.

1.​ <form>
2.​ <label for="firstname">First Name: </label>
3.​ <input type="text" id="firstname" name="firstname"/> <br/>
4.​ <label for="lastname">Last Name: </label>
5.​ <input type="text" id="lastname" name="lastname"/> <br/>
6.​ </form>

HTML Password Field Control


The password is not visible to the user in password field control.

1.​ <form>
2.​ <label for="password">Password: </label>
3.​ <input type="password" id="password" name="password"/> <br/>
4.​ </form>

HTML 5 Email Field Control


The email field in new in HTML 5. It validates the text for correct email address. You must
use @ and . in this field.

1.​ <form>
2.​ <label for="email">Email: </label>
3.​ <input type="email" id="email" name="email"/> <br/>
4.​ </form>

Radio Button Control


The radio button is used to select one from multiple options. It is used in gender, quiz
questions etc.

If you use one name for all the radio buttons, only one radio button can be selected at a
time.

1.​ <form>
2.​ <label for="gender">Gender: </label>
3.​ <input type="radio" id="gender" name="gender" value="male"/>Male
4.​ <input type="radio" id="gender" name="gender" value="female"/>Female <br
/>
5.​ </form>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.

1.​ <form>
1.​ Hobby:<br>
2.​ <input type="checkbox" id="cricket" name="cricket" value="crick
et"/>
3.​ <label for="cricket">Cricket</label>
4.​ <input type="checkbox" id="football" name="football" value="foot
ball"/>
5.​ <label for="football">Football</label>
6.​ <input type="checkbox" id="hockey" name="hockey" value="hock
ey"/>
7.​ <label for="hockey">Hockey</label>
2.​ </form>

HTML Form Example


Let's see a simple example of creating HTML form.

1.​ <form action="#">


2.​ <table>
3.​ <tr>
4.​ <td class="tdLabel"><label for="register_name" class="label">Enter name:</label>
</td>
5.​ <td><input type="text" name="name" value="" id="register_name" style="width:160
px"/></td>
6.​ </tr>
7.​ <tr>
8.​ <td class="tdLabel"><label for="register_password" class="label">Enter password:</
label></td>
9.​ <td><input type="password" name="password" id="register_password" style="width:
160px"/></td>
10.​</tr>
11.​<tr>
12.​ <td class="tdLabel"><label for="register_email" class="label">Enter Email:</label>
</td>
13.​ <td
14.​><input type="email" name="email" value="" id="register_email" style="width:160px"/
></td>
15.​</tr>
16.​<tr>
17.​ <td class="tdLabel"><label for="register_gender" class="label">Enter Gender:</lab
el></td>
18.​ <td>
19.​<input type="radio" name="gender" id="register_gendermale" value="male"/>
20.​<label for="register_gendermale">male</label>
21.​<input type="radio" name="gender" id="register_genderfemale" value="female"/>
22.​<label for="register_genderfemale">female</label>
23.​ </td>
24.​</tr>
25.​<tr>
26.​ <td class="tdLabel"><label for="register_country" class="label">Select Country:</la
bel></td>
27.​ <td><select name="country" id="register_country" style="width:160px">
28.​ <option value="india">india</option>
29.​ <option value="pakistan">pakistan</option>
30.​ <option value="africa">africa</option>
31.​ <option value="china">china</option>
32.​ <option value="other">other</option>
33.​</select>
34.​</td>
35.​</tr>
36.​<tr>
37.​ <td colspan="2"><div align="right"><input type="submit" id="register_0" value="re
gister"/>
38.​</div></td>
39.​</tr>
40.​</table>
41.​</form>

Marquee HTML
The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or
text horizontally or vertically.

In simple words, you can say that it scrolls the image or text up, down, left or right
automatically.

Marquee tag was first introduced in early versions of Microsoft's Internet Explorer. It is
compared with Netscape's blink element.

Marquee HTML Example


1.​ <marquee>This is an example of html marquee </marquee>

Output check your self

HTML Marquee Attributes


Marquee's element contains several attributes that are used to control and adjust the
appearance of the marquee.

Attribute Description

Behavior It facilitates user to set the behavior of the marquee to one of the three different type
alternate.

Direction defines direction for scrolling content. It may be left, right, up and down.
Width defines width of marquee in pixels or %.

Height defines height of marquee in pixels or %.

Hspace defines horizontal space in pixels around the marquee.

Vspace defines vertical space in pixels around the marquee.

scrolldelay defines scroll delay in seconds.

scrollamoun defines scroll amount in number.


t

Loop defines loop for marquee content in number.

Bgcolor defines background color. It is now deprecated.

HTML Scroll Marquee


It is a by default property. It is used to scroll the text from right to left, and restarts at the
right side of the marquee when it is reached to the end of left side. After the completion of
loop text disappears.

1.​ <marquee width="100%" behavior="scroll" bgcolor="pink">


2.​ This is an example of a scroll marquee...
3.​ </marquee>

Output check yourself

HTML Slide Marquee


In slide marquee, all the contents to be scrolled will slide the entire length of marquee but
stops at the end to display the content permanently.

1.​ <marquee width="100%" behavior="slide" bgcolor="pink">


2.​ This is an example of a slide marquee...
3.​ </marquee>

Output check your self


HTML Alternate Marquee
It scrolls the text from right to left and goes back left to right.

1.​ <marquee width="100%" behavior="alternate" bgcolor="pink">


2.​ This is an example of a alternate marquee...
3.​ </marquee>

Out put check your self

Direction in HTML marquee


This is used to change the direction of scrolling text. Let's take an example of marquee
scrolling to the right. The direction can be left, right, up and down.

1.​ <marquee width="100%" direction="right">


2.​ This is an example of a right direction marquee...
3.​ </marquee>

Output check your self

Nested marquee example


1.​ <marquee width="400px" height="100px" behavior="alternate" style="border:2px solid
red">
2.​ <marquee behavior="alternate">
3.​ Nested marquee...
4.​ </marquee>
5.​ </marquee>

Output check your self

Disadvantages HTML marquee


1) Marquee may be distracting because human eyes are attracted towards movement and
marquee text constantly.

2) Since Marquee text moves, so it is more difficult to click static text, depending on the
scrolling speed.

3) It is a non-standard HTML element.

4) It draws user's attention needlessly and makes the text harder to read.
HTML Textarea
The HTML <textarea> tag is used to define a multi-line text input control.

It can hold unlimited number of characters and the texts are displayed in a fixed-width font
(usually courier).

The size of the HTML textarea is defined by <cols> and <rows> attribute, or it can also be
defined through CSS height and width properties.

HTML Textarea Example


1.​ <textarea rows="9" cols="70">
2.​ trainingtrains textarea tag example with rows and columns.
3.​ </textarea>
4.​ Output: box

New HTML 5 Textarea Attributes


Attribute Description

autofocus It specifies that a text area should be automatically get focused when the page is loade

form It specifies one or more forms the textarea belongs to.

maxlength It specifies the maximum number of characters allowed in the text area.

placeholder It specifies a short hint that describes the expected value of a textarea.

required It specifies that textarea must be filled out.

wrap It specifies that how the texts in the textarea are wrapped at the time of the submission

HTML Textarea form attribute


The form attribute specifies one or more forms the text area belongs to.

1.​ <form action="updates.jsp" id="usrform">


2.​ Name: <input type="text" name="usrname">
3.​ <input type="submit">
4.​ </form>
5.​ <br>
6.​ <textarea rows="9" cols="70" name="comment" form="usrform">
7.​ Enter text here...</textarea>
8.​ <p>The text area above is outside the form element, but should still be a part of the form.
</p>
9.​ <p><b>Note:</b> The form attribute is not supported in Internet Explorer.</p>
10.​Output:

12.​Name:

HTML Style
HTML Style is used to change or add the style on existing HTML elements. There is a
default style for every HTML element e.g. background color is white, text color is black etc.

The style attribute can by used with any HTML tag. To apply style on HTML tag, you should
have the basic knowledge of css properties e.g. color, background-color, text-align,
font-family, font-size etc.

The syntax of style attribute is given below:

1.​ style= "property:value"

HTML Style color


The color property is used to define the text color.

Let's see a simple example of styling html tags by color property of css.

1.​ <h3 style="color:green">This is Green Color</h3>


2.​ <h3 style="color:red">This is Red Color</h3>
Output:

This is Green Color

This is Red Color

HTML Style background-color


The background-color property is used to define background color for the HTML tag.

Let's see an example of styling html tag by of css background-color property

1.​ <h3 style="background-color:yellow;">This is yellow background</h3>


2.​ <h3 style="background-color:red;color:white">This is red background</h3>

Output:
This is yellow background

This is red background

HTML Style font-family


The font-family property specifies the font family of the HTML tag.

Let's see an example of styling html tag by css font-family property

1.​ <h3 style="font-family:times new roman">This is times new roman font family</h3>
2.​ <p style="font-family:arial">This is arial font family</p>
Output:

This is times new roman font family


This is arial font family

HTML Style font-size


The font-size property is used to define the text size of the HTML tag.

Let's see an example of font-size property

1.​ <h3 style="font-size:200%">This is 200% h3 tag</h3>


2.​ <p style="font-size:200%">This is 200% p tag</p>
Output:

This is 200% h3 tag


This is 200% p tag

HTML Style text-align


The text-align property is used to define the horizontal text alignment for the HTML
element.

Let's see an example of styling html tag by css text-align property

1.​ <h3 style="text-align:right;background-color:pink;">This text is located at right side</h3


>
2.​ <p style="text-align:center;background-color:pink;">This text is located at center side</
p>

14.​If you want to put heading at center or left, use "text-align:center" or


"text-align:left" respectively.
15.​Output:

16.​ This text is located at right side


17.​This text is located at center side

HTML Title
HTML title tag is used to provide a title name for your webpage. It is necessary for Search
Engine Optimization (SEO).

The HTML title tag must be used inside the <head> tag.

The title of the page is displayed on the title bar of the browser.

Let's see the example of HTML title tag.

1.​ <!DOCTYPE html>


2.​ <html>
3.​ <head>
4.​ <title>First web page.</title>
5.​ </head>
6.​ <body>
7.​ <p>Welcome to my first web page.</p>
8.​ </body>
9.​ </html>

HTML Div Tag


The HTML <div> tag is used to group the large section of HTML elements together.

We know that every tag has a specific purpose e.g. p tag is used to specify paragraph,
<h1> to <h6> tag are used to specify headings but the <div> tag is just like a container
unit which is used to encapsulate other page elements and divides the HTML documents into
sections.

The div tag is generally used by web developers to group HTML elements together and apply
CSS styles to many elements at once. For example: If you wrap a set of paragraph elements
into a div element so you can take the advantage of CSS styles and apply font style to all
paragraphs at once instead of coding the same style for each paragraph element.

1.​ <div style="border:1px solid pink;padding:20px;font-size:20px">


2.​ <p>Welcome to trainingtrains.com, Here you get tutorials on latest technologies.</p>
3.​ <p>This is second paragraph</p>
4.​ </div>
5.​ Output: in box

This is second paragraph.

Difference between HTML div tag and span tag


div tag span tag

HTML div is a block element. HTML span is an inline element

HTML div element is used to wrap large sections of HTML span element is used to wrap small
elements. image etc.

HTML div example: Login Form


In this example, we are creating box using div tag. There is a login form inside the box.
Let's see the CSS and HTML code.

CSS Code:

1.​ .loginform{
2.​ padding:10px;
3.​ border:1px solid pink;
4.​ border-radius:10px;
5.​ float:right;
6.​ margin-top:10px;
7.​ }
8.​ .formheading{
9.​ background-color:red;
10.​ color:white;
11.​ padding:4px;
12.​ text-align:center;
13.​}
14.​.sub{
15.​background-color:blue;
16.​padding: 7px 40px 7px 40px;
17.​color:white;
18.​font-weight:bold;
19.​margin-left:70px;
20.​border-radius:5px;
21.​}
HTML Code:

1.​ <div class="loginform">


2.​ <h3 class="formheading">Please Login</h3>
3.​ <form action="LoginServlet" method="post">
4.​ <table>
5.​ <tr><td>Email:</td><td><input type="email" name="email"/></td></tr>
6.​ <tr><td>Password:</td><td><input type="password" name="password"/></td><
/tr>
7.​ <tr><td colspan="2" style="text-align:center"><input class="sub" type="submit" value
="login"/></td></tr>
8.​ </table>
9.​ </form>
10.​</div>
11.​Output: in box

12.​ Please Login


13.​Top of Form
Email:

Password:

14.​Bottom of Form
15.​
16.​

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>
6.​ Output:
7.​ This is a formatted text
8.​ by using the HTML pre tag. It maintains
9.​ both space and line break.

HTML Label Tag


The <label> tag is used to specify a label for an <input> element. It adds a label to a form
control such as text, email, password, textarea etc.

HTML Label Tag Example


Let's see the example of HTML label tag.

1.​ <label for="email">EMAIL-ID:<br /> <input type="email" value="" name="emailid" siz


e="30"
2.​ placeholder="Enter a valid email address"><br /><br />
3.​ <label for="phone">PHONE NO:<br /> <input type="text" value="" name="phno" size
="30"
4.​ maxlength="10" placeholder="Enter a valid phone number" pattern="[0-9]{10}"><br />
<br />
5.​ Output:
6.​EMAIL-ID:​
​
​
PHONENO:​

You might also like