Предыдущий ролик Следующий ролик  

Видео урок: Исследование HTML

Основы веб-дизайна

Сердцем каждой веб-страницы является HTML. Этот язык разметки широко используется по всему интернету. Язык разметки подразумевает, что для определения того, какой тип контента должен отображать браузер, вы будете использовать теги. Давайте создадим базовую HTML-страницу для того, чтобы вы могли представить себе, как все это работает. Итак, на данный момент я работаю на Mac-устройстве, поэтому буду пользоваться программой под названием "TextEdit". Откроем эту программу. По сути, TextEdit - это простой текстовый редактор.

Если вы работаете не на Mac-устройстве, а на каком-то другом компьютере, то можете свободно пользоваться редактором Notepad. Он тоже вполне подходит для этих целей. При желании вы можете использовать любой текстовый редактор, предназначенный для работы с неотформатированным текстом. На самом деле на то, что я не пользуюсь специальным редактором для веб-разработчиков, есть свои причины. Если вам хочется воспользоваться таким редактором, как Brackets, а им я пользуюсь в настоящий момент, или текстовым редактором Sublime Text, или чем-то подобным, то можете просто их скачать. К примеру, Brackets - это бесплатный редактор. Тем не менее, для этой конкретной серии упражнений я не использую редактор кода по двум важным причинам.

Причина под номером 1 - показать, что HTML, CSS и Javascript-файлы есть ничто иное, как обычные текстовые файлы с неотформатированным текстом. В этом вся их суть. У этих файлов есть определенное расширение. Оно не только обозначает наличие в них простого, неотформатированного текста, но и указывает браузеру на то, каким образом анализировать эти файлы. Это своего рода красота и простота интернета. Вторая причина - показать, что не нужно тратить тысячи долларов на инструменты и оборудование, чтобы создать веб-сайт. Если бы вы захотели воспользоваться старым способом, то могли бы просто открыть Notepad, запустить текстовый редактор и начать работать. В этих редакторах не используется такое надежное кодирование, как в других инструментах, но их все равно можно использовать для создания сайтов.

Конечно, эти сайты не будут столь эффективны, но все же будут работать. Давайте пока закроем это окно, поскольку я хочу показать вам пару настроек. Откроем окно с настройками. Перейдя на вкладку "Новый документ" (New Document), я хочу убедиться в том, что независимо от используемой программы, будь то Notepad, текстовый редактор или что-то еще, будет использоваться формат обычного текста. Нам не нужен отформатированный документ. Во-вторых, необходимо убедиться, что редактор не добавляет по умолчанию никаких расширений к файлу. Кроме того, необходимо удостовериться, что текстовый редактор не форматирует содержание HTML-файла, а отображает его в виде HTML-кода.

Поэтому убедитесь, что этот флажок установлен. Если вы пользуетесь такой программой, как Notepad, проверьте ее настройки, и в случае наличия похожих настроек, задайте их соответствующим образом. Итак, я создам новый файл и сразу же его сохраню. Перейду на рабочий стол, найду там загруженные и сохраненные мною файлы упражнений, и сохраню новый документ в папку "01_01". Если у вас нет этих файлов, можете зайти на страничку курса "Основы веб-дизайна" на сайте lynda.com и скачать их. Они распространяются бесплатно. Но если у вас нет таких файлов, а вы хотите сохранить новый файл на рабочий стол, то можете спокойно это сделать.

Назову свой файл "hello.htm". Этого достаточно, для того чтобы преобразовать обычный текстовый файл в HTML-документ. Я мог бы использовать и расширение .html, которое тоже подходит для этих целей. Для сервера важно, какое именно расширение используется, .htm или .html, а в нашем случае все зависит только от личных предпочтений. Теперь нажмем кнопку "Сохранить" (Save). Получили новый HTML-файл. Пока в нем ничего нет. Я введу в этом файле фразу "Моя первая веб-страница" (My first web page),

сохраню изменения, перейду в браузер, допустим, в браузер Google Chrome, и попрошу его открыть файл. Спасибо, Google, я рад был узнать это. Перейду на рабочий стол, найду файлы упражнений, выберу файл "hello.htm", и, бум, - он открылся. Как видите, в этой вкладке моего браузера говорится, что это моя первая веб-страница. Таким образом, HTML - это ничто иное, как текстовый файл. И он сразу же запускается в браузере, но браузер не обязан это делать. На самом деле Google Chrome делает нам одолжение. Я нарушил все мыслимые и немыслимые правила, поскольку, вместо того чтобы разметить контент с помощью языка разметки, я просто поместил его вот сюда. В результате Google Chrome подумал: "О, это HTML-файл. Я не понимаю, что я должен увидеть, поэтому просто создам этот файл". Т.е. браузер будет просто воссоздавать все это для меня. Как правило, если просмотреть код этого элемента, нажав на нем правой кнопкой мыши и выбрав пункт "Просмотр кода элемента" (inspect element), то можно увидеть HTML-код, который мы не писали прямо в этом инспекторе WebKit Inspector, но который Chrome создал за нас. Как будто вам нужен был этот код, и Google Chrome написал его за вас. Давайте вернемся к нашему документу и посмотрим, что же нужно для создания самых элементарных HTML-документов. Первое, что я сделаю, - добавлю в самом верху тег html. Теги должны заключаться в угловые скобки. Как видите, я ввел знак "<" и знак ">", а затем поместил между ними текст "html". Ниже строчки "Моя Первая Веб-страница" я добавлю закрывающий тег. Итак, сверху - открывающий тег, снизу - закрывающий. Обратите внимание, что единственное отличие между ними - это прямой слэш. Слэш указывает на то, что документ закрывается. Итак, этот тег открывает документ в html-файле, а этот закрывает. Далее html-файлу нужен заголовок. Я перейду на следующую строчку и введу "head". В верху каждого HTML-файла располагается заголовок, прямо под тегом html.

В заголовке документа помещаются все те элементы, которые нужны для его работы, но при этом не видимы. Т.е. ссылки на внешние JavaScript и CSS-файлы, метатеги, используемые для описания сайта, и тому подобные вещи помещаются в заголовок документа. Итак, я введу здесь заголовок. Вы заметили, что я помещаю некоторые теги внутрь других тегов. Таким образом, тег head полностью вложен в тег html, а тег title - в тег head. Такие теги мы называем "дочерними" и "родительскими".

Очевидно, что родительский тег - это тот, который расположен выше, а дочерний - тот, который вложен в него. Если вы помещаете один тег в другой, то вам нужно будет закрыть его до того, как вы закроете родительский. Если я добавляю тег title, а затем ввожу, например, фразу "Изучение HTML", то мне нужно закрыть тег title перед тем, как я закрою тег head. Итак, это всего лишь небольшой фрагмент синтаксиса. После заголовка необходимо добавить элемент body. В него помещается весь видимый контент страницы. Как видите, я окружаю этот текст тегом body.

Если я сохраню сейчас эти изменения, перейду в браузер и обновлю страницу, то практически ничего не изменится, за исключением того, что в заголовке вкладки появится текст "Изучение HTML", поскольку теперь это заголовок нашей страницы. На самом деле если снова просмотреть код этого элемента, нажав правую кнопку мыши и выбрав пункт "Просмотр кода элемента", то можно увидеть, что теперь внутри тега head размещается этот заголовок, и больше ничего не поменялось, а все потому, что раньше Google Chrome делал это за нас, а теперь мы сами создали такую структуру. Конечно, в языках разметки теги используются для распознавания контента, а сейчас мы не распознаем текст.

"Моя Первая Веб-страница" - это просто текст, расположенный внутри тега body. В таких ситуациях браузер будет применять тег по умолчанию, в нашем случае это был бы тег для абзаца. Браузер просто предполагает, что это будет тег абзаца. Но что если нам захотелось бы использовать другой тег, скажем, тег заголовка? Для этого нам нужно было бы просто обернуть этот текст тегом заголовка, при этом можно использовать любой тег заголовка. Тег h1 - самый важный из всех тегов заголовка. Поэтому я воспользуюсь именно этим тегом. И опять же я добавляю открывающий тег h1. Как видите, я использую угловые скобки "<", ">", а затем ввожу текст "h1".

После этого я добавляю закрывающий тег /h1. Если сохранить сейчас изменения, вернуться в браузер и обновить страницу, то можно увидеть реальное отличие в отображении контента, поскольку теперь Chrome говорит: "Ага, это заголовок, заголовок 1, самый важный заголовок, поэтому я применю к нему стиль, используемый для заголовка 1 по умолчанию, сделаю шрифт побольше и применю полужирное начертание. Пусть люди знают, что то, что находится внутри, является заголовком". Таким образом браузер реагирует на то, что мы определили этот контент как элемент другого типа. А теперь завершим создание HTML-документа, просто добавив небольшой тег абзаца.

Конечно, для обозначения тега абзаца используется буква "p". Вы, наверняка, заметили, что заголовок 1 обозначается тегом h1. Таким образом, названия тегов говорят сами за себя. Я готов поспорить, что если большинству из вас показать тег p и спросить, что это за тег, то вы ответите: "О, это тег абзаца". Смысл большинства этих тегов понятен сразу, например: "b" обозначает "полужирный", "i" - "курсив", "p" - "абзац" и тому подобное. Итак, я просто введу следующий текст: "Это моя первая веб-страница. Она немного простовата, но зато помогает разобраться в том, как работает HTML, и как отформатировать мой контент".

Опять же, если я открыл тег абзаца, то мне обязательно нужно его закрыть, поэтому я добавляю закрывающий тег. Не забудьте расставить все знаки препинания. Хорошо. Теперь сохраним изменения, перейдем в браузер и обновим страницу. Получаем контент с новым форматированием. Конечно, с помощью HTML можно сделать еще много всего интересного. Но на самом деле буквально за 5 минут вы изучили основной принцип действия HTML. Вы должным образом структурировали документ, добавив элементы html, head и body. А также должным образом добавили и структурировали содержимое страницы с помощью тегов h1 и p. Поскольку теперь вы отчасти познакомились с основами HTML, осталось только узнать оставшиеся правила синтаксиса, а также то, какие элементы вам разрешено использовать. Итак, это и есть основы HTML. Давайте теперь в следующем видео посмотрим, как можно использовать CSS для визуальной стилизации элементов страницы.