11 Introduction to HTML

2 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. 2

33 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.

4 HTTP HTTP is a client-server protocol Browser is the client. Web server is the server. Server constantly listens for request messages. The client originates the message exchange. Client sends Request. Server sends Response.

5 HTML HTML defines the content of a web page. Originally included “mark up” for page layout and appearance. Better handled by CSS today. Cascading Style Sheets HTML defines page structure. The Document Object Model Permits programmatic modification The HTML document itself is plain ASCII text.

66 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 serif font here. Make this bold. etc. Can be included within an HTML document or can be a separate file. ASCII text

77 Standards HTML standards are developed by the World Wide Web Consortium, W3C. The original HTML standard was very permissive. Lots of room for interpretation. Tolerant of errors and omissions.

88 HTML Versions HTML Version 4.01 is current. XHMTL 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 Draconian error handling and the WHATWG

9 HTML Versions HTML 5 is the successor to Standards work is ongoing. Considered a living document. Now referred to as simply HTML. Supported to various degrees by all widely used browsers. 9

10 HTML5 Built-in support for Video Audio Drawing Local Storage Improved separation of presentation from content CSS3 for presentation Layout, colors, fonts,...

11 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.

12 How the Page Layout is Determined Browsers interpret the markup as they see fit. Author has influence over the resulting layout, but 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.

13 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: This appears at the top of the page All visible content of the page A block of text Beginning of a new paragraph.... Multiple tags can apply to the same text, but they should be properly nested.

14 HTML Tags Some tags alter the appearance of text Examples: Some text in italics This text will be in bold Appearance tags are now obsolete but are still supported by browsers and are still widely used.

15 Cascading Style Sheets Style sheets are a better way to specify appearance.

16 Some Individual Tags Some tags stand alone. 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. 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 XHMTL. Optional in HTML5.

17 Case Sensitivity Tags are not case sensitive. But upper case is considered invalid in XHTML. Recommendation: Use lower case. The Visual Studio HTML editor will help.

18 A Very Simple Web Page A very simple web page This is a very simple HTML page! I can write in Italic or Bold Or I can write in both Note nesting

19 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!

20 Simple Example in Internet Explorer Title Page was displayed from a local file.

21 Headings A Really Big Heading Next level down... A Very Small Heading

22 Headings A Page with Headings A Really Big Heading Some text to appear below a really big heading. Next level down Some text to appear below a smaller heading. A Very Small Heading Some text to appear below a very small heading.

23 Page in Chrome

24 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. Examples:

25 Miscellaneous Tips But what if I want an & to appear on my page? Write & (The character entity for &)

26 A page with nonbreaking spaces A Discourse on Nonbreaking Spaces This paragraph is indented five spaces using the   entity. The lines will wrap wherever the browser chooses, depending primarily on the current window size. 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. 26 Example of Nonbreaking Spaces

27 Page in Firefox Nonbreaking spaces Ampersand within text No indentation for space characters

28 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.

29 Using Visual Studio for HTML From the File menu, select New File. Then in the dialog box that pops up Select Web. Select HTML Page. Click Open.

30 Using Visual Studio for HTML Click here

31 The HTML Template Initial lines identify the standard which this page will adhere to.

32 Structure of the Page

33 hello.html

34 Save As hello.html

35 Save As hello.html

36 hello.html in Chrome Double click on the file icon to open the page in your default browser. Or right click and select a browser from the “Open With” menu. End of Section