Beginner's Guide to Web Authoring

Both websites and books provide information, but websites are unique in how they convey content to an audience. Images and links contribute to the unique experience of visiting a website, so it is important to understand how to code these elements with HTML and enhance them using CSS.

Images can be used to convey information or to decorate a website. In this overview, you will learn how to save images, how to add images in-line of your text using HTML, and how to add images as backgrounds using CSS.

Before you include an image or a graphic on your website, you should always save it in your own files so that it is easy to find and so that you can transfer it onto your server. Images are generally saved as .jpg, .png, or .gif files. No matter what you use, it is important to know the type of file for when you embed the file name into your code.

You can add an image directly into your line of text. This means it will appear within the paragraph of text that includes its code. The HTML tag is as follows:

The example file above is saved as a .jpg file. The file type must be included every time. The file should also be surrounded by quotes after the "img src=" element and the "alt=" element. The "alt=" is used as a description of your image in case the image fails to display on the browser--it is helpful for viewers to know what your content is intended to be in the case that the content fails to appear.

To use an image as a background element, you use CSS. Here is an example:

Again, the image file, along with its file type, is needed. Because the "body" is being modified, this image will become the background of the entire page. The "background-attachment" property specifies the position of the image. Two basic positions are "fixed" (remains still when you scroll) or "scroll" (repeats the image as you scroll).

Images can be used as backgrounds within <div> containers as long as the class or id is specified in the CSS.

Links are an important part of web authoring; they actually make the internet a metaphorical web. To insert a link into your content, you will use HTML. To edit the appearance of the link, you will use CSS.

To include a clickable link on your website, you need two things: the link's url and the words you want to be made clickable. When you know those two things, you can code it with HTML:

"YOUR WORDS" here will usually correspond with the title of the website you are linking. Some websites turn the words "click here" into a link, but it is more useful to your audience when you specify what exactly they will be clicking on.

If you want to add design to your links, you can use the following CSS selectors:

For more help and for free to use image resources, visit the Additional Resources page.