N341/N342  HyperText Markup Language

 Modified: 

HTML
Information Sources
 
   

Main HTML Ideas

 

   

Getting Started

 Any text editor can be used to create an HTML document and any browser to render, but we will use FrontPage and Internet Explorer 8 or later.
At Home

Check that Microsoft Office FrontPage 2003 is installed by:

Check that your computer has at least IE8 by opening IE and:

IE settings:

  • Tools | Internet Options | Advanced | Uncheck Disable script debugging (Internet Explorer)
     
  • General | Browsing history | Settings | Check for newer versions of stored files | Every time I visit the webpage
   
   

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 

 

 

 

 

 

 

 

 

 

 

 

 

Exercise 2

 

Creating a Web Page

Let's build a small Web page on the IU Web server to practice some of these ideas.

The first step is to map the Web server disk to a drive on your computer:

  1. Open Computer
  2. Map Network drive
  3. Drive: W
  4. Folder: \\iu-uits-eiwp1.ads.iu.edu\username\wwwroot
  5. Finish
  6. Login using: ads\username
                      password

Create a small HTML file on your Web directory:

  1. Open FrontPage. Look in Microsoft Office folder. 
  2. Open a new file by .
  3. Type something clever, perhaps your name in bold.
  4. Save the file as W:\index.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. iu-uits-eiwp1.ads.iu.edu/<your username>

    Mine is iu-uits-eiwp1.ads.iu.edu/rwisman, that should print your clever something in the browser. Notice that the browser location changes to the real location of the index.htm file.

   

Relative and Absolute Links
  1. In FrontPage, create a new file by .
    • Type something else clever.
    • Save the file as W:\page1.htm
       
  3. Edit index.htm
    • Click on Code to see the HTML code:
       
    • Include two links:
      • a relative link to page1.htm, similar to example below:

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

         

      • and an absolute link to the search.yahoo.com with data to search on your name.

        Start by copy-and-paste the example below:

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

  4. Click on Preview:
     
  5. Test!
 
 
 

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. Copy and paste the HTML for the basic 2x3 table above. 
  2. Modify for 3x4 table.
  3. Save as W:\page3.htm
  4. 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 index.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 index.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 index.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">
     <INPUT type=submit>
</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.

 

<INPUT type=submit>

  • type=submit - A button with the label "Submit Query".

    When clicked, the form data is submitted.
   
   

Exercise 
5 

User Input Form and
Get

Currently the search.yahoo.com link on your homepage always searches on our name, the following form allows search on any text:
Enter Yahoo! search text <br>
<form method=GET 
     action="http://search.yahoo.com/bin/search"> 
     <INPUT type=text name="p">
     <INPUT type=submit>
</form>

Change to use google.com to do an arbitrary search.

  1. Google your name in a browser and note the URL, especially after the ? mark. You can ignore everything after the & mark.
  2. Open a new page in FrontPage.
  3. Copy and paste the above form HTML example that searches Yahoo!.
  4. Modify the form to search google.com instead.
  5. Preview and test!