1HTMLCS 640, Lecture 6Overview of lecturez Big picturez Text basicsz Formsz Tablesz MiscellaneaHyperText Markup Languagez Disagreement about HTML’s rolez Only give the content and structure of the document, leave visualization to the browserz Browsers vary (graphical, text based, mobile devices)z User preferences vary (some people like larger fonts)z Environment varies (screen sizes, fonts available, etc.)z But authors want to control what the document looks likez Trend towards separating content from presentationz Cascading Style Sheets – presentation information onlyz HTML documents contain little formatting2Current state of the standardsz W3C (World Wide Web Consortium) sets standardsz Last HTML standard 4.01 (December 1999)z XHTML 1.0 new XML-based formatz XML (extensible markup language) – focuses on semantics and is used as general purpose format for structured dataz A document called DTD or XML Schema defines what tags and attributes are allowed in an XML documentz For the programming assignments (and beyond) use W3C’s HTML validator service http://validator.w3.org/Writing web pagesz There are many ways of presenting the same information in a web pagez Must balance conflicting considerationsz Standards-compliancez Aesthetics for target platformz Performancez Large files take longer to downloadz Cost of running code on serverz Cost of running code on clientElements of web documentsz Text – browsers treat spaces, tabs and new lines in HTML source the same, wrap textz Comments – between <!-- and --> not renderedz Various tagsz <tag attribute1=“value” attr2=“val2”>text</tag>z For some tags the end tag not neededz In HTML they look like <tag> in XML <tag/>z All tags must obey proper nesting rulesz Valid: <i><b>Bold italic text</b> italic text</i>z Invalid: <i> <b> </i> </b>3A valid web page<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Bucky Badger’s web page</title></head><body><h1>Welcome to Bucky's web page</h1><!-- Users don’t see this comment. --><img src="bucky.gif" alt="A picture of Bucky" /> <p>I am Bucky, the mascot for University of Wisconsin athletics. Please visit<a href="http://www.uwbadgers.com/football/index.html"> the web page of our football team</a> and <a href="http://www.uwbadgers.com/basketball/index.html"> the web page of our basketball team</a>.</p></body></html>Overview of lecturez Big picturez Text basicsz Formsz Tablesz MiscellaneaTags controlling appearanceContent-based stylesz <em></em> emphasisz <strong></strong> strong emphasisz <code></code> program codez <address></address> an addressz <cite></cite> citationPhysical stylesz <b></b> boldz <i></i> italicz <tt></tt> monospacedz <big></big> biggerz <small></small> smallerz <sub></sub> subscriptz <sup></sup> superscriptz <font></font> don’t use it4Tags controlling text flowz <br> introduces a line break (new line)z <p></p> defines a paragraphz Browser leaves empty line before paragraphz Closing tag often omittedz <pre></pre> preformatted text z Line breaks and indentation not ignoredz Browser uses monospaced fontSpecial charactersz Characters “<“, “>”, and “&” cannot appear in document text (confusing to browser)z < < > > & &z Numeric codes can be used for these and other characters (greek letters, math, etc.)z < < > > & &z © © ® ® non-breaking spacez http://www.w3.org/TR/html401/sgml/entities.htmlOther tagsz Headings <h1></h1> to <h6></h6>z Lists can be nestedz <ul></ul> bulleted (unordered) listsz <ol></ol> numbered (ordered) listz The “start” attribute controls the label of the first itemz The “type” attribute (A,a,I,i,1) controls whether numbers, letters or roman numerals (upper/lower case) are usedz <li></li> list item (closing tag often omitted)5<h2>The human body</h2><ul><li>head<ul><li>eyes</li><li>mouth<ul><li>tongue</li><li>teeth</li><li>gums</li></ul></li><li>etc.</li></ul></li><li>neck</li><li>hands<ol><li>right hand<ol><li>right palm</li><li>right thumb</li><li>etc.</li></ol></li><li>left hand <ol type="i" start="2"><li>left thumb</li><li>left index</li><li>etc.</li></ol></li></ol></li><li>etc.</li></ul>Overview of lecturez Big picturez Text basicsz Formsz Tablesz MiscellaneaAbout formsz Forms are the traditional way for users to send information to a web serverz The user fills out fields in the browserz The user submits the formz http carries the user input to the web serverz A server side program processes the user dataz The server sends a reply document to the client6The <form></form> tagz Forms use the <form></form> tagz The “action” attribute has to URL of the server side program processing the formz The “method” attribute has to be get or postz Inside this tag there arez Various controls collecting data from the userz Text fields, check boxes, file selection controls, etc.z Normal text<h3>Search form</h3> <form method="get“action="http://www.googlesyndicatedsearch.com/u/univwisc"><p>What are you looking for?<input type="text" name="q" id="searchText" value="Your search terms..." /><input type="hidden" name="hl" value="en" /><input type="hidden" name="ie" value="ISO-8859-1" /><input type="submit" id="searchButton" value="Search UW-Madison" /></p></form><input> controls z The “type” attribute determines what they doz “text” used for text fieldsz “submit” the button submitting the form “reset” for resettingz “checkbox” checkboxes the users can selectz “radio” multiple choice radio buttonsz “hidden” submitted but not shown to userz The “name” attribute allows the program to distinguish between controls (e.g. age or weight?)z The “value” attribute specifies the text on the control and/or the value sent to server7Other controlsz <textarea></textarea> used for multi-line textz Must use the “name” attributez Has “cols” and “rows” attributes specifying sizez The <select></select> tag encloses <option> tags and gives multiple choices to userz The “multiple” attribute controls whether the user can check one or more options<select name=pets><option>Dog<option value=Cat>Cat<option selected>Fish</selectOverview of lecturez Big picturez Text basicsz Formsz Tablesz MiscellaneaAbout tablesz Their original role was to display tablesz Their most prevalent use is for controlling the placement of visual
View Full Document
Unlocking...