كود تصميم واجهه موقع باستخدام html

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

في هذا المقال ، سنتطرق إلى بعض أهم أكواد HTML التي يجب على كل مطور ويب أن يعرفها:

1. تاج الرأس (Head Tag):

تاج الرأس في HTML هو مكان للوصول إلى بعض البيانات المتعلقة بصفحة الويب مثل عنوان صفحة الويب ووصفها والكلمات الرئيسية المستخدمة في صفحة الويب وملفات CSS و JavaScript.

حيث يبدأ العنوان بعلامة <head> وينتهي بعلامة </head>.

2. علامة الفراغ (Whitespace):

علامة الفراغ في HTML تستخدم لتخطي الفراغات الزائدة في النص وإظهار النص بشكل مرتب.

3. تاج الصفحة (Body Tag):

تاج الجسم في HTML يحتوي على جميع محتويات صفحة الويب مثل النصوص والصور والفيديوهات والروابط والقوائم والجداول والنماذج.

حيث يبدأ الجسم بعلامة <body> وينتهي بعلامة </body>.

4. تاج العناوين (Heading Tags):

تاجات العناوين في HTML تستخدم لترتيب المحتوى بشكل منظم من العنوان الأكبر إلى الأصغر.

وتنتمي تاجات العنوان من H1 إلى H6، حيث أن تاج H1 هو الأكبر بينما تاج H6 هو الأصغر.

5. الفقرات (Paragraphs):

تلعب فقرات HTML دورًا مهمًا في صفحات الويب. فهي تستخدم لعرض النص بشكل تنظيمي بحيث يمكن توجيه القارئ إلى المحتوى الرئيسي.

6. تاجات الصور (Image Tag):

تستخدم تاجات الصور في HTML لإدراج الصور في صفحات الويب. وتمكن مطوري الويب من تعيين عناصر مثل حجم الصورة وتحديد النص البديل للصورة.

7. تاجات الروابط (Link Tags):

تستخدم تاجات الروابط في HTML لإضافة روابط لصفحات الويب أو لأية عناصر أخرى على الويب.

8. تاجات الجداول (Table Tags):

تتيح تاجات الجداول في HTML إنشاء الجداول في صفحات الويب. وتمكن المطورين من تنظيم البيانات في الجدول وتعيين حجم الصفوف والأعمدة.

9. تاجات النماذج (Form Tags):

تأتي نماذج HTML في مختلف الأشكال والأساليب وتعتمد على وظائف مختلفة مثل استطلاعات الرأي والاشتراك في النشرات الإخبارية.

وتمكن تاجات النماذج المطورين من إنشاء حقول نموذج تتراوح من حقول النص إلى حقول التحقق من الصحة وأزرار الإرسال.

هذه هي بعض الأكواد HTML الأساسية التي يتعين على المطورين الويب الاطلاع عليها وتعلمها لتصميم صفحات ويب مرتبة ومنظمة.

كيفية عمل كود تصميم واجهه موقع باستخدام

html

<!DOCTYPE html>

<html>

<head>

<title>عنوان الموقع</title>

</head>

<body>

<nav>

<ul>

<li><a href="#">الصفحة الرئيسية</a></li>

<li><a href="#">خدماتنا</a></li>

<li><a href="#">تواصل معنا</a></li>

</ul>

</nav>

<h1>عنوان الموقع</h1>

<p>وصف الموقع</p>

</header>

<main>

<h2>عنوان القسم الأول</h2>

<p>نص القسم الأول</p>

</section>

<h2>عنوان القسم الثاني</h2>

<p>نص القسم الثاني</p>

</section>

</main>

</footer>

</body>

</html>

ويمكنك تغيير محتوى الصفحة وأسلوب التصميم باستخدام ملف CSS (style.css)، وكذلك استخدام لغات أخرى مثل JavaScript لإضافة ميزات إضافية.

نصيحة اون لاين

القائمة الرئيسية

الصفحات

كود تصميم واجهه موقع باستخدام html

تعليقات

إرسال تعليق