ДАГ 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. Давайте посмотрим на как это выглядит. Там очень много происходит здесь, но если вы заметили, у меня есть таблица открыта. Я начинаю определение со столом. И тогда в моем первом ряду, видимо, я есть четыре колонны, один, два, три, 4. И тогда я сделал с этой строки. 

Тогда я начинаю другую строку и сделать два, четыре, шесть, восемь. Закончить эту строку. У другой ряд, три, шесть, девять, 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.