MDAD: Lab2 Part4a: Host yout PHP files on Public Domain (Free Web Server, atspace.com)

LAB 1: Web Application 1 [Html and CSS]

Objective: To develop a web application

To enhance mobile web pages using CSS

Step 1 : Setup of Free Web/PHP server @ atspace.com

Step 2 : Create directory
Goto Dashboard>File Manager
Create a sub folder called products

all html, PHP pages are to be saved in this folder

Step 3 :

Create another subfolder called css
Click on Product> Create Directory> css

all css file, images are to be saved in this folder

Let’s get started with creating a main.html page

(1) Upload smartfarm.jpg from the picture below to the css folder of your atspace server:

Right clicked >>Copy Image Address

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8jnoO9JOcJR63KtvU6LjMhDKR8BI7Fkj_mlF8EaKd_0QYp9TJRjv_CxCy2A8YFX_D9cl_XP6em9oCzZX1VwMtoKkdFOZWlNYSGqdQZZLlIIkjOjexWqv9NOMN3MiD3YTqoLqzIgBiOaHO/s320/smartfarm.jpg

((3) Create a main.html page

Click on Up Level button to go to product subfolder

Click on Create> Create File> Type main.html

Double click on main.html.
Copy and paste the code below on main.html

<html>
<head>

<!--Link to an External Style Sheet -->

 <style>

  </style>
</head>

<body>
<h1> Smart Farming </h1>
<div align="center">
<img src="css/smartfarm.jpg" width="30%" height="30%"><br>
</div>

</body> 
</html>

If you are able to see the page above means you have

Written the html file correctly, and you know where to place the files in the web server .

CSS (Cascading Style Sheets)

is used to style and lay out web pages — for example, to alter the font, colour, size and spacing of your content, split it into multiple columns, or add animations and other decorative features.

We will be looking at:

External Style Sheet
Internal Style Sheet
styles to Individual Elements

Applying internal style sheet on main.html
Type the following inside the <head> Tag of main.html

<style>
.center {

    font-family: verdana;
    font-size: 30px;
    text-align: center;
    color: red;
}

</style>

Type the following in the <h1> tag to apply internal css on <h1> tag

  <h1 class ="center" > Smart Farming </h1>

Edit main.html

Paste the following inside the <div> tag

<ul>
    <li><a href="get_all_products.php"> List all products </a>  </li>
    <li><a href="addProduct.php"> Add Product </a>  </li>
    <li><a href="searchProduct.php"> Search Product </a>  </li>
</ul>

1) Create a css file , named myStyle.css with the following codes and saved it in the css folder

li {
        display:inline-block;
        background:yellow;
        color:blue;
        margin-right:10px;
}

2) Create a css file , named myStyle.css with the following codes and saved it in the css folder

3) Linking main.html to external style sheet myStyle.css

Add this line inside the <head> Tag of main.html

<link href="css/myStyle.css" rel="stylesheet" type="text/css"/>

4) Applying styles to Individual Elements on main.html

Type the following in the <body tag> to set the background color to green (RGB)

<body bgcolor="#00FF00">   <!--styles to Individual Elements-->

MDAD

Lab2 Part4a: Host yout PHP files on Public Domain (Free Web Server, atspace.com)

No comments:

Post a Comment