Html

Introducing HTML
 HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages. As its name suggests, HTML is a markup language.
1. Hypertext refers to the way in which Web pages (HTML documents) are linked
together. When you click a link in a Web page, you are using hypertext.
2. Markup Language describes how HTML works. With a markup language, you
simply "mark up" a text document with tags that tell a Web browser how to
structure it to display.

Advantages of HTML
 It requires a text editor. No special software is required to run HTML pages.
 It is Platform Independent.
 Errors are easy to track in HTML pages.
 It is not a programming language; hence compilation of code is not required.
 It does not require any expensive licenses to buy or upgrade.
 Finding an Error is easy.

Disvantages of HTML
 It cannot create Interactive web pages.
 It cannot perform any calculations.
 It cannot display parameters such as date.
 Scripting languages like VBScript or Java Script are required to handle
caculations,validations and events in HTML documents.
 No separate debugger is provided.
 Complex HTML code is hard to read and understand.
 Syntax errors are not identified or displayed by HTML.

HTML Basic Tags
 The basic structure for all HTML documents is simple and should include the
following minimum elements or tags:
 <html> - The main container for HTML pages
 <head> - The container for page header information
 <title> - The title of the page
 <body> - The main body of the page

The <html> Element:
 The <html> element is the containing element for the whole HTML document. Each
HTML document should have one <html> and each document should end with a
closing </html> tag.
 Following two elements appear as direct children of an <html> element:
 <head>
 <body>
 As such, start and end HTML tags enclose all the other HTML tags you use to
describe the Web page.

The <head> Element:
 The <head> element is just a container for all other header elements. It should be the
first thing to appear after the opening <html> tag.
 Each <head> element should contain a <title> element indicating the title of the
document
The <title> Element:
 You should specify a title for every page that you write inside the <title> element.
This element is a child of the <head> element). It is used in several ways:
 It displays at the very top of a browser window.
 It is used as the default name for a bookmark in browsers such as IE and Netscape.

 Its is used by search engines that use its content to help index pages.
 Therefore it is important to use a title that really describes the content of your site.
The <title> element should contain only the text for the title and it may not contain
any other elements.
The <body> Element:
 The <body> element appears after the <head> element and contains the part of the
Web page that you actually see in the main browser window, which is sometimes
referred to as body content.
 A <body> element may contain anything from a couple of paragraphs under a
heading to more complicated layouts containing forms and tables.

html - text
 Text is the backbone of any web page. It plays an double role; it provides content for
web surfers to enjoy as they skim through articles and articles of information, but it
also gives Search Engines and Spiders keywords and meta data. It is because of text
on web pages that we have a network of seemingly endless information available at
our fingers.
html - paragraph text
 Any text containing more than a few lines (or sometimes even more) should exist
inside of a paragraph tag <p>. This tag is reserved specifically for blocks of text, such
as those you would expect to find inside your favourite novel.

html - headings 1:6
 HTML has heading tags which can be used as headers or subheaders. By placing
text inside of an <h1> heading tag, for example, the text displays bold and the size
of the text increases to a 24pt font size. Heading tags are numbered 1 through 6,
and they change size depending on which tag you choose, with 1 being the largest
font size at 24pt, and 6 being the smallest font size at 8pt.
html - line breaks
 A line break is used in HTML text elements, and it is the equivalent of
pressing Enter or Return on your keyboard. In short, a line break ends the line you
are currently on and resumes on the next line.
html - align attribute
 If you wish to change the horizontal alignment of your elements, you may do so
using the align attribute. It allows you to align things left, right, or center. By
default, most elements are automatically aligned left, unless otherwise specified.

html - font size
 Set the size of your font with size. The range of accepted values goes from 1 -- the
smallest, to 7 -- the largest. The default size of a font is 3.
html - font color
 Set the color of your font with color.
html - hypertext reference (href)
 A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires
a valid URL in order to properly direct a user to a different location. In other words,
this Hypertext Reference is where users will navigate to if they do click on this link.

html - comments
 Comments are a great asset to new developers and a great way to place little notes to
yourself reminding yourself what pieces of code are doing what. Comments are also
great ways to troubleshoot bugs and code errors, as they give you the ability to
comment out lines of code one at a time to search for the exact line causing
problems.
html - lists
 HTML lists appear in web browsers as bulleted lines of text. There are actually three
different types of HTML lists, including unordered lists (bullets), ordered lists
(numbers), and definition lists (think: dictionaries). Each list type utilizes its own
unique list tag.

html - unordered lists
 An unordered list (<ul>) signifies to a web browser that all list items contained
inside the <ul> tag should be rendered with a bullet preceding the text. The default
bullet type for most web browsers is a full disc (black circle), but this can be
adjusted using an HTML attribute called type.
html - ordered lists
 An ordered list is defined using the <ol> tag, and list items placed inside of an
ordered list are preceded with numbers instead of bullets.
 The numbering of an HTML list can be changed to letters or Roman Numerals by
once again adjusting the type attribute.
 <ol type="a"> <ol type="A"> <ol type="i"> <ol type="I">
 The start attribute allows you to further customize an HTML ordered list by setting
a new starting digit for the ordered list element.

ATTRIBUTES OF <BODY> TAG
1. Alink:The alink attribute specifies the color of an active link in a document (a link
is activated when it is clicked).
2. Vlink:The vlink attribute specifies the color of visited links in a document.
3. Bgcolor:The bgcolor attribute specifies the background color of a document.
4. text :The text attribute specifies the color of the text in a document.
5. Style:The <style> tag is used to define style information for an HTML document.
6. Background: The background attribute specifies a background image for a
document.

<div> Tag
 The <div> tag defines a division or a section in an HTML document.
 The <div> tag is used to group block-elements to format them with CSS.
 Attributes
1. id
 The id selector is used to specify a style for a single, unique element. The id selector
uses the id attribute of the HTML element, and is defined with a "#".
2.Class
 The class selector is used to specify a style for a group of elements.
3.Dir
 The <dir> tag is used to list directory titles.

4.Style
 The <style> tag is used to define style information for an HTML document.
 Inside the <style> element you specify how HTML elements should render in a
browser.

1.Centre Tag
 The <center> tag is used to center-align text.
2.<s> Tag
 It is used to display strike through text.
3.<big> Tag
 Make text bigger than normal.
4.<small> Tag
 Make text smaller than normal.
5 <pre> Tag
 The <pre> tag defines preformatted text.
 Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks.

<HR>TAG
 HR tag is used to draw Horizontal lines(rules) in your document.
 Attributes of HR tag.
1. Align: The align attribute specifies the alignment of a horizontal line. It can have
left/right/center values.
2. Width: The width attribute specifies the width of a horizontal line, in pixels or
percent.
3. NOSHADE: Normally the line of HR is shaded, so that, it looks like a 3D line. But
if no shade attribute is specified, the HR line will be a 2D-line,with blank colour.
4. Color: Set color to the line.
5. Size: This attribute specifies the thickness of the line.

<img> Tag
 The <img> tag defines an image in an HTML page.
 Attributes.
1. SRC:This defines the name of the image file.
2. Height and Width: These attributes specify the height and width of the image.
3. Border: This specifies the border of the image.
4. Hspace:The hspace attribute specifies the whitespace on left and right side of an
image.
5. Vspace:The vspace attribute specifies the whitespace on top and bottom of an image.
6. Allign:This attribute describes how the image should be aligned with respect to the
surrounding text.Vlaues are top,bottom,centre/middle,left and right.

6. LOWSRC:This Attribute indicates the absolute or relative location of a low
resolution version of an image.
7. ALT:The value of this attribute should be some text describing the image,

HTML Tables
 A table is divided into rows (with the <tr> tag), and each row is divided into data
cells (with the <td> tag). td stands for "table data," and holds the content of a data
cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
 Tables are defined with the <table> tag.
Tags used in Table.
1.<table>: Defines a table.
2. <th>:Defines a header cell in a table.
3. <tr>: Defines a row in a table.
4. <td>: Defines a cell in a table.
5. <caption>: Defines a table caption.

6.<colgroup>: Specifies a group of one or more columns in a table for formatting.
7.<col>:Specifies column properties for each column within a <colgroup> element.
8. <thead>:Groups the header content in a table.
9. <tbody>:Groups the body content in a table.
10. <tfoot>:Groups the footer content in a table

Attributes
1. Align: This specifies the alignment of the table with respect to the browser
window.values-left,right and corner.
2. Width: The width attribute specifies the width of a table. If the width attribute is
not set, a table takes up the space it needs to display the table data.
3. Border: The border attribute specifies if a border should be displayed around the
table cells or not.
4. Cellspacing:The cellspacing attribute specifies the space, in pixels, between cells.
5. Cellpadding:The cellpadding attribute specifies the space, in pixels, between the
cell wall and the cell content.
6. Bgcolor:The bgcolor attribute specifies a background color of a table.
7. Bordercolor:Sets the color of the border of all table cells.

8. height: The height attribute specifies the height of a cell.
9 Align :The align attribute specifies the horizontal alignment of the content in a cell.
10.Rowspan: This will merge the current cell with a specified number of its adjacent
cells on the same column.
11.Colspan: This will merge the adjacent cell with a specified number of its adjacent
cells on the same column.
12.Embedding tables:
 Two or more tables can be inserted within each other in a single web page
i.e<Table>can be nested within another table tag. This is known as embedding of
Tables.

MARQUE TAG
 The markuee Tag is used to display a scrolling text message within a document.
 Attributes:
1)BEHAVIOR: Indicates type of scrolling ,Values are scroll/alternate/slide.
2) DIRECTION: This attribute specifies scrolling direction of the MARQUEE text.
The values are Left: This scrolls the text from right to left.
Right: This scrolls the text from left to Right.
3) SCROLLAMOUNT: Indicates how far(in numbers of pixels)marquee text shifts
between redraws.
4) SCROLLDELAY: Indicates how often(in million seconds)the marquee text
redraws. Increase the value of i.e n.slow the scrolling action.

HTML Frame
 Frame divides browser window into several parts through which we can see more
than one web page at a time. Multiple scrollable sections can be created using
frames. Each HTML document is called a ‘frame’ and each frame is independent of
others. Frame page ac be hyperlinked.
 The <frame> tag defines one particular window (frame) within a <frameset>.
 Each <frame> in a <frameset> can have different attributes, such as border,
scrolling, the ability to resize, etc.

Attributes
1.src:The src attribute specifies the location of the document.
2.Frameborder:The frame border attribute specifies whether or not to display a border
around a frame.

3.Marginwidth :The margin width attribute specifies the width between the content and
the left and right sides of the frame, in pixels.
4. Marginheight:The marginheight attribute specifies the height between the content and
the top and bottom of the frame, in pixels.
5. noresize: The noresize attribute specifies that a <frame> element cannot be resized by
the user. By default, each <frame> in a <frameset> can be resized by dragging the
border between the frames. However, this attribute locks the size of a frame.
6. name: It is used to assign the name to the frame for targeting and linking purpose .
7. scrolling: The scrolling attribute specifies whether or not to display scrollbars in a
<frame>. By default, scrollbars appear in a <frame> if the content is larger than the
<frame>.

a. Row Attribute:
 This rows attribute divides the screen into Horizontal frames.
b. Cols Attribute
 The Cols attribute divides the browser divides the browser window into vertical
frames depending upon the width defined.
c) Nested Frames
 You can nest a <frameset>tag within another <frameset>tag.

Linking frame or Target attribute
 Linking is one advantages of using frame. In linking there is menu/links on the
left side of browser and the content is displayed on the right side while clicking on
links.

iframe
 The <iframe> tag specifies an inline frame.
 An inline frame is used to embed another document within the current HTML
document.
 Attributes:
1. src: The src attribute specifies the address of the document to embed in the
<iframe>.

Image Mapping
 Image Mapping is a single graphic image that consist of number of “hyperlinks”
incorporated within an image. The specific area mapped within an image are
known as hotspots. Each hotspot is a link. This regions are clickable.
 Image format which can be used is either JPEG or GIF.
 MAP file is a text file that contains the information of an Image and the mapped
areas of an image. These areas can be rectangles,circles,or polygons defined in an
image and are done by specifying screen coordinates in pixels.
 They are of two types
1. Client side image Map.
2. Server side Image Map.

Client side image Map.
 Client side image maps are not dependent on server. They are executed on client
machine from web browser itself. Since all information for a client-side image map is
loaded along with the image, it executes more quickly than server-side image map.
 In order to mention that image map is client side, use USEMAP attribute of the
<ing>,<map>and <area>tags are used to define hotspot in am image. The <map> tag
ha s name attribute which is referenced within the <img>tag with USEMAP attribute.
 For specifying the areas of the hotspot, the <area>tag is used within<map>tag.
 The attributes of<area> tag are as follows
1. Shape-specifies as Rectangle, circle and polygon.
2. Coords-specifies coordinates for rectangle, circle and polygon.
3. Alt-specifies alternate text given to hotspot.

4.Href:specifies path of html file or URL of website.
RECTANGLE(RECT):This requires the upper left and right bottom(X,Y)coordinates.
<area shape=“rect” coords=“22,37,123,97”alt=“rectangle” href=“page1.html>
CIRCLE(CIRCLE):This requires the coordinates of center point and radius(in pixels).
<area shape=“circle” coords=“406,38,30”alt=“circle” href=“page2.html>
POLYGON(POLY):This requires 3 or more pair of coordinates to form ploygon.
<area shape=“poly” coords=“48,169,142,234,50,248”alt=“circle” href=“page3.html>

Server side image Map.
 When a server side image map is displayed on the browser ,the program that
executes the link is placed on the server. The browser activates program on the
server by sending x and y coordinates of the position where the hyperlink k is
created. On receiving these coordinates the program on the server looks at the
map file for close match to these coordinates and then loads the file that is closest
to this range.

HTML Forms
HTML forms are used to pass data to a server.
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
<input> <label>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>

The Input Element and Text Field
 The <input> element is used to select user information.
 An <input> element can vary in many ways, depending on the type attribute. An
<input> element can be of type text field, checkbox, password, radio button, submit
button, and more.
Text Fields
 <input type="text"> defines a one-line input field that a user can enter .
Password Field
 <input type="password"> defines a password field.

Radio Buttons
 <input type="radio"> defines a radio button. Radio buttons let a user select ONLY
ONE of a limited number of choices.
Checkboxes
 <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or
MORE options of a limited number of choices.
Submit Button
 <input type="submit"> defines a submit button.
 A submit button is used to send form data to a server. The data is sent to the page
specified in the form's action attribute. The file defined in the action attribute usually
does something with the received input.

RESET BUTTON
 The Reset Button usually used along with SUBMIT button resets the value of the
form to its original states.
Button
 It is used for clicking and activating a function. It does not submit data in the form.
Select tag<select>
 The <select> element is used to create a drop-down list.
 The <option> tags inside the <select> element define the available options in the list.
Attributes:
1. Name: The name attribute specifies the name for a drop-down list. The name attribute
is used to reference elements in a JavaScript, or to reference form data after a form is
submitted.

2. SIZE: Allows to specify the number of list items to be displayed at one time
eg.size=value.
3. MULTIPLE: It is used to select more than one selection from the same list.
Text Area tag
 The <textarea>-----</textarea>is used to create multiline textbox or large editable
area .It is useful in those forms who you want detailed feedback with multiline
entries.
Attributes:
1. Name:”text” attribute sets the name of the textarea to the script on the server when
the form is submitted.
2. Cols=“number:”specifies the width of the text entry area as rows.
3. Rows=“number:”specifies the height of the text entry as rows.

<input type =“file”>
 This attribute is used for uploading the files.
Inserting Sound and Video
Inserting audio and video increases the effectiveness of web pages.
Formats
1. WAV format developed by Microsoft and IBM.I t is audio standard for window
platform.
2. AIFF(Audio Interchange File Format)was developed by Apple and is mainly used
MAC platform.
3. Ra(Real Audio Format)is a lower quality audio, but loads much more quickly due to
file size which is much smaller WAV,AIFF format.

4. .MPEG/.MPG(Moving Pictures Experts Group):format does not occupy space and
gives vey good sound quality.
5. .AU(Audio):is a Sun Microsystems format. It is for UNIX platform.
6. .MIDI(Musical Instrument Digital Interface):format is basically music industries
standard format that uses very less disk space than that of WAV formats. This
format is used for instrumental music.
Linking an Audio/Midi files:
 Hyperlink the audio files format that would like to use in web page. Using <A>
anchor tag.
<bgsound>
 This tag is used to specify a background sound for a web page and to define it's
attributes.

Attributes:
1. <bgsound src="">
 This attribute is used to define what the source of the sound is. Insert the file name and
file path if necessary here.
2. <bgsound loop="">
 The loop attribute is used to define how many times the sound will repeat itself.
Between the quotes specify how many times you want the sound to repeat. Setting
loop to "infinite" or "-1" will cause the sound to repeat indefinitely.
Embed Tag
 This tag is used to insert audio as well as video both.

Attributes:
1. SRC: Specify the name of audio or video file that is embeded in HTML page.
2. Autostart=“true/false” True values plays the music when page is loaded .Using
“false” as a value will mean that the sound will have to play when the user user
clicks on the play button.
3. Hidden=“true/false”False value shows the console(Default) where as true value
hide the console so you can only listen the audio or video.
4. Voulme:Sets the volume of music.1 to 100,50 being the default value.
5. Width:Specifies the width of console.
6. Height:Specifies the height of console.
7. Controls=“consoles/small consoles” Value Console gives the complete console
with play, stop and pause button and small consoles displays play and stop button.

Html

More Related Content

What's hot

Similar to Html

Recently uploaded

Html