HTML5

Calvin (Deutschbein)

25 January 2023

Announcements

  • We are at 19/30 on Logistics completion at time at writing.
    • Target 30/30 by ⌚ right now .
      • Pause for questions.
  • Homework
    • New assignment going out today.
      • No pull requests, just update your github.io page.
    • I'll use version history to see what you had live at 12:50 PM
      • No extensions ; just submit your best effort (for measurement reasons)

Review Question 1

Which of the following adjectives did we not select as a class to describe a "good" thesis.

  1. imPortant
  2. Parsable
  3. Personal
  4. Persuasive

Consider your answer. Did we arrive at a good list?

Review Question 2

Which of the following adjectives did we not select as a class to describe a "good" thesis.

  1. Clear
  2. Compelling
  3. Complete
  4. Concise

Consider your answer. Did we arrive at a good list?

Review Question 3

Which of the following adjectival phrases did we not select as a class to describe a "good" thesis.

  1. Evidence based
  2. Logically sound
  3. Tonally appropriate
  4. Well structured

Consider your answer. Did we arrive at a good list?

Adjectival Phrases

  • Clear
  • Concise
  • Compelling
  • Important
  • Well-supported
  • Logically sound
  • Parsable
  • Relevant
  • Non-trivial
  • Well-structured
  • Information-flow secure
  • Personal
  • Tonally appropriate
  • Morally aware

A "Good" Language

SCENE: 22 January, 2008

  • 364 days before the inauguration of President Barack Obama
  • The internet was a-boomin' before the Great Recession kicked off in March
  • Beyoncé's "Irreplaceable" and Rihanna's "Umbrella" were about to be snubbed at the Grammy's
    • Ask me my thoughts on the music industry, but not during class
  • Twitter is 2 yr old, Tumblr is 1 yr old, and Instragram is -2 yr old

Web Hypertext Application Technology Working Group dares to ask...

"What if the Internet, instead of being bad, was good?"

... and launches HTML5, the greatest and final HTML standard.

Good Languages & Theses

Languages

  • Full-featured
  • Well-documented
  • Standardized
  • Maintainable
  • Open-source
  • Non-proprietary

Both

  • Well-supported
  • Logically sound
  • Parsable
  • Clear
  • Concise
  • Relevant
  • Non-trivial
  • Well-structured
  • Information-flow secure*

Theses

  • Compelling
  • Important
  • Relevant
  • Personal
  • Tonally appropriate
  • Morally aware

"Other" Languages

HTML5

  • Full-featured
  • Well-documented
  • Standardized
  • Maintainable
  • Open-source
  • Well-supported
  • Logically sound
  • Parsable
  • Clear
  • Concise
  • Well-structured

Both

  • Non-trivial
  • Non-proprietary
  • Relevant

English

MY THESIS

HTML5, as a language intentionally constructed for shared communication, constitutes a valuable tool for teaching writing in a holistic curriculum emphasizing generalizable skills such as peer revision, authorial best practices, and clarity of personal thought.

Other Languages

English

  • The smallest independent unit is a sentence.
    • NOT a word: "Read" is ambiguous.
  • Sentences are composed of two parts.
    • The subject is a noun or noun phrase.
    • The predicate is everything else, minimally a verb or verb phrase
  • Some claim predicates are clauses, for example, while others claim predicates are phrases while subjects must be nouns, but

HTML5

  • The smallest independent unit is an element.
  • Anything inside an element is also an element.
  • Actually, there are only elements.
  • There are no parts of speach!

Content Elements

An HTML element can be decomposed into three constituent components:

  • Start tag
  • Content
  • End tag

Void Elements

Some HTML elements with no content will only contain a free-standing tag.

  • These have multiple names, I will call them "void elements".
    • C: void main(int argc, const char * argv[])
    • Java: public static void main(String[] args)

Tags

Tags are denoted using special keywords enclosed inside special characters.

  • A start or void tag is enclosed within an opening < and a closing >.

  • An end tag is enclosed within an opening </ and a closing >.

Common Tags

Here are some common tags:

Keyword Tags Descriptor
p

Paragraph, often also used for sentences because English is not good.
strong Text meant to be denoted with additional "strength".
br
A line break, and an example of a void element.
{h1,... h6}

Text meant as a header, like a title. h1 is used in search optimization.

Thesis Revisited

We can use HTML5 elements to characterize content, which may include sentences or words, and provide context.

HTML5, as a language intentionally constructed for shared communication, constitutes a valuable tool for teaching writing in a holistic curriculum emphasizing generalizable skills such as peer revision, authorial best practices, and clarity of personal thought.

In this case, the content is a thesis statement.

Adding Tags

Let's use HTML element syntax to identify what type of content we have - a sentence.

HTML5, as a language intentionally constructed for shared communication, constitutes a valuable tool for teaching writing in a holistic curriculum emphasizing generalizable skills such as peer revision, authorial best practices, and clarity of personal thought.

Most HTML styles do not have a sentence type, we simply use it here as a teaching tool.

Conventions

By convention, to make HTML easier to read, for multi-line elements we indent content and give the tags their own lines.

<sentence>
HTML5, as a language intentionally constructed for shared communication,constitutes a valuable tool for teaching writing in a holistic curriculum emphasizing generalizable skills such as peer revision, authorial best practices, and clarity of personal thought.
</sentence>

Most HTML styles do not have a sentence type, we simply use it here as a teaching tool.

Subject and Predicate

While not an HTML requirement, a complete sentence in English must contain a subject and a predicate.

<sentence>
HTML5, as a language intentionally constructed for shared communication, 
constitutes a valuable tool for teaching writing in a holistic curriculum emphasizing generalizable skills such as peer revision, authorial best practices, and clarity of personal thought.
</sentence>

Nested Elements

<sentence>
<subject>
HTML5, as a language intentionally constructed for shared communication, 
</subject>
<predicate>
constitutes a valuable tool for teaching writing in a holistic curriculum emphasizing generalizable skills such as peer revision, authorial best practices, and clarity of personal thought.
</predicate>
</sentence>

Examining Parallelism

... a holistic curriculum emphasizing generalizable skills such as ...

peer revision, authorial best practices, and clarity of personal thought.

Are these the same kind of thing?

  • The thesis statement just calls them "skills"

Examining Parallelism

While we figure out what these are, we'll use "skill" for now.

<skill>
peer revision
</skill>
<skill>
authorial best practices
</skill>
<skill>
clarity of personal thought
</skill>

Examining Parallelism

Wait a minute - is that a skill?

<skill>
authorial best practices
</skill>

If not, either our thesis statement or our thinking is unclear!

  • This is well-formed HTML (nesting elements)...
  • ...but not well-formed English (a list of skills containing a non-skill).

Examining Parallelism

Let's figure out what we are trying to say

<skill>
disambiguated text construction
</skill>

Is this the same kind of thing?

Examining Parallelism

Are these noun phrases?

<nounphrase>
peer revision
</nounphrase>
<nounphrase>
disambiguated text construction
</nounphrase>

Examining Parallelism

Are these noun phrases?

<nounphrase>
<adjectivalphrase>
peer
</adjectivalphrase>
<noun>
revision
</noun>
</nounphrase>

Examining Parallelism

Wait - disambiguated is an adjective* - is this correct?

  • RECALL: Adverbs modify adjectives adjectives modify nouns.
<nounphrase>
<adjectivalphrase>
disambiguated text 
</adjectivalphrase>
<noun>
construction
</noun>
</nounphrase>

Examining Parallelism

<nounphrase>
<adjective>
disambiguated
</adjective>
<nounphrase>
text construction
</nounphrase>
</nounphrase>

Examining Parallelism

<nounphrase>
<adjective>
text
</adjective>
<noun>
construction
</noun>
</nounphrase>

Ambiguity

In English, how can determine if "disambiguated text construction" refers to:

  • Construction of disambiguated text
  • Disambiguated construction of text

Or perhaps

  • (disambiguated text) construction
  • disambiguated (text construction)

HTML offers a solution of essentially labelled parenthesis.

Your Turn!

You know enough HTML elements ...

  • You can use headers.
  • You can make paragraphs.

... and Syntax...

  • You know about tags.
  • You know about content.

to convert your website to be HTML specified.

HOMEWORK

  • Create a file index.html (it must be index.html) at top level in your repository.
  • Use at least one of each of the following:
    • A header element using

    • A paragraph element using

    • A strong element using
    • A line break element using

Due Wednesday, 01 February!

// reveal.js plugins