CMPF 124 : Personal Productivity With Information Technology

CMPF 124 : Personal Productivity With Information Technology HyperText Markup Language (HTML)

Chapter Overview CMPF124: Basic Skills for Knowledge Workers

An Introduction to HTML

General Terms and Concepts • Internet • The internet is a worldwide collection of networks that links together millions of businesses, the government, educational institutions, and individuals using modems, telephone lines and other communication devices and media • Users with computers connected to the Internet have access to a variety of services including email, newsgroups and the World Wide Web CMPF124: Basic Skills for Knowledge Workers

General Terms and Concepts (cont.) • World Wide Web • The World Wide Web is a collection of information stored on computers that are connected to the Internet all over the world • The information can be any type such as text, graphics, audio, and video • Web uses an approach to link material together known as "hyperlinks." When these links are text-based, they are called "hypertext" CMPF124: Basic Skills for Knowledge Workers

General Terms and Concepts (cont.) • Web Page • A Web page is a simple text file that contains not only text, but also a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen • A Web site is a collection of Web pages that are created and maintained by a company, a university or college, a government agency, or even an individual CMPF124: Basic Skills for Knowledge Workers

General Terms and Concepts (cont.) Web sites contain more than just text, they also contain graphics, sound and video files. CMPF124: Basic Skills for Knowledge Workers

General Terms and Concepts (cont.) • URL • URL (Uniform Resource Locator) is a naming system that compactly describes the location of every resource on the Internet and the protocol to retrieve it • An URL can be broken into three parts: "http://www.jack.com/myDir/myPage.html" Transfer Protocol Domain Name File Path Name CMPF124: Basic Skills for Knowledge Workers

General Terms and Concepts (cont.) • Web Browser • A Web browser is a program that knows how to go to a Web server on the Internet and request a page, so that the browser can pull the page through the network and into your machine • A Web browser knows how to interpret the set of HTML tags within the page in order to display the page on your screen as the page's creator intended it to be viewed • Microsoft Internet Explorer, Netscape, and Mosaic are the three most widely used web browsers CMPF124: Basic Skills for Knowledge Workers

General Terms and Concepts (cont.) • Web Server • A Web server is a program that runs on a computer connected to the Internet • The Web server watches the Internet connection and waits for requests from the Web browser • When it receives a requests, if this is static HTML document, it finds the document and sends it back to the browser that requested it; for dynamic page, some server side scripts (programs) will run first and generate the information then return back to the requested clients CMPF124: Basic Skills for Knowledge Workers

What is HTML? • HTML stands for HyperText Markup Language, a language for creating web pages • Hypertext is text, in any format, with an added feature: parts of the text is linked to other parts of the text, making it easy to jump from one part of the text to another CMPF124: Basic Skills for Knowledge Workers

The Concept of Hypertext CMPF124: Basic Skills for Knowledge Workers

What is HTML? (cont.) • HTML is a markup language. What this means is that it takes a document and marks specific parts of it, giving them special meaning CMPF124: Basic Skills for Knowledge Workers

Example of an HTML Document CMPF124: Basic Skills for Knowledge Workers

The HTML Code in Notepad CMPF124: Basic Skills for Knowledge Workers

Appearance of an HTML Document • A browser can display a Web page with a variety of fonts and styles • Different browsers might make different choices of font. One browser might apply a Times New Roman font to text in the document heading, while another might use an Arial font CMPF124: Basic Skills for Knowledge Workers

Two different browsers displaying the same HTML file CMPF124: Basic Skills for Knowledge Workers

How HTML works? • The user asks his Web browser to show a document by specifying the Web address, also known as URL either by just typing it or by following a hypertext in another Web document • The browser looks at the address. One part of the address specifies a Web server on which the document resides. The browser sends a request to the server, specifying a file name (which is another part of the Web address) CMPF124: Basic Skills for Knowledge Workers

How HTML works? (cont.) • The server locates the requested HTML file on its disk and sends it (well, a copy of it, to be exact) to the browser • The browser interprets the contents of the HTML file and formats it for display on the user's screen CMPF124: Basic Skills for Knowledge Workers

How HTML works? (cont.) • At the most basic level possible, the following diagram shows the steps that brought that page to your screen: CMPF124: Basic Skills for Knowledge Workers

How HTML works? (cont.) • It is important to know that HTML is evolving. New additions to HTML are addressing some of the layout control issues and adding new features. For example: • Cascading Style Sheets (CSS) allow you to set specific presentation styles for your page • http://www.csszengarden.com/ • JavaScript is a scripting language that lets you add additional interactivity to your page • Dynamic HTML (DHTML) is a way of displaying the page dynamically, based on the reader's actions CMPF124: Basic Skills for Knowledge Workers

A Teaching Tool • To see a copy of the file that your browser reads to generate the information in your current window, select View Source (or the equivalent) from the browser menu • The file contents, with all the HTML tags, are displayed in a new window CMPF124: Basic Skills for Knowledge Workers

A Teaching Tool • This is an excellent way to see how HTML is used and to learn tips and constructs CMPF124: Basic Skills for Knowledge Workers

HTML Tools • The only software package you need to create them is a basic text editor like the Windows Notepad application • If you want a software package to do some work of creating an HTML document, you can use an HTML converter or an HTML editor CMPF124: Basic Skills for Knowledge Workers

HTML Tools (cont.) • HTML converter • An HTML converter takes text in one format and converts it to HTML code • For example, you can create the source document with a word processor like Microsoft Word and then have the converter save the document as an HTML file • HTML editor • An HTML editor helps you create an HTML file by inserting HTML codes for you as you work CMPF124: Basic Skills for Knowledge Workers

Planning an HTML Document • Create an Outline • The outline should include a list of all the elements for your page, including its title, an introductory paragraph, links to other sites, an optional graphic image, and a contact address • Enter text in a document • Use a text editor to create the document that will be the Web page CMPF124: Basic Skills for Knowledge Workers

Planning an HTML Document (cont.) • Insert HTML tags around each element on the page • Type HTML tags around the elements in your document • Add graphics • Insert HTML-compatible graphic files to add value to your page and make it attractive CMPF124: Basic Skills for Knowledge Workers

Planning an HTML Document (cont.) • Add links to other Web Sites • Create links in your document to other Web sites that would be of interest to your readers • Save the document • Save your work often to prevent loss of data CMPF124: Basic Skills for Knowledge Workers

Planning an HTML Document (cont.) • View the page • Periodically examine your page using a Web browser. Correct any errors to the HTML codes as you go • Test the links • Make sure the links in your HTML page are correct and function properly. Verify that you have entered the URLs correctly and go to those sites to be sure they are still active CMPF124: Basic Skills for Knowledge Workers

Understanding HTML Scripts

HTML Tags • Most HTML tags come in pairs, an opening and closing set <TAG>...</TAG> • The text to be formatted by the tags is written between the pair • It is essential for both tags to be present for the document to work correctly CMPF124: Basic Skills for Knowledge Workers

HTML Tags (cont.) • All tags are enclosed in left and right angle brackets (<) and (>) • Closing tags are preceded by a slash (/) • The tags are not case sensitive though you may wish to keep paragraph related tags in uppercase and phrase/word related tags in lower case in order to distinguish them more easily when scanning your file CMPF124: Basic Skills for Knowledge Workers

HTML Tags (cont.) • Sometimes tags have one or more attributes <TAG ATTRIBUTE="...">...</TAG> • These supply extra information to your browser. Sometimes you can add data to an attribute. When putting a picture on a page, you would use an image tag. What picture is to be used, is specified in an attribute. You add a filename to this attribute CMPF124: Basic Skills for Knowledge Workers

HTML Tags (cont.) • Common Errors • Put the "greater than" and "less than" characters in the right spot • Always put them directly next to the tag description without spaces • Don't use spaces in the attributes • When adding information to an attribute after the "equal" sign, put it between quotes • Tags always embrace each other. The pattern to be used is always like: <A></A>. When using a <A></A> pattern, things may go very wrong CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page • All HTML documents should begin with the following set of tags: <HTML><HEAD><TITLE>Write your title here.</TITLE></HEAD><BODY>Begin your main body of text here CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page (cont.) • All HTML documents should end with the following set of tags: </BODY></HTML> CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page (cont.) CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page - HTML • <HTML>… </HTML> • The <HTML> tag identifies a file as being an HTML file or a Web page • The entire document goes between HTML tags CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page - Head • <HEAD>…</HEAD> • Appears just below the HTML tag in every HTML document • It contains information about the document but does not appear on the Web page CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page – Head (cont.) • A number of different elements can be placed between these tags, including JavaScript commands and META tags which are used to provide information such as keywords, author name, and a description of the contents • The most commonly used element within the <HEAD> container is the <TITLE> tag CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page - Title • <TITLE>…</TITLE> • The TITLE element is used to identify the title of the document and is required to be placed inside the <HEAD> container • Note that the title is not displayed within the actual page. Rather, the title appears at the top of your browser CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page – Title (cont.) • The title is a required part of Web page, and it is important for three reasons: • People who visit your page may use the title in a Bookmark, Favorite, or Hot list Entry. It should help them define the contents of the page so they can easily return to that page if they wish CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page – Title (cont.) • An Internet search site (i.e. Google, Yahoo, etc) or cataloging program may return only the title as a description of your page. People may make decision whether to visit your page or not based on this information • People who are surfing the Net and come upon your page should have some idea of the contents when they arrive CMPF124: Basic Skills for Knowledge Workers

HTML Basic Page – Title (cont.) • Titles must be descriptive and brief many geographical browsers place the title in the bar across the top of the screen and long lines may cut off CMPF124: Basic Skills for Knowledge Workers

Basic HTML Page - Body • <BODY>…</BODY> • Contains all the text and images that will appear on the Web page, together with all the HTML elements that provide the control/formatting of the page • Anything within the <BODY></BODY> container is called the “body content” CMPF124: Basic Skills for Knowledge Workers

Basic HTML Page – Body (cont.) • Additional attributes to the tag <BODY> allow a user to specify global coloring of the web page. Attributes of this tag include: CMPF124: Basic Skills for Knowledge Workers

Basic HTML Page – Body (cont.) • For example, to create a web page with a background colour of green normal text in red and links in blue is specified with the following attributes to the tag <BODY> <BODY BGCOLOR="#00FF00" TEXT="red" LINK="#0000FF"> CMPF124: Basic Skills for Knowledge Workers

HTML Text – Text Formatting Tags • The <CENTER>text</CENTER> is centered • The text is bolded • The text is italicized The text is centered The text is bolded The text is italicized CMPF124: Basic Skills for Knowledge Workers

HTML Text – Text Formatting Tags (cont.) • The text is underlined • The text is bolded, italicized and underlined The text is underlined Thetext is bolded, italicized and underlined CMPF124: Basic Skills for Knowledge Workers

HTML Text – Text Formatting Tags (cont.) • The <TT>text</TT> is in a teletype font • The textis 2 sizes larger and the text is in red The textis in a teletype font The text is 2 sizes larger and the text is in red CMPF124: Basic Skills for Knowledge Workers

CMPF 124 : Personal Productivity With Information Technology