Scribd
Upload
5 views14 pages

Introduction 1

The document provides an overview of HTML (Hypertext Markup Language) and its fundamental components for creating web pages. It covers essential HTML tags, text formatting, lists, tables, forms, and image handling, along with examples for each. The project aims to educate readers on how to effectively use HTML in web development, particularly for a college in Madhya Pradesh.

Uploaded by

shivanshsharmaji7581027700
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views14 pages

Introduction 1

The document provides an overview of HTML (Hypertext Markup Language) and its fundamental components for creating web pages. It covers essential HTML tags, text formatting, lists, tables, forms, and image handling, along with examples for each. The project aims to educate readers on how to effectively use HTML in web development, particularly for a college in Madhya Pradesh.

Uploaded by

shivanshsharmaji7581027700
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Project on “COLLEGE IN MADHAY PREDESH”

INTRODUCTION

HTML Language:-
Software’s used in this project are HTML and Microsoft FrontPage, so following
is the brief description of HTML.

About HTML

HTML = Hypertext Markup Language

Although the word language is part of HTML it is not a language as in traditional


programming, like BASIC, Visual BASIC, COBOL, C+, Perl etc. It is a Mark Up
language which should help you understand what it really is. It is much, much
easier to learn than a true programming language.

Markup as used in Graphic Arts and Publishing means to mark the text on a page
of copy the way you want it to be printed. That's exactly what HTML does. You
mark a word, sentence or paragraph to print in boldface by using a code (in this
case <b>) to tell the browser to display that on screen in boldface. HTML is
simply some bits of code that control the display of your web page on a computer
screen. These bits of code are also known as HTML tags. In this tutorial I will use
the two terms tag and code interchangeably.

The Internet is always changing and HTML as we know it is in an evolution from a


very basic display language to a very involved and interactive medium. Follow the
proper coding methods and you will be ready for the future, and all the changes
that it always brings.
Project on “COLLEGE IN MADHAY PREDESH”
Don't get scared about that. What you learn here will not be wasted knowledge and
wasted time. As mentioned, backwards compatibility will always allow the
browser of the future to display your code. Where things will change is with what
you can do with the HTML code of the future compared to how it is today. As long
as you code properly, your pages will be easily adapted to anything you may want
to add into your pages down the road in the future of your web activities.

The Basics

The basics cover the tags you need in order for the page "to exist". This doesn't
include what goes in the page; it includes only what you need in order for the
browser to recognize that it truly is a Web page.

<HTML></HTML>
This is the basic tag for every page. It tells the browser that the file being loaded is
a HTML document. Look at the basic layout of any Web page to see how it's used.

<HEAD></HEAD>
This defines the head of your page. Incorporates the <TITLE></TITLE> tag.

<BODY></BODY>
This allows you to define the body arguments. They can include:

 BACKGROUND="file.gif" sets an image file to be tiled as the backdrop to


the page elements.
 BGCOLOR="#rgbcode" Sets the background color.
 TEXT="#rgbcode" - sets the text color
 LINK="#rgbcode" - sets the link color
 VLINK="#rgbcode" - sets the visited links color
 TOPMARGIN=x - defines the top margin for the body
Project on “COLLEGE IN MADHAY PREDESH”
 LEFTMARGIN=x - defines the left margin for the body
 RIGHTMARGIN=x - defines the right margin for the body

<TITLE></TITLE>
This allows you to display a title at the top of the browser.

<META>
This allows the owner to display certain information to the browser without the
page seeing it. Here are some examples:

 <META NAME="description" CONTENT="This is my page


description.">
Describes your page's contents
 <META NAME="keywords" CONTENT="word1, word2, word3,
word4
Enters keywords for your page

<META HTTP-EQUIV="refresh" CONTENT="10; url=index2.html">


Reloads the page after 10 seconds to index2.html

Text Control

<H1></H1>
This allows you to change the size of letters or words. Includes H1 - H6, H1 being
the biggest and H6 being the smallest.

<CENTER></CENTER>
This allows you to display the text in the center of the page.

<Q></Q>
This formats certain text as a quote.
Project on “COLLEGE IN MADHAY PREDESH”
<BIG></BIG>
This makes the text bigger than the rest.

<SMALL></SMALL>
This makes the text smaller than the rest.

<SUB></SUB>
This allows you to make the text look like this.

<SUP></SUP>
This gives a superscript effect to your text.

<ABBREV></ABBREV>
This abbreviates certain text.

<FONT></FONT>
This allows you to control different aspects of the text. Includes:

 SIZE=x (x = +1 to +5 or -1 to -5)
 COLOR=#rgbcode defines the color,
 FACE="name" defines the font face <B></B>

This makes a word or group of words bold.

<STRONG></STRONG>
This is the same as bold.

<I></I>
This italicizes a word or group of words.

<EM></EM>
This is the same as italics.
Project on “COLLEGE IN MADHAY PREDESH”
<U></U>
This underlines a word or group of words.

<TT></TT>
This makes a fixed width font.

<BLOCKQUOTE></BLOCKQUOTE>
This indents the left and right-hand sides of the text.

<CITE></CITE>
This is another italics tag.

<CODE></CODE>
This is another fixed width font tag.

<DFN></DFN>
This allows you to embolden or italicize a word or group of words.

<PRE></PRE>
This allows the text to appear in the browser in the same format (layout) as it does
in a text editor, such as Notepad, for example.

<LISTING></LISTING>
This is a small fixed-width font tag - somewhat similar to <PRE></PRE> that
spaces everything out.

Lists<DL></DL>
This defines the list items within a descriptive list.

<DT></DT>
This defines the topic of the descriptive list.
Project on “COLLEGE IN MADHAY PREDESH”
<DD></DD>
This defines the indented item to be displayed in the descriptive list.

<OL></OL>
This is a way to group items into a numbered list. It uses the <li></li> tags to list
the items.

<LI></LI>
This defines the list items with a number or a dot. Includes the following:

 START="x"
 TYPE="A/a/I/i" for upper or lower case and Roman numerals.

<UL></UL>
This is another way to list items. Also uses the <li></li> tags to define the list
items with a bullet instead of a number. Includes the following options:

 TYPE="disc/circle/square"

Page Breaks and Lines

<HR>
This allows you to divide a page with a line. Includes the following options:

 WIDTH=x (x = pixels/percentage)
 ALIGN=x (x = left/right/center)
 SIZE=xM
 NOSHADE takes away the shading.

<BR>
This allows the text to break without a full paragraph. The options are:
CLEAR="x" (x = left/right/all) <NOBR></NOBR>
This allows the text to continue indefinitely without breaking.
Project on “COLLEGE IN MADHAY PREDESH”

Tables, Frames, and Forms

<TABLE></TABLE>
These allow you to insert tables. It has the following options:

 WIDTH="x"
 HEIGHT="x"
 BORDER="x"
 CELLPADDING="x"
 CELLSPACING="x"

It also includes the following tags with their associated options:

 <TR></TR>
 <TD></TD>
 <TH></TH>
 ALIGN=left/middle/right
 VALIGN=top/middle/bottom
 COLOR=#rgbcode
 COLSPAN="x"
 ROWSPAN="x"

<FRAMESET></FRAMESET>
This allows you to set up frames on your page. Includes the following:

 ROWS="x" (x = pixels/percentage)
 COLS="x" (x = pixels/percentage)
 FRAMEBORDER="x"
 FRAMEWIDTH="x"
 MARGINHEIGHT="x"
Project on “COLLEGE IN MADHAY PREDESH”
 MARGINWIDTH="x" Requires the frame tag to establish content. These

include: MARGINHEIGHT="x"

 MARGINWIDTH="x"
 NAME="name"
 NORESIZE
 SRC="file.html/file.gif/file.jpg"
 SCROLLING="x" (x = yes/no/auto)

Don't forget the <NOFRAMES> tag for those browsers who can't handle frames.

<FRAME>
This establishes content. Its attributes include:

 MARGINHEIGHT="x"
 MARGINWIDTH="x"
 NAME="name"
 NORESIZE
 SRC="x"
 SCROLLING="x" ( x = yes/no/auto)

<FORM></FORM>
This allows you to insert forms in your page. It includes the following options:

 METHOD="POST/GET"
 ACTION="file/script"

You can also add checkboxes, text boxes and more. For example:

<INPUT TYPE="text/hidden/checkbox/radio/submit/reset"
SIZE="n" MAXLENGTH="x" NAME="name" VALUE="presettext">
Project on “COLLEGE IN MADHAY PREDESH”
<SELECT NAME="name" SIZE="x">
<OPTION VALUE="value1">Value1</OPTION>
<TEXTAREA NAME="name" ROWS="x" COLS="x"
VALUE="preset text" WRAP="virtual"></TEXTAREA>

Images and Links

<A></A>
This allows you to make certain text or picture a link to another page or graphic
not on the page. It can include the following options:

 TARGET="framename"
 HREF="path/to/a/file" - reference to the linked file
 NAME="name" - sets a marker within a document so that a specific
section of a page may be linked to via "#sectionnamehere" with the HREF
attribute
 <IMG>This allows you to insert an image into your Web page. It has the
following options:

 SRC="file.gif"/src="file.jpg"
 HEIGHT="x"
 WIDTH="x,"
 LOWSRC="file.gif" - allows a low resolution image to be displayed while a
higher resolution image loads
 ALT="text for older browsers"

 USEMAP=#mapname
 ISMAP
Project on “COLLEGE IN MADHAY PREDESH”
 ALIGN="x" - sets the image alignment on the page (x = left/right/middle

/bottom/top/absmiddle/textop/absbottom)
 BORDER="x"

<MAP></MAP>
This defines the areas and coordinates of an image map.

HTML Form Tags

HTML website forms should be enclosed inside the FORM tags. There are various
parameter options available, the most common ones are:
action - this allows you to tell the form where to go once submitted (usually the
filename of a script which will read and process the form data which has been
submitted).
name - it's usually a good idea to give your forms a name, this is used to uniquely
identify your form on a given page.
method - the value of this should be POST or GET. This tells the form how to
send the data once submitted. Forms should usually always be set to use POST (as
GET will attached the form data onto the page URL which is almost always a bad
idea for security reasons). There are some other methods available, but we will not
discuss these here.

1 <formaction="index.php"name="myform"method="POST">
2 Example form field: <inputtype="text"name="example">
3 </form>

HTML Text Field - Single Line

This is without doubt the most common field you will find.

1 <formaction="index.php">
2 Enter your name: <inputtype="text"name="your_name">
3 </form>
Text field in action

Enter your name:


Project on “COLLEGE IN MADHAY PREDESH”

HTML Textarea (multiple lines text field )

The multi-line text field (commonly known as a textarea field) is more suitable to
take larger block of text from your visitors. This is idea for comments.

1 <formaction="index.php">
2 Comments: <textarearows="5"cols="30">
3 </form>
Textarea field in action

Comments:

HTML Radio Buttons

When you want your users to pick one item from a short list, the radio button set is
ideal.

1 <formaction="index.php">
2 <inputtype="radio"name="color"value="red"/> Red<br/>
3 <inputtype="radio"name="color"value="white"/> White<br/>
4 <inputtype="radio"name="color"value="blue"/> Blue<br/>
5 <inputtype="radio"name="color"value="green"/> Green<br/>
6 </form>
Radio button group in action

Red
White
Blue
Green

HTML Check box fields (checkboxes)


Project on “COLLEGE IN MADHAY PREDESH”
When you want your users to pick one or more items from a short list, then
checkboxes are ideal.

1 <formaction="index.php">
2 <inputtype="checkbox"name="friut"value="apples"/> Apples<br/>
3 <inputtype="checkbox"name="friut"value="oranges"/> Oranges<br/>
4 <inputtype="checkbox"name="friut"value="pears"/> Pears<br/>
5 <inputtype="checkbox"name="friut"value="peaches"/> Peaches<br/>
6 </form>
Checkboxes in action

Apples
Oranges
Pears
Peaches

HTML File Upload Field (field selector)

Sometimes it may be good to offer your website users the option to upload a file.
For this you could use the HTML field type file. If you are using this option you
also need to include an additional option to the FORM
tag enctype="multipart/form-data"

1 <formaction="index.php"enctype="multipart/form-data">
2 Select a file to upload: <inputtype="file"name="selectedfile"/>
3 </form>
File input type (file upload) in action

Select a file to upload:

HTML Password Field

If you ever need to ask your users to enter a password into a form, then you should
use the special text field type password. Using this option will mask each
character as the user types, allowing them to type in secret.
Project on “COLLEGE IN MADHAY PREDESH”
1 <formaction="index.php">
2 Enter your password: <inputtype="password"name="password">
3 </form>
Password field in action

HTML drop-downs (aka selects or combo-boxes)

When you want your visitors to pick something from a list, you could use a drop-
down list. These are sometimes know as option selects,select fields or combo-
boxes. By default only one option can be selected, however you can allow multiple
selections by including the wordmultiple to your select tag (this will also alter the
appearance of the field).

1 <formaction="index.php">
2 Select Something:
3 <selectname="something">
4 <optionvalue="Google">Google</option>
5 <optionvalue="Bing">Bing</option>
6 <optionvalue="Yahoo">Yahoo</opton>
7 </select>
8 </form>
HTML Drop-down select field in action

Select Something:

HTML Submit button

Finally, every form should probably allow the user to option of submitting the
form. Form submissions are usually handled by using an HTML button. Again the
button field is an input type field (as text and password fields are), however these
special fields are of type submit. To specify the text which appears on the button,
we use the value parameter to state out value (in the example below we state
'Submit Form').

1 <formaction="index.php">
2 <inputtype="submit"value="Submit Form"name="submit">
3 </form>
Project on “COLLEGE IN MADHAY PREDESH”
Submit button field in action

HTML Reset button

Occassionally you may want to allow your visitors to reset a form back to its
default state. This is accomplished by using the input type ofreset. As with the
Submit button, you specify the button text using the value parameter. Reset
buttons are not very common these days but can still be useful under certain
circumstances.

1 <formaction="index.php"name="resettest">
2 Enter your name: <inputtype="text"name="your_name"><br/>
3 <inputtype="reset"value="Reset Form"name="submit">
4 </form>
Reset button field in action

Enter your name:

You might also like