Web Development | HTML | تطوير و إنشاء مواقع الويب

html structure

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

<head>

       <title>Udemy</title>

       <meta charset ="UTF-8">

       <meta name="description" content="you can buy or sell the cars here 3 lines">

       <meta name ="keywords" content="car,buycar,sell car">

    </head>

<body>

       <p>hello to my website</p>

       <h1>hello to my website</h1> <!-- تستخدم للعنوان-->

       <h2>hello to my website</h2>

        <h3>hello to my website</h3>

        <br> <!-- سطر جديد-->

        <h4>hello to my website</h4>

        <h5>hello to my website</h5>

        <h6>hello to my website</h6>

        <h6>hello to my website</h6>

        <hr> <!--  خط أسود على امتداد الشاشة -->

   </body>

  <p><b><i>welcome to my website</i></b></p>

        <p><b>welcome <del>to my website</del></b></p>

        <p>5³</p>

         <p>H₂O</p>

<a href="https://www.google.com">go to other website</a>

         <a href="mailto:zdbies4@gmail.com">go to email </a>

         <a href="test.html">go to other html file (relativ path)</a>

         <a href="/home/cyber-eto/Desktop/main/test.html">absolute path(absolute path )</a>

     <!--add img  area-->

        <img src = "/home/cyber-eto/Desktop/main/media/Cyber-eto profile.jpg" alt=" this is logo " width="150px" height="150px">

        <img src="../main/media/Facebook Cover.jpg" alt="this is cover pic" width="300px" height="150px">

            <!-- videos area-->

         <video controls>

            <source src= " /home/cyber-eto/Desktop/main/media/mixkit-going-down-a-curved-highway-through-a-mountain-range-41576-medium.mp4" type="video/mp4">

         </video>

     <!-- audio area-->

     <audio controls>

       <source src="/home/cyber-eto/Desktop/main/media/Andre Soueid  greatest hits - Andre Soueid Violin Songs 2019 (128 kbps).mp3"type="audio/mpeg">

     </audio>

<!--Buttton area -->

       <button>sign in</button>

    <!--Lists area -->

<!--unorder list area-->

     <ul>

                 <li>zaid</li>

                 <li>udemy</li>

                 <li> hello </li>

                 <li>   welcome</li>

                 </ul>

     <!-- order list area-->

     <ol>

                 <li>zaid</li>

                 <li>udemy</li>

                 <li> hello </li>

                 <li>welcome</li>

      </ol>

    <!--nested list area-->

       <ul>

        <li class="one">

                               <ul>

                 <li class="three">home</li>

                 <li>about</li>

                 <li>contact </li>

                 <li>section</li>

                             </ul>

                         </li>

                 <li class="one">hello</li>

       </ul>

        <ol>

                 <li>one</li>

                 <li>two

                                   <ul>

                  <li>1</li>

                 <li>2</li>

                               </ul>

                 </li>

                 <li>three</li>

                 <li>four</li>

       </ol>

  <!--Table-->

     <table border="3">

        <tr>

         <th>fruit</th>

         <th>price</th>

         <th>any</th>

       </tr>

       <tr>

         <td>apple</td>

         <td> 1.25 $</td>

         <td>hi</td>

       </tr>

       <tr>

          <td rowspan="2">orange</td>

           <td>5$</td>

           <td>hello</td>

        </tr>

        <tr>

           <th colspan="2">total</th>

            <td>6.25$</td>

        </tr>

     </table>

    <form method="POST" action="#">

    <label> Name:

    <input type="text" name="firstname" placeholder= "please insert your name">

   </label>

     <label> Email :

        <input type="email" name="email" placeholder="ex@gmail.com">

     </label>

     <label> password

     <input type="password" name="password">

     </label>

     <input type="hidden" name="admin" value="hi">

     <input type="submit" value="send ">

<br>

    </form>

<!--   form part 2  -->

  <form methode="POST"action="#">

    <label> what is your gender  ? <br>

        male <input type="radio" name="gender" value="male">

        <br>

       female <input type="radio" name="gender" value="female">

    </label>

    <br><br>

    <label> your fav sport is : <br>

    football<input type="checkbox" name="sport" value="football">

    <br>

    basketball<input type="checkbox" name="sport" value="basketball">

</label>

     <input type="reset" value="restart">

     <label>what is your birthday date ?

     <input type="date" name="birthday ">

    </label>

   </form>

        <label > rate you self in english : <br>

           0 <input type="range" name="Eskill" min="0" max="100" value="50">100

    </label>

    <label >

        <input type="time" name="time">

</label>

<label > 

    <input type="number" name="exp" min="0" max="15" value="0"  step="1">

</label>         

<label >

    <input type="tel" pattern="07/d{8}">

</label>

     <br> <br>

<label> your website :

    <input type="url" name="google">

</label>

<label > what are you looking for

    <input type="search"  >

</label>

<select name="school" >

    <option value="zaid">

            hu

    </option>

    <option value="ahmed">

            JU

    </option>

   <option value ="HIU">

          HIU

    </option>

<!--form part 4 + ID-->

  <textarea cols="80" rows="20" name= " zaid" > </textarea>

</form>

<br> <a href="#one">TOP</a>

<ul>

     <li><a href="#one">Home </li>

</ul>

<div>hi</div>

<div> hello</div>

<span>

   hi

</span>

<span> hello i am new user</span>

<span>

    me too

</span>

<div>hello my name is <span>zaid</span></div>

<header>

    <h1> Welcome to my website</h1>

    </header>

<!--iframe area -->

<section>

   <iframe src="https://www.bing.com" frameborder="2" width="700px" height="450px"></iframe>   

</section>

    <nav>

      <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

      </ul>

    </nav>

   <footer>

    <h2>good bye </h2>

   </footer>

<!-- special symbols-->

    &copy;

    &reg;

    &trade;

    &amp;

    &nbsp;

    &quot;

    &frac12;

    &frac34;

    <div>my name is &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;zaid</div>