Dynamic HTML !

DHTML stands for Dynamic HTML. It is NOT a language or a web standard. DHTML is the art of combining HTML, Ja a!cri"t, DOM, and #!!. $ccording to the %orld %ide %eb #onsortium &%'#() *Dynamic HTML is a term used by some endors to describe the combination of HTML, style sheets and scri"ts that allows documents to be animated.* DHTML Technologies +elow is a listing of DHTML technologies) HTML 4.0 The HTML ,.- standard has rich su""ort for dynamic content li.e) HTML su""orts Ja a!cri"t HTML su""orts the Document Ob/ect Model &DOM( HTML su""orts HTML 0 ents HTML su""orts #ascading !tyle !heets &#!!(

DHTML is about using these features to create dynamic and interacti e web "ages. JavaScript Ja a!cri"t is the scri"ting standard for HTML. DHTML is about using Ja a!cri"t to control, access and mani"ulate HTML elements. HTML DOM The HTML DOM is the %'# standard Document Ob/ect Model for HTML. It defines a standard set of ob/ects for HTML, and a standard way to access and mani"ulate them.

DHTML is about using the DOM to access and mani"ulate HTML elements. CSS #!! is the %'# standard style and layout model for HTML. It allows web de elo"ers to control the style and layout of web "ages. HTML , allows dynamic changes to #!!. DHTML is about using Ja a!cri"t and DOM to change the style and "ositioning of HTML elements.

We Designing !
%eb design is the creation of %eb "ages and sites using HTML, #!!, Ja a!cri"t and other %eb languages. %eb design is /ust li.e design in general) it is the combination of lines, sha"es, te1ture, and color to create an aesthetically "leasing or stri.ing loo.. %eb design is the wor. of creating design for %eb "ages. The "rocess of designing %eb "ages, %eb sites, %eb a""lications or multimedia for the %eb may utili2e multi"le disci"lines, such as animation, authoring, communication design, cor"orate identity, gra"hic design, human3com"uter interaction, information architecture, interaction design, mar.eting, "hotogra"hy, search engine o"timi2ation and ty"ogra"hy. Mar.u" languages &such as HTML, 4HTML and 4ML( !tyle sheet languages &such as #!! and 4!L( #lient3side scri"ting &such as Ja a!cri"t and 5+!cri"t( !er er3side scri"ting &such as 6H6 and $!6( Database technologies &such as My!7L( Multimedia technologies &such as 8lash and !il erlight(

%eb "ages and %eb sites can be static "ages, or can be "rogrammed to be dynamic "ages that automatically ada"t content or isual a""earance de"ending on a ariety of factors, such as in"ut from the end3user, in"ut from the %ebmaster or changes in the com"uting en ironment &such as the site9s associated database ha ing been modified(.

!oo" We Design !
%eb design can be dece"ti ely difficult, as it in ol es achie ing a design that is both usable and "leasing, deli ers information and builds brand, is technically sound and isually coherent. "rinci"les for good %eb design) 6recedence &:uiding the 0ye( :ood %eb design, "erha"s e en more than other ty"e of design, is about information. One of the biggest tools in your arsenal to do this is "recedence. %hen na igating a good design, the user should be led around the screen by the designer. I call this "recedence, and it9s about how much isual weight different "arts of your design ha e. $ sim"le e1am"le of "recedence is that in most sites, the first thing you see is the logo. This is often because it;s large and set at what has been shown in studies to be the first "lace "eo"le loo. &the to" left(. his is a good thing since you "robably want a user to immediately .now what site they are iewing. +ut "recedence should go much further. <ou should direct the user;s eyes through a se=uence of ste"s. 8or e1am"le, you might want your user to go from logo>brand to a "rimary "ositioning statement, ne1t to a "unchy image &to gi e the site "ersonality(, then to the main body te1t, with na igation and a sidebar ta.ing a secondary "osition in the se=uence. %hat your user should be loo.ing at is u" to you, the %eb designer, to figure out. To achie e "recedence you ha e many tools at your dis"osal) 6osition ? %here something is on a "age clearly influences in what order the user sees it. #olor ? @sing bold and subtle colors is a sim"le way to tell your user where to loo.. #ontrast ? +eing different ma.es things stand out, while being the same ma.es them secondary. !i2e ? +ig ta.es "recedence o er little &unless e erything is big, in which case little might stand out than.s to #ontrast(

Design 0lements ? if there is a gigantic arrow "ointing at something, guess where the user will loo.A Spacing %hen I first started designing I wanted to fill e ery a ailable s"ace u" with stuff. 0m"ty s"ace seemed wasteful. In fact the o""osite is true. !"acing ma.es things clearer. In %eb design there are three as"ects of s"ace that you should be considering) Line !"acing %hen you lay te1t out, the s"ace between the lines directly affects how readable it a""ears. Too little s"ace ma.es it easy for your eye to s"ill o er from one line to the ne1t, too much s"ace means that when you finish one line of te1t and go to the ne1t your eye can get lost. !o you need to find a ha""y medium. <ou can control line s"acing in #!! with the 9line3height9 selector. :enerally I find the default alue is usually too little s"acing. Line !"acing is technically called leading &"ronounced ledding(, which deri es from the "rocess that "rinters used to use to se"arate lines of te1t in ye olde days ? by "lacing bars of lead between the lines. 6adding :enerally s"ea.ing te1t should ne er touch other elements. Images, for e1am"le, should not be touching te1t, neither should borders or tables. 6adding is the s"ace between elements and te1t. The sim"le rule here is that you should always ha e s"ace there. There are e1ce"tions of course, in "articular if the te1t is some sort of heading>gra"hic or your name is Da id #arson )3( +ut as a general rule, "utting s"ace between te1t and the rest of the world ma.es it infinitely more readable and "leasant. %hite !"ace 8irst of all, white s"ace doesn9t need to be white. The term sim"ly refers to em"ty s"ace on a "age &or negati e s"ace as it9s sometimes called(. %hite s"ace is used to gi e balance, "ro"ortion and contrast to a "age. $ lot of white s"ace tends to ma.e things seem more elegant and u"mar.et, so for e1am"le if you go to an e1"ensi e architect site, you9ll almost always see a lot of s"ace. If you want to learn to use whites"ace effecti ely, go through a maga2ine and loo. at how ad erts are laid out. $ds for big brands of watches and cars and the li.e tend to ha e a lot of em"ty s"ace used as an element of design.

#avigation One of the most frustrating e1"eriences you can ha e on a %eb site is being unable to figure out where to go or where you are. I9d li.e to thin. that for most %eb designers, na igation is a conce"t we9 e managed to master, but I still find some "retty bad e1am"les out there. There are two as"ects of na igation to .ee" in mind) Na igation ? %here can you goA There are a few commonsense rules to remember here. +uttons to tra el around a site should be easy to find 3 towards the to" of the "age and easy to identify. They should loo. li.e na igation buttons and be well described. The te1t of a button should be "retty clear as to where it9s ta.ing you. $side from the common sense, it9s also im"ortant to ma.e na igation usable. 8or e1am"le, if you ha e a rollo er sub3 menu, ensuring a "erson can get to the sub3menu items without losing the rollo er is im"ortant. !imilarly changing the color or image on rollo er is e1cellent feedbac. for a user. Orientation ? %here are you nowA There are lots of ways you can orient a user so there is no e1cuse not to. In small sites, it might be /ust a matter of a big heading or a 9down9 ersion of the a""ro"riate button in your menu. In a larger site, you might ma.e use of bread crumb trails, sub3headings and a site ma" for the truly lost. Design to $%il" Life has gotten a lot easier since %eb designers transitioned to #!! layouts, but e en now it9s still im"ortant to thin. about how you are going to build a site when you9re still in 6hotosho". #onsider things li.e) #an it actually be doneA <ou might ha e "ic.ed an ama2ing font for your body co"y, but is it actually a standard HTML fontA <ou might ha e a design that loo.s beautiful but is BB--"1 wide and will result in a hori2ontal scroller for the ma/ority of users. It9s im"ortant to .now what can and can9t be done, which is why I belie e all %eb designers should also build sites, at least sometimes. %hat ha""ens when a screen is resi2esA

Do you need re"eating bac.groundsA How will they wor.A Is the design centered or left3alignedA $re you doing anything that is technically difficultA 0 en with #!! "ositioning, some things li.e ertical alignment are still a bit "ainful and sometimes best a oided. #ould small changes in your design greatly sim"lify how you build itA !ometimes mo ing an ob/ect around in a design can ma.e a big difference in how you ha e to code your #!! later. In "articular, when elements of a design cross o er each other, it adds a little com"le1ity to the build. !o if your design has, say three elements and each element is com"letely se"arate from each other, it would be really easy to build. On the other hand if all three o erla" each other, it might still be easy, but will "robably be a bit more com"licated. <ou should find a balance between what loo.s good and small changes that can sim"lify your build. 8or large sites, "articularly, can you sim"lify thingsA There was a time when I used to ma.e image buttons for my sites. !o if there was a download button, for e1am"le, I would ma.e a little download image. In the last year or so, I9 e switched to using #!! to ma.e my buttons and ha e ne er loo.ed bac.. !ure, it means my buttons don9t always ha e the fle1ibility I might wish for, but the sa ings in build time from not ha ing to ma.e do2ens of little button images are huge. Typography Te1t is the most common element of design, so it9s not sur"rising that a lot of thought has gone into it. It9s im"ortant to consider things li.e) 8ont #hoices ? Different ty"es of fonts say different things about a design. !ome loo. modern, some loo. retro. Ma.e sure you are using the right tool for the /ob. 8ont si2es ?<ears ago it was trendy to ha e really small te1t. Ha""ily, these days "eo"le ha e started to reali2e that te1t is meant to be read, not /ust loo.ed at. Ma.e sure your te1t si2es are consistent, large enough to be read, and "ro"ortioned so that headings and sub3headings stand out a""ro"riately.

!"acing ? $s discussed abo e, s"acing between lines and away from other ob/ects is im"ortant to consider. <ou should also be thin.ing about s"acing between letters, though on the %eb this is of less im"ortance, as you don9t ha e that much control. Line Length ? There is no hard and fast rule, but generally your lines of te1t shouldn9t be too long. The longer they are, the harder they are to read. !mall columns of te1t wor. much better &thin. about how a news"a"er lays out te1t(. #olor ? One of my worst habits is ma.ing low3contrast te1t. It loo.s good but doesn9t read so well, unfortunately. !till, I seem to do it with e ery %eb site design I9 e e er made, ts. ts. ts.. 6aragra"hing ? +efore I started designing, I lo ed to /ustify the te1t in e erything. It made for nice edges on either side of my "aragra"hs. @nfortunately, /ustified te1t tends to create weird ga"s between words where they ha e been auto3s"aced. This isn9t nice for your eye when reading, so stic. to left3aligned unless you ha""en to ha e a magic body of te1t that ha""ens to s"ace out "erfectly. &sa ility %eb design ain9t /ust about "retty "ictures. %ith so much information and interaction to be effected on a %eb site, it9s im"ortant that you, the designer, "ro ide for it all. That means ma.ing your %eb site design usable. %e9 e already discussed some as"ects of usability 3 na igation, "recedence, and te1t. Here are three more im"ortant ones) $dhering to !tandards There are certain things "eo"le e1"ect, and not gi ing them causes confusion. 8or e1am"le, if te1t has an underline, you e1"ect it to be a lin.. Doing otherwise is not good usability "ractice. !ure, you can brea. some con entions, but most of your %eb site should do e1actly what "eo"le e1"ect it to doC Thin. about what users will actually do 6rototy"ing is a common tool used in design to actually 9try9 out a design. This is done because often when you actually use a design, you notice little things that ma.e a big difference. $L$ had an article a

while bac. called Ne er @se a %arning %hen <ou Mean @ndo, which is an e1cellent e1am"le of a small interface design decision that can ma.e life suc. for a user. Thin. about user tas.s %hen a user comes to your site what are they actually trying to doA List out the different ty"es of tas.s "eo"le might do on a site, how they will achie e them, and how easy you want to ma.e it for them. This might mean ha ing really common tas.s on your home"age &e.g. 9start sho""ing9, 9learn about what we do,9 etc.( or it might mean ensuring something li.e ha ing a search bo1 always easily accessible. $t the end of the day, your %eb design is a tool for "eo"le to use, and "eo"le don9t li.e using annoying toolsC 'lignment Dee"ing things lined u" is as im"ortant in %eb design as it is in "rint design. That9s not to say that e erything should be in a straight line, but rather that you should go through and try to .ee" things consistently "laced on a "age. $ligning ma.es your design more ordered and digestible, as well as ma.ing it seem more "olished. <ou may also wish to base your designs on a s"ecific grid. I must admit I don9t do this consciously 3 though ob iously a site li.e 6!DT@T! does in fact ha e a ery firm grid structure. This year I9 e seen a few really good articles on grid design including !mashingMaga2ine9s Designing with :rid3+ased $""roach E $ List $"art9s Thin.ing Outside The :rid. In fact, if you9re interested in grid design, you should definitely "ay a isit to the a"tly named Design+y:rid.com home to all things griddy. #larity &!har"ness( Dee"ing your design cris" and shar" is su"er im"ortant in %eb design. $nd when it comes to clarity, it9s all about the "i1els. In your #!!, e erything will be "i1el "erfect so there9s nothing to worry about, but in 6hotosho" it is not so. To achie e a shar" design you ha e to) F Dee" sha"e edges sna""ed to "i1els. This might in ol e manually cleaning u" sha"es, lines, and bo1es if you9re creating them in 6hotosho". Ma.e sure any te1t is created using the a""ro"riate anti3aliasing setting. I use 9!har"9 a lot.

0nsuring that contrast is high so that borders are clearly defined. O er3em"hasi2ing borders /ust slightly to e1aggerate the contrast. Consistency #onsistency means ma.ing e erything match. Heading si2es, font choices, coloring, button styles, s"acing, design elements, illustration styles, "hoto choices, etc. 0 erything should be themed to ma.e your design coherent between "ages and on the same "age. Dee"ing your design consistent is about being "rofessional. Inconsistencies in a design are li.e s"elling mista.es in an essay. They /ust lower the "erce"tion of =uality. %hate er your design loo.s li.e, .ee"ing it consistent will always bring it u" a notch. 0 en if it9s a bad design, at least ma.e it a consistent, bad design. The sim"lest way to maintain consistency is to ma.e early decisions and stic. to them. %ith a really large site, howe er, things can change in the design "rocess. %hen I designed 8lashDen, for e1am"le, the "rocess too. months, and by the end some of my ideas for buttons and images had changed, so I had to go bac. and re ise earlier "ages to match later ones e1actly. Ha ing a good set of #!! stylesheets can also go a long way to ma.ing a consistent design. Try to define core tags li.e GhBH and G"H in such a way as to ma.e your defaults match "ro"erly and a oid ha ing to remember s"ecific class names all the time.

We (% lishing (rocess !
Once we create our website, we need to do the following to "ublish our wbsite) B(.Determine a Domain Name. I(.Jegister the domain name. '(.Locate and register with a web host and aslo erify whether or not your domain name is already in use.

,(.Now u"loading your web "ages to the host9s site. 8or this you use 8T6 to transfer the site from com"uter to host. K(.8inally, test your site by tra elling "ages and hy"erlin.s, ma.ing sure that the site "erfoorms to your satisfication.

(hases o) We site Development !

There are numerous ste"s in the web site design and de elo"ment "rocess. 8rom gathering initial information, to the creation of your web site, and finally to maintenance to .ee" your web site u" to date and current. The e1act "rocess will ary slightly from designer to designer, but the basics are generally the same as) Information :athering 6lanning Design De elo"ment Testing and Deli ery Maintenance

The first ste" in designing a successful web site is to gather information. Many things need to be ta.en into consideration when the loo. and feel of your site is created. This first ste" is actually the most im"ortant one, as it in ol es a solid understanding of the com"any it is created for. It in ol es a good understanding of you 3 what your business goals and dreams are, and how the web can be utili2ed to hel" you achie e those goals. It is im"ortant that your web designer start off by as.ing a lot of =uestions to hel" them undersand your business and your needs in a web site. #ertain things to consider are)

6ur"ose %hat is the "ur"ose of the siteA Do you want to "ro ide information, "romote a ser ice, sell a "roductL A :oals %hat do you ho"e to accom"lish by building this web siteA Two of the more common goals are either to ma.e money or share information. Target $udience Is there a s"ecific grou" of "eo"le that will hel" you reach your goalsA It is hel"ful to "icture the MidealN "erson you want to isit your web site. #onsider their age, se1 or interests 3 this will later hel" determine the best design style for your site. #ontent %hat .ind of information will the target audience be loo.ing for on your siteA $re they loo.ing for s"ecific information, a "articular "roduct or ser ice, online orderingLA (lanning @sing the information gathered from "hase one, it is time to "ut together a "lan for your web site. This is the "oint where a site ma" is de elo"ed. The site ma" is a list of all main to"ic areas of the site, as well as sub3to"ics, if a""licable. This ser es as a guide as to what content will be on the site, and is essential to de elo"ing a consistent, easy to understand na igational system. The end3user of the web site 3 a.a your customer 3 must be .e"t in mind when designing your site. These are, after all, the "eo"le who will be learning about your ser ice or buying your "roduct. $ good user interface creates an easy to na igate web site, and is the basis for this. During the "lanning "hase, your web designer will also hel" you decide what technologies should be im"lemented. 0lements such as interacti e forms, ecommerce, flash, etc. are discussed when "lanning your web site. Designing

Drawing from the information gathered u" to this "oint, it;s time to determine the loo. and feel of your site. Target audience is one of the .ey factors ta.en into consideration. $ site aimed at teenagers, for e1am"le, will loo. much different than one meant for a financial institution. $s "art of the design "hase, it is also im"ortant to incor"orate elements such as the com"any logo or colors to hel" strengthen the identity of your com"any on the web site. <our web designer will create one or more "rototy"e designs for your web site. This is ty"ically a ./"g image of what the final design will loo. li.e. Often times you will be sent an email with the moc.3u"s for your web site, while other designers ta.e it a ste" further by gi ing you access to a secure area of their web site meant for customers to iew wor. in "rogress. 0ither way, your designer should allow you to iew your "ro/ect throughout the design and de elo"ment stages. The most im"ortant reason for this is that it gi es you the o""ortunity to e1"ress your li.es and disli.es on the site design. In this "hase, communication between both you and your designer is crucial to ensure that the final web site will match your needs and taste. It is im"ortant that you wor. closely with your designer, e1changing ideas, until you arri e at the final design for your web site. Then de elo"ment can beginL Development The de elo"mental stage is the "oint where the web site itself is created. $t this time, your web designer will ta.e all of the indi idual gra"hic elements from the "rototy"e and use them to create the actual, functional site. This is ty"ically done by first de elo"ing the home "age, followed by a MshellN for the interior "ages. The shell ser es as a tem"late for the content "ages of your site, as it contains the main na igational structure for the web site. Once the shell has been created, your designer will ta.e your content and distribute it throughout the site, in the a""ro"riate areas. 0lements such as interacti e contact forms, flash animations or ecommerce sho""ing carts are im"lemented and made functional during this "hase, as well.

This entire time, your designer should continue to ma.e your in3"rogress web site a ailable to you for iewing, so that you can suggest any additional changes or corrections you would li.e to ha e done. On the technical front, a successful web site re=uires an understanding of front3end web de elo"ment. This in ol es writing alid 4HTML > #!! code that com"lies to current web standards, ma1imi2ing functionality, as well as accessibility for as large an audience as "ossible. This is tested in the ne1t "haseL Testing $t this "oint, your web designer will attend to the final details and test your web site. They will test things such as the com"lete functionality of forms or other scri"ts, as well last testing for last minute com"atibility issues & iewing differences between different web browsers(, ensuring that your web site is o"timi2ed to be iewed "ro"erly in the most recent browser ersions. $ good web designer is one who is well ersed in current standards for web site design and de elo"ment. The basic technologies currently used are 4HTML and #!! &#ascading !tyle !heets(. $s "art of testing, your designer should chec. to be sure that all of the code written for your web site alidates. 5alid code means that your site meets the current web de elo"ment standards 3 this is hel"ful when chec.ing for issues such as cross3browser com"atibility as mentioned abo e. Once you gi e your web designer final a""ro al, it is time to deli er the site. $n 8T6 &8ile Transfer 6rotocol( "rogram is used to u"load the web site files to your ser er. Most web designers offer domain name registration and web hosting ser ices as well. Once these accounts ha e been setu", and your web site u"loaded to the ser er, the site should be "ut through one last run3through. This is /ust "recautionary, to confirm that all files ha e been u"loaded correctly, and that the site continues to be fully functional. This mar.s the official launch of your site, as it is now iewable to the "ublic. Maintenance The de elo"ment of your web site is not necessarily o er, though. One way to bring re"eat isitors to your site is to offer new content or "roducts on a regular basis. Most web designers will be more than ha""y to continue wor.ing together with you, to u"date the information on your web site. Many designers offer

maintenance "ac.ages at reduced rates, based on how often you antici"ate ma.ing changes or additions to your web site. If you "refer to be more hands on, and u"date your own content, there is something called a #M! &#ontent Management !ystem( that can be im"lemented to your web site. This is something that would be decided u"on during the 6lanning stage. %ith a #M!, your designer will utili2e online software to de elo" a database dri en site for you. $ web site dri en by a #M! gi es you the ability to edit the content areas of the web site yourself. <ou are gi en access to a bac.3end administrati e area, where you can use an online te1t editor &similar to a mini ersion of Microsoft %ord(. <ou;ll be able to edit e1isting content this way, or if you are feeling more ad enturous, you can e en add new "ages and content yourself. The "ossibilities are endlessC It;s really u" to you as far as how comfortable you feel as far as u"dating your own web site. !ome "eo"le "refer to ha e all the control so that they can ma.e u"dates to their own web site the minute they decide to do so. Others "refer to hand off the web site entirely, as they ha e enough tas.s on3hand that are more im"ortant for them to handle directly. That;s where the hel" of a your web designer comes in, once again, as they can ta.e o er the web site maintenance for you 3 one less thing for you to do is always a good thing in these busy timesC Other maintenance ty"e items include !0O &!earch 0ngine O"timi2ation( and !0! &!earch 0ngine !ubmission(. This is the o"timi2ation of you web site with elements such as title, descri"tion and .eyword tags which hel" your web site achie e higher ran.ings in the search engines. The "re iously mentioned code alidation is something that "lays a ital role in !0O, as well. There are a lot of details in ol ed in o"timi2ing and submitting your web site to the search engines 3 enough to warrant it;s own "ost. This is a ery im"ortant ste", because e en though you now ha e a web site, you need to ma.e sure that "eo"le can find itC

Str%ct%re o) HTML Doc%ment !

$t the foundation of e ery HTML file is a set of structure tags that di ide an HTML file into a head section and a body section. These two sections are enclosed between an o"ening GHTMLH tag and end with the

closing GHTMLH tag. 8ollowing is a sim"le e1am"le of an HTML file that highlights the structure tags that are re=uired within e ery 4HTML file ********* Doctype Declaration ************ GCDO#T<60 html 6@+LI# *3>>%'#>>DTD 4HTML B.- Transitional>>0N* *htt")>>www.w'.org>TJ>1htmlB>DTD>1htmlB3transitional.dtd*H ********* Opening html tag ************

Ghtml 1mlnsO*htt")>>www.w'.org>BPPP>1html*H

********* Hea" Section ************ GheadH Gmeta htt"3e=ui O*#ontent3Ty"e* contentO*te1t>htmlQ charsetOiso3RRKP3B* >H GtitleH@ntitled DocumentG>titleH G>headH ********* $o"y Section ************ GbodyH My 8irst 6age. G>bodyH G>htmlH ********* Closing html tag ************ The head and body sections are contained within the o"ening html tag and the closing html tag. The Docty"e declaration is found at the beginning of e ery 4HTML file. It is the only tag that can contain u""ercase te1t. Hea" Section

#ontains the title of the web"age and information "ertaining to the entire %eb "age. #ontains any MmetaN tags. The meta tag shown in the e1am"le below is re=uired in all 4HTML files. Nothing in the head section is isible in the browser window e1ce"t for the title, MMy %eb"ageN that is found between the title tags &GtitleHMy %eb"ageG>titleH(. $o"y Section #ontains the file contents that are isible in the browser window. In other words, whate er you find within the body tags is what you will see in the browser windowC

HTML +lements !
HTML documents are defined by HTML elements. $n HTML element is e erything from the start tag to the end tag. The start tag is often called the o"ening tag. The end tag is often called the closing tag. !tart tag G"H0lement #ontentG>"H 0nd tag HTML +lement Synta, $n HTML element starts with a start tag > o"ening tag $n HTML element ends with an end tag > closing tag The element content is e erything between the start and the end tag !ome HTML elements ha e em"ty content 0m"ty elements are closed in the start tag Most HTML elements can ha e attributes

+,ample GhtmlH

GbodyH G"HThis is my first "aragra"hG>"H G>bodyH G>htmlH +,ample +,plain The -p. element G"HThis is my first "aragra"hG>"H The G"H element defines a "aragra"h in the HTML document. The element has a start tag G"H and an end tag G>"H The element content is) This is my first "aragra"h The - o"y. element GbodyH G"HThis is my first "aragra"hG>"H GbodyH The GbodyH element defines the body of the HTML document The element has a start tag GbodyH and an end tag GbodyH The element content is another HTML element &a "aragra"h( The -html. element GhtmlH GbodyH G"HThis is my first "aragra"hG>"H G>bodyH

G>htmlH The GhtmlH element defines the whole HTML document. The element has a start tag GhtmlH and an end tag GhtmlH The element content is another HTML element &the body( Don/t 0orget the +n" Tag Most browsers will dis"lay HTML correctly e en if you forget the end tag. +ut forgetting the end tag can "roduce une1"ected results or errors. 8uture ersion of HTML will not allow you to s.i" end tags. +mpty HTML +lements HTML elements without content are called em"ty elements. 0m"ty elements can be closed in the start tag. GbrH is an em"ty element without a closing tag &it defines a line brea.(. $dding a slash to the start tag, li.e Gbr >H, is the "ro"er way of closing em"ty elements, acce"ted by HTML, 4HTML and 4ML. 0 en if GbrH wor.s in all browsers, writing Gbr >H instead is more future "roof. &se Lo1ercase Tags HTML tags are not case sensiti e) G6H means the same as G"H. 6lenty of web sites use u""ercase HTML tags in their "ages. %orld %ide %eb #onsortium &%'#( recommends lowercase in HTML ,, and demands lowercase tags in future ersions of &4(HTML.

Core 'ttri %tes !

HTML ,.- has a set of four core attributes) ID, #L$!!, !T<L0 and TITL0 attribute. 2D 'ttri %te

The ID attribute uni=uely identifies an element within a document. No two elements can ha e the same ID alue in a single document. The attribute9s alue must begin with a letter in the range $3S or a32, digits &-3 P(, hy"hens &*3*(, underscores &*T*(, colons &*)*(, and "eriods &*.*(. The alue is case3sensiti e. The following e1am"le uses the 2D attribute to identify each of the first two "aragra"hs of a document) G6 2D3)irstparagraphHThis is my first "aragra"h.G>6H G6 2D3secon"paragraphHThis is my second "araga"h.G>6H In the e1am"le, both "aragra"hs could ha e style rules associated with them through their 2D attributes. The following #ascading !tyle !heet defines uni=ue colors for the two "aragra"hs) Gstyle ty"eO*te1t>css*H Ufirst"aragra"h V color ) redQ W Usecond"aragra"h V color ) blueQ W G>styleH Out"ut) This is my first "aragra"h. This is my second "aragra"h. $ style sheet rule could be "ut in the head i.e.& GheadH..GstyleH...G>styleH...G>headH(of a document.

class 'ttri %te The class attribute is used to indicate the class or classes that a tag might belong to. Li.e id, class is used to associate a tag with a name, so

-p i"340irst(aragraph4 class34important4. This is the first "aragra"h of te1t. G5p. not only names the "aragra"h uni=uely as 0irst(aragraph, but also indicates that this "aragra"h belongs to a class grou"ing called important. The main use of the class attribute is to relate a grou" of elements to arious style sheet rules. 8or e1am"le, a style sheet rule such as -style type34te,t5css4. .im"ortant Vbac.ground3color) yellowQW -5style. would gi e all elements with the class attribute set to important a yellow bac.ground. :i en that many elements can ha e the same class alues, this may affect a large "ortion of the document.

style 'ttri %te The style attribute is used to add style sheet information directly to a tag. 8or e1am"le, -p style34)ont*si6e7 89pt: color7 re":4. This is the first "aragra"h of te1t. G5p. sets the font si2e of the "aragra"h to be BR "oint, red te1t. $lthough the style attribute allows #!! rules to be added to an element with ease, it is "referable to use i" or class to relate a document3wide or lin.ed style sheet.

title 'ttri %te The title is used to "ro ide ad isory te1t about an element or its contents. In the case of

-p title342ntro"%ctory paragraph4. This is the first "aragra"h of te1t. -5p. the title attribute is set to indicate that this "articular "aragra"h is the introductory "aragra"h. +rowsers can dis"lay this ad isory te1t in the form of a Toolti", as shown here)

Toolti"s set with title alues are often found on lin.s, form fields, images, and anywhere where an e1tra bit of information is re=uired. The core attributes might not ma.e a great deal of sense at this time because generally they are most useful with scri"ting and style sheets, but .ee" in mind that these four attributes are assumed with every tag that is introduced for the rest of this cha"ter.

Lang%age 'ttri %tes !

One ma/or goal of HTML , was to "ro ide better su""ort for languages other than 0nglish. The use of other languages might re=uire that te1t direction be changed from left to right across the screen to right to left. Nearly all HTML elements now su""ort the "ir attribute, which can be used to indicate te1t direction as either ltr &left to right( or rtl &right to left(. 8or e1am"le) -p "ir34rtl4. This is a right to left "aragra"h. -5p. 8urthermore, mi1ed3language documents might become more common after su""ort for non3$!#II3 based languages is im"ro ed within browsers. The use of the lang attribute enables document authors to indicate, down to the tag le el, the language being used. 8or e1am"le, -p lang34)r4.#9est 8rancais. -5p. -p lang34en4.This is 0nglish-5p.

$lthough the language attributes should be considered "art of nearly e ery HTML element, in reality, these attributes are not widely su""orted by all browsers and are rarely used by document authors.

Core +vents !
The last ma/or as"ect of modern mar.u" initially introduced by HTML , was the increased "ossibility of adding scri"ting to HTML documents. In "re"aration for a more dynamic %eb, a set of core e ents has been associated with nearly e ery HTML element. Most of these e ents are associated with a user doing something. 8or e1am"le, the user clic.ing an ob/ect is associated with an onclic; e ent attribute. !o, -p onclic;34alert</O%ch!/=:4. 6ress this "aragra"h -5p. would associate a small bit of scri"ting code with the "aragra"h e ent, which would be triggered when the user clic.s the "aragra"h. In reality, the e ent model is not fully su""orted by all browsers for all tags, so the "re ious e1am"le might not do much of anything.

$loc;*Level +lements !
The -a""ress. tag The -a""ress. tag is used to surround information, such as the signature of the "erson who created the "age, or the address of the organi2ation the "age is about. 8or e1am"le, -a""ress. Demo #om"any, Inc.- r 5. BBII 8a.e !treet- r 5. !an Diego, #$ PIB-P- r 5. G5a""ress. can be inserted toward the bottom of e ery "age throughout a %eb site. The -a""ress. tag should be considered logical, although its "hysical rendering is italici2ed te1t. The HTML s"ecification treats -a""ress. as an idiosyncratic bloc.3le el element. Li.e other bloc.3le el elements, it inserts a blan. before and after the bloc.. It can enclose many lines of te1t, formatting

elements to change the font characteristics and e en images. Howe er, according to the s"ecification, it isn9t su""osed to enclose other bloc.3 le el elements, although browsers generally allow this.

Te,t*Level +lements !
Te1t3le el elements in HTML come in two basic fla ors) "hysical and logical. 6hysical elements, such as - . for bold and -i. for italic, are used to s"ecify how te1t should be rendered. Logical elements, such as -strong. and -em., indicate what te1t is, but not necessarily how it should loo.. $lthough common renderings e1ist for logical te1t elements, the ambiguity of these elements and the limited .nowledge of this ty"e of document structuring ha e reduced their use. Howe er, the acce"tance of style sheets and the growing di ersity of user agents mean using logical elements ma.es more sense than e er.

(hysical Character*0ormatting +lements !ometimes you might want to use bold, italics, or other font attributes to set off certain te1t, such as com"uter code. HTML and 4HTML su""ort arious elements that can be used to influence "hysical formatting. The elements ha e no meaning other than to ma.e te1t render in a "articular way. $ny other meaning is assigned by the reader. The common "hysical elements are

The following e1am"le code shows the basic use of the "hysical te1t3formatting elements)

8igure shows the rendering of the "hysical te1t elements)

Logical +lements Logical elements indicate the ty"e of content that they enclose. The browser is relati ely free to determine the "resentation of that content, although there are e1"ected renderings for these elements that are followed by nearly all browsers. $lthough this "ractice conforms to the design of HTML, there are issues about designer acce"tance. 6lain and sim"le, will a designer thin. -strong. or - .A $s mentioned "re iously, HTML "urists "ush for -strong. because a browser for the blind could read strong te1t "ro"erly. 8or the ma/ority of "eo"le coding %eb "ages, howe er, HTML is used as a isual language, des"ite its design intentions. 0 en when logical elements are used, many de elo"ers assume their default rendering in browsers to be static. -h8. tags always ma.e something large in their minds. Little encourages %eb "age authors to thin. in any other way. #onsider that until recently, it was almost im"ossible to insert a logical tag using a %<!I%<: HTML editor. !easoned e1"erts .now the beauty and intentions behind logical elements, and with style sheets logical elements will continue to catch on and e entually become the dominant form of "age design. 0 en at the time of this writing, a =uic. sur ey of large sites shows that logical te1t elements are relati ely rare. Howe er, to embrace the future and style sheets, HTML authors should strongly ree1amine their use of these elements. Table illustrates the logical te1t3formatting elements su""orted by browsers.

The following e1am"le uses all of the logical elements in a test document)

8igure shows the rendering of the logical elements under Internet 01"lorer)

8igure shows the rendering of the logical elements under Mo2illa)

8igure shows the rendering of the logical elements under O"era)

!ubtle differences might occur in the rendering of logical elements. 8or e1am"le, -")n. results in Joman te1t under Netsca"e, but yields italici2ed te1t under Internet 01"lorer. ->. wra"s =uotes around content, but does not change rendering in Internet 01"lorer X or earlier. <ou should also note that the -a r. and -acronym. tags lac. default "hysical "resentation in browsers. %ithout #!!, they ha e no "ractical meaning, sa e "otentially using the title attribute to dis"lay the meaning of the enclosed te1t. In short,

there is no guarantee of rendering, and older ersions of browsers in "articular can ary on inline logical elements, including common ones such as -em..

Lin;ing in HTML !
$ lin. is the *address* to a document &or a resource( on the web. Hyperlin;s In web terms, a hy"erlin. is a reference &an address( to a resource on the web. Hy"erlin.s can "oint to any resource on the web) an HTML "age, an image, a sound file, a mo ie, etc. 'nchors $n anchor is a term used to define a hy"erlin. destination inside a document. The HTML anchor element GaH, is used to define both hy"erlin.s and anchors. %e will use the term HTML lin. when the GaH element "oints to a resource, and the term HTML anchor when the GaH elements defines an address inside a document. HTML Lin; Synta, Ga hrefO*url*HLin. te1tGaH The start tag contains attributes about the lin.. The element content &Lin. te1t( defines the "art to be dis"layed. The hre) 'ttri %te The href attribute defines the lin. *address*. This GaH element defines a lin. to onlinemca.com) Ga hrefO*htt")>>www.onlinemca.com>*H5isit onlinemcaGaH

The target 'ttri %te The target attribute defines where the lin.ed document will be o"ened. The code below will o"en the document in a new browser window) Ga hrefO*htt")>>www.onlinemca.com>* targetO*Tblan.*H5isit onlinemcaG>aH

2mages an" 'nchors !

If you want to ma.e an image wor. as a lin., the method is e1actly the same as with te1ts. <ou sim"ly "lace the Ga hrefH and the G>aH tags on each side of the image. +elow is the HTML code used to ma.e the image wor. as a lin. to a "age Ga hrefO*111.htm*HGimg srcO*111.gif*HG>aH If you ha en9t entered a border setting you will see a small border around the image after turning it into a lin.. To turn off this border, sim"ly add borderO*-* to the GimgH tag) Ga hrefO*111.htm*HGimg srcO*111.gif* borderO*-*HG>aH Images that wor. as lin.s can show a "o"u" te1t when you "lace the mouse o er it. This is done with the alt "ro"erty in the GimgH tag. Ga hrefO*111.htm*HGimg srcO*111.gif* borderO*-* altO*Lin. to this "age*HG>aH

'nchor 'ttri%te !
The GaH tag defines an anchor. $n anchor can be used in two ways) B. To create a lin. to another document, by using the href attribute. I. To create a boo.mar. inside a document, by using the name attribute. The a element is usually referred to as a lin. or a hy"erlin.. The most im"ortant attribute of the a element is the href attribute, which indicates the lin.;s destination.

+y default, lin.s will a""ear as follows in all browsers) $n un isited lin. is underlined and blue $ isited lin. is underlined and "ur"le $n acti e lin. is underlined and red

2mage Maps !
In HTML and 4HTML , an image ma" is a list of coordinates relating to a s"ecific image, created in order to hy"erlin. areas of the image to arious destinations &as o""osed to a normal image lin., in which the entire area of the image lin.s to a single destination(. 8or e1am"le, a ma" of the world may ha e each country hy"erlin.ed to further information about that country. The intention of an image ma" is to "ro ide an easy way of lin.ing arious "arts of an image without di iding the image into se"arate image files.

It is "ossible to create image ma"s by hand, using a te1t editor, howe er doing so re=uires that the web designer .nows how to code HTML and also re=uires them to .now the coordinates of the areas that they wish to "lace o er the image. $s a result, most image ma"s coded by hand are sim"le "olygons.

+ecause creating image ma"s in a te1t editor re=uires much time and effort, there are many a""lications that allow the web designer to =uic.ly and easily create image ma"s much as they would create sha"es in a ector gra"hics editor. 01am"les of these are $dobe9s Dreamwea er or DImageMa"0ditor &for DD0(, and the imagema" "lugin found in :IM6.

The -map. tag The Gma"H tag is used to define a client3side image3ma". $n image3ma" is an image with clic.able areas.

The name attribute is re=uired in the ma" element. This attribute is associated with the GimgH9s usema" attribute and creates a relationshi" between the image and the ma".

The ma" element contains a number of area elements, that defines the clic.able areas in the image ma".

Semantic Lin;ing Meta 2n)ormation !

The !emantic %eb is an e ol ing de elo"ment of the %orld %ide %eb in which the meaning &semantics( of information and ser ices on the web is defined, ma.ing it "ossible for the web to understand and satisfy the re=uests of "eo"le and machines to use the web content. It deri es from %orld %ide %eb #onsortium director !ir Tim +erners3Lee9s ision of the %eb as a uni ersal medium for data, information, and .nowledge e1change.

$t its core, the semantic web com"rises a set of design "rinci"les, collaborati e wor.ing grou"s, and a ariety of enabling technologies. !ome elements of the semantic web are e1"ressed as "ros"ecti e future "ossibilities that are yet to be im"lemented or reali2ed. Other elements of the semantic web are e1"ressed in formal s"ecifications. !ome of these include Jesource Descri"tion 8ramewor. &JD8(, a ariety of data interchange formats &e.g. JD8>4ML, N', Turtle, N3Tri"les(, and notations such as JD8 !chema &JD8!( and the %eb Ontology Language &O%L(, all of which are intended to "ro ide a formal descri"tion of conce"ts, terms, and relationshi"s within a gi en .nowledge domain.

2mage (reliminaries !
In HTML, images are defined with the GimgH tag. The GimgH tag is em"ty, which means that it contains attributes only and it has no closing tag. To dis"lay an image on a "age, you need to use the src attribute. !rc stands for *source*. The alue of the src attribute is the @JL of the image you want to dis"lay on your "age. Synta, Gimg srcO*url* >H The @JL "oints to the location where the image is stored.

2mages as $%ttons !
Image buttons ha e the same effect as submit buttons. %hen a isitor clic.s an image button the form is sent to the address s"ecified in the action setting of the GformH tag.

HTML Layo%t !

Layout is the com"ilation of te1t and gra"hics on a "age. 0 erywhere on the %eb you will find "ages that are formatted li.e news"a"er "ages using HTML columns. <ou may ha e noticed that many websites ha e multi"le columns in their layout 3 they are formatted li.e a maga2ine or news"a"er. Many websites achie ed this HTML layout using tables. Te,t Layo%t These tags will let you control the layout.

HTML

+?(L'#'T2O#

G"Hte1tG>"H

$dds a "aragra"h brea. after the te1t.

G" alignO*left*Hte1tG>"H

Left /ustify te1t in "aragra"h.

G" alignO*center*Hte1tG>"H #enter te1t in "aragra"h.

G" alignO*right*Hte1tG>"H

Jight /ustify te1t in "aragra"h.

Gbr>H

$dds a single linebrea. where the tag is.

Layo%t 1ith Ta les !

Tables ha e been a "o"ular method for achie ing ad anced layouts in HTML. :enerally, this in ol es "utting the whole web "age inside a big table. This table has a different column or row for each main section. 8or e1am"le, the following HTML layout e1am"le is achie ed using a table with ' rows and I columns 3 but the header and footer column s"ans both columns &using the cols"an attribute()

This HTML code... Gtable widthO*,--"1* borderO*-*H GtrH Gtd cols"anO*I* styleO*bac.ground3color)yellowQ*H Header G>tdH G>trH GtrH Gtd styleO*bac.ground3color)orangeQwidth)B--"1Qte1t3align)to"Q*H Left menuGbr >H Item BGbr >H Item IGbr >H Item '... G>tdH Gtd styleO*bac.ground3color)UeeeeeeQheight)I--"1Qwidth)'--"1Qte1t3align)to"Q*H Main body G>tdH G>trH GtrH Gtd cols"anO*I* styleO*bac.ground3color)yellowQ*H 8ooter G>tdH G>trH G>tableH Layo%t

HTML 0rames !
%ith frames, you can dis"lay more than one HTML document in the same browser window. 0ach HTML document is called a frame, and each frame is inde"endent of the others. The disad antages of using frames are) The web de elo"er must .ee" trac. of more HTML documents It is difficult to "rint the entire "age

The 8rameset Tag The GframesetH tag defines how to di ide the window into frames 0ach frameset defines a set of rows or columns The alues of the rows>columns indicate the amount of screen area each row>column will occu"y

The 8rame Tag The GframeH tag defines what HTML document to "ut into each frame

In the e1am"le below we ha e a frameset with two columns. The first column is set to IKY of the width of the browser window. The second column is set to ZKY of the width of the browser window. The HTML document *frameTa.htm* is "ut into the first column, and the HTML document *frameTb.htm* is "ut into the second column) Gframeset colsO*IKY,ZKY*H Gframe srcO*frameTa.htm*H Gframe srcO*frameTb.htm*H G>framesetH

HTML @ Me"ia Types !

Multimedia is e erything you can hear or see) te1ts, boo.s, "ictures, music, sounds, #Ds, ideos, D5Ds, Jecords, 8ilms, and more.

Multimedia comes in many different formats. On the Internet you will find many of these elements embedded in web "ages, and today9s web browsers ha e su""ort for a number of multimedia formats. M%ltime"ia 0ormats Multimedia elements &li.e sounds or ideos( are stored in media files. The most common way to disco er the media ty"e is to loo. at the file e1tension. %hen a browser sees the file e1tensions .htm or .html, it will assume that the file is an HTML "age. The .1ml e1tension indicates an 4ML file, and the .css e1tension indicates a style sheet. 6icture formats are recogni2ed by e1tensions li.e .gif and ./"g. $ro1ser S%pport The first Internet browsers had su""ort for te1t only, and e en the te1t su""ort was limited to a single font in a single color, and little or nothing else. Then came web browsers with su""ort for colors, fonts and te1t styles, and the su""ort for "ictures was added. The su""ort for sounds, animations and ideos is handled in different ways by different browsers. !ome elements can be handled inline, some re=uires a "lug3in and some re=uires an $cti e4 control.

'%"io S%pport in $ro1sers !

!ound is a ital element of true multimedia %eb "ages. !ound can be stored in many different formats. The M2D2 0ormat The MIDI &Musical Instrument Digital Interface( is a format for sending music information between electronic music de ices li.e synthesi2ers and 6# sound cards. The MIDI format was de elo"ed in BPRI by the music industry. The MIDI format is ery fle1ible and can be used for e erything from ery sim"le to real "rofessional music ma.ing. MIDI files do not contain sam"led sound, but a set of digital musical instructions &musical notes( that can be inter"reted by your 6#9s sound card. The Aeal'%"io 0ormat

The Jeal$udio format was de elo"ed for the Internet by Jeal Media. The format also su""orts ideo. The format allows streaming of audio &on3line music, Internet radio( with low bandwidths. +ecause of the low bandwidth "riority, =uality is often reduced. !ounds stored in the Jeal$udio format ha e the e1tension .rm or .ram. The '& 0ormat The $@ format is su""orted by many different software systems o er a large range of "latforms. !ounds stored in the $@ format ha e the e1tension .au. The '200 0ormat The $I88 &$udio Interchange 8ile 8ormat( was de elo"ed by $""le. $I88 files are not cross3"latform and the format is not su""orted by all web browsers. !ounds stored in the $I88 format ha e the e1tension .aif or .aiff. The S#D 0ormat The !ND &!ound( was de elo"ed by $""le. !ND files are not cross3"latform and the format is not su""orted by all web browsers. !ounds stored in the !ND format ha e the e1tension .snd. The W'B+ 0ormat The %$50 &wa eform( format is de elo"ed by I+M and Microsoft. It is su""orted by all com"uters running %indows, and by all the most "o"ular web browsers. !ounds stored in the %$50 format ha e the e1tension .wa . The M(C 0ormat <M(+!= M6' files are actually M60: files. +ut the M60: format was originally de elo"ed for ideo by the Mo ing 6ictures 01"erts :rou". %e can say that M6' files are the sound "art of the M60: ideo format. M6' is one of the most "o"ular sound formats for music recording. The M6' encoding system combines good com"ression &small files( with high =uality. 01"ect all your future software systems to su""ort it. !ounds stored in the M6' format ha e the e1tension .m"', or .m"ga &for M6: $udio(. What 0ormat To &seD

The %$50 format is one of the most "o"ular sound format on the Internet, and it is su""orted by all "o"ular browsers. If you want recorded sound &music or s"eech( to be a ailable to all your isitors, you should use the %$50 format. The M6' format is the new and u"coming format for recorded music. If your website is about recorded music, the M6' format is the choice of the future.

Bi"eo S%pport in $ro1ser !

Li.e audio files, ideo files can be com"ressed to reduce the amount of data being sent. +ecause of the degree of com"ression re=uired by ideo, most ideo codecs use a lossy a""roach that in ol es a trade3 off between "icture>sound =uality and file si2e, with larger file si2es ob iously resulting in longer download times. 5ideo can be stored in many different formats. The 'B2 0ormat The $5I &$udio 5ideo Interlea e( format was de elo"ed by Microsoft. The $5I format is su""orted by all com"uters running %indows, and by all the most "o"ular web browsers. It is a ery common format on the Internet, but not always "ossible to "lay on non3%indows com"uters. 5ideos stored in the $5I format ha e the e1tension .a i. The Win"o1s Me"ia 0ormat The %indows Media format is de elo"ed by Microsoft. %indows Media is a common format on the Internet, but %indows Media mo ies cannot be "layed on non3%indows com"uter without an e1tra &free( com"onent installed. !ome later %indows Media mo ies cannot "lay at all on non3%indows com"uters because no "layer is a ailable. 5ideos stored in the %indows Media format ha e the e1tension .wm . The M(+! 0ormat The M60: &Mo ing 6ictures 01"ert :rou"( format is the most "o"ular format on the Internet. It is cross3 "latform, and su""orted by all the most "o"ular web browsers.5ideos stored in the M60: format ha e the e1tension .m"g or .m"eg. The E%ic;Time 0ormat

The 7uic.Time format is de elo"ed by $""le. 7uic.Time is a common format on the Internet, but 7uic.Time mo ies cannot be "layed on a %indows com"uter without an e1tra &free( com"onent installed. 5ideos stored in the 7uic.Time format ha e the e1tension .mo . The AealBi"eo 0ormat The Jeal5ideo format was de elo"ed for the Internet by Jeal Media. The format allows streaming of ideo &on3line ideo, Internet T5( with low bandwidths. +ecause of the low bandwidth "riority, =uality is often reduced. 5ideos stored in the Jeal5ideo format ha e the e1tension .rm or .ram. The Shoc;1ave <0lash= 0ormat The !hoc.wa e format was de elo"ed by Macromedia. The !hoc.wa e format re=uires an e1tra com"onent to "lay. This com"onent comes "reinstalled with the latest ersions of Netsca"e and Internet 01"lorer. 5ideos stored in the !hoc.wa e format ha e the e1tension .swf.

Other $inary 0ormats in HTML !

(D0 0ormat The term *6D8* stands for *6ortable Document 8ormat*. The .ey word is "ortable, intended to combine the =ualities of authenticity, reliability and ease of use together into a single "ac.aged conce"t. To be truly "ortable, an authentic electronic document would ha e to a""ear e1actly the same way on any com"uter at any time, at no cost to the user. It will deli er the e1act same results in "rint or on3screen with near3total reliability. The difference between 6D8 and formats used for writing &%ord, 01cel, 6ower 6oint, 7uar., HTML, etc( is "rofound. 6ro"erly made, 6D8 files are not sub/ect to the agaries of other formats. 6D8s are not readily editable 3 and editing may be e1"licitly "rohibited. $ "recise sna"shot, a 6D8 file is created at a s"ecific date and time, and in a s"ecific way. <ou can trust a 6D8 li.e you can trust a fa1. <ou can9t say that about a %ord fileC $dobe !ystems in ented 6D8 technology in the early BPP-s to smooth the "rocess of mo ing te1t and gra"hics from "ublishers to "rinting3"resses. $t the time, e1"ectations were modest, but no longer. 6D8

turned out to be the ery essence of "a"er, brought to life in a com"uter. In creating 6D8, $dobe had almost unwittingly in ented nothing less than a bridge between the "a"er and com"uter worlds.

Style Sheets !
#!! stands for #ascading !tyle !heets. It is a way to di ide the content from the layout on web "ages. Ho1 it 1or;s $ style is a definition of fonts, colors, etc. 0ach style has a uni=ue name) a selector. The selectors and their styles are defined in one "lace. In your HTML contents you sim"ly refer to the selectors whene er you want to acti ate a certain style. '"vantages %ith #!!, you will be able to) B( Define the loo. of your "ages in one "lace rather than re"eating yourself o er and o er again throughout your site. I( 0asily change the loo. of your "ages e en after they9re created. !ince the styles are defined in one "lace you can change the loo. of the entire site at once. '( Define font si2es and similar attributes with the same accuracy as you ha e with a word "rocessor 3 not being limited to /ust the se en different font si2es defined in HTML. ,( 6osition the content of your "ages with "i1el "recision. K( Jedefine entire HTML tags. !ay for e1am"le, if you wanted the bold tag to be red using a s"ecial font 3 this can be done easily with #!!.

X( Define customi2ed styles for lin.s 3 such as getting rid of the underline. Z( Define layers that can be "ositioned on to" of each other &often used for menus that "o" u"(.

(ositioning 1ith Style Sheets !

' sol%te (ositioning If you "osition an element &an image, a table, or whate er( absolutely on your "age, it will a""ear at the e1act "i1el you s"ecify. !ay I wanted a gra"hic to a""ear ,X "i1els from the to" of the "age and R- "i1els in from the right, I could do it. The #!! code you;ll need to add into the image is img V"osition) absoluteQ to") ,X"1Q right) R-"1Q W <ou /ust add in which method of "ositioning you;re using at the start, and then "ush the image out from the sides it;s going to be closest to. <ou can add the #!! directly into the tag using the style attribute &as shown in the introduction to stylesheets(, or you can use classes and ids and "ut them into your stylesheet. It wor.s the same way. The recommended method is to add classes for layout elements that will a""ear on e ery "age, but "ut the code inline for once3off things. Aelative (ositioning $n element whose "osition "ro"erty has the alue relati e is first laid out /ust li.e a static element. The rendered bo1 is then shifted ertically &according to the to" or bottom "ro"erty( and>or hori2ontally &according to the left or right "ro"erty(. The "ro"erties to", right, bottom, and left can be used to s"ecify by how much the rendered bo1 will be shifted. $ "ositi e alue means the bo1 will be shifted away from that "osition, towards the o""osite side. 8or instance, a left alue of I-"1 shifts the bo1 I- "i1els to the right of its original "osition. $""lying a negati e alue to the o""osite side will achie e the same effect) a right alue of 3I-"1 will accom"lish the same result as a left alue of I-"1. The initial alue for these "ro"erties is auto, which ma.es the com"uted alue - &2ero(?that is, no shift occurs. 0 idently, it;s "ointless to s"ecify both left and right for the same element, because the "osition will be o er3constrained. If the content direction is left to right, the left alue is used, and right will be ignored. In a

right3to3left direction, the right alue Mwins.N If both to" and bottom are s"ecified, to" will be used and bottom will be ignored. !ince it;s only the rendered bo1 that mo es when we relati ely "osition an element, this "ositioning scheme isn;t useful for laying out columns of content. Jelati e "ositioning is commonly used when we need to shift a bo1 a few "i1els or so, although it can also be useful, in combination with negati e margins on floated elements, for some more com"le1 designs. 0i,e" (ositioning 8i1ed "ositioning is a subcategory of absolute "ositioning. $n element whose "osition "ro"erty is set to fi1ed always has the iew"ort as its containing bloc.. 8or continuous media, such as a com"uter screen, a fi1ed element won;t mo e when the document is scrolled. 8or "aged media, a fi1ed element will be re"eated on e ery "age. 0loating $ floated element is one whose float "ro"erty has a alue other than none. The element can be shifted to the left &using the alue left( or to the right &using the alue right(Q non3floated content will flow along the side o""osite the s"ecified float direction.

CSS $asic 2nteractivity !

Statements $ #!! style sheet is com"osed from a list of statements. $ statement is either an at3rule or a rule set. The following e1am"le has two statementsQ the first is an at3rule that is delimited by the semicolon at the end of the first line, and the second is a rule set that is delimited by the closing curly brace, W) im"ort url&base.css(Q hI V color) UXXXQ font3weight) boldQ W 't*r%les

$n at3rule is an instruction or directi e to the #!! "arser. It starts with an at3.eyword) an [ character followed by an identifier. $n at3rule can com"rise a bloc. delimited by curly braces, VLW, or te1t terminated by a semicolon, Q. $n at3rule;s synta1 will dictate whether it needs a bloc. or te1t?see #!! $t3 rules for more information. 6arentheses, brac.ets, and braces must a""ear as matching "airs and can be nested within the at3rule. !ingle and double =uotes must also a""ear in matching "airs. A%le Sets $ rule set &also called a rule( com"rises a selector followed by a declaration bloc.Q the rule set a""lies the declarations listed in the declaration bloc. to all elements matched by the selector. Here;s an e1am"le of a rule set) hI V color) UXXXQ font3weight) boldQ W Selectors $ selector com"rises e ery "art of a rule set u" to?but not including?the left curly brace V. $ selector is a "attern, and the declarations within the bloc. that follows the selector are a""lied to all the elements that match this "attern. In the following e1am"le rule set, the selector is hI) hI V color) UXXXQ font3weight) boldQ W Declaration $loc;s Declaration bloc.s begin with a left curly brace, V, and end with a right curly brace, W. They contain 2ero or more declarations se"arated by semicolons)

hI V color) UXXXQ W $ declaration bloc. is always "receded by a selector. %e can combine multi"le rules that ha e the same selector into a single rule. #onsider these rules) hI V color) UXXXQ W hI V font3weight) boldQ W They;re e=ui alent to the rule below) hI V color) UXXXQ font3weight) boldQ W CSS Comments In #!!, a comment starts with >F and ends with F>. #omments can s"an multi"le lines, but may not be nested) >F This is a single3line comment F> >F This is a comment that s"ans multi"le lines F>

HTML 0orms !
$ form is sim"ly an area that can contain form fields.

8orm fields are ob/ects that allow the isitor to enter information 3 for e1am"le te1t bo1es, dro"3down menus or radio buttons. %hen the isitor clic.s a submit button, the content of the form is usually sent to a "rogram that runs on the ser er. Howe er, there are e1ce"tions. Ja ascri"t is sometimes used to create magic with form fields. $n e1am"le could be when turning o"tions in a dro"3down menu into normal lin.s. The -)orm. tag %hen a form is submitted, all fields on the form are being sent. The GformH tag tells the browser where the form starts and ends. <ou can add all .inds of HTML tags between the GformH and GformH tags. This means that a form can easily include a table or an image along with the form fields mentioned on the ne1t "age. These fields can be added to your forms) Te1t field 6assword field Hidden field Te1t area #hec. bo1 Jadio button Dro"3down menu !ubmit button Jeset button Image button

0orms Control !

These fields can be added to your forms) Te1t field 6assword field Hidden field Te1t area #hec. bo1 Jadio button Dro"3down menu !ubmit button Jeset button Image button

Te,t 0iel"s Te1t fields are used when you want the user to ty"e letters, numbers, etc. in a form. GformH 8irst name) Gin"ut ty"eO*te1t* nameO*firstname* >H Gbr >H Last name) Gin"ut ty"eO*te1t* nameO*lastname* >H GformH How it loo.s in a browser)

firstname

lastname

Aa"io $%ttons Jadio +uttons are used when you want the user to select one of a limited number of choices. GformH Gin"ut ty"eO*radio* nameO*se1* alueO*male* >H Male Gbr >H Gin"ut ty"eO*radio* nameO*se1* alueO*female* >H 8emale G>formH How it loo.s in a browser)

Male

8emale

Chec; o,es #hec.bo1es are used when you want the user to select one or more o"tions of a limited number of choices. GformH I ha e a bi.e) Gin"ut ty"eO*chec.bo1* nameO* ehicle* alueO*+i.e* >H Gbr >H I ha e a car) Gin"ut ty"eO*chec.bo1* nameO* ehicle* alueO*#ar* >H Gbr >H I ha e an "lane)

Gin"ut ty"eO*chec.bo1* nameO* ehicle* alueO*$ir"lane* >H G>formH How it loo.s in a browser)

I ha e a bi.e)

I ha e a car)

I ha e a "lane)