ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90% ■ شرح الـHTML + بعض الأكوا

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

: مشاهدة المشاركة في الموضوع بالعرض العادي

: ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%

06-01-2011 03:20 صباحاً

isma3eliano

عضو

انضم في : 03-11-2009

رقم العضوية : 188

المشاركات : 2,152

الدولة : مصر Egypt

الجنس :

تاريخ الميلاد : 26-10-1994

الدعوات : 4

قوة السمعة : 5,518

موقعي : زيارة موقعي

[frame=7]■ شرح الـHTML + بعض الأكواد الجديده من HTML 5 ■[/frame]

سأستعين في الشرح بهذا الموقع - الأشهر عالمياً -

http://www.w3schools.com/html/

841

تتكون الـ HTML من Tags
منها من يكون له بداية و نهاية كهذا الذي يبدأ به الـHTML

CODE


<html>
</html>

و أيضاً ما يقفل في نفس الTag لا يتكون إلا من Tag واحد مثل
Tag الصورة

CODE


&lt;img src=&quot;...&quot; /&gt;

ماذا تحتاج لتبدأ كتابة HTML ؟

تحتاج أي محرر نصوص كالـNotebad مثلاً - سنقوم بإستخدامه -

البداية ...

قم بفتح الـNotebad و قم بكتابة التالي

CODE


<html>
<head>

</head>
<body>


</body>
</html>

ثم قم بالحفظ كما في الصورة

لنحلل سويًا ما كتبناه من أكواد

نلاحظ التالي :
كل Tag يتكون من مقدمة و نهاية Tag للمقدمة و Tag للنهاية ..مثل..

CODE


<p>Paragraph</p>

هذا مثلاً Tag الفقرة Paragaph فالمقدمة [p] و النهاية نزود / بعد > و هكذا .

هناك شئ آخ بسيط لاكن مميز
عندما نكتب أي أكواد HTML نكتبها هكذا

CODE


<html>
  <head>
    
  </head>
  <body>
    <p>
	 The ISlam
    </p>
  </body>
<html>

نلاحظ التالي :

الـhtml indent : و هو أن نراعي مسافة بين كل كون وما بداخله من أكواد فالـ<html> داخله الـ<head> و الـ<body> و الـ<body> داخله الـ[p] و الـ[p] داخله The ISlam
الترتيب : ترتيب الأكواد بمعني أن كل كود يكون داخله الآخر بين قفل الكود وفتحه فتفتح الكود ثم تقفله قبل فتح أي كون آخر داخله أو خارجه يعني تكتب <html> ثم </html> و بينهما <head> ثم </head> ولا تكتب <html> ثم <head> ثم تغلق الإثنين </head> ثم </html> قد تعتقد أن هذا أسهل لكن فيما بعد سيجلب لك الكثير من المشاكل لا يوجد أفضل من النظام .

كما أتفقنا أي ملف HTML ممكن أن يكتب في الـNotepad أو أي محرر نصوص
و يتم حفظة بصيغة .html كما في الصور السابقة

و أتفقنا أيضًا أن أي ملف Html يتكون من

CODE



<htm>

  <head>

  </head>

  <body>

  </body>

</html>

و يكون داخل الـ<head> يتم وضع أكواد معينه سنبدأ بها إن شاء الله
و هذه الأكواد لا تظهر في الصفحة

أما داخل الـ<body> يكون هناك كل ما يظهر في الصفحة من نصوص وصور .. إلخ

سنبدأ في شرح الأكواد للـ HTML

نبدأ من أعلي الـ <head>

يكون ما بداخل الـ<Head>
كما ذكرنا سابقًا كل ما لا يظهر في الصفحة من محتوي و هذه أهم أكواد الـ <head>

هذا هو العنوان الذي يظهر في المتصفح في الأعلي

CODE

<title>ISMa3eliano.Com</title>

هذا هو الـ Encoding وهو خاص بالكلام و اللغة الأفضل تبقيه هكذا

CODE

&lt;meta http-**=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;

هذا هو الـFavicon وهي الصورة التي تظهر في الموقع في الأعلي علي المتصفح نفسه بجوار العنوان Title

CODE

&lt;link rel=&quot;shortcut icon&quot; href=&quot;images/ico.png&quot; /&gt;

هذه الأكواد هامه جدًا بخصوص محركات البحث فهي التي تدل المحركات كجوجل علي محتوي الموقع وهذا مثال تضع ما تريد من كلمات بينها فاصله كما هو موضح لكن لا تضع كلمات كثيرة حاول تكون مناسبه وموجزة مثلًا 15 كلمة لأن الكلمات الزيادة تؤثر بشكل عكسي

CODE

&lt;meta name=&quot;keywords&quot; content=&quot;تيشرتات,ملابس,شرابات,تصميمات,هادفة, ,بالعربي,باللغة,العربية,مريحة,معاني,امل,تفاؤل,نهضة,حلم,قديمة,M3any,msr,egypt,مصر,الثورة,store&quot; /&gt;

هذا هو الـوصف للموقع وهو أيضًا مفيد لمحركات البحث وأعتقد علي حسب علمي أنه أيضًا يجب أن لا يطول حتي لا يجئ بشكل عكسي

CODE

&lt;meta name=&quot;description&quot; content=&quot;معاني تيشرت .. نقدم كل ما هو هادف، تصميمات جديدة باللغة العربية،بايدى عابرة، خامات متميزة مريحة في الاستخدام.&quot; /&gt;

هذا هو الـ Css وسنقوم بدراسة الـcss لاحقًا في هذا الموضوع إن شاء الله

CODE

&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot; /&gt;

بعد الإنتهاء من الـ <head>
نغلقه </head>

ونبدأ في محتوي الصفحة نفسه
<body>

أولًا : ما هو الـ <body> و ما محتوياته

<body> هو tag يبدأ و يغلق في
<body>
المحتوي
</body>

و كما ذكرنا سلفًا هو الـTag الذي بداخله كل محتويات الـHtml

التي تظهر في الصفحة نفسها
مثل:صور و نصوص .. إلخ

أكواد الـ<body> كثيرة جدًا لا يمكن حصرها ..

فسنقوم بشرح أهمها والأساسي منها

ملحوظة : لست مُطالب بحفظ كل أكواد الـHtml بل أحفظ أهمها بالممارسه ليس إلا
أما الباقي فجوجل موجود