HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Display
The browser will automatically remove any extra spaces and lines when the page
is displayed:
Attributes of paragraph
1> Align-> values – left,right,center,justify
Eg.<p align=”center”>
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML
page:
Attributes of <HR> tag are:
1> Size
2> Color
3> Width
4>
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier),
and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
<EM> is emphasis tag. The text appear between <EM> and </EM> will
display in italic. Emphasis has meaning compared to italic tag <I>
Example:
Rashtriya Junior <EM>College Chalisgaon</EM>
The <FONT> tag and attributes:
Font Tag in HTML is one of the most important attributes used to make
webpage or HTML documents more attractive. It has the properties to
change the size, color, and style of included text.
Syntax:
<font size =” ” face =” ” color=” ”>
This size can be defined in number from 1 to 7, where 1 is for the
smallest text and 7 for the largest text size. The face attributes in the
font tag used to define the type of font type in our HTML document,
whereas the color attribute is used to define the specific color to the
enclosed text.
<body>
<p><font size=”2” color=”blue” face=”Calibri”></font>
</p>
</body>
Attribute Detail Description
Name
Size This attribute is used to define a specific size for text
in between 1 to 7.
Face or type This attribute is used to define the font type for the
included text.
Color This attribute is used to show enclosed text in a
different color.
The HTML Style Attribute
Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
Background Color
The CSS background-color property defines the background color
for an HTML element.
Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Example
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a
heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>
</body>
RGB Color Values
In HTML, a color can be specified as an RGB value, using this
formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the
color with a value between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible
colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to
its highest value (255), and the other two (green and blue) are set
to 0.
Example #1
Defining font tag with its attribute value:
<!DOCTYPE html>
<html>
<head>
<title>Font Tag in HTML</title>
</head>
<body>
<h2>Example of Font Tag in HTML </h2>
<p>General text without any Font tag attribute value</p>
<p>
<font color="orange">Text having normal font size and font face . Only
changing
font color </font>
</p>
<p>
<font face="cursive">Text having different font face.</font>
</p>
<p>
<font size="3">Text with Increased font size having default font type.
</font>
</p>
</body>
</html>
The <MARQUEE> tag:
The HTML <marquee> tag is used for scrolling piece of text or image displayed
either horizontally across or vertically down your web site page depending on
the settings.
Specific Attributes
The HTML <marquee> tag also supports the following additional attributes −
Attribute Value Description
behavior scroll Defines the type of scrolling.
slide
alternate
bgcolor rgb(x,x,x) Deprecated − Defines the direction of scrolling
#xxxxxx the content.
colorname
direction up
down
left
right
Defines the direction of scrolling the content.
width pixels or % Defines the width of marquee.
Height pixels or % Defines the height of marquee.
loop number Specifies how many times to loop. The default
value is INFINITE, which means that the
marquee loops endlessly.
scrolldelay seconds Defines how long to delay between each jump.
scrollamount number Defines how how far to jump.
HTML <img> Tag
Definition and Usage
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked
to web pages. The <img> tag creates a holding space for the referenced
image.
Attributes
Attribute Value Description
alt text Specifies an alternate text for an image
height pixels Specifies the height of an image
src URL Specifies the path to the image
width Pixels Specifies the width of an image
Hspace Pixels Insert white space from left & right side
of the image
Insert white space from top & bottom
Vspace Pixels side of the image
Border
The HTML Style Attribute
Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property: value ;">
Example:
<img style=”border-color: red”>
The property is a CSS property. The value is a CSS value.
Example
How to insert an image:
<img src="[Link]" alt="Girl in a jacket" width="500" height="600">
<! DOCTYPE html>
<html>
<head><title>Insert Image in HTML document</title>
</head>
<body>
<img src="[Link]" alt="HTML5 Icon" width="128" height="128">
<img src="[Link]" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
HTML List Tags
HTML lists are used to present list of information in well formed and
semantic way. There are three different types of list in HTML and each
one has a specific purpose and meaning. Unordered list — Used to
create a list of related items, in no particular order.
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.
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:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of the list item
marker:
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman
numbers
type="i" The list items will be numbered with lowercase roman
numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) 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:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered List
Type is attribute of <UL> tag and values of type attribute
Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
Example - Disc
<ul type=”disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Example - Circle
<ul type=”circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Definition List (<DL>):
Example
<DL>
<DT>Term A
<DD> Definition of term A
<DT>Term B
<DD> Definition of term B
</DL>
Multiple terms, single description
<dl>
<dt>firefox</dt>
<dt>mozillafirefox</dt>
<dt>fx</dt>
<dd>
A free, open source, cross-platform,
graphical web browser developed by the
Mozilla Corporation and hundreds of
volunteers.
</dd>
</dl>
Output:
Firefox
Mozilla Firefox
Fx
A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.
Single term, multiple descriptions
<dl>
<dt>Firefox</dt>
<dd>
A free, open source, cross-platform,
graphical web browser developed by the
Mozilla Corporation and hundreds of
volunteers.
</dd>
<dd>
The Red Panda also known as the lesser
Panda, Wah, Bear Cat or Firefox, is a
mostly herbivorous mammal, slightly larger
than a domestic cat (60 cm long).
</dd>
</dl>
Output:
Firefox
A free, open source, cross-platform, graphical web browser developed
by the Mozilla Corporation and hundreds of volunteers.
The Red Panda also known as the Lesser Panda, Wah, Bear Cat or
Firefox, is a mostly herbivorous mammal, slightly larger than a
domestic cat (60 cm long).
Hyperlinks:
What is hyperlink in HTML?
HTML links are hyperlinks. You can click on a link and jump to another
document. When you move the mouse over a link, the mouse arrow will turn
into a little hand. Note: A link does not have to be text. A link can be an
image or any other HTML element!.
HTML Links - Syntax
The HTML <A> tag defines a hyperlink. It has the following syntax:
<A href="url">link text</A>
The most important attribute of the <a> element is
the href attribute, which indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL
address.
Example
This example shows how to create a link to [Link]
<A href="[Link] [Link]!</A>
Creating links within the same page
Hyperlinks are utilized by a web browser to move from one page to
another. However, you can also move to a different area on the
same page.
<A href=”URL”>Click Me</A>
Types of Hyper link
Example
<h2>Absolute URLs</h2>
a)Links to page on the World Wide Web
<p><A href="[Link]
<p><A href="[Link] Board
Pune</A></p>
<h2>Relative URLs</h2>
b) Link to an image by images as a link
<p><A href="html_images.jpg">HTML Images</A></p>
c) Link to document located in different directory
<p><A href="/css/[Link]">Web Page</A></p>
Changing ColorScheme:
HTML RGB Colors
An RGB color value represents RED, GREEN, and BLUE light sources.
RGB Color Values
In HTML, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
Example:
<body>bgcolor=”RGB”>
Each parameter (red, green, and blue) defines the intensity of the color
with a value between 0 and 255.
For example, rgb(255, 0, 0) is displayed as red, because red is set to its
highest value (255), and the other two (green and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is
set to its highest value (255), and the other two (red and blue) are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255,
255).
Attributes of <BODY> tag are
1. Bgcolor
2. Text
3. Background
4. Alink
5. Vlink
6. LinK
FTP URLs:
Your FTP address or hostname will typically be: [Link]
(replacing your domain name as appropriate). ... When connecting
via FTP before a DNS change, please use this IP address to access your
account. Within the welcome email, you will also find your FTP username
and FTP password
Telnet URLs:
Creating an HTML Page to Start a Telnet Session
You can create your own HTML page to start a mainframe session over the web. To
establish a Telnet connection, you must use the Connect command. The following table lists
and describes the parameters required by the Connect command.
Parameter Description
host The host to which you want to connect.
Note: This value must be lowercase.
port The port number on which the Telnet Server listens. The default port is 23.
emulation The terminal (term) type: Tn3270 or Tn5250.
The following two examples show how to establish a Telnet connection.
Example: Establishing a Telnet Connection With a Hyperlink
You can establish a Telnet connection by adding the following code to an HTML
page (3270 is used in this example):
<a
href=TelnetServlet?cmd=connect&host=ibivm&emulation=tn3270>IBI
VM</a>
Example: Establishing a Telnet Connection With an HTML Form
To establish a Telnet connection with an HTML form:
<html>
<body>
<a href=TelnetServlet?cmd=connect&host=vmhost&emulation=tn3270>MY
VMMachine</a>
<br>
<a href=TelnetServlet?cmd=connect&host=mvshost&emulation=tn3270>
MY MVS Machine</a>
<br>
<a href=TelnetServlet?cmd=connect&host=as400host&emulation=tn3270>
MY As/400 Machine</a>
</body>
</html>
<Table> tag:
Specific Attributes
The HTML <table> tag also supports the following additional attributes −
Attribute Value Description
abbr abbreviated_text Deprecated − Specifies an abbreviated
version of the content in a cell.
align Right,left,center Deprecated − Visual alignment.
justify
char
bgcolor rgb(x,x,x) Deprecated − Specifies the background color
#hexcode of the table.
colorname
border pixels Deprecated − Specifies the border width. A
value of "0" means no border.
cellpadding pixels or % Deprecated − Specifies the space between
the cell borders and their contents.
cellspacing pixels or % Deprecated − Specifies the space between
cells.
width pixels or % Deprecated − Specifies the width of the table.