Scribd
Upload
60 views

Cs-344: Web Engineering: Dr. Qaiser Riaz

CS-344 is a web engineering course taught by Dr. Qaiser Riaz at NUST. The document outlines the course, including assigning groups for assignments and projects and providing an overview of HTML and its history. Key events in HTML's development are discussed, such as its origins in 1989 and the formation of the W3C in 1994 to standardize HTML. HTML syntax and basic tags are also introduced.

Uploaded by

Hasan Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
60 views

Cs-344: Web Engineering: Dr. Qaiser Riaz

CS-344 is a web engineering course taught by Dr. Qaiser Riaz at NUST. The document outlines the course, including assigning groups for assignments and projects and providing an overview of HTML and its history. Key events in HTML's development are discussed, such as its origins in 1989 and the formation of the W3C in 1994 to standardize HTML. HTML syntax and basic tags are also introduced.

Uploaded by

Hasan Ahmed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

CS-344: WEB ENGINEERING

Dr. Qaiser Riaz [email protected]

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 http://info.cern.ch/
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"
"http://www.w3.org/TR/html4/strict.dtd">
18

The DOCTYPE: Example

• See the HTML Source of www.google.com.pk


<!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="file:///c:/mike.jpg"/>
</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="file:///c:/mike.jpg"/><br>
<a href=“biopage.html”>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 &nbsp; #FF0000 rgb(255,0,0)
< less than &lt; #00FF00 rgb(0,255,0)
> greater than &gt; #0000FF rgb(0,0,255)
& ampersand &amp; #FFFF00 rgb(255,255,0)
" quotation mark &quot; #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=“http://citeseer.ist.psu.edu/2146170”>
Information Flow based Ontology Mapping</a> at the
International Conference …</p>

http://citeseer.ist.psu.edu/2146170
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/intro.html”>

• Relative Paths (recommended)


• Same directory: <a href=“file.html”>
• Parent directory: <a href=“../file.html>

• 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

• https://www.w3schools.com/html/html_tables.asp

• https://www.w3schools.com/html/html_styles.asp

• https://www.w3schools.com/html/html_lists.asp

You might also like