ch-2 web

8/3/2019 ch-2 web

1/22

8/3/2019 ch-2 web

2/22

8/3/2019 ch-2 web

3/22

Language Attributes

Attribute Value Description

dirltr

rtlSpecifies the text direction for the content in an element

lang language_codeSpecifies a language code for the content in an element.Language code reference

xml:lang language_codeSpecifies a language code for the content in an element,in XHTML documents.Language code reference

DIR

The DIR attribute specifies the directionality of text--left-to-right (DIR=ltr, the default) or right-

to-left (DIR=rtl). Characters inUnicodeare assigned a directionality, left-to-right or right-to-left, to allow the text to be rendered properly.

Lang

The HTML lang attribute can be used to declare the language of a Web page or a portion of a

Web page.

Declare the primary language for each Web page with the lang attribute inside the tag,

like this:

...

Xml:lang

In XHTML, the language is declared inside the tag as follows:

...

ISO Language Codes

Language ISO codes

Arabic ar
http://www.w3schools.com/tags/ref_language_codes.asphttp://www.w3schools.com/tags/ref_language_codes.asphttp://www.w3schools.com/tags/ref_language_codes.asphttp://www.w3schools.com/tags/ref_language_codes.asphttp://www.w3schools.com/tags/ref_language_codes.asphttp://www.unicode.org/http://www.unicode.org/http://www.unicode.org/http://www.unicode.org/http://www.w3schools.com/tags/ref_language_codes.asphttp://www.w3schools.com/tags/ref_language_codes.asp

8/3/2019 ch-2 web

4/22

English en

Hindi hi

Japanese ja

Punjabi pa

Core Events

The last major aspect of modern markup initially introduced by HTML 4 was the increased

possibility of adding scripting to HTML documents. In preparation for a more dynamic Web, a

set of core events has been associated with nearly every HTML element. Most of these eventsare associated with a user doing something.

For example, the user clicking an object is associated with an onclick event attribute. So,

Press this paragraph

would associate a small bit of scripting code with the paragraph event, which would be triggered

when the user clicks the paragraph. In reality, the event model is not fully supported by allbrowsers for all tags, so the previous example might not do much of anything. Remember that

any tag can have a multitude of events associated with it, paving the way for a much more

dynamic Web experience.

The common event attributes are device-dependent and largely tailored for the graphical user

interface. The available events are as follows:

ONCLICK, when the mouse button is clicked on an element; ONDBLCLICK, when the mouse button is double-clicked on an element; ONMOUSEDOWN, when the mouse button is pressed over an element; ONMOUSEUP, when the mouse button is released over an element; ONMOUSEOVER, when the mouse is moved onto an element; ONMOUSEMOVE, when the mouse is moved while over an element; ONMOUSEOUT, when the mouse is moved away from an element; ONKEYPRESS, when a key is pressed and released over an element; ONKEYDOWN, when a key is pressed down over an element; ONKEYUP, when a key is released over an element.

8/3/2019 ch-2 web

5/22

Linking basics and linking in html

First Links

Ok, you have a page that you learned how to write in thefirst lesson. Now, youre going to needanother page. It doesnt have to be anything great, just a very basic page will do. You can copythe first page and just save it as a different name if you want. Just make sure you know the

names of the two files and that they are in the same folder. Dont forget to call your homepage

index.html.

sourcetip: Always use lowercase letters when naming html files, images and folders. Most webservers (the computers youll eventually be putting your site onto) are case-sensitive, which

means it matters to them whether your files use capital letters or not. When linking to pages or

typing in URLs, you dont want to have to remember the case of each letter, so if everyone uses

small letters the problem goes away.

Link Structure

Like all tags, links follow a structure, and have start tags and end tags. Put this line of code on

one of your pages.

Very Important The Link

Explanation:

a:a stands for Anchor, which means Link. This is the tag that makes it all happen. href: Means Hypertext REFerence. The href part is another attribute, with the location

of the other page as its value. Just change theotherpage.html to the name of the second

file. Dont forget the quotation marks!

Whatever you put inside the link tags will become a link, coloured blue and underlined. When

you rest your mouse on it your cursor will turn into a hand and theURLof the page will appear

in your browsers status bar (at the bottom of the window). If you want to make links to otherparts of your page (for example a link to the top of the page), set up someinternal links.

Changing the default colours of the links is dealt with inbody attributes.

Linking to email addresses

If you want to let people email you by clicking a link, you use this code:

mail me

to create thismail mewhich will open the users email program with your address in the

To: box.
http://www.yourhtmlsource.com/myfirstsite/myfirstpage.htmlhttp://www.yourhtmlsource.com/myfirstsite/myfirstpage.htmlhttp://www.yourhtmlsource.com/myfirstsite/myfirstpage.htmlhttp://www.yourhtmlsource.com/starthere/glossary.html#urlhttp://www.yourhtmlsource.com/starthere/glossary.html#urlhttp://www.yourhtmlsource.com/starthere/glossary.html#urlhttp://www.yourhtmlsource.com/text/internallinks.htmlhttp://www.yourhtmlsource.com/text/internallinks.htmlhttp://www.yourhtmlsource.com/text/internallinks.htmlhttp://www.yourhtmlsource.com/myfirstsite/body.htmlhttp://www.yourhtmlsource.com/myfirstsite/body.htmlhttp://www.yourhtmlsource.com/myfirstsite/body.htmlmailto:[email protected]:[email protected]:[email protected]:[email protected]://www.yourhtmlsource.com/myfirstsite/body.htmlhttp://www.yourhtmlsource.com/text/internallinks.htmlhttp://www.yourhtmlsource.com/starthere/glossary.html#urlhttp://www.yourhtmlsource.com/myfirstsite/myfirstpage.html

8/3/2019 ch-2 web

6/22

Linking to pictures

Linking to a picture file is practically the same as to a html file. Just include the name of the file,

and do not forget the correct suffixi.e. if it is a gifor ajpg. For a rundown on the file formats

for images on the web,read this. If you want to use a picture as a link, read thenext tutorial.

Linking to files

You link to a file just like a picture. The only difference is that it wont open in a browser, but

instead will download onto a specified place on the readers hard drive. An example:

download the song (2.6MB mp3)

Embeddinga file directly into a page is a different process. We have a page onInternet fileformatstoo.

Internal and external linking:

External linking:

External HTML links are those HTML links that go to another Web site.

Example

Visit W3Schools

which will display like this:Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage.

Internal linking:

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.

Note: The upcoming HTML5 standard suggest using the id attribute instead of the name attributefor specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all

modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example
http://www.yourhtmlsource.com/images/fileformats.htmlhttp://www.yourhtmlsource.com/images/fileformats.htmlhttp://www.yourhtmlsource.com/images/fileformats.htmlhttp://www.yourhtmlsource.com/myfirstsite/basicimages.htmlhttp://www.yourhtmlsource.com/myfirstsite/basicimages.htmlhttp://www.yourhtmlsource.com/myfirstsite/basicimages.htmlhttp://www.yourhtmlsource.com/images/multimedia.htmlhttp://www.yourhtmlsource.com/images/multimedia.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/images/multimedia.htmlhttp://www.yourhtmlsource.com/myfirstsite/basicimages.htmlhttp://www.yourhtmlsource.com/images/fileformats.html

8/3/2019 ch-2 web

7/22

A named anchor inside an HTML document:

Useful Tips Section

Create a link to the "Useful Tips Section" inside the same document:

Visit the Useful Tips Section

Absolute and Relative Links

Internet addresses closely follow the established hierarchy structure youre probably familiar

with on your computers file system. First comes the Internetdomain, like www.example.com.

Next comes the directories (folders) that contain the file and finally the files name, with theappropriate file typeextension.Each segment of an url is separated with a forward slash.

Always remember: on the Internet, all slashes go forwards.

There are two different ways to point your links to a file. Absolute links include the full

website address, including the http:// and www. bits. Relative links are much shorter and more

manageable, and can only be used to point to other pages on the same website.

For instance, say you have a page called page1.html in the links directory of your site. The

absolute href to this page is http://www.example.com/links/page1.html. So, you put that linkanywhere on any page, on any site and it will always go to that page on the web.

Relative links can only link to a page from the same site. The address is always relative to the

position of the second file. If you were linking to that same page from a page in the samedirectory, the href would be justpage1.html. If you were linking from your homepage, i.e., in

the root directory, the link would read , as you would have to

go down into the directory first, and then get the file.

sourcetip: If you name files index.html in your directories, you can make links to these pagesby just linking to the directory name. Your browser will always pick up index as the main page

for that folder. This means you can condense href="folder/index.html" into

href="folder/". The slash tells the browser it should look for a folder, and not a file. Dont

forget it!

HTML Images

The Tag and the Src Attribute

In HTML, images are defined with the tag.
http://www.yourhtmlsource.com/promotion/domainregistration.htmlhttp://www.yourhtmlsource.com/promotion/domainregistration.htmlhttp://www.yourhtmlsource.com/promotion/domainregistration.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/starthere/fileformats.htmlhttp://www.yourhtmlsource.com/promotion/domainregistration.html

8/3/2019 ch-2 web

8/22

The tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The

value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

The URL points to the location where the image is stored. An image named "boat.gif", located in

the "images" directory on "www.w3schools.com" has the URL:

http://www.w3schools.com/images/boat.gif.

The browser displays the image where the tag occurs in the document. If you put an

image tag between two paragraphs, the browser shows the first paragraph, then the image, and

then the second paragraph.

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot bedisplayed.

The value of the alt attribute is an author-defined text:

The alt attribute provides alternative information for an image if a user for some reason cannot

view it (because of slow connection, an error in the src attribute, or if the user uses a screenreader).

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

Tip: It is a good practice to specify both the height and width attributes for an image. If these

attributes are set, the space required for the image is reserved when the page is loaded. However,

8/3/2019 ch-2 web

9/22

without these attributes, the browser does not know the size of the image. The effect will be that

the page layout will change during loading (while the images load).

LinksHTML Hyperlinks (Links)

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new

document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

Links are specified in HTML using the tag.

The tag can be used in two ways:

1. To create a link to another document, by using the href attribute2. To create a bookmark inside a document, by using the name attribute

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

Link text

The href attribute specifies the destination of a link.

Example

Visit W3Schools

which will display like this:Visit W3Schools

Clicking on this hyperlink will send the user to W3Schools' homepage.

Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

Link attributes:
http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/

8/3/2019 ch-2 web

10/22

Attribute Value Description DTD

coords coordinates Specifies the coordinates of a link STF

href URL Specifies the destination of a link STF

name section_name Specifies the name of an anchor STF

shape

default

rect

circle

poly

Specifies the shape of a link STF

target

_blank

_parent

_self

_top

ramename

Specifies where to open the linked document TF

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example

Visit W3Schools!

HTML Links - The name Attribute

The name attribute specifies the name of an anchor.

The name attribute is used to create a bookmark inside an HTML document.
http://www.w3schools.com/TAGS/att_a_coords.asphttp://www.w3schools.com/TAGS/att_a_href.asphttp://www.w3schools.com/TAGS/att_a_name.asphttp://www.w3schools.com/TAGS/att_a_shape.asphttp://www.w3schools.com/TAGS/att_a_shape.asphttp://www.w3schools.com/TAGS/att_a_target.asphttp://www.w3schools.com/TAGS/att_a_target.asphttp://www.w3schools.com/TAGS/att_a_shape.asphttp://www.w3schools.com/TAGS/att_a_name.asphttp://www.w3schools.com/TAGS/att_a_href.asphttp://www.w3schools.com/TAGS/att_a_coords.asp

8/3/2019 ch-2 web

11/22

Note: The upcoming HTML5 standard suggest using the id attribute instead of the name attribute

for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in allmodern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

A named anchor inside an HTML document:

Useful Tips Section

Create a link to the "Useful Tips Section" inside the same document:


Or, create a link to the "Useful Tips Section" from another page:


HTML shape Attribute

Example

Use of the shape and coords attribute in an a element, to create an image-map:

The Sun

Mercury

Venus

HTML coords Attribute

8/3/2019 ch-2 web

12/22

The Sun

Mercury

Venus

Image map

HTML Tag

Example

An image-map, with clickable areas:

Definition and Usage

The tag is used to define a client-side image-map. An image-map is an image with

clickable areas.

The name attribute is required in the map element. This attribute is associated with the 's

usemap attribute and creates a relationship between the image and the map.

The map element contains a number ofareaelements, that defines the clickable areas in the

image map.

Required Attributes


name mapname Specifies the name for an image-map STF
http://www.w3schools.com/TAGS/tag_area.asphttp://www.w3schools.com/TAGS/tag_area.asphttp://www.w3schools.com/TAGS/tag_area.asphttp://www.w3schools.com/TAGS/att_map_name.asphttp://www.w3schools.com/TAGS/att_map_name.asphttp://www.w3schools.com/TAGS/tag_area.asp

8/3/2019 ch-2 web

13/22

Standard Attributes

The tag supports the following standard attributes:


class classname Specifies a classname for an element STF

dirrtl

ltrSpecifies the text direction for the content in an elementSTF

id id Specifies a unique id for an element STF

lang language_code Specifies a language code for the content in an element STF

style style_definition Specifies an inline style for an element STF

title text Specifies extra information about an element STF

xml:lang language_codeSpecifies a language code for the content in an element,

in XHTML documentsSTF

Image button

The basic syntax of the new tag is like any other containment tag:

.....

For example:

Text on buttonSome text here

An image is shown on button

One side image and other side text

8/3/2019 ch-2 web

14/22

Under Construction

IMAGE BUTTON

Image buttons have the same effect as submit buttons. When a visitor clicks an image

button the form is sent to the address specified in the action setting of the

tag.

Since visitors aren't always perfectionists you might consider adding ajavascript

validationof the content before it is actually sent.

SETTINGS:

Below is a listing of valid settings for image buttons:

HTML EXPLANATION EXAMPLE

image

name=

src=

align=

border=

width=

height=

vspace=

hspace=

tabindex=

Submit button

Name of the image.

Url of the image.

Alignment of the image.

Border width around the image.

Width of the image.

Height of the image.

Spacing over and under image.

Spacing left and right of image.

Tab order of the image.

The name setting adds an internal name to the image button so the program that

handles the form doesn't confuse it with the other fields.
http://www.echoecho.com/jsforms.htmhttp://www.echoecho.com/jsforms.htmhttp://www.echoecho.com/jsforms.htmhttp://www.echoecho.com/jsforms.htmhttp://www.echoecho.com/jsforms.htmhttp://www.echoecho.com/jsforms.htm

8/3/2019 ch-2 web

15/22

The src setting defines the URL of the image.

The align setting defines how the image is aligned.

Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE,

ABSMIDDLE, ABSBOTTOM.

The alignments are explained in the image section.

You can learn about the different alignmentshere.

The border setting defines the width (in pixels) of the border around the image.

The width setting defines the width of the image.

The height setting defines the height of the image.

The vspace setting defines the spacing over and under the image (in pixels).

The hspace setting defines the spacing to the left and right of the image (in pixels).

The tabindex setting defines in which order the different fields should be activated

when the visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

My Page

8/3/2019 ch-2 web

16/22

height="60">

And the resulting output from it:

Enter your name here!

Html form

HTML EXPLANATION EXAMPLE

8/3/2019 ch-2 web

17/22

textarea

rows=

cols=

name=

wrap=

off

virtual

physical

Text area - several lines

Rows in the field.

Columns in the field.

Name of the field.

Control linebreaks.

Turns off linebreaks.

Shows linebreaks, but

sends text as entered.

Inserts linebreaks when

needed and even sends it.

text

size=

maxlength=

name=

value=

One line text field

Characters shown.

Max characters allowed.

Name of the field.

Initial value in the field.

password

size=

maxlength=

name=

value=

Password field.

Characters shown.

Characters allowed to enter.

Name of the field.


checkbox

name=

value=

Choose one or more options

Name of the field.


radio

name=

value=

Choose only one option

Name of the field.


select

name=

size=

multiple=

option

selected

value=

Drop-down menu

Name of the field.

Number of items in list.

Allow multiple choice if yes.

Individual items in the menu.

Make an item default.

Value to send if selected.

8/3/2019 ch-2 web

18/22

hidden

name=

value=

Does not show on the form.

Name of the field.

Value to send.

reset

name=

value=

Button to reset all fields

Name of the button.

Text shown on the button.

Reset

submit

name=

value=

Button to submit the form

Name of the button.

Text shown on the button.

Submit

image

name=

Image behaving as button

Name of the image.

Note: This is a quick reference showing the most common settings for each field. For a

complete listing and explanation you should follow the link to the relevant field in the

menu.

Introduction to layout

1.)Background attribute:

The background attribute specifies a background image for a document.

Example

Specify a background image for an HTML document:

Hello world!

Visit W3Schools.com!

Syntax

8/3/2019 ch-2 web

19/22

Attribute Values

Value Description

URL

The URL of the background image.

Possible values:

An absolute URL - points to another web site (likehref="http://www.example.com/bgimage.gif")

A relative URL - points to a file within a web site (likehref="/images/bgimage.gif")

2.)HTML Text FormattingHTML uses tags like and for formatting output, like bold or italic text.

HTML Text Formatting Tags

Tag Description

Defines bold text

Defines big text

Defines emphasized text

Defines italic text

Defines small text

Defines strong text

Defines subscripted text

Defines superscripted text

Defines inserted text

Defines deleted text
http://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asp

8/3/2019 ch-2 web

20/22

Example:

This text is bold

This text is strong

This text is big

This text is italic

This text is emphasized

This is computer output

This is subscript and superscript

Output:

This text is bold

This text is big

This text is italic

This is computer output

This is subscript andsuperscript

3.)HTML color AttributeThe color attribute specifies the color of the text inside a font element.

Syntax

Attribute Values

8/3/2019 ch-2 web

21/22

Value Description

color_name Specifies the text color with a color name (like "red")

Example

Specify the color of text:

This is some text!

4.)HTML Layouts - Using Tables

The simplest way of creating layouts is by using the HTML tag.

The following example uses a table with 3 rows and 2 columns - the first and

last row spans both columns using the colspan attribute:

Example

Main Title of Web Page

Menu

HTML

CSS
JavaScript

Content goes here

8/3/2019 ch-2 web

22/22

Copyright 2011 W3Schools.com

The HTML code above will produce the following result:

Main Title of Web Page

Menu

HTML

CSS

JavaScript

Content goes here

Copyright 2011 W3Schools.com

Note: Even though it is possible to create nice layouts with HTML tables, tables were

designed for presenting tabular data - NOT as a layout tool!

ch-2 web

Documents