Learn HTML in 30 minutesby Steven Gould For updates to this page refer to: http://www.stevengould.org Prerequisites:1. You should be comfortable using a basic text editor such as Windows Notepad. 2. You should be familiar with the concepts of files and directories. 3. You should also be familiar with using a web browser. A Basic HTML PageAll HTML pages are made up of a collection of HTML "tags". HTML tags are denoted by "<" and ">", and generally come in pairs. For example, let us look at a very simple -- almost bare bones -- HTML page. <html> <head> <title>Page title goes here</title> </head> <body> <p>Page text -- and possibly graphics -- go here.</p> </body> </html> The first tag on any HTML page should be <HTML>, and the last tag on any HTML page should be its matching </HTML> tag. Note that many browsers will allow you to omit the <HTML></HTML> tags, though this is generally considered bad practice. The <HTML></HTML> tags are intended to signify that the content between the tags is an HTML page. Within the <HTML> tags there will usually be a pair of <HEAD> tags, and, provided the page has any content, a pair of <BODY> tags as in the example above. Between the <HEAD> and </HEAD> tags you place information about the page that you do not want displayed on the page itself. This can include things like the page title (as above), meta-tags (containing information such as the author, keywords to help a search engine index the page, and other such information), and even VBScript or JavaScript (for more advanced pages). Between the <BODY> and </BODY> tags you will insert the main content for your page. This will generally make use of a number of other HTML tags to help with the formatting and layout of your page. One of the most commonly used HTML tags is probably the paragraph tag, indicated by a <P>. Strictly speaking, there should be a matching </P> to indicate the end of the paragraph. However, you will often see this omitted. Note that:1. All HTML tags are case insensitive. The opening tag does not even need to be in the same case as the closing tag. 2. HTML tags usually come in pairs. The opening tag marks the beginning of the HTML section, and is simply the HTML tag within the angle brackets, "<>". The closing tag marks the end of the HTML section, and is the HTML tag preceded by a forward slash, "/", again within the angle brackets, "<>". Exercise: Creating your first web pageStep 1. Start-up your text editor and type in the HTML from the above example. Step 2. Save the file to disk under the name, "MyFirstWebPage.html" (without the quotes). Step 3. Now start-up your browser and open the file just saved. In Internet Explorer, select Open from the File menu. In the dialog that appears click on the Browse button, locate the file "MyFirstWebPage.html". You should see your first web page displayed in the browser. Note the page title in the browsers windows title bar, and the body text in the browsers main window. Your second web pageNow refer to the quick reference below and the use the tags required to build upon this basic page and create a more elaborate HTML page. Remember the following important points:
Quick reference for some commonly used HTML tags:
Inserting hyperlinks into your web pages:One of the great benefits of HTML is its ability to "cross-reference" (i.e. hyperlink) related web pages. To insert a hyperlink into your web page requires a slightly different type of HTML tag. The hyperlink tag is also referred to as an anchor and uses the <A> tag with some additional information/arguments. For example: <a href="home.html">Home</a> This example will create a hyperlink using the word "Home" (without the quotes), so that when the user takes on it, the browser will load the HTML page from the file, "home.html". The href argument specifies the hyperlink reference. That is, the HTML page to be displayed on the user clicks on the link. The page can either be a "relative" reference as in this example, or an absolute reference, as in the example below: <a href="http://www.sun.com">Sun Microsystems web site</a> Inserting graphics into your web pages:It will not be long before you want to start inserting graphics into your web pages. There are two widely supported graphics format on the web. These are JPG/JPEG (pronounced "jay-peg"), and GIF (pronounced "giff", like gift but without pronouncing the "t"). Although you can use other graphics formats such as Windows bitmaps, this is not recommended since they are unlikely to be supported on non-Windows platforms. To insert a graphic into your web page, use the image tag, <IMG>. Like the anchor tag, the image tag requires one or more additional arguments. In particular, its needs to know the name of the graphics file and is location - this is specified by the "source" or src argument. This is best illustrated by an example: <img src="MyGraphic.gif" /> This example will insert the GIF file, MyGraphic.gif, into the web page at the given point. Other optional arguments for the image tag allow you to specify additional information such as the height and width of the image, alternative text to display if the image cannot be displayed, and so on. The details of these are beyond the scope of this introductory guide. Note that the <img> tag does not have a matching </img>, since no content is needed other than that already specified by the image attributes. As a result, it is good to get into the habit of using a forward slash, "/", before the closing ">" as in the above example. This is consistent with XML and XHTML. Advanced topics:The above introduction to HTML covers the basics needed to put together simple relatively static HTML pages. More advanced topics, which the interested reader may want to read up on, include:
References:World Wide Web Consortium: http://www.w3.org/ Copyright (c) Steven Gould,
1999-2002 |