تعلم تصميم المواقع ...من الصفر للمبتدئين

شكرا لك اخى ولكن بنتظار الدروس الجديده

شكرا لك اخى ولكن بنتظار الدروس الجديده

أود فعلا ان اشكرك أخوي

على هذا المجهود اللي قاعد تبذله

بس عندي ممكن تسرع في الشرح شوية

hمشككككككوووووووووووور فعلا والله مستفيد منها بانتظار الباقي

السلام عليكم

لك شو هل الأسلوب العسل أخي webdesigner أنا بقترح عليك تحاول تكتب قصص. ( فاجأتك موووو)

بس عن جد اسوبك رائع بالشرح ............ ليش عم تطول علينا

السلام عليكم

أريد أتعلم كيفية تصميم المواقع ومن الصفر

الله يعطيك العافيه اخوي

وفي انتظارك على احررررررر من الجمر :)

تحياتي

ألف شكر على الموضوع الرائع ده

دى أول مشاركة ليا فى المنتدى

أنا كنت بدور من زمان على موضوع زى ده

أنا فى كلية الحاسبات الومعلومات ودى فعلا إفادة كبيرة ليا

ألأف شكر مرة تانية على الموضوع ده

السلام عليكم ياجماعة

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

نبتدي الدرس :

( ملحوظة صغيرة ) بالنسبة للون الخلفية هناك أختيارات أكبر للألوان ممكن تختار مابينها وبتدرجات متعددة بدلا من ان ترتبط بدرجو لونية واحدة والطريقة سهلة جدا

كما كنا نفعل سابقاً

<body bgcolor="#sssss">   -----   </body>

اللى احنا عملناه هنا ان احنا حطينا العلامة دي # ( بالضغط على shift+3 ) وكتبنا كود اللون اللى بيتكون من خمس حروف ممكن يكونوا أرقام أو حروف أو حروف وأرقام مع بعض

وعلشان ماتقعدوش تجربوا عشاوائي أنا ضفت مع الموضوع ملف فيه صفحة عليها كل الألوان تقريبا بالأكواد بتاعتها

دلوقتي لو انت عايز تغير في الكلام اللى جوه صفحتك تخليه تخين مايل او تحتية خط اللغة بتديك الصلاحية دي من خلال اكواد سهلة وبسيطة ومألوفة

1- عايزين نخلى الكلام تخين bold ببساطة نعمل كده

نجي نحط الكود ده

<b>---</b> حوالين الكلام اللى عايزين نتخنه اوك

مثال:

 <BODY>
Something really <B>cool</B>
</BODY>

2- عايزين نخلى الكلام مايل Italic ببساطة نحط الكود ده

<i>---</i> حوالين الكلام اللى عايزين نخليه مايل

مثال:

 <BODY>
Something <I>really</I> <B>cool</B>
</BODY>

3- عايزين نخليه الكلام تحتيه خط ببساطة نحط الكود ده حوالين الكلام

<u>---</u>

مثال:

 <BODY>
<U>Something</U> <I>really</I> <B>cool</B>
</BODY>

دلوقتي لو عايزين نذخل كودين مع بعض يعني مثلا عايزين نخلى الخط تخين ومايل في نفس الوقت

هانحط الكود ده والين الكلام

<I><B>-----</B></I>

<BODY>
Something really <I><B>cool</B></I>
</BODY>

وده مثال للاكواد المتداخلة ولازم نخلى بالنا عشان مانلخبطش البراوزر ومانخليش الاكواد متراكبة يعني عشان اوضح هاحط كود صح وكود غلط

الكود الغلط: :angry:

<THIS><THAT></THIS></THAT>

الكود الصح : :D

<THIS><THAT></THAT></THIS>

colors.zip

درس تاني

لو عايز تغير في الخط وخصائصه عندك كود الخط <font>-----</font> وليه مجموعة attribute

هنذكرها أو بعضها

1- الحجم او size : ونقدر نحطه جوه كود الخط بالشكل ده

<font size=x>-------</font>

مثال :

<BODY>
Something really <FONT SIZE=6>cool</FONT>
</BODY>

وفي سبع احجام متاحة هما

هناك ملحوظتان هاماتان

الأولي : عن الكود أو ال tag بيأمر البراوزر بحاجة لكن الخاصية أو ال attribute بيقول للبراوزر إزاي يعمل الحاجة دي

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

نرجع تاني للدرس

2- طبعا احنا عارفين ان نظام الويندرز العادي نازل معاه خطوط زي ال arial و ال tahoma وغيرهم كتير طيب انا عايز احدد نوع الخط اللى هاكتب بيه سهلةقوي كل اللى هاتعمله انك هاتحط في كود الخط كلمة face بين علامتين تنصيص

الكود اهو

<FONT FACE="YOUR _FAVOURITE_FONT_NAME">---------</font>

مثال:

<BODY>

Something really <FONT FACE="ARIAL">cool</FONT>

</BODY>

بس خلي بالكوا الخط مش هايبان إلا إذا كنتوا منزلينه عالكمبيوتر ( لو حد مش فاهم الحكاية دي يقولي )

وخلى بالكوا برضه افترضزا الخط انت منزلينه وباين في البراوزر بتاعك بس الناس اللى بتتصفح موقعكوا مش منزلينه ساعتها البراوزر بتاعهم هايظهر الكلام بالخط الافتراضي default

3- اللون بتاع الخط هنلاقي الموضوع زي الخلفية بالظبط

الكود اهو

<font color="#sssss">---------</font>

مثال:

<BODY>
Something really <FONT COLOR="#FF0000">cool</FONT>
</BODY>

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

مثال:

<BODY BGCOLOR="#FFFFFF">
Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U>   
</BODY>

دلوقتي هانتكلم علىكود اسمه Heading ( مش لاقياله ترجمة )

أنا هاكتب المثال عالطول وهايوضح من المثال

<H1>Something really cool<H1>
<H2>Something really cool<H2>
<H3>Something really cool<H3>
<H4>Something really cool<H4>
<H5>Something really cool<H5>
<H6>Something really cool<H6>

والكود ده ليه خاصية حلوة قوي اسمها المحاذاة align

مثال:

<H2 ALIGN="left">Something really cool<H2>
<H2 ALIGN="center">Something really cool<H2>
<H2 ALIGN="right">Something really cool<H2>

والى اللقاء في الدرس الجاي ان شاء الله

طب حد يرد عليا يقولي بشرح كويس وحش أبطل لكن سايبني اشرح مع نفسي افرض كان وحش وماحدش فاهم :wacko:

ممتاز على فكرة انا الحمد لله شغال HTML و CSS كويس ومنتظر اتعلم الباقى وشرحك مع الصور روعه جدا والى الامام...بس يا ريت متتأخروش فى موضوع الphpوال asp عشان انا بدأت بالphp بس واقف شويه

السلام عليكم

بجد بجد بجد تانى ابداع انا بردوا بحب html

ولكن انتم ليه توقفتوم ممكن حد يكمل باقيه الشرح

لحد هذا كله تمام ونحن نشكركم على مجهودكم

على فكره الشرح بجد وفى جد بمعنى ان اى شخص مبتداء

ممكن له على اتباع خطواتكم عمل منتدى فى غايه الروعه

ولكن نحن ننتظر باقيه الابداع والباقيه تاتى

وايضاااااااااااااااااااااا للحديث باقيه وشكراااااااااااااااا

السلام عليكم

ايه يا جماعه ما فى مشاركات اخرى

ما احد يريد انا يكمل عمليه التعليم

اتمنى من اصدقائى المشاركه هنا

ولكم جميعا جزيل الشكر

شيئ جميل نتمنى المتابعة

i wonder if i can to participate and i don't know if i had come late or not

thanks

احم احم...انا اتعلمت الهتمل وممكن اكمل حجات بسيطه معاكم بس انا بجد عمرى ما هاوصل لدرجة الموجودين فى المنتدى وكمان انا هسافر كمان يوم بس ان شاء الله لو محدش كمل اناممكن اكمل معاكم الهتمل بس هتنقصنى رتوش يكملها المحترفين...وانا بالخدمة :rolleyes:

السلام عليكم

مرحبا بك عزيز العضو فى منتدى html

ونحن نرحب بك ونتمنى منك الادلاء بما تعرفه

نحن كلنا حلقه متواصله حلقه تلو الاخرى

وهذا بعد اذن اخواتنا المحترفين اوك

وشكرااااااااااااااااااااا

:D هاي ياجماعة ازيكوا اسفة على التاخير

نبتدي الدرس على طول

هنقول دلوقتي اللينكات البراوزر بيخلى الوانها default وازاي نغيرها

هو ده ال defualt

نقدر نغير الحاجات دي في كود ال <body>

مثال

<BODY BGCOLOR="#00000" TEXT="#FFFF66" LINK="#00FF66" VLINK="#00BB33" ALINK="#00CCFF">
Something really cool
</BODY>

دلوقتي هانتعلم حاجة مهمة عن ازاي البراوزر بيقرا الكود ويترجمه او بيشتغل ازاي

يعني مثلا لو كتبنا كود زي ده

<BODY> 
Something really cool 
like an icecube!
</BODY>

هايظهر الكود كده

او لو حتى جربنا الكود ده

<BODY>
Hey! 
What's
going
on
here??
</BODY>

هيظهر كده

البراوزر مش يبفهم المسافات او السطور الجديدة لو عايز تبتدي سطر جديد لازم تطتب الكود ده <br>

مثال

<BODY>
Hey! 
<BR>What's 
<BR>going 
<BR>on 
<BR>here?? 
</BODY>

وهيظهر الكود كده

الكود <br> بيقول للبراوزر ابتدي من سطر جديد

بس هل ممكن استحدم الكود ده في اني افوت سطر طبعا ممكن

مثلا

<BODY>
<BR>What's
<BR>going
<BR>
<BR>on
<BR>
<BR>here??
</BODY>

ودلوقتي هانقول على كود القطعة او paragraph

تقدر تفكر في كود القطعة على انه بلوك من الكلام او السطور

مثال

<BODY>
<P>Something really cool</P>
</BODY>

طبعا هاتقولوا انه مود مالوش لازمة لانه مش عمل حاجة جديدة بس في ميزة للكود ده انك لو ابتديت كود paragraph جديد هايبتدي سطر جديد نقول ممثال عشان الموضوع يوضح اكبر

<BODY>
<P>Something really cool</P>
<P>like an icecube</P>
</BODY>

وهيظهر كده

وبرضه ليه كزايا حلوة قوي ممكن نحطله align

<BODY>
<P ALIGN="left">Something really cool</P>
<P ALIGN="center">like an icecube</P>
<P ALIGN="right">or a popsicle</P>

<P ALIGN="left">
Something really cool
<BR>like an icecube
<BR>or a popsicle
</P>

<P ALIGN="center">
Something really cool
<BR>like an icecube
<BR>or a popsicle
</P>
</BODY>

وهيظهر كده

في حاجة كمان على الرغم اني حطيت كود الاغلاق </p>

الا انه مش ضروري في كود ال paragraph

<P>Some stuff

<P>More stuff

is the same as...

<P>Some stuff</P>

<P>More stuff</P>

وللحديث بقية

:D :D :D :D :D :D

السلام عليكم

عن كل الناس الذين يتوقون للشرح الوافى اشكرك

جداااااااااااااااااااااااا

وياريت ما تتاخرى علينا وشكراااااااااا

السلام عليكم

عن كل الناس الذين يتوقون للشرح الوافى اشكرك

جداااااااااااااااااااااااا

وياريت ما تتاخرى علينا وشكراااااااااا

ممتاز جدا جدا جدا جدا....ويا ريت ندخل فى الجداول لان المتدربين هنا محتاجين اهم من الاشياء دى ممكن حضرتك تسيبيها فى الاخر وشغل الجداول هو اساس الهتمل...

الأخ es007 اكيد الجداول ممهمة لكن اسم سلسة التعليم من الصفر وللمبتدئين فخلينا نكمل بس الاساسيات بسرعة وهانخش على طول على الجداول

واوعدكوا اني هحاول مش اتاخر بس بجد ظروف دراستي متعبة شوية فسامحوني اذا اتاخرت

نبتدي الدرس :D

في كود مهم نسيت اذكره كود الcenter وترجمته الحرفية المركزية او بالعامية اي حاجة بين الكود ده تبقى في مركز او نص الصفحة بتاعتي

ناخد مثال

<BODY>
<CENTER>Something really cool</CENTER>
</BODY>

وهيظهر في نص الصفحة بالشكل ده

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

دلوقتي انا عايزاكوا تبصوا بصة على الكود ده

<BODY>
Something        really        cool
</BODY>

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

طب تعالوا نضوف البراوزر هايشوف المسافات اللى احن عملناها في الكود اللى فات ولا لأ

زي ماحنا شفنا البراوزر مش بيفهم غير مسافة واحدة بس ممكن الحكاية دي الناس تشوفها حاجة غبية في البراوزر لكن كده احسن لانها بتديك تحكم كامل في الشكل النهائي

في كود بسيط للمسافات هو

فبدل الكود اللى فات ممكن نكتب كده

<BODY>
Something        
really        
cool
</BODY>

وهايكون الشكل كده

ياجماعة في ملحوظة مهمة العلامة دي & تعني بداية حروف خاصة (special character) والعلامة دي

;

معاناها نهاية الحرف الخاص والحروف اللى مابين العلامتين دول عبارة عن اختصار للوظيفة بتاعة الحرف الخاص او عن معناه

وخلى بالكوا لازم يكون الكلمة مابين العلامتين حروف صغيرة small

دول ستة امثلى على الحروف الخاصة

اقتباس
      non-breaking space
     <       < less-than symbol
     >       > greater-than symbol
     &      & ampersand
     "     " quotation mark
     ­      ­ soft hyphen

انت مش محتاج تستخدمهم على طول الخط لكن لنت لو كتبت الحرف ده من غير ماتكتب الكود بتاعه في الكلام العادي يعني هاتلخبط الباروزر

وانا حطيت ملف فيه كل الحروف الخاصة تقريبا انت احتمال كبير مش تستخدمهم لكن لو عايز تستخدمها تبقى مطمن انهم معاك

special.htm

ممتاز ممتاز...روعه دروس ممتازة بصراحة اكتشفت انى فعلا ناسى حجات صغيره ومهمه جدا...جزاكى الله خيرا

:) :) something really cool

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

وما شاء الله عليكي اخت هاميس .. وان شاء الله نكمل الدروس كلها وميبقاش في تاخير تاني