DYNAMIC WEB DEVELOPMENT
WEEK 1.B: INTRODUCTION & REVIEW OF HTML AND
CSS
Dr. Basel Almourad
1
GOALS
Learn what is dynamic web
Learn how to design, develop, and deploy secure websites
with dynamic web content
OUTLINE
1. What is a dynamic web site
2. Development tools and
technologies
3. Review of HTML and CSS
4. Q & A
2
WHAT IS A DYNAMIC WEB SITE
Dynamic web sites, more accurately referred to as web
applications, have several characteristics/properties:
Respond to different parameters;
e.g. time of the day, browser version
Have a “memory”:
e.g. allowing registration and login, e-commerce
Almost always integrate HTML forms;
e.g. allowing visitors to perform searches, provide feedback, etc.
Often have interfaces to manage the site’s content
Are easier to maintain, upgrade, and extend
3
WHAT IS A DYNAMIC WEB SITE
Many technologies are available for creating dynamic Web
sites; e.g.:
ASP.NET (Active Server Pages), a Microsoft construct
JSP (Java Server Pages)
ColdFusion
Ruby on Rails, a Web development framework for the Ruby programming
language
PHP (Hypertext Preprocessor)
• All these are server-side technologies/languages
• JavaScript studied in SWE-245 is a client-side
4
scripting language
WHAT IS A DYNAMIC WEB SITE
Dynamic Web sites don’t always rely on a database, but
more and more of them do, for several reasons.
Excellent database applications are available at little to no cost;
e.g. MySQL
Easier to maintain and update content via a database
5
WHAT IS A DYNAMIC WEB SITE
Static vs. Interactive vs. Dynamic Web Page
Lets first watch the video
Summary
Static Web Page: page content generated by server doesn’t change
Interactive: e.g. Client-side scripting is used to change the content
Dynamic Web Page: page content generated by server changes
6
COURSE STRUCTURE
The delivery of this course will consist of the following
activities:
1. A lecture:
• Presentation of concepts from outline syllabus.
2. A practical workshop / laboratory session:
• A Practical session, which reinforces the concepts from
the lecture and provides you with practical development
experience in relation to web development.
7
DEVELOPMENT TOOLS &
TECHNOLOGIES
For the course, we will use
PHP + MySQL
XAMPP
Apache Web Server
DreamWeaver & NetBeans; the development IDE
A web browser; e.g. Chrome
- More details on the platform in the next lecture -
8
REVIEW
• Web Components
• HTML
• CSS
9
WEB COMPONENTS
Communicate using HTTP
Web Client, e.g. Browser
Request Request
2 1
3 4
Web Server Reply Reply
Written in HTML
Web Page
Formatted with CSS
10
May include script; e.g. JS, PHP
WEB COMPONENTS
HTTP: Defines how the web application entities talk to each other
• Which messages to use
• How each message is formatted
• ……
HyperText Markup Language (HTML): used to specify the content of
a page
• Tells a browser how a web page is structured (e.g. defines headings,
paragraphs, etc.)
• HTML pages are saved with the file extension .htm or .html
Cascading Style Sheet (CSS): used to specify the presentation and
layout of the page
• tell the browser how to display web pages (e.g. color, fonts, background, etc.)
• CSS files are saved with the file extension .css
11
HTML REVIEW
12
HTML: PAGE STRUCTURE
• There are several elements. Each element has an opening and a
closing tag.
<html>
<head>
<title>This is my Web Page Title</title>
</head>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to
the rest of the page.</p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings
to help you follow the structure.</p>
<h2>Another Sub-Heading</h2>
13
</body>
</html>
PARAGRAPHS AND HEADINGS
Normal paragraph text appears inside <p> </p>
tags
Unless told otherwise, the browser will display
paragraph text in its default text size and format, as
defined by the browser
Headings of different levels use <h1>, <h2>,
<h3>, etc
<html>
<head>
<title>Level Headers</title>
</head>
<body>
<h1>Level 1 header</h1>
<h2>Level 2 header</h2>
<h3>Level 3 header</h3>
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
<h6>Level 6 header</h6>
14
</body>
</html>
EXAMPLE OF PAGE
CONTENT
Some html code
Notice that the <h1> and <h2> text
blocks are displayed in different
font sizes, and paragraph text is all
the same
The code displayed in the browser
15
A CLOSER LOOK AT TAGS
• Most tags come in pairs: an opening and a closing
tag.
• An element comprises the opening tag and the closing tag
and any content that lies between them
• e.g.
<p> this is the content of my paragraph </p>
• Some elements are empty elements (i.e. they have no
content). e.g.
<hr />
<br />
16
ATTRIBUTES TELL US MORE
ABOUT ELEMENTS
• Elements may have attributes.
• Attributes appear on the opening tag of the element.
• Attributes are made up of two parts: a name and a value,
separated by an equals sign.
Attribute 2
• Attribute 1
<p id=“p1” lang="en-us" >
this is the content of my paragraph </p>
• An element may have more than one attribute
17
HTML TAGS ARE PREDEFINED
• To learn HTML you need to know what tags you can
use, what they do, and where they can go.
• Examples:
• Paragraphs and Headings
• Text formatting
• Links/hyperlinks
• Image
• Media
18
TEXT FORMATTING
There are tags which can format HTML text, e.g.
<p> <i>This text is in italics</i> </p>
<p> <b>This text is in bold</b> </p>
<p> <i> <b>This text is in bold italics</b> </i>
</p>
BUT it is recommended to use Cascading Style Sheets (CSS)
for formatting
20
LINKS/HYPERLINKS
THE PAGE THE LINK TAKES YOU TO
<a href="http://www.bbc.co.uk">Go to the BBC home page </a>
THE TEXT THE USER CLICKS ON
IMAGES
<img src = “logo.jpg” width=“104” height=“104” alt=“ ” >
Tells the Image Define image display size (pixels)
browser to filename
display an
image
You may need to add a pathname if your image/file is stored in a
separate folder
<img src=“images/logo.jpg” alt=“ ”>
21
CSS REVIEW
22
CSS: 3 TYPES OF STYLE
Three ways to apply a style to an HTML
Inline style
Style information appears near the text being styled
<p style=“color:red; font-family: Arial;”>This text will
use the Arial font, and will be coloured red.</p>
Internal or Embedded style sheet
Style information appears inside <head>…</head> tags
<head>
<style type=“text/css”>
p {color:red; font-family: Arial;}
</style>
</head>
External style sheet
Style information is held in separate CSS document
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
23
</head>
CSS: STYLE DECLARATION
Style declarations are in the form of:
selector-property-value
Selector = the element being styled (e.g. <h1>)
Property = the attribute being styled (e.g. text size for<h1>)
Value = how you want it styled (e.g. the text size and colour)
Selector { propertyA:valueA;
propertyB:valueB }
e.g.
h1 { font-size:20pt;
color: #FF3399 }
24
EXAMPLE EXTERNAL STYLE SHEET
h1 { Selector
color: red;
font-family: Arial
}
Property Value
body {
background-color: #ffffff;
}
/* comment */
p {
font-size: 12px;
text-align: center;
}
25
CSS: STYLE DECLARATION
Selector: HTML elements can be selected :
by name:
use the element tag-name, e.g. h1, table, img, etc.
Will select all the elements with the given tag-name returns an array
by id:
Use #, followed by the element id
Will select only the element with the given id returns a unique element
by class name:
Use ., followed by the class name
Will select all the elements with the given class name returns an array
26
CSS: STYLE DECLARATION
Selector: Examples:
by name:
• to select all h1 elements, use h1.
• To format all h1 elements, use h1 {}
• To make all h1 elements red, use: h1 {color: red;}
By id:
<h1 id=‘id3’>only this h1 element will be
selected, even if
there are other h1 elements</h1>
#id3 {color: green;} : only the element with id=‘id3’ will be
green
27
CSS: STYLE DECLARATION
Selector: Examples:
By class name:
<h1 class=‘cls’> this h1 element will be
selected</h1>
<p class=‘cls’> this paragraph element will also
be
.cls {color: blue;} : all the elements with class=‘cls’ will be
selected</p>
blue
28
DIV POSITION
<Html><body> <div1>
<div id=“d1”> </div> Default positions
<div2>
<div id=“d2”> </div>
<div id=“d3”> </div> <div3>
</body></Html>
<Html><body> #d1,#d 2, #d3 { <div3> <div2> <div1>
<div id=“d1”> </div> float: right;}
<div id=“d2”> </div>
<div id=“d3”> </div> #d1, #d2, #d3 {
</body></Html> <div1> <div2> <div3>
float: left;}
<Html><body> #d1,#d 2 {
<div1> <div2>
<div id=“d1”> </div> float: left;}
<div id=“d2”> </div> #d3{ <div3>
<div id=“d3”> </div> clear: left;
</body></Html> }
29
ANY QUESTIONS?
30
REFERENCES
• HTML
• https://www.w3schools.com/html/
31
