مقدمة في شرح الوسوم في لغة html ووظائفها

مقدمة في شرح الوسوم في لغة html ووظائفها سبق لنا و أن ذكرنا أن لغة html  هي حجر الأساس في إنشاء صفحات الويب وبناء المواقع ، وذكرنا...

مقدمة في شرح الوسوم في لغة html ووظائفها


سبق لنا و أن ذكرنا أن لغة html  هي حجر الأساس في إنشاء صفحات الويب وبناء المواقع ، وذكرنا أيضا أن لغة html  تعتمد في بناءها علي ما يعرف بالوسوم (tags) .

الوسم يكتب  بين علامتي اكبر من  (>) و أصغر من (<)وتسمي ايضا أقواس الزاوية مثال <body> </body>

الوسوم غالبا تأتي في أزواج، وسم البدء ( < opening tag>  ) ووسم الإغلاق ( </closing tag >)

الفرق بين وسم البدء والإغلاق هو أن الرمز الأول في وسم الإغلاق هو الرمز المائل "/"

لماذا تستخدم الوسوم؟


يتم استخدام الوسوم لفصل التعليمات البرمجية الخاصة بلغة html  عن النص العادي
بمعني أن الوسم هوالوسيلة  التي توضح للمتصفح  كيفية وطريقة  عرض العنصر
أي أنه سيقوم بعرض المحتوي  الموجود بين وسمي البدء والإغلاق فقط دون عرض الوسم نفسه
علي سبيل المثال :-

 <p> بسم الله الرحمن الرحيم </p>  

هذه الكود ثلاث اقسام وسم بدء ، ووسم إغلاق ومحتوي عند قراءة المتصفح للكود سيتم عرض المحتوي فقط وهو جملة * بسم الله الرحمن الرحيم *

قاعدتين هامتين لإستخدام الوسوم !



  • يجب عليك دائما كتابة الوسم بين هاتين العلامتين (<)(>)

لغات البرمجة كثيرة وكلها تستخدم العلامات وكل لغة برمجة لها طريقة خاصة في استخدام العلامات  في لغة html لا تحاول إستخدام أي علامة أخري لتعريف الوسم غير قوسي الزاوية ، و إلا فإن المتصفح لن يكون قادرا علي فهم التعليمات البرمجية الخاصة بك .
  • كما ذكرنا الوسوم تأتي غالبا في أزواج

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

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

أفضل طريقه للقيام بذلك هي كتابه علامة الافتتاح أولا ، ثم علامة الإغلاق ثانيا ، ثم أضافه المحتوي بينهما.


مثال بسيط للتوضيح


هذه وثيقة html  بها بعض الوسوم للتوضيح


<!DOCTYPE html>

<html>

<head>
<title>اسم الموقع </title>
</head>

<body>

<h1>عنوان رئيسي </h1>
<p/>عرض المحتوي كنص عادي<p>
</a> عرض المحتوي كإرتباط تشعبي <"#"=a href >

</body>

</html>

التعليقات

الاسم

اكشن فوتوشوب,47,البرمجة,3,بريست لايت روم,5,تعلم التصوير,2,خطأ bx فى بلوجر,1,خطوط احترافية,12,خطوط انجليزية,53,خطوط عربية,34,ستايل,3,ستايلات فوتوشوب,23,شعارات,10,فرش,1,فرش فوتوشوب,12,فلاتر فوتوشوب,33,فلاتر لايت روم,19,فلاتر لايت روم موبايل,2,فوتوشوب,8,لايت روم,13,مقالات متنوعة,1,موك اب,14,
rtl
item
برو اكاديمي: مقدمة في شرح الوسوم في لغة html ووظائفها
مقدمة في شرح الوسوم في لغة html ووظائفها
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIS5R6Oi1qBB3Q8mJ4U99jihAvTTJg7mMuAZZF6gABhnnl7mP3j9vxiy8FY5SORHC5yTbFcE3k08W6IeKo9XjajOdGTtyB00Ops44QIAeZ0tszzwK3Sa9hil0lTmP-tj3EJLEZ50n2RI/s640/%25D9%2584%25D8%25BA%25D8%25A9-html-720x480.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIS5R6Oi1qBB3Q8mJ4U99jihAvTTJg7mMuAZZF6gABhnnl7mP3j9vxiy8FY5SORHC5yTbFcE3k08W6IeKo9XjajOdGTtyB00Ops44QIAeZ0tszzwK3Sa9hil0lTmP-tj3EJLEZ50n2RI/s72-c/%25D9%2584%25D8%25BA%25D8%25A9-html-720x480.jpg
برو اكاديمي
https://www.pro-academe.com/2018/10/html_54.html
https://www.pro-academe.com/
https://www.pro-academe.com/
https://www.pro-academe.com/2018/10/html_54.html
true
391749931856565121
UTF-8
مشاهدة جميع المقالات لا يوجد أى موضوعات مشاهدة المزيد اقرأ المزيد اعادة الرد الغاء الرد حذف بواسطة الرئيسية PAGES POSTS مشاهدة المزيد مقترحات لك الاقسام أرشيف ابحث عن ... ALL POSTS Not found any post match with your request العودة للصفحة الرئيسية Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content