39
HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

Embed Size (px)

Citation preview

Page 1: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session1/1 of 39

Introduction and Basic Tags

Session 1 of Using HTML, DHTML & JavaScript

Page 2: 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

Page 3: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 3 of 39

The World Wide Web

Protocols

Addresses HTML

Page 4: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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.

Page 5: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 6: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 6 of 39

Displaying the page

Page 7: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 7 of 39

Browsers and Editors

Browsers Netscape's Navigator Microsoft's Internet Explorer

Editors Microsoft FrontPage Notepad

Page 8: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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

Page 9: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 10: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 10 of 39

Changing attributes

Page 11: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 12: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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)

Page 13: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 14: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 14 of 39

Using headings

Page 15: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 16: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 16 of 39

Adding addresses

A link to the home page.

A search string feature.

Copyright information.

Page 17: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 18: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 18 of 39

Horizontal Rule

<HR> Attributes

align Width Size Noshade

Page 19: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 19 of 39

Continue..

<HR noshade size = 5 align = center width = 50%><HR size = 15 align = left width = 80%>

Page 20: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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

Page 21: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 22: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 23: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 23 of 39

Using fonts

Page 24: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 25: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 26: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 27: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 27 of 39

Formatting

Physical formatting tags

Logical formatting tags

Page 28: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 29: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 30: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 30 of 39

Using special characters Greater than (>)

&gt; Less than (<)

&lt; Quotes

&quot; Ampersand

&amp; Space

&nbsp;

Page 31: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 31 of 39

Structuring text

Using Quotes <BLOCKQUOTE >

Preformatted text <PRE>

Grouping elements <DIV>…</DIV>

Page 32: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 32 of 39

Lists

    Unordered lists Ordered lists Definition lists

Page 33: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 34: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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

Page 35: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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>

Page 36: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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 ]

Page 37: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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

Page 38: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

HTML,DHTML & Javascript/Session 1/ 38 of 39

Continue..<DT>TCP/IP

<DD>Transmission Control Protocol / Internet Protocol

</DL>

</BODY>

</HTML>

Page 39: HTML,DHTML & Javascript/Session1/1 of 39 Introduction and Basic Tags Session 1 of Using HTML, DHTML & JavaScript

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.