HTML02
HTML(HYPER TEXT MARKUP LANGUAGE) IS THE SCRIPTING LANGUAGE FOR CREATING WEB PAGES. IT IS DEVELOPED BY TIM BERNERS LEE.
BENEFITS OF HTML
1. HTML IS A SIMPLE BUT POWERFUL PROGRAMMING LANGUAGE
2. HTML DOCUMENTS ARE DEVICE INDEPENDENT(WORKS ON ANY PLATFORM)
LIMITATIONS OF HTML
1. HTML DOESNOT HAVE PROGRAMMING CAPABILITIES LIKE ANY OTHER LANGUAGE
2. IT IS DEPENDENT ON OTHER LANGUAGES LIKE JAVASCRIPT, PHP, PERL.
HTML TAGS ARE THE HIDDEN KEYWORDS WITHIN WEB PAGES THAT DEFINE HOW YOUR WEB BROWSER MUST FORMAT AND DISPLAY CONTENT.
THERE ARE TWO TYPES OF TAG
EMPTY AND PAIRED
EMPTY TAGS ARE THOSE WHICH SHOULD BE OPEN BUT NOT NECESSARY TO CLOSE
PAIRED TAGS ARE THOSE WHICH SHOULD BE OPENED AND MUST BE CLOSE
< > ------------ </ >
WHAT THE HTML TAGS MEAN
§ THE FIRST TAG IN AN HTML DOCUMENT IS ALWAYS <HTML>. THIS TELLS THE BROWSER READING THE PAGE THAT THE TEXT THAT FOLLOWS SHOULD BE READ AS HTML
§ AFTER THE <HTML> TAG YOU NEED TO GIVE YOUR PAGE A <HEAD> AND A <TITLE> TAG. THE TEXT YOU TYPE AFTER <TITLE> WILL BE DISPLAYED IN THE TITLE BAR OF THE BROWSER WINDOW AND IS THE ONLY REQUIRED ELEMENT IN THE <HEAD> SECTION. YOU THEN NEED TO CLOSE THESE TAGS WITH </TITLE> & </HEAD>
§ AFTER THE <HEAD> AND <TITLE> YOU PUT THE <BODY> TAG SO YOU CAN CREATE THE MAIN PART OF YOUR PAGE
§ AT THE END OF YOUR PAGE, YOU MUST CLOSE WITH THE </BODY> TAG, THEN THE CLOSING </HTML> TAG
BASIC SKELETON OF HTML:-
<HTML>
<HEAD>
<TITLE>
FIRST PAGE
</TITLE>
</HEAD>
<BODY>
I AM LEARNING HTML
</BODY>
</HTML>
YOUR FIRST 10 HTML TAGS:-FOR EXAMPLE
· <HTML> … </HTML> — THE ROOT ELEMENT. ALL WEB PAGES START WITH THE HTML ELEMENT. ...
· <HEAD> … </HEAD> — THE DOCUMENT HEAD. ...
· <TITLE> … </TITLE> — THE PAGE TITLE. ...
· <BODY> … </BODY> — THE PAGE'S CONTENT. ...
· <H1> … </H1> — A SECTION HEADING. ...
· <P> … </P> — A PARAGRAPH. ...
· <A HREF > … </A> — A LINK. ...
· <IMG> — AN IMAGE.
· <MARQUEE>……</MARQUEE> SCROLLING TEXT
· HTML ELEMENTS: BASIC HTML TAGS SHOULD BE ADDED TO EVERY WEB PAGES OF A WEB SITE.
· HTML TAGS:- <HTML>………….</HTML>
· HEAD TAGS:-<HEAD>…………</HEAD>
· TITLE TAGS:-<TITLE>………..</TITLE>
· BODY TAGS:-<BODY>………..</BODY>
SECTION TAGS (HEADINGS) :-<H1>…………..</H1> HEADING 1 TO HEADING 6
· BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>1
· FONT TAGS:-<FONT COLOR=”RED”>…. </FONT>
· <BODY BGCOLOR=”RED”>
· <BODY TEXT=”YELLOW”>
· <BODY TEXT=”YELLOW” BGCOLOR=”PINK”>
· LIST :- ORDER LIST (OL)
· <OL>
· <LI> COST </LI>
· <LI> COMPNANY </LI>
· <LI>ITEM </LI>
· </OL>
UN ORDER LIST (UL)
· <UL>
· <LI> COST </LI>
· <LI> COMPNANY </LI>
· <LI>ITEM </LI>
· </UL>
DEFINATION LIST:- (DL)
· DT (CREATE ITEMS)
· DD (DISPLAY DEFINATION
EXAMPLE:-
· <DL>
· <DT> COST <DD> HOW MUCH?
· </DL>
OTHER ELEMENTS:-
· <I>…..ITALIC…</I>
· <B>..BOLD..</B>
· <U>..UNDERLINE..</U>
· <SUP>…</SUP>
· EXMP:-
· 10<SUP>2 </SUP>
· <SUB>….</SUB>
· EXMPL:-
· H<SUB>2</SUB>O = H2O
·
<STRIKE>COMPUTER
</STRIKE>
· TABLES:-
· BORDER=ADD BORDER TO A TABLE
· TH=HEADINGS TO COLUMN
· TR= CREATE ROWS
· TD= TABLE DATAS/ CELL DATA
· CELL PADDING= SPACING BETWEEN EDGES OF CELL AND ITS DATA
· CELL SPACING= SPACING BETWEEN CELLS
· ALIGN= HORIZONTAL ALIGN OF EACH CELL
· VALIGN=VERTICAL ALIGN
· ROW SPAN=SPAN CELL OR HEADING ACROSS
· COL SPAN=SPAN CELL OR HEADING ACROSS COLUMNS
TERMS RELATED TO WEB
1. WEB BROWSER: - IT IS A SOFTWARE IN WHICH WE CAN SEARCH ANY INFORMATION, THE MAIN ROLE OF BROWSER IS THAT ITS INTERPRETATED THE MARKUP LANGUAGE. SOME BROWSERS ARE :
1. MICROSOFT INTERNET EXPLORER
2. NETSCAPE NAVIGATOR
3. MOSAIC 4. GOOGLE CHROME
2. WEB PORTAL :-WE GET INFORMATION ABOUT ALL OVER THE WORLD FOR EG REDIFF.MAIL, YAHOO.COM
3. PROTOCOLS :- SOME RULES AND REGULATION USED TO WORK ON INTERNET IS CALLED PROTOCOL
HTTP – HYPER TEXT TRANSFER PROTOCOL
FTP-FILE TRANSFER PROTOCOL
TCP-TRANSMISSION CONTROL PROTOCOL
IP-INTERNET PROTOCOL
4. URL-UNIFORM RESOURCE LOCATOR (IT IS AN ADDRESS OF WEB PAGE)
5. HOME PAGE- FIRST PAGE OF WEB SITE
6. WEBSITE IS OF TWO TYPES : STATIC AND DYNAMIC
IN 1980 A MARKUP LANGUAGE WAS DEVELOPED TO CREATE DOCUMENTS, ALL THE WORD PROCESSORS ALLOW TO GIVE FORMATS TO THE TEXT. NOW IF SUCH DOCUMENTS NEED TO BE PUT ON THE WEB THEN THE DOCUMENTS NEEDS TO BE CONVERTED INTO HTML FORMAT WHICH THE BROWSER CAN UNDERSTAND. HTML IS THE LANGUAGE FOR DESIGNING WEB PAGES.
WORLD WIDE WEB [WWW]
· WEB IS A NETWORK OF COMPUTERS ALL OVER THE WORLD.
· PROTOCOL MEANS RULES AND REGULATIONS
· HTTP STANDS FOR HYPER TEXT TRANSFER PROTOCOL
· TCP STANDS FOR TRAMISSION CONTROL PROTOCOL
· IP STANDS FOR INTERNET PROTOCOL
· FTP STANDS FOR FILE TRANSFER PROTOCOL
· ALL THE COMPUTERS USE A COMMUNICATION STANDS CALLED HTTP
· WEB INFORMATION IS STAND IN HTML DOCUMENTS CALLED WEB PAGES.
· WEB PAGES ARE FILES STORED ON COMPUTERS CALLED WEB SERVERS.
· WEB BROWSER IS TO READ HTML DOCUMENTS AND DISPLAYS THEM AS WEB PAGES.
· POPULAR WEB BROWSER ARE:- INTERNET EXPLORER, GOOGLE CHROME, MOZILLA FIREFOX, OPERA ETC
· HTML STANDS FOR HYPER TEXT MARK UP LANGUAGE
ADVANTAGES OF HTML- EVERY BROWSER SUPPORTS HTML LANGUAGE
DISADVANTAGES- IT CAN CREATE ONLY STATIC WEB PAGES OR PLAIN PAGES.
HTML TAGS:-
IT MEANS HTML COMMANDS. TAGS ARE STARTING TAG < ..>-------------- </.> ENDING TAGS.
· MAKING OF WEB PAGES:-NOTE PAD OR WORD PAD
· SAVE AS FILENAME .HTML
· TYPE :-ALL FILES
· DISPLAY IN A WEB BROWSER:-CHROME, INTERNET EXPLORER, MOZILLA
·
SAVING YOUR HTML
SAVE YOUR HTML FILE AS MYPAGE.HTML IN ANY HARD DISK DRIVE D:\, C:\, E:\ ETC.
RUN YOUR HTML PROGRAME:-
WITH THE HELP OF ANY BROWSERLIKE INTERNET EXPLORER, MOZILLA, OPERA, CHROME.
MAKING OF HTML PROGRAME IN NOTE PAD
NEW WEB PAGE CREATION:-
GRAPHICS AND TEXT :-PHOTO, LOGO, ANIMATE GRAPHICS
TEXT EDITOR:-NOTE PAD
SAVE ASTEST.HTML
=<A HREF=”A.HTML” TARGET=”BLANK”>HTML</A
BASIC SKELETON OF HTML:-
<HTML>
<HEAD>
<TITLE>WEB PAGES </TITLE>
</HEAD>
<BODY>
I AM LEARNING HTML8
</BODY>
</HTML>
LAB. ACTIVITY NO:-1.
<HTML>
<HEAD>
<TITLE> TEST PAGE</TITLE>
</HEAD>
<BODY>
<A HREF="….."> GOTO PAGES </A> [ THIS COMMAND IS USED FOR LINKING THE FILE]
<H1> HTML</HTML> </H1>
<H2> HTML</HTML></H2>
<H3> HTML</HTML></H3>
<H4> HTML</HTML></H4>
<H5> HTML</HTML></H5>
<H6> HTML</HTML></H6>
<P> AFTER LEARING HTML, I WILL MAKE MY WEB PAGE</P>
</BODY>
</HTML>
LAB. ACTIVITY NO:-2.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>JS BIN</TITLE>
</HEAD>
<BODY>
<A HREF=" D:\HTML">…..</A>
<P>HTML TUTORIAL</P>
<P>PYTHON TUTORIAL</P>
<P>PHP TUTORIAL</P>
</BODY>
</HTML>
LAB. ACTIVITY NO:-3.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEST PAGE</TITLE>
</HEAD>
<BODY>
<B> BOLD TEXT </B> <BR>
<STRONG>STRONG TEXT</STRONG><BR>
<U>UNDERLINE</U><BR>
<BIG>BIG TEXT</BIG><BR>
<SMALL>SMALL TEXT</SMALL><BR>
<EM>EMPHASIZED TEXT</EM><BR>
</BODY>
</HTML>
LAB. ACTIVITY NO:-4.
<HTML>
<HEAD>
<TITLE> TEST PAGE </TITLE>
</HEAD>
<IMG SRC=" "WIDTH="55" HEIGHT="40">
<BODY>
<H1> HTML</H1>
<P> AFTER LEARING HTML, I WILL MAKE MY WEB PAGE</P>
</BODY>
</HTML>
LAB. ACTIVITY NO:-5.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEST PAGE</TITLE>
</HEAD>
<BODY>
</BODY>
<H1 ALIGN=”LEFT”> HEADING 1<H1>
<H2 ALIGN=”RIGHT”> HEADING 2<H2>
<H3 ALIGN=”CENTRE”> HEADING3 <H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> BULLET</TITLE>
</HEAD>
<BODY>
<H4> NUMBERED LIST: </H4>
<OL>
<LI>ONE</LI>
<LI>TWO</LI>
<LI>THREE</LI>
</OL>
</BODY>
</HTML>
BULLET:-
<HTML>
<HEAD>
<TITLE> BULLET</TITLE>
</HEAD>
<BODY>
<UL TYPE=”CIRCLE”>
<LI>ONE</LI>
<LI>TWO</LI>
<LI>THREE</LI>
<UL TYPE=”DISC”>
<L1> ONE</LI>
<LI> TWO</LI>
<LI> THREE</LI>
<UL TYPE=”SQUARE”>
<L1>ONE</LI>
<LI>TWO</LI>
<LI>THREE</LI>
</UL>
</BODY>
</HTML>
HTML ELEMENTS: BASIC HTML TAGS SHOULD BE ADDED TO EVERY WEB PAGES OF A WEB SITE.
HTML TAGS:- <HTML>………….</HTML>
HEAD TAGS:-<HEAD>…………</HEAD>
TITLE TAGS:-<TITLE>………..</TITLE>
BODY TAGS:-<BODY>………..</BODY>
MAKING OF WEB PAGES:-NOTE PAD OR WORD PAD
SAVE AS FILENAME.HTML
TYPE :-ALL FILES
DISPLAY IN A WEB BROWSER:-CHROME, INTERNET EXPLORER, MOZILLA
SECTION TAGS (HEADINGS) :-<H1>…………..</H1> HEADING 1 TO HEADING 6
BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>
FONT TAGS:-<FONT COLOR=”RED”>…. </FONT>
<BODY BGCOLOR=”RED”>
<BODY TEXT=”YELLOW”>
<BODY TEXT=”YELLOW” BGCOLOR=”PINK”
LIST :- ORDER LIST (OL)
<OL>
<LI> COST </LI>
<LI> COMPNANY </LI>
<LI>ITEM </LI>
</OL>
UN ORDER LIST (UL)
<UL>
<LI> COST </LI>
<LI> COMPNANY </LI>
<LI>ITEM </LI>
</UL>
DEFINATION LIST:- (DL)
DT (CREATE ITEMS)
DD (DISPLAY DEFINATION
EXAMPLE:-
<DL>
<DT> COST <DD> HOW MUCH?
</DL>
OTHER ELEMENTS:-
<I>…..ITALIC…</I>
<B>..BOLD..</B>
<U>..UNDERLINE..</U>
<SUP>…</SUP>
EXMP:-
10<SUP>2 </SUP>
<SUB>….</SUB>
EXMPL:-
H<SUB>2</SUB>O = H2O
<STRIKE>COMPUTER
</STRIKE>
TABLES:-
BORDER=ADD BORDER TO A TABLE
TH=HEADINGS TO COLUMN
TR= CREATE ROWS
TD= TABLE DATAS CELL DATA
CELL PADDING= SPACING BETWEEN EDGES OF CELL AND ITS DATA
CELL SPACING= SPACING BETWEEN CELLS
ALIGN= HORIZONTAL ALIGN OF EACH CELL
VALIGN=VERTICAL ALIGN
ROW SPAN=SPAN CELL OR HEADING ACROSS
COLSAPAN=SPAN CELL OR HEADING ACROSS COLUMNS
<TABLE BORDER=”2” WIDTH=”100%” HEIGHT=”100%” CELLPADDING=”20” CELLSPACING=”4”
<TR>
<TH COLSPAN=3>HTML PRESS</TH>
TH ROWSPAN=4>HTML PRESS </TH>
</TR>
<TR>
<TH> BOOK NAME </TH>
<TH> AUTHOR </TH>
<TH>PRICE</TH>
</TR>
<TD>BASIC COMPUTER </TD>
<TD> R GUPTA</TD>
<TD> RS.199/- </TD>
</TR>
</TABLE>
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS=”50%,50%”>
<FRAME SRC=””>
<FRAME SRC=””>
</FRAME>
</HTML>
Comments
Post a Comment