Scribd
Upload
32 views24 pages

Web Development Manual

Uploaded by

Nwagha Jecinta Chidera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views24 pages

Web Development Manual

Uploaded by

Nwagha Jecinta Chidera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

IMO STATE POLYTECHNIC OMUMA

DEPARTMENT OF COMPUTER SCIENCE

PRACTICAL MANUAL

ON

WEB DEVELOPMENT

HTML, CSS, PHP, MYSQL

1
What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

A Simple HTML Document

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title
bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

2
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly.

3
HTML Page Structure
Below is a visualization of an HTML page structure:

HTML Editors

A simple text editor is all you need to learn HTML (example Notepad ++. Sublime, Visual
Studio , Dreamweaver e.t.c).

Step 2: Write Some HTML


Write or copy the following HTML code into Notepad++:

4
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for
HTML files).

Step 4: View the HTML Page in Your Browser


Open the saved HTML file in your favorite browser (double click on the file, or right-click - and
choose "Open with").

The result will look much like this:

5
HTML Basic Examples

HTML Links
HTML links are defined with the <a> tag:

<a href="https://www.imopoly.edu.ng">This is a link</a>

6
HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<img src="imopoly_logo.jpg" alt="imopoly Website" width="104" height="142">

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute


The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes
to:

<a href="https://www.w3schools.com">Visit W3Schools</a>

The src Attribute


The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
to the image to be displayed:

<img src="img_girl.jpg">

7
There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website. Example:
src="https://www.imopoly.edu.ng/images/img_girl.jpg".

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current
page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the
domain. Example: src="/images/img_girl.jpg".

The width and height Attributes


The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels):

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute


The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to a slow connection, or an error in the src
attribute, or if the user uses a screen reader.

<img src="img_girl.jpg" alt="Girl with a jacket">

The lang Attribute


You should always include the lang attribute inside the <html> tag, to declare the language of
the Web page. This is meant to assist search engines and browsers.

8
Country codes can also be added to the language code in the lang attribute. So, the first two
characters define the language of the HTML page, and the last two characters define the country.

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The title Attribute


The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

<p title="I'm a tooltip">This is a paragraph.</p>

HTML Headings
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:

<h1 style="font-size:60px;">Heading 1</h1>

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.

HTML Line Breaks


The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:
9
<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</p>

HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

I am Red

I am Blue

I am Big
Background Color
The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

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

</body>

Example

Set background color for two different elements:

<body>

10
<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts
The CSS font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance.

11
Example
<b>This text is bold</b>

HTML <i> and <em> Elements


The HTML <i> element defines a part of text in an alternate voice or mood. The content inside
is typically displayed in italic.

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

HTML <small> Element


The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>

HTML Comment Tag


You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

HTML TABLE

<table class="center">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>

12
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
HTML FORM
<form action="action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">

13
<textarea id="subject" name="subject" placeholder="Write something.."
style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>

LOGIN FORM
<form action="action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>

<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>

<div class="container" style="background-color:#f1f1f1">


<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>

FILE UPLOAD

<form action="/action_page.php">
<input type="file" id="myFile" name="filename">
<input type="submit">
</form>

14
PHP mail() Function
<?php
$to = "[email protected]";
$subject = "My subject";
$txt = "Hello world!";
$headers = "From: [email protected]" . "\r\n" .
"CC: [email protected]";

mail($to,$subject,$txt,$headers);
?>

Send an HTML email:


<?php
$to = "[email protected], [email protected]";
$subject = "HTML email";

$message = "
<html>
<head>
<title>HTML email</title>
</head>
<body>
<p>This email contains HTML Tags!</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
</body>
</html>
";

// Always set content-type when sending HTML email


$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

15
// More headers
$headers .= 'From: <[email protected]>' . "\r\n";
$headers .= 'Cc: [email protected]' . "\r\n";

mail($to,$subject,$message,$headers);
?>

HTML VIDEOS
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>

<!-- Optional: some overlay text to describe the video -->


<div class="content">
<h1>COMPUTER SCIENCE DEPARTMENT</h1>
<p>Lorem ipsum...</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>

<script>
// Get the video
var video = document.getElementById("myVideo");

// Get the button


var btn = document.getElementById("myBtn");

// Pause and play the video, and change the button text
function myFunction() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause";
} else {
video.pause();
btn.innerHTML = "Play";
}
}
</script>

16
INSERT DATA

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

$sql = "INSERT INTO MyGuests (firstname, lastname, email)


VALUES ('John', 'Doe', '[email protected]')";

if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}

mysqli_close($conn);
?>

SELECT DATA

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT id, firstname, lastname FROM MyGuests";


$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {

17
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
echo "id: " . $row["id"]. " - Name: " . $row["firstname"]. " " . $row["lastname"]. "<br>";
}
} else {
echo "0 results";
}

mysqli_close($conn);
?>

PRACTICAL PROJECT

Guide to Create a Login Form in PHP

Prerequisites:

 Knowledge of HTML, CSS, PHP, and MySQL


 Microsoft Visual Studio (For writing the code)
 Installation of XAMPP

<form action="login.php" method="post">

<h2>LOGIN</h2>

<?php if (isset($_GET['error'])) { ?>

<p class="error"><?php echo $_GET['error']; ?></p>

<?php } ?>

<label>User Name</label>

<input type="text" name="uname" placeholder="User Name"><br>

<label>Password</label>

<input type="password" name="password" placeholder="Password"><br>

<button type="submit">Login</button>

</form>

18
Step 3: Create a Database Table Using MySQL
Now, start your SQL Xampp/Wamp server and select admin. This will direct you to the
phpMyAdmin webpage. Now, log in with your username and password.

Now, on the MyPHPAdmin, create a new database by clicking "New" on the left-hand side of a
webpage.

Step 4: Open a Connection to a MySQL Database


Once you create a PHPMyAdmin database, your next step is to write a code on Visual Studio.

Go to Microsoft visual code -> create a new file and name it as DB connection.

Now, in the code below, you will notice the function mysqli_connect( ). As the name suggests, it
does the same task. It connects the database to the form that was created.

<?php
$sname= "localhost";
$unmae= "root";
$password = "";
$db_name = "test_db";
$conn = mysqli_connect($sname, $unmae, $password, $db_name);
if (!$conn) {
echo "Connection failed!";
}

This demo has used an if statement to check whether the code is working or not. A suitable
message is printed, depending on if the database was found.

Now, execute the below SQL query to create the user table within your MySQL database.

<?php
session_start();
include "db_conn.php";
if (isset($_POST['uname']) && isset($_POST['password'])) {
function validate($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}

19
$uname = validate($_POST['uname']);
$pass = validate($_POST['password']);
if (empty($uname)) {
header("Location: index.php?error=User Name is required");
exit();
}else if(empty($pass)){
header("Location: index.php?error=Password is required");
exit();
}else{
$sql = "SELECT * FROM users WHERE user_name='$uname' AND password='$pass'";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) === 1) {
$row = mysqli_fetch_assoc($result);
if ($row['user_name'] === $uname && $row['password'] === $pass) {
echo "Logged in!";
$_SESSION['user_name'] = $row['user_name'];
$_SESSION['name'] = $row['name'];
$_SESSION['id'] = $row['id'];
header("Location: home.php");
exit();
}else{
header("Location: index.php?error=Incorect User name or password");
exit();
}
}else{
header("Location: index.php?error=Incorect User name or password");
exit();
}
}
}else{
header("Location: index.php");
exit();
}
Step 5 - Create a Logout Session
In this section, you will create a "logout.php" file.
When a user selects the logout option, the code mentioned below will automatically redirect the
user back to the login page.
<?php
session_start();
session_unset();
session_destroy();
header("Location: index.php");
Step 6 - Create a Code for the Home Page
Next, this tutorial will show you how to get back to the home page.
The code for the home page is:

20
<?php
session_start();
if (isset($_SESSION['id']) && isset($_SESSION['user_name'])) {
?>
<!DOCTYPE html>
<html>
<head>
<title>HOME</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello, <?php echo $_SESSION['name']; ?></h1>
<a href="logout.php">Logout</a>
</body>
</html>
<?php
}else{
header("Location: index.php");
exit();
}
?>

Sending HTML email

<html>

<head>
<title>Sending HTML email using PHP</title>
</head>

<body>

<?php
$to = "[email protected]";
$subject = "This is subject";

$message = "<b>This is HTML message.</b>";


$message .= "<h1>This is headline.</h1>";

$header = "From:[email protected] \r\n";


$header .= "Cc:[email protected] \r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html\r\n";

$retval = mail ($to,$subject,$message,$header);

if( $retval == true ) {


echo "Message sent successfully...";

21
}else {
echo "Message could not be sent...";
}
?>

</body>
</html>

Sending attachments with email


<?php
// request variables // important
$from = $_REQUEST["from"];
$emaila = $_REQUEST["emaila"];
$filea = $_REQUEST["filea"];

if ($filea) {
function mail_attachment ($from , $to, $subject, $message,
$attachment){
$fileatt = $attachment; // Path to the file
$fileatt_type = "application/octet-stream"; // File Type

$start = strrpos($attachment, '/') == -1 ?


strrpos($attachment, '//') : strrpos($attachment, '/')+1;

$fileatt_name = substr($attachment, $start,


strlen($attachment)); // Filename that will be used for the
file as the attachment

$email_from = $from; // Who the email is from


$subject = "New Attachment Message";

$email_subject = $subject; // The Subject of the email


$email_txt = $message; // Message that the email has in it
$email_to = $to; // Who the email is to

$headers = "From: ".$email_from;


$file = fopen($fileatt,'rb');
$data = fread($file,filesize($fileatt));
fclose($file);

$msg_txt="\n\n You have recieved a new attachment message from


$from";
$semi_rand = md5(time());
$mime_boundary = "==Multipart_Boundary_x{$semi_rand}x";
$headers .= "\nMIME-Version: 1.0\n" . "Content-Type:
multipart/mixed;\n" . "
boundary=\"{$mime_boundary}\"";

$email_txt .= $msg_txt;

$email_message .= "This is a multi-part message in MIME format.\n\n"


.
"--{$mime_boundary}\n" . "Content-Type:text/html;

22
charset = \"iso-8859-1\"\n" . "Content-Transfer-Encoding:
7bit\n\n" .
$email_txt . "\n\n";

$data = chunk_split(base64_encode($data));

$email_message .= "--{$mime_boundary}\n" . "Content-Type:


{$fileatt_type};\n" .
" name = \"{$fileatt_name}\"\n" . //"Content-Disposition:
attachment;\n" .
//" filename = \"{$fileatt_name}\"\n" . "Content-Transfer-
Encoding:
base64\n\n" . $data . "\n\n" . "--{$mime_boundary}--\n";

$ok = mail($email_to, $email_subject, $email_message, $headers);

if($ok) {
echo "File Sent Successfully.";
unlink($attachment); // delete a file after attachment sent.
}else {
die("Sorry but the email could not be sent. Please go back and
try again!");
}
}
move_uploaded_file($_FILES["filea"]["tmp_name"],
'temp/'.basename($_FILES['filea']['name']));

mail_attachment("$from", "[email protected]",
"subject", "message", ("temp/".$_FILES["filea"]["name"]));
}
?>

<html>
<head>

<script language = "javascript" type = "text/javascript">


function CheckData45() {
with(document.filepost) {
if(filea.value ! = "") {
document.getElementById('one').innerText =
"Attaching File ... Please Wait";
}
}
}
</script>

</head>
<body>

<table width = "100%" height = "100%" border = "0"


cellpadding = "0" cellspacing = "0">
<tr>
<td align = "center">
<form name = "filepost" method = "post"
action = "file.php" enctype = "multipart/form-data" id =
"file">

23
<table width = "300" border = "0" cellspacing = "0"
cellpadding = "0">

<tr valign = "bottom">


<td height = "20">Your Name:</td>
</tr>

<tr>
<td><input name = "from" type = "text"
id = "from" size = "30"></td>
</tr>

<tr valign = "bottom">


<td height = "20">Your Email Address:</td>
</tr>

<tr>
<td class = "frmtxt2"><input name = "emaila"
type = "text" id = "emaila" size = "30"></td>
</tr>

<tr>
<td height = "20" valign = "bottom">Attach File:</td>
</tr>

<tr valign = "bottom">


<td valign = "bottom"><input name = "filea"
type = "file" id = "filea" size = "16"></td>
</tr>

<tr>
<td height = "40" valign = "middle"><input
name = "Reset2" type = "reset" id = "Reset2" value
= "Reset">
<input name = "Submit2" type = "submit"
value = "Submit" onClick = "return
CheckData45()"></td>
</tr>
</table>

</form>

<center>
<table width = "400">
<tr>
<td id = "one">
</td>
</tr>
</table>
</center>

</td>
</tr>
</table>

</body>
</html>

24

You might also like