-By V.Gouthaman

-By V.Gouthaman

INTRODUCTION HTML, 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.

Markup HTML 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."

VARIOUS HTML TAGS

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.

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.

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

Head and body tags 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.

Syntax for head and body tags <html> <head>  </head> <body>  </body> </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.

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

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

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

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 onUnloadonFocusonBlurSTYLESRC: MS FrontPage extension SCROLL= YES | NOIf the document should have a scroll bar

<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

<B> makes the text bold.Sample:I <B>really</B> like this idea.Output:I really like this idea.

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

<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

<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

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

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

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

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

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

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

<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

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

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

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

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

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

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

<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 ().

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

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

-By V.Gouthaman

-By V.Gouthaman

Presentation Transcript