HTML

Terminology

• Markup language: a text-encoding system consisting of a set of symbols inserted in a text document to control its structure, formatting, or the relationship between its parts. Wikipedia
  • Markup is often used to control the display of the document or to enrich its content to facilitating automated processing.
  • e.g. HTML (HyperText Markup Language), TeX, LaTeX, XML

Tags

Division - div

Division:

• <div>: division
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break before and after the <div> element.

Content Span - span

Content Span

• The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
• The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.

Lists

• <ul> (unordered list)
• <ol> (ordered list)
• <li> (list item)

Description List - dl

Description List:

• <dl>: description list
• <dt>: description term/name
• <dd>: description

Example: Firefox bookmarks

To indent firefox .bookmarks add this CSS style:

• note: the <meta> tags must come after the <style> tags
  • otherwise the Content-Security-Policy (CSP) in the HTML head will prevent all CSS code in the HTML document from loading
    • however, you can still allow some CSS code, see examples in CSP: style-src

<head>
  <style type="text/css">
    dl dl {
      margin-left:0.5in;
      }
  </style>
  <meta>
    ...
  </meta>
</head>
<body>
  ...
</body>

Horizontal Line - hr

Horizontal Rule

• <hr>: horizontal rule
• thematic break in an HTML page (e.g. a shift of topic)
• used to separate content (or define a change)
• <hr style="height:2px;border-width:0;color:gray;background-color:gray">

Paragraphs - p

Attributes:

• id: <p id="demo"></p>, explained
  • assigns an identifier to the paragraph.
  • The identifier must be unique across the page.

Anchor Points - a

from: superuser

The vanilla way link to somewhere in-page is via an anchor point already present in the page.

This can be created using the <a>…</a> tag. Note that the link specified in "anchor point" (above) has #h-12.2 at the end. This corresponds to <a id="h-12.2">12.2</a> embedded in the HTML forming the page, and when clicked will reposition the page view to this anchor.

Note that prior to HTML5, the name attribute was used in the anchor tag, but is no longer supported and the id attribute should be used in its place (reference). This also means that you can use any element for an anchor tag, you are not limited to the <a> element.

Beispiel

"https://github.com/infokiller/web-search-navigator#keybindings" springt direkt auf anchor point "keybindings", der folgendermaßen aussieht:

<a id="user-content-keybindings" class="anchor" aria-hidden="true" href="#keybindings">
	<svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
		<path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path>
	</svg>
</a>

Inline Frame - iframe

An inline frame (iframe) is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content. source

"<iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document." w3schools

Button - button

Adding Shortcuts to Buttons

Using addEventListener:

see also Adding Shortcuts

Add an id attribute to the button element:

<button class="search__toggle" type="button" accesskey="s" id="search_button">

Add this to an HTML page (you need jQuery for this!):

<script> 
    function showSearch() { 
	$("#search_button").click();
    } 

    document 
	.addEventListener("keydown", 
	    function (event) { 
		if (event.ctrlKey && event.key === "k") { 
		    event.preventDefault(); 
		    showSearch(); 
		} 
	    }); 
</script> 

Then, pressing ctrlk will open the search window.

Using AccessKey - accesskey:

Keymap to activate access keys depends on the Web Browser and on the OS. In Firefox (on Windows and Linux) use alt + shift + key, developer.mozilla.org

<button accesskey="s">Stress reliever</button>

Attributes

id

w3schools

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.

warning

Note: The id name is case sensitive!

Note: The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html> 

tabindex

• How to use the tabindex attribute
• When tabindex’s value is set to "0", the element can be navigated to via the keyboard’s Tab key.

Entities (aka Character References)

• mdn: Entity
• mdn: Character Reference

Character Entities

• Reserved characters in HTML
• examples: < and >

Symbol Entities

• Symbols or letters that are not present on your keyboard
• you can use
  • the entity name or
  • the entity number (a decimal or a hexadecimal reference)
• examples: ∀ (or: ∀) and ∑ (or: ∑)

Adding Shortcuts

Using addEventListener

Add this to a HTML page:

• source

info

• event.preventDefault() prevents the default behavior associated with the key.
• the EventListener listens for a "keydown" event on the document and calls the handleShortcut function when the specified key is pressed.

<script> 
    function showAlert() { 
	alert("A was pressed!"); 
    } 

    document 
	.addEventListener("keydown", 
	    function (event) { 
		if (event.ctrlKey && event.key === "a") { 
		    event.preventDefault(); 
		    showAlert(); 
		} 
	    }); 
</script> 

Then, pressing ctrla will show an alert message.