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

العودة   منتديات ArabiaWeather.Com > المنتديات العامة (استراحة المنتدى) > المنتدى التقني > منتدى التصوير والجرافيك و التصميم

الملاحظات

منتدى التصوير والجرافيك و التصميم يختص بما هو جديد في عالم التصوير والكاميرات والجرافيك و التصميم من برامج و تقنيات جديدة

الاخبــــار

رد

[ 09-05-2008 ]   رقم المشاركة 21

 

 

الصورة الرمزية TORNADO

تاريخ التسجيل: Aug 2008

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

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

الدولة/المدينة: Amman

الارتفاع عن سطح البحر: 900 - 1000 متر

شكراً: 2,074
تم شكره 3,033 مرة في 318 مشاركة

افتراضي

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

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

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

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

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

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

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




  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ TORNADO على المشاركة المفيدة:
[ 09-05-2008 ]   رقم المشاركة 22

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

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

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

السلام عليكم مرة اخرى
ملاحظة عن الخطوة السابقة في الخلفيات : قم بفتح ملف جديد واحفظ به الصفحة التي تقوم بعملها واحفظ فيه الصور التي تريد استخدامها حتى لا تستخدم المسارات المتباعدة في اداراج الصور وبالطبع فيما بعد ان شاء الله سنتعلم كيفية تنظيم الملف كامل وادراج ملفات الصور داخل ملف التصميم الخاص بك وافضل ان تقوم بفتح الملف في داخل ملف 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> <br>
	<p>welcome to my website</p>
	<h2>2-welcome to my website</h2> 
     <p>welcome to my website</p>
	 <h3>2-welcome to my website</h3> 
	 <p>welcome to my website</p>
	 <br> welcome to my website
	 
	 </body>
</html>



  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ yasminah على المشاركة المفيدة:
[ 09-05-2008 ]   رقم المشاركة 23

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

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

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

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

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> <br>
ابتدائنا الكتابة في الجسم body احطنا الجملة الاولى welcome to my wbsiteبعلامات جديدة اولها :
كود HTML:
<h1></h1>
النص الذي بينهما هو العنوان الرئيسي ارجع للصفحة المعروضة حتى ترى تأثيرها
ومن ثم
كود HTML:
<h2></h2>
تستعمل لعنوان فرعي رئيسي لاحظ ايضا انهما محاطتان بعلامتين فتح <> عند بداية الجملة </> واغلاق عند نهاية الجملة على فرض انك نسيت اغلاقها سيحدث خطأ عندك وهو ان بقية العناوين لن تستجيب الا لحجم العنوان الاول فانتبه دائما للعلامات ال (tags ) او المغانط >
ثم ان هناك علامة جديدة ايضا وهي :
كود HTML:
<p></p>
هذه العلامة كما رايت في الكود هي تحيط بكتلة من النص التي تمثل فقرة بجملة واحدة او اكثر وايضا ال <p> حاول ان تضع الكود التالي في المستند وانظر لترى النتيجة :

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



  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ yasminah على المشاركة المفيدة:
[ 09-05-2008 ]   رقم المشاركة 24

 

 

الصورة الرمزية TORNADO

تاريخ التسجيل: Aug 2008

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

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

الدولة/المدينة: Amman

الارتفاع عن سطح البحر: 900 - 1000 متر

شكراً: 2,074
تم شكره 3,033 مرة في 318 مشاركة

افتراضي

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

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

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

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

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




  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ TORNADO على المشاركة المفيدة:
[ 09-05-2008 ]   رقم المشاركة 25

حــ م ــزه

 Guest

 

الصورة الرمزية حــ م ــزه

المشاركات: n/a


افتراضي


اشكرك اختي yasminah

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

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



  رد مع اقتباس
[ 09-05-2008 ]   رقم المشاركة 26

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

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

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

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

 


اشكرك اختي yasminah

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

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

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



  رد مع اقتباس
[ 09-06-2008 ]   رقم المشاركة 27

حــ م ــزه

 Guest

 

الصورة الرمزية حــ م ــزه

المشاركات: n/a


افتراضي


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



  رد مع اقتباس
[ 09-07-2008 ]   رقم المشاركة 28

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

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

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

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


كود HTML:
<html>
<head>
<title>my font</title>

</head>
<body bgcolor="#FFFFCC" >
<p align="center">
<font face="Tahoma" size="3" color="#CC00CC">
<b>1-welcome to my website</b><br>
<i>2-welcome to my website </i> <br>
 <u>3-welcome to my website</u><br><br>
<strike>3-welcome to my website</strike><br>
                               
 </font>
	 
	 </p>
		
	 </body>
</html>

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

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

كود HTML:
<p align="center">
ابتدئتها بالمعرف <p> والذي قلنا عنه سابقا انه يتضمن فقرة انه يتضمن فقرة من عدة جمل وهو معرّف
حاوي يحتاج لاقفال الوسم </> راجع التمرين سابقا ولاحظ اين وضعنا علامة اقفال وسم المعرّف <p>.

ثم وضعنا بداخل الوسم نفسه امر التوسيط
كود HTML:
 align="center"
alignاي ان الاصطفاف او الاتجاه (=) واشارة يساوي تعني النتيجة (center) اي التوسيط محاطة باشارتين اقتباس " " (جيد ان نعتاد على علامات الاقتباس لانها سترد معنا كثيرا فيما بعد ).
اذا نتيجة الامر محاطة بعلامتين اقتباس .
ثم فتحنا وسم جديد وكتبنا بداخله المعرف font اي الخط وهو الخاص بتنسيق الخطوط
كود HTML:
<font face="Tahoma" size="3" color="#CC00CC">
ثم ابتدئنا نختار انواع التنسيق التي نريد .. اخترنا المعرف face وهو يستخدم لتحديد نوع الخط الذي تريد ان تستعمله = النتيجة ، اخترت انا على سبيل المثال خط التاهوما tahoma بين علامتين اقتباس .
وهنا يجب ان نورد ملاحظة مهمة : هناك مجموعات خطوط اساسية بالجهاز كخط التاهوما وغيره وهناك انواع خطوط تقوم بانزالها انت على جهازك اضافية الان الخط الذي تختاره هنا ان لم يكن من الخطوط الاساسية فلن تستطيع ان تقرأه جميع الاجهزة يظهر عندك بالجهاز ولايظهر عندي بالجهاز وانما يقراه جهازي كخط عادي لانه لايوجد لدي نوع الخط هذا بالجهاز ولكن طبعا هناك طريقة لعرض الخطوط التي بجهازك وتستطيع ان تقراه كافة الاجهزة ولكنها في المراحل المتقدمة ان شاء الله التي سناتي على ذكرها وهي مرحلة اوراق الانماط او stylesheet لكن مبدئيا احرص على ان لا تقع في هذه الاشكالية .

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

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

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

كود HTML:
<b></b>
كود HTML:
<b>1-welcome to my website</b><br>
لاحظ كيف ابتداناه بالمعرف الجديد <b > ثم الجملة ثم اقفلنا المعرّف </b> ثم علامة ال <br> التي تنقلني الى سطر جديد .


الجملة الثانية ابتداتها ايضا بمعرّف جديد وهو <i> وهو المسؤول عن ميلان الخط اي يعطيني جملة بخط مائل
كود HTML:
<i>2-welcome to my website  </i ><br>
وينطبق عليها ما انطبق على المعرّف <b> انها معرّف حاوي ويحتاج الى اقفال .

ثم الجملة الثالثة ابتداتها بالمعرّف <u> هو المسؤول عن اعطاء خط تحت الجملة
كود HTML:
<u>3-welcome to my website</u><br>
وينطبق عليه شروط المعرّفين السابقين .
الجملة الرابعة ابتداتها بمعرف جديد ايضا وهو <strike> وهو معرف مسؤول عن الخط داخل الجملة
كود HTML:
<strike>3-welcome to my website</strike><br>
وينطبق عليه شروط المعرّفات السابقة .

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

كود HTML:
 </font>
	 
	 </p>
		
	 </body>
</html>
في البداية في اعلى الصفحة كتبنا المعرّف <p> ومن ثم المعرّف <font> في النهاية بعد الانتهاء من هذه الفقرة اقفلنا ال <font> اولا ثم ال<p> بالطبع لان الفونت كانت متضمنة داخل ال المعرّف <p> .



  رد مع اقتباس
[ 09-07-2008 ]   رقم المشاركة 29

 

 

الصورة الرمزية TORNADO

تاريخ التسجيل: Aug 2008

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

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

الدولة/المدينة: Amman

الارتفاع عن سطح البحر: 900 - 1000 متر

شكراً: 2,074
تم شكره 3,033 مرة في 318 مشاركة

افتراضي

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




  رد مع اقتباس
[ 09-12-2008 ]   رقم المشاركة 30

 

 

الصورة الرمزية mos3ab

تاريخ التسجيل: Aug 2008

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

المشاركات: 635

الدولة/المدينة: اربد

الارتفاع عن سطح البحر: 600 - 700 متر

شكراً: 3
تم شكره 4 مرة في 4 مشاركة

افتراضي

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

بانتظار المزيد من ابداعاتك نقره لعرض الصورة في صفحة مستقلة




  رد مع اقتباس
رد


أدوات الموضوع
طرق مشاهدة الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
الانتقال السريع إلى


جميع الأوقات بتوقيت GMT +3. الساعة الآن 09:32 PM.