HTML من الصفر قم بإحترف بناء المواقع بإستخدام

ابدأ رحلتك في عالم تطوير الويب خطوة بخطوة مع شروحات عربية مبسطة، أمثلة واقعية، وتمارين عملية تغنيك عن أي مصادر معقدة

Created byMohamed Ramadan

Last updated 5/2025

Arabic

What you'll learn

إتقان جميع الوسوم الأساسية والمتقدمة في HTML، مع فهم استخدام كل وسم في المواقف الحقيقية.
استخدام الوسوم الدلالية لكتابة صفحات منظمة وسهلة الفهم لكل من المستخدم ومحركات البحث.
إضافة عناصر وسائط متعددة (صور، فيديو، صوت) والتحكم بها باستخدام خصائص HTML.
استخدام HTML في إنشاء بنية صفحات ويب متوافقة مع معايير الوصول (Accessibility).
تصميم نماذج احترافية باستخدام خصائص مثل required، pattern، autocomplete، وdatalist.
معرفة الأدوات والتقنيات الحديثة مثل <dialog>، <details>، <summary>، وفهم متى يتم استخدامها.
تحضير ملفات HTML بطريقة منظمة تسمح بدمج CSS وJavaScript لاحقًا بسهولة.
التعامل مع الأكواد المترابطة (inline، block، وinline-block) وتأثيرها على التخطيط العام للصفحة.
استخدام التعليقات وأفضل الممارسات لكتابة كود نظيف وسهل الصيانة.
فهم المفاهيم المرتبطة بـ SEO من خلال HTML مثل استخدام <meta> و<title> و<alt>.
Understand the structure of HTML and how to build web pages using semantic elements.
Use common HTML tags to create headings, paragraphs, lists, links, images, and multimedia content.
Implement semantic elements like <section>, <article>, <aside>, and <nav> to improve page accessibility and SEO.
Utilize advanced HTML tags such as <abbr>, <bdi>, <bdo>, <details>, and <summary> to enhance user experience and content clarity.
Master all standard HTML5 elements, including lesser-known tags such as <dialog>, <template>, <meter>, and <progress>, and understand when and how to use them.
Apply real-world use cases of HTML by building accessible, SEO-friendly, and responsive page structures using semantic and multimedia tags.
Understand the relationship between HTML and browser rendering, and how proper structure impacts accessibility tools like screen readers.
Learn advanced form controls and attributes (like autocomplete, novalidate, inputmode, pattern, datalist, etc.) to create user-friendly, validated input systems
Work with embedded content such as iframes, audio, video, SVG, and canvas, and understand the trade-offs and performance considerations.
Understand how to organize HTML for collaboration with CSS frameworks and JavaScript libraries to prepare for dynamic web applications.

Course content

9 sections • 105 lectures • 10h 52m total length

مقدمة ونظرة عامة على الدورة8:40
لماذا هذه الدورة ستجعلك عملاق في لغة ال HTML6:14
بنية المشروع وإنشاء أول مشروع10:24
تحميل وتثبيت برنامج كتابة الأكواد VSC3:40
فتح المشروع داخل محرر الأكواد VSC2:42
كودك الأول في عالم برمجة الويب9:19
بنية صفحة ال html4:23
parent and child element - الأب والأبناء4:49
وضع المتصفح جنبا الى جنب مع محرر الأكواد3:13
h1-h6 العناوين3:24
paragraph, zoom in, and zoom out4:07
What is HTML, CSS, and Javascript? اللغات الأساسية لبناء صفحات الويب4:40
تدريب عملي 1

b, strong, inline, and block elements2:41
italic3:05
br, em, small, and tab button5:14
auto save, meta refresh, and live server8:35
del, ins, u, sub, sup, and mark6:13
comments4:48
hr - الخط الأفقي1:38
عمل مشروع جديد من البداية7:45
كتابة وسم داخل وسم وتنظيم الكود5:55
what is attributes, title, class, and id3:27
abbr, and dfn5:22
لماذا نتعلم كل هذه الأوسمة؟ وأهميتها بالنسبة لتصدر محركات البحث3:05
bdi, bdo, dir, ltr, and rtl5:19
blockquote, and q4:02
pre, and code4:48
var, kbd, and samp5:31
meter, and progress8:17
cite, address, wbr, and time5:49
template1:50
ruby, rt, rp3:19
del and s1:21
تدريب عملي 1
تدريب عملي 2
تدريب عملي 3
تدريب عملي 4
تدريب عملي 5
تدريب عملي 6
Section 2 Project

table, caption, thead, tbody, tfoot, th, and td طريقة عمل الجدول بالكامل10:50
width, border, and align2:04
colspan1:51
inline style, text-align, color, and font-weight - وضع بعض التنسيقات6:07
style the parent تنسيق الأب وتوريث التنسيقات للأبناء4:42
هل يجب كتابة جميع أجزاء الجدول؟0:59
rowspan, and colspan5:53
colgroup, col, span, and style - تظليل عمود في الجدول بلون مختلف3:29
colspan more than 21:59
تدريب عملي 1
تدريب عملي 2
Section 1, 2, 3, and 4 Test

form, input, type, text, email, and password ماهو الفورم وما هي أهم أنواعه؟5:02
some input attributes, placeholder, name, label, id, and for3:50
clear and clean code, autofocus, submit, value الكود الواضح وزر إرسال وأهمية تسم7:54
all inputs types جميع أنواع حقول الإدخال16:56
required, minlength, and maxlength - إنشاء فورم جديد ج112:58
min, max, and step - إنشاء فورم جديد ج27:47
إنشاء فورم جديد ج34:37
value, and rest to default value إنشاء فورم جديد ج47:45
date, min, max, and value for input type date - إنشاء فورم جديد ج55:55
readonly - إنشاء فورم جديد ج61:17
checkbox, value, checked إنشاء فورم جديد ج710:19
radio, value, checked إنشاء فورم جديد ج77:45
textarea, rows, and cols إنشاء فورم جديد ج85:40
button, types of buttons, formtarget, and disabled إنشاء فورم جديد ج96:54
autocomplete, and size إنشاء فورم جديد ج102:04
select, option, optgroup, label, selected, and multible إنشاء فورم جديد ج1111:29
list, datalist, and option إنشاء فورم جديد ج124:59
pattern, and title إنشاء فورم جديد ج138:04
pattern - أمثلة وشرح لنماذج متعددة للباترن1:26
fieldset, legand, and form إنشاء فورم جديد ج148:06
output, range, and oninput11:48
action, method, get, post, and dialog7:26
dialog, onclick, open, and close dialog6:00
Registration Form Project

a, href, and target5:01
link two pages ربط صفحتين بعضهما البعض6:06
nav, and section - ربط أجزاء الصفحة بقائمة اللينكات13:04
mailto, tel, and javascript inside a11:21
link, rel, and href5:12
img, src, alt, width, height, and loading7:43
figure, img, and figcaption4:02
picture, srcset, media, and width in % - عرض صور مختلفة للهاتف والتاب واللاب11:45
جعل الصورة وعنوان الموقع لينك3:53
استدعاء الصور والملفات من أماكن مختلفة11:08
usemap, map, area, shape, and coords كيف تجعل الصورة تفاعلية وتحدد محتواها20:05
تدريب عملي 1
canvas6:32
svg, circle, rect, line, polygon, and text تصميم أشكال ورسومات قابلة للتكبير11:32
تدريب عملي 2

iframe إضافة ملف أو كتاب ونافذة لموقع داخل الموقع الشخصي8:33
فتح موقع أو ملف داخل ال iframe4:46
audio, controls, autoplay, muted, loop, preload, source, src, and type11:18
video, and poster10:29
track, src, kind, srclang, label, and default إضافة ملف ترجمة11:02
مشروع توضيحي عمل أكثر من ترجمة لفيديو8:51
إضافة فيديو من اليوتيوب أو الفيس بوك إلى موقعي5:12
embed, src, type, object, data, type, param, name, and value5:18
تدريب عملي 1

semantics, header, section, and hgroup ماهي الدلالات ولم نستخدمها6:52
main, article, and footer9:48
aside, style, and script4:34
nav, dialog, details, summary, and data6:53
none semantics elements, div, and span6:14
role, class, itemscope, itemtype, and itemprop تحويل عناصر غير دلالية إلى دلالية8:13
search2:55
aria-label, aria-hidden, and accessibility7:51
تدريب عملي 1
Section 5, 6, 7, and 8 Test

Requirements

لا توجد خبرة سابقة مطلوبة نهائيًا – الكورس موجه للمبتدئين من الصفر تمامًا.
جهاز كمبيوتر أو لابتوب متصل بالإنترنت.
حب التعلُّم، وحماس لتعلم تطوير واجهات المواقع (Front-end).
القدرة على تخصيص وقت ثابت يوميًا أو أسبوعيًا لمتابعة الدروس وتطبيق الأمثلة.

Description

هل ترغب في تعلم HTML بطريقة شاملة تجمع بين الأساسيات والتقنيات المتقدمة لتطوير صفحات ويب احترافية؟
في هذا الكورس، ستتمكن من تعلم HTML من الصفر وحتى الاحتراف! ستكتسب المهارات اللازمة لإنشاء صفحات ويب رائعة، وتنظيم محتوى المواقع، واستخدام HTML بشكل فعال لإنشاء مواقع ديناميكية.

هذا الكورس ليس موجهًا فقط للمبتدئين بل أيضًا لأولئك الذين يريدون تعميق فهمهم والتطور في مجال HTML. سنبدأ من الأساسيات مثل العناصر والسمات والأقسام، وننتقل تدريجيًا إلى المواضيع الأكثر تقدمًا مثل HTML5، والـ SEO (تحسين محركات البحث)، والـ Forms المتقدمة، وكيفية تحسين الأداء باستخدام HTML.

سوف تتعلم كيف تبني بنية قوية لصفحاتك باستخدام HTML5 مع التقنيات المتطورة مثل:

إنشاء العناصر الجديدة في HTML5 مثل <article>, <section>, <nav>, و <footer>.
العمل مع الأشكال Forms باستخدام HTML لجمع البيانات من المستخدمين.
تنظيم وتحسين الأداء باستخدام المكونات المتقدمة مثل semantic elements.
تعلم كيفية استخدام الـ meta tags لتحسين محركات البحث SEO.
فهم كيفية دمج الوسائط المتعددة مثل الصور والفيديو في صفحاتك.
إتقان إضافة الروابط الديناميكية إلى المواقع عبر الـ <a> والأزرار.

ستكتشف أيضًا كيفية التعامل مع HTML بطريقة تضمن لك الاستفادة القصوى من بنية صفحات الويب. نحن لا نركز فقط على كتابة HTML بل نشرح لك كيفية تحسين صفحاتك للأداء وتجربة المستخدم، مما يجعل المواقع التي تبنيها أسرع وأكثر توافقًا مع جميع الأجهزة.

يُعد هذا الكورس الخيار المثالي لأي شخص يرغب في تعلم HTML بشكل كامل، سواء كنت مبتدئًا أو لديك بعض الخبرة وتريد الوصول إلى مستوى أعلى. نقدم لك مزيجًا من الشرح النظري والتطبيق العملي الذي يعزز مهاراتك ويجعل تعلم HTML ممتعًا وفعالًا.

إذا كنت تبحث عن تعلم كيفية بناء صفحات ويب تتسم بالاحترافية والجودة، فهذا الكورس هو المكان المثالي لك. ابدأ الآن لتصبح محترفًا في HTML!

Who this course is for:

للمبتدئين تمامًا الذين يرغبون في دخول عالم تطوير الويب من الصفر.
لأي شخص يريد تعلم HTML وCSS وJavaScript بطريقة مبسطة وعملية.
للطلاب في المدارس أو الجامعات الذين يريدون تقوية مهاراتهم في بناء صفحات الويب.
لمَن يرغب في الانتقال من مرحلة التعلم النظري إلى التطبيق العملي وبناء مشاريع حقيقية.
لأي شخص يريد أساس قوي قبل التعمق في مكتبات أو أُطر عمل مثل React أو Vue أو Angular.

HTML من الصفر قم بإحترف بناء المواقع بإستخدام

What you'll learn

Explore related topics

Course content

Introduction and main tags - مقدمة والعناصر الرئيسية12 lectures • 1hr 6min

Formatting Tags21 lectures • 1hr 38min

Lists - القوائم6 lectures • 12min

tables - الجداول9 lectures • 38min

Forms23 lectures • 2hr 46min

Links and Images13 lectures • 1hr 57min

Adding pdf, website, audio, and video to the website8 lectures • 1hr 5min

Semantics - الدلالات8 lectures • 53min

meta data - معلومات الصفحة والخاتمة5 lectures • 36min

Requirements

Description

Who this course is for: