Scribd
Upload
42 views8 pages

CSC336 - Web Technologies-LAB05

The document provides instructions for a lab activity on using DIV tags and CSS for page layout design. The objectives are to familiarize students with using the DIV tag and CSS for page layout. The activity includes using DIV and CSS to create a header, form container, and footer on a page. It also includes examples of registration form styling and instructions for graded lab tasks to design a template using tables and an alumni page using external CSS.

Uploaded by

samankhalid0001
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
42 views8 pages

CSC336 - Web Technologies-LAB05

The document provides instructions for a lab activity on using DIV tags and CSS for page layout design. The objectives are to familiarize students with using the DIV tag and CSS for page layout. The activity includes using DIV and CSS to create a header, form container, and footer on a page. It also includes examples of registration form styling and instructions for graded lab tasks to design a template using tables and an alumni page using external CSS.

Uploaded by

samankhalid0001
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/ 8

Lab 05

Designing page lay-out using DIV,s and CSS

Objective:

To familiarize the students with the use of Div’s and the use of CSS for designing page layout

Activity Outcomes:

After this lab, the students should be able to

5. use the DIV tag

6. the use of CSS for page layout designing

Instructor Note:

As pre-lab activity, read Chapter 4 from the textbook “Web Design Playground: HTML & CSS the
Interactive Way 1st Edition, April 2019 by Paul McFedries”.

1. Useful Concepts
Introduction

The div tag is used to define a division or section in an HTML document. It visually, allows us to

make containers that can be formatted. It can be declared as: <div>……</div>. We use div and
CSS to design a page layout. The div tag is used to represent sections in a page and CSS is used
to style these sections. We can describe the process of designing a page as
• Determine the requirements of the site

37
• Group the required information
• Make a site map
• Identify key elements for each page
• Decide about the arrangement of information on each page
• Translate the design into code

2. Solved Lab Activites

Activity 1:
Use div and CSS properties to design a page layout which contains

3. a header section to display the title, style this title with CSS

4. a form container which contains a registration form, use CSS to style the elements of the form

5. a footer section

Solution:
External CSS

body {

38
background-color: lightblue;

h1 {

color: navy; margin-left: 20px; font-family: verdana;

font-size: 50px;

#para1 {

text-align: center; color: red;

.center {

text-align: center; color: yellow;

<html>

<head>

<title>Using divs</title>

</head>

<body>

<div>

<div style="width:100px;backround-color:gray">First</div>

<div style="width:100px;backround-color:red">second</div>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<style>

39
body {font-family: Arial, Helvetica, sans-serif;}

* {box-sizing: border-box}

/* Full-width input fields */

input[type=text], input[type=password] {

width: 100%;

padding: 15px;

margin: 5px 0 22px 0;

display: inline-block;

border: none;

background: #f1f1f1;

input[type=text]:focus, input[type=password]:focus {

background-color: #ddd;

outline: none;

hr {

border: 1px solid #f1f1f1;

margin-bottom: 25px;

/* Set a style for all buttons */

button {

background-color: #04AA6D;

color: white;

padding: 14px 20px;

40
margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

opacity: 0.9;

button:hover {

opacity:1;

/* Extra styles for the cancel button */

.cancelbtn {

padding: 14px 20px;

background-color: #f44336;

/* Float cancel and signup buttons and add an equal width */

.cancelbtn, .signupbtn {

float: left;

width: 50%;

/* Add padding to container elements */

.container {

padding: 16px;

41
/* Clear floats */

.clearfix::after {

content: "";

clear: both;

display: table;

/* Change styles for cancel button and signup button on extra small screens */

@media screen and (max-width: 300px) {

.cancelbtn, .signupbtn {

width: 100%;

</style>

<body>

<form action="/action_page.php" style="border:1px solid #ccc">

<div class="container">

<h1>Sign Up</h1>

<p>Please fill in this form to create an account.</p>

<hr>

<label for="email"><b>Email</b></label>

<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>

42
<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat" required>

<label>

<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">


Remember me

</label>

<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms &
Privacy</a>.</p>

<div class="clearfix">

<button type="button" class="cancelbtn">Cancel</button>

<button type="submit" class="signupbtn">Sign Up</button>

</div>

</div>

</form>

</body>

</html>

6. Graded Lab Tasks


Lab Task 1

43
Design the web template given below using tables and external CSS

Lab Task 2
Design the web page for Comsats Alumni using External CSS.

44

You might also like