HTMLWeb pages are HTMLExample of HTMLWhy do we care?HTML FilesHTML TagsStructure of an HTML documentText in HTMLWhitespaceListsAttributesTablesExample tableEntitiesApplets in HTMLApplets with parametersThe rest of HTMLThe EndJan 14, 2019HTML2Web pages are HTMLHTML stands for HyperText Markup LanguageWeb pages are plain text files, written in HTMLBrowsers display web pages by interpreting the HTML languageHTML pages may have other languages embedded in themCSS -- Cascading Style SheetsJavaScript -- a programming language vaguely like Java3Example of HTML<!DOCTYPE HTML PUBLIC "-//IETF//DTD W3 HTML 2.0//EN"><html> <head> <title>factorial</title> </head> <body bgcolor="#FFFFFF"> <h1>factorial</h1> <strong>Definition:</strong> The factorial of an integer n ≥ 0, written n!, is n × n-1 × ... × 2 × 1. In particular, 0! = 1. </body></html>4Why do we care?Javadoc comments are written in HTMLIf you know a little HTML, you can write much better-looking commentsApplets are normally embedded in a web pageYou need to know enough HTML to construct a web page with an applet in itYou do not need to know HTML to run an applet from an IDEHTML is the language of the World Wide WebJava is an excellent language for web programming5HTML FilesAn HTML file is a plain text file containing small markup tagsThe markup tags tell the Web browser how to display the pageAn HTML file must have an htm or html file extension.html is preferred.htm extensions are used by servers on very old operating systems that can only handle “8+3” names (eight characters, dot, three characters)An HTML file can be created using a simple text editorFormatted text, such as Microsoft Word’s .doc files, cannot be used in HTML files6HTML TagsHTML tags are used to mark up HTML elementsHTML tags are surrounded by angle brackets, < and >Most HTML tags come in pairs, like <b> and </b>The tags in a pair are the start tag and the end tagThe text between the start and end tags is the element contentThe tags act as containers (they contain the element content), and should be properly nestedA few tags, such as <br> (line break) are not nested and have no end tagHTML tags are not case sensitive; <b> means the same as <B>Lowercase tags are preferable7Structure of an HTML documentAn HTML document is contained within <html> tagsIt consists of a <head> and a <body>, in that orderThe <head> typically contains a <title>, which is used as the title of the browser windowAlmost all other content goes in the <body> Hence, a fairly minimal HTMLdocument looks like this: <html> <head> <title>My Title</title> </head> <body> Hello, World! </body></html>8Text in HTMLAnything in the body of an HTML document, unless marked otherwise, is textTo make text italic, surround it with <i> and </i> tagsTo make text boldface, surround it with <b> and </b> tagsYou can put headers in your document with <h1>, <h2>, <h3>, <h4>, <h5>, or <h6> tags (and the corresponding end tag, </h1> through </h6>)<h1> is quite large; <h6> is very smallEach header goes on a line by itself9WhitespaceWhitespace is any non-printing characters (space, tab, newline, and a few others)HTML treats all whitespace as word separators, and automatically flows text from one line to the next, depending on the width of the pageTo group text into paragraphs, with a blank line between paragraphs, enclose each paragraph in <p> and </p> tagsTo force HTML to use whitespace exactly as you wrote it, enclose your text in <pre> and </pre> tags (“pre” stands for “preformatted”)<pre> also uses a monospace font<pre> is handy for displaying programs10ListsTwo of the kinds of lists in HTML are ordered, <ol> to </ol>, and unordered, <ul> to </ul>Ordered lists typically use numbers: 1, 2, 3, ...Unordered lists typically use bullets (•)The elements of a list (either kind) are surrounded by <li> and </li>Example: The four main food groups are:<ul> <li>Sugar</li> <li>Chips</li> <li>Caffeine</li> <li>Chocolate</li></ul>11AttributesSome markup tags may contain attributes of the form name="value" to provide additional informationExample: To have an ordered list with letters A, B, C, ... instead of numbers, use <ol type="A"> to </ol>For lowercase letters, use type="a"For Roman numerals, use type="I"For lowercase Roman numerals, use type="i"In this example, type is an attributeIf a tag has more than one attribute, they can be in any order12TablesTables are used to organize information in two dimensions (rows and columns)A <table> contains one or more table rows, <tr>Each table row contains one or more table data cells, <td>, or table header cells, <th>The difference between <td> and <th> cells is just formatting--text in <th> cells is boldface and centeredEach table row should contain the same number of table cellsTo put borders around every cell, add the attribute border="1" to the <table> start tag13Example table <table border="1"> <tr> <th>Name</th> <th>Phone</th> </tr> <tr> <td>Dick</td> <td>555-1234</td> </tr> <tr> <td>Jane</td> <td>555-2345</td> </tr> <tr> <td>Sally</td> <td>555-3456</td> </tr></table>14EntitiesCertain characters, such as <, have special meaning in HTMLTo put these characters into HTML without any special meaning, we have to use entitiesHere are some of the most common entities:< represents <> represents >& represents &' represents '" represents " represents a “nonbreaking space”--one that HTML does not treat as whitespaceHence, to display if (x < 0) return "negative";you need to write if (x < 0) return "negative";15Applets in HTMLTo put an applet into an HTML page, you use the <applet> tag, which has three required attributes, code (the class file) and width and height (in pixels)Example:<applet code="MyApplet.class" width=150 height=100> </applet>If your applet contains several classes, you should jar them up; in this case you also need the archive attribute:<applet code="MyApplet.class" archive="MyApplet.jar" width=150 height=100></applet>16Applets with parametersYou can pass parameters to your applet from your HTML page:<applet code="MyApplet.class" width=150 height=100>
View Full Document
Unlocking...