連結列

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月21日 星期一

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 20 Google Accessibility

1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link.
2. Google Access Keys Enables navigation through Google search results.
Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站



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

Html 4

Html 5

Html 4 必須靠Flash套件才能播放,Html 5 則變成瀏覽器需支援一般檔案格式的影片播放。

Lab 25 模擬色盲的效果

VisCheck 可以模擬色盲的效果,而讓妳看到色盲讀者所會看到的樣子。妳不但可以用他來檢查某一張圖片,也可以檢查整個網頁。

從學校網站首頁新聞選取五張照片,測試兩類色盲模擬效果。

 





Lab 24 Firefox Accessibility Extension

Use Firefox Accessibility Extension to check the accessibility of three sites that you visit most.
Report the summary of all the errors and warnings for each site.

Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站

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 
Fail Each heading element (h1..h6) must have text content. Headings 
Check Heading content should be concise (usually 65 or fewer characters in length). 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 
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 Every onClick event handler should be on a focusable element. Events 
Warn The content of the headings of the same level within the same section should be unique. Headings 
Fail 21 Heading elements that follow the last h1 should be properly nested. Headings 
Fail 21 Each img element should have alt text. Images 
Warn 32 Ensure that links that point to the same HREF use the same link text. Links 
Warn 58 Ensure that links that point to different HREFs use different link text. Links 
Warn 100 Avoid using text links that are shorter than four 4 characters in length. Links 

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


2. Facebook


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 that follow the last h1 should be properly nested. Headings 
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 
Check Most web pages should contain at least one navigation bar. Menu and Navigation Bars 
Fail The i element must not be used to italicize text content, instead use heading (h1-h6) elements for heading text or the em element for emphasizing words, phrases or sentences. Text Styling 
Fail The u element must not be used to underline text content, instead use heading (h1-h6) elements for heading text or the em or strong element for emphasizing words, phrases or sentences. Text Styling 
Warn The character encoding was not specified. W3C Specifications 
Check onChange event handler should not be used with the select element to cause a automatic change of focus or load a web page. Events 
Warn Ensure that links that point to different HREFs use different link text. Links 
Warn Avoid using text links that are shorter than four 4 characters in length. Links 
Warn 10 Ensure that links that point to the same HREF use the same link text. Links 
Fail 10 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 

Date: 5/7/2012 20:05 PM
URL: http://www.facebook.com/

3. itouch

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 
Check Most 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 
Warn Hidden or empty frames should not be used. Frames 
Fail A DOCTYPE declaration was not found. W3C Specifications 
Fail Every frame element must have a title attribute with content that describes the purpose of the frame. Frames 

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

Lab 23 Making web pages accessible


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



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
3. What kind of effects can you see?
一個表格,將內容分成兩欄兩列



Lists
4. Copy and paste the Lists example at http://www.w3schools.com/html/html_lists.asp
6. What kind of effects can you see?
文字以項目標示