Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Your Name Here I suggest modifying URLs to use your local Web site instead of web4data Presenting Information on the Web with HTML • Chapter overview – – – – – – – – How Web sites are organized and implemented A brief introduction to HTML A Closer Look at HTML Documents How to use URLs, Anchor Tags, and Document References How to present information in HTML tables How to control HTML table format with style sheets How to use external style sheets and style classes An example of using style sheets and tables to define a style for BigHit Online The Architecture of Web Sites Request from brow ser for Web page Web Server http://w w w .w eb4data.com/index.html Server name <html><head>... </html> Web Brow ser HTML document on its w ay to the brow ser w w w .w eb4data.com /index.html <html><head>... </html> HTML document stored in a file Files File Name Introduction to HTML • An HTML document consists of lines of text with embedded markup tags that specify Web-page formatting and links to other pages • Invented by Tim Berners-Lee at CERN 1989 – The birth of the World Wide Web • In 1993, students, faculty, and staff of the National Center for Supercomputing Applications (NCSA) developed the first graphical browser – Mosaic Web browser and Web server – Became Netscape • Current version is HTML 4.0 – http://www.w3c.org/TR/html4/ A Closer Look at HTML Documents • Consider the Web page of Fig. 10.2 • Source code • HTML documents are structured using tags, attributes, and nesting – Tag with text: <tagname attr=“value” >text</tagname> • <title>BigHit Video Online Reservation System</title> • <a href="reservation.html">Enter Video Reservation System</a> – Tag with no text: <tagname attr=“value” /> • <img src="images/bighit.jpg" alt="BigHit Video logo“/> – Nested tags: <tag1><tag2></tag2><tag3></tag3></tag1> • <table border="0"> <tr> <!-- this is a comment --> <td><img src="images/bighit.jpg" alt="BigHit Video logo"/></td> <td valign="middle"> <font face="Arial" size="24pt">BigHit Video, Inc.</font> <br><h1><em>Online Reservation System</em></h1> </td> </tr> </table> URLs, Anchor Tags, and Document References • URL (Uniform Resource Locator) – A protocol, a mechanism used to fetch the desired object. • In this case: http (Hypertext Transfer Protocol). – The host machine, the computer that contains the requested object. • In this case, the host computer is www.w3.org. • Special host name for browser computer: localhost – The object name. http://www.w3.org/TR/REC-html40/ • In this case, /TR/REC-html40/. • Anchor tag <a href=url>link text </a> – <a href="http://localhost/bighit/"> BigHit Video home page </a> • Image tag with reference to document – <img src="images/bar2.gif"/> Protocol Host Machine Name Relative URLs • Relative URL contains only object name – Refers to object on the same server as the page with the reference • For page URL http://www.web4data.com/dbmgmt/bighit/fig1002.html – Base URL is http://www.web4data.com/dbmgmt/bighit/ – Protocol http, host machine www.web4data.com, directory /dbmgmt/bighit/ • Relative URL not starting with / – Refers to object relative to directory containing the page – Create full URL by appending relative URL to base URL • images/bighit.jpg becomes • http://www.web4data.com/dbmgmt/bighit/images/bighit.jpg • Relative URL starting with / – Refers to object relative to home directory of server – Create full URL by appending the relative URL to the protocol and host machine • /dbmgt/bighit/index.html becomes • http://www.web4data.com/dbmgmt/bighit/index.html Presenting Information in HTML Tables • Table tags provide the primary method of organizing information on pages – – – – Example page of Figure 10.5 Table tags create a regular, rectangular layout Table tags present tabular information Source for page shows layout • Table is surrounded by <table> </table> – Attributes border and bgcolor – <table border=“2” bgcolor="lightcyan" > • • • • Row is surrounded by <tr> </tr> Header element <th> </th> formatted in boldface Data element <td> </td> <font> tag controls font style (“Arial”) size (“+2px”) and color (“midnightblue”) of table element Controlling HTML Table Format with Style Sheets • Cascading Style Sheets (CSS) improve format control – Specify a common look and feel to all pages in a site – Easy to control, easy to modify – Example of Figure 10.8 and its source code (Figure 10.7) • Style tags specify styles for other tags – <style type="text/css"> body {font-family: Arial} table {caption-side:right; border-collapse:collapse; background-color: lightcyan} caption {color:midnightblue; background-color:beige; font:bold; font-size:24px } th { color:midnightblue; border:ridge; background-color: beige} td { color:midnightblue; border:ridge; background-color: lightcyan} </style> • Note that CSS table styles do not work properly in Netscape 4.X Some Style Attributes Font Properties font-family Allow the browser to choose the first font in the list that it supports font-family: Arial, Helvetica, sans-serif font-size Determine the font size font-size: 14pt; font-size: +2; font-size: medium font-style Specify the slant font-style: normal; font-style: italic font-weight Specify bold or normal font-weight: bold font Specify all font attributes at once font: bold 12pt Arial, Helvetica background-color Specify color behind the text background-color: blue background-color: transparent background-color: #FF0000 background-image Put an image in the background background-image: url(images/bighit.jpg) color Specify foreground color color: black; color: rgb(255, 0,0) color: rgb(100%, 0, 0) caption-side Positions the caption at top, bottom, or either side caption-side: top; caption-side left border-collapse Specifies whether the table cell borders are combined border-collapse: collapse border-collapse: separate border-style Specifies the style of cell borders border-style: ridge; border-style: groove border-style: none border-width Specifies width of cell borders border-width: 3px Color and Background Properties Table Properties Using External Style Sheets and Style Classes • External style sheets can specify format for many pages – – – – Style specifications put together in a file Example of bighit1.css of the BigHit Video Web site Example of Figure 10.7 using external style sheet Use link tag to reference style sheet file • <link rel="stylesheet" type="text/css" href="bighit1.css"> • Style sheets can use classes to define multiple styles for tags – Example Figure 10.11 with data table and header and footer – Style sheet bighit2.css includes style classes • Example applies to all tags with class=“bighit” .bighit {font-family: Arial; font-weight:bold} • <span class="bighit">BigHit Video, Inc.</span> • Span tag used for containing text that is not otherwise included in a single tag Case in Point: Defining a Style for BigHit Online Page title Page subtitle Header background image BigHit Online logo Table data elements Navigation hyperlinks Table header elements Visited link Footer Unvisited link Style Classes and Definitions for BigHit Online • Basic elements of BigHit Online format shown in – Sample customer page for BigHit Online note the footer is different than the one in Figure 10.14 (previous slide) – Its source code – And its style sheet • Header formatting – Includes carefully formatted image and header table – Uses width in pixels to correspond to image size – Page sampleheader.html shows header with visible table borders – Page source for sampleheader.html • Lots of details to be explored in the source code and style sheet