Workshop Exercises and Activities

Workshop Exercises and Activities

Web Management

Objectives

1. To define websites

2. To learn how to develop a simple website

3. To learn best practices in web management

4. To manage and customize a webpage

By the end of the module, participants should be able to:-

· Understand the basic structures of a typical website

· Master elementary skills in HTML, CSS and PHP web management programming skills

Activity one: Practice on HTML

Follow the 4 steps below to create your first web page with Notepad.

Step 1: Start Notepad

To start Notepad go to:

Start
All Programs
Accessories
Notepad

Step 2: Edit Your HTML with Notepad

Type your HTML code into your Notepad:

a. Simple html document

b. Headings

<h1>This is heading 1</h1> biggest

<h1>This is heading 6</h1> Smallest

c. Paragraphs

<p>This is a paragraph.</p>

d. Links

e. images

ACTIVITY TWO: WORKING WITH TEXT EDITORS

CREATING A SIMPLE WEB PAGE

Steps to Solutions:

· Open the notepad from Start->Programs->Accessories- >Notepad

· Write all required tags between < and > symbols

· Save the file, and extension should be .html.

· Double click on the file icon created by the name you stored.

· To compare the output from your coded tags, open the source from the following path—View->Source; and can edit the code.

· To see the effects of new changes, press F5 to refresh the screen.

Step 1: Open a Text editor

Select Save as.. in Notepad's file menu.

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference; it is entirely up to you.

Save the file in a folder that is easy to remember, like MyFirstPage.

Step 2: Working on the Page

From the example we will be able to use and understand different aspects of the HTML Tags and attributes

<!DOCTYPE html>

<html>

<body>

<Head>

<h1>My First Page</h1>

</Head>

<h4><u> how to insert an image </u></h4>

<h4><u> how to insert a Link </u></h4>

<h4> <u> how to insert a Paragraph </u></h4>

<p>My first paragraph.</p>

<h4> <u> how to insert a table </u></h4>

<p>Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.</p>

<h4>One column :</h4>

<tr>

</tr>

</table>

<h4>One row and three columns:</h4>

<tr>

</tr>

</table>

<h4>Two rows and three columns:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Step 2: Run the HTML in Your Browser

Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file.

ACTIVITY THREE: PUTTING IT ALL TOGETHER

Steps to Solutions:

· Open the notepad from Start->Programs->Accessories- >Notepad

· Start with HTML

· Working with PHP

· Using JavaScript to validate

<!DOCTYPE html>

<html>

<body>

----------------------------------------------------------

<p><strong>This text is strong</strong></p>

<p><em>This text is emphasized</em></p>

<p><i>This text is italic</i></p>

<p><small>This text is small</small></p>

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

<h2 style="background-color:red;">This is a heading</h2>

<p style="background-color:green;">This is a paragraph.</p>

<h4>Vertical headers:</h4>

<tr>

<th>First Name:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

</tr>

</table>

----------------------------------------------------------

<?php

// define variables and set to empty values

$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST")

{

$name = test_input($_POST["name"]);

$email = test_input($_POST["email"]);

$website = test_input($_POST["website"]);

$comment = test_input($_POST["comment"]);

$gender = test_input($_POST["gender"]);

}

function test_input($data)

{

$data = trim($data);

$data = stripslashes($data);

$data = htmlspecialchars($data);

return $data;

}

<h2>PHP Form Validation Example</h2>

Name: <input type="text" name="name">

E-mail: <input type="text" name="email">

Website: <input type="text" name="website">

Comment: <textarea name="comment" rows="5" cols="40"></textarea>

Gender:

<input type="radio" name="gender" value="female">Female

<input type="radio" name="gender" value="male">Male

</form>

<?php

echo "<h2>Your Input:</h2>";

echo $name;

echo "<br>";

echo $email;

echo "<br>";

echo $website;

echo "<br>";

echo $comment;

echo "<br>";

echo $gender;

----------------------------------------------------------

<h4>Test JavaScript</h4>

<p id="myPar">I am a paragraph.</p>

<p>

</p>

function myFunction()

{

document.getElementById("myPar").innerHTML="Hello Dolly";

document.getElementById("myDiv").innerHTML="How are you?";

}

</script>

<p>When you click on "Try it", the two elements will change.</p>

</body>

</html>

Page 1 of 8