Author Archives: Gangadhar Koppella

HTML13 Create a Web page, showing an ordered list of the names of five of your friends.

Create a Web page, showing an ordered list of the names of five of your friends.

 

Ordered Lists

Lists having numbered items are known as ordered lists. They are used when the items in the list have a natural order. They can also be used when the number of items in the list needs to be known at a glance. To make an ordered list, simply change the <UL> tag to <OL>.

 HTML_Friends_Ordered_List_Source_Code

HTML_Friends_Ordered_List_Page

Create a Web page, showing an ordered list of the names of five of your friends.

 

Html code:

 

<!DOCTYPE html>
 
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML13</TITLE>
</HEAD>
<BODY bgColor="clay" Text="blue">
<P ALIGN="center"><FONT SIZE="5"><B>CSSimplified.com examples..</B></FONT></P>
<P ALIGN="center"><FONT FACE="verdana" SIZE="5"><B>Friends List</B></FONT></P>
<OL>
<LI>Prachi</LI>
<LI>Rohan</LI>
<LI>Chirag</LI>
<LI>Kunal</LI>
<LI>Milin</LI>
</OL>
</BODY>
</HTML>

 

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>…</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>…</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 13</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<P ALIGN=”center”>…</P>

The HTML <p> tag defines a paragraph of text.

 

<OL>

The HTML <ol> tag is used for creating an ordered list.

 

<LI>

The HTML <li> tag is used for specifying a list item in ordered, unordered, directory, andmenu lists.

 

<FONT>…</FONT>

The HTML <font> tag is used to specify the font of the text. It is deprecated in HTML as well as in XHTML.

 

<B>…</B>

The HTML <b> tag specifies bold text.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML12 Write HTML code to create a Web page of pink colour and display a moving message in red colour.

Write HTML code to create a Web page of pink colour and display a moving message in red colour.

 HTML_Marquee_Source_Code

HTML_Marquee_Page

Write HTML code to create a Web page of pink colour and display a moving message in red colour.

 

Html code:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML12</TITLE>
</HEAD>
<BODY BGCOLOR="pink">
<MARQUEE>
<FONT FACE="verdana" COLOR="red" SIZE="5">
<B>CSSimplified.com</B>
</FONT>
</MARQUEE>
</BODY>
</HTML>

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>…</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>…</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 12</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<MARQUEE >…</MARQUEE >

An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.

 

<FONT>…</FONT>

The HTML <font> tag is used to specify the font of the text. It is deprecated in HTML as well as in XHTML.

 

<B>…</B>

The HTML <b> tag specifies bold text.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML11 Create a Web page, wherein when the user clicks on the link it should go to the bottom of the page.

Create a Web page, wherein when the user clicks on the link it should go to the bottom of the page.

 

Linking to a Page Section

You can create a link to a particular section of a given webpage by using name attribute. This is a two-step process.

First create a link to the place where you want to reach with-in a webpage and name it using <a…> tag as follows:

<h1>HTML Text Links <a name=”top”></a></h1>

Second step is to create a hyperlink to link the document and place where you want to reach:

<ahref=”#top”>Go to the Top</a>

This will produce following link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial.

 

Unordered Lists

First, we will build an unordered list. Sometimes, these lists are also called bulletedlists. These lists are characterized by list items that do not have numbers. They are used whenthe points in the list have no particular order. They are delimited by the<UL> and </UL> tags. Each point in the list is delimited by the <LI> and </LI> tags.

 

Ordered Lists

Lists having numbered items are known as ordered lists. They are used when the items inthe list have a natural order. They can also be used when the number ofitems in the list needs to be known at a glance. To make an ordered list, simply change the <UL> tag to<OL>.

HTML_Link_Bottom_Source_Code

HTML_Link_Bottom_Page_1

HTML_Link_Bottom_Page_2

 Create a Web page, wherein when the user clicks on the link it should go to the bottom of the page.

Html code:

 

<!DOCTYPE html>
 
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML11</TITLE>
</HEAD>
<BODY bgColor="clay" Text="blue" Link="blue" VLink="green" ALink="red">
<P ALIGN="center"><FONT SIZE="5"><B>CSSimplified.com examples..</B></FONT></P>
<P ALIGN="center"><FONT FACE="verdana" SIZE="5"><B>Dishes</B></FONT></P>
<P ALIGN="left"><A HREF="#bottom">Bottom</A>
<OL>
<LI>Punjabi</LI>
<UL>
<LI>Veg. Muglai</LI>
<LI>Veg. Tawa Masala</LI>
<LI>Paneer Tikka Masala</LI>
<LI>Paneer Makhanwala</LI>
<LI>Paneer Pasanda</LI>
</UL>
<LI>Chinese</LI>
<UL>
<LI>American Copsuey</LI>
<LI>Veg. Hakka Noodels</LI>
<LI>Veg. Shezwan Rice</LI>
<LI>Veg. Fried Rice</LI>
<LI>Veg. Triple Rice</LI>
</UL>
<LI>Soups</LI>
<UL>
<LI>Sweet Corn Soup</LI>
<LI>Veg. Manchow Soup</LI>
<LI>Tomato soup</LI>
<LI>Hot n Saur Soup</LI>
<LI>Palak Soup</LI>
</UL>
<LI>Juices</LI>
<UL>
<LI>Mosambi</LI>
<LI>Pineapple</LI>
<LI>Orange</LI>
<LI>WaterMelon</LI>
<LI>Grapes</LI>
</UL>
<LI>Soups</LI>
<UL>
<LI>Sweet Corn Soup</LI>
<LI>Veg. Manchow Soup</LI>
<LI>Tomato soup</LI>
<LI>Hot n Saur Soup</LI>
<LI>Palak Soup</LI>
</UL>
<LI>Juices</LI>
<UL>
<LI>Mosambi</LI>
<LI>Pineapple</LI>
<LI>Orange</LI>
<LI>WaterMelon</LI>
<LI>Grapes</LI>
</UL>
</OL>
<A NAME="bottom">
</BODY>
</HTML>

 

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>…</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>…</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 11</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<PALIGN=”center”>…</P>

The HTML <p> tag defines a paragraph of text.

 

<FONT>…</FONT>

The HTML <font> tag is used to specify the font of the text. It is deprecated in HTML as well as in XHTML.

 

<B>…</B>

The HTML <b> tag specifies bold text.

 

<A HREF=”#bottom”>Bottom</A>

The Anchor tag is used to create links between different objects like HTML pages,files, web sites etc. It is introduced by the characters <A> and terminated by </A>.HREF is the most common attribute of the ANCHOR tag. It defines the destination ofthe link.

 

 

<OL>

The HTML <ol> tag is used for creating an ordered list.

 

<LI>

The HTML <li> tag is used for specifying a list item in ordered, unordered, directory, and

menu lists.

 

<UL>

The HTML <ul> tag is used for creating an unordered list.

 

<A>

The HTML <a> tag is used for creating a hyperlink to either another document, or somewhere within the current document.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML10 Create a Web page using href attribute of anchor tag & the attribute: alink, vlink etc.

Create a Web page using href attribute of anchor tag & the attribute: alink, vlink etc.

 

The BODY tag has following attributes:

  1. BGCOLOUR: It can be used for changing the background colour of the page. By default the background colour is white.
  2. BACKGROUND: It is used for specifying the image to be displayed in the background of the page.
  3. LINK: It indicates the colour of the hyperlinks, which have not been visited or clicked on.
  4. ALINK: It indicates the colour of the active hyperlink. An active link is the one on which the mouse button is pressed. e. VLINK: It indicates the colour of the hyperlinks after the mouse is clicked on it.
  5. TEXT: It is used for specifying the colour of the text displayed on the page.

HTML_Image_ALink_VLink_Source_Code

HTML_Image_ALink_Vlink_Page

Create a Web page using href attribute of anchor tag & the attribute: alink, vlink etc.

Html code:

 

<!DOCTYPE html>
 
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML10</TITLE>
</HEAD>
<BODY bgColor="clay" Text="blue" Link="blue" VLink="green" ALink="red">
<P ALIGN="center"><FONT SIZE="5"><B>CSSimplified.com Links..</B></FONT></P>
<BR><A HREF="C_programming.html">C_programming</A>
<BR><A HREF="Assembly_Language.html">Assembly_Language</A>
<BR><A HREF="Data_Structure.html">Data_Structure</A>
</BODY>
</HTML>

 

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>…</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>…</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 10</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<PALIGN=”center”>…</P>

The HTML <p> tag defines a paragraph of text.

 

<BR>

The HTML <br> tag is used to give a line break.

 

<FONT>…</FONT>

The HTML <font> tag is used to specify the font of the text. It is deprecated in HTML as well as in XHTML.

 

<B>…</B>

The HTML <b> tag specifies bold text.

 

<A HREF=”C_programming.html”>C_programming</A>

The Anchor tag is used to create links between different objects like HTML pages,files, web sites etc. It is introduced by the characters <A> and terminated by </A>.HREF is the most common attribute of the ANCHOR tag. It defines the destination ofthe link.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML09 Create a Web page with appropriate content and insert an image towards the left hand side of the page. When user clicks on the image, it should open another Web page

Create a Web page with appropriate content and insert an image towards the left hand side of the page. When user clicks on the image, it should open another Web page.

 

Let us take a look at the syntax of the <IMG> tag:

<IMG SRC = “FILENAME.GIF” WIDTH = “value” HEIGHT = “value” ALT =“alternate text” BORDER = “value” ALIGN = “value”>

 

  1. SRC: This attribute specifies the pathname to the source file that contains the image. The value in the above example, “image.gif”, means that the browser will look for the image named image.gif in the same folder (or directory) as the html document itself.
  2. WIDTH: This is used for specifying the desired width of the image.
  3. HEIGHT: This is used for specifying the desired height of the image.
  4. BORDER: An important attribute of the IMG tag is BORDER. This attribute specifies the width of the border of the image. By default it is 0, i.e. there is no border. As shown in Figure 2.9 the image “image.gif” has been given a border 2 pixel wide. The following code gives a wider border to the above image.

 

<BODY BGCOLOUR=”#FFFFFF”><IMG SRC=”image.gif” WIDTH=130 HEIGHT=101 BORDER=10></BODY>

 

  1. ALT: Another IMG attribute that is important is ALT. ALT is sort of a substitute for the image that is displayed or used when the user is using a browser that does not display images. Someone may be using a text only browser, he may have image loading turned off for speed or he may be using a voice browser (a browser where the web page is read out). In those cases, that ALT attribute could be very important to your visitor as it could be used (given the proper text) to describe the image that is not on the screen.

HTML_Image_Link_Source_Code

HTML_Image_Link_Page

 Create a Web page with appropriate content and insert an image towards the left hand side of the page. When user clicks on the image, it should open another Web page.

Html code:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML9</TITLE>
</HEAD>
<BODY>
<P ALIGN="left">
<A HREF="test.html">
<IMG BORDER="0" SRC="logo.jpg" WIDTH="250" HEIGHT="100"
ALT = "IMAGE IS TURNED OFF" ALIGN = "BOTTOM" BORDER = 2>
</A>
Please make your valuable suggestions through comments.
</P>
</BODY>
</HTML>

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>…</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>…</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 9</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<PALIGN=”left “>…</P>

The HTML <p> tag defines a paragraph of text.

 

<A HREF=”test.html”>…<A>

The Anchor tag is used to create links between different objects like HTML pages, files, web sites etc. It is introduced by the characters <A> and terminated by </A>. HREF is the most common attribute of the ANCHOR tag. It defines the destination of the link.

<IMG>

The HTML <img> tag is can be used for displaying an image with the desired height and width.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML08 Write an HTML code to create a Web page that contains an image at its center.

Write an HTML code to create a Web page that contains an image at its center.

 

HTML_Image_logo_Page

HTML_Image_logo_Source_Code

Write an HTML code to create a Web page that contains an image at its center.

Html code:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML8</TITLE>
</HEAD>
<BODY>
<P ALIGN="center"><IMG BORDER="0" WIDTH="600" HEIGHT="200" SRC="logo.jpg"</P>
</BODY>
</HTML>

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>….</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>….</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 8</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>….</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<PALIGN=”center”>…</P>

The HTML <p> tag defines a paragraph of text.

 

<IMG>

The HTML <img> tag is can be used for displaying an image with the desired height and width.

 

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML07 Write an HTML code to create a Web page of blue color and display links in red colour.

Write an HTML code to create a Web page of blue color and display links in red colour.

HTML_Links_Source_Code

HTML_Links_Page

Write an HTML code to create a Web page of blue color and display links in red colour.

Html code:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML7</TITLE>
</HEAD>
<BODY BGCOLOR="blue" TEXT="red">
<P ALIGN="center"><FONT FACE="verdana" COLOR="white" SIZE="5"><B>CSSimplified.com Links..</B></FONT></P>
<BR><A HREF="C_programming.html"><FONT COLOR="red" SIZE="4">C_programming</FONT></A>
<BR><A HREF="Assembly_Language.html"><FONT COLOR="red" SIZE="4">Assembly_Language</FONT></A>
<BR><A HREF="Data_Structure.html"><FONT COLOR="red" SIZE="4">Data_Structure</FONT></A>
</BODY>
</HTML>

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>….</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>….</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 7</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY BGCOLOR=”blue” TEXT=”red”>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

The BODY tag has following attributes:

  • BGCOLOUR: It can be used for changing the background colour of the page. By default the background colour is white.
  • TEXT: It is used for specifying the colour of the text displayed on the page.

 

<B>…</B>

The HTML <b> tag specifies bold text.

 

<PALIGN=”center”>…</P>

The HTML <p> tag defines a paragraph of text.

 

<BR>

The HTML <br> tag is used to give a line break.

 

<A HREF=”C_programming.html”><FONT COLOR=”red”SIZE=”4″>C_programming</FONT></A>

The Anchor tag is used to create links between different objects like HTML pages,files, web sites etc. It is introduced by the characters <A> and terminated by </A>.HREF is the most common attribute of the ANCHOR tag. It defines the destination ofthe link.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML06 Design a page having background colour yellow, giving text colour red and using all the attributes of font tab.

Design a page having background colour yellow, giving text colour red and using all the attributes of font tab.

 

HTML_Yellow_Red_Source_Code

HTML_Yellow_Red_Page

Design a page having background colour yellow, giving text colour red and using all the attributes of font tab.

Html code:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML5</TITLE>
</HEAD>
<BODY>
<FONT><B>CSSimplified.com</B></FONT>
<P><FONT><I>CSSimplified.com</I></FONT>
</P>
<P><FONT><U>CSSimplified.com</U></FONT>
</P>
</BODY>
</HTML>

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>….</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>….</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 6</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY BGCOLOR=”yellow” TEXT=”red”>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

The BODY tag has following attributes:

  • BGCOLOUR: It can be used for changing the background colour of the page. By default the background colour is white.
  • TEXT: It is used for specifying the colour of the text displayed on the page.

 

<B>…</B>

The HTML <b> tag specifies bold text.

 

<P>…</P>

The HTML <p> tag defines a paragraph of text.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML05 Create a page to show different attributes: italics, bold, underline.

Create a page to show different attributes: italics, bold, underline.

 

FORMATTING

The ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. The <B>, <I> and <U> tags are used to mark the text as bold, italics and underlined respectively. The <STRONG> and <EM> tags are used to emphasize the text in bold and italics. The <BLOCKQUOTE> tag indents the left margin of the text. The <ADDRESS> tag displays the text in italics. Any text placed between the <CITE> and </CITE> tags, is rendered in italics by the browser. You can display the text exactly as written in the code using the <PRE> tag.

HTML_Formating_B_I_U_Source_Code

HTML_Formating_B_I_U_Page

Create a page to show different attributes: italics, bold, underline.

Html code:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML5</TITLE>
</HEAD>
<BODY>
<FONT><B>CSSimplified.com</B></FONT>
<P><FONT><I>CSSimplified.com</I></FONT>
</P>
<P><FONT><U>CSSimplified.com</U></FONT>
</P>
</BODY>
</HTML>

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>….</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>….</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 5</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<B>…</B>

The HTML <b> tag specifies bold text.

 

<I>…</I>

The HTML <i> tag is used to display the content in italic.

 

<U>…</U>

The HTML <u> tag is used to underline a text. This tag is deprecated now and should not be used.

 

<P>…</P>

The HTML <p> tag defines a paragraph of text.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.

HTML04 Create a page to show different attributes of Font tag.

Create a page to show different attributes of Font tag.

 

FONT Tag

HTML provides the flexibility of changing the characteristics of the font such as size, colour etc. Every browser has a default font setting that governs the default font name, size and colour. Unless you have changed it, the default is Times New Roman 12pt with the colour being black. Now with IE 6.0 (Internet Explorer) you can specify font names other than the default, such as ARIAL and COMIC SANS.

 

The syntax of the <FONT> tag with its different attributes:

<FONT FACE = “name” SIZE = n colour = #RGB >

 

The attributes are:

  1. FACE: This attribute is used to change the font style. Its value should be given as the name of the desired font. But the font name specified must be present in the system, otherwise the default-name is used by the browser. The font will only display if the user has that font installed on the computer. Arial and Comic Sans MS are pretty widely distributed with Microsoft Windows. So if you are using a Microsoft supplied operating system, these are likely to be available on your computer.

 

  1. SIZE: Font can be displayed in any of the 7 sizes:
    1. 1 – Tiny 2 – Small               3 – Regular           4 – Extra Medium            5 – Large               6 – Real Big          7 – Largest

 

  1. COLOUR: With this attribute you can change the desired font colour. The values can be specified either by using the hexadecimal format as already described, i.e., #RGB, or by the name of the colour. The hex code of the colour has been explained earlier in this unit. As shown in Figure 2.7, the value of the colour attribute in the third line has been specified as “Blue”. So the text present in thecode between the <FONT> and </FONT> tags appears in blue. By default the colour of the text is black. If we specify the text colour in the <FONT> tag then this value overrides the colour value, if any, specified in the <BODY> tag.

 Create a page to show different attributes of Font tag.

 

 

HTML_Paragraph_Source_Code

HTML_Paragraph_Page

Html code:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>CSSimplified.com HTML4</TITLE>
</HEAD>
<BODY>
<FONT FACE="VERDANA" SIZE="6" COLOR="BLUE">CSSimplified Makes Life EASY!</FONT>
<P><FONT FACE="ARIAL" SIZE="8" COLOR="RED">CSSimplified Makes Life EASY!</FONT>
</P>
<P><FONT FACE="Times New Roman" SIZE="12" COLOR="GREEN">CSSimplified Makes Life EASY!</FONT>
</P>
<P><FONT FACE="Comic Sans MS" SIZE="16" COLOR="PURPLE">CSSimplified Makes Life EASY!</FONT>
</P>
</BODY>
</HTML>

 

 

Write above code in any text editor and save by htm or html extension and Open it in any browser by double clicking the file like internetexplorer.

 

<!DOCTYPE html>

This tag defines the document type and HTML version.

 

<HTML>….</HTML>

This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>…</head> and document body which is represented by <body>…</body> tags.

 

<HEAD>….</HEAD>

This tag represents the document’s header which can keep other HTML tags like <title>, <link> etc.

 

<TITLE>CSSimplified.com HTML 4</TITLE>

The <title> tag is used inside the <head> tag to mention the document title.

 

<BODY>…</BODY>

This tag represents the document’s body which keeps other HTML tags like <h1>, <div>, <p> etc.

 

<FONT FACE=”Times New Roman” SIZE=”12″ COLOR=”GREEN”>…</FONT>

HTML provides the flexibility of changing the characteristics of the font such as size, colour etc. Every browser has a default font setting that governs the default font name, size and colour. Unless you have changed it, the default is Times New Roman 12pt with the colour being black. Now with IE 6.0 (Internet Explorer) you can specify font names other than the default, such as ARIAL and COMIC SANS.

 

The syntax of the <FONT> tag with its different attributes:

<FONT FACE = “name” SIZE = n colour = #RGB >

 

The attributes are:

a.         FACE: This attribute is used to change the font style. Its value should be given as the name of the desired font. But the font name specified must be present in the system, otherwise the default-name is used by the browser. The font will only display if the user has that font installed on the computer. Arial and Comic Sans MS are pretty widely distributed with Microsoft Windows. So if you are using a Microsoft supplied operating system, these are likely to be available on your computer.

 

b.         SIZE: Font can be displayed in any of the 7 sizes:

a.         1 – Tiny            2 – Small          3 – Regular      4 – Extra Medium       5 – Large          6 – Real Big     7 – Largest

 

c.         COLOUR: With this attribute you can change the desired font colour. The values can be specified either by using the hexadecimal format as already described, i.e., #RGB, or by the name of the colour. The hex code of the colour has been explained earlier in this unit. As shown in Figure 2.7, the value of the colour attribute in the third line has been specified as “Blue”. So the text present in the code between the <FONT> and </FONT> tags appears in blue. By default the colour of the text is black. If we specify the text colour in the <FONT> tag then this value overrides the colour value, if any, specified in the <BODY> tag.

 

<P>…</P>

The HTML <p> tag defines a paragraph of text.

 

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration:

<!DOCTYPE html>

There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. We will see more details on this while discussing <!DOCTYPE…> tag along with other HTML tags.

Note:- To understand program for sequence in detail Please SEARCH numerically example: HTML01, HTML02, etc.