MyHtml

7/29/2019 MyHtml

1/45

Page 1

Hypertext MarkUpLanguage(HTML)

7/29/2019 MyHtml

2/45

Page 2

Table of Content

Introduction to Web..2

Introduction to HTML.4

Body Tag.6

Title, Heading, Paragraph....7

Special Character.....8

Fonts .9

Lists10

Links in HTML..13

Images in HTML16

Tables in HTML.19

Frames in HTML23

Forms in HTML.27

Appendix.30

7/29/2019 MyHtml

3/45

Page 3

Introduction to Web

What is WWW?

WWW stands for World Wide Web, and it is an advanced information retrieval system. Currently

it is mostly in an experimental stage, but it is being developed rapidly. In a sense WWWcompetes with the Gopher information system. Notice that using WWW you can also access

information in Gopher (and in FTP servers, Usenet news, etc.).

WWW supports more kinds of information than Gopher, for instance pictures, graphs, colours

and fonts, provided that the user's device supports them. Voice can also be delivered, if the user's

device has a sound generator. WWW can also be used on a simple terminal, but then pictures are

replaced by just a notation like [IMAGE].

WWW is based on hypertext, which means, among other things, that when the user is navigating

on the ocean of information he can pick up an interesting word or expression within a text and

request for more information about it. This does not apply to all words in a text but only to those

who have been properly designated as such by the producer of the information and which are

displayed on screen e.g. as underlined. In practise the use of WWW is still largely similar to the

use of simpler, menu-driven information systems.

In most Unix machines of the Computing Centre, WWW can be started by the command

www

which selects the proper mode of operation (actually, the proper program, viz. lynx or Mosaic)

according to the characteristics of user's device.

You will first see the HUT home page in Finnish. To access information in English, select (in the

manner described below) the itemHUT information in English. Alternatively, you can start

WWW so that it gets you directly to the home page in English:

www http://www.hut.fi/English/www.english.html

This intense interest in the Web is a result of the potential it offers for communication. Using the

Web, individuals or organizations can instantaneously and continuously present hypermedia--text

images, movies, and sound-to a GLOBAL audience. For Web developers, this information

environment demands excellent, effective content development in order to rise above the

information clutter. With so much information on the Web, only that which truly meets user

needs well can survive and flourish.

What is HTTP?

At first what is Protocol? Protocol means a way of

communication between two or more parties. To

connect two parties like client and server at first we

need to establish a connection between them and after

that we need to start communication in such a way so

that anyone can understand each other. To establish aconnection we need a special

7/29/2019 MyHtml

4/45

Page 4

protocol named Transmission Control Protocol/Internet Protocol (TCP/IP). Which has becomethe industry-standard method of interconnecting hosts, networks, and the Internet. Now think that

connection between client and server has been established. Now we need to set a way of

communication like messages, so that they can understand both. This message format standard is

HTTP which defines how client will send a request to the server and how the server will response.

HTTP stands for "Hypertext Transfer Protocol". In case of Web Browser and Web Server, TheWeb Browser is HTTP Client and the Web Server is HTTP Server.

More precisely the definition of HTTP protocol is a protocol designed to allow the transfer of

Hypertext Markup Language (HTML) documents.

An HTTP transaction is divided into four steps:1. The browser opens a connection by using TCP/IP.

2. The browser sends a request to the server --> The request is a message and the message format

follows HTTP Protocol.

3. The server sends a response to the browser --> The response also a message and the message

format follows HTTP Protocol.4. The connection is closed.

So what we understand? We understand on the Internet, HTTP communication generally takes

place over TCP connections. The default port is 80 but other ports can be used..

HTTP Protocol is Connection less:The protocol is called connection less because An HTTP client opens a connection and sends a

request message to the HTTP server, After that the server then returns a response message

containing the resource which was requested. After delivering the response, the server closes the

connection unlike other protocol likes FTP, which makes HTTP Protocol is a connection less

protocol.

HTTP protocol is State less:When the server responded of client request, the connection between client and server is closed

means forgotten. There is no "Tracking System" between client and server. The HTTP server

takes every request as a new request means never maintain any connection information between

transactions. But there are some ways to maintain states between client and server which i have

already described in my previous article: "Passing data/parameters/values from one aspx page to

another aspx page".

What is HTTPS?

HTTP is Hyper Text Transport Protocol and is transmitted over the wire via PORT 80(TCP). You

normally use HTTP when you are browsing the web, its not secure, so someone can eavesdrop on

the conversation between your computer and the web server.

HTTPS (Hypertext Transfer Protocol over Secure Socket Layer, or HTTP over SSL) is a Web

protocol developed by Netscape and built into its browser that encrypts and decrypts user page

requests as well as the pages that are returned by the Web server. HTTPS is really just the use of

Netscape's Secure Socket Layer (SSL) as a sublayer under its regular HTTP application layering.

(HTTPS uses port 443 instead of HTTP port 80 in its interactions with the lower layer, TCP/IP.)SSL uses a 40-bit key size for the RC4 stream encryption algorithm,new-age browsers use 128-bit

key size which is more secure than the former, it is considered an adequate degree of encryption

for commercial exchange.HTTPS is normally used in login pages, shopping/commercial sites.
http://shawpnendu.blogspot.com/2009/04/passing-dataparametersvalues-from-one.htmlhttp://shawpnendu.blogspot.com/2009/04/passing-dataparametersvalues-from-one.htmlhttp://shawpnendu.blogspot.com/2009/04/passing-dataparametersvalues-from-one.htmlhttp://shawpnendu.blogspot.com/2009/04/passing-dataparametersvalues-from-one.html

7/29/2019 MyHtml

5/45

Page 5

Chapter-1

Introduction to HTML

What is HTML?

HTML stands for Hyper Text Markup Language. An HTML file is a text file containing

markup tags. The markup tags tell the Web browser how to display the page. An HTML file must

have an htmor html file extension. An HTML file can be created using a simple text editor.The rule-making body of the Web is World Wide Web Consortium (W3C). W3C puts together

specifications for Web standards. The most essential Web standards are HTML, CSS and XML.

HTML Elements

1. HTML tags are surrounded with angle brackets (< >).2. HTML tags are not technically case sensitive, but for good practice (xHTML compliance),

always use lowercase.

3. HTML tags are often in pairs with a starting tag and ending tag ().4. HTML tags must have a closing tag. For paired tags, this means the second tag:
, for
others, the closing slash is in the tag itself:
(xHTML compliance)

5. "Nested" HTML tags should close in the reverse order of the opening tags:

Curriculum Vitae

6. Some tags can have properties (or "attributes") which further refine the effects of the tag:

HTML Page Format

document title

your page content

All HTML pages will have these tags. The tag tells the browser to read and render the

page in HTML. The ending tag tells the browser that this is the end of the page. The

tag denotes the title displayed on the top left of the browser. It must be placed inside the tag, which is closed before the body of the page begins. All of the content of the

page, the text, images, media, etc, is enclosed between and .

7/29/2019 MyHtml

6/45

Page 6

View an HTML Document

Hypertext Markup Language, or HTML for short, is what tells a web browser how a page should

look. An HTML document contains two components: content (e.g., course schedule information)

and HTML commands that specify the placement and formatting of the content (e.g., display the

course name in bold, the instructor's name in italics, and show all the classes in a grid layout).

Example: Creating a simple web page

1. Start Notepad.2. Type in the following text

Title of page

This is a very basic webpage. This text will be displayed in bold

3. Save the file as "firstpage.html".4. Double click the saved file the browser will display the page.

Example Explained:

The first tag in your HTML document is . This tag tells your browser that this is the startof an HTML document. The last tag in your document is . This tag tells your browser that

this is the end of the HTML document.

The text between the tag and the tag is header information. Header information

is not displayed in the browser window.

The text between the tags is the title of your document. The title is displayed in your

browser's caption.

The text between the tags is the text that will be displayed in your browser.

The text between the and tags will be displayed in a bold font.

HTM or HTML Extension?

When you save an HTML file, you can use either the .htm or the .html extension. We have used

.html in our example.

Attributes

Tags can also have attributes, which are extra bits of information. Attributes appear insidethe opening tag and their value is always inside quotation marks. They look something like

Margarine. We will come across tags with attributes later.

7/29/2019 MyHtml

7/45

Page 7

Body Tag with its Attributes

When you create a Web page, you can change several things in the body of your document by

adding extra commands to the tag. Here is what a body tag with several additions would

look like:

< body bgcolor="black" text="red" link="yellow" alink="orange" vlink="white"background="image.gif">

Pretty long tag, isn't it? Well, you can use as many or as few of these add-ons as you wish. The

options you don't use will be set to the Web browser's default values. Below is a brief explanation

of each attribute, with a link to the tutorial for each one. (If you are moving through the tutorials

in order, we will eventually get to each one of these.) So here we go...

bgcolor="color"

This changes the background color of your page. You can set this to any color you would like to

use. Just replace color above with a color name or hex code. The default setting varies with yourbrowser, but is usually gray or white.

text="color"

This changes the default text color the browser will display on your page. You can set this to any

color you would like to use. Just replace color above with a color name or hex code. The default

setting for text color is black.

link="color"

This changes the color of all of the non-visited links on your page. You can set this to any coloryou would like to use. Just replace color above with a color name or hex code. The default setting

for a non-visited link is usually blue.

alink="color"

This changes the color of an active link on your page, which is a link that has just been clicked on

by a user's mouse. You can set this to any color you would like to use. Just replace color above

with a color name or hex code.

vlink="color"

This changes the color of a visited link on your page. You can set this to any color you would like

to use. Just replace color above with a color name or hex code. The default setting for a visited

link is usually violet.

background="image.gif"

This adds a background image to your page. If you use this attribute, the background image will

take the place of any background color you may have specified. If you don't use a background

image, the browser will use your background color or its default background color.

7/29/2019 MyHtml

8/45

Page 8

Page Title

All HTML pages should have a page title.

To add a title to your page, change your

code so that it looks like this:

Basic Web Sample

HeadingsHeadings are defined with the to

tags. defines the largest heading.

defines the smallest heading.

This is First-Level Heading

Second-Level HeadingThird-Level Heading

Fourth-Level Heading

Fifth-Level Heading

Sixth-Level Heading

HTML automatically adds an extra blank line before and after a heading.

Paragraphs

Paragraphs are defined with the

tag.

This is a paragraph

This is another paragraph

HTML automatically adds an extra blank

line before and after a paragraph.

Preformatted Text

The ability to output preformatted text is needed in HTML because the usual behaviour isto throw unnecessary whitespace away. For example:

CascadingStyle

Sheets from WorldWideWeb Consortium

will be displayed as:Cascading Style Sheets from the World Wide Web Consortium

7/29/2019 MyHtml

9/45

Page 9

This loses all the flavour of cascading that was in the original layout. Replacing p by pre as the

element produces something like

CascadingStyle

Sheets from WorldWideWeb Consortium

Some Special CharactersSome characters have a special meaning in HTML, like the less than sign ( greater than > >

& ampersand & &

" quotation mark " "

' apostrophe ' (does not work in IE) '

7/29/2019 MyHtml

10/45

Page 10

Additional Commonly Used Character Entities

Result Description Entity Name Entity Number

Cent

Pound

Yen

Section

Copyright

registered trademark

Multiplication

Division

Fonts

Font presentation is controlled using the font tag, .Font sizes are specified 1

through 7 with 1 as the smallest and 7 the largest.

This text is font size 3.

Size 3 is the default size. That is the size that is "normal" for most browsers under most

circumstances.

You can experiment with the font sizes by changing the value using 1 through 7. The list below

shows what these sizes look similar to what is shown below. Remember, actual font size will

depend on many factors, including the size of the monitor screen.

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7It is also possible to specify font sizes relative to the settings in the browser. This is done using

font size attributes that are placed with "+" or "". An example is on the right where the size +2

is used. This means that the font should be displayed 2 sizes larger than the browser's defaultsize.

This text is font size 6.

Common Attributes of Font Tag

7/29/2019 MyHtml

11/45

Page 11

Attribute Value Description

color rgb(x,x,x)

#xxxxxx

colorname

Not supported in HTML5. Deprecated in HTML 4.01.

Specifies the color of text

face

font_family Not supported in HTML5. Deprecated in HTML 4.01.Specifies the font of text

size Number Not supported in HTML5. Deprecated in HTML 4.01.

Specifies the size of text

Lists

There are three types of list; unordered lists, ordered lists and definition lists.

Unordered lists and ordered lists work the same way, except that the former is used for non-

sequential lists with list items usually preceded by bullets and the latter is for sequential lists,

which are normally represented by incremental numbers.

List Tags

Tag Description

Defines an ordered list

Defines an unordered list

Defines a list item

Defines a definition list

Defines a definition term

Defines a definition description

Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black

circles).

An unordered list starts with the tag. Each list item starts with the tag.

BreadButter

Here is how it looks in a browser:
http://www.w3schools.com/tags/att_font_color.asphttp://www.w3schools.com/tags/att_font_face.asphttp://www.w3schools.com/tags/att_font_face.asphttp://www.w3schools.com/tags/att_font_size.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/tags/att_font_size.asphttp://www.w3schools.com/tags/att_font_face.asphttp://www.w3schools.com/tags/att_font_color.asp

7/29/2019 MyHtml

12/45

Page 12

Bread

Butter

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the tag. Each list item starts with the tag.

Bread

Butter


1. Bread2. Butter

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Definition Lists

A definition list is not a list of items. This is a list of terms and explanation of the terms.

A definition list starts with the tag. Each definition-list term starts with the tag. Each

definition-list definition starts with the tag.

Coffee

Black hot drink

Milk

White cold drink


Coffee

Black hot drink

Milk

White cold drink

Inside a definition-list definition (the tag) you can put paragraphs, line breaks, images,

links, other lists, etc.

7/29/2019 MyHtml

13/45

Page 13

Exercise

1. Create a webpage that prints your name to the screen.

2. Create a webpage that prints the numbers 1 - 10 to the screen.

3. Create a webpage and set its title to "This is a webpage".

4. Create a webpage that prints the message "When was this webpage created? Check page's

title for the answer." to the screen, and set the title of the page to the current date.

5. Create a webpage that prints any text of your choosing to the screen, do not include a head

section in the code.

6. Print your name in green.

7. Print the numbers 1 - 10, each number being a different color.

8. Prints your name in a Tahoma font.

9. Print a paragraph with 4 - 5 sentences. Each sentence should be a different font.

10.Print a paragraph that is a description of a book, include the title of the book as well as its

author. Names and titles should be underlined, adjectives should be italicized and bolded.11.Print your name to the screen with every letter being a different heading size.

12.Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to

it the number 2 superscripted, an equal sign and the result. (Example: 102

= 100).

13.Prints 10 names with a line break between each name. The list should be alphabetized, and

to do this place a subscripted number next to each name based on where it will go in the

alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript

number next to each name, then the alphabetized list. Both lists should have an level

heading.

14.Print two paragraphs that are both indented using the command.

15.Print two lists with any information you want. One list should be an ordered list, the other

list should be an unordered list.

16.Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the

horizontal line print a paragraph relating to the text in the heading.

17.Print some preformatted text of your choosing. (hint: use the tag).

18.Print a long quote and a short quote. Cite the author of each quote.

19.Print some deleted and inserted text of your choosing.

20.Print a definition list with 5 items.

21.Print two addresses in the same format used on the front of envelopes (senders address in

top left corner, receivers address in the center).

22.Print ten acronyms and abbreviations of your choosing, each separated by two lines.

Specify the data that the abbreviations and acronyms represent

7/29/2019 MyHtml

14/45

Page 14

Chapter-2

Links in HTML

LinksHTML uses the (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie,

etc.

The syntax of creating an anchor:

Text to be displayed

The tag is used to create an anchor to link, the href attribute is used to address the documentto link to, and the words between the open and close of the anchor tag will be displayed as a

hyperlink.

This anchor defines a link to EEE 111 webpage:

Search in Google

The line above will look like this in a browser:

Search in Google

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

Search in Google

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create

links that can jump directly into a specific section on a page, instead of letting the user scroll

around to find what he/she is looking for.

Below is the syntax of a named anchor:

Text to be displayed

The name attribute is used to create a named anchor. The name of the anchor can be any text you

care to use.

The line below defines a named anchor:
http://www.w3schools.com/http://www.w3schools.com/

7/29/2019 MyHtml

15/45

Page 15

Bottom of the page

You should notice that a named anchor is not displayed in a special way.

To link directly to the "down" section, add a # sign and the name of the anchor to the end of a

URL, like this:

Jump to down section

A hyperlink to the Useful Tips Section from WITHIN the file "firstpage.html" will look like this:

Down is here

7/29/2019 MyHtml

16/45

Page 16

Exercise

1. Create links to five different pages on five different websites that should all open in a new

window.

2. Create a page with a link at the top of it that when clicked will jump all the way to the

bottom of the page.

3. Create a page with a link at the bottom of it that when clicked will jump all the way to the

top of the page.

4. Create a page with a link at the top of it that when clicked will jump all the way to the

bottom of the page. At the bottom of the page there should be a link to jump back to the top of

the page.

7/29/2019 MyHtml

17/45

Page 17

Chapter-3

Images in HTML

ImagesImages are inserted in HTML using tag.

The tag defines an image in an HTML page.

The tag has two required attributes: src and alt.

Example:

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages.

The tag creates a holding space for the referenced image.

Tip: To link an image to another document, simply nest the tag inside tags.

Attributes of Tag

Attribute Value Description

align

topbottom

middle

left

right

Not supported in HTML5. Deprecated in HTML 4.01.Specifies the alignment of an image according to

surrounding elements

alt Text Specifies an alternate text for an image

border Pixels Not supported in HTML5. Deprecated in HTML 4.01.

Specifies the width of the border around an image

height Pixels Specifies the height of an image

hspace Pixels Not supported in HTML5. Deprecated in HTML 4.01.

Specifies the whitespace on left and right side of an image

ismap Ismap Specifies an image as a server-side image-map

longdesc URL Not supported in HTML5. Specifies the URL to a

document that contains a long description of an image

src URL Specifies the URL of an image
http://www.w3schools.com/tags/att_img_align.asphttp://www.w3schools.com/tags/att_img_align.asphttp://www.w3schools.com/tags/att_img_alt.asphttp://www.w3schools.com/tags/att_img_alt.asphttp://www.w3schools.com/tags/att_img_border.asphttp://www.w3schools.com/tags/att_img_border.asphttp://www.w3schools.com/tags/att_img_height.asphttp://www.w3schools.com/tags/att_img_height.asphttp://www.w3schools.com/tags/att_img_hspace.asphttp://www.w3schools.com/tags/att_img_hspace.asphttp://www.w3schools.com/tags/att_img_ismap.asphttp://www.w3schools.com/tags/att_img_ismap.asphttp://www.w3schools.com/tags/att_img_longdesc.asphttp://www.w3schools.com/tags/att_img_longdesc.asphttp://www.w3schools.com/tags/att_img_src.asphttp://www.w3schools.com/tags/att_img_src.asphttp://www.w3schools.com/tags/att_img_src.asphttp://www.w3schools.com/tags/att_img_longdesc.asphttp://www.w3schools.com/tags/att_img_ismap.asphttp://www.w3schools.com/tags/att_img_hspace.asphttp://www.w3schools.com/tags/att_img_height.asphttp://www.w3schools.com/tags/att_img_border.asphttp://www.w3schools.com/tags/att_img_alt.asphttp://www.w3schools.com/tags/att_img_align.asp

7/29/2019 MyHtml

18/45

Page 18

usemap #mapname Specifies an image as a client-side image-map

vspace Pixels Not supported in HTML5. Deprecated in HTML 4.01.

Specifies the whitespace on top and bottom of an image

width Pixels Specifies the width of an image
http://www.w3schools.com/tags/att_img_usemap.asphttp://www.w3schools.com/tags/att_img_usemap.asphttp://www.w3schools.com/tags/att_img_vspace.asphttp://www.w3schools.com/tags/att_img_vspace.asphttp://www.w3schools.com/tags/att_img_width.asphttp://www.w3schools.com/tags/att_img_width.asphttp://www.w3schools.com/tags/att_img_width.asphttp://www.w3schools.com/tags/att_img_vspace.asphttp://www.w3schools.com/tags/att_img_usemap.asp

7/29/2019 MyHtml

19/45

7/29/2019 MyHtml

20/45

7/29/2019 MyHtml

21/45

7/29/2019 MyHtml

22/45

Page 22

row 1, cell 1

row 1, cell 2

row 2, cell 1

How it looks in a browser:

row 1, cell 1 row 1, cell 2

row 2, cell 1

Table Tags

Tag Description

Defines a table

Defines a table header

Defines a table row

Defines a table cell

Defines a table caption

Defines groups of table columns

Defines the attribute values for one or more columns in a table

Defines a table head

Defines a table body

Defines a table footer
http://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asp

7/29/2019 MyHtml

23/45

7/29/2019 MyHtml

24/45

7/29/2019 MyHtml

25/45

Page 25

7/29/2019 MyHtml

26/45

Page 26

src="XXXHome.htm" />

Welcome to the XXX web siteEnter the site

or go to the UKonline CitizenPortal.

This adds a UK Government Logo and ticker tape news feed to all Government web sites inthe top 40 pixels leaving the remainder for the Department's own content. The noframesversion allows you to enter the site directly ignoring the ticker tape feed if you do not require it.

If you do not need the whole frame mechanism and just want to insert a single frame in anexisting page, this can be achieved using the iframe element. For example:

Links can be targetted at an iframe in the same way as a normal frame. It does reduce theframe overhead for simple usage.
http://www.ukonline.gov.uk/http://www.ukonline.gov.uk/http://www.ukonline.gov.uk/

7/29/2019 MyHtml

27/45

7/29/2019 MyHtml

28/45

Page 28

Chapter-6

Forms in HTML

Form

Forms in HTML are much like forms in real life. The user must fill in a set offields on the formand post it somewhere. For the moment, we will concentrate on filling the form in rather thanposting it. For commercial activities, it is usual for the form to be sent back to the server forprocessing. However, if the form is just designed to provide interaction between the user andthe Web page, it may be sent to a script for execution locally.Forms in real life come up in many shapes and sizes. Many forms provide text fields for youto fill in (your name and address for example. Some present you with a set of options and askyou to tickall that apply and some insist that you only tick one of the options. Most of thestandard methods of form filling are provided in HTML.

The tags used in the actual HTML of forms are form, input, textarea,selectand option.

formdefines the form and within this tag, there is one required action attribute which

tells the form where its contents will be sent to when it is submitted.

The optional methodattribute tells the form how the data in it is going to be sent and it can

have the value get(which is default) or post. This is commonly used, and often set to post

which hides the information (get latches the information onto the URL).

So a form element will look something like this:

The input tag is the daddy of the form world. It can take ten forms, outlined below:

_ is a standard textbox. This can also have a value attribute,

which sets the text in the textbox.

_ is the same as the textbox, but will display asterisks

instead of the actual characters that the user types.

_ is a checkbox, which can be toggled on and off by theuser. This can also have a checked attribute, which would be

used in the format .

_ is similar to a checkbox, but the user can only select oneradio button in a group. This can also have a checked attribute,

used in the same way as the checkbox.

_ is an area that shows the files on your computer, like you see

when you open or save a document in most programs.

_ is a button that when selected will submit the form. You can

control the text that appears on the submit button (as you can with buttonandreset types - see below) with the valueattribute, for example .

_ is an image that when selected will submit the form. This also

7/29/2019 MyHtml

29/45

Page 29

requires a src attribute, like the imgtag._ is a button that will not do anything without extra code

added.

_ is a button that when selected will reset the form fields.

_is a field which shows calendar control to select particular date.

_ is a field that will not be displayed and is used to passinformation such as the page name that the user is on or the email address that

the form should be posted to.

Note that the input tag closes itself with a '/>' at the end.

A textarea is, basically, a large textbox. It requires a rowsand cols

attribute and is used like this:

A big load of text here

The select tag works with the option tag to make drop-down select boxes.

They work like this:

Option 1

Option 2

Option 3

When the form is submitted, the value of the selected option will be sent. Similar to the

checked attribute of checkboxes and radio buttons, an optiontag can also have a selected attribute, which would be used in the formatRodent.

All of the tags mentioned above will look very nice presented on the page, but if you hook

up your form to a form-handling program, they will all be ignored. This is because the

form fields need names. So to all of the fields, the attribute nameneeds to be added, for

example

7/29/2019 MyHtml

30/45

7/29/2019 MyHtml

31/45

7/29/2019 MyHtml

32/45

7/29/2019 MyHtml

33/45

Page 33

Explorer)

Submit

input field

Example 4:

Enter Your Comments:

Example 4: (Tip)

Submit Clear

input field

Example 5:

Select an option:

option 1

option 2

option 3

option 4option 5

option 6

Example 5: (Tip)

Select an option:

option 2

Submit

input field

Example 6:

Select an option:

Option 1

Option 2

Option 3

Select an option:

Selection 1

Selection 2

Selection 3

Example 6: (Tip)

Select an option:

Option 1

Option 2

Option 3

Select an option:

Selection 1

Selection 2

Selection 3Submit

7/29/2019 MyHtml

34/45

Page 34

list item

Example 1:

List item 1

List item 2

List item 3

Example 2:

List item 1

List item 2

List item 3

List item 4

Example 1: (Tip)

List item 1

o List item 2

List item 3

Example 2:

i. List item 1ii. List item 2

iii. List item 3iv. List item 4

linkVisit our siteVisit our site

(InternetExplorer)

scrollingtext

Example

Marquee

menu

List item 1

List item 2

List item 3

List item 1

o List item 2

List item 3

meta

Nothing will show

metaNothing will show

meta Nothing will show (Tip)



metaNothing will show (Tip)

orderedlist

Example 1:

List item 1

List item 2

List item 3

List item 4

Example 2:

List item 1

List item 2

Example 1:

1. List item 12. List item 23. List item 34. List item 4

Example 2:

a. List item 1b. List item 2c. List item 3d. List item 4
http://www.yourdomain.com/http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.yourdomain.com/

7/29/2019 MyHtml

35/45

Page 35

List item 3

List item 4

listboxoption

Select an option:

option 1

option 2

option 3

option 4

option 5

option 6

Select an option: (Tip)

option 2

paragraph

This is an example displaying the use of the paragraph

tag.

This will create a line break and a spacebetween lines.

Attributes:

Example 1:

This is an example

displaying the use

of the paragraph tag.

Example 2:

This is an example

displaying the use


Example 3:

This is an example

displaying the use


This is an example displaying

the use of the paragraph tag.

This will create a line break

and a space between lines.

Attributes:

Example 1:

This is an example

displaying the useof the paragraph tag.

Example 2:

This is an example

displaying the use


Example 3:

This is an exampledisplaying the use


small(text) Example Example

strongemphasis Example Example

Table

Example 1:

Column 1

Column 2

Example 1:

Column 1 Column 2

Example 2:

7/29/2019 MyHtml

36/45

Page 36

Example 2: (Internet Explorer)

Column 1Column 2

Example 3:

Column 1

Column 2

Row 2

Row 2

Column 1 Column 2

Example 3:

Column 1 Column 2

Row 2 Row 2

table data

Column 1Column 2

Column 1 Column 2

tableheader

Column 1

Column 2

Column 3

Row 2

Row 2

Row 2

Row 3

Row 3

Row 3

Row 4Row 4

Row 4

Column

1

Column

2

Column

3

Row 2 Row 2 Row 2

Row 3 Row 3 Row 3

Row 4 Row 4 Row 4
http://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htmhttp://www.web-source.net/216_color_chart.htm

7/29/2019 MyHtml

37/45

Page 37

documenttitle Title of your webpage

Title of your webpage will be

viewable in the title bar.

table row

Column 1

Column 2

Column 1 Column 2

teletype Example Example

underline Example Example

unorderedlist

Example 1:

List item 1

List item 2

Example 2:

List item 1

List item 2

List item 3

List item 4

Example 1:

List item 1 List item 2

Example 2:

List item 1

List item 2

o List item 3

o List item 4

7/29/2019 MyHtml

38/45

Page 38

HTML 5

HTML 5 the fifth revision of the HTML standard. Its core aims have been to improve the

language with support for the latest multimedia while keeping it easily readable by humans and

consistently understood by computers and devices (web browsers, parsers, etc.).Basically HTML5

has its many new syntactical features, which include the , , and

elements, as well as the integration of SVG content. Due to these new elements, it will be very

easy to integrate multimedia and graphical content to web without using flash and third party

plugins. There are also another new elements like , , and

which enrich the semantic value of the document. Other major advantages of HTML5 are

described below.

HTML5 Features

1. Mutuality:Due to usability purpose the web sites made by developers are highly interactive nowadays and

for this developers need to include fluid animations, stream video, play music and Social Networksites like Facebook and Twitter into the websites. Till now they have only the option to integrate

it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume so much

time to develop and even the complexity of web application also increased. But now with the help

of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation

and many other rich content without using any plugins and third party programmas as the

functionality is built into the browser.

2. Cleaner markup / Improved CodeHTML 5 will enable web designers to use cleaner, neater code, we can remove most div tags and

replace them with semantic HTML 5 elements.

3. Improved SemanticsNow it is easy to see which parts of the page are headers, nav, footers, aside, etc as the tags arespecific for these all and most importantly know what their meaning and purpose is in whole the

format. By using HTML5 elements we can increase the semantic value of the web page as the

codes are very standardized.

4. Elegant formsHTML5 enables designer to use more fancier forms. Even it makes form validation native to

HTML, User interface enhancements and reduced need for JavaScript (only needed in browsers

that dont support form types). There will be different type of text inputs, search and different

fields for different purpose.

5. ConsistencyAs websites adopt the new HTML5 elements we will see more greater consistency in terms of the

HTML used to code a web page on one site compared to another. This will make it more easier

for designers and developers to immediately understand how a web page is structured.
http://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/Parsinghttp://en.wikipedia.org/wiki/Parsinghttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/HTML

7/29/2019 MyHtml

39/45

Page 39

6. Improved AccessibilityDifferent technologies can elaborate on the features with the help of HTML5, as they can

Immediately make more detailed understanding of the structure of a page by take a look at

HTML5 elements it has.

7. Fulfill the need of Web application

Many new features and standards have emerged as part of HTML 5. Once you detect theavailable features in todays browsers, you can take advantage of those features in your

application. Main focus of HTML5 is to make easier application with easy front-ends, drag and

drop tools, discussion boards, wikis and other useful elements.

8. Offline Application cacheAll browsers have some kind of caching m After a sometime, you open up your laptop and click

the Back button in the browser hoping to see the previous page that was opened. However, as you

are not connected to the internet and the browser didnt cache the page properly, you are unable to

view that page. You then click the Forward button thinking that at least that page will load, but itdoesnt. You need to reconnect to the internet to be able to view the pages. HTML 5, thankfully,

provides a smarter solution. While building the site, the developer can specify the files that the

browser should cache. So, even if you refresh the page when you are offline, the page will still

load correctly. This sort of caching has several advantages like offline browsing, files load much

faster and reduced load on server

9. Client-side database

While cookies have been used to track unique user data for years, they have seriousdisadvantages. The largest flaw is that all of your cookie data is added to every HTTP request

header. This can end up having a measurable impact on response time. So a best practice is to

reduce cookie size. With HTML5 we can do better by using sessionStorage and

localStorage(two different storage in HTML5) in place of cookies. It is not a permanent database,

but enables you to store structured data, temporarily.

10. Geolocation supportWith help of Geolocation any one can find out where you are in the world and sharing that

information with people. There is different ways to figure out where you areyour IP address,your wireless network connection, which cell tower your phone is talking to, or dedicated GPS

hardware that calculates latitude and longitude from information sent by satellites in the sky. But

The new HTML5 geolocation APIs make location, whether generated via GPS or other methods,

directly available to any HTML5-compatible browser-based application.

HTML5 - New Features

Some of the most interesting new features in HTML5:

The element for 2D drawing The and elements for media playback

Support for local storage

New content-specific elements, like , , , ,

New form controls, like calendar, date, time, email, url, search

7/29/2019 MyHtml

40/45

Page 40

HTML

The HTML5 tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

However, the element has no drawing abilities of its own (it is only a container for

graphics) - you must use a script to actually draw the graphics.

The getContext() method returns an object that provides methods and properties for drawing on

the canvas.

This reference will cover the properties and methods of the getContext("2d") object, which can be

used to draw text, lines, boxes, circles, and more - on the canvas.

Attributes

Property Description

fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing

strokeStyle Sets or returns the color, gradient, or pattern used for strokes

shadowColor Sets or returns the color to use for shadows

shadowBlur Sets or returns the blur level for shadows

shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape

shadowOffsetY Sets or returns the vertical distance of the shadow from the shape

HTML and

HTML5 introduces built-in media support via the and elements, offering the

ability to easily embed media into HTML documents.

Attributes

Property Description

audioTracks Returns an AudioTrackList object representing available audio tracks

autoplay Sets or returns if the audio/video should start playing as soon as it is

loaded

buffered Returns a TimeRanges object representing the buffered parts of theaudio/video
http://www.w3schools.com/tags/canvas_fillstyle.asphttp://www.w3schools.com/tags/canvas_fillstyle.asphttp://www.w3schools.com/tags/canvas_strokestyle.asphttp://www.w3schools.com/tags/canvas_strokestyle.asphttp://www.w3schools.com/tags/canvas_shadowcolor.asphttp://www.w3schools.com/tags/canvas_shadowblur.asphttp://www.w3schools.com/tags/canvas_shadowblur.asphttp://www.w3schools.com/tags/canvas_shadowoffsetx.asphttp://www.w3schools.com/tags/canvas_shadowoffsetx.asphttp://www.w3schools.com/tags/canvas_shadowoffsety.asphttp://www.w3schools.com/tags/canvas_shadowoffsety.asphttps://developer.mozilla.org/en-US/docs/HTML/Element/audiohttps://developer.mozilla.org/en-US/docs/HTML/Element/videohttp://www.w3schools.com/tags/av_prop_audiotracks.asphttp://www.w3schools.com/tags/av_prop_audiotracks.asphttp://www.w3schools.com/tags/av_prop_autoplay.asphttp://www.w3schools.com/tags/av_prop_buffered.asphttp://www.w3schools.com/tags/av_prop_buffered.asphttp://www.w3schools.com/tags/av_prop_buffered.asphttp://www.w3schools.com/tags/av_prop_autoplay.asphttp://www.w3schools.com/tags/av_prop_audiotracks.asphttps://developer.mozilla.org/en-US/docs/HTML/Element/videohttps://developer.mozilla.org/en-US/docs/HTML/Element/audiohttp://www.w3schools.com/tags/canvas_shadowoffsety.asphttp://www.w3schools.com/tags/canvas_shadowoffsetx.asphttp://www.w3schools.com/tags/canvas_shadowblur.asphttp://www.w3schools.com/tags/canvas_shadowcolor.asphttp://www.w3schools.com/tags/canvas_strokestyle.asphttp://www.w3schools.com/tags/canvas_fillstyle.asp

7/29/2019 MyHtml

41/45

Page 41

controller Returns the MediaController object representing the current media

controller of the audio/video

controls Sets or returns if the audio/video should display controls (like

play/pause etc.)

crossOrigin Sets or returns the CORS settings of the audio/video

currentSrc Returns the URL of the current audio/video

currentTime Sets or returns the current playback position in the audio/video (in

seconds)

defaultMuted Sets or returns if the audio/video is muted by default

defaultPlaybackRate

Sets or returns the default speed of the audio/video playback

duration Returns the length of the current audio/video (in seconds)

ended Returns if the playback of the audio/video has ended or not

error Returns a MediaError object representing the error state of the

audio/video

loop Sets or returns if the audio/video should start over again when finished

mediaGroup Sets or returns a the group the audio/video belongs to (used to link

multiple audio/video elements)

muted Sets or returns if the audio/video is muted or not

networkState Returns the current network state of the audio/video

paused Sets or returns if the audio/video is paused or not

playbackRate Sets or returns the speed of the audio/video playback

played Returns a TimeRanges object representing the played parts of the

audio/video

preload Sets or returns if the audio/video should be loaded when the page loads

readyState Returns the current ready state of the audio/video
http://www.w3schools.com/tags/av_prop_controller.asphttp://www.w3schools.com/tags/av_prop_controller.asphttp://www.w3schools.com/tags/av_prop_controls.asphttp://www.w3schools.com/tags/av_prop_controls.asphttp://www.w3schools.com/tags/av_prop_currentsrc.asphttp://www.w3schools.com/tags/av_prop_currentsrc.asphttp://www.w3schools.com/tags/av_prop_currenttime.asphttp://www.w3schools.com/tags/av_prop_currenttime.asphttp://www.w3schools.com/tags/av_prop_defaultmuted.asphttp://www.w3schools.com/tags/av_prop_defaultmuted.asphttp://www.w3schools.com/tags/av_prop_defaultplaybackrate.asphttp://www.w3schools.com/tags/av_prop_defaultplaybackrate.asphttp://www.w3schools.com/tags/av_prop_duration.asphttp://www.w3schools.com/tags/av_prop_duration.asphttp://www.w3schools.com/tags/av_prop_ended.asphttp://www.w3schools.com/tags/av_prop_ended.asphttp://www.w3schools.com/tags/av_prop_error.asphttp://www.w3schools.com/tags/av_prop_error.asphttp://www.w3schools.com/tags/av_prop_loop.asphttp://www.w3schools.com/tags/av_prop_loop.asphttp://www.w3schools.com/tags/av_prop_mediagroup.asphttp://www.w3schools.com/tags/av_prop_mediagroup.asphttp://www.w3schools.com/tags/av_prop_muted.asphttp://www.w3schools.com/tags/av_prop_muted.asphttp://www.w3schools.com/tags/av_prop_networkstate.asphttp://www.w3schools.com/tags/av_prop_networkstate.asphttp://www.w3schools.com/tags/av_prop_paused.asphttp://www.w3schools.com/tags/av_prop_paused.asphttp://www.w3schools.com/tags/av_prop_playbackrate.asphttp://www.w3schools.com/tags/av_prop_playbackrate.asphttp://www.w3schools.com/tags/av_prop_played.asphttp://www.w3schools.com/tags/av_prop_played.asphttp://www.w3schools.com/tags/av_prop_preload.asphttp://www.w3schools.com/tags/av_prop_preload.asphttp://www.w3schools.com/tags/av_prop_readystate.asphttp://www.w3schools.com/tags/av_prop_readystate.asphttp://www.w3schools.com/tags/av_prop_readystate.asphttp://www.w3schools.com/tags/av_prop_preload.asphttp://www.w3schools.com/tags/av_prop_played.asphttp://www.w3schools.com/tags/av_prop_playbackrate.asphttp://www.w3schools.com/tags/av_prop_paused.asphttp://www.w3schools.com/tags/av_prop_networkstate.asphttp://www.w3schools.com/tags/av_prop_muted.asphttp://www.w3schools.com/tags/av_prop_mediagroup.asphttp://www.w3schools.com/tags/av_prop_loop.asphttp://www.w3schools.com/tags/av_prop_error.asphttp://www.w3schools.com/tags/av_prop_ended.asphttp://www.w3schools.com/tags/av_prop_duration.asphttp://www.w3schools.com/tags/av_prop_defaultplaybackrate.asphttp://www.w3schools.com/tags/av_prop_defaultmuted.asphttp://www.w3schools.com/tags/av_prop_currenttime.asphttp://www.w3schools.com/tags/av_prop_currentsrc.asphttp://www.w3schools.com/tags/av_prop_controls.asphttp://www.w3schools.com/tags/av_prop_controller.asp

7/29/2019 MyHtml

42/45

Page 42

Example

Embedding media in your HTML document is trivial:

Your browser does not support the video element.

This example plays a sample video, with playback controls, from the Theora web site.

Here is an example for embedding audio into your HTML document

Your browser does not support the audio element.

The src attribute can be a URL of the audio file or the path to the file on the local system.

Your browser does not support the audio element

This code example uses attributes of the element:

controls : Displays the standard HTML5 controls for the audio on the web page.

autoplay : Makes the audio play automatically.

loop : Make the audio repeat (loop) automatically.

seekable Returns a TimeRanges object representing the seekable parts of the

audio/video

seeking Returns if the user is currently seeking in the audio/video

src Sets or returns the current source of the audio/video element

startDate Returns a Date object representing the current time offset

textTracks Returns a TextTrackList object representing the available text tracks

videoTracks Returns a VideoTrackList object representing the available video tracks

volume Sets or returns the volume of the audio/video
https://developer.mozilla.org/en-US/docs/HTML/Element/audiohttp://www.w3schools.com/tags/av_prop_seekable.asphttp://www.w3schools.com/tags/av_prop_seekable.asphttp://www.w3schools.com/tags/av_prop_seeking.asphttp://www.w3schools.com/tags/av_prop_seeking.asphttp://www.w3schools.com/tags/av_prop_src.asphttp://www.w3schools.com/tags/av_prop_src.asphttp://www.w3schools.com/tags/av_prop_startdate.asphttp://www.w3schools.com/tags/av_prop_startdate.asphttp://www.w3schools.com/tags/av_prop_texttracks.asphttp://www.w3schools.com/tags/av_prop_texttracks.asphttp://www.w3schools.com/tags/av_prop_videotracks.asphttp://www.w3schools.com/tags/av_prop_videotracks.asphttp://www.w3schools.com/tags/av_prop_volume.asphttp://www.w3schools.com/tags/av_prop_volume.asphttp://www.w3schools.com/tags/av_prop_videotracks.asphttp://www.w3schools.com/tags/av_prop_texttracks.asphttp://www.w3schools.com/tags/av_prop_startdate.asphttp://www.w3schools.com/tags/av_prop_src.asphttp://www.w3schools.com/tags/av_prop_seeking.asphttp://www.w3schools.com/tags/av_prop_seekable.asphttps://developer.mozilla.org/en-US/docs/HTML/Element/audio

7/29/2019 MyHtml

43/45

Page 43

The preload attribute is used in the audio element for buffering large files. It can take one of 3

values:

"none" does not buffer the file

"auto" buffers the media file

"metadata" buffers only the metadata for the file

Multiple source files can be specified using the element in order to provide video or

audio encoded in different formats for different browsers. For instance:

Your browser does not support the video element.

HTML

The HTML tag is used to represent an article. More specifically, the content within

the tag is independent from the other content on the site (even though it could be

related). By "independent" I mean that its contents could stand alone, for example in syndication.

Examples of article content could include a forum post, a newspaper article, a blog entry, or a

user-submitted comment.

The tag was introduced in HTML 5.

The tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.

Example:

Internet Explorer 9

Windows Internet Explorer 9 (abbreviated as IE9) was released to

the public on March 14, 2011 at 21:00 PDT.....

HTML

Purpose of the header element is to hold any of the h1 to h6 elements, a hggroup element, a table

of content, a search form or associated logos. This element adds a semantic value to your

HTML5 page. In general it may be said as a container element which may contain an

introductory or a navigational content.

header element has nothing to do with head element. And, it does not introduce any new section,

but it is the head of a section.
https://developer.mozilla.org/en-US/docs/HTML/Element/sourcehttps://developer.mozilla.org/en-US/docs/HTML/Element/source

7/29/2019 MyHtml

44/45

7/29/2019 MyHtml

45/45

MyHtml

Documents

Transcript of MyHtml