Home

Using Various Languages: HTML

 

Introduction

No matter how good and efficient a web studio is, such as Microsoft Visual Studio 2005 or Microsoft Visual Web Developer 2005 Express Edition, at one time or another, you will need to go behind the scenes to visit the code it produced. In practicality, some things are hard to do visually and some details cannot be obtained in the design side. For this reason, you should know HTML as much as possible. Everything in the design of your web pages primarily follows HTML rules before adding ASP.NET and C# rules.

Practical LearningPractical Learning: Creating a Web Site

  1. Start Microsoft Visual Studio 2005 if necessary and, to create a web site, on the main menu, click File, position the mouse on New and click Web Site
  2. Make sure ASP.NET Web Site is selected.
    Make sure the Language combo box is set to Visual C#.
    Click the combo box on the left side of Browse, press End, and press Delete a few times (8), and change it to geometry1
  3. Click OK
  4. In the Solution Explorer, right-click C:\...\geometry\ and click New Folder
  5. Type images as the name of the new folder and press Enter
  6. Copy each of the following pictures to your My Documents folder:
     
  7. On the main menu, click Web Site -> Add Existing Item...
  8. Locate the folder where you saved the pictures, select each and press Enter
  9. In the Solution Explorer, right-click Default.aspx and click Rename
  10. Change the name to index.aspx and press Enter

Integrating HTML in Your Code

As seen already in the previous 3 lessons, you can create a complete ASP.NET web site by writing your own code using HTML and saving the file with an aspx extension. If you are working on a web form, you can open its source code and type new code or modify the existing one.

To access the code of a web form in Microsoft Visual Studio 2005, in the lower-left section of the window, you can click the Source button. In your source file, you can then type your HTML code following the rules of the language.

To assist you with writing HTML code, the window in which your type your text responds appropriately. For example, if you type <, the list of available HTML and ASP.NET options would display. Here is an example:

If you see the tag you want to use, you can double-click it. If you continue typing, the closest match to your character(s) would be selected. For example, if you start typing add, the ADDRESS would be selected:

If the tag you want to use is selected, to include it in your code, you have two options:

  • You can simply press Enter while the tag is selected
  • You can double-click the tag

The tag would then be added to the line and you can continue writing your code. If the tag has attributes (and most HTML tags do), you can start typing the attribute and use the same technique to include the attribute. If the attribute is supposed to receive a value (as most of them do), make sure you type = followed by double-quotes. A list of available options would then be presented to you. For example, if you are creating a link using the <a> tag, after including <a href=", the list of files of the current project would come up;

For an attribute such as href of the <a> tag, if the option you want to use is not in the list, you can click the last item of the list. This would open another dialog box or window you can use to complete the request.

Practical Learning: Using HTML Code in an ASP.NET Web Page

  1. To add a new web page, on the main menu, click Web Site -> Add New Item...
  2. Make sure Web Form is selected.
    Set the Name to rectangle and click Add
  3. Locate the <title> tag and change it to <title>Geometry: Rectangle</title>
  4. To add a new web page, on the main menu, click Web Site -> Add New Item...
  5. Make sure Web Form is selected.
    Set the Name to square and click Add
  6. Locate the <title> tag and change it to <title>Geometry: Square</title>
  7. Change the file as follows:
     
    <%@ Page Language="C#"
             AutoEventWireup="true"
             CodeFile="square.aspx.cs" Inherits="square" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Geometry: Square</title>
    </head>
    <body>
    
      <p>A square is a geometric figure made of 4 equal sides 
      connected to produce four right angles.</p>
      
    </body>
    </html>
  8. Press Enter twice
  9. Type the following code to create a table and notice how Microsoft Visual Studio 2005 will assist you with writing the code:
     
    <%@ Page Language="C#"
             AutoEventWireup="true"
             CodeFile="square.aspx.cs" Inherits="square" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Geometry: Square</title>
    </head>
    <body>
    
      <p>A square is a geometric figure made of 4 equal sides 
      connected to produce four right angles.</p>
      
            &nbsp;
            <table border="0" width="660">
                <tr>
                    <td colspan="2">
                        <hr color="#0000FF" />
                    </td>
                </tr>
                <tr>
                    <td align="center"><a href="index.aspx">Home</a></td>
                    <td align="center">Copyright  2007 FunctionX</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <hr color="#0000FF" />
                    </td>
                </tr>
            </table>
      
    </body>
    </html>
  10. Click the index.aspx tab to access the first file
  11. In the code editor, locate the title tag and change it to:
    <title>Geometry</title>
  12. Click the line that has the body tag. Press End and press Enter
  13. Type the following:
     
    <h1>Geometric Figures</h1>
      
    <p>This application is used to perform geometric calculations.</p>
  14. Press Enter twice and type <a h
  15. When the context menu shows href, press Enter and type ="
  16. In the list that appears, double-click square.aspx
  17. Complete it to display:
     
    <%@ Page Language="C#" AutoEventWireup="true"
        CodeFile="index.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Geometry</title>
    </head>
    <body>
      <h1 style="text-align:center">Geometric Figures</h1>
      
      <p>This application is used to perform geometric calculations.</p>
      
      <a href="square.aspx">Square</a>
      
    </body>
    </html>
  18. On the main menu, click Debug -> Start Without Debugging
    Access the browser to see the result:
     
  19. Return to your programming environment

The Response Object

To support the display of items on a web page, Active Server Pages provides an object called Response. This object is equipped with Write() that is used to display something on a web page. To access Write(), type Response, followed by a period, followed by Write() as follows:

Reponse.Write(Something)

The item to display must be written in the parenthese. If you want to display an empty space, a character, or a group of characters, pass it double-quoted in the parentheses of this method. Here is an example:

<%@ Page Language="C#" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

<% Response.Write("Coolfront Island"); %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<p>Please consult our catalogue and see why the Washington Tribune 
called us <i>the most attractive summer camp of the area</i>.</p>

<% Response.Write("Grier Summer Camp"); %>

</body>
</html>

This would produce:

If the item to display is a regular number, whether natural or decimal, you can write it withouth the quotes in the parentheses of Response.Write(). Here is an example:

<%@ Page Language="C#" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

<% Response.Write("Coolfront Island"); %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<p>Please consult our catalogue and see why the Washington Tribune 
called us <i>the most attractive summer camp of the area</i>.</p>

<% Response.Write("Copyright, "); %>
<% Response.Write(2007); %>
<% Response.Write(" Grier Summer Camp"); %>

</body>
</html>

This would produce:

Responding to HTML Tags

When you write HTML tags in your code, the browser would interpret them and publish a result to the user. As opposed to HTML tags, most of the scripts you write are not directly intended for your user's browser. They are presented to the web server that analyzes the script and responds to it. In fact, if you include Active Server Pages scripts in <% and %>, when the resulting page is presented to the user, the script sections are removed. This also means that a curious visitor would not know what your code looks like. For example, here is the code presented to the browser from the above web page:

<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

Coolfront Island

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<p>Please consult our catalogue and see why the Washington Tribune 
called us <i>the most attractive summer camp of the area</i>.</p>

Copyright, 2007 Grier Summer Camp

</body>
</html>

Notice that the Response.Write(" and "); have been removed. When a file with active code is sent to the server, the server checks the <% %> sections and their contents. Any section that it contains, for example, double-quoted strings passed to the Response.Write() method, is considered "as is". The server would remove <%, the Response.Write() expression, its double-quotes, and %>. This means that, whatever you enter in the parentheses of Response.Write() would be sent to the browser the same way you wrote it. This allows you to include HTML tags in the parentheses of Response.Write() but it is your responsibility to send it as regular HTML code. If you make mistakes, they would be presented to the browser, the server might not care and the server cannot or would not fix it. Based on this, you can include normal HTML code between double-quotes in the parentheses of Response.Write(). Consider the following example:

<%@ Page Language="C#" %>
<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<% Response.Write("<center><h1>Grier Summer Camp</h1></center>"); %>

<% Response.Write("<h2>Coolfront Island</h2>"); %>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<% Response.Write("<center>Copyright &copy; 2007 Grier Summer Camp<center>"); %>

</body>
</html>

When the server receives this code, it removes the <% Reponse.Write(" and the ") %> sections. Then its sends the rest to the browser:

<html>
<head>
<title>Grier Summer Camp</title>
</head>
<body>

<center><h1>Grier Summer Camp</h1></center>

<h2>Coolfront Island</h2>

<p>Coolfront Island, our star house of the season, is a 2-story 
like chateau featuring nicely finished brown bricks whose sight is 
tremendously appealing. The estate introduces two large living 
rooms with exquisite velour furniture. The colonial veranda offers 
a patio spanning two walls with a lost view down the far-reaching 
landscape. In this particular setting, besides their usual 
activities, children will learn special human needs to make their 
experience unforgettable.</p>

<center>Copyright &copy; 2007 Grier Summer Camp<center>

</body>
</html>

The browser then receives normal HTML tags that it must interpret and present the result in the intended web page:

In the same way, you can write any sophisticated HTML code in the parentheses Reponse.Write(). This consequently means that if you pass bad HTML code to a Response.Write() method, the result may be unpredictable.

 

Previous Copyright 2005-2007 FunctionX, Inc. Next