myhtml
TRANSCRIPT
-
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:
, forothers, 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
Here is how it looks in a browser:
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
Here is how it looks in a browser:
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)
meta Nothing will show (Tip)
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
of the paragraph tag.
Example 3:
This is an example
displaying the use
of the paragraph tag.
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
of the paragraph tag.
Example 3:
This is an exampledisplaying the use
of the paragraph tag.
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