HTML NOTES
24/2/25
HTML First lecture
Blank Page :
<HTML>
<TITLE> </TITLE>
<HEAD> </HEAD>
<BODY>
</BODY>
</HTML>
Head is useless, makes no difference whether you input text in head or body
<HTML>
<TITLE> IT </TITLE>
<HEAD> INFORMATION TECHNOLOGY </HEAD>
<BODY>
INFORMATION TECHNOLOGY
</BODY>
</HTML>
Headings :
<HTML>
<TITLE> IT </TITLE>
<HEAD></HEAD>
<BODY>
<H1> INFORMATION TECHNOLOGY </H1>
<H2> INFORMATION TECHNOLOGY </H2>
<H3> INFORMATION TECHNOLOGY </H3>
<H4> INFORMATION TECHNOLOGY </H4>
<H5> INFORMATION TECHNOLOGY </H5>
<H6> INFORMATION TECHNOLOGY </H6>
INFORMATION TECHNOLOGY
</BODY>
</HTML>
Tags : (A=Tag, A=Property)
<B> Bold
<I> Italics
<U> Underline
<BR> Break (enter) Doesn’t require closing
<P> Paragraphs
<BIG> Makes text 1 font size bigger than the base text. Uses text without any tag as base
<SMALL> Opposite of BIG
<S> Strikethrough
<SUP> Superscript : X2
<SUB> Subscript : X2
<CENTER> Center Aligns text
<BODY BGCOLOR=”colour”> changes Background Colour
<FONT SIZE =number COLOR=”colour” FACE=”BROADWAY”> Font size, colour and face is edited
<HR>
<HR WIDTH=85% SIZE=5 COLOR=GREEN ALIGN="CENTER">
<MARQUEE>
<MARQUEE WIDTH = 90% BGCOLOR="PINK" SIZE=6 ALIGN=MIDDLE
SCROLLAMOUNT=10 (speed) SCROLLDELAY=90 (FPS basically) DIRECTION=LEFT
BEHAVIOR="ALTERNATE"(alternate/scroll)>
<OL> Organised List (Too many properties to add here, discussed in example below)
<UL> Unorganised List
<IMG SRC>
<IMG SRC="C:\Users\veera\OneDrive\Desktop\Daksh.jpg" WIDTH=700 HEIGHT=400
ALIGN=CENTER HSPACE=400 VSPACE=200 BORDER=3 TITLE=DAKSH(Title displays when
cursor hovers over image)>
<A HREF=(page file name)>
Bold, Italics, Underline and Break
<HTML>
<TITLE> IT </TITLE>
<HEAD> </HEAD>
<BODY>
INFORMATION TECHNOLOGY
<BR>
<B> INFORMATION TECHNOLOGY </B>
<BR>
<I> INFORMATION TECHNOLOGY </I>
<BR>
<U> INFORMATION TECHNOLOGY </U>
<BR><BR><BR>
<B><I><U> INFORMATION TECHNOLOGY </U></I></B>
</BODY>
</HTML>
Big and Small
<HTML>
<TITLE> IT </TITLE>
<HEAD> </HEAD>
<BODY>
<BIG> <BIG> INFORMATION TECHNOLOGY </BIG> </BIG>
<BIG> INFORMATION TECHNOLOGY </BIG>
INFORMATION TECHNOLOGY
<SMALL> INFORMATION TECHNOLOGY </SMALL>
<SMALL> <SMALL> INFORMATION TECHNOLOGY </SMALL></SMALL>
</BODY>
</HTML>
<BIG> & <SMALL> take the one without a tag as base
Big gives text without making it bold, unlike H1, H2, etc.
Strikethrough, Super and Sub
<HTML>
<TITLE> IT </TITLE>
<HEAD> </HEAD>
<BODY>
<H1> RS <S>5000</S> </H1>
<H1> NOW RS 3000 </H1>
<H1> 10<SUP>2</SUP> </H1>
<H1> H<SUB>2</SUB>O </H1>
</BODY>
</HTML>
Center
<HTML>
<TITLE> IT </TITLE>
<HEAD> </HEAD>
<BODY>
<CENTER><H1> SYBMS </H1></CENTER>
</BODY>
</HTML>
BG Color, Font Size, Text colour, Font Face
<HTML>
<TITLE> IT </TITLE>
<HEAD></HEAD>
<BODY BGCOLOR="BLUE">
<CENTER><H1><FONT SIZE =8 COLOR=”BLOOD” FACE=”BROADWAY”>SYBMS</FONT>
</H1></CENTER>
</BODY>
</HTML>
Horizontal Line
<HTML>
<TITLE> IT </TITLE>
<HEAD> </HEAD>
<BODY>
<CENTER><FONT SIZE=8 COLOR=”BLUE” FACE="BROADWAY">SYBMS</FONT></CENTER>
<HR WIDTH=85% SIZE=5 COLOR=GREEN ALIGN="CENTER">
</BODY>
</HTML>
Google India
<HTML>
<TITLE> Google </TITLE>
<BODY>
<H1><CENTER> <FONT SIZE=8 COLOR="BLUE">G</FONT><FONT SIZE=8
COLOR="RED">o</FONT><FONT SIZE=8 COLOR="ORANGE">o</FONT><FONT SIZE=8
COLOR="BLUE">g</FONT><FONT SIZE=8 COLOR="GREEN">l</FONT><FONT SIZE=8
COLOR="RED">e</FONT><SUB><FONT SIZE=4
COLOR="GREY">India</FONT></SUB></CENTER></H1>
</BODY>
</HTML>
Welcome to Google (Marquee)
<HTML>
<TITLE> IT </TITLE>
<HEAD> </HEAD>
<BODY>
<H1><CENTER> <FONT SIZE=8 COLOR="BLUE">G</FONT><FONT SIZE=8
COLOR="RED">o</FONT><FONT SIZE=8 COLOR="ORANGE">o</FONT><FONT SIZE=8
COLOR="BLUE">g</FONT><FONT SIZE=8 COLOR="GREEN">l</FONT><FONT SIZE=8
COLOR="RED">e</FONT><SUB><FONT SIZE=4
COLOR="GREY">India</FONT></SUB></CENTER></H1>
<HR WIDTH=85% SIZE=5 COLOR=GREEN ALIGN="CENTER">
<CENTER>
<MARQUEE WIDTH = 90% BGCOLOR="PINK" SIZE=6 ALIGN=MIDDLE SCROLLAMOUNT=10
SCROLLDELAY=90 DIRECTION=LEFT BEHAVIOR="ALTERNATE">
Welcome to Google.com
</MARQUEE>
</CENTER>
</BODY>
</HTML>
LIST
<HTML>
<TITLE> LIST </TITLE>
<HEAD> </HEAD>
<BODY>
<OL>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</OL>
<OL START=7>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</OL>
<OL TYPE=A>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</OL>
<OL TYPE=a>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</OL>
<OL TYPE=I>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</OL>
<OL TYPE=i>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</OL>
<UL TYPE=CIRCLE>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</UL>
<UL TYPE=DISC>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</UL>
<UL TYPE=SQUARE>
<LI> FYBMS </LI>
<LI> SYBMS </LI>
<LI> TYBMS </LI>
</UL>
</BODY>
</HTML>
Image Source
<HTML>
<TITLE> LIST </TITLE>
<HEAD> </HEAD>
<BODY>
<IMG SRC="C:\Users\veera\OneDrive\Desktop\Daksh.jpg" WIDTH=700 HEIGHT=400
ALIGN=CENTER HSPACE=400 VSPACE=200 BORDER=3 TITLE=DAKSH>
</BODY>
</HTML>
Anchor Tag
<HTML>
<TITLE> PAGE 1 </TITLE>
<BODY BG COLOUR="CYAN">
<CENTER> <H1> PAGE 1 </H1> </CENTER>
<A HREF="PG2.HTML"> PAGE 2 </A>
</BODY>
</HTML>
<HTML>
<TITLE> PAGE 2 </TITLE>
<BODY BG COLOUR="ORANGE">
<CENTER> <H1> PAGE 2 </H1> </CENTER>
<A HREF="PG1.HTML"> PAGE 1 </A>
</BODY>
</HTML>
List Tag Test
(The spacing isnt necessary, its just for better understanding)
<HTML>
<TITLE>Jai Hind College</TITLE>
<BODY>
<CENTER><FONT SIZE=5 COLOR="BLUE"><U><B> JAI HIND COLLEGE
</B></U></FONT></CENTER>
<CENTER><FONT SIZE=4 COLOR="RED"><B><U> COURSES
OFFERED</U></B></FONT></CENTER>
<OL TYPE="I">
<LI> Bachelor of Management Studies </LI>
<OL TYPE="A">
<LI>FYBMS</LI>
<OL TYPE="I">
<LI>Bussiness Statistics</LI>
<LI>Financial Accounts</LI>
</OL>
<LI>SYBMS</LI>
<OL TYPE="a">
<LI>Sem III</LI>
<OL START=4>
<LI>ENVIRONMENTAL MANAGEMENT</LI>
<LI>STRATEGIC MANAGEMENT</LI>
</OL>
<LI>Sem IV</LI>
</OL>
<LI>TYBMS</LI>
<OL>
<LI>Rural marketing</LI>
<LI>Logistics</LI>
</OL>
</OL>
<LI> Bacholor of Mass Media </LI>
<OL TYPE="I">
<LI>FYBAMMC</LI>
<OL TYPE="A">
<LI>Sem 1</LI>
<OL START=1>
<LI>COMP</LI>
</OL>
</OL>
<LI>SYBAMMC</LI>
<OL>
<LI>Sem III</LI>
<LI>Sem 1V</LI>
</OL>
<LI>TYBAMMC</LI>
</OL>
<LI>Bacholor of Banking and Insurence</LI>
</OL>
</BODY>
</HTML>
Bookmark Tag
<HIML>
<TITLE></TITLE>
<HEAD></HEAD>
<BODY>
<A HREF="HTML_Doc.html" NAME="TOP"> PAGE 1 </A>
<A HREF="#BOTTOM"> [GO TO BOTTOM) </A>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A HREF="HTML_Doc.html" NAME="BOTTOM"> PAGE 1 </A>
<A HREF="#TOP"> [GO TO TOP) </A>
</BODY>
</HTML>
Tables
Row/Col Span
<HIML>
<TITLE>TABLE</TITLE>
<HEAD></HEAD>
<BODY>
<TABLE WIDTH=70 ALIGN=CENTER CELLSPACING=5 CELLPADDING=2 BORDER=2>
<TR>
<TH ROWSPAN=2> PLAYERS </TH>
<TH COLSPAN=2> SERIES </TH>
<TH ROWSPAN=2> TOTAL </TH>
</TR>
<TR>
<TH> ONE </TH>
<TH> TEST </TH>
</TR>
<TR>
<TD> VIRAT KOHLI </TD>
<TD> 20 </TD>
<TD> 70 </TD>
<TD> 90 </TD>
</TR>
<TR>
<TD> VIRA KOHL </TD>
<TD> 30 </TD>
<TD> 60 </TD>
<TD> 90 </TD>
</TR>
<TR>
<TD> VIR KOH </TD>
<TD> 40 </TD>
<TD> 70 </TD>
<TD> 90 </TD>
</TR>
<TR>
<TD> VI KO </TD>
<TD> 30 </TD>
<TD> 60 </TD>
<TD> 90 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Puzzle Table
<HIML>
<TITLE>TABLE</TITLE>
<HEAD></HEAD>
<BODY>
<TABLE WIDTH=500 ALIGN=CENTER CELLSPACING=2 CELLPADDING=5 BORDER=1>
<TR>
<TH COLSPAN=3> A </TH>
<TH ROWSPAN=2> K </TH>
<TH ROWSPAN=1> O </TH>
</TR>
<TR>
<TH COLSPAN=1> B </TH>
<TH ROWSPAN=3> E </TH>
<TH ROWSPAN=1> H </TH>
<TH ROWSPAN=1> P </TH>
</TR>
<TR>
<TH COLSPAN=1> C </TH>
<TH ROWSPAN=3> I </TH>
<TH COLSPAN=2> L </TH>
</TR>
<TR>
<TH ROWSPAN=3> D </TH>
<TH ROWSPAN=> M </TH>
<TH ROWSPAN=2> Q </TH>
</TR>
<TR>
<TH COLSPAN=1> F </TH>
<TH ROWSPAN=1> N </TH>
</TR>
<TR>
<TH COLSPAN=1> G </TH>
<TH COLSPAN=3> J </TH>
</TR>
</TABLE>
</BODY>
</HTML>
To get exact answer set cell padding and spacing to 0
<HTML>
<TITLE>TABLE</TITLE>
<HEAD></HEAD>
<BODY>
<TABLE WIDTH=5 ALIGN=RIGHT CELLSPACING=0 CELLPADDING=0 BORDER=0>
<TR>
<A HREF="https://www.instagram.com/accounts/login/?hl=en">
<TH COLSPAN=1> <IMG SRC=C:\Users\veera\Downloads\InstaLogo.png WIDTH=20 HEIGHT=20
NAME=INSTA> </TH>
</A>
<A HREF="https://mail.google.com/mail/u/0/">
<TH ROWSPAN=1> <IMG SRC=C:\Users\veera\Downloads\EmailLogo.png WIDTH=20
HEIGHT=20> </TH>
</TR>
</A>
</TABLE>
</BODY>
</HTML>
VIDEO
<HTML>
<TITLE>VIDEO</TITLE>
<HEAD></HEAD>
<BODY>
<CENTER>
<VIDEO WIDTH="400" HEIGHT="400" AUTOPLAY="YES" LOOP="-1" CONTROLS>
<SOURCE SRC="C:\Users\veera\Videos\Stock Kar Prototype.mp4"
TYPE="VIDEO/MP4">
</VIDEO
</CENTER>
</BODY>
</HTML>
AUDIO
<AUDIO CONTROLS>
<SOURCE SRC="source" TYPE="AUDIO/MP3">
</AUDIO>
FRAME
<HTML>
<TITLE>VIDEO</TITLE>
<HEAD></HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="PG1.HTML">
<FRAME SRC="PG2.HTML">
</FRAMESET>
</HTML>
TARGET
<HTML>
<TITLE> PAGE 1 </TITLE>
<BODY BGCOLOR="RED">
<CENTER> <H1> PAGE 1 </H1> </CENTER>
<A TARGET="2" HREF="PG2.HTML"> PAGE 2 </A>
<BR>
<A TARGET="2" HREF="PG3.HTML"> PAGE 3 </A>
<BR>
<A TARGET="2" HREF="PG4.HTML"> PAGE 4 </A>
</BODY>
</HTML>
FRAMESET
<HTML>
<TITLE>FRAME</TITLE>
<HEAD></HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="PG1.HTML" NAME="1">
<FRAME SRC="PG2.HTML" NAME="2">
</FRAMESET>
</HTML>
FRAME Q1
Incorrect Way
as when number of frames increase it’ll go wrong
Correct way
<HTML>
<TITLE>VIDEO</TITLE>
<HEAD></HEAD>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="PG1.HTML">
<FRAME SRC="PG2.HTML">
</FRAMESET>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="PG3.HTML">
<FRAME SRC="PG4.HTML">
</FRAMESET>
</FRAMESET>
</HTML>
FRAME Q2
<HTML>
<TITLE>FRAME</TITLE>
<HEAD></HEAD>
<FRAMESET COLS="20%,80%">
<FRAMESET ROWS="100%">
<FRAME SRC="PG1.HTML">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="PG2.HTML">
<FRAME SRC="PG3.HTML">
<FRAME SRC="PG4.HTML">
</FRAMESET>
</FRAMESET>
</HTML>
FRAME Q3
<HTML>
<TITLE>FRAME</TITLE>
<HEAD></HEAD>
<FRAMESET COLS="20%,80%">
<FRAMESET ROWS="100%">
<FRAME SRC="PG1.HTML">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="PG2.HTML">
<FRAMESET COLS="50%,50%">
<FRAME SRC="PG3.HTML">
<FRAME SRC="PG4.HTML">
</FRAMESET>
<FRAME SRC="PG1.HTML">
</FRAMESET>
</FRAMESET>
</HTML>
FRAME Q4
<HTML>
<TITLE>FRAME</TITLE>
<HEAD></HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="PG1.HTML">
<FRAMESET ROWS="33%,67%">
<FRAME SRC="PG2.HTML">
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="PG3.HTML">
<FRAME SRC="PG4.HTML">
</FRAMESET>
<FRAME SRC="PG1.HTML">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
FRAME Q5
<HTML>
<TITLE>FRAME</TITLE>
<HEAD></HEAD>
<FRAMESET COLS="80%,20%">
<FRAMESET ROWS="80%,20%">
<FRAMESET COLS="20%,80%">
<FRAME SRC="PG1.HTML">
<FRAMESET ROWS="20%,80%">
<FRAME SRC="PG2.HTML">
<FRAME SRC="PG3.HTML">
</FRAMESET>
</FRAMESET>
<FRAME SRC="PG4.HTML">
</FRAMESET>
<FRAME SRC="PG1.HTML">
</FRAMESET>
</FRAMESET>
</HTML>
REGISTRATION FORM
<HTML>
<TITLE>REGISTRATION FORM</TITLE>
<HEAD></HEAD>
<BODY>
<CENTER><H1><U>REGISTRATION FORM</U></H1></CENTER>
<FORM NAME="FORM1" METHOD="POST" ACTION="PG1.HTML">
<B> FIRST NAME: </B>
<INPUT TYPE="TEXT" NAME="FN" SIZE=30 PLACEHOLDER="Enter Your First Name Here"
AUTOFOCUS> <FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> LAST NAME: </B>
<INPUT TYPE="TEXT" NAME="LN" SIZE=30 PLACEHOLDER="Enter Your Last Name
Here"> <FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> USER NAME: </B>
<INPUT TYPE="TEXT" NAME="UN" SIZE=30 PLACEHOLDER="Enter Your User Name
Here"> <FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> PASSWORD: </B>
<INPUT TYPE="PASSWORD" NAME="PSWD" SIZE=30 PLACEHOLDER="Enter Your Password"
MAXLENGTH=12> <FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> RECONFIRM: </B>
<INPUT TYPE="PASSWORD" NAME="PSWD1" SIZE=30 PLACEHOLDER="Reconfirm Your
Password Here" MAXLENGTH=12> <FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> EMAIL ID: </B>
&n
bsp;
<INPUT TYPE="EMAIL" NAME="ID" SIZE=30 PLACEHOLDER="E.g: myname@example.com"
MAXLENGTH=12> <FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> DATE OF BIRTH: </B>
<INPUT TYPE="DATE" NAME="DOB"> <FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> CONTACT NO. : </B>
<INPUT TYPE="TEL" NAME="CON" SIZE=2 PLACEHOLDER="+91"> <B>-</B>
<INPUT TYPE="TEL" NAME="PH" SIZE=18 PLACEHOLDER="Mobile/Telephone No."
PATTERN="[0-9]{10}">
<FONT COLOR="RED"><SUP>*</SUP></FONT>
<BR><BR>
<B> CODE NO. :</B>
<INPUT TYPE="NUMBER" NAME="CODE" SIZE=8 PLACEHOLDER="Select" MIN=101
MAX=200>
<BR><BR>
<B> ADDRESS: </B>
<TEXTAREA NAME="TA1" ROWS=6 COLS=30 PLACEHOLDER="Enter Your Address Here">
</TEXTAREA>
<BR><BR>
<B> GENDER: </B>
<INPUT TYPE="RADIO" NAME="RB1" VALUE="MALE" > MALE
<INPUT TYPE="RADIO" NAME="RB1" VALUE="FEMALE" > FEMALE
<BR><BR>
<B> GENDER: </B>
<INPUT TYPE="CHECKBOX" NAME="CB1" VALUE="MUSIC" > Music
<INPUT TYPE="CHECKBOX" NAME="CB2" VALUE="READING" > Reading
<BR><BR>
<B> STATE : </B>
<SELECT NAME="DB1" VALUE="STATE">
<OPTION NAME="OP1"> SELECT STATE </OPTION>
<OPTION NAME="OP2"> STATE 1 </OPTION>
<OPTION NAME="OP3"> STATE 2 </OPTION>
<OPTION NAME="OP4"> STATE 3 </OPTION>
</SELECT>
<BR><BR>
<B> FILE UPLOAD : </B>
<INPUT TYPE="FILE" ID="MYFILE" NAME="FILENAME">
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<INPUT TYPE=BUTTON NAME="B1" VALUE="Click Here">
<INPUT TYPE=RESET NAME="RESET" VALUE="Reset Form">
<INPUT TYPE=SUBMIT NAME="SUBMIT" VALUE="Submit Response">
</FORM>
</BODY>
</HTML>
