Transcript HTML: Form

Lesson 2: Accessibility & Usability
and Fundamentals of HTML
Dr. Husam Osta
2013

Homepage Guideline
Accessibility and Usability
Webpage Validations

HTML Fundamentals


1) Include a One-Sentence Tagline
Start the page with a tagline that summarizes
what the site or company does, especially if
you're new or less than famous.
2) Write a Window Title with Good Visibility in
Search Engines and Bookmark Lists
Begin the TITLE tag with the company name,
followed by a brief description of the site. Don't
start with words like "The" or "Welcome to"
unless you want to be alphabetized under "T" or
“W”.
3) Emphasize the Site's Top High-Priority Tasks
Homework lists, special announcements, class
calendars, etc. should be important
4) Include a Search Input Box
5) Show Examples of Real Site
Content. Use quotes where
possible.
6) Begin Link Names with the Most
Important Keyword
7) Offer Easy Access to Recent
Homepage Features
- If you change your site frequently,
have an archive of the stuff you’ve
recently removed or updated.
8) Don't Over-Format Critical
Content, Such as Navigation
Areas
9) Use Meaningful Graphics
For example, it's almost
always best to show photos
of real people actually
connected to the topic,
rather than pictures of
models.
Accessibility and Usability


Accessibility… ?
Usability… ?


Website accessibility is the action taken by
web designers and developers to ensure that
a web site is available and user friendly for
wide variety of users of members of the
public and who are with disabilities
Website should be designed to ensure that
everyone can use them and use them
correctly



Designing a website that is universally
accessible to all people means that the
number of people that view the website will
increase.
Most companies and educational institutions
around the world voluntarily comply to
accessibility rules
Most websites want people to use them, so
its important to design them so that people
can use them.

To view the most up-to-date principles and
guidelines, visit the World Wide Web Consortiums
page on
◦ “Web Content Accessibility Guidelines 1.0”

Overall, web design needs to be thought of in
terms of accessible design.
◦ Provide text(text is available to almost all browsing
devices and very accessible)
◦ Create documents that work even if the users can not
see or hear.

Make content understandable and navigable.
◦ This includes making language clear and simple, and
providing clear mechanisms for navigation.


Usability is the measurement of how well a
user can access and get what they need from
a website.
Usability is defined by how well and
satisfactorily a user is able to achieve their
goals.



There are millions of websites out there that
all contain the same information.
To make your website stand out and get
more traffic it is imperative to make it the
easiest to use with a high user success rate.
If a website is not user friendly then it will not
be visited by the users.

There are several questions that you must ask
when developing a website:
What are your primary business objectives?
Who are the users of your website?
What are your user’s tasks and goals?
What information do your users need, and in what
form do they need it ?
◦ What functions do your users want from the website?
◦ What are your users experience levels with the website?
◦ What hardware and software will the majority of your
users use to access your site?
◦
◦
◦
◦

After designing your website you can use a Web
Page Validator.
◦ A Validator is a software program that can check your
web pages against the web standards.


When using a validator to check HTML or CSS
documents, the validator returns a list of errors
found, according to your chosen standard.
Make sure you make it a habit to validate all your
web pages before publishing.
http://www.w3schools.com/web/web_validate.asp
http://www.tuxedogov.org/



No title
Table borders are
unnecessary
“Welcome To” should have
a top vertical alignment
◦ And the “Welcome To”
graphic is unnecessary


Navigation is centered
Unorganized menu
Indentation
Title Tag
Body Attributes
Heading Tag
Separator Tag
Align Settings
Links Tag
Images Tag
Lists Tag
Font Tag
Color Settings
Tables Tag
Forms Tag
<html>
<head><title>Title goes here</title></head>
<body>Body goes here</body>
</html>
<html>
<head>
<title>Title goes here</title>
</head>
<body>
Body goes here
</body>
</html>



Whatever falls between the <title>tags will be the
title of the web page.
In the web browser, the title usually shows at the
top left of the web browser window
Example:
<title>HTML Code: MiniChapter 1: The Basics</title>
Note:
You cannot use other tags between the <title> tags.
Example: You cannot have the code read:
<title><b>title goes here</b></title>
XX

The title of this web page, in four web browsers: (1)
Mozilla Firefox, (2) Microsoft Internet Explorer, (3)
Google Chrome, and (4) Apple Safari.
<body >
</body>

BACKGROUND="location_of_image"
◦ Background image for web page
◦ <body background="kitten.jpg">

BGCOLOR=“color name on in Hexadecimal”
◦ Hexadecimal Color Code for Background Color or
color name.

TEXT=" color name on in Hexadecimal”
◦ Hexadecimal Color Code for Text Color



Headings are some of the most important
tags within the BODY of your HTML
document.
You will usually use a heading to tell what the
following section of your page is about.
The opening tag for a heading is <hy> and
the closing tag is </hy> with y being the size
of the heading... from 1 to 6.
(1 being largest, and 6 being smallest)
<h1>…</h1>
<h3>…</h3>
<h6>…</h6>


<br> for line break
To go to new line within your text

<hr> for Horizontal Ruled Lines
Used to separate different areas of a web
page

<br> & <hr> DOES NOT have a closing tag


You may add certain attributes to the<hr> tag,

You may also use several attributes within one
tag...
◦ width="n" (for fixed pixel width) or width="n%" for a
certain percentage of the screen wide,
◦ size=n to make the line a certain pixel amount thick,
and
◦ noshade to turn the line's shading off.
◦ Default style <hr> with no attributes will make the line
the full width of the screen
◦ <hr width="50">
◦ <hr width="50%">
◦ <hr size=7>
◦ <hr noshade>
◦ <hr width="50%" size="10" noshade>
Left Align
 <h1 align=left>Left Align</h1>

Center Align
<h1 align=center>Center Align</h1>

Right Align
<h1 align=right>Right Align</h1>




Without links, the World Wide Web would not
be a web at all!
<a href="location or URL"> opening tag
and </a> closing tag
When you click on the underlined text it will
send the browser to the location within the
quotes
<a href=“www.google.com”>Go to Google</a>





You can link to a webpage in the same website
you don't need the domain, just the page name
imagine you're at your main page,
example.com/index.html
and you're linking to
example.com/contactme.html
You can use the code:
<a href="contactme.html">Contact Me</a>


Sending email using links:
Example create the following: ( Send email to the Author! )
◦ Send email to <a href="mailto:[email protected]">the Author!</a>

If you want a link to open in a new window, at the end of the
anchor ( <a> ) tag add:
◦ target="_blank"


<a href="http://www.example.com/" target="_blank">example.com</a>
Warning - Many pop-up blockers will block a (_blank) link from
opening


Hexadecimal codes is a special system of 16 digits
instead of 10
Normally you would count
◦ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9

Hexadecimal count
◦ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Hexadecimal codes are made by mixing the colors
of Red, Green, and Blue
◦
◦
◦
◦
‘0’ is darkest (0=black)
‘F’ is the lightest (F=white)
(in that exact order)
#000000 -> #FF2234 -> #11C3EE




#FF0000 - AaBbCcDdEeFf1234567890
#00FF00 - AaBbCcDdEeFf1234567890
#0000FF - AaBbCcDdEeFf1234567890
Other colors are made of a mixture of red,
green, and blue.
◦ #FF3300 is an orange color and #FFFF33 is a yellow

http://www.colorschemedesigner.com/

In Body attributes:
◦ <BODY bgcolor="#0099FF">
◦ <body bgcolor="#2299FF" text="#FFFF00">
◦ <body bgcolor=#0066AA text="#FFFF00" background="bluetile.jpg">

Image format:

You Will Not be able to use .bmp format files!
◦ .png
◦ .gif
◦ .jpg (or .jpeg)
<img src="location“>
It is also recommended to add HEIGHT and
WIDTH attributes


The IMG tag has no closing tag!

Using Image from different website:
<img src="http://www.davesite.com/graphx/davesmll.gif" width="200" height="50">


If your image is in the same folder as your HTML
files, just use the image name
If the image name is ( welcome.jpg )
<img src="welcome.jpg">


Clickable Images
Place the IMG tag within the A HREF tags
<a href=“URL”><img src="location_of_image“></a>
<a href="http://www.davesite.com/">
<img src="http://www.davesite.com/graphx/davesmll.gif" align="right">
</a>
OR
<a href="http://www.davesite.com/">
<img src=“welcome.jpg“ align=“left">
</a>
(Link + image) example:
<a href=“page.html">
<img src=“sound.jpg" width="225" height="151" alt=“image here" />
</a>
Link with no image example:
<a href="http://www.youtube.com"> Example Link to YouTube </a>
Three Lists Types:
• Unordered List
• Ordered List
• Definition List

This is probably the most common list you will use







pencils
pens
erasers
paper
glue
Unordered List Tags, Opening <ul> & Closing </ul>
<li> List Item. Only single Tag
<ul>
<li>pencils
<li>pens
<li>erasers
<li>paper
<li>glue
</ul>

This is a numbered list
1.
2.
3.
4.
5.


pencils
pens
erasers
paper
glue
Ordered List Tags, Opening <ol> & Closing </ol>
<li> List Item. Only single Tag
<ol>
<li>pencils
<li>pens
<li>erasers
<li>paper
<li>glue
</ol>

Starts with <dl> opening tag
Ends with </dl> closing tag
Inside <dl> tag:

Example:


◦ <dt> for Definition Term
◦ <dd> for Definition Definition
◦ These tags<dt> and <dd>
can use closing tags or just opening tag
Coffee
- black hot drink
Tea
- dark hot drink
Milk
- white hot or cold drink
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Tea</dt>
<dd>- dark hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Tables are defined with
◦ Opening <table> tag
◦ Closing </table> tag

A table is divided into
◦ Rows (with the <tr> and </tr> tags)
 Each row is divided into table data (with the <td> and
</td> tag) That holds the content of a table cell.
 A <td> tag can contain:
 text, links, images, lists, forms, other tables, etc.


Header information in a table are defined with
the <th> and </th> tag.
All major browsers will display the text in the
<th> element as bold and centered.

Example:
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Try this Table example
<table border=“2" cellpadding="5" cellspacing="5" width="100%" style="background-color:#F8DF99;">
<tr>
<td colspan="2">Table cell 1</td>
</tr>
<tr>
<td width="20%">Table cell 2</td><td>Table cell 3</td>
</tr>
</table>
Table cell 1
Table cell 2
Table cell 3


Although there are numerous ways a page can be
arranged
There are Four main sections:
1.
2.
3.
4.
Header
Sidebar ( can be two sidebars )
Content
Footer

Header
◦ The section of the page at the top which displays the site logo,
name, slogan and often the main menu

Main Content
◦ The section of the page where you insert and manage content.
This section sits significantly in the middle of the page

Sidebar Left/Right
◦ The columns on either side of the main content section. Within
these sidebars are sections called blocks; these blocks can
display secondary menus, pictures, etc.

Footer
◦ The little bar across the bottom of the page. Typically used to
define the bottom of the page with text about copyright or
credits




HTML forms are used to pass data to a server
The most important form element is
the input element
The input element is used to select user
information
A form can contain input elements like
◦ text fields, checkboxes, radio-buttons, submit buttons
and more.
◦ A form can also contain select lists, textarea, fieldset,
legend, and label elements.
<form>
.
input elements
.
</form>

Text Fields
◦ <input type="text" />
◦ Defines a one-line input field for user to enter text

Password field
◦ <input type="password" />
◦ Defines a password field, characters are hidden
<form>
Username: <input type=“text” name="firstname" />
<br />
Password: <input type="password“ name="pwd" />
</form>

Radio Buttons
◦ <input type="radio" />
◦ Defines a radio button. Radio buttons let a user
select ONLY ONE of a limited number of choices

Checkboxes
◦ <input type="checkbox" />
◦ Defines a checkbox. Checkboxes let a user select
ONE or MORE options of a limited number of
choices

Submit Button
◦ <input type="submit" />
◦ Defines a submit button.


A submit button is used to send form data to a server.
The data is sent to the page specified in the form's
action attribute
Username: Myname
Password:
Male
Female
I have a bicycle
I have a car
I have a motorcycle
Submit
Form example:
<form action="">
<textarea cols="10" rows="5">Type something</textarea>
<br />
<input type="submit" value="Send Away!" />
</form>
<marquee> Try Me in your contents ;) </marquee>
Thank You
•Fonts
•Frames
<font size="5" face="arial" color="#FF0000">
This paragraph is in Arial, size 5, and in red text color.
</font>
<font size="3" face="verdana" color=“red">
This paragraph is in Verdana, size 3, and in blue text color.
</font>


The <font size=n> and </font> tags also come
in handy.
Example:
Bob
is a Cool Guy isn't he?
<font size="+1">Bob</font>
<font size="+2">is</font>
<font size="+3">a</font>
<font size="+2">Cool</font>
<font size="+1">Guy</font>
isn't <font size="-1">he?</font>



With frames, you can display more than one
HTML document in the same browser
window.
Each HTML document is called a frame, and
each frame is independent of the others.
Disadvantages of using frames:
◦ Frames are not expected to be supported in future
versions of HTML
◦ Frames are difficult to use.
(Printing the entire page is difficult).
◦ The web developer must keep track of more HTML
document


The frameset element states HOW MANY columns or
rows there will be in the frameset, and HOW MUCH
percentage/pixels of space will occupy each of them.
The <frame> tag defines one particular window (frame)
within a frameset.
<frameset cols="25%,75%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
</frameset>


The first column is set to 25% of the width of the
browser window. The second column is set to 75% of
the width of the browser window. The document
"frame_a.htm" is put into the first column, and the
document "frame_b.htm" is put into the second column
set in pixels (cols="200,500") OR (cols="25%,*")





Many browsers cannot print framed pages
appropriately.
Frames are so hard to learn that many authors
write buggy code when they try to use them.
Search engines have trouble with frames because
they don’t know what composites of frames to
include in their index.
Some browsers make it difficult to bookmark
frames.
Many Websites that offer users a choice between
regular and framed versions have found that most
users prefer frames-free designs.