Web

Languages and
Technologies

Bruno Veloso
brunov@upt.pt
23/09/2018

IMP.GE.190.0
 2

The State of the Web

IMP.GE.190.0
 3

Browser Market share 2018

IMP.GE.190.0
 4

Number of domains per country 2018

IMP.GE.190.0
 5

Testing your Web Applications

•Firefox 62+
•Chrome 68+
•Edge
•Internet Explorer 11

•It’s mandatory to have your final project work correctly in IE, Firefox,
Chrome and Edge because together they represent 80 % of the
market share.
•One of these is enough for class assignments.

IMP.GE.190.0
 6

Applications != Websites

Website
•Main activity: content consumption (example: news)

Application
•Main activity: Interaction (example: SIUPT)

IMP.GE.190.0
 7

HTTP (Hyper Text Transfer Protocol)

IMP.GE.190.0
 8

What browser does

•Basic page load is synchronous

•When page arrives, often loads others (images, css, js)
•Complications: caching, asynchronous calls, events…
IMP.GE.190.0
 9

HTTP protocol

Simplified protocol
•Session ::= request response
•Request ::= requestLine header + [body]
•RequestLine ::= method path
•Response ::= status header + [body]
What headers contain
•Info about request or response, or about body
What body contains
•In request: form data, uploaded files
•In response: resource

IMP.GE.190.0
 10

Example 1 – Web page Headers

IMP.GE.190.0
 11

Some examples of “methods” and “return”

Verbs
•GET
•POST
•PUT
•DELETE

Categories of codes Codes Examples

•1xx informational • 200 - OK
•2xx success • 304 - Not Modified
•3xx redirect • 310 - Too Many Redirects
•4xx client error • 403 - Forbidden
•5xx server error • 404 - Not Found
• 500 - Internal Server Error
• 503 - Service Unavailable

IMP.GE.190.0
 12

Example 2 – Web page Headers

IMP.GE.190.0
 13

Headers (request/response)

•Many text-based key-value pairs

•In the request, they identify the browser, which kinds of contents it
supports, the language of the user’s operating system, compression,
etc.
•In the response, includes the return code and other information of the
server.

IMP.GE.190.0
 14

HTML (Hyper Text Markup Language)

IMP.GE.190.0
 15

What is it?

•Created in the early 90’s of the 20th century, by the physicist Sir Tim
Berners-Lee as a new format to share information and scientific articles
on the Internet.
•HyperText: Means it’s possible to navigate from one article to another
through a connection.
•Markup Language: Beyond the content, HTML describes semantically
how each piece of content relates to the rest.
•HTML is pure text and can be written in any text editor.

IMP.GE.190.0
 16

How do you markup?

•Through elements, also called tags.

•All elements have an opening tag and almost always a closing tag.
•Tags are made up of the < and > symbols.
•Closing tags include the / symbol.
•For instance, a paragraph of text should be marked up with the P
element becoming:
•<p>This is a paragraph.</p>

Opening tag Content Closing tag

IMP.GE.190.0
 17

Link example

•Elements can contain other elements, beyond text.

•This is especially common with the A element, or anchor, which
establishes a connection between the text and another page/file.
•For instance, a paragraph of text with a piece of text linking to another
website through an anchor:
•<p>Watch the news on <a href=“http://cnn.com”>CNN</a>.</p>

Opening tag Content Closing tag

IMP.GE.190.0
 18

Elements with attributes

•In certain elements it’s mandatory or possible to apply attributes that

modify or provide complementary markup information.
•In the previous example, the A element, needs the target of the link.
• This target is provided in the href attribute, which means
hypertext-reference, but it’s informally called an hyperlink.
•HTML attributes can be one of two kinds:
• Name=value
• Boolean

IMP.GE.190.0
 19

Time-out – syntax differences

•Elements and attributes can be written in UPPERCASE or lowercase.

• Lowercase is recommended.
• Never mix letter case!
•It’s recommended that name=value attributes provide the value inside
either double “ or single quotes ‘.
•In certain elements it’s mandatory or possible to apply attributes that
modify or provide complementary markup information.
• In certain situations it’s not mandatory to use them, but why
memorize all the exceptions when it’s much simpler to use
them all the time?
• It’s recommended to use one or the other and never mix
them!
• It’s never possible to mix them in the same attribute value!
You should always use the W3C HTML validator!

IMP.GE.190.0
 20

A closing tag isn’t always mandatory

•It’s only required when the element has content.

•Examples of elements which never have content, called void elements.
•IMG, BR, HR, …
•In these situations it’s recommended that the / symbol used in the closing
tag be used at the end of the opening tag.
•The IMG element, that represents an image, does not (textual) content:
•<p>My dog <img src=“dog.png” /> is really ugly!</p>

Single opening/closing tag

IMP.GE.190.0
 21

There are many HTML elements

•BR: line break

•HR: section break
•B: keyword
•I: text in another voice or tone
•CODE: code (programming language, etc.)
•FORM: user form
•TABLE, INPUT, OL, DIV, TIME, …

IMP.GE.190.0
 22

Tree representation

•Taking the previous example:

•<p>My dog <img src=“dog.png” /> is really ugly!</p>
•We can represent it graphically as such:

My dog

p img

Is really
ugly

IMP.GE.190.0
 23

Modifying the previous example

•<p>My <a href=“dog_big.jpg”>dog <img src=“dog.png” /></a> is really

ugly!</p>

My
dog
p A
img
Is really
IMP.GE.190.0
ugly
 24

Elements and nodes

•Visualizing HTML as a tree we can now discuss:

• Root: the starting/taller element.
• Node: intermediate elements.
• Leaf: an element with no children.
• In the tree concept, textual content is considered an
element’s child.

•We can also identify that elements…

• …have a parent.
• …have siblings.
• …have children.

IMP.GE.190.0
 25

Historical perspective I

•HTML v <= 3.2

• Many functionality added, not always in the smartest way.

•HTML v4.0.x
• A lot of presentation functionality copied to CSS
(Cascading Style Sheets).
• Some functionality was removed.

•HTML v5
• Virtually all presentation functionality moved to CSS.
• Much functionality was removed.
• A lot of semantic functionality was added.

IMP.GE.190.0
 26

HTML5, A technical specification for Web

developers, Agosto 2012

•“The World Wide Web's markup language has always been HTML.
HTML was primarily designed as a language for semantically
describing scientific documents, although its general design and
adaptations over the years have enabled it to be used to describe a
number of other types of documents.
•The main area that has not been adequately addressed by HTML is a
vague subject referred to as Web Applications. [The HTML5]
specification attempts to rectify this, while at the same time updating
the HTML specifications to address issues raised in the past few
years.”

IMP.GE.190.0
 27

Page elements

•An HTML page, beyond its content and respective markup, needs a
framework.

•This framework is represented by 4 elements.

• Although only one of these elements is mandatory, it’s highly
recommended the use of all four!

IMP.GE.190.0
 28

DOCTYPE

•The HTML page must always begin with the following line of code:
<!doctype html>
•This tells browsers that the following text should be interpreted as standards-
based HTML (informally as HTML 5).

IMP.GE.190.0
 29

Root

•After the doctype, the page should have the root element that contains ALL
the rest of the html:

<!doctype html>
<html>
…
</html>

IMP.GE.190.0
 30

Inside the root, split into two parts

•Inside the HTML element, there should be two sibling elements.

• The HEAD element contains meta-data about the page.
• The BODY element contains the actual page’s content.

<html>
<head>
…
</head>
<body>
…
</body>
</html>

IMP.GE.190.0
 31

A basic but valid page

<!DOCTYPE html>
<html> Mandatory
<head>
<meta charset='utf-8' />
<title>Hello, World!</title>
</head>
<body>
Hello, World!
</body>
</html>

IMP.GE.190.0
 32

HTML5 Resources

•Tutorials
• http://diveintohtml5.info/
• http://developers.whatwg.org/
• http://www.html5doctor.com/
• http://mathiasbynens.be/notes/html5-levels
• http://www.html5rocks.com/
•Tools:
• http://validator.w3.org/

IMP.GE.190.0
 33

Exercise 1

•Create a HTML page with:

• Title
• 2 Input fields to validate the content like email and password

IMP.GE.190.0
 34

Exercise 2

•Create a HTML page to describe a recipe of your favorite dish.

• HTML
• CSS
• JavaScript

IMP.GE.190.0
 35

IMP.GE.190.0