لغة html


HTML: هي اختصار لـ "Hyper Text Markup Language" وهي لغة برمجة تستخدم لبناء صفحات الويب. تستخدم هذه اللغة لتحديد محتوى صفحة الويب وهي لغة بسيطة وسهلة التعلم.

 اولا انشاء ملف بي اسم index.html ثم قم بي فتح الملف بي اي محرر اكواد ثم اكتب الكود التالي:


<!DOCTYPE html>

<html>

<head>

<title>عنوان صفحتك</title>

</head>

<body>

<!-- يمكن وضع محتوى صفحتك هنا -->

</body>

</html>


      

 الان انت جاهز لبد التعلم اولا كل الاكواد التاليه توضع ما بين <body> و <body/>:



  • <div> هذا هو الرامز يستخدم كثرا جدا وهوا عباره عن حويه تستخدم لحمل الاكواد </div> 

  • ************************
  • ************************
  • استخدم هذا الكود لعمل زر رفع الملفات 

  • <input type="file" name="file" value="اختر صوره"/> 

  • ************************
  • ************************

  • <br/> يستخدم هذا الرمز لنزول الي سطر جديد 

  • ************************
  • ************************
  • <hr/> يستخدم هذا الرمز لعمل خط 

  • ************************
  • ************************
  • <p>هذا النص يتضمن في فقرة واحدة.</p>
  • ************************
  • ************************
  • <img src="image.jpg" alt="وصف الصورة">
  • ************************
  • ************************
  • <a href="https://www.example.com">نص الرابط</a>
  • ************************
  • ************************
  • <ul>
    •   <li>عنصر القائمة الأول</li>
    •   <li>عنصر القائمة الثاني</li>
    •   <li>عنصر القائمة الثالث</li>
  • </ul>
  • ************************
  • ************************
  • <table>
    •   <tr>
      •     <th>عنوان العمود الأول</th>
      •     <th>عنوان العمود الثاني</th>
    •   </tr>
    •   <tr>
      •     <td>محتوى الصف الأول في العمود الأول</td>
      •     <td>محتوى الصف الأول في العمود الثاني</td>
    •   </tr>
    •   <tr>
      •     <td>محتوى الصف الثاني في العمود الأول</td>
      •     <td>محتوى الصف الثاني في العمود الثاني</td>
    •   </tr>
  • </table>
  • ************************
  • ************************
  • <video controls>
    •   <source src="video.mp4" type="video/mp4">
    •   /*Your browser does not support the video tag.*/
  • </video>
  • ************************
  • ************************
  • <audio controls>
    •   <source src="audio.mp3" type="audio/mpeg">
    •   /*Your browser does not support the audio tag.*/
  • </audio>
  • ************************
  • ************************

  • <iframe   src="مسار الصفاحة التي تريد استدعاها"></iframe>

  • ************************
  • ************************
  • <form method="post">
  •   <label for="name">الاسم:</label>
  •   <input type="text" id="name" name="name">
  •    <br><br>
  •   <label for="email">البريد الإلكتروني:</label>
  •   <input type="email" id="email" name="email">
  •    <br><br>
  •   <label for="message">الرسالة:</label>
  •   <textarea id="message" name="message"></textarea>
  •   <br><br>
  •   <input type="submit" value="إرسال">
  • </form>

  • ************************
  • ************************
  • <select>
    •   <option value="apple">Apple</option>
    •   <option value="banana">Banana</option>
    •   <option value="orange">Orange</option>
    •   <option value="grape">Grape</option>
  • </select>
  • ************************
  • ************************
  • /* مثال اذا كونت تريد انشاء اختيرات متعدده*/
  • <label>
    •   <input type="radio" name="gender" value="male">
    •   Male
  • </label>
  • <label>
    •   <input type="radio" name="gender" value="female">
    •   Female
  • </label>

اخيرا يمكنك تعلم لغة html بسهول هذه مجرد امثله وشكرا لقراة المقال 😁

إرسال تعليق

أحدث أقدم

نموذج الاتصال