Web Application Development

Jakub Klinkovský

:: Czech Technical University in Prague
:: Faculty of Nuclear Sciences and Physical Engineering
:: Department of Software Engineering

Lecture Outline

1. Basic Concepts
2. HTML Language
3. Other Markup Languages
4. Web Page Creation

Basic Concepts

1. Transmission network – data transfer using communication protocols
2. Resource addressing – URI/URL
3. Data formats for content description – HTML, JPG, JSON, ...

WWW (World-Wide Web)

WWW is a service of the Internet computer network that has changed its face and the structure of its users ("packaging sells"). Together with email, it is one of the most widely used services.

WWW Properties:

• Hypertext: A document can contain links to other documents (even from other servers) and can provide access to other Internet services (FTP, email, VoIP, ...)
• Multimedia: In addition to text, a document can include images, sound, animations, ... (anything that can be digitized)
• User-friendly: Assumes a graphical user interface (GUI) → easy and intuitive use
• Platform-independent: The same content can be displayed on any device

How WWW Works

Client-server model:

• Client = program that sends queries to obtain data and displays results
  • Browser – interacts with the user and displays results graphically
• Server = computer that provides data, processes queries, and sends responses

Communication rules between client and server on the Internet are defined by certain protocols. For WWW, the HTTP and HTTPS protocols are used. The client's query must specify the target document → the document's unique address is recorded in the form of a URL. After processing the query, the server sends back the corresponding document, which the client analyzes and displays to the user.

Documents on the Internet

The type of content on the Internet is determined by the so-called media type (in Czech, "internet media type"), e.g.:

• text/plain – plain, unformatted text
• text/html – text formatted using the HTML markup language
• text/css, text/javascript, text/xml, ...
• image/jpeg, image/png, audio/ogg, video/mp4, ...
• application/zip, ...

The media type determines how the browser should format and display the content.

Note: The external characteristic of HTML files is the .html (or .htm) extension. However, extensions do not determine the content type, they can be non-standard or completely missing.

Markup Languages

A markup language is a tool for describing text formatting, i.e., for defining the structure of a document. It behaves similarly to typesetting languages like TeX or LaTeX but uses a different syntax (a set of tags).

Markup languages for WWW:

• SGML (Standard Generalized Markup Language) is a general standard for specifying markup languages:
  • HTML (HyperText Markup Language) – denotes the latest version 4.01
    • XHTML (Extensible HyperText Markup Language) – discontinued
    • HTML5 – an expanding HTML specification (current living standard)
  • XML – a general language for representing arbitrary data
    • further subsets: SVG, RSS, Atom, MathML, XSLT, XHTML, ...
• others: JSON, YAML, Markdown

Resource Identification

The need to uniquely identify various types of objects led to the specification of URI (uniform resource identifier). URI has two subtypes:

• URL (uniform resource locator) – specifies the location of the resource
  e.g. https://ksi.fjfi.cvut.cz/o-katedre/lide/jakub-klinkovsky
  e.g. mailto:somebody@somewhere.com
  e.g. file:///srv/http/root/static/base.css
• URN (uniform resource name) – specifies the identity of the resource
  e.g. urn:issn:1873-7668 – journal Computers & Mathematics with Applications

HTML Language

History of HTML I

• 1989 – the birth of WWW (distributed hypertext system) – CERN, Switzerland
• 1991-1997 – unofficial versions of HTML 0.9-3.0 (new tags gradually added)
• Simultaneously, the first web browsers are created (Nexus, Mosaic, Netscape, IE)
• 1997 – first standardized versions of HTML 3.2 and 4.0 by the W3C organization
• 1999 – the last official version of HTML 4.01, then the development is discontinued

HTML was the first language for defining the structure of web documents. However, due to historical reasons, tags and attributes for defining the appearance of specific parts of the page were also introduced during its early development.

• Effort to separate document structure (HTML) from appearance formatting (CSS)
• The successor was supposed to be the XHTML language, but it was not widely adopted by developers...

History of HTML II

• 2007 – work on HTML 5 begins (working drafts have been published since 2008), browser support is gradually added
• 2012 – work on HTML 5.1 begins
• 2016 – HTML 5.1 (Recommendation)
• 2017 – HTML 5.2 (W3C Recommendation)
• 2018 – HTML 5.3 (Working Draft)
• Currently: HTML – Living Standard (by definition, it will never be complete)

Browsers without HTML5 support are practically non-existent, see
https://www.w3schools.com/tags/ref_html_browsersupport.asp

Tags in HTML

HTML is a case-insensitive language (i.e., the case of letters in tag and attribute names does not matter). Convention: all lowercase.

Tags (tags) define the structure of the document (e.g., heading, paragraph). Tags in HTML can be unpaired, paired (i.e., the tag has an opening and closing part enclosing the content), or optionally paired. Tags can be nested but must not overlap.
Example: paired tag: <h1>Some heading</h1>, unpaired tag: <br> (can also be written as <br/>).

Display of a web page in a browser is based on the meaning of tags in the HTML document and additional rules affecting appearance (e.g., cascading styles – CSS).

Document Structure

The basic structure of an HTML document (web page) is constructed using the !DOCTYPE, html, head, and body tags:

<!DOCTYPE html>
<html>
  <head>
    tags belonging to the document header
  </head>
  <body>
    document body
  </body>
</html>

• The !DOCTYPE tag comes from XML and contains the document type definition (DTD). For HTML5, it has a simple form. For other document types, it is more complex, see W3C.
• The html tag can directly contain only the head and body tags.

head Tag – Document Header

The header delimited by the paired head tag contains additional information about the document intended for the browser and not for the reader. None of the information in the header is displayed by the browser, except for the content of the title tag (the page title appears in the browser's title bar).

The header can only contain the following tags:

• title for the page title (maximum 1)
• meta for declaring auxiliary information (e.g., the document's character set)
• link for linking external files (e.g., CSS, icons, fonts)
• style for defining cascading styles within the document
• script for defining/linking scripts (e.g., JavaScript)
• base (maximum 1), noscript

title Tag – Document Title

The paired title tag defines the page title or the name displayed in the browser's title bar. If not specified, the browser displays only the page's URL.

Search engines use the title when indexing the web, and browsers use it for user navigation between visited pages, text for bookmarks and history, so:

• Do not omit the document title!
• Fill the title with a thoughtful and meaningful text (max. 64 characters).

meta Tag – Specific Information about the Document

The unpaired meta tag serves as a "collective" tag: it contains various "auxiliary" information, e.g., information about the document's character set, keywords, page description, or information about the author. However, the importance of this tag is gradually decreasing.

Further information: https://www.jakpsatweb.cz/meta-tagy.html

Example – viewport setting for responsive web on mobile devices:

<meta name="viewport" content="width=device-width, initial-scale=1">

Example – character set declaration (preferably before title):

<meta charset="utf-8">

Character Set

... or which Czech encoding to choose?

Since the ISO Latin-1 character set (used for Western European languages) does not contain some Czech characters (ě, ň, ...), new character sets were created for Czech. Unfortunately, there are several, but some are rarely used. Currently, the most commonly used encodings are:

• UTF-8, UCS/Unicode Transformation Format – variable length (1 to 4 bytes), is backward compatible with ASCII
  • modern browsers handle it without issues, recommended for use
• ISO 8859-2 or Latin 2 (Unix/Linux) – single-byte
• CP 1250 (MS Windows) – single-byte

Regardless of the encoding you use, declare it using the meta tag.

meta Tag – General Use

General use:

<meta name="key_name" content="key_content">

Example – specifying the author:

<meta name="author" content="Jakub Klinkovský">

Example – page description:

<meta name="description" content="page description">

Example – keywords (separated by commas, no spaces) – search engines ignore them:

<meta name="keywords" content="word1,two words,word3">

link Tag – Linking an External File

The unpaired link tag establishes a link to another document.

Example – adding an external file with cascading styles (CSS):

<link rel="stylesheet" href="file.css" type="text/css">

Example – adding a custom icon (appears next to the title tag):

<link rel="icon" href="favicon.ico" type="image/x-icon">

script Tag

The paired script tag is used to define executable code (client scripts) or arbitrary data (e.g., CSS, JSON) within the document. Instead of an internal definition, the src attribute can be used to link to an external file (analogous to the link tag).

Note: it can be placed inside the head tag, but also in body.

Example – adding an external file with JavaScript:

<script src="file.js" type="text/javascript"></script>

Example – internal definition of JavaScript:

<script>alert("Hello World!");</script>

However, it is usually more advantageous to link external files (sharing for different documents).

body Tag – Document Body (Content)

The paired body tag contains the main part of the WWW document that should be displayed to users (visitors) of the page.

<body optional attributes>
  document content
</body>

Reminder: In HTML, tags inside body are used to describe the structure of the "visible" part of the WWW page. Appearance definition is separate and is handled by cascading styles (cascading style sheets, CSS).

Structuring Content in HTML

Overview of all tags in HTML:
w3schools.com, MDN Web Docs

Most commonly used:

• Semantic: main, article, section, aside, header, footer, nav, ...
• article can be inside section, or vice versa (not specified in the HTML5 specification)
• Non-semantic: div (division), span (text segment – inline)
• Prefer semantic tags for a more precise description of the document structure

Other Most Commonly Used Tags in HTML

And also tags for creating lists (ul, ol + li; dl + dt, dd), forms (form, input, select, label, legend, ...), tables (table, tr, th, td, ...).

Tag Attributes in HTML

Attributes are used to describe the content of a tag in more detail. They are specified either as a pair name="value", or only the attribute name is given (i.e., the attribute is "turned on"), for example <img src="img.jpg"> or <select size="5" multiple>.

HTML5 allows users to use custom data attributes starting with the data- prefix (the W3 validator ignores them). They can be used with any tag, and JavaScript can access them. They have many uses (e.g., displaying the date and time in the user's time zone; adding presentation information to the document structure when it cannot be done using CSS).

New data attributes (including data-) are supported by browsers released after 2015. If a browser does not understand an attribute, it ignores it.

Global Attributes id and class

These attributes can be used with any tag:

1. id is used to identify elements for linking, scripting, or styling
   • identifiers must be unique within the entire document
2. class is used to name element classes/categories for scripting and styling
   • the argument is a list of classes separated by spaces
   • each element can belong to several classes, and each class can contain several elements

Example:

<h2 id="heading-of-some-section">Heading of Some Section</h2>
...
<h2>Another Section</h2>
<a href="#heading-of-some-section">Link to the Previous Section</a>

lang Attribute

Used to specify the language for content within a tag.

Example – for the entire document:

<html lang="cs">

Example – for a section or paragraph:

<section lang="cs">
  Czech text
  <p lang="en">English paragraph</p>
</section>

Example – for a specific phrase:

<p>The title is "<span lang="fr">Le Bon Usage</span>".</p>

Character Entities

Character entities are used to display characters reserved for HTML needs:

There are many more character entities (e.g., for special characters in national alphabets).

The complete list can be found at whatwg.org.

Spaces and White Characters

The browser displays the text of the WWW document only according to HTML tags (and possibly formats its appearance defined by cascading styles). Hence, an interesting property: any sequence of white characters (spaces, line breaks$^\star$, tabs) is ignored by the browser and displayed as a single space in the result.
Consequence: a "cluster" of white characters (e.g., multiple spaces) unnecessarily occupies valuable transmission capacity.
If you need to use a non-breaking space (see Typography, use the   character entity (non-breaking space).

$^\star$ Note: the convention for line breaks in text files differs depending on the operating system: in Windows, lines are broken with the CRLF character pair (#0D0A, \r\n), in Unix/Linux with the \n character, and in MacOS with \r.

What You Should Know

• define a link to another URL (tag a, attribute href) or within the same document (attribute id on the target tag)
• define logical parts of the page using semantic tags, or div
• define headings of different levels (typically h1, h2, and h3, rarely higher)
• define a paragraph (p) and optionally insert line breaks (br)
• logically emphasize part of the text (em, strong)
• create lists (numbered ol, unnumbered ul)
• insert an image into the page (img)
• insert a table into the page (table)
• know basic HTML entities (<, >, &, ")
• for Czech web documents, declare the Czech encoding and document language
• look up the use of less known tags in the documentation

Other Markup Languages

What other markup languages do you know that are used on the web for text formatting?

HTML vs. Other Markup Languages

HTML is currently suitable as a transfer format for displaying the final document to the user, but due to its complexity, it is not very suitable for content creation.

There are markup languages that are simpler than HTML and specifically designed for efficient text writing and content creation. Specialized tools then ensure conversion to HTML and linking with the appearance definition according to selected criteria.

You will encounter markup languages in many places:

• dynamic web applications (Wikipedia, StackOverflow, HedgeDoc, Drupal, Wordpress, Facebook, X (formerly Twitter), ...)
• static web pages (see below)
• technical documents, software projects (documentation, specifications, ...)

Static Page Generators

Conversion to HTML from simpler markup languages or templates.

• Markdown: Hugo, Jekyll, mdBook, GitBook, Pelican, Publish, Hyde, Nikola, ...
• AsciiDoc: AsciiDoc, Asciidoctor
• reStructuredText: Sphinx, Docutils
• MkDocs, Doxygen, ...

Also see Top 5 Static Site Generators in 2023 (and When to Use Them)

But knowledge of HTML is still important for us since we want to do programing

Web Page Creation

Principles of Web Content Creation

The following part of the presentation summarizes the subject 18PW (Web Environment and Descriptive Languages).

Before starting to create any content, it is good to consider:

• What do you want to create, and what is it good for?
• Who is the content intended for?
• What will be the structure of the content? (division into pages/chapters)
• What will be the visual aspect of the created content?
• What tools will be needed? Will additional advanced features be required?
• How much will it cost in terms of money, time, and effort?
• Will it be worth it?

Agile Web Development

Agile development techniques are suitable for web content and application development:

• Adaptive approach, not predictive
• Planning, analysis, design, implementation, testing, and verification phases
• Iterative and incremental process: phases are repeated in short sprints
• Early feedback and error response
• Effective face-to-face communication in larger teams

What is agile web development? Everything you need to know

Agile Web Development

Communication is the key to success.

Agile Web Development

Communication is the key to success.

Web Quality Criteria

When creating a website, consider:

• usability,
• accessibility,
• pleasant graphic design,
• loading speed,
• quality content.

After creation, it is essential to regularly ensure content currency.

Usability

Usability means that a new visitor quickly orients themselves on the website, can quickly find the target, does not make unnecessary mistakes, and has a pleasant experience using the website.

How to achieve this?

• Clarity is better than clutter.
• Controls and navigation should be simple and logical.
• Don't make the user think.

Further resources:   Usability of Pages,    Accessibility, Usability, and Inclusion

Accessibility

Accessibility means that the website can be used by all visitors, regardless of their technical equipment (e.g., alternative software or low-resolution display), abilities, knowledge, or current health status (e.g., visually impaired or cognitively impaired people).

It is almost impossible to create a page that displays identically in all browsers. However, it is possible to make a page so that its information is accessible to visitors.

There are expert-created rules whose compliance should ensure sufficient website accessibility. In the Czech Republic, these rules are localized in a law (regulation no. 365/2000 Coll. + its amendments, decree no. 64/2008 Coll.) and compliance is mandatory for state administration.

Accessibility Guidelines

1. Write valid HTML code. A page can be validated in several ways:
   • by entering the URL (the page must be accessible from the internet),
   • by uploading the page's code file to the server,
   • by copying the page's content into the validator.
2. Use semantic HTML tags according to their meaning.
3. Text should be clear and readable, well-structured with headings.
4. Suitable graphic design defined using CSS (appropriate color palettes for text and background, suitable font size and type, etc.)
5. Links must be clearly distinguishable from other elements, and their text must indicate where it leads. The most common mistake: links with the text "click here."
6. Every non-text element should have a text description.
   For example, <img alt="description" ...>.

Accessibility Resources

Further information and advice:

• simulation of visual impairments (Pixy):
  Paletton – The ColorSchemeDesigner (in English)
• 5 Ways to Ensure Your Site Is Accessible to the Visually Impaired

Graphic Design

Some tips:

1. Strive for simplicity and unity.
2. Prefer vector graphics (e.g., SVG) over raster graphics (JPG, PNG, etc.)
   Even better is to define graphics using CSS
3. Be aware of copyright! You can use galleries of freely distributable images/icons.
4. Nothing on the page should blink more often than once per second. Multiple animations on a single page are distracting.
5. Follow typographic rules.

More information: 10 effective web design principles every designer should know

For creating images: The comprehensive guide to saving images for the web.

Typographic Rules

Written documents (including web pages) should follow typographic rules, which are mostly specific to the language of the document. In Czech, try to follow these rules:

• Emphasize important terms with italics (<em>) instead of bold (<strong>)
• Use no more than two font types
• Use non-breaking spaces ( ) correctly, e.g.: 15.␣April, 13␣kg, 10␣530, s.␣r.␣o., K.␣J.␣Erben
• Bind prepositions k, o, s, u, v, z + conjunctions a, i (written in uppercase or lowercase) with the following word using a non-breaking space, e.g.: s␣firmou
• Use spaces correctly with punctuation marks: . , : ? ! – ( ) “ “ '

Typography – References

• What is Typography? Elements and Rules for Beginners
• Web Typography: The Complete Guide for Designers

Speed I

Internet users don't like to wait. According to surveys, 57 % of visitors will leave a page before it loads if they have to wait more than 3 seconds (and 80 % will never return).

The time it takes to load a page is influenced by (Factors that Affect Website Speed):

• page data size, connection speed (loading images and media), and the "physical" distance between the server and the client,
• number of external requests,
• caching pages on the client,
• page structure (inappropriate elements before text, large tables, lists, etc.),
• server speed (executing server scripts, hardware and software, load),
• client speed (JavaScript, browser type, hardware and software configuration),
• modern technologies (e.g., HTTP(S) protocol versions).

Speed II

Optimizing page loading speed:

1. Minimize page size (including graphics).
2. Prefer vector formats or CSS over raster graphics.
3. Separate content and appearance (basic principle of the WWW). CSS in external files can be reused and cached on the client side.
4. Increase server speed and capacity (if you are the administrator).
5. Use modern technologies (transfer protocols, scripting techniques, etc.)

Further advice:

• 10 Tips for Optimizing Your Website’s Speed
• 15 Tips to Speed Up Your Website
• Best Practices for Speeding Up Your Web Site

Web Content

Internet users only read what brings them value. They "scan" the rest (notice the main points).

Also remember: when browsing the web, visitors jump between pages and do not read the text from beginning to end.

Text should be:

1. informative, understandable, concise,
2. structured using semantic tags (headings, bullet points, lists, tables, images, links),
3. free of spelling errors (use e.g. Grammarly),
4. regularly updated – outdated information leads to a loss of trust.

Recommendation: back up your pages in case of server failure and data loss, or "encounter" with computer hackers. Always keep multiple copies of your web pages.