Other Guides
Introduction to Basic HTML
April 19, 2004 -  I. Choice of Web Server

Introduction to Basic HTML (Simple Web Page Design)

 

HTML is a mark-up, or formatting language.  (HyperText Markup Language).  You mark up text files with HTML tags so they can be read with browser software.  HTML does not describe text or graphic elements nor their exact placement.  HTML only tags the file with certain attributes that are later defined by the browser used to view the file.

 

HTML documents consist of two basic parts: the head and the body section. Both the head and body use pieces of code called tags. Tags style text, link files, embedded graphics, inset tables, and create forms.

Tags can be all capital letters or all lower case or a mix. Some tags can be used by themselves  Other tags must be used together.  Some tags require an opening tag and an ending tag. Some tags require additional attribute information supplied from the developer.

 

HTML Document. Each document should begin with the <HTML> tag to define the document as being a HTML document

<HTML>

</HTML>

 

Head Section. The first part of your HTML document should be the Head Section.  The Head Section provides information about the URL as well as its relationship with other pages at your  site. The only element visible to the user is the title of the page.

<HEAD>

</HEAD>

 

Title. The title tag should be a short description of the page.  It will appear in different locations on different browses.  Netscape shows the title in the title bar window.  Note:  Some search engines use the title in order to build searchable databases of Web documents.

<TITLE> Enter your Title of your web page </TITLE>

 

Body Section. The Body Section contains the bulk of your Web page, including all the text, graphics and formatting.

<BODY>

</BODY>

 

Headings.  You have up to 6 levels of headings.  Try to keep your headings down to one line because otherwise you can fill up a screen. 

<H1> This is a first level heading for my web page </H1>

 

Paragraphs. HTML does not recognize returns, tabs , or extra spaces  that your text editor recognizes.  To start a new paragraph, you use the Paragraph tag.

This is my first paragraph.                               This is tabbed over in the editor but will not appear in the web browser.  Extra            spaces will not be shown with the browser.  To break for a new paragraph you must enter a paragraph tag.

<P>

This will be my second paragraph.

 

Line Breaks.  To start a new line with out a paragraph break,  use the line tag.

This will be the first  line in the paragraph<BR>

This will be the second line in the paragraph<BR>

 

Horizontal Rule.  The Horizontal rule tag allows you to divide documents into sections by using rules.

<HR>

 

Bold.  One way to make your text stand out is to use Bold Face

<B>This line will be in bold.</B>

 

Italic. One way to make your text stand out is to use Italics.

<I>This line will be in italics</I><BR>

 

Center Heading.  To center a heading,  add an argument to the heading tag.

<H1 ALIGN=CENTER >

 

Center Text.  To center text, use the center tag

<CENTER>This will be centered</CENTER>

 

Preformatted Text. By using the Preformatted text tag, you can maintain original line breaks and spaces that you’ve inserted in the text.

<PRE>

This is my preformatted text

 

Row 1                                     Item 1                  This will allow            spaces

Row 2                                     Item 2

Row 3                                     Item 3                                    

</PRE>

 

Unordered List.  Used to list any series of items that have no particular order.  An unordered list indents the list from rest of the page using bullets. 

This is my unordered list

<UL>

<LI>First time in list</LI>

<LI>Second item in list</LI>

</UL>

 

Ordered List. Used to list any series of items that have a particular order. An ordered list indents the list from rest of the page using  some form of numbering.

This is my ordered list

<OL>

<LI>First item in list</LI>

<LI>Second item in list</LI>

</OL>

 

Linking to another page in your directory. You can link one HTML document to another HTML document in your current directory.

<A HREF=“nextpage.htm”>Description of the page</A>

 

Linking to another page not in the current directory. You can link one HTML document to another HTML in another directory. 

<A HREF=“nextdir/mypage.htm”>Description of the page</A>

 

Linking to another page at another location. You can link one HTML document to another HTML document anywhere.

<A HREF=“http:www.fmarion.edu”>Description of the page</A>

 

Linking to a graphics file.   You can place images in your web pages.  There are two common types of  graphics files used with HTML documents. 

GIF - Used for  logos, banners, and other computer generated images. GIF images are limited to 256 colors or less.

JPG - Used for photographs and for images with more than 256 colors.

The following will show a graphics file.

<IMG SRC=“mypicture.gif”>

 

Linking to email  You can create a link  to directly  email a message to you.

This will be a link to email

<A HREF=“mailto:myname@fmarion.edu”>My name or other description</A>

 

­­­­­­­­­­­­­­­­­

 
Print Article