-
egypt-code ايجيبت كود
2024/05/04
تصميم موقع باستخدام html و css
تصميم موقع باستخدام html و css
الجزء الأول: الهيكل الأساسي للموقع باستخدام HTML
HTML (لغة توصيف النصوص التشعبية) هي لغة البناء الأساسية لصفحات الويب. من خلالها، يتم تحديد هيكل الصفحة ومحتواها.
1. إنشاء صفحة HTML بسيطة
لنبدأ بإنشاء صفحة HTML بسيطة. عند كتابة HTML، نبدأ بفتح ملف نصي جديد ونحفظه بامتداد .html. الهيكل الأساسي لصفحة HTML هو كما يلي:
html
Copy code
<!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>
<h1>مرحبًا بك في موقعي</h1>
<p>هذا موقع بسيط باستخدام HTML.</p>
</body>
</html>
هذا الكود ينشئ صفحة بسيطة تحتوي على عنوان وترحيب. يتم استخدام العلامات (tags) لتحديد محتوى وهيكل الصفحة. على سبيل المثال:
<html>: تحدد بداية صفحة HTML.
<head>: تحتوي على معلومات عن الصفحة مثل العنوان والترميز.
<body>: تحتوي على محتوى الصفحة الذي سيظهر للمستخدم.
2. إضافة المزيد من المحتوى
يمكننا الآن إضافة المزيد من المحتوى إلى الصفحة. على سبيل المثال، لنقم بإضافة قائمة وروابط وصور:
html
Copy code
<body>
<h1>مرحبًا بك في موقعي</h1>
<p>هذا موقع بسيط باستخدام HTML.</p>
<ul>
<li><a href="#">الرابط 1</a></li>
<li><a href="#">الرابط 2</a></li>
<li><a href="#">الرابط 3</a></li>
</ul>
<img src="example.jpg" alt="صورة توضيحية">
</body>
في هذا المثال:
<ul> و<li>: تمثل قائمة غير مرتبة (unordered list).
<a>: عنصر الرابط الذي يربط بصفحة أخرى.
<img>: عنصر الصورة الذي يعرض صورة.
الجزء الثاني: تنسيق الموقع باستخدام CSS
بعد إعداد الهيكل الأساسي باستخدام HTML، ننتقل إلى التنسيق باستخدام CSS.
1. تعريف CSS
CSS (أوراق الأنماط المتتالية) هي اللغة المستخدمة لتنسيق وتجميل صفحات الويب. يمكن تضمين CSS مباشرةً في ملف HTML أو حفظه في ملف منفصل.
2. إدراج CSS في HTML
هناك ثلاث طرق لإدراج CSS في HTML:
تضمين CSS داخليًا باستخدام العلامة <style> داخل <head>:
html
Copy code
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 20px;
}
</style>
</head>
ربط ملف CSS خارجي باستخدام العلامة <link> داخل <head>:
html
Copy code
<head>
<link rel="stylesheet" href="styles.css">
</head>
تضمين CSS inline مباشرة في العنصر باستخدام السمة style:
html
Copy code
<h1 style="color: navy;">مرحبًا بك في موقعي</h1>
3. تنسيق المحتوى
لنستخدم CSS لتنسيق المحتوى السابق:
css
Copy code
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
text-align: center;
}
p {
font-size: 18px;
color: #666;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline;
margin-right: 10px;
}
a {
text-decoration: none;
color: #008cba;
}
img {
display: block;
margin: 20px auto;
max-width: 100%;
}
4. شرح التنسيق:
body: يحدد الخط والخلفية.
h1: يحدد لون العنوان ومحاذاته.
p: يحدد حجم النص ولونه.
ul وli: ينسقان القائمة.
a: ينسق الروابط.
img: ينسق الصورة لتكون في المنتصف ومقيدة بأقصى عرض.
الجزء الثالث: التفاعلية مع CSS
يمكن استخدام CSS لجعل الموقع أكثر تفاعلية باستخدام pseudoclasses وpseudoelements.
1. تنسيق الروابط عند التمرير
css
Copy code
a:hover {
color: #005f7a;
}
هذا الكود يغير لون الروابط عند التمرير عليها.
2. إضافة محتوى باستخدام pseudoelements
css
Copy code
h1::after {
content: " - موقع رائع";
font-size: 16px;
color: #777;
}
هذا الكود يضيف نصًا بعد <h1>.
الجزء الرابع: التصميم المتجاوب مع CSS
يجب أن يكون الموقع متجاوبًا مع الأجهزة المختلفة. يمكن تحقيق ذلك باستخدام وحدات قياس مرنة ووسائط CSS.
1. وحدات القياس المرنة
em وrem: تستخدم لتحديد حجم الخط بناءً على حجم الخط الافتراضي.
%: تستخدم لتحديد العرض أو الارتفاع كنسبة مئوية من العنصر الأب.
2. وسائط CSS
css
Copy code
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
هذا الكود يغير خلفية الموقع عند عرض الصفحة على شاشة أصغر من 600 بكسل.
الخلاصة
تصميم موقع باستخدام HTML وCSS هو عملية ممتعة ومجزية. مع الممارسة، يمكن لأي شخص إنشاء مواقع ويب رائعة وجذابة. تشمل الخطوات الأساسية بناء الهيكل باستخدام HTML، وتنسيق الموقع باستخدام CSS، وإضافة التفاعلية، وجعل الموقع متجاوبًا. كلما زادت مهاراتك في هذه اللغات، زادت قدرتك على إنشاء مواقع ويب مذهلة.
التعليقات