1. Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language

2. Computer Science 1611 Internet & Web Learning Objectives How HTML tags and links work on the World Wide Web How to create simple web pages using HTML and a text editor

3. Computer Science 1611 Internet & Web HTML Tags An HTML document contains both document text and elements. Tags are codes that are used to define where an HTML element starts and (if necessary) where it ends. In an HTML document, each tag is enclosed in brackets (<>). A two-sided tag set has an opening tag and a closing tag.

4. Computer Science 1611 Internet & Web Document Tags Document tags are those divide up a Web page into its basic sections, such as the header information and the part of the page which contains the displayed text and graphics. HTML –The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is: – –If we load such a page into a Web browser, it will give us a blank screen, but it is technically a valid Web page.blank screen

5. Computer Science 1611 Internet & Web Document Tags (Head and Body) HEAD –The HEAD tags contain all of the document's header information. When I say "header," I don't mean what appears at the top of the browser window, but things like the document title and so on. –TITLE The TITLE container is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list. Finally, the contents of the TITLE container go into your bookmark file, if you create a bookmark to a page.

6. Computer Science 1611 Internet & Web BODY –BODY comes after the HEAD structure. Between the BODY tags, you find all of the stuff that gets displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags. Document Title > Web view of the above. Text (raw HTML) view of the aboveWeb view Text

7. Computer Science 1611 Internet & Web This is a Minimal HTML Page (the presentation goes here) web viewtext view The Minimal HTML Page:

8. Computer Science 1611 Internet & Web Comments may be placed with an HTML page. These are intended to NOT be viewed as part of the page Comment lines are indicated by the special beginning tag placed at the beginning and end of EVERY line to be treated as a comment. Comments do not nest (one within the other) and the double-dash sequence "--" may NOT appear inside a comment except as part of the closing --> tag. You must also make sure that there are NO spaces in the start-of-comment string. For example, the line is a valid comment line but the line is not valid Comments in HTML

9. Computer Science 1611 Internet & Web Example of Simple Document Demo web page CS 1611 demo (new paragraph> My school MtA My prof Prof web viewtext viewweb viewtext view

10. Computer Science 1611 Internet & Web html links Hyperlinks are bits of text that connect the current document to: another location in the same document another document on the same host machine another document on the Internet Hyperlinks are created using the HTML anchor tag.

11. Computer Science 1611 Internet & Web html anchor tag Hyperlinks are created using the anchor tag. highlighted Text Commands for this tag can be: href (a hyperlink). –text links are defined with the h yperlink ref erence anchor. – destination –View in a web page this may appear as destination name (a specified location on page.

12. Computer Science 1611 Internet & Web html images In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. syntax of defining an image:

13. Computer Science 1611 Internet & Web images (examples) The URL points to the location where the image is stored. An image of Sackville named “admin2.jpg" located on the web at http://www.mta.ca/webimages/admin2.jpg would be referenced by http://www.mta.ca/webimages/admin2.jpg

14. Computer Science 1611 Internet & Web Images (2) A simple web page including the sackville image might be Sackville image> </html web view Resources

15. Computer Science 1611 Internet & Web HTML Editors HTML documents can be created in any general-purpose text editor or word processor. (notepad)notepad Sophisticated editors can create full-scale, commercial-grade Web sites with database access, graphics, fill-in forms, and display the Web page along with the HTML code.