Introduction to HTML and CSS
Published: 2023-04-09 16:54:27

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML Sandbox
        </title>
    </head>
    <body>
       <h1>Heading with a h1 tag</h1>
       <h2>Heading with h2 tag</h2>
       <h3>Heading with h3 tag</h3>
       <h4>Heading with h4 tag</h4>
       <h5>Heading with h5 tag</h5>
       <h6>Heading with h6 tag</h6>

       <hr>

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, enim fugiat 
        culpa placeat quis mollitia dignissimos? Soluta quo, quod laborum inventore odit 
        hic porro sit aperiam sapiente deserunt, velit error?</p>

        <hr>

        <a href="http://google.com"target="_blank">click me</a>

        <ul>
            <li>List Item One</li>
            <li>List Item One</li>
            <li>List Item One</li>
        </ul>

        <ol>
            <li>List Item One</li>
            <li>List ITem ONe</li>
        </ol>
          
        <p>This word is going to be <strong>bold</strong></p>
        <p> This word is going to be <em>itallics</em></p>
        <p>This word is going to be <mark>highlight</mark></p>
        <p>This word id going to be <sub>subscript</sub></p>
        <p>This word is going to be <small>small</small></p>
        <p>This word is going to be <u>underline</u></p>
        <p>This word is going to be <sup>superscript</sup></p>

        <hr>
        <strong>This text is bold</strong>
        <em>This text is itallic</em>
        <u>This text is underlined</u>

        <hr>

        <!-- LINE BREAKS: Self closing and use <br> -->
        <!-- Lines to seperate your content <hr> : Self Closing -->

        <!-- Grouping Element <div> -->
        

        <div>
            <h1>This is come text</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Cumque accusamus nam nisi beatae commodi, natus deleniti aliquid,
                  molestiae ullam perferendis nobis officia odio id distinctio dolorum!
                Optio aliquam id illo?</p>
        </div>

        <!--CLASSES AND ID's: Identify a group of elements for multiple purpose  -->
        <hr>
        <div class="hello">
        <h1>Hello</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni nam corporis error minus.
             Dolorum possimus libero, quasi magni minus nam ea! Ipsum neque 
            obcaecati odio necessitatibus deleniti at sapiente explicabo!</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia deleniti officia 
                ipsa nobis unde perferendis cumque natus praesentium non. 
                Nam inventore minima magni atque debitis qui architecto quaerat. Ipsa, eligendi.</p>
        </div>

        <div id="hello -2">
            <h1>Hello</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat explicabo ipsa 
                doloremque facilis quisquam nihil animi dolorem, porro inventore neque delectus repudiandae ullam
                 obcaecati molestias veniam deleniti! Eos, quis perferendis.</p>
             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, non? Eius tempore ipsa ab 
                atque impedit, accusamus quam excepturi magni asperiores. Voluptate itaque repudiandae
                 facilis minima. Non eius illo at.</p>    
        </div>

        <hr>
        <!-- Blog Article -->
        <div class"article">
            <h3>some Title</h3>
            <small>Posted by: Name</small>
            <p>
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque recusandae nulla 
                32assumenda doloribus corrupti saepe, unde illo eum quasi autem corporis reiciendis 
                nobis nisi eligendi nam deleniti natus vitae blanditiis.
            </p>
            <a href="#">Learn More</a>
        </div>

        <br>
        <hr>

        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Smith</td>
                    <td>123-456-789</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>tom</td>
                    <td>987-989-345</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>harry</td>
                    <td>678-456-344</td>
                </tr>
            </tbody>
        </table>

        <!-- buttons  -->
        <button>Click</button>
        <button disabled>Disabled</button>
        <button reset>Reset</button>

        <hr>
        <!-- FROM -->
        <form>
            <lable>First Name</lable>
            <br>
            <input type="text" placeholder="Enter first Name (xxxx)">
            <br>
            <br>
            <label for="Email">Email</label>
            <br>
            <input type="email" required>
             <br>
             <input type="submit" value="Submit" >

             <!-- Form Select List -->
             <select>
                <option value="" disabled selected>--Select--</option>
                <option value="">option one</option>
                <option value="">option two</option>
                <option valur="">option three</option>
             </select>
            <br>
            <br>
             <label for="Message">Message</label>
             <br>
             <textarea></textarea>
             <br>
             <br>

             <input type="submit" value="Submit">
        </form>

        <br>

        <!-- images -->
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRhze-QNnca2liBrhRj4CjswGZSkqbhvSDJsQ&usqp=CAU" alt="image of a flower">

        <!-- Navbar -->
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>


        <div style="margin-bottom: 500px"></div>
    </body>
</html>



**ABOUT PAGE
**



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>About page</title>
</head>
<body>
    <header>
        <h1>My About Page</h1>
        <nav>
          <li> <a href="idex.html">Home</a></li>
          <li><a href="about.html">About</a></li>
        </nav>
    </header>
    <section>
        <p>This is about section</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam sequi, 
            enim aspernatur similique voluptate amet assumenda distinctio ab harum, qui error libero.
             Error, dolore minus facere accusantium rerum debitis autem?</p>
    </section>
    <aside>
        <ul>
            <li>Item one</li>
            <li>Item two</li>
        </ul>
    </aside>
    <footer>
        <p>Copyright &copy; 2022; All Rights Reserved</p>
    </footer>
</body>
</html>



** EXTERNAL CSS**


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Sandbox</title>

    <link rel="stylesheet" href="../css/intro.css">

    
</head>
<body>
    <header class="main-header" id="headerMain" >
      <div class="header">
         <h1>Intro Page</h1>
      </div>
    </header>
    <section>
        <button>Button</button>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque provident architecto modi reiciendis deserunt,
             illo asperiores laborum dolorum et veniam cupiditate? Id harum odio corrupti, dicta laboriosam ut
              corporis amet!</p>

              <form>
                <label for="First Name">First Name</label>
                <input type="text" placeholder="Enter First Name">

                <label for="Last Name">Last Name</label>
                <input type="text"placeholder="Enter Last Name">

                <label for="Email">Email Address</label>
                <input type="email"placeholder="Enter Email Address">

                <input type="submit" value="Submit" class="button">
              </form>

              <table>
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tom</td>
                        <td>Smith</td>
                    </tr>
                    <tr>
                        <td>John</td>
                        <td>Roll</td>
                    </tr>
                </tbody>
              </table>
    </section>
</body>
</html>

**REFERENCE LINK**


*{
    margin:0;
    padding:0;
}

body {
    font-family: sans-serif;
}

.header{
    background-color: red;
    color:white; 
    padding: 20px;
}
button{
    margin-top: 10px;
    margin-top: 10px;
    padding: 10px 20px;
    border: 1px solid transparent;
    background: #333;
    color:azure;
    border-radius: 5px;
    cursor: pointer;
    transition: all 1s;
    display: block;
}

.button:hover {
    background: transparent;
    color:black;
    border: 1px solid black;
}

form {
    margin: 10px;
    margin-top: 20px;

}

form label {
    display: block;
    margin: 5px 0;
}

from input[type="text"],
input[type="email"] {
    padding: 7px 1px;
    margin: 3px 0;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ccc;

}
table{
    width: 100%;
    border: 1px soild #333;
    margin:auto;
}

table td, th {
    background-color: #f4f4f4;
}

table th {
    border-bottom: 1px solid #333;
}