HTMLFull Course

Tutorial Video

⭐مُشاهدة الكورس كامل على اليوتيوب⭐

What is HTML?
  • HTML stands for Hyper Text Markup Language.
  • HTML describes the structure of a Web page.
  • هى لغة تصف مُحتويات الموقع إلى المُتصفح
How to learn HTML?

👉 Download TyporaTutorial video

👉 Google Translate for chrome

⭐ All HTML Elements
👉 <h1> Hello World </h1>: HTML Element
  1. <h1>: Start tag
  2. Hello World: المُحتوى الذى يظهر فى الموقع
  3. </h1>: End tag
HTML Tags Ordered Alphabetically
HTML Tagالإستخدام
1<a>هذا الوسم يُستخدم لعمل الروابط
2<abbr>هذا الوسم يُستخدم عندما نريد كتابة اختصار
3<address>هذا الوسم يُستخدم عندما نريد إضافة معلومات التواصل مع صاحب المقالة او الموقع
4<area>يستخدم هذا الوسم مع وسم <map> ووسم <img > وذلك لتحديد مساحة داخل صورة و عند الضغط على هذه المساحة فكأننا ضغطنا على لينك
5<article>يستخدم هذا الوسم عند عمل مقالة ويكون بداخلة العديد من الوسوم
6<aside>يستخدم هذا الوسم لعمل محتوى جانبي للموقع مثل الإعلانات او فهرس لمقالات
7<audio>يستخدم هذا الوسم عندما نريد اضافة مقطع صوتي إلى الصفحة
8<b>يستخدم هذا الوسم عند عمل خط سميك للعنصر bold text
9<base>هذا الوسم يحتوى على لينك أساسي وهذا اللينك الأساسي يكون اللينك الافتراضي للعنصر <a>
10<bdi>هذا الوسم يقوم ب تغيير اتجاه المحتوى الذي بداخله
11<bdo>هذا الوسم يُستخدم عندما نريد تغيير اتجاه المحتوى الذي بداخله
12<blockquote>يستخدم هذا الوسم عندما نريد إضافة اقتباس من مصدر اخر
13<body>يكون بداخلة المحتوى الذي يظهر لزائر الصفحة
14<br>يستخدم عندما نريد الكتابة من سطر جديد
15<button>يستخدم عند عمل زر
16<canvas>يستخدم لعمل الرسومات وغالبا بال JavaScript
17<caption>دائما يستخدم مع وسم <table> لعمل شرح اعلى الجدول
18<cite>يستخدم عند إضافة عمل قام به شخص
19<code>يستخدم عندما نريد اظهار الاكواد البرمجية ك اكواد في صفحة الويب
20<col>يكون دائما داخل عنصر <colgroup> وذلك لتنسيق الاعمدة
21<colgroup>يكون بداخله وسم <col> ويستخدم لتنسيق الاعمدة
22<data>يُستخدم هذا الوسم لإضافة بيانات للعنصر وهذه البيانات تكون غير مرئية للمُستخدم العادي
23<datalist>يستخدم مع وسم <option> وذلك ل وضع قيم مُعينة فقط داخل حقل ادخال <input>
24<dd>تستخدم مع وسم <dl> ووسم <dt> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها.
25<del>يستخدم عندما يكون المُحتوى بداخل هذا الوسم تم حذفة مسبقا
26<details>هذا الوسم دائما يكون بداخله وسم <summary> يُستخدم لإظهار او إخفاء المُحتوى
27<dfn>والمُحتوى بداخل هذا الوسم يكون تقريبا كلمة او كلمتين يتم شرحهم بعد ذلك في الجملة القادمة.
28<dialog>يُستخدم هذا الوسم لعمل dialog box وترجمتها نافذة فرعية
29<div>نستخدم هذا الوسم عندما نريد وضع بداخله عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS
30<dl>تستخدم مع وسم <dd> ووسم <dt> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها.
31<dt>تستخدم مع وسم <dl> ووسم <dd> وهذه العناصر الثلاثة تُستخدم معا عندما يكون لدينا قائمة من العناصر نُريد وصفها.
32<em>المحتوى بداخل هذا الوسم يكون محتوى مهم عن باقي النص بالإضافة انه يكون ذو خط مائل
33<fieldset>يستخدم هذا الوسم دائما داخل وسم < form> لوضع مجموعة من العناصر ذات الصلة بداخله.
34<figcaption>هذا الوسم دائما يكون داخل وسم <figure> وذلك لوضع جملة توضيحية اسفل الصورة
35<figure>هذا الوسم يكون بداخلة وسم <figcaption> ووسم <img> وذلك لوضع صورة في الموقع وتريد ان تَكتب جُملة توضيحية أسفل هذه الصورة
36<footer>هذا الوسم يستخدم لعمل الجزء السفلى من الصفحة او الموقع
37<form>يستخدم هذا الوسم لعمل نموذج لحقول الادخال
38<h1 : h6>يستخدم هذا الوسم لتحديد عناوين الصفحة
39<head>هذا الوسم يحتوي على معلومات خاصة بالصفحة ولكن لا تظهر بشكل مباشر للمُستخدم العادي
40<header>يستخدم هذا الوسم لعمل عنوان للصفحة او عنوان لمقال
41<hr>هذا الوسم يستخدم للفصل بين فقرتين بخط أفقي
42<html>هذا الوسم يحتوي على جميع وسوم لغة html ماعدا طبعا <!DOCTYPE html>
43<i>المحتوى بداخل هذا الوسم يكون بخط مائل italic
44<iframe>يستخدم لعمل إطار في الصفحة
45<img>يستخدم هذا الوسم عندما نُريد ادراج صورة في الموقع
46<input>يستخدم هذا الوسم داخل عنصر ال <form> لعمل حقل ادخال لبيانات المُستخدم
47<ins>المُحتوى بداخل هذا العنصر تم إضافته وذلك بوضع خط أسفل المُحتوى الذي بداخل هذا العنصر
48<kbd>ونستخدم هذا الوسم عندما نريد كتابة امر من اومر الكيبورد
49<label>يستخدم هذا الوسم مع عنصر <input> لوضع شرح توضيحي لحقل الادخال
50<legend>يستخدم هذا الوسم داخل وسم <fieldset> وذلك لإضافة عنوان توضيحي لهذه المجموعة
51<li>يستخدم هذا الوسم داخل وسم <ol> او <ul> لإضافة قائمة من الاشياء
52<link>To link an external css file or to add a favicon
53<main>هذا الوسم يكون بداخلة العديد من العناصر التي تُحدد المحتوى الأساسي للصفحة.
54<map>يستخدم هذا الوسم مع وسم <area> ووسم <img> وذلك لتحديد مساحة داخل صورة و عند الضغط على هذه المساحة فكأننا ضغطنا على لينك
55<mark>المحتوى بداخل هذا الوسم يكون ذو خلفية بلون مميز
56<meta>هذا الوسم هو المسئول عن إضافة معلومات للصفحة وهذه المعلومات لا تظهر لزائر الصفحة
57<meter>يستخدم هذا الوسم لعرض بيانات قابلة للقياس في نطاق معين (range)
58<nav>هذا الوسم يحتوي على العديد من الروابط
59<noscript>المحتوى بهذا الوسم يظهر فقط عندما يكون المتصفح لا يدعم اكواد لغة JavaScript
60<ol>تستخدم مع وسم <li> وذلك لعمل قائمة مرقمة او مرتبة
61<optgroup>هذا الوسم يكون بداخله وسم <option> وهو يُعتبر عنوان لمجموعة من الاختيارات
62<option>هذا الوسم غالبا ما يُستخدم داخل عنصر <datalist> وعنصر <select> وذلك لعمل drop-down list
63<output>يستخدم هذا الوسم لإظهار نتائج عملية حسابية.
64<p>يُستخدم هذا الوسم لعمل فقرة داخل مقال.
65<picture>يُستخدم هذا الوسم إذا كان لدينا صورتان او أكثر؛ مثلا إذا كان لدينا صورتان وأردنا ظهور الصورة الأولى في حالة الشاشات الصغيرة مثل الموبايل ولكن في حالة الشاشات الكبيرة لا نريد اظهار الصورة الأولى ولكن اظهار الصورة الثانية بدلا منها
66<pre>المحتوى الذي بداخل هذا الوسم يكون تم تنسيقة مسبقا
67<progress>يستخدم هذا الوسم لعمل ال progress bar
68<q>يستخدم لعمل اقتباس قصير
69<s>المُحتوى بداخل هذا الوسم كان صحيحا ولكن في الماضي
70<samp>تُستخدم هذا الوسم لعرض عينه من مُخرجات برنامج كمبيوتر
71<script>هذا الوسم يكون بداخله اكواد لغة JavaScript
72<section>يستخدم هذا الوسم لتقسيم الصفحة إلى اقسام
73<select>هذا الوسم يكون بداخله وسم <option> وذلك لعمل قائمة منسدلة drop-down list
74<small>المُحتوى داخل هذا العنصر يكون بخط أصغر عن بقية النص
75<source>دائما يُستخدم هذا الوسم داخل وسم ال <video> او وسم ال <audio> إذا كان لدينا امتدادين او أكثر مختلفين لنفس الملف الصوتي او الفيديو
76<span>نستخدم هذا الوسم عندما نريد وضع بداخله عناصر سوف نقوم بتنسيقهم بواسطة لغة CSS
77<strong>يستخدم عندما يكون لدينا سطر او جملة مهمه
78<style>يكون بداخلة اكواد لغة CSS وذلك لتنسيق الوسوم
79<sub>المُحتوى داخل هذا العنصر يكون بخط منخفض عن بقية النص
80<summary>هذا الوسم دائما يكون داخل وسم <details> لإظهار واخفاء المحتوى الذي بداخله
81<sup>المُحتوى داخل هذا العنصر يكون مرتفع عن بقية النص
82<svg>هذا الوسم يمكننا من عمل الرسومات داخل الموقع
83<table>هذا الوسم يستخدم لعمل الجدول
84<tbody>هذا الوسم يكون بداخلة الجزء الأساسي من الجدول وبالتالي يكون داخل وسم ال <table>
85<td>هذا الوسم هو المسؤول عن إضافة خلية جديدة داخل الجدول وبالتالي يكون داخل وسم ال <table>
86<template>جميع محتويات هذا الوسم تكون مخفيه ولا تظهر لزائر الموقع مباشرة
87<textarea>يُستخدم هذا الوسم عندما تريد من زائر الموقع ادخال نص طويل متعدد الاسطر.
88<tfoot>هذا الوسم يكون بداخلة الجزء السفلى من الجدول وبالتالي يكون داخل وسم ال <table>
89<th>هذا الوسم هو المسؤول عن إضافة العنوان (الجزء العلوي) داخل الجدول وبالتالي يكون داخل وسم ال <table>
90<thead>هذا الوسم يكون بداخلة الجزء العلوي من الجدول وبالتالي يكون داخل وسم ال <table>
91<time>هذا الوسم يُستخدم عندما نريد اظهار وقت
92<title>هذا الوسم يُستخدم لتحدد عنوان الصفحة
93<tr>هذا الوسم هو المسؤول عن إضافة صف جديد داخل الجدول وبالتالي يكون داخل وسم ال <table>
94<track>يُستخدم هذا الوسم عند عمل ترجمة لمقطع فيديو وتظهر اثناء تشغيل الفيديو مثل فيديوهات اليوتيوب كده.
95<u>نستخدم هذا الوسم لوضع خط تحت المُحتوى الذي بداخله.
96<ul>تستخدم مع وسم <li> وذلك لعمل قائمة غير مرتبة من الاشياء
97<var>نستخدم هذا الوسم عندما يكون لدينا معادلة رياضية
98<video>يُستخدم هذا الوسم عندما نريد إضافة فيديو داخل الموقع.
99<wbr>يُستخدم هذا الوسم عندما تكون الكلمة طويلة جدا ونخشى ان هذه الكلمة تخترق المساحة التي بداخلها
100<--...--!>هذا الوسم يستخدم لكتابة شرح للكود داخل الملف ولكن لا يظهر لزائر الصفحة
101<!DOCTYPE html>هذا ليس وسم html وانما هو معلومة للمتصفح عندما يقوم بقراءة الاكواد لكي يَعلم ان الاكواد التالية هي اكواد خاصة بلغة html
⭐ HTML Elements By Category
Basic HTML Elements

👉 HTML Exercises

TagDescription
<!DOCTYPE html>Defines the document type
<html>Defines an HTML document
<title>Contains information for the document
<title>Defines a title for the document
<body>Defines the document's body
<h1 : h6>Defines HTML headings
<p>Defines a paragraph
<img>Defines an image
<a>Defines a hyperlink
<header>Defines a header for a document
<main>Specifies the main content of a document
<footer>Defines a footer for a document
<section>Defines a section in a document
<article>Defines an article
<br>Inserts a single line break
<hr>Defines a thematic change in the content
<--...--!>Defines a comment
Images / Audio / Video
TagDescription
<img>Defines an image
<picture>Defines a container for multiple image resources
<source>Defines multiple media resources for media elements (<video>, <audio> and <picture>)
<audio>Defines sound content
<video>Defines a video or movie
Links / Lists
TagDescription
<a>Defines a hyperlink
<nav>Defines navigation links
<ul> <li>Defines an unordered list
<ol> <li>Defines an ordered list
<dl> <dt> <dd>Defines a description list
Tables
TagDescription
<table>Defines a table
<tr>Defines a row in a table
<td>Defines a cell in a table
<caption>Defines a table caption
<thead> <tbody> <tfoot>header content - body content - footer content
Forms and Input
TagDescription
<form>Defines an HTML form for user input
<input>
<input type="password" >
crtl + SPACE
  • email
  • password
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • file
  • hidden
  • image
  • month
  • number
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
<label>Defines a label for an <input> element
<button>
  • button
  • submit
  • reset
<textarea>Defines a multiline input control (text area)
<select> <option>Defines a drop-down list
Other HTML elements
TagDescription
<iframe>To create a nested webpage
<details> <summary>To specifies additional details that the user can open and close
<dialog>To create a popup dialogs on a web page.
HTML Void Elements

Void Element is an empty element that has no content.

TagDescription
<br>Inserts a single line break
<hr>Defines a thematic change in the content
<img>Defines an image
<input>Defines an input control
<source>Defines multiple media resources for media elements (<video>, <audio> and <picture>)
<meta>Defines metadata about an HTML document
<link>To link an external css file or to add a favicon
Void elements
in headelement
TagDescription
<link>To link an external css file OR to add a favicon
<title>Defines a title for the document
<meta>Defines information about an HTML document
<head>Contains metadata/information for the document

👉 🔥 HTML Exercises

Block Elements VS Inline Elements

👉 A block-level element always starts on a new line.

👉 A block-level element always takes up the full width

👉 Some inline elements in HTML :

  1. <a>
  2. <span>
  3. <button>
  4. <img>
  5. <input>
  6. <label>
  7. <code>

👉 All inline elements

Programming symbols
الرمز البرمجيالاسمالاختصار
:colonshift + ك
;semicolonك
" "quotation markshift + ط
,commaو
-hyphenshift -
{ }curly bracketsshift+ج
[ ]square bracketsج
/slash/
( )parenthesisshift + 9
!exclamation markshift + 1
` `backticksذ
_Underscoreshift -
HTML Emojis
codeEmoji
&#128525;😍
&#128293;🔥
&#128514;😂
&#128070;👆
&#128071;👇
&#128072;👈
&#128073;👉
&#128522;😊
&#128526;😎
&#128536;😘
&#128546;😢
&#128515;😃
&#128527;😏
&#128530;😒
&#128532;😔
&#128541;😝
&#128545;😡
&#129300;🤔
&#128548;😤
&#128579;🙃
&#129299;🤓
&#129305;🤙
&#129505;🧡
&#128170;💪
&#128163;💣
&#128156;💜
&#128155;💛
&#128154;💚
&#128153;💙
&#128149;💕
&#128139;💋
&#128127;👿
&#128077;👍
&#128078;👎
&#11088;⭐
&#10060;❌
&#10004;✔
&#10006;✖
&#128076;👌
&#128521;😉
&#9995;✋
Emoji Unicode Reference
HTML interview Question
  1. What is HTML ?
  2. What are Global Attributes in HTML?

    The global attributes are attributes that can be used with all HTML elements, for example: lang, dir, title, Class, id, style and data-**

  3. What is the difference between class and id ?
    class="value"id="value"
    يُمكننا إضافة أكثر من قيمة لنفس العنصر.ال id مثل رقم البطاقة الشخصية وبالتالي كل عنصر له قيمة id واحده مميزه عن الأخرى.
    يُمكننا إضافة نفس القيمة إلى أكثر من عنصر.ولا يُمكن إضافة نفس قيمة ال id إلى أكثر من عنصر.
    عند تنسيق العنصر في لغة CSS فإن قيمته تبدا ب .عند تنسيق العنصر في لغة CSS فإن قيمته تبدا ب شباك #
  4. Explain the layout of HTML ?
  5. Is the <!DocType html> considered as tag?
  6. what is Case-sensitive ?
  7. HTML element vs tag vs attribute ?
  8. What is void element ?
  9. Block-level vs inline elements ?
  10. div vs span elements ?
  11. When are comments used in HTML ?
  12. How to create a nested webpage ?
  13. What is semantic in HTML ?
  14. purpose of using alt attribute in images ?
  15. Does a hyperlink only apply to text ?

    يُمكننا إستخدام الصورة كـ لينك 👈
    <a href="https://courses4arab.com/">
      <img src="logo.png">
    </a>

    يُمكننا الانتقال لقسم اخر فى نفس الموقع 👈
    <a href="#test"> الذهاب للاسفل </a>

    <p id="test"> Hello World </p>

    يُمكننا إنشاء لينك يسمح بإرسال ايميل 👈
    <a href="mailto:someone@example.com"> إرسال ايميل </a>

    يُمكننا إنشاء لينك يسمح بالإتصال 👈
    <a href="tel:+2010123456789"> اتصال </a>

  16. How to limit the text field inside the form ?
  17. How do you create a text on a webpage that allows you to send an email when clicked ?
  18. How many types of CSS can be included in html ?
  19. How to display code as code in html ?
How to Deploy a Website(FREE) نشر الموقع
👉 Download nodejs
👉 Firebase Hosting

👉 Test your website before Deployment use: firebase serve

😡
انت مشغل الـ AdBlock !!

ياريت تقفله لوسمحت 😊 😊

تنبيه هام ✋

إذا كانت الإعلانات مزعجة بالنسبة لك، فيُمكنك التبرع ب50$ وسيتم إيقاف الإعلانات لمدة شهر لجميع زوار الموقع 🧡 ويُمكنك التواصل معنا عن طريق صفحة الفيس بوك