A Guide to HTML the Hypertext Markup Language

Reference : USER 009 Issue Date : September2005 Classification : Web Originator : Derek Sheward, Claire Napier REVISED DOCUMENT A guide to HTML – the HyperText Markup Language • • • • • • • • • • • • • • • • • • • • • • • • • Description: This document provides an introduction to the HyperText Markup Language (HTML) to produce simple scripted pages for the web. The user will need a background knowledge of Internet Explorer® or similar web browsing software and a basic understanding of how to create plain text files from a text editor or word processing package. If you have any queries: Students should contact the nearest Information Services, Student Help Desk. Student Help Desks are located within the: IT Learning Centre - Brindley IT and Library Help Desk - Thompson Library IT Learning Centre - Octagon Staff should contact Information Services on x3800. More guides and information can be found on the Information Services web pages at: http://www.staffs.ac.uk/uniservices/infoservices/documents/ If you do not find what you want please ask at the Student Help Desk. D.R.Sheward/C.L.Napier/Jan-08 1 What is HTML? HTML (HyperText Mark-up Language), is the standard language used to create web pages. It offers basic text formatting - from italicising, emboldening etc., through to creating lists, in-line graphics, and the ability to link to other HTML pages, movie files, pictures, sound files, software archives and more. You can create HTML using a word processing package, but you need to save the file as text only. If it is saved as an ordinary Word® document, the Web Browser won’t display it. Getting your pages on the web To get your pages on the web, you need to put your files on a web server, which is essentially a large computer that is connected to the Internet. When you want to view a page on the Internet, your computer connects to this server and the appropriate pages are then downloaded to your web browser. To view pages that you have created on your own computer, you don't need to put them on a web server, you can view them by opening them from your web browser. Getting started If you are using Windows®, create your HTML files using WordPad®. Click Start; Programs; Accessories; WordPad® If you are using an Apple Macintosh, create your HTML files using SimpleText®. Your choice of font and size in the word processor has no effect on its appearance on the web, nor will the use of tabs or extra blank lines. All “white space” in an HTML file is treated as a single character (unless the preformatted text option is used). HTML itself is not case sensitive but there are certain rules that you can follow: - any text written in capitals between tags will be displayed as such in the browser. - references to file names are case sensitive. Laying out your HTML - Include plenty of white space around your HTML – it makes it easier to read. - Type your tags in capital letters so that they stand out from the rest of your text. - Use indents so you can see where tags begin and end. <HTML> <HEAD> <TITLE>HTML exercise</TITLE> </HEAD> <BODY> D.R.Sheward/C.L.Napier/Jan-08 2 <H2>Introduction</H2> This is my first web page. </BODY> </HTML> Saving your HTML file Your must save your HTML file from a word processor in the 'Text Only' format, and attach .htm or .html as the file extension. E.g. if you wanted to call your file 'welcome' type in welcome.htm or welcome.html 1. From the File menu of your word processor, choose Save As… 2. From the list of available file types, usually at the bottom of the Save As box, choose Text Only. Note: With SimpleText® on Apple Macintosh computers, Text Only is the only format you can save files in, so you won't see an option to choose Text Only. 3. Name your file using lowercase text without spaces, and put the .htm or .html on the end of the file name. File names and addresses are case sensitive and it’s best sticking to lower case, otherwise anyone typing the address into a web browser has to remember to the upper and lowercase text, and it's easy to get wrong. Tips when choosing file names When choosing your file names, don't put spaces in file names. If you wish to make a distinction between words, separate them with an underscore (_) or minus sign (-) character. Do not use any other special characters in file names, and especially do not use slashes (/). Web servers have reserved file names for documents that it will show first – e.g. welcome or index. Find out the reserved name for the server that you are using and use that name on the page you want viewers to see first. Previewing your work 1. Open Internet Explorer®. 2. From the File menu, choose Page… 3. Click Browse… and locate the file you want to open. 4. Click Open then click the OK button. The Browser will display the file as it would be seen on the World Wide Web. If isn’t displayed quite as you had hoped, or not displayed at all, open the file in your word processor and check your HTML to make sure that there aren’t any spelling mistakes or missing tags. 5. Save any changes or additions, making sure the file is 'text only' and go back into Internet Explorer, click the Refresh button, to reload the new version of your file. Edit your page in this way until you are happy with the result. The basics of HTML D.R.Sheward/C.L.Napier/Jan-08 3 The information, e.g. text or linking information, appearing on your web page is contained between tags - a left and right angular bracket, <H1>Hello world</H1> How that information is actually displayed on the web page depends which HTML tags were used to enclose the information. Some tags come in pairs, the first to start off the formatting, <H1> the second to terminate it </H1>. Paired tags, usually surround pieces of text or in-line images, and have an effect on that enclosed text or image. Termination tags have a slash / after the first bracket </> Standalone tags are used when a single, one-off effect is required, for example <HR> to insert a horizontal rule, or <BR> to insert a line break. The HTML tag <HTML> </HTML> This is the first and last tag you will use in your HTML document. It tells a web browser that the document it is about to use is written in HTML. Your HTML document is placed between these tags. <HTML> your document goes here… </HTML> Header tag <HEAD> </HEAD> The header tags, not to be confused with the heading tags, are where the browser looks for information about your document. Your document title goes between the head tags. <HTML> <HEAD> </HEAD> </HTML> Title tag <TITLE> </TITLE> The Title tags are inserted between the head tags. Place your document's title between these tags where it will appear in the title bar of the browser window. It is important to use something short, memorable and indicative of your page’s content. It doesn’t have to be the same as the HTML file name. <HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> </HTML> Body tag <BODY> </BODY> Between these tags is where you start constructing the actual page. This is where all the details about your page are contained, such as text, pictures and even details about colours. <HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> D.R.Sheward/C.L.Napier/Jan-08 4 </HEAD> <BODY> web page goes here </BODY> </HTML> Adding text to a web page… Heading tags <Hx> </Hx> There are six types of heading, numbered Hl (largest) through to H6 (smallest). The format of the heading tag is: <Hx>Your heading</Hx>, where x is the number of the heading, 1 through to 6 D.R.Sheward/C.L.Napier/Jan-08 5 <H1>Heading1</H1> <H2>Heading2</H2> <H3>Heading3</H3> <H4>Heading4</H4> <H5>Heading5</H5> <H6>Heading6</H6> Example of a heading tag used inside an HTML document… <HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> <BODY> <H1>Introduction</H1> </BODY> </HTML> Paragraph tag <P> </P> The paragraph tag is used to signal the start and end of a paragraph. They can be preceded by a heading or even contain one. <HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> <BODY> <H1>Introduction</H1> <P> This is the text and the main content (Body) of the HTML page. This is one paragraph.</P> </BODY> </HTML> Line breaks The web browser will automatically word-wrap text to enable it to fit the screen on which it is being displayed (unless the text is preformatted). Spaces or line breaks in an HTML file (in your Word processing package) are not automatically translated into spaces or line breaks by the Web Browser. A line break will only occur when a paragraph ends and a new one begun or a forced line break tag is reached. Forced line break tag <BR> The <BR> tag will force an immediate line break with NO ADDITIONAL blank spaces between lines. To insert several blank lines use multiple tags e.g. <BR><BR><BR>. The <BR> tag is one of a few HTML tags that doesn't require a corresponding closure tag e.g. </BR>. The example below breaks the text 'This is one paragraph' onto a new line. D.R.Sheward/C.L.Napier/Jan-08 6 <P> This is the text and the main content (Body) of the HTML page.<BR> This is one paragraph.</P> Note it’s a good idea to put the text on a new line so you can easily see, when reading the HTML, where the line break is Horizontal rule tag <HR> The <HR> tag inserts a 3D horizontal rule across the width of the screen.

A Guide to HTML the Hypertext Markup Language

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support