標籤

2012年5月28日 星期一

Lab 36 Programming in DOM

1. Open KompoZer
2. Based on the code as in

http://www.scottandrew.com/weblog/articles/dom_4 ,
write a code to generate the table of 9*9 products. (九九乘法表)

Hint: The javascript code should be enclosed by script tags.




Lab 35 Create Image using DOM

1. Open KompoZer
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Take a look at the sample code that shows how window.onload to load the image.
4. Use a button to load the image. Try how onclick works.

Lab 34 Hand code a form


Before you do this lab, you must understand what is CGI(Common Gateway Interface) and Form.

1. So please search the answer and post your opinion in your blog.

2. Hand code a HTML or use KompoZer to edit an HTML so that the webpage can send a request to Google like
http://maps.google.com/maps?q=24.9586,+121.24114

Use Form CGI that includes action, input, and submit.

Try a few different coordinates..



2012年5月20日 星期日

Lab 33 Lab Form and Action

1. Copy the search box of this search page,inlcuding radio buttons, text input, and submit button.
2. Open your KompoZer HTML editor.
3. Open a new empty HTML file.
4. Paste the search box into this new file.

5. Use KompoZer to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.

6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)

7. Save your file on your computer. Run your HTML by Firefox. What do you get?





8. Set method as "post"



9. Run your HTML by Firefox. What do you get?



Lab 32 Mash-Up 4 (Calendars)


Lab 31 Mash-up 3 (Blogs)

2012年5月7日 星期一

Lab 26 使用HTML 4 和HTML 5的影音播放

HTML 4

HTML 5


兩者的差別在於 Html 4 需要Flash支援, Html 5 取決於瀏覽器本身問題。
相較之下,Html 5的優勢比較大。

Lab 25 模擬色盲的效果






Lab 24 Firefox Accessibility Extension



1. Yahoo雅虎奇摩


Accessibility Extension
List of Accessibility Issues Summary

FAE RuleViolationsMessageClass
Warn The words contained in each h1 element should match a subset of the words contained in the title element. Words (%1) in h1 elements should also be in the title element. Title 
Warn The content of the headings of the same level within the same section should be unique. Headings 
Warn If the content of the alt attribute is not empty it should contain at least 7 characters and less than 90 characters. The text should provide people who cannot see the image orientation to the content and purpose of the image in the website. Images 
Fail 21 Heading elements that follow the last h1 should be properly nested. Headings 
CheckHeading content should be concise (usually 65 or fewer characters in length). Headings 
Warn Every onClick event handler should be on a focusable element. Events 
Warn 32 Ensure that links that point to the same HREF use the same link text. Links 
Warn 61 Ensure that links that point to different HREFs use different link text. Links 
Warn Each map, ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2. Menu and Navigation Bars 
Fail 21 Each img element should have alt text. Images 
Fail Each heading element (h1..h6) must have text content. Headings 
Warn 100 Avoid using text links that are shorter than four 4 characters in length. Links 

Date: 5/7/2012 20:02 PM
URL: http://tw.yahoo.com/


2. 中原大學

Accessibility Extension
List of Accessibility Issues Summary

FAE RuleViolationsMessageClass
Fail The page should contain at least one and no more than two h1 elements. Headings 
Fail Heading elements (h1..h6) should be used for structuring information on the page. Headings 
CheckHeading content should be concise (usually 65 or fewer characters in length). Headings 
CheckMost web pages should contain at least one navigation bar. Menu and Navigation Bars 
Fail Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code. Language Changes 
Fail Each img element should have alt text. Images 
Fail A DOCTYPE declaration was not found. W3C Specifications
Warn One level of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. Tables 
Warn Avoid using text links that are shorter than four 4 characters in length. Links 
Warn Ensure that links that point to the same HREF use the same link text. Links 
Fail Two or more levels of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. Tables 
Warn 14 Every img element that is less than 8 pixels high or 8 pixels wide OR has an empty alt attribute value should be removed and CSS techniques should be used for styling content. Images 
Warn 67 If the content of the alt attribute is not empty it should contain at least 7 characters and less than 90 characters. The text should provide people who cannot see the image orientation to the content and purpose of the image in the website. Images 

Date: 5/7/2012 20:06 PM
URL: http://www.cycu.edu.tw/




3. 中華民國總統府


Accessibility Extension
List of Accessibility Issues Summary

FAE RuleViolationsMessageClass
Fail The page should contain at least one and no more than two h1 elements. Headings 
Fail Heading elements (h1..h6) should be used for structuring information on the page. Headings 
CheckMost web pages should contain at least one navigation bar. Menu and Navigation Bars 
Warn One level of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. Tables 
Warn The character encoding was not specified. W3C Specifications
Warn Every img element that is less than 8 pixels high or 8 pixels wide OR has an empty alt attribute value should be removed and CSS techniques should be used for styling content. Images 
Warn Avoid using images that are smaller than 16 pixels by 16 pixels as links. Links 
Warn Ensure that links that point to different HREFs use different link text. Links 
Warn If the content of the alt attribute is not empty it should contain at least 7 characters and less than 90 characters. The text should provide people who cannot see the image orientation to the content and purpose of the image in the website. Images 
Fail 16 Two or more levels of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. Tables 
Warn 18 Avoid using text links that are shorter than four 4 characters in length. Links 
Warn 52 Ensure that links that point to the same HREF use the same link text. Links 

Date: 5/7/2012 20:09 PM
URL: http://www.president.gov.tw/

Lab 23 Making web pages accessible


1. Use Firefox Accessibility Extension to identify the accessibility failures and warnings in http://google.com

Accessibility Extension

List of Accessibility Issues Summary

FAE RuleViolationsMessageClass
Warn The words contained in each h1 element should match a subset of the words contained in the title element. Words (%1) in h1 elements should also be in the title element. Title 
Check Heading content should be concise (usually 65 or fewer characters in length). Headings 
Warn Each map, ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2. Menu and Navigation Bars 
Warn Hidden or empty frames should not be used. Frames 
Fail The b element must not be used to bold text content, instead use heading (h1-h6) elements for heading text or the strong element for emphasizing words, phrases or sentences. Text Styling 
Warn One level of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. Tables 
Fail Two or more levels of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings. Tables 
Fail The font and center elements must not be used for text styling, instead use structural markup should be used with CSS for styling. Text Styling 
Warn Ensure that links that point to the same HREF use the same link text. Links 
Fail Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code. Language Changes 
Warn 15 Avoid using text links that are shorter than four 4 characters in length. Links 

Date: 5/7/2012 21:10 PM
URL: file:///C:/Users/ELstudent/Desktop/Google.htm





2. Fix the failures you found.




Lab 22 More on HTML

Tables
1. Copy and paste theTables example at http://www.w3schools.com/html/html_tables.asp
2. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
3. What kind of effects can you see?
         出現2X2的表格



Lists
4. Copy and paste the Lists example at http://www.w3schools.com/html/html_lists.asp
5. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
6. What kind of effects can you see?

文字前面會出現標題