ࡱ > 2 4 1 @ jbjb ", l 8 8 8 8 8 8 8 $ E , ? l 0 8 0 q 8 8 = q q q v 8 8 q L , x , 8 8 8 8 q q 8 8 l E E , q q Getting started with HTML This is a short introduction to writing HTML. Many people still write HTML by hand using tools such as NotePad on Windows, or SimpleText on the Mac. This guide will get you up and running. Even if you don't intend to edit HTML directly and instead plan to use an HTML editor such as Dreamweaver, or GoLive, this guide will enable you to understand enough to make better use of such tools and how to make your HTML documents accessible on a wide range of browsers. p.s. a good way to learn is to look at how other people have coded their html pages. To do this, click on the "View" menu and then on "Source". Try it with this page to see how I have applied the ideas I explain below. You will find yourself developing a critical eye as many pages look rather a mess under the hood! This page will teach you how to: start with a title add headings and paragraphs add emphasis to your text add images add links to other pages use various kinds of lists Start with a title Every HTML document needs a title. Here is what you need to type:
tag. The
is optional, unlike the end tags for elements like headings. For example:This is the first paragraph.
This is the second paragraph.
Adding a bit of emphasis You can emphasize one or more words with the tag, for instance: This is a really interesting topic! Adding interest to your pages with images Images can be used to make your Web pages distinctive and greatly help to get your message across. The simple way to add an image is using the tag. Let's assume you have an image file called "peter.jpg" in the same folder/directory as your HTML file. It is 200 pixels wide by 150 pixels high. The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows: The alt attribute is used to give the short description, in this case "My friend Peter". For complex images, you may need to also give a longer description. Assuming this has been written in the file "peter.html", you can add one as follows using the longdesc attribute: You can create images in a number of ways, for instance with a digital camera, by scanning an image in, or creating one with a painting or drawing program. Most browsers understand GIF and JPEG image formats, newer browsers also understand the PNG image format. To avoid long delays while the image is downloaded over the network, you should avoid using large image files. Generally speaking, JPEG is best for photographs and other smoothly varying images, while GIF and PNG are good for graphics art involving flat areas of color, lines and text. All three formats support options for progressive rendering where a crude version of the image is sent first and progressively refined. Adding links to other pages What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world! Links are defined with the tag. Lets define a link to the page defined in the file "peter.html": This a link to Peter's page. The text between the and the is used as the caption for the link. It is common for the caption to be in blue underlined text. To link to a page on another Web site you need to give the full Web address (commonly called a URL), for instance to link to www.w3.org you need to write: This is a link to W3C. You can turn an image into a hypertext link, for example, the following allows you to click on the company logo to get to the home page: Three kinds of lists HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the