html

2 years ago · 4b22c80371
parent 57f132cdc9
commit 4b22c80371
1 changed files with 120 additions and 0 deletions
--- a/CSS/test.html
+++ b/CSS/test.html
@ -0,0 +1,120 @@
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8" />
    <title>Titile of this document</title>
    <style>
      thead {
        background-color: skyblue;
      }
      tbody {
        background-color: darkseagreen;
      }
      tfoot {
        background-color: yellowgreen;
      }
      table,
      th,
      td {
        border: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <h1>
      <b><i>Lorem ipsum</i></b> dolor sit amet, consectetur adipiscing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </h1>
    <strong>enim ad minim veniam,</strong>
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.<br />
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit anim id est laborum.
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <img
      src="https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-256.png"
      alt="image"
      width="100"
      height="100"
    />
    <a href="https://www.google.com">Go Google!</a>
    <a href="https://www.google.com" target="_blank">Go Google! (New Page)</a>
    <a href="https://www.google.com" target="_blank">
      <img
        src="https://www.google.com/images/hpp/Chrome_Owned_96x96.png"
        alt="google"
      />
    </a>
    <h1>ol vs. ul</h1>
    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Saving</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jan.</td>
          <td>$100</td>
        </tr>
        <tr>
          <td>Feb.</td>
          <td>$200</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Sum.</td>
          <td>$300</td>
        </tr>
      </tfoot>
    </table>
    <button type="button" onclick="testFunc()">
      <img
        src="https://cdn1.iconfinder.com/data/icons/user-pictures/101/malecostume-256.png"
        alt="image"
        width="30"
        height="30"
      />
    </button>
    <form>
      <label for="fname">First name:</label>
      <input type="text" id="fname" name="fname" /><br /><br />
      <label for="lname">First name:</label>
      <input type="text" id="lname" name="lname" /><br /><br />
      <input type="submit" value="submit" />
    </form>
    <script>
      function testFunc() {
        alert('Call testFunc!');
      }
    </script>
  </body>
 </html>