Session 02 - Markup (HTML)
Examples

• Example 2.1 - p element  
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</p><p>Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</p><p>Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.</p>
• Example 2.2 - div element  
  <div class="part1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed feugiat nisi at sapien. Phasellus varius tincidunt ligula. Praesent nisi. Duis sollicitudin. Donec dignissim, est vel auctor blandit, ante est laoreet neque, non pellentesque mauris turpis eu purus.</div><div class="part2">Suspendisse mollis leo nec diam. Vestibulum pulvinar tellus sit amet nulla fringilla semper. Aenean aliquam, urna et accumsan sollicitudin, tellus pede lobortis velit, nec placerat dolor pede nec nibh. Donec fringilla. Duis adipiscing diam at enim. Vestibulum nibh.</div><div class="part3">Proin sollicitudin ante vel eros. Nunc tempus. Quisque vitae quam non magna mattis volutpat. Ut a risus. Fusce bibendum sagittis magna.</div>div.part1 {padding: 2em; color: white; background-color: green;} div.part2 { color: purple; padding: 2em; border: medium solid purple;} div.part3 { background-color: orange; padding: 1em; font-size: smaller;}
• Example 2.3 - Unordered List  
  <ul><li>Tea</li><li>Bread</li><li>Cheese</li><li>Chips</li><li>Ice Cream</li></ul>
• Example 2.4 - Nested Unordered List  
  <ul><li>Tea <ul><li>Kenyan</li><li>Sikkim</li><li>Ceylon</li><li>Assam</li><li>Oolong</li></ul></li><li>Potato Chips <ul><li>Dirty's</li><li>Art's and Mary's</li><li>Tim's Cascade</li><li>Cape Cod</li></ul></li></ul>
• Example 2.5 - Ordered List  
  <ol><li>Boil water</li><li>Measure tea (approximately 1 tsp. per 6 oz. cup)</li><li>Steep tea for 3 to 5 minutes</li><li>Enjoy!</li></ol>
• Example 2.6 - Dictionary Lists (terms and definitions)  
  <dl><dt>bread</dt><dd>a usually baked and leavened food made of a mixture whose basic constituent is flour or meal</dd><dt>butter</dt><dd>a solid emulsion of fat globules, air, and water made by churning milk or cream and used as food </dd></dl>
• Example 2.7 - span element  
  <div class="citation"><span class="author">Berners‐Lee, Tim</span>. <span class="title">We Need a Magna Carta for the Internet</span><span class="journal">New Perspectives Quarterly</span> 31.3 (2014): 39-41. Web.<br/><a href="https://harvard.instructure.com/courses/8246/files/folder/readings?preview=1564950" title="We Need a Magna Carta for the Internet by Tim Berners-Lee">View PDF</a></div>.citation .journal { font-style: italic; } .citation span.title::before { content: '"';} .citation span.title::after { content: '." ';}
• Example 2.8 - Using br for line breaks  
  <p style="background-color: #ffc">Using br for line breaks:</p><p>Listen, my children, and you shall hear<br/> Of the midnight ride of Paul Revere,<br/> On the eighteenth of April, in Seventy-Five:<br/> Hardly a man is now alive<br/> Who remembers that famous day and year.</p><p style="background-color: #ffc">Line breaks and spaces in HTML code don't render...(exception below):</p><p>Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year.</p><p style="background-color: #ffc">...except in the "pre" (preformatted) element:</p><pre>Listen, my children, and you shall hear Of the midnight ride of Paul Revere, On the eighteenth of April, in Seventy-Five: Hardly a man is now alive Who remembers that famous day and year.</pre>
• Example 2.9 - img element  
  <img src="http://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/>
• Example 2.10 - 'img' element with an anchor  
  <a href="http://extension.harvard.edu/"><img src="http://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/></a>