HTMLWhat is the World Wide Web?How does the WWW work?How does the browser fetch pages?How does the browser display pages?Who makes the Web standards?What is an HTML File?HTML TagsStructure of an HTML documentHTML documents are treesText in HTMLWhitespaceListsAttributesLinksImagesTablesExample tableMore about tablesEntitiesFramesFramesetsAdding frames to a framesetExample: The Java APIThe rest of HTMLVocabularyThe EndJan 14, 2019HTML2What is the World Wide Web?The World Wide Web (WWW) is most often called the WebThe Web is a network of computers all over the worldAll the computers in the Web can communicate with each other.All the computers use a communication standard called HTTP (Hypertext Transfer Protocol)3How does the WWW work?Web information is stored in documents called Web pagesWeb pages are text files stored on computers called Web serversComputers reading the Web pages are called Web clientsWeb clients view the pages with a program called a Web browserPopular browsers are: Internet Explorer, Netscape Navigator/Communicator, Firefox, Safari, Mozilla, Konqueror, and OperaOther browsers are: Omniweb, iCab, etc.4How does the browser fetch pages?A browser fetches a Web page from a server by sending a requestA request is a standard HTTP request containing a page addressA page address looks like this: http://www.someone.com/page.htmlA page address is a kind of URL (Uniform Resource Locator)5How does the browser display pages?All Web pages are ordinary text filesAll Web pages contain display instructionsThe browser displays the page by reading these instructions.The most common display instructions are called HTML tagsHTML tags look like this:<p>This is a Paragraph</p>6Who makes the Web standards?The Web standards are not made up by Netscape or MicrosoftThe rule-making body of the Web is the W3CW3C stands for the World Wide Web ConsortiumW3C puts together specifications for Web standardsThe most essential Web standards are HTML, CSS and XMLThe latest HTML standard is XHTML 1.07What is an HTML File?HTML stands for Hypertext Markup LanguageAn HTML file is a 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 files8HTML 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 nestedHTML tags are not case sensitive; <b> means the same as <B>XHTML tags are case sensitive and must be lower caseTo ease the conversion from HTML to XHTML, it is better to use lowercase tags9Structure 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 HTML document looks like this: <html> <head> <title>My Title</title> </head> <body> Hello, World! </body></html>10HTML documents are treeshtmlhead bodytitleMy Web PageThis will be the world’s bestweb page, so please checkback soon!(Under construction)11Text in HTMLAnything in the body of an HTML document, unless marked otherwise, is textYou can make text italic by surrounding it with <i> and </i> tagsYou can make text boldface by surrounding 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 itself12WhitespaceWhitespace 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 programs13ListsTwo 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>14AttributesSome 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 attribute15LinksTo link to another page, enclose the link text in <a href="URL"> to </a>Example: I'm taking <a href = "http://www.cis.upenn.edu/~matuszek/cit597.html">Dr. Dave's CIT597 course</a> this semester.Link text will automatically be underlined and blue (or purple if recently visited)To link to another part of the same page,Insert a named anchor: <a name="refs">References</a>And link to it with: <a href="#refs">My references</a>To link to a named anchor from a different page, use <a href="PageURL #refs">My references</a>16ImagesImages (pictures) are not part of an HTML page; the HTML just tells where to find the imageTo add an image to a page, use:<img src="URL" alt="text description" width="150" height="100">The src attribute is required; the others are optionalAttributes may be in any orderThe URL may refer to any .gif, .jpg, or .png fileOther graphic formats are not
View Full Document
Unlocking...