HTML, CSS, & the Semantic Web
Digital Publication Platforms

Content Strategy 2021
Eric Eggert

Web Standards

WWW Standards Bodies

  • W3C: World Wide Web Consortium
  • WHATWG: Web Hypertext Application Technology Working Group
  • Ecma International (née European Computer Manufacturers Association)
  • ISO: International Organization for Standardization

Core Web Technologies

HTML
by WHATWG & W3C


            

This is a heading

HyperText Markup Language

  • Invented with the WWW by Tim Berners-Lee in 1989/1990.
  • Based on the existing Standard Generalized Markup Language (SGML).

HTML Elements

HTML element with attribute, the start and end tags are marked as is the href attribute and its value.

HTML “1.0” Elements (1/2)

  • <TITLE> ... </TITLE>
  • <NEXTID 27>
  • <A NAME=xxx HREF=XXX> ... </A>
  • <ISINDEX>
  • <PLAINTEXT>
  • <LISTING> ... </LISTING>

HTML “1.0” Elements (2/2)

  • <P>
  • <H1>, <H2>, <H3>, <H4>, <H5>, <H6>
  • <ADDRESS> text ... </ADDRESS>
  • <DL>
      <DT>Term<D>definition pagagraph
      <DT>Term2<DD>Definition of term2
    </DL>
  • <UL>
      <LI> list element
      <LI> another list element ...
    </UL>

Most still exist today!

HTML+
November 8, 1993

New Elements: Presentation Only “Tags”
Presentation Only Tags
New Elements in HTML+ (1/3)
  • <EM>: normal emphasis (italic)
  • <STRONG>: strong emphasis (bold)
  • <Q>: short quotes
  • <KBD>: something the user would type
  • <CODE>: code example
New Elements in HTML+ (2/3)
  • <IMG> and <IMAGE>: images and images with alternative text
  • <CHANGE>, <ADDED> & <REMOVED>: changes in the document
  • <OL>: ordered lists
  • <FIG> & <CAPTION>: figures
  • <TABLE>: tables
New Elements in HTML+ (3/3)
  • <FORM>, <INPUT>, <TEXTAREA>: Forms and form inputs
  • <LIT>: Literal text
  • <PRE>: Preformatted text
  • <MATH>

HTML 2.0
November, 1995

Minor changes to HTML+

HTML 3.2
Januar 14, 1997

HTML 4.01
December 24, 1999

The Extensible HyperText Markup Language: XHTML 1.0
Januar 26, 2000; Revised August 1, 2002

“A reformulation of HTML 4 in XML 1.0”

XML? Extensible Markup Language!

XML was conceived as a means of regaining the power and flexibility of SGML without most of its complexity. Although a restricted form of SGML, XML nonetheless preserves most of SGML’s power and richness, and yet still retains all of SGML’s commonly used features.

👍

  • Stricter code rules
  • Extensibility
  • Better machine readability

👎

  • Errors broke websites
  • Incompatibility with existing HTML code
  • Slightly more complicated syntax, e.g. <br><br />

XHTML 1.1: Module-based XHTML
November 23, 2010

WHATWG

The WHATWG was founded by individuals of Apple, Mozilla, and Opera in 2004, after a W3C workshop. [The companies] were becoming increasingly concerned about the W3C’s direction with XHTML, lack of interest in HTML, and apparent disregard for the needs of real-world web developers. So, in response, these organisations set out with a mission to address these concerns and the Web Hypertext Application Technology Working Group was born.

HTML
Living Standard

W3C: “HTML5” Snapshot, October 28, 2014

March 27, 2018

All HTML specifications apart from the HTML Living Standard are superseded.

Memorandum of Understanding Between W3C and WHATWG
March 28, 2019

DOM and HTML, as well as other specifications go to WHATWG, with some support from W3C.

In Practice

No significant changes, browser implemented HTML Living Standard for 10+ years.

A basic HTML document

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Swapping Songs</title>
  </head>
  <body>
    <h1>Swapping Songs</h1>
    <p>Tonight I swapped some of the songs I wrote with some friends, who
       gave me some of the songs they wrote. I love sharing my music.</p>
  </body>
</html>

Some HTML structure elements

  • Navigations (<nav>)
  • Main Area (<main>)
  • Sections (<section>)
  • Articles (<article>)
  • Header & Footer (<header>, <footer>)

Some HTML content elements

  • Headings (<h1><h6>)
  • Paragraphs (<p>)
  • Lists (<ul>, <ol>)
  • Emphasis (<strong>, <em>)
  • Quotes (<blockquote>)
  • Tables (<table>)

Cascading Style Sheets (CSS)
by W3C

Layout and design for the content of the web pages.


            .fancy {
              font-family: fantasy;
            }
          

Cascading Style Sheets

Håkon Wium Lie 🇳🇴

First draft of CSS in 1994.

Bert Bos 🇳🇱

Built style-sheet-based browser.

Why CSS?

CSS had one feature that distinguished it from all the others: It took into account that on the Web, the style of a document couldn’t be designed by either the author or the reader on their own, but that their wishes had to be combined, or “cascaded”, in some way; and, in fact, not just the reader’s and the author’s wishes, but also the capabilities of the display device and the browser.

Time Line

Syntax


            .fancy {                 /* Selector */
              font-family: fantasy;  /* Property */
            }
          
Selectors
  • Element selectors: body, em, blockquote
  • Class selectors refer to class attribute values: .fancy
  • ID selectors refer to unique IDs: #element
  • Combinators
    • Adjacent sibling selectors: A + B
    • General sibling selectors: A ~ B
    • Child selectors: A > B
    • Descendant selectors: A B

CSS for Layout

Grid
Grid with 5 columns and 3 rows Grid with 5 columns and 3 rows – with named lines grid item overlays from row 1, column 2 to row 2 column 4 named areas
Flexbox
Grid with 5 columns and 3 rows Grid with 5 columns and 3 rows – with named lines grid item overlays from row 1, column 2 to row 2 column 4 named areas named areas
Float
Grid with 5 columns and 3 rowsGrid with 5 columns and 3 rows

The box model

Box model schema
Box model properties
  • margin: space between border and the next element
  • border: the element’s border
  • padding: space between the border and the content
  • width: width of the content
  • height: height of the content

Text properties

  • font-family: font used
  • font-weight: weight of the font (bold)
  • font-size: size of the font
  • font-style: style of the font (italic)
  • color: color of the text

JavaScript
by Ecma International


            document.querySelector('body').
              style.backgroundColor = 'rebeccapurple';
          

JavaScript is …

a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it […]. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

JavaScript can …

  • … manipulate content on a web page.
  • … communicate with the server.
  • … run complicated programs.

Web 3.0: The Semantic Web

Make web data machine-readable.

Tim Berners-Lee’s vision (1999)

I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers.

Tim Berners-Lee’s vision (1999) cont.

A ‘Semantic Web’, which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines.

Challenges and limitations

HTML has limited semantics and the metadata that can be added is very limited:


<meta name="keywords" content="computing, computer studies, computer" />
<meta name="description" content="Cheap widgets for sale" />
<meta name="author" content="John Doe" />
          

Languages specialized for data

Embedding information

  • Microformats
  • RDFa
  • Microdata
  • JSON-LD

Microformats

Example: h-card for information on people and organizations:


Tantek Çelik,


  
    microformats.org
  

            

RDFa

Example: FOAF vocabulary for information on people:


Alice Birpemswick, Email: alice@example.com, Phone: +1 617.555.7332

Microdata

Example: Software Application, Schema.org Vocabularies


Angry Birds - REQUIRES ANDROID
RATING: 4.6 ( 8864 ratings )
Price: $1.00

JSON-LD

JSON Linked Data. Example: Person


{
  "@context": "http://schema.org/",
  "@type": "Person",
  "name": "Jane Doe",
  "jobTitle": "Professor",
  "telephone": "(425) 123-4567",
  "url": "http://www.janedoe.com"
}

Querying Semantic Web Data

“Query” in the Semantic Web context means technologies and protocols that can programmatically retrieve information from the Web of Data.

SPARQL

“SPARQL Protocol and RDF Query Language” (Tutorial)


          PREFIX foaf: <http://xmlns.com/foaf/0.1/>
          SELECT ?name
                 ?email
          WHERE
            {
              ?person  a          foaf:Person .
              ?person  foaf:name  ?name .
              ?person  foaf:mbox  ?email .
            }
          

Markdown

It’s a plain text format for writing structured documents, based on formatting conventions from email and usenet.

CommonMark

Examples: Headings


          # Heading Level 1
          ## Heading Level 2
          ### Heading Level 3
          #### Heading Level 4
          ##### Heading Level 5
          ###### Heading Level 6
          

Examples: Inline


          This is a paragraph with _italic_ and **bold** text. It also contains
          a [link to the COS website](https://www.fh-joanneum.at/…)
          as well as an image: ![FHJ logo](https://www.fh-joanneum.at/…/logo_fh_2_color.svg).
          

10 Minute Interactive Tutorial

GitHub

  1. Sign up at github.com/signup
  2. Make sure you can see and star this repository: github.com/cosdpp/cos21-cards.
  3. Wait for further instructions 😉

HTML/CSS/JavaScript Exploration

on CodePen

for example: codepen.io/yatil/pen/dyzZVLp