Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Review of HTML - HWS Department of Mathematics and Computer
Transcript
Review of HTML CPSC 120 Principles of Computer Science March 26, 2012 Quick Reminders An HTML page is an ASCII source file (myfile.html) you edit but is viewed through a Web browser. HTML pages are formatted by tags: <body bgcolor=“white”> <font color=“black”> This text is black on white background. </font> </body> HTML documents are free format and generally case insensitive. Document spacing is generally ignored by browser. Caution: file names matter! Web author must always keep straight the clientserver view for editing/posting/viewing her pages. My First HTML Document <html> <head> <title>My First Page </title> </head> <body> This is my first web page! <hr> </body> </html> Question: How do I get this on the Web for others to see? Browser View of the HTML Local versus Remote/Global Upload Web author Web Brower User Local: Edited HTML File Remote: Server File Global: Internet HTTP request Web Server Overview of HTML Tags Grouping/Alignment: <p>, <div>, <center>, <table>, <ul>, <hr>, etc Style/Decoration: <font>, <b>, <u>, <h2>, <h3>, etc Navigation/Linking: <a> is the primary tag here External Objects: <img>, <embed>, <object> tags Forms: <form> for filling in user forms Scripting: <script> Phases of tag development Very early days: Just get basic alignment and fonts! Middle Ages: Add complex linking and images, scripting Today: Use cascading style sheets (CSS) to overcome problems with original designs for HTML Many Tags Have Properties or Attributes <hr> is the basic tag to draw a horizontal rule across the width of the entire page <hr width="100" size="4"> gives a horizontal rule 100 pixels wide, 4 pixels thick, centered on the page. <hr width=”50%" size="4" align=“left”> gives a rule across 50% of the page width and aligned to the left Much of learning HTML concerns what tags are available and what their attributes are! Practice, practice, practice. Warning: Not all browsers render all tags and attributes or they may render them quite different in appearance! So called cross-browser compatible page design can be frustrating and requires ingenuity on the designer’s part. Getting Control of Alignment We certainly want to control vertical and horizontal spacing in our HTML pages. Simple paragraph control uses <p>…</p>. <p align=“left”>…</p> can be used to control alignment as well as paragraph breaks. <br> is a simple line break. <pre> …</pre> overrides HTML control and allows your source line breaks to be shown. <ul> and <ol> provide unordered and ordered lists to also control vertical spacing. Horizontal Control is Harder Lots of time was wasted trying to get good horizontal control until the <table> tag was finally well implemented. Typical table use: <table border=1 align=“center”> <tr> <td>Item in row 1, column 1</td> <td>Item in row 1, column 2</td> <td>Item in row 1, column 3</td> </tr> <tr> <td colspan=2>Item in row2, column span of 2</td> <td>Item in row 2, column 3</td> </tr> </table> Images in Web Pages Images can be included in HTML pages using the <img src=“myImage.jpg” alt=”LMAO picture”> Note: This assumes there is a file precisely named myImage.jpg in the same directory as the HTML page. This is a form of relative addressing. Items are relative to where this HTML page is located. PAY ATTENTION TO UPPER/LOWER CASE. <img src=“images/myImage.jpg”> tries to locate an image file in the images directory (folder) supposedly found in the same directory as the HTML page. <img src=“myImage.jpg” align=“left” width=“100” height=“100” alt=“myImage.jpg” title=“Roll over title”> shows how tags quickly get complex! Interruption! Base 16 Tutorial Recall base 2, binary, used to represent numbers using only 0 and 1? Ex. 210 (decimal) = 128 + 64 + 16 + 2 = 1101 0010 We can simplify groups of four bits using base 16 (hexadecimal). 0000 (binary) = 0 (hex), 0001 (binary) = 1 (hex), etc. But 1010 (binary) = 10 (decimal) = A (hex) and so on. So 1111 (binary) = F (hex). In our example 210 (binary) = 1101 0010 (binary ) but also D 2 (hex). The decimal values 0-255 can be expressed as hex values from 00 to FF. A byte (8 bits) requires 2 hexadecimal digits so we can efficiently express long binary strings more compactly. Binary - Hexadecimal Equivalents Binary 0000 0001 0010 0011 0100 0101 Hex 0 1 2 3 4 5 Binary 1000 1001 1010 1011 1100 1101 Hex 8 9 A B C D 0110 0111 6 7 1110 1111 E F Which Leads to HTML Colors HTML uses RGB (red, green, blue) color designators for non-basic color names. Each RGB color descriptor is composed of three components: red, green, and blue. Each component has 256 (8 bits = 1 byte!) possible values so we use base 16 as a shorthand for component values. So red ranges from 00 to FF in hexadecimal! White: red=255, green=255, blue=255. Hex: FF FF FF Black: red=0, green=0, blue=0. Hex: 00 00 00 “Pure red” is red=255, green=0, blue=0. Hex: FF 00 00 Similarly for pure green and blue. Most colors are combinations of mixed RGB values. We can specify an RGB background color for our page body this way: <body bgcolor=“#26C2A0”> Equal R=G=B values give grey scale! Hypertext Links The <a href=….>Link text</a> tag is used in two ways to allow the user to “go to” another view or page. The href attribute is used point where the user view moves to when the corresponding link is clicked. Named Anchors <a href="#tables">Jump to the Tables Section</a> displays an underlined link Jump to the Tables Section. This link must be matched by a named anchor like this: <a name="tables">Tables Section</a> This is the place where the user view moves when the link is clicked. If no matching named anchor is found, the browser simply shows the first line of the page. Hypertext Links (continued) Another use for links or anchors is to move between HTML documents, load images, or other documents. Recall Uniform Resource Locators (URL) can be used to name and retrieve Web documents. A typical complete URL contains the protocol, DNS entry, directories, etc. An example is http://math.hws.edu/vaughn/cpsc/120/lecture/test-page.html. Hyperlinks and URLs <a href=”http://www.google.com">Search Google</a> displays an underlined link Search Google shown here. When clicked, the user view changes to google.com when the link is clicked. More correctly, the default or home page on the Web server with URL www.google.com. Links to invalid or misspelled URLs often create a “File not found: 404” error code depending on Web server software. Graphical Links An often used technique involving hyperlinks is to use an image as a graphical link. This can be overused and also is sometimes unclear that the user is to click on the image in order to activate the link. <a href=”http://www.google.com"> <img src=“gicon.gif”> </a> displays a graphical link shown here. Notice this may work fine but NOT look good on your background! You can use additional attributes on the <img> tag to control the border, margin spacing, etc. Check your HTML tutorial for more details. You can put such links inside tables to control alignment as the image placement can be troublesome when a screen is resized. Now Put it Together and KISS Design your document to be read top to bottom as it may scroll through several screens. Try to code so users with smaller or larger screens see much the same thing. Don’t load your pages with lots of animated GIF images and complex graphics for no reason. Avoid busy backgrounds with text in front. Avoid red-text-on-dark-background styles of fonts and backgrounds as they are very hard to read. There is a reason people like/use Google. Look at their portal again. KISS is a good motto in most Web designs. Good Web Pages Start with Good Design Be clear what you want to express/display on your web pages. Draw a diagram if it helps. Try several layouts and arrangements before starting to finally code your pages. Consider putting content on several linked pages and use anchors/links to allow navigation. Collect all the materials you need before coding your page. An unavailable resource may mean yet another redesign on the fly. Use your sense of good design in pages you can easily find information and navigate. Cool Flash movies and lots of animation usually add nothing to a poorly designed web site. Future Plans/Needs Certain Web sites have forms which allows users to register or purchase goods by filling in information and submitting it to server-side software. Some sites check validity of user input (last name entry box not empty!) before submission. Many, many add-ons to sites including Flash, movies, animations, music, etc. How? Writing pure HTML is slow and error-prone. What about an HTML editor? Better upload/site management tools?
