CS-344: WEB ENGINEERING
Dr. Qaiser Riaz [Link]@[Link]
BESE-10AB Lecture-2ABC Fall-2021
School of Electrical Engineering and Computer Science (SEECS)
National University of Science and Technology (NUST)
2
Outline
• Groups for assignments and semester project
• HTML
• Brief History
• HTML5
• Structure
• Syntax
• Elements
• Basic tags
3
HTML HISTORY
4
Information Management: A Proposal (1989)
• Tim Berners-Lee
• Submitted a proposal concerned
with the management of general
information about accelerators and
experiments at CERN
• He discussed
• The problems of loss of information
about complex evolving systems
• Derived a solution based on a
distributed hypertext system
• Hypertext is text which contains links to
other texts. The term was coined by Ted
Nelson around 1965
5
1989: The Birth of Web, HTTP
• Berners-Lee invented the
World Wide Web, HTTP, and
wrote the first HTML page
• The first website was
dedicated to the World Wide
Web project itself and was
hosted on Berners-Lee's
NeXT computer
• Both the NeXT machine and the
original browser are still in
CERN
• Hint: Visit CERN to see first
website at [Link]
6
1993: The Birth of Web, HTTP
• Berners-Lee presented three important standards for WWW
in the 26th meeting of Internet Engineering Task Force
• The URL
• Hypertext Markup Language (HTML)
• HTTP access protocol
• CERN put the World Wide Web software in the public domain
7
How the system will look like?
8
Accessing Existing Data
9
1993: The Birth of Web, HTTP
• Berners-Lee also presented
• The first browser: NCSA’s “Mosaic” WWW client
• Features include
• Add bookmarks
• Display images
• Better UI
10
Internet Hosts: 1994 – 2017
11
1994: The World Wide Web Consortium
(W3C)
• Berners-Lee founds the W3C to standardize
HTML for all browsers to follow
• 1995: HTML 2.0
• 1997 (Jan): HTML 3.2
• 1997 (Dec): HTML 4.0
• 1999: HTML 4.01
• 2004: …
12
2004: The HTML5
• Browser developers got frustrated with W3C
progress and created a new standards committee to
write the "HTML5" spec, which adds:
• Form input types
• Audio/video
• 2d/3d Graphics
• Data storage
• New semantic tags
• Drag-and-drop
• ...and more!
• In 2008, the W3C adopted it as a standard
13
THE HTML
14
HTML
• HTML stands for HyperText Markup Language
• Derived from SGML(Standard Generalized
Markup Language )
• It’s not a procedural programming language like
C, Fortran, Cobol or Pascal
• A standard markup language for creating web
pages and web applications
15
Markup Language
• A markup language is a combination of text and a set of
symbols/tags
• The symbols/tags are inserted in a text document to
control
• Structure
• Formatting
• The relationship among its parts
• The markup symbols can be interpreted by a device
(computer, printer, browser, etc.) to control how a
document should look when printed or displayed on a
monitor
• Examples of Markup Languages: XML, GML, SGML,
HTML, XHTML etc.
16
HTML Syntax
• The DOCTYPE
• Elements
• Attributes
• Comments
17
The DOCTYPE
• The <!DOCTYPE> declaration
• Must be the very first thing in an HTML document
• Its not an HTML tag
• An instruction to the web browser about what version of HTML the page
is written in
• In HTML 4.01, the <!DOCTYPE> declaration refers to a Document
Type Declaration (DTD)
• The DTD specifies the rules for the markup language, so that the
browsers render the content correctly
• HTML 4.01 was based on SGML (Standard Generalized Markup Lang.)
• HTML5 is not based on SGML
• Does not require a reference to a DTD
• Examples
• HTML5:
• <!DOCTYPE html>
• HTML 4.01
• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[Link]
18
The DOCTYPE: Example
• See the HTML Source of [Link]
<!doctype html>
<html …>….</html>
• How to view HTML source of any web page?
19
HTML Elements
• HTML Tags
• Keywords surrounded by angle brackets like <html>
• Normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the
end tag
• Case insensitive
• Ignores white spaces and unknown attributes
• HTML Documents = Web Pages
• HTML documents describe web pages
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
20
HTML - Fundamentals
• Paired Tags
• <name attributes> stuff </name>
• <b>text to be bolded</b>
• <h1>level 1 heading text</h1>
• Unpaired Tags
• <name attributes />
• <hr/>, <br/>
• <img src=“url” width=‘100px’ height=’60px’/>
• Comments
<!-- comment text -->
21
HTML – Fundamentals: Document Structure
< HTML >
Header
Body
< / HTML>
22
HTML – Fundamentals: Document Structure
<html>
<head>
<title> The title of your html page </title>
…
</head>
<body>
<! - - your web page content and markup - ->
</body>
</html>
23
Various HTML Elements
24
Writing and Saving an HTML File
The name is enclosed in
double quotes that is
<name>dot<extension>.
25
Web Development Tools
• Text Editors e.g. notepad, notepad++
• WYSIWYG Editors
• Adobe DreamWeaver
• Microsoft FrontPage
• Eclipse WTP/PDT
• Netbeans
• Zend studio
• My recommendations
• Notepad at initial stages
• Eclipse WTP, Netbeans at later stages
26
HTML – Fundamentals
<html>
<head>
</head>
<body>
Mike Tyler
PO Box 190387
Hungry Horse, Mt 59919
</body> Output
</html>
27
HTML - Fundamentals
<html>
<head>
</head>
<body>
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br>
</body>
<html> Output
28
HTML - Fundamentals
Attributes
<html>
<head>
</head>
<body>
<font face=“Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br>
</font> Output
</body>
<html>
29
HTML - Fundamentals
<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font> Output
</p>
</body>
<html>
30
HTML - Fundamentals
<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
<img src="[Link]
</p>
</body>
<html>
Output
31
HTML - Fundamentals
<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt 59919<br></font>
<img src="[Link]
<a href=“[Link]”>Read my Bio</a>
</p>
</body>
<html>
32
HTML - Fundamentals
Output
33
HTML – Fundamentals: Lists
Unordered list Ordered list
<ul type=‘disc’> <ol type=“i” start=“2”>
<li>apples</li> <li>apples</li>
<li>bananas</li> <li>bananas</li>
<li>grapes</li> <li>grapes</li>
<li>strawberries</li> <li>strawberries</li>
</ul> </ol>
34
HTML – Fundamentals
Lists
Unordered list Ordered list
• apples II. apples
• bananas III. bananas
• grapes IV. grapes
• strawberries V. strawberries
What is Definition
List?
35
HTML – Fundamentals: Heading
• Renders text as a heading, the rendering depending on
the level of heading selected.
<h1>Heading 1 level text</h1>
<h2>Heading 2 level text</h2>
<h3>Heading 3 level text</h3>
<h4>Heading 4 level text</h4>
<h5>Heading 5 level text</h5>
<h6>Heading 6 level text</h6>
36
HTML – Fundamentals: Horizontal Lines and
Comments
• Horizontal Line
• The <hr /> tag is used to create an horizontal rule (line).
<p>This is a paragraph</p>
<hr/>
• Comments
• Comments are ignored by the browser and are not displayed.
• Make the code readable and understandable
<!-- This is a comment -->
37
Miscellaneous
• Handling Special Characters
• Colors
Color HEX RGB
Character Description Entity Name #000000 rgb(0,0,0)
space #FF0000 rgb(255,0,0)
< less than < #00FF00 rgb(0,255,0)
> greater than > #0000FF rgb(0,0,255)
& ampersand & #FFFF00 rgb(255,255,0)
" quotation mark " #00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
38
HTML – Fundamentals: Colors
color = “red”
color = “#FF0000”
Hexadecimal values vary from 00 to FF
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
#FF FF FF
Red Blue
Green
39
HTML – Fundamentals: Text Formatting Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
40
HTML STYLE
41
HTML – Fundamentals: Style Attribute
• Purpose: To provide a common way to style all
HTML elements
• It’s an HTML Global Attribute
• Style attribute can be added to any HTML elements
• HTML Style Examples
• style="background-color : yellow"
• style="font-size:10px"
• style="font-family : Times"
• style="text-align : center"
42
HTML – Fundamentals: Style
<html>
<body style="background-color : PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana; color:red">
This text is in Verdana and red
</p>
<p style="font-family:times; color:green">
This text is in Times and green
</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>
43
HTML – Fundamentals: Style
<html>
<body style="background-color : PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana; color:red">
This text is in Verdana and red
</p>
<p style="font-family:times; color:green">
This text is in Times and green
</p>
<p style="font-size:30px">This text is 30 pixels high</p>
</body>
</html>
44
Hyperlinks: Essence of Hypertext
• Anchor Tag
• <a href=“url”> description </a>
<p>Kalfoglou and Schorlemmer presented
<a href=“[Link]
Information Flow based Ontology Mapping</a> at the
International Conference …</p>
[Link]
45
More about Hyperlinks
• By default, links will appear as follows in all
browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
46
More about Hyperlinks
• Absolute Paths (not recommended)
• <a href=“e:/myWeb/html/[Link]”>
• Relative Paths (recommended)
• Same directory: <a href=“[Link]”>
• Parent directory: <a href=“../[Link]>
• Target Attribute
• <a href=“url” target=“_blank”>…</a>
47
HTML – Fundamentals: Tables
<TABLE BORDER=“1”>
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>
48
HTML – Fundamentals: Table Attributes
• BORDER=value
• ALIGN=left | right | center
• CELLSPACING=value
• CELLPADDING=value
• WIDTH=value|percent
49
HTML – Fundamentals: Tables
<TABLE BORDER=1 WIDTH=“50%" CELLPADDING=“6”
CELLSPACING=“2” ALIGN="RIGHT">
<CAPTION ALIGN="bottom">Class Grades</CAPTION>
<TR>
<TH>Student</TH>
<TH>Grade</TH>
</TR>
<TR>
<TD>Tom</TD>
<TD>B+</TD>
</TR>
<TR>
<TD>Sue</TD>
<TD>A-</TD>
</TR>
</TABLE>
HTML – Fundamentals: Tables
rowspan and colspan
50
51
HTML – Fundamentals
<TABLE BORDER=1 WIDTH="50%" CELLPADDING=5 ALIGN="center">
<TR>
<TD colspan=2 align='center'>
<font color="red"><b>Student Grades</b></font>
</TD>
</TR>
<TR>
<TD><b>Student</b></TD>
<TD><b>Grade</b></TD>
</TR>
<TR>
<TD>Tom</TD>
<TD rowspan=2>A</TD>
</TR>
<TR>
<TD>Sue</TD>
</TR>
</TABLE>
52
Screen Compatibility
1280 x 1024
1024 x 768
800 x 600
640 x 480
HTML – Fundamentals: Tables
• Tables are frequently used to layout the basic web page design .
1280
640 53
Further Reading
• W3Schools is a good and widely used resource to learn
HTML
• [Link]
• [Link]
• [Link]