You are on page 1of 33



Introduction Objective Use History Structure Components Adding comments


HTML stand for hyper text markup language. HTML is the language of web pages. In order to truly understand HTML, you need to know a little about browsers, and in order to understand browsers, you really need to know a little about how the web works.

insert images. Markup Language is a way of writing layout information within documents. There are excellent editors in the market that will take care of the HTML parts. All you need to do is layout the page. It is possible to create webpages without knowing anything about the HTML source behind the page. it is strongly recommended that you understand these tags. or create links to other pages. However. . Since HTML documents are just text files they can be written in even the simplest text editor. the browser will look for HTML codes in the text and use them to change the layout. Basically an HTML document is a plain text file that contains text and nothing else when a browser opens an HTML file.Objective    Hypertext is simply a piece of text that works as a link. if you want to make it above average in website.

. Simplest text editor.Use of HTML      More popular choice to create a Website or WebPages Easy to create Insert images. Some of the most popular HTML editors. such as FrontPage or Dream weaver. or create links to other pages.

2 html4.History     HTML is char based method for describing and expressing the content. Multiple platform Links Versions html1.0 html5.0 html3.0 html3.0 .0 html2.

body. Finally. is shown below: <html> <head> <!-<!-.This section is for the title and technical info of the page. The most basic code . --> --> </body> </html> .the code you will use for any page you make.Structure  All normal webpages consist of a head and a body.This section is for all that you want to show on the page. all webpages have an <html> tag at the beginning and the end. telling the browser where the document starts and where it stops. --> --> </head> <body> <!-<!-. Head Body  The head is used for text and tags that do not show directly on the page The body is used for text and tags that are shown directly on the page.

. Syntax: <html><head> .When a browser opens an HTML file.Components     HTML :.g <HTML> </HTML> Head:Head:. Synatx ::<html><head><title>welcome</title></head> </html> . The tag output is displayed on to your browser title bar b but not appear as a part of your page. e. the browser will look for HTML codes in the text and use them to change the layout.contain other tags help you to identify your HTML file to the outside world.</head></html> Title:Title:-it is nested within the head tag. insert images. or create links to other pages.

including: <body bgcolor/background text link vlink alink bgproperties= fixed bgsound>  <BGSOUND>--Adding <BGSOUND>--Adding Background Sounds Purpose: Plays background sound from AU. . Start Tag/End Tag: Required/Omitted. Body: -The body of the document contains all that can be seen when the user loads the page. The different aspects of HTML. MIDI. This element contains no content. or WAV files while the user is viewing a page.

-->Comments And Server Side Includes Purpose: Annotates a Web page with a comment in the HTML that you can read by looking at the HTML. . but will not be displayed in the Web browser.-->Comments <!-.Comments    <!-. Start Tag/End Tag: Required/Required This tag takes no content.

These commands are called TAGS TAGS ARE OF TWO TYPES  EMPTY TAG (<> OPENING TAG)  CONTAINER TAG(<> </> OPENING AND CLOSING TAG BOTH) .Tags < > It's All In The Angles HTML commands interspersed all through the document.

Horizontal Row .Empty Tags Br Break HrHr.

Basic Tags  <BIG>--Creating Big Text <BIG>--Creating Purpose: Renders text in a bigger font than the current default. Often used for emphasis. Start Tag/End Tag: Required/Required .

multiline quotations. otherwise use <Q>. Start Tag/End Tag: Required/Omitted. Start Tag/End Tag: Required/Required  <BR>--Inserting <BR>--Inserting Line Breaks Purpose: Inserts a line break into a page. Use for longer. Start Tag/End Tag: Required/Required  <BLOCKQUOTE>--Indenting Quotations <BLOCKQUOTE>--Indenting Purpose: Indents and styles text as a quotation.  . This tag does not contain any content.<BLINK>--Making <BLINK>--Making Text Blink Purpose: Displays enclosed text as blinking on and off approximately once a second.

<H1> creates the largest text and <H6> the smallest. and more. using bold font and various sizes. Start Tag/End Tag: Required/Required  <IMG>--Adding <IMG>--Adding An Image To A Web Page Purpose: Inserts an image into a Web page. Start Tag/End Tag: Required/Omitted This tag takes no content  .   <MARQUEE>--Displaying <MARQUEE>--Displaying Text In A Scrolling Marquee Purpose: Displays scrolling text in a "marquee" style. VALUE="Western view of the Alps". Start Tag/End Tag: Required/Omitted. or HTTPHTTP-EQUIV="REFRESH" CONTENT="5". refresh rates for client pull. like a headline. Start Tag/End Tag: Required/Required <META>--Giving <META>--Giving More Information About Your Web Page Purpose: Includes "metadata" about your Web page consisting of keywords for search engines. Metadata is passed as name/value pairs like this: NAME="DESCRIPTION".<H1> Through <H6>--Creating Web Page Headings <H6>--Creating Purpose: Creates a heading in the Web page.

Start Tag/End Tag: Required/Required <SMALL>--Creating Small Text <SMALL>--Creating Purpose: Renders text in a smaller font than the current default. Start Tag/End Tag: Required/Required   <SPACER>--Controlling <SPACER>--Controlling Horizontal And Vertical Spacing Purpose: Gives you more control over horizontal and vertical spacing. Start Tag/End Tag: Required/Omitted. . Start Tag/End Tag: Required/Optional   <PRE>--Displaying <PRE>--Displaying Preformatted Text Purpose: Tells the browser that the enclosed text is preformatted and should not be reformatted. This element does not contain any content.<P>--Creating <P>--Creating Paragraphs Purpose: Formats text into a paragraph and adds space before the paragraph.

<SPAN>--Formatting <SPAN>--Formatting Inline Text Purpose: Selects inline text to let you apply styles. Start Tag/End Tag: Required/Required  <SUP>--Creating <SUP>--Creating Superscripts Purpose: Styles text as a superscript. usually rendered in bold. Start Tag/End Tag: Required/Required  <SUB>--Creating <SUB>--Creating Subscripts Purpose: Styles text as a subscript. Start Tag/End Tag: Required/Required  . Start Tag/End Tag: Required/Required  <STRONG>--Strongly Emphasizing Text <STRONG>--Strongly Purpose: Emphasizes text strongly.

P&gt.BR&gt. tag skips to the next line. <P> On the other hand. <BR> Using the &lt. tags. </BODY> </HTML> . tag starts a new paragraph. using the &lt.Example Write a program that will display any message into the screen(solved) <HTML> <HEAD> <TITLE> Using the &lt.BR&gt. </TITLE> </HEAD> <BODY> Here's a line of text. and &lt.P&gt.

the UNORDERED LIST.List Fortunately. These are the ORDERED LIST. the creators of HTML recognized our great need for lists of all types. and the DEFINITION LIST. and provided us with three different ways to make them. The list in this column is a definition list. Ordered Lists  HTML for an Ordered List: <H2>My Ordered List</H2> <OL> <LI>Dogs <LI>Cats <LI>Rabbits </OL> My Ordered List  Dogs  Cats  Rabbits  .  ORDERED LISTS This is a numbered list UNORDERED LIST A list with bullets instead of numbers DEFINITION LIST A list of terms and their definitions.

Here's the HTML: <H2>My Unordered List</H2> <UL> <LI>Dogs <LI>Cats <LI>Rabbits </UL> Now here's what that will look like when displayed by a browser: My Unordered List  Dogs  Cats  Rabbits  . Everything else remains the same. except that you begin and end your list with UNORDERD LIST <UL> </UL> tags.Unordered List The UNORDERED LIST is set up almost exactly like the Ordered List.

Here is the HTML: <h2>MY Definition List</h2> <DL> <DT>Dogs <DD> Large wolf-like animals that bark and fetch. wolf<DT>Cats <DD> Small feline animals that purr. <DT>Rabbits <DD> Furry little animals with long ears. It's set up quite a bit different than the other two lists.Definition Lists The DEFINITION LIST allows you to list a series of words and then give their definitions. </DL>  .

encloses elements like <CAPTION>. <COL>. <THEAD>.Introduction    <TABLE>--Creating A Table <TABLE>--Creating Purpose: Creates a table. <TH>. and <TFOOT>. <TBODY>. <TD>. <TR>. Start Tag/End Tag: Required/Required . <COLSPAN>.

Syntax <html> <body> <table border= 2 bordercolor= colorname bordercolorlight/ bordercoloblack align= left/right/center/justify width= 100% > <tr><td>asa</td> <td>sasa</td></tr> <tr> <td>sasa</td> <td>asas</td> </table> </body> </html> .

Write a program that will display tic tac toe game with 3 rows and 3 cols <TABLE BORDER="2"> <TR> <TH>Tic</TH> <TH>Tac</TH> <TH>Toe</TH> </TR> <TR> <TD>X</TD> <TD>O</TD> <TD>X</TD> </TR> <TR> <TD>O</TD> <TD>X</TD> <TD>O</TD> </TR> <TR> <TD>X</TD> <TD>O</TD> <TD>X</TD></TR> </TABLE>  .

.    A HYPERLINK. phrase. or image. or LINK for short. is a navigation tool you can build into your page which enables your visitor to click on a word. or Uniform Resouce Locator. of the site you are linking to. The url is the address. and be taken to the url you put into the link. <LINK> is an element for the <HEAD> section of a page. that thing that usually begins with http://. The first thing you need is the url.Link <LINK>--Setting <LINK>--Setting Link Information Purpose: Specifies the relationship of other documents to the current one (such as specifying an external style sheet).

Click <a href="">here</a> to go to href="" The example below shows how to make the word here work as a link to yahoo. Everything between these two will work as a" setting. The <a> tells where the link should start and the </a> indicates where the link ends.How to use  The tags used to produce links are the <a> and </a>.Finally add an </a> tag to indicate where the link ends . The target of the link is added to the <a> tag using the href="http://www.Then add the text that should work as a link.whateverpage. You simply: Specify the target in the <a href=" ">.

ORG">W3C</A>!  Link to other place in the same HTML document.html >welcome</a> c:\  .Type Link to other HTML document Syntax <A HREF="http://W3C. Syntax <a href= #n >as</a> <a name= n >asae</a>  Link to place in other HTML document Syntax <a href = c:\a.

<HTML> <HEAD> <TITLE> Creating A Hyperlink </TITLE> </HEAD> <BODY> <CENTER> <H1> Creating A Hyperlink </H1> Here's a Web site to check out: <A HREF="http://W3C.ORG">W3C</A>! </CENTER> </BODY> </HTML> .

the content of the form is usually sent to a program that runs on the server. Start Tag/End Tag: Required/Required A form is simply an area that can contain form fields.t.for example text boxes. When the visitor clicks a submit button.    <FORM>--Creating <FORM>--Creating HTML Forms Purpose: Creates an HTML form. like buttons and text fields. Form fields are objects that allow the visitor to enter information . drop-down menus dropor radio buttons. there are exceptions.c. While using form we can insert text. used to enclose HTML controls.combobox.check box password e.  . However. labels.

com/myformhandler. <html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://www.cgi" method="POST"> <div align="center"> <br><br> <input type="text" size="25" value="Enter your name here!"> <br><br> </div> </form> </body> </html> .mydomain.

and how to carve the screen up while displaying them in the same window.Introduction   A frames page is a way of displaying more than one webpage on the same screen. telling it where to find the two pages. If you have two webpages you'd like to display side by side. This page will contain instructions for the viewers browser. you can do this by writing a third page with it's own distinct url. .

50%"> <frame src= > </frame> </FRAMESET> .Syntax <FRAMESET COLS="50%.

dozier.50%"> <FRAME NAME="red" SRC="http://dis.dozier.html"> <FRAME NAME="yellow" SRC="http://dis.html"> </FRAMESET .Example <HTML> <HEAD> <TITLE> My Frames Page </TITLE> </HEAD> <FRAMESET COLS="