WebWork 101 (aka Website Programming Languages)
I. Ongoing Assignments and Practices
A.) Vocabulary. The students are given lesson specific vocabulary terms. These terms range from general descriptive terms describing web functionality to computer language specific terms such as tags and functions. Students will describe the usage of tags in their own words and show an example. Selected readings will provided using course textbooks and a variety of web resources. Students will have the opportunity to negotiate meaning of terms while working in small groups.
B.) Online exercises: After direct instruction, students will practice constructing a web based example by implementing the web structures and tags taught in the lesson. Additional practice may be provided using the ÒTry MeÓ editor available at w3schools.com. Since the product of this course is the creation of web page(s), student projects will naturally be available online to allow peer critique, teacher grading and to inform teaching.
D.) Differentiation: Individual student assignments will be differentiated based on complexity and difficulty reflecting individual student abilities and learning readiness.
E.) Assessments: Student work will be assessed on an ongoing basis by teacher observation. Assignments will be assessed based on completeness and correctness of programming structure and syntax. Summative assessments (semester mid-terms and finals) will consist of student selections from a teacher provided list of projects and will be graded based on complexity, completeness and correctness of syntax and functionality.
II. Instructional Units
Unit 1: Website Basics – Website structure, files, browsers, servers -Semester 1 Week 1
Learning Objective: SWBT know the functions of browsers and servers, identify the major components of a website, understand and identify the differences between a static html website and a CMS (Content Management System) or Blog.
In this unit, students learn about the basic types of websites and how to identify them. Students perform web searches using search engine(s) and learn how to view website code. Students learn to identify major sections of a static html website such as the ‘head’, ‘body’ and ‘navigation bar’.
Summative assessment: Teacher provides a list of websites and students identify website type, major components. Group work is allowed.
Unit 2: HTML Basics – HTML (Hypertext Markup Language) programming language structure, essential tags, syntax Semester 1 Weeks 2-5
Learning Objective: SWBT create a live webpage including major components, use a variety of ‘tags’ to add content to the webpage.
In this unit, students will learn basic webpage creation tools including the use of text editors, ftp upload programs, web page publishing and the use of essential html tags to present text to the user.
Summative assessment: students create a webpage using the tags and attributes studied in this unit.
Unit 3: HTML Basics – HTML essential tags, attributes, links, tables, images and image mapping Semester 1 Weeks 6-9
Learning Objective: SWBT create a variety of table and sub-table types, ordered and unordered lists, present and scale the size of images and implement internal hyperlinks or anchors within their site and hyperlinks to external web resources.
In this unit, students will extend their knowledge of html to include major elements employed in most commercially built websites.
Summative (Midterm) assessment: Students will create a multi-page website using all tags learned to date. The website will include basic page-to-page navigation, internal anchors and links to external web resources. The subject and scope of each student’s website is student’s choice (with teacher approval).
Unit 4: HTML Continued – Colors, Backgrounds, styles, Navigation Bars Semester 1 Weeks 10-13
Learning Objective: SWBT add background colors and backgrounds to their websites, style text, and create a conventional navigation bar as seen in commercially produced websites.
In this unit, students will extend their knowledge by applying color, backgrounds and a navigation bar to their website.
Summative assessment: Students will apply colors and styles to their multipage website. Students will add a navigation bar to allow users to navigate between pages of their website.
Unit 5: CSS (Cascading Style Sheets) – Semester 1 Weeks 14-18
Learning Objective: SWBT use basic capabilities of CSS such as text styles and DIVs (Divisions) using ‘on-page’ CSS. Lesson will be extended to the use of off page CSS style sheets.
In this unit, students will reinforce their learning of html text styling, and learn the use of DIVs to define sections of a webpage. Students will also learn the use of off page CSS style sheets, how to call style sheets in a webpage. Students will develop style sheets using layers, Z position and will explore other CSS attributes.
Summative (Semester 1 Final) assessment: Students will organize and style their multipage website using off page CSS. Students will revise their navigation bars using CSS.
Unit 6: Introduction to PHP (Hypertext Pre-Processing) – Semester 2 Weeks 1-3
Learning Objective: SWBT use basic PHP commands to generate HTML code.
In this unit, students will learn the role of PHP, expand their skills by creating PHP webpages and learn basic PHP commands, syntax and error handling.
Summative assessment: Students will recreate their multipage website using PHP and will implement a number of essential PHP commands. Students will debug their PHP site and present the results to the class.
Unit 8: Advanced PHP – Semester 2 Weeks 6-10
In this unit, students will present the user with image links, and depending which image is clicked, a new page will be generated with the appropriate content. New skills include PHP concatenation of hyperlinks. (Note: this is a simplified version of ‘auto-page-generation’ using webpages and associated files. This unit does not cover database creation and SQL queries.)
Summative assessment: Students will create a website with user selected content and automatic page generation.
Unit 9: Programming language support, mining for images, videos and code – Semester 2 Weeks 11-12
Learning Objective: SWBT research the web to find existing code and use web-based resources.
In this unit, students will learn to mine code from existing websites, and using that code as a guide create unique code. Students will also learn to use web resources such as dynamicdrive.com and stackoverflow.com to research solutions to specific programming problems.
Summative assessment: Students will devise solutions to teacher generated programming problems.
Unit 10: Programming language support, mining for images, videos and code – Semester 2 Weeks 13-16
Learning Objective: SWBT create user interactions.
Summative assessment: Students will create a web page using both Alerts and input forms.
Unit 11: – Final Project- Semester 2 Weeks 17-18
Learning Objective: SWBT demonstrate their knowledge by creating a new website of their own design.
In this unit, students may work collaboratively to develop solutions and debug their programs as they work on individual projects.
Summative assessment (Semester 2 Final project): Students create individual websites expressing their own interests and engage their community by providing opportunities for user input. Based on user input, custom webpages are generated with content targeted to user input.
Course Content Sumary
- o Website structure, files, browsers, servers
- o HTML (Hypertext Markup Language) programming language structure, essential tags, attributes, syntax
- o HTML links both internal and external o Tables, lists and image mapping
- o Introduction to CSS (Cascading Style Sheets), DIVs, layers, and Z position o PHP (Hypertext Preprocessor Language) – the role of PHP
- o Essential elements of PHP, code preprocessing
- o Programming language support, mining for images, videos and code