Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Chapter Two Web Design Using HTML

    Încărcat de

    Sachin Marathe
    156 vizualizări34 pagini
    The document provides an overview of basic HTML elements, syntax, and style: 1. It describes the core HTML elements - html, head, title, and body - that form the essential structure of every HTML document. Each element has an opening and closing tag. 2. It lists and explains other common and important elements like links (a), bold text (b), line breaks (br), centered text (center), and headings (h1-h6). 3. It covers HTML attributes and their values that can further control elements' appearance. Attributes usually have values like text colors, font sizes, and image widths.

    Descriere originală:

    HTML basics

    Titlu original

    html notes.doc

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    The document provides an overview of basic HTML elements, syntax, and style: 1. It describes the core HTML elements - html, head, title, and body - that form the essential structure of every HTML document. Each element has an opening and closing tag. 2. It lists and explains other common and important elements like links (a), bold text (b), line breaks (br), centered text (center), and headings (h1-h6). 3. It covers HTML attributes and their values that can further control elements' appearance. Attributes usually have values like text colors, font sizes, and image widths.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    156 vizualizări34 pagini

    Chapter Two Web Design Using HTML

    Încărcat de

    Sachin Marathe
    The document provides an overview of basic HTML elements, syntax, and style: 1. It describes the core HTML elements - html, head, title, and body - that form the essential structure of every HTML document. Each element has an opening and closing tag. 2. It lists and explains other common and important elements like links (a), bold text (b), line breaks (br), centered text (center), and headings (h1-h6). 3. It covers HTML attributes and their values that can further control elements' appearance. Attributes usually have values like text colors, font sizes, and image widths.

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 34

    Chapter Two Web Design Using HTML

    ------------------------------------------------HTML is an acronym for Hypertext Markup Language. HTML ocuments! the foun ation of a"" content appearing on the Wor" Wi e Web#WWW$! consist of two essentia" parts% information content an a set of instructions that te""s a computer how to isp"ay that content. &t is not a programming "anguage in the tra itiona" sense! but rather a setoff instructions about how to isp"ay content. The computer app"ication that trans"ates this escription is ca""e a Web browser. & ea""y! on"ine content shou" a"ways "ook the same regar "ess of the browser use or the operating system on which it resi es! but the goa" of p"atform in epen ence is achie'e on"y approximate"y in practice. ( basic HTML ocument re)uires a minimum e"ements% *htm"+ , *-htm"+ *hea + , *-hea + *tit"e+ , *-tit"e+ *bo y+ , *-bo y+ These e"ements efine the essentia" parts of an HTML ocument% the ocument itse"f! a hea ing section! a tit"e section! an a bo y. .ach of the e"ements is efine by two tags/ a start tag an an en tag. Tags are a"ways enc"ose in ang"e brackets% *,+. .n tags start with a s"ash #-$. ( typica" first goa" in "earning any programming "anguage is to isp"ay a simp"e message. With HTML! this is tri'ia""y simp"e% 0ust type the message in the bo y of the ocument! as shown in Document 1.2

    Document 1.2 #He""oWor" HTML.htm$ <html> <head> <title>3irst HTML Document</title> </head> <body> He""o! wor" 4 </body> </html> Output:

    1.2 HTML 5asic


    2.1.1 Documents, Elements, Attributes, and Values ( basic HTML ocument consists of four sections efine by four sets of e"ements! arrange as fo""ows% *htm"+ *hea + *tit"e+ , *-tit"e+ , *-hea + *bo y+ , *-bo y+ *-htm"+

    .ach of these e"ements has a start tag an an en tag. Tags are a"ways enc"ose in ang"e brackets *,+ an the en tag a"ways inc"u es a forwar s"ash before the e"ement name. The bo y e"ement supports attributes that can be use to contro" the o'era"" appearance of an HTML ocument. Documents! e"ements! attributes! an 'a"ues are organi6e in a specific hierarchy% HTML document elements attributes values *tit"e+ , *-tit"e+ The tit"e e"ement contains the text that wi"" be isp"aye in the browser7s tit"e bar. .'ery HTML ocument shou" ha'e a tit"e! inc"u e as the first e"ement insi e the hea e"ement. Attributes% none ."ements exist within a ocument. ."ements can ha'e attributes an attributes #usua""y$ ha'e 'a"ues. 3o""owing is a brief escription of the four e"ements that wi"" be part of e'ery HTML ocument. (s se'era" e"ements can share common attributes! attributes an their 'a"ues are "iste separate"y! fo""owing the "ist of e"ements. *htm"+ , *-htm"+ The htm" e"ement surroun s the entire ocument. ("" other HTML e"ements are neste within this e"ement. Attributes% none *hea + , *-hea + The hea e"ement contains information about the ocument. The hea e"ement must contain a tit"e e"ement an un er 8HTML ru"es! the tit"e must be the first e"ement after hea . 3rom our perspecti'e! the other important e"ement to be inc"u e in hea is script! which wi"" contain 0a'a9cript co e. Attributes% none

    *bo y+ , *-bo y+ The bo y e"ement contains the HTML ocument content! a"ong with whate'er e"ements are re)uire to format! access! an manipu"ate the content. Attributes% backgroun ! bgco"or! text 2 ! 2 "ome Other #mportant $lements The four basic e"ements iscusse abo'e constitute no more than a b"ank temp"ate for an HTML ocument. :ther e"ements are nee e to isp"ay an contro" the appearance of content within the ocument. 3o""owing are some important e"ements that you wi"" use o'er an o'er again in your HTML ocuments! *a+ , *-a+ The a #for ;anchor<$ e"ement pro'i es "inks to an externa" resource or to an interna" "ink within a ocument. Attributes: href! name *b+ , *-b+ The b e"ement forces the inc"u e text to be isp"aye in a bo" font. This is a ;physica" e"ement< in the sense that it is associate specifica""y with isp"aying text in a bo" font! e'en though the actua" appearance may epen on the browser an computer use . &n contrast! see the strong e"ement be"ow. Attributes% none *br -+ or *br+ The br e"ement inserts a break #"ine fee $ in the text. Mu"tip"e breaks can be use to insert mu"tip"e b"ank "ines between sections of text. The break e"ement has no en tag because it enc"oses no content. Attributes% none

    *center+ , *-center+ The center e"ement causes isp"aye text to be centere on the computer screen. Attributes% none *em+ , *-em+ This is a ;"ogica" e"ement< that wi"" typica""y cause text to be isp"aye in ita"ics! but it can be re efine Attributes% none *font+ , *-font+ The font e"ement contro"s the appearance of text. The two most common"y use attributes contro" the si6e an co"or of the text. Attributes% size! color! face *hr -+ or *hr+ The hori6onta" ru"e e"ement raws a sha e hori6onta" "ine across the screen. &t oes not ha'e an en tag. ( c"osing s"ash #after a space$ is re)uire in 8HTML. ( nosha e attribute isp"ays the ru"e as a so"i co"or! rather than sha e . Attributes% a"ign! co"or! nosha e! si6e! wi th *hn+ , *-hn+ Up to six "e'e"s of hea ings #for n ranging from 2 to =$ can be efine ! with ecreasing font si6es as n increases from 2 to =. Attributes% a"ign *i+ , *-i+ i is a ;physica" e"ement< that forces the inc"u e text to be isp"aye in ita"ics. The actua" appearance may e"ement abo'e. Attributes% none epen on the browser an computer use . Compare with the em to pro uce ifferent resu"ts in ifferent en'ironments. 3or most purposes! em an i are interchangeab"e. 9ee the i e"ement be"ow.

    *img -+ The img e"ement pro'i es a "ink to an image to be isp"aye within a ocument. The image is store in a separate fi"e! perhaps e'en at another Web a ress! the "ocation of which is pro'i e by the src attribute. Attributes% a"ign! bor er! height! src! 'space! wi th *p+ , *-p+ The p e"ement marks the beginning an en of a paragraph of text content. >ote that HTML oes not automatica""y in ent paragraphs. ?ather! it separates paragraphs with an empty "ine! with a"" the text a"igne "eft. &t is common to see on"y the start tag use in HTML ocuments! without the correspon ing en tag. Howe'er! the use of the en tag is enforce by 8HTML! an this is the sty"e that shou" be fo""owe . Attributes% none *pre+ , *-pre+ The efau"t beha'ior of HTML is to co""apse mu"tip"e spaces! "ine fee s! an tabs to a sing"e space. This estroys some of the text formatting that you may wish to preser'e in a ocument! such as tabs at the beginning of paragraphs. The pre e"ement forces HTML to recogni6e mu"tip"e spaces! "ine fee s! an tabs embe e in text. The efau"t action for pre is to use a monospace font such as Courier. This may not a"ways be appropriate! but as "ine fee s an other text p"acement con'entions are recogni6e ! pre is 'ery usefu" for embe ing programming co e examp"es within an HTML ocument. Attributes% none *strong+ , *-strong+ strong is a ;"ogica" e"ement< that typica""y causes text to be isp"aye in a bo" font! but it can be re efine Attributes% none to pro uce ifferent resu"ts in ifferent en'ironments. 3or most purposes! b an strong are interchangeab"e. Compare this with the b tag abo'e.

    Description of attributes%
    These escriptions may not inc"u e a"" possib"e 'a"ues. 3or a comp"ete "isting! consu"t an HTML reference manua". a"ign @ A,A Values% A"eftA! ArightA! or AcenterA ("igns text hori6onta""y. backgroun @ A,A Value% the U?L of a gif- or Bpeg-format graphics fi"e 9etting the backgroun attribute isp"ays the specifie image as the backgroun behin a isp"aye HTML ocument page. Depen ing on the image si6e #in pixe"s$! backgroun images may automatica""y be ;ti"e !< resu"ting in a repeating image that can be 'isua""y istracting. &t is not necessary to use backgroun images! an they shou" be use with care. bgco"or @ A,A Values% 5ackgroun co"ors can be set either by name or by specifying the intensity of the re ! green! an b"ue co"ors. bor er@A,A Value% The wi th! in pixe"s! of a bor er surroun ing an image co"or @ A,A Values% Text co"ors can be set either by name or by irect"y specifying the intensity of the re ! green! an b"ue co"ors. face @ A,A Values% 3ont typefaces can be set either generica""y! with cursi'e! monospace! sans-serif! or serif! or with specific font names supporte by the user7s computer.

    height @ A,A Value% The height! in pixe"s! of an image. href @ A,A Value: The U?L of an externa" or interna" Web resource or the name of an interna" ocument reference. hspace @ A,A Value: The hori6onta" space! in pixe"s! between an image an the surroun ing text. name @ A,A Value: The name assigne to an interna" ocument reference through an ;a< e"ement. si6e @ A,A Values% (n unsigne integer from 2 to C or a signe number from D2 to D= or E2 to E=. (n unsigne integer is an abso"ute font si6e! which may be system- epen ent. The efau"t 'a"ue is F. ( signe integer is a font si6e re"ati'e to the current font si6e! "arger for positi'e 'a"ues an sma""er for negati'e 'a"ues. 3or the hr e"ement! si6e is the 'ertica" height of the hori6onta" ru"e! in pixe"s. src @ A,A Value% The U?L of a graphics fi"e. 3or "oca" use! images an their HTML ocument are usua""y store in the same fo" er. text @ A,A Values% The text attribute! use with the bo y e"ement! se"ects the co"or of text in a ocument! which pre'ai"s un"ess o'erri en by a font attribute .

    vspace = "" Value: The 'ertica" space! in pixe"s! between an image an the surroun ing text. width = "" Values% The wi th of an image or hori6onta" ru"e! in pixe"s or as a percent of tota" screen wi th. 3or examp"e! width="80" is interprete as a wi th of GH pixe"s! but width="80%" is a wi th e)ua" to GH percent of the tota" screen wi th. 2.1.3 HTML Syntax and Style ( genera" characteristic of programming "anguages is that they ha'e 'erystrict syntax ru"es. HTML is ifferent in that regar ! as it is not high"y stan ar i6e . The positi'e spin on this situation is to ca"" HTML an ;open stan ar !< which means that se"f- escribe bearers of the stan ar can treat the "anguage as they see fit! subBect on"y to usefu"ness an market acceptance. HTML has an estab"ishe syntax! but it is 'ery forgi'ing about how that syntax is use . 9ome of the sty"e ru"es use are "iste be"ow. 2. 9pe"" the names of HTML e"ements in "owercase "etters. 1. Use the pre e"ement to enforce text "ayout whene'er it is reasonab"e to use a monospace font #such as Courier$. F. >est e"ements proper"y. 2..1.

    !sin" t#e script Element

    The script e"ement usua""y #but not a"ways$ appears insi e the hea e"ement! after the tit"e e"ement. 3o""owing is a escription of script a"ong with its essentia" attributes% *script "anguage@ABa'ascriptA type@Atext-Ba'ascriptA+ . . . . .. . . . ,,,.. *-script+ Attributes% "anguage! type! src

    2.2 $ascadin" Style S#eets


    (s you create more Web pages! you may wish to impose a consistent "ook for a"" of your pages or for groups of re"ate pages. &t is te ious to insert e"ements for a"" the characteristics you may wish to rep"icate/font si6e! font co"or! backgroun co"or! an so forth. 9ty"e sheets make it much easier to rep"icate "ayout information in mu"tip"e ocuments.. Document 1.1 #sty"e.htm$ *htm"+ *hea + *tit"e+9ty"e 9heets*-tit"e+ *sty"e tit"e@AC99 IageA type@Atext-cssA+ bo y.bright Jbackgroun % re K font% 2=pt serifK co"or% b"ueK font-sty"e% ita"icK font-weight% bo" L *-sty"e+ *-hea + *bo y c"ass@AbrightA+ Here is the bo y. *-bo y+ *-htm" Output:

    The sty"e e"ement has an optiona" tit"e attribute an a type attribute set e)ua" to Atext-cssA! where the css stan s for casca ing sty"e sheet. >ote the use of the ot notation to assign a class name to the style rule%s& estab"ishe for the e"ement! an the use of the name "ater #c"ass@AbrightA$ with the c"ass attribute in the *bo y+ tag. .ach sty"e ru"e is terminate with a semico"on. 9o! for examp"e! the "ine '(ont: !)pt serif* color: b"ue*+ &n summary! sty"e specifications fo""ow a hierarchy% style element other HTML elements[.class name] properties value%s& where the c"ass name #without the brackets$ is optiona". C99s can be use to mo ify the appearance of any HTML e"ement that enc"oses content. 3o""owing are some properties that can be specifie in sty"e sheets.

    Background properties
    backgroun -co"or % When use in a bo y e"ement! backgroun -co"or sets the backgroun co"or for an entire ocument. &t can a"so be use to high"ight a paragraph! for examp"e! when use with a p e"ement. backgroun -image This property is use with a U?L to se"ect an image fi"e #gif or Bpeg$ that wi"" appear as a backgroun . Typica""y! this is use with a bo y e"ement! but it can a"so be use with other e"ements! such as p. 3or other backgroun properties that can be use to contro" the appearance of a backgroun image! consu"t an HTML reference text. backgroun This a""ows you to set a"" backgroun properties in a sing"e ru"e.

    Font properties
    font-fami"y % 3ont support is not comp"ete"y stan ar i6e . Howe'er! browsers that support sty"e sheets shou" support at "east the generic font fami"ies . .xamp"e% font-fami"y% (ria"! sans-serifK

    font-si6e This property a""ows you to set the actua" or re"ati'e si6e of text. Mou can use re"ati'e 'a"ues! such as "arge! sma""! "arger! sma""er #re"ati'e to a efau"t si6e$K a percentage! such as 1HHN of the efau"t si6eK or an actua" point si6e such as 2=pt. .xamp"e% font-si6e% 1OptK font-sty"e This property a""ows you to specify norma"! ita"ic! or ob"i)ue fonts. .xamp"e% font-sty"e% ita"icK font-weight This property a""ows you to se"ect the font weight. Mou can use 'a"ues in the range from 2HH #extra "ight$ to PHH #extra bo" $! or wor s% extra-"ight! "ight! emi-"ight! me ium! emi-bo" ! bo" ! an extra-bo" . 9ome choices may not ha'e a noticeab"e effect on some fonts in some browsers. .xamp"e% font-weight% PHHK font This property a""ows you to set a"" font properties within one sty"e ru"e. .xamp"e% font% ita"ic 2Gpt He"'etica! sans-serifK

    Text properties

    :f the many text properties! Bust three that may be usefu" are shown be"ow. text-a"ign This is use in b"ock e"ements such as p. &t is simi"ar in effect to the HTML a"ign attribute. The choices are "eft! right! center! an Bustify. With "arge font si6es! Bustify may pro uce o -"ooking resu"ts. .xamp"e% text-a"ign% centerK text-in ent ?eca"" that paragraphs create with the p e"ement o not in ent the first wor in the paragraph. This property a""ows you to set in entation using type setting notation or actua" measurements. & suggest the use of actua" .ng"ish or metric measurements/inches #in$! mi""imeters #mm$! or centimeters #cm$. .xamp"e% text-in ent% H.QinK white-space The 'a"ue of this property is that you can pre'ent spaces from being ignore . Mou can use the HTML pre e"ement by itse"f! instea ! but this causes the text to be isp"aye in a monospace font such as Courier. The examp"e gi'en here retains white space regar "ess of the typeface being use . .xamp"e% white-space% pre Mou can create sty"e sheets as separate fi"es an then uti"i6e them whene'er you wish to use a particu"ar sty"e on a Web page. This makes it easy to impose a uniform appearance on mu"tip"e Web pages.

    Document 1.1 #bo y.css$

    bo y Jbackgroun % si"'erK co"or% whiteK font%1Opt TimesL h2 Jco"or% re K font%2Gpt &mpactKL h1 Jco"or% b"ueK font%2=pt CourierKL

    Document 1.Ob #style2.htm$


    *htm"+ *hea + *tit"e+9ty"e 9heet .xamp"e*-tit"e+ *"ink href@Abo y.cssA re"@Asty"esheetA type@Atext-cssA -+ *-hea + *bo y+ *h2+Hea ing 2*-h2+ *h1+Hea ing 1*-h1+ Here is some text. *-bo y+ *-htm"+ output:

    1.F HTML Tab"es! 3orms! an Lists

    2.3.1 T#e table Element


    (n easy way to gain some contro" is to create a tab"e! using the table e"ement. Then the re"ati'e "ocations of text an graphics can be estab"ishe by entering them into ce""s of the tab"e. Within the start an en tags! <table> </table>! rows an ce""s are efine with the tr #;tab"e row<$ an td #;tab"e ata<$ e"ements! which are neste as fo""ows% <table> <tr> <td> </td> {as many columns as you need} </tr> {as many rows as you need} </table> The <tr> </tr> tags efine the rows an the <td> </td> tags efine ce""s in co"umns within those rows. Mou can efine as many rows an co"umns as you nee .

    Irogram%

    *htm"+ *hea + *tit"e+?a on Tab"e*-tit"e+ *-hea + *bo y+ *h2+?esu"ts of ra on testing*-h2+ *tab"e bor er@AFA+ *tr bgco"or@Asi"'erA+ *t +Location*-t +*t +Ra"ue! pCi-L*-t + *t +Comments*-t +*-tr+ *tr+ *t +D5Ss house! basement*-t +*t +2Q.=*-t + *t bgco"or@ApinkA+(ction shou" be taken4*-t +*-tr+ *tr+ *t +&DSs house! 1n f"oor be room*-t +*t +F.C*-t + *t bgco"or@Aye""owA+9hou" be reteste .*-t +*-tr+ *tr+ *t + 30Ss house! 2st f"oor "i'ing room*-t +*t + H.P*-t + *t bgco"or@A"ight greenA+>o action re)uire .*-t +*-tr+ *tr+ *t + M5Ss house! 1n f"oor be room*-t +*t +1.P*-t + *t bgco"or@A"ight greenA+>o action re)uire .*-t +*-tr+ *-tab"e+ *-bo y+ *-htm"+

    Output:

    ( summary of some

    tab"ere"ate e"ements an their attributes is gi'en be"ow. ("" the e"ements except tab"e itse"f shou" appear on"y insi e a tab"e e"ement. *caption+ , *-caption+ Attributes% a"ign Disp"ays the specifie text as a caption for a tab"e. .ar"ier 'ersions of HTML support on"y AtopA #the efau"t 'a"ue$ or AbottomA for the 'a"ue of the a"ign attribute. 9ome browsers may a""ow AcenterA as a 'a"ue for a"ign! which is worth noting because this might often be the a"ignment of choice for a tab"e caption. *tab"e+ , *-tab"e+ Attributes% bor er! bor erco"or! ce""pa ing! ce""spacing! wi th Contains tab"e-re"ate an other e"ements. *t + , *-t + Attributes% a"ign! bgco"or! co"span! nowrap! rowspan! wi th Does not contain other tab"e-re"ate e"ements.

    *th+ , *-th+

    Attributes% a"ign! bgco"or! co"span! nowrap! rowspan! 'a"ign! wi th The th e"ement works Bust "ike the t e"ement except it automatica""y isp"ays text in bo" font! ser'ing as hea ings for tab"e co"umns. &t oes not contain other e"ements. *tr+ , *-tr+ Attributes% a"ign! bgco"or! 'a"ign Contains t or th e"ements.

    Description o attributes:
    a"ign @ A,A Values% A"eftA! ArightA! or AcenterA ("igns text hori6onta""y. When a"ign is specifie in a tr e"ement! its 'a"ue wi"" be o'erri en if it is specifie again within a t e"ement in that row. bgco"or @ A,A Values% co"or names or hexa ecima" 'a"ues AT!!""BBA 9ets the backgroun co"or for a ce"" or row. When bgco"or is specifie in a tr e"ement! its 'a"ue wi"" be o'erri en if it is specifie again within a t e"ement in that row. bor er @ A,A Values% an integer number of pixe"s ( s a bor er to the tab"e an its ce""s. ( 'a"ue is optiona". &f it is inc"u e ! an a itiona" co"ore bor er is a e aroun the outer boun ary of the tab"e. bor erco"or @ A,A Values% co"or names or hexa ecima" 'a"ues AT!!""BBA 9ets the co"or of a tab"e bor er.

    ce""pa

    ing @ A,A

    Values% an integer number of pixe"s Defines 'ertica" spacing between ce""s in a tab"e. ce""spacing @ A,A Values% an integer number of pixe"s Defines hori6onta" spacing between ce""s in a tab"e. co"span @ A,A Values% an integer Defines how many co"umns a ce"" wi"" span. nowrap Ire'ents text from being automatica""y wrappe within a ce"". &t oes not ha'e a 'a"ue. rowspan @ A,A Values% an integer Defines how many rows a ce"" wi"" span. 'a"ign @ A,A Values% AtopA! Ami "eA! or AbottomA ("igns text 'ertica""y. When 'a"ign is specifie in a tr e"ement! its 'a"ue wi"" be o'erri en if it is specifie again within a t e"ement in that row. wi th @ A,A Values% a number or a percentage 9pecifies tab"e or ce"" wi th in pixe"s #wi th@A2OHA$ or as a percentage of the win ow or tab"e hea er wi th #wi th@AGHNA$.

    1.F.1 The form $lement

    :ne of the most important app"ications of HTML ocuments is to pro'i e the Web page e)ui'a"ent of a paper form. &n some cases! a form Bust he"ps to organi6e user input to a Web page. :ften! an on"ine form inc"u es pro'isions for sen ing a comp"ete form back to the author of the Web page. HTML forms are efine by the form e"ement! using start an en tags% *form+ , *-form+ tags. The attributes of the form e"ement are% action @ A,A Value% a programmer-supp"ie U?L that i entifies a processing script or mai"to% fo""owe by an e-mai" a ress. 3or examp"e! action@Ayahoomai".comA. enctype@A,A Value% here! use on"y enctype@Atext-p"ainA. &n combination with metho @ApostA! this wi"" transmit form ata with the name of the form fie" fo""owe by an ;@< sign an the 'a"ue of the fie" ! which makes it easy to interpret the contents of a form that has been submitte . metho @ A,A Values% AgetA! ApostA The metho attribute contro"s how ata from a form is sent to the U?L or e-mai" a ress i entifie in the action attribute. Here use the ApostA 'a"ue because it is the easiest way to transmit form ata in an easi"y rea ab"e format. name @ A,A Value% a programmer-se"ecte name that is use to i entify the form. The name attribute is nee e on"y if a ocument contains more than one form

    3orms contain one or more input (ields i entifie by *input -+ Tags .The most important attribute of input is its type. There are se'era" fie" types that ha'e we""- efine beha'iors in HTML .The possib"e 'a"ues are "iste in Tab"e . efau"t

    3o""owing is a "ist of attributes for the input e"ement% checke Value% none (pp"ies to type@Ara ioA an type@AcheckboxA on"y. max"ength@A,A Value% Maximum number of characters that can be entere in the fie" . This 'a"ue can be greater than the 'a"ue gi'en for the si6e attribute. name@A,A Value% ( programmer-supp"ie name for the fie" . rea on"y Value% none Ire'ents fie" 'a"ues in type@AtextA or text@Apasswor A from being change . si6e@A,A Value% wi th of the isp"aye fie" ! in characters. 'a"ue@A,A Value% a programmer-supp"ie attribute is a"so specifie . efau"t 'a"ue that wi"" be isp"aye in the fie" . This 'a"ue can be o'erri en by user input un"ess the rea on"y

    *HTML+ *5:DM bgco"or@ApinkA+ >ame *input type@AtextA name @At2A+*br+*br+ ( ress*Textarea rows@1 co"s@2Q+*-Textarea+*br+*br+ Contact >o.*input type@AtextA name @At1A+*br+ *br+ Dt of 5irth*br+ Date*se"ect+ *option+2*-option+ *option+1*-option+ ,,,,, *option+F2*-option+ *-se"ect+ Month*se"ect+ *option+0an*-option+ *option+3eb*-option+ ,,,,,,,... *option+Dec*-option+ *-se"ect+ Mear*se"ect+ *option+2PGH*-option+ *option+2PG2*-option+ ,,,,,, *option+1HHH*-option+ *-se"ect+ *br+*br+ Uen er *input type@Ara ioA name @Ar2A+Ma"e *input type@Ara ioA name @Ar2A+3ema"e *br+*br+

    Hobbies*input type@AcheckboxA name @Ach2A+?ea ing*br+

    *input type@AcheckboxA name @Ach2A+9wimming*br+ *input type@AcheckboxA name @Ach2A+9inging*br+*br+ *input type@AsubmitA name @A9ubmitA 'a"ue@A9ubmitA+ *input type@AresetA name @A?esetA 'a"ue@A?esetA+ *-3orm+ *-bo y+ *-htm"+ Output:

    2.3.3 Creating Pull-Down Lists


    ( common feature on Web pages that use forms is a pu""- own "ist! which pro'i es another way to "imit the input choices a user can make on a form. The imp"ementation escribe here is simi"ar to a group of ra io buttons in the sense that on"y one item can be se"ecte from a "ist. 3or examp"e! creating a pu""- own "ist of the months of the year e"iminates the nee for a user to type #an perhaps to mistype$ the name of a month. Document 1.F.F #se"ect.htm$ *htm"+ *hea + *tit"e+Iu""-Down List*-tit"e+ *-hea + *bo y+ 9e"ect a month from this menu% *se"ect name@AtestingA+ *option 'a"ue@A2A se"ecte +0anuary*-option+ *option 'a"ue@A1A+3ebruary*-option+ *option 'a"ue@AFA+March*-option+ *option 'a"ue@AOA+(pri"*-option+ *option 'a"ue@AQA+May*-option+ *option 'a"ue@A=A+0une*-option+ *option 'a"ue@ACA+0u"y*-option+ *option 'a"ue@AGA+(ugust*-option+ *option 'a"ue@APA+9eptember*-option+ *option 'a"ue@A2HA+:ctober*-option+ *option 'a"ue@A22A+>o'ember*-option+ *option 'a"ue@A21A+December*-option+ *-se"ect+ *-bo y+ *-htm"+

    Output:

    1.O

    Mu"time ia 9ystem

    1.O.2 Graphics
    You place graphics onto a Web page for the same reasons you include pictures in a brochure or magazineto help the readers gain a better understanding of hat you are trying to say. !e"t alone cannot con#ey ith a fe ell$chosen images. hat you are ell$ ritten% you must rely on as much information as te"t combined When you use descripti#e te"t% ho e#er describing. 'on#ersely%

    the reader&s imagination to construct an image of emphasis% your readers can see e"actly

    hen you use te"t and add pictures for hat you ha#e in mind.

    ,nderstanding #mage -ile -ormats !he three most common file formats for Web graphics are ()*G +pronounced ,-$peg./ it uses a lossy compression scheme de#eloped by (oint )hotographic *"perts Group0% Graphic 1nterchange 2ormat +G120% and )ortable 3et or4 Graphic +)3G0. 5oth G12 and )3G file formats use a lossless compression scheme to reduce file size. !he smaller the graphics file&s size% the faster the Web bro ser can do nload and display the picture on the Web page. !herefore% compressing graphics files reduces the long ait times normally associated ith Web pages that ha#e large hereas the G12 format images. 6f the three formats% the ()*G format is used primarily for photographs% is most often used for clip art% illustrations% and dra ings. Placing Web Graphics into a Web Page I"acing images into a Web page re)uires a graphics image fi"e an the HTML *img+ tag. 3or examp"e! the fo""owing *img+ tag instructs the Web browser to "oa an graphics fi"e name image.Bpg% *img src@Aimage.BpgA+ isp"ay a

    Within the *img+ tag! the src attribute te""s the Web browser the source of the graphics image #that is! the name of the fi"e$ the browser is to isp"ay. To insert pictures onto a Web page! create an *img+ tag for each picture between the start an en bo y tags #*bo y+*-bo y+$. The Web browser wi"" isp"ay images on the Web page in the or er in which the *img+ tags appear with the HTML ocument. 3or examp"e! the fo""owing co e te""s the Web browser to isp"ay two graphics images% *htm"+ *hea +*tit"e+.xamp"e of three image tags*-tit"e+*-hea + *bo y+ *img src@Aimage2.BpgA -+ *img src@Aimage1.BpgA -+ *-bo y+ *-htm"+ "peci(ying #mage .imensions /ithin an #mage Tag Mou "earne that the *img+ tag instructs the Web browser to "oa an the src attribute instructs the Web browser to retrie'e an isp"ay a graphics

    fi"e on the Web page. 3or examp"e! the fo""owing HTML shows an *img+ tag in which isp"ay the picture store in the fi"e "an scape.Bpg! using a wi th of 1HH pixe"s an a height of GH pixe"s% *img src@A"an scape.BpgA wi th@A1HHA height@AGHA -+

    1.O.1 (nimation! 9oun ! an Ri eo


    0rowsing the &nternet to ay without encountering Web pages that contain some form of animation! soun ! 'i eo! or a combination of a"" three is a"most impossib"e. 3rom simp"e animate U&3s! to 3"ash mo'ies! an e'en fu""-screen interacti'e images with soun an motion! a ing animations toWeb pages has the potentia" to en"i'en your esigns. Unfortunate"y! the o'eruse of animation an soun can be annoying an a istraction to your 'isitors. Two opposing goa"s ri'e a 'ances on the &nternet% V Web authors trying to p"ease 'isitors want to transmit increasing"y e"aborate types of content #soun ! animation! an 'i eo$ o'er the Web. V To reach Web site 'isitors! the fi"e si6e for content must be sma"" enough to "oa )uick"y! or the 'isitors grow impatient an mo'e on to other sites. ,nderstanding 1nimation2s 3ole in /eb .esign The primary ro"e of Web animation is to raw the attention of 'isitors to your Web site. Howe'er! Web animation can a"so entertain an inform. Moung chi" ren #especia""y those that are Bust beginning to rea $ "o'e mo'ement an ten to focus on it. Therefore! you can use animation to grab an focus a young chi" 7s attention for an exten e perio on a concept you are trying to con'ey. &n a ition! a Web page can use animation an soun to exp"ain the steps in a comp"icate proce ure or process.

    Working with GIF Animation Uraphic &nterchange 3ormat #U&3$ animation is the most popu"ar form of animation on the &nternet to ay. 9e'era" reasons account for its popu"arity% V "#Fs are easy to create Mou can create U&3 animation from a score of image- an Web esignEapp"ications! such as Macrome ia 3ireworks an ( obe &mage?ea y. to own"oa shareware programs that create animate U&3 fi"es from existing images.

    V "#Fs re$uire no special browser so tware ("most a"" Web browsers p"ay U&3 animations! which means that the browser re)uires no specia" software or p"ug-ins. V "#Fs are a standard %eb ile ormat ("" browsers that support graphics images wi"" isp"ay U&3 fi"es. &n rare cases where the browser oes not support U&3 animation! the browser wi"" sti"" isp"ay a static 'ersion of the animation #typica""y the first frame in the animation se)uence within the U&3 fi"e$. V "#Fs use streaming When a Web browser begins own"oa ing the U&3 animation! the browser isp"ays the frames as it recei'es them. The 'isitor is not force to wait unti" the browser finishes own"oa ing the fi"e before seeing the animation. /or4ing 5ith Macromedia -lash 3"ash is a mu"time ia e'e"opment too" create by the Macrome ia Corporation that "ets you create fu""-screen animations! incorporating soun an interacti'ity using 'ery sma"" fi"e si6es. 3"ash keeps the fi"e si6es sma"" through the use of 'ector images. Rector images are sma""er than tra itiona" bitmap images because they use math to escribe the graphics instea of pixe"s. When you sa'e a tra itiona" bitmap image #U&3 or 0I.U$! the fi"e has to recor an store information within the graphics fi"e that escribes each an e'ery pixe"! which creates "arge fi"es.

    Using 3"ash o'er tra itiona" U&3 animation offers se'era" a 'antages% V Flas& uses small image ile si'es 9ma""er fi"e si6es for 'ector images trans"ates into fast-"oa ing animations. V Flas& en(oys cross)plat orm browser support Whether you use Microsoft .xp"orer or >etscape >a'igator! or the Macintosh or Win ows p"atform! oes not matter. The p"ug-in that runs 3"ash animation is free an is a'ai"ab"e for most Web browsers. V Flas& lets you resi'e images during animation Rector images resi6e with ease! creating images that "ook great at any si6e you eci e to use.

    V Flas& uses streaming tec&nology When a 'isitor own"oa s a 3"ash animation! they o not ha'e to wait for the entire fi"e to own"oa . The animation wi"" start as soon as the 'isitor7s Web browser recei'es enough of the 3"ash ata to begin the animation. V Flas& is interacti*e 3"ash "ets you create interacti'e menus an na'igation bars without prior experience in programming "anguages. V Flas& incorporates +a*a,cript 3"ash is fu""y compatib"e with 0a'a9cript. 5ecause a"" browsers uni'ersa""y accept the 0a'a9cript "anguage! you can create e'en more comp"icate interaction between your page an its 'isitors. V Flas& incorporates sound 3"ash works seam"ess"y with soun fi"es! "etting you create mo'ement an au io in the same animation. ,nderstanding /hen and /hen 6ot to ,se 1nimation (s pre'ious"y iscusse ! animation attracts attention! it entertains! an it informs. Howe'er! as won erfu" as animation is! there are concerns to using animation on a Web page% V -se animation to attract attention. but don/t o*erdo it (nimation is an attention rabber! but too much animation can be a prob"em. &f you create animation to attract your 'isitor7s attention! refrain from using more than one! or possib"y two animations on each page.

    V -se animation to en&ance t&e message o t&e %eb page. but make sure t&at it adds *alue (ttempt to use animation that re"ates to the other static information on the page. 3or examp"e! is that rotating "ogo in the upper-"eft corner of the browser win ow contributing to the o'era"" esign an message of the page! or i you p"ace it there simp"y to pro'e you cou" o itW istracts V Do not use animation w&en it becomes distracting ('oi animation on Web pages that contain "arge bo ies of text. (nimation impacts the 'isitor7s concentration an 'isitor from focusing. V Do not use animation or animation/s sake 5ecause animation fi"es ha'e "arger fi"e si6es! an conse)uent"y take "onger for the Web browser to own"oa an animation on"y when it contributes to the page. /or4ing 5ith "ound on the #nternet &n competition with ?ea"(u io is (pp"e7s XuickTime! which functions in a simi"ar way to ?ea"(u io. Many Web sites exp"oit both the ?ea"(u io an XuickTime formats an most users ha'e pre'ious"y own"oa e the correspon ing p"ug-ins. Here are some gui e"ines for using soun on the &nternet% V Use soun to communicate i eas through the use of ia"og an narration. V Use soun to impro'e a Web site7s na'igation. 3or examp"e! use a c"icking soun in conBunction with a ro""o'er button. V Use backgroun music #where appropriate$ to set the moo for the Web page. 3or examp"e! to set the moo on a Web site ea"ing with "ife in the ocean! p"ay the soun of surf gent"y ro""ing against the shore"ine. V Use soun to generate on"ine re'enue by the sa"e of au io an music c"ips. 3or examp"e! "et 'isitors p"ay a portion of a new song! before purchasing. ( ing 9oun to a Web Iage % isp"ay! use from the rea ing of the text. (nimation attracts attentionK too much animation keeps the

    To a

    a simp"e backgroun soun to a Web page! you can p"ace the *bgsoun + tag

    within the page7s hea er section! or you can use the *embe + tag within the Web page bo y section as shown here% *hea + *bgsoun src@Amusic.auA -+ *-hea + *bo y+ *embe src@Amusic.auA autostart@AtrueA+*-embe + *-bo y+

    These tags represent the minima" way of inserting a soun fi"e into an HTML-base Web page. 5ecause the *embe + tag wi"" p"ay in both >etscape >a'igator an &nternet .xp"orer! you may want to use it to p"ace the soun fi"e within your Web page. &n the pre'ious examp"es! the fi"e name music.au wou" p"ay once an not repeat. To instruct the soun to continua""y repeat! a the fo""owing attributes to the *bgsoun + an *embe + tags #&idden! loop! autostart$ as shown here% *hea + *bgsoun src@Amusic.auA hi en@AtrueA "oop@AtrueA autostart@AtrueA-+ *-hea + *embe src@Amusic.auA hi en@AtrueA "oop@AtrueA autostart@AtrueA+*-embe + 3or anything more than a simp"e p"ayback of a soun fi"e! 'isitors to your site wi"" nee a p"ug-inE base so"ution such as 3"ash! XuickTime! or ?ea"(u io . The HTML specification states that the preferre way to embe soun in a Web page is through the use of the *obBect+ tag. Howe'er! unti" a"" maBor browsers support the *obBect+ tag! you may simp"y want to continue to use the *embe + tag.

    S-ar putea să vă placă și