Course Name: Web Programming Course Code:CS406: Credit Hours: 3 Prerequisites: NA

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?

Logistics and Stuff
 Instructor
 Muhammad Haris
 Office: G29-F
 Office timings : TBD
 Class Timings
 Time Table

GRADING CRETERIA (Tentative)
 Assignments/ Quizzes 20%
 Midterm Examination 2 25%
 Project 10%
 Final Examination 45%

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

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

Web Programming
 Lecture code explanation
 Code in lecture
 Home work
 Semester project
 Course rules and regulations

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

 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

 Frameworks
 To enable the developer to work with programming
language easier
 .NET
 Drupal
 Bootstrap – Building HTML/CSS/Javascript
 Laravel
 Angular.js

 Libraries
 jQuery
 Databases
 MySQL
 SQL Server
 Oracle
 MongoDB
 Server
 Client

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

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.

Tags
 Codes enclosed in brackets
 Usually paired
 <TITLE>My Web Page</TITLE>
 Not case sensitive
 <TITLE> = <title> = <TITLE
 Recommended editor Dreamviewer

Basic webpage
<HTML>
<HEAD>
<TITLE>FAST-NU</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

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>

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.
<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>

Center/horizontal line/ pre
 <center> </center>
 <hr />
 <pre> </pre>

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.

Nested HTML elements
 <body>
 <h1>This is <i>italic</i> heading</h1>
 <p>This is <u>underlined</u>
paragraph</p>
 </body>

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>

Core Attributes
 The four core attributes that can be used on the
majority of HTML elements (although not all) are
 Id
 Title
 Class
 Style

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.

Tags
 Bold
 Italic
 Underline
 <mark>marked</mark>
 <strong>strong</strong>
 <abbr title = “Uni Ser Bus">USB</abbr>

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>

Meta tag reaload
 <head>
 <meta http-equiv = "refresh" content = "5; url =
http://www.google.com" />
 </head>

 <body>
 <p>Hello HTML5!</p>
 </body>

 <body>
 <p>Simple Image Insert</p>
 <img src = “/images/test.png" alt = "Test
Image" />
 </body>
 width = "150" height = "100“

 border = "3“
 align = "right"

Tables
 <body>
 <table border = "1">
 <tr>
 <td>Row 1, Column 1</td>
 </tr>

 <tr>
 </tr>
 </table>
 </body>

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>

 <table border = "1">
 <tr>
 <th>Column 1</th>
 </tr>
 <tr>
 <td rowspan = "2">Row 1 Cell 1</td>
 <td>Row 1 Cell 2</td>
 </tr>
 <tr> width = "400" height = "150"

 </tr>
 <tr>
 <td colspan = "3">Row 3 Cell 1</td>
 </tr>
 </table>
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.

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>

 <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>

UL Types
 <ul type = "square">
 <ul type = "disc">
 <ul type = "circle“>
 <ul type = "square">

 <li>Ginger</li>
 <li>Potato</li>
 <li>Radish</li>
 </ul>

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>.

Example
 <ol>
 <li>Ginger</li>
 <li>Potato</li>
 <li>Radish</li>
 </ol>

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.

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.

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>

 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
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>
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> |

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>

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.

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.

 
 <div style = "color:red">
 <h4>This is first group</h4>
 <p>Following is a list of vegetables</p>

 <ul>
 <li>Ginger</li>
 <li>Potato</li>
 <li>Radish</li>
 </ul>
 </div>
 
 <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>
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>

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>

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>

Keep Smiling its simple and easy

Course Name: Web Programming Course Code:CS406: Credit Hours: 3 Prerequisites: NA

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Course Name: Web Programming Course Code:CS406: Credit Hours: 3 Prerequisites: NA

Uploaded by

Copyright:

Available Formats

Course Name: Web Programming

Department of Computer Science | FAST-NU 1

Department of Computer Science | FAST-NU 2

Department of Computer Science | FAST-NU 3

Department of Computer Science | FAST-NU 4

Department of Computer Science | FAST-NU 5

 Consulting each other in the quizzes ?

Department of Computer Science | FAST-NU 6

Department of Computer Science | FAST-NU 7

 Firefox: Open source (Mozilla foundation)

Department of Computer Science | FAST-NU 8

Department of Computer Science | FAST-NU 9

 Bootstrap – Building HTML/CSS/Javascript

Department of Computer Science | FAST-NU 10

Department of Computer Science | FAST-NU 11

 Blocks until reply is received

 Can reply to several clients simultaneously

Department of Computer Science | FAST-NU 12

Department of Computer Science | FAST-NU 14

 Recommended editor Dreamviewer

Department of Computer Science | FAST-NU 15

Department of Computer Science | FAST-NU 16

Department of Computer Science | FAST-NU 18

Department of Computer Science | FAST-NU 21

Department of Computer Science | FAST-NU 22

Department of Computer Science | FAST-NU 23

Department of Computer Science | FAST-NU 24

Department of Computer Science | FAST-NU 25

Department of Computer Science | FAST-NU 26

Department of Computer Science | FAST-NU 27

 <abbr title = “Uni Ser Bus">USB</abbr>

Department of Computer Science | FAST-NU 28

Department of Computer Science | FAST-NU 29

Department of Computer Science | FAST-NU 30

 width = "150" height = "100“

Department of Computer Science | FAST-NU 31

Department of Computer Science | FAST-NU 32

Department of Computer Science | FAST-NU 33

 <td>Row 2 Cell 2</td>

 bgcolor attribute − You can set background color for

 background attribute − You can set background image

Department of Computer Science | FAST-NU 35

 <div id = "content" align = "left" bgcolor = "white">

Department of Computer Science | FAST-NU 36

 <ul> − An unordered list. This will list items using

 <ol> − An ordered list. This will use different

 <dl> − A definition list. This arranges your items

Department of Computer Science | FAST-NU 39

 <ul type = "square">

Department of Computer Science | FAST-NU 40

Department of Computer Science | FAST-NU 41

Department of Computer Science | FAST-NU 42

Department of Computer Science | FAST-NU 43

Department of Computer Science | FAST-NU 44

 <LI>Don't overexert yourself </LI>

Department of Computer Science | FAST-NU 45

 Definition List makes use of following three tags.

 <dl> − Defines the start of the list

 <a href = “page.html" target = "_self">Tutorials

<p>Click any of the following links</p>

Department of Computer Science | FAST-NU 48

Department of Computer Science | FAST-NU 49