Course Name: Web Programming
Course Code:CS406
Credit Hours: 3
Prerequisites: NA
Instructor: Muhammad Haris
Week 1
Department of Computer Science | FAST-NU 1
Introducing Each Other
Who am I?
Who are you?
Department of Computer Science | FAST-NU 2
Logistics and Stuff
Instructor
Muhammad Haris
Office: G29-F
Office timings : TBD
Class Timings
Time Table
Department of Computer Science | FAST-NU 3
GRADING CRETERIA (Tentative)
Assignments/ Quizzes 20%
Midterm Examination 2 25%
Project 10%
Final Examination 45%
Department of Computer Science | FAST-NU 4
Assignments and Quizes
A number of assignments and quizzes will be
taken
The assignments may comprise of coding
assignments including viva
Announced and/or unannounced quizzes may be
given to students any time during the lecture
Department of Computer Science | FAST-NU 5
Assignment and Quiz Methodology
No Plagiarism?
Plagiarism is defined in dictionaries as the
"wrongful appropriation," "close imitation," or
“publication" of another author’s "language,
thoughts, ideas, or expressions," and the
representation of them as one's own original work
(source: www.wikipedia.org)
Can you consult/collaborate with each other?
Consulting each other in the assignments ?
Verbally
Consulting each other in the quizzes ?
Not at all
Department of Computer Science | FAST-NU 6
Web Programming
Lecture code explanation
Code in lecture
Home work
Semester project
Course rules and regulations
Department of Computer Science | FAST-NU 7
Technologies used in Web Programming
Internet
Network of networks
Browser
Browsers are the interpreters of the web.
Internet explorer: Microsoft
Chrome: Google
Firefox: Open source (Mozilla foundation)
Safari: Apple
HTML
Hyper text markup Language.
It provides the structure of a website so that web
browsers know what to show.
Hypertext means machine readable text and Markup means to structure it in a
specific format. So, HTML is called hypertext markup language
Department of Computer Science | FAST-NU 8
Technologies used in Web Programming
CSS
CSS mean Cascading Style Sheet.
CSS let’s web designers change colors, fonts,
animations, and transitions on the web.
They make the web look good.
Programming Languages
JavaScript
PHP
Objective-C
Java
Python
Ruby
GO
Department of Computer Science | FAST-NU 9
Technologies used in Web Programming
Frameworks
To enable the developer to work with programming
language easier
.NET
Drupal
Bootstrap – Building HTML/CSS/Javascript
Laravel
Angular.js
Department of Computer Science | FAST-NU 10
Technologies used in Web Programming
Libraries
jQuery
Databases
MySQL
SQL Server
Oracle
MongoDB
Server
Client
Department of Computer Science | FAST-NU 11
Client-Server Model
Two processes (possibly networked):
The client
Sends requests to the server
Blocks until reply is received
The server
Processes requests from clients
Never blocks
Can reply to several clients simultaneously
Department of Computer Science | FAST-NU 12
Markup Languages
Markup:
Codes in documents
Codes are called `tags’
Codes
Describe the structure documents
HTML – HyperText Markup Language –
The Language of Web Pages on the World Wide Web.
HTML is a text formatting language.
13
HTML
“Normal text” surrounded by bracketed tags that
tell browsers how to display web pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor that has been
specialized to make the writing of HTML
documents more effortless.
Department of Computer Science | FAST-NU 14
Tags
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE
Recommended editor Dreamviewer
Department of Computer Science | FAST-NU 15
Basic webpage
<HTML>
<HEAD>
<TITLE>FAST-NU</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>
Department of Computer Science | FAST-NU 16
16 Basic Colors
17
Some common examples
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”
LINK=“#0000FF” VLINK=“#FF00FF” >
</BODY>
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”> </BODY>
Department of Computer Science | FAST-NU 18
Headings, <Hx> </Hx>
Inside the BODY element, heading elements H1
through H6 are generally used for major divisions
of the document.
H1: should be used as the highest level of
heading, H2 as the next highest, and so forth.
Use of heading depend on the requirement
Any document starts with a heading. You can use
different sizes for your headings. HTML also has
six levels of headings, which use the
elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>.
While displaying any heading, browser adds one
line before and one line after that heading.
Department of Computer Science | FAST-NU 19
Department of Computer Science | FAST-NU 20
<BR>vs<P>
<body>
<p>Here is a first paragraph of text.</p>
<br>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
Department of Computer Science | FAST-NU 21
Center/horizontal line/ pre
<center> </center>
<hr />
<pre> </pre>
Department of Computer Science | FAST-NU 22
HTML Tag vs. Element
An HTML element is defined by a starting tag. If
the element contains other content, it ends with
a closing tag.
For example, <p> is starting tag of a paragraph
and </p> is closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph
element.
Department of Computer Science | FAST-NU 23
Nested HTML elements
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u>
paragraph</p>
</body>
Department of Computer Science | FAST-NU 24
HTML - Attributes
Apply effects on various elements in HTML
Have
Name
Value
Example
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
Department of Computer Science | FAST-NU 25
Core Attributes
The four core attributes that can be used on the
majority of HTML elements (although not all) are
Id
Title
Class
Style
Department of Computer Science | FAST-NU 26
Attribute Options Function
align right, left, center Horizontally aligns tags
valign top, middle, bottom Vertically aligns tags within an HTML
element.
bgcolor numeric, hexidecimal, RGB Places a background color behind an
values element
background URL Places a background image behind an
element
id User Defined Names an element for use with Cascading
Style Sheets.
class User Defined Classifies an element for use with
Cascading Style Sheets.
width Numeric Value Specifies the width of tables, images, or
table cells.
height Numeric Value Specifies the height of tables, images, or
table cells.
title User Defined "Pop-up" title of the elements.
Department of Computer Science | FAST-NU 27
Tags
Bold
Italic
Underline
<mark>marked</mark>
<strong>strong</strong>
<abbr title = “Uni Ser Bus">USB</abbr>
Department of Computer Science | FAST-NU 28
Meta tag, Page Refresh
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta
Tags, Metadata" />
<meta name = "description" content = "Learning
about Meta Tags." />
<meta name = "revised" content = “abc, xy" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
Department of Computer Science | FAST-NU 29
Meta tag reaload
<head>
<meta http-equiv = "refresh" content = "5; url =
http://www.google.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
Department of Computer Science | FAST-NU 30
<body>
<p>Simple Image Insert</p>
<img src = “/images/test.png" alt = "Test
Image" />
</body>
width = "150" height = "100“
border = "3“
align = "right"
Department of Computer Science | FAST-NU 31
Tables
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
Department of Computer Science | FAST-NU 32
Cell padding/ Spacing
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
Department of Computer Science | FAST-NU 33
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr> width = "400" height = "150"
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
Department of Computer Science | FAST-NU 34
Table background
You can set table background using one of the
following two ways −
bgcolor attribute − You can set background color for
whole table or just for one cell.
background attribute − You can set background image
for whole table or just for one cell.
Department of Computer Science | FAST-NU 35
Grouping content
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a>
|
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" bgcolor = "white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
Department of Computer Science | FAST-NU 36
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1,
columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2,
columnn 2</td>
</tr>
</table>Department of Computer Science | FAST-NU 37
Lists
HTML offers web authors three ways for
specifying lists of information. All lists must
contain one or more list elements. Lists may
contain −
<ul> − An unordered list. This will list items using
plain bullets.
<ol> − An ordered list. This will use different
schemes of numbers to list your items.
<dl> − A definition list. This arranges your items
in the same way as they are arranged in a
dictionary. Department of Computer Science | FAST-NU 38
Unorder lists
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
Department of Computer Science | FAST-NU 39
UL Types
<ul type = "square">
<ul type = "disc">
<ul type = "circle“>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
Department of Computer Science | FAST-NU 40
HTML Ordered Lists
If you are required to put your items in a
numbered list instead of bulleted, then HTML
ordered list will be used.
This list is created by using <ol> tag.
The numbering starts at one and is incremented
by one for each successive ordered list element
tagged with <li>.
Department of Computer Science | FAST-NU 41
Example
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
Department of Computer Science | FAST-NU 42
Types
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.
Department of Computer Science | FAST-NU 43
Start OL
<ol type = "1" start = "4"> - Numerals starts
with 4.
<ol type = "I" start = "4"> - Numerals starts
with IV.
<ol type = "i" start = "4"> - Numerals starts
with iv.
<ol type = "a" start = "4"> - Letters starts with
d.
<ol type = "A" start = "4"> - Letters starts with
D.
Department of Computer Science | FAST-NU 44
What will be the output
<H1 ALIGN="CENTER">SAFETY TIPS FOR SEADIVING</H1>
<OL TYPE="a" START="2">
<LI>Be able to swim </LI>
<LI>Wear a life jacket at all times </LI>
<LI>Don't stand up or move around. If canoe tips,
<UL>
<LI>Hang on to the canoe </LI>
<LI>Use the canoe for support and </LI>
<LI>Swim to shore
</UL>
</LI>
<LI>Don't overexert yourself </LI>
<LI>Use a bow light at night </LI>
</OL>
Department of Computer Science | FAST-NU 45
HTML and XHTML supports a list style which is
called definition lists where entries are listed like
in a dictionary or encyclopedia. The definition list
is the ideal way to present a glossary, list of
terms, or other name/value list.
Definition List makes use of following three tags.
<dl> − Defines the start of the list
<dt> − A term
<dd> − Term definition
</dl> − Defines the end of the list
Department of Computer Science | FAST-NU 46
Linking Documents
A link is specified using HTML tag <a>.
This tag is called anchor tag and anything
between the opening <a> tag and the closing
</a> tag becomes part of the link and a user can
click that part to reach to the linked document.
Following is the simple syntax to use <a> tag.
<a href = “page.html" target = "_self">Tutorials
Point</a>
<a href = “file.pdf" target = "_self">Tutorials
Point</a>
<a href = "https://doc.htm/file.pdf">Download
PDF File</a>
Department of Computer Science | FAST-NU 47
Link Tag att
Sr.No Option & Description
1 _blank
Opens the linked document in a new window or tab.
2 _self
Opens the linked document in the same frame.
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
Department of Computer Science | FAST-NU 48
Linking page section
Step1 : First create a link to the place where you
want to reach with-in a webpage and name it
using <a...> tag as follows −
<h1>HTML Text Links <a name = "top"></a></h1>
Step2
<a href = “html">Go to the Top</a>
Department of Computer Science | FAST-NU 49
DIV tag
This is the very important block level tag which
plays a big role in grouping various other HTML
tags and applying CSS on group of elements.
Even now <div> tag can be used to create
webpage layout where we define different parts
(Left, Right, Top etc.) of the page using <div>
tag.
This tag does not provide any visual change on
the block but this has more meaning when it is
used with CSS.
Department of Computer Science | FAST-NU 50
Div and table
<DIV ALIGN=“value”></DIV> Represents a
division in the document and can contain most
other element type. The alignment attribute of
the DIV element is well supported.
<TABLE></TABLE> Inside a TABLE, alignment
can be set for each individual cell.
Department of Computer Science | FAST-NU 51
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
Department of Computer Science | FAST-NU 52
Some important tags
The <HR> element causes the browser to display
a horizontal line (rule) in your document.
Size
Width
Align
Color
<FONT SIZE=“+2”> +2 size text</FONT>
Color
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
Department of Computer Science | FAST-NU 53
Some important tags
<FONT SIZE=“+1”> One Size Larger </FONT> - Normal
<FONT SIZE=“-1”> One Size Smaller </FONT> <BR>
<FONT COLOR=“#FF0000” face = "Times New Roman">
Colored </FONT> <BR>
Department of Computer Science | FAST-NU 54
Core attributes
Some core attributes that can be used on the
majority of HTML elements
Id
Class
Style
Id attribute can be used to uniquely identify the
element with in html page.
Id distinguish two different element of same type on
the page.
<p id = “html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading
Style Sheet</p>
Department of Computer Science | FAST-NU 55
Keep Smiling its simple and easy
Department of Computer Science | FAST-NU 56
