HTML ll Events, Framesets and XHTML. onclick Captures the click event Can be used with most tags Examples onclick=“javascript:alert(‘Thank you for.

HTML ll

Events, Framesets and XHTML

onclick

Captures the click event Can be used with most tags Examples

onclick=“javascript:alert(‘Thank you for subscribing!’)”

onclick=“checkfield(form1)”

ondoubleclick

Captures the double click event Used on most tags Example

ondblclick = “javascript:document.getElementById(‘txtName’).value = this.value”

onmouseover/onmouseout

Captures the movement of the mouse

Used with most tags Example:

onMouseOver="javascript:this.src=‘world.jpg'"

onmouseout="javascript:this.src='web.gif'"

onfocus/onblur

Captures event when you set focus on an element or lose focus.

Used with <a>, <area>, <input>,<label>, <body>, <textarea>,<button>,<frameset>,<select>

Example: onfocus=“javascript:alert(‘This field is

required’)” onblur=“javascript:if (this.value) == “”)

{alert(‘You must enter a value in this field’)}”

Frameset

Breaks your page into rows and columns. Each frame is essentially it’s own document.

Attributes: rows or cols – you must define one or

the other Border, frameborder, framespacing or

border color

Frameset example

<frameset cols=“150, *”>

</frameset>

Frame Content

Defines each frame within the frameset Attributes:

Src = defines the URL that will be displayed in the frame

Name or id – used to uniquely identify the frame

Noresize – keeps the user from resizing the frame

Scrolling – allows vertical or horizontal scrolling Frameborder and bordercolor – determines if

there is a border and it’s color

noframes

This replaces the body and is read by browsers that do not support frames

It is best to include this especially if you are unsure of what browser your audience will be using

Frames Example

<frameset cols=“150, *”><frame src=“navbar.htm” name=“frame1”><frame src=“content.htm” name=“frame2”>

</frameset><noframes>

We apologize, but this page must be viewed in a frame-capable browser.

</noframe>

Inline frames

Allows you use frames inside a traditional document

Attributes Name – identifies the frame Src – the url of what is to be in the

frame when the page loads Height and width – needs to be set or

defaults will apply (width is 300px, height is 100px)

Disadvantages of using frames

1. Search Engines Will Have Difficulty Indexing Your Website. Search engines have great difficulty indexing websites which use frames. In most cases, this means that only the home page is indexed. However, it might also mean that the internal frames may be indexed outside of the frameset. This results in visitors being directed to a page which lacks a navigation or footer.

Disadvantages of using Frames

1. There Are Better Alternatives. If the main reason that you want to use frames is to avoid having duplicate content on each page, such as a navigational menu, there are other methods to make this happen. These include Server Side Includes, Dynamic Coding (such as PHP or ASP), and CGI.


1. Visitors Will Have Trouble Bookmarking Pages. When visitors browse your website, they might find some interesting content and want to bookmark it. However, frames will not allow them to do this properly. Because the user is always within the frameset element, they will be able to bookmark the frameset, but not the individual page that they want.


1. Internet Connection Speeds Are Faster. While using frames might have reduced load time in the past, internet connection speeds are now faster. In addition, there are now more efficient ways to code websites that further minimize the sizes of web pages and what your visitors actually need to download.

External .js files

Can be linked so javascript functions can be reused on different pages.

<script language=“javascript” src =“openwindow.js” type=“text/javascript”></script>

XHTML

Like HTML but uses DTD to define XML elements

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

XHTML

Nested Tags Same as current HTML <b>This statement is <i>itallic</i></b>

End Tags are required <p></p> <br /> <input type = “text” name=“txtName” />

XHTML

Case sensitive All html tags need to be lower case

Attributes in Quotes All attribute values must be in double

quotes <table name=“tblTableOne” cols=“3”

rows=“5” width=“500”>

XHTML

Explicit Attribute values All attributes must have a value <option “IA” selected=“selected”> <input type=“radio” name=“rdoMF”

value=“M” checked=“checked”> Special Characters

Put javascript in external files <img src=“saltandpepper.jpg” alt=“Salt

& Pepper”> See appendix F for character definitions

XHTML

Name vs. Id XHTML has a strong preference for the

Id tag If you have to use the name attribute

for a tag, then also add the id attribute

HTML ll Events, Framesets and XHTML. onclick Captures the click event Can be used with most tags Examples onclick=“javascript:alert(‘Thank you for.

Documents