[This is preliminary documentation and subject to change]

Overview of HTML

You should be familiar with HTML before advancing to Active Server Pages (ASP). An HTML page is static information for a general audience. The information displayed by an HTML page does not take into consideration the needs or the wants of the individual user. An Active Server Page is dynamically produced for each user.. While the Web server processes an ASP page, the ASP code isconverted into HTML and sent to the user. The following information provides only a brief overview of HTML, and a novice will need additional resources for a complete understanding. 

You can use any text editor to author HTML and ASP pages, such as WordPad or Notepad. Microsoft® Visual Interdev® (VI) and Microsoft FrontPage® (FP) are programmed to display HTML code and ASP code in different colors than the plain text on your page, so they make code easier to read. VI and FP can also manage Web projects and applications.

In your text editor, paste the following code. Though not necessary, you need to include this code to develop properly formatted HTML pages.

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

    </BODY>
  </HTML>

Each tag pair consists of an "open" and a "close" tag. The close tag always starts with the "/" character. These tags surround the sections of your page that are affected by that tag. All the tags for your page are contained within the <HTML> tag pair, which indicates that everything must be interpreted by an HTML interpreter. Any text that you do not want displayed in in the Web browser is contained within the <HEAD> tags, which contain the <TITLE> tags. The title for your Web page is displayed above the menu bar in Internet Explorer (IE). All the text that you want displayed to your user is held within the <BODY> tags.

In order for your page to go through an HTML interpreter, you need to view it in an internet browser such as IE. To view your file, type the path to your filein the IE Address bar. For example, if you saved your file in C:\Temp\My HTML.htm, type C:\Temp\My HTML.htm into the IE Address bar. If you put text inside the <BODY> tags, you should see the text in IE. If you put text inside the <TITLE> tags, you should see the title of your page at the very top of IE, followed by "- Microsoft Internet Explorer".

Viewing your Web page this way is adequatefor editing, but you are not sending the page through a Web server. When it comes time to write ASP pages, they must be sent through Internet Information Services (IIS)to translate the ASP code into HTML code before sending the code to a Web browser on your machine or on someone else's machine. If you have IIS already installed, save your Web page in C:\Inetpub\Wwwroot\My HTML.htm (if you installed Windows on the C: drive). C:\Inetpub\Wwwroot is the root Web folder for your Web site. Once you save your file there, type Http://Localhost/My HTML.htm into the Address bar of IE and press ENTER. Http://Localhost is mapped through IIS to your C:\Inetpub\Wwwroot folder.

The following table lists the most common HTML tags. 

HTML tagDescription
<P> </P>Use the <P> tag to begin a new paragraph. A blank line is inserted before and after the text.
<BR>Use the <BR> tag to begin a new line in a paragraph. The <BR> does not need a close tag.
<Hn> </Hn>Use the <Hn> tag to identify heading text. The value n specifies different font sizes and should be an integer between 1 and 6, where 1 is the largest font and 6 is the smallest.
<U> </U>Use the <U> to underline text.
<B> </B>Use the <B> tag to boldface text.
<FONT SIZE=n FACE=font type COLOR=color> < /FONT >Use the <FONT> tag to set font characteristics for your text, for example size, typeface, or color.
<A HREF=file > </A>Use the <A HREF=file > tag to create a hyperlink to a location in a file or to another document.
<UL> </UL>Use the <UL> tag to create a bullet list of items. Each list item begins with a <LI> tag and ends with a </LI> tag. In your text editor, your list should resemble the following code:
  <UL> 
  <LI>List item 1</LI>
  <LI>List item 2</LI>
  </UL> 
<OL> </OL>Use the <OL> tag to create a numbered list of items. Each list item must begin with a <LI> tag.
<LI>Use the <LI> to specify a list item.
<TABLE> </TABLE>Use the <TABLE> tag to create a table. Each row begins with a <TR> tag and ends with a </TR> tag. Each column begins with <TD> tag and ends with a </TD> tag. Column tags are contained within the row tag. In your text editor, your table should resemble the following code:
  <TABLE BORDER="1"> 
  <TR><TH>Column Header</TH><TH>Column Header</TH></TR>
  <TR><TD>Row 1, Cell 1</TD><TD>Row 1, Cell 2</TD></TR>
  <TR><TD>Row 2, Cell 1</TD><TD>Row 2, Cell 2</TD></TR>
  </TABLE> 
<IMG SRC=image_file ALT=text_if_image_is_missing>Use the <IMG SRC=image_filet> tag to insert an image into a Web page.
<BGSOUND SRC=sound file>Use the <BGSOUND SRC=sound file> tag to play a background sound after the page loads. This functionality is supported only by Microsoft Internet Explorer version 2.0 or later.

You can use tags within tags, for example, italicizing text in a table. Here is an example of an HTML file that uses all of the tags from the table above.

<HTML>
  <HEAD>
  <TITLE>Jack's Web Page</TITLE>
  </HEAD>
 <BODY>
  <H1 ALIGN="center"><U>Jack's Web Page</U></H1>
  I am Jack.<BR>These are my interests.
  <H3>Jack's Interests</H3>
  <UL>
    <LI>Exploring</LI>
    <LI>Reading history books</LI>
    <LI>Writing Web pages</LI>
  </UL>
  Do you like exploring?<BR>
  Before you go exploring do the following things:
  <OL>
    <LI>Drink lots of water</LI>
    <LI>Do some stretches</LI>
  </OL>
  <P><FONT SIZE="6" COLOR="blue" FACE="Script">Drink water to hydrate your body.&nbsp;
  Your muscles need water.<BR>Stretch to avoid injury.&nbsp; Cold muscles can tear.</FONT>
  <P>
  When you go exploring, take the following things:
  <TABLE BORDER="1" ALIGN="center"> 
    <TR><TH>Item</TH><TH>Reason</TH></TR>
    <TR><TD>Hat</TD><TD><I>In case of a hot sun.</I></TD></TR>
    <TR><TD>Sweater</TD><TD><I>In case of cold.</I></TD></TR>
    <TR><TD>Food and water</TD><TD><I>In case of hunger.</I></TD></TR>
  </TABLE></P>
  <P>Check out this picture:<BR>
  <IMG SRC="http://msdn.microsoft.com/msdn-online/shared/graphics/banners/workshop-banner.gif" ALT="Microsoft Web 
Workshop Logo"><BR>
  I got it from the <A HREF="http://msdn.microsoft.com/workshop/" TARGET="_blank">Microsoft Web Workshop</A>.
  </P>
 </BODY>
</HTML>

Related Topics


© 1997-2001 Microsoft Corporation. All rights reserved.