27-07-2011, 12:27 PM
[attachment=14811]
WEBSITE MANAGEMENT
HTML
Session - 1
Index
Introduction
structure
Components
Tags
Br
Hr
U
I
Blink, e.t.c.
LIST
LINK
FORM
INTRODUCTION
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.
Structure
All normal webpages consist of a head and a 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. Finally, all webpages have an <html> tag at the beginning and the end, telling the browser where the document starts and where it stops. The most basic code - the code you will use for any page you make, is shown below:
Syntax
<html> <head> <!-- This section is for the title and technical info of the page. --> </head> <body> ((((((“””&<!-- This section is for all that you want to show on the page. --> </body> </html>
Components
HTML :- When a browser opens ((((((((an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages. e.g <HTML> </HTML>
Head:- contain other tags help you to identify your HTML file to the outside world. Syntax: - <html><head>………..</head></html>
Title:-it is nested within the head tag. The tag output is displayed on to your browser title bar b but not appear as a part of your page. Synatx :- <html><head><title>wel……….</title>.</head></html>
Body: -The body of the document contains all that can be seen when the user loads the page. In the rest of this tutorial you can learn in detail about all the different aspects of HTML.
Basic Tags
<BIG>--Creating Big Text
Purpose: Renders text in a bigger font than the current default. Often used for emphasis.
<BLOCKQUOTE>--Indenting Quotations
Purpose: Indents and styles text as a quotation. Use for longer, multiline quotations; otherwise use <Q>.
<BR>--Inserting Line Breaks
Purpose: Inserts a line break into a page.
<H1> Through <H6>--Creating Web Page Headings
<IMG>--Adding An Image To A Web Page
<MARQUEE>--Displaying Text In A Scrolling Marquee
<P>--Creating Paragraphs
<PRE>--Displaying Preformatted Text
<SPAN>--Formatting Inline Text
<STRONG>--Strongly Emphasizing Text
<SUB>--Creating Subscripts
<SUP>--Creating Superscripts
Example
Write a program that will display any message into the screen(solved)
<HTML><HEAD><TITLE> Using the <BR> and <P> tags.
</TITLE></HEAD><BODY>
Here's a line of text. <BR>Using the <BR> tag skips to the next line.
<P>On the other hand, using the <P> tag starts a new paragraph.
</BODY></HTML>
List
Fortunately, the creators of HTML recognized our great need for lists of all types, and provided us with three different ways to make them. These are the ORDERED LIST, the UNORDERED LIST, and the DEFINITION LIST.
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. 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>
Unordered List
The UNORDERED LIST is set up almost exactly like the Ordered List, except that you begin and end your list with UNORDERD LIST <UL> </UL> tags. Everything else remains the same. 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:
Definition Lists
The DEFINITION LIST allows you to list a series of words and then give their definitions. It's set up quite a bit different than the other two lists. Here is the HTML:
<h2>MY Definition List</h2> <DL> <DT>Dogs <DD> Large wolf-like animals that bark and fetch. <DT>Cats <DD> Small feline animals that purr. <DT>Rabbits <DD> Furry little animals with long ears. </DL>
LINK
<LINK>--Setting Link Information
Purpose: Specifies the relationship of other documents to the current one (such as specifying an external style sheet). <LINK> is an element for the <HEAD> section of a page.
A HYPERLINK, or LINK for short, is a navigation tool you can build into your page which enables your visitor to click on a word, phrase, or image, and be taken to the url you put into the link.
Type
Link to other HTML document
Syntax <A HREF="http://W3C.ORG">W3C</A>!
Link to other place in the same HTML document.
Syntax <a href=“#n”>as</a>
-
-
-
-
-
<a name=“n”>asae</a>
Link to place in other HTML document
Syntax <a href =“c:\a.html”>welcome</a>
Introduction
<FORM>--Creating HTML Forms
Purpose: Creates an HTML form; used to enclose HTML controls, like buttons and text fields.
Start Tag/End Tag: Required/Required
Example
<html> <head> <title>My Page</title> </head> <body> <form name="myform" action="http://mydomainmyformhandler.cgi" method="POST"> <div align="center"> <br><br> <input type="text" size="25" value="Enter your name here!"> <br><br></div></form></body></html>
Syntax
<FRAMESET COLS="50%,50%">
<frame src=“”>
</frame>
</FRAMESET>
Example
<HTML> <HEAD> <TITLE> My Frames Page </TITLE> </HEAD> <FRAMESET COLS="50%,50%"> <FRAME NAME="red" SRC="http://dis.dozierred.html"> <FRAME NAME="yellow" SRC="http://dis.dozieryellow.html"> </FRAMESET
Machine Room
Craete a frame which will divide the explorer into 5 parts
Create a frame which will show following format
Write a program that will display an over write text.
Write a program that will display an image will different format
JAVASCRIPT
Session – 2 & 3
INDEX
Introduction
Objectives
History
Using JavaScript
Event Handling
Variable and Data Types
Arrays
Define
Scripts are programs that run when users display your Web page. Object Based Scripting Language
Dynamic Processing Support
Easy to use
Dynamic and Interactive features
Used for calculations, validations, creating security etc.
Powerful as compare to another scripting language
Use
A page that includes the current time and date along with the text.
A page that displays the number of times that the Web site has been visited.
A page that displays a form for users to fill in and then returns requested information or updates a database.
A page that performs database operations that include transaction processing and other sophisticated data management operations.
History
Developed by Netscape under the name “live script”.
Later name as JavaScript .
Features
Designing web page tom respond to user interaction with form elements.
Importing and exporting data from database and providing friendly interface to data.processing the data on the client side before submitting it to the server.
Source view, where you can write script directly.
Colored text that clearly shows you the different elements of your script statements.
