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
An Introduction to HTML 1 Objectives You will be able to Create a simple web page in HTML using a plain text editor. Publish your page on the web so that it can be seen anywhere in the world. Use character entities to include special characters in your page. Use an on-line validator to check your HTML files. 2 The Web’s Rulebooks The web was created to permit users to view documents. HTTP -- Hypertext Transport Protocol Defines rules for communication between a browser and a web server. Web applications must live within these rules. HTML – Hypertext Markup Language Defines rules for formatting a document that a browser will display. Web applications produce their output in this form. 3 HTML HTML defines the content of a web page. Originally included “mark up” for page layout and appearance. Better handled by CSS today. HTML defines page structure. Cascading Style Sheets The Document Object Model Permits programatic modification The HTML document itself is plain ASCII text. 4 Cascading Style Sheets CSS conveys the author’s intentions about how the content of a web page should be displayed. Instructions analogous to a (human) editor’s instructions to a typesetter. Center this text. Use a large sans sarif font here. Make this bold. etc. Can be included within an HTML document or can be a separate file. ASCII text 5 Standards HTML standards are developed by the World Wide Web Consortium, W3C. http://www.w3.org/ The original HTML standard was very permissive. Lots of room for interpretation. Tolerant of errors and omissions. 6 HTML Versions HTML Version 4.01 is current. XHTML is a version of HTML that follows the stricter rules of XML. Can be validated. Better cross browser compatibility. Version 1.1 is mainstream. Version 2 is under development. Abandoned by W3C in 2009. We will normally use XHTML 1.1 7 HTML Versions HTML 5 will be the successor to 4.01 Standards work is ongoing. http://en.wikipedia.org/wiki/HTML5 Probably will not change much. Now supported to various degrees by all widely used browsers: Chrome Firefox Safari Opera Internet Explorer 9 8 HTML5 Built-in support for Video Audio Drawing Local Storage Improved separation of presentation from semantics CSS3 for presentation 9 How to Produce a Web Page You can use any text editor to produce your HTML file. The initial examples in this presentation were done with NotePad. There are many fancy WYSIWYG editors for HTML. Avoid these while learning HTML. Use a plain text editor and work directly with the HTML. Visual Studio also has an option to edit HTML files. Works either way: text (language aware) or WYSIWYG. 10 How the Page Layout is Determined Browsers interpret the markup as they see fit. Author has influence over the resulting layout, but generally not absolute control The user also influences the layout. Resize window. Set display resolution. Set font size. Different browsers may render a given page in different ways. 11 HTML Tags HTML defines a number of tags which authors can use to mark up a document. HTML tags are enclosed in angle brackets. Most appear in begin-end pairs Examples: <title>This appears at the top of the page </title> <div> A block of text </div> <p> Beginning of a new paragraph. ... </p> <i> Some text in italics </i> HTML5 discourages use of tags to specify appearance. 12 HTML Tags Multiple tags can apply to the same text, but they must be properly nested. Style sheets now are a better way to do most of what was once done with tags. 13 Some Individual Tags Some tags stand alone. <br /> Break (Force new line.) New lines, and other white space, in the HTML document are normally not significant. The browser will wrap the text according to the size of the window. <hr /> Horizontal Rule (Line across page.) The / takes the place of the end tag. Can generally be used when there is no text between the start tag and the end tag. Not necessary in old HTML, but required for valid XHTML. Optional in HTML5. 14 Case Sensitivity Tags are not case sensitive. But upper case is considered invalid in XHTML. Recommendatation: Use lower case. The Visual Studio HTML editor will help. 15 15 A Very Simple Web Page <html> <head> <title> A very simple web page</title> </head> <body> <p><b>This is a very simple HTML page!</b></p> <p>I can write in <i>Italic</i> or <b>Bold</b></p> <hr /> <p><b><i>Or I can write in both</i></b></p> <hr /> </body> </html> Note nesting 16 How to View Your Web Page While developing a web page, you need to view it frequently with a browser. You can simply point your browser to a local file by typing the pathname in the URL window. Or double click on the file name or icon. Click the Reload button to get the latest version. Beware of cached copies of your page during development! 17 Simple Example in Internet Explorer Title Page was displayed from a local file. 18 How to Publish Your Page on the Web If you have a CSE account on grad you already have a web server. Create a directory called public.html in your home directory on grad.cse.usf.edu. Any .html file that you put into the directory will be accessible on the web as http://www.cse.usf.edu/~yourUserName/fileName.html 19 How to Publish Your Page on the Web Use an SSH client such as WinSCP to access your files on grad. 20 Using WinSCP You can drag and drop files to and from the WinSCP window as if it were a normal folder window on your PC. 21 The Simple Page from a Web Server URL used to retrieve the page from the server 22 Another Server You can also put html pages on Circe. 23 Circe as a Web Server In your home directory, create a directory called public_html Permissions: 755 Note the underscore in the directory name. Different from grad, which uses public.html URL is http://rc.usf.edu/~username/filename 24 Simple Page on Circe 25 Headings <h1>A Really Big Heading</h1> <h2>Next level down</h2> ... <h6>A Very Small Heading</h6> 26 Headings <html> <title> A Page with Headings </title> <h1>A Really Big Heading</h1> Some text to appear below a really big heading. <h2>Next level down</h2> Some text to appear below a smaller heading. <h6>A Very Small Heading</h6> Some text to appear below a very small heading. </html> 27 Page in Chrome 28 Miscellaneous Tips What if I want to put some space into my text? Ordinarily white space in an HTML document is ignored except for producing a single space. To force the browser to leave a space use (nonbreaking space) & is a form of escape character in HTML. Everything from the & to the ; is interpreted as a character entity rather than as text to be displayed. There are many such character entities. Refer to a book or web tutorial on HTML to get the full list. 29 Miscellaneous Tips But what if I want an & to appear on my page? Write & (The character entity for &) 30 Example of Nonbreaking Spaces <html> <head> <title>A page with nonbreaking spaces </title > </head> <body> <h3>A Discourse on Nonbreaking Spaces</h3> <p> This paragraph is indented five spaces using the &nbsp; command. The lines will wrap wherever the browser chooses, depending primarily on the current window size. </p> <p> If the user resizes the window, the text will be laid out again using the new window size, and the line breaks will ofen be different. Notice that this paragraph had five ASCII spaces at the start, but they did not cause the paragraph to be indented.</p> </body> </html> 31 Page in Firefox Nonbreaking spaces Ampersand within text No indentation for space characters 32 Structure of a Web Page So far we have been cheating Leaving out some of the standard parts of a web page as specified by the HTML standard. Web browsers typically do the best they can with whatever they are given. To improve the odds of your page looking as you intend on various browsers, you should strictly adhere to the standard. The Visual Studio HTML editor makes this easier. 33 Using Visual Studio for HTML From the File menu, select New > File. Then in the dialog box that pops up Select Category: Web. Select Template: HTML Page. Click Open. 34 Using Visual Studio for HTML 35 Using Visual Studio for HTML Select the Source tab to see the HTML. 36 The HTML Template Initial lines identify the standard which this page will adhere to. This is a valid XML file as well as valid HTML. 37 Structure of the Page 38 hello.html 39 Save As hello.html 40 Save As hello.html 41 hello.html in Chrome 42 DOCTYPE for HTML5 No change in appearance in browser. 43 Using a Validator W3C has a validator on line. Use to check that your page is valid HTML. Improve the odds that it will work as expected with various browsers. http://validator.w3.org 44 Revisit hello.html 45 W3C Validation Service Click on “Choose File” and navigate to the HTML file. 46 Select File 47 Validate Click here 48 Validation Result 49 Delete <html> tag The <html> ... </html> tag is officially optional HTML5. Required in order to be valid XML. Never actually required by browsers. 50 No <html> tag No change in appearance in browser. 51 Validate Again 52 Validation Result 53 Warnings 54 HTML Meta Commands Permit you to add information about the page which is not to be displayed. Most is intended to be used by search engines. Try to improve page rank in search results. 55 Example: cnn.com 56 The Refresh Meta Command You can tell the browser to reload the same page, or to load a different page, after a certain amount of time. This is a way to update the user's screen without requiring an input from the user. <meta http-equiv="refresh" content="1;URL=http://www.csee.usf.edu/~turnerr/flop.html" /> How long to hold page, in seconds Where to get next page. 57 The Refresh Meta Command <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Flip</title> <meta http-equiv="refresh" content="1;URL=http://www.csee.usf.edu/~turnerr/flop.html" /> </head> <body> <div> This is page <p style="font-family:Arial; font-size:xx-large; color: red"> Flip </p> </div> </body> </html> Demo: http://www.cse.usf.edu/~turnerr/flip.html 58 Assignment (Not submitted or graded) Do the examples from this class for yourself. Publish a page on one of your available websites and view it with a browser. End of Presentation 59