>> DOUG لويد: لذا قضينا about-- إذا الرياضيات بلدي هو الحق،
وأعتقد أن تبحث back-- أعتقد قضينا حوالي 35 أشرطة الفيديو يتحدث
حول مختلف جوانب C، ربما أكثر من ذلك بقليل، أقل ربما قليلا.
ونحن لا تغطي كل شيء في C، ولكننا
غطت جزءا كبيرا من اللغة، والغالبية العظمى منه،
بالتأكيد لالاستخدامات الشائعة.
الآن نحن بصدد الحديث حول لغة أخرى، HTML.
ونحن في طريقنا لتغطية في فيديو واحد فقط.
>> ولكن هذا سيكون على ما يرام.
وهذا ما سوف تصبح في الواقع شيء وأنت تسير لتعتاد على.
الآن أن لديك أساسيات لغة واحدة،
انها في الواقع من السهل جدا لبدء الآخرين التعلم.
لذلك نحن في طريقنا للبدء إلى الخطوة قليلا إلى الوراء
ويتستر على اساس الاختلافات بين اللغات التالية
ونوع من أترك لكم إليها.
هناك الكثير من عظيم حقا الموارد على شبكة الإنترنت، والتي
ونحن في طريقنا لبدء توجيه لك نحو لشبكة الإنترنت هو
مستودع هائل من المعلومات.
وحتى انها ليست مثل عليك يكون تخسر بالضرورة
بسبب عدم وجود المعلومات مغطاة في شريط فيديو.
عليك أن تكون لا تزال قادرة على الحصول على كل ما تحتاجه واستخدام
المعرفة قمت بالفعل تراكمت من خلال فهم C
لجعل منحنى التعلم لهذه لغات أخرى في الواقع الكثير تملق.
أعدك.
>> ولكن دعونا نتحدث عن لغة واحدة هذا هو حقا أساسيا لكل شبكة الإنترنت
صفحة، والذي هو HTML.
HTML هي لغة ترميز النصوص التشعبية.
HTML هي لغة ولكنها ليست لغة برمجة.
>> لايوجد HTML المتغيرات.
أنه ليس لديه منطق أو وظائف أو أي شيء من هذا القبيل.
لا نستطيع أن نفعل أي البرمجة في حد ذاته في HTML.
في بعض الأحيان سوف تسمع الناس يصفون أنفسهم
كما المبرمجين HTML، التي ليست دقيقة تماما.
نحن لا يمكن كتابة برامج HTML.
>> يتم استخدام HTML فقط لوضع علامة على النص.
انه دعا لغة ترميز.
وما does-- هذا هذا markup-- نحن به استخدامها في HTML وهذه tags--
هذا markup-- غويا يحدد هيكل صفحة
ويتسبب في نص عادي موجود بين العلامات إلى أن تفسر
قبل المتصفحات بطرق مختلفة.
وربما كان من الأفضل لتوضيح بهذه الطريقة من قبل من التوضيح.
>> وهنا صفحة HTML بسيطة جدا، وليس برنامج HTML، مرة أخرى، على صفحة HTML.
ونحن نعرف انها صفحة HTML لأننا
يحدها كل شيء مع علامات HTML.
لذلك هذا هو ما تبدو علامة HTML مثل.
انها بين أقواس زاوية.
وتلاحظ في أعلى لدينا وHTML في أسفل جدا،
بعد فعلناه ما هو على ما يبدو الكثير من غيرها من HTML،
لدينا زاوية قوس مائل HTML.
لذلك هذا النوع من هي الحدود بين ما هو HTML وما هو ليس كذلك.
وبطبيعة الحال، تقليديا، فقط كما كتبت جميع البرامج C بك
مع ملحقات نقطة C، جميع ملفات HTML الخاصة بك
ستنتهي مع ملحقات HTML نقطة.
ولكن هناك المزيد يحدث هنا.
نحن لا فقط أن هذه العلامات HTML.
لدينا هذا على ما يبدو شيء يسمى علامة الرأس.
حسنا، حسنا، ما هذا؟
>> حسنا ربما من الأفضل أن التمييز عن طريق هيئة،
الجسم يجري محتوى صفحة الويب.
لذلك ربما تحدد العلامة رئيس الاشياء غير موجود في نافذة المتصفح الصحيح،
ولكن من المهم على نحو ما لدينا صفحة على شبكة الإنترنت يتم تقديمها بشكل صحيح.
على سبيل المثال، داخل العلامة الرأس لدينا علامات العنوان.
>> حتى لقب يجري مرحبا العالم، ما يجري في الواقع أن ما
يظهر في التبويب في كروم أو في رحلات السفاري أو Firefox--
أيا كان المتصفح الذي prefer-- هذا ما يحدث لتظهر في العنوان.
وقبل ان تظهر علامات التبويب من شأنه أن يصل في نافذة المتصفح بأكمله
ويمكن أن يكون لديك فقط صفحة واحدة فتح في نافذة المتصفح في وقت واحد.
بحيث سيكون ل عنوان بلدي حتى صفحة في علامة التبويب
أو شريط نافذة المتصفح، مرحبا العالم.
ثم المحتوى من بلدي صفحة الويب سيكون العالم، مرحبا.
لذلك دعونا نلقي نظرة على بعض ما شيء من هذا القبيل قد تبدو.
هذه هي صفحة HTML بسيطة جدا.
لذلك أنا هنا في بلدي IDE وCS50 لقد التكبير قليلا.
وأنا ذاهب لمجرد فتح مرحبا نقطة HTML
وتبين لكم أن هذا هو الى حد كبير محتوى الصفحة الذي رأيناه من قبل.
بلدي بسيطة علامات HTML، الرأس، علامات العنوان والجسم، وهلم جرا.
لقد بادئة أن تكون نظيفة.
>> ثم ما يمكنني القيام به في بلدي IDE هو مجرد معاينة الصفحة.
وهناك نذهب.
محتوى الصفحة بلدي العالم، مرحبا، وأنا لا أرى أي شيء
من الناحية به رئيس هناك.
انها مجرد محتوى الجسم.
العالم، مرحبا.
ومرة أخرى في الجسم فقط وقال، العالم، مرحبا.
الجزء الآخر مفقود.
>> ولهذا حقا كل ما هو.
هذه هي صفحة HTML الأساسية بسيطة جدا.
الآن لقد بادئة بلدي HTML ل يكون لطيفا حقا، والمنظمة،
ولكن ليس لدي فعلا.
أنا يمكن جعلها تبدو قبيحة جدا.
وهذا من شأنه أن لا تزال تعمل.
وستكون هذه الصفحة على شبكة الإنترنت بالضبط نفس.
لقد قمت للتو حصلت على التخلص من كل المساحة البيضاء.
>> كما اتضح، الفضاء الأبيض هو البيانات.
وحتى عندما نقوم بإرسال البيانات من المرسل إلى المتلقي، من الخادم
إلى العميل، وتكاليف البيانات المال.
وحتى التخلص من بيضاء هو في الواقع فكرة جيدة
إذا كنت شخص يخدم حتى الكثير من المحتوى على شبكة الإنترنت.
انها فكرة سيئة إذا كنت شخص من تعلم هذه الاشياء
وكنت تريد أن يكون نظمت بشكل جيد.
هذا هو أسهل كثيرا لتحليل من هذا.
إلا أنها متطابقة وظيفيا.
>> المسافة البادئة وأشياء من هذا القبيل لا يهم فعلا في HTML.
كل ما يهم هو فتح العلامات و علامات إغلاق في الترتيب الصحيح.
لاحظ ما حدث هنا، وإن كان.
العلامات يعطينا وسيلة ل توصيل المعلومات الإضافية
حول ما لدينا كتب.
وكان الجزء مرحبا، العالم تفسر على أنها العنوان.
والعالم، وكان مرحبا جزء تفسر على أنها المحتوى
أو ما ينبغي أن يكون مرئية على صفحة الويب الخاصة بي.
>> هناك أكثر من 100 من هذه مختلفة العلامات والكثير من موارد كبيرة
على الانترنت للعثور عليهم.
ونحن في طريقنا للحديث عن عدد قليل منهم في هذا الفيديو، بعض
من الأشياء الأساسية حقا.
ولكننا لن حديث حول كل ذلك لأنه
أن تكون جامعة مانعة للقيام بذلك.
>> شيء آخر يمكنك القيام به، على الرغم من هو فتح أدوات المطورين.
وإذا كنت تذكر من لدينا شريط فيديو على HTTP،
شرحت كيفية فتح يصل أدوات المطورين.
في كروم انها عادة ما تكون مفتاح F12 لفتح شريط الأدوات المطور.
ثم بدلا من اختيار الشبكة علامة التبويب، يمكنك اختيار علامة التبويب عناصر.
وإذا قمت بتحميل شبكة الصفحة، عليك فعلا
رؤية HTML الذي يخلق أن صفحة الويب.
وهكذا يمكن أن تتعلم الكثير عن HTML من خلال النظر في المواقع المفضلة لديك
ونحن نرى كيف أنها بناء قطع مختلفة منها التي تريد.
ولذلك ربما يكون هناك هذا بارد نمط أو شيء من هذا القبيل.
وكيف جعله مع HTML؟
حسنا يمكنك فتح للتو المطور الأدوات وتحوم فوق هذا العنصر
ونرى بالضبط ما يجعل HTML عليه.
لذلك هذا هو حقا طريقة جيدة لتعلم HTML،
وإنني أوصي بشدة أن يمكنك أن تفعل ذلك على حد سواء لتعلم HTML
وأيضا لمعرفة قليلا قليلا عن بعض الخيارات
تتوفر لك في أدوات المطورين، والتي
بالتأكيد سوف تأتي في متناول اليدين كما البدء في القيام على شبكة الإنترنت أكثر كثافة
البرمجة.
>> لذلك دعونا نلقي نظرة على بضع علامات HTML المشتركة.
ونحن سوف القفز ونلقي نظرة على ما هذه العلامات سوف تجعل أيضا
كما من خلال النظر في بعض الملفات في IDE بلدي.
حتى هنا ثلاث علامات أساسية جدا ل التغيير والتبديل في المظهر المرئي من النص.
هناك علامات B، والعلامات الأول، والعلامات U.
و على التوالي ما يفعلونه هو جعل النص بينهما في جريئة،
المائل، والتسطير.
لذلك دعونا نرى ما الذي سيبدو مثل على صفحة الويب الفعلية في IDE بلدي.
>> حتى هنا في بلدي IDE لدي ملف يسمى BIU نقطة HTML.
BIU نقطة HTML كونها مجرد جريئة، مائل، مما يؤكد.
أنا فتحه.
>> وسنرى أن هنا أنا يكون هذا النص علامات B جريئة.
هذا النص به ı مائل.
وهذا النص تحته خط به U.
ما يتم هذا الانتقال لتبدو وكأنها؟
حسنا مرة أخرى، كل ما لدي القيام به هو الذهاب أكثر من هنا
لمتصفحي، ومتصفح الملف الخاص بي، انقر فوق المعاينة، وهذا هو ما يأتي.
>> النص في بين B به هو في الواقع الآن جريئة.
النص في بين I به هو في الواقع الآن مائل.
والنص في بين U في الواقع مسطرا الآن العلامات.
لذلك هذا امر جيد جدا.
نحن نعرف الآن كيفية جعل النص تبدو أكثر يتوهم قليلا
أو رسم التركيز على بعض الامور.
زوج آخر من العلامات الشائعة هنا علامات الفقرة، والعلامات P، ورأس،
ولقد أصدرت هنا كما HX.
>> هذه العلامات P، هذه العلامات الفقرة، كسر النص الخاص بك إلى فقرات.
انها ليست كافية لمجرد هاهنا وترك مسافات،
لأن الكمبيوتر هو ذاهب فقط أن تفعل ما كنت أقول أن تفعل
ويتجاهل الأبيض الفضاء بالنسبة للجزء الأكبر.
لذلك نحن لا يمكن فقط هاهنا وتتوقع جهاز الكمبيوتر الخاص بنا
تفسير أننا نريد لبدء فقرة جديدة.
علينا أن نقول صراحة جدا هذا هي واحدة paragraph-- هذا هو another--
التي تضم كل منها في مجموعة من الأكواد P.
>> وعلينا أيضا أن هذه الخيارات لH العلامات، وهذه العلامات الرأس.
لدينا ستة مستويات مختلفة رؤوس، واحد، اثنان، ثلاثة،
أربعة وخمسة وستة، والتي هي تدريجيا أكبر وأكبر
رؤوس.
ويحصلون على أصغر و أصغر وأصغر وأصغر.
لذلك لدينا رأس المستوى الأعلى، والثانية رأس مستوى، وهلم جرا، وهلم جرا.
>> دعونا نلقي نظرة على بعض ربما علامات P وبعض العلامات رأس
في العمل على صفحة ويب.
حتى هنا في بلدي IDE لدي ملف يسمى PH نقطة HTML، PH يجري الفقرات
ورأس به.
فتح أن ما يصل.
هناك الكثير يجري هنا لأنني قد وضعت بعض أبجد
هوز، بعض النصوص فقط عشوائي هنا.
ولذا فإنني سوف تصغير قليلا لأن هناك الكثير مما يحدث.
ولكن لاحظ أن لدي في غاية أعلى الصفحة هنا لدي H1، على مستوى واحد،
العلامة الرأس.
ثم لدي الفقرة، الذي هو مجرد حفنة من عشوائية text-- أبجد ipsum--
مجرد ملء الافتراضي القياسية في النص.
لذلك ليس لدي فقرتين داخل ذلك رأس مستوى واحد ثم الأسفل I
يكون رأس مستويين هنا على خط 24، رأس المستوى الثاني، واثنين آخرين
الفقرات.
حسنا ماذا يعني هذا تبدو وكأنها لو عرض عليه في المعاينة بلدي؟
دعونا نرى.
>> لذلك تلاحظ أن رأس المستوى الأول هنا
هو في الواقع أكبر قليلا جدا من رأس المستوى الثاني.
لذلك استخدمنا علامات H1.
وتلاحظ أن علامات P تسمح لنا لكسر الأمور إلى فقرات.
إذا كنا قد تخلصنا من هذه العلامات P وفعلا وضعت للتو يدخل أو الإرجاع
بين ما كنا نأمل أن تكون الفقرات المختلفة،
كانوا جميعا مجرد انتقاد معا و فإنه لن يكون هذه الفقرة طيبة
الفصل مع الفضاء فوق وتحت.
وهذا ما فقرة العلامات ورأس به
تستخدم عادة للقيام رسم الانتباه إلى أجزاء من صفحة على شبكة الإنترنت
بهذه الطريقة.
>> يصل القادمة هي بعض العلامات التي نستخدمها لبناء القوائم على صفحة على شبكة الإنترنت.
لذلك لدينا غير مرتبة lists-- ULs-- التي ليست سوى
القوائم النقطية، أمر قائمة وهي numbered--
OLs-- وداخل إما واحد من هؤلاء نحن بحاجة إلى
مجموعات من كيفية تشير إلى عناصر القائمة، LI.
وهكذا لدينا مفتوحة علامة UL ونضع البنود داخل منه.
ثم عندما ننتهي مع ذلك، يمكننا إغلاق علامة UL.
>> وبالمثل فإننا يمكن أن يكون قائمة مرتبة أو مرقمة
وعناصر القائمة وضعت داخل ذلك.
لذلك دعونا نلقي نظرة في اثنين من القوائم
وماذا يفعلون تقدم كما في IDE CS50.
لذلك ليس لدي هنا في بلدي IDE ل ملف يسمى قوائم دوت HTML.
لنلقي نظرة.
>> وإشعار هنا لدي غير مرقمة قائمة مع خمسة أشياء في ذلك.
ثم لدي قائمة مرتبة، و لقد تغيرت العلامة قليلا،
الصحيح؟
قلت بداية يساوي ستة.
اتضح مع قائمة أمرت يمكن أن يحدد نقطة البداية في أي مكان
I want-- افتراضيا سيكون احدا-- فقط عن طريق إضافة هذا ما يسمى السمة
إلى بلدي العلامة OL.
وهكذا وهذه القائمة بدء العد في ستة.
وبالتالي فإن عناصر تلك القائمة المرقمة يجب أن يكون ستة، سبعة، ثمانية، تسعة، عشرة،
لأن هناك خمسة عناصر في القائمة، في مقابل واحد،
اثنان، ثلاثة، أربعة، خمسة، التي سيكون عليه الحال إذا كنت قد ذكرت OL
دون تحديد السمة البداية.
>> ولذا فإننا سوف مجرد معاينة هذا حتى تتمكن من الحصول على شعور ما يحدث هنا.
وهناك نذهب.
هناك قائمتي.
العناصر الخمسة الأولى هي قوائم غير مرتبة أو نقطي.
والعناصر الخمسة المقبلة هي قائمة مرتبة منفصلة
بدءا من ستة.
لذلك هذه هي الطريقة التي نستطيع بناء القوائم باستخدام HTML.
شيء آخر كنت قد تريد أن تفعل مع HTML
تم إنشاء جدول المعلومات من الصفوف والأعمدة
إلى تقديم معلومات في ولا سيما تنظيم الطريقة.
للقيام بذلك مع HTML نحن يمكن أن يكون لها تعريف الجدول بداية قوس مفتوح
الطاولة.
ثم داخل هذا الجدول نحن قد يكون لديك مجموعة من الصفوف، والعلامات TR
للإشارة إلى كل صف.
ثم تذهب به TD داخل علامات TR لتحديد عمود داخل الصف.
>> لماذا يطلق عليه TD ولا TC؟
حسنا، TD تقف على بيانات الجدول.
عادة أنك تضع المعلومات الخاصة بك هناك.
ولهذا السبب فإنه من TD ولا TC.
انها مربكة قليلا.
>> بحيث يكون لديك علامات الجدول و داخل علامات الجدول الخاص بك
لديك عدد الصفوف، TRS.
وداخل كل صف لديك TDS لعدد الأعمدة
أن كنت تريد أن يكون في هذا الصف معين.
دعونا نلقي نظرة على جدا جدول بسيط في أكثر من IDE CS50.
>> لذلك ليس لدي هنا ملف دعا جدول نقطة HTML.
دعونا ننظر لها في ما يشبه.
هناك الكثير يجري هنا ولكن إذا لاحظت لدي طاولة مفتوحة.
أنا بدأت في الوضوح مع الجدول.
ثم في الصف الأول بلدي أنا على ما يبدو لدينا أربعة أعمدة، واحد، اثنان، ثلاثة،
أربعة.
ثم انتهيت مع هذا الصف.
>> ثم أبدأ صف آخر و قيام اثنين، أربعة، ستة، ثمانية.
الانتهاء من هذا الصف.
هل صف آخر، ثلاثة، ستة، تسعة، 12.
وبعد ذلك الصف الأخير، أربعة، ثمانية و 12، وعلى الرغم من انها
وخفض قليلا قبالة هنا، 16.
>> انتهيت من هذا الصف.
انتهيت من الجدول.
ثم انتهيت مع بلدي HTML.
ماذا يعني هذا تبدو؟
حسنا، انها ليست حقا الكثير لنرى.
لقد نظمت بوضوح معلوماتي في الطريق إلى حد ما أكثر تنظيما.
ولكنها ليست فائقة جميلة هنا.
ونحن في طريقنا للتعامل مع أنه عندما نتحدث عن CSS.
سوف نعيد النظر هذه الفكرة من ما نقوم به لجعل table--
ربما تهيئته بشكل أفضل قليلا؟
لكنني لا تزال لديها أربعة صفوف، كل منها له أربعة أعمدة،
وحقا ما يرقى هذا هو بسيطة جدا أربعة أربعة الضرب
الطاولة.
>> فقط عدد قليل من أكثر العلامات سنتحدث عنه.
دعونا نتحدث عن مفهوم نموذج HTML.
لذلك كنت قد رأيت هذا في سياق تسجيل الدخول إلى صفحة ويب.
وعادة ما اكتب في اسم المستخدم الخاص بك.
كنت اكتب كلمة المرور الخاصة بك، وكنت على ما يرام.
وسيكون ذلك بداية من نموذج.
>> تخطي أكثر من فرقة المشاة الثانية.
لدينا أيضا المدخلات التي نوع من تناسب داخل من الأشكال.
هذه هي العناصر التي كنت تكتب فعلا في،
أو أزرار الراديو وكنت موقوتة، أو الاختيار
المربعات التي كنت مستعرضا.
لذلك فان هذه تذهب داخل من الأشكال.
وتتكون أساسا هم كل صف من النموذج
إذا تم تنسيق النموذج الخاص بك أيضا.
ثم هناك هذا المفهوم من وشعبة، والتي لا حقا
يصلح في أي فئة معينة من العلامات مثل تلك التي لدي
تم القيام سابقا.
انها مجرد نوع من ترسم ابتداء من بعض division-- تعسفيا
div-- من الصفحة.
ليس هناك كسر البصرية.
ليس هناك خط.
ليست تفجيره باعتباره قطعة منفصلة تلقائيا.
وكنت قد لنمط عليه بهذه الطريقة للقيام بذلك.
>> انها مجرد نوع من يقول اريد قطعة من الفضاء على صفحة الويب الخاصة بي،
وأنا ذاهب لمجرد استدعاء كان هذا التقسيم من الصفحة الخاصة بي.
يمكننا وضع الاشياء داخل من divs، في واقع الأمر،
عندما كنا رئيس لأكثر من IDE في الثانية، وسوف نقوم
نرى أن أضع بلدي تشكيل من داخل شعبة.
>> لذلك ليس لدي هنا في بلدي IDE ل ملف يسمى شعبة شكل نقطة HTML.
دعونا فتحه.
لاحظ أنه كما قلت، شعبة هو نوع من التعسف.
الصحيح؟
وهذا لا يعني شيئا.
لذلك لدي تعسفيا دوري الدرجة الاولى من الصفحة الخاصة بي.
ثم بدلا من آخر div في وقت لاحق، ابتداء من خط الثمانية،
لدي هذا النموذج.
وداخل النموذج لدي عدد من المدخلات، وحقول النموذج.
لذلك ليس لدي حقل اسمه A-- والذي لا يعني شيئا
now-- اليمنى والذي على ما يبدو يأخذ النص، واحد آخر
يأخذ كلمة مرور، وآخر هذا هو راديو زر، وآخر مربع الاختيار هذا،
وآخر من زر إرسال.
حسنا، ماذا يفعل هذا كل ننظر في الواقع مثل؟
حسنا، دعونا نلقي نظرة.
سنقوم فتحه لدينا في نافذة المعاينة.
لاحظ أن هذا تعسفيا division-- أولا هناك
أي فصل البصرية هنا.
ولكنها لم تفعل شيئا، أليس كذلك؟
>> ثم لدي مستواي.
وأنا لم أفعل أي تنسيق خاص.
وذلك على شكل هو واحد فقط صف كبير من المعلومات.
إذا كنت قد تنسيق مستواي بشكل مختلف، وأود أن يكون ذلك سطرا سطرا سطرا.
لكنني لم أفعل أي التصميم.
مرة أخرى، نحن لا نتحدث عن CSS هنا.
نحن نتحدث فقط عن HTML.
>> كذلك في شكل النص الذي قدمته يمكنني type-- تذكر أن أشكال نوع النص
حتى أتمكن من وضع اسمي.
وكلمة السر الخاصة بي أنا يمكنك كتابة كلمة المرور الخاصة بي.
ولأن هذا المجال هو من نوع كلمة المرور،
كنت لا تعرف ما هي كلمة المرور الخاصة بي.
انها كل النقاط.
>> يمكنني أيضا اختيار لوضع علامة قبالة زر أو مربع الاختيار وضع علامة خارج.
أو أتمكن من تقديم مستواي.
وأنا لم أفعل أي شيء، لذلك عندما أقدم مستواي،
تحديث الصفحة للتو.
لكنني ربما تكوين بلدي زر ارسال إلى القيام بشيء آخر.
وسنرى ما يمكننا القيام به مع هذا في شريط فيديو في المستقبل على PHP.
ولكن هذا يبني جدا شكل بسيط وهو أننا
يمكن استخدامها لديك للمستخدمين التفاعل و تقديم معلومات إلى موقعنا على الانترنت.
>> تعليق واحد الماضي قبل أن ننتقل إلى بعض العلامات الأخرى
هي لنلقي نظرة على هذا إدخال علامة واحدة لمزيد من الوقت.
لاحظ أن لقد أبرزت نهايات العلامة باللون الأحمر.
كل علامة أخرى رأيناه حتى الآن كان بداية ونهاية، فتح
العلامة وعلامة إغلاق.
>> لكن علامة الإدخال لا.
وليس هناك نص أن يذهب بين علامات الإدخال.
كل المعلومات نحن تنوي نقل
لا بد كجزء من سمات هذا الإدخال.
لاحظ لدينا اسم الدخل يساوي س.
نوع يساوي ذ.
هذا هو حقا كل المعلومات التي نحتاجها.
>> وهذا ما يسمى علامة إغلاق النفس.
أنها لا تتطلب فتح و قريب لأن كل المعلومات
ويرد داخل العلامة وخصائصها.
حتى في بعض الأحيان سترى هذا أيضا.
هكذا فقط يكون على علم أنه إذا كان لديك العلامة هذا هو تماما مكتفية ذاتيا،
أنه يفتح ويغلق نفسه مع قوس الزاوية مفتوحة على اليسار
وزاوية مائلة قوس على اليمين.
سنرى آخر واحد من تلك الآن مع به صورة أيضا.
>> قبل أن نتحدث عن الصور، ونحن بحاجة الى التحدث حول الارتباطات التشعبية.
إذا أردنا صفحة على شبكة الإنترنت أن يكون لدينا تفاعلا ونقل لنا حولها،
سيكون من الجميل أن تكون قادرة للنقر على واحدة من تلك
ما كان عادة الرابط.
هذا هو في الواقع كيف نبني ارتباط تشعبي في صفحة على شبكة الإنترنت.
والمثير للاهتمام بما فيه الكفاية هناك علامة HTML أخرى
دعا صلة، وهي ليست ارتباط تشعبي.
وهنا لتقف على مرساة، و هذه هي الطريقة التي تشير إلى ارتباط تشعبي.
>> A HREF يساوي س سائل انتقل إلى صفحة ويب اكس وكل شيء
بين فتح علامة وثيقة بصمة
هو ما سيكون ذلك أكد النص الأزرق الذي يشبه صلة
أننا على دراية.
دون أن يكون لدينا علامة صورة، والتي هو الذات إغلاق شعارا لعرض
صورة يقع في X. و كنت قد تكون قادرة على تغيير
تلك الصورة عن طريق تحديد العرض والارتفاع
وغيرها من الصفات في أن نقطة نقطة نقطة هناك.
>> في الجزء السفلي جدا هنا لدينا مثيرة جدا للاهتمام
أبحث العلامة التي لا لديك علامة الإغلاق.
انها تعجب DOCTYPE HTML.
لذلك كان HTML حولها منذ أوائل 1990s لبناء صفحات الويب،
وانها ذهبت خضع عدة تنقيحات منذ ذلك الحين.
وكان آخرها في عام 2014 أنه خضع لعملية المراجعة
دعا HTML5 التي هي الآن التيار الواقع نوعا من HTML القياسية.
>> للإشارة إلى أن شبكة الإنترنت يتم كتابة صفحات باستخدام HTML5،
هذه هي الطريقة التي تبدأ.
ويمكن أن يتم حذف ولكن ما هذا الأساس
الوسائل هي لا يمكنك استخدام أي من العلامات أنه لا علامات HTML5، تلك العلامات الجديدة.
لذلك نحن دائما تبدأ من إذا نستخدمه HTML5.
وجميع العلامات لقد تحدثنا عن هي سابقا ليس به HTML5.
ولكن هذا من شأنه أن يشير إلى أن وبه HTML5 تكون موجودة.
ولذا يتعين علينا التعجب DOCTYPE HTML، التي
هو في البداية لدينا ملف HTML، ثم بعد ذلك نقطة
لدينا في الواقع لدينا HTML مفتوحة علامة وننطلق من هناك.
>> آخر واحد هو علامة تعليق، التي تبدو مختلفة قليلا، أيضا.
فإنه يبدأ مع زاوية قوس تعجب اندفاعة
اندفاعة ولكن لا قوس الإغلاق.
بين هذين العنصرين هناك هو المكان الذي تكتب التعليقات الخاصة بك.
ودعونا نلقي نظرة على الصور والتعليقات والروابط في IDE CS50.
>> لذلك ليس لدي هنا ملف يسمى رابط الصورة نقطة HTML الذي أنا ذاهب لفتح.
ولاحظ لقد حصلت على زوجين من تعليقات هنا في تعليقاتي HTML.
تماما مثل ذلك في C وغيرها لغات البرمجة،
HTML لمجرد كونه لغة الترميز لديه القدرة على الحصول على تعليقات.
وحتى أنا ما يبدو ذاهب الى وضع صورة لريك آستلي
في مكان ما بين هذه شعبة العلامة، هذا التقسيم التعسفي.
يبدو أن الملف تقع في ريك نقطة JPEG، التي
إذا عدنا الى شجرة ملفي لثانية واحدة،
هو ملف موجود في الدليل الحالي.
لذلك هذا هو موافق.
أستطيع الرجوع إليه.
>> ثم أنا يمكن أن يكون لها صلات داخلية.
لذلك نلاحظ على خط 11 هنا بلدي أ href هو مرحبا نقطة HTML.
بحيث يشير فقط إلى نقطة مرحبا HTML وهو موجود في الدليل الحالي.
وأنا يمكن أن يكون أيضا خارجي وصلات فقط عن طريق تحديد HTTPS
للإشارة إلى أن أنا لا أتحدث حول ملف في دليل بلدي الحالي.
أنا أتحدث عن ملف موجود في مكان ما على شبكة الإنترنت، والتي لدي
لطلب باستخدام بروتوكول HTTP.
>> لذلك دعونا نلقي نظرة على ما هذه الصفحة قد تبدو
والحصول على استعداد للحصول على صورة من ريك آستلي لتظهر على الشاشة.
ولذا فإنني سوف معاينة هذا.
هناك ريك آستلي في أعلى جدا في هذا تعسفيا
تقسيم وضعه في الأعلى.
ثم الأسفل I لها صلات لي، أليس كذلك؟
>> لدي تصل إلى نقطة مرحبا HTML.
وإذا كنت فوق ذلك، وأحصل انتقلت إلى هذه الصفحة
أننا مألوفة جدا مع من بداية برنامجنا.
إذا كنت البوب ​​أن صفحة مفتوحة مرة أخرى، إذا أنا رابط الصورة البوب ​​فتح واحد مزيد من الوقت،
أنا يمكن أن يذهب أيضا خارجيا إلى موقع الويب CS50 ل.
وهناك ونحن see-- وسوف أكون تصغير قليلا here--
سنرى CS50 على شبكة الإنترنت نوع من جزءا لا يتجزأ من منتصف صفحتنا.
لذلك كنت قادرا على جعل داخلي ربط فضلا عن ارتباط خارجي.
>> حكم مشاركة مع HTML التي نحن بصدد الحديث عنه هنا
غير أن HTML الخاصة بك ينبغي أن يكون منسق بشكل جيد.
في C تحدثنا كثيرا حول بناء الجملة مختلف الأشياء.
في HTML بناء الجملة حقا تدور حول العلامات.
كل علامة فتح تحتاج إلى أن تكون مغلقة.
في واقع الأمر، كل علامة لك فتح يجب أن تكون مغلقة في ترتيب عكسي.
>> لذلك إذا كنت فتح علامة جريئة، وهو مائل العلامة، ثم علامة التسطير
أن تفعل كل ثلاثة إلى مجموعة معينة من النص،
يجب إغلاقها في ترتيب عكسي.
حتى إذا فتحت جريئة، مائل، تسطير، ل
تريد إغلاق التسطير، مائل، جريئة.
هذا النوع من التغليف هو ما يحتفظ HTML لطيفة والمنظمة.
>> خلافا C، على الرغم من، لن أخطاء في بناء الجملة في الواقع تشل HTML الخاص بك ربما.
قد يكون HTML الخاص بك ليس على ما يرام شكلت لكن لا تزال تعمل.
وحتى هذه الأخطاء يمكن فرز الشريحة التي كتبها.
والامر متروك لك أن تكون حقا اليقظة.
في بعض الأحيان أنها سوف تفشل ولكن أحيانا يمكن أن تفلت من العقاب.
>> ويمكن أن يكون حقا مهمة صعبة، على الرغم من
لتتبع عند فتح علامة، عند إغلاقه،
خصوصا HTML الخاص بك ملفات الحصول على أكبر وأكبر.
فأنت تريد بعض المساعدة.
وهناك على الانترنت أدوات المصادقة أنك
يمكن استخدامها لإلقاء نظرة على الويب الخاص بك الصفحة ومعرفة ما اذا كان جيدا شكلت HTML.
ويجب عليك بالتأكيد نلقي نظرة على تلك
والبدء في استخدامها كما كنت تبدأ القيام ببعض الأعمال مع HTML،
كتابة HTML، فقط حتى تحصل بعض العادات الجيدة حول تنظيم
HTML الخاصة بك بطريقة جيدة و اسلوب جيد والتأكد من
ان كنت لا تفعل أي شيء يمكن إنشاء خطأ في بناء الجملة التي
سوف يسبب لك بعض الشيء من مشكلة على الطريق.
>> أنا دوغ ويد.
هذا هو CS50.