الاثنين، 3 مارس 2014

اول درس في دورة HTML

السلام عليكم


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

لتحميل النسخة الاخير 18 فيفري 2014

 Download Notepad++ 6.5.4

1- المخطط الاولي:

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

1- الرأس (Head)
2- الجسد (Body)

والوسوم بشكل عام هي اسماء او رموز لتعرف بها مالشيء المراد التعديل او العمل عليه
مع مراعاة ان لكل وسم بداية ونهاية مثلا        
<html>              </html>
<head>            </head>
<body>           </body>

فيكون المخطط بداية هكذا:
<html>
<head>        
</head>        
<body>       
</body>       
</html>

ويجب علينا ان نقوم في اول الامر التعريف ببيئة العمل
<!Doctype htmh!>
فيكون المخطط في بدايته هكذا:

2- بعض الوسوم الافتراضية واللازمة معرفتها:

* وسم عنوان الصفحة والذي يوضع في القسم  <head>   هنـــــــــــــــــــــــــــــــا    </head>
<title></title>
ولكتابة العنوان الذي سيظهر في اعلى البروزر
الوسوم التالية توضع غالبا في القسم الثانب الخاص بالتصميم والكتابة وكل شيئ تراه في اي صفحة وب
* وسم تعيين الفقر للفصل بين المقالات والفقرات والسطور ككل <br/>
*وسم الخط الفاصل <hr>
*وسم إضافة رابط الى كلمة او صورة <a href="#">     هنــــــــــــــا الكلمة اووسم الصورة التي نريد ان تاخذا الى رابط معينوالذي رمزنا له ب #   </a>
*وسم اضافة صورة<"هنا نضع مسار الصورة"=img src>

تطبيق عملي للوسوم السابقة:

كتابة الكود 

النتيحة على البوزر


الدرس التالي سيكون حول التنسيق واستخدام CSS

 لاتنسونا من صالح الدعاء

0 التعليقات: