Home

Web 1

Web 2

Web 3

Web 4

Web 5

Web 6

Doo-dads

META Tags

Backgrounds

Pictures

Definitions

Links

 

Intro to Web Building - Unit 3

Formatting Your Text

NOTE:  You may transfer your Geocities files to UT's webserver, if you wish.

1.  Open your Yahoo Geocities Account.  Go to the File Manager.  (You should already have 1 page in your account.)

2.  Create a new file in Geocities.  Erase any coding that Geocities has automatically included.

(For those useing UT's webserver, create a new SimpleText file on the hard drive, save it as .html, and upload it to the server, along with any graphics, when complete.)

3.  Type in the HTML tags that frame every web page.  They will look like this (replace the red text with your own information):

<HTML>
<HEAD>
<TITLE> Sophie’s second page
</TITLE>
</HEAD>

<BODY>

 

</BODY>
</HTML>

This new page will focus on text formatting skills.

4.  Give this page a heading at the top of the body.  (Do not retype the greyed text - just insert the new material in black).

Code

Result

<HTML>
<HEAD>
<TITLE> Sophie’s second page
</TITLE>
</HEAD>

<BODY>

<H1>Sophie’s Second Page</H1>  

</BODY>
</HTML>

Sophie's Second Page

5.  Provide a graphic link to your 1st webpage.  To do this, select a home button from the picture gallery (or provide your own). Upload the picture to your Geocities folder.  In your new page, insert the image via HTML code:

<IMG SRC = “picture.jpg”>

6.  To turn the picture into a link, imbed the IMG SRC code within an A HREF tag at the bottom or top of the page (change the sample URL given below to the URL of your own page and DO NOT retype the greyed text; just add the text in black and red):

<A HREF="http://www.geocities.com/yourpage.htm"> <IMG SRC = “picture.jpg” border=”0”> </A>  

7.  Create an ordered list.  HTML can generate 2 kinds of lists:  ordered and unordered.  The first are numbered, and the second are bulleted.  List 5 -10 things pertaining to the purpose of your website using the following format to create a numbered (ordered list) Follow the example below:

Code

Result
<B>JOB SKILLS</B>

<OL>
<LI>Summer internship with Senator Smith's office in Washington, D.C.</LI>
<LI>Member of the UT Student Government 2002-3 school year</LI>
<LI>Pursuing Bachelor's degree in International Communications (GPA 3.6)</LI>
<LI>Dean's List member 3 semesters</LI> 
<LI>President Debating Club 2002-3 school year</LI> 
</OL>  

JOB SKILLS
  1. Summer internship with Senator Smith's office in Washington, D.C.
  2. Member of the UT Student Government 2002-3 school year
  3. Pursuing Bachelor's degree in International Communications (GPA 3.6)
  4. Dean's List member 3 semesters
  5. President Debating Club 2002-3 school year</LI> 

The OL tags encapsulate the entire list, while the LI tags demark each individual item.

8.  Now use the BLOCKQUOTE tags to indent a chunk of text. It is particularly useful, of course, when you are inserting a quotation of more than 4 lines.  Find a quotation that pertains to the purpose of your website and format it with the BLOCKQUOTE tag.  Note:  this tag replaces the P tag.  Sample:

Code

Results
<BLOCKQUOTE>Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds, that lower’d upon our house, in the deep bosom of the ocean buried.  now are our brows bound with victorious wreaths our bruised arms hung up for monuments; our stern alarums chang’d to merry meetings, our dreadful marches to delightful measures.   Grim-visag’d war hath smooth’d his wrinkled front…</BLOCKQUOTE>   Now is the winter of our discontent made glorious summer by this sun of York; and all the clouds, that lower’d upon our house, in the deep bosom of the ocean buried.  now are our brows bound with victorious wreaths our bruised arms hung up for monuments; our stern alarums chang’d to merry meetings, our dreadful marches to delightful measures.   Grim-visag’d war hath smooth’d his wrinkled front…

9.  Make an unordered (bulleted) list.  The code will resemble your ordered list, except that the list will be surrounded by the UL, rather than the OL, tags.  Follow the example below, using your own items, relevant to your website's purpose:

Code

Results
<UL>
<LI>Sleepy</LI>
<LI>Dopey</LI>
<LI>Bashful</LI>
<LI>Doc</LI>
<LI>Sneezy</LI>
<LI>Grumpy</LI>
<LI>Happy</LI>
</UL>
  • Sleepy
  • Dopey
  • Bashful
  • Doc
  • Sneezy
  • Grumpy
  • Happy

10.  Play with font options.  The typeface, size and color of selections of text within your page can be modified using the <FONT> tag.   All 3 commands can be placed in the same <FONT> tag.

Use hexadecimal code to specify a color for your selected text.  (The HYPE site [http://users.rcn.com/giant.interport/COLOR/ColorSpecifier.html] and Le Professeur [http://members.tripod.com/~LeProfesseur/hex-to-rgb-color.htm] have particularly good selection) The <FONT color> tag differs from the text command included in the <BODY> tag because the text command is applied to the entire document.  The <FONT> tag only applies to the text within the tag, and it overrides the default color that your set in the <BODY> tag.  

12.  Create a brief new paragraph (I), containing information pertinent to your theme and select a hexadecimal color for it.  

<P> <FONT color=”#8b7765“>My goal is to become Vice President of Marketing for a Fortune500 company.</FONT> </P>

The face command will tell the computer which font style to use in the selection, but browsers can only choose from the selection of fonts on the users' hard drives.  A standard font like Arial is nearly universally available; Gloucester MT Extra Condensed, on the other hand, is less common.  If you specify a font that the user's hard drive doesn't have, the browser will default to whatever is available. 

13.  Create a new paragraph (II), and select a font from your hard drive to apply to the text.

Code

Results
<P> <FONT face="Monotype Corsiva">The greatest influence on my professional development has been Jane Austen.</FONT> </P>   The greatest influence on my professional development has been Jane Austen.

 HTML code includes 7 font sizes, from 8 to 36.  The default size, 12 pt, is font size 3.  To use any other size, you need to use the <FONT> tag (or the heading tags, but these entail other formatting features).  The sizes are:

1 8pt
2 10pt
4 14pt
5 18pt
6 24pt
7 36pt

 

14.  Create a new paragraph (III), altering the size of the font.  Sample:

 

Code

Results
<P> <FONT size=”5”> Date of graduation:  May, 2005</FONT> </P>   Date of graduation:  May, 2005

15.  To complete the page, insert anchor tags at each of the above items (ordered list, blockquote, unordered list, and paragraphs I, II, and III.).  Anchor tags look like this:

 

<A NAME=”#sevendwarfs”>  
<UL>

<LI>Sleepy</LI>
<LI>Dopey</LI>
<LI>Bashful</LI>...

 

They are singlet tags, like BR and IMG SRC tags.  They will not be visible in a browser, but give the browser navigational instructions.  Insert them in front of or above of the region you wish to bookmark.

 

The purpose of anchor tags it to allow you to link to a particular part of a page.  Thus, to be used, they must be referenced in a link.  Create an unordered list of the anchors on your page, allowing you to jump to whatever section you prefer.  (Note:  this feature is most handy on very lengthy pages).  Sample:

Code

Results
<B>PAGE CONTENTS</B>

<UL>
<LI> <A HREF="#presidents">First 10 Presidents </A> </LI>
<LI> <A HREF="#Richard III">Richard III </A> </LI>
<LI> <A HREF="#sevendwarfs">Seven Dwarfs </A> </LI>
</UL>

 PAGE CONTENTS
  • Job Skills
  • Richard III
  • Seven Dwarfs
  • Objectives
  • Professional Influence
  • Date of Graduation

 

16.  Save your new webpage.  Be sure to include “.htm” or “.html” in the filename.  (Those using UT webspace should upload the file at this point.)

17.  Finally, open your original webpage and insert a link to your new page.  You can make the link an image, or just text.  (Those using UT webspace will need to download the file to your desktop, make the change, save it, and upload it.


SAVE A COPY OF YOUR CODE TO A DISK OR EMAIL!!!!!