Introduction to HTML



Introduction to simple HTML Introduction Assumptions of this topic Terms Your Web Browser Writing to be understood HTML: Behind the Scenes Self assesment report Introduction HTML is short for Hypertext Mark-up Language. HTML is the universally used language for constructing Web pages. It is relatively simple to understand and easy to use. It has proved enormously flexible, allowing novices to construct effective 'starter' pages, whilst enabling sophisticated and complex multimedia sites to be developed. In future weeks we will be assisting you in developing your own Home Pages, in the meantime we would like you to familiarise yourself with HTML by looking at the Introduction to HTML Course produced by Eric Meyer of Case Western Reserve University. There is also a useful Barebones Guide to HTML which provides a useful reference guide to all the tags and codes that you are likely to need. In order to construct a Web page you need to use an HTML editor. This can be a simple text editor, such as Notepad which comes free with Windows software (teachtext for Mac) or it can be any word processor package where you can save plain text files. There are now a whole range of specialist HTML editors such as Hotdog, HTML Express or HTML Notepad. Each of these is available in a limited "shareware" version or in commercial form. Another option if you use Microsoft Word is to use the add on Internet Assistant for Word which enables you construct Web pages from within Word. Netscape Navigator Version 3 Gold has the ability to edit Web Pages within the page itself, rather than have to switch between an editor (to put in the HTML codes) and a Web Browser (to see how the page looks). This speeds up the whole process and makes Web page production much more like What You See Is What You Get (WYSIWYG) word processing or desk top publishing, rather than the cumbersome 'belt and braces' systems that are available at the moment. Assumptions of this topic In the writing of this document, certain assumptions have been made which should be stated clearly. The first is that you are using a graphical web browser such as Netscape, Explorer, etc., and not a text-based browser such as Lynx. Explanations and examples have been made as"universal" as possible. The second is that you are somewhat familiar with the operation of a Web browser and have already visited several Web sites. If this is not the case, you should do so before starting this tutorial. If you're looking for something which will explain various terms you've seen or heard, try the idea Internet Web Glossary. The third thing is that when text, or content, or things of that nature, are mentioned it is generally not referring to what appears in the Web browser, but the actual HTML file. Terms There are a few common terms which will be used again and again, they will be briefly described here. If however you're looking for a comprehensive list of terms, try the Beginner's Web Glossary. Content The actual 'meat' of a document -- all of the words, images, and links which a user can read and interact with. This basically covers whatever is in the document. Hyperlink A link from one document to another, or to any resource, or within a document. They are the coloured or highlighted and underlined words and phrases seen in web documents, when you click on them you jump from one document to another. URL The Uniform Resource Locator is a "standard" way of easily expressing the location and data type of a resource. URLs in general take the form "protocol://address" where protocol is most commonly HTTP, but also others such as gopher, FTP, telnet, and so on, and the address is merely the server and pathname (if any) of a given resource or page. For more information, take a look at the Beginner's Guide to URLs at the National Center for Supercomputing Applications (NCSA). Your Web Browser The part of your Web browser mentioned most often is the browser display window (also the display window or browser window). This is the part of the Web browser where the actual contents of an HTML document are displayed. Thus, the text you're reading at this very moment is in the browser display window. Writing to be understood Different web browsers have different features. Each browser can influence how Web documents should look. Therefore, any given Web document will be displayed differently by different browsers. In fact, it will be displayed differently by different copies of the same browser, if the two copies have different preferences set. However, these differences are not major Therefore, you need to keep this principle foremost in your mind at all times: you cannot guarantee that your document will appear to other people exactly as it does to you. In other words, don't fall into the trap of obsessively re-writing a document just to get it to "fit on one screen," or so a line of text is exactly "one screen wide." This is as pointless as trying to take a picture that will always be one foot wide, no matter how big the projection screen. Changes in font, font size, window size, and so on will all invalidate your attempts. HTML: Behind the Scenes HTML is composed of tags. Angle brackets are used to contain these Tags. Many web authors prefer to use the upper case as it makes the tags easier to pick out from the rest of the text. Tags typically occur in begin-end pairs. These pairs are in the form <tag> ... </tag>, this signifies the begining and end of instruction. Any content within a container has the rules of that container applied to it. For example, the text within a "boldface container" would be boldfaced. <B> Boldface </B> Thinking of tag-sets as containers will help in another way: it will help you remember that tags should always be balanced. In other words, you should keep containers nested within each other, just as you would have to do in the real world. However, not every tag in HTML is paired. Some tags, such as the line-break tag, stand on their own (that is, they have no closing tag). These are known as empty tags. As we encounter them, they will be pointed out. One more thing to keep in mind with regards to containers. Since HTML is based on these structures, it is often the case that the arrangement of text within a container is irrelevant. Within a container tag all of the text can be in one long line, or in a series of separate lines, or with every word on its own line, or with every word separated from every other by nineteen spaces. These would all be displayed exactly the same. WHITE SPACE DOES NOT MATTER Whitespace is all of the blank areas in a text file. (e.g. empty lines, extra spaces, and so on.) Downloading source HTML It is possible to download the source html for any web page you come across. To do this you must select Document source from the View pull down menu. This automatically downloads the file to your desktop and opens the file into your simple text editor. Exercise Visit one of your favorite World Wide Sites by selecting a bookmark. Download the source html file and 'copy and paste' the contents into the training report sheet below. Training report sheet Use the information already covered to answer the following questions:- Email address Name 1 The actual contents of a Web page are displayed in: real time the fastest possible manner the browser display window the history list the nick of time 2 Web browsers ignore the whitespace in an HTML document. True False 3 HTML tags for which no corresponding close-tag exists are called: solo empty single lonely unmatch 4 Once you have created a Web page, all your users will see the page exactly the same way it appears to you. True False 5 Most HTML tags have the structure: <tag> ... <tag> <tag> ... <!tag> <tag> ... </tag> <tag1> ... <tag2> <tag> ... <notag> 6 Place the source HTML code, from the Exercise, into this box.

Introduction to simple HTML