Introduction to Web Design & HTML Tuesday 23 July 2013 Oliver oorman"Hu!#$rey %%%&oliverboorman&bi' History of Web Design 1)*)+ ● Tim Berners-Lee, at -./0, invents the Web %ith HTML as its publishing language1 ● He ai!ed to enable researchers from re!ote sites across the %orld to organize and pool together infor!ation; ● He %anted cross-re(erences fro! one research paper to another& He thought this could be done by using so!e for! of hyperte2t, so!e %ay of linking documents together by using buttons on the screen& History of Web Design 1))0+ ● It %as quic3ly realized by those outside of scientific docu!entation that HTML %as relatively easy to learn, %as self contained and lent itself to a number of other a##lications1 ● With the evolution of the World Wide Web, HTML began to proliferate and 4uic3ly spilled over into the !ainstream1 ● TBL codes a prototype Web browser on the 0e5T co!puter& History of Web Design 1))1"1))6+ ● 7oon, co!#anies began creating bro%sers and as t$ey gained #o#ularity it gave rise to co!#etition1 ● In 1))8, Microsoft decide to get in on t$e bro%ser !arket launc$ing 9Internet .2#lorer9 t$e follo%ing year on Windo%s )6& History of Web Design 1))6+ ● y this stage, anot$er co!#any, Netsca#e, $ad develo#ed t$eir o%n bro%ser 9Netsca#e Navigator9 and it %as 4uickly gro%ing in #o#ularity1 ● No% t$ere %as co!#etition in the !arket and bot$ co!#anies %anted t$eir bro%ser to be !ore cutting"edge and !ore #o#ular t$an their co!#etitors; ● The HTML standard did not develo# as fast $o%ever& History of Web Design 1)):+ ● This !eant that co!#any created ne% features in their bro%sers %$ic$ did not a##ear in HTML s#ecifications, called 9e2tensions'1 ● Thus began the so"called 9bro%ser %ars91 ● ro%ser !akers began inventing #ro#rietary HTML ele!ents t$at only %or3ed %ith their bro%sers& Marquee (I.) and blink (Netsca#e) %ere t%o exa!#les of this& History of Web Design 1)):+ ● = side effect o( all this co!#etition %as that HTML beca!e frag!ented and %eb aut$ors soon found that t$eir %eb #ages looked fine in one bro%ser but not in anot$er1 ● It beca!e increasingly difficult and ti!e consu!ing to create a %eb #age t$at %ould dis#lay unifor!ly across a nu!ber of di((erent bro%sers; ● Only 16 years later is t$is beginning to i!#rove> History of Web Design Late 1))0s+ ● Mean%$ile, an organi'ation kno%n as the World Wide Web -onsortiu! (W3-< %as %or3ing steadily along in t$e bac3ground to standardi'e HTML1 ● 7lo%ly ne% versions of the HTML s#ec %ere #ublished seeing t$e birth of HTML 2&0 in 7e#te!ber 1))6, HTML 3&2 in January 1))? and HTML 8&01 in Dece!ber 1)))& History of Web Design 2000+ ● y the turn of the !illenniu!, Internet .2#lorer $ad ecli#sed Netsca#e Navigator as t$e bro%ser to use %$ile surfing t$e net; ● This %as largely due to t$e fact t$at t$e I. ca!e bundled %it$ all Windo%s o#erating syste!s1 ● =gain this do!inance re!ained for at least 10 years. History of Web Design .arly 2000s+ ● By no%, the HTML spec had incor#orated ne% ele!ents and styling infor!ation that allow designers to !ake their pages loo3 !ore 9pretty'1 ● However, !any of the original developers of the HTML spec (elt that it %as drifting too far from it9s original roots of docu!ent publishing; ● In short, document structure should be provided by HTML but styling in(or!ation should be detached& History of Web Design .arly 2000s+ ● -ascading 7tyle 7$eets ;-77) are born to solve t$is #roble!1 ● Ho%ever, co!#anies %ere slo% to integrate -77 into t$eir bro%sers. There #ri!ary concern %as !arket s$are ;and t$us #rofit) and i!#le!enting a new standard see!ed li3e too !uc$ $ard %or3& History of Web Design .arly 2000s+ ● y 2002, Netsca#e $ad been blo%n out o( t$e %ater by I.1 ● I. $ad %on )6@ of t$e !ar3et share& It no longer needed to co!#ete1 ● I.: released in 2001 for Windo%s M. and 5A %as the last new I. bro%ser for 6 years1 ● ut a ne% co!#any ;or foundation actually) %as on the bloc3+ Mo'illa& History of Web Design Mid 2000s+ ● They began develo#ing t$eir o%n bro%ser, Firefo2& =s a not-for"#rofit foundation, t$ey %ere !ore interested in #us$ %eb standards t$an I.1 ● Firefo2 4uickly gre% in #o#ularity& Microsoft began to realize that standards %ere actually i!#ortant and their focus s$ould be !ore on obeying t$e! rat$er than ignoring t$e!& History of Web Design Late 2000s C -urrent Ti!e+ ● In 200*, t$e second bro%ser %ars began %$en Doogle entered t$e !ar3et& Their o#en"source bro%ser, -$ro!e, !et %eb standards (ro! version 11 ● It's ai! %as to create a si!#le, yet ric$, %eb e2#erience by follo%ing and develo#ing #ro"actively %eb standards1 ● This #us$ed the develo#!ent of HTML5 and -773, the !ost !odern and ric$ %eb standards %e $ave. Web Design in 2013 We are no% at a stage %$ere four bro%sers $ave large !ar3et shares+ Internet Bire(o2 -$ro!e 7a(ari O#era Ot$ers .2#lorer 22@ 20@ 33@ 16@ 2@ )@ June 2013, W3-ounter data Web Design in 2013 -urrent ro%sers+ Internet Mozilla Google Opera Safari Explorer Firefox Chrome 12.5 6 9/10 22 28 Windows Windows Windows Windows Windows Mac Mac Mac Mac Mac Linux Linux Linux Linux Linux Mobile Mobile Mobile Mobile Mobile =ll $ave good su##ort for t$e latest web design standards, HTML6 and -7S3. T$eir su##ort can be c$ec3ed and co!#ared using t$e =cid3 test and $t!l6test& The Process of Web Design The usually process (or building a %ebsite is+ ● Create basic HTML structure1 ● Add -SS and Javascri#t code to add style and interactivity1 ● Save t$ese files locally and test locally1 ● E#load to %eb server using BTP client1 ● -$ec3 t$e %eb site online& Software such as Adobe Dreamweaver bundles all this functionality together. However, it is perfectly possible to use a simple text editor to create the code and an FTP client to upload it to the server. The Alternatives to Dreamweaver On a Windo%s co!#uter, we can use Notepad to build websites. Ho%ever, Note#ad is a very basic progra! and it can !a3e coding #ainful! A good alternative is the o#en"source code editor 0otepadFF& This $as t$e benefit of synta2 $ig$lig$ting and a tabbed interface so %e can edit !ore t$an one docu!ent ;i&e& HTML file and -77 file) at the sa!e ti!e& .