Проверка задания 1
На уроке 6 вы получили первое своём самостоятельное задание:
- Создать новый html-файл под названием "project2.html";
- Написать в нём текст из 3-4 предложений;
- Выделить жирным шрифтом подлежащее в каждом предложении;
- Выделить наклонным шрифтом сказуемые;
- Подчеркнуть обстоятельства времени или места.
И я привёл свой пример текста.
Вот что получилось у меня:
У вас должно быть то же самое, но со своим текстом, если вы не повторяли мой.
Сегодня мы освоим два новых тега языка проектирования HTML5.
Создание абзацев в HTML
В одном контейнере <div> может быть большое количество слов, которые группируются не только в предложения, но и абзацы. Условно говоря, в одном контейнере <div> мы можем поместить даже том романа Льва Николаевича Толстого "Война и мир"!
Однако ограничимся маленьким текстом о романе из "Википедии" в три абзаца, например:
(абзац 1) Главная тема романа "Война и мир" - историческая судьба русского народа в Отечественной войне 1812 года. В романе выведено более 550 персонажей, как вымышленных, так и исторических.
(абзац 2) Важнейшее значение в романе имеют философские взгляды писателя. Главная мысль романа - народная мысль. Народ, в понимании Толстого - главная движущая сила истории, носитель лучших человеческих качеств.
(абзац 3) К работе над повестью Л.Н. Толстой возвращался несколько раз. Работа несколько раз откладывалась.
Нам не надо набирать текст вручную. Достаточно копировать его из любого места в Интернете прямо в файл Sublime Text.
План действий:
- Создаём новый html-файл и назовём его "project3.html".
- Набираем или копируем из прошлого файла тег <!DOCTYPE html>.
- Нажимаем Enter на клавиатуре.
- На строке 2 набираем парный тег <html></html>, ставим курсор между тегами и опять жмём Enter на клавиатуре.
- На строке 3 теперь набираем парный тег <div></div>, чтобы создать контейнер для текста, ставим и здесь курсор между тегами и жмём Enter на клавиатуре.
На строке 4 мы и разместим абзац 1 нашего текста, скопировав его.
Жмём Enter и вставляем ниже абзац 2, а затем также и абзац 3.
Сохраните файл.
Однако, если вы попробуете посмотреть новый текст в браузере, то... удивитесь: у вас всё будет сплошным текстом.
Браузер не понимает наших абзацев, т.к. не получает тег самого абзаца на своём языке HTML.
Тег <p> - парный тег, обозначающий абзац. Абзац - это тоже некий контейнер внутри контейнера <div>. Мы должны в начале каждого предполагаемого абзаца ставить <p>, а в конце его закрывать - </p>. Делаем это с каждым нашим абзацем:
Сохраняем обновление и проверяем html-файл в браузере:
Самое поразительно то, что мы можем скопировать текст сплошняком и внутри разделить тегами абзаца, не выделяя их в программе строками, как делали сейчас. Результат будет такой же!
Создание отдельных строк в HTML
Однако бывают случаи, когда деление текста внутри контейнера на абзацы не совсем удобно, например, если мы размещаем тексты стихов. Выделять каждую строку открывающим и закрывающим тегом, конечно, муторно.
Возьмём отрывок стихотворения М.Ю. Лермонтова "Бородино": "Забил заряд я в пушку туго / И думал: угощу я друга! / Постой-ка, брат мусью! / Что тут хитрить, пожалуй к бою; / Уж мы пойдем ломить стеною, / Уж постоим мы головою / За родину свою!"
Создадим новый html-файл "project4.html" и подготовим теги:
Вставим в стоку 4 текст отрывка из стихотворения "Бородино":
Сохраним файл. Открыв в браузере, мы убедимся, что пока он не понимает наших строк и всё показывает сплошняком:
Вот теперь стоит познакомиться с одиночным тегом:
тег <br> - одиночный тег, обозначающий переход к новой строке и ставится в конце строки, т.е. условно аналогичен команде Enter на клавиатуре компьютера.
Теперь расставим этот тег:
И мы получаем в браузере тот же стих уже в корректной форме:
Интересно то, что при использовании тега <br> опять-таки не важно, как мы будем в программе размещать текст - по строкам или в строчку:
Обновите html-файл и посмотрите его в браузере - ничего не изменилось:
Практика
Задание 2. Создайте новый html-файл "project5.html", вставьте в него другой отрывок из стихотворения "Бородино" и расставьте строки с помощью тега <br>. Затем выделите в каждой строке жирным шрифтом существительные, наклонным курсивом - прилагательные, а затем подчеркните союзы и предлоги.
На следующем уроке мы научимся двигать контейнер по экрану, т.е. менять его расположение и размер, с помощью селектора отступа CSS.
Если вам понравилось, подписывайтесь на мой канал!
PhD Alexander G. Buychik, info@buychik.ru, +79217702472