Hyper Text Markup Language (HTML)

HTML is a tag based markup language standardized by W3C (World Wide Web Consortium) with latest version 4.01. Used to provide effects on different kind of contents used on the web including Text, Sound, Images, and Animation etc.

It provides static contents without any manipulation power. It is case in-sensitive.

What is Tag?

A tag is code defined by W3C which has the fix meaning interpreted by some Web Browser. The tag is always enclosed in < and > symbols.

<B></B> , <I></I>, <FONT></FONT> etc. are some of the examples of tags.

Types of Tags

1. Singular Tag – Do not have any closing tag. E.g. <IMG>, <BR> , <HR> etc.

2. Paired Tag – Having opening and closing both the tags. E.g <HTML></HTML>, <BODY></BODY> etc.

Attributes

- Each of the tag have some set of extra properties attached with them called Attributes.

E.g <BODY> tag provides attributes like text, bgcolor, background etc.

- Attributes are written inside the opening section of the tag.

…

</BODY>

File Extensions

- Files are saved as .htm or .html extension

Editor and IDEs

1. Notepad

2. MS Front Page

3. Macromedia Dreamweaver

4. Hot Dog

5. First Page

Etc.

Structure of HTML Page

- It is divided into two sections

<HEAD></HEAD> section – To provide tags that do not display any content on page

<BODY></BODY> section – To provide contents displayed on the page.

<HTML>

</HTML>

 Tag

This the comment tag

<HTML>…</HTML> Tag

Start and End of a HTML document

<HEAD>…</HEAD> Tag

Sub tag of <HTML> tag which defines the heading section of a HTML document. It contains some other tag like <TITLE>,<SCRIPT>,<STYLE>,<LINK>,<BGSOUND>,<BASE>,<META> etc within it.

<BODY>…</BODY> Tag

Sub tag of <HTML> tag which defines the body section of a HTML document. It contains actual data including text, graphics, sound, animations, applets and objects within it.

Attributes of <BODY>

Some of the tags have some more properties attached with them, called attributes.

bgcolor = “background color”

text = “foreground color”

link = “color of links”

alink= “color of active links”

vlink= “color of visited links”

background= “image file name”

bgproperties = “fixed”

leftmargin = “n”

topmargin = “n”

Using Colors

- Colors can be provided as color name or color code

- Color codes are made of six hexadecimal digits 2 for red, 2 for green and 2 for blue

- #RRGGBB

Example

Red #FF0000

Green #00FF00

<BGSOUND> Tag

Sub tag of <HEAD>, used to set a sound which runs which webpage starts

Attributes

SRC= “sound file name – wav, mid, au, snd extension”

LOOP = “n or –1”

Example

<BASE> Tag

Sub tag of <HEAD>, used to set the default working directory for files

Attribute

HREF = “directory Name”

<TITLE>…</TITLE> Tag

Sub tag of <HEAD> used to set title text of the web page

Example

<title>Welcome to my website</title>

<META> Tag

Sub tag of <HEAD> used to provide user info and web page information.

Attributes

name = “name of meta field”

content = “value of meta field”

Eg. <META name=”Generator” content = “IPM Ghaziabad”

<B>…</B> Tag

Sub tag of <BODY> used to make the contained text as bold.

<STRONG>…</STRONG> Tag

Similar to <B> tag

<I>…</I> Tag

Sub tag of <BODY> used to make the contained text as Italic.

<EM>…</EM> Tag

Emphasis tag. Similar to <I>

<U>…</U> Tag

Sub tag of <BODY> used to underline the contained text.

<S>…</S> Tag

Sub tag of <BODY> tag used to ~~Strikethrough~~ the contained text.

<SUP>…</SUP> Tag

- To make the superscript

<SUB>…</SUB> Tag

- To make the subscript

Example

X<sup>2</sup>+Y<sub>1</sub>=C

Gives

X²+Y₁=C

<FONT>…</FONT> Tag

Sub tag of <BODY> tag used to set font name, color and size of contained text.

Attributes

FACE = “font name”

COLOR = “color name or color code”

SIZE = “ number “ – number can be 1 to 7 only. (1 –8pt, 7-36pt)

<BIG>…</BIG> Tag

Sub tag of <BODY>, to increase the size of the enclosed text by 4 points.

<SMALL>…</SMALL> Tag

Sub tag of <BODY>, to decrease the size of the enclosed text by 4 points.

<P>…</P> Tag

Sub tag of <BODY>, to create paragraphs.

Attributes

Align = “Left” | “Center” | “Right”

Heading Styles

<H1>…</H1> Tag

Define Heading Style One – Biggest one (36 point)

<H2>…</H2> Tag

Define Heading Style Two

<H3>…</H3> Tag

Define Heading Style Three

<H4>…</H4> Tag

Define Heading Style Four

<H5>…</H5> Tag

Define Heading Style Five

<H6>…</H6> Tag

Define Heading Style Six – Smallest one – 8 point

<BR> Tag

Sub tag of <BODY>, to line break

<HR> Tag

Sub tag of <BODY>, to create a horizontal line

Attributes

Align = “left” | “center” | “right”

Size = “height in pixels”

color = “color of line”

width = “ number of pixels or percentage of width”

noshade – Solid line

Example

<MARQEE>…</MARQUEE> Tag

Sub tag of <BODY>, used to create movable items called marquee.

Attributes

align = “top” | “middle” | “bottom’

behvior = “scroll” | “slide” | “alternate”

bgcolor = “background color of marquee”

direction = “left” | “right”

loop = “n or –1”

scrollamount = amount of movement, in pixels, by which the marquee text will move.

scrolldelay = delay, in milliseconds, before the marquee text will begin to move.

width= “ no of pixels or percentage”

height = “no of pixels or percentage”

border = “no of pixels”

From MS FrontPage

Type marquee text and select it

Insert à Web Components à Dynamic Effects à Marqee

<IMG> Tag

To set an image on the web page

Atrributes

src = “image file name – jpg,gif”

align=”left|right”

width = “no of pixels”

height” = “no of pixels”

lowsrc = “low resolution image file”

alt = “alternative text”

MS Front Page

Insert à Picture

dynsrc = “dynamic source file –avi”

start = “fileopen” | “mouseover”

loop = “ n or –1”

loopdelay = ”no of seconds”

hspace = “no of pixels”

vspace = “no of pixels”

border = “ no of pixels”

<A>…</A> Tag

Sub tag of <BODY> used to create links and anchors. Links are used to move to certain webpage, open a graphics file, run a music or video, download files etc. Anchor are bokmarks to directly switch to some specific location within a web page.

Attributes

href = “URL”

title = “title text be shown by hyper link as tooltip”

target = “window or frame name to open the URL”

name = “name of anchor”

<TABLE>…</TABLE> Tag

Sub tag of <BODY>, to create a table

Attributes

border = “pixels”

width = “no of pixels or percentage”

height = “no of pixels or percentage”

bgcolor = “background color”

background = “image file”

align = “left” | “center” | “right”

cellspacing = “no of pixels”

cellpading = “no of pixels”

bordercolor = “color”

bordercolorlight = “color”

bordercolordark = “color”

<CAPTION>…</CAPTION> Tag

Sub tag of <TABLE> to set the caption of the table

<TR>…</TR> Tag

Sub tag of <TABLE> to create a row

<TD>…</TD> Tag

Sub tag of <TD> which represents a column of the table

Attribute

width = “no of pixels or percentage”

height = “no of pixels or percentage”

valign = “top” | “middle” | “bottom”

align = “left” | “center” | “right”

bgColor = “backgournd color”

background = “background image”

borderColor = “color”

borderColorlight = “color”

borderColordark = “color”

rowspan = ”n”

colspan = ”n”

<UL>…</UL> Tag

Tag used to create Bulleted (UN-Ordered) list

Attributes

Type = “Disc” | “Circle” | “Square” – Default is “Disc”

<OL>…</OL> Tag

Tag used to created a Numbered (Ordered) List

Attributes

Type = “1” | “A” | “a” | “I” | “i” – default is “1”

Start = “number”

<LI>…</LI> Tag

Sub-tag of <UL>, <OL> tags to define a list item

Attributes

Type = “Disc” | “Circle” | “Square” | “1” | “A” | “a” | “I” | “i” – default is “1”

Value = “Number” - for <OL>

<DL>…</DL> Tag

Tag used to create Definition list

<DT>…</DT> Tag

Sub-tag of <DL> tag to define the Defined Term

<DD>…</DD> Tag

Sub Tag of <DT> tag to define the definition of a definition term

Example of <DL>, <DT> and <DD>

<p>Computer System

<dl>

<dt>Hardware</dt>

<dd>Components that we can touch.</dd>

<dt>Software</dt>

<dd>Set of programs used to run the computer.</dd>

</dl>

<APPLET>…</APPLET> Tag

To used to load the Java Applets into the web browser

Attributes

code = “appletName.class”

codebase = “directory name”

hspace = “pixels”

vspace = “pixels”

align = “left” | “center” | “right” | “top” | “bottom”

<PARAM> Tag

Sub tag of <APPLET> tag to define the parameters to passed to the applet

Attributes

name = “parameter name”

value = “value of the parameter to be passed”

valuetype = “Type of value to be passed”

Example of <APPLET> and <PARAM> tags

</applet>

<OBJECT> Tag

Tag used to define the objects like ActiveX objects, Flash and other kind of files.

Attributes

id = “object name”

border = ”pixels”

hspace= “pixels”

vspace = “pixels”

width = “pixels”

height = “pixels”

classid = “class id of the object from registry”

Example of <object> Tag

height="275" classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02">

</object>

Creating Forms

Forms contain some controls within it like Single line TextBox, Multiline Textbox, CheckBox, Radio Button, Command Button etc. Forms are created using <FORM> tag.

<FORM>…</FORM> Tag

To create a form

Attribute

Method = “Get” | “Post”

Action = “URL to submit the data”

Name = “name of the form”

<INPUT> Tag

Sub tag of <FORM> tag to create form controls

Attributes

Value = “text attached with a field”

Size = “no of characters to be displayed” – for text, password

Maxlength = “max. no. of characters to be allowed in textbox or password field”

Checked – to make a radio or checkbox to be selected as default

Name = “name of the field”

Tabindex = “index number”

src = “image file name” – for image field

alt = “alternate text” – for image field

width = “pixels” for image field

height = “pixels” for image field

Character Codes

  Space

Numeric Codes

&#number;

<DIV></DIV> -- A division tag to club tags within it to perform activity on that tags

<SPAN></SPAN> -- Again a division tag like <DIV> to do not insert any line break

<META> Tag – Provide meta information about the webpage

Attributes

Name=”fieldname”

Content=”value of field”

http-equiv=”instructions to browser”

Examples

Interview in Bangalore

like

Sunday, August 28, 2016

HTML

Example of <DL>, <DT> and <DD>

Example of <APPLET> and <PARAM> tags

Character Codes

No comments:

Post a Comment

About Me

Blog Archive