الدرس (21) تعلم html : الفرق بين block و inline

بسم الله الرحمن الرحيم

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

اما inline تكون وسومها لا تتفرد بسطر خاص فيها في صفحة الويب بحيث تكون عدة وسوم inline في سطر واحد في صفحة الويب لا اقصد في صفحة البرمجة عند كتابة الوسوم

مثال على كلامي في الفرق بين inline و block

الصورتين السابقتين اللتين باللون الأزرق هما يندرجان تحت نوع inline بحيث جائت الصورتين على سطر واحد اما الكلمتين test تقعان كل منهما على سطر واحد لإن كتبت كل كلمة بي الوسمين
<div></div>
وهذين الوسمين يندرجان تحت مفهوم block
اما الصورة وسمها هو 

<img src="هنا تكتب رابط الصورة او موقع الصورة">

لنسرد بعض الوسوم من النوعين inline و block

<p></p>

الذي سبق من نوع block سبق وشرحته في درس سابق حيث يأخذ سطر كامل في صفحة الويب 
<h1></h1>
<h2></h2>
هذه الوسوم h1 و h2 تندرج تحت نوع الblock بحيث تأخذ كل منها سطر كامل بها
يوجد ايضاً هذا الوسم 
<span></span>
حيث يكتب داخله نصوص وهو من النوع inline
فبهكذا نكون قد تعرفنا على ما هو inline و block والفرق بينهم وللملاحظة اذا كتبنا وسم inline و وسم block كما قلت وسم الblock يأتي في سطر خاص به في صفحة الويب ولا يمكن جمع النوعين في سطر واحد , درس اليوم كان درس سهل وبسيط وهو اخر درس في هذه الدورة ان شاء الله ان تكونون قد استفدتم وان تكون المعلومات التي قدمتها ان تفيدكم في مسار حياتكم و السلام عليكم و رحمة الله و بركاته 

اقرأ تكملة الموضع

الدرس (20) تعلم html : النماذج / form (الجزء الثاني)

 بسم الله الرحمن الرحيم

سيكون هذا الدرس هو التكملة لدرس السابق وفيه سنتعرف على جزئيات ثانية غير الوسم <input>

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

<textarea></textarea>

هذا الوسم عند انشاءه يظهر في صفحة الويب بهذا الشكل

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

<textarea>hello</textarea>

وتكون النتيجة مثل هكذا

و التحكم بهذا الجدول يكون بعدة اكواد ومنها هذا الكود

rows="هنا يكتب رقم"

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

rows="5"

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

cols="هنا يكتب رقم"

وهذا الكود مثل الذي سبقه الرقم تضعه في الخانة الموضحة ويوضع بعد textarea في وسم البداية

الكود الثالث او الكلمة هي readonly هذه تكتب في وسم البداية من textarea حيث يصبح الجدول قابل للقراءة لا يكتب فيه من قبل المستخدم وتكتب بهذا الشكل 

<textarea readonly>

ملاحظة : يمكن كتابة جميع الأكواد في وسم البداية textarea وراء بعضها , انا فقط كنت اشرح الأكواد لا اقصد ان لا يمكن كتابة غير كود واحد في textarea 

الشيء الثاني في هذا الدرس هو ال select و ال option فمثلاً عند كتابة هذين الوسمين

<select></select>

فسوف تظهر هذه النتيجة

هذا الشيء هو زر اختيار من خلاله تظهر قائمة تختار منها عند الضغط عليها والخيارات هي الوسوم

<option>هنا يكتب خيار</option>

<option>هنا يكتب خيار</option>

<option>هنا يكتب خيار</option>

الوسوم السابقة بين الوسمين 

<select></select>

فتكون النتيجة هكذا

عند الضغط عليها تصبح هكذا

هذه يمكن تنسيقها بعدة اكواد التنسيقات على وسوم select و option اذا اتجهنا للوسم <select> فيمكن كتابة فيه عدة اكواد فمثلاً الكود

name="هنا يكتب الاسم"

الأسم هو الذي يرسل لسرفر عند ارسال النموذج له من اجل تعريف هذه القائمة 

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

مثل ما سبق اصبح زر الأختيار بهذا الشكل وغير قابل للضغط عليه

نأتي الأن لما داخل الوسمين

<select></select>

فيمكن تنسيق الوسوم

<option>car</option>

<option>Bicycle</option>

<option>Motorcycle</option>

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

هذا الشيء يمكن عمله بوضع كلمة selected في الوسم <option> بعد كلمة option بهذا الشكل

<option selected>Bicycle</option>

ايضاً يوجد كود هو يميز كل وسم option وقت ارسال النموذج كاملاً لسرفر هذا الكود هو

value="هنا يكتب اسم او رقم"

والكود السابق يكتب بالوسم <option> بهذا الشكل

<option value="هنا يكتب اسم او رقم">car</option>

ايضاً يوجد كود يمكن وضعه في option من اجل تعطيله سأعطيكم مثال 

كلمة motorcycle اصبحت باهتة في الصورة الثانية اي اصبحت غير قابلة للضغط او اختيارها ويمكن ذلك بإضافة كلمة disabled في الوسم <option> بهذا الشكل

<option disabled>Motorcycle</option>

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

يمكنك ذلك بوضع كل مجموعة وسوم 

<option></option>

بين وسمين

<optgroup label="هنا يضع اسم للمجموعة">

</optgroup>

قائمة الخيارات في الصورة السابقة كتبت بهذه الاكواد

<select>

<optgroup label="Means of transport">

<option>car</option>

<option>Bicycle</option>

<option>Motorcycle</option>

</optgroup>

<optgroup label="Electronic Devices">

<option>Computer</option>

<option>Mobile</option>

</optgroup>

</select>

وايضاً يمكن ان نجعل لمجموعة معينة من وسوم option ان تكون غير قابلة للأختيار كله يمكن ذلك بوضع كلمة disabled في الوسم <optgroup> بهذا الشكل

<optgroup disabled>

ويوجد شيء لم اتكلم عنه في الجزء الأول من النماذج وهو شيء يتعلق بالبرمجة بعيد عن لغة html وهو حقل ادخال مخفي لا يظهر للمستخدم العادي الوسم هو

<input type="hidden" value="هنا تضع قيمة معينة">

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

الصورة السابقة اشرت بالأسهم على تنظيم النموذج من خلال وضع عناصر النموذج بمستطيلات وتسمية كل مستطيل بأسم معين

فعلت ذلك بوضع كل مجموعة عناصر من النموذج بين وسمين هما

 <fieldset>

</fieldset>

وتحت وسم <fieldset> يكتب وسمين

  <legend>هنا تكتب عنوان المستطيل</legend>

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

<!DOCTYPE html>

<html>

    <head>
        <meta content=”text/html; charset=windows-1256″ http-equiv=”Content-Type” />

        <title>تجربة</title>    

    </head>

    <body>

        <form>

            <fieldset>

                <legend>personal information</legend>

                <label>username</label>    

                <input type="text" maxlength="10">

                <br>

                <br>

                <label>password</label>

                <input type="password">

                <br>

                <br>

                <br>

                <label>Upload a Photo</label>

                <br>

                <input type="file">

                <br>

                <br>

                <label>say something about yourself</label>

                <br>

                <textarea rows="5" cols="50" readonly></textarea>

                <br>

            </fieldset>

            <br>

            <fieldset>

                <legend>other information</legend>

                <label>Choose Browser</label>

                <br>

                <br>

                <input type="radio" name="Browser" value="chrome"> chrome

                <br>

                <br>    

                <input type="radio" name="Browser" value="opera"> opera

                <br>

                <br>

                <br>

                <label>Why have</label>

                <br>

                <br>

                <select>

                    <optgroup label="Means of transport">

                        <option>car</option>

                        <option selected>Bicycle</option>

                        <option disabled>Motorcycle</option>

                    </optgroup>

                    <optgroup disabled label="Electronic Devices">

                        <option>Computer</option>

                        <option>Mobile</option> 

                    </optgroup>

                <br>

                </select>

              

                <br>

                <br>

            </fieldset>

            <fieldset>

                <legend>Buttons singup</legend>

                <input type="submit" value="singup">

                <input type="reset">

                <input type="checkbox">

            </fieldset>

        </form>

    </body>    

    </html>

الذي باللون الأحمر و الأزرق هم الذين تكلمت عنهم الذين يضعون عناصر النموذج في جداول او مستطيلات

وبهذا اكون قد وصلت لنهاية الدرس ان شاء الله الدرس القادم هو خاتم هذه الدورة و السلام عليكم ورحمة الله وبركاته

اقرأ تكملة الموضع

الدرس (19) تعلم html : النماذج / form (الجزء الأول)

 بسم الله الرحمن الرحيم

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

 فمثلاً هذا الشكل التالي يمثل نموذج

من اجل صنع ما سبق يلزمنا كتابة بعض الأوامر والتي تكتب كلها بين الوسمين التاليين او الجزء body

<body>

</body>

 والأمر الرئيسي في النماذج هو 

<from>

</frome>

الوسمين السابقين هم الأساس في النماذج يعني ما يكتب داخلهما يمثل النموذج
الأن ما داخل الوسمين السابيقين يوجد عدة وسوم الوسم الأول
<input>
هذا الوسم ليس له وسم نهاية ومن هذا الوسم يندرج تحته عدة انواع يمكن تمييزها من خلال ما يكتب ما داخل الوسم نفسه بعد كلمة input فمثلاً هذا الكود 

name="هنا يكتب الأسم"

الأسم الذي يكتب لا يؤثر على صيغة الوسم بل يعطيه اسم للوسم وقت ارسال النموذج لسرفر الذي يحوي الموقع
فالوسم يصبح على الشكل التالي

<input name="هنا يكتب الأسم">

النوع الأول للوسم السابق هو مكان ادخال للنصوص والأرقام وهو ما يستخدم في كتابة الأيميل او اسم المستخدم في المواقع مثال على هذا

مثل هذا النوع يتكون من كتابة الوسم <input> وكتابة ما دخله بعد كلمة input الكود 

 type="text"

لتصبح النتيجة هكذا

<input type="text">

واذا كتبنا الأسم ليست مشكلة لتصبح النتيجة هكذا

<input name="هنا يكتب الأسم" type="text">

كلمة username كتبتها بين الوسمين 

<label>username</label>    

التي وضعتها قبل وسم

<input name="هنا يكتب الأسم" type="text">

لتكون النتيجة هكذا

<label>username</label>    

<input name="هنا يكتب الأسم" type="text">

وكلا الوسمين مكتوبين بين الوسمين

<from>

</frome>

لتكون النتيجة هكذا

<from>

<label>username</label>    

<input name="هنا يكتب الأسم" type="text">

</frome>

ايضاً يكتب داخل الوسم <input> كود من خلاله ان يكون الحقل الخاص بالusername فارغ بل يكون كلام يمكن مسحه وكتابة اسم المستخدم مثلاً 

مثال على كلامي

الكود الذي استخدم هو

value="osama"

ليصبح وسم <input> هكذا

<input type="text" value="osama">

ايضاً يوجد كود لجعل نص يظهر بالمكان الفرغ لاكن يكون فاتح ويذهب عند الكتابة في المربع

الكود هو

placeholder="write here .."

وعند وضه داخل الوسم input تصبح النتيجة

<input type="text" placeholder="write here ..">

عندما يكتب داخل الوسم input تصبح النتيجة مثل هذا الشكل

واذ كتبنا ما داخل المستطيل يذهب النص لتصبح النتيجة هكذا

اما اذا اردنا تحديد طول ما يكتب داخل المستطيل يعني كم رقم وحرف يكتب فيمكننا ذلك بكتابة هذا الكود بعد كلمة input في وسم <input> 

maxlength="10"

حيث يتغير رقم 10 بالعدد الذي تريده ان يكتب في المستطيل اي عدد الأحرف و الأرقام

النوع الثاني ل input

هو الخاص بكلمات السر ويتكون بهذا الشكل

<input type="password">

حيث يضاف بعد input عبارة

type="password"

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

النوع الثالث هو هذا المربع

اذا ضغطنا عليه يصبح هكذا

هذا الزر يفيد مثلاً تذكير المتصفح ببيانات التسجيل من اجل لا اكتبها كل مرة

الكود هو 

type="checkbox"

وعند كتابته داخل الوسم <input>

<input type="checkbox">

النوع الرابع هو زر التسجيل هو يقوم بإرسال البيانات للسرفر الزر هو 

 الزر يكتب بكتابة الكود 

 type="submit"

نكتبه داخل الوسم <input> ليكون هكذا

<input type="submit">

لكن اذا كتبنا مثل هذا الشيء سوف يكون مكتوب داخل الزر هذه العبارة

وهذه الجملة تتغير بحسب اللغة في الجهاز

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

value="هنا تكتب"

هذا الكود يكتب داخل الوسم <input> الذي يحوي 

type="submit"

ليكون الوسم بالشكل النهائي مثل هذا

<input type="submit" value="هنا تكتب نص او كلمة">

النوع الخامس هو يتمثل بإعادة تعيين افتراضيات الذي غيرناه في النموذج الكود المسؤل عنه هو هذا الكود

type="reset"

يوضع هذا الكود بعد input لتكون النتيجة مثل هكذا

<input type="reset">

وهذه الصورة تمثل ما كتبت

ويمكن تغيير ما مكتوب داخل الزر الذي صنعناه بإضافة الكود 

value="هنا تكتب النص"

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

type="file"

 وعند كتابته داخل الوسم <input> تصبح النتيجة

<input type="file">

النوع السابع هو زر يستخدم مع لغة javascript يكفي بهذا الدرس ان تعرف هذا النوع لكن طريقة ربطه مع الjavascript هذا شيء ستعرفه اذا تعلمت الjavascript 

الكود المسؤول عنه هو

type="button"

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

value="هنا يضع الكلام"

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

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

الكود المستعمل في المثال السابق يأتي ما داخل الوسم input

<input type="image" src="22.png" alt="submit">       

حيث src ما بعدها يمثل مسار الصورة المستخدمة

المثال التاسع هو يمثل عندما يأتي لديك عدة اختيارات من اجل اختيار واحدة منهم مثال على كلامي

يتكون المثال السابق من وسمين input يربطهم اسم واحد فالذي كتبته في الصورة السابقة كانت الأكواد هي التالية

<input type="radio" name="Browser" value="chrome"> chrome
<br>
<br>    

<input type="radio" name="Browser" value="opera"> opera
ان الكود
name="Browser"

هو جاء في كلا وسمين input وهو يعني ان هذين الوسمين هم الخيارين الذان تختار منهم اختيار واحد والذي باللون الأخضر هو الموحد ويمكن تغييره لكن يجب ان يكون نفسه في كلا الوسمين

اما

value="chrome"

value="opera"

فيمكن تغير ال chrome و opera بما ترغب

والشيء الأساسي في هذا النوع من input هو النوع والذي يعبر بكود 

type="radio"
اما

chrome

opera

الذين جائو بعد الوسمين input فهما ما يظهران في النتيجة في الصورة السابقة 

وفي الأخير نأتي ل <br> هو الذي يمثل سطر بين كل input

وبهذا اكون قد وصلت لنهاية الدرس وان شاء الله الجزء الثاني من النماذج سأطرحه قريباً  والسلام عليكم و رحمة الله و بركاته

اقرأ تكملة الموضع