the Web site of KATIE KLEINMAN
   HOME >> How to Make a Web Page >> Basic Tags for Text and Images

Basic Tags for Text and Images



Now that you've created a basic Web page, let's make the information look better by formatting the text and adding images.

Text Formatting

Managing Fonts

Images



TEXT FORMATTING

Bold, Italic, and Underline


To make text bold surround it with the <b> tag.
    HTML code: <b>Hi</b>
    In a browser: Hi


To make text italics surround it with the <i> tag.

    HTML code: <i>Hi</i>
    In a browser: Hi


To make text underlined surround it with the <u> tag.

    HTML code: <u>Hi</u>
    In a browser: Hi
Traditionally all hyperlinks are underlined. So do not underline text unless it is a hyperlink. Use italics for book and magazine references.


Spaces


HTML does not recognize more than one space at a time.

    HTML code: s   p   a   c   e   s
    In a browser: s p a c e s


To add spaces, a special HTML character called a "non breaking space" must be used. The code for a non breaking space is: &nbsp;

    HTML code: s &nbsp; p &nbsp; a &nbsp; c &nbsp;
    e &nbsp; s
    In a browser: s   p   a   c   e   s


Paragraphs


HTML also does not recognize carriage returns made by the enter key. There are two ways to make paragraphs: with the <p> tag and with the <br> tag.

The paragraph tag <p>

    HTML code: <p>Here is Paragraph 1</p>
    <p>Here is Paragraph 2</p>
    In a browser:

    Here is Paragraph 1

    Here is Paragraph 2

The break tag <br>

    HTML code: Here is Paragraph 1<br><br>
    Here is Paragraph 2<br><br>
    In a browser: Here is Paragraph 1

    Here is Paragraph 2

    Note: The <br> tag has no end tag.


Links


Links are what make the Internet: from text links to image links to email links. Links are made using the <a> tag.

To link up the files on your Web site, you must first understand a little about directory and folder structure.

Text Links Within Your Site
Sample Directory StructureWhen linking to a page on your site, you do not need to use the full URL (http://www.yahoo.com/index.html) of the Web page. The relative URL can be used instead (index.html). Consider this folder structure for the following examples:

Example 1: Link to a page in the same folder. On the page, index.html, place a link to resume.html. As long as resume.html and index.html are in the same folder this will work.

    HTML code: <a href="resume.html">My Resume</a>
    In a browser: My Resume


Example 2: Link to a page in a sub-folder: place a link to nike.html, on index.html. To access nike.html, which is located in the folder "nike," the suffix "nike/" must be included in the link.

    HTML code: <a href="nike/nike.html">Nike</a>
    In a browser: Nike


Example 3: On a page in a sub-folder (nike.html), place a link to a page out of the sub-folder (index.html). The prefix "../" must be used to jump out of a sub-folder.

    HTML code: <a href="../index.html">Home</a>
    In a browser: Home


External Text Links
To link to an external Web site (one that is not located within your domain name) you must include the full URL of the Web site.

    HTML code: <a href="http://www.yahoo.com">Yahoo</a>
    In a browser: Yahoo


Using an Image as a Link
To use an image as a link, place the <a> tag around the image.

    HTML code: <a href="http://www.yahoo.com"><img src="art/button.gif"></a>
    In a browser:
Tip: To get rid of a border around an image link, add the img attribute "border="0". (See Images section.)


Email Links
Email links are also made using the <a> tag.

    HTML code: <a href="mailto:myemail@email.com">My Email</a>
    In a browser: My Email


Links That Open a New Browser Window
To open a link in a new broswer window, add the a tag attribute target="_blank". (See Don't Alienate the User section.)

    HTML code: <a href="http://www.yahoo.com" target="_blank">Yahoo</a>
    In a browser: Yahoo


Comments


Comment tags do not appear on a Web page. They are extremely helpful as a tool for maintaining large sites. Add them at the beginning of tables or as little reminders to yourself. They might help you out when you haven't visited a page in a couple years!
    HTML code: <!-- last updated November 11, 2004 -->
    In a browser:


Lists


Lists are special tags that add bullets or numbers to text. They can be ordered or unordered.

Unordered lists have bullets. They use the <ul> tag:

    HTML code: <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    In a browser:
    • Item 1
    • Item 2
    • Item 3


Ordered lists are numbered. They use the <ol> tag:
    HTML code: <ol>
        <li>Take out trash.</li>
        <li>Do homework.</li>
        <li>Walk dog.</li>
    </ol>
    In a browser:
    1. Take out trash.
    2. Do homework.
    3. Walk dog.


W3C's documentation of Lists - Complete list of options for lists in HTML 4.0


Special Characters


Want to include a special character like © & Æ ß Å ç ¡ € Δ ∴ ¿ ? There are special character codes for every symbol that can be produced in HTML. Some common ones include

    HTML code: In a browser:
    &copy;
    &reg;
    &trade;
    &quot;
    &#39;
    &amp;    		 ©
    ®
    ™
    "
    '
    &


W3C's Character entity references - Complete set of special characters in HTML 4.0


MANAGING FONTS


What are Cascading Style Sheets?


Cascading Style Sheets, (CSS) are an addition to HTML that allow easy and more elaborate coding of fonts, text colors and text styles. Previous versions of HTML use the <font> tag to control text, but HTML 4.0 uses style sheets.

In complex Web pages, the <font> tag has to be used very often, so style sheets eliminate the need to declare the font face, font size, and font color all the time. One of the advantages of CSS is that you can link to an external file, and this file can change the style of all the text on your entire Web site, just by editing one file.

Why does the text need to be controlled and specified anyway? If the text is not controlled and specified in some way, your Web page could appear very large and hot pink. The only way to control a Web page's text is to use style sheets or the <font> tag.

The actual style sheet is a document with an extension of ".css" that contains all font declarations and styles.

Creating a Style Sheet


Start by opening a new document in Notepad, WordPad, SimpleText, or an HTML editor. Then add the following code:

    BODY {
        margin: 0px;
        padding: 0px;
        background-color: #FFFFFF;
        font-family: Arial, Verdana, Geneva, Palatino, sans-serif;
        font-size: 10pt;
        color: #000000;
        }
    TD, P, DIV, SPAN {
       font-family: Arial, Verdana, Geneva, Palatino, sans-serif;
       font-size:10pt;
       color:#000000;
       }
    H2 { font-size:18px; font-weight:bold }
    H3{ font-size:14px; font-weight:bold }
    H4 { font-size:11px; font-weight:bold }
    H2,H3,H4 {display:inline;}
    A:LINK { color:#003399; text-decoration:underline; }
    A:ACTIVE { color:#003399; text-decoration:underline; }
    A:VISITED { color:#666666; text-decoration:underline; }
    A:HOVER { color:#003399; text-decoration:none; }
    .text_red { color: #993300; }
    .text_red:LINK { color: #993300; text-decoration:underline; }
    .text_red:ACTIVE { color: #993300; text-decoration:underline; }
    .text_red:VISITED { color: #666666; text-decoration:underline; }
    .text_red:HOVER { color: #993300;text-decoration:none; }
    .text_small { font-size:11px;}
    .black {background-color:#000000; }

This will give you a nice template for a basic style sheet that can be used for many functions.

Saving a Style Sheet


To save, under the "File" menu, choose "Save As." To save the page with an .css extension, set the file format to "All files." Type in your file name (style.css). The document type should be set to ASCII TEXT DOS or TEXT.

Style Sheet Attributes


A style sheet is made up of HTML tags and style sheet attributes. For example, the HTML tag, body, is followed by a list of attributes enclosed in curly brackets {}. Attributes for the <body> tag control all body text. Attributes for the <td> tag control all text located in tables. (See Convert Your Design to HTML section.) Attributes for the <a> tag control all text links.

font-family: Arial, Verdana, Geneva, Palatino, sans-serif;

    This attribute controls the font face. Suggested values to use include: Arial, Verdana, Geneva, Palatino, sans-serif. This is a good way to guarantee that the user will view a page in a san-serif font. (See Readability section.)

font-size: 12px;

    This attribute controls the font size. Values that can be used include: xx-small, x-small, small, medium, large, x-large, xx-large, or any number value.

font-weight:bold;

    This attribute controls the font weight. Values that can be used include: lighter, normal, bold, bolder, or any number value (100, 500, 900)

color:#000000;


Link Attributes


The <a> tag controls how the text links will look. But these additional attributes, link, visited, active, and hover, will control how the link will look when rolled over by a mouse. Link refers to a regular text link. Visited refers to a link that has already been visited. Active refers to a link that you can click on. Hover refers to how the link will look when your cursor is over it.

a {font-family: Arial;font-size:12px;color:#000000;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:active {text-decoration: none;}
a:hover {text-decoration: none;}

The attribute "text-decoration" can have the following values: underline, overline, underline overline, line-through, or none.

Custom Style Sheet Declarations


Custom style sheet declarations can also be made. For example, an additional style sheet declaration can be made for large headings.

.heading1 { font-family: Arial;font-size:18px;color:# 000000; }
.heading2 { font-family: Arial;font-size:16px;color:# 000000; }
.heading3 { font-family: Arial;font-size:14px;color:# 000000; }

Learn More About Style Sheets


Lissa Explains it All - Straightforward explanations about style sheets

HTML Goodies - Tutorials from basic to advanced

glish.com - Good info on table-less layouts with CSS

Style sheets - Great, detailed information about style sheets by YourHTMLSource.com

CSS Rollovers - Great, cross-platform button-like rollovers using style sheets


Using Style Sheets with HTML


Every Web page that uses a style sheet must contain the following code, placed in the <HEAD> section of the page. This code tells the browser to use the file style.css for all font/text coding.
    <LINK REL="StyleSheet" HREF="style.css" TYPE="text/css" MEDIA="screen, print">

Using <span> with style sheets

    HTML code: <span class="text_small">Hello! I'm small.</span> Now I'm normal.
    In a browser: Hello! I'm small. Now I'm normal.


Using <div> with style sheets

    HTML code: <div class="text_small">Hello! I'm small.
    </div> Now I'm normal.
    In a browser:
    Hello! I'm small.

    Now I'm normal.

    Note that the <div> tag will add a <BR> to the end of any line.


Using <p> with style sheets

    HTML code: <p class="text_small">Hello! I'm small.</p> Now I'm normal.
    In a browser:

    Hello! I'm small.

    Now I'm normal.


Using style sheets in links

    HTML code: <a href="http://www.yahoo.com" class="text_small">Yahoo</a>
    In a browser: Yahoo


Fonts without Style Sheets


Remember, to avoid having your Web page appear as very large and hot pink, the text must be controlled and specified in some way. If you cannot use cascading style sheets, text can still be controlled using the <font> tag.
    HTML code: <font size="4">Text here that is size 4</font>
    In a browser: Text here that is size 4
    HTML code: <font color="#990000">Red Text</font>
    In a browser: Red Text
    HTML code: <font face="Verdana">Text in Verdana</font>
    In a browser: Text in Verdana


Many fonts can be listed in the face attribute of <font>. The browser will check though the list until it finds a font it has installed. The combination "Arial, Verdana, Geneva, Palatino," is a good way to secure that a san-serif font is going to be used. (See Readability section.)

Note: The <font> tag is depreciated in HTML 4.0, which means it is no longer recommended for use. However, it is still needed in some instances.

top of page


IMAGES


The <img> tag displays a graphic file. The src attribute of this tag describes where the file is located. Take this folder structure as an example:

Sample Directory Structure

Example 1: Display an image that is in the same folder. Add the file katie.gif to index.html. As long as the image and file you are working on are in the same folder this will work.

    HTML code: <img src="katie.gif">
    In a browser:


Example 2: Add an image that is located in a sub-folder, on index.html add the image button.gif. To access button.gif, which is located in the folder "art," the suffix "art/" must be included in the link.

    HTML code: <img src="art/button.gif">
    In a browser:


Example 3: Add an image that is located out of the sub-folder, on nike.html add the image katie.gif. The prefix "../" must be used in a link to jump out of a sub-folder.

    HTML code: <img src="../katie.gif">
    In a browser:


Width and Height Attributes


Width and height are important to include in an <img> tag because they help the browser layout the page even before the image is viewable.
    HTML code: <img src="katie.gif" width="51" height="36">
    In a browser:


Border Attribute


The border attribute should usually be set to 0. However, border=1, will place a 1 pixel border around the entire image.
    HTML code: <img src="katie.gif" border="1">
    In a browser:


Alt Attribute


The alt attribute should contain a text description of every image. When you move your mouse over an image that contains an alt attribute, the text will become viewable. Alt attributes are helpful to viewers who have their images turned off and also includes additional information for handicapped viewers.
    HTML code: <img src="katie.gif" alt="Photo of Katie">
    In a browser: Photo of Katie


Align Attribute


Values for the align attribute include: left and right. They align the image in a horizontal direction. Values for the align attribute are left and right.
    HTML code: <img src="icon.gif" align="left">
    In a browser: Values for the align attribute are left and right. Values for the align attribute are left and right. Values for the align attribute are left and right.


Missing Images/Red X


When a browser cannot locate an image, it places the dreaded "red x" symbol.
    HTML code: <img src="this_is_not_a_file.gif">
    In a browser:


Common mistakes:
  1. Check the "src" attribute in the <img> tag to make sure it is correct.
  2. Check to make sure the file is uploaded.

Using an Image as a Link


To use an image as a link, place the <a> tag around the image.
    HTML code: <a href="http://www.yahoo.com"><img src="art/icon.gif"></a>
    In a browser:
Tip: To get rid of a border around an image link, add the img attribute "border="0". (See Images section.)

Controlling Load Time


Here are some tips to control page load time:
  • Compress images into .gif or .jpg formats.
  • Use a few small graphics, rather than one large one.
  • Use thumbnail graphics. They are a great way to let viewers get an idea before they wait for the full-size graphic.
  • Be sure the graphic is worth the wait.


Obey Copyright Laws


Don't use copyrighted photos, logos, graphics, or text. The Internet makes it very easy to steal other people's work, but that does not mean it is legal. Before swiping someone's work ask, "How would I feel if someone stole my work?" If the content must be used, obtain permission first.

top of page



All information compiled and researched by Katie Kleinman (Miller), last updated October 19, 2006. Sources are given when available.



HOME  

Resume  
About Me  
Portfolio  
Photos  
This Month's Poll  
My Stuff  
Make a Web Page  
I'm a beginner   
Basic Tags   
Web standards   
Create a design   
Generate Web traffic   
Useful Links   
Sites by K. Kleinman   
Nike Ads  
Links  
Site Map  

This Month's Poll:


What modern day invention would you give the cavemen?


View results so far.


top | HOME | Resume | About Me | Portfolio | Photos | Poll | My Stuff | Make a Web Page | Nike Ads | Links | Site Map
Katie Kleinman (Miller) Copyright © 1999-2008, All Rights Reserved. Questions, Comments? katiekleinman@hotmail.com
visits