اتش تي إم إل للجيب

تعديل 5/3/2019: البوست ده كان معمول كبرشام في الكلية لإمتحان الـ multimedia ومكملش عشان كان في ماتش شغال فلو في حاجة محتاجة تعديل ياريت حد يبلغني :-)

المقدمة

مبدئيًا كُل مشروع بيتعمل بيبقى فيه تلت أنواع من الملفّات

  • html : ودي اللي بيبقى فيها المُحتوى أو الهيكلة بتاعت الصفحة
  • css : وده الـ presentation أو الشكل بتاع الصفحة
  • JavaScript: الـ behaviour وده اللوجيك اللي ورا الصفحة.

HTML

يعني HyperText Markup Language, هايبر تكست دي زي ما مشروحة في الملتيميديا هو اللي بيتعرض على جهاز إلكتروني عمومًا أو أجهزة الكمبيوتر خصوصًا واللي في منّه لينكات بتودّي على أماكن تانية في النص ككُل فمثلًا كتاب Eloquent JavaScript يُعتبر هايبر تكست لأنّك تقدر وإنت بتقرا في شابتر تتنقل لشابتر تاني بلينك , كمان الصفحة دي هايبر تكست لأنّها زي أي حاجة ع الويب لو بصّيت على أوّل حرفين من اللينك - إستنّى … أنا قولت لينك؟ ما ده كفاية! - هُمّا الـ ht إختصار HyperText.

أمّا مثلًا كتاب C++ Tour (1 2 3 4) لأ مش هايبر تكست لأنّك مُضطر تتنقل بين الصفحات يدوي .. وكمان كتاب الفيل الأزرق , وتراب الماس وقواعد العشق الأربعون وكُل الكُتب العميقة دي مش هايبر تكست طالما النافيجيشن فيها مبيبقاش عن طريق لينكات..

على فكرة النظري ده كُلّه عشان الإمتحان .. مش طبيعي بيتشرح .. عمومًا , مارك أب هي طريقة عشان تقسّم بيها النص لأجزاء مُفيدة .. مثلًا القرآن فيه آيات وأرباع وأحزاب وأجزاء وكدة .. في الإتش تي إم إل الصفحة بتتقسّم لأجزاء هنعرفها تباعًا.

لانجويتش دي يعني لُغة … بجد على فكرة 😁

عناصر الإتش تي إم إل

عناصر دي ترجمة حرفية لـ elements ودي أجزاء الصفحة اللي إتكلّمنا عنها من شوية , وبيحدد الإيلمينتس دي حاجة إسمها التاجز (tags) .. العناصر دي بقى نوعين , النوع الأوّلاني اللي بيبقى في له مُحتوى زي مثلًأ

<p>المحتوى</p>

ده على بعضه إليمنت بيتكوّن من تاج البداية اللي هو هنا <p> عبارة عن علامة أصغر من بعدها إسم الإيليمنت وبعدين علامة أكبر من .. بعد كدة المُحتوى وبعد كدة تاج النهاية زي تاج البداية بالظبط بس فيه سلاش قبل إسم التاج.

النوع التاني بقى الـ void element زي الأوّلاني بالظبط بس من غير مُحتوى ولا تاج نهاية بس بيبقى فيه سلاش قبل ما تقفله.

<img src="http://farm5.staticflickr.com/4127/5052575720_fe49c6ccf7_z.jpg" />

في حاجة تانيية بتتكتب في تاج البداية وتاج الفويد إليمنتس هي الـ attributes ومن الإسم هي خصائص الإليمنت ده فمثلًا مُمكن تكتب كلمة حمرة زي

<p color="red">كلمة</p>

أو مثلًا تكتب مكان الصورة , زي ..

<img src="http://farm5.staticflickr.com/4127/5052575720_fe49c6ccf7_z.jpg" />

وكُل الإليمنتس اللي بتقبل مُحتوى , المُحتوى ده مُمكن يكون فيه إليمنتس تانية فمثلًا مُمكن تكتب

<p>
    الكلام <b>ده</b> مهم جدًا
</p>

ومُمكن أكتر من إليمنت جوّا إليمنت واحد زي

<p>
    الكلام <b>ده</b> مهم جدًا وده <b><strike>كلام مهم وملوش لازمة</strike></b>
</p>

أظُن واضح أوي أقصُد إيه 😁 عمومًا هيبقى أوضح في الأخر.

عناصر مهمة

body

ده اللي بيتحط فيها المُحتوى اللي بيظهر في الصفحة , ولأغراض خاصة بالشرح ده تقدر تستخدم تقريبًا كُل الأمثلة اللي تحت عن طريق إنّك تحُطها في البادي الخاص بأوّل مثال , وياريت تعمل كدة عشان تشوف كُل حاجة بعنيك , خصوصًا الـ span و الـ div عشان تفهم فكرة الإنلاين إليمنت والبلوك ليفل إليمنت .. والحاجات دي كُلّها مشروحة تحت برضو , بس حبّيت أأكّد إن كُل مُحتوى الصفحة اللي بيتعرض ع الشاشة بيتكتب هنا.

وده اللي بيتحط فيه معلومات عن الصفحة عمومًا.

meta

ودي بيتحط فيها معلومات عن الصفحة , الفرق بينها وبين الهيد إن دي اللي بيتكتب فيها المعلومات فعليًا وبيتحط جوّة الهيد الهيد بيجمّع ده وحاجات كتير تانية مبتظهرش في الصفحة بس بتبقى فيها حاجات مُهمة للصفحة

بتربُط بيه الصفحة بحاجات تانية , مش زي الـ a اللي هيتشرح بعد كدة في إن ده مبيظهرش لأنّه بيربط الصفحة بحاجات لها علاقة مش بيعمل روابط تتك عليها , أشهر إستخدام ليه هيبقى في الـ css بعدين.

title

وده عشان أكتب عنوان الصفحة اللي بيظهر في شريط العنوان.

style

هنتكلّم عنها بالتفصيل في السي إس إس ودي بيتكتب فيها إستايلات الصفحة.

script

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

مثال

إنسخ الكود ده في فايل وسيّفه بإسم second.html وإفتحه , وحاول تفهم إيه اللي حصل.

<html>
<head>
    <meta charset="utf-8" />
    <meta name="auther" content="Elsayed Awdallah" />
    <title>My Sample Page</title>
    <link rel="shortcut icon" href="/favicon.ico"/>
</head>
<body>
    <p>
        This is my first <strong>HTML</strong> Page.
    </p>
</body>
</html>

div

وده عشان يعمل block-level container مُجرّد كونتينر بحُط فيه إليمنتس تانية بس بيحجز مُربّع كامل في الصفحة.

I'm <div style="background-color:red">not </div>donkey.

span

inline container بستخدمه عشان أحُط فيه حاجات تانية بس ده إنلاين يعني مبيحجزش مٌربّع كامل مُمكن أحُطّه حوالين كلام صُغيّر ويفضل في نفس السطر.

I'm <span style="display:none">not </span>donkey.

h1..h6

من h1 لـ h6 هُمّا الهيدرز اللي أنا بستخدمهم هنا بإسفاف دول بيعملوا عناوين صُغيّرة وعناوين كبيرة وكدة. ملحوظة h1 أكبر حاجة h6 أصغر حاجة.

p

إختصار paragraph بتعمل فقرة كتابة

<p>
    يشرب أحمد اللبن. أحمد ولد قوي.
</p>

u, b, i, strong, em

زي ما موجودين في برامج زي الورد كدة.

<b> = <strong> : bold

<u>: underlined

<i> = <em> : italic

<p>
    أواب يأكُل <b>كورن فليكس</b>. إذًا هو <u>ضعيف</u>.
</p>

img

بتضيف بيها صورة وبتحُط مكان الصورة في أتريبيوت src

<img src="http://farm5.staticflickr.com/4127/5052575720_fe49c6ccf7_z.jpg" />

a

إختصار anchor وأشهر إستخدام ليها هو إنّها بتعمل لينكات بين صفحة وصفحة تانية وبتاخد اللينك بتاع الصفحة التانية في أتريبيوت href إختصار هايبر ريفرانس

<a href="http://www.google.com"> إضغط هُنا للولوج إلى جوجل </a>

ul, ol, li

ul: unordered list ol: ordered list li: list item الأولى بتعمل قايمة بنُقط من غير ترقيم , التانية بتعمل ترقيم والتالتة بتبقى جوّة أي تاج من الإتنين وبيبقى ده الآيتم بتاع القايمة , مثلًا

<ul>
    <li>GET</li>
    <li>POST</li>
    <li>PUT</li>
    <li>DELETE</li>
</ul>

table

ده بيعمل جداول وفي جوّاه عناصر خاصّة بيه بنستخدمها جوّاه بس زي :

  • thead : وده بيبدأ راس الجدول أو أوّل صف في الجدول من فوق.
  • tfoot : وده خلينا نقول تذييل الجدول اللي هو أخر صف في الجدول.
  • tbody : وده جسم الجدول اللي بيبقى بين راس الجدول والتذييل.
  • tr : وده عبارة عن صف في الجدول.
  • td : ودي خلية في الجدول وبتبقى موجودة تحت .

أظن منسيتش حاجة , بس عمومًا خلّينا نشوف مثال لجدول..

<table>
    <thead>
        <tr>
            <td>الإسم</td>
            <td>السن</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>السيد</td>
            <td>20</td>
        </tr>
        <tr>
            <td>حد أقل أهمية</td>
            <td>19</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>المجموع</td>
            <td>39</td>
        </tr>
    </tfoot>
</table>

form

أرجوك خُد نفس عميق ومتدعيش عليا , الجُزء ده اللي طويل خلقة.

الفورم هي المكان اللي اليوزر بيقدر يتفاعل معاه من الصفحة , وإن كُنت تقدر تستخدم كُل العناصر اللي هيتكلّم عنها دلوقتي لوحدهم بس لمّا بتحُطّهم في فورم بتقدر تحدد action و method للفور ككل.

  • action : دي المكان اللي هتروحله لمّا تعمل submit للفورم.

  • method : دي الطريقة اللي هتستخدمها وإتش تي تي بي ليها طرق كتير أشهر إتنين منهم هُمّا GET و POST

    • GET : دي بتبعت الداتا بتاعت الفورم في الـ url فمثلًا لو عندي في الفورم إنبوت إسمه age وقيمته 20 وإنبوت name قيمته Elsayed الكويري سترينج , وده الجُزء اللي بعد علامة الإستفهام من اليو آر إل هيبقى ?name=Elsayed&age=20 ومُشكلتها إن الداتا بتبقى موجودة في شريط العنوان فللأمان هتبقى وحشة لحاجات زي الباسورد مثلًا , كمان طول الكويري سترينج بيتحدد بطول العنوان عشان كدة ميقدرش ياخُد داتا كتير , الإستخدام المُفضّل فيها لمّا تبقى عايز تعرض صفحة مُعيّنةمن موقع ديناميك زي مثلًا لمّا تعمل سيرش في جوجل هتلاقي اللينك فيه ?q=السيد+عوض+الله
    • POST : ودي أظرف شوية عشان الداتا بتتبعت في الـ body بتاع الريكويست فالمساحة مبتبقاش مُشكلة , والداتا كمان بتبقى مخفية عن اليوزر العادي الطبيعي الأحمق الأخرق اللي مبيعرفش يستخدم الكمبيوتر , وكمان تقدر تبعت فيها ملفّات ودياولو. لكن مُشكلتها الوحيدة هي إنّها مش مُناسبة للإستخدام بتاع get فمتعرفش مثلًا تخلّي صفحة الأخبار بتيجي بـ post request ناهيك عن إن وقعها على ودنك وحش بس كمان عشان إسم الخبر مش متحدد في العنوان محدّش هيعرف يجيبه.

في كمان PUT و DELETE جايز يكونوا مُهمّين وجايز لأ بالنسبة للإمتحان.

input

دلوقتي أهم إليمنت بنستخدمه في الفورم هو الـ input , وده في حد ذاته مش مُهم أوي , المُهم بجد هو الأتريبيوت بتاعت type وفي كذا type أهمّهم عشان الوقت:

  • submit : وده زُرار عادي بس بيعمل submit للفورم.
  • reset : وده زُرار برضو عادي بس بيمسح كُل الداتا اللي في الفورم وبيرجّعها زي ما كانت لمّا الصفحة فتحت.
  • button : كُنت بهزّر ده الزُرار العادي بجد ووظيفته الوحيدة إنّك مُمكن تعملّه وظيفة بالجافا سكريبت 😁
  • text : وده اللي بيتكتب فيه سطر واحد من الكلام , زي مثلًا خانة اليوزر نيم في فيس بوك كدة.
  • password : دي زي اللي فوق بس بيتبدّل مكان اللي بتكتبه نُقط , كانت زمان نجوم!

الأتريبيوت التانية المُهمّة هي الـ name وده الإسم اللي بيبقى في الكويري.

textarea

وده إليمنت تاني مُهم اللي هو المُربّع الكبير اللي مُمكن تكتب فيه أكتر من سطر .

select

وده الكومبو بوكس اللي لمّا بتتك عليه بيجيبلك إختيارات وفي إليمنت تاني لازم يبقى تحتبه اللي هو option وده اللي بيبقى فيه إختيارات

label

وأخيرًا ده بيتكتب بيه الكلام اللي جنب الحاجات التانية أو فوقيها أو كدة

دلوقتي هكتب مثال عن الفورم وفي الحقيقة هختم بيه الكلام عن html عمومًا دلوقتي لأن معتقدش الإمتحان هيجي فيه أكتر من كدة.

المثال التاني

خُد الكود ده وحُطّه في index.html وحُطه في نفس مكان الفايل الأولاني وإفتحه وجرب.

<html>
    <head>
        <title>sign up</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>تسجيل</h1>
        <form action="second.html" method="GET" >
            <table>
                <tr>
                    <td><label for="name">الإسم</label></td>
                    <td><input type="text" name="name" /></td>
                </tr>
                <tr>
                    <td><label for="pw">كلمة السر</label></td>
                    <td><label type="password" name="pw" /><td>
                </tr>
                <tr>
                    <td><label for="signature">التوقيع</label></td>
                    <td><textarea name="signature"></textarea></td>
                </tr>
                <tr>
                    <td><input type="submit" /><td>
                    <td><input type="reset" /><td>
                </tr>
            </table>
        </form>
        <!--ده كومنت مش هيظهر في الصفحة , عشان كدة مشرحتوش , وكمان حبيت أتأكّد إنّكم بتقروا الأكواد دي لأني فعلًا بتعب فيها :/ -->
    </body>
</html>

CSS

إختصار Cascading Style Sheets ووظيفتها هي فصل الستايل عن الستراكتشر والكونتنت بتاع الصفحة (الإتش تي إم إل) .. عشان الوقت أنا هشرح بسُرعة وفي الإنجاز الموضوع ماشي إزّاي ..

مبدئيًا عشان تستخدمها مفيش غير تلت طُرق تقدر تعمل بيهم كدة

Inline Styles

ودي بتستخدمها عن طريق إنّك تضيف attribute إسمها style وتكتب جوّاها رول السي إس إس بتاعتك.. مثلًا

<p style="color: red">
    الكلام ده هيبقى أحمر
</p>

وفيها بحُط الستايل رولز في تاج ستايل في الهيد , لاحظ type="text/css" .. مثلًا:

<html>
    <head>
        <style type="text/css">
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            الكلام ده هيبقى أحمر
        </p>
    </body>
</html>

external style sheet

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

/* File Name: style.css */
p {
    color: red;
}

<!-- file name: index.html -->
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>
            الكلام ده هيبقى أحمر
        </p>
    </body>
</html>

لاحظ rel="stylesheet"

Selectors

بعد كدة في حاجة إسمها السيليكتورز ودي اللي بحدد بيها أنهو إليمنت هيتأثّر بالرولز لمّا بتستخدم النوعين التانيين. وهُمّا كتير بس في تلت أنواع مُهمّين هنتكلّم عنهم بس دلوقتي.

Tag Name Selector

وده بستخدمه عن طريق إنّي بكتب إسم التاج بس والرول هتتطبّق على كُل الإليمنتس اللي بنفس التاج ده فمثلًا p { } هيختار كُل الـ <p> elements.

Class Name Selector

بختار بيه كُل الإليمنتس اللي أتريبيوت كلاس بتاعتهم فيها نفس إسم الكلاس اللي هكتبه وإستخدامه إنّي بكتب نُقطة وبعدين إسم الكلاس بتاعتي مثلًا .elsayed { } هيختار كُل الإليمنتس اللي بكلاس السيد مثلًا <div class="elsayed"></div> هيتطبّق عليه الرول .. ولاحظ إنّي أقدر أدّي نفس الكلاس لأكتر من إليمنت فمثلًا مُمكن يبقى في إليمنت تاني <p class="elsayed"></p> ومُمكن نفس الإليمنت يبقى فيه أكتر من كلاس وبفصل بينهم بمسافة فمثلًا <span class="elsayed awdallah"></span> ليه كلاسين واحدة إسمها السيد وواحدة إسمها عوض الله , ومُمكن أختاره في السي إس إس بالسيليكتور اللي فوق أو مُمكن أكتب .awdallah { } وبرضو هيختار الإليمنت ده.

ID selector

ده بختار بيه الإليمنت بالآي دي بتاعه , وبرضو الآي دي ده أتريبيوت للإليمنت , عشان الكود بتاعك يبقى valid مينفعش تدّي آي دي واحد لأكتر من إليمنت , وكمان الإليمنت الواحد مينفعش يبقى ليه أكتر من آي دي , والسيليكتور نفسه بيبقى عبارة عن علامة شبّاك وبعدها الآي دي فمثلًا #logo { } بيختار الإليمنت ده <img id="logo" />.

Properties

أسامي البروبرتيز في السي إس إس عمومًا بتكون واضحة عكس الأتريبيوتس بتاعت إتش تي إم إل فمثلًا <body bgcolor="red"></body>بتساوي <body style="background-color: red;"></body> البروبرتي هنا هي background-color ونادرًا ما هتلاقي حاجة صعبة في إنّك تفهمها.

مثلًا font-family: sans-serifبتغيّر الفونت فاميلي للفونتس اللي مفيهاش شُرط زيادة .. وهكذا font-size , font-weight …

و color بتغيّر لون الفور جراوند , يعني لو كلام الكلام هيبقى أحمر.

background-image بتغير صورة الخلفية.

margin بتحدد المساحة اللي حوالين الصندوق بتاع الإليمنت.

padding بتحدد المساحة اللي بين حدود الصندوق من جوّة وبداية المُحتوى

border دي خصائص الحدود نفسها.

هُمّا كتير جدًا ومفيش وقت لا أنا أكتبهم كُلّهم بقيمهم ولا إنتو تذاكروهم كُلّهم دلوقتي ومعتقدش إنّهم علينا خالص.

css rules

الرول هي مجموعة البروبرتيز دي بقى مع بعض فمثلًا الرول اللي هتخلّي لون كُل الإليمنتس اللي ليها كلاس important أحمر والخلفية بتاعت الكلام أصفر والفونت فاميلي بتاعه مونوسبيس هي وحجم الخط 12 بيكسل:

.important {
    color: red;
    background-color: yellow;
    font-family: monospace;
    font-size:12px;
}

أظُن كدة أنا لمّيت كُل حاجة مُمكن تيجي في السي إس إس بُكرة.

JavaScript

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

عمومًا أنا هشرح دلوقتي اللي طنطاوي قال عليه بس عشان أنا لسّة مفتحتش كتاب لحد دلوقتي وبدأت أتوتّر مش أكتر..

Variables

عشان تعمل فاريابل في جافا سكريبت بتكتب var x; مثلًا هيعمل فاريابل إسمه إكس مفيش داتا تايب ومفيش الكلام ده كُلّه بس كدة , ولو عايز تإنيشالايز الفاريابل كمان هتكتل var y = 5; لو عايز تأساين فاليو لفاريابُل موجود الموضوع زي أي لُغة برمجة عادية هتكتب `x = “Elsayed”;

Functions

بتعرف فانكشن في الجافا سكريبت بإنّك تكتب كلمة فنكشن وبعد كدة إسم الفنكشن وبعد كدة الأرجيومنتس مثلًا:

function hello (x) {
    return "hello, " + x;
}

في طريقة تانية إنّك تأساين أنونيموس فنكشن لفاريابُل موجود فالتعريف اللي فوق بيساوي بالظبط ده :

var hello = function (x) {
    return "hello, " + x;
}

الموضوع لمّا بيبقى مُختصر بيكون مش مفهوم أوي , بس أنا مش عايز أشغل بالكُم بحاجات مش هتيجي بُكرة فإفهموهم كدة على إنّهم طريقتين للتعريف وخلاص.

Selecting HTML Elements

الموضوع له علاقة بالـ DOM => Document Object Model أنا كاتب الإختصار عشان مُمكن نتسئل فيه , بس شرح الدوم نفسه كبير شوية فباختصار هو بيعمل الإتش تي إم إل إليمنتس على هيئة تري وعشان يختار إليمنت بيـ traverse التري دي الفنكشنز المُهمة في الدوم بالنسبالنا هي:

var s = document.getElementById('ss'); دي بتختار الإليمنت اللي الآي دي بتاعه ss وبتأساينها لـ s.

var y = document.getElementsByTagName('p'); دي بترجّع أراي فيها كُل الإليمنتس اللي التاج بتاعها p.

var x = document.getElementsByClassName('important'); دي بترجّع أراي بكُل الإليمنتس اللي فيها كلاس important.

الكلاسز والآي دي مشروحة في السي إس إس فوق , والأراي بأكسسها عن طريق الإندكس زي اللغات التانية عادي وببدأ من 0 برضو مثلًا x[0] بتختار أوّل قيمة في الأراي إكس.

Attaching Events

عشان أأتاتش إيفنت بختار الأوّل الإليمنت بطريقة من اللي فوق .. هنعمل البتاعة دي عملي عشان تشوفوها بعينكم , أوّل حاجة إضغطوا على F12 من الكيبورد هتظهر ويندو صُغيّرة في البراوزر تحت دوّروا على كونسول هتظهر شاشة فيها مكان بيتكتب فيه تحت خالص , هتكتبوا الخطوات دي سطر سطري. أوّل حاجة هنختار الإليمنت , إكتبوا بالظبط زي كدة

var el = document.getElementById('elsayed');

وبعدين هعرف الهاندلر بتاع الفنكشن هكتبه في سطر واحد عشان الكونسول متبوظش ومفيش وقت أشرح الشُغل معاها بيبقى إزّاي فالهاندلر هيبقى ده

function handler () { alert('You did it, dude!'); }

بعد كدة بضيف الليسينر للإليمنت عن طريق الفنكشن دي..

el.addEventListener('click', handler, false);

بعدين إضغط على الزرار ده