DEV Community

Khushi Thakuri
Khushi Thakuri

Posted on

Introduction to HTML and CSS

<!DOCTYPE html>



HTML Sandbox



Heading with a h1 tag


Heading with h2 tag


Heading with h3 tag


Heading with h4 tag


Heading with h5 tag

Heading with h6 tag
   <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>

*ABOUT PAGE
*

<!DOCTYPE html>





About page



My About Page



  • Home

  • About




  • This is about section


    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?




    • Item one
    • Item two



    Copyright © 2022; All Rights Reserved




    ** EXTERNAL CSS**

    <!DOCTYPE html>





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



    Intro Page





    Button

    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!

              <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>
    

    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;
    }

    Top comments (0)