Content Strategy 2022
Eric Eggert
This is a heading
<TITLE> ... </TITLE>
<NEXTID 27>
<A NAME=xxx HREF=XXX> ... </A>
<ISINDEX>
<PLAINTEXT>
<LISTING> ... </LISTING>
<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>
<EM>
: normal emphasis (italic)<STRONG>
: strong emphasis (bold)<Q>
: short quotes<KBD>
: something the user would type<CODE>
: code example<IMG>
and <IMAGE>
: images and images with alternative text<CHANGE>
, <ADDED>
& <REMOVED>
: changes in the document<OL>
: ordered lists<FIG>
& <CAPTION>
: figures<TABLE>
: tables<FORM>
, <INPUT>
, <TEXTAREA>
: Forms and form inputs<LIT>
: Literal text<PRE>
: Preformatted text<MATH>
Minor changes to HTML+
“A reformulation of HTML 4 in XML 1.0”
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.
👍
👎
<br>
→ <br />
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.
W3C: “HTML5” Snapshot, October 28, 2014
All HTML specifications apart from the HTML Living Standard are superseded.
DOM and HTML, as well as other specifications go to WHATWG, with some support from W3C.
No significant changes, browser implemented HTML Living Standard for 10+ years.
<!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>
<nav>
)<main>
)<section>
)<article>
)<header>
, <footer>
)<h1>
–<h6>
)<p>
)<ul>
, <ol>
)<strong>
, <em>
)<blockquote>
)<table>
)Layout and design for the content of the web pages.
.fancy {
font-family: fantasy;
}
First draft of CSS in 1994.
Built style-sheet-based browser.
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.
.fancy { /* Selector */
font-family: fantasy; /* Property */
}
body
, em
, blockquote
.fancy
#element
A + B
A ~ B
A > B
A B
margin
: space between border and the next elementborder
: the element’s borderpadding
: space between the border and the contentwidth
: width of the contentheight
: height of the contentfont-family
: font usedfont-weight
: weight of the font (bold)font-size
: size of the fontfont-style
: style of the font (italic)color
: color of the text
document.querySelector('body').
style.backgroundColor = 'rebeccapurple';
… 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.
Make web data machine-readable.
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.
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.
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" />
Example: h-card for information on people and organizations:
Tantek Çelik,
microformats.org
Example: FOAF vocabulary for information on people:
Alice Birpemswick,
Email: alice@example.com,
Phone: +1 617.555.7332
Example: Software Application, Schema.org Vocabularies
Angry Birds -
REQUIRES ANDROID
RATING:
4.6 (
8864 ratings )
Price: $1.00
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"
}
“Query” in the Semantic Web context means technologies and protocols that can programmatically retrieve information from the Web of Data.
“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 .
}
It’s a plain text format for writing structured documents, based on formatting conventions from email and usenet.
CommonMark
# Heading Level 1
## Heading Level 2
### Heading Level 3
#### Heading Level 4
##### Heading Level 5
###### Heading Level 6
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).
on CodePen
for example: codepen.io/yatil/pen/dyzZVLp