Embed Size (px)
HTML,DHTML & Javascript/Session1/1 of 39
Introduction and Basic Tags
Session 1 of Using HTML, DHTML & JavaScript
HTML,DHTML & Javascript/Session 1/ 2 of 39
Session Objective Describe WWW Define HTML Describe the role of browsers Explain HTML markups Describe the structure of an HTML
document Use elements to enhance a Web page Use Lists to display text Convert existing documents to HTML
documents
HTML,DHTML & Javascript/Session 1/ 3 of 39
The World Wide Web
Protocols
Addresses HTML
HTML,DHTML & Javascript/Session 1/ 4 of 39
Introduction to HTML HTML is a MARKUP language Using HTML tags and elements, you can:
Control the appearance of the page and the content. Publish online documents and retrieve online
information using the links inserted in the HTML document.
Create on-line forms. These forms can be used to collect information about the user, conduct transactions, and so on.
Insert objects - - audio clips, video clips, ActiveX components, Java applets - - in the HTML document.
HTML,DHTML & Javascript/Session 1/ 5 of 39
HTML syntax:<HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY>
<H3>My first HTML document</H3>
</BODY>
</HTML>
HTML,DHTML & Javascript/Session 1/ 6 of 39
Displaying the page
HTML,DHTML & Javascript/Session 1/ 7 of 39
Browsers and Editors
Browsers Netscape's Navigator Microsoft's Internet Explorer
Editors Microsoft FrontPage Notepad
HTML,DHTML & Javascript/Session 1/ 8 of 39
HTML Tags HTML tag is used to mark the beginning
and end of an HTML document. <HTML> . . . </HTML>
The HTML tag is comprised of: <ELEMENT ATTRIBUTE = value> Element Attribute Value
HTML,DHTML & Javascript/Session 1/ 9 of 39
Continue.. <BODY BGCOLOR = lavender>
<HTML><HEAD><TITLE>Welcome to HTML</TITLE><BODY BGCOLOR = lavender><H3>My first HTML document</H3></BODY></HTML>
HTML,DHTML & Javascript/Session 1/ 10 of 39
Changing attributes
HTML,DHTML & Javascript/Session 1/ 11 of 39
Structure of an HTML document The HTML section The Header section. The BODY section.
<HTML>
<HEAD>
<TITLE>Welcome to the world of HTML</TITLE>
</HEAD>
<BODY>
<P>This is going to be real fun</P>
</BODY>
</HTML>
HTML,DHTML & Javascript/Session 1/ 12 of 39
Basic HTML elements Block-level elements
Headers (H1 to H6) Paragraphs (P) List Items (LI) Horizontal Rules (HR).
Inline or text level elements EM, I, B and FONT (character emphasis) A (hypertext links) BR (line breaks) APPLET (embedded objects) IMG (images)
HTML,DHTML & Javascript/Session 1/ 13 of 39
Headings<HTML>
<HEAD>
<TITLE>Introduction to HTML</TITLE>
<H1>Introduction to HTML</H1>
<H2>Introduction to HTML</H2>
<H3>Introduction to HTML</H3>
<H4>Introduction to HTML</H4>
<H5>Introduction to HTML</H5>
<H6>Introduction to HTML</H6>
</HEAD>
</HTML>
HTML,DHTML & Javascript/Session 1/ 14 of 39
Using headings
HTML,DHTML & Javascript/Session 1/ 15 of 39
Paragraphs <HTML><HEAD><TITLE>Welcome to HTML</TITLE><BODY BGCOLOR = lavender><H3>My first HTML document</H3><P>This is going to be real fun<H2>Using another heading</H2><P> Another paragraph element </BODY></HTML>
HTML,DHTML & Javascript/Session 1/ 16 of 39
Adding addresses
A link to the home page.
A search string feature.
Copyright information.
HTML,DHTML & Javascript/Session 1/ 17 of 39
Continue..<HTML><HEAD><TITLE>Welcome to HTML</TITLE><BODY BGCOLOR = lavender><H3>My first HTML document</H3><P>This is going to be real fun<H2>Using another heading</H2><P> Another paragraph element <ADDRESS><P><A href="some address">Click here to register for
a free newsletter</A> </ADDRESS></BODY></HTML>
HTML,DHTML & Javascript/Session 1/ 18 of 39
Horizontal Rule
<HR> Attributes
align Width Size Noshade
HTML,DHTML & Javascript/Session 1/ 19 of 39
Continue..
<HR noshade size = 5 align = center width = 50%><HR size = 15 align = left width = 80%>
HTML,DHTML & Javascript/Session 1/ 20 of 39
Breaks <HTML>
<HEAD>
<TITLE>Welcome to HTML</TITLE>
<BODY BGCOLOR = lavender>
<H3>My first HTML document</H3>
<P>This is going to be real fun
<H2>Using another heading</H2>
<BR>
<H1>This should surprise you</H1>
<P> Another paragraph element
HTML,DHTML & Javascript/Session 1/ 21 of 39
Continue..<ADDRESS>
<A href="some address">Click here to register for a free newsletter</A>
</ADDRESS>
</BODY>
</HTML>
HTML,DHTML & Javascript/Session 1/ 22 of 39
Using Fonts <FONT> … </FONT>
Color Size Face
Example<HTML> <HEAD><TITLE>Welcome to HTML</TITLE> </HEAD><BODY><H3><FONT SIZE = 3 COLOR = HOTPINK FACE =
Arial>My first HTML document</FONT></H3><P>This is <FONT COLOR = BLUE SIZE = 6>going
</FONT>to be real fun </BODY> </HTML>
HTML,DHTML & Javascript/Session 1/ 23 of 39
Using fonts
HTML,DHTML & Javascript/Session 1/ 24 of 39
Adding Color
<HTML><HEAD><TITLE>Learning HTML</TITLE></HEAD><BODY BGCOLOR=lavender><H2><FONT COLOR = LIMEGREEN>Welcome to HTML</FONT></H2><P><FONT COLOR = RED>This is good fun</FONT></P></BODY> </HTML>
HTML,DHTML & Javascript/Session 1/ 25 of 39
Choosing Alignment of text Value
Left Center Right Justify
Example<HTML> <HEAD>
<TITLE>Learning HTML</TITLE> </HEAD>
<BODY BGCOLOR=lavender>
HTML,DHTML & Javascript/Session 1/ 26 of 39
Continue..<H2 align = center><FONT COLOR =
LIMEGREEN>Welcome to HTML</FONT></H2>
<P align = right><RIGHT><FONT COLOR = RED>This is good fun</FONT></P>
</BODY>
</HTML>
HTML,DHTML & Javascript/Session 1/ 27 of 39
Formatting
Physical formatting tags
Logical formatting tags
HTML,DHTML & Javascript/Session 1/ 28 of 39
Physical formatting tags <B> . . . </B> <I> . . . </I> <U> . . . </U> <BIG> . . . </BIG> <SMALL> . . . </SMALL> <STRIKE> <SUP> . . . </SUP> <SUB> . . . </SUB> <CENTER> . . </CENTER>
HTML,DHTML & Javascript/Session 1/ 29 of 39
Logical formatting tags <EM> . . </EM> <STRONG> . . . </STRONG> <DFN> . . </DFN> <CODE>. . . </CODE> <KBD> . . . </KBD> <VAR>. . . </VAR> <CITE>. . . </CITE> ABBR <BLINK> . . </BLINK> <DEL> . . </DEL> & <INS> . . </INS>
HTML,DHTML & Javascript/Session 1/ 30 of 39
Using special characters Greater than (>)
> Less than (<)
< Quotes
" Ampersand
& Space
HTML,DHTML & Javascript/Session 1/ 31 of 39
Structuring text
Using Quotes <BLOCKQUOTE >
Preformatted text <PRE>
Grouping elements <DIV>…</DIV>
HTML,DHTML & Javascript/Session 1/ 32 of 39
Lists
Unordered lists Ordered lists Definition lists
HTML,DHTML & Javascript/Session 1/ 33 of 39
Unordered lists<HTML> <HEAD><TITLE>Learning HTML</TITLE> </HEAD><BODY><UL>
<LI>Monday<LI>Tuesday<LI>Wednesday<LI>Thursday<LI>Friday
</UL></BODY></HTML>
HTML,DHTML & Javascript/Session 1/ 34 of 39
Customized bullets
<LI TYPE = SQUARE> Square bullets
<LI TYPE = DISC> Sphere bullets <LI TYPE = CIRCLE> Round bullets
HTML,DHTML & Javascript/Session 1/ 35 of 39
Ordered lists<HTML> <HEAD>
<TITLE>Learning HTML</TITLE> </HEAD>
<BODY>
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
<LI>Thursday
<LI>Friday
</OL>
</BODY></HTML>
HTML,DHTML & Javascript/Session 1/ 36 of 39
Customized Numbers Upper Roman
<LI TYPE = I> Lower Roman
<LI TYPE = i> Uppercase
<LI TYPE = A> Lowercase
<LI TYPE = a> Begin numbering with a digit other than “1”
<OL START = n> [ Default ]
HTML,DHTML & Javascript/Session 1/ 37 of 39
Definition lists <HTML> <HEAD><TITLE>Learning HTML</TITLE> </HEAD><BODY><DL>
<DT>Sunday<DD>The first day of the week
<DT>HTML<DD>HyperText Markup Language
<DT>Internet<DD>A network of networks
HTML,DHTML & Javascript/Session 1/ 38 of 39
Continue..<DT>TCP/IP
<DD>Transmission Control Protocol / Internet Protocol
</DL>
</BODY>
</HTML>
HTML,DHTML & Javascript/Session 1/ 39 of 39
Document conversion Open the document in the word
processor. Save the file as an HTML file, that is with
a .htm or .html file name extension. File | Save As In the Save as type box, select HTML
document/Web page. Open the file in Notepad.
