Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gipetto
Gipetto committed Apr 21, 2012
0 parents commit dd62b74
Show file tree
Hide file tree
Showing 13 changed files with 780 additions and 0 deletions.
9 changes: 9 additions & 0 deletions 01-html/index.html
@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>My HTML Document</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Binary file added 02-elements/img/moose.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
116 changes: 116 additions & 0 deletions 02-elements/index.html
@@ -0,0 +1,116 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Elements</title>
</head>
<body>
<!-- headings -->
<h1>An important heading</h1>

<h2>A less important heading</h2>

<h6>I'm the least important heading</h6>

<!-- paragraph -->
<p>Hello World, I'm a paragraph.
White space is inconsequential after the first space character.</p>

<p>To forcefully break a line you want to use the &lt;br /&gt; element.<br /> Like so.</p>

<!-- bold and italic -->
<p><i>&lt;i&gt; was italic, now for text in an "alternate voice", such as transliterated foreign words,
technical terms, and typographically italicized text</i></p>

<p><b>&lt;b&gt; was bold, now for "stylistically offset" text, such as keywords and typographically
emboldened text</b></p>

<!-- emphasis -->
<p><em>&lt;em&gt; was emphasis, now for stress emphasis, i.e., something you'd pronounce differently</em></p>

<p><strong>&lt;strong&gt; was for stronger emphasis, now for strong importance, basically the same thing
(stronger emphasis or importance is now indicated by nesting)</strong></p>

<!-- images -->
<img src="img/moose.jpg" width="405" height="242" alt="Kitten!" />

<!-- links -->
<p><a href="http://www.w3.org/MarkUp/Guide/">Getting started with HTML</a>.</p>

<!-- blockquotes -->
<blockquote cite="http://reference.sitepoint.com/html/blockquote">The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs (which you’d mark up using nested paragraph elements).</blockquote>

<!-- unordered lists -->
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>A møøse once bit my sister.</li>
</ul>

<!-- ordered lists -->
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Mynd you, møøse bites Kan be pretty nasti.</li>
</ol>

<!-- definition lists -->
<dl>
<dt>Definition Term</dt>
<dd>Definition description. I am content about the definition term.</dd>
<dt>Another Definition Term</dt>
<dd>Another definition description. I smell of elderberries.</dd>
</dl>

<!-- tables -->
<table border="1">
<thead>
<tr>
<th>Table header 1</th>
<th>Table header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell 1</td>
<td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td>
<td>Table cell 4</td>
</tr>
<tr>
<td colspan="2">I span 2 columns!</td>
</tr>
<tr>
<td rowspan="2">I span 2 rows</td>
<td>I'm just one cell.</td>
</tr>
<tr>
<td>I'm by myself.</td>
</tr>
</tbody>
</table>

<!-- preformatted text -->
<pre>
Shrubbery-quested,
Camelot's silliness skipped.
Swallows hold the key.
</pre>

<!-- code -->
<p>We like code. <code>$this->isCode('is inline');</code></p>

<code><pre>
// look at the bones!
$holyHandGrenade->pullPin();
while ($holyHandGrenade->count() &lt; 3) {
echo $i;
}
$holyHandGrenade->throw();
</pre></code>

<!-- links to anchors -->
<p><a href="#top">Back to the top</a>.</p>
</body>
</html>
Binary file added 03-structure/img/moose.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 59 additions & 0 deletions 03-structure/index.html
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<title>Structural HTML Elements</title>
</head>
<body>
<div id="main">
<!-- header -->
<div id="header">
<h1>I am the page title</h1>
</header>

<!-- navigation -->
<div id="navigation">
<p>I represent the main navigation. Let me show you around.</p>
<ul>
<li><a href="#section-one">Section One</a></li>
<li><a href="#section-two">Section Two</a></li>
<li><a href="#section-three">Section Three</a></li>
</ul>
</nav>

<!-- sections -->
<div id="section-one">
<h1>Section Title</h1>
<p>I represent a generic section of the page.</p>
</div>

<div id="section-two">
<!-- article -->
<div class="article">
<h1>Article Title</h1>
<p>I represent a news article, blog or forum post.</p>
</div>

<div class="article">
<h1>Article Title</h1>
<p>I represent a news article, blog or forum post. I guess I could also be a comment or other type of content type as well.</p>
</div>
</div>

<div id="section-3">
<h1>Section Title</h1>
<blockquote>
<p>You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.</p>
<p><span class="attribution">~ Frenchie</span>.</p>
</blockquote>
</div>

<!-- footer -->
<div id="footer">
<p>&copy;2012 Nobody in particular. None of this is original.</p>
</div>

<!-- links to anchors -->
<p><a href="#top">Back to the top</a>.</p>
</div>
</body>
</html>
Binary file added 04-html5-structure/img/moose.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 68 additions & 0 deletions 04-html5-structure/index.html
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<title>Structural HTML Elements</title>
<!-- Internet Explorer needs help with HTML5 -->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="main">
<!-- header -->
<header>
<h1>I am the page title</h1>
</header>

<!-- navigation -->
<nav>
<p>I represent the main navigation. Let me show you around.</p>
<ul>
<li><a href="#section-one">Section One</a></li>
<li><a href="#section-two">Section Two</a></li>
<li><a href="#section-three">Section Three</a></li>
</ul>
</nav>

<!-- sections -->
<section id="section-one">
<h1>Section Title</h1>
<p>I represent a generic section of the page.</p>
</section>

<section id="section-two">
<!-- article -->
<article>
<h1>Article Title</h1>
<p>I represent a news article, blog or forum post.</p>
</article>

<article>
<h1>Article Title</h1>
<p>I represent a news article, blog or forum post. I guess I could also be a comment or other type of content type as well.</p>
</article>

<aside>
<h2>Now for something completely related.</h3>
<p>I am tengentially related to this section's content. I may be a sidebar, or I may just be related comments, links, or something else.</p>
</aside>
</section>

<section id="section-3">
<h1>Section Title</h1>
<blockquote>
<p>You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose at you, so-called "Arthur King," you and all your silly English K-nig-hts.</p>
<p><span class="attribution">~ Frenchie</span>.</p>
</blockquote>
</section>

<!-- footer -->
<footer>
<p>&copy;2012 Nobody in particular. None of this is original.</p>
</footer>

<!-- links to anchors -->
<p><a href="#top">Back to the top</a>.</p>
</div>
</body>
</html>
108 changes: 108 additions & 0 deletions 05-entities/index.html
@@ -0,0 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My HTML Document</title>
</head>
<body>
<h1>Entities</h1>
<p>There are a few special entities that have special meaning in HTML that should always be encoded:</p>

<ul>
<li>The ampersand: &amp; (<code>&amp;amp;</code>)</li>
<li>Less than and greater than: &lt; and &gt; (<code>&amp;lt;</code> and <code>&amp;gt;</code>)</li>
</ul>

<p>There are also other entities that are special to XML and that should always be encoded in XML documents:</p>
<!-- note: RSS is XML -->

<ul>
<li>Double quotes: &quot; (<code>&amp;quot;</code>)</li>
<li>Single quotes: &apos; (<code>&amp;apos;</code>)</li>
</ul>

<p><i>With XML it is safer to use numbered entities if entities are used above native UTF-8 characters since older XML parsers have limited support for named entities where most old and new XML parsers support numbered entities without issue.</i></p>

<h2>A short list of other helpful entities:</h2>
<p><i>Named entities are limited to a small subset of Unicode characters, but numbered entities can specify any character.</i></p>


<table border="1" cellspacing="0" cellpadding="5">
<thead>
<th>Entity (named)</th>
<th>Entity (numeric)</th>
<th>Output</th>
</thead>
<tbody>
<tr>
<td><code>&amp;quot;</code></td>
<td><code>&amp;#034;</code>
<td>&quot;</td>
</tr>
<tr>
<td><code>&amp;apos;</code></td>
<td><code>&amp;#039;</code>
<td>&apos;</td>
</tr>
<tr>
<td><code>&amp;lt;</code></td>
<td><code>&amp;#060;</code>
<td>&lt;</td>
</tr>
<tr>
<td><code>&amp;gt;</code></td>
<td><code>&amp;#062;</code>
<td>&gt;</td>
</tr>
<tr>
<td><code>&amp;nbsp;</code></td>
<td><code>&amp;#160;</code>
<td>&nbsp;</td>
</tr>
<tr>
<td><code>&amp;cent;</code></td>
<td><code>&amp;#162</code></td>
<td>&cent;</td>
</tr>
<tr>
<td><code>&amp;copy;</code></td>
<td><code>&amp;#169;</code>
<td>&copy;</td>
</tr>
<tr>
<td><code>&amp;deg;</code></td>
<td><code>&amp;#176;</code>
<td>&deg;</td>
</tr>
<tr>
<td><code>&amp;reg;</code></td>
<td><code>&amp;#174;</code>
<td>&reg;</td>
</tr>
<tr>
<td><code>&amp;reg;</code></td>
<td><code>&amp;#174;</code>
<td>&reg;</td>
</tr>
<tr>
<td><code>&amp;laquo;</code></td>
<td><code>&amp;#171;</code>
<td>&laquo;</td>
</tr>
<tr>
<td><code>&amp;raquo;</code></td>
<td><code>&amp;#187;</code>
<td>&raquo;</td>
</tr>
<tr>
<td><code>&amp;times;</code></td>
<td><code>&amp;#215;</code>
<td>&times;</td>
</tr>

</tbody>
</table>

<p>For a complete list of XML &amp; HTML entities check out the <a href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Predefined_entities_in_XML">WikiPedia article on entities</a>.</p>
</body>
</html>

0 comments on commit dd62b74

Please sign in to comment.