Web Engineering
Lab 1
1
Lab Evaluation
Lab Evaluation
Mid Term 25%
Assignments 25%
Final Exam + Project 50%
Total 100%
2
Course Contents
• HTML (to define the content of web pages)
• CSS (to specify the layout of web pages)
• Bootstrap (to develop responsive web pages)
• JavaScript (to program the behavior of web pages)
• PHP (Use for database)
3
Recommended Text Books:
• Beginning HTML with CSS and XHTML by
David Schultz and Craig Cook
• PHP and MySQL by example by Ellie Quigley
with Marko Gargenta
• Web Engineering by Gerti Kappel, Birgit Proll,
Siegfried Reich, Werner Retschitzegger
• HTML5: Up and Running by Mark Pilgrim 2010
• W3Schools Online Web Tutorials
http://www.w3schools.com
4
Editor
• Sublime Text Editor
• Notepad ++
• Notepad
5
Web Server
– Install a web server on your own PC and then
install PHP & MYSQL
– WAMP: Window, Apache, MYSQL, PHP
– XAMPP: All OS, Apache, MYSQL, PHP, Perl
Note: Install the web server start as services &
then type localhost in your browser to check
whether it is running or not
– LAMP: used for Linux Machines users
6
Web Application?
A Web Application is a software system based on technologies and
standards of the World Wide Web Consortium (W3C) that provides
Web specific resources such as content and services through a user
interface, the Web browser.
World Wide Web Consortium (W3C)
• International consortium where member organizations, a full-
time staff, and the public work together to develop Web
standards.
W3C's mission:
• To lead the World Wide Web to its full potential by developing
protocols and guidelines that ensure long-term growth for the
Web.
7
HTML – Hypertext Markup Language
• HTML stands for Hypertext Markup Language
• HTML describes the structure of Web pages using
markup
• HTML elements are the building blocks of HTML
pages
• HTML elements are represented by tags
• Different versions exists, HTML v. 1.0 published in 1991,
then 2 , 3, 4, 4.01 and 5 versions. Version 4.01 is used more
than other versions.
• Defines large number of tags to denote different semantics.
E.g. <H1>tag can be used to mark a level-1 heading.
8
HTML – Hypertext Markup Language
Components of HTML
• HTML document composed in two components
– Tags and
– Attributes
• Both are work togather to identify different document
parts and tell the browser how to display them. E.g. A
Tag specify a chunk of information be displayed as a
paragraph or something else. Whereas attributes are
optional part of tags specify information or more
thoroughly explains about a particular tag e.g. Color,
aligenment, width and height etc.
9
HTML Tags
• HTML tags are element names surrounded by
angle brackets:
• <tagname>content goes here...</tagname>
•HTML tags normally come in pairs like <p> and </p>
•The first tag in a pair is the start tag, the second tag is the end
tag
•The end tag is written like the start tag, but with a forward
slash inserted before the tag name
10
HTML – Hypertext Markup Language
(cont.)
<html>
<head>
<title>First Web Page</title>
Head Tag
</head>
<body> HTML Tag
<h1>Heading</h1>
<p>Paragraph</p> Body Tag
</body>
</html>
-Save it with HTML extension e.g. First.html
11
HTML – Hypertext Markup Language
(cont.)
The <!DOCTYPE html> declaration defines this document to be
HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the
document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
12
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least important heading:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html> 13
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
<!DOCTYPE html>
<html>
<body>
<p>First paragraph.</p>
<p>This is second paragraph.</p>
</body>
</html>
14
HTML Links
• HTML links are defined with the <a> tag:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML link is given below:</p>
<a href="https://www.sahiwal.comsats.edu.pk/">CUI Sahiwal</a>
</body>
15
</html>
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are provided
as attributes:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src=“ciit.jpg" alt="W3Schools.com" width="104px" height="142px">
</body> 16
HTML Buttons
• HTML buttons are defined with the <button> tag:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body> 17
Lab Task
18
