Telerik School Academy

1. http://schoolacademy.telerik.com Telerik School Academy Meeting #4 – February 2011 – Web-Technologies Homework Assignments Svetlin Nakov Telerik Corporation www.telerik.com

2. Prepare IT Test Questions

3. Prepare IT Test Questions • Prepare at least 20 questions for preparation for the National Olympiad's IT test • Prepare at least one question for each category from the official conspectus • Try to create complex, non-trivial questions • Categories are officially published at http://edusoft.fmi.uni-sofia.bg/documents/Conspect0910.pdf • Follow strictly the IT test template: IT-Test-Questions-Template.pptx

4. Web Technologies Basics

5. Web Technologies Basics • Describe the infrastructure of WWW. What is URL? What is HTML? What is HTTP? • Describe the HTTP protocol in details: HTTP requests, HTTP responses, request methods and status codes. • What is the difference between GET and POST methods in the HTTP requests? • What is a "cookie" and how does it work? • Install Fiddler, Firebug and WireShark and play with them. Try to inspect how Facebook works.

6. HTML Basics

7. HTML Basics • Write an HTML page like the following: * Use headings and divs

8. HTML Basics (2) • Write an HTML page like the following: • Write an HTML page looking like the PNG file named 3.Introduction.PNG. Using the <a> tag add anchors to the corresponding sections in the same page.

9. HTML Basics (3) • Create an user profile Web page Profile.html, friends page named Friends.htmland info page named Info.html. Link them to one another using <a> tag.

10. HTML Basics (4) • Create a Web site like the following: See the image InetJava-site.png.

11. HTML – Tables and Forms

12. Tables and Forms • Create Web Pages like the following using tables: • Create a Web Page like the following using forms:

13. Tables and Forms (2) • Create a Web form that looks like this sample: • See the image Sample-form.png

14. Introduction to CSS

15. CSS • Create the following Web page region using HTML with external CSS file. Note that each program line should be a hyperlink. Hint: use a definition list (<dl>) holding each program entry in a block element (e.g. <div>) with two child inline elements – <dt> and <dd>.

16. CSS (2) • Create the following Web page using HTML and external CSS. Using tables, inline styles, deprecated tags, and class attributes is not allowed.

17. CSS (3) • Create the following Web page using a table (one column with 3 rows) for the separate sectionsand external CSS styles. Buttons should be PNG images with text over them.

18. CSS (4) • Create the following Web page using HTML with external CSS file. Note that the images should be PNG with transparent background.

19. CSS (5) • Given the picture below (CSS-Web-Site.png) create the Web site. Use CSS and XHTML.

20. JavaScript

21. JavaScript • Create an HTML page that has two text fields (first name and last name) and a button. When the user clicks the button, a message should show the text in the text fields followed by the current time. • Create a Web page that asks the user about his name and says goodbye to him when leaving the page. • Modify the previous HTML page to have a text field for email address and on clicking the button check if the email is valid (it should follow the format <something>@<host>.<domain>). • Create a Web page that shows 20 <div> elements with random location, size and color.

22. JavaScript (2) • Create a drop-down menu • Use table for the main menu blocks • Use hidden <DIV> elements (display:none; position:absolute; top:30px) • Use JavaScript and onmouseover and onmouseout event to change display: none/block

23. JavaScript (3) • Create a DTHML page that has <div>containing a text that scrolls from right to left automatically • Use setInterval() function to move the text at an interval of 500 ms • Use overflow:hidden for the <div> • Use scrollLeft and scrollWidth properties of the <div> element

24. jQuery

25. jQuery • Create a HTML web page with 15 image tags. Using jQuery print the alt and src attributes of all image tags. • Figure out how many elements on the page are hidden (hint: .length) • Create a HTML web page with some <div> tags. Select all of the div elements that have a class of "module" • Declaratively make an unordered list. Using jQuery add 5 new items to the end the unordered list

26. jQuery (2) • Try to write a simple HTML/jQuery based Tic-Tac-Toe game. • Write a simple HTML page, starting from empty file with only <head> and <body> tags. Add two <div> tags, in one of them a numbered list of 3 points, an anchor linked to Telerik Academy Web Site and a paragraph with yellow background. Build it using only jQuery (no HTML). • Write a Chess using jQuery and Ajax.

27. Creating Web Sites with HTML and CSS

28. HTML and CSS • Create this with XHTML and CSS. Using tables and frames are not allowed! See the file: site-sample.png

29. HTML and CSS (2) See the file: architecture.psd • Create this with XHTML and CSS. Using tables and frames is not allowed!

30. HTML 5

31. HTML 5 • Write a HTML page using HTML 5 that consists of Header, Footer, Navigation and Aside Panels. Position them as in the picture on the right • Convert the Exercise_02.html HTML page to HTML5 page modifying existing semantic tags (like the doctype tag) and by replacing old/adding new semantic tags

32. Submission Instructions and Deadline

33. Submission Instructions • Homework solutions should be submitted at the following Web site: • http://nakov.devbg.org/schoolacademy-uploads/ • Solutions should be packed in a single ZIP or RAR archive (up to 8 MB)

34. Further Instructions • The deadline for the homework is: • A week before the next training session • Everybody is free to use help from friends, teachers or Internet • Submission of the same work by different authors may result in a disqualification • Ask your questions in the Telerik School Academy official discussion group: • http://groups.google.com/group/it-olymp

35. Homework Assignments ? Questions? ? ? ? ? ? ? ? ? ? http://schoolacademy.telerik.com