Setup Menus in Admin Panel

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

Setup Menus in Admin Panel

Login

Create an Account Back to login/register
X