CSCI 1100-1100L Tpics in Cmputing Fall 2018 Web Page Prject 50 pints Assignment Objectives: Lkup and crrectly use HTML tags in designing a persnal Web page Lkup and crrectly use CSS styles Use a simple cde editr Create a persnal web page by hand Delivery Instructins: Yur assignment must be delivered in tw places: The Assignment Drpbx n yur lab sectin s elc page. Submit a text file with the link t yur website n github. Submit a dcument explaining what tags yu have used and why n yur lab sectin s elc page. Publicly visible web i.e. GitHub Pages put the cde f yur website here. Abslute deadline: Assignments turned in 2 days after the due date will nt be accepted. Each day between due date and abslute deadline incur penalty f 10 pints. Fr this assignment, yu may nt cllabrate (including talking abut cde, sharing cde, and cpying cde) with anyne else ther than yur lab teaching assistant. Plagiarism will be reprted t the department that handles vilatins f UGA s Academic Hnesty Plicies. Yur lab TA will be grading the assignments by a rubric created by yur lab TA. Since yur TAs will be perfrming the grading, they shuld be yur first cntact pint abut specific questins related t the prject and especially shuld be the pint f cntact fr requests t deviate frm these directins. The Assignment (wrth 50 pints): The purpse f this assignment is t allw yu, the student, an pprtunity t practice the HTML and CSS skills yu ve learned abut in class and lab. T accmplish this, yu will create a persnal Web page that cntains the fllwing minimum requirements: Use at least 10 different HTML tags including Image Table Link Tw tags nt cvered in the lab handuts. 1
The required HTML tags (i.e. <html> <head>) d nt cunt twards the previus requirement. Use at least 3 defined styles including 1 prperty nt cvered in the lab handuts Yur main page shuld be named index.html Give us at least three paragraphs f cntent (abut 150-200 wrds). Tell us smething interesting! D nt use any cpyrighted cntent n yur webpage. There s a plethra f free cntent t use. Generally, it s kay t use things that are labeled under the Creative Cmmns licensing scheme. Yu may cnsult guides like www.blberry.cm, www.w3schls.cm, r even Ggle search t find a new tag, but be sure it is a standard tag (therwise yur page will nt validate). Yur page must validate as either HTML 4.01 Strict r XHTML. See the sectin validatin belw fr mre infrmatin. HTML versin dependent validatin errrs are acceptable nly if the webpage runs crrectly. Yur page shuld feel chesive. That is, it shuldn t lk like yu are randmly putting cmpnents n a page in rder t meet the bare minimums. Yu can feel free t chse any tpic yu d like t create yur Web page. Sme students will create a page fr an rganizatin r activity that they participate in. Many students will take this pprtunity t create a persnal Web site that can be placed n yur resume. These types f sites typically cntain bigraphical infrmatin as well as shwcase the students interests and/r prjects. Please Remember! Yu are expected t wrk n these pages alne in accrdance with the cllabratin plicy utlined in the Delivery Instructins sectin abve.! Yu are expected t hand cde the HTML and CSS. D nt use any WYSIWYG tls such as Dreamweaver, iweb, r Frnt Page.! N duble-dipping! That is, d nt submit a page that yu are als submitting fr a grade in sme ther class. Extra Credit Optin (wrth up t 10 additinal pints): G abve-and-beynd the minimum requirements fr the Web page by using at least 3 mre styles prperties that were nt cvered in lab and are new t yu (fr a ttal f 4), as well as at least additinal 5 HTML tags that were nt cvered in lab (fr a ttal f 7). In rder t get the mst extra credit pints, yur Web page must lk chesive. That is, it shuld nt lk like yu are thrwing tgether randm tags and styles. 2
Web Page Validatin The W3C maintains a validatr page fr checking if yur cde meets prper HTML standards. T use the W3C validatr, yu must first add the fllwing cde at the very tp f yur HTML file, befre the <html> tag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.rg/tr/html4/strict.dtd"> This tells the validatr which versin f HTML yu are attempting t use. Next, add the fllwing cde inside yur <head> sectin: <META http-equiv="cntent-type" cntent="text/html;charset=iso- 8859-1"> This tells the validatr which character set yu are using. Try adding these lines t yur latest HTML file. Then, pint a Web brwser windw at http://validatr.w3.rg. Use the File Uplad interface t validate yur file. Yu may get sme hard-t-understand errr messages at first; ur TAs will be glad t help yu ut. In general, when yu dn t see what s wrng with a tag, check the HTML reference fr that tag. After a few attempts, yu shuld get the hang f it! 3
Deplying Yur Web Page UGA used t ffer free Web hsting using a service called MyWeb. When the schl mved t the new email services prvided by Micrsft Live, this feature went away. Fr this class, we will use Github pages fr free Web hsting. Using GitHub Pages Anther dcument n the curse website will prvide instructins n hw t cnfigure github fr yur website. It is extremely easy; yu just need t fllw ALL the steps as given in the dcument. Cpy the Github URL t yur webpage and paste it in a text dcument. The text dcument cntaining the URL is what yu need t uplad t elc. 4
Frequently Asked Questins (FAQs) Help! I can t see my page! Q: I have upladed my page t Drpbx, but it desn t shw up in the brwser. Help!! A: Make sure yur brwser is pinted t the URL that yu received when yu clicked n the share buttn in Drpbx Q: I have upladed my page t Github, but it desn t shw up in the brwser. Help!! A: Make sure yu re visiting http://username.github.i where username refers t yur Github user ID. The first time yu add files t the flder n yur lcal cmputer and g int Github and click Publish, it can take up t several hurs t uplad the files fr that first time. Can t see my images Q: My pictures shw up fine n my lcal cmputer, but dn t appear n the Web versin. A: First, make sure yu have upladed the image files t either Drpbx r Github. Then, check the name f the file against the src attribute f yur IMG tag. Nte that file names n Drpbx and Github are case-sensitive. S fr example, if yur image file is named tga_party.jpg, then the fllwing tag will wrk fine in Windws: <img src= tga_party.jpg alt= Making a fl f myself > But this will nt wrk n web servers, because the filename des nt match (lwer case jpg des nt match upper case JPG ). T fix the prblem, just edit yur IMG tag t match the actual file name. 5
ALT attribute n image tag Q: Thanks fr yu help with the digital pictures. But, when I typed my URL n the validatin page, it came back saying that it was nt valid because I didn't use the "ALT" attribute with my pictures and I have n idea what it's talking abut. Just wndering A: The "ALT" attribute is a shrt text string that describes the picture, in case yur user is visually impaired r the image file is nt available. Use it like this: <img src="belushi_tga.jpg" alt="jn Belushi at tga party"> Image t big Q: I've made a digital pht f myself, but it shws up way t big n the Web page. Hw d I make it smaller? A: It's easy. Just pen the file with an image editing prgram. Micrsft Paint will wrk if yu dn't have anything else -- it's in the Accessries prgram grup. Then change the size f the image t smething smaller. (In Paint this is in the Image menu). Be sure t preserve the rati f length t width. Then save the file as a different name, s yu still have the riginal t-big versin in case yu need it. Anther technique is t leave the image file unchanged, but use the height and width attributes n the IMG tag t size the image n the page. (Check blberry.cm fr details). Hwever, yur big image file will still take a lng time t dwnlad t the user s brwser, s I suggest the first methd. 6