إنشاء صفحة بلغة أتش تي أم ال How to Create web page by HTML
Contents
إنشاء صفحة بلغة أتش تي أم ال
لكتابة صفحة بلغة HTML، يمكن اتباع الخطوات التالية:
1-فتح محرر نصوص كالمفكرة (Notepad) أو أي محرر نصوص آخر.
2-البدء بكتابة عنصر HTML الأساسي، وهو <!DOCTYPE html> والذي يشير إلى نوع الوثيقة.
3-بعد ذلك، يجب كتابة بداية ونهاية الصفحة باستخدام عنصري <html> و</html>.
4-ضمن عنصر <html>، يمكن إضافة رأس الصفحة باستخدام عنصر <head>، وضمنه يمكن إضافة عناصر أخرى مثل عنوان الصفحة <title> ووصفها <meta>.
5-يتم كتابة جسم الصفحة ضمن عنصر <body>، حيث يتم وضع المحتوى الذي يراد عرضه على الصفحة.
6-يتم إضافة العناصر اللازمة داخل عناصر الجسم مثل النص <p>، العناوين <h1>–<h6>، الصور <img>، الروابط <a>، وغيرها من العناصر.
7-يمكن حفظ الملف باسم مع تحديد الامتداد .html.
وهذا مثال بسيط على صفحة HTML:l>
<!DOCTYPE html> <html> <head> <title>عنوان الصفحة</title> <meta charset="UTF-8"> <meta name="description" content="وصف الصفحة"> </head> <body> <h1>عنوان رئيسي</h1> <p>هذا هو النص الذي يتم عرضه على الصفحة.</p> </body> </html>
النتيجة :
ما هي العناصر الاساسية لصفحة الاتش تي ام ال
ما هي العناصر الاساسية لصفحة الاتش تي ام ال مع ذكر مثال
هناك العديد من العناصر الأساسية في صفحة الاتش تي ام ال، ومن بينها:
<!DOCTYPE html>: وهو إعلان عن نوع مستند HTML وهو يأتي في بداية كل صفحة HTML.<html>: وهو عنصر رئيسي في صفحة HTML ويتضمن جميع عناصر الصفحة.<head>: وهو العنصر الذي يحتوي على معلومات التعريف بالصفحة مثل العنوان والوصف ورابط التنسيقات الأساسية للصفحة.<title>: وهو عنصر يعرض عنوان الصفحة في شريط المتصفح.<body>: وهو العنصر الذي يحتوي على محتوى الصفحة الرئيسي، ويتضمن عناصر HTML مثل الفقرات والصور والروابط والقوائم.
وفيما يلي مثال على صفحة HTML تحتوي على العناصر الأساسية المذكورة أعلاه:
يمكن اضافة عناصر اخرى الى صفحة HTML ومن أمثلة هذه العناصر:
-
<html>و</html>: يعرفون بداية ونهاية صفحة HTML. -
<head>و</head>: يستخدم لتحديد رأس الصفحة وتحتوي على العناصر التي تحدد معلومات عن الصفحة مثل العنوان والوصف والتعريفات الأخرى. -
<body>و</body>: يستخدم لتحديد جسم الصفحة ويحتوي على جميع عناصر الصفحة مثل النص والصور والروابط والجداول وغيرها. -
<h1>–<h6>: يستخدم لعرض العناوين بأحجام مختلفة، حيث يكون<h1>هو العنوان الرئيسي و<h6>هو العنوان الفرعي. -
<p>: يستخدم لعرض النص بفقرات. -
<img>: يستخدم لعرض الصور، ويتم تحديد موقع الصورة باستخدام الخاصيةsrcويمكن إضافة نص بديل للصورة باستخدام الخاصيةalt. -
<a>: يستخدم لإنشاء روابط إلى صفحات أخرى، ويتم تحديد موقع الصفحة المراد ربطها باستخدام الخاصيةhref.
وهذا مثال على استخدام بعض هذه العناصر:
<!DOCTYPE html>
<html>
<head>
<title>مثال على العناصر الأساسية في صفحة HTML</title>
<meta charset="UTF-8">
<meta name="description" content="مثال على العناصر الأساسية في صفحة HTML">
</head>
<body>
<h1>عنوان رئيسي</h1>
<p>هذا هو النص الذي يتم عرضه في فقرات.</p>
<img src="example.jpg" alt="صورة مثالية">
<a href="http://example.com">رابط مثالي</a>
</body>
</html>
النتيجة :
يمكن استخدام عدة عناصر مختلفة في صفحة HTML لإنشاء صفحة ويب شاملة. وفيما يلي مثال شامل يحتوي على بعض العناصر الأساسية:
<!DOCTYPE html>
<html lang="ar"dir="rtl">
<head>
<title>مثال على صفحة HTML شاملة</title>
<meta charset="UTF-8">
<meta name="description" content="مثال على صفحة HTML شاملة">
<style>
h1 {
color: blue;
}
p {
font-size: 20px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
text-decoration: none;
color: green;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<header>
<h1>عنوان الصفحة</h1>
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">من نحن</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>القسم الأول</h2>
<p>هذا هو النص الذي يتم عرضه في فقرات. هذا هو النص الذي يتم عرضه في فقرات. هذا هو النص الذي يتم عرضه في فقرات.</p>
<img src="ice3.jpg" alt="صورة مثالية">
<a href="#">رابط مثالي</a>
</section>
<section>
<h2>القسم الثاني</h2>
<p>هذا هو النص الذي يتم عرضه في فقرات. هذا هو النص الذي يتم عرضه في فقرات. هذا هو النص الذي يتم عرضه في فقرات.</p>
<img src="ice4.jpg" alt="صورة مثالية">
<a href="#">رابط مثالي</a>
</section>
</main>
<footer>
<p>حقوق النشر © 2023</p>
</footer>
</body>
</html>
النتيجة :
المراجع والمصادر:
- Mozilla Developer Network (MDN) – HTML Introduction:
- W3Schools –
- HTML Tutorial:
- HTML.com:
- Shay Howe’s Learn to Code HTML & CSS:
- HTML Dog:
- Codecademy – Learn HTML: