Prepared by :

Duha Qutishat
____________________________________________________________________________________

Note :Most examples are quoted from Internet & World Wide Web How to Program, 5th edition by H.
Deitel, P. Deitel. 2012 and http://www.w3schools.com.

Ms. Duha Qutishat

 Worksheet #1(HTML basics)

Write a suitable HTML code in order view the following outputs

Q1) (HTML Basics)
Welcome to web programming course

This is my first page

Q2) (HTML headers)

Level 1 Heading
Level 2 heading
Level 3 heading

Level 4 heading

Level 5 heading

Level 6 heading

Q3) ( HTML Text Formatting)

This text is bold

This text is italic

This is computer output

This is subscript and superscript

This is a deleted word

Ms. Duha Qutishat

Q4) Simple HTML page:

Ms. Duha Qutishat

 Worksheet #2(hyperlinks)

Q1) Linking to other websites

Create a HTML file and name it page1Write a suitable HTML code in
order to view the following links

Here are my favorite sites:

Click a name to visit that site.

HU
Facebook
Twitter
Google

Q2) Build email link

Add your email to page1.html

Here are my favorite sites:

Click a name to visit that site.

HU
Facebook
Twitter
Google

For more information you can send me email at duha@hu.edu.jo

Ms. Duha Qutishat

Q3) Internal linking
Create a new HTML file name it page2.html and make a link to
heading1 and heading2 as shown in the example.

Link to heading 1

Link to heading 2

Heading 1
Text text text text

Heading 2
Text text text text

Q4) Linking to other html pages

Add a link in page2.html to send you back to page1.html

Link to heading 1

Link to heading 2

Heading 1
Text text text text

Heading 2
Text text text text

back to page1

Ms. Duha Qutishat

 Worksheet #3(images)

Q1) insert the following Water lilies.jpg image into an HTML file .
Note: width = "122"
height = "120"
alt=”This is a water lilies image”

Q2) Using an image as a link

Ms. Duha Qutishat

 Worksheet #4(lists)
Q1)Ordered and Unordered list

This is an example of ordered list: This is an example of Unordered list:

IT majors : IT majors :

1. CS  CS
2. CIS  CIS
3. SWE  SWE

Q2)Nested lists

The Best Features of the Internet

 You can meet new people from countries around the world.
 You have access to new media as it becomes public:
o New games
o New applications
1. For business
2. For pleasure
o Around the clock news
o Search engines
o Shopping
o Programming
1. XML
2. Java
3. HTML5
4. JavaScript
5. New languages
 Links
 Keeping in touch with old friends
 It's the technology of the future!

Ms. Duha Qutishat

 Worksheet #5(tables)

Write a suitable HTML code in order to produce this table in your

browser.
Q1) Simple HTML table

Q2) Table Example: Spanning Rows and Columns

(hint: you can use any picture from your PC)

My Favourites

Programming
websites
languages

1.Google  JAVA
 C++
2.Yahoo
 HTML
3.Youtube

Ms. Duha Qutishat

Q3) Extra Example:

Ms. Duha Qutishat

 Worksheet #6(forms)

Registration form

First Name

Last Name

e-mail

Password

Country

Cell phone number -

Gender male female

Any suggestions:
Write your complains here …

Put me on mail list

I accept all terms

Ms. Duha Qutishat

 Worksheet #7(Forms2)

Write a suitable HTML code in order to produce this form in your

browser.
Q1) New HTML5 Input Types

Ms. Duha Qutishat

 Worksheet #8(autocomplete)

Write a suitable HTML code in order to produce this form in your

browser.

Q1)Write a suitable HTML code to automatically fill in the user’s information

based on previous input.

Ms. Duha Qutishat

Q2) Write a suitable HTML code in order to provide input options for a text
input element.

Ms. Duha Qutishat

 Worksheet #9(CSS basics)
Q1) Inline Style

Q2)(embedded Style) Provide a style rules that perform the following

statements:
-<em> font must be bold and black
-<h1> font type must be Tahoma
-<p> font size equal 12 points and arial
-create class called special that used to change font color to purple.

<h1>
with class
called
special
<p>

<h1>
<em>
>
<p>
with class
called
special

Ms. Duha Qutishat

 Q3)External Style sheet
Provide a style rules that perform the following statements and save it in
separate file called (style.css):
- body font type must be arial, helvetica and sans-serif;
- hyperlinks must be without under line
- when curser moves over the hyperlinks the underline will appears
- For all <em> inside<li> font must be bold.
- For <h1>and <em> text must be underline.
-<ul> left margin must be 20 px.
-for all nested <ul> font size must be .8 em.

<h1>
> <em>

<em> Hyperlink to
“http://www.deitel.com”

Ms. Duha Qutishat

 Worksheet #10(text formatting)

Q1)Text alignment:

Q2)Text indentation
text-indent:50px

Q3)Text decoration

Ms. Duha Qutishat

 Worksheet #11(CSS lists)

Q1)List-style-type

Ms. Duha Qutishat

Q2) list-style-image

Q3) list-style-position

-the position of the first list is inside.

-the position of the second list is outside.

Ms. Duha Qutishat

 Worksheet #12(overflow+float)
Q1)Float

Q2)Overflow
Write the following text 4 time in yout HTML file and create 4 classes name them
class1,class2,class3 and class4.

You can use the overflow property when you want to have better control of
the layout. The default value is visible.

1)class1(background color should be pink ,width:100px,height:100 px and overflow:scroll)

2)class2(background color should be yellow ,width:100px,height:100 px and overflow:hidden)
3)class3(background color should be green ,width:100px,height:100 px and overflow:auto)
4)class4(background color should be blue ,width:100px,height:100 px and overflow:visible)

Ms. Duha Qutishat

 Worksheet #13(margin+padding)
Q1)Margin: Write the following two paragraphs in your html file

a) Paragraph background should be yellow

b) Create class called it (m) and apply it for the second paragraph
This class contains the following rules
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Q2) Padding: Write the following two paragraphs in your html file

a)paragraph background should be yellow

b)create class called it (padding) and apply it for the second paragraph
This class contains the following rules
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

Ms. Duha Qutishat

Q3) Box dimensions

Ms. Duha Qutishat

 Worksheet #14(Display)

Q1)Display

Create the following html file and change the value of display property
to : -inline
-block
-none

Ms. Duha Qutishat

 Worksheet #15(background)

Q1)Build an HTML file in order to create the following web page

Arial
DarkBlue lightGrey
18pt Attachment fixed

Ms. Duha Qutishat

 Worksheet #16(border)

Q1)border

Ms. Duha Qutishat

 Worksheet #17(positioning)
Q1) position: fixed
Create a class the following class
pos_fixed { position: fixed;
top: 30px;
right: 5px;
color: red; }

Apply pos_fixed
class to this
sentence

Q2) position: relative

Create the following classes
pos_left { position: relative;
left: -20px; }
pos_right { position: relative;
left: 20px; }

Apply pos_left
class to this
sentence

Apply pos_right
class to this
sentence

Ms. Duha Qutishat

Q3) position: absolute
Create a class the following class
Pos_absolute{ position: absolute;
left: 100px;
top: 150px; }

Apply pos_absolute
class to this
sentence

Ms. Duha Qutishat

 PHP Worksheet#1

Q1:Write a php code to print out this sentence

“welcome to PHP ;)”
“My name is : “

Q2:Declare three variables(String,double and integer)

Str1=”3.5 seconds”
Str2=”23 seconds and 2 minutes”
Str3=”hi 22”
Num1=79.2
Num2=12

a-Print out the output of the following equations

1-num1+num2=-----------------
2-num2*str1 =-----------------
3-str2+str1 =-----------------
4- str1+str3 =-----------------
5-num1/num2 =-----------------

b- print out the data type of each variable (hint: use gettype() function)
e.g gettype($num1);

c-Modify variables data type

to convert or modify data type you can use :
-settype() function
e.g: settype($variable_name,”data type”)

- type casting
e.g: (data type) $variable_name

data type can be: string, double, integer, float…etc

convert $var1=”5.5 minutes” to double then to integer then to string using

settype() function(print all results)
convert $var2=”5.5 minutes” to double then to integer then to string using
casting (print all results)

what is the difference between them ????????

Ms. Duha Qutishat

Q3: Intialize an integer variable with 79 and name it mark
Test the mark
If the mark is less than 50 print fail
If the mark between 50-80 print very good
If the mark between 81 and 100 print excellent

Q4: write a program that calculate the area and circumference of a circle with
a radius =4
Circle area=(radius)2 * 𝝅
Circle circumference= 2*radius* 𝝅
𝝅 (pi) =3.14

Ms. Duha Qutishat

 PHP Worksheet#2
Arrays

Q1:Initializing and Manipulating Arrays.

a-Write a PHP code to create the following array and name it(first).
$first[0]=”PHP”;
$first[1]=”JAVA”;
$first[2]=”CSS”;
$first[3]=”HTML”;

b- Print each element’s index and value for array (first) using for loop and count function:
for($i=0;$i<count($first);$i++)
print(“Element $i is $first[$i]<br>”);

c-Write a PHP code to create the (second)array using function array:

$second=array(“CS”,”CIS”,”SWE”);

d- Print each element’s index and value for array (first) using for loop and count function:
for($i=0;$i<count($second);$i++)
print(“Element $i is $second[$i]<br>”);

Q2:Initializing and Manipulating Associative Arrays.

(Note: associative array is an array that has nonnumeric indices)

a-Write a PHP code to create the mark array:

$mark[“ahmad”]=90;
$mark[“muna”]=55;
$mark[“kareem”]=45;
$mark[“salma”]=100;

b-Print each element’s index and value for array(mark) using reset, key and next functions:

for(reset($mark);$element=key($mark);next($mark))
print(“<p>$element is $mark[$element]</p>”);

c-Write a PHP code to create a (months)array using function array:

$months=array(
“January”=>”first”, ”February”=>”second”,
“March”=>”third”, ”April”=>”fourth”,
“May”=>”fifth”, ” June”=>”sixth”,
“July”=>”seventh”, ”August”=>”eighth”,
“September”=>”ninth”, ”October”=>”tenth”,
“November”=>”eleventh”, ”December”=>”twelfth”);

Ms. Duha Qutishat

 d-Print each element’s index and value for array(months) using foreach loop:

foreach($months as $element=>$value)
print(“<p> $element is the $value month in the year </p>”);

Q3:Write a PHP code to create an associative array called (ages) and fill it with the age of
each person as the following :
Basshar 23, sara 13 , saleem 65 and suha 57 years old
your program must print out the name of the eldest and the name of the youngest person.

Ms. Duha Qutishat

 PHP Worksheet#3
String functions

Q1:Write this php code and write your results.

$array=array("hi","hii","Hi","h","hello");
for($i=0;i<count($array);$i++)
{
if(strcmp($array[$i],"hi")<0)
print("<p>".$array[$i]."is less than hi"."</p>");

elseif(strcmp($array[$i],"hi")>0)
print("<p>".$array[$i]."is greater than hi"."</p>");

else
print("<p>".$array[$i]."is equal to hi"."</p>");}

a. (hi) is __________________ (hi).

b. (hii) is __________________ (hi).
c. (Hi) is __________________ (hi).
d. (h) is __________________ (hi).
e. (hello) is __________________ (hi).

Q2: write the previous code using relational operators(<,>,==) instead of

strcmp and write down your results .

Q3: Find the output of the following code

$search = "Now now low test ";

if ( preg_match( "/Now/", $search ) )

print( "<p>'Now' was found.</p>" );

if ( preg_match( "/\b([a-zA-Z]*ow)\b/i", $search, $match ) )

print( "<p>Word found ending in 'ow': " .
$match[ 1 ] . "</p>" );

Q4: Replace now with later using preg_replace() function

Ms. Duha Qutishat

 PHP Worksheet#4
Superglobal arrays

PART I (HTML File):

Gathering user input(create the following HTML form)

Ms. Duha Qutishat

PARTII (PHP File):
Processing information sent from the HTML form

Hi $_POST["fname"] . Thank you for completing the survey. You have

been added to the $_POST["book"] mailing list.

The following information has been saved in our database:

Name : $_POST["fname"] $_POST["lname"]

Email : $_POST["email"]
Phone: $_POST["phone"]
OS : $_POST["os"]
This is only a sample form. You have not been added to a mailing list.

The final PHP file must look like this :

Hi duha. Thank you for completing the survey. You have been added to the
Java How to Program mailing list.
The following information has been saved in our database:
Name: duhaQutishat
Email: duha@hu.edu.jo
Phone: (555) 555-5555
OS: Linux
This is only a sample form. You have not been added to a mailing list.

Ms. Duha Qutishat

 PHP Worksheet#5
Reading from a Database

PART1 (Create the data base):

Create database using phpMyAdmin.
Name data base students and name the table std_info.

std_id std_name Std_major

111 duha CIS
222 Ahmad SWE
333 leen CIS
444 kareem CS

PART2(HTML File):
Create HTML form as shown in the following picture(the value of each
option in the select list is the same name of database table fields.
Ex:<option value=”std_id”>ID</option>

Name the file data.html

Ms. Duha Qutishat

PART3 (PHP File):
Name the file database.php
a)Connect to data base:
$database = mysql_connect( "server name",”username", "password" ).
Ex: $database = mysql_connect( "localhost",”root", "123" )

b)Open data base

mysql_select_db( "students", $database )

c)Using query
$query = "SELECT * FROM std_info "
$result = mysql_query( $query, $database )

d)Close data base

mysql_close( $database )

e)Print result:
1)fetch each record in result set
<table>
while ( $row = mysql_fetch_row( $result ) )
{ print( "<tr>" ); // build table to display results
foreach ( $row as $value )
print( "<td>$value</td>" );
print( "</tr>" );
</table>}

2) print number of records

mysql_num_rows( $result )

Note:
you can use any time die function to terminate the process in 2
ways:
- die( "some message </body></html>" )
- die( mysql_error() . "</body></html>" ) Ms. Duha Qutishat
 Chapter #3
Forms part2:
- New HTML 5 input types:

Input type Example Description

1. color <input type ="color"/> display a color picker

2. date <input type ="date" /> enables the user to enter a

date in the form yyyy-mm-dd.

3. datetime <input type="datetime” The datetime input type

/>
enables the user to enter

date (year, month, day)

time (hour, minute, second,

fraction of a second) and the
time zone set to UTC
(Coordinated Universal Time or
Universal Time, Coordinated).
(with time zone).

4. Datetime-local <input type="datetime- enables the user to enter the

local"/>
date and time in a single
control.
(no time zone).

5. time <input type = "time" enables the user to enter an

/>
hour, minute, seconds and
fraction of second

6. week <input type = "week" enables the user to select a

/>
year and week number in the
format yyyy-Wnn, where nn is
01–53

Ms. Duha Qutishat

 for example, 2012-W01

7. month <input type = "month" enables the user to enter a

/>
year and month in the format
yyyy-mm, such as 2012-01.

8. email <input type = "email" enables the user to enter an e-

/>
mail address

it validates that the e-mail

address is in the proper format.

9. search <input type = provides a search field for

"search"/>
entering a query.

10. number <input type = "number" enables the user to enter a

min = "0" max = "7" numerical value

step = "1" Chrome and Opera render a

value = "4" /> spinner control for adjusting
the number

11. range <input type = "range" appears as a slider control in

min = "0" max = Chrome, Safari and Opera .
"20"

value = "10" />

12. tel <input type = "tel" enables the user to enter a

pattern = "\(\d{3}\)
telephone number
+\d{3}-\d{4}" />

13. url <input type = "url"/> enables the user to enter a

URL.HTML5 does not check
whether the URL entered is
valid; rather it validates that
the URL entered is in the

Ms. Duha Qutishat

 proper format.

the proper format is

http://www.deitel.com.

-New HTML5 Attributes:

Attribute Example
name

1. autofocus <input type = "color" autofocus />

2. placeholder <input type = "email" placeholder =

"name@domain.com" />

3. required <input type = "email" required />

4. formnovalidate <input type="submit" value="Submit" formnovalidate >

Ms. Duha Qutishat

Page structure elements:

New features in HTML 5

1) <header> …….</header>
2) <footer>…….</footer>
3) <section id=”1”> ………..</section>
4) <nav>……….</nav>
5) <figure>………</figure>
6) <figcaption>……</figcaption>
7) <article>….</article>
8) <details><summary>…….</summary>……</details>
9) <aside>….</aside>
10) <time>……</time>
11) <mark>….</mark>
12) <address>……..</address>

13)<meter min=”0” max=”50” value=”25”>…</meter>

<meter value="0.6"></meter>

Ms. Duha Qutishat

 Regular Expressions

Brackets: (matches a single character from the list )

Expression Description

[0-9] It matches any decimal digit from 0 through 9.

[a-z] It matches any character from lowercase a through lowercase z.

[A-Z] It matches any character from uppercase A through uppercase Z.

[a-Z] It matches any character from lowercase a through uppercase Z.

[acb]
[231]

Metacharacters:

p$ It matches any string with p at the end of it.

^p It matches any string with p at the beginning of it.

. Match any single character except new line

Quantifiers:

Expression Description Equivalent to

p+ It matches any string containing at least one p. {1,} one or more times

p* It matches any string containing zero or more {0,} zero or more times
p's.

p? It matches any string containing zero or 1 p. {0,1} zero or one time

p{N} It matches any string containing a sequence

of N p's

p{2,3} It matches any string containing a sequence of

two or three p's.

p{2, } It matches any string containing a sequence of

at least two p's.

Ms. Duha Qutishat

Predefined Character classes

Expression Description

[[:alpha:]] It matches any string containing alphabetic characters aA through zZ.

Equivalent to the [a-zA-Z]

[[:digit:]] It matches any string containing numerical digits 0 through 9.

[[:alnum:]] It matches any string containing alphanumeric characters aA through zZ and 0

through 9.

[[:space:]] It matches any string containing a space.

[[:lower:]]

[[:upper:]]

Metacharacters(2)

A metacharacter is simply an alphabetical character preceded by a backslash that acts to give the combination a special meaning.

For instance, you can search for large money sums using the '\d' metacharacter:/([\d]+)000/, Here \d will search for any string
of numerical character.

Following is the list of metacharacters which can be used in PERL Style Regular Expressions.

Character Description
. a single character
\s a whitespace character (space, tab, newline)
\S non-whitespace character
\d a digit (0-9)
\D a non-digit
\w a word character (a-z, A-Z, 0-9, _)
\W a non-word character
[aeiou] matches a single character in the given set
[^aeiou] matches a single character outside the given set
(foo|bar|baz) matches any of the alternatives specified

Modifiers

Several modifiers are available that can make your work with regexps much easier, like case sensitivity, searching in multiple lines
etc.

Modifier Description
i Makes the match case insensitive

Ms. Duha Qutishat