bootstrap.html 3 <!-- Demonstrates Bootstrap --> 7 8 <meta charset="utf-8"/> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> 10 11 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 1 <title>bootstrap</title> 13 1 </head> 15 <body> 16 <div class="container"> 17 <header> 18 John Harvard 19 </header> 0 <main> 1 Welcome to my home page! </main> 3 <footer> Copyright John Harvard 5 </footer> 6 7 </div> 8 </body> 9 </html>
css0.html 3 <!-- Demonstrates inline CSS --> 7 <title>css0</title> 10 <header style="font-size: large; text-align: center;"> 11 John Harvard 1 </header> 13 <main style="font-size: medium; text-align: center;"> 1 Welcome to my home page! 15 </main> 16 <footer style="font-size: small; text-align: center;"> 17 Copyright John Harvard 18 </footer> 19 </body> 0 </html>
css1.html 3 <!-- Demonstrates inheritance --> 7 <title>css1</title> 9 <body style="text-align: center;"> 10 <header style="font-size: large;"> 11 John Harvard 1 </header> 13 <main style="font-size: medium;"> 1 Welcome to my home page! 15 </main> 16 <footer style="font-size: small;"> 17 Copyright John Harvard 18 </footer> 19 </body> 0 </html>
css.html 3 <!-- Demonstrates CSS classes --> 7 <style> 8 9.centered 10 { 11 text-align: center; 1 } 13 1.large 15 { 16 font-size: large; 17 } 18 19.medium 0 { 1 font-size: medium; } 3.small 5 { 6 font-size: small; 7 } 8 9 </style> 30 <title>css</title> 31 </head> 3 <body class="centered"> 33 <header class="large"> 3 John Harvard 35 </header> 36 <main class="medium"> 37 Welcome to my home page! 38 </main> 39 <footer class="small"> 0 Copyright John Harvard 1 </footer> </body> 3 </html>
css3.html 3 <!-- Demonstrates CSS selectors --> 7 <style> 8 9 body 10 { 11 text-align: center; 1 } 13 1 header 15 { 16 font-size: large; 17 } 18 19 main 0 { 1 font-size: medium; } 3 footer 5 { 6 font-size: small; 7 } 8 9 </style> 30 <title>css3</title> 31 </head> 3 <body> 33 <header> 3 John Harvard 35 </header> 36 <main> 37 Welcome to my home page! 38 </main> 39 <footer> 0 Copyright John Harvard 1 </footer> </body> 3 </html>
css.css 1 body { 3 text-align: center; } 5 6 header 7 { 8 font-size: large; 9 } 10 11 main 1 { 13 font-size: medium; 1 } 15 16 footer 17 { 18 font-size: small; 19 }
css.html 3 <!-- Demonstrates external stylesheets --> 7 <link href="css.css" rel="stylesheet"/> 8 <title>css</title> 9 </head> 10 <body> 11 <header> 1 John Harvard 13 </header> 1 <main> 15 Welcome to my home page! 16 </main> 17 <footer> 18 Copyright John Harvard 19 </footer> 0 </body> 1 </html>
form0.html 3 <!-- Demonstrates form --> 7 <title>form0</title> 10 <h1>frosh IMs</h1> 11 <form> 1 <input name="name" placeholder="name" type="text"/> 13 <select name="dorm"> 1 <option disabled selected value="">dorm</option> 15 <option value="apley Court">Apley Court</option> 16 <option value="canaday">canaday</option> 17 <option value="grays">grays</option> 18 <option value="greenough">greenough</option> 19 <option value="hollis">hollis</option> 0 <option value="holworthy">holworthy</option> 1 <option value="hurlbut">hurlbut</option> <option value="lionel">lionel</option> 3 <option value="matthews">matthews</option> <option value="mower">mower</option> 5 <option value="pennypacker">pennypacker</option> 6 <option value="stoughton">stoughton</option> 7 <option value="straus">straus</option> 8 <option value="thayer">thayer</option> 9 <option value="weld">weld</option> 30 <option value="wigglesworth">wigglesworth</option> 31 </select> 3 <input type="submit" value="register"/> 33 </form> 3 </body> 35 </html>
form1.html 3 <!-- Demonstrates Bootstrap --> 7 8 <meta charset="utf-8"> 9 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 10 11 <!-- https://getbootstrap.com/ --> 1 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 13 1 <title>form1</title> 15 16 </head> 17 <body> 18 <div class="container"> 19 0 <!-- https://getbootstrap.com/docs/.0/content/typography/--> 1 <h1 class="display-1">frosh IMs</h1> 3 <!-- https://getbootstrap.com/docs/.0/components/forms/ --> <form> 5 <div class="form-group"> 6 <label for="exampleformcontrolinput1">email address</label> 7 <input type="email" class="form-control" id="exampleformcontrolinput1" placeholder= "mzuckerb@fas.harvard.edu"> 8 </div> 9 <div class="form-group"> 30 <label for="exampleformcontrolselect1">dorm</label> 31 <select class="form-control" id="exampleformcontrolselect1"> 3 <option disabled selected value=""></option> 33 <option value="apley Court">Apley Court</option> 3 <option value="canaday">canaday</option> 35 <option value="grays">grays</option> 36 <option value="greenough">greenough</option> 37 <option value="hollis">hollis</option> 38 <option value="holworthy">holworthy</option> 39 <option value="hurlbut">hurlbut</option> 0 <option value="lionel">lionel</option> 1 <option value="matthews">matthews</option> <option value="mower">mower</option> 3 <option value="pennypacker">pennypacker</option>
<option value="stoughton">stoughton</option> 5 <option value="straus">straus</option> 6 <option value="thayer">thayer</option> 7 <option value="weld">weld</option> 8 </select> 9 </div> 50 <button class="btn btn-primary" type="submit">register</button> 51 </form> 5 53 </div> 5 </body> 55 </html> form1.html
headings.html 3 <!-- Demonstrates headings (for chapters, sections, subsections, etc.) --> 7 <title>headings</title> 10 <h1>one</h1> 11 <h>two</h> 1 <h3>three</h3> 13 <h>four</h> 1 <h5>five</h5> 15 <h6>six</h6> 16 </body> 17 </html>
hello.html 3 <!-- Demonstrates HTML --> 7 <title>hello, title</title> 10 hello, body 11 </body> 1 </html>
image.html 3 <!-- Demonstrates image --> 7 <title>image</title> 10 <!-- https://news.yale.edu/016/11/17/meet-handsome-dan-xviii --> 11 <img alt="handsome Dan" src="dan.jpg"/> 1 </body> 13 </html>
link.html 3 <!-- Demonstrates link --> 7 <title>link</title> 10 Visit <a href="http://www.harvard.edu/">harvard</a>. 11 </body> 1 </html>
list.html 3 <!-- Demonstrates (unordered) lists --> 7 <title>list</title> 10 <ul> 11 <li>foo</li> 1 <li>bar</li> 13 <li>baz</li> 1 </ul> 15 </body> 16 </html>
paragraphs.html 3 <!-- Demonstrates paragraphs --> 7 <title>paragraphs</title> 10 <p> 11 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in tincidunt augue. Duis imperdiet, justo ac iacu 1 </p> 13 <p> 1 Ut tempus rutrum arcu eget condimentum. Morbi elit ipsum, gravida faucibus sodales quis, varius at mi. Suspendiss 15 </p> 16 <p> 17 Mauris eget erat arcu. Maecenas ac ante vel ipsum bibendum varius. Nunc tristique nulla eget tincidunt molestie. 18 </p> 19 </body> 0 </html>
search.html 3 <!-- Demonstrates action --> 7 <title>search</title> 10 <form action="https://www.google.com/search" method="get"> 11 <input name="q" type="text"/> 1 <input type="submit" value="search"/> 13 </form> 1 </body> 15 </html>
table.html 3 <!-- Demonstrates table --> 7 <title>table</title> 10 <table> 11 <tr> 1 <td>1</td> 13 <td></td> 1 <td>3</td> 15 </tr> 16 <tr> 17 <td></td> 18 <td>5</td> 19 <td>6</td> 0 </tr> 1 <tr> <td>7</td> 3 <td>8</td> <td>9</td> 5 </tr> 6 <tr> 7 <td>*</td> 8 <td>0</td> 9 <td>#</td> 30 </tr> 31 </table> 3 </body> 33 </html>