УРОК 6. РЕДАКТИРУЕМ ТЕКСТ В HTML

Мы с вами создали первый информационный контейнер, используя парный тег <div>. Это начало пути!

Так выглядит контейнер в программе Sublime Text 3.

А так выглядит ваш первый контейнер с информацией в браузере Интернета.

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

Простейшие теги HTML для дизайна текста

1. Парный тег <b> и </b> - придаёт буквам жирный шрифт. Выделим жирным шрифтом слово "первый" в нашем предложении. Заметьте, что, когда вы будете писать закрывающий тег </b> после слова, программа Sublime Text, вероятно, допишет его за вас, как только вы начнёте писать его!

Мы вписали слово "первый" в теги <b>.

Не забываем сохранить изменения!!! Для этого не требуется сохранять заново - просто выбираем опцию "Save", чтобы перезаписать, или обновить файл.

Открываем наш html-файл в браузере Google Chrome (или любом другом) и видим изменения:

Перед нам результат, если вы всё правильно сделали: слово "первый" появилось выделенным жирным шрифтом.

2. Парный тег <i> и </i> придаёт буквам курсивный наклон. Выделим курсивом слово "контейнер" в нашем предложении. Заметьте, что, когда вы будете писать закрывающий тег </i> после слова, программа Sublime Text, вероятно, опять-таки допишет его за вас, как только вы начнёте писать его!

Мы вписали слово "контейнер" в теги <i>.

Никогда не забываем сохранить изменения!!!

Перед нам результат, если вы всё правильно сделали: слово "контейнер" появилось выделенным наклонным шрифтом, или курсивом.

3. Парный тег <u> и </u> подчёркивает буквы. Выделим курсивом слово "создавать" в нашем предложении. Заметьте, что, когда вы будете писать закрывающий тег </u> после слова, программа Sublime Text, вероятно, опять-таки допишет его за вас, как только вы начнёте писать его!

Мы вписали слово "создавать" в теги <u>.

Никогда не забываем сохранить изменения!!!

Перед нам результат, если вы всё правильно сделали: слово "создавать" появилось с нижним подчёркиванием.

Это только три самых простых тега языка проектирования сайтов HTML. Однако не спешите: научитесь легко, на автомате, использовать сначала их. Настало время практических заданий!

Практика

Задание 1. Создайте новый html-файл под названием "project2.html". Напишите в нём текст из 3-4 предложений. Выделите жирным шрифтом подлежащее в каждом предложении, наклонным шрифтом - сказуемые, а затем подчеркните обстоятельства времени или места.

Пример моего текста:

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

На следующем уроке мы научимся писать стихи и делить текст на части с помощью тегов HTML.

Если вам понравилось, подписывайтесь на мой канал!

PhD Alexander G. Buychik, info@buychik.ru, +79217702472