<html lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

<meta name="description" content="Here you’ll find a set of quick tutorials and examples of a subset of HTML elements that I present to my students.">

<title>HTML Tutorials and Examples</title>

<link rel="stylesheet" href="../../styles/reset.css">

<link rel="stylesheet" href="../../styles/base.css">

<header>

<h1><abbr title="Hyper Text Markup Language">HTML</abbr> Tutorials and Examples</h1>

</header>

<main>

<h2>Child Elements of <code>head</code></h2>

<ul>

<li>The <a href="the-title-element"><code>title</code> element</a></li>

</ul>

<h2>Links</h2>

<ul>

<li>The <a href="the-anchor-element"><code>a</code>nchor</a> element</li>

<li><a href="links/links-to-local-resources.html">Links to local resources</a></li>

<li><a href="links/links-to-online-resources.html">Links to online resources</a></li>

</ul>

<h2>Lists</h2>

<ul>

<li><a href="lists/ordered">Ordered</a> (<code>ol</code>)</li>

<li><a href="lists/unordered">Unordered</a> (<code>ul</code>)</li>

<li><a href="lists/definition">Definition</a> (<code>dl</code>)</li>

</ul>

<h2 id="outlining-algorithm">Outlining Algorithm (<code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>, <code>h6</code>)</h2>

<ul>

<li>A <a href="outlining-algorithm/nyc-neighborhoods.html">NYC neighborhoods</a> example</li>

<li>A <a href="outlining-algorithm/nyc-parks.html">NYC parks</a> example</li>

<li>A <a href="outlining-algorithm/queens-college-example.html">Queens College</a> example</li>

<li>A <a href="outlining-algorithm/seminal-punk-songs.html">punk songs</a> example</li>

<li>An example using <a href="outlining-algorithm/the-ivy-league.html">The Ivy League</a></li>

</ul>

<h2>Tables</h2>

<ul>

<li>A <a href="tables/receipt.html">basic receipt</a> example</li>

</ul>

<h2>Some Inline Elements</h2>

<ul>

<li>The <a href="the-blockquote-element"><code>blockquote</code></a> element</li>

<li>The <a href="the-del-ins-elements"><code>del</code> and <code>ins</code></a> elements</li>

</ul>

<h2>Miscellaneous</h2>

<ul>

<li>The <a href="the-html-attribute">HTML attribute</a></li>

<li>The <a href="the-difference-between-an-html-tag-and-an-html-element">difference between an HTML tag and an HTML element</a></li>

<li>The <code>img</code> element’s <a href="the-img-element/x-descriptor"><code>x-descriptor</code> attribute</a></li>

<li><a href="the-picture-element/loading-images-with-min-width">Loading images with <code>min-width</code></a> in the <code>picture</code> element</li>

</ul>

</main>