مدرسة الويب web school

تطبيق بعض انواع التنسيقات باستخدام css

تطبيق css على الخطوط fonts

يمكن تطبيق العديد من التنسيقات الخاصة بعناصر css على الخطوط مثل:

خاصية اللون color
خاصية نوع الخط font-family
خاصية حجم الخط font-size ويمكن عن طريقها تحديد حجم الخط فى المتصفح ويكون إما بالبيكسل px او بالنسبة المئوية
خاصية حالة الخط ( font-style (bold-italic-underline

مثال:

<style>

p{color:blue;

font-family:tahoma;

font-size:20px;

font-style:italic;

direction:rtl;

}

h1{color:red;

text-align:center;

}

</style>

</head>

<body>

<h1>الأوفيس</h1>

<p>حزمة برامج الأوفيس تنتجها شركة ميكروسوفت وتمتاز هذه الخدمة بأنها موجهه لجميع مستخدمى الكمبيوتر ومن أهم هذه البرامج</p>

<p>أولا: برنامج micirosoft word: وهو برنامج مخصص لمعالجة الكلمات وتنسيقها</p>

</body>

تنسيق الإطار: border

يمكن وضع إطار لجميع عناصر html

والإطار له العديد من الخصائص منها حجم الإطار ويقاس بوحدة البيكسل ونوعه ولونه

وكذلك الخاصية Padding وهى المسافة بين العناصر الموجودة بداخل الإطار قد تكون كلمات أو عناوين والإطار نفسه وتقاس بوحدة البيكسل

كذلك خاصية الهامش margin وهى مسئولة عن المسافة بين الإطار والعناصر خارج الإطار. وتقاس بالبيكسل

مثال:

<head>

<style>

p{ border :1px solid black;

padding:15px;

margin:30px;

}

h1{color:red;

text-align:center;

}

</style>

</head>

<h1>الأوفيس</h1>

<p>أولا: برنامج micirosoft word: وهو برنامج مخصص لمعالجة الكلمات وتنسيقها</p>

</body>

</html>

ناتج المثال:

external css

سنتحدث بمشيئة الله تعالى فى هذه المشاركة عن النوع الثالث من أنواع css وهو الخارجى external

وفى هذا النوع يتم انشاء ملف خارجى امتداده css يمكن انشاء هذا الملف من خلال برنامج محرر النصوص الشهير notepad أو محرر الأكواد الشهير visual studio code
ونضع فى هذا الملف وسم <style> وبداخله نقوم بوضع خصائص وقيم عناصر Html المراد تنسيقها.
ثم نربط ملف css بصفحة الويب من خلال وسم

مكان وضع هذا الملف داخل Head بصفحة الويب

مثال:

يتم انشاء ملفين الملف الأول هو ملف Html وتكون محتوياته كما يلى:-

<html>

<head>

</head>

<h1>الأوفيس</h1>

<p>أولا: برنامج micirosoft word: وهو برنامج مخصص لمعالجة الكلمات وتنسيقها</p>

</body>

ثم نقوم بإنشاء ملف css ونلاحظ هنا اننا قمنا بتسميته mystyle.css

وتكون محتوياته كما يلى:-

<style>

body{direction:rtl;

}

h1{color:red;

font-family:verdana;

border:solid black;

}

text-decoration:overline;

color:blue;

font-family:tahoma;

background-color:lightgrey;

}

</style>

فيظهر ناتج المثال كما يلى:-

internal css(cascading style sheets) الداخلي

css ;كما تكلمنا عنه من قبل هو المسئول عن تنسيقات وشكل ومظهر صفحة الويب .
css هو اختصار لكلمة cascading style sheets

css ينقسم إلى ثلاثة أقسام:-

Inline وفى هذا النوع يتم استخدام style مع عناصر Html
Internal وفى هذا النوع يتم استخدام وسم <style> فى الهيدر الخاص بالصفحة
External وفى هذا النوع يتم استخدام ملف أو اكثر من نوع css ويتم ربطها بصفحة html وعند بناء موقع انترنت يفضل استخدام النوع الخارجى لأنه الافضل والاسهل والأكثر احترافية.

قاعدة css

element{property : value; property :value}

حيث element هو وسم html
property هو خاصية css
value هو قيمة هذه الخاصية

مثال على inline css:-

<p style ="color:blue;font-size:300px;border:solid"> وما نيل المطالب بالتمنى ولكن تؤخذ الدنيا غلابا</p>

ناتج المثال:-

internal css أو css الداخلى

وكما سبق ووضحنا فهذا هو النوع الثانى من انواع css وفى هذا النوع يتم وضع وسم <style> فى head الخاص بصفحة Html ثم نفتح قوس { ثم نضع وسم Html ونضع الخاصية المناسبة له من css ثم نكتب قيمة الخاصية وفى النهاية نغلق القوس }

مثال:

<head>

<style>

h1{

color:red;

font-family:verdana;

border:solid black;

}

color:blue;

font-family:tahoma;

background-color:lightgrey;

}

</style>

</head>

<h1>الأوفيس</h1>

<p>أولا: برنامج micirosoft word: وهو برنامج مخصص لمعالجة الكلمات وتنسيقها</p>

</body>

نتيجة المثال:-

وسم عنوان العمل cite ,,ووسم تغيير اتجاه كتابة النص bdo في لغة Html

وسم <cite> في لغة Html

وهو وسم يستخدم للتعريف بعناويين الأعمال مثل الكتب والافلام والصور والتصميمات.
يتم وضع عنوان العمل فقط داخل الوسم <cite>
ويلاحظ ان الكلام المكتوب داخل الوسم cite يظهر بشكل مائل ويمكن التحكم فى خصائصه من خلال css
مثال:

<p><cite>المسجد الحرام<cite> بمكة المكرمة أول مسجد وضع للناس </p>

</body>

فتظهر الصفحة كما بالشكل التالي:-

وسم <bdo>

هو اختصار لكلمة bi-directional override

معناه تجاهل الاتجاه الرئيسي للنص فى الصفحة

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

يستخدم هذا الوسم الخاصة dir وهى لها قيمتان

- dir="rt" وتعنى اتجاه الكتابة من اليمين إلى الشمال

- dir="ltr" وتعنى اتجاه الكتابة من الشمال إلى اليمين

مثال:

<p> ahmed go to school</p>

<p> <bdo dir="rtl">ahmed go to school </bdo></p>

<p><bdo dir="ltr">ahmed go to school</bod></p>

نلاحظ فى هذا المثال ان السطر الثانى تم جعل اتجاه الكتابة فيه من اليمين إلى الشمال رغم ان اللغة المستخدمة هى اللغة الانجليزية مما يؤدى إلى عكس ترتيب الاحرف

كما سيظهر فى الشكل التالي:-

وسم الاختصار abbr ووسم العنوان address في لغة Html

وسم الاختصار <abbr> في لغة html

كلمة abbr اختصار abbreviation وهذا الوسم يقوم بتعريف أو تحديد اختصار معين وهو يقوم باعطاء معلومات للمتصفح ولأنظمة الترجمة وكذلك لمحركات البحث.
ويتم استخدام الحاصة title مع هذا الوسم حيث يتم كتابة الكلمة كاملة داخل title وبمجرد وضع المؤشر على الاسم المختصر تظهر الكلمة كاملة والتى تمت كتابتها داخل title
مثال:

<body>

<abbr title="international computer driving license "> icdl course</abbr>

وتظهر النتيجة بالشكل التالي:-

وسم العنوان <address> في لغة Html

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

وفى معظم المتصفحات يقوم بإضافة سطر قبل وبعد العنوان ويظهر دائما بالخط المائل

مثال:

<body>

<p>مدونة عالم الويب</p>

تمت كتابته بواسطة: خالد شكرى أحمد <br>

العياط- الجيزة- جمهورة مصر العربية<br>

هاتف 010555556666

</address>

</body>

فتظهر النتيجة كما يلى:-

address,tag,html,html5 ,webw3s,مدرسة الويب

الاقتباس فى لغة Html

يوجد نوعان من الاقتباس فى لغة html

الوسم <q> للاقتباس القصير وفى هذا النوع من الاقتباس يقوم المتصفح بوضع علامتي تنصيص حول النص المقتبس

فمثلا

قال الله تعالى <q>وقل اعملوا فسيرى الله عملكم ورسوله والمؤمنون</q> سورة التوبة

فسيظهر النص كما بالصورة التالية:

الوسم <blockquote> وهو مخصص للاقتباس الطويل

ويقوم بوضع مسافة بادئة قبل النص المقتبس

مثال:-

<html>

<p> بيل جيتس لا يعتبر مؤسس شركة ميكروسوفت فقط بأنه من رواد ثورة المعرفة فى القرن الحادى والعشرين </p>

كانت السنوات العشرين الماضية مغامرة مذهلة بالنسبة لي بدأَت يوم كنت، وأنا طالب في سنتي الجامعية الثانية، أقف في ميدان هارفارد مع صديقي (بول آلان) نتأمل وصفا لحاسوب تجميعي في مجلة "بوبيولار إلكترونيكس". لم نكن أنا وبول نعرف ونحن نقرأ مبهورين عن أول حاسـوب شخصي كيف سيتم اسـتعماله بالضبط لكننا كنا واثقين أنه سيغيرنا نحن وعالم اسـتعمال الحواسـيب، وكنا على صـواب في ذلك فقد حدثت ثـورة الحاسوب الشخصي وأثرت على ملايين الأنفس. لقد قادتنا إلى أماكن كنا لا نتخيلها..............

</blockquote>

</body>

</htm>

فيظهر النص كما بالصورة التالية:

تابع وسوم تنسيق النص font fomatting فى لغة Html

الوسم <mark>

وظيفة هذا الوسم يقوم بتحديد النص بلون معين فمثلا لتحديد كلمة Html بلون معين

الوسم <del> وهو يقوم بوضع خط فى منتصف الكلمة أو الجملة , وهو يوحى بحذف الكلمة

<del> html tutorial </del>

الوسم <ins> وهو يقوم بإضافة نص ويستخدم عادة بعد وسم <del>

<del>html tutrial</del><ins> شرح تصميم الويب</ins>

وسم النص العلوى <sup> وهو يقوم بوضع الكلمة فوق مستوى السطر أو فوق مستوى النص

وله استخدامات عديدةمن أشهرها وضع الأس فى عالم الرياضيات

<body>

x<sup>2</sup>+x<sup>5</sup>=x<sup>7</sup>

</body>

وسم النص السفلي <sub>

وهو يقوم بكتابة النص أسفل مستوى السطر وله استخدامات عديدة خاصة فى مجال المعادلات فى العلوم

C<sub>2</sub>+O<sub>2</sub>=CO<sub>2</sub>

تنسيق الخط font formatting فى لغة Html

وسم الخط سميك <b>

هذا الوسم يجعل النص يبدو سميكاً

وسم الخط القوى <strong>

وهو يظهر بنفس شكل الخط السميك bold فى المتصفح

<strong> the text is strong</strong>

وستظهر النتيجة كما بالشكل التالي:-

وسم الخط المائل <i>

هذا الوسم يجعل الخط مائل

<i> the text is italic</i>

وسم الخط المؤكد أو المشدد <em> وهى اختصار لكلمة emphasized

وهو يظهر بنفس شكل الخط المائل فى المتصفح

<em> the text is emphasized</em>

وستظهر النتائج كما بالشكل التالي:

ملاحظة هامة: نلاحظ رغم تشابه الوسمان bold & strong فى النتائج وكذلك وسمى italic & emphasized لكن لكل منهما معنى مختلف حيث أن bold & italic معناه الخط سميك ومائل بينما strong& emphasized معناه الخط هام

الوسم <small> وهو يقوم بإظهار النص بحجم صغير small

<small> the text is small</small>

الوسم <mark> حيث يقوم بتحديد النص

<mark> the text is marked</mark>

وتظهر النتائج كما فى الشكل التالي:-

وسنكمل باقى الوسوم بمشيئة الله فى المشاركة القادمة

تنسيق صفحة html باستخدام style

ينصب تركيز لغة html على وصف عناصر صفحة الويب فهذا وسم للعنوان وذاك وسم للفقرة وآخر وسم للجدول وهكذا.. ولم تهتم لغة html بشكل ومظهر الصفحة ومن هنا جاء دور style لتقوم بالتحكم فى شكل ومظهر صفحة الانترنت عندما تظهر على متصفح الانترنت..

وstyle شكل من أشكال css وهو اختصار cascading style sheet

وبالتالي فكل عناصر لغة html لها الشكل الافتراضي فخلفية الصفحة تكون بيضاء ، ولون الخط يكون أسود
ويمكن تغيير هذه الأشكال الافتراضية وذلك من خلال الخاصية style واستخدام الوسم style مع صفحة الويب فى لغة html مع اى وسم مباشرة يسمى Inline css
فمثلا عند الرغبة فى تغيير خلفية الصفحة بحيث تكون باللون الرمادى الفاتح

<body style="background-color:lightgrey">

ونلاحظ أن قاعدة التعامل مع style تكون على هذا الشكل

style="اسم الخاصية: value (قيمة الخاصية)"

<body style="color:red"> فهذا يجعل لون الخط فى صفحة ويب باللون الأحمر

فى الإصدارات السابقة من لغة html كان يوجد وسم <font> وهو غير موجود فى لغة html5

لتغيير لون الخط فى العنوان مثلا إلى اللون الأزرق

<h1 style="color:blue"> اكتب هنا العنوان</h1>

لتغيير نوع الخط فى فقرة معينة إلى الخط tahoma

<p style'"font-family:tahoma"> نلاحظ أن الخط هنا يكون بنوع الخط المذكور فى الفقرة

يمكن كتابة أكثر من style لنفس الوسم ويفصل بين كل style وآخر بالفاصلة المنقوطة ;

فمثلا لجعل عنوان النص باللون الأزرق ، ومحاذاته بالمننتصف

<h1 style="color:blue;text-align:center">

سنعود مرة أخرى لشرح اكثر تعمقا فى css بمشيئة الله فى المشاركات المقبلة

وهنا يأتى دور المثال التطبيقى

<!doctype html>

<html lang="ar" dir="rtl">

<head>

<meta charset="UTF-8">

<title>

computer

</title>

</head>

<body style="background-color:lightgrey; color:red">

<p style="font-size:150%">

<h1 style="color:blue;text-align:center">مميزات استخدام الكمبيوتر في التعليم</h1>

يمتلك الكمبيوتر العديد من الإمكانات التي جعلت منه أداة تنافس العديد من الوسائط التعليمية الأخرى والعديد من الاستراتيجيات التعليمية التي تُركّز على نشاط المتعلم وإيجابيته وعلى

أساليب العمل داخل الفصل التي تهدف إلى مراعاة الفروق الفردية أو التغلب على بعض مشكلات النظام داخل الفصل ، ويتميز الكمبيوتر بالعديد من الخصائص منها :

<h2 style ="color:blue"> القدرة على تخزين واسترجاع كم هائل من المعلومات</h2>

فالكمبيوتر قادر على تخزين مجموعة متنوعة وكبيرة من البيانات والمعلومات التي تأخذ عدة أشكال كالنصوص والصور والرسوم المتحركة و لقطات الفيديو ، حيث يمكنه تخزين كم

كبير من المادة التعليمية تعجز عن الاحتفاظ بها واسترجاعها عند الطلب أي من الوسائل .

<h2 style ="color:blue">القدرة على العرض المرئي للمعلومات</h2>

فالعديد من برامج الكمبيوتر قادر على رسم الصور ومعالجتها وعرضها على الشاشة بشكل جذاب ومفيد وقد تكون هذه المعلومات نصوص أو رسوم تم رسمها بواسطة

الكمبيوتر أو أدخلت إليه بطريقة إلكترونية وهذه الرسوم قد تكون رسوم هندسية أو بيانية أو طبيعية .

</p>

</body>

</head>

</html>

و تظهر الصفحة كما بالشكل التالي:-

كيفية ظهور صفحة html من خلال متصفح الانترنت والوسم pre

الوسم pre فى لغة html

* يتجاهل متصفح الانترنت كافة المسافات والأسطر الجديدة فيقوم باحتسابها سطراً واحداً ومسافة واحدة

فمثلا الكود التالي في لغة html : سيقوم المتصفح بعرضه كما يلى:-

<body>

<p>

بسم الله الرحمن الرحيم

إن الحمد لله

نحمده ونستعينه ونستغفره

ونعوذ بالله تعالى من شرور أنفسنا

ومن سيئات أعمالنا أما بعد

إن أصدق الحديث كلام الله

وخير الهدى هدى محمد صلى الله عليه وسلم

</p>

وأحيانا نرغب فى أن يظهر النص بالشكل الذى تمت كتابته به ولذا نلجأ إلى الوسم التالي:-

<pre> وهو وسم يقوم بإظهار النصوص كما تمت كتابتها بنفس التنسيق الذى عليه النص وسوف يتجاهل الأسطر المتعددة والمسافات الزائدة وهذا الوسم مفيد جدا فى كتابة الشعر العربي

مثال:

<body>

<pre>

دع الأيام تفعل ما تــشاء وطب نفسا إذا حكم القضاء

ولا تجزع لحادثة الليالي فما لحوادث الدنيا بقاء

</pre>

</body>

نلاحظ فى المثال السابق أننا نريد أن يظهر النص كما هو مكتوب وتترك المسافات والأسطر كما هى بدون أى تنسيق وهى إحدى طرق كتابة الشعر العربي فى متصفح الانترنت بلغة html

ويظهر النص السابق فى المتصفح كما يلى:-

meta data in html عناصر الميتا فى لغة Html

meta data: عبارة عن بيانات تصف بيانات في لغة html

وmeta توجد داخل head وهذا الوسم ليس له وسم إغلاق

عناصر meta لا تظهر فى متصفح الانترنت حيث وضحنا أن متصفح الانترنت يظهر به فقط ما بداخل وسم body

ومن أمثلة meta وسم <title> حيث لا يظهر فى متصفح الانترنت وإنما يظهر فى نافذة المتصفح كعنوان للصفحة

ويوجد عنصر آخر من عناصر meta هو:

عنصر charset

<meta charset="UTF-8"/>

وهذا الوسم يسمى نوع الترميز وهو مفيد فى عرص النص سواء كانت اللغة بالعربية أو الانجليزية أو أى لغة أخرى

ومن عناصر Meta الهامة جدا هو name

حيث يتم وضع معلومات عن الموقع بحيث تظهر هذه المعلومات أسفل الموقع عند البحث عن هذا الموقع من محركات البحث.

فمثلا لو كان موقعنا يتحدث عن شروحات البرامج مثل شروحات برامج الأوفيس وغيرها.

ملاحظة هامة

يمكن وضع قيم values للخصائص attributes بين علامتي اقتباس مزودج مثل

أو وضع قيم الخصائص بين علامتي اقتباس مفردة

إذا كانت القيم values الخاصة بالخصائص تتكون من كلمة واحدة مفردة يمكن وضعها بدون أى علامات اقتباس

ويوجد أيضا مجموعة عناصر أخرى من عناصر meta سنتناولها فيما بعد

ومن عناصر الميتا الهامة التى توضع داخل Head أيضا العناصر الآتية :-

<style>عنصر

حيث يستخدم لتعريف css الداخلى وسيتم شرح CSS فيما بعد

عنصر <link>

حيث يستخدم لتعريف css الخارجي

عنصر <script>

تستخدم لتعريف أكواد لغة Java script

ويأتى دور المثال

<!doctype html>

<head>

<title>

حيوانات الغابة

</title>

</head>

<body>

<p>

بسم الله الرحمن الرحيم

</p>

</body>

</html>

حيث يظهر فى المتصفح كما يلى:

ولعرض مصدر الصفحة فى المتصفح فقط اضغط كليك يمين ثم اختر view page source

إضافة الصور فى لغة html

كيفية اضافة صورة فى لغة html

يمكن عرص الصور داخل صفحة html وذلك من خلال الوسم <img>
يقوم الوسم <img> بعرض الصور اعتمادا على مصدر الصورة source وذلك من خلال الخاصية src
فمثلا لعرص صورة اسمها lion وامتداد الصورة jpg ومكان الصورة فى نفس مجلد html

أما فى حالة وجود نفس الصورة فى مجلد أخر يسمى مثلا images فإن مصدر الصورة سيكون كالتالي:-

الوسم Img يمكن إضافة الخواص التالية له.

1- width وهى خاصية تقوم بتحديد عرص الصورة "width="300 فنكون قد حددنا عرص الصورة ب300 بيكسل

2- height وهى خاصية تقوم بتحديد إرتفاع الصورة "height="400 فنكون قد حددنا ارتفاع الصورة بـ400 بيكسل

3- alt ,وهو اختصار alternate وهى تقوم بوضع نص اختيارى يظهر فى حالة عدم عرض الصورة وهو مفيد لذوى الاحتياجات الخاصة الذين يقومون بسماع محتوى صفحة الويب .

ملاحظة هامة:

يفضل دائما أن يوضع علامتى اقتباس مزدوج لقيم الخصائص الموجودة فى الوسوم

فمثلا

الوسمان السابقان يؤديان نفس النتائج ولكن يفضل دائما وضع علامتى اقتباس

مثال على وسم الصور <img>

ولمعرفة امتداد الصور يمكن إظهار الامتداد باتباع الآتي:-

نقف على المجلد الذي به الصور ثم من organize نختر view ثم نزيل علامة الصح من أمام الخيار hide extensions for unknown type فنلاحظ أنه تم إظهار امتداد الصورة بجوار اسمها.

<!doctype html>

<html>

<head>

<title>

حيوانات الغابة

</title>

</head>

<body>

</body>

</html>

وتظهر الصور فى المتصفح كما بالشكل التالي:-

وسنتناول الصور مرة اخرى فيما بعد إن شاء الله تعالى

الارتباطات التشعبية hyper links فى لغة html

hyper link الارتباطات فى لغة html

تمتاز لغة html بأنها توفر آلية سهلة للإنتقال بين صفحات الويب ومواقع الانترنت

وذلك عن طريق الضغط على رابط معين Hyper link.

وهذه الروابط قد تكون نصوص أو صور وبمجرد الضغط عليها يتم الانتقال الى الموقع المطلوب أو الصفحة المطلوبة .
وعند وضع المؤشر على رابط الانتقال يتحول إلى شكل يد
ويتم إنشاء الروابط التشعبية عن طريق استخدام الوسم <a> ويتم اغلاق الوسم <a/>
وحرف a اختصار لكلمة anchor
ويتم استخدام الخاصية href لتشير إلى اسم الموقع أو الصفحة التى سيتم الانتقال إليها.
فمثلا عند الرغبة للانتقال إلى صفحة جوجل يكون الوسم كالتالي:

<a href="http://www.google.com>اضغط هنا للانتقال للموقع</a>

href: short for اختصار لـ hyper text reference

المثال التالي يوضح كيف عمل ربط لمواقع مختلفة و صفحات اخرى فى نفس الموقع

<!doctype html>

<head>

<title>

حيوانات الغابة

</title>

</head>

<body>

<a href="http://www.facebook.com">الفيس بوك</a><br>

<a href="lion.html">الانتقال لصفحة الأسد</a><br>

</body>

</html>

ملاحظة هامة:

خاصية dir=rtl يتم وضعها داخل الوسم <html>لتغير اتجاه الصفحة من اليمين إلى اليسار وهى من الوسوم العامة global التى يمكن وضعها داخل أى عنصر من عناصر لغة HTML ويمكن وضعها داخل وسم html بحيث تجعل اتجاه الصفحة من اليمين إلى اليسار وهى مناسبة تماماً للكتابة باللغة العربية .

كما يمكن وضع الخاصية title وهى من الوسوم العامة global التى تستخدم مع جميع عناصر لغة HTML داخل الارتباط التشعبي بحيث عندما يقف المؤشر على الرابط يظهر له تلميح بسيط عن الصفحة التى سوف ينتقل إليها.

html attributes خصائص الوسوم فى لغة html

الوسوم فى لغة html لها خصائص.

الخصائص الخاصة بعناصر html تضيف على الوسوم مجموعة معلومات إضافية عن العنصر .
هذه الخصائص توجد دائما فى وسم البداية وليس فى وسم النهاية
الخصائص تأتى دائما فى صورة "name="value
بعض الخصائص تسمى global attributes أو خصائص عامة هذه الخصائص يمكن استخدامها مع جميع عناصر لغة Html مثل Class- hidden- id-title وغيرها ممكن يمكن الرجوع إليه بالبحث
هناك بعض الخصائص تسمى element attribute أو خصائص خاصة بالعنصر مثل وهى مجموعة خصائص تختلف من عنصر لآخر مثل مثلا عنصر الصور يكون له الخاصية src فمثلا

the lang attribute خاصية اللغة في لغة html

يمكن تحديد لغة المستند أو صفحة الويب من خلال إضافة خاصية اللغة إلى وسم <html>
واللغة يتم الإعلان عنها بخاصية lang
والإعلان عن اللغة هام جدا وذلك لأنها تساعد برامج الوصول مثل برنامج قارئ الشاشة screen reader وهامة أيضا لمحركات البحث.
<html lang="en-us"> فى حالة اللغة الانجليزية
<html lang="ar"> فى حالة اللغة العربية

title attribute خاصية العنوان في لغة html

فى لغة html يوجد وسم الفقرات <p> ووسم الفقرة له خاصية title ,وهذه الخاصية توضع فى وسم الفقرة بحيث عن وضع المؤشر فى الفقرة يظهر مستطيل ابيض اللون به النص الذى تمت كتابته فى خاصية title
<"p title="web design>

<!doctype html>

<head>

<title>

حيوانات الغابة

</title>

</head>

<body>

<h1> web design</h1>

<hr>

</body>

</html>

عناصر لغة html الفارغة

تطرقنا في المشاركة السابقة لإحدى عناصر لغة html الفارغة وهو وسم انشاء الخط الأفقي <hr> وهو وسم لا يحتوى على أى عناصر ويطلق عليه وسم فارغ أى لا يحتاج بداخله لأى عنصر ..عكس الوسوم الأخرى مثل وسم العنوان <h1> فهذا الوسم يوضع بين وسم البداية والإغلاق له عنوان معين فيقوم بإبرازه بحجم معين .
أما الوسوم الفارغة فتؤدى وظيفة معينة ولا يوضع بداخلها أى عناصر.
مثل وسم <hr> فبمجرد كتابته يقوم بإنشاء خط أفقي فى مستعرض الأنترنت

وكذلك وسم <br> وهو يقوم بإنشاء سطر جديد line break

والوسوم الفارغة لا يتحتم إنشاء وسوم إغلاق لها فى Html5 ولكن بالطبع يمكن انشاء وسوم إغلاق لها.

<body>

<h1> web design</h1>

<hr>

</body>

فتظهر النتيجة كما بالشكل التالي:-

ملاحظات هامة:

يستحسن استخدام الأحرف الصغيرة small مع لغة Html

ولكن لو تم كتابة الأحرف بحالة كبيرة capital فإنه سيؤدى إلى نفس النتائج بلا أى اختلاف

فالوسم <br>=<BR>

ولن يفضل دائما استخدام حالة الأحرف الصغيرة

التعليقات comments فى لغة html

يمكن ادراج التعليقات فى لغة Html بحيث لا تظهر هذه التعليقات فى متصفح الويب عند عرض الصفحة

وتفيد هذه التعليقات فى شرح وتفسير كود معين أو تحديد مناطق معينة فى الكود يمكن الرجوع إليها بعد ذلك وتعديها

وكود التعليقات

كما يمكن كتابة التعليق على أكثر من سطر بدلا من سطر واحد مثل السابق وذلك كالتالي

<!--

التعليقات هنا

-->

example مثال

<!DOCTYPE html>

<html>

<head>

<title>

comments

</title>

</head>

<body>

<p>الفقرة الأولى </p>

</body>

</html>

فتظهر صفحة الانترنت كما بالشكل التالي بحيث لا تظهر التعليقات فى المتصفح.

حيث نلاحظ أن متصفح الانترنت يتجاهل التعليقات ولا تظهر فى المتصفح عند عرض الصفحة

وسم الخط الأفقي
فى لغة html

وسم الخط الأفقيhr فى لغة html 5

كنا قد تحدثنا فيما سبق أن الوسوم الخاصة بلغة html لها وسم بداية مثل <p> ثم تبدأ بكتابة العناصر مثل الفقرة هنا وفى نهاية الفقرة يتم اغلاق الفقرة بوسم النهاية <p/>
والأن نتحدث عن وسم hr وهو وسم يقوم بوضع خط أفقي فى صفحة html ونلاحظ أن هذا الوسم فى html 5 له وسم فتح ووسم إغلاق أى وسم بداية <hr> وله وسم إغلاق <hr/>
فى الإصدارات السابقة من لغة Html كان هذا الوسم ليس له وسم نهاية وإنما كان يتحد وسم الفتح والإغلاق فى شكل واحد وكان يكتب هكذا </hr>
وهذا الوسم <hr> وهو اختصار horizontal أى أفقي

<!doctype html>

<html>

<head>

<title>

عالم الحيوان

</title>

</head>

<body>

<p> .هذه الصفحة التعليمية ستتناول حيوانات الغابة بالصور والفيديو والشروح لكل حيوان ومعرفة صفات كل نوع من أنواع الحيوانات. كما ستناول كما يخص عالم الحيوانات

من مأكل ومشرب والبيئة المناسبة لها,

</p>

<hr>

</hr>

<h1>الأسد</h1>

<p>

الأسد حيوان من الثدييات من فصيلة السنوريات وأحد السنوريات الأربعة الكبيرة المنتمية لجنس النمر (باللاتينية: Panthera)، وهو يُعد ثاني أكبر السنوريات في العالم

بعد الببر، حيث يفوق وزن الذكور الكبيرة منه 250 كيلوغراما (550 رطلا).[1] تعيش معظم الأسود البرية المتبقية اليوم في إفريقيا جنوب الصحراء الكبرى، ولا تزال جمهرة

واحدة صغيرة مهددة بالانقراض تعيش في آسيا بولاية غوجرات في شمال غربي الهند. كان موطن الأسود شاسعا جدا في السابق، حيث كانت تتواجد في شمال إفريقيا، .

</p>

</body>

</head>

</html>

وستظهر الصفحة كما بالشكل بعض وضع وسم الخط الأفقي بين الفقرتين الموجودتين فى الصفحة

تطبيق css على الخطوط fonts

تنسيق الإطار: border

سنتحدث بمشيئة الله تعالى فى هذه المشاركة عن النوع الثالث من أنواع css وهو الخارجى external

css ينقسم إلى ثلاثة أقسام:-

قاعدة css

مثال على inline css:-

internal css أو css الداخلى

وسم <cite> في لغة Html

وسم <bdo>

وسم الاختصار <abbr> في لغة html

وسم العنوان <address> في لغة Html

الوسم <q> للاقتباس القصير وفى هذا النوع من الاقتباس يقوم المتصفح بوضع علامتي تنصيص حول النص المقتبس

الوسم <blockquote> وهو مخصص للاقتباس الطويل

الوسم <mark>

الوسم <del> وهو يقوم بوضع خط فى منتصف الكلمة أو الجملة , وهو يوحى بحذف الكلمة

الوسم <ins> وهو يقوم بإضافة نص ويستخدم عادة بعد وسم <del>

وسم النص العلوى <sup> وهو يقوم بوضع الكلمة فوق مستوى السطر أو فوق مستوى النص

وسم النص السفلي <sub>

وسم الخط سميك <b>

وسم الخط القوى <strong>

وسم الخط المائل <i>

وسم الخط المؤكد أو المشدد <em> وهى اختصار لكلمة emphasized

الوسم <small> وهو يقوم بإظهار النص بحجم صغير small

الوسم <mark> حيث يقوم بتحديد النص

وstyle شكل من أشكال css وهو اختصار cascading style sheet

<body style="background-color:lightgrey">

فى الإصدارات السابقة من لغة html كان يوجد وسم <font> وهو غير موجود فى لغة html5

لتغيير لون الخط فى العنوان مثلا إلى اللون الأزرق

<h1 style="color:blue"> اكتب هنا العنوان</h1>

<p style'"font-family:tahoma"> نلاحظ أن الخط هنا يكون بنوع الخط المذكور فى الفقرة

<h1 style="color:blue;text-align:center">

الوسم pre فى لغة html

meta data: عبارة عن بيانات تصف بيانات في لغة html

عنصر charset

<meta charset="UTF-8"/>

ومن عناصر Meta الهامة جدا هو name

ملاحظة هامة

<style>عنصر

عنصر <link>

عنصر <script>

كيفية اضافة صورة فى لغة html

1- width وهى خاصية تقوم بتحديد عرص الصورة "width="300 فنكون قد حددنا عرص الصورة ب300 بيكسل

2- height وهى خاصية تقوم بتحديد إرتفاع الصورة "height="400 فنكون قد حددنا ارتفاع الصورة بـ400 بيكسل

3- alt ,وهو اختصار alternate وهى تقوم بوضع نص اختيارى يظهر فى حالة عدم عرض الصورة وهو مفيد لذوى الاحتياجات الخاصة الذين يقومون بسماع محتوى صفحة الويب .

hyper link الارتباطات فى لغة html

ملاحظة هامة:

الوسوم فى لغة html لها خصائص.

the lang attribute خاصية اللغة في لغة html

title attribute خاصية العنوان في لغة html

وكذلك وسم <br> وهو يقوم بإنشاء سطر جديد line break

ملاحظات هامة:

التعليقات comments فى لغة html

example مثال

وسم الخط الأفقيhr فى لغة html 5

تم الكشف عن مانع الإعلانات