CTEC2712 Web application development

Contextualisation

A brief history of web technology

Dr Graeme Stuart

Contents

  1. Infrastructure
  2. Communication
  3. Usability
  4. Hypertext
  5. The internet
  6. The world wide web
  7. The first website(?)
  8. URLs
  9. HTTP
  10. A markup language for hypertext documents
  11. Example HTML
  12. HTML documents
  13. HTML documents
  14. Anatomy of an HTML element
  15. Elements can have attributes
  16. Anchors (hyperlinks)
  17. Void elements
  18. Semantic elements
  19. Accessibility
  20. HTML validation
  21. The birth of the web at CERN

Infrastructure

Communications infrastructure: telegraph cables 1901 vs internet backbone 2023

infrastructure 1901 infrastructure 2023

Long-distance communications technologies - semaphore, telegraph, telegram, telex, telephone, radio/tv, internet.

1

Communication

Systems are built on what came before. Language allows complex ideas to be communicated. Writing allows ideas to be communicated accurately over long distance and time. Libraries and printing allow for coordinated knowledge management.

A woman communicating with a chimp using sign language A proto-cuneiform tablet The modern library of Alexandria A Gutenberg press

“Consciousness is that portion of cognition which is packaged for exchange” - Bret Weinstein

2

Usability

The memex, Vannevar Bush, 1945

Bush memex

According to Life magazine, the Memex desk “would instantly bring files and material on an subject to the operator’s fingertips”. The mechanical core of the desk would also include “a mechanism which automatically photographs longhand notes, pictures and letters, then file them in the desk for future reference.”

3

Hypertext

Ted Nelson, Brief Words on the Hypertext, 23 January 1967

Ted Nelson a diagram of a hypertext document

“Hypertext is a recent coinage. Hyper- is used in the mathematical sense of extension and generality (as in hyperspace, hypercube) rather than the medical sense of excessive (hyperactivity).”

4

The internet

TCP / IP was standardising networks in the 80’s. The Domain Name System (DNS) emerged. The internet was well established in 1989.

Retro-tech NeXTcube computer used by Tim Berners-Lee as the first web server ever

Email was popular. Files were shared using FTP.

5

The world wide web

The world wide web is an open system for publishing HyperText documents over the internet. It was created in 1989 by Tim Berners-Lee at the Conseil Européen pour la Recherche Nucléaire (CERN).

Tim Berners-Lee A client/server model for a distributed hypertext system.

Timbl defined standards for and HTTP and HTML. He also wrote a web server and a web client (browser).

6

The first website(?)

The first website was a very simple hypertext document linking out to more and more documents over time.

Visit it here.

7

URLs

A Uniform Resource Locator is a reference to a resource on a network.

URI syntax diagram

URLs are broken into their component pieces using the pattern described above.

e.g. https://www.example.com/some-document.html?key=value#some-element

  • scheme: https
  • host: www.example.com
  • path: /some-document.html
  • query: key=value
  • fragment: #some-element

Browsers make calls to DNS to lookup the domain name and convert it to an IP address which it uses to communicate to the server.

8

HTTP

HyperText Transfer Protocol is the core mechanism for communicating between web clients (browsers) and web servers.

A diagram showing HTTP request and response

MDN has a great set of pages describing HTTP.

9

A markup language for hypertext documents

Markup refers to literally making marks on a written manuscript to indicate how it should be treated when printed.

typesetting markup

Markup languages add information about the content.

10

Example HTML

Note that HTML does not include any information about how to format content. It simply indicates what kind of content the various parts of the document are.

1
2
3
4
5
6
7

<h2>Example HTML</h2>
<p>
    This content is <em>marked up</em> using <strong>HTML</strong>
    to indicate that the first line is a level 2 heading
    and the rest of the text should be combined into one paragraph. 
    Emphasis has been added to a few of the words.
</p>

Example HTML

This content is marked up using HTML to indicate that the first line is a level 2 heading and the rest of the text should be combined into one paragraph. Emphasis has been added to a few of the words.

11

HTML documents

ALL HTML5 documents consist of a <!DOCTYPE html> and an <html> element only. There should be nothing else in the file!

1
2

<!DOCTYPE html>
<html></html>

1
2
3
4
5

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

The <html> element should contains only a <head> element and a <body> element. Nothing else is allowed as a direct child of the <html> element.

Within the <head> element there should be a <title> element and <meta> element defining the character set. You can also add other information about the document, including linked files and scripts. All the visible content of the page should be inside the <body> element.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>My amazing webpage</title>
    </head>

    <body>
    <!-- your document content goes here -->
    </body>
</html>
12

HTML documents

HTML documents are the core structure which brings together content which may be served from all over the web.

Tim Berners-Lee web document

The browser will make an initial HTTP request to the server for an HTML document. The document may include embedded content requiring subsequent requests.

13

Anatomy of an HTML element

HTML elements consist of content between matching pairs of tags.

The anatomy of an HTML element

The opening and closing tags are slightly different

14

Elements can have attributes

Elements can have attributes to add information that should not be considered content. Attributes are key/value pairs separated by an equals symbol.

1

<p class="note">My cat is very grumpy.</p>

Attributes are placed inside the opening tag.Attribute values should be contained in “double quotes”. Pay attention to the details.

1
2
3
4
5
6

<p attribute="this-is-wrong"attribute2="this-is-wrong">
    Missing space between attributes
</p>
<p attribute1=value3>
    Missing quotes
</p>

Some common mistakes include missing the space between attributes and missing quotes around attribute values.

15

Anchors (hyperlinks)

Anchor elements require a hypertext reference (an href attribute) pointing to the link destination as a Uniform Resource Locator (URL). There are three main kinds of link.

linking to another element

1
2
3

<a href="#my-element">
    that element
</a>

linking to another document

1
2
3

<a href="another-page.html">
    that document
</a>

linking to another server

1
2
3

<a href="https://www.dmu.ac.uk">
    that website
</a>

Combinations are common.

1
2
3

<a href="https://www.example.com/some-document#section-1">
    an element in a document on another server
</a>

The content will become a clickable link. Clicking the link with induce the browser to issue an HTTP GET request and render the document provided by the server.

16

Void elements

Void elements such as <br>, <img> and <input> are not allowed to contain content. These elements do not require closing tags.

1
2
3
4
5
6
7

<br> <!-- line breaks are very simple -->

<!-- images require 'src' and 'alt' attributes -->
<img src="path/to/image" alt="alternative text">

<!-- inputs have many optional attributes to control their operation -->
<input type="text" value="default">

The <input> element has a value attribute rather than content.

1
2
3
4

<head>
    <link rel="stylesheet" href="path/to/styles.css">
    <meta charset="utf-8">
</head>

The <link> and <meta> elements are also void

17

Semantic elements

Semantic elements add meaning to your document structure and provide accessibility advantages. Choosing semantic elements in preference to meaningless elements such as <div> and <span> adds meaning.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- bad -->

<div id="myheader"></div>
<div id="navigation"></div>
<div id="main-content">
    <div class="section">
        <div class="article">
            <h2>This is some content</h2>
        </div>
    </div>
    <div class="special-section"></div>
</div>
<div id="the-footer"></div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- good -->

<header></header>
<nav></nav>
<main>
    <section>
        <article>
            <h2>This is some content</h2>
        </article>
    </section>
    <section class="special"></section>
</main>
<footer></footer>

Semantic documents can be understood more fully by the browser and by other software because the various elements have been given meaning.

18

Accessibility

Accessible Rich Internet Applications (ARIA) present information to assistive technologies to improve accessibility. Adding a role will convert your element into an ARIA landmark.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div role="banner">
    <h1>Accessibility</h1>
    <div role="navigation">
        <a href="#link-1">Link 1</a>
        <a href="#link-2">Link 2</a>
        <a href="#link-3">Link 3</a>
    </div>
</div>
<div role="main">
    Main content
</div>
<div role="contentinfo">
    Footer content
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<header>
    <h1>Accessibility</h1>
    <nav>
        <a href="#link-1">Link 1</a>
        <a href="#link-2">Link 2</a>
        <a href="#link-3">Link 3</a>
    </nav>
</header>
<main>
    Main content
</main>
<footer>
    Footer content
</footer>

Most of the newer, semantic elements include these roles implicitly. This makes your HTML simpler and more accessible. See the Chrome A11y podcast for more on accessibility.

19

HTML validation

Validate your HTML!

Validation errors

online HTML validator

20

The birth of the web at CERN

It’s difficult to imagine the world before the web.

21

Contextualisation

If you have any questions, now is a good time to ask.

Thanks for listening
Dr Graeme Stuart