Tuesday, 8 February 2022

TUT10 (Ids and Class)

 <!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>Ids and classes in HTML</title>
</head>
<body>
    <H3>Ids and classes tutorial</H3>
    <div id="mainBox class="redBg blackBorder">
    This is Mainbox
    </div>
    <span class="redBg"></span>
    <!-- Emmet -->
    <!-- .is for class and # is for id -->
    <span class="redBg"></span>
    <span id="mainspan"></span>
    <div class="redBg blackborder anotherClass"></div>
   
    <!-- Emmet takes div tag as default -->
    <div class="blackbackground"></div>

    <!-- creating multiple elements using Emmet -->
<!-- span#myclass.myclass2.myclass3*4 + <Tab> -->
   <span id="myclass" class="myclass2 myclass3">First</span>
  <span id="myclass" class="myclass2 myclass3">Second</span>
  <span id="myclass" class="myclass2 myclass3">Third</span>
  <span id="myclass" class="myclass2 myclass3">Forth</span>


</body>
</html>





at No comments:

TUT 9 (Inline and Block Elements)

 <!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>Inline and Block elements</title>
</head>
<body>
    <strong style="border: 2px solid red;"">This is a Paragraph</strong><p style="border: 2px solid blue;"">This is also a Paragraph</p>
    <p style="border: 2px solid red;"">This is a Paragraph</p><p style="border: 2px solid blue;"">This is also a Paragraph</p>
<span style="border: 2px solid green;"">This is Span</span> <span style="border: 2px solid pink;"">This a also Span</span>
<a style="border: 2px solid red;"">This is a Paragraph</a><a style="border: 2px solid blue;"">This is also a Paragraph</a>

</body>
</html>



at No comments:

TUT8 (Forms)

<!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>Forms</title>
</head>
<body>
    <h2>This is HTML Forms Tutorial</h2>
<form action="backend.php">
    <label for="Name"> Name</label>
    <div>
         <input type="text" name="myname" id="name">
    </div>
    <br>
<div>
    Role: <input type="text" name="myrole">
</div>
<br>
<div>
Email: <input type="email" name="My Email">
</div>
<br>
<div>
    Date: <input type="date" name="my date">
</div>
<br>
<div>
    Bonus: <input type="number" name="mybonus">
</div>
<br>
<div>
    Are you Eligible?: <input type="checkbox"
name="myeligibilty" checked>
</div>
<br>
<div>
    Gender: Male <input type="radio" name="mygender">
Female <input type="radio" name="mygender"> Others
<input type="radio" name="mygender">  
</div>
<br>
<div>
    Write about yourself: <br> <textarea name="mytext"
cols="60" rows="10"></textarea>
</div>
<br>
<div>
<label for="car">Car</label>
<select name="myCar" id="car">
    <option value="ind" selected>Indica</option>
    <option value="swf">Swift</option>
    <option value="inn">Innova</option>
</select>
</div>
<br>

<div>
    <input type="submit" value="Submit Now">
    <input type="reset" value="Reset Now">
</div>
</form>
</body>
</html>


at No comments:

TUT6 (Links and Images)

 <!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>Links and Images</title>
</head>
<body>
    <a href="https://google.com"target="_blank">Go to Google</a> <br>
    <a href="https://twitter.com"target="_blank">Go to Twitter</a> <br>
    <a href="https://facebook.com"target="_blank">Go to Facebook</a> <br>
    <a href="https://linkedin.com"target="_blank">Go to Linkedin</a> <br>
    <a href="/tut5.html"target="_blank">tut5</a> <br>

<img src="D:\Complete Web Develop Bootcamp/Zoya.jpg.jpg" alt="Error Loading Images" srcset="">
   

</body>
</html>
at No comments:

TUT7 (Tables and Lists)

 <!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>Tables and Lists</title>
</head>
<body>
  <ul type="square">
      <li>This is first item of my unordered Lists</li>
      <li>This is Second item of my unordered Lists</li>
      <li>This is Third item of my unordered Lists</li>
      <ul type="circle">
          <li>another list</li>
      </ul>
  </ul>
  <ol type="a">
    <li>This is first item of my ordered Lists</li>
    <li>This is Second item of my ordered Lists</li>
    <li>This is Third item of my ordered Lists</li>
</ol>

<!-- Table -->
<h3>HTML Table</h3>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Employee Id</th>
            <th>Employee Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Zoya</td>
            <td>34345</td>
            <td>Programmer</td>
        </tr>
        <tr>
            <td>Wajid</td>
            <td>34346</td>
            <td>Hairdresser</td>
        </tr>
        <tr>
            <td>Sameer</td>
            <td>34348</td>
            <td>Junior</td>
        </tr>

    </tbody>
</table>
</body>
</html>









at No comments:

TUT5

 <!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>Heading Paragraphs and Emmet</title>
</head>
<body>
<h1>Zoya</h1>
<h2>Zoya</h2>
<h3>Zoya</h3>
<h4>Zoya</h4>
<h5>Zoya</h5>
<h6>Zoya</h6>
<p>This is Zoya</p>
<!-- Lorem23 for 23 Words dummy text with 23 Words  -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus qui atque eos mollitia ab ducimus! Fugit, inventore <Strong>This is Strong</Strong> et ut ad aperiam, <em>This is emphasized</em> modi aut omnis excepturi <b>Bold is here</b>quo a? Cumque nulla commodi <i>Italic is here</i> distinctio mollitia dolor.</p>
<p>First <br><br>This is a new Line
</p>
<hr>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>This is a Paragraph</p>
<!-- ctrl + enter to jump into the new line -->
</body>
</html>
at No comments:

ZOYA TUT4

 <!-- <!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">
    <meta name="description" content="This is description">
    <meta name="keywords" content="html tutorials, web development">
    <meta name="robots" content="INDEX, FOLLOW">
    <title>Zoya Wajid</title>

<!-- This is how you include external css -->
    <link rel="stylesheet" href="Zoya.css">

    <!-- This is how you inculde external JavaScript -->
    <script src="Zoya.js"></script>
</head>
<body>
    Hi Chips Love you Chips Miss u Chips
</body>
</html>
at No comments:
Subscribe to: Posts (Atom)

TUT 44 (CSS GRID - 3)

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...

  • TUT 44 (CSS GRID - 3)
      <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...
  • TUT43 (CSS GRID- 2)
      <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...
  • TUT40 (CSS Grid Tutorial)
      <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < met...