html

36
-By V.Gouthaman

Upload: gouthaman-v

Post on 18-Jan-2015

1.469 views

Category:

Education


0 download

DESCRIPTION

Basics of HTML, Tags used in HTML.

TRANSCRIPT

Page 1: HTML

-ByV.Gouthaman

Page 2: HTML

INTRODUCTIONHTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. It provides a

means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items. It allows images and objects to be embedded and can be used to create interactive forms. It is

written in the form of HTML elements consisting of "tags" surrounded by angle brackets within the web page content. It can load scripts in languages such as JavaScript which affect the behavior of HTML webpages. HTML can also be used to

include Cascading Style Sheets (CSS) to define the appearance and layout of text and other material. The W3C, maintainer of both HTML and CSS standards, encourages the

use of CSS over explicit presentational markup.

Page 3: HTML

MarkupHTML markup consists of several key components, including elements (and their attributes), character-based data types, and character references and entity references. Another important component is the document type declaration, which specifies the Document Type Definition. As of HTML 5, no Document Type Definition will need to be specified, and will only determine the layout mode.

The Hello world program, a common computer program employed for comparing programming languages, scripting languages, and markup languages is made of 9 lines of code in HTML, albeit Newlines are optional:

Sample Program

<!doctype html><html> <head> <title>Hello HTML</title> </head> <body> <p>Hello World!</p> </body></html>

This Document Type Declaration is for HTML 5.If the <!doctype html> declaration is not included, most browsers will render using "quirks mode."

Page 4: HTML

VARIOUS HTML TAGS

Page 5: HTML

HTML documents are composed entirely of HTML elements that, in their most general form have

three components: a pair of element tags with a "start tag" and "end tag"; some element

attributes given to the element within the tags; and finally, all the actual, textual and

graphical[clarification needed], information content that will be rendered on the display. An

HTML element is everything between and including the tags. A tag is a keyword enclosed in

angle brackets.

Page 6: HTML

A common form of an HTML element is:

<tag>content to be rendered</tag>

The name of the HTML element is also the name of the tag. Note that the end tag's name starts with a

slash character, "/".

The most general form of an HTML element is:

<tag attribute1="value1" attribute2="value2">content to be rendered</tag>

By not assigning attributes most start tags default their attribute values.

Page 7: HTML

html tag ( <html> , </html> )

All the html documents should contain this html tags. All the contents should be typed inside these tags. This forms the base of the document. It tells the browser where the document starts and where it stops. Everything in the document goes inside <HTML>, except that <!DOCTYPE ...> (if you choose to use it) goes just before <HTML>.

Page 8: HTML

All normal webpages consist of a head and a 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.

Head and body tags

Page 9: HTML

<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>

Syntax for head and body tags

Page 10: HTML

HEAD SECTION

The head section of the webpage includes all the stuff that does not show directly on the

resulting page.

The <title> and </title> tags encapsulate the title of your page. The title is what shows in the top of your browser window when the

page is loaded.

Page 11: HTML

BODY SECTIONThe 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, including: * Text * Formatting * Resizing * Layout * Listing * Links * To local pages * To pages at other sites * To bookmarks

Page 12: HTML

* Images * Inserting images (GIF and jpg) * Adding a link to an image* Backgrounds * Colors * Images * Fixed Image* Tables* Frames* Forms* Metatags* Hexadecimal Colors

Page 13: HTML

BGCOLOR: background color of the page BACKGROUND: background picture for the page TEXT: color of the text on the page LINK: color of links that haven't been followed yet VLINK: color of links that have been followed ALINK: color of links while you are clicking on them BGPROPERTIES = FIXEDif the background image should not scroll TOPMARGIN: size of top and bottom margins

Page 14: HTML

LEFTMARGIN: size of left and right margins MARGINHEIGHT: size of top and bottom margins MARGINWIDTH: size of left and right margins onLoad: Script to run once the page is fully loaded onUnload onFocus onBlur STYLESRC: MS FrontPage extension SCROLL = YES | NOIf the document should have a scroll bar

Page 15: HTML

<A ...> is the cornerstone of HTML, the tag that makes hypertext hypertext. <A ...> is the tag you use to make hyperlinks: the text that you can click on in your web browser to go to another web page.

* HREF: URL you are linking to * NAME: name a section of the page * TARGET: which window the document should go in * TITLE: suggested title for the document to be opened * onClick: script to run when the user clicks on this anchor * onMouseOver: when the mouse is over the link * onMouseOut: when the mouse is no longer over the link * ACCESSKEY

All the above commands can be used in the tag <a ...></A> Closes the anchor

Page 16: HTML

<B> makes the text bold.

Sample:

I <B>really</B> like this idea.

Output:

I really like this idea.

Page 17: HTML

<P ...> indicates the start of a new paragraph. This is usually rendered with two carriage returns, producing a single blank line in between the two paragraphs:

<TITLE> states the title of the document. <TITLE> always goes in the <HEAD> section.

<U> underlines the enclosed text.

Page 18: HTML

<VAR> indicates a variable from a computer program.

<!-- ••• --> allows you to insert comments into an HTML document and have them completely ignored by the browser. This is useful for such things as revision histories and notes about how to improve the document.

For example, this code

<!-- Creation Date: June 21, 1996 --><!-- Modifications: --><!-- Sep 26, 1996: Added Links to Steve's Page --><!-- Oct 10, 1996: Updated product list -->

Page 19: HTML

<ADDRESS> denotes contact information for the author or organization of the web site.

<BGSOUND ...>

<BGSOUND ...>, MSIE, tells the browser to play a particular sound when the page is loaded.

* SRC: URL of the sound

* LOOP: how many times to play the sound

Page 20: HTML

<BIG>

<BIG> makes the text bigger.

<BLINK>

<BLINK> causes the text to blink.

<DIR ...>

<DIR ...> indicates that the listing is a directory, such as a directory of a web site or of an organization. <DIR ...> works with <LI ...> in the same way <UL ...> does, and is generally rendered the same way.

Page 21: HTML

<EMBED ...>

<EMBED ...> puts a browser plugin in the page. A plugin is a special program located on the client computer (i.e. not on your web server) that handles its own special type of data file. The most common plugins are for sounds and movies. The <EMBED ...> tag gives the location of a data file that the plugin should handle.

Page 22: HTML

<APPLET ...>

<APPLET ...> puts an applet in your page. In its simplest use, <APPLET ...> requires the use of CODE (to tell what applet file to load), WIDTH (to tell how wide the applet should be), and HEIGHT (to tell how tall the applet should be).

Page 23: HTML

<FONT ...>

<FONT ...> is the addictive drug of HTML. When you start using <FONT ...> you're likely to think it's the

coolest HTML tag ever created. You can set the sizes, faces and colours of the fonts on your web page, all

with understandable <FONT ...> tags.

Then, when you've loaded your web pages with a billion <FONT ...> tags, you find out the ugly side of <FONT ...>. You have to use it over and over to give your page the appearance you want. It doesn't work in tables unless you put <FONT ...> in every cell. If you want to change the appearance of the fonts in

your page you have to change every single <FONT ...> tag. <FONT ...> has taken over your

code.

Page 24: HTML

* SIZE: size of the font * COLOR: colour of the text * FACE: set the typestyle for text * POINT-SIZE * WEIGHT

All the above can be used in <FONT ...>

Page 25: HTML

<BLINK>

<BLINK> causes the text to blink.

<BLINK> was once reviled as the most obnoxious tag in HTML. Now it's mostly forgotten. MSIE does not even support <BLINK> anymore.

Page 26: HTML

<EM>

Indicates emphasis in a sentence.

<FORM ...> * ACTION: URL of the CGI program * METHOD: how to transfer the data to the CGI * NAME: name of this form * ENCTYPE: what type of form this is * TARGET: what frames to put the results in * onSubmit: script to run before the form is submitted * onReset: script to run before the form is reset

<FORM ...> indicates the beginning of a form. All other form tags go inside <FORM ...>. In its simplest use, <FORM ...> can be used without any attributes

Page 27: HTML

<I><I> italicizes the text.

<IMG ...><IMG ...> puts an image on the web page. <IMG ...> requires two attributes: SRC and ALT. ALT is always required in <IMG ...>SRC: where to get the picture ALT: text to show if you don't show the picture NAME LONGDESC: URL of a long description of the image WIDTH: how wide is the picture HEIGHT: how tall is the picture ALIGN = LEFT | RIGHT | TOP | TEXTTOP | MIDDLE | ABSMIDDLE | BOTTOM | ABSBOTTOM | BASELINEhow text should flow around the picture BORDER: border around the picture HSPACE: horizontal distance between the picture and the text

Page 28: HTML

VSPACE: vertical distance between the picture and the text ISMAP: is this a clickable map? USEMAP: name of the map definition LOWSRC: a version of the picture that isn't such a big file NATURALSIZEFLAG: meaningless NOSAVE: meaningless DYNSRC: play a movie file CONTROLS: show the buttons which control the movie LOOP = INFINITE | -1 | # of loopshow many times to loop the movie START = FILEOPEN | MOUSEOVERwhen to start playing the movie onLoad: script to runs after the image is downloaded SUPPRESS = TRUE | FALSEDon't show icons of images that haven't downloaded yet

Page 29: HTML

<MARQUEE ...>

<MARQUEE ...> creates a scrolling display. <MARQUEE ...> is an MSIE extension, but is now supported by NS 7. <MARQUEE ...> is often regarded as one of the "evil" tags, and that perception alone might be enough reason to not use it. However, used lightly and with taste (and understanding that it will never render everywhere), <MARQUEE ...> isn't such a bad tag. It can work well for announcements.

Page 30: HTML

<MENU ...>

<MENU ...> indicates the start a series of choices. It is usually rendered like <UL ...>.

<BR ...>

<BR ...> inserts a single carriage return. Whereas <P ...> indicates the start of a new paragraph, <BR ...> only implies a carriage return within the same paragraph. <BR ...> is usually rendered with a single carriage return.

Page 31: HTML

<BUTTON ...>

<BUTTON ...> creates a button. Unlike <INPUT ...>, <BUTTON ...> is a container which allows you to put regular HTML contents in the button, including text and pictures. Unfortunately, <BUTTON ...> does not degrade well, and so at this time it's best to stick with <INPUT ...>.

* TYPE: what type of button is this * onClick: script to run when the user clicks here * NAME: name of this button element * VALUE: the value sent with the form * DISABLED: disable this button * ACCESSKEY: shortcut key for this button * TABINDEX: tab order

All the above commands can be used in <BUTTON ...>

Page 32: HTML

<OL ...>

<OL ...> creates an ordered list. "Ordered" means that the order of the items in the list is important. To show this, browsers automatically number the list. Note in this example that the HTML does not give any numbers: the numbers are automatically made by the browser (which makes it easy on you the author).

Page 33: HTML

<TEXTAREA ...>

<TEXTAREA ...> indicates a form field where the user can enter large amounts of text. In most respects, <TEXTAREA ...> works like an <INPUT ...> field. It can have a name, a default value, script events such as onChange, and is sent to a CGI as a name/value pair. One main difference is that <TEXTAREA ...> is a container tag: it has a start tag ().

Page 34: HTML

NAME: name of this form field COLS: how many characters wide ROWS: how many rows WRAP = SOFT | HARD | OFFhow to wrap the text READONLY: don't let the user change the contents of the field DISABLED: don't let the user do anything with this field TABINDEX: tab order LANGUAGE = "JavaScript" | "JavaScript1.1" | "VBScript" | other languagescripting language onChange: Script to run when the user has changed the textarea onKeyPress: script to run when a key is pressed

Page 35: HTML

<TT> produces fixed width text.

<VAR> indicates a variable from a computer program.

<WBR> is for the situation where you have used <NOBR> to prevent line breaks in a section of text, and then you want to say "but you can break HERE if you want". <WBR> does not force a line break, it merely allows one:

Page 36: HTML