9. Meeting-4-Web-Technologies-Homework

advertisement
Telerik School Academy
Meeting #4 – February 2011 – Web-Technologies
Homework Assignments
Svetlin Nakov
Telerik Corporation
www.telerik.com
Prepare IT Test
Questions
Prepare IT Test Questions
1.
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.unisofia.bg/documents/Conspect0910.pdf
 Follow strictly the IT test template: IT-TestQuestions-Template.pptx
3
Web Technologies Basics
Web Technologies Basics
2.
Describe the infrastructure of WWW. What is URL?
What is HTML? What is HTTP?
3.
Describe the HTTP protocol in details: HTTP
requests, HTTP responses, request methods and
status codes.
4.
What is the difference between GET and POST
methods in the HTTP requests?
5.
What is a "cookie" and how does it work?
6.
Install Fiddler, Firebug and WireShark and play with
them. Try to inspect how Facebook works.
HTML Basics
HTML Basics
7.
Write an HTML page like the following:
* Use headings and divs
7
HTML Basics (2)
8.
Write an HTML page like the following:
9.
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.
8
HTML Basics (3)
10.
Create an user profile Web
page Profile.html, friends
page named Friends.html
and info page named
Info.html. Link them to
one another using <a>
tag.
9
HTML Basics (4)
11.
Create a Web site like the following:
See the image InetJava-site.png.
10
HTML – Tables and Forms
Tables and Forms
12.
Create Web Pages like the following using
tables:
13.
Create a Web Page
like the following
using forms:
12
Tables and Forms (2)
14.
Create a Web form
that looks like this
sample:
See the image Sample-form.png
13
Introduction to CSS
CSS
15.
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>.
15
CSS (2)
16.
Create the following Web page using HTML and
external CSS. Using tables, inline styles, deprecated
tags, and class attributes is not allowed.
16
CSS (3)
17.
Create the following
Web page using a table
(one column with 3
rows) for the separate
sections and external
CSS styles. Buttons
should be PNG images
with text over them.
17
CSS (4)
18.
Create the following Web page using HTML with
external CSS file. Note that the images should be
PNG with transparent background.
18
CSS (5)
19.
Given the picture below (CSS-Web-Site.png)
create the Web site. Use CSS and XHTML.
19
Creating Web Sites with
HTML and CSS
HTML and CSS
20.
Create this with XHTML and CSS. Using tables and
frames are not allowed!
See the file: site-sample.png
21
HTML and CSS (2)
21.
Create this
with XHTML
and CSS.
Using tables
and frames is
not allowed!
See the file: architecture.psd
22
HTML 5
HTML 5
22.
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
23.
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
24
Submission Instructions
and Deadline
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)
26
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
27
Homework Assignments
Questions?
http://schoolacademy.telerik.com
Download