Session 2

Open Bluefish

1. Copy the HTML script into the editor

Save the HTML script as first.html in the work folder

Open First in the browser

2. Replace the script in the editor

Save the new script as first.html in the work folder

Open First in the browser

3. Edit the HTML script

Save the HTML script as second.html in the work folder

Open Second in the browser

4. Copy the HTML script into the editor

Replace second.html in the work folder

Open Second in the browser

Activity

Create this website using the saved scripts and add more comments

Save this as index.html in the work folder

Lists / Super & Sub Scripts

1. Copy the Lists HTML into the editor

Save as list.html and Browse.

2. Copy the Nested Lists into the editor

Save as nested.html and Browse.

4. Copy the superscript / subscript HTML into the editor

Save as arithmetic.html and Browse.

Images & Tables

1. Copy the Images script into the editor

Save as images.html and Browse.

2. Copy the Tables script into the editor

Save as tables.html and Browse.

3. Add Images and Tables to Index

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body style="font-family:arial;">
<h2 style="text-align:center;color:blue;">My Website</h2>
<table style="width:100%;color:green;">
  <tr>
    <td>
  <ul type="I" style="color:green;">
    <li>About</li>
    <li>Participants
    <ul type="i" style="color:#ff00ff;">
      <li>First Name</li><li>Last Name</li><li>Age</li><li>Community</li>
    </ul>
    </li>
    <li>Programs</li>
    </ul>    
    </td>  
    <td><img src="images/prac01.jpg" alt="practical  1"  style="width: 100%"></td>
    <td><img src="images/prac02.jpg" alt="practical  2" style="width: 100%"></td>
    <td><img src="images/prac03.jpg" alt="practical  3" style="width: 100%"></td>
  </tr>
</table>  
<h3 style="text-align:center;color:blue;">About</h3>
<p>This is going to be my first website</p>    
<table style="width:100%;color:green;">
    <tr style="color:blue;"><th colspan="4">Participants</th></tr>
    <tr style="font-weight: bold">
    <td>First Name</td><td>Last Name</td><td>Gender</td><td>Community</td></tr>
    <tr><td>Jenny</td><td>Benson</td><td>Female</td><td>Maryborough</td></tr>
    <tr><td>Damien</td><td>Harris</td><td>Male</td><td>Gympie</td></tr>
    <tr><td>Jenny</td><td>Benson</td><td>Female</td><td>Bundaberg</td></tr>
    <tr><td>Damien</td><td>Harris</td><td>Male</td><td>Childers</td></tr>
</table>
<h3 style="text-align:center;color:blue;">Programs</h3>
<p>Programs go here</p>    
</body>
</html>

Save as index.html and Browse.

Session 2 - First Web Page

Open Bluefish

1. Copy the HTML script into the editor

Save the HTML script as first.html in the work folder

Open First in the browser

2. Replace the script in the editor

Save the new script as first.html in the work folder

Open First in the browser

3. Edit the HTML script

Save the HTML script as second.html in the work folder

Open Second in the browser

4. Copy the HTML script into the editor

Replace second.html in the work folder

Open Second in the browser

Activity

Create this website using the saved scripts and add more comments

Save this as index.html in the work folder

Lists / Super & Sub Scripts

1. Copy the Lists HTML into the editor

Save as list.html and Browse.

2. Copy the Nested Lists into the editor

Save as nested.html and Browse.

4. Copy the superscript / subscript HTML into the editor

Save as arithmetic.html and Browse.

Activity

Create this website using index.html and new list scripts

Save this as index.html in the work folder

Activity

Create this website

Save as sequence.html and Browse

Extension Activity

Use Colors File to add more colors to scripts

Images & Tables

1. Copy the Images script into the editor

Save as images.html and Browse.

2. Copy the Tables script into the editor

Save as tables.html and Browse.

3. Add Images and Tables to Index

Save as index.html and Browse.