Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download CS 346 - Lab 1: HTML, XHTML, and CSS
Document related concepts
Transcript
CS 346 - Lab 2: HTML, XHTML, and CSS FIRST do the Quiz 1: Click the Quiz 1 link in the Quiz section of D2L. Enter the password provided to you by the instructor. You will have 15 minutes to complete the quiz from the moment you begin. As we discussed in class, hypertext markup language (HTML) describes the structure of a document, NOT its actual presentation. Most documents have common elements (titles, paragraphs, lists, etc.). HTML defines a set of common formats/styles for documents, and these items are indicated inside HTML documents as tags. HTML doesn’t say anything about how a page looks when it is displayed – cascading style sheets (CSS) enable you to apply advanced formatting to HTML tags. The current version of HTML, XHTML, eliminates almost all tags associated with formatting in favor of CSS. When an HTML page is read into a web browser, the browser interprets or parses the HTML tags and formats the text and images on the screen. The browser has mappings between the names of page elements and actual styles on the screen; for example headings might be in a larger font than text on the rest of the page; the browser also wraps all text so that it fits into the current width of the browser window. Different browsers have different mappings for each page element – some may use different font styles or display headings in all caps rather than in larger fonts, etc. This means you can design a web page that looks perfect on your computer system, but when someone else reads it on a different system, it might look entirely different. The key lesson is: DON’T design your pages based on what they look like on your computer system and on your browser. Instead, DO design your pages so that they work on most browsers; and DO focus on clear, well-structured content that’s easy to read and understand. In this introductory lab, you will focus on using XHTML to create well-structured content using the basic tags from XHTML 1.0 Strict as they are described in the online tutorial and other available references. If you have some experience working in HTML, this may actually be more difficult for you than someone who has never created an HTML document. Consider the requirements for your initial HTML document as described below carefully, and follow all instructions. 1. Take a few minutes to evaluate your resume. Consider the following: How is it structured? How many different headings does it contain? How many paragraphs? Does it contain any lists? Bulleted lists? Numbered/ordered lists? 2. Using AlleyCode, TextPad, or any HTML editor of your choice, create an html file named: lastNameResume1.htm Obviously you should insert your last name. 3. Within the file, use the basic HTML tags for overall page structure: <html>, <head>, and <body>. 4. Keeping in mind your resume structure, add tags for titles, headings, and paragraphs: <title>, <h1> through <h6> as needed, <p> 5. Use tags as appropriate for lists you may have included in your resume the following, with associated tags: unordered lists, ordered lists, list items, nested lists, etc. 6. Follow good tag/coding practice in HTML by doing the following: Use only lower case letters for all tags Indent all nested elements (some HTML editors automatically indent by 3 spaces) - consider placing opening/closing tags of the same element on different lines at the same indentation level Use blank lines to add whitespace and enhance readability of your code 7. DO NOT include any formatting tags such as font styles, background colors, etc. Focus only on the structure of the content in your resume document. 8. Add an HTML comment at the top of your file that indicates this is a version of your resume in XHTML 1.0. 9. When you have completed constructing your resume document in HTML, save your file. If you are using an HTML editor with “Preview in Browser” functionality, examine your results and fix any problems/errors. Make sure you view your resume document in at least two browsers: FireFox and IE 7. 10. Validate your file with an HTML validator with the W3C validator at http://validator.w3.org/ . 11. When you have corrected any problems with your tags, you will upload your file to the CS346 web server. You have been allocated space on the CS Department web server. You have been assigned an account on the server per the following: The location of your home page is: http://cs346.cs.uwosh.edu/students/<username>/index.html Your username is your UWO username. Your initial password is p followed by your ID. The CS346 web server is a Linux server. You may change your password with the Linux/Unix command passwd.
