Scribd
Upload
10 views59 pages

Lecture 4

Uploaded by

hassanmansoor1569
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views59 pages

Lecture 4

Uploaded by

hassanmansoor1569
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

CS-344: WEB ENGINEERING

Dr. Farzana Jabeen AssistantProfessor


[email protected]

BSCS-12 Lecture-4AB Spring-24

School of Electrical Engineering and Computer Science


National University of Science and Technology (NUST)
Outline
HTML
 Brief History

HTML5
 Structure

 Syntax

 Elements

 Basic tags
2
HTML HISTORY

3
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/

4
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

5
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

6
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: …

7
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

8
THE
HTML

9
HTM
L
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
10
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.

11
HTML Syntax
 The DOCTYPE

 Elements

 Attributes

 Comments

12
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

 Examples
 HTML5:
 <!DOCTYPE html>
 HTML 4.01
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" 13

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


14
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

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

16
HTML – Fundamentals: Document
Structure
< HTML >

Header

Body

< / HTML>
17
HTML – Fundamentals: Document
Structure
<html>
<head>
<title> The title of your html page </title>
…
</head>
<body>

<! - - your web page content and markup ->

</html>
</body>

18
Various HTML Elements

19
Writing and Saving an HTML File

The name is enclosed in


double quotes that is
<name>dot<extension>. 20
Web Development Tools
Text Editors e.g. notepad, notepad++
WYSIWYG Editors
Eclipse WTP/PDT
Netbeans
Zend studio
 Kompozer
 Dreamweaver
 FrontPage,
 HomeSite

21
HTML – Fundamentals

<html>
<head>
</head>
<body>
Mike Tyler
PO Box 190387 Output
Hungry Horse, Mt 59919
</body>
</html>
22
HTML - Fundamentals
<html>
<head>
</head>
<body>
<h1>Mike Tyler</h1>
PO Box 190387<br>
Hungry Horse, Mt Output
59919<br>
</body>
<html> 23
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 Output
59919<br>
</font>
</body>
28
HTML - Fundamentals
<html>
<head>
</head>
<body>
<p align="center">
<font face="Arial" color="red" size="3">
<h1>Mike Tyler</h1>
Output
PO Box 190387<br>
Hungry Horse, Mt
59919<br></font>
</p>
</body> 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>
<img src="file:///c:/mike.jpg"/>
</p>
</body>
<html>
Outpu
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"/><br>
<a href=“biopage.html”>Read my Bio</a>
</p>
</body>
<html>
27
HTML - Fundamentals

Output

28
HTML – Fundamentals: Lists
Unordered list Ordered list

<ul type=‘disc’> <ol type=“i”


<li>apples</li> start=“2”>
<li>bananas</li> <li>apples</
<li>grapes</li> li>
<li>strawberries</li> <li>bananas<
/li>
</ul>
<li>grapes</
li>
29

<li>strawberr
HTML – Fundamentals
Lists
Unordered list Ordered list

 apples II. apples


 bananas III. bananas
 grapes IV. grapes
 strawberries V. strawberries

What is Definition
List?
30
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>

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


32
Miscellaneous
 Handling Special Characters
 Colors

Character Description Entity Name


space &nbsp;
< less than &lt;
> greater than &gt;
& ampersand &amp;
" quotation mark &quot;

33
HTML – Fundamentals: Colors

color = “red” Color HEX RGB


#000000 rgb(0,0,0)
color = “#FF0000” #FF0000 rgb(255,0,0)

Hexadecimal values: 00 to FF #00FF00 rgb(0,255,0)


#0000FF rgb(0,0,255)
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f #FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FF FF FF
#FFFFFF rgb(255,255,255)

Red Blue

Green
34
HTML
STYLE

35
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"

36
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>
41
</html>
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>

38
Hyperlinks: Essence of Hypertext
 HTML links are hyperlinks

 You can click on a link and jump to another


document.

 When you move the mouse over a link, the mouse


arrow will turn into a little hand.

 Anchor Tag
<a href="url">link text</a>
39
More about Hyperlinks
<a href="https://www.w3schools.com/">Visit <a>

 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

40
Hyperlinks - The Target Attribute
 The target attribute specifies where to open the
linked document.

 The target attribute can have one of the following


values:
 _self - Default. Opens the document in the same
window/tab as it was clicked
 _blank - Opens the document in a new window or
tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the
window

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

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

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

44
HTML – Fundamentals: Table
Attributes
 BORDER=value

 ALIGN=left | right | center

 CELLSPACING=value

 CELLPADDING=value

 WIDTH=value|percent

45
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>
50
</
HTML – Fundamentals: Tables

rowspan and colspan

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>

48
HTML FORMS
What are Forms?
 An HTML form is used to collect user input and send
it to the server for processing

 A form is a placeholder that contains form elements

<form parameters> ...form elements... </form>

 Form elements include: buttons, checkboxes, text


fields, radio buttons, drop-down menus, etc

A form usually contains a Submit button to


send the
information in the form elements to the server
The <form> element
 The <form attributes> ... </form> tag encloses form elements

 The attributes of form specify what to do with the user input

1. action=“url” (required)
 Specifies where to send the data when the Submit
button
is clicked

2. method=“GET" (default)
 Specifies how to submit the data e.g. through GET or
POST
The Action Attribute
 The action attribute defines the action to be performed when the form is
submitted.
 Usually, the form data is sent to a file on the server when the user clicks on the
submit button.

52
The Method Attribute
<html>
<body>

<form name="form1" action="next.html" method="get">


name:<input type ="text" id="name" name="name">
<input type="submit" value="next" >
</form>

</body>
</html>

53
Method = GET or POST

 GET is used to request data from a specified resource.


 Note that the query string (name/value pairs) is sent in the URL
of a GET request:

 POST is used to send data to a server to create/update a


resource.
 The data sent to the server with POST is stored in the request
body of the HTTP request:

54
Method = GET vs POST
The <input> Element
 The HTML <input> element is the most used form
element.
 An <input> element can be displayed in many ways,
depending on the type attribute

56
Text Fields

57
Radio Buttons

58
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