في المثال أعلاه src داخل الوسم <img> هو سمة (Attributes)ومسار الصورة المقدمة هو قيمة السمة (value).
ايضا href داخل الوسم <a> هي سمة (Attributes) والرابط المقدم هو قيمته (value)، وهكذا.
ايضا href داخل الوسم <a> هي سمة (Attributes) والرابط المقدم هو قيمته (value)، وهكذا.
لبرمجة بداية صفحة ال 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>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
نريد أن نعمل كود لموقع بسيط
أول شي نفتح محرر أكواد حتى نكتب أكواد بسهولة
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>