السلام عليكم
ستكون الدروس بإذن الله متسلسلة وفق مخطط سهل وواضح ليسهل علينا التدرج ومعرفة طرق واساليب التصميم وابداعاته اللا منتهية
وسيكون أول الدرزوس ان شاء الله في معرفة المخطط الاولي الذي سنستعين به دائما لبداية اي تصميم نهاية بمعرفة بعض الوسوم اللازمة والافتراضية في صفحة HTML
وقبل الولوج في عالم التصميم لا بد من ادوات للعمل ونحن سنستعمل أفضلها واسهلها والداعم طبعا للغة العربية والمجاني دون كراك او سريال
والبرنامج هو النوت باد++(Notepad++)
لتحميل النسخة الاخير 18 فيفري 2014
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
لاتنسونا من صالح الدعاء



.png)

.png)
.png)




0 التعليقات:
إرسال تعليق