Title Graphic - HTML / CSS Help





 

HTML Resources

  
  Quick Jump: HTML Resources | How-To / Code Examples | Links | Font | Text Styles | Spacing Issues | Tables | Images
 
The links below are intended to be sources of information for learning more about coding. I have used many of these sources, some I have not. I just browsed and they had relevant information or someone reccomended them to me. Links to other websites and Example links from this site will open in a new window.		  
  HTML Tricks
HTML tricks, web page design tips, and traffic generating ideas. 		 
  WebReference.com
Experts, sitemap, references, services, code tools, etc. 		 
  WebDeveloper.com
WebDeveloper.com ®: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More! 		 
  WebMonkey.com
How to and Quick Reference Libraries, and Discussions		  
  Web Developers Virtual Library
Encyclopedia of Web Design Tutorials, Articles and Discussions		  
  BigNoseBird.com
HTML, graphics, free CGI scripts, tutorials, etc.		  
  Java-Scripts.Net
Free Java Scripts.		  
  Web Design In A Nutshell
This book is my web design Bible as I've taken to calling it this semester with all the online projects I've had. It covers a little bit of everything, HMTML, CSS, Java, Forms, etc, etc...		  
 

How to Use HTML and XHTML: Visually in Full Color
This is a reference for beginners, the bright colored graphics and humorous content makes the information a lot more interesting and is a departure from the standard black and white of programming books.

An exerpt from page 28 on background images.

 


There is no closing tag for paragaph. There is no closing tag for paragaph.
 

How-To / Code Examples
  First, every web page has 4 tags (and their corresponding closing tags) in common. HTML, HEAD, TITLE, and BODY. These tags make up the basic framework of most websites and are used in the following order.

<HTML>
<HEAD>
<TITLE>  </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Most tags are placed between the <Body> and </Body> tags. The <Body> tag is where you make changes to the background of your website. The <Title> </Title> tag displays the title of the page at the top of the browser window. The title for this site is HTML / CSS Help - HTML Help.

 
     
 

Links

  
 
 
  Links are placed in a webpage using the anchor or <a href="url"> and </a> tag. Place the text or graphic you want to make into a link between the <a href="url"> and </a> tags.

Either text or images can be made into links. I have described how to make an image a link in the images section below.

Images may be used as links by placing the <img src="imagename"> tag between the <a href="url"> and </a> tags where you would normally place text.

 
     
 

Font

  
 
 
 

Font color

  
  Changing the font color is done by inserting <font color="#fffff"> or <font color="black"> around the text you want to change.

I would reccomend that you never, or very rarely use the standard blue color for text since this is the default color for links. Users may mistake this text for a link and become frustrated when the "link" doesn't work.

 
 

Font size

  
  Changing the font size is done by inserting <size="6"> attribute into the font tag. Yoy may either use, a value from -1 to +6 or use pt size.  
     
 

Text Styles

  
 
 
 

Bold

  
  To bold text, use the <B> and </B> tags around the text you wish to bold.  
 

Italics

  
  To italicize text, use the <I> and </I> tags around the text you wish to italicize.  
 

Underline

  
  To underline text, use the <u> and </u> tags around the text you wish to underline.
**I reccommend using this tag sparingly to avoid confusion with text which is not a hyperlink (link) being mistaken as a hyperlink. 		 
     
 

Spacing Issues

  
 
 
 

Horizontal Rule

  
  To place a line, or rule on the page, use the <hr> tag. The horizontal rule can be changed in thickness and width by inserting width=# or height=# into the tag. Inserting hr=noshade will create a solid black rule.  
 

Paragraph

  
  To skip a line between text, use the <p> and </p> tags around the text you wish to skip a line in between.  
 

Break

  
  To end a line and start text on the next line, use the <br> before the text you want the break in or at the end of the preceeding text. There is no closing tag for break.  
 

Center

  
  Centering the text is done by putting the <center> and </center> tags at the beginning and end of the text you wish to center.  
 

Ordered Lists

  
  The ordered list is a list with numbers before each line of text. The code automatically puts the number in for you. The <ol> and </ol> tags are placed at the beginning and end of the list. Inbetween these tags are the <li> tags, or list items. When using lists in a style sheet, use a </li> tag for each list item. It is unnecessary in HTML. Each list item is a number in your list. The numbers can be changed by adding these type attributes.
  • type=1 for numbers
  • type=A for uppercase letters
  • type=a for lowercase letters
  • I for uppercase roman
  • i for lowercase roman
You may change the numbering for the entire list within the <ol> or in the individiual list item tags <li> for each individual list item. The tag for the following list is <ol type=A>.
  1. List Item
  2. List Item
  
 

Unordered list

  
  An unordered list is a standard list with bullets before each line of text. The code automatically puts the bullet in for you. The <ul> and </ul> tags are placed at the beginning and end of the list. Inbetween these tags are the <li> tags, or list items. When using lists in a style sheet, use a </li> tag for each list item. It is unnecessary in HTML. Each list item is a bullet in your list. The bullets can be changed by adding these type attributes.
  • type=square (as in this list item) for square bullets
  • type=circle (as in this list item) for circle bullets
  • type=disc, or just <li> for solid bullets (the default, as in this list item)
You may change the bullets for the entire list within the <ol> tag or in the individiual list item tags <li> for each individual list item as in the list above. 		 
     
 

Tables

  
 
 
  Tables are made up of three basic tags and their closing tags. These tags are the:
  • table tag <table> </table>
  • table row tag <tr> </tr>
  • table data tag <td> </td>

The <table> and </table> tags are placed at the beginning and end of a table. Tables are made up of columns and rows. The <tr> </tr> tags represent the rows and the <td> </td> represent the columns.

The code for a 2 column 3 row table looks like this:
<table>
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3 Column 1</td>
<td>Row 3 Column 2</td>
</tr>
</table>

Which will display like this

Table Tips

  • Changing the font color in a table is done by placing the <font> and </font> tags around the cell contents between the <td> and </td> tags.

  • You can change the spacing in your tables by placing the <center> and </center> tags before and after the table to center the entire table.

  • Changing the spacing an entire row can be done by using <tr align=center> (or left, or right) or valign for vertical alignment

  • Sizing your table is done by entering <table width="%"> or <table width="800"> (800 pixels wide)

  • Cellspacing and cellpadding attributes can be added to the <table> tag to change the spacing within a table cell. Cell spacing will change the aount of space between table cells. Cellpadding will change the space around the text (or whatever) you have in the cell and the edges of the cell itself.
 
     
 

Images

  
 
 
  Images are placed in a webpage using the <img src="imagename"> tag. There is no closing tag for a graphic.

You can specify the size of an image by entering the height="#px" and width="#px" attributes into the IMG tag. #px being the pixel sixe of the image. I reccommend doing this to speed the loading of your webpage. (More can be found on this on the Graphics page.)

Place the alt='text' attribute in your IMG tag with a description of or the name of the graphic (text). Use single quotes. This will display the text entered in the space for the graphic while it loads. Also, for users using assistive technology, this will allow the program to read the text and tell the user what is there on the website.

Placing the align=right or left, top, bottom attribute in the IMG tag will tell the text where to line up around the image.

Images may be used as links by placing the <img src="imagename"> tag between the <a href="url"> and </a> tags where you would normally place text.

More information on images can be found on my Graphics page.

 


setstats 1