Post on 16-Apr-2017
PRACTICAL FILE
OF
WEB TECHNOLOGY
SUBMITTED TO: - SUBMITTED BY:-Mrs. Shivani Rajwant Kaur
(Prof. in IT Dept.) (MBACIT 1st SEM.)
(Master Tara Singh College for Women)
(Session 2014-16)
1
INDEXSr.no. Particulars Page. No. Remarks1. Introduction 4-52. Output 63. Elements 74. Formatting Text 85. Physical inline elements 96. Logical inline Elements 117. Output 128. Block Level Elements 13-159. Output 1610. Font Element 1711. Output & List 1812. Unordered List 1913. Output 2014. Ordered List 2115. Output 2216. Definition List 2317. Output & Nested List 2418. Output 2519. Hyperlink 2620. Output 2721. URL & Links 2822. Output 2923. Images 30-3124. Output 3225. Tables 33-3726. Output 3827. Creating Advance Table 39-4028. Output 4129. Frames 42-43
2
30 Output 4431. Nested Frameset 45-4632. Forms & Multimedia 47-5033. Output 5134. Cascading Style Sheet 5235. Inline Style Sheet 5336. Output & Embedded Style
Sheet54
37. Output 5538. External Style Sheet 5639. Output & Imported Style
Sheet57
40. Output 58
3
INTRODUCTIONHTML (Hypertext markup language) is used to create document on the World Wide Web. It was created by Tim Berners-Lee at CERN, the European Laboratory for Practice Physics in Geneva. It is simply collection of certain key words called ‘Tags’ that are helpful in writing the document to be displayed using a browser internet. It is a platform independent language that can be used on any platform such as Windows, Linux, Macintosh, and so on. To display a document in web it is essential to mark-up the different elements (heading, paragraph, and tables, so on) of the document with the HTML tags. To view a mark-up document, user has to open the document in a browser. A browser understand and interpret the HTML tags, identifies the structure of the document (which part are which) and makes decisions about presentations (how the part look) for the document. HTML also provides tags to make the document look attractive using graphic, font size and color, user can make a link to other the document or the different section of the same document by creating Hypertext Links also known as Hyperlinks.
ADVANTAGES OF HTML HTML is very simple. So it is very easy to create Web Pages without
knowing anything about it. Web Pages created using HTML can run on every browser. HTML files are the plain text files, so they can be composed and
edited on any type of computer such as windows, Mac, UNIX etc. It allows the user to handle both text and graphic files in a cross –
platform manner.
LIMITATIONS OF HTML
HTML is not easier to maintain. HTML is not suitable for data interchange. HTML lacks robust linking mechanism. Using HTML, you cannot create animation.
4
HTML is not good enough of formatting Web Pages for display.
Each word in Hypertext Output Markup Language (HTML) has special meaning.
The word Hypertext refers to the texts which act as links. You can jump to any webpage on the internet by simply clicking at the text which acts as a link.
The word mark-up refers to the symbols or sequences of character added to the ordinary text to define the structure of text.
The word language refers to the syntax that is similar to any other language.
COMMONLY USED TERMS WEB BROWSER WEB SERVER URL PROTOCOL DOMAIN NAME PORT NUMBER FILE PATH FILE NAME VIRTUAL DIRECTORY TAG ATRIBUTES ELEMENT
5
Structure of HTML Document:-
VIEW ON WEB BROWSER:-
<HTML>: It specifies the document as a webpage that can be seen in the web browser. The entire document is enclosed within <HTML> and </HTML> tags. It usually consists two parts HEAD and BODY.
6
<HEAD>: The head section specifies descriptive information about the web documents. It has opening tags and closing tags as well. It consists of information such as the title of webpage. This section contains header area that does not show directly on the webpage.
<TITLE>: The title element contains the title of HTML document that appear on the title bar of the browser’s window when the webpage is loaded. It enclosed between <TITLE> and</TITLE> tags.
<BODY>: The body elements contain the actual content of your HTML document that can be seen by the end user, when page is loaded in the browser window. It consists a number of attributes
FORMATTING TEXT
7
HTML uses a number of elements to format the text. You can change the heading styles, make paragraph, add lists, change font color and size etc. It classified into two categories:-
Inline elements Block level elements
INLINE ELEMENTS
Inline elements are those elements that are used to format some words, single words or even a single character in a sentence on a webpage. The inline elements cannot contain block level elements and can appear only within block level elements.
It further divided into two categories:-
Physical inline elements Logical inline elements
PHYSICAL INLINE ELEMENTS
8
The display ordinary text. Physical inline elements are rendered consistently in different browsers physical inline elements explicitly describe exactly how the text is to be formatted. If browser does not support to produce the defined style, this formatting may be lost and it will.
ELEMENTS PURPOSE
EXAMPLE RESULT
<I>.....</I> Italicize text
<i>text</i> i
<B>....</B> Bold text <b>renu</b>
Renu
<U>....</U> Underline text
<u>ram</u> Ram
<SMALL>..</SMALL> Smaller font
<small>text</small>
Text
<BIG>……..</BIG> Bigger font <big>red</big>
Red
9
CODING FOR PHYSICAL INLINE ELEMENTS:-
VIEW ON BROWSER:-
10
LOGICAL INLINE ELEMENTSLogical inline elements implicitly describe the text according to its meaning. A logical inline element contains different from ordinary text but it’s up to the browser how to display the text. Logical inline elements are following:-
Logical inline elements are more useful than physical inline elements because if a browser is unable to render physical inline elements, it will display ordinary text but logical inline element always rendered by the web browser. It is strongly recommended not to mix the logical and physical inline elements in your webpage.
ELEMENTS PURPOSE EXAMPLE RESULT<def>...</def> Definition of words <def>INLINE</def> INLINE<em>...</em> Emp. imp. part of
document<em>ELEMENTS</em> ELEMENTS
<samp>...</samp> For sample <samp> USEFUL</samp>
USEFUL
<cite>...</cite> Display italics <cite>IN HTML</cite> IN HTML
CODING FOR LOGICAL ELEMENTS:-
11
VIEW ON BROWSER:-
12
BLOCK LEVEL ELEMENTS
13
While working with physical inline elements we found that they did not insert line break. It is important to insert the line break. So block level elements come to rescue.
Block level elements are generally applied to multiple lines of text, although they may be applied to single line of text. The block level elements are <H1>,<H2>,<H3>,<H4>,<H5>,<H6><p>,<br>,<hr>,<pre><ol>,<ul>,<dl>
Note: - That block level element can contain inline elements as well as other block elements.
HEADING TAG (<H1>, <H2>, <H6>)Heading tags are used to create headings in documents such as title of the page. HTML support six heading level<h1>, <h2>, <h3>, <h4>, <h5> and <h6> of which <h1> is considered the most significant header and it is rendered in a larger font than other five headers. Headings are usually in bold type and larger size than regular text
PARAGRAPH TAG (<P>)
14
When a HTML document that uses inline elements is display in a browser then any numbers of white spaces are automatically compressed into a single space. It is better to divide the document into section which is possible with the use of paragraph tag<p>
The text enclosed in<p> and</p> tags acts as a single units. You can also use align for paragraph to left, right, center or justify it to the screen of the browser.
LINE BREAK TAG (<BR>)The text contained in a HTML document when viewed in web browser window wrap at the end of the line automatically. However, you can also force a line break using a <br> tag. It ends the line at the position where you place it and take the cursor to the beginning of a new line.
HORIZONTAL RULE TAG (<HR>)The <hr> is used to insert horizontal line in the document. It is mostly used to separate the document section. It is an empty tag and inserts a line break above and below the horizontal line inserted. It has many attributes:
ATTRIBUTES VALUES PURPOSE
15
Align Left ,right, center Set the alignment of horizontal line.
Color Different colors Set the color of the horizontal line.
No shade ------ Render the bar without surrounding shadow
Width Numeric values Set the width in pixels or %
Size -------- Set the size in pixels.
CODING FOR BLOCK LEVEL ELEMENTS:-
16
VIEW ON BROWSER:-
SETTING TEXT AND BACKGROUND COLOR OF A WEBPAGE
In order to set the background color of a webpage you need the BGCOLOR attributes of the <BODY>tag. Similarly if you can set the color of your text in your webpage by using the TEXT attributes of the<BODY> tag.
17
<FONT> ELEMENTThe <FONT> element is still widely used element in HTML. It allows you to specify the font on a webpage. It always start with a <FONT> opening tag and ends with </FONT> closing tag. It has three attributes which can be used with<FONT> tag:
FACE COLOR SIZE
CODING FOR FONT ELEMENT:-
18
VIEW ON BROWSER:-
LISTSWhile reading the content of a document, we generally prefer to read only the required information. So lists provide a convenient way of displaying important information to the user in small paragraph consisting of few lines.HTML provides three different kinds of list for specifying information on a webpage. Different types of lists available in HTML are:
o Bulleted lists(or unordered lists)
19
o Numbered lists(or ordered lists)o Definition lists
It is easily readable form and highlight the information in a simple language.
BULLETED OR UNORDERED LISTS (<UL>)Bulleted list is an unordered list which is used to represent set of items that are related to one another but the order of item is unimportant. It begins with <ul>tag and ends with </ul> tag. Each item in the list will use the<li> tag. The steps for creating unordered lists are:-
1. Start with opening unordered list tag<ul>2. Enter the list item by <li>tag in individual items3. Finally, end the unordered list by ending
tag</ul>
20
CODING FOR UNORDERED LIST:-
VIEW ON BROWSER:-
21
There are three types of attributes for using bullets:
Code <ul type=”disc”> <ul type =”circle”> <ul type=”square”>
<ul><li>keyboard<li>mouse<li>scanner</ul>
Keyboard Mouse Scanner
o Keyboardo Mouseo Scanner
Keyboard Mouse Scanner
NUMBERED LIST OR ORDERED LIST (<OL>)Numbered list is an ordered list that is used to represent a set of related items in a given order such as step by step instructions, recipes, outlines etc. A numbered list always begins with <ol> tag and ends with </ol>tag. OL stands for ordered list.
The steps for creating ordered list are:
1. Start with an opening list tag<ol>2. Specify the <li> tag followed by individual item.3. End the entire list with a closing tag</ol>
22
CODING FOR ORDERED LIST:-
VIEW ON BROWSER:-
23
DEFINITION LISTS(<DL>)Definition list are primarily used for glossaries i.e. terms with their definitions. The definition list are always enclosed in <dl> and </dl> tag. It differs from other type of list in that lists in that list items consists of two parts: a definition term and definition description. The definition term and definition description are represented by <dt> and<dd> tags respectively.
CODING:-
24
VIEW ON BROWSER:-
NESTED LISTSLists can be nested inside one another. You can nest lists of same or different types of lists within one another. It is useful in situations such as outlines where you want to vary the type of bullets or number. However, you can override the default rendering by choosing the TYPE attribute.
25
COODING FOR NESTED LISTS:-
VIEW ON BROWSER:-
26
HYPERLINKSHyperlink is one of the most powerful features of HTML. Usually a website consists of a number of webpage and a hyperlink provides a way to establish link between these webpage so that users can easily navigate from one page of the website to another. A user can jump from source location to the destination location either within the same webpage or somewhere else on the WWW. You can create two types of links: Internal links and External links. The internal links are links to web pages that are part of your website and the external links are the links to web pages that are not the part of your website.
One can create three kinds of links in your website
1. Links to different web pages on the current website.2. Links to different parts within the current webpage.3. Links to web pages on different websites.
ANCHOR TAG(<a>)The anchor tag<a> is used to create a hyperlink on a webpage. It is always specify in the body of the webpage’s code. It actually tells the browser where the link starts. The closing tag </a> indicates the end of the link. Although it supports many attributes but href attributes specified along with it. The href stands for hypertext reference that contains the URL of the destination page to which link will move to.
27
CODING:-
VIEW ON BROWSER:-
28
URLUniform resource locator is a web address of a webpage. A URL is generally of two forms:
Absolute URLs Relative URLs
TYPES OF LINKSYou can create two different types of links: internal and external links.
LINKS TO DIFFERENT WEBPAGE IN SAME WEBSITEWhen links are created to different web pages in the same website, Relative URL are used in the href attributes of <a>tag. If the source webpage and the destination webpage are in the same directory, then you just need to specify the filename for href attribute.
CODING:-
29
VIEW ON BROWSER:-
LINKS TO WEB PAGES OUTSIDE CURRENT WEBSITE
Links to web pages outsides the current website are known as absolute links. When you creating a link to different webpage in a different website, then absolute URL must be specified within the href attribute of<a> tag.
30
IMAGESImages can be used in a number of ways on a webpage such as for displaying photographs, drawing, logos, banners, products of the company, maps and charts etc. HTML provides an easier way to mix text and images on a webpage.
IMAGE BASICS PIXEL
PIXEL stands for Picture Element which is the basic building block of an image. A computer screen is broken up into thousands of tiny dots arranged in the form of rows and columns and pixel is one or more dots that are treated as a unit. Some of the commonly used screen resolutions are 640*480, 800*600, 1024*768, 1280*1024 etc.
IMAGE ATTRIBUTES(<IMG>) Images are used to make your webpage distinctive
(attractive). Images in webpage are use<img> tag. These images are also known as inline images
because they are inserted in the line of text.
The <img> tag is very similar to<a> tag as it points to a resource that is not actually on the webpage. This tag requires the SRC attribute to specify the image files location.
31
<IMG> ATTRIBUTESIn addition to the SRC attribute, the<image> tag contain many other optional attributes such as ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE etc.
ALT ATTRIBUTEThe alt (alternate text) attribute is used to give short description about image. It is always better to give some alternate text to an image so that visitor can get an idea about the image before it loaded.
ALIGN ATTRIBUTEAfter an image is inserted in your webpage, you can determine how image should be placed in relation to other contents of the webpage. The text of following image will appear to the right bottom edge of the image (by default).
32
CODING:-
VIEW ON BROWSER:-
33
TABLESTable is made up of rows and columns in HTML. Every row and column of the table is divided into cells that holds the table’s data.
ADVANTAGES OF TABLE:1.You can change the appearance of your
webpage is desired from by using tables without borders.
2.Tables provide a stable and consistent form of structuring a webpage.
3.Tables helps in loading the images faster (using concept of slicing).
DISADVANTAGES OF TABLES:1.Most of old browser don’t support the tables.2.As browser will not show the data until the
entire table is loaded, so its recommendation divide a large table into multiple tables.
34
Table Header<TH>Each header cell starts with <Th> tag and end with </TH>.this tag should always be placed inside <TR> element.
TABLE CAPTION (<CAPTION>)Quite often while working with tables you would like to give it to a heading.
TABLE ROW (<TR>) ATTRIBUTES1.ALIGN: LEFT, RIGHT, AND CENTER,
JUSTIFY.
<TD>ATTRIBUTES1.ALIGN: Left, Right, and Centre, Justify.2.BGCOLOR: Background colour. 3.VALIGN: Vertical alignment.4.Width: width of cell.
35
COLSPAN ATTRIBUTEThe COLSPAN attribute is a cell attribute that allows a single cell to span more than one column.
ROWSPAN ATTRIBUTEThe ROWSPAN attribute is a cell attribute that allows a single cell to span more than one row.
CODING:
<HTML>
<HEAD>
<TITLE>TABLES</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="6" BGCOLOR="RED"
ALIGN="CENTER">
<TR>
36
<TD COLSPAN="6" ALIGN="CENTER">INFORMATION
ABOUT BOOKS</TD>
</TR>
<TR>
<TD ROWSPAN="2">TITLE OF BOOKS</TD>
<TD>POPULAR</TD>
<TD COLSPAN="4" ALIGN="CENTER">EDITION</TD>
</TR>
<TR>
<TD>AUTHORS</TD>
<TD>EDITION 1</TD>
<TD>EDITION 2</TD>
<TD>EDITION 3</TD>
<TD>EDITION 4</TD>
</TR>
<TR>
<TD ROWSPAN="2">NUMERICAL METHODS</TD>
37
<TD>R.K.SHARMA</TD>
<TD>1997</TD>
<TD>1999</TD>
<TD>2001</TD>
<TD>2003</TD>
</TR>
<TR>
<TD>S.K.JOSHI</TD>
<TD>1991</TD>
<TD>1900</TD>
<TD>2002</TD>
<TD>2004</TD>
</TR>
<TR>
<TD ROWSPAN="2">MANAGEMENT</TD>
<TD>SHASHI K.GUPTA</TD>
<TD>1988</TD>
<TD>1989</TD>
<TD>2003</TD>
<TD>2005</TD>38
</TR>
<TD>R.K.SHARMA</TD>
<TD>1999</TD>
<TD>1995</TD>
<TD>2006</TD>
<TD>2008</TD>
</TR>
</TABLE>
</BODY>
</HTML>
VIEW ON BROWSER:-
39
CREATING ADVANCED TABLE
<COLGROUP>ELEMENTTable is constructed as a sequence of rows. But if you want to change the properties of a row all the cells of that row are affected. But if want to change the properties of a particular column then you have to set attribute with every<TD> element so we use colgroup element.
CODING:-<HTML>
<HEAD>
<TITLE>COL EXAMPLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="6" ALIGN="CENTER">
<COLGROUP SPAN="4" ALIGN="RIGHT">
<COL SPAN="1" VALIGN="TOP" WIDTH="20%">
<COL SPAN="2" VALIGN="BOTTOM" WIDTH="30 %">
<TR>
40
<TD>ROLL NO</TD>
<TD>NAME</TD>
<TD>PICTURE</TD>
<TD>MARKS</TD>
</TR>
<TR>
<TD>2201</TD>
<TD>POONAM</TD>
<TD><IMG SRC = "PHOTO-0041.JPG"></TD>
<TD>1183</TD>
<TR>
</TR>
<TD>2206</TD>
<TD>LOVELY</TD>
<TD><IMG SRC= "RAJ.JPG"></TD>
<TD>1900</TD>
</TR>
</TABLE>
</BODY>
</HTML>41
VIEW ON BROWSER:-
42
FRAMESFrames are the most powerful concept of html. Frames give you that ability tom display multiple webpages in a single browser window.one of main advantage of frames is that you can load or reload one of several parts without loading the entire contents of browser window.
A set of frames in the entire browser window is known as frameset. A frameset does not contain any contents. It tells us that the browser how to divide the browser window into frames and about the webpages that each has to load.
<FRAME>ELEMENTIt is used to specify the contents of the different frames in a webpage. The frame element is always an empty element that is not require closing element. Frame elements must carry the src attribute to indicate which page should be loaded in that frame.
43
FRAME ATTRIBUTES: FRAMEBORDER: Border on and off individual
frame. MARGINWIDTH: Amount of space that frames
contents.
MARGINHEIGHT: Space on top and bottom of frame.
NAME: Give name to frame.
NORSIZE: Resizing the frame.
SCROOLING: Appearance of scrollbar in frame.
ADDITONAL<FRAMESET> ATTRIBUTES: BORDER: Thickness of border of frame.
FRAMESPACING: Amount of space between frames in pixels.
44
CODING FOR FRAMES:-
VIEW ON BROWSER:-
45
NESTED FRAMESETNested frameset means that frameset contain other framesets in addition to the frames. This can be done by placing the complete<FRAMESET>element at a place where nested frameset should appear.
CODING:-
46
VIEW ON BROWSER:-
47
FORMS AND MULTIMEDIA
A HTML form is simply a container that consists of other form of elements such as a text, check box, radio, list boxes and is not a visual element itself. It is created using <FORM> element. You can place this element anywhere in the HTML document.
Every <FORM>element contains at least theACTION and METHOD element.
ACTION: The action attribute specifies the address of recipient webpage that will receive the form’s data submitted by the visitor of the website. This address may either be a form processing script such as login.asp etc.
METHOD: The METHOD attribute tells how to send the collected data from the visitor to the server. There are two types to do this.
48
a)GET Method: the GET method takes the data from the forms’ fields, encodes it and attaches the form information to the end of the URL form.
b) Post Method: the POST method takes the data from the forms’ fields, send it through the HTTP header without being seen in URL form.
ADDING FORM CONTROLS
TEXT INPUT CONTROLS- Single line input control, password input control and multiple line input control.
Checkbox Radio Button Drop down menus File Upload Submit and Reset button Hidden Controls
There are three types of text input controls that are generally used with the form.
SINGLE LINE TEXT INPUT CONTROL49
PASSWORD INPUT CONTROL MULTILINE TEXT INPUT CONTROL
SINGLE LINE TEXT INPUT CONTROLIt is simplest type of form control available. It is used when you need to enter just a single line text such as the name of product, search information, city name etc.
PASSWORD INPUT CONTROLThe password input control is similar to single line text input control with a difference that the text characters are hidden.
MULTILINE TEXT INPUT CONTROLThe controls discussed previously allow user to enter only single line of text. However, you may sometimes need.
CODING:-
50
VIEW ON BROWSER:-
51
CASCADING STYLE SHEETS52
Cascading style sheet is a presentation definition language that is used to control the layout of HTML document by attaching files. With CSS, you can apply styles sheets such as color of text, set margins, style of fonts, background image used, spacing between paragraphs and words and much more.
INCLUDING CSS IN HTML DOCUMENT:
There are four types used to add CSS within HTML document. These methods differ on the basis pf their placement, importance given to them by browser and how much of the document they effect. They are:
Inline style sheets Embedded style sheets External style sheets Imported style sheet
53
INLINE STYLE SHEETSInline style sheets are those which are included within a single specified occurrence of an element in HTML document. In other words, they are placed inline within the element. Its effect is limited to the element in which it is specified.
CODING:-
54
VIEW ON BROWSER:-
Embedded style sheet:-
The inline style sheet is very useful if you want to apply same style to all the occurrences of a specific element within the entire webpage then you will have to specific style for all the occurrences of the element which is a very time consuming fact.so in order to solve this problem.
55
CODING:-
VIEW ON BROWSER:-
56
External style sheets:-An external style sheet is a template or file that consists only of css rules and comments. But doesn’t contain any markups. An external style sheet must have an extension.css. These files are stored separately from the webpages of the website to which are applied. In order to apply these rules, you need to just link this file to each webpage on websites to which rules need to be applied.
CODING:-
57
VIEW ON BROWSER:-
Imported style sheet:-
In addition to linking an external style sheet using the <LINK>element, you can also link it using @IMPORT rule allows users to import style rules from other style sheets. The @import must precede all the rules sets in a style sheet.
58
CODING:-
VIEW ON BROWSER:-
59