cop 3813 intro to internet computing prof. roy levow lecture 2
TRANSCRIPT
![Page 1: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/1.jpg)
COP 3813COP 3813Intro to Internet Intro to Internet
ComputingComputing
Prof. Roy LevowProf. Roy Levow
Lecture 2Lecture 2
![Page 2: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/2.jpg)
XHTMLXHTML
Extensible HyperText Markup Extensible HyperText Markup LanguageLanguage– Used to code Web pagesUsed to code Web pages– SpecifiesSpecifies
ContentContentStructureStructure
– Does not specifyDoes not specifyFormatFormat
![Page 3: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/3.jpg)
VairantsVairants
Three versionsThree versions– Strict: complete compliance with newest Strict: complete compliance with newest
requirementsrequirements– Transitional: allows some old features Transitional: allows some old features
but not framesbut not frames– Frameset: transitional plus framesFrameset: transitional plus frames
![Page 4: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/4.jpg)
Strict XHTMLStrict XHTML
Major differences with HTMLMajor differences with HTML– XHTML elements must be XHTML elements must be properly properly
nestednested – XHTML documents must be XHTML documents must be well-well-
formedformed – Tag names must be in Tag names must be in lowercaselowercase – All XHTML elements must be All XHTML elements must be closedclosed
![Page 5: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/5.jpg)
XHTML StandardXHTML Standard
Standard (recommendation) Standard (recommendation) developed by developed by – World Wide Web ConsortiumWorld Wide Web Consortium– http://www.w3c.orghttp://www.w3c.org– Currently version 1.1Currently version 1.1– Version 2 under reviewVersion 2 under review– Vendors sometimes vary from standardVendors sometimes vary from standard
![Page 6: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/6.jpg)
XHTML FormatXHTML Format
XHTMLXHTML– Plain textPlain text– Free formFree form– ContentContent
TextTextLinksLinks
– TagsTagsSpecify structureSpecify structureBounded by <…>Bounded by <…>
![Page 7: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/7.jpg)
Simple ExampleSimple Example
Simple web pageSimple web page Control information, lines 1-3Control information, lines 1-3 Comments, lines 5-6Comments, lines 5-6
– Start with <!—Start with <!—– End End
Structure tagsStructure tags One line of textOne line of text
– examples\ch04\main.htmlexamples\ch04\main.html
![Page 8: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/8.jpg)
XHTML TagsXHTML Tags
Specify content characteristicsSpecify content characteristics Generally pairedGenerally paired
– Bound a regionBound a region– Start with <xx>Start with <xx>– End with </xx>End with </xx>– If tag is self-contained, use <xx />If tag is self-contained, use <xx />
![Page 9: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/9.jpg)
W3C Validation ServiceW3C Validation Service
Validate structure of a documentValidate structure of a document– http://validator.w3.orghttp://validator.w3.org– Can specify a Can specify a
url to validateurl to validateUpload a file to validateUpload a file to validate
![Page 10: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/10.jpg)
Basic ComponentsBasic Components
HeadersHeaders LinksLinks ImagesImages Special characters and line breaksSpecial characters and line breaks Unordered lists (bullets)Unordered lists (bullets) Ordered listsOrdered lists Nested listsNested lists
![Page 11: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/11.jpg)
Headers and LinksHeaders and Links
Six levels of headers, h1 – h 6Six levels of headers, h1 – h 6– examples\ch04\header.htmlexamples\ch04\header.html
Links cause browser to load another Links cause browser to load another url, a page or the likeurl, a page or the like– examples\ch04\links.htmlexamples\ch04\links.html– examples/ch04/contact.htmlexamples/ch04/contact.html
![Page 12: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/12.jpg)
ImagesImages
Load an image fileLoad an image file– Can also resize the imageCan also resize the image– May specify text to display if image is May specify text to display if image is
not displayednot displayedexamples\ch04\picture.htmlexamples\ch04\picture.html
– May be combined with links so clicking May be combined with links so clicking image activates linkimage activates linkexamples\ch04\nav.htmlexamples\ch04\nav.html
![Page 13: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/13.jpg)
Special ChareactersSpecial ChareactersLine BreaksLine Breaks
Special characters Special characters – Often used when character has special Often used when character has special
xhtml meaning or is not on keyboardxhtml meaning or is not on keyboard– Coded &xx;Coded &xx;
Examples: < > &Examples: < > &
– Line break forced by Line break forced by End of headerEnd of headerParagraph <p>Paragraph <p>Line break tag <br> Line break tag <br>
![Page 14: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/14.jpg)
Font ControlFont Control
Additional tags control font and Additional tags control font and appearance to textappearance to text– Bold <strong>Bold <strong>– Strikethrough <del>Strikethrough <del>
– examples\ch04\contact2.htmlexamples\ch04\contact2.html
![Page 15: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/15.jpg)
Unordered ListsUnordered Lists
Start list with <ul>Start list with <ul> End with </ul>End with </ul> Each list item bounded byEach list item bounded by
– <li><li>– </li></li>
examples\ch04\links2.htmlexamples\ch04\links2.html
![Page 16: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/16.jpg)
Ordered ListsOrdered Lists
““Numbered” itemsNumbered” items– <ol><ol>– Can specify type of numberingCan specify type of numbering
A more advanced featureA more advanced feature
– examples\ch04\list.htmlexamples\ch04\list.html
![Page 17: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/17.jpg)
Intermediate FeaturesIntermediate Features
TablesTables FormsForms
– Fill in and submitFill in and submit Internal linkingInternal linking Image mapsImage maps Meta elementsMeta elements FramesetsFramesets
![Page 18: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/18.jpg)
TablesTables
Contain rows and columns of cellsContain rows and columns of cells– Cells for columns are nested in rowCells for columns are nested in row– Table can also contain header and Table can also contain header and
footer rowsfooter rows– examples\ch05\table1.htmlexamples\ch05\table1.html
Rectangular group of cells can be Rectangular group of cells can be treated as a single celltreated as a single cell– examples\ch05\table2.htmlexamples\ch05\table2.html
![Page 19: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/19.jpg)
FormsForms
Fill in and submitFill in and submit– Submitted form processed by serverSubmitted form processed by server– Requires “server-side” application Requires “server-side” application
program (later in course)program (later in course)– Specify display items and fields by nameSpecify display items and fields by name– Specify server application to process Specify server application to process
datadata– examples\ch05\form.htmlexamples\ch05\form.html
![Page 20: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/20.jpg)
More Form FeaturesMore Form Features
Forms can containForms can contain– Text areaText area– CheckboxCheckbox– Reset buttonReset button– Hidden fieldsHidden fields– examples\ch05\form2.htmlexamples\ch05\form2.html
![Page 21: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/21.jpg)
More Form Features 2More Form Features 2
More componentsMore components– Radio buttonsRadio buttons– MenusMenus– examples\ch05\form3.htmlexamples\ch05\form3.html
![Page 22: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/22.jpg)
Internal Links and MapsInternal Links and Maps
Internal links take you to a specific Internal links take you to a specific part of the pagepart of the page– examples\ch05\links.htmlexamples\ch05\links.html
Maps allow you to link to different Maps allow you to link to different locations by clicking parts of an locations by clicking parts of an imageimage– examples\ch05\picture.htmlexamples\ch05\picture.html
![Page 23: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/23.jpg)
meta Elementsmeta Elements
examples\ch05\main.htmlexamples\ch05\main.html
![Page 24: COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 2](https://reader036.vdocuments.mx/reader036/viewer/2022062518/5697bf731a28abf838c7ece1/html5/thumbnails/24.jpg)
Frame SetsFrame Sets
examples\ch05\index.htmlexamples\ch05\index.html
examples\ch05\index2.htmlexamples\ch05\index2.html