Virginia Montecinomontecino@gmu.edu  |  Education and Technology Resources
© copyright 1996 Virginia Montecino
 

HTML TAGS

basic Web page format  |  Meta search tags  |  basic tags  |  links  |  internal links   |  e-mail link
font and color  | block quote  |  open in new window  | insert graphic   |   tables   |  special character

BASIC FORMAT OF A WEB PAGE [These tags are used to create basic Web pages without using a Web page composing program like DreamWeaver or Front Page. These tags are the basic, conventional Web page tags, not just used on UNIX servers.] 

<html> This tag signifies this is an html document.

<head> This tag signifies the beginning of the header information.

<title> The Title goes here - it shows at the top of the browser  - but not on your Web page.</title>

</head> This tag signifies the end of the header information.

[Information above the <body> tag does not show on the Web page.]

<body> This tag signifies the beginning of the html material.

<h1> Your first header or title should go between these symbols. </h1>

<p> This tag designates a paragraph.</p>

<p> And this is the second paragraph...and so on.</p>

</body> This tag signifies the end of the body of the document.

</html> This tag signifies the end of the html document.



[Note: New html conventions (xhtml) will eventually require lower case for html tags, closing tags on paragraph endings: </p> and other "open" tags, like horizontal line tags: <hr  /> - Note the space after the "hr"- and other changes.   These conventions are compatible with xhtml. These changes are consistent with html. Current browsers do not use XHTML; however, it is possible to write XHTML that is compatible with HTML, and will work on existing HTML-based browsers. [W3C recommendation. Accessed 26 January 2000.]

Meta search tags [All info in brackets is explanatory and not part of the HTML code.]:

<meta http-equiv="keywords" content="english, English, distance learning, computer-mediated learning, computer-mediated education,  Internet literacy, university, college, evaluate Web sites, web-based class, scholarship, composition "> [This tag goes between the <head>and </head> tags.  Insert terms between the quotation marks to be searched by search engines to find your page contents. Some search engines recognize lower or upper case distinctions. It is not essential for you to create  a content section.  The terms above direct search engines to find my Web resources.

BASIC tags
<h1> Put your header here </h1>  A size 1 header is larger than a size 2. You can begin with any size you choose, designated by h1, h2, h3, for example. 

 <p> [This tag signifies a paragraph. No final paragraph tag is needed. Final tags, when used, have a "/" in front of the html letters.]

<br> [This tag at the end of a line signifies a line break.]

<center>Text between these two symbols will be centered on the page.</center> For example, if you place these tags before and after the <H2>,</H2> tags, your heading will be centered.]

<hr>_________________________________________________________________
[The hr symbol placed in between sections of text makes a horizontal divider bar to separate material on your page. The line you see above emulates the line that will appear in your home page if you use the <HR> option.]

<b> Words between these tags will show as bold text</b>

<i> Words between these tags will show as italicized text</i>

Link Tag: <a href="http://www.abc.def/ghi.edu/">Name for the Web document you want to appear on the Web page </a> [This is how you create a tag that will allow someone using your Web page to click and be taken to another Web page or Web site.  Replace the http:// address between the quotation marks: http://www.abc.def... with the exact address of the web document to which you want to link. The web address will not be displayed on your web page but only the name which you give the address. Replace the text "Name for the Web document ..." with the title of the Web page to which you want to link -  not the http:// address.  For example, my web page address in html is:
<a href="index.html"> Education and Technology Resources </a> The name " Education and Technology Resources " shows up on the web browser. Be sure to close your hyperlink tag with the </a> symbol.] 

Link to a Particular Place in your Document:[This linking operation requires you use both the link tag and the target tag.]

-- Link tag to set up the link to another place:
<a href="#name" > put text here you want to show on the browser </a>
[Substitute name for the term you want to call this tag right after the # symbol. You must include the # symbol and the quotation marks.]
-- Target tag to identify the place to which you want to link: 
<a name="put the same name here you put after the # symbol, but without the # symbol "< /a>
[Be sure the name you put between these quotes matches the name with the # symbol above. Include the quotation marks but not the # symbol. Insert this tag right before the place in the document to which you want to link.]
 
Create an email link: <address> e-mail me at: <a href="mailto:Put your email address with extension here">Put your email name with extension here also</a></address>
[The tags above will allow people to send you an e-mail by clicking on the link created when you type in the html tags above.]

Set Font Size and Color other than the default settings:
<font size=5 color=red> text</font>
[Experiment with color and font size to find what you like. It is easier to use an html editor to try out various sizes of font and colors.]

Indent quoted material:
<blockquote>Insert material to be blocked between these tags</blockquote>

Open a new window to display a linked site: 
<a href="http://home.cox.rr.com/edtech/" target="_blank">Education and Technology Resources</a>
[The target="blank" tag inserted right after the Web address will take the user to the Education and Technology Resources Web site, while still keeping the point-of-origin site page from which the link originated.]

Insert Graphics Files:
<img src="picture.jpg" align=left> [Graphics usually have a .jpg or .gif file extension. Insert the name of your image file between the quotation marks to replace the "picture.jpg" filename.  The file could have a .gif extension. The "ALIGN =left" tag  signifies the image is to be aligned to the left of the web page. You can choose left, right, center.]

Tables
<CENTER><table BORDER=1 CELLSPACING=1 CELLPADDING=1 WIDTH="90%" >
<tr>
<td>cell contents</td>

<td>cell contents</td>
</tr>
</table></CENTER>
[NOTE: This table is centered on the screen.  This table has two columns.  Each column begins with a <td> tag and ends with a </td> tag.You can also choose "left" or "right" aligned by changing the "CENTER" to "left" or "right" in the <CENTER> beginning and ending tags.  This table has a 1 pixel border, a 1 pixel cell spacing, and a 1 pixel cell padding.  The width is 90% of the window.  You can change the border width to 0 on up.  You can also change the cell spacing and cell padding.  A table can be as wide as 100% of the screen or designated in pixels (for ex: 650). Just replace the "90%" with a number of pixels.  For ex:: "650".]

Html tags for special characters:
 
Character  HTML  Description
 <   (less than ) &lt; Useful when you want the tags to show - when demonstrating html
 >   (greater than) &gt;     "    "            "          "            "           " 
 &  &amp;  ampersand
 " &quot; quotation mark
Registered TM  ® &reg  registered trademark symbol
Registered TM  ® &#174; alternative trademark tag
Copyright  © &copy; standard format:  © Copyright 1996 Virginia Montecino
Copyright  © &#169; alternative copyright symbol
Space (non break) &nbsp; useful for blank rows in tables or spaces in text.
 J <font face="Wingdings">&#74; </font> smiley face 

back to top


Virginia Montecino | montecino@gmu.edu | Education and Technology Resources