HKNS

HTML Tutorial

URLs(Uniform Resourse Locator) in HTML

This is an example of mailto URL HK Net Solutions - mailbox is support@hknspl.com

The syntax for above URL is :-
< A HREF="mailto:support@hknspl.com"> HK Net Solutions -mailbox is support@hknspl.com < /A>

Function :

By using the mailto URL one can allow the user to send an e-mail message typically using the e-mail address as a hot link. This URL takes a valid e-mail address as parameter and has to be used in conjunction with an anchor element i.e < A < /A> . When this link is clicked, the user is prompted for the message to be sent to the addressee.


This is an example of HTTP URL http://www.upload.com/home/teach html.html

The syntax for above URL is :-
< A HREF="http://www.upload.com/home/teach html.html">http://www.upload.com/home/teach html.html < /A>

Function :

By using the http URL one can retrieve HTML documents on the World Wide Web. In the above example a file 'teach html.html' will be accessed from the directory '/home' on the HTTP server 'www.upload.com'

This is an example of File Url HTP ftp://gated.cornell.edu/pub/cu-seeme/mainframe.html

The syntax for above URL is :-
< A HREF="ftp://gated.cornell.edu/pub/cu-seeme/mainframe.html"> ftp://gated.cornell.edu/pub/cu-seeme/mainframe.html < /A>

Function :

By using the htp URL one can transfer files from the server to the user's machine and vice-versa. This is generally used for the transfer of data and text files and has the capability of transferring more than one file at the same time to the same host provided it is supported by the same client software or viewer.

This is an example of gopher URL gopher://ftp.cc.utexas.edu:3003

The syntax for above URL is :-
< A HREF="gopher://ftp.cc.utexas.edu:3003">gopher://ftp.cc.utexas.edu:3003 < /A>

Function :

The Gopher URL is used by Gopher clients to connect to various resources. This system uses menu lists. It supports most of the protocols on the internet Except HTTP.

This is an example of WAIS URL WAIS://WAIS.nectar.gods

The syntax for above URL is :-
< A HREF="WAIS://WAIS.nectar.gods">WAIS://WAIS.nectar.gods < /A>

Function :

WAIS or Wide Area Information Servers is a protocol for distributing information of different of different types. WAIS does not have stand alone client, but services like Gopher support WAIS searchs.

This is an example of news URL news://new.technologies

The syntax for above URL is :-
< A HREF="news://new.technologies">news://new.technologies < /A>

Function :

News URL is used to access any of the Usenet newsgroups. The newsgroup called 'new.technologies' can be accessed using the above URL.



HTML Elements

Any HTML should ideally have the following structure: < !Teaching HTML "-//html 1.0//EN"> < HTML> < HEAD> . . < /HEAD> < BODY> . . < /BODY> < /HTML> The container element < HTML> ....&/ltHTML> identifies the document as having HTML elements. The < !Teaching HTML "-//html 1.0//EN"> prologue document identifier is used to identify the document as an HTML document and the HTML standard to which it confirms.

Head element

The head of an HTML document is a collection of information about the document which is important to the intepreter. A typical head section should look like this: < HEAD> < TITLE> My Home Page > /TITLE> < BASE HREF = "http://www.microsoft.com/products/index.html"> < LINK HREF = "http://www.microsoft.com/products/contents.html REV="precedes"> < LINK HREF = "http://www.microsoft.com/products/home.html REL="prev"> < /HEAD>

Title element

The Title of an HTML should correctly identify the contents of the Page as, it is that part of an HTML which appears in the history list.

Base element

This is an empty tag allows the base address of an HTML document to be specified so as to use relative URLs in the document using the base address specified in the < BASE> tag. The e.g < BASE> HREF="http://www.studio.com/images/library"> specifies that all the relative links in the document can be accessed from the path '/images/library' on the host 'www.studio.com'.

Link element

Attribute What it does
HREF
Points to a URL
REL
Defines the relationship between the current document and the HREF value.
REV
Defines the relationship between the URL value and the current document.
TITLE
Identifies the title for the specifed document.
NAME
Defines a link from an anchor to the current document.

Body element

The BODY element is a container that contains all the tags used to define the document.

Heading element

HTML has six header elements that allow headers up to six levels. The syntax is < Hn> ....< /Hn> , where n is the level of the heading. e.g.

CODE

< H1> Heading One < /H1> < H2> Heading Two < /H2> < H3> Heading Three < /H3> < H4> Heading Four < /H4> < H5> Heading Five < /H5> < H6> Heading Six < /H6>

Result

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Anchor element

This element is used to create hyperlinks in an HTML document. Syntax is < A> ....< /A> where the hypertext is included between the start and the end tags. Some of the attributes are HREF, NAME, REL, REV, METHODS, TITLE. E.g....

CODE

< A NAME=X> First < /A> < BR> < A NAME=Y> Second < /A> < BR> < A NAME=Z> Third < /A> < BR> < A HREF="#X"> First < /A> < A HREF="#Y"> Second < /A> < A HREF="#Z"> Third < /A> If the text is not in the same document, simply put the document name before '#' within quotes.

Result

First
Second
Third
First Second Third

Line Break element

Syntax < BR> This element is used to break a line.

Center element

Syntax < CENTER> .....< /CENTER> This element is used to Center the text.

No Break element

Syntax < NOBR> .....< /NOBR> The no break element does not allow a new line in the text, no matter how long the text is.

Basefont element

Syntax < BASEFONT SIZE=n> Where n is the size of the text in the HTML document and is between 1-7.

Font element

Syntax < FONT SIZE=+N> .....< /FONT> This element is used to decide the size the text but, unlike Basefont element this is used to set the size oftext for a part of the document rather than the entire document.

Elements Description
Blink
This element is a container element which gives a blinking effect to the text included within this element but, only in Netscape Navigator. Syntax < BLINK> ....< /BLINK> e.g BLINK
Strike
Syntax < STRIKE> ....< /STRIKE> e.g STRIKE
Subscript
Syntax < SUB> ....< /SUB> . It is used to subscript text. e.g log 10 n
Superscript
Syntax < SUP> ....< /SUP> . It is used to superscript text. e.g 21 st century
Big
Syntax < BIG> ....< /BIG> . It is used to make text appear larger and bolder than rest of the text. e.g This is an example.
Small
Syntax < SMALL> ....< /SMALL> . It is used to make text appear smaller than rest of the text.e.g This is an example.


LOGICAL FORMATTING




Elements Description
Citation
This element is used when a document has to contain a citation or a testimonial, which is to be displayed in a font different from that of the normal text, typically italics. Syntax < CITE> ....< /CITE> e.g This is an example of citation.
Word break
Syntax < WBR> ....< /WBR> e.g <>
Pre-formatted text
Syntax < PRE> ....< /PRE> . It is used when one wants to display text on the screen exactly in same form in which he/she has keyed. e.g

The paragraph starts here................................................. and ends here. Given some space and ....................

Code
Syntax < CODE> ....< /CODE> . It is used when the HTML document has to contain a a part of a program or some code. The text included in this element is normally displayed as monospaced text. This may look similar to pre-formatted text but pre-formatted text leaves a blank line before and after the text. e.g This is how Code will be displayed.
Emphasis
Syntax < EM> ....< /EM> . It is used to make text appear diffrent from rest of the text in the document. Similar to citation. e.g This is an example.
Keboard
Syntax < KBD> ....< /KBD> . It is used to represent text that has to be keyed by the user.e.g This is an Keboard input example.
Sample
Syntax < SAMP> ....< /SAMP> . It is used to represent text that has to be keyed by the user.e.g This is an Keboard input example.
Strong
Syntax < STRONG> ....< /STRONG> . e.g This is very Strong example.
Variable
Syntax < VAR> ....< /VAR> . It is used to define text that represents a variable. Variable name appears between the start and end tags. e.g A variable is required here.


MAKING LINE



The Code < HR align = CENTER width = 100% size = 1 NOSHADE> wiil make line as below.




Attributes For HR element



Attribute Description
Size
Sets the thickness of the line. Takes values 10,20 etc
Width
Syntax < HR WIDTH= 25% SIZE=10> . Sets the length of the line in terms of percentage of the screen. e.g < HR WIDTH = 25%> will draw a line 1/4th of the screen width.
Align
Syntax < HR ALIGN= LEFT> . Sets the justification of the line i.e LEFT, RIGHT or CENTER. e.g < HR WIDTH = 25% ALIGN = LEFT> will draw a line 1/4th of the screen width but with left justification. Default is center.
NOSHADE
Syntax < HR ALIGN= LEFT NOSHADE> . Sets the justification of the line i.e LEFT, RIGHT or CENTER. e.g < HR WIDTH = 25% ALIGN = LEFT> will draw a line 1/4th of the screen width but with left justification & without "etched" effect i.e appearence of line is black.

The above table has been made by following Code.

< TABLE BORDER>

< TR>
< TH> Attribute< /TH>
< TH> Description< /TH>
< /TR>

< TR>
< TD ROWSPAN=2>Size< /TD>
< /TR>

< TR>
< TD> Sets the thickness of the line. Takes values 10,20 etc
< /TR>

< TR>
< TD ROWSPAN=2> Width< /TD>
< /TR>

< TR>
< TD> Syntax < HR WIDTH= 25% SIZE=10> . Sets the length of the line in terms of percentage of the screen. e.g < HR WIDTH = 25%> will draw a line 1/4< SUP> th< /SUP> of the screen width. < HR WIDTH = 25% SIZE = 10> < /TD>
< /TR>

< TR>
< TD ROWSPAN=2> Align< /TD>
< /TR>

< TR>
< TD> Syntax < HR ALIGN= LEFT> . Sets the justification of the line i.e LEFT, RIGHT or CENTER. e.g < HR WIDTH = 25% ALIGN = LEFT> will draw a line 1/4< SUP> th< /SUP> of the screen width but with left justification. Default is center. < HR WIDTH = 25% ALIGN =LEFT> < /TD>>
< /TR>

< TR>
< TD ROWSPAN=2> NOSHADE< /TD>
< /TR>

< TR>
< TD> Syntax < HR ALIGN= LEFT NOSHADE> . Sets the justification of the line i.e LEFT, RIGHT or CENTER. e.g < HR WIDTH = 25% ALIGN = LEFT> will draw a line 1/4< SUP> th< /SUP> of the screen width but with left justification & without "etched" effect i.e appearence of line is black.
< /TD>
< /TR>

< /TABLE>
Hey!!! how is this Logo

Attaching an image to your web-page

The syntax for attaching an image to a web page is :-

< A HREF="tutorial.htm" > < IMG BORDER=8 HEIGHT =100 WIDTH=150 ALIGN=RIGHT SRC= "images/hknetani4.gif" ALT="Hey!!! how is this Logo" > < /A>

Attributes :

HSPACE=Value (for horizontal space) VSPACE=Value (for Vertical space) HEIGHT=Value (for Height of the Image) WIDTH=Value (for Width of the Image) BORDER=Value (for Border that has to be displayed around the Image) ALIGN=Alignment (i.e. LEFT, RIGHT, TOP, BOTTOM) ALT=String ( i.e. the string that has to be displayed when mouse moves above the image or when image is being loaded or if image is not found)

List Element

DIRECTORY LIST ELEMENT
< DIR>
< LI> Words to be displayed
< /DIR>
e.g.
  • Words to be displayed

  • UNORDERED LIST ELEMENT
    < UL>
    < LI> Words to be displayed
    < /UL>
    e.g.
    ORDERED LIST ELEMENT
    < OL>
    < LI> Words to be displayed
    < /OL>
    e.g.
    1. Words to be displayed

    ATTRIBUTES
    Type Description
    TYPE=A
    Bullets as Capital letters e.g. A,B...
    TYPE=a
    Bullets as small letters e.g. a,b...
    TYPE=I
    Bullets as Roman numbers e.g. I,II...
    TYPE=i
    Bullets as Roman numbers e.g. i,ii...
    TYPE=1
    Bullets as Numbers e.g. 1,2...
    START
    Specify the starting number e.g START=4 then bullets will start from 4,5...

    MENU LIST ELEMENT
    < MENU>
    < LI> Words to be displayed
    < /MENU>
    e.g.
  • Words to be displayed

  • DEFINATION LIST ELEMENT
    < DL>
    < DT> HEAD < DD> Detail to be displayed
    < /DL>
    e.g.
    HEAD
    Detail to be displayed

    ATTRIBUTE
    COMPACT
    HEAD one
    Detail one to be displayed
    HEAD two
    Detail two to be displayed

    Form CONTROLS


    Type Description Conjunction
    CHECKBOX
    Used when multiple values has to be accepted at the same time.
    e.g. < INPUT NAME-C1 TYPE=CHECKBOX VALUE=CHECKED>
    RADIO
    Used when SINGLE values has to be accepted at the same time.
    e.g. < INPUT NAME=R1 TYPE=RADIO >
    TEXT
    Used for single line text entry.
    e.g. < INPUT NAME-T1 TYPE=TEXT VALUE=" " MAXLENGTH=20>
    TEXTAREA
    Used for multiple line text entry.
    e.g. < INPUT NAME=TX1 TYPE=TEXTAREA >
    PASSWORD
    Used for taking password.
    e.g. < INPUT NAME=P1 TYPE=PASSWORD >
    SUBMIT
    Creates a button which submits the form.
    e.g. < INPUT NAME=SUB TYPE=SUBMIT VALUE=SUBMIT>
    RESET
    Creates a button which initialized all the control present on the form.
    e.g. < INPUT NAME=RES TYPE=RESET VALUE=RESET >
    HIDDEN
    Creates an invisible field.
    e.g. < INPUT NAME=INV TYPE=HIDDEN >
    IMAGE
    Creates an image field which can be selected by the user causing the form to be immediately submitted. e.g. < INPUT NAME=Im TYPE=IMAGE SRC="images/jumper.gif">
    FILE
    Allows inclusion of files with form information.
    e.g. < INPUT NAME=F1 TYPE=FILE >
    LIST BOX
    Creates ListBox.
    e.g. < SELECT NAME=CM1 size=4 >
    < OPTION > One
    < OPTION > Two
    < OPTION > Three
    < OPTION > Four
    < /SELECT >
    Combo BOX
    Creates ComboBox.
    e.g. < SELECT NAME=CM1 >
    < OPTION > One
    < OPTION > Two
    < OPTION > Three
    < OPTION > Four
    < /SELECT >