Xhtml Lab (50 pts)
advertisement
Xhtml Lab (50 pts) In this lab you will be creating and publishing your own xhtml page. You will be using xhtml to mark-up your text, add pictures and links, and in general create a web page. You must then upload the page to a web server so the rest of the world can see your web page. First: Review policies 1. Please review the UD policy on policy of student home pages at http://www.udel.edu/webstart/stuorg/student.resource.html 2. Also review guidelines for student home pages at http://www.udel.edu/webstart/stuorg/guidelines.html 3. Remember, anything you place on your web page is viewable by the entire world once the page is published. Think about what you want strangers (and potentially predators or criminals) to know about you before creating your web page. Second: Review the XHTML Basics Document: Go through XHTML-Basics.docx Third: Create web site You MUST hand code this web site. There are many software programs out there that will create a web site automatically for you. Every single one of them has a bug or a flaw in it. No matter which one you use, you will at some point want to hand edit the code it created. The purpose of this lab is for you to become familiar with basic html coding. Thus this web site MUST BE completely hand coded. Note that it is extremely easy to tell when a site has been created by a software program versus hand coded. 1. To create a web page, first open Notepad (not Wordpad or MS word). Now type in the text below: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns = “http://www.w3.org/1999/xhtml> <head> <meta http-equiv = “content-type” content= “text/html; charset = utf-8”/> <title> </title> </head> <body> </body> </html> 2. Save your file as <nameofyourwebpage>.html. 3. To see it in a browser, double-click on the name of the page wherever you saved it. Either IE or Firefox should come up with a blank web page. 1 Fourth: Add content You now have your blank canvas to work with. You should not add any of the above tags again – each only occurs only once in a web document. All content that you want to show up must occur between the <body> tags. All heading information must occur between the <head> tags. Now add content. Your web page can either be on you or on a topic that interests you. If you are stuck, you can use content from a Wikipedia page. Once you have a significant amount of content, you must format it using xhtml format tags. In the Head: Add a title between the <title> tags. It should reflect the content of the page The body must include: 1. At least 2 different heading tag (indicating titles at different levels): <h1> </h1>…<h6>…</h6> 2. At least 3 paragraphs: <p> tags. 3. At least one image with an “alt” tag: <img /> 4. At least one link: <a href = …> 5. At least one image made into a link 6. At least one list (either <ol> or <ul>) 7. At least two div tags <div> Make it a reflection of you in some way. This lab should be fun, and the resulting web page should reflect your personality in some way. When you feel the website is ready, you will validate that the content is formatted correctly and publish it. Fifth: Validating Your XHTML Code: To make sure that your xhtml code is correct, go to http://validator.w3.org. Choose “Validate by File Upload”, choose the browse button to find your file, and upload it. It should say “Congratulations Icon”. If you don’t get this, you must fix your code (yes, you’ll hate me for this part). Most common reasons for invalid code: 1. You didn’t type in the top part correctly (from <!DOCTYPE… through </head> Solution: Go back and CAREFULLY retype it in 2. You copied text from a MS Word or a Wordpad document into your html document. Text copied from MS Word or Wordpad will have special characters (sometimes hidden) that the validator doesn’t like. Solution: Make sure you type everything into your notepad document – don’t copy or paste anything 3. You opened a tag and didn’t close it. In other words, you had <p> Paragraph goes here… and never closed the tag with a </p> Solution: Go through your document. For every tag you opened, make sure you have an accompanying tag. The exception to this rule is the <img> tag, which must be of the form, <img src = “image.gif” id = “myimage” alt = “this is an image” width = “30” height = “20” /> 2 4. You put tags inside of each other. In other words, you did something like this <p><h2>This is a title</h2> this is my paragraph</p> Solution: Close one thing before you open another Catch: <img> tags, <a> tags(links), <strong> tags, and <em> tags MUST go inside another tag. In other words, you cannot have <p> this is a paragraph</p><img src = …/><p> this is the next paragraph</p> It will give you an error. Instead you must have, <p> This is a paragraph. <img src = …/> </p><p>This is the next paragraph.</p> Sixth: Publishing Your Website: This is the part that most people have the most trouble with. Be sure to leave plenty of time to deal with problems publishing your web site. The TA (and your professor) cannot answer a barrage of last-minute questions about publishing in a timely manner. 1. Set up your subdirectory. UD instructions are at http://www.udel.edu/webstart/students/directory.html This is copied from the UD help site: “Before you publish your web page(s), you must create a subdirectory, give it a specific name, and set the access permissions on the subdirectory so that your files are viewable. IT staff have created a shortcut method for you to do all three of these tasks at once. Follow these steps to do so: 1. Log in to your UDelNet account through the Secure Shell (SSH) application. 2. At the copland.udel.edu% prompt, type: source /www/htdocs/learn/usered/html-setup 3. Press ENTER. You now have a subdirectory named public_html, which has the correct access permissions so that it will be viewable on the Internet.” Note: You can actually create this directory directly. Your lab TA should be able to help with this if the above shortcut were to short out 2. Publish the web page! UD instructions are at http://www.udel.edu/webstart/students/publishpages.html This is copied from UD help site: “To publish your web page(s), you must upload (transfer) a copy of the file(s) (including any image files) you created for your web site to UD's remote server (i.e., copland.udel.edu). To transfer the files from a Windows computer, use the SSH Secure Shell file transfer program; from a Macintosh computer use Fetch. Both programs are available from the University's software download page. Be sure to name your main page index.html. You may have to change the page permissions. You can do this from within the SSH Secure Shell file transfer program." (Just right click on the file in the shell transfer window and set permissions to read and execute for yourself, group and world.) 3 3. View your web page from your browser. From the UD help site: How to View Your Page(s) After you upload your web page(s) to UD's remote server, you can view them to see how they will appear on the Internet: 1. Open a browser application as you normally do. 2. In the Location field, type the location of your home page, which will be similar to the following: http://udel.edu/~username/<nameofyourwebpage>.html where username is your UDelNet ID (i.e., the name you use to log in to your UD e-mail account). 3. Press ENTER. Do not include www or public_html as part of the address for student web pages created on the UD network. References: UD Help Center How to publish a student website Ideas for web developers The code of the web TURN IN: Your URL for your functioning web site (send email with the URL to your TA and to your professor). GRADING CRITERIA: 35% for just having an accessible web site (completing the sixth part successfully); 40% for having validated successfully (successfully completing the fifth part) 25% for having all the required tags 4
