HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, lists, links etc. Some key tags include <body> for the content, <h1>-<h6> for headings, <p> for paragraphs, <img> for images, <a> for links, <table> for tables, and <div> and <span> for sections. HTML documents have a basic structure with <html>, <head> and <body> tags.
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
0 ratings0% found this document useful (0 votes)
359 views39 pages
What Is HTML
HTML is a markup language used to define the structure and layout of web pages. HTML uses tags to mark elements like headings, paragraphs, lists, links etc. Some key tags include <body> for the content, <h1>-<h6> for headings, <p> for paragraphs, <img> for images, <a> for links, <table> for tables, and <div> and <span> for sections. HTML documents have a basic structure with <html>, <head> and <body> tags.
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/ 39
What is HTML?
HTML is a simple scripting language used to create Hypertext Documents. Hypertext is simply a pieces of text that works as a link.
Markup Language is a way of writing layout information within documents. HTML is a
collection of Markup Tags (platform-independent) that define the various components of a world wide web documents . We can use any types of text editors (like Notepad, edit pad.....)for HTML coding.
HTML documents are saved with .html or htm extensions.
Tags:
In HTML , all commands (code) are called Tags. Tags are not case sensitive. There are two types of tag:
1. Single (Empty/ Unpair)tag
These types of tag don't have its ending tag like: <BR>, <!>, <HR> etc. 2. Pair (container) tag Tags with starting and endings are called container tags. we have to close these. types of tags, otherwise, they will not function properly. Container tags are ended with slash (/) key.
Tag consists of three parts:
1. Element(main tag)- Identification of tag
2. Attribute-Property for tag 3. Value-value assigned for attributes
For Example:
<BODY BGCOLOR="RED">
BODY=Element( Main Tag)
BGCOLOR=Attribute
"RED"=Attribute value
Note 1: We only have to close the Element (Main) Tags like </body> in the end.
Note 2: We can use more than one attributes and its value for the Element. for Example:
<font size=5 colot=red>
Steps for Creating Webpage using HTML:
First make one folder inside the desired location (optional). But it is a good practice to store all HTML files , images and linked items within the same location. o Right click the mouse button –choose new –click on folder –change folder's name(if needed). Open Notepad o Start-Run –Types notepad-Ok or , start –program –accessories- click on notepad. Write the source file with all required items(text, images, tables...) by using html codes. Saved the source file using either. html or .htm extension inside the pre-made folder .Save all items (images, sound clips & other linked items ) within the same folder. o Choose All files from the dropdown menu of save as type. Close all open documents. Open the folder where you saved the HTML file and double click on the file to view the output. If you want to edit the file then right click on the out put browser (anywhere inside the display area ) and click on view source. Edit or change the codes according to your requirements. Save the chagges using chrl+S (Easy way) or file –save. Switch to the browser window (using Taskbar or Alt+F4) and press F5 key to refresh the page to get the changes outpurt.
Structure of HTML Program:
<html> <head><title>....................</title></head> <body> ............................. .................................. </body> </html> All the contents of HTML document must contained between <html> and </html>
tags (Html section).
The HEAD section:
The HEAD section comes between a <head> and </head> tags. The head section of the web page includes all the stuff that does not show directly on the resulting page. It contains information about document Description etc. There are some special tags, which are used in this section only like <title>.
The TITLE TAG:
The text written between <title> and </title> tag is used to set title of the Browser window.
The BODY Section:
The text written inside the <body> and </body> tags is displayed in webpage .The <body> Tag can have a number of attributes like bgcolor, background, text , link , alink, vlink etc.......
First Example:
<html> <head><title>First Program of HTML.....</title></head> <body> This is my first program in HTML. </body> </html> BGCOLOR (Background Color): This attribute specifies the background color of the webpage. BGCOLOR is the attribute of <body> tag. This can be specified in two ways. First way is to use on of the permitted color namely aqua, blue, gray , green, fuchsia, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow etc. Example: <html> <head><title>Using background color ....</title></head> <body bgcolor="OLIVE"> I am using OLIVE color as a background. </body> </html> Second way is to specify the color by RGB format . RGB stands for Red –Green-Blue. The number specified with BGCOLOR attribute has six digits i.e. RRGGBB( Two digits for RED,two for Green and remaining for blue).Each color is ranging between 0 to 255 .The numbers specified are in hexadecimal number system . If you don't know about hexadecimal number systems then you can refer the given table . The base of hexadecimal is 16.
Decimal value 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Hexadecimal Value 1 2 3 4 5 6 7 8 9 A B C D E F
The minimum hexadecimal number can be 00 and maximum can be FF. If value specified is FF0000 Then 100% of Red, 0% of Green and 0% Blue. For Black:00 00 00
For white: FF FF FF
<html> <head><title>Using BLUE color as a background ....</title></head> <body bgcolor="0000FF"> I am using BLUE color as a background. </body> </title> Text: This attribute defines the color of the body text written in the page. E.g.<BODY="BLUE"<BODY TEXT="0000FF"> Example: <html> <head><title>Using BLUE color as a background and YELLOW as a text color ......</title></head> <body bgcolor="blue" text=Yellow> I am using BLUE color as a background with yellow text. </body> </html> BACKGROUND (Image as a background): The BACKGROUND attribute specifies an image file , which is used as a background picture . Its value will be full path of an image file. Example: <html> <head><title>I am using an image as a background .....</title></head> <body background="scene.jpg"> I am using a scene as a background . </body> </html> Note:Don't forget to save the background image within the same location where you saved your html file. <!>Tag: This tag is used to write any comments to the document. The text written with this tag is not visible in the page. The <!> Tag doesn't have any ending tag. Example: <html> <head><title>Using comments.....</title><head> <body> This is my first paragraph. <! This statement is only for comment> <P>This is my second paragraph. </body> </html> Note:<p> tag is used to change the paragraph. The <BR> tag: This tag is only used to break the line . If you use enter key to break the line then it is not accepted . So, in this case , you can use <BR> tag. The <BR> tag doesn't have its ending tag. For Example: <html> <body> Software is important <BR> But , <BR> Hardware is essential. </body> </html> The <P> Tag: This tag is used to change the paragraph. with this tag , you can use ALIGN attribute. Example: <html> <body> <p align=right>Date: Jan 25, 2008</p> <p align=center>CURRICULUM-VITAE</p> <p align=left>Name:Mr. Pawam Karna<br> Address : Aldgate East, London. <p align=Justify> HTML is a simple text formatting language used to create Hypertext documents. Before HTML , It was SGML (Standard Generalized Mark-up Language). HTML is a collection of platform-independent styles (indicated by markup Tags) That define the various components of a world wide web documents.</p> </body> </html> The <HR> tag: The <HR> tag ends a paragraph and insets a horizontal line . It has following attributes.
1. Align 2. Width 3. Noshade 4. Size 5. color
Example:
<html> <head><title> Examples of Horizontal lines </title></head> <body> <CENTER><FONT SIZE=5>Examples of Horizontal lines</CENTER></FONT> <hr> <p align=center>Horizontal line with center alignment</p> <hr align=center width=50%> Horizontal line with 75% width <hr ALIGN=LEFT Width=75%> Horizontal line with Noshade <hr noshade> Horizontal line with different sizes: <hr size=10> <hr size=15> Blue horizontal line <hr color="blue"> </body> </html> Formatting the page: Headings: Headings are used to display some important information on the web. There are six different levels for headings (H1.....H6). Example:1 <html> <body> <h1>Computer </h1><br> <h2>Computer </h2><br> <h3>Computer </h3><br> <h4>Computer </h4><br> <h5>Computer </h5><br> <h6>Computer </h6><br> </body> </html> Example:2 <html> <body> <h1 align=Center>Software</h1> <p>HTML is the collection of the codes used for web designing.</P> <h2 align=right>Hardware</h2> <p> Only physical parts of the computer , which can be seen and realized .</p> </body> </html> The <FONT> Tag: The <FONT> tag is used to define different types of font size and font color for the web . The <FONT> tag has different attributes like: 1. SIZE 2. FACE 3. COLOR SIZE: This attribute sets the size of the font . The font size can be set from 1 to 7 . FACE: This attributes is used to set different font type of the text . All browsers don't recognize all fonts. COLOR: This attribute specifies the color of the font . we can use Aqua , Black, Blue , Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, silver, Teal, white, Yellow colors for the font . Example: <html> <head><title> Changing font and its attribute</title></head> <body> I am using different font with different size and color. <p><font size=1>World of the computer</font><br> <font size=2>World of the computer</font><br> <font size=3>World of the computer</font><br> <font size=4>World of the computer</font><br> <font size=5>World of the computer</font><br> <font size=6>World of the computer</font><br> <font size=7>World of the computer</font> <p><font face="Comic sans Ms">London </font><br> <font face=Impact>London</font></p> <p><font color =Blue>Blue Text </font><br> <font color=red>Danger!</font></p> <p>Now, I am mixing all attributes of the font . </p> <p><Font face="arial" size=6 color=green> I am Arial font with 6 size and green color .</font><br> Thank you .<br> BY </body> </html> Note:The default font size is 3. FONT STYLES: We can use different types of font styles as listed below: <B>=Bold <I>=Italic text <U>=Underlined text <STRIKE>=Strikeout text <EM>=Emphasized text (Rendered Italic) <STRONG>=Strong text (Rendered bold) <TT>=Tele Type text .It puts the text in moonscape fonts. <BIG>Put text in a bigger size.(Increases by one point) <SMALL>=puts text in a smaller size.(Decreases by one point) <SUB>=Subscripts the text. Example: <html> <body> <b>Bold</b><br> <I>Italic</I><br> <u>Underline</U><br> <strike>Strikethrougth</strike><Br> <EM>Rendered Italic</EM><br> <Strong>Rendered Bold</Strong><br> <tt>Teletype Text</tt><br> <big><big>Bigger than bigger</big></big><br> <small><small>Smaller Than Smaller</small></small><br> H<sub>2</sub>So<sub>4</sub><br> A<Sup>2</sup>B<sup>2</sup> </body> The <pre>Tag: The <pre> tag is used to set pre –formatted text and style. Exanple: <html> <body> <pre> <font face=arial size=4> PERSONAL DETALILS: Name : SHUSHANT SHARMA DOB : 25<SUP>TH</SUP> JAN 1980 SEX : Male </font> </pre> </body> </html> The <center> Tag: This tag is used to center align the individual text , marquees, images and tables etc. This tag breaks the line automatically. Inserting an Images: Different images can be placed in the documents with the help of <IMG> tag. The <IMG> tag: This tag is used to insert and images in the documents . It doesn't have ending tag but have different attributes for setting title , source , size (Width and Height) , alignments, horizontal and vertical spaces , borders etc. SRC: This attribute define the size of an images in pixels. ALIGN: This attribute specifies the position of an image inside the document. There are five possible alignments: TOP, MIDDLE, BOTTOM, LEFT, AND RIGHT NOTE:Top, <Middle and Bottom alignments are used in case of paragraph only .<Center> tag should be used for center alignments. HSPACE & VSPACE: These are used to give required space from left and top edge of the document window. TITLE: This attribute is used to define some comments for image with the mouse pointer. Example1: <html> <body> <H1 ALIGN=CENTER>WORKING WITH IMAGES....</H1> <IMG SRC="picture.jpg"> </body> </html> Example2: <html> <body> <IMG SRC="image.jpg" HEIGHT=200 ALIGN=right TITLE="Gold Petals" BORDER=2 VSPACE=10> </body> </html> Note:You can also use ALT attribute instead of TITLE. Example3: <html> <body> <IMG SRC="image.jpg" HEIGHT=100 WIDTH=100 ALIGH=left BORDER=2> Jenny Kunwar<br> 25 Rothsay Road, Forest Gate<br> London,UK <BR clear="left> Dear friends, <p> Welcome.... </body> </html> The <MAQUEE> Tag: This tag is used to animate the required text and image in different ways . Internet explwrer only recognize this tag. This tag has the following attributes: Behavior("scroll"; "Alternate" or "slide") Direction("left";" right";"up";or"down") width(in pixel or percent unit height(in pixel or percent unit) bgcolor Example1: <html> <body> <H1 align=center>NEW DELHI</H1> <Marquee>New Dehli is capital of India</marquee> </body> </html> Example2: <html> <body> <center><marquee width=40% behavior="alternate">Practice makes man perfect</marquee></center> <center><font color=yellow face=arial size=5><Marquee behavior="scroll" bgcolor="blue" direction=down height=200 width=26%>Lets go to school</marquee></center></font> </body> </html> Eample3: <html> <body> <H1>Moving Images</H1> <Center><marquee width=50%><IMG SRC="ABC.JPG" WIDTH=100 HEIGHT=100 BORDER=2></Marquee></center> </body> </html> Inserting blank space: You can use special key   to Keep a single space. If you want to break the paragraph then you can use <p> </P>. Example: <html> <body> <center>L     O     N     D     O     N   </center> </body> </html> Creating Hyperlink: Hyperlink means it creates link . Whenever you click on the link , Then you will reach where it is linked. There are two types of links.: 1. INTERNAL &, 2. EXTERNAL You can used to define types of text , image , symbols or any part of an image for hyperlink. Internal links only work inside the single page and external links connect more than one individual page. <A NAME> tag: This tag is used to define marking for hyperlinks within a single page. We can define any text within double ("...") for book marking. Note:Don't forget to define bookmark with hash (#) key for hyperlinks. <A HREF>Tag: This tag (Anchor Hyperlink Reference) is used to create required internal and external hyperlinks . In case of internal link , you have to define Anchor Name at first. Example of an Internal Linking: <html> <head><title>Internal Linking ....</title><head> <body> <H1 ALIGN=CENTER><FONT COLOR=BLUE><A NAME="LON">London </A></H1></FONT><BR> <CENTER><MARQUEE BGCOLOR=CYAN WIDTH=50% BEHAVIOR=ALTERNATE><B><I>One of the busiest city in the world........</b></i></MARQUEE></CENTER> <P><I><FONT FACE="Times New Roman">Places to Visit:</FONT></I><BR> <A HREF="#LB">London Bridge</A></P><BR> <A HREF="#LE">London Eye</A></P> <P> About London................................................................................................................................... ....... ................................................................................................................................................ ................................................................................................................................................ ...........................................................................</P> <P><A HREF="#Lon">UP</A></P> <P> </P> <P> </P> <P><H1 ALIGN=CENTER><A NAME="LB">London Bridge</H1></A></P> <P> About London Bridge................................................................................................................ ................................................................................................................................................ ...................................................................................................................</P> <P><A HREF="#Lon">UP</A></P> </body> </html> E-mail & Web link: <html> <head><title>Sending E-mail.....& Searching Web ....</title></head> <body> <H1 align=Center>Working with E-mail & Web.....</H1> <p> If you have any comment , please  <A HREF=mailto:admin@sclondon.ac>Click here </a>  to send mail.</p> </p> </p> <H4>Click the following links to get details:</H4> <p><A HREF=http://WWW.sclondon.ac" TARGET="blank">WWW.sclondon.ac</A> ||   <A HREF=http://www.bbc.co.uk" TARGET="blank">www.bbc.co.uk</A> </body> </html> Internal links using an image: <html> <head><title>About Stratford....</title><head> <body> <h1 align=center><a name="strat">Stratford, London</a><h1> <Center><a href="#ssm"><img src="ssm.jpg" border=2 width=200 height=130 alt="Stratford Shoppinig Mall"></a><Center> <p> About Stratford, London:<br> ................................................................................................................................................ ................................................................................................................................................ ...................................................................................</p> <p><a href="#Strat">UP</a></p> <p> </p> <p> </p> <h2 align=center><a name="ssm">Stratford shopping mall</a></h2> <p>......................................................................................................................................... ...........................................................................</p> <p><a href="#strat">Top</a></P> </body> </html> Note:You might not find the same above image inside your computer . You can use any other image instead of this image. Example of an External Linking: Index.html: <html> <head><title>External Linking .....</title></head> <body> <h1 align=center><a name="web">Web page Designing </a></h1> Please click me for details <br> <a href="html.html">HTML </a><br> <a href="frontpage.html">Frontpage</a><br> <a href=5><p ALIGN=JUSTIFY>The Internet application that is currently drawing the most attention is the World Wide Web (WWW).www is a series of servers that are interconnected through hypertext .Hypertext is a method of presenting information in which certain text is highlighted that, when selected ,displays more information on a particular topic . These highlighted items are called Hyperlinks and allow users to navigate from one document to another though they may be located on different server. The user can use a browser software links Internet Explorer, Mosaic ,Netscape Navigator to navigate the web. <p ALIGN=JUSTIFY>A browser is software that helps users to navigate the www. The web is a graphic medium with most webpages having some images. The term Home page refers to the index page of any organization or information source. A home page can have links that the user to further levels of information within the same topic, or to other home pages. <p ALIGN=JUSTIFY>There are two ways for web designing . HTML are the group of codes specially designed for web designing and front pages is the ready-made application program.</font> <p><a href="#Web">Top</a></P> </body> </html> HTML.html <html> <body> <h1 align=center>HTML</h1> <p ALIGN=JUSTIFY>HTML is a simple text formatting language used to create Hypertext Document .Before HTML , It was SGML (Standard Generalized Mark-up Language).HTML is a collection of platform-independent styles (indicated by Markup Tags) That define the various components of a worldwide web documents. We can use any types of text editors (like Notepad, Edit pad...) for Html coding .European Laboratory, Switzerland in 1990. <p><a href="index.html">Return to Home</a> </body> </html> Frontpage.html: <html> <body> <h1 align=center><font color=blue>Frontpage</font></h1> <p align=justify>Ms. Frontpage'00 is a popular Webpage /Website designing package developed by Microsoft corporation, USA .With the helps of this program, we can create , manage and publish the Webpages in easiest way. <p align=Justify>You will need several tools to produce your site on the world wide web (www). You need space on your service Provider's web server, Internet Access( Internet Service) and the major tool you will use is Ms. Frontpage'00. <p align=justify>As a web page creation tool, you will use the Frontpage to create (construct) each page in your will actually see on your screen what your pages are published on the web. <p><a href="index.html">Return to Home</a> </body> </html> Uses of LINK , ALINK, VLINK attribute of <body>tag: LINK: This attribute of <body> tag defines the color of Hyperlink, which have not yet been visited. E.G.<BODY ALINK="NAVY"> ALINK: This attribute of <body> tag defines the color of hyperlink, which you click on it. E.G.<BODY ALINK='RED"> VLINK: This attribute of <body> tag defines the color of hyperlink, which you have already visited. EG.<BODY VLINK="CYAN"> Inserting Special Character: Apart from all alphanumeric and numeric characters, you can add special characters and symbols. Example: <html> <body> <H1><CENTER> HTML Manual....</CENTER></H1> <CENTER>Copyright ©, ABC publications </CENTER> <CENTER>Registered ®, Professional Computers</CENTER> <CENTER>Trademark ™, WEBCOM</CENTER> <CENTER>Price ±, £. 25.00</CENTER> </body> </html> Creating Lists (Bullets and Numbering :) HTML has a number of tags in describe different types of lists of things . All lists have the same basic Syntax; the only difference is the way they are displayed. Unordered list(UL): The simplest type of list is an Unordered list .The elements of an Unordered list are usually displayed as a series of bullet points. An Unordered lists start with <ul> and ends with </ul> tags. Each elements in the list starts with <li> Tag. It doesn't have an ending tag. Using TYPE attribute with UL can set different types of bullets . The values specified with TYPE attribute can be square , disc , and circle. Example1: <html> <body> <ul> <li>Mouse <li>Keyboard <ul> <li>Screen / Monitor <li> Printer </ul> </body> </html> Example2: <html> <body> Some beautiful places of London: <UL TYPE="SQUARE"> <li> London Bridge <li>London Eye <li>Greenwich Park <li>Wombley Stadium </ul> </body> </html> Ordered Lists <ol>: An Ordered list is just like an Unordered List , But the elements are listed using numbers . Using TYPE attribute with OL can set different numbers, roman numbers and alphabets for ordered lists. Example1: <html> <body> <ol> <li> HDD <li>FDD <li>CD <OL type=i> <li>ROM <li>RW </ol> </body> </html> Example2: <html> <body> <OL TYPE="I"> <li>One <li>Two </ol> <OL type="A"> <li>A for Apple <li>B for: <ol> <li>Ball <li>Box <OL TYPE=a> <li>BOX 1 <li> BOX 2 </ol> </body> </html> Note:Similarly, you can define "i" etc. for Ordered List. Nested Loop: It is the combination of Unordered and Ordered list. You can define the list as per your requirements by using <ul> and <ol>. Example: <html> <body> Set of the Computer:<br> <ol> <li>Input Devices <ul> <li>Mouse <li>Keyboard </ul> <li>Output Devices <ul> <li>Screen <li>Printer </ul> </ol> </body> </html> Definition List <DL> If you want to create a dictionary of items in web page , you can create a list of definition to display terms and their definition. Example: <html> <body> <DL> <DT>Word <DD>Word is a document based application package. <DT>Excel <DD>Excel is an electronic sheet , which is also called spread sheet. </DD> </DT> </DL> </body> </html> Note: DL:Definition List; DT =Definition Term DD=Definition Data Creating a Table: The table is used to set the data in form of rows and columns .The <TABLE> and </TABLE> tags contains the whole features of the tables. The <TABELE> tag has the following attributes. Align: This attributes specifies the alignments of the whole table . If this attribute is not specified then it takes left alignment as default . The value for align can be left , fight of center. Width: This attribute specifies the tables 's width . If you don't supply a value for the width then the width of the table is as according to the data width. You can provide the value either at pixels or at percentage unit. Border: This attribute specifies the width of the border around the table . By default , There are no border , at that time <table border> specifies a table with a border 1 pixel wide. You can also specify border color by using BORDERCOLOR attribute. Cellspacing: This attribute specifies the width of the border between individual cells of a table. Cellpadding: This attribute specifies the space to be left between the border of each cell and its contents. Bgcolor: This attribute is used to give background color to the table. Table Rows <TR>: The<TR> Tag is used to setup a row of the table . we can use this tag as per our requirements. It has its ending tag </TR>. This tag has the following attributes: Align: This specifies the horizontal alignment of the contents of the cell in the row . The value can be left, right or cente. Valign(Vertical alignments): This is used to specify the vertical alignments of the contents of the cell in the row . The value can be top, middle or bottom. Bgcolor: This is used to specify the row color. Note:All the attributes of <TR> affects whole things of the table .You can also apply individually by using the attributes of <TD> or <TH> Tags. Table Headings<TH>: This tag is used to specify the table heading .Usually, it is displayed in bold face and centered aligned . It is ended with</TH> tag. Table Data<TD>: This tag is used to place the required data inside the row cells.The <TH> and <TD> tags can have the following attributes: Align: This specifies the horizontals alignment of the contents of the cell .The value can be left, Center or right . It will override the align attribute set in the <TR> Tag. Valign: It aligns the contents of the cell vertically . The value can be top, Middle or Bottom .It also override the VALIGN attribute set in the <TR> Tag. Rowspan (merging rows) This attribute is used to merge (combine) required row cells. The value should be more than 1 cell. Colspan (merging columns): The value for COLSAN should be more than 1(no. of column) and will span across many column cells. Width: This is used to specify width of the cell. The values can be in pixel or percentage. Height: This is used to specify height of the cell . The values is also in pixel or percentage. Example1: <html> <TABLE BORDER> <TR> <TD>S.N.</TD> <TD>Name</TD> <TD>Post</TD> <TD>Tel. no.</TD> </TR> <TR> <TD>01</TD> <TD>Rames</TD> <TD>Manager</TD> <TD>9800643248</TD> </TR> <TR> <TD>02</TD> <TD>Arjun</TD> <TD>Engineer</TD> <TD>9800659550</TD> </TR> <TR> <TD>03</TD> <TD>Lalit</TD> <TD>Managing Director</TD> <TD>9814131245</TD> </TR> <TR> <TD>04</TD> <TD>Suraj</TD> <TD>IT Teacher</TD> <TD>9815669988</TD> </TR> </TABLE> </HTML> Example2: <html> <table border=3 align=center width=75%> <TR> <TD>S.N.</TD> <TD>NAME</TD> <TD>POST</TD> <TD>TEL.NO.</TD> </TR> <TR> <TD>S.N.</TD> <TD>NAME</TD> <TD>POST</TD> <TD>TEL.NO.</TD> </TR>
<TD>01</TD> <TD>Ritu</TD> <TD>Assistant</TD> <TD>21648785454</TD> </TR> <TR> <TD>02</TD> <TD>Raju</TD> <TD>Engineer</TD> <TD>09124571</TD> </TR> <TR> <TD>03</TD> <TD>Rajesh</TD> <TD>Manager</TD> <TD>09712457</TD> </TR> </table> </html> Example3: <html> <table border=2 cellspacing=10 bgcolor=Cyan cellpadding=5> <TR> <TD>S.N.</TD> <TD>NAME</TD> <TD>POST</TD> <TD>TEL.NO.</TD> </TR> <TR> <TD>01.</TD> <TD>Divay</TD> <TD>Agents</TD> <TD>12457800.</TD> </TR> <TR> <TD>02.</TD> <TD>Radhika</TD> <TD>Assistant</TD> <TD>9800643258.</TD> </TR> <TR> <TD>03</TD> <TD>Ritesh</TD> <TD>Doctor</TD> <TD>9825636654.</TD> </TR> </table> </html> Example4: <html> <TABLE BORDER=2 WIDTH=50% BGCOLOR=CYAN> <TR ALIGN=CENTER BGCOLOR=ORANGE VALIGN=CENTER> <TD>S.N.</TD> <TD>Name of the items</TD> <TD>Rate</TD> <TD>QTY</TD> <TD>Total</TD> </TR> <TR><TD>01.</TD> <TD>Mouse</TD> <TD>250</TD> <TD>10</TD> <TD>2500</TD> </TR> <TR> <TD>S02</TD> <TD>Keyboards</TD> <TD>350</TD> <TD>10</TD> <TD>3500</TD> </TR> <TR> <TD>03.</TD> <TD>Monitor</TD> <TD>5000</TD> <TD>10</TD> <TD>50000</TD> </TR> </TABLE> </html> Example5: <html> <TABLE BORDER=5 CELLSPACING=5 BGCOLOR=PINK WIDTH=75%> <TR BGCOLOR=CYAN> <TH WIDTH=25%>Stu_Id</TH> <TD WIDTH=50%>Student's Name</TH> </TR> <TR> <TD>SCL-001</TD> <TD>Ibrahim</TD> <TD>3500</TD> </TR> <TR> <TD>SCL-002</TD> <TD>Arpita</TD> <TD>6500</TD> </TR> <TR> <TD>SCL-003</TD> <TD>Padmini</TD> <TD>2200</TD> </TR> </TABLE> </HTML> Example6: <html> <TABLE BORDER> <TR> <TH COLSPAN=4>Salary sheer of the personnel</TH> </TR> <TR> <TH >Staff ID</TH> <TH>Name</TH> <TH>Post</TH> <TH>Salary</TH> </TR> <TR> <TD>ABC-01</TD> <TD>John</TD> <TD>Principal</TD> <TD>5000</TD> </TR> <TR> <TD>ABC-02</TD> <TD>Robert</TD> <TD>Administrator</TD> <TD>3500</TD> </TR> <TR> <TD>ABC-03</TR> <TD>Ann</TR> <TD>Manager</TD> </TR> </TABLE> </html> Example7: <HTML> <body> <CENTER> <TABLE BORDER=5> <TR> <TH VALIGN=CENTER ROWSPAN=2 COLSPAN=2><B><FONT FACE="Arial"> SCL</B></FONT></TH> </TR> <TR> <TD ALIGN=CENTER>2006</TD> <TD ALIGN=CENTER>2007</TD> <TD ALIGN=CENTER>2008</TD> </TR> <TR> <TD ROWSPAN=2>Category</TD> <TH>Boys</TH> <TD ALIGN=RIGHT>150</TD> <TD ALIGN=RIGHT>175</TD> <TD ALIGN=RIGHT>225</TD> </TR> <TR> <TH>Girls</TH> <TD ALIGN=RIGHT>75</TD> <TD ALIGN=RIGHT>125<./TD> <TD ALIGN=RIGHT>200</TD> </TR> </CENTER> </body> </html> Designing a webpage using Table: <html> <head><title>Web Designing ....</title></head> <body> <H2 ALIGN=CENTER><A NAME="Web Designing">Web Designing</A></H2> <P><CENTER>There are two ways for web designign:</CENTER> <TABLE BORDER=0 WIDTH=100%> <TR> <TD WIDTH=50% ALIGN=CENTER><A HREF="#Using programming:">Using Ready-made application program</A></TD> </TD WIDTH=50% ALIGN=CENTER><A HREF="#Using ready-made program:">Using Ready-made application program</A></TD> </TR> </TABLE> <P> </P> <P><FONT SIZE=4>About Web Designing:</FONT> <P>Webpage is the collection of information that is stored in the website. The www consists of a huge collection of documents with related website called Webpage. Webpage provides vast amount of information of related website. <p>Each and every website has its own address, is called Internet address .After connecting to the Internet, we have to search any information by using related website address. <P><A NAME="Using Scripting:"><FONT SIZE=4>Using Scripting:</FONT></A> <P>HTML is a simple scripting language used to create Hypertext Documents. <p>Hypertext is simply a piece of text that works as a link. <P>Markup Language is a way of writing layout information within documents. <p>HTML is a collection of Markup Tags (platform-independent) That define the various components of a worldwide web documents. we can use any types of text editors (like Notepad, Edit pad..) for HTML coding. <p>HTML documents are saved with .html or .htm extensions. <p><A HREF="#Web Designing">Top</A> <P> <p><A NAME="Using ready-made program:"><FONT SIZE=4>Using Ready-made Program :</FONT></A> <P>Ms.frontpage is a popular Webpage / Website designing package developed by Microsoft corporation, USA. With the help of this program , we can create , Manage and publish the webpage in easiest way. <p> You will need several tools to produce your site on the world wide web (www).You need space on your service provider's web server , Internet Access (Internet service Provider's web server, Internet access (Internet Service ) and the major tool you will use is Ms. FrontPage. <P> As a web page creation tool , you will use the front page to crate (construct) each page in your website . Your pages will be an individual HTML files. <p> Frontpage is a WYSIWYG (What you see is What You Get) type editor. It means , you are creating it and how it will look when your are published on the web. <P><A HREF="W eb Designing ">Top </A> </body> </html> Using Frames: Normally, a browser will display a single HTML document in its window . Using the frames extensions to HTML , you can divide the main browser window into a number of sub window (referred to as "frames"). Each frame contains a different HTML documents and can e linked to other frames . A framed document is like any other HTML document but it has a <FRAMESET> tag instead of <body> tag. The <FRAMESET> tag: This is the main container of a framed document. We use only <FRAME> TAG and <NOFRAME> tag between the <FRAMESET> Tags. This tag has only two types of attribute. 1. Rows 2. cols Rows: The values of the ROWS attribute determine how the screen is to be divided up between different frames. There are 3 ways to express the value. <FRAMESET ROWS="25%> Note:250 pixels is the height of the first row and the other take what is left out . <FRAMESET ROWS="25%,75%> or <FRAMEST ROWS="25%,*"> CLOS: This attribute has the same syntax as the rows attribute , but divides the screen up horizontally. Frameset tag can have either the rows or the cols attribute but not both .There can be nested framesets (combination of rows and cols attributes). The <FRAME> Tag: This tag describe the individual frames within a <frameset> tag . It is not a container, so there is no its ending tag. The <FRAME> tag has has the following attributes: SCR: This attribute specifies the source of the HTML file to place in the same frame. If you have no SRC attribute , Then the browser will display a blank frame. Name: This attribute is used to give a frame name , so that it can be addressed by links in other documents. SCROLLINT: This attribute determines whether the frame should have scrollbars or not. This attribute has the following values: Scrolling=yes Scrolling=No Scrolling=Auto(By default, but it holds vertical scrollbar) NORESIZE: Normally, The user can change the sizes of individual frames by drawing them with the mouse; if NORESIZE attribute is use then the user can't change the size of the frames. MARGINWIDTH: This attribute specifies the horizontal distance in pixel between the contents and left /right edges of the frame. MARGINHEIGHT: This attribute specifies the vertical distance in pixel between the contents and top / bottom edges of the frame. TAGET: This attribute specifies the target location of the URL of the HTML files. eg.<FRAME NAME="contents" TARGET="main" SCR=”contents.html"> <!banner> <! contents> <!main>
Hyperlinks target of contents(i.e.URL of Hyperlinks)
The <NOFRAME> Tag: Some browser cannot handle (does not support )Frames. So, This tag is used to display message to inform use about it . It ends with </NOFRAME> TAG . A browser that can handle frames will ignore anything contained inside these tags. Example: <html> <Frameset....> .................................................................. .................................................................... ................................................................... .................................................................... <noframes> After using this tag, the browser will not display the frames. </noframes> </frameset> </html> Example of Frame Pages: note:Save all individual webpage within a same folder. Index.html <html> <head><title>Using frame pages</title></head> <frameset rows="15%,*"><! note:15%≈64 Pixels> <Frame name="banner" src="banner.html"> <frameset cols="20%,*"><!20≈150 pixels> <frame name="contents" noresize src="contents.html"> <frame name="main" noresize src="main.html" marginwidth=25> </frameset> </frameset> </html> Note:noresize=Usr can't change the frame size from the browser, after using this tag banner.html <html> <head><title>Banner</title></head> <body bgcolor="cyan"> <p align=center><font face="Arial black" sixe=6 color=blue>XYZ University </font></p> </body> <html> Contents.html <html> <head><title>Hyperlinks...</title></head> <body> <p><a href="education.html" target="main">Education</a></P> <p><a href="humanities.html target=main">Humanities</A></p> <p><a href="management html" taget="main">Management</a></p> <p><a href=http://www.google.com target="blank">Google!</a></p> </body> </html> Main.html <html> <head><title>Main Body….</title><head> <body> <h1 align=center><a name=”xyz”>About XYZ University</a></h1> <p><pre> XYZ can define your future , choose an appropriate option: 1. After a disciplined and tough school life, I have finally gained freedom . Freedom from nagging parents, hours of home work… I want to enjoy life and take it as it comes . I want to spend the next three years hanging with friends, partying and watching movies , bunking classes and spending time at the college canteen. 2. I want to reach the zenith of success . And for that I would like to join an institution that provides advanced academic and technical knowledge coupled with total personality development . an institution where academic rigour is blended with traditional calues and saskars. I want a faculty who will give me more work than I can handle , but then take such individual care that I become successful. Those who have ticked 1 would be happier not joining us . Those who have ticked 2 may please contact our counselor for seeking admission to our career programs. If you have scored more than 80% marks in class XII , Don’t forget to apply for scholarship.</p></pre> <p><a href=”#xyz”>UP</a></p> </body> </html> Education.html <html> <head><title>Education ….</title></head> <body> <h1 align=center>Education activities </h1> <p>………………………………………………………………………………………… ……………………………………………………………………………………………… ……………………………………………</p> Humanities.html <html> <head><title>Humanities ….</title></head> <body> <h1 align=center> Humanities Faculty </h1> <p>………………………………………………………………………………………… ……………………………………………………………………………………………… …………………………………</P> <p><a href=”main.html”>Back</a></P> </body> </html> Management.html <html> <head><title>Management….</title></head> <body> <h1 align=center>About Management</h1> <p>………………………………………………………………………………………… ……………………………………………………………………………………………… …………………………………</p> <p><a href=”main.html”>Back</a></P> </body> </html> Creating a form: A form is an area that can contain form elements. You must set up a form before adding in run to the form. To setup a form , you need to specify two important information: METHOD AND ACTION. METHOD: Method property tells the form how to transfer the data to the form processor. The value for method can be “post” or “Get”. POST means that you are going to post the information and GET means that you are just going to get another page . GET is almost never used. ACTION: Action property tells what action the form should should take when the user prosses the SUBMIT button. Action is the URL (Uniform Resource locator ) to which you are Posting the information. This normally has a CGI ,ASP, MAILTO.:etc. <INPUT>Tag: The most used form tag is <INPUT> tag. The type of INPUT is specified with the TYPE attribute .This tag doesn’t have its ending tag. The most commonly used INPUT types are as below: a. TEXT (NAME, VALUE, SIZE, MAXLENGTH) b. TADIO (NAME, Value, Checked) c. CHECKBOX (Name, value) d. IMAGE(SRC) e. RESET (Value) f. SUBMIT (Value) g. PASSWORD/HIDDEN (Name, Value, Size, Maxlength) Name: This is name of the INPUT tag. Through this name .the object of type that we specify in the TYPE attribute will be indentified. VALUE: The value may be different; it depends upon what the TYPE is .In text , it is the default text, which the viewer can change. In radio, check, hidden, it is the value, which you get. In Reset and Submit, it is the label that appears in the button. <TEXTAREA> Tag: This tag is used to specify the area of the text . This tag makes a two dimensional text area , in which the viewer can type form a short sentence to many paragraphs. This tag has its ending tag. This tag has the following attribute: NAME(Name of the tag) VALUE (Editable information of the tag) COLS (With of the Textarea) ROWS (Height of the textarea) <SELECT> Tag: This tag is used to create a meu that offers visitors a list of option to choose from. This tag has its ending tag . This tag has the following attributes: NAME(Name of the tag) MULTIPLE (If more than one option shown at a time) SIZE(Number of options you want to display at a time) <OPTION> Tag: This is the mini-tag of <SELECT> tag. Normally, it comes with <SELECT> tag. This tag is used to define the option to choose from the dropdown list . This tag mainly has one attribute: SELECTED This attribute specifies the default option that appears first in the non-multiple SELECT tag. It is not really needed since the first <OPTION> tag is assumed to be default. Example: <html> <head><title> Inquiry Form…</title></head> <BODY bgcolor=cyan> <FONT SIZE=6><CENTER>Stratford college London</FONT></CENTER> <FONT SIZE=5 COLOR=BLUE><CENTER>Stratford, London<BR> Tel:02085197362</CENTER></FONT> <H2 ALIGN=CENTER><U>Inquiry Form</U></H2> <FROM METHOD=”POST” ACTION=”mailto:adminsclondon.ac name=F1> <p>Full name: <INPUT TYPE=”text” NAME=”your name” VALUE=”Enter your name here” SIZE=30 MAXLENTH=25></P> <P>Address:<TEXTAREA NAME=”address” COLS=300 ROWS=3></TEXTAREA></P> <P>Sex:<INPUT TYPE=”radio” NAME=”sex” VALUE=”M”>Male       <INPUT TYPE=”radio” NAME=”sex” VALUE=”F” CHECKED> Feanale</P> <P> In which course(s) you want to join ?<BR> <INPUT TYPE=”CHECKBOX” NAME=”course” VALUE=”B”>BA<BR> <INPUT TYPE=”CHECKBOX” NAME=”course” VALUE=”m”>MBA<BR> <INPUT TYPE=”CHECKBOX” NAME=”course” VALUE=”Msc”>MSc Mobile Communication</p> <p>Qualification<BR> <SELECT> <OPTION>Schooling <OPTION>10+2 <OPTION>Bachelor Degree <OPTION>Master Degree</SELECT></P> <P>Type your code:<INPUT TYPE=”PASSWORD” NAME=”Password” SIZE=15 MAXLENGTH=12</P> <P><input type=”SUBMIT” VALUE=”Click me to send”><INPUT TYPE=”RESET” VALUE=”Clear”></P> </FORM> </body> </html> Adding Sound and Video: Sound: You can add the sound clips to your web page easily. It helps to entertain and gives some information to the site visitors. It will be better to insert small sound clips instead of large because a large sound clip takes long time to transfer. Sound Types: There are many types of sound format. The most popular is wave (.wav) type .This type of sound can be determined by the characters that appear after the period in sound files name like:f flybird.way. Types of sound Extension Used for MIDI .mid Instrumental music MPEG .mp3 Songs Real Audio .ra Live Broadcast Wave .wav Short clips
Example: <html> <head><title>Music…</title></head> <body> <h2>Choose your favourite song:</h2> <p><a href=”songs.mp3”>Song1 </a></p> <p><a href=”wlc.wav”>Song2</a></p> </body> </html> Note: Don’t forget to save these audio files within the same location along with other html files. Adding Background Music: <html> <body> <bgsound src=”C:\WINNT\Media\Windows Logon Sound.wav” autostart=true loop=true> or, <bgsound src=”song.mp3” autostart=true loop=true> </body> Note:If you save these files within the same location along with other html files then you don’t have to define their full path as above . You can just type the name within the double quote marks. Adding Video: You can also add video to your web page to entertain you visitors .Videos can present eye - catching visual effects. A video will pay when a visitor selects a link on your webpage. Example: <html> <head><title>Movies Viewer</title></head> <body> <h2> Choose your best movie clips: </h2> <p><a href=”Movie.dat”>Video1</a></p> <p><A href=”Clock.avi”>Video2</a></P> </body> </html>
Adding an internal video:
You can add an internal video to your web page that will play directly and continuously, when you open a webpage. Example: <html> <head><title>Automatic Video playing …..</title></head> <body> <h2 align=center>Attention Please!</h2> <embed src=”Clock.avi” Width=250 height=250 autostart=true loop=true> </body> </html> Note> EMBED:Adds an audio / video files. AUTOSTART: Starts an audio /video automatically. Loop:Plays continuously. SRC : Specify the location of the media.
