Website authoring

Fun Project 1: Prepare Your School Lunch Menu

How to insert table and images?

How to insert a CSS stylesheet?

Refer to w3schools

Basic HTML table structure

The following elements are needed to define a basic table:

- table & /table : main table begin and end tag
- tr & /tr : tag for a complete row
- td & /td : cell data
- th & /th : header data (optional)

Special table tags (rowspan & colspan)

Colspan and rowspan tags connect cells:

Complete example of lunch menu website

<!DOCTYPE html>
<html>

<head>
    <title>Lunch Menu</title>
    <style>
        body {
            background-image: url("food.jpg");
        }
        
        h1 {
            color: rgb(13, 136, 13);
            text-align: center;
            font-size: 30pt;
            font-family: Arial, Helvetica, sans-serif;
            background-color: aliceblue;
            margin-left: 10%;
            margin-right: 10%;
        }
        
        p {
            color: rgb(255, 255, 255);
            font-size: 14pt;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        
        td,
        th {
            background-color: beige;
            text-align: center;
            border-width: 2px;
            border-style: solid;
            border-color: black;
        }
        
        table {
            margin-left: auto;
            margin-right: auto;
            border-width: 5px;
            border-style: dotted;
            border-color: white;
        }
    </style>
</head>

<body>

    <h1>Lunch Menu</h1>

    <p>Options for week ..</p>
    <p>Canteen opens at 11am</p>

    <table>
        <tr>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
        </tr>
        <tr>
            <td>Cheeseburger</td>
            <td>Currywurst</td>
            <td>Pizza</td>
        </tr>
        <tr>
            <td>3 Euro</td>
            <td>2 Euro</td>
            <td>4 Euro</td>
        </tr>
        <tr>
            <td><img src="cheeseburger.jpg" alt="Cheesebuger" width="200"></td>
            <td><img src="currywurst.jpg" alt="Currywurst" width="200"></td>
            <td><img src="pizza.jpg" alt="Pizza" width="200"></td>
        </tr>
    </table>

</body>

</html>

Fun Project 2: Design your own Glossary

How to insert table and images?

How to insert a CSS stylesheet?

Refer to w3schools

Complete example of a glossary website – preview html code

<!DOCTYPE html>
<html>

<head>
    <title>Glossary</title>

    <style>
        body {
            background-color: rgb(255, 255, 255);
            background-image: url("library.jpg");
        }
        
        h1 {
            text-align: center;
            width: 60%;
            color: rgb(153, 92, 92);
            text-align: center;
            font-size: 40pt;
            font-family: Arial, Helvetica, sans-serif;
            background-color: aliceblue;
            margin-left: auto;
            margin-right: auto;
        }
        
        p {
            color: rgb(255, 255, 255);
            font-size: 14pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        td {
            background-color: rgb(206, 206, 206);
            text-align: left;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14pt;
            border: 2px solid white;
            padding: 5px;
        }
        
        th {
            background-color: rgb(153, 92, 92);
            text-align: left;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20pt;
            color: white;
            border: 2px solid white;
            padding: 5px;
        }
        
        #wide {
            background-color: rgb(139, 139, 139);
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20pt;
        }
        
        table {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>



<body>
    <h1>My Glossary</h1>

    <table width="60%">
        <tr>
            <th>Term</th>
            <th>Definition</th>

        </tr>
        <tr>
            <td id="wide" colspan="2">B</td>
        </tr>
        <tr>
            <td>Bluetooth</td>
            <td>Bluetooth is a short-range wireless technology standard that is used for exchanging data between fixed and mobile devices over short distances using UHF radio waves in the ISM bands, from 2.402 GHz to 2.48 GHz.</td>
        </tr>
        <tr>
            <td id="wide" colspan="2">C</td>
        </tr>
        <tr>
            <td>Compiler</td>
            <td>In computing, a compiler is a computer program that translates computer code written in one programming language (the source language) into another language (the target language).</td>
        </tr>
        <tr>
            <td id="wide" colspan="2">O</td>
        </tr>
        <tr>
            <td>OCR</td>
            <td>Optical character recognition or optical character reader (OCR) is the electronic or mechanical conversion of images of typed, handwritten or printed text into machine-encoded text, whether from a scanned document, a photo of a document, a
                scene-photo (for example the text on signs and billboards in a landscape photo) or from subtitle text superimposed on an image (for example: from a television broadcast).</td>
        </tr>

    </table>
</body>

</html>

Easy version of a glossary website – preview html code

<!DOCTYPE html>
<html>

<head>
    <title>Glossary</title>

    <style>
        body {
            background-color: rgb(255, 255, 255);
        }
        
        h1 {
            text-align: center;
            color: rgb(153, 92, 92);
            text-align: center;
            font-size: 40pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        h2 {
            text-align: center;
            color: rgb(153, 92, 92);
            text-align: center;
            font-size: 30pt;
            font-family: Arial, Helvetica, sans-serif;
            background-color: aliceblue;
        }
        
        p {
            color: rgb(0, 0, 0);
            font-size: 14pt;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>



<body>
    <h1>My Glossary</h1>

    <h2>B</h2>

    <p>Bluetooth</p>
    <p>Bluetooth is a short-range wireless technology standard that is used for exchanging data between fixed and mobile devices over short distances using UHF radio waves in the ISM bands, from 2.402 GHz to 2.48 GHz.</p>

    <h2>C</h2>

    <p>Compiler</p>
    <p>In computing, a compiler is a computer program that translates computer code written in one programming language (the source language) into another language (the target language).</p>

    <h2>O</h2>

    <p>OCR</p>
    <p>Optical character recognition or optical character reader (OCR) is the electronic or mechanical conversion of images of typed, handwritten or printed text into machine-encoded text, whether from a scanned document, a photo of a document, a scene-photo
        (for example the text on signs and billboards in a landscape photo) or from subtitle text superimposed on an image (for example: from a television broadcast).</p>

</body>

</html>

Learn more about CSS:

Click here to play with CSS attributes

Try on your own: Place table borders and colours in your Glossary

Test yourself:

Basic HTML Quiz by w3docs HTML Quiz by w3schools

How to insert or embed videos?

Design a page with your favorite video and describe it!

Tutorial: Insert a local video source

w3schools tutorial

Example HTML embedding a video

<!DOCTYPE html>
<html>

<head>
    <title>My favorite video</title>

    <style>
        body {
            background-color: rgb(255, 255, 255);
        }
        
        h1 {
            text-align: center;
            color: rgb(153, 92, 92);
            text-align: center;
            font-size: 40pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        h2 {
            text-align: center;
            color: rgb(153, 92, 92);
            text-align: center;
            font-size: 30pt;
            font-family: Arial, Helvetica, sans-serif;
            background-color: aliceblue;
        }
        
        p {
            text-align: center;
            color: rgb(0, 0, 0);
            font-size: 14pt;
            font-family: Arial, Helvetica, sans-serif;
        }
        
        iframe {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>


<body>
    <h1>My favorite video</h1>

    <h2>Name: .... </h2>

    <p>Description:</p>
    <p>
        ....
    </p>

    <iframe width="1120" height="630" src="https://www.youtube.com/embed/OOy764mDtiA" 
    title="YouTube video player" frameborder="0" allow="autoplay" allowfullscreen>
    </iframe>
</body>

</html>

Example website

Design a page about your Easter Vacation!

Example webpage

“My Easter Vacation”

Example Webpage HTML Code Preview

<!DOCTYPE html>
<html>

<head>
    <title>My Easter Vacation 2022</title>
    <style>
        body {
            background-image: url("waves_back.JPG");
            background-size: cover;
        }
        
        h1 {
            color: rgb(0, 80, 0);
            text-align: center;
            font-size: 30pt;
            font-family: Arial, Helvetica, sans-serif;
            background-color: rgba(255, 255, 255, 0.400);
            margin-left: 10%;
            margin-right: 10%;
        }
        
        h2 {
            color: rgb(0, 0, 0);
            text-align: center;
            font-size: 20pt;
            font-family: Arial, Helvetica, sans-serif;
            margin-left: auto;
        }
        
        h3 {
            color: rgb(6, 37, 0);
            text-align: center;
            font-size: 15pt;
            font-weight: bolder;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            margin-left: auto;
        }
        
        p {
            color: rgb(255, 255, 255);
            font-size: 14pt;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        
        #content1 {
            color: rgb(0, 0, 0);
            font-size: 14pt;
            background-color: rgba(255, 255, 255, 0.400);
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
            width: 30%;
            margin: auto;
        }
        
        td,
        th {
            text-align: center;
            border-width: 2px;
            border-style: solid;
            border-color: black;
        }
        
        table {
            margin-left: auto;
            margin-right: auto;
            border-width: 2px;
            border-style: none;
            border-color: rgb(255, 0, 0);
        }
    </style>
</head>

<body>

    <h1>My Easter vacation 2022</h1>

    <p><img src="eastereggs.png" alt="easter Eggs" width="300"></p>

    <p id="content1">
        In these vacation I could enjoy the seaside in... <br><br>Lorem ipsum semper habeo duo, ut vis. Aliquyam eu splendide. Ut mei eteu nec antiopam corpora. Kasd pretium cetero qui arcu. Assentior ei his usu invidunt kasd justo justo. Semper Ne eleifend
        Per ut Eam graeci tincidunt.
    </p>


    <h2>My personal highlights:</h2>

    <table>
        <tr>
            <td><img src="flight.jpg" width="300"></td>
            <td><img src="emoji_eggs.jpg" width="300"></td>
            <td><img src="brunch.jpg" width="300"></td>
        </tr>
    </table>

    <h2>Diary:</h2>

    <h3>
        Day 1:
    </h3>
    <p>
        Lore ipsum
    </p>
    <h3>
        Day 2:
    </h3>
    <p>
        Lore ipsum
    </p>
    <h3>
        Day 3:
    </h3>
    <p>
        Lore ipsum
    </p>



</body>

</html>