نريد أن نعمل كود لموقع بسيط
أول شي نفتح محرر أكواد حتى نكتب أكواد بسهولة
Windows: visual studio code
Android: trbe edit
أول شي نفتح محرر أكواد حتى نكتب أكواد بسهولة
Windows: visual studio code
Android: trbe edit
نريد أن نعمل كود برمجه يشمل موقع تسجيل الدخول
بأكواد لغة برمجة : HTML &PHP
HTML
PHP
بأكواد لغة برمجة : HTML &PHP
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تسجيل الدخول</title>
</head>
<body>
<h2>تسجيل الدخول</h2>
<form action="login.php" method="post">
<label for="username">اسم المستخدم:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">كلمة المرور:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="تسجيل الدخول">
</form>
</body>
</html>PHP
<?php
// كود للتأكد من وجود بيانات تم إدخالها
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
// هنا يمكنك إضافة كود للتحقق من بيانات المستخدم من قاعدة بيانات أو مصفوفة
// كمثال بسيط:
$valid_username = "admin";
$valid_password = "password"; // تأكد من تغيير كلمة المرور
if ($username === $valid_username && $password === $valid_password) {
echo "مرحبًا بك، " . htmlspecialchars($username) . "!";
} else {
echo "اسم المستخدم أو كلمة المرور غير صحيحة.";
}
}
?>نريد أن نعمل كود برمجه يشمل موقع تسجيل الدخول
بأكواد لغة برمجة : HTML &PHP
بأكواد لغة برمجة : HTML &PHP
HTML
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تسجيل الدخول</title>
</head>
<body>
<h2>تسجيل الدخول</h2>
<form action="login.php" method="post">
<label for="username">اسم المستخدم:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="password">كلمة المرور:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="تسجيل الدخول">
</form>
</body>
</html>PHP
<?php
// كود للتأكد من وجود بيانات تم إدخالها
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
// هنا يمكنك إضافة كود للتحقق من بيانات المستخدم من قاعدة بيانات أو مصفوفة
// كمثال بسيط:
$valid_username = "admin";
$valid_password = "password"; // تأكد من تغيير كلمة المرور
if ($username === $valid_username && $password === $valid_password) {
echo "مرحبًا بك، " . htmlspecialchars($username) . "!";
} else {
echo "اسم المستخدم أو كلمة المرور غير صحيحة.";
}
}
?>HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html> .
The HTML document itself begins with <html> and ends with </html> .
The visible part of the HTML document is between <body> and </body>.
All HTML documents must start with a document type declaration: <!DOCTYPE html> .
The HTML document itself begins with <html> and ends with </html> .
The visible part of the HTML document is between <body> and </body>.
HTML
اختصار لـ Hyper Text Markup Language
لغة HTML هي لغة الترميز القياسية لإنشاء صفحات الويب
يصف HTML بنية صفحة الويب
يتكون HTML من سلسلة من العناصر
تُخبر عناصر HTML المتصفح بكيفية عرض المحتوى
تقوم عناصر HTML بتسمية أجزاء المحتوى مثل "هذا عنوان"، "هذه فقرة"، "هذا رابط"، إلخ.
شرح المثال
يُحدد الإعلان
العنصر
يحتوي العنصر
يحدد هذا
يحدد هذا
يُعرّف هذا
يُعرّف هذا
يُحدد الإعلان
<!DOCTYPE html>أن هذا المستند هو مستند HTML5العنصر
<html>هو العنصر الجذر لصفحة HTMLيحتوي العنصر
<head>على معلومات وصفية حول صفحة HTMLيحدد هذا
<title>العنصر عنوانًا لصفحة HTML (والذي يظهر في شريط عنوان المتصفح أو في علامة تبويب الصفحة).يحدد هذا
<body>العنصر جسم المستند، وهو عبارة عن حاوية لجميع المحتويات المرئية، مثل العناوين والفقرات والصور والروابط التشعبية والجداول والقوائم وما إلى ذلك.يُعرّف هذا
<h1>العنصر عنوانًا رئيسيًا كبيرًايُعرّف هذا
<p>العنصر فقرةStart tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
محررات HTML
تعلم لغة HTML باستخدام المفكرة أو محرر النصوص
يمكن إنشاء صفحات الويب وتعديلها باستخدام برامج تحرير HTML الاحترافية.
ومع ذلك، لتعلم لغة HTML نوصي باستخدام محرر نصوص بسيط مثل Notepad (لأجهزة الكمبيوتر الشخصية) أو TextEdit (لأجهزة Mac).
نعتقد أن استخدام محرر نصوص بسيط هو طريقة جيدة لتعلم لغة HTML.
اتبع الخطوات التالية لإنشاء صفحة الويب الأولى الخاصة بك باستخدام برنامج المفكرة أو محرر النصوص.
الخطوة 1: افتح برنامج المفكرة (على الكمبيوتر الشخصي)
ويندوز 8 أو أحدث:
افتح شاشة البدء (رمز النافذة في أسفل يسار الشاشة). اكتب المفكرة .
ويندوز 7 أو الإصدارات الأقدم:
افتح قائمة ابدأ > البرامج > البرامج الملحقة > المفكرة
الخطوة 1: افتح برنامج TextEdit (نظام ماك)
افتح Finder > التطبيقات > TextEdit
قم أيضًا بتغيير بعض الإعدادات لضمان حفظ التطبيق للملفات بشكل صحيح. في الإعدادات > التنسيق > اختر "نص عادي".
ثم ضمن "فتح وحفظ"، حدد المربع الذي يقول "عرض ملفات HTML كشفرة HTML بدلاً من نص منسق".
ثم افتح مستندًا جديدًا لوضع الكود.
الخطوة الثانية: كتابة بعض أكواد HTML
اكتب أو انسخ كود HTML التالي في برنامج المفكرة:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>مفكرة
الخطوة 3: حفظ صفحة HTML
احفظ الملف على جهاز الكمبيوتر الخاص بك. اختر ملف > حفظ باسم من قائمة المفكرة.
قم بتسمية الملف "index.htm" وقم بتعيين الترميز إلى UTF-8 (وهو الترميز المفضل لملفات HTML).
عرض في المتصفح
ملاحظة: يمكنك استخدام امتداد الملف .htm أو .html. لا فرق بينهما؛ الأمر متروك لك.
الخطوة الرابعة: عرض صفحة HTML في متصفحك
افتح ملف HTML المحفوظ في متصفحك المفضل (انقر نقرًا مزدوجًا على الملف، أو انقر بزر الماوس الأيمن - واختر "فتح باستخدام").
ستكون النتيجة مشابهة إلى حد كبير لما يلي:
عرض في المتصفح
محرر W3Schools الإلكتروني - "جرب بنفسك"
باستخدام محررنا المجاني عبر الإنترنت، يمكنك تعديل كود HTML وعرض النتيجة في متصفحك.
إنها الأداة المثالية عندما تريد اختبار التعليمات البرمجية بسرعة. كما أنها تتميز بخاصية الترميز اللوني وإمكانية حفظ التعليمات البرمجية ومشاركتها مع الآخرين.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>في لغة HTMLسنعرض في هذا الفصل بعض الأمثلة الأساسية لـ HTML.
لا تقلق إذا استخدمنا علامات لم تتعرف عليها بعد.
مستندات HTML
يجب أن تبدأ جميع مستندات HTML بإعلان نوع المستند:
<!DOCTYPE html>.تبدأ وثيقة HTML نفسها بـ
<html>وتنتهي بـ </html>.الجزء المرئي من مستند HTML يقع بين
<body>و </body>.مثال
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
إعلان <!DOCTYPE>
يمثل هذا
<!DOCTYPE>الإعلان نوع المستند، ويساعد المتصفحات على عرض صفحات الويب بشكل صحيح.يجب أن يظهر مرة واحدة فقط، في أعلى الصفحة (قبل أي علامات HTML).
<!DOCTYPE>لا يراعي هذا الإعلان حالة الأحرف.إعلان
<!DOCTYPE>HTML5 هو:<!DOCTYPE html>عناوين HTML
يتم تعريف عناوين HTML باستخدام علامات
<h1><to> <h6>.<h1>يُحدد العنوان الأكثر أهمية. <h6>يُحدد العنوان الأقل أهمية: مثال
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>فقرات HTML
يتم تعريف فقرات HTML باستخدام
<p>الوسم التالي:مثال
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>روابط HTML
يتم تعريف روابط HTML باستخدام
<a>الوسم التالي:مثال
<a href="https://www.w3schools.com">This is a link</a>يتم تحديد وجهة الرابط في
hrefالخاصية. تُستخدم السمات لتوفير معلومات إضافية حول عناصر HTML.
ستتعرف على المزيد حول السمات في فصل لاحق.
صور HTML
يتم تعريف صور HTML باستخدام
<img>الوسم.يتم توفير ملف المصدر (
src)، والنص البديل ( alt)، widthو heightكسمات:مثال
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">كيفية عرض مصدر HTML
هل سبق لك أن رأيت صفحة ويب وتساءلت "مهلاً! كيف فعلوا ذلك؟"
عرض كود المصدر HTML:
اضغط على CTRL + U في صفحة HTML، أو انقر بزر الماوس الأيمن على الصفحة واختر "عرض مصدر الصفحة". سيؤدي هذا إلى فتح علامة تبويب جديدة تحتوي على كود مصدر HTML للصفحة.
فحص عنصر HTML:
انقر بزر الفأرة الأيمن على عنصر (أو مساحة فارغة)، ثم اختر "فحص" لمعرفة مكونات العناصر (ستظهر لك كل من HTML وCSS). يمكنك أيضًا تعديل HTML أو CSS مباشرةً من لوحة العناصر أو الأنماط التي ستظهر.