الأسبوع 8: HTML وCSS وJavaScript

ترجمة آلية تحت المراجعة

المصدر الأصلي على CS50

المحاضرة الثامنة (Lecture 8)

مرحبًا!
الإنترنت
أجهزة التوجيه
DNS
DHCP
HTTPS
HTML
التعبيرات العادية
CSS
الأطر
جافا سكريبت
التلخيص

مرحبًا! (Welcome!)

في الأسابيع السابقة، قدمنا لك لغة Python، وهي لغة برمجة عالية المستوى تستخدم نفس العناصر الأساسية التي تعلمناها في لغة C. واليوم، سنقوم بتوسيع هذه العناصر الأساسية بشكل أكبر في HTML وCSS وJavaScript.

الإنترنت (The Internet)

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

أجهزة التوجيه (Routers)

لتوجيه البيانات من مكان إلى آخر، نحتاج إلى القيام بذلك قرارات التوجيه. أي أن شخصًا ما يحتاج إلى برمجة كيفية نقل البيانات من النقطة أ إلى النقطة ب.
يمكنك أن تتخيل كيف يمكن أن تتخذ البيانات مسارات متعددة من النقطة A والنقطة B، بحيث يمكن أن تتدفق البيانات عبر مسار آخر عندما يكون جهاز التوجيه مزدحمًا. الحزم يتم نقل من البيانات من جهاز توجيه إلى آخر، ومن كمبيوتر إلى آخر.
TCP/IP هما بروتوكولان يسمحان لأجهزة الكمبيوتر بنقل البيانات فيما بينها عبر الإنترنت.
IP أو بروتوكول الإنترنت هي طريقة يمكن لأجهزة الكمبيوتر من خلالها التعرف على بعضها البعض عبر الإنترنت. كل كمبيوتر لديه عنوان فريد في العالم. العناوين تكون على هذا الشكل:
```
#.#.#.#
```
تتراوح الأرقام من 0 إلى 255. عناوين IP هي 32 بت (لـ IPv4)، مما يعني أن هذه العناوين يمكن أن تستوعب أكثر من 4 مليارات عنوان. يمكن للإصدارات الأحدث من عناوين IP (مثل IPv6)، التي تنفذ 128 بت، أن تستوعب عددًا أكبر بكثير من أجهزة الكمبيوتر!
في العالم الحقيقي، تقوم الخوادم بالكثير من العمل لصالحنا.

يتم تنظيم الحزم على النحو التالي:

0                   1                   2                   3  
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|Version|  IHL  |Type of Service|          Total Length         |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|         Identification        |Flags|      Fragment Offset    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|  Time to Live |    Protocol   |         Header Checksum       |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                       Source Address                          |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                    Destination Address                        |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
|                    Options                    |    Padding    |
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

الحزم موحدة. يتم الاحتفاظ بالمصدر والوجهة داخل كل حزمة.
بروتوكول التعاون الفني، أو بروتوكول التحكم في الإرسال، يساعد في تتبع تسلسل الحزم التي يتم إرسالها.
علاوة على ذلك، يتم استخدام بروتوكول TCP لتمييز خدمات الويب عن بعضها البعض. على سبيل المثال، 80 للإشارة إلى HTTP و يُستخدم 443 للإشارة إلى HTTPS. هذه الأرقام افتراضية أرقام المنافذ لهذه الخدمات.
عندما يتم إرسال المعلومات من موقع إلى آخر، يتم إرسال عنوان IP المصدر وعنوان IP الوجهة ورقم منفذ TCP.
تُستخدم هذه البروتوكولات أيضًا لتجزئة الملفات الكبيرة إلى أجزاء أو حزم متعددة. على سبيل المثال، يمكن إرسال صورة كبيرة لقطة في حزم متعددة. عند فقدان حزمة ما، يمكن لـ TCP/IP طلب الحزم المفقودة مرة أخرى من الخادم الأصلي.
سيعلم TCP عندما يتم إرسال كافة البيانات واستلامها.

DNS

سيكون الأمر مملاً للغاية إذا كنت بحاجة إلى تذكر عنوان IP لزيارة موقع ويب.
DNS، أو أنظمة أسماء النطاقات، عبارة عن مجموعة من الخوادم الموجودة على الإنترنت والتي يتم استخدامها لتوجيه عناوين مواقع الويب مثل harvard.edu إلى عنوان IP محدد.
DNS هو ببساطة جدول أو قاعدة بيانات تربط أسماء نطاقات محددة ومؤهلة بالكامل بعناوين IP محددة.

DHCP

DHCP هو بروتوكول يقوم بتعيين عنوان IP لجهازك.
علاوة على ذلك، يحدد هذا البروتوكول البوابة الافتراضية وخوادم الأسماء التي يستخدمها جهازك.
الآن، لا مزيد من الحديث عما يوجد خارج مظروفنا المجازي: دعونا ننظر داخل المظروف.

HTTPS

HTTP أو بروتوكول نقل النص التشعبي هو بروتوكول على مستوى التطبيق يستخدمه المطورون لبناء أشياء قوية ومفيدة من خلال نقل البيانات من مكان إلى آخر. HTTPS هو نسخة آمنة من هذا البروتوكول.
عندما ترى عنوانًا مثل https://www.example.com أنت في الواقع تزور هذا العنوان ضمنيًا بـ / في نهايته.
ال يتم استخدام الدالة المسار هو ما يوجد بعد تلك الشرطة المائلة. على سبيل المثال، https://www.example.com/folder/file.html زيارات example.com ويتصفح للوصول إلى دليل folder ، ثم يقوم بزيارة الملف المسمى file.html.
ال يتم استخدام الدالة .com يسمى أ نطاق المستوى الأعلى يُستخدم للإشارة إلى الموقع أو نوع المؤسسة المرتبطة بهذا العنوان.
https في هذا العنوان هو البروتوكول المستخدم للاتصال بعنوان الويب هذا. بالبروتوكول، نعني أن HTTP يستخدم GET أو POST طلبات لطلب معلومات من الخادم. على سبيل المثال، يمكنك تشغيل Google Chrome، والنقر بزر الماوس الأيمن، ثم النقر inspect. عند فتح developer tools وقم بالزيارة Network، التحديد Preserve log، سوف ترى Request Headers. سترى إشارات إلى GET. وهذا ممكن في المتصفحات الأخرى أيضًا، باستخدام طرق مختلفة قليلاً.
على سبيل المثال، عند إصدار طلب GET، قد يرسل جهاز الكمبيوتر الخاص بك ما يلي إلى الخادم:
```
GET / HTTP/2
Host: www.harvard.edu
```
لاحظ أن هذا يطلب عبر HTTP المحتوى المقدم على www.harvard.edu.
بشكل عام، بعد تقديم طلب إلى الخادم، سوف تتلقى ما يلي في Response Headers:
```
HTTP/2 200
Content-Type: text/html
```
قد يكون هذا الأسلوب لفحص هذه السجلات أكثر تعقيدًا مما يلزم. يمكنك تحليل عمل بروتوكولات HTTP على cs50.dev. على سبيل المثال، اكتب ما يلي في نافذتك الطرفية:
```
curl -I https://www.harvard.edu/
```
لاحظ أن مخرجات هذا الأمر تُرجع كافة قيم الرأس لاستجابات الخادم.
من خلال أدوات المطورين في متصفح الويب الخاص بك، يمكنك رؤية جميع طلبات HTTP عند تصفح موقع الويب أعلاه.
علاوة على ذلك، قم بتنفيذ الأمر التالي في نافذتك الطرفية:
```
curl -I https://harvard.edu
```
لاحظ أنك سترى أ استجابة 301 ، تقدم تلميحًا للمتصفح حول المكان الذي يمكنه العثور فيه على موقع الويب الصحيح.
وبالمثل، قم بتنفيذ ما يلي في نافذتك الطرفية: تمت إزالة
```
curl -I http://www.harvard.edu/
```
لاحظ أن يتم استخدام كتلة s في https . ستظهر استجابة الخادم أن الاستجابة 301، وهذا يعني أن الموقع قد تم نقله نهائيًا.

مشابه ل 301, كود 404 يعني أنه لم يتم العثور على عنوان URL المحدد. هناك العديد من رموز الاستجابة الأخرى، مثل:

200 OK
301 Moved Permanently
302 Found
304 Not Modified
307 Temporary Redirect
401 Unauthorized
403 Forbidden
404 Not Found
418 I'm a Teapot
500 Internal Server Error
503 Service Unavailable

من الجدير بالذكر ذلك 500 عادة ما تكون الأخطاء خطأك كمطور عندما يتعلق الأمر بمنتج أو تطبيق من إبداعك. سيكون هذا مهمًا بشكل خاص لمجموعة مشاكل الأسبوع المقبل، وربما لمشروعك النهائي! ومع ذلك، يمكن أن تكون أخطاء 500 أيضًا نتيجة لمشكلات البنية التحتية ومشكلات خدمات الطرف الثالث.

HTML

HTML أو لغة ترميز النص التشعبي يتكون من علامات ، قد يحتوي كل منها على بعض سمات التي تصفها. تقوم علامة
في جهازك الطرفي، اكتب code hello.html واكتب الشيفرة كما يلي:
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>hello, title</title>
    </head>
    <body>
        hello, body
    </body>
</html>
```
لاحظ أن يتم استخدام كتلة html بفتح هذا الملف وإغلاقه. علاوة على ذلك، لاحظ سمة lang ، التي تعدل سلوك html . لاحظ أيضًا أن هناك كلاهما علامات head و علامات body . المسافة البادئة غير مطلوبة ولكنها تشير إلى تسلسل هرمي. يمكنك تنزيل هذا الرمز هنا.
يمكنك تقديم الشيفرة الخاصة بك عن طريق الكتابة http-server. هذا المحتوى المقدم متاح الآن على عنوان URL طويل جدًا. إذا قمت بالنقر فوقه، يمكنك زيارة موقع الويب الذي تم إنشاؤه بواسطة الشيفرة الخاص بك.
عندما تزور عنوان URL هذا، لاحظ أن اسم الملف يظهر hello.html في نهاية عنوان URL هذا. علاوة على ذلك، لاحظ، بناءً على عنوان URL، أن الخادم يعمل عبر المنفذ 8080.
يمكن تمثيل التسلسل الهرمي للعلامات على النحو التالي:
ستكون معرفة هذا التسلسل الهرمي مفيدة لاحقًا عندما نتعلم JavaScript.
سيقرأ المتصفح ملف HTML الخاص بك من الأعلى إلى الأسفل ومن اليسار إلى اليمين.

نظرًا لأنه يتم تجاهل المسافات البيضاء والمسافات البادئة بشكل فعال في HTML، فسوف تحتاج إلى استخدام <p> علامات الفقرة لفتح وإغلاق الفقرة. خذ بعين الاعتبار ما يلي:

<!DOCTYPE html>

<!-- Demonstrates paragraphs -->

<html lang="en">
    <head>
        <title>paragraphs</title>
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>
    </body>
</html>

لاحظ أن الفقرات تبدأ بحرف a علامة <p> وتنتهي بـ علامة </p> . يمكنك تنزيل هذا الرمز هنا.

يسمح HTML بتمثيل العناوين:

<!DOCTYPE html>

<!-- Demonstrates headings (for chapters, sections, subsections, etc.) -->

<html lang="en">

    <head>
        <title>headings</title>
    </head>

    <body>

        <h1>One</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat.
        </p>

        <h2>Two</h2>
        <p>
            Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh.
        </p>

        <h3>Three</h3>
        <p>
            Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt.
        </p>

        <h4>Four</h4>
        <p>
            Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris.
        </p>

        <h5>Five</h5>
        <p>
            Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque.
        </p>

        <h6>Six</h6>
        <p>
            Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien.
        </p>

    </body>

</html>

لاحظ ذلك تم الآن إنشاء <h1>, <h2>و <h3> تشير إلى مستويات مختلفة من العناوين. يمكنك تنزيل هذا الرمز هنا.

يمكننا أيضًا إنشاء قوائم غير مرتبة داخل HTML:

<!DOCTYPE html>

<!-- Demonstrates (unordered) lists -->

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ul>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ul>
    </body>
</html>

لاحظ أن يتم استخدام كتلة <ul> بإنشاء قائمة غير مرتبة تحتوي على ثلاثة عناصر. يمكنك تنزيل هذا الرمز هنا.

يمكننا أيضًا إنشاء قوائم مرتبة داخل HTML: تقوم علامة

<!DOCTYPE html>

<!-- Demonstrates (ordered) lists -->

<html lang="en">
    <head>
        <title>list</title>
    </head>
    <body>
        <ol>
            <li>foo</li>
            <li>bar</li>
            <li>baz</li>
        </ol>
    </body>
</html>

لاحظ أن يتم استخدام كتلة <ol> بإنشاء قائمة مرتبة تحتوي على ثلاثة عناصر. يمكنك تنزيل هذا الرمز هنا.

يمكننا أيضًا إنشاء جدول بتنسيق HTML:

<!DOCTYPE html>

<!-- Demonstrates table -->

<html lang="en">
    <head>
        <title>table</title>
    </head>
    <body>
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>*</td>
                <td>0</td>
                <td>#</td>
            </tr>
        </table>
    </body>
</html>

تحتوي الجداول أيضًا على علامات تفتح وتغلق كل عنصر بداخلها. لاحظ أيضًا بناء جملة التعليقات في HTML. يمكنك تنزيل هذا الرمز هنا.

يمكن أيضًا استخدام الصور داخل HTML: يشير
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>image</title>
    </head>
    <body>
        <img alt="photo of bridge" src="bridge.png">
    </body>
</html>
```
لاحظ ذلك تم الآن إنشاء src="bridge.png" إلى المسار الذي يمكن أن يوجد به ملف الصورة. يمكنك تنزيل هذا الرمز هنا.
يمكن أيضًا تضمين مقاطع الفيديو بتنسيق HTML: تشير السمة
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>video</title>
    </head>
    <body>
        <video controls muted>
            <source src="video.mp4" type="video/mp4">
        </video>
    </body>
</html>
```
لاحظ أن يتم استخدام كتلة type إلى أن هذا فيديو من النوع mp4. وعلاوة على ذلك، لاحظ كيف تم تمرير controls و muted إلى video. يمكنك تنزيل هذا الرمز هنا.
يمكنك أيضًا الربط بين صفحات الويب المختلفة:
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>link</title>
    </head>
    <body>
      Visit <a href="image.html">Harvard</a>.
    </body>
</html>
```
لاحظ أن يتم استخدام كتلة <a> أو مرساة يتم استخدام علامة في صنعها Harvard نص قابل للربط. يمكنك تنزيل هذا الرمز هنا.

يمكنك أيضًا إنشاء نماذج تذكرنا ببحث Google:

<!DOCTYPE html>

<!-- Demonstrates form -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="search">
            <input type="submit" value="Google Search">
        </form>
    </body>
</html>

لاحظ أن أ يتم فتح علامة form وتوفر سمة ماذا action سوف يستغرق الأمر. ال تم تضمين حقل input لتمرير الاسم q واكتب كـ search. يمكنك تنزيل هذا الرمز هنا.

يمكننا تحسين هذا البحث كما يلي: تم تشغيل

<!DOCTYPE html>

<!-- Demonstrates additional form attributes -->

<html lang="en">
    <head>
        <title>search</title>
    </head>
    <body>
        <form action="https://www.google.com/search" method="get">
            <input autocomplete="off" autofocus name="q" placeholder="Query" type="search">
            <button>Google Search</button>
        </form>
    </body>
</html>

لاحظ ذلك تم الآن إنشاء autocomplete تم تمكين off. autofocus . يمكنك تنزيل هذا الرمز هنا.

لقد رأينا عددًا قليلاً من عناصر HTML العديدة التي يمكنك إضافتها إلى موقعك. إذا كانت لديك فكرة عن شيء تريد إضافته إلى موقعك ولم نره بعد (زر، ملف صوتي، وما إلى ذلك) فحاول البحث في Google عن "X in HTML" للعثور على الصيغة الصحيحة! وبالمثل، يمكنك استخدام cs50.ai لمساعدتك في اكتشاف المزيد من ميزات HTML!

التعبيرات العادية (Regular Expressions)

التعبيرات العادية أو التعبيرات العادية هي وسيلة يمكن من خلالها التأكد من أن البيانات المقدمة من المستخدم تناسب تنسيقًا معينًا.
يمكننا تنفيذ صفحة التسجيل الخاصة بنا والتي تستخدم التعبيرات العادية على النحو التالي: تتضمن علامة
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>register</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" placeholder="Email" type="email">
            <button>Register</button>
        </form>
    </body>
</html>
```
لاحظ أن يتم استخدام كتلة input السمات التي تحدد أن هذا من النوع email. يعرف المتصفح أنه يجب عليه التحقق مرة أخرى من أن الإدخال هو عنوان بريد إلكتروني. يمكنك تنزيل هذا الرمز هنا.
بينما يستخدم المتصفح هذه السمات المضمنة للتحقق من عنوان البريد الإلكتروني، يمكننا إضافة سمة pattern للتأكد من أن البيانات المحددة فقط هي التي تنتهي في عنوان البريد الإلكتروني:
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>register</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus name="email" pattern=".+@.+\.edu" placeholder="Email" type="email">
            <button>Register</button>
        </form>
    </body>
</html>
```
لاحظ أن يتم استخدام كتلة pattern تعبيرًا عاديًا للإشارة إلى أن عنوان البريد الإلكتروني يجب أن يتضمن رمز @ و .edu. يمكنك تنزيل هذا الرمز هنا.
يمكنك معرفة المزيد حول التعبيرات العادية من وثائق موزيلا. وعلاوة على ذلك، يمكنك إجراء استفسارات ل cs50.ai للحصول على تلميحات.

CSS

CSS، أو ورقة الأنماط المتتالية، هي لغة ورقة أنماط تسمح لك بضبط جماليات ملفات HTML الخاصة بك.
CSS مملوء بـ خصائص ، والتي تتضمن أزواج القيمة الرئيسية.

في جهازك الطرفي، اكتب code home.html واكتب الشيفرة كما يلي:

<!DOCTYPE html>

<!-- Demonstrates inline CSS with P tags -->

<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body>
        <p style="font-size: large; text-align: center;">
            John Harvard
        </p>
        <p style="font-size: medium; text-align: center;">
            Welcome to my home page!
        </p>
        <p style="font-size: small; text-align: center;">
            Copyright &#169; John Harvard
        </p>
    </body>
</html>

لاحظ أن البعض يتم توفير سمات style إلى علامات <p> . ال تم ضبط font-size على large, medium، أو small. ثم تم ضبط text-align على المركز. يمكنك تنزيل هذا الرمز هنا.

على الرغم من صحته، إلا أن ما ورد أعلاه ليس مصممًا بشكل جيد. يمكننا إزالة التكرار عن طريق تعديل الشيفرة الخاص بنا على النحو التالي: يتم استخدام علامات
```
<!DOCTYPE html>



<html lang="en">
    <head>
        <title>css</title>
    </head>
    <body style="text-align: center">
        <div style="font-size: large">
            John Harvard
        </div>
        <div style="font-size: medium">
            Welcome to my home page!
        </div>
        <div style="font-size: small">
            Copyright &#169; John Harvard
        </div>
    </body>
</html>
```
لاحظ ذلك تم الآن إنشاء <div> لتقسيم ملف HTML هذا إلى مناطق محددة. يتم استدعاء text-align: center في نص HTML بأكمله. لأن كل شيء في الداخل body هو طفل لـ body, center تتسلسل السمات وصولاً إلى هؤلاء الأطفال. يمكنك تنزيل هذا الرمز هنا.

اتضح أن هناك علامات دلالية أحدث مضمنة في HTML. يمكننا تعديل الشيفرة الخاص بنا على النحو التالي:

<!DOCTYPE html>

<!-- Demonstrates class selectors -->

<html lang="en">
    <head>
        <style>

            .centered
            {
                text-align: center;
            }

            .large
            {
                font-size: large;
            }

            .medium
            {
                font-size: medium;
            }

            .small
            {
                font-size: small;
            }

        </style>
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Welcome to my home page!
        </main>
        <footer class="small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

لاحظ أنه تم وضع جميع علامات الأنماط في head في دليل style غلاف العلامة. لاحظ أيضًا أننا قمنا بتعيين فئات، تم الاتصال به centered, large, mediumو small إلى عناصرنا، وأن نختار تلك الفئات بوضع نقطة قبل الاسم، كما في .centered يمكنك تنزيل هذا الرمز هنا.

اتضح أنه يمكننا نقل كل رموز النمط الخاصة بنا إلى ملف خاص يسمى CSS الملف. يمكننا إنشاء ملف يسمى style.css والصق دروسنا هناك:
```
.centered
{
    text-align: center;
}

.large
{
    font-size: large;
}

.medium
{
    font-size: medium;
}

.small
{
    font-size: small;
}
```
لاحظ أن هذا هو حرفيًا ما ظهر في ملف HTML الخاص بنا. يمكنك تنزيل هذا الرمز هنا.

يمكننا بعد ذلك إخبار المتصفح بمكان تحديد موقع CSS لملف HTML هذا: يتم ربط

<!DOCTYPE html>

<!-- Demonstrates external stylesheets -->

<html lang="en">
    <head>
        <link href="style.css" rel="stylesheet">
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Welcome to my home page!
        </main>
        <footer class="small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

لاحظ ذلك تم الآن إنشاء style.css بملف HTML هذا كورقة أنماط، تخبر المتصفح بمكان تحديد الأنماط التي أنشأناها. يمكنك تنزيل هذا الرمز هنا.

الأطر (Frameworks)

على غرار مكتبات الطرف الثالث التي يمكننا الاستفادة منها في بايثون، هناك مكتبات طرف ثالث تسمى أطر العمل التي يمكننا استخدامها مع ملفات HTML الخاصة بنا.
التمهيد هو أحد هذه الأطر التي يمكننا استخدامها لتجميل HTML الخاص بنا وعناصر التصميم المثالية بسهولة بحيث تكون صفحاتنا أكثر قابلية للقراءة.

يمكن الاستفادة من Bootstrap عن طريق إضافة ما يلي علامة link في head من ملف html الخاص بك:

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <title>bootstrap</title>
</head>

خذ بعين الاعتبار HTML التالي:

<!DOCTYPE html>

<!-- Demonstrates table -->

<html lang="en">
    <head>
        <title>phonebook</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Kelly</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>John</td>
                    <td>+1-949-468-2750</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

لاحظ كيف أنه عند النظر إلى النسخة المقدمة من هذه الصفحة، يكون الأمر واضحًا تمامًا. يمكنك تنزيل هذا الرمز هنا.

الآن فكر في HTML التالي الذي ينفذ استخدام Bootstrap:

<!DOCTYPE html>

<!-- Demonstrates table with Bootstrap -->

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
        <title>phonebook</title>
    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Number</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Kelly</td>
                    <td>+1-617-495-1000</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>+1-949-468-2750</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

لاحظ كم أصبح هذا الموقع أجمل الآن. يمكنك تنزيل هذا الرمز هنا.

يمكنك معرفة المزيد حول هذا الأمر في وثائق التمهيد.

جافا سكريبت (JavaScript)

JavaScript هي لغة برمجة أخرى تسمح بالتفاعل داخل صفحات الويب.

ضع في اعتبارك التنفيذ التالي لـ hello.html يتضمن كلاً من JavaScript وHTML:

<!DOCTYPE html>

<!-- Demonstrates onsubmit -->

<html lang="en">
    <head>
        <script>

            function greet()
            {
                alert('hello, ' + document.querySelector('#name').value);
            }

        </script>
        <title>hello</title>
    </head>
    <body>
        <form onsubmit="greet(); return false;">
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

لاحظ كيف يستخدم هذا النموذج ملف onsubmit لتشغيل البرنامج النصي الموجود في أعلى الملف. يستخدم البرنامج النصي التنبيه لإنشاء نافذة تنبيه منبثقة. document.querySelector('#name').value يحدد مربع النص الذي يحتوي على id name على الصفحة ويحصل على القيمة التي كتبها المستخدم. يمكنك تنزيل هذا الرمز هنا.

بشكل عام، يعتبر المزج بين onsubmit وJavaScript تصميمًا سيئًا. يمكننا تطوير الشيفرة الخاص بنا على النحو التالي:

<!DOCTYPE html>

<!-- Demonstrates DOMContentLoaded -->

<html lang="en">
    <head>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                document.querySelector('form').addEventListener('submit', function(e) {
                    alert('hello, ' + document.querySelector('#name').value);
                    e.preventDefault();
                });
            });

        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus id="name" placeholder="Name" type="text">
            <input type="submit">
        </form>
    </body>
</html>

لاحظ أن هذا الإصدار من الشيفرة يقوم بإنشاء ملف addEventListener للاستماع إلى النموذج يتم تشغيل submit . لاحظ كيف DOMContentLoaded يضمن تحميل الصفحة بأكملها قبل تنفيذ JavaScript. يمكنك تنزيل هذا الرمز هنا.

يمكننا تقديم هذا الشيفرة كما يلي:

<!DOCTYPE html>

<!-- Demonstrates keyup and template literals -->

<html lang="en">
    <head>
        <script>

            document.addEventListener('DOMContentLoaded', function() {
                let input = document.querySelector('input');
                input.addEventListener('keyup', function(event) {
                    let name = document.querySelector('p');
                    if (input.value) {
                        name.innerHTML = `hello, ${input.value}`;
                    }
                    else {
                        name.innerHTML = 'hello, whoever you are';
                    }
                });
            });

        </script>
        <title>hello</title>
    </head>
    <body>
        <form>
            <input autocomplete="off" autofocus placeholder="Name" type="text">
        </form>
        <p></p>
    </body>
</html>

لاحظ أنه يتم تحديث DOM ديناميكيًا في الذاكرة عندما يقوم المستخدم بكتابة الاسم. إذا كان هناك قيمة في الداخل input، على keyup على لوحة المفاتيح، يتم تحديث DOM. وبخلاف ذلك، يتم عرض النص الافتراضي. يمكنك تنزيل هذا الرمز هنا.

تتيح لك JavaScript قراءة وتعديل مستند html الذي تم تحميله في الذاكرة بشكل ديناميكي بحيث لا يحتاج المستخدم إلى إعادة التحميل لرؤية التغييرات.

خذ بعين الاعتبار HTML التالي:

<!DOCTYPE html>

<!-- Demonstrates programmatic changes to style -->

<html lang="en">
    <head>
        <title>background</title>
    </head>
    <body>
        <button id="red">R</button>
        <button id="green">G</button>
        <button id="blue">B</button>
        <script>

            let body = document.querySelector('body');
            document.querySelector('#red').addEventListener('click', function() {
                body.style.backgroundColor = 'red';
            });
            document.querySelector('#green').addEventListener('click', function() {
                body.style.backgroundColor = 'green';
            });
            document.querySelector('#blue').addEventListener('click', function() {
                body.style.backgroundColor = 'blue';
            });

        </script>
    </body>
</html>

لاحظ أن JavaScript يستمع عند النقر فوق زر معين. عند هذه النقرة، يتم تغيير سمات نمط معينة في الصفحة. يتم تعريف body على أنه نص الصفحة. ثم ينتظر مستمع الحدث النقر على أحد الأزرار. ثم، تم تغيير body.style.backgroundColor . يمكنك تنزيل هذا الرمز هنا.

وبالمثل، ضع في اعتبارك ما يلي:

<!DOCTYPE html>

<html lang="en">
    <head>
        <script>

            // Toggles visibility of greeting
            function blink()
            {
                let body = document.querySelector('body');
                if (body.style.visibility == 'hidden')
                {
                    body.style.visibility = 'visible';
                }
                else
                {
                    body.style.visibility = 'hidden';
                }
            }

            // Blink every 500ms
            window.setInterval(blink, 500);

        </script>
        <title>blink</title>
    </head>
    <body>
        hello, world
    </body>
</html>

يومض هذا المثال النص على فترات زمنية محددة. لاحظ ذلك window.setInterval يأخذ وسيطتين: دالة سيتم استدعاؤها وفترة انتظار (بالملي ثانية) بين استدعاءات الوظائف. يمكنك تنزيل هذا الرمز هنا.

ضع في اعتبارك التنفيذ التالي لـ JavaScript الذي يقوم بإكمال النص تلقائيًا:

<!DOCTYPE html>

<html lang="en">

    <head>
        <title>autocomplete</title>
    </head>

    <body>

        <input autocomplete="off" autofocus placeholder="Query" type="text">

        <ul></ul>

        <script src="large.js"></script>
        <script>
      
            let input = document.querySelector('input');
            input.addEventListener('keyup', function(event) {
                let html = '';
                if (input.value) {
                    for (word of WORDS) {
                        if (word.startsWith(input.value)) {
                            html += `<li>${word}</li>`;
                        }
                    }
                }
                document.querySelector('ul').innerHTML = html;
            });

        </script>

    </body>
</html>

هذا هو تطبيق JavaScript للإكمال التلقائي. يتم سحب هذا من ملف (غير مصور هنا) يسمى large.js هذه قائمة بالكلمات. يمكنك تنزيل هذا الرمز هنا.

إمكانيات JavaScript كثيرة ويمكن العثور عليها في وثائق جافا سكريبت.

التلخيص (Summing Up)

في هذا الدرس، تعلمت كيفية إنشاء ملفات HTML الخاصة بك، وتصميمها، والاستفادة من أطر عمل الطرف الثالث، واستخدام JavaScript. على وجه التحديد، ناقشنا…

الإنترنت
أجهزة التوجيه
DNS
DHCP
HTTPS
HTML
التعبيرات العادية
CSS
الأطر
جافا سكريبت

نراكم في المرة القادمة!