Session 02 - Markup (HTML)
Code Examples

• Example 2.1 - p element
  Example 2.1
  Codepen - Example 2.1
  <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>JSFiddle - Example 2.1
• Example 2.2 - div element
  Example 2.2
  Codepen - Example 2.2
  <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 {margin: 1.5em; padding: 2em; color: white; background-color: green;} div.part2 { color: purple; margin: 1em; padding: 2em; border: medium solid purple;} div.part3 { background-color: orange; margin: 0.5em; padding: 1em; font-size: smaller;}JSFiddle - Example 2.2
• Example 2.3 - Unordered List
  Example 2.3
  Codepen - Example 2.3
  <ul><li>Tea</li><li>Bread</li><li>Cheese</li><li>Chips</li><li>Ice Cream</li></ul>JSFiddle - Example 2.3
• Example 2.4 - Nested Unordered List
  Example 2.4
  Codepen - Example 2.4
  <ul><li>Tea <ul><li>Kenya</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>JSFiddle - Example 2.4
• Example 2.5 - Ordered List
  Example 2.5
  Codepen - Example 2.5
  <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>JSFiddle - Example 2.5
• Example 2.6 - Description Lists (terms and definitions or details)
  Example 2.6
  Codepen - Example 2.6
  <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>JSFiddle - Example 2.6
• Example 2.7 - span element
  Example 2.7
  Codepen - Example 2.7
  <div class="citation"><span class="author">Berners‐Lee, Tim</span>. <span class="title"><a href="https://canvas.harvard.edu/courses/111899/files/search?preview=15509429">We Need a Magna Carta for the Internet</a></span><span class="journal">New Perspectives Quarterly</span> 31.3 (2014): 39-41. Web.</div>.citation .journal { font-style: italic; } .citation span.title::before { content: '"';} .citation span.title::after { content: '." ';}JSFiddle - Example 2.7
• Example 2.8 - Using br for line breaks
  Example 2.8
  Codepen - Example 2.8
  <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>JSFiddle - Example 2.8
• Example 2.9 - img element
  Example 2.9
  Codepen - Example 2.9
  <img src="https://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/>JSFiddle - Example 2.9
• Example 2.10 - 'img' element with an anchor
  Example 2.10
  Codepen - Example 2.10
  <a href="https://extension.harvard.edu/"><img src="https://cscie12.dce.harvard.edu/images/harvard-extension-school-shield.png" alt="Harvard University Extension School Shield" height="330" width="287"/></a>JSFiddle - Example 2.10