N341/N342  HyperText Markup Language

 Modified: 

HTML
Information Sources
 
   

Main HTML Ideas

 

   

Use an editor?

FrontPage, Word, Notepad, and many other browsers/word processors/development environments supply HTML editors or can generate HTML. These tools are useful both for writing and learning HTML. Since the file produced is just ASCII, you can look at the results to learn about HTML. We'll need to know how to write some HTML by hand in order to write programs that generate HTML documents on the fly.
   

Balanced Tags

HTML uses balanced tags to mark text for special treatment.  <b>Bold</b> makes the text Bold.

The <b> starts and the </b> ends the marked area.

   

Nested Tags

Markup tags can be nested:

<b>B<i><u>ol</u>d</i></b> produces Bold.

   

Hyperlink  

 

 Links or references to areas of the same or other documents is the fundamental power of HTML.

Relative links

A link to another HTML file on the same machine can use a relative link. Linking to the course syllabus in the same directory as this file can be done by:

      <a href="Syllabus.htm">
            Syllabus
      </a>     

where Syllabus.htm is the name of the file to link.

   

Absolute links

 

 A link to another HTML file on a different machine must use an absolute link, which gives the full path to the document. Linking to the course syllabus on the IUS server can be done by:

<a href="http://www.ius.edu/RWISMAN/N341/html/Syllabus.htm">
      Syllabus
</a> 

 

Website
Structure

 

 The structure of  website is defined by the links from one HTML file to another HTML file. A page named Syllabus.htm with the following relative links defines the structure in the figure at right:
   
 
<a href="HW1.htm">Home Work 1</a>
<a href="HTML.htm">HTML review</a>
<a href="HW2.htm">Home Work 2</a>
   

Images

 

 Images can be used in place of text for links. The camel  can serve as a hyperlink to the relative syllabus file by:
 
<a href="Syllabus.htm">
     <img SRC="html_5.gif">
</a>

Result:

Image maps can be created relatively easily also. The structure chart is navigated by defining the x,y coordinates of the upper-left and lower-right corners of rectangles and their associated link. 

<img border="0" src="html_6.jpg"
         usemap="#website" width="306" height="83">
<Map name="website">
      <area shape="rect" coords="109,53,196,79" href="HW1.htm">
      <area shape="rect" coords="98,6,208,30" href="Syllabus.htm">
      <area shape="rect" coords="1,53,88,79" href="HTML.htm">
      <area shape="rect" coords="217,53,303,79" href="HW2.htm">
</Map>
   

Sending data

 

 Not only can a new link be made using a hyperlink, data can also be sent along as part of the link. The data can be read at the link destination and used for interaction between the client browser and the Web server. The data follows the link separated by a '?', the link to Yahoo! search engine with the data to search for IUS is:

<a href="http://search.yahoo.com/bin/search?p=IUS">
      Find IUS on Yahoo!
</a>

Result: Find IUS on Yahoo!

where p= is a variable used by the Yahoo! program named search.

   

Exercise 
1    

 

Creating a Web Page

Lets build a small Web page on the IUS LAN to practice some of these ideas.

The first step is to setup your IUS account to publish Web pages:

  1. Login to the IUS LAN.
  2. Click http://www.ius.edu/SpinWeb to run a setup utility and follow instructions.
  3. Logout and login again to have access to the new W: drive.

Create a small HTML file on your IUS directory:

Run Notepad:

  1. Type something clever, perhaps your name in bold.
  2. Save the file as W:\homepage.htm

View the Web page:

  1. Open a second browser window so you can still use this one.
  2. Enter the location to the Web browser as:

      3. www.ius.edu/<your IUS login name>

    Mine is www.ius.edu/rwisman, that should print your clever something in the browser. Notice that the browser location changes to the real location of the homepage.htm file.

   

Relative and Absolute Links
  1. Run another Notepad, we want to edit two files at one time.
    • Type something else clever.
    • Save the file as W:\page1.htm
       
  2. Edit homepage.htm to include two links:
    • a relative link to page1.htm
    • and an absolute link to the google.com search engine with data to search on your last name.

      Try hitting google.com by hand and copy the location after searching your on last name. See Sending data above.
 

Exercise 
2    

FrontPage

Creating a Web Page

Use Frontpage, a Web page development tool, to build a Web page on the IUS LAN.
  1. Login to the IUS LAN.
  2. Open FrontPage. Look in Microsoft Office folder. 
  3. Open a new file by .
    1. Add a relative link to your homepage.htm.
    2. Save the file as W:\page2.htm
  4. Test the operation of each of the lower-left control tabs .
 
 

Tables  

 

 Tables are the main means of organizing text into an identifiable grouping on a HTML page. A table consists of three main definition tags:
  1. table - defines the TABLE, BORDER, etc.
  2. tr - defines a table row.
  3. td - defines the table column data.

Basic Table
<table BORDER >
    <tr>
        <td>
              Row 1
              Column 1
              data
        </td>
        <td>
               Row 1
               Column 2
               data
        </td>
   </tr>
   <tr>
        <td>
              Row 2
              Column 1
              data
        </td>
        <td>
              Row 2
              Column 2
              data
        </td>
        <td>
              Row 2
              Column 3
              data
        </td>
  </tr>
</table>		  
Row 1 Column 1 data Row 1 Column 2 data
Row 2 Column 1 data Row 2 Column 2 data Row 2 Column 3 data
 

Tables of Tables

Structure similar to pages where site navigation is at left (Row 1 Column 1) and task navigation is at top (Row 1 Column 2).
<table BORDER BGCOLOR="yellow" >
  <tr>
    <td>  
        Row 1 <br>Column 1
    </td>
    <td>

       <table BORDER="1" BGCOLOR="aqua">
        <tr>
          <td>Row 1 Column 2</td>
        </tr>
        <tr>
          <td>Row 2 Column 2</td>
         </tr>
      </table>

    </td>
   </tr>
</table>		  
Row 1
Column 1
Row 1
Column 2
Row 2
Column 2

Exercise 
3.1    

 

Creating a Table

Create a Web page with 3 rows and 4 columns.
  1. Open Notepad.
  2. Copy and paste the HTML for the basic 2x3 table above. 
  3. Modify for 3x4 table.
  4. Save as W:\page3.htm
  5. Test.
 

Tables
and
Text
URLs

Suppose we wanted to make one of those clever pages with a menu bar at top of the page. Something like this:
Syllabus Goals Grades Resources

would have this source:

<center>
    <table BGCOLOR="#C0C0C0" >
       <tr> 
             <td><a href="Syllabus.htm">Syllabus</a></td>
             <td><a href="Goals.htm">Goals</a></td>
             <td><a href="Grades.htm">Grades</a></td>
             <td>
                   <a href="Resource.htm">Resources</a>
             </td>
      </tr>
    </table>
</center>

Exercise 
3.2    

 

Organizing Links with a Table

Organize hyperlinks using a table.
  1. Copy and paste the above table.
  2. Change links to homepage.htm and page1.htm.
  3. Save as W:\page4.htm
  4. Test.
   

Tables and Image URLs

 One with images instead of text:
Syllabus Goals Grades Resources

would have this source:

    <center>
     <table BGCOLOR="#C0C0C0" >
        <tr> 
          <td><a href="Syllabus.htm">
              <img SRC="html_1.jpg" alt="Syllabus"></a>
          </td>
          <td><a href="Goals.htm">
              <img SRC="html_2.jpg" alt="Goals">    </a>
          </td>
          <td><a href="Grades.htm">
              <img SRC="html_3.jpg" alt="Grades">    </a>
          </td>
          <td><a href="Resource.htm">
              <img SRC="html_4.jpg" alt="Resources">    </a>
          </td>
        </tr>
      </table>
    </center>

Exercise 
3.3    

 

Clickable Images

Modify links to appear as an image rather than text.
  1. Modify page4.htm to add clickable image links.
  2. Right click in IE on two images from this page and Save Picture as.....to your W: directory with your homepage.htm.
  3. For the page1.htm and page2.htm links, define a clickable image to link to each of the pages. Modify HREF links to use an the image as in above example.
  4. Test that you can click on an image link for each.
 

Alternative Text

 To define an alternate or tooltip text to the image. When the mouse pointer is over the first image for a moment, the alt word "Syllabus" will appear.

<a href="Syllabus.htm">
   <img SRC="html_1.jpg" alt="Syllabus">
</a>

Syllabus
   
   

Exercise  4  

 

Tables and Images

 Do a clickable image in a table using FrontPage.
  1. Use FrontPage to edit homepage.htm.
  2. Create a table with 1 row and 3 columns using the table tool .
  3. Modify the table to use clickable images instead, as in the exercise above.
  4. Test that you can click on an image link.

Create an image map with clickable navigation.

  1. Right click on the image at right and copy.
  2. Use FrontPage to create a new page.
  3. Paste the image into the new page.
  4. Click View | Toolbars  | Pictures.
  5. Select one of the image map tools to mark a clickable hotspot area. 
  6. Define a hotspot for page1.htm and page2.htm.
  7. Save as W:\page4.htm
  8. Test by clicking the Preview tab.

Take a picture of yourself and repeat the exercise.
   
   

Forms    

 

 Forms provide a way for the user at a browser to send data back to the server.

If you think about it, the browser already sends requests for files to the server and the server responds by sending the file back (or a cryptic error message if not found). A form just adds some data to that request. We have already seen how the Yahoo! server can be sent search data in an URL, in either HTML or entering as part of the location directly:

<a href="http://search.yahoo.com/bin/search?p=IUS">
      Find IUS on Yahoo!
</a>     

Get

The GET method is the HTML way of adding server data at the end of a URL. Our own Yahoo! search page using the GET method is done by the HTML in the table below at left and it would look like in the browser at right. Type in a search term and Yahoo! search engine will be invoked.
 
Enter Yahoo! search text <br>
<form method=GET 
     action="http://search.yahoo.com/bin/search"> 
     <INPUT type=text name="p">
</form>		 Enter Yahoo! search text


<form method=GET
           action="http://search.yahoo.com/bin/search">

  • method=GET - Send data to the server using the GET method, append data to the URL.
     
  • action="http://search.yahoo.com/bin/search" - When the ENTER key is pressed in the text-box, the text is appended to the URL listed in the action.

    If IUS were entered in the text-box, the action would be:

    http://search.yahoo.com/bin/search?p=IUS
     

<INPUT type=text name="p">

  • type=text - Input will be in a text-box.
     
  • name="p" - Whatever is typed in the text-box will be assigned to the variable "p".

    For input IUS, the URL will have ?p=IUS appended.
   
   

Exercise 
5 

User Input Form and
Get

Currently the google.com link on your homepage always searches on our last name. To use google.com to do an arbitrary search, we'll need a form to get user input and add it to the URL as data.
  1. Open a new page in FrontPage.
  2. Copy and paste the above form HTML example that searches Yahoo!.
  3. Modify the form to search google.com instead.