Introduction to Web Systems and Media ITCO381

Part 1

In an era where Web sites are highly dynamic, interactive, and database dependent, a static Web page consisting of only HTML may seem archaic.However, Web developers must begin somewhere and a good understanding of the language of the Web (HTML) is the right place to start.You have decided to develop a static Web page that contains valid HTML as the newsletter for an organization that interests you.

Create a static Web page that includes the basic structure of a valid HTML (not XHTML) document.Make sure to include the language attribute of the html element and the character set attribute of the metadata element.You may want to save this basic document as the starting structure for development of all static Web pages.
Continue to structure the newsletter using the HTML semantic elements
header
section
footer
Within the structure of the newsletter add other HTML elements including at least one:
heading
paragraph
image that implements accessibility guidelines
navigation that includes a
list of at least
four links that
navigate to actual Web pages and
implement accessibility guidelines
Use of any inline elements should follow current standards
No style should be applied
Validate the finished web page.
Zip (compress) the into a .zip file.

Part 2

Cascading Style Sheets are used to provide style, presentation, and layout for the HTML content of a Web page. You will develop an external CSS to provide style, presentation, and layout to an HTML document.

If you have not installed Microsoft Visual Studio Software in a prior course, follow these instructions for installation steps.
Download the provided Unit2.zip document and save it to your computer. Click here to download the Unit2.zip document.
Right-click the Unit2.zip folder and Extract All.
Open Visual Studio and select File > Open Web Site from the menu.Navigate to the extracted Unit2 folder and select it to open the Website in Visual Studio.
Select Website > Add New Item from the menu and select Style Sheet from Add New Item dialog box. Name the style sheet Unit2.css.
Add style rules to Unit2.css to accomplish the following:
Ensure that the semantic elements format in older browsers.
Eliminate the default spacing around all elements.
Use the Verdana font or any available sans-serif font for the text.
Set the font size for the body to 80% of the browser’s default font size.
Set the width of the window to display the document to 700.
Center the text in the header.
Provide spacing at the top of the level-one heading in the header to the equivalent of one capital M without affecting the spacing of the image.
Set the font size for the level-one heading in the header to three times the browser’s default font size.
Display the image in the header to the right of the text.
Ensure the text of the section does not flow around the image in the header.
Display the image in the first paragraph to the left of the text.
Set the font size for the level-one heading in the section to two times the browser’s default font size.
Center the text in the level-one heading in the section.
Provide spacing at the bottom of the level-one heading in the section to the equivalent of one capital M.
Set the font size for the level two headings in the section to one and one-half times the browser’s default font size.
Center the text in the level two headings in the section.
Center the text in the navigation.
Provide spacing at the bottom of the navigation to the equivalent of two capital Ms.
Bold the text of a hyperlink when the user hovers over the hyperlink or a hyperlink gets the focus.
Set the text of a hyperlink to red when the user hovers over the hyperlink or a hyperlink gets the focus.
Display the footer on the right side of the page.
Set the font size of the text in the footer to 75% of the browser’s default font size.
Validate the CSS style rules.
Zip (compress) the Visual Studio project folder into a .zip file to submit.

Part 3

Continue to build on the skills of providing Web page content and structure with HTML and Web page style and layout using CSS. Design and develop an intermediate-level Web page consisting of valid HTML content that includes semantic elements, images, and tables.

Use Visual Studio to create a New Web Site. Select the ASP.NET Empty Web Site template to create the Web site. Use the File System Web location to create the Web site at the selected location and give the Web site an appropriate name.
Create a static Web page that includes the basic structure of a valid HTML (not XHTML) document.
Make sure to include
the language attribute of the html element and
the character set attribute of the metadata element.
Name the Web page Unit3.htm
Link to the Unit3.css file used to style and layout the Web page.
Assign “Unit 3 IP” to the title.
Structure the Web page using the HTML semantic elements
header
section
footer
Within the structure of the Web page add other HTML elements including at least:
one level-one heading for the page in the header
navigation in the header that includes a
one level-two heading for a table of contents in the header
list of at least three placeholders that
navigate to the paragraphs in the section
implement accessibility guidelines
one level-one heading for the section
three paragraphs in the section
beginning of each paragraph is a placeholder
additional text to lengthen the document
three paragraphs in the section
a return placeholder that navigates back to the table of contents
one figure element in the section to display
Image that implements accessibility guidelines
Copy the image file to the Web site folder.
Submit the image file along with the document.
figure caption
figure element in the section to display
figure caption
table width
table header
table body
at least three table rows
at least three table data
table footer that spans three columns
Use of any inline elements should follow current standards
No style should be applied
Validate the HTML in the Web page.

Develop an external CSS to provide style, presentation, and layout to the HTML document.

Select Website > Add New Item from the menu and select Style Sheet from Add New Item dialog box. Name the style sheet Unit3.css.
Add style rules to Unit3.css to accomplish the following:
Ensure that the semantic elements format in older browsers.
Eliminate the default spacing around all elements.
In the following order, use the Calibri font, Arial font, or any available sans-serif font for the text.
Set the font size for the body to 85% of the browser’s default font size.
Set the width of the window to display the document to 950.
Center the text in the header.
Set the font size for the level-one heading in the header to two and one-half times the browser’s default font size.
Set the font size for the level-two heading in the header and the level-one heading in the section to one and three-quarter times the browser’s default font size.
Set the text to undecorated and one and one-quarter times the browser’s default font size when the user hovers over or focuses on the links in the table of contents.
Set the width of figures to 300.
Display figures on the right with the paragraph text flowing to the left of the figures.
Set the margin for figures to the equivalent of one capital M on all sides.
Set the padding for figures to the equivalent of one capital M on all sides.
Display a one pixel black border to the left of figures.
Bold the text of figure captions.
Set the size of the font of figure captions to one and one-quarter times the browser’s default font size.
Center the text of figure captions.
Set the padding of all paragraphs to the equivalent of one capital M on the top and bottom and zero on the left and right.
Clear the float of the figures in the paragraphs that return the user to the table of contents.
Center the text of the paragraphs that return the user to the table of contents.
Display the footer in the center of the page.
Set the padding of table data and table headers to zero on the top and bottom and to the equivalent of one-half a capital M on the left and right;
Display a one pixel black border around all table data and table headers.
Center the text in the table footer.
Bold the text in the table footer.
Validate the CSS style rules.
Zip (compress) the Visual Studio Web site folder into a .zip file to submit.

Part 4

Develop a 5-6 page Word document that describes the design for a small Web site that meets the following specifications.

The Web site includes four or more Web pages designed according to current usability guidelines.
One page must be the Home page.
One page must be a subscription page that allows the user to become a member or subscribe to your organization andperforms HTML data validation.
The Web site must incorporate the use of the following:
Images and Audio
At least one table (NOT for page layout)
At least one form
Navigation
Other valid HTML elements
Produce a cohesive site that is easy to navigate.
The Web site must include external CSS used to format and layout each Web page.
Validate the HTML in each Web page.
Validate the CSS style rules in each CSS.
The design document must include details about your design, technologies employed, potential challenges and explanations regarding your validation process. Include a title page.
Add the design document to the Visual Studio Web site folder.
Submit the Word Design document and the Web site into a .zip file.

Please add your file.

You will be graded on the design and functionality of the Web site. You will be graded on the usability of the Web site. You will be graded on the ability to include the required Web pages and the required HTML elements in the Web site. You will be graded on the use of CSS to format and layout Web pages. Points will be deducted for a missing or incomplete site plan. Points will be deducted for missing required Web pages. Points will be deducted for any missing required elements and/or attributes. Points will be deducted for any HTML or CSS validation errors including any missing accessibility requirements.

Part 5

Continue to build on the skills of providing Web page content and structure with HTML and Web page style and layout using CSS.Demonstrate the skill of creating a dynamic Web page that includes JavaScript client-side programming.Demonstrate the skill of creating a Web page that delivers audio and/or video content.Design and develop a Web site that includes at least two Web pages that meet the following requirements.

The design of all Web pages in the site must include:
a header at the top of the page,
a horizontal navigation bar below the header,
required content below the navigation bar.
One Web page must include dynamic content created by client-side programming using JavaScript.
JavaScript programming code can be either
embedded in the head element or
included in an external JavaScript file that is linked to the Web page.
You may
write your own JavaScript code or
obtain the JavaScript code from a provider of free code.
Ensure the JavaScript programming code is free of errors that cause it to fail to execute.
Ensure the JavaScript code is called to execute.
Ensure the JavaScript programming code is included in the Web site.
Validate the HTML in the Web page.
One Web page must deliver audio and/or video content.
Deliver the content to older browsers
using the embed element
that falls back to Flash.
Deliver the content to modern browsers
using the video and/or audio elements.
Ensure the content plays in all modern browsers.
Ensure the media files are included in the Web site.
Validate the HTML in the Web page.
Use at least one external CSS file to
provide style, presentation, and layout to the Web pages in the Web site.
Validate the CSS style rules.
Zip (compress) the Visual Studio Web site folder into a .zip file format to submit.

Discussion Board

The Discussion Board (DB) is part of the core of online learning. Classroom discussion in an online environment requires the active participation of students and the instructor to create robust interaction and dialogue. Every student is expected to create an original response to the open-ended DB question as well as engage in dialogue by responding to posts created by others throughout the week. At the end of each unit, DB participation will be assessed based on both level of engagement and the quality of the contribution to the discussion.

At a minimum, each student will be expected to post an original and thoughtful response to the DB question and contribute to the weekly dialogue by responding to at least two other posts from students. The first contribution must be posted before midnight (Central Time) on Wednesday of each week. Two additional responses are required after Wednesday of each week. Students are highly encouraged to engage on the Discussion Board early and often, as that is the primary way the university tracks class attendance and participation.

The purpose of the Discussion Board is to allow students to learn through sharing ideas and experiences as they relate to course content and the DB question. Because it is not possible to engage in two-way dialogue after a conversation has ended, no posts to the DB will be accepted after the end of each week.

From your knowledge and experience, discuss two technologies that can be used to integrate data from a database into a Web application. One technology must be open source. The other technology must be proprietary.

In your own words:

Identify each technology as open source or proprietary.
Compare and contrast the ability of the two technologies to integrate data from a database into a Web application (note this does not mean cost or access to the code).
Discuss a significant advantage of using the open source technology to integrate data from a database into a Web application.
Discuss a significant advantage of using the proprietary technology to integrate data from a database into a Web application.
Discuss a significant disadvantage of using the open source technology to integrate data from a database into a Web application.
Discuss a significant disadvantage of using the proprietary technology to integrate data from a database into a Web application.