Attributes

Calvin (Deutschbein)

1 February 2023

Announcements

  • I hope you all wrote some beautiful HTML for me/us.
    • Some of you have written no HTML.
    • Some of you have written hideous HTML.
      • Don't do that.
  • Homework
    • New assignment going out today.
      • Again, 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 is an adposition?

  1. which
  2. of
  3. the
  4. following

Review Question 2

Can you tell that the word "that" has a given tag in this phrase?

  1. noun
  2. verb
  3. adjective
  4. verb

What does that refer to or modify?

Review Question 3

Do you think that the technique that nests "that" clauses that elaborate that which earlier phrases refer to increases clarity?

  1. No
  2. Double no
  3. I'm going to keep doing it anyways
  4. Yes

Why are we like this?

Review Question 4

Which of the following is not a default HTML element?

  1. Header
  2. Line-break
  3. Paragraph
  4. Sentence

Review Question 1

What is the atomic unit of well-formed HTML5?

  1. Content
  2. Element
  3. Sentence
  4. Tag

Syntactical Tags

  • Noun
  • Verb
  • Adjective
  • Adposition
  • Adverb
  • Conjunction

Auxiliary or Helping Verbs

  • be
    • am/is/are
    • was/were
    • been
  • have
    • has/had
  • do
    • did/does
  • _
    • can/could
    • shall/should
    • will/would
  • may
    • might/must

The worst

SCENE: 30 January, 2023

  • You receive an in-class syntactic categorization exercise.
	
		
			
				TODO
			
			
				TODO
			
			
				TODO

HAS BEEN BROUGHT

It has been brought to my attention... that "has" and "been" are helper verbs!

	
		
			
				has
			
			
				been
			
			
				brought

Differentiation

We have different types of verbs, but they share syntactic tags, what to do?

  • transitive/intransitive (valency)
  • singular/plural (agreement)
  • past/present (tense)
  • auxiliary/full (functionality)

These modifiers describe attributes of their verb, a syntactic tag.

*TML Attributes

*TML allows us to differentiate tags with a language feature called "attributes".

  • Attributes are placed inside start or void tags.
  • Attributes increase the specificity of the tag keyword.
  • There may be any number of attributes.
  • Attribute behavior may be user-specified.

	has
	been
	brought

A verb phrase must contain a full verb, so we can leave it unlabelled within the vrb element.

Common Attributes

Here are some common attributes:

Attribute Example Descriptor
style

Allows block style changes, such as bolding, coloring, or indenting full graphs.
href Allows hyperlinks and embedded content.
align

Set alignment of the element
title

Add mouseover text

Case Study: Images

Naively include an image using the void img tag with a src attribute.

Of course, there are many limitations to this approach.

  • We may (read: do) wish to provide alt text.
  • We may wish to specify image size
  • We may wish to provide mouseover text.
  • We may wish to specify background color for images with transparency.

Case Study: Images

An image I use in my research is the "Table of x86 Registers" from Wikimedia.

Case Study: Images

This image is, to me, difficulty to see on darker backgrounds.

Case Study: Images

This image isn't fitting too well on the slide - I should size it with width.

Case Study: Images

This image is inaccessible should I should add alt-text.

The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.
The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.

Case Study: Images

I may wish to provide mouseover text.

The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.
The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.

Case Study: Images

I may wish to enclose this image in some other element, such as the div element for HTML divisions.

The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.
The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.

Case Study: Images

I may wish to align to the left within the division.

The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.
The x86 registers are organized by size, in powers of 2 from 8 to 512, and by purpose, some of general purpose and others for control, debug, vector instructions, or operating system features. They can be understood as several adjacent grids of registers with different roles and capabilities.

Case Study: Images

Attributes allow us to change how elements are rendered.

Good HTML

We now know enough to view it: The most perfect form.

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample page</title>
 </head>
 <body>
  <h1>Sample page</h1>
  <p>This is a <a href="demo.html">simple</a> sample.</p>
  <!-- this is a comment -->
 </body>
<html>

Good HTML

Well-formed HTML is prepended with a DOCTYPE specifier.

<!DOCTYPE html>

You should add this to your page, if it is not present.

Good HTML

Well-formed HTML is enclosed within an html element.

<html></html>

Well-formed HTML in a specific target language should specify that language using the lang attribute.

<html lang="en"><html>

You should add this to your page, if it is not present.

Good HTML

Well-formed HTML webpages have a head element that provides useful information, like the title of the page.

 <head>
  <title>Sample page</title>
 </head>

This is webpage element and is distinct from the content headers like h1

You should add this to your page, if it is not present.

Good HTML

Well-formed HTML webpages enclose web content in a body element.

<body></body>

It is likely that your existing page, if minimal, constitutes a well-formed body...

...and if so, you should add this to your page.

Good HTML

Well-formed HTML uses a to make hyperlinks.

<a href="demo.html">simple</a>
  • The content of an a element is the text, or other content, that when clicked on, goes to an address.
  • The href> attribute gives the address that corresponds to the content within the a element.

Add a link from your webpage back to your repository using a the a element.

Good HTML

Well-formed HTML is well-documented using !-- to make comments.

<!-- this is a comment -->
  • The content of an a element is the text, or other content, that when clicked on, goes to an address.
  • The href> attribute gives the address that corresponds to the content within the a element.

Add a link from your webpage back to your repository using a the a element.

Stylin' HTML

HTML may also be styled, akin to the style attribute.

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample styled page</title>
  <style>
   body { background: navy; }
   h1 { background: green; color: blue; font-weight: bold; }
   p { background: blue; color: white; }
  </style>
 </head>
 <body>
  <h1>Sample styled page</h1>
  <p>This page is just a demo.</p>
 </body>
</html>

Stylin' HTML

Style specification, either in an attribute or element, should be:

  • Colon delineated between property name and property value
  • Semicolon punctuated after each property
  • By convention, style attributes contain no whitespace.
  • By convention, style elements contain whitespace between all punctuation.
  • Attributes overwrite the element in the case of conflicts
  <style>
   body { background: navy; }
   h1 { background: green; color: blue; font-weight: bold; }
   p { background: blue; color: white; }
  </style>

HOMEWORK

Iterate on index.html to add

  • A hyperlink element using <a href=""></a>
  • A image element using <img src=""></img>
    • This image must have alt-text.
  • A style element in the head, distinctly modifying a minimum of two body elements.
  • All other well-formed components
    • Minimally one comment.
    • An html, head, and body element.
    • A DocType.
    • A lang attribute.

Due Wednesday, 08 February!

// reveal.js plugins