progaurab · progaurab · May 8, 2024 · Apr 29, 2024 · Apr 29, 2024 · May 1, 2024
diff --git a/README.md b/README.md
@@ -1,2 +1,15 @@
+# Git Commands
+- git clone https://github.com/progaurab/html-css-js-tutorial.git
+- git add .
+- git commit -m "minor fixes"
+- git push
+
+
+
 # ex01-dark-mode-calculator
-# ex02-
+# ex02-
+------------------------------------
+# HTML Tags
+- cite: 
+- abbr: 
+- 
diff --git a/css-training/ex09-css-grid-layout/index.html b/css-training/ex09-css-grid-layout/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        .grid-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr); /* Create 3 equal columns */
+            gap: 20px; /* Add spacing between grid items */
+        }
+
+        .grid-item {
+            background-color: #f2f2f2;
+            padding: 20px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="grid-container">
+        <div class="grid-item">1</div>
+        <div class="grid-item">2</div>
+        <div class="grid-item">3</div>
+        <div class="grid-item">4</div>
+        <div class="grid-item">5</div>
+        <div class="grid-item">6</div>
+    </div>
+</body>
+</html>
diff --git a/css-training/ex09-css-grid-layout/index2.html b/css-training/ex09-css-grid-layout/index2.html
diff --git a/html-training/ex01-dark-mode-calculator/dark.css b/html-training/ex01-dark-mode-calculator/dark.css
@@ -50,7 +50,7 @@ input {
 }
 
 input[type="text"] {
-    background-color: rgb(47, 51, 50);
+    background-color: rgb(255, 255, 255);
 }
 
 input[type="button"]:hover {

diff --git a/html-training/ex08-basic-html-tags/01-document-summary.html b/html-training/ex08-basic-html-tags/01-document-summary.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Learning HTML</title>
+    </head>
+    <body>
+
+    </body>
+</html>
diff --git a/html-training/ex08-basic-html-tags/02-document-information.html b/html-training/ex08-basic-html-tags/02-document-information.html
diff --git a/html-training/ex08-basic-html-tags/03-document-summary.html b/html-training/ex08-basic-html-tags/03-document-summary.html
@@ -0,0 +1,9 @@
+<html>
+  <head>
+    <meta charset="Utf-8" />
+    <base href="http://www.google.com" target="_blank" />
+    <title>my first website</title>
+    <link href="http:www.gmail.com" />
+  </head>
+  <body></body>
+</html>
diff --git a/html-training/ex08-basic-html-tags/04-document-summary.html b/html-training/ex08-basic-html-tags/04-document-summary.html
@@ -0,0 +1,15 @@
+<html>
+    <head>
+        <title>fourth exe</title>
+
+    </head>
+    <body>
+        <div>
+            <h1>first heading</h1>
+            <p> paraghaph of the page</p>
+            <hr/>
+            <h2>second heading</h2>
+            <p> paraghaph starts here <br/>this is a new line</p>
+        </div>
+    </body>
+</html>
diff --git a/html-training/ex08-basic-html-tags/05-document-summary.html b/html-training/ex08-basic-html-tags/05-document-summary.html
@@ -0,0 +1,16 @@
+<html>
+    <head>
+        <title>2 page</title>
+    </head>
+    <body>
+        <strike>strike this line</strike>
+        <i>archana</i>
+        <blockquote>let me check how the block quotes work</blockquote>
+        <abbr>del</abbr>
+
+        <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
+
+        <p><abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
+
+    </body>
+</html>
diff --git a/html-training/ex08-basic-html-tags/06-document-summary.html b/html-training/ex08-basic-html-tags/06-document-summary.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>More Tags</title>
+  </head>
+  <body>
+    <p>
+      <dfn><abbr title="Cascading Style Sheet">CSS</abbr></dfn
+      >is a language that describe the style of an HTML document.
+    </p>
+    <address>1025 Hill wood road minosota pin-19229</address>
+    <code> if(i=0;i<5;i++) { y=i+5; } </code>
+    <p>This text contains subscript text X<sub>2</sub></p>
+    <p>This text contains superscript text y<sup>8</sup></p>
+    <small> this is small text</small><br />
+    <strong>This text is strong</strong><br />
+    <b>This text is bold</b><br />
+    <em>This text is emphasis text</em><br />
+    <i>italic text here</i><br />
+  </body>
+</html>
diff --git a/html-training/ex08-basic-html-tags/07-document-summary.html b/html-training/ex08-basic-html-tags/07-document-summary.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <a href="http://www.google.com">google</a>
+  <a href="mailto:someone@gmail.com"> send a mail</a>
+  <a href="tel:+425-566-5492">425-566-5492</a>
+  <a href="#section2">go to section 2</a>
+  <p>Images:</p>
+  <img
+    src="https://cdn.photographylife.com/wp-content/uploads/2014/09/Nikon-D750-Image-Samples-2.jpg"
+    alt="Mountain View"
+    height="200"
+    weight="200"
+    style="vertical-align: middle"
+    usemap="#workmap"
+  />
+  <map name="workmap">
+    <area shape="rect" coords="0,0,60,100" href="http:\\www.google.com" />
+  </map>
+</html>
diff --git a/html-training/ex08-basic-html-tags/08-document-summary.html b/html-training/ex08-basic-html-tags/08-document-summary.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+  <header>
+    <title>Lists</title>
+  </header>
+  <body>
+    <h2>Animal List</h2>
+    <ol>
+      <li>Cat</li>
+      <li>Dog</li>
+      <li>Lion</li>
+      <li>Tiger</li>
+    </ol>
+    <h2>Grocery List</h2>
+    <ul>
+      <li>Milk</li>
+      <li>Bread</li>
+      <li>onion</li>
+    </ul>
+    <h2>Definition List for Car Types</h2>
+    <dl>
+      <dt>Toyota</dt>
+      <dd>Japanes car brand</dd>
+      <dt>Armani</dt>
+      <dd>Italian fashion brand</dd>
+    </dl>
+    <h2>Forms:</h2>
+    <form action="form-submit.php" method="post">
+      <fieldset>
+        <legend>Bio:</legend>
+        First name:<br />
+        <input
+          type="text"
+          name="first-name"
+          value="archana"
+          placeholder="please enter your first name:"
+        /><br />
+        Last name:<br />
+        <input
+          type="text"
+          name="Last-name"
+          value="Boll"
+          placeholder="please enter your Last name here"
+        /><br />
+        <br />
+        favorite sports:<br />
+        <select>
+          <option value="soccerr">soccer</option>
+          <option value="tennis">tennis</option>
+          <option value="golf">golf</option>
+        </select>
+        <textarea name="description"></textarea>
+        <input type="submit" value="submit" />
+      </fieldset>
+    </form>
+  </body>
+</html>
diff --git a/html-training/ex08-basic-html-tags/09-document-summary.html b/html-training/ex08-basic-html-tags/09-document-summary.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Tables</title>
+  </head>
+  <body>
+    <table border="2">
+      <caption>
+        table about fav fruit
+      </caption>
+      <tr>
+        <th>person</th>
+        <th>fav fruit</th>
+      </tr>
+      <tr>
+        <td>Eesha</td>
+        <td>blueberry</td>
+      </tr>
+      <tr>
+        <td>Sreesha</td>
+        <td>Oranges</td>
+      </tr>
+    </table>
+  </body>
+</html>
diff --git a/html-training/ex08-basic-html-tags/10-document-summary.html b/html-training/ex08-basic-html-tags/10-document-summary.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <body>
+        <h2>Table 2</h2>
+        <table border="1">
+            <colgroup>
+                <col span="2">
+            </col>
+            </colgroup>
+            <tr>
+                <th>Name</th>
+                <th>School</th>
+                <th>grade</th>
+            </tr>
+            <tr>
+                <td>Eesha</td>
+                <td>Lance Thomson elementry</td>
+                <td>2nd Grade</td>
+            </tr>
+            <tr>
+              <td>Sreesha</td>
+              <td>Ridge School</td>
+              <td>Kinder garden </td>
+            </tr>
+        </table>
+        <iframe src="https://www.google.com" title="w3school online tutorial for Learning">
+
+        </iframe>
+
+    </body>
+
+</html>
diff --git a/html-training/ex08-basic-html-tags/11-document-summary.html b/html-training/ex08-basic-html-tags/11-document-summary.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+    <header>HTML NEW Tags</header>
+    <footer>This is the End</footer>
+    <main> This is the main Content of the Web page</main>
+    <article>This is used for creating Article</article>
+
+</html>