Skip to content

Instantly share code, notes, and snippets.

@EliseWei

EliseWei/html1.html

Last active January 26, 2016 18:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save EliseWei/1a5df33b13624326b476 to your computer and use it in GitHub Desktop.
Save EliseWei/1a5df33b13624326b476 to your computer and use it in GitHub Desktop.
Download ZIP
Files for A Brief Demonstrated History of HTML & CSS
Raw
html1.html
<!doctype html>
<head><title></title></head>
<body>
<h1>My Scientific Paper</h1>
<h3>by Elise Wei - 01/26/2016</h3>
<h2>Abstract</h2>
<p>The purpose of this study was to find some very valuable science and share it with the world. You will find my results below, and I think you will find them very interesting. [<a href="#foot1">footnote 1</a>]</p>
<h2>Results</h2>
<pre>
Subject Result
A 5
B 6
C 7
D 8
E* 9
</pre>
<p>*Subject E was late for the final session. Results may be compromised.</p>
<h2>Chart</h2>
<p>Here is where a chart would go, if I could show one to you.</p>
<h2>Footnotes</h2>
<ol>
<li>
<a name="foot1"></a>Very interesting science is my specialty. Please see my <a href="http://www.external-link-here.com">recent study on "Things You Will Love."</a>
</li>
</ol>
</body>
</html>
Raw
html2.html
<!doctype html>
<head><title></title></head>
<body>
<h1>My Scientific Paper</h1>
<marquee>by Elise Wei - 01/26/2016</marquee>
<table width="100%" cellpadding="10">
<tr>
<td colspan="2">
<h2>Abstract</h2>
<p>The purpose of this study was to find some very valuable science and share it with the world. You will find my results below, and I think you will find them very interesting. [<a href="#foot1">footnote 1</a>]</p>
</td>
</tr>
<tr>
<td width="33%" valign="top">
<h2>Results</h2>
<table border="1" cellpadding="5">
<tr bgColor="yellow">
<th>Subject</th>
<th>Result</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
</tr>
<tr>
<td>B</td>
<td>6</td>
</tr>
<tr>
<td>C</td>
<td>7</td>
</tr>
<tr>
<td>D</td>
<td>8</td>
</tr>
<tr>
<td>E*</td>
<td>9</td>
</tr>
</table>
<p>*Subject E was late for the final session. Results may be compromised.</p>
</td>
<td width="66%">
<h2>Chart</h2>
<img src="http://www.rimmkaufman.com/sites/default/files/content/up-and-to-the-right.png" alt=""/>
</td>
</tr>
</table>
<h2>Footnotes</h2>
<ol>
<li>
<a name="foot1"></a>Very interesting science is my specialty. Please see my <a href="http://www.external-link-here.com">recent study on "Things You Will Love."</a>
</li>
</ol>
</body>
</html>
Raw
html3-2.html
<!doctype html>
<head><title></title></head>
<body>
<center><h1>My Scientific Paper</h1></center>
<h3><font color="blue">by Elise Wei - 01/26/2016</font></h3>
<table width="100%" cellpadding="10">
<tr>
<td colspan="2">
<h2>Abstract</h2>
<p>The purpose of this study was to find some very valuable science and share it with the world. You will find my results below, and I think you will find them very interesting. [<a href="#foot1">footnote 1</a>]</p>
</td>
</tr>
<tr>
<td width="33%" valign="top">
<h2>Results</h2>
<table border="1" cellpadding="5">
<tr bgColor="yellow">
<th>Subject</th>
<th>Result</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
</tr>
<tr>
<td>B</td>
<td>6</td>
</tr>
<tr>
<td>C</td>
<td>7</td>
</tr>
<tr>
<td>D</td>
<td>8</td>
</tr>
<tr>
<td>E*</td>
<td>9</td>
</tr>
</table>
<p>*Subject E was late for the final session. Results may be compromised.</p>
</td>
<td width="66%">
<h2>Chart</h2>
<img src="http://www.rimmkaufman.com/sites/default/files/content/up-and-to-the-right.png" alt=""/>
</td>
</tr>
</table>
<h2>Footnotes</h2>
<ol>
<li>
<a name="foot1"></a>Very interesting science is my specialty. Please see my <a href="http://www.external-link-here.com">recent study on "Things You Will Love."</a>
</li>
</ol>
</body>
</html>
Raw
html4.html
<!doctype html>
<head>
<title></title>
<style>
body {font-family: verdana;}
h1 {text-align: center;}
h2 {
background: aqua;
padding: 15px;
clear: both;
}
h3 {color: blue;}
.left-col {
width: 33%;
float: left;
}
.right-col {
width: 66%;
float: right;
}
</style>
</head>
<body>
<h1>My Scientific Paper</h1>
<h3>by Elise Wei - 01/26/2016</h3>
<div class="main-content">
<h2>Abstract</h2>
<p>The purpose of this study was to find some very valuable science and share it with the world. You will find my results below, and I think you will find them very interesting. [<a href="#foot1">footnote 1</a>]</p>
<div class="left-col">
<h2>Results</h2>
<table border="1" cellpadding="5">
<tr bgColor="yellow">
<th>Subject</th>
<th>Result</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
</tr>
<tr>
<td>B</td>
<td>6</td>
</tr>
<tr>
<td>C</td>
<td>7</td>
</tr>
<tr>
<td>D</td>
<td>8</td>
</tr>
<tr>
<td>E*</td>
<td>9</td>
</tr>
</table>
<p>*Subject E was late for the final session. Results may be compromised.</p>
</div>
<div class="right-col">
<h2>Chart</h2>
<img src="http://www.rimmkaufman.com/sites/default/files/content/up-and-to-the-right.png" alt=""/>
</div>
</div>
<h2>Footnotes</h2>
<ol>
<li>
<a name="foot1"></a>Very interesting science is my specialty. Please see my <a href="http://www.external-link-here.com">recent study on "Things You Will Love."</a>
</li>
</ol>
</body>
</html>
Raw
html4_2-1.html
<!doctype html>
<head>
<title></title>
<style>
body { font-family: verdana; }
a {
font-weight: bold;
}
a:hover {
color: red;
background: yellow;
}
h1 { text-align: center; }
h2 {
background: aqua;
padding: 15px;
}
h1 + h3 { color: blue; }
h1 + h3::after { content: " - 01/26/2016"; }
.main-content { overflow: auto; }
.left-col {
width: 33%;
float: left;
}
.right-col {
width: 66%;
float: right;
}
</style>
</head>
<body>
<h1>My Scientific Paper</h1>
<h3>by Elise Wei</h3>
<div class="main-content">
<h2>Abstract</h2>
<p>The purpose of this study was to find some very valuable science and share it with the world. You will find my results below, and I think you will find them very interesting. [<a href="#foot1">footnote 1</a>]</p>
<div class="left-col">
<h2>Results</h2>
<table border="1" cellpadding="5">
<tr bgColor="yellow">
<th>Subject</th>
<th>Result</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
</tr>
<tr>
<td>B</td>
<td>6</td>
</tr>
<tr>
<td>C</td>
<td>7</td>
</tr>
<tr>
<td>D</td>
<td>8</td>
</tr>
<tr>
<td>E*</td>
<td>9</td>
</tr>
</table>
<p>*Subject E was late for the final session. Results may be compromised.</p>
</div>
<div class="right-col">
<h2>Chart</h2>
<img src="http://www.rimmkaufman.com/sites/default/files/content/up-and-to-the-right.png" alt=""/>
</div>
</div>
<h2>Footnotes</h2>
<ol>
<li>
<a name="foot1"></a>Very interesting science is my specialty. Please see my <a href="http://www.external-link-here.com">recent study on "Things You Will Love."</a>
</li>
</ol>
</body>
</html>
Raw
html5.html
<!doctype html>
<head>
<title></title>
<style>
body { font-family: verdana; }
a {
font-weight: bold;
-webkit-transition: all .5s linear;
}
a:hover {
color: red;
background: yellow;
}
h1 {
text-align: center;
text-shadow: 2px 2px 5px rgba(0,100,100,.8)
}
h2 {
background: linear-gradient(to bottom, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
border-radius: 10px;
padding: 15px;
text-shadow: 2px 2px 1px rgba(255,0,0,.3);
}
h1 + h3 { color: blue; }
h1 + h3::after { content: " - 01/26/2016"; }
.main-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.abstract { width: 100% ;}
.results {
flex: 1 1 28%;
margin-right: 3%;
}
.chart {
flex: 2 1 57%;
}
</style>
</head>
<body>
<header>
<h1>My Scientific Paper</h1>
<h3>by Elise Wei</h3>
</header>
<div class="main-content">
<section class="abstract">
<h2>Abstract</h2>
<p>The purpose of this study was to find some very valuable science and share it with the world. You will find my results below, and I think you will find them very interesting. [<a href="#foot1">footnote 1</a>]</p>
</section>
<section class="results">
<h2>Results</h2>
<table border="1" cellpadding="5">
<tr bgColor="yellow">
<th>Subject</th>
<th>Result</th>
</tr>
<tr>
<td>A</td>
<td>5</td>
</tr>
<tr>
<td>B</td>
<td>6</td>
</tr>
<tr>
<td>C</td>
<td>7</td>
</tr>
<tr>
<td>D</td>
<td>8</td>
</tr>
<tr>
<td>E*</td>
<td>9</td>
</tr>
</table>
<p>*Subject E was late for the final session. Results may be compromised.</p>
</section>
<section class="chart">
<h2>Chart</h2>
<img src="http://www.rimmkaufman.com/sites/default/files/content/up-and-to-the-right.png" alt=""/>
</section>
</div>
<footer>
<h2>Footnotes</h2>
<ol>
<li>
<a name="foot1"></a>Very interesting science is my specialty. Please see my <a href="http://www.external-link-here.com">recent study on "Things You Will Love."</a>
</li>
</ol>
</footer>
</body>
</html>
Raw
paper.txt
My Scientific Paper
by Elise Wei - 01/26/2016
--Abstract--
The purpose of this study was to find some very valuable science and share it with the world. You will find my results below, and I think you will find them very interesting. [footnote 1]
--Results--
Subject Result
A 5
B 6
C 7
D 8
E* 9
*Subject E was late for the final session. Results may be compromised.
--Chart--
Here is where a chart would go, if I could show one to you.
--Footnotes--
1. Very interesting science is my specialty. Please see my recent study on "Things You Will Love."
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment