You are on page 1of 72

lOMoARcPSD|21277992

Shreya goyal E- Commerce LAB(ECL) Practical FILE

E commerce (Guru Gobind Singh Indraprastha University)

Studocu is not sponsored or endorsed by any college or university


Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)
lOMoARcPSD|21277992

E- COMMERCE LAB
PRACTICAL FILE

TECNIA INSTITUE OF ADVANCED STUDIES

NAME-NAMAN VIJ
PROGRAM-BBA
SEMSTER-2ND
SHIFT-2ND
DIVISION –B
ENROLLMENT NO- 07821301720
SUBMITTED TO – MS. BHARTI AGGARWAL

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

INDEX
S PRACTICALS PAGE NO. SIGNATURE
NO.

1. WRITE A HTML PROGRAM THAT SHOW ALL THE BASIC 1-2


ELEMENTS OF HTML.
2. WRITE A HTML PROGRAM TO INSERT A BACKGROUND 3-4
IMAGE.
3. WRITE A HTML PROGRAM TO EXPLAIN THE CONCEPT 5-6
OF ATTRIBUTE AND PRE TAG.
4. WRITE A HTML PROGRAM TO ILLUSTRATE COMMENT 7-8
H1….H6.
5. WRITE A HTML PROGRAM TO USE DIFFERENT FONT 9-10
ATTRIBUTES.
6. WRITE A PROGRAM AND USE ALL THE TEXT 11-12
FORMATTING TAGS.
7. WRITE A HTML PROGRAM AND USE <IMG> TAG AND 13-14
SET ITS BORDER AND ALIGN IT.
8. WRITE A HTML PROGRAM TO USE THE ANCHOR TAG. 15-16
9. PROGRAM TO CREATE AN ORDERED LIST. 17-18
10. PROGRAM TO CREATE AN UNORDERED LIST. 19-20
11. WRITE A PROGRAM TO USING ALL THE FONT TAG. 21-22
12. PROGRAM TO CREATE A SIMPLE FORM. 23-24
13. PROGRAM TO CREATE A HYPERLINK. 25-26
14. PROGRAM TO INSERT IMAGE TO WEBPAGE. 27-28
15. PROGRAM TO INSERT SCROLLING TEXT USING 29-30
MARQUEE TAG.
16. PROGRAM TO DIVIDE A PAGE INTO FRAMES. 31-32
17. PROGRAM TO CREATE A SIMPLE LAYOUT OF 33-34
WEBPAGE.
18. CREATE A WEB PAGE THAT COVERS YOUR CV USING 35-37
VARIOUS NESTED LISTING HTML TAGS.
19. CREATE A FACEBOOK WEBPAGE USING THE ANCHOR 38-41

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

TAG.
20. CREATE GOOGLE SEARCH PAGE USING HTML TAGS. 42-43
21. DISPLAY FIVE DIFFERENT IMAGES, SKIP TWO LINES 44-45
BETWEEN EACH IMAGE. EACH IMAGE SHOULD HAVE A
TITLE.
22. CREATE EMPLOYEES REGISTRATION WEBPAGE USING 46-47
HTML FORM OBJECTS.
23. DISPLAY EFFECTS DUE TO IMAGE QUALITY DUE TO 48-49
COMPRESSION: ENLARGE.
24. DISPLAY EFFECTS DUE TO IMAGE QUALITY DUE TO 50-51
COMPRESSION: DECREASE.
25. CREATE TABLES WITH BOEDERS. 52-54
26. WRITE A PROGRAM TO CREATE A TIME TABLE USING 55-60
ALL THE TABLE TAGS WITH THIS DATA.
27. WRITE A PROGRAM TO CREATE A FRAME. 61-63
28. WRITE A PROGRAM TO CREATE NAVIGATIONAL 64-67
FRAME.

 IMAGE OF TIME TABLE FOR PRACTICAL 26:-

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

 IMAGE OF FRAME FOR PRACTICAL 27:-

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-1
AIM :- WRITE A HTML PROGRAM THAT SHOW ALL THE BASIC ELEMENTS OF HTML.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>BASIC ELEMENTS OF HTML</TITLE>
<H1>
MY FIRST WEB PAGE
</H1>
<BODY>
<H2>
HEADINGS ARE GREAT FUN
</H2>
<P>
THIS IS MY FIRST PARAGRAPH IN MY NEW WEBPAGE. THIS IS GOING TO BE GREAT. I AM SO
EXCITED.I CAN HARDLY CONTAIN MYSELF. DONT YOU JUST LOVE PARGRAPH I FIND IT VERY
USEFUL.
</P>
<H3>
WEB PAGES ARE EXCITING TOO
</H3>
<P>
YES THAT'S RIGHT WEB PAGES CAN BE A LOT OF FUN.LEARNING HOW TO CREATE WEBPAGES
IS EASY AND ENTERTAINING. WE FIND IT VERY USEFUL.
</P>
</BODY>

Page | 1

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.
OUTPUT :-

Page | 2

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-2
AIM :- WRITE A HTML PROGRAM TO INSERT A BACKGROUND IMAGE.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>BACKGROUND IMAGE</TITLE>
<BODY STYLE= "BACKGROUND-IMAGE: URL('https://www.sciencenewsforstudents.org/wp-
content/uploads/2020/04/1030_fogbow_explainer-1028x579.png') ;background-repeat:no
repeat;background-size:cover;">
<H1 STYLE="TEXT-ALIGN:CENTER;"> COLORS IN RAINBOW </H1>
<CENTER>
RED COLOR<BR>
ORANGE COLOR<BR>
YELLOW COLOR<BR>
GREEN COLOR<BR>
BLUE COLOR<BR>
INDIGO COLOR<BR>
VOILET COLOR<BR>
</CENTER>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 3

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 4

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-3
AIM :- WRITE A HTML PROGRAM TO ILLUSTRATE COMMENT H1….H6.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>ILLUSTRATE COMMENT H1….H6</TITLE>
<BODY BGCOLOR="PINK"
<H1 STYLE= TEXT-ALIGN:LEFT;> PEOM OF THE DAY </H1>
<PRE>
<B> MEMORAIL DAY </B>
BY <U> MICHAEL ANAIA </U> <BR>
CONTENT WHICH YOU WISH TO WRITE
</PRE>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 5

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 6

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-4
AIM :- WRITE A HTML PROGRAM TO EXPLAIN THE CONCEPT OF ATTRIBUTE AND PRE TAG.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<HEAD>
<TITLE>HEADINGS AND COMMENTS</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1 ALIGN="CENTER">HEADINGS AND COMMENTS</H1>
<H2>HEADING2</H2>
<H3>HEADING3</H3>
<H4>HEADING4</H4>
<H5>HEADING5</H5>
<H6>HEADING6</H6>
<P>ABOVE ARE THE HEADINGS PRESENT IN HTML</P>
</CENTER>
</BODY>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 7

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 8

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-5
AIM :- WRITE A HTML PROGRAM TO USE DIFFERENT FONT ATTRIBUTES.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>DIFFERENT FONT ATTRIBUTES</TITLE>
<BODY BGCOLOR ="PURPLE">
<CENTER>
<P>
<FONT SIZE="6" FONT COLOR="ORANGE"> H </FONT>
<FONT SIZE="5" FONT COLOR="PINK"> E </FONT>
<FONT SIZE="4" FONT COLOR="BROWN"> L </FONT>
<FONT SIZE="3" FONT COLOR="YELLOW" > L </FONT>
<FONT SIZE="2" FONT COLOR="RED" > O </FONT>
<FONT SIZE="1" FONT COLOR="BLACK" > O </FONT>
<BR>
<FONT SIZE="1" COLOR="WHITE" FACE="PACIFICO"> FONT SIZE=1 </FONT> <BR>
<FONT SIZE="2" COLOR ="WHITE" FACE="ARIAL BLACK"> FONT SIZE=2 </FONT> <BR>
<FONT SIZE="3" COLOR ="WHITE" FACE="COMIC SANS MS"> FONT SIZE=3 </FONT>
<BR>
<FONT SIZE="4" COLOR="WHITE" FACE="COMIC SANS MS"> FONT SIZE=6 </FONT> <BR>
<FONT SIZE="5" COLOR="WHITE FACE="FRENCH SCRIPT MT"> FONT SIZE=5 </FONT
<BR>
<FONT SIZE="6" COLOR="WHITE" FACE="FRENCH SCRIPT MT"> FONT SIZE=6 </FONT>
<BR>

Page | 9

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

</P>
</CENTER>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.
OUTPUT :-

Page | 10

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-6
AIM :- WRITE A PROGRAM AND USE ALL THE TEXT FORMATTING TAGS.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<HEAD>
<TITLE TEXT FORMATTING TAGS </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER"> <FONT SIZE="7"> TEXT FORMATTING </FONT> </H1>
<P>
<FONT SIZE="5">
<H3><B> THIS IS BOLD TEXT </B> </H3>
<H3><I> THIS IS ITALIC TEXT </I> </H3>
<H3><U> THIS UNDERLINED TEXT </U> </H3>
<H3><EM> THIS IS EMPHASIZED TEXT </EM> </H3>
<H3><SMALL> THIS IS SMALL TEXT </SMALL> </H3>
<H3><STRONG> THIS IS STRONG TXT </STRONG> </H3>
<H3>THIS IS <SUB> SUBSCRIPTED</SUB> AND THIS IS
<SUP> SUPERSCRIPTION</SUP> </H3>
<H3><INS> THIS IS INSERTED TEXT </INS> </H3>
<H3><MARK> THIS IS MARK TEXT </MARK> </H3>
</P>
</FONT>
</BODY>

Page | 11

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.
OUTPUT :-

Page | 12

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-7
AIM :- WRITE A HTML PROGRAM AND USE <IMG> TAG AND SET ITS BORDER AND ALIGN IT.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>BORDER ALIGN</TITLE>
<BODY>
<h1>NATURE</h1>
<img src="https://image.shutterstock.com/image-photo/river-creek-mountain-valley-
water-260nw-1687137475.jpg" alt="image tag" width="500" height="600">
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

OUTPUT :-
Page | 13

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-8
Page | 14

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

AIM :- WRITE A HTML PROGRAM TO USE THE ANCHOR TAG.


STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<HEAD>
<TITLE> ANCHOR TAG </TITLE>
</HEAD>
<BODY>
<H1> ANCHOR TAG </H1>
<P>
CLICK TO OPEN <A HREF="https://tiaspg.tecnia.in/">TIAS WEBSITE
</A>
</P>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

OUTPUT :-

Page | 15

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

Page | 16

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-9
AIM :- PROGRAM TO CREATE AN ORDERED LIST.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<BODY BGCOLOR="ORANGE">
<H2>AN UNORDERED HTML LIST</H2>
<OL TYPE="i">
<LI>MANGO</LI>
<LI>WATERMELON</LI>
</OL>
<OL TYPE="I">
<LI>APPLE</LI>
<LI>MANGO</LI>
</OL>
<OL TYPE="a">
<LI>KIWI</LI>
<LI>MELON</LI>
</OL>
<OL TYPE="A">
<LI>BANANA</LI>
<LI>GRAPES</LI>
</OL>
</BODY>
</HTML>

Page | 17

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.
OUTPUT :-

Page | 18

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-10
AIM :- WRITE A PROGRAM AND USE ALL THE TEXT FORMATTING TAGS.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<BODY>
<BODY BGCOLOR="YELLOW"
<H2>AN UNORDERED HTML LIST</H2>
<UI>
<LI>MANGO</LI>
<LI>WATERMELON</LI>
<LI>APPLE</LI>
<LI>MANGO</LI>
<LI>KIWI</LI>
<LI>MELON</LI>
<LI>BANANA</LI>
<LI>GRAPES</LI>
</UI>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 19

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 20

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-11
AIM :- WRITE A PROGRAM TO USING ALL THE FONT TAG.

STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<HEAD>
<TITLE> FONT TAG </TITLE>
</HEAD>
<BODY>
<H2> EXAMPLE OF FONT TAG </H2>
<P> HOW ARE YOU DOING? </P>
<P>
<FONT COLOR="BLUE"> THIS IS MANGO</FONT>
</P>
<P>
<FONT SIZE="5" COLOR="GREEN"> APPLE IS A FAMOUS COMPANY </FONT>
</P>
<P>
<FONT COLOR="RED" FACE="CURSIVE"> THIS TEXT IS CURSIVE</FONT>
</P>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 21

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 22

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-12
AIM :- PROGRAM TO CREATE A SIMPLE FORM.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<BODY BGCOLOR="LIGHTGREEN"
<HEAD>
<CENTER>
<TITLE>SIMPLE FORM</TITLE>
</HEAD>
<BODY>
<H3>SIMPLE FORM</H3>
<FORM ACTION="" METHOD="GET">
NAME <INPUT TYPE="TEXT" NAME="UNAME"><BR>
SEX <INPUT TYPE="RADIO" NAME="M"> M <INPUT TYPE="RADIO" NAME="F"> F<BR>
DATE OF BIRTH <INPUT TYPE="TEXT" NAME="DOB"><BR>
CONTACT NO. <INPUT TYPE="TEXT" NAME="PHNO"><BR>
<INPUT TYPE="SUBMIT" VALUE="REGISTER">
</FORM>
</CENTER>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 23

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 24

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-13
AIM :- PROGRAM TO CREATE A HYPERLINK.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<HEAD>
<TITLE>HYPERLINK</TITLE>
</HEAD>
<BODY>
<A HREF="C:\USERS\M\ONEDRIVE\DESKTOP/BEACH.JPG">GO TO NEXT PAGE </A>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 25

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 26

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-14
AIM :- PROGRAM TO INSERT IMAGE TO WEBPAGE.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<HEAD>
<TITLE> INSERT IMAGE TO WEBPAGE </TITLE>
</HEAD>
<BODY>
<IMG SRC="C:\USERS\M\ONEDRIVE\DESKTOP/FISH.JPG">
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 27

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 28

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-15
AIM :- PROGRAM TO INSERT SCROLLING TEXT USING MARQUEE TAG.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE> SCROLLING TEXT USING MARQUEE TAG</TITLE>
<BODY>
<FONT COLOR="BLACK" SIZE="6" FACE="ARIAL BLACK">
<MARQUEE
WIDTH="100%"HEIGHT="20%"DIRECTION="LEFT"HSPACE="20%"VSPACE="20%"BGCOLOR="
SKYBLUE">
WELCOME TO TECNIA INSTITUTE OF ADVANCED STUDIES
</MARQUEE>
</FONT>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 29

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 30

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-16
AIM :- PROGRAM TO DIVIDE A PAGE INTO FRAMES.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>DIVIDE A PAGE INTO FRAMES</TITLE>
<FRAMESET COLS="*,*,*">
<FRAMESET ROWS="*,*">
<FRAME SRC="">
<FRAME SRC="">
</FRAMESET>
<FRAME SRC="">
</FRAMESET>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 31

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 32

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-17
AIM :- PROGRAM TO CREATE A SIMPLE LAYOUT OF WEBPAGE.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<HEAD>
<TITLE> SIMPLE LAYOUT OF WEBPAGE </TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1"> <TR>
<TD COLSPAN="2" WIDTH="400" HEIGHT="50" ALIGN="CENTER">HEADER</TD>
</TR>
<TR>
<TD COLSPAN="2" WIDTH="400" HEIGHT="30" ALIGN="CENTER">MENU ITEMS</TD>
</TR>
<TR>
<TD WIDTH="50" HEIGHT="400">LEFT<BR />NAVIGATION</TD>
<TD WIDTH="150" HEIGHT="200">MAIN CONTENT AREA</TD>
</TR>
<TR>
<TD COLSPAN="2" WIDTH="400" HEIGHT="30" ALIGN="CENTER">FOOTER</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Page | 33

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.
OUTPUT :-

Page | 34

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-18
AIM :- CREATE A WEB PAGE THAT COVERS YOUR CV USING VARIOUS NESTED LISTING HTML
TAGS.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>CV USING VARIOUS NESTED LISTING HTML TAGS</TITLE>
<BODY>
<H1 STYLE="TEXT-ALIGN:CENTER;">CV</H1>
<H4>OBJECTIVE</H4>
<P>TO GET A SUITABLE POST IN YOUR OFFICE.
</p>
<H4>QUALIFICATION</H4>
<UL>
<LI>ACADMIC QUALIFICATION</LI>
<UL>
<LI>10TH</LI>
<LI>12TH</LI>
<LI>BBA</LI>
</UL>
</UL>
<UL>
<LI>PROFESSIONAL QUALIFICATION</LI>
<UL>
<LI>MBA</LI>

Page | 35

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<LI>MCA</LI>
</UL>
</UL>
<H4>EXPERIEBCE</H4>
<UL>
<LI>SALES MANAGER</LI>
</UL>
<H4>HOBBIES AND INTEREST</H4>
<UL>
<LI>DANCING,/LI>
<LI>SINGING></LI>
<LI>READING BOOKS</LI>
<LI>PLAYING BADMINTON</LI>
</UL>
<H4>OTHER ACTIVITIES</H4>
<UL>
<LI>TRAVELLING</LI>
<LI>VIDEO GAMING</LI>
<LI>YOGA</LI>
<LI>VOLUNTERRING</LI>
</UL>
<H4>PERSONAL INFORMATION</H4>
<UL>
<LI>NAME-NAMAN VIJ</LI>
<LI>FATHER'S NAME-SUMIT VIJ</LI>
<LI>ADDRESS-STREET NO.-4,PAHARGANJ, DEKHI, NEW DELHI,110055</LI>
<LI>MOBILE-9311036377</LI>

Page | 36

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

</UL>
</BODY>
</HTML>
OUTPUT :-

Page | 37

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-19
AIM :- CREATE A FACEBOOK WEBPAGE USING THE ANCHOR TAG.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
CODE FOR FACEBOOK LOGIN PAGE :-
<HTML>
<BODY BGCOLOR="WHITE">
<H1 STYLE="TEXT-ALIGN:CENTER;FONT-SIZE:60PX;COLOR:BLUE"> FACEBOOK </H1>
<CENTER>
<UL TYPE="NONE">
<LI>EMAIL OR PHONE</FONT><BR><INPUT TYPE="TEXT" NAME="EMAIL"></LI>
<LI>PASSWORD<BR><INPUT TYPE="PASSWORD" NAME="PASSWORD"><BR><A
HREF="">FORGOTTEN ACCOUNT?</A></LI>
<INPUT TYPE="SUBMIT" NAME="LOGIN" VALUE="LOG IN">
<A HREF="C:/Users/m/OneDrive/Desktop/PROGRAM19%20FACE%20BOOK%20SIGN%20UP
%20PAGE.HTML" TARGET="_BLANK">
<INPUT TYPE="SUBMIT" NAME="LOGIN" VALUE="SIGN UP">
</A>
</UL>
</CENTER>
</BODY>
</HTML>
CODE FOR FACEBOOK SIGN UP PAGE :-
<HTML>
<TITLE>FACEBOOK SIGN UP PAGE</TITLE>

Page | 38

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<HEAD>
</HEAD>
<BODY BGCOLOR="EDF0F5">
<H1>SIGN UP</H1>
<P>IT'S FREE AND ALWAYS WILL BE.</P>
<IMG SRC="https://thesocietypages.org/socimages/files/2009/04/capture12.jpg"
WIDTH=400HEIGHT=200 ALIGN="RIGHT">
<FORMS>
<INPUT ID="TXTUSERNAME" TYPE="TEXT" PLACEHOLDER="FIRST NAME" ALIGN="RIGHT">
<INPUT ID="LAST NAME" TYPE="TEXT" PLACEHOLDER="LAST NAME" ALIGN="RIGHT">
<BR>
<INPUT ID="MOBILE NUMBER OR EMAIL" TYPE="TEXT" PLACEHOLDER="MOBILE NUMBER OR
EMAIL"/>
<BR>
<INPUT ID="NEW PASSWORD" TYPE="PASSWORD" PLACEHOLDER="NEW PASSWORD"/>
<BR>
BIRTHDAY<BR>
<SELECT NAME="MONTH">
<OPTION VALUE="MONTH"> MONTH</OPTION>
<OPTION VALUE="JANUARY"> JANUARY</OPTION>
<OPTION VALUE="FEBRUARY" NOVEMBER</OPTION>
</SELECT>
<SELECT NAME="DAYS">
<OPTION VALUE="DAY">DAYS</OPTION>
<OPTION VALUE="1">1</OPTION>
</SELECT>
<SELECT NAME="YEAR">
<OPTION VALUE="YEAR">YEAR</OPTION>

Page | 39

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<OPTION VALUE="1970">1970</OPTION>
<OPTION VALUE="1975">2000</OPTION>
</SELECT>
<A HREF="">WHY DO I NEED TO PROVIDE YOU BIRTHDAY?
</A?
<BR>
<INPUT TYPE="RADIO"ID="GENDER"NAME="GENDER"VALUE="FEMALE">FEMALE
<INPUT TYPE="RADIO"ID="GENDER"NAME="GENDER"VALUE="MALE">MALE
<PRE>
BY CLECKING CREATE ACCOUNT, YOU AGREE TO OUR<A HREF=""> TEARMS</A> AND THAT
YOUHAVE READ OUR<A HREF=""> DATA POLICY </A>,INCLUDING OUR<A HREF="">COOKIE
USE</A>YOU MAY
RECEIVE SMS NOTIFICATION FROM FACEBOOK AND CAN OPT OUT AT ANYTIME.
</PRE>
<INPUT TYPE="SUBMIT"VALUE="CREATE ACCOUNT">
</INPUT>
<HR>
<A HREF="">CREATE A PAGE </A>FOR A CELEBRITY, BRAND OR BUSINESS.
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 40

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 41

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-20
AIM :- CREATE GOOGLE SEARCH PAGE USING HTML TAGS.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>GOOGLE SEARCH PAGE</TITLE>
<BODY>
<TITLE>GOOGLE SEARCH PAGE</TITLE>
<H1 STYLE="TEXT-ALIGN: CENTER ;">
<FONT SIZE="6" FONT COLOR="BLUE"> G </FONT>
<FONT SIZE="6" FONT COLOR="RED"> O </FONT>
<FONT SIZE="6" FONT COLOR="YELLOW"> O </FONT>
<FONT SIZE="6" FONT COLOR="BLUE" > G </FONT>
<FONT SIZE="6" FONT COLOR="GREEN" > L </FONT>
<FONT SIZE="6" FONT COLOR="RED" > E </FONT>
</H1>
<LABEL FOR="GSEARCH"></LABEL>
<CENTER><INPUT TYPE="SEARCH" ID="GSEARCH" NAME="GSEARCH"></CENTER>
<CENTER><INPUT TYPE="SUBMIT">
</CENTER>
</BODY>
</HTML>
AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “.HTML” EXTENSION, TO SEE THE
OUTPUT IN YOUR BROWSER.

Page | 42

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT:-

Page | 43

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-21
AIM :- DISPLAY FIVE DIFFERENT IMAGES, SKIP TWO LINES BETWEEN EACH IMAGE. EACH IMAGE
SHOULD HAVE A TITLE.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>FIVE DIFFERENT IMAGES, SKIP TWO LINES BETWEEN EACH IMAGE. EACH IMAGE HAVE A
TITLE</TITLE>
<BODY BGCOLOR="SKYBLUE">
<CENTER>
<H2>BEAR</H2>
<IMG SRC="https://cdn.britannica.com/41/156441-050-A4424AEC/Grizzly-bear-Jasper-National-
Park-Canada-Alberta.jpg" WIDTH=300HEIGHT=300>
<BR>
<BR>
<H2>SNOWMEN<H2>
<IMG SRC="https://www.farmersalmanac.com/wp-
content/uploads/2017/12/snowman_as184910297-944x630.jpeg" WIDTH=300HEIGHT=300>
<BR>
<BR>
<H2>SEAL</H2>
<IMG
SRC="https://lh3.googleusercontent.com/proxy/N1CBpnsQLkLFKuqnjXQWuZsuv9rfKtWUExXyzs
aVYeJYCprWmk-HXR-
q49NKPatHjO288mkYC2egufMKksCR68VYHf7cslBvSTiYJLc8vudQHT9JctHmCxmuvSXXgKOg20Por
hSHQvTDDbkxtOtItFnE_37vkbJ8sgRtVdPx20b6qvjMZyAOjUjhdl6Hw0JzBg"
WIDTH=300HEIGHT=300>
<BR>

Page | 44

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<BR>
<H2>RAINBOW</H2>
<IMG SRC="https://www.uctoday.com/wp-content/uploads/2018/10/RainbowCloud.jpg"
WIDTH=300HEIGHT=300>
<BR>
<BR>
<H2>PEACOCK</H2>
<IMG SRC="http://3.bp.blogspot.com/-dAxglpAGG-
0/VONzvEYF9SI/AAAAAAAAAiQ/uW7ns73yfOQ/s1600/peacock.jpg" WIDTH=300HEIGHT=300>
</CENTER>
</BODY>
</HTML>
OUTPUT :-

Page | 45

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-22
AIM :- CREATE EMPLOYEES REGISTRATION WEBPAGE USING HTML FORM OBJECTS.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<BODY BGCOLOR="LIGHTPINK">
<TITLE>EMPLOYEES REGISTRATION WEBPAGE</TITLE>
<CENTER>
<H1>EMPLOYEES REGISTRATION FORM </H1>
<FORM>
FIRST NAME:<INPUT TYPE="TEXT" NAME="FIRSTNAME" SIZE=15 MAXLENGTH=10>
<BR>
LAST NAME: <INPUT TYPE="TEXT" NAME="NAME"SIZE=15 MAXLENGTH=10>
<BR>
GENDER:
<BR>
<INPUT TYPE="CHECKBOX" NAME="MALE" ID="MALE">
<LABEL FOR="MALE"> MALE </LABEL> <BR>
<INPUT TYPE="CHECKBOX" NAME="FEMALE" ID="FEMALE">
<LABEL FOR="FEMALE"> FEMALE </LABEL> <BR>
<INPUT TYPE="CHECKBOX" NAME="OTHERS" ID="OTHERS">
<LABEL FOR="OTHERS"> OTHERS </LABEL> <BR>
EMAIL: <INPUT TYPE="TEXT" NAME="NAME"SIZE=15 MAXLENGTH=10>
<BR>
DATE OF BIRTH(DOB): <INPUT TYPE="TEXT" NAME="NAME"SIZE=15 MAXLENGTH=10>

Page | 46

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<BR>
CONTACT NO.: <INPUT TYPE="MOBILE" NAME="NAME"SIZE=15 MAXLENGTH=10>
<BR>
ADDRESS: <INPUT TYPE="TEXT" NAME="NAME"SIZE=50 MAXLENGTH=100>
<BR>
</INPUT>
</FORM>
<CENTER>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

OUTPUT :-

Page | 47

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-23
AIM :- DISPLAY EFFECTS DUE TO IMAGE QUALITY DUE TO COMPRESSION: ENLARGE.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>ENLARGE IMAGE</TITLE>
<BODY>
<CENTER>
<TITLE>ENLARGE IMAGE</TITLE>
<IMG SRC="https://natureconservancy-
h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Zugpsitze_mountain.jpg?
crop=0,176,3008,1654&wid=4000&hei=2200&scl=0.752" WIDTH=1000HEIGHT=1500>
</CENTER>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 48

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 49

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-24
AIM :- WRITE A PROGRAM AND USE ALL THE TEXT FORMATTING TAGS.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>DECREASE IMAGE</TITLE>
<CENTER>
<IMG
SRC="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/butterf
y_16x9_0.jpg?itok=AewZEkeM" WIDTH=200HEIGHT=400
</CENTER>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 50

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 51

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-25
AIM :- CREATE TABLES WITH BOEDERS.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>TABLES WITH BORDERS</TITLE>
<BODY>
<TABLE BORDER=30 BORDERCOLORLIGHT="ORANGE" BORDERCOLORDARK="RED">
<TR STYLE="BACKGROUND-COLOR:RED";>
<TH>FIRST NAME</TH>
<TH>DIVISION</TH>
<TH>CITY</TH>
</TR>
<TR>
<TD STYLE="BACKGROUND-COLOR:ORANGE";>NAMAN VIJ</TD>
<TD STYLE="BACKGROUND-COLOR:PINK";>B</TD>
<TD STYLE="BACKGROUND-COLOR:YELLOW";>DELHI</TD>
</TR>
<TR>
<TD STYLE="BACKGROUND-COLOR:ORANGE";>NIKHIL SANDAL</TD>
<TD STYLE="BACKGROUND-COLOR:PINK";>B</TD>
<TD STYLE="BACKGROUND-COLOR:YELLOW";>DELHI</TD>
</TR>
<TR>
<TD STYLE="BACKGROUND-COLOR:ORANGE";>ARIN SHARMA</TD>

Page | 52

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<TD STYLE="BACKGROUND-COLOR:PINK";>A</TD>
<TD STYLE="BACKGROUND-COLOR:YELLOW";>DELHI</TD>
</TR>
<TR>
<TD STYLE="BACKGROUND-COLOR:ORANGE";>TANYA</TD>
<TD STYLE="BACKGROUND-COLOR:PINK";>C</TD>
<TD STYLE="BACKGROUND-COLOR:YELLOW";>DELHI</TD>
</TR>
<TR>
<TD STYLE="BACKGROUND-COLOR:ORANGE";>ROHIT PANJRATH</TD>
<TD STYLE="BACKGROUND-COLOR:PINK";>C</TD>
<TD STYLE="BACKGROUND-COLOR:YELLOW";>DELHI</TD>
</TR>
</TABLE>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 53

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 54

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-26
AIM :- WRITE A PROGRAM TO CREATE A TIME TABLE USING ALL THE TABLE TAGS WITH THIS
DATA.
STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
<HTML>
<TITLE>TIME TABLE</TITLE>
<BODY>
<CENTER>
<U>THE HINDU COLONY CHELLAMMAL VIDYALAYA SR. SEC. SCHOOL<BR>
ONLINE CLASS TIME TABLE<BR>
CLASS VII<BR>
</U>
<TABLE BORDER=1 CELLPADDING=15>
<COL WIDTH= "150">
<COL WIDTH= "80">
<COL WIDTH= "80">
<COL WIDTH= "80">
<COL WIDTH= "80">
<COL WIDTH= "80">
<COL WIDTH= "80">
<COL WIDTH= "80">
<COL WIDTH= "80">

Page | 55

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<TR>
<TH> DAY </TH>
<TH COLSPAN=4> VII A,B & E (BOYS) </TH>
<TH COLSPAN=4> VII C,D & E (GIRLS) </TH>
</TR>
<TR>
<TD> </TD>
<TD> I </TD>
<TD> II </TD>
<TD> III </TD>
<TD> IV </TD>
<TD> I </TD>
<TD> II </TD>
<TD> III </TD>
<TD> IV </TD>
</TR>
<TR>
<TD> MONDAY </TD>
<TD> MAT </TD>
<TD> PT </TD>
<TD> SST </TD>
<TD> ENG </TD>
<TD> ENG </TD>
<TD> MAT </TD>
<TD> PT </TD>
<TD> SST </TD>
</TR>

Page | 56

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<TR>
<TD> TUESDAY </TD>
<TD> L2 </TD>
<TD> PT </TD>
<TD> SCI </TD>
<TD> </TD>
<TD> SCI </TD>
<TD> L2 </TD>
<TD> PT </TD>
<TD> </TD>
</TR>
<TR>
<TD> WEDNESDAY </TD>
<TD> MAT </TD>
<TD> PT </TD>
<TD> SST </TD>
<TD> ENG </TD>
<TD> ENG </TD>
<TD> MAT </TD>
<TD> PT </TD>
<TD> SST </TD>
</TR>
<TR>
<TD> THURSDAY </TD>
<TD> L2 </TD>
<TD> PT </TD>
<TD> SCI </TD>

Page | 57

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<TD> </TD>
<TD> SCI </TD>
<TD> L2 </TD>
<TD> PT </TD>
<TD> </TD>
</TR>
<TR>
<TD> FRIDAY </TD>
<TD> MAT </TD>
<TD> PT </TD>
<TD> SST </TD>
<TD> ENG </TD>
<TD> ENG </TD>
<TD> MAT </TD>
<TD> PT </TD>
<TD> SST </TD>
</TR>
<TR>
<TD> SATURDAY </TD>
<TD> L2 </TD>
<TD> PT </TD>
<TD> SCI </TD>
<TD> </TD>
<TD> SCI </TD>
<TD> L2 </TD>
<TD> PT </TD>
<TD> </TD>

Page | 58

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

</TR>
<TR>
<TD COLSPAN=9>
<PRE>
<B>
TIMINGS FOR PT PERIOD-
VII A & B --10.15AM TO 10.30AM
VII C & D --11.00AM TO 11.10AM
</B>
</PRE>
</TR>
</CENTER>
</BODY>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 59

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 60

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-27
AIM :- WRITE A PROGRAM TO CREATE A FRAME.

STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
CODING FOR FRAME 1 :-
<HTML>
<TITLE>PRACTICAL27 FRAME1</TITLE>
<BODY>
<H1>FRAME 1</H1>
Contents of Frame 1
</BODY>
</HTML>
CODING FOR FRAME 2 :-
<HTML>
<TITLE>PRACTICAL27 FRAME2</TITLE>
<BODY>
<H1>FRAME 2</H1>
Contents of Frame 2
</BODY>
</HTML>
CODING FOR FRAME 3 :-
<HTML>
<TITLE>PRACTICAL27 FRAME3</TITLE>
NAME :- NAMAN VIJ

ENROLMENT NO. :- 07821301720

Page | 61

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

<BODY>
<H1>FRAME 2</H1>
Contents of Frame 3
</BODY>
</HTML>
CODING FOR FRAME 4 :-
<HTML>
<TITLE>PRACTICAL27 FRAME4</TITLE>
<BODY>
<H1>FRAME 2</H1>
Contents of Frame 4
</BODY>
</HTML>
CODING FOR MEARGING OF FRAME 1, FRAME 2, FRAME3 AND FRAME 4 :-
<HTML>
<TITLE>CREATE A FRAME</TITLE>
<FRAMESET COLS="*,*,*">
<FRAMESET ROWS="*,*">
<FRAME SRC="C:/Users/m/OneDrive/Desktop/PRACTICAL27%20FRAME1.HTML">
<FRAME SRC="C:/Users/m/OneDrive/Desktop/PRACTICAL27%20FRAME2.HTML">
</FRAMESET>
<FRAME SRC="C:/Users/m/OneDrive/Desktop/PRACTICAL27%20FRAME3.HTML">
<FRAME SRC="C:/Users/m/OneDrive/Desktop/PRACTICAL27%20FRAME4.HTML">
</FRAMESET>
</HTML>
2. AFTER WRITING THE CODE SAVE THE DOCUMENT WITH “ .HTML” EXTENSION , TO SEE
THE OUTPUT IN YOUR BROWSER.

Page | 62

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

OUTPUT :-

Page | 63

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

PRACTICAL-28
AIM :- WRITE A PROGRAM TO CREATE NAVIGATIONAL FRAME.

STEPS :-
1. OPEN NOTEPAD IN YOUR COMPUTER AND WRITE THE CODING.
HTML SOURCE CODE :-
CODING FOR FRAME A:-
<HTML>
<TITLE>PROGRAM28 FRAME A</TITLE>
<BODY>
<CENTER>
<H1> FRAME A </H1>
<IMG SRC="
https://i.pinimg.com/originals/c0/d6/25/c0d625a7ef5bc800380b76186f4f1e06.jpg"
WIDTH=400 HEIGHT=200>
</CENTER>
</BODY>
</HTML>
CODING FOR FRAME B:-
<HTML>
<TITLE>PROGRAM28 FRAME B</TITLE>
<BODY>
<CENTER>
<H1> FRAME B </H1>
<IMG SRC=" https://images.unsplash.com/photo-1526319238109-524eecb9b913?
ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-
1.2.1&auto=format&fit=crop&w=1000&q=80" WIDTH=400 HEIGHT=200>
</CENTER>

Page | 64

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

</BODY>
</HTML>
CODING FOR FRAME C:-
<HTML>
<TITLE>PROGRAM28 FRAME C</TITLE>
<BODY>
<CENTER>
<H1> FRAME C </H1>
<IMG SRC=" https://images.theconversation.com/files/230552/original/file-20180803-41366-
8x4waf.JPG?ixlib=rb-1.1.0&q=45&auto=format&w=926&fit=clip" WIDTH=400 HEIGHT=200>
</CENTER>
</BODY>
</HTML>
CODING FOR MEARGING FRAME A, FRAME B AND FRAME C:-
<HTML>
<TITLE>PROGRAM28 FRAME A, FRAME B AND FRAME C MEARGING</TITLE>
<HEAD>
</HEAD>
<BODY BGCOLOR="CCFFFF">
<CENTER>
<A HREF=" C:/Users/m/OneDrive/Desktop/PROGRAM28%20FRAME%20A.HTML"
TARGET="MYCONTENT”> Frame A </A>
<BR>
<A HREF=" C:/Users/m/OneDrive/Desktop/PROGRAM28%20FRAME%20B.HTML"
TARGET="MYCONTENT"> Frame B </A>
<BR>
<A HREF=" C:/Users/m/OneDrive/Desktop/PROGRAM28%20FRAME%20C.HTML"
TARGET="MYCONTENT"> Frame C </A>

Page | 65

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

</CENTER>
</BODY>
</HTML>
CODING FOR NAVIGATIONAL FRAME:-
<HTML>
<TITLE>NAVIGATIONAL FRAME</TITLE>
<CENTER>
<FRAMESET COLS="15%,75%">
<FRAME SRC=" C:/Users/m/OneDrive/Desktop/PROGRAM28%20FRAME%20A,%20FRAME%20B
%20AND%20FRAME%20C%20MEARGING.HTML"/>
<FRAME SRC=" C:/Users/m/OneDrive/Desktop/PROGRAM28%20FRAME%20A.HTML"
NAME="MYCONTENT"/>
</CENTER>
</FRAMESET>
</HTML>
OUTPUT :-

Page | 66

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)


lOMoARcPSD|21277992

NAME :-NAMAN VIJ


ENROLMENT NO. :-07821301720

Page | 67

Downloaded by Kashvi Sachar (kashvisachar756@gmail.com)

You might also like