[ html] لغة ال HTML للمبتدئين, شرح عربي مبسط جداااا
 

<div>هنبدء سلسلة لشرح تصميم المواقع للمبتدئين, الشرح هيكون مبسط بحيث ان اي حد يقدر يفهمه حتي لو بدون اي خبرة في مجال تصميم المواقع من قبل. تصميم المواقع محتاج شوية حاجات مهمة, اولها ان اللي هيتعلمه لازم يكون بيحب المجال علشان يقدر يبدع فيه, تاني حاجة انه يجرب كل حاجة, المجال ده مش هتتعلمه غير لو اشتغلت بايدك وجربت وسالت ودورت.

ايه اللي محتاجه علشان اقدر استفيد من الشروحات دي ؟
1- امكانية البحث علي الانترنت (هامة جدا).
2- تجرب كل حاجة بايدك.
3- يفضل انك يكون عندك معرفة باساسيات التصميم عموما, زي مثلا الالوان, تناسق التصميم, الخطوط.

نبدء الشرح:

1- ايه هي الادوات او اللغات المستخدمة في تصميم المواقع:
1- HTML
اي موقع علي الانترنت هو مكتوب بهذه اللغة, واللغة دي بتستخدم لوصف الموقع, يعني مثلا اللغة دي بتوصف عناوين الموقع, الصور, فقرات الكتابة, من الاخر هي اللي بتفهم المتصفح ايه اللي في موقعك.
اللغة دي بيفهمها المتصفح كويس جدا, وهو المسئول عن ترجمتها, يعني انت بتكتب اكواد اللغة في ملف, ولما المستخدم يدخل علي موقعك, السيرفر بيبعت الملف ده للمتصفح بتاعه, والمتصفح يترجم الكوود ويطلع النتيجة للمستخدم.

تدريب:
هات اي برنامج كتابة (notebad) مثلا واكتب فيه الاكواد دي:

http://www.megabs.net/images/easyblo...b-design-1.png

وبعديها احفظ الملف بالاسم ده: index.html
دوس علي الملف كليك يمين, وافتح الملف في اي متصفح عندك, مثلا الفايرفوكس, المفروض تلاقي النتيجة دي ظهرت في المتصفح:

http://www.megabs.net/images/easyblo...tml-sample.png

كدة انت عملت اول تصميم موقع بللغة ال HTML

اللغة اساسياتها سهلة جدا, انت بتكتب Tags هي اللي بتوصف ايه اللي بين التاجات دي.
اي تاج بيتكتب بين زي مثلا ولازم تقفل التاج في الاخر بكتابة

خلينا نشرح الكوود اللي فوق جزء جزء.
1-
التاج ده لازم يتحط في اول اي ملف html, وده بيعرف المتصفح ان الكوود اللي جاي html.
هو صحيح ممكن متحطوش ومش هيبقي فيه مشكلة. بس احنا هنا هنتكلم علي الطرق الصحيحة في تصميم المواقع.

2-
ده تاني تاج لازم يتحط, و اي حاجة في الكوود لازم تتحط بين ال و القافلة بتاعته

3-
ال لازم دايما يجي بعد تاج ال والتاج ده بيعرف شوية حاجات مهمة اهمها:
عنوان الصفحة
علشان نحط عنوان للصفحة بنستخدم تاجة ودي بتيجي بعد ال علي طول, بعدين بنكتب عنوان الصفحة وبعدين بنقفل التاجة عن طريق
بعد كدة بنقفل تاجة ال

4-
تاجة ال هي التاجة اللي بيتحط جزاها محتوي الموقع بالكامل, زي مثلا العناوين الرئيسية, الفقرات, الصور وبعد لما نكتب المحتوي برضه لازم نقفل التاجة باستخدام

طيب ايه هي التاجات المستخدمة في كتابة محتوي الموقع ؟
1- العناوين
<h1>
دي تاجة معناها ان اللي جاي بعديها ده عنوان رئيسي, والكلام فيها بيظهر بخط كبير جدا.
<h2>
دي تاجة معناها ان اللي جاي بعديها عنوان ثانوي
وهكذا لغاية <h6>



دي تاجة معناها ان اللي جاي بعديها ده فقرة من محتويات الموقع, والفقرة دي ممكن تكون بتحتوي علي كتابة, او صور, او جداول.

طيب علشان التاجات كتير, ادخل علي الرابط ده, هتلاقي فيه كل التاجات


w3schools HTML Reference

مش كل التاجات دي مهمة, اهم التاجات دي هي:



<h1> <h2> <h3>
<img />

طيب خلينا نطبق الكلام ده كله في صفحة موقع تانية

http://www.megabs.net/images/easyblo...b-design-2.jpg

وتعالي نشوف نتيجة الكوود ده ايه.

http://www.megabs.net/images/easyblo...b-design-3.jpg

هي دي نتيجة الكوود, العنوان الرئيسي, بعدين فقرة صغيرة بعدين صورة
طبعا انا بعتذر لو فيهحاجة مش واضحة, شرح الموضوع صعب جدا بالعربي, بس انا هنزل فيديوهات شرح قريب هتسهل الموضوع جدا

ميجا لحلول الأعمال تصميم مواقع في مصر