01076541 Web Technology HTML & xhtml
Introducing HTML and xhtml HTML standard is overseen by W3C Current major version is HTML 4.01 (release Dec. 1999) Added stricter rules to HTML 4.01 in Jan. 2000 creating what is known as xhtml xhtml = Extensible Hypertext Markup Language
Hypertext Markup Language Tags, g, Elements and Attributes Tags = tokens enclosed by angle brackets - < > Elements define the structure of document and lay the foundation for its presentation and manipulation, contained within one or two tags Attributes = Tag modifiers compose of 2 parts: name and value Mostly case insensitive and not necessary to quote the value part of the attributes
Element <a href= http://www.ce.kmitl.ac.th >Computer Engineering</a> Attribute Closing tag Opening tag
Relationship between elements are described in term from a family tree Parent Child <html> <head> <title>page s title</title> </head> <body> <h1>headline 1</h1> <p>paragraph of text</p> </body> </html> Grandchild
HTML Documents structure A valid document contains the following components, in order: 1) The document type declaration 2) The document s html element 3) The head element inside of the html element 4) The title element and (optional) link, script, base, meta element inside of the head element 5) Within the html element after the head element must be body element 6) Inside of body element, there must be at least 1 block element
Document Type Declaration (DTD) Defines the legal building block of HTML document Should be the very first thing in HTML document Gives information about version of HTML using in the page 3 types of DTD for HTML HTML 4.01 Strict No presentational or deprecated elements (e.g. font) Framesets are not allowed HTML 4.01 Transitional Framesets are not allowed HTML 4.01 Frameset The same as HTML 4.01 Transitional Framesets are allowed
DTD Declaration Syntax HTML 4.01 Strict <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/tr/html4/strict.dtd > HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/tr/html4/loose.dtd > HTML 4.01 Frameset // // 4 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Frameset//EN http://www.w3.org/tr/html4/frameset.dtd >
Keyword Root element Public Type DTD <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN 01//EN http://www.w3.org/tr/html4/strict.dtd > URI of the DTD Formal Public Identifier
Link to other web page Link and Navigation Tags <a href= http://www.xxx.yyy >Click here</a> Link to E-mail Address <a href= mailto:admin@kmitl.ac.th >mail to Admin</a> Link to URL types Absolute URL Relative URL
www.test.ac.th t th Absolute URL student t grade.html teacher score.html sem1 test.html records year2001 sem2 test.html index.html Location: http://www.test.ac.th or http://www.test.ac.th/index.html http://www.test.ac.th/student/grade.html http://www.test.ac.th/records/year2001/sem1/test.html
www.test.ac.th student grade.html teacher score.html sem1 test.html records year2001 sem2 test.html index.html <a href= http://www.test.ac.th/student/grade.html >Grade</a> <a href= http://www.test.ac.th/teacher/score.html >Score</a> <a href= http://www.test.ac.th/records/year2001/sem1/test.html > 2001/1</a>
www.test.ac.th student Relative URL grade.html teacher score.html sem1 test.html records year2001 sem2 test.html index.html index.html link to grade.html <a href= student/grade.html >grade.html</a>
www.test.ac.th student grade.html teacher score.html sem1 test.html records year2001 sem2 test.html index.html test.html in sem1 link to score.html <a href="../../../teacher/score.html">link to score</a> <a href="/teacher/score.html">link to score</a>
Destination Anchor Destination anchor <a id= top >TOP</a> Link to destination anchor <a href= #top >TOP</a>
Charset Other Attributes of <a> <a href= http://www.test.ac.th/ charset= ISO-8859-11 >go to test</a> hreflang <a href= http://www http://www.test.ac.th/ test th/ hreflang= JA >go to test</a> Target <a href= http://www.test.ac.th/ target= _blank >go to test</a> Tabindex <a href= http://www.test.ac.th/ tabindex= 1 >go to test</a>
Image, Audio, Video Adding image to the page <img src= image.png alt= logo > Specify the size of image <img src= image.png alt= logo height= 20 width= 30 > Align <img src= image.png alt= logo align= left > Border <img src= image.png alt= logo border= 5 > Space <img src= image.png alt= logo hspace= 15 vspace= 15 >
Image as links <a href= http://www.test.ac.th/ > </a> <img src= image.png alt= logo > Image Maps
Image as links Using Image as Links <a href= http://www.test.ac.th/ > test th/ > </a> <img src= image.png alt= logo > Image Maps Client-side image maps Based on element <map> and <area> inside an <img> element Using <map> element inside the <object> element Server-side image maps
Client-side Image Maps using <img> < img src= a.gif alt= A Map width= 500 height= 300 usemap= #gallery > < map name= gallery > < area shape= circle coords= 154,150,59 href= cafe.html alt= Cafe > < area shape= poly coords= 272,79,351,79,351,15,486,15,486,218,272,218,292, 166,292,136x,270,76 href= courtyard.html alt= Courtyard > < area shape= rect coords= 325,224,488,286 href= kitchens.html alt= Kitchens / > < /map>
Client-side Image Maps using <object> < object data= cafe_map.gif gif type= image/gif alt= Cafe Map width= 500 height= 300 border= 0 usemap= #cafe > < map name= cafe > < a shape= circle coords= 154,150,59 href= cafe.html > Cafe </a > <a shape= poly coords= 272,79,351,79,351,15,486,15,486,218,272, 218,292,166,292,136,270,76 href= courtyard.html > Courtyard </a> < a shape= rect coords= 325,224,488,286 href= kitchens.html > Kitchens < /a > < /map >
Server-Side Image Maps < a href=../map.aspx > < img src=../images/states.gif alt= map of US States ismap= ismap > < /a > [Click mouse at (50,75)] http://www.example.org/map.aspx?50,75
Adding Flash Object to Web Page < object width= 425 height= 344 > < param name= movie value= http://www.youtube.com //dmh0bh /v/dmh0bheirng & hl=en & fs=1 > < /param > < param name= allowfullscreen value= true > < /param > <param name= allowscriptaccess value= always > </param> < embed src= http://www.youtube.com/v/dmh0bheirng & hl=en & fs=1 type= application/x-shockwave-flash allowscriptaccess= always always allowfullscreen= true width= 425 height= 344 > < /embed > < /bj /object >
Adding Audio to Web Page < object width= 300 height= 42 type= audio/mpeg data= audio/music.mp3 > < param name= src value= audio/music.mp3 mp3 / > < param name= autoplay value= true / > < param name= autostart autostart value= 1 / > < embed src= audio/music.mp3 width= 300 height= 42 > < /embed > < /object >
Tables Tags <table> <td> : table data <tr> : table row <th> : table head Attributes align (deprecated): left right center bgcolor (deprecated): set background color of table/cell border (deprecated): thickness of cell border, 0 = no border cellpadding (deprecated): create a gap between cell edge and content cellspacing (deprecated): d) create a space between each border of cell
dir : direction of text: ltr or rtl frame (deprecated) control how to render table s frame (has priority higher than border) void = no border above = top only below = bottom only hsides = both top and bottom lhs = left side only rhs = right side only vsides = both left and right side box/border = all side frame may gives different results on different browser
rules (deprecated): control how to display inner border none = no inner border groups = displays inner borders between groups (groups are created by <thead>, <tbody>, <tfoot> and <colgroup>) rows = displays horizontal line between each row cols = displays vertical line between each row all = displays both horizontal and vertical line Gives different results on different browser. summary: provides a summary of table s purpose to non-visual browser d h (d d) f h d h f h bl ll ( l width (deprecated): specify the width of the table/cell (in pixel or percent)
valign (deprecated only <tr>,<td>): vertical alignment, its values can be top, middle, bottom, baseline abbr: provides summary of the cell s content colspan: uses when a cell should span across more than one column (<td>) height: specify the height of cell in pixel or percentage of available space (<td>) rowspan (<td>): specify the number of row that a cell will span cross Table can be nested
< table > < tr > < th > < /th > < th > Monday < /th > < th > Tuesday < /th > < th > Wednesday < /th > < th > Thursday < /th > < th > Friday < /th > < th > Saturday < /th > < th > Sunday < /th > < /tr > < tr> < th > Breakfast < /th >
< tr > < th > Breakfast < /th > < td > 7:00am - 10:00am < /td > < td > 7:00am - 10:00am 00 < /td > < td > 7:00am - 10:00am < /td > < td > 7:00am - 10:00am < /td > < td > 7:00am - 11:00am < /td > < td > 8:00am - 11:30pm < /td > < td > 8:00am - 11:30pm < /td > < /tr > < tr > < th > Lunch < /th > < td > 11:30am - 2:30pm < /td > < td > 11 30am 2 30pm < /td >
< tr > < th > Lunch < /th > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 2:30pm < /td > < td > 11:30am -2:30pm < /td > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 2:30pm < /td > < td > 11:30am - 3:30pm < /td > < td > 11:30am - 3:30pm < /td > < /tr > < /table >
< table border= 1 > < caption > Spanning columns using the colspan attribute < /caption > < tr > < td bgcolor= #efefef width= 100 height= 100 > & nbsp; < /td > < td bgcolor= #999999 width= 100 height= 100 > & nbsp; < /td > < td bgcolor= #000000 width= 100 height= 100 > & nbsp; < /td > < /tr >
< tr > < td bgcolor= #efefef width= 100 height= 100 > & nbsp; < /td > < td colspan= 2 bgcolor= #999999 > & nbsp; < /td > < /tr > < tr > < td colspan= 3 bgcolor= #efefef height= 100 > & nbsp; < /td > < /tr > < /table >
< table border= 1 > < caption > Spanning rows using the colspan attribute < /caption > < tr > < td bgcolor= #efefef width= 100 height= 100 > & nbsp; < /td > < td bgcolor= #999999 width= 100 height= 100 > & nbsp; < /td > < td rowspan= 3 bgcolor= #000000 width= 100 height= 100 > & nbsp; < /td > < /tr > < tr > < td bgcolor= #efefef height= 100 > & nbsp; < /td > < td rowspan= 2 bgcolor= #999999 > & nbsp; < /td > < /tr > < tr > < td bgcolor= #efefef height= 100 > & nbsp; < /td > < /tr > < /table >
< table border= 1 > < caption > Spanning rows using the colspan attribute < /caption > < tr > < td bgcolor= #efefef width= 100 height= 100 > & nbsp; < /td > < td bgcolor= #999999 width= 100 height= 100 > & nbsp; < /td > < td rowspan= 3 bgcolor= #000000 width= 100 height= 100 > & nbsp; < /td > < /tr> < tr > < td bgcolor= #efefef height= 100 > & nbsp; < /td > < td rowspan= 2 bgcolor= #999999 > & nbsp; < /td > < /tr > < tr > < td bgcolor= #efefef height= 100 > & nbsp; < /td > < /tr > < /table >
Form <form> element carry at least 2 attributes action = usually specifies program that will receive information method = specifies HTTP post or HTTP get to be used to carry information to the server Others attributes: id = uniquely identify <form> element within a page, value must be unique to the document name (deprecated) = the same as id onsubmit = fire submit event, uses in conjunction with script, its value is a script
onreset = fire clear form event, its value is a script enctype = uses with HTTP post method to tell browser which kind of encoding to be used application/x-www-form-urlencoded (default) = general data encoding multipart/form-data t/f t = data encoding in case of uploading image or file accept-charset = specifies character encoding used target = specifies which frame the form s result will be displayed
Text input Buttons Form Controls Checkboxes and radio buttons Select boxes File select boxes Hidden control
Form
<form action= http://www.example.org/search.aspx p p method= get > < h3 > Search the site < /h3 > < input type= text name= txtsearchitem > < input type= submit value= Search > < /form >
< form action= http://www.example.org/feedback.aspx method= post > Please tell us what you think of the site and then click submit: < br > < textarea name= txtfeedback rows= 20 cols= 50 > Enter your feedback here. < /textarea t > < br / > < input type= submit value= Submit / > < /form >
< form action= http://www.example.com/login.aspx method= post > Username: < input type= text name= txtusername value= size= 20 maxlength= 20 > < br > Password: < input type= password name= pwdpassword value= size= 20 maxlength= 20 > < input type= submit value= Submit > < /form >
< input type= submit name= btnvotered value= Vote for reds > < input type= submit name= btnvoteblue value= Vote for blues > < br > < br > < input type= reset value= Clear form > < br > < br > < input type= button value= calculate onclick= calculate() >
< input type= image src= submit.jpg itj alt= Submit name= btnimage >
< button type= submit > Submit < /button > < br > < br > < button type= reset ><b> Clear this form,</b> I want to start again </button> < br > < br > < button type= button > < img src= submit.gif alt= submit > < /button >
<form action= http://www.example.com/cv.aspx method= get name= frmcv > Which of the following skills do you possess? Select all that apply. < input type= checkbox name= chkskills value= xhtml > XHTML < br > < input type= checkbox name= chkskills value= CSS > CSS < br > < input type= checkbox name= chkskills value= JavaScript > JavaScript < br > < input type= checkbox name= chkskills value= aspnet > ASP.Net < br > < input type= checkbox name= chkskills value= php > PHP < /form >
< input type= checkbox name= chkacceptterms checked= checked > In the absence of a value attribute, the value is on
<form action= http://www.ex.com/flights.aspx name= frmflightbooking method= get > Please select which class of travel you wish to fly: < br > < input type= radio name= radclass value= First > First class < br > < input type= radio name= radclass value= Business > Business class < br > < input type= radio name= radclass value= Economy > Economy class < br > < /form >
< select name= selcolor > < option selected= selected value= > Select color < /option > < option value= red > Red < /option > < option value= green > Green < /option > < option value= blue > Blue < /option > < /select >
< select size= 4 name= selday > < option value= Mon > Monday < /option > < option value= Tue > Tuesday < /option > < option value= Wed > Wednesday < /option > < option value= Thu > Thursday < /option > < option value= Fri > Friday < /option > < option value= Sat > Saturday < /option > < option value= Sun > Sunday < /option > < /select >
< select name= seldays multiple= multiple > < option value= Mon > Monday < /option > < option value= Tue > Tuesday < /option > < option value= Wed > Wednesday < /option > < option value= Thu > Thursday < /option > < option value= Fri > Friday < /option > < option value= Sat > Saturday < /option > < option value= Sun > Sunday < /option > < /select >
< select name= selinformation > < optgroup label= Hardware > < option value= Desktop > Desktop computers < /option > < option value= Laptop > Laptop computers < /option > < /optgroup > < optgroup label= Software > < option value= OfficeSoftware > Office software < /option > < option value= Games > Games < /option > < /optgroup > < optgroup label= Peripherals > < option value= Monitors > Monitors < /option > < option value= InputDevices > Input Devices < /option > < option value= Storage > Storage < /option > < /optgroup > < optgroup label= Peripherals > < option value= Monitors > Monitors < /option > < option value= InpD > Input Devices < /option > < option value= Storage > Storage < /option > < /optgroup >
< form action= http://www.example.com/imageupload.aspx method= post name= fromimageupload enctype= multipart/form-data > < input type= file name= fileupload accept= image/* > < br > < br > < input type= submit value= Submit > < /form >
< form action= http://www.example.com/vote.aspx method= get name= fromvote > < input type= hidden name= hidpagesentfrom value= home page pg > < input type= submit value= Click if this is your favorite page of our site. > < /form >
< fieldset > < legend > < em > Contact Information < em > < /legend > < label > First name: < input type= text name= txtfname size= 20 >< /label > < br > < label > Last name: < input type= text name= txtlname size= 20 / > < /label >< br > < label > E-mail: < input type= text name= txtemail size= 20 / > < /label >< br > < /fieldset > < fieldset > < legend > < em > Competition Question < /em > < /legend > How tall is the Eiffel Tower in Paris, France? < br > < label > < input type= radio name= radanswer value= 584 >584ft < /label > < br > < label > < input type= radio name= radanswer value= 784 >784ft < /label > < br > < label > < input type= radio name= radanswer value= 984 >984ft < /label > < br > < label > < input type= radio name= radanswer value= 1184 >1184ft < /label > < br > < /fieldset > < fieldset > < legend > < em > Tiebreaker Question < /em > < /legend > < label > In 25 words or less, say why yy you would like to win $10,000: < textarea name= txttiebreaker rows= 10 cols= 40 > < /textarea >< /label >< /fieldset > < fieldset > < legend > < em > Enter competition < /em > < /legend > < input type= submit value= Enter Competition > < /fieldset >
< option disabled= disabled value= > Hardware < /option > d l d l d l <input type= text name= txtto readonly= readonly id= emailto size= 20 value= Example Cafe >
Element readonly disabled < textarea > Yes Yes < input type= text > Yes Yes < input type= checkbox > No Yes < input type= radio > No Yes < input type= submit > No Yes < input type= reset > No Yes < input type= button > No Yes < select > No Yes < option > No Yes < button > No Yes
Attribute readonly disabled Can be modified Will be sent to server Yes, by script Yes Not while disabled Will receive focus Yes No Included in tabbing order Yes No
Frame Frames divide a browser into two or more separate pieces or panes, with each pane containing a separate web page. Key feature is that you can load and reload Key feature is that you can load and reload single panes without having to reload the entire content
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd > < html > < head >< title > Frames example < /title >< /head > < frameset rows= 150, *, 100 > < frame src= top_frame.html > < frame src= main_frame.html > < frame src= bottom_frame.html > < noframes > < body > This site uses a technology called frames. Unfortunately, your browser does not support this technology. Please upgrade your browser and visit us again! < /body > < /noframes > < /frameset > < /html >