ДАГ Lloyd: Так ми провели about-- якщо моя математика є правильним, і я думаю, дивлячись back-- Я думаю, ми витратили близько 35 відео говорити про різні аспекти С, може бути трохи більше, може бути, трохи менше. І ми не покривають все в 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-теги. Ми, мабуть, є це що називається головний тег. Ну, добре, що це таке? 

Ну, може бути, краще виділити шляхом тіла, Тіло є вміст веб-сторінки. Так, може бути, глава тег визначає матеріал який не перебуває у вікні браузера власне, але якось важливо, щоб наші веб-сторінки, надавані правильно. Наприклад, усередині з Глава тег нас є теги назви. 

Так назва будучи привіт світ, що насправді відбувається, те, що Виставки в закладці в Chrome або в сафарі або Firefox-- всі браузер prefer-- це що відбувається, щоб показати в назві. І перш, ніж вкладки було б показати в всьому вікні браузера і ви можете мати тільки одну сторінку відкрити у вікні браузера в той час. Так, що відбувається, щоб бути Назва моєї сторінки вгору на вкладці або бар вікно браузера, привіт світ. І тоді зміст моєї веб-сторінка буде мир, привіт. Отже, давайте поглянемо на те, що деякі річ, як це може виглядати. Це досить простий HTML-сторінки. Так що я тут, в моєму CS50 IDE і Я збільшено небагато. І я просто хочу, щоб відкрити привіт точка HTML і показати вам, що це в значній мірі вміст сторінки, що ми бачили раніше. Мої теги HTML прості, головні теги заголовків, тіла, і так далі. Я з відступом, щоб бути чистим. 

І тоді те, що я можу зробити в моєму IDE просто переглянути сторінку. І ми йдемо. Зміст моїй сторінці світу, привіт, і я не бачу нічого в с тегами голові. Це просто зміст тіла. Світ, привіт. І знову тіло просто сказав, світ, привіт. Інша частина відсутня. 

Так що насправді все це. Це дуже просто основній сторінці HTML. Тепер я з відступом мій HTML на дійсно хороший і організований, але я насправді не доведеться. Я міг би зробити це виглядати досить потворним. І це буде як і раніше працювати. Це буде точно такий же веб-сторінці. Я тільки що позбувся всі порожній простір. 

Як з'ясовується, білий простір даних. І тому, коли ми посилаємо дані з відправника до одержувача, від сервера клієнту, дані коштує грошей. І так, щоб позбутися від прогалин насправді хороша ідея якщо ви хтось, хто служить до багато веб-контенту. Це погана ідея, якщо ви той, хто вчиться цей матеріал і ви хочете, щоб це красиво організовано. Це набагато простіше, щоб розібрати, ніж це. Але це функціонально ідентичні. 

Поглиблення тощо насправді не має значення, в HTML. Все, що має значення відкриття теги і закриваючі теги в правильному порядку. Зверніть увагу, що тут сталося, хоча. Розмітка дає нам шлях до спілкуватися додаткову інформацію про те, що ми написали. Привітання, Світовий частина була інтерпретується як назву. І світ, привіт частина була інтерпретується як зміст або те, що повинно бути видні на моїй веб-сторінці. 

Є більш ніж 100 з них відрізняється теги і багато великих ресурсів онлайн, щоб знайти їх. Ми збираємося говорити про Деякі з них в цьому відео, деякі справді фундаментальної речі. Але ми не збираємося говорити про все це тому, що він буде вичерпним зробити. 

Ще одна річ, ви можете зробити, хоча, це відкрити інструменти розробника. І якщо ви пам'ятаєте з наше відео на HTTP, Я пояснив, як відкрити до інструментів для розробників. У Chrome це зазвичай клавішу F12 щоб відкрити панель інструментів розробника. Тоді замість вибору мережі закладка, ви можете вибрати вкладку Elements. І якщо ви завантажуєте веб сторінок, ви насправді подивитися HTML, який створює цю веб-сторінку. І так ви можете дізнатися багато нового про HTML , Дивлячись на ваші улюблені веб-сайти і бачачи, як вони будувати різні частини з них, які вам подобаються. Так, може бути, є в цьому прохолодному малюнок або щось подібне. Як вони роблять це з HTML? Ну ви можете просто відкрити свій розробнику інструменти та наведіть курсор на цьому елементі і побачити те, що робить його HTML. Так що це дійсно хороший спосіб, щоб дізнатися HTML, і я настійно рекомендую, що ви робите це, щоб дізнатися, як HTML- а також дізнатися трохи трохи про деяких з варіантів доступні для вас в інструменти для розробників, які неодмінно стане в нагоді в Ви починаєте робити більш інтенсивне Інтернет програмування. 

Отже, давайте поглянемо на пара загальних тегів HTML. І ми будемо стрибати і поглянути на те, що ці теги також буде надана а, дивлячись на деяких файлів в моєму IDE. Так ось три найосновніші теги для налаштування зовнішнього вигляду тексту. Там це B теги, теги, I і U теги. І, відповідно, те, що вони роблять, це візуалізації тексту між ними жирним шрифтом, курсив, підкреслення і. Отже, давайте подивимося, що це буде виглядати як на реальній веб-сторінки в моїй IDE. 

Так от в моєму IDE у мене Файл називається МУВ точка HTML. МУВ точка HTML просто бути напівжирний, курсив, підкреслення. Я відкрию його. 

І ми побачимо, що тут я Тобто цей текст є B теги виділені жирним шрифтом. Цей текст мітки I курсив. І цей текст U теги підкреслив. Що це буде виглядати? Ну знову ж таки, все, що я щоб зробити, це зайти сюди в моєму браузері, мій файл-браузер, натисніть Попередній перегляд, і це те, що йде вгору. 

Текст між B теги дійсно в даний час виділені жирним шрифтом. Текст між I теги дійсно в даний час курсивом. І текст в між U теги дійсно в даний час підкреслені. Так що це досить добре. Тепер ми знаємо, як зробити текст виглядати трохи більше фантазії або намалювати акцент на певних речах. Ще пару загальних тегів тут теги параграфів, теги Р, і заголовок, які я надав тут HX. 

Ці P теги, цих тегів абзацу, розбити текст на абзаци до. Це не досить просто Введіть вдарив і залишити прогалини, тому що комп'ютер буде тільки робити те, що ви скажете їй зробити і ігнорує білий Простір по більшій частині. Тому ми не можемо просто натисніть Enter і чекати наш комп'ютер інтерпретувати, що ми хочемо щоб почати новий абзац. У нас є дуже явно кажуть, що це є одним paragraph-- це another-- укладаючи один в наборі тегів P. 

І ми також маємо ці варіанти для H, ці теги заголовків. У нас є шість різних рівнів заголовків, один, два, три, чотири, п'ять, шість, які є поступово все більше і більше заголовків. І вони стають все менше і менше і менше, і менше. Тому у нас є заголовок верхнього рівня, другий Тема рівня, і так далі, і так далі. 

Давайте поглянемо на деякі, можливо, P-теги і теги заголовків деякі в дії на веб-сторінці. Так от в моєму IDE у мене є файл з ім'ям PH точка HTML, PH бути пункти і теги заголовків. Відкрийте, що до. Там дуже багато відбувається тут бо я поставити деякі Lorem Ipsum, деякі просто випадковий текст тут. Так що я буду видаляти трохи тому що є так багато всього відбувається. Але зверніть увагу, що в мене є, по крайней початку тут у мене є H1, рівень один, заголовок тега. Тоді у мене є пункт, який знаходиться всього купа випадкових text-- Lorem ipsum-- просто за замовчуванням стандартний заповнення тексту. Так що в мене два абзаци всередині, що Рівень одна заголовок, а потім вниз I Тобто рівень два заголовки тут, на лінії 24, заголовок другого рівня, і ще два пункти. Ну що це схоже якщо я його перегляду в моєму перегляду? Давайте подивимося. 

Так зауважити, що заголовок першого рівня тут насправді зовсім небагато більше ніж заголовок другого рівня. Тому ми використовували H1 теги. І зверніть увагу, що теги P дозволяють нам зламати речі в пунктах. Якби ми позбулися цих тегів P а насправді просто покласти Вхід або повернення в між тим, що ми сподівалися, бути різні пункти, вони всього лише грюкнути разом і це не було б цього прекрасного пункт поділ з простором вище і нижче. І ось що пункт теги і теги заголовків зазвичай використовуються, щоб зробити, щоб привернути увагу до частин нашого веб-сторінці таким чином. 

Потім деякі ознаки, які ми використовуємо побудувати списки на нашій веб-сторінці. Отже, ми маємо невпорядкований lists-- ULs-- які просто марковані списки, впорядковані Список яких numbered-- OLs-- і всередині або один з тих, кого ми повинні мати набори, як вказують елементи списку, LI. І тому ми повинні відкрите UL тег і покласти предмети всередині нього. А потім, коли ми закінчили з що ми можемо закрити тег UL. 

І точно так само ми можемо мати впорядкований список або нумерований і поставити елементи списку всередині, що. Отже, давайте поглянемо на пару списків і те, що вони будуть надавати також на CS50 IDE. Так що я тут, в моїй IDE а файл з ім'ям списки точка HTML. Давайте поглянемо. 

І зауважте тут у мене є невпорядкований список з п'яти речей у ньому. А то у мене впорядкований список, а Я змінив тег небагато, вірно? Я сказав старт дорівнює шести. Виявляється з упорядкованою список I може встановити початкову точку там, де це Я want-- за замовчуванням він буде одно-- просто додавши цей так званий атрибут на мій OL тега. І так цей список буде почати відлік в шість. Так що елементи цього нумерованого списку має бути шість, сім, вісім, дев'ять, десять, бо є п'ять елементів в списку, на відміну від одного, два, три, чотири, п'ять, який було б у випадку, якщо я сказав ПР без вказівки атрибуту початку. 

Таким чином, ми просто переглянути це так, ви можете отримати почуття для того, що тут відбувається. І ми йдемо. Там мій список. Перші п'ять елементів невпорядковані або маркіровані списки. І в найближчі п'ять елементів це окрема впорядкований список починаючи з шести. Так от, як ми можемо створювати списки, використовуючи HTML. Ще одна річ, ви могли б хочете зробити з HTML це створити таблицю Інформація з рядків і стовпців представити інформацію в Особливо організовано. Щоб зробити це з HTML ми можемо мати Визначення таблиці починають відкриту дужку Таблиця. А потім всередині цієї таблиці ми може мати безліч рядків, TR тегів щоб вказати кожен рядок. А потім TD теги зайти всередину ПДР тегів для визначення стовпця в рядку. 

Чому вона називається ТД і не TC? Ну, ТД виступає за табличних даних. Зазвичай ви ставите є ваша інформація. Так от, чому це ТД, а не ТЗ. Це трохи збиває з пантелику. 

Таким чином, ви повинні таблиць тегів і всередині тегів таблиці у вас є кілька рядків, ТУ. А всередині кожного рядка у вас є TDS для числа стовпців що ви хочете, щоб У цьому конкретному ряду. Давайте поглянемо на дуже проста таблиця на себе в CS50 IDE. 

Так що я тут файл називається таблиця точка HTML. Давайте подивимося на як це виглядає. Там дуже багато відбувається тут, але якщо ви помітили, у мене є таблиця відкрита. Я починаю визначення зі столом. І тоді в моєму першому ряду, мабуть, я є чотири колони, один, два, три, чотири. І тоді я зробив з цього рядка. 

Тоді я починаю інший рядок і зробити два, чотири, шість, вісім. Закінчити цей рядок. В іншої ряд, три, шість, дев'ять, 12. А потім останній рядок, чотири, восьмій, 12, і, хоча це трохи відрізати тут, 16. 

Я закінчив цей рядок. Я закінчив таблицю. І тоді я зробив з моєї HTML. Що це виглядає? Ну, це насправді не багато, щоб бачити. Я чітко організував мою інформацію в дещо більш організовано. Але це не супер досить тут. І ми збираємося мати справу з що, коли ми говоримо про CSS. Ми повернемося цю ідею що ми робимо, щоб зробити table-- може бути, відформатувати його трохи краще? Але я все ще є чотири рядки, кожен з яких складається з чотирьох стовпців, і дійсно, що це становить це дуже простий чотири на чотири множення Таблиця. 

Ще кілька тегів, ми будемо говорити про. Давайте поговоримо про Концепція HTML формі. Таким чином, ви, можливо, бачили це в Контекст входу у веб-сторінки. Зазвичай ви вводите своє ім'я користувача. Ви вводите свій пароль, і ви добре йти. Це було б початком вигляді. 

Пропуск більш DIV секунду. У нас також є входи, які вид поміститися усередині форм. Це елементи, які ви насправді ввівши в, або радіо-кнопки ви цокає, або перевірка ящики, які ви галочку. Таким чином, ці йдуть всередині форми. І вони включають в основному кожен рядок вигляді якщо ваша форма буде відформатований також. Тоді є ця концепція DIV, який насправді не вписатися в будь-якої конкретної категорії тегів, як ті, які я робив раніше. Це просто свого роду розмежовує початок деякої довільної division-- div-- сторінки. Там немає ніяких візуальних перерву. Там немає лінії. Це не зараховуються як окремий шматок автоматично. Ви повинні були б розробити це що спосіб зробити це. 

Це просто свого роду каже, що я хочу шматок простору на моїй веб-сторінці, і я просто буду називати це такий поділ моїй сторінці. Ми можемо покласти речі всередині з діви, і справді, коли ми над головою IDE в секунду, ми будемо бачити, що я ставлю мій утворюють всередині справ. 

Так що я тут, в моїй IDE а Файл називається DIV форма точка HTML. Давайте відкриємо його. Зверніть увагу, що, як я сказав, DIV начебто довільним. Вірно? Це насправді не означає нічого. Так що я довільне Перший розділ моїй сторінці. І тоді замість іншого DIV пізніше, починаючи з лінії восьми, У мене є цей вид. А всередині форми у мене є Кількість входів, поля форми. Так що в мене поле, чиє ім'я є A-- які насправді не означає нічого Право now--, що, мабуть приймає текст, ще одне, що приймає пароль, інший, що це радіо Кнопка, інший, що це прапорець, і ще, що це кнопки Надіслати. Ну, те, що робить це все насправді виглядає? Ну, давайте поглянемо. Ми відкриємо його в нашому вікні попереднього перегляду. Зверніть увагу, що це довільне в першу чергу це division-- є немає візуального розділення тут. Це насправді не робити нічого, вірно? 

А то у мене мою форму. І я не зробив ніякого спеціального форматування. Таким чином, форма є лише одним великий ряд інформації. Якби я по-іншому відформатовані свою форму, Я міг би порядково порядково. Але я не робив ніяких стиль. Знову ж таки, ми не говоримо про CSS тут. Ми тільки що говорили про HTML. 

Ну в моєму текстовому вигляді я можу type-- пам'ятайте, що форми типу текст так що я можу поставити свій підпис. І в моєму пароль Я можна ввести свій пароль. І тому, що цій галузі це типу пароля, Ви не знаєте, що мій пароль. Це всі крапки. 

Я також можу вибрати галочку радіо-кнопки або позначте прапорець. Або я міг би представити свою форму. І я нічого не роблю, тому, коли я уявити мою форму, сторінка просто оновлюється. Але я міг би, можливо, налаштувати мій Розмістити кнопку, щоб зробити щось ще. І ми побачимо, що ми можемо зробити з що в майбутньому відео на PHP. Але це створює дуже проста форма, що ми можна використовувати, щоб взаємодіяти користувачі і представити інформацію на нашому сайті. 

Один останній коментар, перш ніж ми перейти до деяких інших тегам є поглянути на це тег введення ще раз. Зверніть увагу, що я виділив кінці тега в червоному. Кожен другий тег ми бачили досі має був початок і кінець, отвір тег і закриваючий тег. 

Але вхід тег не робить. Там немає тексту, який йде між вхідними тегів. Вся інформація ми маємо намір передати пов'язаний як частина атрибути цього входу. Зверніть увагу, у нас є ім'я входу дорівнює х. Тип дорівнює у. Це дійсно все Інформація, яку ми повинні. 

Це називається саме закриває тег. Це не вимагає відкриття і на близько, тому що всі інформації міститься всередині тег і його атрибути. Так що іноді ви побачите це, теж. Так просто бути в курсі, що якщо у вас є тег, який повністю автономним, відкривається і закривається себе відкрита дужка зліва і кут слеш Кронштейн праворуч. Ми побачимо ще один з тих, зараз з тегами зображення, а також. 

Перш ніж ми поговоримо про зображення, ми потрібно говорити про гіперпосилань. Якщо ми хочемо, щоб наш веб-сторінки, щоб бути інтерактивним і перемістити нас навколо, було б непогано мати можливість натиснути на одного з тих, те, що як правило, були синій посилання. Це насправді, як ми будуємо гіперпосилання на нашій веб-сторінці. І що цікаво є ще один тег HTML називається ланка, яка не є гіперпосилання. А от чи варто для якоря, і ось як ми вказуємо гіперпосилання. 

HREF дорівнює х кошти йдуть веб-сторінки Х. І все між відкритим Тег і близько Тег це те, що буде, що підкреслив синій текст, який виглядає як посилання що ми знайомі. Нижче у нас є зображення, яке тег є самостійною закриває тег для відображення зображення знаходиться в X. А Ви могли б бути в змозі змінити що зображення, вказавши Ширина і висота та інші атрибути в що точка точка точка є. 

У самому низу тут у нас є дуже цікавий шукаю тег, що не є закриваючий тег. Це знак оклику DOCTYPE HTML. Так HTML був приблизно з початку 1990-х для будівництва веб-сторінок, і він пішов зазнали ряд змін з тих пір. Зовсім недавно в 2014 році він пройшов ревізію називається HTML5, який в даний час є струм роду де-факто стандартом HTML. 

Щоб вказати, що наш веб- сторінки, написані з використанням HTML5, це, як ми починаємо. Це може бути опущено, але те, що, що в основному означає, що ви не можете використовувати будь-який з тегів які HTML5 теги, ці нові теги. Таким чином, ми завжди почати якщо ми за допомогою HTML5. І все теги ми говорили про що раніше не HTML5 теги. Але це означало б, що HTML5-теги будуть присутні. І тому ми повинні вигук DOCTYPE HTML, який знаходиться на самому початку нашого HTML-файл, а потім, після точки, що ми насправді є відкритий наш HTML- помітити і перейти звідти. 

Остання є тег коментаря, який виглядає трохи відрізняється, теж. Вона починається з кута Кронштейн знак тире тире, але не закриває дужка. У між цими двома елементами там де ви пишете свої коментарі. І давайте поглянемо на зображення, Коментарі та посилання в і CS50 IDE. 

Так що я тут файл називається посилання на зображення точка HTML, який я збираюся відкрити. І зауважте, я отримав пару коментарі тут, в моїх HTML коментарі. Так само, як в C та інших мови програмування, HTML тільки будучи мова розмітки дійсно є здатність мати коментарі. І тому я, мабуть збирається розмістити картину Рік Естлі десь між цією DIV тег, це довільне поділ. Мабуть, що файл розташований в Рик точка 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.