html

2023-08-18 17:41:10 +09:00
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>