ملخص الدرس / الأولى ثانوي/اعلام آلي/تقنيات واب/انشاء صفحة ويب
الملخص
من الأستاذ(ة) عقيلة طايبيتعلم ما هي HTML ؟
يظن بعض الناس أن إنشاء المواقع عملية صعبة معقدة، هذا ليس صحيحا يمكن للجميع تعلم كيفية إنشاء المواقع. الهدف من هذا الدرس هو مقدمة سهلة في كيفية إنشاء المواقع، هذا الدرس لا يتطلب أي معرفة مسبقة منك عن البرمجة أو تطوير المواقع.
HTML هي اللغة تستخدم في إنشاء و تصميم صفحات الويب..
اخترعت HTML في عام 1990م من قبل عالم يسمى تیم بيرنرز لي، الهدف من هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرز لي ، باختراعه HTML قام تيم بيرنرز لي بوضع أساس شبكة الويب كما نعرفها اليوم.
HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية على شبكة إنترنت، ما نراه عند زيارتنا لأي صفحة في الشبكة.
ماذا تعني HTL
ماذا تعني HTL
كلمة HTML هي اختصار HyperText Mark up Language"،
HYPER up هي عكس "خطي" وهي تعني في هذه الحالة أن ننتقل من أي نقطة إلى أي نقطة بدون أن نسير في خط سير محدد.
Text تعني النص.
Mark - up هو ما نفعله بالنص، فهذه الكلمة تعني توصيف النص، فأننا نقوم بتوصيف النص تمامأ كما نفعل مع معالجات النصوص و الكلمات فنضيف العناوين والنقاط والنص السميك وغيرها.
Language تعني اللغة، فتقنية HTML هي لغة توصيف .
تكتب ملفات HTML في صورة ملفات نصوص بسيطة (Text)، تأخذ الامتداد html. عادة، وتكتب في أي برنامج للنصوص البسيطة، في الويندوز استخدم Notepad، في اللينكس استخدم pico، في الماكنتوش استخدم SimpleText، جميع هذه البرامج مناسبة جدا لعمل صفحات HTML.
لغة HTML لغة وصفية سهلة جدا ذات قدرات عالية وميزات فريدة وقوية، جميع الصفحات العالمية متقنة التصميم تم إعدادها باستخدام لغة HTML، تتميز HTML أيضا بأنها ذات قواعد سهلة ومعروفة.
العناصر و الوسوم:
تتكون ملفات HTML من قسمين :
المحتوى : وهو ما يشاهده الجمهور في صفحتك.
الوسوم (tags:وهي الأجزاء التي تحدد و تصف المحتوى من حيث التنسيق.
الوسوم هي توصيفات نستخدمها ونضعها في بداية العنصر وعند نهايته.
كل الوسوم لها نفس الشكل، تبدأ مع علامة أصغر من">"وتنتهي مع علامة أكبر من."<" <html>...............</html>
بشكل عام هناك نوعان من الوسوم، وسم البداية مثلا: <html/>
ثم وسم الإغلاق: </html>
الفرق بين الاثنين هي علامة "/"، توصيف المحتوى يكون بوضعه بين وسم البداية ووسم الإغلاق.
بعض الأمثلة:
المثال 1:
الوسم em هو اختصار. (."emphasis") أو الوسم "i», يجعل النص "مائلا" وكل النصوص بین وسم البداية <em>
ورسم الإغلاق <em/> ستظهر بشكل مائل في المتصفح.
<em/> نص مائل <em> سيظهر بهذا الشكل في المتصفح : نص مائل. .
و المثال2:
الوسم b هو اختصار لكلمة bold أو الوسم strong للخط العريض، ويأتي في صورة زوج من الوسوم، وسم للفتح ووسم للإغلاق.
HTML is a <b>Great</b> Language
وعند استخدام المتصفح في مشاهدة السطر سيظهر هكذا ..
سيظهر بهذا الشكل في المتصفح HTML is a Great Language
ملاحظات:
وجميع عناصر ملف HTML يتم إدراجها عن طريق الوسوم، وتحدد خصائصها أيضا عن طريق الوسوم
لغة HTML لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرة، أي أنه في HTML وضع <b> لا يختلف عن <B>
بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه. مثلا الوسم <br> الذي يستخدم
التحديد نهاية السطر و بداية سطر جديد ليس له وسم إغلاق.
و لغة HTML لا تراعي الفراغات و المسافات البيضاء، أما الفراغات فتعتبر رموزا خاصة أيضا التحكم بها نستخدم الوسم non breakable space) & nbsp) وإذا أردنا إدخال عدة فراغات بين نص و أخر ما علينا إلا كتابة هذا الوسم بنفس الفراغات المطلوبة . و توضع التعليقات بين <!-- و --> أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غیر موجود
بنية ملف HTML يتكون ملف HTML من جزئين رئيسيين هما:
بداية html > : Html > وسم بداية المستند و <html/> وسم نهاية المستند
الرأس Head : يحتوي على المعلومات الإضافية الخاصة بالمستند من حيث مثلا عنوان الصفحة
والكلمات المفتاحية فيها وغيرها من الأمور الخاصة بالصفحة والتي لا تعتبر من ضمن محتوى المستند.
العنوان Title : يحتوي على عنوان المستند.
الجسم Body : وهو يحتوي على المحتوى المستند الذي يراه المستخدم
المثال التالي يبين كيفية تقسيم ملف HTML ..
الأجزاء التابعة للرأس توضع بين <head> و <head/>، أما الأجزاء التابعة للجسم فتوضع بين الوسمين <body> و <body/> .
يتم تحديد عنوان المستند الذي يظهر في شريط العنوان للمتصفح بإحاطته ب <title> و <title/> والمكان الصحيح لوسم ال <title> هو الرأس، حيث أن الوسم <title> لا يعتبر من ضمن محتوى الصفحة ولا يظهر في الصفحة، وهو يستخدم في عمليات البحث والأرشيف كما في محركات البحث.
العناوين و الفقرات
الأنماط األساسية:
العناوين: وهي من ستة مستويات، العنوان الأول h1 والثاني h2 وهكذا حتى h6 ..
تحديد الفقرات:
تحديد الفقرات: يتم إحاطة الفقرة بالوسم P> p <
تحديد اتجاه الفقرة: استخدم الخاصية align في الوسم P
الوسم Font
يستعمل الوسم <font> دائما مع مجموعة من الخصائص، فهو لا يمتلك أي تأثير لوحده، وأهم خصائصه هي التي تحدد نوع الخط , لونه و حجمه.
خصائص الوسم font:
الخاصية face: تحدد نوع الخط المستخدم
< font > < br /> هذا ملف font face = " Arial " > html >
< br /> هذا ملف font face = " Courier New " > html >
<font> هذا ملف font face = " andalus " > html>
الخاصية color: تستخدم لتحديد لون الخط (أنظر إلى الألوان في الأسفل)
هذه الكلمة <font color= " red ">حمراء </font>وهذه <font color= " blue "> الزرقاء</font>
الخاصية size: تستخدم لتحديد حجم الخط، توجد سبعة أحجام للخط، والخط األساسي في الصفحة يأخذ أحد هذه األحجام، وإذا أردنا تغير حجم الخط في كلمة معينة أو جزء ما من النص نستخدم الوسم font مع الخاصية size لزيادة حجم الخط أو إنقاصه بمقدار معين.
توجد أيضا طريقة سريعة لتكبير الخط خطوة واحدة أو تصغيره خطوة واحدة باستخدام الوسم<big>أو <small>
ملاحظة: يمكننا كذلك تغيير حجم الخط األساسي في المستند وهذا سيؤثر على جميع الأماكن التي استخدمت فيها الأحجام النسبية للخطوط،. نغير الخط الأساسي باستخدام وسم يدعى <basefont >ويمكن استخدامه لتغيير حجم الخط الأساسي في المستند , لونه و نوعه، وهولايأخذ قيم نسبية في الحجم،
مثال: لتغيير الخط الأساسي إلى Arial بحجم 3 ولون أخضر نضع السطر الثاني في المستند:
<basefont color="Green" size="3" face="Arial">
والوسم <basefont> لا يستخدم في جزء محدد من نصوص HTML بل يظهر تأثيره في الصفحة كلها لذلك فهو لا يحتاج إلى وسم إغلاق.
الوسم <br>:
الوسم <br>: وهو وسم خاص لوضع الخط الأفقي
يمكننا تحديد عرض الخط بالخاصية width، حيث تأخذ width قيما مطلقة مثل 10 أو 293 وهي تحدد العرض بالبكسل، أوقيما نسبية تقاس بالنسبة إلى عرض الصفحة، مثل 20% و 85%،.
توجد أيضا خاصية و هي size التي تحدد ارتفاع الخط رأسيا ويأخذ قيما مطلقة صغيرة.
توجد أيضا خاصية color لتحديد لون الخط
توجد أيضا الخاصية noshade وهي خاصية بدون قيمة، وعند وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية
تنسيق الصفحة:
يمكن أيضا استخدام بعض المتغيرات في وسم الجسم <body>، وهذه المتغيرات تستخدم في تحديد تنسيق الصفحة
لون خلفية الصفحة bgcolor >
لون النص text ،
حاشية الصفحة العلوية topmargin والسفلية buttommargin واليسرى leftmargin واليمني rightmargin.