Session 4 - Images & Tables
Right click on each image and save in the images subfolder
1. Images
Copy script into editor.
<!DOCTYPE html> <html lang="en-US"> <head> <title>My Website</title> </head> <body style="color:blue;font-family:Arial;"> <h1>Welcome to the website</h1> <h2>About</h2> <ul type="a" style="color:blue;"> <li>Content goes here</li> <li>Content goes here</li> </ul> <h2>The Team</h2> <img src="images/Carrie.jpg" alt="Carrie" width="15%"> <img src="images/Sally.jpg" alt="Sally" width="15%"> <img src="images/Jevonie.jpg" alt="Jevonie" width="15%"> <img src="images/Talesa.jpg" alt="Talesa" width="15%"> <img src="images/Alyssa.jpg" alt="Alyssa" width="15%"> </body> </html>
Save the HTML script as
index.html
in the work folder
Open
index.html
in the browser
2. Lists
Add Lists.
<!DOCTYPE html> <html lang="en-US"> <head> <title>My Website</title> </head> <body style="color:blue;font-family:Arial;"> <h1>Welcome to the Website</h1> <h2>About</h2> <h3>Fresh Steps Forward (FSF) was implemented in 2021 by Vasey Corporation P/L and Corrective Services New South Wales.</h3> <ul style="color:blue;"> <li>January 18 2021: FSF receives funding to open a facility at Francis Greenway Correctional Complex.</li> <li>March 5 2021: The program is delivered to female inmates over 5 months.</li> <li>June 18 2021: The first graduating FSF Students deliver a Demo Day in front of business and tech executives, entrepreneurs and government officials.</li> <li>July 17 2021: FSF expands into other Women's Correction and Detention Centres.</li> <li>October 5 2021: FSF Webs is launched in Women's Correction and Detention Centres.</li> <li>January 20 2022: FSF becomes a recognised Code 7370 qualification.</li> <li>March 6 2022: The program is delivered to female inmates in other states and territories.</li> </ul> <h2>The Team</h2> <img src="images/Carrie.jpg" alt="Carrie" width="15%"> <img src="images/Sally.jpg" alt="Sally" width="15%"> <img src="images/Jevonie.jpg" alt="Jevonie" width="15%"> <img src="images/Talesa.jpg" alt="Talesa" width="15%"> <img src="images/Alyssa.jpg" alt="Alyssa" width="15%"> </body> </html>
Save and Browse
3. Tables
Create a table of prison locations.
<table style="width:100%;"> <tr><th>Current Facilities</th><th>State</th><th>Year Launched</th><th>Serving</th></tr> <tr><td>Dillwynia Correction Centre</td><td>New South Wales</td><td>2021</td><td>Women</td></tr> <tr><td>John Morony Correction Centre</td><td>New South Wales</td><td>2021</td><td>Men</td></tr> <tr><td>Geoffrey Pearce Correctional Centre</td><td>New South Wales</td><td>2021</td><td>Men</td></tr> <tr><td>Orana Youth Justice Centre</td><td>New South South Wales</td><td>2021</td><td>Youth</td></tr> <tr><td>Acmena Youth Justice Centre</td><td>New South Wales</td><td>2021</td><td>Youth</td></tr> <tr><td>Broken Hill Correction Centre</td><td>New South Wales</td><td>2022</td><td>Men</td></tr> </table>
Put images into a table.
<table style="font-size:20px;"> <tr> <td><img src="images/Carrie.jpg" alt="Carrie" width="90%"><br/>Carrie</td> <td><img src="images/Sally.jpg" alt="Sally" width="90%"><br/>Sally</td> <td><img src="images/Jevonie.jpg" alt="Jevonie" width="90%"><br/>Jevonie</td> <td><img src="images/Talesa.jpg" alt="Talesa" width="90%"><br/>Talesa</td> <td><img src="images/Alyssa.jpg" alt="Alyssa" width="90%"><br/>Alyssa</td> </tr> </table>
