Веб-страницы (или HTML-страницы) — это простейшие кирпичики, из которых состоят все сайты, а значит, весь Интернет. Для создания веб-страниц используются языки HTML и CSS. HTML отвечает за структуру и содержание страницы, CSS — за внешний вид. Мы будем развивать ваши умения владения HTML и CSS. Начнём с простейших вещей, а затем доведём ваши навыки до совершенства с помощью сложнейших испытаний.
<!DOCTYPE html>
<html>
<head>
<title>Поехали!</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Язык HTML достаточно простой. Сначала может показаться, что в нём слишком много тегов. Но не волнуйтесь. Мы постепенно познакомимся с ними на практике. А на практике всё запоминается легко.</p>
<p>Посмотрите на нижнюю часть мини-браузера, там вы увидите окошко с задачами, которые нужно выполнить, чтобы пройти задание.</p>
<p>Измените строку "Заголовок" на "Поехали!" внутри h1. Если вы всё сделали правильно, то загорится кнопка "Следующее задание".</p>
</body>
</html>
CSS в действии
Как уже говорилось, при создании веб-страниц используются два языка: HTML и CSS. HTML отвечает за структуру и содержание, а CSS — за оформление. Браузер объединяет HTML- и CSS-код и формирует внешний вид страницы.
В прошлом задании вы изменяли код в HTML-редакторе и убедились, что при этом меняется содержание страницы.
В этом задании вы поработаете с CSS-редактором и увидите, как с помощью нескольких строк кода можно изменить оформление страницы.
Сейчас мы не будем углубляться в значение каждого CSS-свойства. А просто посмотрим на CSS в действии! Чтобы включить CSS-код, нужно будет удалить символы комментариев, которые «выключают» его.
CSS ещё проще, чем HTML. Он состоит из множества правил, примерно таких:
Правила очень простые. Но есть одна проблема: свойств очень много. Большая часть курса будет посвящена именно CSS. А сейчас поработайте с нижним редактором.
А теперь собственно задание: Скачайте прикрепленный ниже файл html и раскоментируйте код стилей. Для этого - удалите символы /* теге стилей и посмотрите, как преобразится текст страницы.
Css.html
Первая тренировка
Качаем ниже прикрепленный файлик (Тренировка 1). Открываем его в браузере и смотрим как выглядит сейчас страница в браузере. Теперь открываем исходный кол документа и выполняем следующие задания:
В конец текста добавьте заголовок первого уровня с содержанием Потренировался.
После него добавьте абзац с текстом Пора двигаться дальше.
Увеличьте размер шрифта заголовков до 32px.
Тренировка 1
Язык HTML состоит из тегов. Теги — это те самые кирпичики, из которых построена каждая веб-страница.Каждый тег начинается с символа < и заканчивается символом >, например: <p>.Все теги можно разделить на парные и одиночные. Каждый парный тег состоит из двух частей: открывающего тега и закрывающего. Внутри закрывающего тега используется символ /.Вот пример парного тега:
<p>Абзац</p>
Как вы видите, у тега <p> есть пара в виде закрывающего тега </p>.
Тренировка 2
Потренируйтесь использовать парные теги. Скачайте файл "Тренировка 2" и выполните следующее: Размечайте с их помощью неотформатированный текст и наблюдайте за изменениями в браузере.
Оберните в h1 заголовок Типы тегов.
Оберните в отдельный тег p каждое предложение после заголовка.
Оберните одно любое слово в тег em.
Оберните одно любое слово в тег strong.
Тренировка 2
Одиночные теги
С некоторыми парными тегами мы познакомились. А что же за одиночные теги? Парные теги обычно нужны, чтобы оформить некоторый участок текста. Благодаря паре тегов вы можете указать начало и конец этого участка. Но ведь есть теги, которые не предназначены для оформления фрагментов текста. Например, тег для вставки изображения или тег для вставки разделительной полосы. Такие теги добавляют на страницу одиночный объект, и им не нужно для этого заключать в себя какой-то текст. Поэтому их называют одиночными. Примеры таких тегов: <br>, <hr>, <img>. Кстати, в HTML-редакторе вы увидите такие фрагменты кода: <!-- текст -->. Они называются «комментарии», и браузер не отображает их на странице.
Раньше одиночные теги писались с закрывающим слешом перед закрывающей скобкой. Например: <br/>. В новом стандарте HTML5 использование закрывающего слеша в одиночных тегах необязательно.
Атрибуты HTML-тегов
В предыдущем задании, как вы заметили, после вставки в код тега <img> ничего не произошло. Почему же так вышло? Теги могут иметь атрибуты. Некоторые теги есть смысл использовать только с атрибутами. Наиболее яркий пример — тег <img>, обозначающий изображение. Для него обязательно нужно указывать атрибут src, который задаёт адрес картинки (иначе браузер не сможет загрузить её). В общем случае тег записывается следующим образом:
