>> Daven FARNHAM: Сегодня, я собираюсь немного поговорим о HTML,
Язык разметки гипертекста.
Вы видите HTML везде в эти дни.
В самом деле, если вы смотрите это видео в браузере, вы
видя HTML прямо сейчас.
HTML не является языком программирования, скорее, это язык разметки, используемый на
веб-браузеры, способные воспроизводить страницы в Интернете.
>> Таким образом, вы можете спросить, как именно пишет Адрес страницы в сети HTML отличается
от написания программы в программировании язык, как C?
Ну, C является языком с очень строгим синтаксические правила, которые необходимо
составлен до того, как может работать.
Если вы когда-либо забыли включить Точка с запятой в конце заявлении в
ваша C код, вы знаете, о чем я говорю о в отношении строгого синтаксиса.
>> Веб-браузеры тем не менее, немного больше прощая когда дело доходит до HTML.
Даже если ваш HTML не синтаксически правильно, ваша страница все еще может быть
отображается в браузере, но это могло бы Не смотрите, что хотели.
Так что это всегда лучше следовать правилам.
Лучший способ получить интуицию о том, как все это работает, чтобы
пройти через примера.
>> Итак, что мы имеем здесь дело с основным основой для веб-страницы.
Вы, наверное, заметили много вещей между угловыми скобками.
Ну, это только теги.
Теги основном информирует веб-браузеров что, эй, что-то
приходит на ваш сайт.
Помните, каждый раз при открытии тег, необходимо закрыть его, как только вы
закончите его использования.
>> Так, например, я открываю раздел кода с открытым
Кронштейн тело, закрывающая скобка.
Затем я добавить текст, в данном случае, мой Первый веб-страницы, то когда я пошел в
В заключение этого раздела, я использую почти идентичны тег кроме этого времени с
косая черта перед теле.
В общем, это формат вы собираетесь использовать всякий раз, когда вы открываете
и закрывающие теги.
Вместе с открытым теги и конечный тег сочинять то, что называется элемент.
>> Если вы посмотрите на первой линии, вы будете см. восклицательный знак с последующим
DOCTYPE HTML.
Это действительно просто говорю ваш браузер , что файл является веб-страница
написано в HTML.
HTML тегов существу говорит, вот идет некоторые HTML.
Тогда у нас есть голова тег с тег название внутри него.
Глава тег вы можете думать о качестве включающий HTML код, который приходит для
основная часть вашей веб-страницы Фактическое содержание.
>> В общем, вы положили название вашего веб-страницы здесь, хотя есть некоторые
другие теги, которые могут появиться здесь также.
Далее идет тело вашей веб-странице, тем фактическое мясо и кости вашего сайта.
В нашем примере, мы просто поставить простой Приговор, Мой первый веб-страницы,
которые, если мы запустим наш сайт, будет выглядеть немного что-то вроде этого.
Наша веб-страница не слишком странно, но не волнуйтесь.
Мы ели его в ближайшее время.
>> Таким образом, выше HTML, мы дадим вам очень базовый шаблон для веб-страницы,
ничто не полагает, просто голые кости.
Но если я создаю веб-страницу, что делать, если я хочу добавить
картина, скажем, себя?
Ну, я могу это сделать.
Есть несколько способов добавлять изображения на ваш сайт.
Если изображение в той же папке, Ваш HTML файл, вы можете по ссылке
Изображение с помощью пути, как это.
>> Вы открываете с тега изображения с последующим на в атрибуте Alt в
источник изображения.
Значение Альт атрибута является лишь некоторые Альтернативный текст в случае, если пользователь не может
видеть изображение.
Кроме того, вы можете перейти по ссылке Изображения с помощью полного URL, как это.
Теперь, что веб-сайт на самом деле не существует, но если бы картина
мне по этому адресу, я мог бы использовать источник URL включить
его образ на моем сайте.
В любом случае, вы в конечном итоге с гораздо красивее сайт, что-то вроде этого.
>> Ну, это очень здорово, но я как бы от того, хотите какой-нибудь текст здесь.
Так что давайте просто добавить что-то супер просто выше
Изображение, как и заголовок.
Все, что я сделал до сих пор, это использовать заголовок тег, H1, и разрыв фраза, шир.
Тег заголовка делает шрифт немного немного больше и более заметным.
Тег обрыва линии, с другой С другой стороны, это круто.
В отличие от большинства других тегов, вы не должны открытие и закрытие перерыв тег, просто
один показано выше.
Это потому, что перерыв не имеет содержания и поэтому, пустой элемент.
>> Пустые элементы, как это, вы можете открыть и близко одновременно просто
в том числе косой черты в конец первоначального заявления.
Так что теперь мой сайт выглядит немного что-то вроде этого.
Лучше, но это отчасти чувствует как тупик.
Там в некуда идти в сторону из этой главной странице.
Ну, давайте исправить, включая ссылку.
>> То, что я собираюсь сделать вот использовать атрибут обозначается и сделать
Изображение ссылку на, скажем так, CS50 телевизор.
Таким образом, всякий раз, когда кто-нибудь нажимает на меня, их браузер будет направлена ​​на
другой, вероятно, более полезно, веб-страницы.
Мне пришлось свести к минимуму размер текст немного, потому что наш веб-страница
становится все более продвинутые.
Но, надеюсь, это все еще ясно.
Мой сайт выглядит точно так же только Теперь, всякий раз, когда я нажимаю на картинке,
мой браузер откроет другой Вкладка для веб-страницы CS50.tv.
>> Наконец, предположим, что я собираюсь стиле этот сайт позже с помощью CSS.
CSS является то, что известно как каскадные таблицы стилей.
И это в основном обеспечивает эффективный способ редактирования и стиль
подобные блоки кода.
Я хочу начать организации моей HTML к чтобы было легче укладывать в дальнейшем.
Здесь, я создал два различных вида идентификаторы, которые помогут организовать свой код.
Я использовал атрибут ID внутри разделение или дел тег, и я использовал
Класс атрибутов внутри другой дел тег.
>> ID и атрибуты класса работают аналогично.
Разница лишь в том, вы можете иметь только один элемент, удельный ID, но
любое количество элементов можете поделиться класс.
Так, например, я могу использовать класс изображения несколько раз, но я не могу
создать еще один отдел с ID вершине.
Хотя я не пошел в CSS, другой язык обычно используется
наряду HTML, как только я начинаю стиль мой код с CSS, я могу использовать эти
организационные атрибуты к воздействию эстетика моего веб-страницы.
>> Все в рамках Отдела верхней будет иметь такие же стилю или любого
Другая группа HTML I группы в Класс изображение поделятся подобный взгляд.
Это гораздо легче, чем пытаться редактировать и изображения или блоки стиль
текст индивидуально.
>> Таким образом, мы перешли основы того, как чтобы сделать веб-страницу с HTML.
HTML имеет кучу других функций слишком что, когда в паре с другими языками
как CSS и JavaScript, могут на самом деле сделать страницы выделиться.
Лучший способ научиться работать с HTML просто возиться с ним,
посмотреть, что работает, а что нет.
>> Меня зовут Daven Фарнхэм.
Это CS50.
>> Так, например, я могу использовать образ класс -
Нет, есть очень много атрибутов.
Меня зовут Daven Фарнхэм.
Это CS 650.
Я хочу сказать, CSS.
Это CSS.