CEA: HTML 1, Formatting Text & Incorporating Graphics

LESSON 2: FORMATTING TEXT AND INCORPORATING GRAPHICS

This is the handout for the second class session of HTML 1 offered at the Center for Electronic Art in San Francisco. Step-by-step instructions are here for formatting a basic web page, including backgrounds, font style/size/color and incorporating graphics.

Formatting Text in a Web Page

It's true that HTML tags will specify the placement and formatting of items on the page to the browser. However, you have limited control over how your document will look, for a number of reasons. First, different browsers interpret HTML in slightly different ways. There are some browsers, like Netscape, which are very "robust" -- they can accept a large range of HTML tags. Other browsers are less flexible and only accept and interpret a subset of the tags available to you. Another factor that influences how your pages will look is the settings or preferences of each user in his/her own web browser. For example, users can specify default fonts and sizes for all web pages.

1. Open your existing homepage.

Launch SimpleText and open your "index.html" file.

2. View your page in Netscape Communicator.

Simultaneously, launch Netscape Communicator. From the File Menu, select "Open Page in Navigator." Find index.html in the dialog box and click Open.

Your file should look something like this:

3. Make the text on the page larger.

Insert the tags to increase the text size starting with all text below the heading "My Resume":

<HTML>
<HEAD>
<TITLE>Your Name Here:  Resume/Portfolio</TITLE>
</HEAD>
<BODY>

<FONT SIZE=4>
<CENTER><IMG SRC="cea.gif"><H1>My Resume/Portfolio</H1></CENTER>
<BOLD>Your Name Here</BOLD><BR>
Email: <A HREF = "mailto:userid@cea.edu">userid@cea.edu</A>
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
<HR>
Find out more about me:<BR>
<UL>
<LI><A HREF="education.html">Education</A>
<LI>Professional Experience
<LI><A HREF= "skills.html">Skills</A>
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</UL>
</FONT>

</BODY>
</HTML>

There are seven preset font sizes that you may use, with 3 being the default (12 pt) font. Level one is the smallest, and level seven is the largest:
Level 1, Level 2, Level 3, Level 4, Level 5, Level 6, Level 7
You may substitute any number from 1-7 in place of the 4 used in the example above, if you wish.

Save the file index.html. In Netscape, click on the "Reload" button to see the change you have made.

4. Change the font.

Insert the tags for the FONT FACE attribute around your name as shown (remember to nest the existing tags--in this case BOLD--within the new tags--FONT:

<FONT FACE="Arial"><BOLD>Your Name Here</BOLD></FONT>

Note that the default font is usually Times, as you'll see when developing your web pages using Simple Text and viewing in the browser. When changing the font face, you should try to choose fonts which are commonly available on most systems. Or, you can also specify several similar fonts, hoping that at least one will be on the user's system. Put the fonts in the tag in the order of your preference:

<FONT FACE="Arial, Verdana, Helvetica"><BOLD>Your Name Here</BOLD></FONT>

Save the file. In Netscape, click on the "Reload" button to see the change you have made.

5. Change the text color.

Let's change the color of the line "Find out more about me," using the FONT COLOR tag.

<HTML>
<HEAD>
<TITLE>Your Name Here:  Resume/Portfolio</TITLE>
</HEAD>
<BODY>

<FONT SIZE=4>
<CENTER>
<IMG SRC="cea.gif">
<H1>My Resume/Portfolio</H1>
</CENTER>

<FONT FACE="Arial"><BOLD>Your Name Here</BOLD></FONT>
Email: <A HREF="mailto:userid@cea.edu">userid@cea.edu</A>
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
<HR>
<FONT COLOR="green">Find out more about me:</FONT><BR>
<UL>
<LI><A HREF="education.html">Education</A>
<LI>Professional Experience
<LI><A HREF= "skills.html">Skills</A>
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</UL>
</FONT>

</BODY>
</HTML>

Save the file. In Netscape, click on the "Reload" button to see the change you have made.

Backgrounds

The default background color is typically grey, but you can choose any of the browser-safe colors. Be aware, however, that these colors may look different among the various browsers. Another option, besides solid color, is to use what's called wallpaper. You take a swatch of a pattern, graphic or photo and repeat it in a tiling effect across the page. Be aware that wallpaper can be very distracting unless tastefully done.

6. Change the background color of your homepage.

Insert the BGCOLOR attribute in the BODY tag to change the background color of the page. The hex code listed below (FFFFFF) represents white, but you can experiment with colors from back cover of the Castro book. Just replace the hex code below with another.

<HTML>
<HEAD>
<TITLE>Your Name Here:  Resume/Portfolio</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">
<CENTER><IMG SRC="cea.gif" ALT="Center for Electronic Art"><H1>My Resume/Portfolio</H1></CENTER>
<BOLD>Your Name Here</BOLD><BR>
Email: <A HREF = "mailto:userid@cea.edu">userid@cea.edu</A>
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
<HR>
Find out more about me:<BR>
<UL>
<LI><A HREF="education.html">Education</A>
<LI>Professional Experience
<LI><A HREF= "skills.html">Skills</A>
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</UL>

</BODY>
</HTML>

Save the file. In Netscape, click on the "Reload" button to see the change you have made.

6. Change the background design of your homepage.

Insert the BACKGROUND attribute in the BODY tag to change the background color of the page. Find a background graphic in your "HTML 1 Clip Art" folder. Go to "Backgrounds" and "All Over." Move a copy of the graphic you select to your web folder or "images" so that the browser will recognize it.

<HTML>
<HEAD>
<TITLE>Your Name Here:  Resume/Portfolio</TITLE>
</HEAD>

<BODY BACKGROUND="palegold.gif">
<CENTER><IMG SRC="cea.gif" ALT="Center for Electronic Art"><H1>My Resume/Portfolio</H1></CENTER>
<BOLD>Your Name Here</BOLD><BR>
Email: <A HREF = "mailto:userid@cea.edu">userid@cea.edu</A>
<P>
This resume/portfolio provides an online representation of my experience, interests and skills.  
Please feel free to offer me my dream job ...
<P>
<HR>
Find out more about me:<BR>
<UL>
<LI><A HREF="education.html">Education</A>
<LI>Professional Experience
<LI><A HREF= "skills.html">Skills</A>
<LI>Certification, Licenses & Training
<LI>References
<LI>Additional Info
</UL>

</BODY>
</HTML>

Save the file. In Netscape, click on the "Reload" button to see the change you have made.

Incorporating Graphics

There are two common file formats for web graphics. JPEG (extension ".jpg") is best for photographs, while GIF (".gif") works better for simple graphics and drawings. In Lesson 1, you "borrowed" the CEA logo and inserted it as a placeholder on your homepage. Now, you should substitute that placeholder with a graphic of your own, or with clip art.

Preparation for Next Lesson:

Read Castro book
Complete Assignment 2: Add Content, Graphics & Text Formatting

details in course syllabus