acbrent25
9/2/2017 - 11:45 AM

Basic HTML Markup including Doctype, head, meta, body, h1, img, br, strong, ul, ol, tables, iframe

Basic HTML Markup including Doctype, head, meta, body, h1, img, br, strong, ul, ol, tables, iframe

HTML Basics.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>

<body>

  <!-- Headline -->
  <h1>Hello World!</h1>

  <!-- Image -->
  <img src="http://en.spongepedia.org/images/thumb/3/33/Spongebob!!!.jpg/180px-Spongebob!!!.jpg" alt="Spongebob!" />
  <br>

  <!-- Link with New Tab -->
  <a href="https://www.google.com" target="_blank">Opens new tab</a>
  <br>

  <!-- Bold Link -->
  <strong><a href="https://www.youtube.com">This is a bold link</a></strong>
  <br>

  <!-- Placeholder link -->
  <a href="#">This is a placeholder link, goes no where, for now</a>

  <hr>

  <h1>Bonus</h1>

  <!-- Ordered List (numbered 1 to 4) -->
  <h2>Ordered list</h2>
  <ol>
    <li>Get Bread</li>
    <li>Get PB and J </li>
    <li>Smother PB and J on said Bread</li>
    <li>Eat</li>
  </ol>

  <!-- Unordered List (bullet pointed) -->
  <h2>Unordered List</h2>
  <ul>
    <li>Britney Spears</li>
    <li>Rihanna</li>
    <li>Spice Girls</li>
    <li>Christina</li>
    <li>Rage Against the Machine</li>
  </ul>

  <!-- Table -->
  <h2>Table</h2>
  <table style="width: 100%">

    <!-- Row 1 -->
    <tr>
      <th>Animal Class</th>
      <th>Animal Name</th>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td>Mammal</td>
      <td>Hyena</td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td>Reptile</td>
      <td>Iguana</td>
    </tr>

    <!-- Row 4 -->
    <tr>
      <td>Mammal</td>
      <td>Chimpanzee</td>
    </tr>

    <!-- Row 5 -->
    <tr>
      <td>Bird</td>
      <td>Eagle</td>
    </tr>

  </table>

  <h2>Youtube</h2>

  <!-- iframe element -->
  <iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com" frameborder="0" ></iframe>

</body>

</html>