Scribd
Upload
19 views

Web Engineering Lab-Manual

This lab manual covers topics related to using HTML including introducing the Dreamweaver editor, writing basic HTML code, using different HTML elements like headings, lists, images and links, creating tables, understanding block and inline elements, and implementing forms and form elements.

Uploaded by

muhammadbilalar0
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
19 views

Web Engineering Lab-Manual

This lab manual covers topics related to using HTML including introducing the Dreamweaver editor, writing basic HTML code, using different HTML elements like headings, lists, images and links, creating tables, understanding block and inline elements, and implementing forms and form elements.

Uploaded by

muhammadbilalar0
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/ 41

LAB

MANUAL

COURSE: Web Engineering cs-666

University Institute of Information Technology


PMAS-Arid Agriculture University, Rawalpindi
LAB # 01

Statement Purpose:
The objective of this lab is to make student familiar with the Editor (bootstrap) and
basic programming concepts in HTML.

Activity Outcomes:
This lab teaches you the following:

 An Introduction to bootstrap
 Writing First Program in HTML, Running the HTML Code
1.1 An Introduction to Dreamweaver
Dreamweaver is the editor which will be used throughout this course to write the
code (HTML, DHTML, CSS, PHP etc). At first, we need to install the adobe dreamweaver.
The following section will describe how to install adobe Dreamweaver on your PC
(Personal Computer).

1.1.1 Installing the Dreamweaver


In the ‘setup’ folder, double click on the ‘Set-up.exe’ to install the
Dreamweaver. The progress of installation is showed in the figure below.

Figure: Snapshot showing installation progress of Dreamweaver.

1.1.2 Running the Dreamweaver


Once you have successfully installed the dreamweaver, now, go to
the ‘start menu’ and click on the ‘adobe dreamweaver’ to run it. The main
window of ‘adobe dreamweaver’ is shown in the figure below.
Figure: Snapshot showing the main window of Dreamweaver.

1.1.3 Writing First Program in HTML, Running the HTML


Code
To write the first HTML program, you need to create a .html file. To do so, you
click on the ‘file’ and then click on ‘new’ which eventually open the following window.
Now, select the HTML in ‘document type’ and hit the ‘create’ button.

Figure: Creating a new HTML file.


This will open a window, shown in figure below, where you can write the HTML
code.

Figure: Snapshot showing the window where you can write the HTML code.

The figure below shows the HTML code that we wrote for our first lab
exercise. The HTML code is divided into two main parts: (a) <head> and (b)
<body>. We learned in-detail in the theory lecture.

Figure: My first HTML code.


After writing the code, now save the file with .html extension e.g. we
chose ‘my-first.html’ for our first code, shown in figure below.

Figure: Save a HTML file.

Once you saved the file, go to the location where you have saved the ‘html’ file.
Double click on the ‘my-first.html’ to open the file in default web browser to see
the output, shown in the figure below.

Figure: Output of out first HTML code.


LAB # 02

Statement Purpose:
The objective of this lab is to make student understand the basic concepts of use of
different HTML elements
Activity Outcomes:
This lab teaches you the following:

 Introduce HTML tag with their properties


 How to design HTML page using different HTML elements (<h1>…<h6>, <a>, <p>,
<img>, <ol> etc)
ACTIVITY-1
In this lab, we will learn about different attributes of an element.
HTML Attributes

 All HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

The href Attribute HTML links are defined with the <a> tag. The link address is specified
in the href attribute: Example 1

<a href="https://www.w3schools.com">This is a link</a>

Example 2

In this example, we use the <img> with its three attributes: (a) src=”used to
provide the location of the image”, (b) width= “for width of the image in pixel”, (c)
height= “for height of the image in pixel” and (d) alt=”The alt attribute specifies an
alternative text to be used, if an image cannot be displayed.

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

Following is the html code to display the image with a link displaying ‘Buy’

Figure: <Img> and <a > elements with their attributes

The output of this code is shown in the figure below

Figure: Output of the above code


ACTIVITY-2

In this activity, we will learn about different headings. Headings are defined with
the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least
important heading. To understand its working, the following code is helpful
Figure: Code for Heading tag <h>

Figure: Output of the code: ‘Heading’


ACTIVITY-3
In this activity, we will learn about List in HTML.
HTML List Example
An Unordered List:

 Item1
 Item2
 Item3
 Item4

An Ordered List:

1. First item
2. Second item
3. Third item
4. Fourth item

The below code is for HTML list

Figure: Code for an unordered HTML list

Figure: Output of the code “An unordered list”


Figure: Code for an ordered HTML list

Figure: Output of the code “An ordered list”


LAB # 03

Statement Purpose:
This lab covers the following topics:

• Create Tables in HTML.


• Introduce <div> and <span> Elements

Activity Outcomes:
This lab teaches you the following topics:

  You will be able to create tables in HTML


 You will be able to display values in block and inline 
ACTIVITY-1
In this activity we will learn the basics about element table. Suppose
we have data and wants to display it in tabular format as given below.

Figure: Required output

To implement the table in HTML, please recall the theory which we studied
in the theory class of this course. Using the already developed knowledge, we will
implement the concept of table in HTML. The following HTML code generates the
table showed above.

<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>

</body>
</html>

Lab Assignment:
Create the following table using table element
Activity-2

HTML Block and Inline Elements


Every HTML element has a default display value depending on what type of
element it is. The two display values are: block and inline.

Block-level Elements
A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).

Block level elements in HTML:

<address> <article> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure>
<footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre>
<section> <table> <tfoot> <ul> <video>

Inline Elements

An inline element does not start on a new line and only takes up as much width as
necessary.

Inline elements in HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img>
<input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small>
<span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Activity-3
HTML Formatting Elements

HTML uses elements like <b> and <i> for formatting output, like bold or italic text.

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
The following code implements the formatting concept, followed by its output

Figure: Formatting Example

Figure: Output of the “Formatting” code


LAB # 04

Statement Purpose:
This lab will give you practical implementation of forms along with its key elements to take input
from the user.

Activity Outcomes:
This lab teaches you the following topics:

 How to Create Forms Using HTML tags,


 Form elements,
 Input types,
 Input attributes,
 Input form attributes

Instructor Note:
Introduction

The <form> Element


The HTML <form> element defines a form that is used to collect user input:

<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like: text fields, checkboxes, radio
buttons, submit buttons, and more.

Text Fields
<input type="text"> defines a single-line input field for text input.

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The <label> Element


Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out load the label when the user is focused on the input
element.

The <label> element also help users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when the user
clicks the text within the <label> element, it toggles the radio
button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of the
<input> element to bind them together.

Radio Buttons
<input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>

Lab Activity -1
The purpose of this lab activity is to design a form containing two inputs, First
name and Last name. After implementing this activity, we would be able to get input
from the user and submit that information to another page for further processing.

Figure: Required output

Solution:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Forms</h2>

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

</body>
</html>

HTML Form Elements


The <input> Element
One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on the


type attribute.

<input type="text" id="firstname" name="firstname">

The <select> Element


The <select> element defines a drop-down list:

<select id="cars" name="cars">


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

<option value="fiat" selected>Fiat</option>


Visible Values:
Use the size attribute to specify the number of visible values:

<select name="cars" size="3">


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Allow Multiple Selections:


Use the multiple attribute to allow the user to select more than one value:

<select name="cars" size="4" multiple>


<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <textarea> Element


The <textarea> element defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">


The cat was playing in the garden.
</textarea>

Using CSS
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

The <button> Element


The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click


Me!</button>
The <fieldset> and <legend> Elements
The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Output of fieldset element example

The <datalist> Element


The <datalist> element specifies a list of pre-defined options for an <input>
element.

Users will see a drop-down list of the pre-defined options as they input data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

Activity -3

HTML Input Types

Input Type Text


<input type="text"> defines a single-line text input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

Input Type Password


<input type="password"> defines a password field:

<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

Following is the output of the abovementioned code.


Input Type Submit
<input type="submit"> defines a button for submitting form data to a
form-handler.

The form-handler is typically a server page with a script for processing input
data.

The form-handler is specified in the form's action attribute:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Input Type Reset


<input type="reset"> defines a reset button that will reset all form values
to their default values:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>

Input Type Radio


<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
Input Type Checkbox
<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of


choices.

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

Input Type Date


The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Assignment: Explore the rest of the input types, other than discussed in the lab , out of
abovementioned list.
LAB # 05

Statement Purpose:
This lab will give you practical implementation of in cooperating CSS as inline, embedded or
external CSS in web pages
Activity Outcomes:
This lab teaches you the following topics:

  Inline CSS
 Embedded or external CSS in web pages

Instructor Note:

42
Introduction:

CSS is a language that describes the style of an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web
pages all at once
 External stylesheets are stored in CSS files

Why Use CSS?


CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

CSS Solved a Big Problem


HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

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

When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every single
page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!


The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website
by changing just one file!

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by


semicolons.

Each declaration includes a CSS property name and a value, separated by a


colon.

A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.

Activity-1

In this example all <p> elements will be center-aligned, with a red text
color:

p {
color: red;
text-align: center;
}

 p is a selector in CSS (it points to the HTML element you want to


style: <p>).
 color is a property, and red is the property value
 text-align is a property, and center is the property value

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)


 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)

The CSS element Selector


The element selector selects HTML elements based on the element name.

Here, all <p> elements on the page will be center-aligned, with a red text
color:

p {
text-align: center;
color: red;
}

The CSS id Selector


The id selector uses the id attribute of an HTML element to select a specific
element.

The id of an element is unique within a page, so the id selector is used to


select one unique element!

To select an element with a specific id, write a hash (#) character, followed
by the id of the element.

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>


<p>This paragraph is not affected by the style.</p>

</body>

</html>

Following is the output of the code. It shows that only that paragraph is
affected by the CSS in which we used the id=”para1”. The second paragraph
is in default format & style of HTML.

The CSS class Selector


The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed
by the class name.

You can also specify that only specific HTML elements should be affected by a
class.
Following is the output of the code with specific element

In the next activity, we will learn how to group the selectors, to minimize the code. To group
selectors, separate each selector with a comma. Below is the code followed by the output.
Three Ways to Insert CSS
There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

 External CSS
 With an external style sheet, you can change the look of an entire
website by changing just one file!

 Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.
Internal CSS
An internal style sheet may be used if one single HTML page has a unique
style.

The internal style is defined inside the <style> element, inside the head
section.

Inline CSS
An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

You might also like