Practical File OF Web Development: Submitted To:-Submitted By

CT INSTITUTE OF MANAGEMENT AND TECHNOLOGY, JALANDHAR
PRACTICAL FILE OF WEB DEVELOPMENT
Submitted To:Submitted By:Ms. Ambrinder Kaur Ranjit Singh (Dept of CA) BCA 2nd sem. 1103395
HTML Page 1
INDEX
Sr.No Date .
1 2 3 4 5 6 02-0112 04-0112 09-0112 11-0112 16-0112 18-0112
Contents
Pages
Remarks
Introduction 3 - 4 to HTML Tags in 5-8 HTML HTML lists 9 - 10 Tables Adding Graphics HTML links 11 - 12 13 - 14 15 - 16
HTML
Page 2
Introduction to HTML
HTML stands for Hyper Text Markup Language.The language used to develop web pages is called HTML.HTML is a language interpreted by browser. Web pages are also called HTML documents.HTML is a set of special codes that can be embedded in text to add formatting and linking information. HTML is specified as TAGS in an HTML document. Elements of HTML: a) HTML editor: An HTML editor is a software application for creating web pages. Although the HTML markup of a web page can be written with any text editor, specialized HTML editors can offer convenience and added functionality. For example, many HTML editors work not only with HTML, but also with related technologies such as CSS, XML and JavaScript. b) HTML Tags: Tags are instructions that are embedded directly into the text of the document. An HTML tag is a signal to a browser that it should do something over than just through text up on the screen. By convention all HTML tags begin with an open angle bracket (<) and end with a close angle bracket (>).
HTML Tags can be of two types:
i. Paired Tags: A tag is said to be a paired tag if it, along with a companion tag, flanks the text. For example the <b> tag is a paired tag .the <b> tag with its companion tag </b> causes the text contained between them to be rendered in Bold. The effect of other paired tags is applied only to the text they contain. HTML Page 3
In paired tags,the first tag (<b>) is often called the opening tag and the second tag (</b>) is called the closing tag. The opening tag activates the effect and the closing tag turns the effect off .
ii. Singular Tags: The second type of tag is the singular or stand-alone tag. a stand alone tag does not have a companion tag. For example <br\> tag will insert a line break .this tag does not require any companion tag.
Attributes:
Attributes are associated with each tag to further define the tags. The general syntax is as follows: <tag attribute 1 = "value" attribute 2 = "value" ... >
Structure of an HTML program

Every HTML program has one simple structure. There are two major components to the structure of a web site, Head :The head provides the title and other information about your web site Body : the body provides the information and content. Each of these components are marked by "tags", which let the computer know where the information is written. For example:
<html> <head> <title>My Web Page</title> </head> <body>
HTML
Page 4
Main body of the page, with text, pictures, etc. </body> </html>
TAGS IN HTML
Tag <A> </A> <B> </B> <BODY> </BODY> <BR> Description To create a link to another document, by using the href attribute Content is shown as bold type The body part of the HTML document. See introduction to HTML Force line break within paragraph. Note that "floating elements" such as images are separate from the paragraph. To start next line below any images etc., use <BR CLEAR="all">. The CLEAR attribute can take values "none", "right", "left", or "all" and is deprecated, but in fact still very useful. The best way to understand it is to try a few tests. Content is centred on page (can include paragraphs etc). Note American spelling. Used to define characteristics of font, according to attributes e.g. SIZE, COLOR, FACE. SIZE sets size, 1-7 e.g. SIZE="5". COLOR sets color of text e.g. <FONT COLOR="#FF0000"> makes text red. FACE e.g. FACE="Times". The head part of the HTML document. See introduction to HTML Headings (levels 1-6, i.e. H3 is a subheading within a H2 subheading).
<CENTER> </CENTER> <FONT> </FONT>
<HEAD> </HEAD> <H1> </H1> <H2> </H2> ... <H6> </H6> <HR>
Draw horizontal line across page; used to indicate break between sections. Attributes: WIDTH, e.g. WIDTH="50%" makes line half size Page 5
HTML
of page; SIZE, e.g. SIZE="3" makes line 3 pixels thick <I> </I> <IMG> Italics. Image. Attributes: must have SRC and ALT. SRC gives source file for image, e.g. SRC="picture.jpg". ALT gives brief description e.g. ALT="Picture of UB" List item. Used within an ordered (<OL>) or unordered (<UL>) list Ordered list. Includes <LI> List Items, which will be numbered automatically Paragraph Subscript
<LI> </LI> <OL> </OL> <P> </P> <SUB> </SUB>
<SUP> </SUP> Superscript <TABLE> </TABLE> <TD> </TD> <TH> </TH> <TITLE> </TITLE> <TR> </TR> <U> </U> <UL> </UL> The <table> tag defines an HTML table. Table data cell.. Table header cell.. Title of document. This must appear in the <HEAD> part. Table row.. Underline text. Use sparingly as it may be confused with hyperlinks Unordered List. Includes <LI> List Items, which will be displayed in a list with bullets.
<PRE> </PRE>:
The PRE element is used for pre-formatted text. What this means is that the text between the opening and closing tags is displayed exactly as shown in the HTML file. Normally, any line breaks etc. in the HTML file are ignored when the page is displayed: instead the browser breaks where it finds a <BR>, starts a new paragraph at a <P>, etc. One main use for <PRE> is when you have a large chunk of text in a plain text file which you want to display without having to convert all the paragraphs and tables to HTML formatting. The electronic text pages on this web-site use <PRE> to display entire chapters from the Project Gutenberg plain text texts.
Example:
HTML Page 6
However, we can use the <PRE> element:
<PRE>There was an old man of Peru Who dreamt he was eating his shoe He woke up in the night With a terrible fright And found it was perfectly true</PRE>
HT ML bgcolor codes
Silver #BBBAAA #AAAAAA Gray #545454 #BBB87E #CCC102 #AAA111 #067120 Green Olive #AA9E7A #DEB678 #A87654 #826446 #A45555 #AC003A #CC2431 #EA744E #A85400 Maroon #600000 Black #FFFFB4 #F0F7A0 #E8FF5A Yellow #EEE31A Lime #7EE34B #FFCD9C #FFD9C8 #DEB0AF
Navy #0000A8 #345ABC Blue #6666FF #0C6AA1 #6A6ABA #A44FF9 #CF61FC #E88EEE #FF00FF #00A8A8 #8080C0 #6699ff #55BBEA #A3D5E4 #ADD2D3 #33E2E5 Aqua #B3E4FD #E7E7EF #E2EFED #EDFEDF #F0F7D2 Purple #B52E98 #E91998 #ED44AB #EE7EBB #EAA3BB Red #F65F45 #555555
Marquee Tag
HTML Page 7
Marquee tag is use to move the text on webpage. Example Code: <marquee> This text will move </marquee> The text in between the tags will move horizontally. Result: This text will move
Attributes :
Bgcolor this sets the background color for marquee path Example Code :< marquee bgcolor=orange> Moving Text </marquee>
Result:
Height, width The attribute width sets the width of marquee area The attribute height sets the height of marquee area Example Code: <marquee bgcolor=orange width=100 height=20> Moving Text </marquee> Result:
Attribute: direction This sets the background color for marquee path. It takes values LEFT or RIGHT or UP or DOWN Example Code: <marquee bgcolor=orange width=100 height=20 direction=right> Text will Move </marquee>
HTML Lists
HTML supports ordered, unordered and definition lists. HTML Page 8
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
<ul> <li>Coffee</li> <li>Milk</li> </ul>
Here is how it looks in a browser:

Coffee Milk
Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Ordered Lists
An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>Coffee</li> <li>Milk</li> </ol> Here is how it looks in a browser: 1. Coffee 2. Milk Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.
Definition Lists
A definition list is not a list of single items. It is a list of items (terms), with a description of each item (term). A definition list starts with a <dl> tag (definition list). Each term starts with a <dt> tag (definition term). Each description starts with a <dd> tag (definition description). <dl> <dt>Coffee</dt> <dd>Black hot drink</dd>
HTML
Page 9
<dt>Milk</dt> <dd>White cold drink</dd> </dl> Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, etc.
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
HTML
Page 10
Attribute:
Border (pixels)
Specifies the width in pixels of the border of the frame around a table.Example:
Code
<table border="5" summary="Example table showing the use of the border attribute."> <tr> <td>Cell1</td> <td>Cell2</td> <td>Cell3</td> </tr> <tr> <td>Cell4</td> <td>Cell5</td> <td>Cell6</td> </tr> </table> Cell 1 Cell 4
View
Cell Cell 3 2 Cell Cell 6 5
CellSpacing (length)
Defines the space to be left between cells and between the table border and the cell border that's closer to it.Example: Code <table cellspacing="10" border="1" summary="Example table showing the use of the cellspacing attribute."> <tr> <td>...Content...</td> <td>...Content...</td> </tr> </table> View ...Content... ...Content...
CellPadding (length)
Defines the space to be left between the border of a cell and it's content. It works as cells' margins.Example: Code <table cellpadding="10" border="1" summary="Example table showing the use of the cellpadding attribute."> <tr> <td>...Content...</td> <td>...Content...</td> HTML View ...Content... ...Content...
Page 11
</tr> </table>
I. Width (length)
Specifies the desired width of the entire table.
Align
This attribute have been deprecated Sets the alignment of the table. Possible values are (case-insensitive):

left: The table is aligned to the left of the available space. center: The table is aligned to the center of the available space. right: The table is aligned to the right of the available space.
Summary (text)
Provides a summary of the table purpose and structure.
HTML
Page 12
ADDING GRAPHICS
The Image Tag

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image: <img src="url" />
Attribute: Alt:
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: <img src="boat.gif" alt="Big Boat" /> The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.
Height and Width Tags:
Specifies the height and width of the image. If the real height and width are specified, it loads faster than one without the dimensions, because the browser doesn't have to calculate it after downloading. Example: <IMG SRC="icondepo.gif" WIDTH=75 HEIGHT=150> The height and width doesn't have to be it's real values. For example, if I wanted a smaller signature-type footer that's the same as my header, I could use the same image, only the height and width would be specified smaller (and thus would be faster). Example: <IMG SRC="nameofimage.gif" WIDTH=28 HEIGHT=100> Page 13
HTML
Align Images: o left or right - aligns to the side and wraps the text above, around, and below it. o top - aligns with the tallest item available. o texttop - aligns with the tallest text character available. o middle - aligns the baseline of the current line with the middle of the image. o absmiddle - aligns the middle of the current line with the middle of the image. o baseline - aligns the bottom of the image with the baseline of the current line. o bottom - aligns the bottom of the image with the baseline of the current line. o absbottom - aligns the bottom of the image with the bottom of the current line. Example: <IMG SRC="nameofimage.gif" ALIGN=RIGHT WIDTH=40 HEIGHT=125> Border around Graphic: Specifies the Border thickness in pixels, including 0. This is also useful for images that are links, with no border. Example: <IMG SRC="nameofimage.gif" WIDTH=50 HEIGHT=125 BORDER=0> Vertical Space and Horizonal Space Around Graphic: Specifies vertical and horizontal space around the image. This is useful for aligned images so the text will be a little padded and not wrap against the image. Example: <IMG SRC="nameofimage.gif" ALIGN=RIGHT WIDTH=40 HEIGHT=125 VSPACE=5 HSPACE=5>
How to add a Background to your page:
To add a background image to your page, do the following: <HTML> <TITLE>My Homepage</TITLE> <HEAD> <BODY BACKGROUND="nameofimage.gif"> This is how your page should look from the top to where you add your background tag.In the above example your background could also be a jpg file and not a gif. (My backgrounds are jpg's.) So you would just add .jpg in the place .gif.
HTML Links
A link is the "address" to a document (or a resource) on the web. HTML Page 14
Hyperlinks, Anchors, and Links:

In web terms, a hyperlink is a reference (an address) to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An anchor is a term used to define a hyperlink destination inside a document. The HTML anchor element <a> is used to define both hyperlinks and anchors.
We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document.. An HTML Link: Link syntax: <a href="url">Link text</a> The start tag contains attributes about the link.The element content (Link text) defines the part to be displayed. Note: The element content doesn't have to be text. You can link from an image or any other HTML element.
Attribute:
THE HREF : The href attribute defines the link "address".This <a> element defines a link to ctgroup: <a href="http://www.ctgroup.in/">Visit us</a> The code above will display like this in a browser:
The target Attribute:
HTML
Page 15
The target attribute defines where the linked document will be opened.The code below will open the document in a new browser window:
HTML
Page 16
Example
<a href="http://www.ctgroup./" target="_blank">Visit us</a>
HTML
Page 17
PRACTICAL FILE OF HTML
Submitted To:Submitted By:Ms. Ambrinder Kaur Ranjit Singh (Dept of CA) BCA 2nd sem.
HTML Page 18
1103395
HTML
Page 19

Practical File OF Web Development: Submitted To:-Submitted By

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Practical File OF Web Development: Submitted To:-Submitted By

Diunggah oleh

Hak Cipta:

Format Tersedia

CT INSTITUTE OF MANAGEMENT AND TECHNOLOGY, JALANDHAR