Используемое программное обеспечение: любой браузер, блокнот.
Задание 1.1. «Ознакомьтесь с теорией»
Абзацы
Тег <p> определяет параграф или текстовый абзац. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину. Для перевода строки внутри абзаца используется тег <br />.
Текстовые абзацы и параграфы заключаются в открывающий <p> и закрывающий </p> теги. Если закрывающего тега нет, то считается, что конец абзаца совпадает с началом следующего блочного элемента.
Выравнивание текста внутри абзаца осуществляется с помощью атрибута «align». Доступные значения:
- left - выравнивание по левому краю;
- center - выравнивание по центру;
- right - выравнивание по правому краю;
- justify - выравнивание по ширине.
Пример использование тега <p> и атрибута «align»:
<p align="justify"> Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. </p> <p align="left"> Упорядоченный контент делает чтение более лёгким и приятным.</p>
Как выглядит в браузере:
Выделение текста
Тег <b> используется для того, чтобы выделить жирным шрифтом фрагмент текста, который мы хотим сделать более заметным для пользователя. Тег <b> только выделяет фрагмент текста, он не имеет смысловой нагрузки (в том числе для поисковых систем). Для того, чтобы отметить важность текста используется тег <strong>․
Тег <i> используется для выделения части текста. Заключенный в тег <i> текст по умолчанию отображается курсивным начертанием. Тег чаще всего выделяет термины, названия, фразы из другого языка и т.д.
Пример использование тегов <b> и <i>:
<p> Одна из основных задач <b>HTML</b> — придавать тексту <i>структуру и смысл, семантику,</i> так, чтобы браузер смог отобразить текст корректно. </p>
Как выглядит в браузере:
Заголовки
Элементы <h1> до <h6> используются для определения 6 уровней заголовков в HTML. Самым главным на странице является заголовок первого уровня <h1>, а наименее важным - заголовок шестого уровня <h6>. Чем ниже уровень заголовка, тем меньше размер шрифта.
Теги <h1> - <h6> парные, закрывающий тег для них обязателен.
Заголовки выравниваются с помощью атрибута «align». Доступные значения:
- left - выравнивание по левому краю;
- center - выравнивание по центру;
- right - выравнивание по правому краю;
- justify - выравнивание по ширине.
Пример использование тега <h1> и атрибута «align»:
<h1 align="center"> Заголовок 1 </h1> <h2 align="left"> Заголовок 2 </h2> <h3 align="right"> Заголовок 3 </h3>
Как выглядит в браузере:
Задание 1.2. «Создание шаблона веб-страницы»
- Создайте на рабочем столе личную папку, куда вы будете сохранять все файлы своего сайта.
- Запустите встроенный текстовый редактор Блокнот.
- Выберите в меню раздел «Формат» и убедитесь, что напротив пункта «Перенос по словам» стоит галочка.
- Наберите или скопируйте шаблон HTML документа.
<html>
<head>
<title> Заголовок документа </title>
</head>
<body>
Здесь находится тело документа.
</body>
</html>- Сохраните документ с расширением .html, для этого:
- перейдите в раздел меню «Файл» ⇒ выберите пункт «Сохранить как...»;
- укажите путь в личную папку;
- впишите index.html в поле «Имя файла»;
- кодировка - UTF-8;
- нажмите кнопку «Сохранить»;
- закройте текстовый документ.
- Если всё выполнено верно, то в вашей папке появится веб-документ «index». Закройте текстовый документ.
- Откройте веб-документ «index». Посмотрите как отображается в браузере оформленный вами гипертекст.
- Временно сверните браузер.
- Теперь откройте веб-документ «index» для редактирования, выполнив следующее:
- нажмите правой кнопкой мыши (далее ПКМ) по веб-документу «index»;
- наведите на пункт «Открыть с помощью» ⇒ «Блокнот»;
- если приложения «Блокнот» нет в списке, тогда делаем следующее:
- выбираем пункт «Открыть с помощью» ⇒ «Выбрать другое приложение»;
- появится окно «Каким образом вы хотите открыть файл?». Листаем в самый низ и нажимаем по ссылке «Ещё приложения»;
- выбираем приложение «Блокнот».
- нажимаем кнопку «ОК».
- Замените заголовок страницы и текст по своему усмотрению.
- Сохраните документ:
- перейдите в раздел меню «Файл» ⇒ выберите пункт «Сохранить» или используйте сочетание клавиш «Ctrl+S».
- Сверните документ открытый в блокноте не закрывая его.
- Разверните браузер и обновите страницу клавишей «F5».
- Оцените полученный результат.
Подсказка: Обновить страницу также можно нажатием на специальный значок
на панели инструментов браузера.
Задание 1.3. «Простейшее форматирование текста»
- Наберите в теле документа следующий текст с заголовком и сделайте так чтобы страница приняла следующий вид.
- Выделите имена в первом тексте жирным шрифтом, а во втором - курсивом.
Авторkandid