Scribd
Upload
47 views58 pages

Practical File: Web Technology

The document discusses various HTML elements used to format text and structure web pages. It describes inline elements like <i> and <b> that format parts of text and block elements like <h1> and <p> that structure content into paragraphs. The document provides examples of using these elements and displaying the resulting HTML code and output in a web browser.

Uploaded by

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

Practical File: Web Technology

The document discusses various HTML elements used to format text and structure web pages. It describes inline elements like <i> and <b> that format parts of text and block elements like <h1> and <p> that structure content into paragraphs. The document provides examples of using these elements and displaying the resulting HTML code and output in a web browser.

Uploaded by

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

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
INDEX
Sr.no. Particulars Page. No. Remarks
1. Introduction 4-5
2. Output 6
3. Elements 7
4. Formatting Text 8
5. Physical inline elements 9
6. Logical inline Elements 11
7. Output 12
8. Block Level Elements 13-15
9. Output 16
10. Font Element 17
11. Output & List 18
12. Unordered List 19
13. Output 20
14. Ordered List 21
15. Output 22
16. Definition List 23
17. Output & Nested List 24
18. Output 25
19. Hyperlink 26
20. Output 27
21. URL & Links 28
22. Output 29
23. Images 30-31
24. Output 32
25. Tables 33-37
26. Output 38
27. Creating Advance Table 39-40
28. Output 41
29. Frames 42-43

2
30 Output 44
31. Nested Frameset 45-46
32. Forms & Multimedia 47-50
33. Output 51
34. Cascading Style Sheet 52
35. Inline Style Sheet 53
36. Output & Embedded Style 54
Sheet
37. Output 55
38. External Style Sheet 56
39. Output & Imported Style 57
Sheet
40. Output 58

3
INTRODUCTION
HTML (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.
 HTML is not good enough of formatting Web Pages for display.

4
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 PURPOS EXAMPLE RESULT


E
<I>.....</I> Italicize <i>text</i> i
text
<B>....</B> Bold text <b>renu</b Renu
>
<U>....</U> Underline <u>ram</u> Ram
text
<SMALL>..</SMALL> Smaller <small>text Text
font </small>
<BIG>……..</BIG> Bigger font <big>red</b Red
ig>

9
CODING FOR PHYSICAL INLINE ELEMENTS:-

VIEW ON BROWSER:-

10
LOGICAL INLINE ELEMENTS
Logical 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 <em>ELEMENTS</em> ELEMENTS
document
<samp>...</samp> For sample <samp> USEFUL
USEFUL</samp>
<cite>...</cite> Display italics <cite>IN HTML</cite> IN HTML

CODING FOR LOGICAL ELEMENTS:-

11
VIEW ON BROWSER:-

12
BLOCK LEVEL ELEMENTS
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

13
PARAGRAPH TAG (<P>)
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:

14
ATTRIBUTES VALUES PURPOSE
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:-

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

16
<FONT> ELEMENT
The <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:-

17
VIEW ON BROWSER:-

LISTS
While 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:

18
o Bulleted lists(or unordered lists)
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 items
3. Finally, end the unordered list by ending tag</ul>

19
CODING FOR UNORDERED LIST:-

VIEW ON BROWSER:-

20
There are three types of attributes for using bullets:
Code <ul type=”disc”> <ul type =”circle”> <ul
type=”square”>
<ul>  Keyboard o Keyboard  Keyboard
<li>keyboard  Mouse o Mouse  Mouse
<li>mouse  Scanner o Scanner  Scanner
<li>scanner
</ul>

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>

21
CODING FOR ORDERED LIST:-

VIEW ON BROWSER:-

22
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:-

23
VIEW ON BROWSER:-

NESTED LISTS
Lists 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.

24
COODING FOR NESTED LISTS:-

VIEW ON BROWSER:-

25
HYPERLINKS
Hyperlink 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.

26
CODING:-

VIEW ON BROWSER:-

27
URL
Uniform resource locator is a web address of a webpage.
A URL is generally of two forms:
 Absolute URLs
 Relative URLs
TYPES OF LINKS
You can create two different types of links: internal and
external links.
LINKS TO DIFFERENT WEBPAGE IN SAME WEBSITE
When 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:-

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

29
IMAGES
Images 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.

30
<IMG> ATTRIBUTES
In addition to the SRC attribute, the<image> tag contain
many other optional attributes such as ALT, ALIGN,
WIDTH, HEIGHT, HSPACE, VSPACE etc.

ALT ATTRIBUTE
The 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 ATTRIBUTE
After 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).

31
CODING:-

VIEW ON BROWSER:-

32
TABLES
Table 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.

33
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>) ATTRIBUTES


1. ALIGN: LEFT, RIGHT, AND CENTER,
JUSTIFY.

<TD>ATTRIBUTES
1. ALIGN: Left, Right, and Centre, Justify.
2. BGCOLOR: Background colour.
3. VALIGN: Vertical alignment.
4. Width: width of cell.

34
COLSPAN ATTRIBUTE
The COLSPAN attribute is a cell attribute that allows
a single cell to span more than one column.

ROWSPAN ATTRIBUTE
The 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>

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

36
<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>
37
</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:-

38
CREATING ADVANCED TABLE

<COLGROUP>ELEMENT
Table 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>

39
<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>
40
VIEW ON BROWSER:-

41
FRAMES
Frames 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>ELEMENT
It 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.

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

43
CODING FOR FRAMES:-

VIEW ON BROWSER:-

44
NESTED FRAMESET
Nested 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:-

45
VIEW ON BROWSER:-

46
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 the


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

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

48
 SINGLE LINE TEXT INPUT CONTROL
 PASSWORD INPUT CONTROL
 MULTILINE TEXT INPUT CONTROL

 SINGLE LINE TEXT INPUT CONTROL


It 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 CONTROL


The password input control is similar to single line text
input control with a difference that the text characters
are hidden.

 MULTILINE TEXT INPUT CONTROL


The controls discussed previously allow user to enter
only single line of text. However, you may sometimes
need.

49
CODING:-

50
VIEW ON BROWSER:-

51
CASCADING STYLE SHEETS

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

52
INLINE STYLE SHEETS
Inline 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:-

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

54
CODING:-

VIEW ON BROWSER:-

55
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:-

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

57
CODING:-

VIEW ON BROWSER:-

58

You might also like