1 S W E N 1005 – M o b ile W e b P r o g r a mmi n g (2017/18) T h e Un i versity o f the West I n d i es Ca v e Hill Ca m p u s Facul t y o f S c ience a n d Te c hn o l ogy Departm e nt of Computer Sci e n c e, M a the m atics a n d P h ysics S W E N 1 0 05 : M ob il e W e b Pro g r a m ming L a bora t o r y E x erc i se One W e b S t a n d ar ds - H T M L I N S TR U C T I O N S 1. T h is la b o r at o ry e xerc i se see k s t o i n trod u c e st ud e n ts to t h e m o r e c om m on el em e n ts u sed in HTML a n d C S S t h eir at t rib u t e s. 2. B y t h e e n d of t h e lab you should h ave c re a t e d two respo n si v e w eb p ag e s. 3. W h at is to b e created : a. A n HTML t e xt d oc u m e n t c ontai n ing t h e c o mp le t ed a n d valida t ed HTML a n d C S S f o r “My R e su m e.h tm l” b. A f o ld e r i nc lu d ing t h e res o u rc e s u sed f o r “ My I sland H ome” a n d t h e HTML f i l e 2 S W E N 1005 – M o b ile W e b P r o g r a mmi n g (2017/18) Part O ne – M y Re s u me Create an HTML do cu m ent called “ MyResume h t m l ” that gives y o u r i n f o r m ati o n and displays in yo u r b r o w s er like the s a m p le sh o wn bel o w. T o d o t h is , you w ill n e e d t o use HTML t a g s like those below , which y o u can play with a t w 3 sch o o ls b ef o re inc lud i n g t h em in y o u r pa g e: <hr> <a h ref = " m ai l ...> <p ali gn = ...> <u> <u l > ... < l i > <br> N o te that yo u are n o t restricted to u si n g only t h e s e tags Y ou r r e s u m e s h o u l d b e a d a p t ive t o m o b ile d evic e s as w ell as d es k t o p c o m pu t e r s. 3 S W E N 1005 – M o b ile W e b P r o g r a mmi n g (2017/18) Part T wo - “ M y Is la n d h o m e ” – L A YOU T S Reso u rces: ht t p : // www w 3sc h o o ls c o m/h ow t o / h owto _ c ss_ t a b le _ r e s p o n sive.a s p ht t p : // ww w w 3sc h o o ls c o m/ h t ml / ht m l _l a yo u t .asp 1) Usi n g t h e r e s o u r c es a b o v e a n d o thers fr o m w 3 sch o o ls bu ild a m o b ile r esp o n s i v e p a g e called M yIs l an d H o me h t m l th a t i s desi gn ed and laid o u t s i m ilar to the o n e sh o wn b e l o w that d es c ri b es y o u r isla n d o r c o un try w ith gr aph ics and f ea t u res as s h o wn. U s e t h e l ay o u t sh o wn b e l o w U se the CSS Flex b o x , d o n o t u se the t ab l e element to l ayou t the page . H o w e v er you may u s e a res p o n si v e tab l e f o r s o m e o f the c o n t ent only if it is appropriate A b out Ba r ba d o s Ba r b a dos i s a cor a l i s l a nd , p u s hed o u t of s ea by v o lca n i c a c t i v i t y i n a far a w a y ti m e. O n t he W est C o a st of Ba r b a d o s , cor a l s hore be a c h es of f in e w h i t e s an d st re t ch a l o n g a b l u e - g re e n s e a Co ra l reefs f r i n g e t he B a r ba d os s hore l in e t o prov i d e e x cell e n t sn orke l i n g a n d Sc u ba D ivi n g . Al o n g t he E a st C o a st a l i ve l y s u r f i s b l o w n b r i s k l y b y t he s t r o n g an d co n sta n t t r a d e wi nd s a n d t he w a ves p o u n d a g a in s t a r o cky s hore. T he c o n sta n t breezes of t he t r a d e w i nd s g i ve B a rb ad os a mi l d a n d ple a san t t ro p i c a l c l i ma t e R a t i n g s of At t r a ctio n s A ttra c t i on De scr i pt i on Rat i ng G un H i l l S i g n al S ta t i o n : cli c k i m a g e G un H i l l S i g n al S t a t i o n i s l o c at e d i n t he p arish of S t. G e orge a n d pro v i d es a m a g n i f i c e n t a n d c a p t i v a t i ng v i ew of t he e nt i r e i sl a n d! It i s t h e f i n e s t of a ser i es of si g n al s t a t i on s b u i l t i n 1 8 1 8. 4/5 W e l c h m an H a l l G u l l y : cl i c k i m ag e If y ou li k e na t u r e, hik i ng ( at a n y l e v el), plan t s, cul t u r e a nd n at u r al h i st o r y, t hen W el c h m an Hall gul l y must n ot be m i s s ed. T he tr a nquil f e e l of the g u l l y w ill ins t a n t ly stri k e y ou. It is a pla c e w he r e you c a n e x p e r ie n ce a pie c e of nat u r e a nd i m agi n e w hat t he i sl a nd w as li k e 3 0 0 y e a r s ag o 3.5/ 4 S W E N 1005 – M o b ile W e b P r o g r a mmi n g (2017/18) 2) P lea s e no te the f o ll o win g : a) Use li n ks to o ther pa g e s o f c o n t e n t as s h o wn ab o v e w i th the und erli n ed t e x t in t h e p ara g ra ph b) Each p i cture sh o u ld be a li n k t o mo r e i n f o r m a ti o n o n t h e attr a cti o n in the tab l e. c) The tab l e f o n t is A r ia l d) The g eneral f o n t is T i m es N ew R o m a n e) The f o n t si z es are a t yo u r d iscret i o n , h o w e v er, t h e y s h o u ld have r e l a ti v e di m ens i o n s s i m ilar t o the p a g e a b o v e. f) I n cl ud e a li n k at t h e b o t t o m t o the pa g e whe r e y o u r es e arc h ed m o st o f y o u r i n f o r m ati o n as a r ef e r ence. g) Create an i m a g e f o r yo u r b a nn er at t h e t o p usi n g M i c r o s o f t P ai n t o r o ther si m il a r p r o g ra m h) Av o id usi n g li n es f o r y o u r b o r d ers un l e ss y o u s tr on g l y b elie v e it ad d s to t h e a e st h e t ic bea u ty o f the pa g e i) I n cl ud e at le a st 4 a t tract i o n s in y o u r w eb p a g e. i) One sh o u ld b e a b le to click thro ug h o n all li n ks i n cl ud i n g t h e i m a g es f o r the a t tr a cti o n s, w h ich s h o u ld t a k e u s to the h o m e p a g e f o r the a t t ract i o n j) Sub m it M yI s l a n d H o me h t ml t o the H T M L v al id a t o r a t h t t p: / / v al id a t o r w 3 .or g 3) Re m e m b er, yo u r pa g e m u s t ren d er w e ll o n b o th m o b ile d e v i ces a n d des k t o p c ompu t e rs. Today kno w l ed g e has p o w e r I t co n t r o l s a cc e ss t o o p por t u n i t y and a d van ce m e n t Pe t er F D ruck e r