تصميم مواقع الانترنت من الصفر حتى الاحتراف - الصفحة 3

ملفي الشخصي · [ **09-05-2008** ]

الموضوع ممتع للغاية واتمنى من الاخوة الاعضاء

ان يلاحظو اثر ((tags)) ((الوسوم)) وللتوضيح اكثر

الوسوم ((tags)) : هي عبارة عن اوامر في لغة html تستخدم لغرض محدد

والمثال الذي وضعته ياسمينة يوضح اكثر ما اقصد

<body bgcolor="blue> ال bgcolor تدعى وسم وهي شفيرة او امر يكتب لاعطاء لون للخليفة ,,,
و background ايضا وسم ,,

وهناك العديد العديد من تلك الوسوم التي لكل واحدة منها اثر مختلف ,,

اشكرك مرة اخى ,,بانتظار المزيد

ملفي الشخصي · [ **09-05-2008** ]

السلام عليكم مرة اخرى
ملاحظة عن الخطوة السابقة في الخلفيات : قم بفتح ملف جديد واحفظ به الصفحة التي تقوم بعملها واحفظ فيه الصور التي تريد استخدامها حتى لا تستخدم المسارات المتباعدة في اداراج الصور وبالطبع فيما بعد ان شاء الله سنتعلم كيفية تنظيم الملف كامل وادراج ملفات الصور داخل ملف التصميم الخاص بك وافضل ان تقوم بفتح الملف في داخل ملف My Web Site الموجودة داخل ملف My Documents ان لم يكن ملف My Web Site موجود قم انت بإنشائه داخل ال My Documents

الاخ MotasemCom شكرا لك ..

الخطوة الثالثة :
في هذه الخطوة سنتعلم تنسيق الخطوط

كود HTML:

<html> <head> <title>my web</title> </head> <body bgcolor="#FFFF99"> <h1>1-Welcome to my website</h1> welcome to my website <h2>2-welcome to my website</h2> welcome to my website <h3>2-welcome to my website</h3> welcome to my website welcome to my website </body> </html>

ملفي الشخصي · [ **09-05-2008** ]

ستصبح الصفحة لديك كهذه

http://www.freewebtown.com/jordan_am/yasminah.html

في التمرين السابق اضفنا شيء جديد للعمل لاحظ انه عندما اردنا الكتابة فطبعا الكتابة كانت في الجسم body كما قلنا سابقا ان ملف htmlالذي لدينا يتكون من :
اولا

كود HTML:

<html> </html>

ابتدئنا بها لتعريف المستعرض ان الملف هو ملف html واحطناهما بعلامتين فتح واغلاق ومابين العلامة الاولى والاخيرة تاتي كل محتويات صفحة ويب اي نبدأ المستند بالعلامة المفتوحة وعند الانتهاء نضعها بالعلامة المقفلة </>.
اضفنا بعد ذلك ال head

كود HTML:

<head> <title>my web</title> </head>

وقلنا انه بمثابة الراس لصفحة الويب ويسمح لك الرأس باخبار اشياء عن صفحة الويب
وال title والتي تظهر عنوان لك العنوان في اعلى الصفحة .
كلهم طبعا بين علامتين <> فتح </> اغلاق اذا اغفلت علامة من تلك العلامات فلن يظهر لك شيء في الصفحة ويخبرك المتصفح ان هناك خطأ .
واضفنا كذلك :

كود HTML:

<body></body>

وقلنا ال body هو الجسم وكل محتويات الصفحة التي تظهر توضع في ال body >

الان في الخطوة الثالثة دخلنا الى خطوة اخرى مهمة الا وهي الكتابة لاحظ معي الكود لنشرح الان ما جاء فيها والاضافات التي تمت فيها

كود HTML:

<body bgcolor="#FFFF99">

اخترنا لون قيمة لون الخلفية

كود HTML:

<h1>1-Welcome to my website</h1> 

ابتدائنا الكتابة في الجسم body احطنا الجملة الاولى welcome to my wbsiteبعلامات جديدة اولها :

كود HTML:

<h1></h1>

النص الذي بينهما هو العنوان الرئيسي ارجع للصفحة المعروضة حتى ترى تأثيرها
ومن ثم

كود HTML:

<h2></h2>

تستعمل لعنوان فرعي رئيسي لاحظ ايضا انهما محاطتان بعلامتين فتح <> عند بداية الجملة </> واغلاق عند نهاية الجملة على فرض انك نسيت اغلاقها سيحدث خطأ عندك وهو ان بقية العناوين لن تستجيب الا لحجم العنوان الاول فانتبه دائما للعلامات ال (tags ) او المغانط >
ثم ان هناك علامة جديدة ايضا وهي :

كود HTML:



هذه العلامة كما رايت في الكود هي تحيط بكتلة من النص التي تمثل فقرة بجملة واحدة او اكثر وايضا ال حاول ان تضع الكود التالي في المستند وانظر لترى النتيجة :

كود HTML:

welcome to my website welcome to my website welcome to my website

لاحظ انني في هذا الكود كتبت جملة واحطتها بهذه العلامة ثم كتبت جملة اخرى واحطتها بنفس العلامة وهكذا فتلاحظ النتيجة ان كل جملة ظهرت على سطر لوحدها حتى لو انك نسختهم بجانب بعضهم البعض فعند معاينى الصفحة ستخرج كل جملة على سطر وبين كل سطر مسافة معينة منسقة وهذا يعني انك لو كتبت في ال html جملة وضغطت انتر لتنزل سطر وتكتب الجملة الاخرى لن يستجيب المستعرض لتلك الحركة فعند عرض الصفحة ستظهر جميعها على سطر واحد اذا ما الذي يفصل بين الاسطر والجمل مرت معنا الان علامةهي وهناد ايضا علامة اخرى وقد مرت معنا في التمرين وهي هذه العلامة عندما تنتهي من جملة وتريد الانتقال الى جملة جديدة في سطر جديد تضع هذه العلامة لاحظ ان هذه العلامة لا تحتاج الى علامة اغلاق </> .
اذا نستنتج انه هناك معرّفات html هي معرفات حاوية container tags والتي تحتاج معرّف بداية ونهاية <> و </> وهناك معرّفات خالية empty tags هي عبارة عن معرفات مستقلة لا تحتاج الى معرّف نهاية مثال عليها معرّف ال الذي مر معنا الان .
انصح المتعلمين دائما بالتجرية وحتى يثبت التمرين لديهم ان يقوموا بتجربته مرة ومرتين وثلاثة حتى يشعرون انه اصبح تمام لديهم زشيء مهم ايضا بعد التجربة الاولى التي نضعها وهي نسخ الكود افضل ان تعود اليها مرات اخرى وتكتبه بيدك حتى تأخذ يدك عليه ولا بد من ان تخطىء مرة واثنتين وتنسى احيانا ولكن من الخطأ ستتعلم وتكتشف امور اخرى .
نتابع مع الخطوط ان شاء الله في الفقرة التالية

ملفي الشخصي · [ **09-05-2008** ]

اذا نستنتج انه هناك معرّفات html هي معرفات حاوية container tags والتي تحتاج معرّف بداية ونهاية <> و </> وهناك معرّفات خالية empty tags هي عبارة عن معرفات مستقلة لا تحتاج الى معرّف نهاية مثال عليها معرّف ال الذي مر معنا الان .

نعم هذا شيء مهم ,,

وبالنسبة للوسم المنسق للخطوط فانه يتدرج من <h1>....................لغاية...............<h6>

الرقم بجانب العنصر h يشير لمستوى العنوان,,

اشكرك جدا بانتظار الدروس المقبلة ,,

ملفي الشخصي · [ **09-05-2008** ]

اشكرك اختي yasminah

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

اشكرك مرة اخرى وفي انتظار الدرس القادم

ملفي الشخصي · [ **09-05-2008** ]

اقتباس: المشاركة الأصلية كتبت بواسطة حــ م ــزه

اشكرك اختي yasminah

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

اشكرك مرة اخرى وفي انتظار الدرس القادم

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

ملفي الشخصي · [ **09-06-2008** ]

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

كلامك صحيح اختي كثيرا ما تواجهني مثل هذه المشاكل

ملفي الشخصي · [ **09-07-2008** ]

السلام عليكم جميعا
نتابع اليوم الحديث عن الخطوط
قم بفتح مستند جديد من ال Notepad واحفظه كما تعلمنا في الخطوة الاولى او قم بالتعديل على صفحتك السابقة من view ثم من source كما تعلمنا في الخطة الثانية ..وانا افضل مع كل اضافة عمل مستند جديد ..
قم بنسخ الكود التالي والصقه في المستند

كود HTML:

<html> <head> <title>my font</title> </head> <body bgcolor="#FFFFCC" > 1-welcome to my website 2-welcome to my website 3-welcome to my website <strike>3-welcome to my website</strike> </body> </html>

انظر النتيجة داخل هذه الصفحة
http://www.freewebtown.com/jordan_am/yasminah1.html

من خلال المثال السابق نلاحظ اننا اضفنا معرّفات جديدة وهي تابعة للمعرف في الجزء body
قبل ان أبدأ بالكتابة اخترت ان تكون جهة الكتابة هي التوسيط اي توسيط النص في منتصف الصفحة
ودلالتها

كود HTML:



ابتدئتها بالمعرف والذي قلنا عنه سابقا انه يتضمن فقرة انه يتضمن فقرة من عدة جمل وهو معرّف
حاوي يحتاج لاقفال الوسم </> راجع التمرين سابقا ولاحظ اين وضعنا علامة اقفال وسم المعرّف .

ثم وضعنا بداخل الوسم نفسه امر التوسيط

كود HTML:

align="center"

alignاي ان الاصطفاف او الاتجاه (=) واشارة يساوي تعني النتيجة (center) اي التوسيط محاطة باشارتين اقتباس " " (جيد ان نعتاد على علامات الاقتباس لانها سترد معنا كثيرا فيما بعد ).
اذا نتيجة الامر محاطة بعلامتين اقتباس .
ثم فتحنا وسم جديد وكتبنا بداخله المعرف font اي الخط وهو الخاص بتنسيق الخطوط

كود HTML:



ثم ابتدئنا نختار انواع التنسيق التي نريد .. اخترنا المعرف face وهو يستخدم لتحديد نوع الخط الذي تريد ان تستعمله = النتيجة ، اخترت انا على سبيل المثال خط التاهوما tahoma بين علامتين اقتباس .
وهنا يجب ان نورد ملاحظة مهمة : هناك مجموعات خطوط اساسية بالجهاز كخط التاهوما وغيره وهناك انواع خطوط تقوم بانزالها انت على جهازك اضافية الان الخط الذي تختاره هنا ان لم يكن من الخطوط الاساسية فلن تستطيع ان تقرأه جميع الاجهزة يظهر عندك بالجهاز ولايظهر عندي بالجهاز وانما يقراه جهازي كخط عادي لانه لايوجد لدي نوع الخط هذا بالجهاز ولكن طبعا هناك طريقة لعرض الخطوط التي بجهازك وتستطيع ان تقراه كافة الاجهزة ولكنها في المراحل المتقدمة ان شاء الله التي سناتي على ذكرها وهي مرحلة اوراق الانماط او stylesheet لكن مبدئيا احرص على ان لا تقع في هذه الاشكالية .

ثم وضعت معرف size وهو معرّف حجم الخط الذي اريد = النتيجة ، بين قوسين اقتباس " " اخترت الخط حجم ثلاثة 3 .. حاول ان تعمل تدريب لاحجام الخطوط في كل مرة ممكن ان تزيد او تنقص في ارقام الاحجام .

ثم وضعت معرّف اللون color = النتيجة بين قوسين اقتباس " " قيمة اللون . ثم اغلقت الوسم > .

ابتدأت الجملة الاولى بمعرف جديد وهو معرّف او > وهو معرّف حاوي container tags اي يحتاج الى علامتين فتح واغلاق وهو معرّف مسؤول عن الخط العريض اي يعطي الخطم حجم عريض

كود HTML:



كود HTML:

1-welcome to my website 

لاحظ كيف ابتداناه بالمعرف الجديد ثم الجملة ثم اقفلنا المعرّف ثم علامة ال التي تنقلني الى سطر جديد .

الجملة الثانية ابتداتها ايضا بمعرّف جديد وهو وهو المسؤول عن ميلان الخط اي يعطيني جملة بخط مائل

كود HTML:

2-welcome to my website 

وينطبق عليها ما انطبق على المعرّف انها معرّف حاوي ويحتاج الى اقفال .

ثم الجملة الثالثة ابتداتها بالمعرّف هو المسؤول عن اعطاء خط تحت الجملة

كود HTML:

3-welcome to my website 

وينطبق عليه شروط المعرّفين السابقين .
الجملة الرابعة ابتداتها بمعرف جديد ايضا وهو <strike> وهو معرف مسؤول عن الخط داخل الجملة

كود HTML:

<strike>3-welcome to my website</strike> 

وينطبق عليه شروط المعرّفات السابقة .

وفي النهاية لاحظ معي عملية اقفال العرّفات التالية كيف ابتدئنا نقفلها :

كود HTML:

 </body> </html>

في البداية في اعلى الصفحة كتبنا المعرّف ومن ثم المعرّف في النهاية بعد الانتهاء من هذه الفقرة اقفلنا ال اولا ثم ال بالطبع لان الفونت كانت متضمنة داخل ال المعرّف .

ملفي الشخصي · [ **09-07-2008** ]

نشكرك على هذا الموضوع بانتظار المزيد ,,

ملفي الشخصي · [ **09-12-2008** ]

والله موضوع طقع هههههههههههههههه
مشكورة كتير اخت ياسمينة

بانتظار المزيد من ابداعاتك

الاخبــــار
إضافة خبر