ITT1402: Разработка и управление контентом

Электронная версия курса

2019 © РФЭТ: Прикладная информатика

Сгенерировано для пользователя Базаров Евгений Васильевич

Выходные сведения

Этот документ является автоматически сгенерированной печатной версией электронного курса РФЭТ: Прикладная информатика

В связи с неизбежными ограничениями печатных носителей некоторые элементы этого курса не могут быть воспроизведены корректно. Для полноценной работы Вам необходимо обратиться к электронной версии курса, доступной по следующему адресу:

http://it.rfet.ru/course/~RW3y

Данная электронная книга сгенерирована системой EduTerra.pro в соответствии со спецификацией EPUB 3.0.1.

Получив данную печатную версию, Вы со своей стороны обязуетесь:

использовать предоставленные Вам ресурсы только лично;

не обращаться к помощи третьих лиц или технических средств для улучшения результатов взаимодействий;

использовать ресурсы системы исключительно в образовательных целях;

соблюдать требования действующего законодательства Вашей страны, в частности, в области защиты авторского права.

Документ автоматически сгенерирован 03 сентября 2019, 10:35:39

Подготовлено для двусторонней печати на бумаге формата A4.

Информация о курсе

Английское название

ITT1402 — Content management.

О курсе

Курс предназначен для контент-менеджеров и редакторов контента, менеджеров по электронным продажам и маркетологов, веб-дизайнеров и программистов, а также блогеров и любителей.

Описание

Курс знакомит слушателя с основополагающими аспектами HTML и CSS. В нем так же уделено внимание процессу веб-дизайна, поисковой оптимизации, веб-аналитике.

Требования

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

Польза

Изучив курс, студент будет в состоянии верстать страницы на языке HTML5 и CSS3, изучит структуру веб-страниц и сайтов, научится подготавливать изображения для размещения на страницах веб-ресурса, получит представление о управлению типографикой и дизайном макета. Независимо от стоящей перед студентом задачами: спроектировать и разработать веб-сайт с нуля или получить больше контроля над уже существующим сайтом, этот курс поможет создать привлекательный, дружелюбный к пользователю веб-контент. Простой визуальный способ подачи информации с понятными примерами и небольшим фрагментом кода знакомит с новой темой на каждой странице. В курсе присутствуют практические советы о том, как организовать и спроектировать страницы сайта, для разработки веб-сайта профессионального вида и удобного в использовании.

Цели и намерения

Задача этого курса — дать обучаемому представление о HTML и CSS для проектировки и разработать веб-сайта с нуля или получения большего контроля над уже существующим сайтом.

Рекомендованная литература и информационные источники

Дакетт Дж. HTML и CSS. Разработка и создание веб-сайтов - Эксмо, 2013 г. - 480 с.;

Дунаев В.В. Основы Web-дизайна - БХВ-Петербург, 2012 г. - 480 с.;

Квинт И. Создаем сайты с помощью HTML, XHTML и CSS на 100%. 3-е издание - Питер СПб, 2014 г. - 448 с.;

Макфарланд Д. Большая книга CSS, 3-е издание - Питер СПб, 2014 г. - 608 с.;

Муссиано Ч., Кеннеди Б. HTML и XHTML Подробное руководство - Символ+Плюс СПб, 2012 г. - 752 с.;

Соколов С. HTML и CSS в примерах типовых решениях и задачах - Вильямс Издательский дом, 2007 г. - 416 с.;

Хеник Б. HTML и CSS Путь к совершенству - Питер СПб, 2011 г. - 336 с.;

Шафер С. HTML, XHTML и CSS Библия пользователя - Вильямс Издательский дом, 2011 г. - 656 с.

Справочник по HTML [электронный ресурс]. URL: http://htmlbook.ru/. (23.08.14)

Уроки и статьи по созданию сайтов[электронный ресурс]. URL: http://ruseller.com/. (23.08.14)

Введение

Введение

Сложно ли научиться создавать сайты?

Многие учебные материалы, посвященные HTML и CSS, напоминают скучные руководства пользователя. Чтобы вам было легче учиться, мы решили отказаться от традиционных шаблонов, используемых издателями, и в корне пересмотрели оформление этого курса.

Как правило, обычные люди, взглянув на экран компьютера веб-дазайнера и увидев большое количество строк программного кода, говорят, что он выглядит очень сложным, нужно быть очень умным, чтобы понимать такой код.

Правда состоит в том, что научиться писать и читать код веб-страниц отнюдь не так сложно, как может показаться на первый взгляд: для этого даже не нужно быть «программером».

Пример HTML кода

Понимание языков HTML и CSS полезно всем, чья работа связана со Всемирной паутиной: дизайнеры смогут создавать более привлекательные и удобные в использовании сайты, редакторы — наполнять сайты более качественным контентом,специалисты по маркетингу — более эффективно общаться с целевой аудиторией и, наконец, менеджеры разного уровня будут более четко формулировать требования при создании сайтов и получать лучшие результаты от своих сотрудников.

При написании курса мы сконцентрировали внимание на коде, который вы будете использовать в 90% случаев, и опустили те его фрагменты, с которыми вам вряд ли доведется иметь дело, даже если создание сайтов — ваша основная работа. Однако, прочитав курс до конца, вы будете знать, — если в реальной жизни столкнетесь с кодом, попадающим в эти 10%, — как найти нужную информацию с помощью поисковых систем.

Кроме того, в данном курса мы также включили дополнительные материалы о подготовке изображений, а также аудио- и видеофайлов для использования во Всемирной паутине, о достижении поставленных задач по дизайну и верстке веб-страниц сайта, об улучшении его показателей в результатах выдачи поисковых систем (то, что называется «поисковой оптимизацией», или SEO) и о том, как использовать сервис Google Analytics, чтобы получать сведения о посетителях вашего сайта.

Cтруктура курса

Чтобы научить вас создавать веб-страницы, данный курс был разделен на три части.

HTML

На протяжении всей первой главы мы будем рассказывать, как можно использовать язык HTML для создания веб-страниц. Вы увидите, что для начала вам потребуется ввести текст, который вы хотите отобразить на создаваемой странице. После этого вам надо будет добавить к словам теги, или элементы, позволяющие браузеру понять, что из текста является заголовком, где начинается и заканчивается абзац и т.д.

Оставшаяся часть раздела посвящена описанию этих тегов, используемых для верстки страниц. Все теги, находящиеся в вашем распоряжении, разделены по группам: текст, списки, ссылки, изображения, таблицы, формы, аудио-/видео-. и Flash-объекты и пр. Мы также должны вас предупредить, что примеры, приводимые в первых девяти разделах, вряд ли можно назвать интересными, но тем не менее это — основа любой веб-страницы. В последующих разделах, посвященных CSS, мы покажем вам, как изменить внешний вид ваших веб¬страниц, чтобы улучшить впечатление, которое создается от их просмотра у пользователей.

CSS

Мы начнем этот раздел с объяснения того, как используются правила CSS, чтобы предоставить вам возможность управлять стилями и макетом создаваемых веб-страниц. Далее мы продолжим изучение CSS и рассмотрим большое количество свойств, которые вы сможете использовать при создании собственных правил. Обычно все имеющиеся свойства принято разделять на две следующие категории.

Оформление: Свойства данной категории позволяют управлять такими настройками, как цвет текста, гарнитура и кегль используемых шрифтов, а также добавлять фоновый цвет или изображение на страницы (или части страниц).

Макет: Эти свойства используются для позиционирования на экране различных элементов страниц. Также вы изучите несколько профессиональных приемов, позволяющих делать создаваемые страницы более привлекательными.

ПРАКТИКУМ

Мы завершим этот курс практически полезной информацией, которая поможет вам создавать сайты, выглядящие профессионально. Мы рассмотрим несколько новых тегов, которые появятся в HTML5, они позволяют упростить описание структуры страницы. HTML5 — это новейшая версия языка гипертекстовой разметки (по состоянию на март 2014 года, HTML5 ещё находится в разработке, но, фактически, является рабочим стандартом). Однако чтобы изучать эти новые элементы, вы уже должны быть хорошо знакомы с тем, как пользоваться средствами CSS для управления дизайном веб-страниц. В данном разделе мы также рассмотрим алгоритм создания страницы, которым вы, вероятно, захотите воспользоваться в будущем при создании собственного сайта. Наконец, мы поговорим о том, что поможет вам пользоваться уже созданным сайтом, например о размещении его на просторах Всемирной паутины, о поисковой оптимизации, а также об использовании аналитического программного обеспечения для отслеживания информации о посетителях и о том, какие разделы сайта они просматривают.

Kак люди получают доступ к всемирной паутине

Прежде чем приступить к объяснению кода, используемого для верстки сайтов, мы считаем предельно важным сказать пару слов о том, какие способы доступа ко Всемирной паутине существуют, и разъяснить терминологию.

Браузеры

Для доступа к сайтам пользователи используют специальные программы, называемые веб-браузерами. Среди наиболее популярных браузеров можно назвать Firefox, Internet Explorer, Safari, Chrome и Opera. Чтобы просмотреть какую-либо страницу, пользователи могут ввести ее адрес в специальное поле браузера, перейти по ссылке, размещенной на другом сайте, либо воспользоваться закладкой в разделе «Избранное».

Наиболее популярные браузеры

Производители программного обеспечения регулярно выпускают свежие версии браузеров с новыми функциями и поддержкой новых языковых дополнений. Однако важно помнить, что очень многие пользователи не обновляют версии браузеров. Поэтому нельзя полагаться на то, что абсолютно все посетители вашего сайта смогут воспользоваться новейшими функциями, реализованными только в последних версиях программ.

Веб-серверы

Когда вы отдаете команду браузеру открыть тот или иной сайт, тот с помощью Интернета посылает запрос специальному компьютеру, называемому веб-сервером, на котором расположены файлы нужного вам сайта. Веб-серверы — это специальные компьютеры, постоянно подключенные к Интернету, работа которых оптимизирована для отправки веб-страниц запрашивающим их людям. Некоторые крупные компании используют собственные веб-серверы, но гораздо чаще владельцы сайтов пользуются услугами хостинговых компаний, которые берут определенную (чаще ежегодную) плату за возможность размещения сайта у них на сервере.

Устройства

Разновидностей устройств, с помощью которых люди посещают сайты — настольных компьютеров, ноутбуков, планшетов, мобильных телефонов, — становится все больше и больше. Важно помнить, что разные устройства имеют различные размеры экрана и что скорость подключения к Интернету одних выше, чем у других.

Как создаются сайты

Языки HTML и CSS используются для создания любых сайтов, однако системы управления контентом и платформы для блогов и электронной коммерции зачастую добавляют в этот коктейль еще некоторые технологии.

Что вы видите

Когда вы просматриваете веб-страницу, ваш браузер, скорее всего, получает HTML- и CSS-код с сервера, на котором расположен данный сайт. Чтобы создать страницу, пригодную для просмотра, браузер интерпретирует код. В большинство веб-страниц обычно бывает включен дополнительный контент, например изображения, аудио- и видеоролики или анимация, и этот курс научит вас подготавливать подобные материалы для использования во Всемирной паутине, а также добавлять их на страницы. Некоторые страницы также посылают вашему браузеру код JavaScript и Flash — и вы также узнаете, как добавлять подобные интерактивные объекты на свой сайт. JavaScript и Flash — это более сложные темы, за изучение которых вы при желании можете взяться после того, как освоите верстку страниц с помощью HTML и CSS.

Kак создаются сайты

Небольшие сайты обычно верстаются только на HTML и CSS. Более крупные сайты, в частности те, что подвергаются регулярному обновлению и используют системы управления контентом (CMS, content management systems (англ.)), а также платформы для блогов и электронной коммерции, зачастую создаются с применением более сложных технологий, функционирующих на стороне веб-сервера. Однако на самом деле все эти технологии используются для создания необходимого HTML-и CSS-кода, впоследствии посылаемого браузеру. Потому, если имеющийся у вас сайт использует эти технологии, вы сможете применить новые знания по HTML и CSS, чтобы получить куда больший контроль над его оформлением. При создании более крупных, сложных сайтов часто используются базы данных для хранения информации и различные языки программирования, такие как PHP, ASP.Net, Java или Ruby, работающие на сервере, но, чтобы управлять внешним видом вашего сайта, вам не потребуется знание этих технологий. Навыков, полученных вами по прочтении данного курса, должно хватить, чтобы помочь вам разобраться в создании сайтов.

HTML5 и CSS3

С момента создания Всемирной паутины последовательно разрабатывалось несколько версий HTML и CSS, и целью каждой было внести очередные усовершенствования в технологию. На момент написания курса спецификации HTML5 и CSS3 все еще находились в стадии разработки. Однако несмотря на то, что еще не было выпущено финальных версий обеих технологий, многие браузеры уже поддерживают некоторые из новых функций и многие создатели сайтов уже применяют новейшие элементы кода на своих страницах. Поэтому мы решили обучить вас использованию именно их. По причине того, что HTML5 и CSS3 были созданы на основе предыдущих версий, вы, изучив их, сможете понимать любой HTML- и CSS-код. Мы также добавили пояснения, где именно используемый нами код является новым и где он с большой вероятностью не сработает в устаревших версиях браузеров.

Раздел 1. Структура

Ежедневно мы сталкиваемся с различными типами документов. Газеты, заявления на выдачу паспорта, каталоги — этот список можно продолжать до бесконечности.

Многие веб-страницы функционируют как электронные версии вышеперечисленных документов. Например газеты публикуют одни и те же репортажи как на бумаге, так и на собственных сайтах; с помощью Всемирной паутины вы также можете написать заявление на получение паспорта; интернет-магазины содержат онлайн-версии каталогов и средства электронной коммерции.

Структура важна для всех типов документов: она помогает читателям понять информацию, которую вы пытаетесь до них донести, а также способствует более простому переходу между частями документов.

Таким образом, чтобы научиться создавать веб-страницы, важно понять, как правильно структурировать документы. В этом разделе вы:

увидите, как язык HTML описывает структуру веб-страницы;

узнаете, как нужно вставлять в документ теги и элементы;

сверстаете свою первую веб-страницу.

Примеры структуризации страниц

Давайте вспомним, как выглядят статьи, публикуемые в газетах: у каждой новостной заметки есть свой заголовок, текст и зачастую одно или несколько изображений. Если перед вами длинная статья, то она может быть разделена на несколько частей подзаголовками, в ней также иногда содержатся специально выделенные врезки-цитаты.

Отсканированная журнальная статья и ее электронная версия

Если вы читаете статью во Всемирной паутине, структура ее будет лишь незначительно отличаться от той, что вы видите на бумаге (к таким публикациям, например, иногда прикрепляют какие-либо аудио- или видеофайлы).

Взглянув на иллюстрацию, вы увидите отсканированную журнальную статью и ее электронную версию, опубликованную на сайте журнала.

А теперь давайте вспомним, как выглядит абсолютно иной вид документа: заявление на выдачу паспорта. Как правило, у подобных форм есть несколько разделов, каждый из которых может иметь собственный заголовок.

Во всех разделах имеются поля для заполнения и вопросы к ним, а также ячейки, чтобы ставить галочки. Структура этого документа, опять же, очень похожа на электронную версию формы, опубликованную на сайте Федеральной миграционной службы.

Cтруктурирование документов Microsoft Word

Использование заголовков и подзаголовков при составлении документов различных типов помогает отразить иерархию предоставляемых данных. Например любой документ должен начинаться с заголовка, написанного крупным шрифтом, после которого, как правило, следует введение или резюме с наиболее важной информацией.

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

Простой документ, составленный в программе Microsoft Word.

В раскрывающемся списке показаны различные стили текста, которые можно применить в документе, например для создания заголовков разного уровня. Если вы часто работаете с программой Word, то вам, вероятно, уже приходилось использовать инструменты форматирования или палитру цветов для выделения заголовков и подзаголовков.

Использование языка HTML для описания cтруктуры веб-страниц

В предыдущем разделе был приведен пример структурирования документа MS Word, используемого для упрощения восприятия текста. Подобное использование структуры принято и при верстке веб-страниц.

В окне браузера вы видите документ с абсолютно таким же содержимым, как и на скриншоте программы Word предыдущей главы. Для описания структуры веб-документа необходимо добавить немного кода к тексту, который вы хотите отобразить на экране.

Ниже на странице приведен код на языке HTML. Не волнуйтесь по поводу того, что вы не понимаете его назначения. Сразу после этого мы подробно знакомить вас с ним. Обратите внимание, что HTML-теги выделены синим цветом, а их содержание, выводимый на экран, — черным.

HTML

<html>

  <body>

      <h1> Это  основной  заголовок  </h1>

      <p> Этот   текст  может   быть   введением  к  тексту, помещенному далее   на   странице.   В   случае   если  текст  достаточно длинный,   он  может   быть   разделен   на  несколько разделов с  подзаголовками. </p>

      <h2> Это   подзаголовок </h2>

      <p> Часто  при  написании  длинных   статей  используют подзаголовки,   помогающие   читателям  следить   за структурой всего   написанного.   Иногда  используются и подзаголовки более  низкого  уровня. </p>

      <h2> Еще   один  подзаголовок </h2>

      <p> Вот  еще  один  пример  подзаголовка. </p>

  </body>
</html>

HTML-код (выделен синим цветом) состоит из символов, помещенных между двух угловых скобок. Все это называется HTML-элементами. Элементы, как правило, состоят из двух тегов: открывающего и закрывающего. (Внутри закрывающего тега также имеется косая черта, иначе называемая слеш.) Каждый HTML-элемент сообщает браузеру какую-либо информацию о тексте, помещенном между открывающим и закрывающим тегами.

Теперь давайте более детально рассмотрим код, с которым вы познакомились. Этот код содержит несколько различных элементов. У каждого из них имеются открывающий и закрывающий теги.

Элементы аналогичны контейнерам. Они обобщают какую-либо информацию о тексте, расположенном между открывающим и закрывающим тегами.

Термины «тег» и «элемент» зачастую используются как синонимы. Однако, строго говоря, элемент включает в себя и открывающий тег, и закрывающий, а также любой контент, расположенный между ними.

Символы в скобках означают, для каких целей можно использовать данный тег. Например, тегом <р> (от англ. paragraph — абзац.) обозначается абзац текста.

Отличием закрывающего тега является наличие слеша / после символа <.

Атрибуты предоставляют дополнительную информацию о содержимом HTML-элементов. Они располагаются в открывающем теге элемента и состоят из двухчастен: имени и значения, разделенных знаком «равно».

Язык HTML.5 допускает написание значений атрибутов заглавными буквами без кавычек, но делать это не рекомендуется.

Имя атрибута определяет, какого рода дополнительную информацию о содержимом элемента вы намереваетесь сообщить, в то время как значение — это собственно информация или настройка элемента, изменяемая атрибутом. Значение следует заключить в двойные кавычки. У разных атрибутов могут быть различные значения.

Выше в качестве примера приводился атрибут lang, используемый, для обозначения языка текста данного элемента. Значение атрибута из примера устанавливает русский язык.

Большинство атрибутов могут быть использованы только с определенными элементами. Несмотря на это некоторые атрибуты (например, lang) допускается ставить в любом элементе.

Большинство значений атрибутов могут быть либо предопределенными, либо установленными в соответствии с принятыми стандартами. По мере изучения атрибутов вы также узнаете и о доступных для них значениях. Так, значением атрибута lang может быть сокращенное обозначение языка содержимого элемента. Браузеры должны распознавать это сокращение.

Элементы body, head и title

Тег  <body> 

С тегом <body> ( англ. «Тело») вы уже встречались в первом примере. Все, помещаемое внутрь этого элемента, отображается в основном окне браузера.

Тег <head>

Вам часто придется видеть элемент <head> ( англ. «Голова»), предшествующий элементу <body>. Он содержит информацию о самой странице, а не ту, которая будет выведена в основную часть окна браузера (выделенную голубым цветом на следующей странице). В элемент <head> также часто включается элемент <title>.

Тег <title>

Содержимое элемента <title> ( англ. «Заголовок») выводится либо в заголовке окна браузера (выше текстового поля, в которое вы обычно вводите адрес сайта), либо в качестве названия вкладки страницы (если ваш браузер использует вкладки).

HTML

    <html>
        <head>
            <title>Это заголовок страницы</title>
        </head>
        <body>
            <h1>Это "тело" страницы</h1>
            <p>Содержимое, помещенное в "тело" страницы, будет отображено в основном окне браузера</p>
        </body>
    </html>

Результат

Возможно, вы уже знаете, что аббревиатура HTML расшифровывается как HyperText Markup Language — язык разметки гипертекста. В данном случае слово «гипертекст» означает, что с помощью языка HTML вы можете создавать ссылки, позволяющие посетителям быстро и легко перемещаться с одной страницы на другую. Язык разметки позволяет вам создать примечания к тексту, а эти примечания, в свою очередь, придают дополнительное значение содержимому документа. Представьте себе веб-страницу: к исходному тексту, который вы хотите отобразить в окне браузера, вы добавляете какой-либо код, используемый браузером для корректного отображения страницы. Поэтому теги, добавляемые вами, называются «элементами разметки».

Создание веб-страницы в операционной системе Windows

Вы также можете загрузить бесплатный текстовый редактор Notepad++ с сайта http://notepad-plus-plus.org.

Чтобы создать вашу первую веб-страницу на компьютере под управлением операционной системы Windows, запустите про-грамму Блокнот (Notepad). Для этого выберите команду меню Пуск → Все программы → Стандартные → Блокнот (Start → All Programs → Accessories → Notepad).

В операционной системе Windows 8 это можно сделать следующим образом: на экране Пуск (Start) в операционной системе Windows 8 щелкните правой кнопкой мыши и выберите пункт Все приложения (All Programs) в правом нижнем углу экрана. В списке приложений в группе Стандартные — Windows (Accessories — Windows) щелкните мышью по ярлыку приложения Блокнот (Notepad).

Введите в окне программный код. Например:

HTML

<html>
<head>
    <title>Моя первая веб-страница</title>
</head>

<body>
    <h1>Добро пожаловать на мою первую веб-страницу!</h1>

    <p>Это код на языке HTML, который я создал в программе Блокнот</p>
</body>
</html>

Результат

В меню Файл (File) выберите команду Сохранить как (Save As). Сохраните файл и запомните, где он находится. При желании вы сможете создать отдельную папку для всех примеров из этого курса. Сохраните этот файл под именем first-test.html. Не забудьте выбрать пункт Все файлы (Аll Files) в раскрывающемся списке Тип файла (Save as type), чтобы сохранить документ как веб-страницу, а не как простой текст.

Для веб-страниц с кириллическими буквами обязательно выберите пункт UTF-8 в раскрывающемся списке Кодировка (Encoding). Это необходимо для правильного отображения русского текста в окне браузера.

Запустите браузер. В меню Файл (File) выберите команду Открыть (Open). Перейдите в папку, содержащую только что созданный файл, выделите его и щелкните по кнопке Открыть (Open). Появившаяся страница должна быть похожа на ту, что изображена на рисунке ниже.

Если открытая вами страница отличается от изображенной на рисунке, найдите только что созданный файл и убедитесь, что он имеет расширение .html (если у файла расширение .txt, то вам придется вернуться в программу Блокнот (Notepad) и заново сохранить его, поместив имя файла first-test.html в кавычки).

Создание веб-страницы в операционной системе OS X

Чтобы создать страницу на компьютере под управлением операционной системы OS X, запустите программу TextEdit, расположенную в папке Программы (Applications).

Вы также можете загрузить бесплатный текстовый редактор для создания веб-страниц TextWrangler с сайта www.barebones.com.

Программа TextEdit по умолчанию создает не простые текстовые, а RTF-документы. Для работы с HTML-кодом, выберите команду меню Формат → Конвертировать в простой текст (Format → Make Plain Text).

Теперь перейдите в меню Файл (File) и выберите команду Сохранить (Save). Сохраните файл и запомните его местоположение.

При желании вы можете создать отдельную папку для всех примеров из этого курса. Сохраните данный файл под именем first-test.html. Если на экране появится диалоговое окно с запросом, какое расширение использовать для файла, нажмите кнопку Оставить .html (Use .html).

Далее запустите браузер. В меню Файл (File) выберите команду Открыть файл (Open file). Перейдите в папку, содержащую только что созданный вами файл, выделите его и щелкните по кнопке Открыть (Open). Страница должна быть похожа на ту, что изображена на рисунке ниже.

Если на открытой вами странице кириллический текст отображается неправильно, вам следует выбрать кодировку вручную (как указывать ее в коде, вы узнаете позже).

Ручное изменение кодировки в различных браузерах

Chrome

|:—-:|

Firefox

|:—-:| | | ——-

Safari

Пишем код и видим

В процессе обучение вам наверняка придется опробовать большое количество чернового кода. Когда вы пробуете тот или иной код, вам совершенно не обязательно каждый раз создавать локальные файлы в блокноте. Вы можете воспользоваться сервисами для разработки кода онлайн. Они пригодится тем, кто хочет визуально видеть отображение написанного им кода (HTML/CSS/JS), без необходимости создавать файлы и уж тем более “заливать” на хостинг.

сервис cssdeck.com

сервис jsfiddle.net

сервис codepen.io

сервис cssdesk.com

Обратите внимание, при использовании этих сервисов вам совершенно не обязательно пользоваться тегами <head> и <title>, вы можете сразу писать все, что должно находится внутри тега <body>. Еще одним плюсом является то, что ваш код будет будет визуально размечен различными цветами. Это поможет лучше ориентироваться в написанном. Кроме этого, если вам потребуется помощь специалиста, то можно сохранить свой код и передать ему ссылку для проверки.

Данные сервисы существенно облегчат ваше обучение!

Просмотр кода страницы в браузере

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

Способы просмотра кода сайта в различных браузерах

Chrome
Firefox
Safari

1) Посмотреть → Разработчикам → Просмотр исходного кода, либо
2) Контекстное меню (правая клавиша) контента сайта → Проверить элемент
1) Инструменты → Веб-разработка → Инспектор, либо
2) Контекстное меню контента → Исследовать элемент
Настройки → Дополнения → Показывать меню "Разработка" в строке меню. Затем:
1) Разработка → Показать веб-инспектор, либо
2) Контекстное меню контента → Проверить объект

После этого на экране появится новое окно, содержащее исходный код, с помощью которого была создана страница.

В этом режиме вы можете изменить html-теги или добавить новые CSS-стили к объектам. Но помните, изменяя их вы всего лишь изменяете отображение веб-страницы в вашем браузере. После того, как вы обновите страницу, все они исчезнут и сайт примет первоначальный вид.

Это может помочь вам при разработке страниц, например при поиске ошибок кода вам совсем не обязательно метаться между html-файлом и браузером, вы можете найти нужную вам информацию прямо в браузере, а затем вписать ее в локальный файл.

Поначалу код может показаться сложным, но не стоит отчаиваться: к окончанию чтения следующего раздела вы уже станете понимать его. Вы можете пользоваться этим нехитрым методом, чтобы просмотреть исходный код любого из сайтов.

Полезная информация

Выводы раздела

Страницы HTML — это текстовые документы.

Теги (буквенные последовательности, окруженные двумя угловыми скобками) в языке HTML используются для придания специального значения информации, которую они окружают. Теги часто называют «элементами». Теги, как правило, парные. Открывающий тег обозначает начало какого-либо участка контента, закрывающий — его окончание. Открывающие теги содержат нередко атрибуты, сообщающие дополнительную информацию о содержимом данного элемента. Обязательными частями атрибута являются имя и значение.

Чтобы изучить язык HTML, необходимо запомнить доступные для использования теги, узнать, какие функции они выполняют, а также в какой части HTML-документа они должны быть использованы.

Тематические ссылки

Подробное описание тегов <head>, <p> и <title>, а так же примеры их употребления вы можете найти на образовательном ресурсе htmlbook.ru

Cервисы cssdeck.com, jsfiddle.net, codepen.io и cssdesk.com пригодится тем, кто хочет визуально видеть отображение написанного им кода, без необходимости создавать локальные файлы.

Кто такой дизайнер, верстальщик и программист вы узнаете из статьи на сайте ПроВерска.com.ua.

Проверка знаний. Структура

Варианты заданий

Задание 1

Установите соответствие синтаксиса html-тегов и их описания.

HTML-тег
Описание

<title>

<head>

<body>

Определяет заголовок документа

<title>

<head>

<body>

Предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера

<title>

<head>

<body>

Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными

Задание 2

Выберите из каждого выпадающего меню правильный вариант тега, чтобы сделать предложение верным.

Содержимое тега

<head>

<body>

<title>

не отображается напрямую на веб-странице, за исключением тега

<head>

<body>

<title>

устанавливающего заголовок окна веб-страницы.

Задание 3

Упорядочите html-код в соответствии с образцом веб-страницы

HTML

<body>

<h1> Консолидация </h1>

<p> Консолидация — упрочение, укрепление чего-либо; объединение отдельных лиц, групп, организаций для усиления борьбы за общие цели. </p>

</body>

<head>

</html>

</head>

<html>

<title> Значение слова </title>

Результат

Задание 4

Впишите необходимые теги в HTML-код, в соответствии с результатами образца страницы. В тексте страницы используйте заголовок первого уровня и тег текстового абзаца.

HTML

Саргассово море

Уникальное море

Саргассово море является единственным морем, не имеющим берегов.

Результат

Перейти к выполнению заданий

Раздел 2. Текст

При верстке веб-страницы текст размечают тегами. Теги добавляют тексту дополнительное значение и позволяют браузерам правильно отображать структуру страницы.

В этой главе мы заострим внимание на том, как добавить разметку к тексту, выводимому на страницы. Вы изучите:

структурную разметку — элементы, которые вы можете использовать для описания и заголовков и абзацев;

семантическую разметку, предоставляющую дополнительную информацию, например на какое слово или словосочетание в предложении делается логическое ударение, является ли какой-то написанный текст цитатой, какова расшифровка акронима и т.д.

Заголовки

Теги <h1> <h2> <h3> <h4> <h5> <h6>

В языке HTML существует шесть уровней заголовков:

<h1> используется для основных заголовков;
с <h2> по <h6> — для подзаголовков (от английского «heading» — заголовок ).

Если текст разделен на фрагменты более глубокого уровня, то для них используются заголовки <h3> и ниже.

Браузеры отображают содержимое элементов-заголовков шрифтом разного размера. Текст заголовка <h1> выводится самым крупным шрифтом, текст заголовка <h6> — самым мелким. Кегль шрифта, используемый разными браузерами для отображения заголовков разного уровня,незначительно отличается. Кроме того, пользователи также могут отрегулировать кегль шрифта отображаемого текста. Вы узнаете, как устанавливать кегль, цвет и гарнитуру текста, когда мы перейдем к изучению каскадных таблиц стилей (CSS).

HTML

<html>
<head>
    <title>Заголовки</title>
</head>

<body>
    <h1>Основной заголовок</h1>

    <h2>Заголовок 2-го уровня</h2>

    <h3>Заголовок 3-го уровня</h3>

    <h4>Заголовок 4-го уровня</h4>

    <h5>Заголовок 5-го уровня</h5>

    <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Результат

Примечание:

Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h1>...<h6>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.

Абзацы

Тег  <p> 

Для создания абзаца заключите текст в открывающий <p> и закрывающий </p> теги (от английского «Paragraph» — абзац ).

По умолчанию браузер автоматически отобразит каждый абзац с новой строки, при этом абзацы будут несколько отстоять друг от друга.

HTML

  <html>
  <head>
      <title>Абзацы</title>
  </head>

  <body>
      <p>Абзац состоит из одного или нескольких предложений, формирующих
      самодостаточную часть какого-либо высказывания. Абзац начинается с красной
      строки.</p>

      <p>Текст, разделенный на части легче понимать. Например, текст книги может
      быть разделен на главы. В главах могут быть подзаголовки. Под каждым из
      подзаголовков будет следовать текст, состоящий из одного или нескольких
      абзацев.</p>
  </body>
  </html>

Результат

Полужирное, курсивное и подчеркнутое начертание

Тег  <b> 

Чтобы выделить текст полужирным начертанием шрифта, нужно поместить его между тегами <b> и </b> (от английского «boldface» — полужирный) .

Элемент <b> также обозначает фрагмент текста (например, ключевые слова), внешний вид которого будет отличаться от основного текста абзаца. При этом использование данного элемента не добавляет дополнительных значений к тексту.

HTML

    <html>
    <head>
        <title>Полужирное начертание</title>
    </head>

    <body>
        <p>Вот так можно вывести текст с <b>полужирным</b> начертанием шрифта.</p>

        <p>В аннотации основные характеристики какого-либо продукта могут быть
        выделены <b>полужирным</b> начертанием шрифта.</p>
    </body>
    </html>

Результат

Тег  <i> 

Чтобы отобразить текст с курсивным начертанием шрифта, его следует поместить между тегами <i> и </i> (от английского «italics» — курсив ).

Элемент <i> определяет фрагмент текста, отличающийся от основного текста, например технические термины, иностранные слова и прочие виды включений в текст, которые принято выделять курсивом.

HTML

  <html>
  <head>
      <title>Курсивное начертание</title>
  </head>

  <body>
      <p>Вот так можно отобразить текст <i>курсивом</i>.</p>

      <p>Это сорт картофеля <i>Solanum tuberosum</i>.</p>

      <p>Капитан Кук приплыл в Австралию на корабле <i>Индевор</i>.</p>
  </body>
  </html>

Результат

Тег  <u> 

Тег <u> добавляет подчеркивание к тексту. Однако, этот тег осуждается спецификацией HTML. Взамен рекомендуется использовать аналогичный CSS стиль text-decoration. О том, как пользоваться стилями CSS вы узнаете в разделе 9.

Подстрочные и надстрочные знаки

Тег <sup>

Элемент <sup> (от английского «superscript» — верхний индекс) используется для выделения символов, которые должны быть отображены как надстрочные, к примеру, ряд математических понятий, таких как возведение в степень (х² и т.п.).

Тег <sub>

Элемент <sub> (от английского «subscript» — индекс) используется для отображения символов как подстрочных. Подстрочные символы, как правило, используются в химических формулах, таких как Н₂О.

HTML

      <html>
<head>
    <title>Подстрочные и надстрочные знаки</title>
</head>

<body>
    <p>Сейчас мы изучим формулу е=мс<sup>2</sup>.</p>

    <p>В 2009 году концентрация СО<sub>2</sub> в атмосферном воздухе возросла
    на 2 ppm.</p>
</body>
</html>

Результат

Пробелы

Верстальщики вебстраниц часто добавляют дополнительные пробелы в код или даже помещают некоторые элементы на новые строки с целью повышения удобства читаемости кода.

Когда браузер встречается с двумя или более пробелами, идущими друг за другом, он отображает только один. Аналогично он поступает и с переносом строки, воспринимая его как единичный символ пробела. Данное свойство браузеров известно как «сворачивание пробелов».

Довольно часто можно столкнуться с тем, что создатели вебстраниц пользуются сворачиванием пробелов, чтобы расставить необходимые отступы в исходном коде страниц для повышения так называемой удобочитаемости. Чтобы понять все удобство данного метода просто сравните два одинковых и корректных с точки зрения браузера кода.

<html>
<head>
<title>Термины</title>
</head>
<body>
<h1>
Термины, используемые при съемке фильмов
</h1>
<h2>
Трансфокация
</h2>
<p>Плавный наезд на объект съемки или отъезд от него камерой
</p>
<h2>
Интерлюдия
</h2>
<p>
Короткая вводная сцена или последовательность сцен, появляющаяся в фильме, но не обязательно связанная с основным сюжетом
</p>
</body>

</html>

<html>
<head>
    <title>Термины</title>
</head>

<body>
    <h1>Термины, используемые при съемке фильмов</h1>

    <h2>Трансфокация</h2>

    <p>Плавный наезд на объект съемки или отъезд от него камерой</p>

    <h2>Интерлюдия</h2>

    <p>Короткая вводная сцена или последовательность сцен, появляющаяся в
    фильме, но не обязательно связанная с основным сюжетом</p>
</body>
</html>

Как вы можете видеть, структурированный код намного проще для восприятия и редактирования.

Существуют специальные сервисы, которые приводят ваш код в порядок. Например, dirtymarkup.com или СodeBeautify. В них вы можете ввести ваш «грязный» код, и сервис его «очистит», то есть расставит элементы в порядке их иерархичности.

Перевод строк и горизонтальные линии

В первых версиях HTML некоторые теги можно было не закрывать, но сейчас, если хотите следовать стандарту вам всё-таки придётся писать HTML-код правильно и закрывать все теги. Но некоторые теги не закрываются по правилам html. Например теги <br> и <hr> которые мы сейчас изучим. Для того, чтобы они «заработали» достаточно написать всего один тег без парного закрывающего. В новых стандартах такие теги называются самозакрывающимися. У них перед второй угловой скобкой стоит слэш <br />. Ставить или не ставить слэш в одиночном теге, вы вольны решать сами. Но мы, все же, советуем вам пользоваться именно самозакрывающимися тегами. Это приучит вас к порядку, который пригодится при изучении других языков программирования (особенно при изучении XML).

Тег  <br /> 

Как вы уже видели раньше, браузер автоматически начинает каждый абзац с новой строки, однако если вы хотите добавить перевод строки в пределах какого-либо абзаца, то вам понадобится вставить специальный тег — <br /> (от английского «break» - разрыв) .

HTML

  <html>
  <head>
      <title>Перевод строки</title>
  </head>

  <body>
   <p>Земля<br>
      становится тяжелее день ото дня<br>
      из-за падающей на нее космической пыли.</p>
  </body>
  </html>

Результат

Тег  <hr/> 

Чтобы визуально разделить темы книги или сцены пьесы, с помощью тега <hr/> (от английского «horizontal rule» - горизонтальная линия) вы можете добавить в текст горизонтальную линию. В языке HTML существует несколько элементов, не содержащих текста между открывающим и закрывающим тегами. Их принято называть пустыми элементами. Написание таких тегов отличается от стандартного. Обычно пустой элемент состоит только из одного тега, перед правой, закрывающей скобкой которого вставляются пробел и слеш. Некоторые верстальщики вебстраниц опускают пробел и слеш, хотя их указание и рекомендуется для следования спецификации.

HTML

  <html>
  <head>
      <title>Горизонтальная линия</title>
  </head>

  <body>
      <p>Венера ― единственная планета, вращающаяся по часовой стрелке.</p>
      <hr/>
      <p>Юпитер больше, чем все остальные планеты вместе взятые.</p>
  </body>
  </html>

Результат

Семантическая разметка

В языке HTML существует ряд текстовых элементов, не вносящих изменения в структуру веб-страницы, но добавляющих дополнительную информацию. Эти теги принято называть семантической (то есть смысловой) разметкой.

В последней части этого раздела вы познакомитесь еще с несколькими элементами, которые помогут вам с оформлением текста на веб-странице, — например с элементом <em>, позволяющим акцентировать внимание на словах, на которые падает логическое ударение, и с элементом <blockquote>, обозначающим, что включенный в него текст является цитатой. Зачастую браузеры используют особые стили отображения текста, помещенного в такие элементы. Например содержимое тега <em> отображается курсивом, тогда как текст в пределах элемента <blockquote> выделяется отступами. Впрочем, не стоит использовать эти элементы для изменения оформления отображаемого текста: они используются лишь для более точного описания контента вебстраниц.

Элементы этой группы преимущественно используются при оптимизации сайтов для поисковых машин. Например, поисковый робот, обнаружив тег <blockquote>, воспринимает его именно как цитату.

Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде. Узнать больше о поисковых роботах и продвижении сайта в поисковых системах вы сможете в нашем курсе «ITT1306: Оптимизация и продвижение сайтов в Интернет».

Важная информация и логическое ударение

Тег  <strong> 

Элемент <strong> (от английского «strong» — сильный ) используется для обозначения того, что текст, помещенный в него, имеет высокую степень важности. Например текст этого элемента может быть интонационно выделен при чтении программой экранного доступа. По умолчанию браузеры отображают содержимое элемента <strong> шрифтом с полужирным начертанием.

HTML

  <html>
  <head>
      <title>Важная информация</title>
  </head>

  <body>
      <p><strong>Будьте осторожны:</strong> В данной местности орудуют воры-карманники.</p>

      <p>Данная игрушка содержит большое количество мелких деталей - и <strong>не предназначена для детей младше пяти лет.</strong></p>
  </body>
  </html>

Результат

Тег  <em> 

Элемент <em> (от английского «emphasis» — акцент ) используется для обозначения логического ударения, которое несколько изменяет значение всего предложения. По умолчанию браузеры отображают содержимое элемента <em> шрифтом с курсивным начертанием.

HTML

<html>

<head>
    <title>Логическое ударение</title>
</head>

<body>
    <p>Я <em>думаю</em>, Анна была первой.</p>

    <p>Я думаю, <em>Анна</em> была первой.</p>

    <p>Я думаю, Анна была <em>первой</em>.</p>
</body>
</html>

Результат

Цитаты

Для создания цитат в языке HTML используются два элемента:  <blockquote> ,  <q> 

Тег  <blockquote> 

Элемент <blockquote> (от английских слов «block» — блок и «quotation» — цитата) используется для отображения длинных цитат, занимающих целый абзац. Обратите внимание, что внутри элемента <blockquote> рекомендуется использовать и элемент <р>. В большинстве своем браузеры склонны к выделению содержимого элемента <blockquote> отступами, однако этот элемент не стоит использовать только лишь для того, чтобы создать фрагмент текста с отступом: лучше реализовать такое с помощью каскадных таблиц стилей (CSS).

Тег  <q> 

Элемент <q> (от английского «quotation» — цитата ) принято использовать для более коротких цитат, помещающихся внутри абзаца текста. Изначально предполагалось, что браузеры будут заключать содержимое элемента <q> в кавычки, однако Internet Explorer этого не делает, потому многие избегают использовать данный элемент. Для обоих элементов может быть указан атрибут cite, указывающий, с какого сайта позаимствована та или иная цитата. Значение этого атрибута — URL-адрес сайта, содержащего более подробную информацию об источнике цитирования.

HTML

<html>
<head>
    <title>Цитаты</title>
</head>

<body>
    <blockquote cite="http://ru.wikipedia.org/wiki/Винни-Пух">
    <p>- Интересно, что это так бумкнуло? Не мог же я один наделать столько шума. И где, интересно знать, мой воздушный шарик? И откуда, интересно, взялась эта тряпочка?</p>
    </blockquote>

    <p>Как сказал А.А. Милн, <q>Некоторые люди говорят с животными. И лишь немногие слушают. Вот в чем проблема.</q></p>
</body>
</html>

Результат

Аббревиатуры и акронимы

Тег  <abbr> 

Аббревиатура - слово, образованное из первых букв единиц в словосочетании (США, ООН и т.п.), из начальных частей двух и более слов (продмаг, колхоз и т.п.) или представляющее собою сложение начала одного слова с другим словом словосочетания (роддом, драмкружок и т.п.).

Акроним — вид аббревиатуры, образованной начальными звуками. Фактически, акроним представляет собой слово, являющееся сокращением, которое можно произнести слитно (в отличие от аббревиатуры, которую произносят «по буквам»). Примеры акронимов: ВУЗ, НАТО, НАСА и т.п.

При употреблении в тексте какого-либо акронима или аббревиатуры следует воспользоваться тегом <abbr>. В открывающем теге можно использовать атрибут title для указания расшифровки сокращения.

В языке НТМL4 для описания акронимов был реализован специальный элемент <acronym>. Для отображения расшифровки акронима использовался атрибут title (аналогичный атрибуту элемента <abbr>). В языке HTML5 и для аббревиатур, и для акронимов используется тег <abbr>.

HTML

<html>
<head>
    <title>Аббревиатуры и акронимы</title>
</head>

<body>
    <p><abbr title="Профессор">Пр.</abbr> Стивен Хокинг ― физик-теоретик и космолог.</p>

    <p><acronym title="Национальное агентство по аэронавтике и исследованию космического пространства">
    NASA</acronym> проводит несколько невероятных космических экспериментов.</p>
</body>
</html>

Результат

Источники и определения

Тег  <cite> 

Элемент <cite> (от английского «citation» — цитата ) может быть использован при оформлении ссылки на какой-то первоисточник, например на книгу, кинофильм или исследовательскую работу, для обозначения упоминаемого источника. В спецификации HTML5 не рекомендуется использовать элемент <cite> с именами персоналий, однако это вполне допускается в HTML4, потому, скорей всего, большинство веб-дизайнеров так и продолжат использовать данный элемент в этих целях. Браузеры отображают содержимое элемента <cite> шрифтом с курсивным начертанием.

HTML

<html>
<head>
    <title>Источники</title>
</head>

<body>
    <p>По всему миру было продано более десяти миллионов копий книги
    <cite>Краткая история времени</cite> Стивена Хокинга.</p>
</body>
</html>

Результат

Тег  <dfn> 

Объяснение нового термина (научного концепта или профессионального жаргонизма) в тексте называется «определением». Элемент <dfn> (от английского «definition» — определение ) используется для обозначения определения какого-либо нового термина.

Некоторые браузеры отображают содержимое элемента <dfn> шрифтом с курсивным начертанием. В браузерах Safari и Chrome какие-либо изменения шрифта отсутствуют.

HTML

  <html>
  <head>
      <title>Определения</title>
  </head>

  <body>
      <p><dfn>Черная дыра</dfn> ― это область в пространстве-времени, гравитационное притяжение которой настолько велико, что покинуть её не могут даже объекты, движущиеся со скоростью света (в том числе и кванты самого света).</p>
  </body>
  </html>

Результат

Информация о веб-дизайнере

Тег  <address> 

Элемент <address> имеет довольно специфическое назначение: он содержит контактные данные создателя веб-страницы. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации об авторах сайтов.

Он может (но не должен) содержать почтовый адрес, а также адрес электронной почты или номер телефона.

Большинство браузеров отображают содержимое элемента <address> шрифтом с курсивным начертанием.

HTML

  <html>
  <head>
      <title>Адрес</title>
  </head>

  <body>
      <address>
          <p>
              <a href="mailto:eduarea@rfei.ru">eduarea@rfei.ru</a>
          </p>

          <p>305029, г. Курск, ул. К. Маркса 61 б.</p>
      </address>
  </body>
  </html>

Результат

Исправления контента

Теги  <ins>  и  <del> 

Элемент <ins> (от английского «insert» — вставка ) может быть использован для отображения контента, добавленного в документ, в то время как <del> (от английского «delete» — удаление ) — для отображения удаленного контента. Содержимое элемента <ins>, как правило, выделяется подчеркиванием, тогда как элемента <del> — зачеркиванием.

Тег  <s> 

Элемент <s> (от английского «strikethrough» — перечеркивание ) позволяет обозначить, что какая-то информация ошибочна или устарела (но при этом ее не следует убирать со страницы). Как правило, содержимое элемента <s> будет выведено на экран перечеркнутым.

HTML

<html>
<head>
    <title>Вставленный и удаленный контент</title>
</head>
<body>
    <p>Это была

        <del>худшая</del>
        <ins>лучшая</ins> из ее идей
    </p>
    <hr>
        <p>Ноутбук Samsung:</p>
        <p>
            <s>Старая цена: 31900 руб.</s>
        </p>
        <p>Новая цена: всего 11999 руб.</p>
    </body>
</html>

Результат

Полезная информация

Выводы раздела

HTML-элементы используются для описания структуры страницы (например, заголовки, подзаголовки и абзацы).

Они также могут содержать семантическую (смысловую) информацию (например, в какой позиции нужно поставить логическое ударение, какова расшифровка использованных в тексте акронимов, что данный фрагмент текста является цитатой и т.д.).

Пример

Это очень простая HTML-страница, демонстрирующая разметку текста. Структурная разметка текста включает такие элементы как <h1>, <h2> и <р>. Семантическая информация представлена в таких элементах, как <cite> и <em>

HTML

<html>
    <head>
        <title>Текст</title>
    </head>
    <body>
        <h1>Роман без названия</h1>
        <h2>Глава 1</h2>

        <p>Мария стояла перед окном уже около часа. На столе, между экземплярами <i>GEO</i> и других журналов, в которых публиковались ее статьи, лежала зачитанная книга <cite>В дороге</cite>. Это была любимая книга Марии еще со школьной скамьи, и чем больше времени она проводила в четырех стенах этой комнаты, тем больше она понимала, что хочет вырваться на свободу.
        </p>

        <p>Последние десять лет она провела в этой комнате, сидя под плакатом с цитатой Оскара Уайльда, гласящей: <q>Работа ― это убежище для людей, которым больше нечем заняться</q>. Хотя многие считали ее поистине пионерскую работу по изучению <dfn>генома</dfn> человека большим достижением, Марию не покидала мысль, что у нее <em>есть</em> более достойные занятия...
        </p>
    </body>
</html>

Результат

Тематические ссылки

Подробное описание тегов <h1>, <b>, <i>, <u>, <br>, <hr>, <strong>, <em>, <blockquote>, <q>, <sup>, <sub>, <abbr>, <cite>, <dfn>, <ins>, <del>, <s> и т.д. вы можете найти на образовательном ресурсе htmlbook.ru

Настраивающийся сервис форматирования CSS, HTML, JS dirtymarkup.com. Все на одной странице, с подсветкой кода.

Кчественный сервис для форматирования и сжатия кода СodeBeautify. Кроме HTML и CSS кода, также работает с Javascript, JSON, XML, RSS, Java, C# и SQL. Увы, нет настроек, но присутствует встроенные вьювер.

О том, в каких случаях уместнее использовать курсив, а в каких полужирный шрифт вы узнаете в статье Артемия Лебедева “Делать фонт болдом или италиком?”

Проверка знаний: Текст

Варианты заданий

Задание 1

Установите соответствие синтаксиса html-тегов и их описания.

HTML-тег
Описание

<b>

<strong>

<br>

<s>

<i>

Устанавливает жирное начертание шрифта.

<em>

<u>

<i>

<s>

<strong>

Устанавливает курсивное начертание шрифта.

<sup>

<b>

<sub>

<br>

<strong>

Предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

<em>

<ins>

<i>

<strong>

<u>

Предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.

Задание 2

Установите соответствие синтаксиса html-тегов и их описания.

HTML-тег
Описание

<del>

<abbr>

<dfn>

<cite>

Применяется для выделения терминов при их первом появлении в тексте. Браузеры отображают содержимое этого тега с помощью курсивного начертания.

<ins>

<em>

<i>

<cite>

Предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст этого тега как подчеркнутый.

<dfn>

<del>

<cite>

<br>

Используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст этого тега как перечеркнутый.

Задание 3

Установите соответствие синтаксиса html-тегов и их описания.

HTML-тег
Описание

<sup>

<sub>

Отображает шрифт в виде верхнего индекса.

<sup>

<sub>

Отображает шрифт в виде нижнего индекса.

Задание 4

Впишите необходимые html-теги.

Результат

HTML

    <html>
    <head>
        <title>Интересные факты</title>
    </head>
    <body>

        Интересные факты

        Самое известное фото Альберта Эйнштейна

        Известнейший снимок Альберта Эйнштейна с высунутым языком, сделанный в 1951 году во время празднования его 72-го дня рождения, великий учёный подарил ведущему научно-популярных программ Говарду Смиту. Фото сопровождалось надписью:

            «Вам понравится этот жест, потому что он предназначен всему человечеству».

    </body>
    </html>

Задание 5

Впишите наиболее уместные html-теги для получения следующего результата:

HTML

    <html>
    <head>
        <title>Текст</title>
    </head>
    <body>
        <p>Древняя цивилизация
            этрусков использовала довольно своеобразный тип письменности под названием
            бустрофедон
        </p>

            <p>Первую строку они писали
                слева направо , вторую —
                справа налево , третью —
                снова слева направо и так далее.
            </p>
    </body>
    </html>

Перейти к выполнению заданий