عائلة (Html).

المجموعة الأولى (تختص بإضافة المحتوى للصفحة)		المجموعة الثانية (تختص بإعطاء هيكل للصفحة)
<P>النص</p>	تختص بإضافة نص	<header></header>
<h1>عنوان</h1>	يختص بإضافة العناوين	<article></article>
<img></img>	مهم لإضافة الصور	<section></section>
<a></a>	يختص بعملية الربط بين زر أو عنوان أو	<nav></nav>
<video></video>	مهم لإضافة الفيديوهات	<aside></aside>
<audio></audio>	لإضافة الصوتيات	<table></table>
<ol></ol>	لعمل قائمة مرتبة	<form></form>
<ul></ul>	لعمل قائمة غير مرتبة
ملحوظات عامة على هذه المجموعة: بالنسبة للأوسمة الخاصة بالفيديو والأوديو والصورة فإنها تحتوي على attribute واحد وهو src=”…..” حيث نضع بين القوسين مصدر ما نريد أن نضيفه في الموقع على الجهاز أو على شبكة الإنترنت كما يجب أن نراعي كتابة امتداد الملف المضاف وإذا أردت أن تعرف الامتداد فحدد الملف واضغطعلى زر الفارة الأيمن واختر الخصائص (properties) وستظهر أمامك في المربع الحواري اسم الملف ونوعه خذه نسخ (copy) والصقه في مكانه (past) <img src=”image name and location”/> <video src=”video name and location”> </video> <audio src= “audio name & location”> </audio> سنلاحظ أن الوسام الخاص بالصورة أغلق بشكل مختلف

الآن سندخل بعض التعديلات على الموقع الذي صممناه سابقًا لنضيف بعض الأوسمة التي تعلمناها

هنا فتحنا الصفحة التي سوف نقوم على تصميمها	<html>
	<head>
	</head>
	<body>
هنا أضفنا الوسم <h1></h1> ووضعنا النص في المنتصف ستلاحظ أن النص أصبح كبيرًا وثقيلاً	<h1> بسم الله االرحمن الرحيم</h1>
هنا وضعنا الصورة وراعينا أن يكون اسم الصورة مطابق وأضفنا الامتداد	<img src="logo last.jpg"/>
هنا سنفتح وسام قائمة منسقة	<ol>
هنا وضعنا عناصر القائمة المنسقة مع مراعاة أن كل عنصر يوضع بين وسام <li>….</li>	<li>مقالات عامة</li> <li>أعمال فنية</li> <li>سينما فور دي</li> <li>مالتي ميديا</li>
هنا سنغلق الوسام الخاص بالقائمة المنسقة وسنلاحظ أن هذه القائمة أصبحت مرقمة كل عنصر مرقم حسب موقعه.	</ol>
هنا سنفتح وسام جديد لقائمة غير مرتبة	<ul>
هنا وضعنا عناصر القائمة	<li> photoshop</li> <li>3d max </li> <li> Aftre Effect </li>
هنا أغلقنا القائمة وستلاحظ أن القائمة ليست مرقمة ولكن هناك نقطة قبل كل عنصر	</ul>
هنا وضعن وسام لعنوان جديد	<h1>عنوان لفقرة جديدة </h1>
هنا وضعنا وسام لفقرة جديدة	<p>نص فقرة جديدة</p>
هنا وضعنا كلمة "صفحتنا على الفيس بوك" وربطناها براب خارجي وضعنا هذا الرابط في (Attribute)  خاص به وهو herf=”link” ثم أغلقنا الوسام ثم كتبنا النص الذي سنربطه بالصفحة الخارجية	<a href= https://www.facebook.com/pages/NegmStar-Animation-Studio> </a>صفحتنا على الفيس بوك
	</body>
	</html>

في المحاضرة القادمة سوف نتحدث عن بقية عائلة (html) إلى أن نلتقي للمزيد من المقالات أرجوا العودة إلى روابط الاستوديو المختلفة على الفيس بوك على جوجل بلاس على تويتر على بيهانسا

الإطلاع على Front End الخاص بأي موقع

تستطيع الوصول إلى (Front End)  مع أي متصفح إنترنت بالضغط على زر الفارة في أي مكان من الصفحة واختيار (Inspect Element) عندها سيقسم الشاشة إلى ثلاث مناطق رئيسية كما في الشكل التالي:

ما يهمنا في هذا الأمر المنطقة العلوية على اليمين والتي يظهر فيها ما كتبناه بلغة (Html) فإذا عدنا إلى الملف الذي حفظناه وضغطنا على زر الفارة الأيمن واخترنا (Edit with Note bad++) سيظهر لنا ما سبق وحفظناه.

هنا من الممكن أن نستفيد من تقسيم الشاشة إلى جزئين أحدهما يحتوي على الشكل الموقع والآخر على برنامج النوت باد بلس بلس فمع كل تحديث للموقع سوف يظهر لنا التحديث مع الحفظ وعمر (refresh) للمتصفح.

لو قمنا بفتح أي موقع وبحثنا في الـ Front end  للموقع سوف نجدها تحتوي على الثلاث أوسمة والتي صممنا بها موقعنا، وهنا د.أيمن أشار إلى عدة مواقع مثل الجزيرة والسي إن إن.

وفي نهاية المحاضرة هناك تطبيق عملي طلبه د. أيمن وهو الاطلاع على الـ (Front End) لموقع جوجل وطلب استخراج ثلاث أوسمة (3 Tags) وثلاثة عناصر (3 elements) وثلاثة توصيفات (3 attributs).

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