شرح أساسيات html للمبتدئين . ج 2c_html
في هدا الدرس سنستكمل شرح أساسيات لغة تصميم المواقع html في الجزء التاني
إدا لم تتابع الجزء الأول من الدرس يمكنك الرجوع إليه من خلال الرابط التالي...
بسم الله الرحمان الرحيم
السلام عليكم و رحمة الله و بركاته
في هدا الدرس سنستكمل شرح أساسيات لغة تصميم المواقع html في الجزء التاني
إدا لم تتابع الجزء الأول من الدرس يمكنك الرجوع إليه من خلال الرابط التالي
شرح أساسيات html للمبتدئين . ج 1
خلافا للدرس السابق سنركز في هدا الجزء على التصميم و التنسيق الأساسي للصفحة بدلا من المحتويات الداخلية
و من أجل الإستفادة القصوى من هدا الدرس أقترح عليك تخصيص مجلد داخل سطح المكتب لإنشاء جميع الصفحات اللتي سنحتاجها بداخله
طبعا بعد إنشاء الصفحة وحفظها في المجلد ستظهر بهدا الشكل ( يجب إختيار اللاحقة .html لإسم الصفحة )
و يمكن في أي وقت فتح الصفحة عبر محرر النصوص عن طريق الضغط بالزر الأيمن - فتح بإستخدام - notepad++
حتى تكون الصفحة متوافقة مع جميع المعايير و المتصفحات يجب فتح الوسم html و اللدي سيظم بدوره جميع الوسوم و النصوص الأخرى
بعبارة أسهل فإن جميع محتويات الصفحة ستكون بعد <html> و قبل </html>
داخل وسم html سيكون لدينا وسمين رئيسيين و هما head و body أي : الرأس و الجسم
و دعونا نسميهما تباعا ب : منطقة الرأس , منطقة الجسم
منطقة الرأس ستظم التعريفات الخاصة بالصفحة ( سنتعرف عليها في هدا الدرس )
أما منطقة الجسم فهي اللتي ستظم المحتوى الكلاسيكي و اللدي سيظهر في الصفحة
. إدا علمت أن لغة html _ على غرار اللغات البرمجية الأخرى _ لا تعترف بالفراغات المتكرر و لا الأسطر فسيكون بإمكانك كتابة التالي :
بإسم
الله
الرحمان
الرحيم
ليظهر في الصفحة بهدا الشكل:
بإسم الله الرحمان الرحيم
و عليه فيمكنك تعديل النمودج السابق للصفحة لترك مساحة في كل من منطقة الرأس (1) و منطقة الجسم (2) مستخدما زر الرجوع للسطر entrer
عند حفظ الصفحة و إستعراظها في المتصفح ستلاحظ أنها بدون إسم ( عنوان ) و بدون أيقونة
و يظهر في الأعلى إسم الملف index.html مع الرمز الإفتراضي للصفحة ( الكرة الأرضية )
لإظهار عنوان الصفحة بدلا من إسمها في الأعلى نفتح وسم title في منطقة الرأس و نضع العنوان اللدي نريده للصفحة
بهدا الشكل:
لا تنسى الضغط على زر الحفظ بعد كل عملية تعديل حتى يتسنى لك المعاينة على المتصفح
قد تواجه مشكلة في ظهور العنوان باللغة العربية خصوصا إدا كان جهازك أو متصفحك لا يعمل بهده اللغة و بالتالي يمكن أن يظهر العنوان بهدا الشكل
لإصلاح هده المشكلة ما علينا سوى تعيين الترميز الإفتراضي للصفحة إلىwindows-1256 و دلكة بإستخدام وسم meta بهدا الشكل
و ستلاحظ بعدا ظهور العنوان و الكتابة العربية بشكلها الطبيعي
يأتي الدور الآن على الأيقونة ( رمز الكرة الأرضية ) و الدي يظهر إفتراضيا في الأعلى بجانب العنوان
لتعديله ينبغي أولا توفير الأيقونة البديلة و اللتي ستحتاج لإستخدام أحد برامج التصميم لإنشائها
أقترح عليك إرجاء تصميم أيقونة خاصة بك فيما بعد فيمكنك حاليا إستخدام مئات الأيقونات الجاهزة و اللتي يمكنك تحميلها مجانا من الموقع التالي
https://www.favicon-generator.org
بعد إختيارك للأيقونة المناسبة و تحميلها قم بسحبها للمجلد الدي توجد به صفحتك
بعدها قم بإدراج الكود التالي في منطقة الرأس
طبعا مع إستبدال favicon.ico بإسم الأيقونة خاصتك
هناك بعض التوصيفات الأخرى و التي من المهم إدراجها في صفحتك على الرغم من أنك لن تستطيع أنت و لا أي زائر عادي ملاحظة تأتيرها
. هده التعريفات موجهة فقط لمحركات البحث و من خلالها يمكن للمحرك تصنيف موقعك و إدراجه بشكل جيد داخل النتائج المطابقة
سأكتفي في المثال التالي بثلات تعريفات و هي
description
يستخدم لإعطاء وصف أو تعريف قصير للموقع و يكتب كالتالي
و هي الكلمات المفتاحية و اللتي يتمحور موقعك حولها :
author
إسم المالك أو المحرر. و يستخدم للعريف بإسم صاحب الموقع:
تدرج جميع هده التعريفات داخل منطقة الرأس
نأتي الآن لمنطقة الجسم و هي اللتي سندرج بداخلها المحتويات الظاهرة في منطقة التصفح و اللتي رأينا فكرة عن كيفية إنشائها في الدرس السابق
أي نص أو عنصر يتم إدراجه هنا سيكون مرئيا في الصفحة
التوصيفات في style داخل وسم div تتبع لتقنية الأنماط الإنسيابية المعروفة ب css
تعرفنا على جزء بسيط منها في درسنا السابق و ستكون لنا دروس قادمة إن شاء الله في هده التقنية
السلام عليكم و رحمة الله و بركاته
في هدا الدرس سنستكمل شرح أساسيات لغة تصميم المواقع html في الجزء التاني
إدا لم تتابع الجزء الأول من الدرس يمكنك الرجوع إليه من خلال الرابط التالي
شرح أساسيات html للمبتدئين . ج 1
خلافا للدرس السابق سنركز في هدا الجزء على التصميم و التنسيق الأساسي للصفحة بدلا من المحتويات الداخلية
و من أجل الإستفادة القصوى من هدا الدرس أقترح عليك تخصيص مجلد داخل سطح المكتب لإنشاء جميع الصفحات اللتي سنحتاجها بداخله
طبعا بعد إنشاء الصفحة وحفظها في المجلد ستظهر بهدا الشكل ( يجب إختيار اللاحقة .html لإسم الصفحة )
و يمكن في أي وقت فتح الصفحة عبر محرر النصوص عن طريق الضغط بالزر الأيمن - فتح بإستخدام - notepad++
حتى تكون الصفحة متوافقة مع جميع المعايير و المتصفحات يجب فتح الوسم html و اللدي سيظم بدوره جميع الوسوم و النصوص الأخرى
بعبارة أسهل فإن جميع محتويات الصفحة ستكون بعد <html> و قبل </html>
داخل وسم html سيكون لدينا وسمين رئيسيين و هما head و body أي : الرأس و الجسم
و دعونا نسميهما تباعا ب : منطقة الرأس , منطقة الجسم
منطقة الرأس ستظم التعريفات الخاصة بالصفحة ( سنتعرف عليها في هدا الدرس )
أما منطقة الجسم فهي اللتي ستظم المحتوى الكلاسيكي و اللدي سيظهر في الصفحة
. إدا علمت أن لغة html _ على غرار اللغات البرمجية الأخرى _ لا تعترف بالفراغات المتكرر و لا الأسطر فسيكون بإمكانك كتابة التالي :
بإسم
الله
الرحمان
الرحيم
ليظهر في الصفحة بهدا الشكل:
بإسم الله الرحمان الرحيم
و عليه فيمكنك تعديل النمودج السابق للصفحة لترك مساحة في كل من منطقة الرأس (1) و منطقة الجسم (2) مستخدما زر الرجوع للسطر entrer
عند حفظ الصفحة و إستعراظها في المتصفح ستلاحظ أنها بدون إسم ( عنوان ) و بدون أيقونة
و يظهر في الأعلى إسم الملف index.html مع الرمز الإفتراضي للصفحة ( الكرة الأرضية )
لإظهار عنوان الصفحة بدلا من إسمها في الأعلى نفتح وسم title في منطقة الرأس و نضع العنوان اللدي نريده للصفحة
بهدا الشكل:
<title>وهج المعرفة</title>
لا تنسى الضغط على زر الحفظ بعد كل عملية تعديل حتى يتسنى لك المعاينة على المتصفح
قد تواجه مشكلة في ظهور العنوان باللغة العربية خصوصا إدا كان جهازك أو متصفحك لا يعمل بهده اللغة و بالتالي يمكن أن يظهر العنوان بهدا الشكل
لإصلاح هده المشكلة ما علينا سوى تعيين الترميز الإفتراضي للصفحة إلىwindows-1256 و دلكة بإستخدام وسم meta بهدا الشكل
<meta charset="Windows-1256">
و ستلاحظ بعدا ظهور العنوان و الكتابة العربية بشكلها الطبيعي
يأتي الدور الآن على الأيقونة ( رمز الكرة الأرضية ) و الدي يظهر إفتراضيا في الأعلى بجانب العنوان
لتعديله ينبغي أولا توفير الأيقونة البديلة و اللتي ستحتاج لإستخدام أحد برامج التصميم لإنشائها
أقترح عليك إرجاء تصميم أيقونة خاصة بك فيما بعد فيمكنك حاليا إستخدام مئات الأيقونات الجاهزة و اللتي يمكنك تحميلها مجانا من الموقع التالي
https://www.favicon-generator.org
بعد إختيارك للأيقونة المناسبة و تحميلها قم بسحبها للمجلد الدي توجد به صفحتك
بعدها قم بإدراج الكود التالي في منطقة الرأس
<link rel="icon" href="favicon.ico" type="image/x-icon">
طبعا مع إستبدال favicon.ico بإسم الأيقونة خاصتك
هناك بعض التوصيفات الأخرى و التي من المهم إدراجها في صفحتك على الرغم من أنك لن تستطيع أنت و لا أي زائر عادي ملاحظة تأتيرها
. هده التعريفات موجهة فقط لمحركات البحث و من خلالها يمكن للمحرك تصنيف موقعك و إدراجه بشكل جيد داخل النتائج المطابقة
سأكتفي في المثال التالي بثلات تعريفات و هي
description
يستخدم لإعطاء وصف أو تعريف قصير للموقع و يكتب كالتالي
<meta name="description" content="وهج المعرفة , موقع تعليمي تقني">keywords
و هي الكلمات المفتاحية و اللتي يتمحور موقعك حولها :
<meta name="keywords" content="html,css,php,javascript">
author
إسم المالك أو المحرر. و يستخدم للعريف بإسم صاحب الموقع:
<meta name="author" content="azizsoft">
تدرج جميع هده التعريفات داخل منطقة الرأس
نأتي الآن لمنطقة الجسم و هي اللتي سندرج بداخلها المحتويات الظاهرة في منطقة التصفح و اللتي رأينا فكرة عن كيفية إنشائها في الدرس السابق
أي نص أو عنصر يتم إدراجه هنا سيكون مرئيا في الصفحة
التوصيفات في style داخل وسم div تتبع لتقنية الأنماط الإنسيابية المعروفة ب css
تعرفنا على جزء بسيط منها في درسنا السابق و ستكون لنا دروس قادمة إن شاء الله في هده التقنية
<html>
<head>
<title>وهج المعرفة</title>
<meta charset="Windows-1256">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="description" content="وهج المعرفة , موقع تعليمي تقني">
<meta name="keywords" content="html,css,php,javascript">
<meta name="author" content="azizsoft">
</head>
<body>
<div style="background-color:#f1f1f1;
color:#ff0000;
width:250px;
height:50px;
margin:auto;
padding:50px;
text-align:center;
border: 3px solid #e0e0e0;
border-radius: 5px 5px;
font-size:25;
box-shadow: -5px 10px 8px #888888;"
>
نص تجريبي
</div>
</body>
</html>
في أمان الله
aa-- --bb jjjjjjjjjjjjj