mirror_html/html5-test-page
1
0
Fork 0
mirror of https://github.com/cbracco/html5-test-page.git synced 2025-08-21 05:11:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: mirror_html:jKratzik-master
Branches Tags
mirror_html:master mirror_html:issue/13-picture-element mirror_html:racztiborzoltan-patch-1 mirror_html:charul97-1 mirror_html:97arushisharma-horizontal-list mirror_html:jKratzik-master mirror_html:gh-pages
mirror_html:0.9.7 mirror_html:0.9.6 mirror_html:0.9.5 mirror_html:0.9.4 mirror_html:0.9.3 mirror_html:0.9.2 mirror_html:0.9.1 mirror_html:0.9.0 mirror_html:0.8.0 mirror_html:0.7.1 mirror_html:0.6.2 mirror_html:0.6.1 mirror_html:0.6.0 mirror_html:0.5.0 mirror_html:0.4.0 mirror_html:0.3.1 mirror_html:0.3.0 mirror_html:0.2.2 mirror_html:0.2.1 mirror_html:0.2.0 mirror_html:0.1.0
...
compare: mirror_html:0.9.5
Branches Tags
mirror_html:master mirror_html:issue/13-picture-element mirror_html:racztiborzoltan-patch-1 mirror_html:charul97-1 mirror_html:97arushisharma-horizontal-list mirror_html:jKratzik-master mirror_html:gh-pages
mirror_html:0.9.7 mirror_html:0.9.6 mirror_html:0.9.5 mirror_html:0.9.4 mirror_html:0.9.3 mirror_html:0.9.2 mirror_html:0.9.1 mirror_html:0.9.0 mirror_html:0.8.0 mirror_html:0.7.1 mirror_html:0.6.2 mirror_html:0.6.1 mirror_html:0.6.0 mirror_html:0.5.0 mirror_html:0.4.0 mirror_html:0.3.1 mirror_html:0.3.0 mirror_html:0.2.2 mirror_html:0.2.1 mirror_html:0.2.0 mirror_html:0.1.0

22 Commits
jKratzik-m ... 0.9.5

Author SHA1 Message Date
Chris Bracco
931b8637d5 Merge pull request #39 from cbracco/issue/13-picture-element 
Add picture element
 2021-04-03 15:54:44 -04:00
Chris Bracco
a0c969b93e v0.9.5 2021-04-03 15:54:12 -04:00
Chris Bracco
d882dfcb48 Add picture element; Revise other image examples 2021-04-03 15:53:12 -04:00
Chris Bracco
e191677997 Merge pull request #27 from TomasHubelbauer/patch-1 
Remove duped word
 2021-04-03 15:45:24 -04:00
Chris Bracco
328c708a5e v0.9.4 2021-04-03 15:44:00 -04:00
Chris Bracco
a557aa534e Merge pull request #23 from gipsi/master 
Nu html checked
 2021-04-03 15:42:26 -04:00
Chris Bracco
4e522a8e67 Merge branch 'master' into master 2021-04-03 15:42:06 -04:00
Chris Bracco
35cd96c06b Merge pull request #38 from cbracco/racztiborzoltan-patch-1 
Add multiple <select> example
 2021-04-03 15:34:48 -04:00
Chris Bracco
4b6224d52e v0.9.3 2021-04-03 15:34:01 -04:00
Chris Bracco
5218026335 Merge branch 'patch-1' of https://github.com/racztiborzoltan/html5-test-page into racztiborzoltan-patch-1 
* 'patch-1' of https://github.com/racztiborzoltan/html5-test-page:
  add multiple select
 2021-04-03 15:32:36 -04:00
Chris Bracco
e24e4b2b64 Merge pull request #37 from cbracco/charul97-1 
Add nested lists
 2021-04-03 15:31:04 -04:00
Chris Bracco
2e602b623d v0.9.2 2021-04-03 15:29:41 -04:00
Chris Bracco
9780f2af62 Add nested lists 2021-04-03 15:29:25 -04:00
Chris Bracco
a65554bba1 Merge pull request #36 from cbracco/97arushisharma-horizontal-list 
Add background images example
 2021-04-03 15:08:36 -04:00
Chris Bracco
7611bf513b v0.9.1 2021-04-03 15:05:45 -04:00
Chris Bracco
9c92199a7e Clean up BG image PR 2021-04-03 15:04:31 -04:00
97arushisharma
5cdb76d0fb horizontal list and text color 2021-04-03 14:59:41 -04:00
Chris Bracco
a7b56dec9b Add .editorconfig 2021-04-03 14:59:19 -04:00
Chris Bracco
8f241cf5f1 Merge pull request #35 from cbracco/jKratzik-master 
Add <details>, <address>, <object>, <embed>, <datalist>
 2021-04-03 14:56:36 -04:00
Tomáš Hübelbauer
f3ee1b3575 Remove duped word 2020-04-05 08:46:46 +02:00
gipsi
b5cc38cc84 Nu html checked 2019-10-13 04:55:41 +01:00
Rácz Tibor Zoltán
a9fa7e0dfb add multiple select 2018-09-18 02:22:13 +02:00
5 changed files with 147 additions and 28 deletions
Expand all files Collapse all files

3
.editorconfig Normal file
View File

@@ -0,0 +1,3 @@
[*]
indent_style = space
indent_size = 2

22
CHANGELOG.md
View File

@@ -1,4 +1,24 @@
# 0.9.0 (March 19, 2018) # 0.9.5 (April 3, 2021)
- Add <picture> element (thanks @AurelioDeRosa!).
# 0.9.4 (April 3, 2021)
- Remove unnecessary role attributes. Update headings (thanks @gipsi!).
# 0.9.3 (April 3, 2021)
- Add multiple <select> (thanks @racztiborzoltan!).
# 0.9.2 (April 3, 2021)
- Add nested lists (thanks @charul97!).
# 0.9.1 (April 3, 2021)
- Add background images (thanks @97arushisharma!).
# 0.9.0 (April 3, 2021)
- Add <details>, <address>, <object>, <embed>, <datalist> (thanks @jKratzik!). - Add <details>, <address>, <object>, <embed>, <datalist> (thanks @jKratzik!).

143
index.html
View File

@@ -1,4 +1,4 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@@ -7,11 +7,11 @@
</head> </head>
<body> <body>
<div id="top" class="page" role="document"> <div id="top" class="page" role="document">
<header role="banner"> <header>
<h1>HTML5 Test Page</h1> <h1>HTML5 Test Page</h1>
<p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p> <p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
</header> </header>
<nav role="navigation"> <nav>
<ul> <ul>
<li> <li>
<a href="#text">Text</a> <a href="#text">Text</a>
@@ -33,6 +33,7 @@
<a href="#embedded">Embedded content</a> <a href="#embedded">Embedded content</a>
<ul> <ul>
<li><a href="#embedded__images">Images</a></li> <li><a href="#embedded__images">Images</a></li>
<li><a href="#embedded__bgimages">Background images</a></li>
<li><a href="#embedded__audio">Audio</a></li> <li><a href="#embedded__audio">Audio</a></li>
<li><a href="#embedded__video">Video</a></li> <li><a href="#embedded__video">Video</a></li>
<li><a href="#embedded__canvas">Canvas</a></li> <li><a href="#embedded__canvas">Canvas</a></li>
@@ -58,12 +59,12 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<main role="main"> <main>
<section id="text"> <section id="text">
<header><h1>Text</h1></header> <header><h1>Text</h1></header>
<article id="text__headings"> <article id="text__headings">
<header> <header>
<h1>Headings</h1> <h2>Headings</h2>
</header> </header>
<div> <div>
<h1>Heading 1</h1> <h1>Heading 1</h1>
@@ -76,14 +77,25 @@
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__paragraphs"> <article id="text__paragraphs">
<header><h1>Paragraphs</h1></header> <header><h2>Paragraphs</h2></header>
<div> <div>
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p> <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__blockquotes">
<header><h2>Blockquotes</h2></header>
<div>
<blockquote>
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
<cite><a href="#!">Said no one, ever.</a></cite>
</blockquote>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__lists"> <article id="text__lists">
<header><h1>Lists</h1></header> <header><h2>Lists</h2></header>
<div> <div>
<h3>Definition list</h3> <h3>Definition list</h3>
<dl> <dl>
@@ -91,15 +103,71 @@
<dd>This is a definition list division.</dd> <dd>This is a definition list division.</dd>
</dl> </dl>
<h3>Ordered List</h3> <h3>Ordered List</h3>
<ol> <ol type="1">
<li>List Item 1</li> <li>List Item 1</li>
<li>List Item 2</li> <li>
List Item 2
<ol type="A">
<li>List Item 1</li>
<li>
List Item 2
<ol type="a">
<li>List Item 1</li>
<li>
List Item 2
<ol type="I">
<li>List Item 1</li>
<li>
List Item 2
<ol type="i">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li>
</ol>
</li>
<li>List Item 3</li> <li>List Item 3</li>
</ol> </ol>
<h3>Unordered List</h3> <h3>Unordered List</h3>
<ul> <ul>
<li>List Item 1</li> <li>List Item 1</li>
<li>List Item 2</li> <li>
List Item 2
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>
List Item 2
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li>
</ul>
</li>
<li>List Item 3</li> <li>List Item 3</li>
</ul> </ul>
</div> </div>
@@ -136,14 +204,14 @@
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__hr"> <article id="text__hr">
<header><h1>Horizontal rules</h1></header> <header><h2>Horizontal rules</h2></header>
<div> <div>
<hr> <hr>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__tables"> <article id="text__tables">
<header><h1>Tabular data</h1></header> <header><h2>Tabular data</h2></header>
<table> <table>
<caption>Table Caption</caption> <caption>Table Caption</caption>
<thead> <thead>
@@ -198,7 +266,7 @@
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__code"> <article id="text__code">
<header><h1>Code</h1></header> <header><h2>Code</h2></header>
<div> <div>
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p> <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
<p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p> <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
@@ -215,7 +283,7 @@
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__inline"> <article id="text__inline">
<header><h1>Inline elements</h1></header> <header><h2>Inline elements</h2></header>
<div> <div>
<p><a href="#!">This is a text link</a>.</p> <p><a href="#!">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance.</strong></p> <p><strong>Strong is used to indicate strong importance.</strong></p>
@@ -227,7 +295,7 @@
<p><s>This text has a strikethrough</s>.</p> <p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p> <p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</p> <p>Subscript for things like H<sub>2</sub>O.</p>
<p><small>This small text is small for for fine print, etc.</small></p> <p><small>This small text is small for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p> <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p> <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
<p><cite>This is a citation.</cite></p> <p><cite>This is a citation.</cite></p>
@@ -239,7 +307,7 @@
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__comments"> <article id="text__comments">
<header><h1>HTML Comments</h1></header> <header><h2>HTML Comments</h2></header>
<div> <div>
<p>There is comment here: <!--This comment should not be displayed--></p> <p>There is comment here: <!--This comment should not be displayed--></p>
<p>There is a comment spanning multiple tags and lines below here.</p> <p>There is a comment spanning multiple tags and lines below here.</p>
@@ -251,22 +319,35 @@
</article> </article>
</section> </section>
<section id="embedded"> <section id="embedded">
<header><h1>Embedded content</h1></header> <header><h2>Embedded content</h2></header>
<article id="embedded__images"> <article id="embedded__images">
<header><h2>Images</h2></header> <header><h2>Images</h2></header>
<div> <div>
<h3>No <code>&lt;figure&gt;</code> element</h3> <h3>Plain <code>&lt;img&gt;</code> element</h3>
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p> <p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3> <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> element</h3>
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure> <figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
<h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3> <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> and <code>&lt;figcaption&gt;</code> elements</h3>
<figure> <figure>
<img src="http://placekitten.com/420/420" alt="Image alt text"> <img src="https://placekitten.com/420/420" alt="Photo of a kitten">
<figcaption>Here is a caption for this image.</figcaption> <figcaption>Here is a caption for this image.</figcaption>
</figure> </figure>
<h3><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> element</h3>
<figure>
<picture>
<source srcset="https://placekitten.com/800/800"
media="(min-width: 800px)">
<img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
</picture>
</figure>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__bgimages">
<header><h2>Background images</h2></header>
<div style="background-image:url('https://placekitten.com/300/300'); width:300px; height: 300px;"></div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="embedded__audio"> <article id="embedded__audio">
<header><h2>Audio</h2></header> <header><h2>Audio</h2></header>
<div><audio controls="">audio</audio></div> <div><audio controls="">audio</audio></div>
@@ -314,7 +395,7 @@
</article> </article>
</section> </section>
<section id="forms"> <section id="forms">
<header><h1>Form elements</h1></header> <header><h2>Form elements</h2></header>
<form> <form>
<fieldset id="forms__input"> <fieldset id="forms__input">
<legend>Input fields</legend> <legend>Input fields</legend>
@@ -328,7 +409,7 @@
</p> </p>
<p> <p>
<label for="input__webaddress">Web Address</label> <label for="input__webaddress">Web Address</label>
<input id="input__webaddress" type="url" placeholder="http://yoursite.com"> <input id="input__webaddress" type="url" placeholder="https://yoursite.com">
</p> </p>
<p> <p>
<label for="input__emailaddress">Email Address</label> <label for="input__emailaddress">Email Address</label>
@@ -372,6 +453,16 @@
</optgroup> </optgroup>
</select> </select>
</p> </p>
<p>
<label for="select_multiple">Select (multiple)</label>
<select id="select_multiple" multiple="multiple">
<optgroup label="Option Group">
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</optgroup>
</select>
</p>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox"> <fieldset id="forms__checkbox">
@@ -464,7 +555,7 @@
</form> </form>
</section> </section>
</main> </main>
<footer role="contentinfo"> <footer>
<p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p> <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
</footer> </footer>
</div> </div>

5
package-lock.json generated Normal file
View File

@@ -0,0 +1,5 @@
{
"name": "html5-test-page",
"version": "0.8.0",
"lockfileVersion": 1
}

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "html5-test-page", "name": "html5-test-page",
"version": "0.9.0", "version": "0.9.5",
"description": "A page filled with common HTML elements to be used for testing purposes.", "description": "A page filled with common HTML elements to be used for testing purposes.",
"main": "index.html", "main": "index.html",
"scripts": { "scripts": {