Web Authoring Notes
Code for the top of the document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
You may copy and paste this into your document. Note that the second part is the <html> element, so don't include that twice!
Controlling Fonts
To change the font use the following tag:
<font size="2" face="Courier New, Courier, monospace">Your text here.</font>
This produces the following result:
Your text here.
In class, I was trying to do this:
<p style="font-family:Courier New, Courier, monospace; font-size:9pt">Your text here.</p>
This produces the following result:
Your text here.
It looks the same, but it's really not. If you select "View source" (or something with similar language in your browser's menus), you'll be able to see that the two examples are coded differently.
Why did I get it wrong in class? The second method is not pure HTML; it's a cheat. The "style" attribute invokes features of a stylesheet called a cascading stylesheet (CSS), which is used to control the appearance of the page. This is the way I am used to handling fonts. But I was trying to teach you pure HTML, and I got the conventions jumbled in my mind. However, it brought up an important point. The <font> tag is now considered deprecated. That is, we are no longer encouraged to use it by the governing body in charge of coding standards, the World Wide Web Consortium (W3C). Here's what the W3C has to say:
The <font> Tag Should NOT be Used
The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).
The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.
So it seems that you should probably use the second method. All the information you need to do this is in the example above.
Types of Fonts
There are three types of fonts:
- serif: letters have decorative flourishes (examples: Times New Roman, Times)
- sans-serif: letters have no decorative flourishes (examples: Arial, Helvetica)
- monospace: all letters are of equal width (example: Courier)
When you designate your font family, you could just give these names. However, it is good practice to use the following conventions:
- Times New Roman, Times, serif
- Arial, Helvetica, sans-serif
- Courier New, Courier, monospace
That way your viewer's browser can supply a second choice if the first font is not available.
There is a growing preference for using sans-serif fonts for on-screen reading. Look at some popular web sites and see what fonts they use and in what contexts.
Inserting Links
A link is designated by enclosing a text or image inside the <a> (anchor) tag. To designate the destination of the link, use the href attribute:
<a href="http://www.csun.edu/">Cal State Northridge</a>
This will link to another web page (in this case the CSUN home page).
You can also use the name attribute to designate a point of your own web page as the destination of your link. For instance:
<a name="top" />
You can then insert a link elsewhere in your document which looks like this:
<a href="#top">Return to Top</a>
Note the "#" before the name of the anchor element. Since the link refers to an element inside the current web page, it does not end in the ".html" suffix used to indicate a file. The user who clicks on this link will be taken to the point in the document where the anchor named "top" is found.
Inserting Images
The code to include an image is
<img src="imageFileName.gif" alt="My Image" />
The two attributes of the <img> element given here are src, which gives the image’s "source", and alt, which gives an alternative text description of the image for readers who are unable to see the image. The <img> element has a number of other elements which relate to its placement, size, and appearance:
<img src="imageFileName.gif" alt="My Image" width="100" height="100" align="center" border= "1"/>
This will make the image 100 pixels high by 100 pixels wide and place the image in the centre of the screen. It will also give it a 1 pixel border.
Preparing Your Image to Go Online
The first thing you must do is acquire your image in digital format either by scanning from a paper source or by copying it off the web.
If you are scanning an image, save the file in one of the following formats: GIF, JPG, JPEG, PNG. The preferred format for the web is JPG or JPEG (they're actually two names for the same thing). GIF is also commonly used, but you may lose some picture quality, especially in a large or detailed image.
To copy an image off a web page, right-click (Mac control-click) on the image and look for an option like "Save Picture As..." in the pop-up menu (it may be worded differently in different browsers). Save the file in one of the formats listed above.
Notes:
- Images on some web sites may be copy protected because they are not in the public domain. In this case, you will need to give the location of the source file on that web site rather than on your own. See further below for how to do this. Please make sure that any files you copy are in the public domain. You don't want to be sued for copyright infringement!
- If you do link to an image from another web site, be aware that if the author of that web site changes or deletes the image, this will be reflected on your web page. This probably won't matter for your assignment, but it is an important consideration if you want your web pages to have longer lifespans.
Uploading Your Image and Indicating Its Source Location
In order for your web page to be visible on the internet, your HTML file must be placed in the public_html folder inside your account. Any images you have on your web page must also be placed in the same folder. So make sure that you don't forget to upload them. Let's look again at the code you use to insert your image in the web page:
<img src="imageFileName.gif" alt="My Image"/> (other attributes removed)
This tells the browser to find "imageFileName.gif" in the same folder as the web page. You may wish to create a special folder for images inside the public_html folder and place your image files there. For instance, if your image folder is called "images", the code would look like this:
<img src="images/imageFileName.gif" alt="My Image" width="100" height="100" align="center" border= "1"/>
Note that the src attribute now contains the name of the images folder followed by a slash and then the name of the image file. This is called the path to the location of the source, or the pathname.
If you are trying to insert an image from another web site, you must use a pathname that gives the location of that site and the location of the image file on that site. For instance, if you wanted to insert the Alfred Jewel image from our course home page, you would use the following code:
<img src="http://www.csun.edu/~sk36711/WWW/630ML/Alfred_jewel.jpg" alt="Alfred Jewel "/>
Finding the pathname for an image on another web site can be tricky. The easiest way is to use Firefox as your browser. Right-click (Mac control-click) on the image and select "Copy Image Location". Then go to your HTML code and paste the result into the src attribute of your <img> element.
If you use another browser, the process is harder. Run your mouse over the image to see if the ALT text pops up. If it does, remember what it says. Then select from your browser's menu an option with wording like "View Source". You should get a view of the HTML code for the page. Look through the code or do a word search until you find the text of the ALT tag. Next to it, you will find the pathname and the name of the image file inside the src attribute. Simply put that at the end of the address of the web page, and you have the complete pathname. Note that there are cases when this won't quite work without some further playing. If you run into trouble, try using Firefox as described above or e-mail me for help.
Thumbnail Images
A thumbnail image is technically a smaller-sized version of an original. This means not only that its height and width are smaller, but that the size of the image file is smaller. In order to create an image with a smaller file size, you need to use a program such as Adobe Photoshop. This is an extra complication, so I will not be requiring you to do make real thumbnails for the purposes of this class. However, you can simulate the effect by using the width and height attributes of the <img> element to make the image appear smaller so that it fits in a small area of your page.
Once you have inserted a smaller version of the image in your page, you should make it a link to the original by placing the <img> element inside an <a> element. For example, if the original imageFileName.jpg is a 200 x 200 pixel image, the code for your thumbnail might be:
<a href=“imageFileName.jpg”>
<img src=“imageFileName.jpg” alt=“My Image” width=“100” height=“100” align=“center” border= “1”/>
</a>
Readers who click on the image will see an empty web page with a full-sized image. If you wanted to, you could link to another web page containing the image at full size, instead of directly to the image file. This would allow you to provide other information on the page. However, it also requires you to create another web page.