HTML, CSS, & the Semantic Web
Digital Publication Platforms

Content Strategy 2022
Eric Eggert

GitHub

Sign up at github.com/signup
Make sure you can see and star this repository: github.com/cosdpp/cos22-cards.
Further instructions 😉

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<DD>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”

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

CSS 1.0: December 17, 1996
CSS 2.0: May 12, 1998
CSS 2.1: June 7, 2011
“CSS 3.0+”: Development in many, many modules.

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 item overlays from row 1, column 2 to row 2 column 4

Flexbox

Float

The box model

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

Resource Description Framework (RDF)
Web Ontology Language (OWL)
Extensible Markup Language (XML)

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

HTML/CSS/JavaScript Exploration

on CodePen

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

GitHub

Sign up at github.com/signup
Make sure you can see and star this repository: github.com/cosdpp/cos22-cards.
Further instructions 😉

HTML, CSS, & the Semantic Web Digital Publication Platforms

GitHub

Web Standards

WWW Standards Bodies

Core Web Technologies

HTMLby WHATWG & W3C

This is a heading

HyperText Markup Language

HTML Elements

HTML “1.0” Elements (1/2)

HTML “1.0” Elements (2/2)

Most still exist today!

HTML+November 8, 1993

New Elements: Presentation Only “Tags”

New Elements in HTML+ (1/3)

New Elements in HTML+ (2/3)

New Elements in HTML+ (3/3)

HTML 2.0November, 1995

HTML 3.2Januar 14, 1997

HTML 4.01December 24, 1999

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

XML? Extensible Markup Language!

XHTML 1.1: Module-based XHTMLNovember 23, 2010

WHATWG

HTMLLiving Standard

March 27, 2018

Memorandum of Understanding Between W3C and WHATWGMarch 28, 2019

In Practice

A basic HTML document

Some HTML structure elements

Some HTML content elements

Cascading Style Sheets (CSS)by W3C

Cascading Style Sheets

Håkon Wium Lie 🇳🇴

Bert Bos 🇳🇱

Why CSS?

Time Line

Syntax

Selectors

CSS for Layout

Grid

Flexbox

Float

The box model

Box model properties

Text properties

JavaScriptby Ecma International

JavaScript is …

JavaScript can …

Web 3.0: The Semantic Web

Tim Berners-Lee’s vision (1999)

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

Challenges and limitations

Languages specialized for data

Embedding information

Microformats

RDFa

Microdata

JSON-LD

Querying Semantic Web Data

✨SPARQL✨

Markdown

Examples: Headings

Examples: Inline

HTML/CSS/JavaScript Exploration

GitHub

HTML, CSS, & the Semantic Web
Digital Publication Platforms

HTML
by WHATWG & W3C

HTML+
November 8, 1993

HTML 2.0
November, 1995

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

XHTML 1.1: Module-based XHTML
November 23, 2010

HTML
Living Standard

Memorandum of Understanding Between W3C and WHATWG
March 28, 2019

Cascading Style Sheets (CSS)
by W3C

JavaScript
by Ecma International