Создание простейшего HTML документа

Используемое программное обеспечение: любой браузер, блокнот.

Задание 1.1.  «Создание шаблона веб-страницы»

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

3. Выберите в меню раздел «Формат» и установите перенос по словам.

4. Наберите шаблон HTML документа.

6. Сохраните документ с расширением .html, для этого:
   • перейдите в раздел меню «Файл» ⇒ выберите пункт «Сохранить как...»;
   • укажите путь в личную папку;
   • в поле «Имя файла» впишите index.html;
   • кодировка - UTF-8;
   • нажмите кнопку «Сохранить»;
   • закройте текстовый документ.

7. Откройте документ «index». Посмотрите как отображается в браузере оформленный вами гипертекст.
8. Временно сверните браузер.
9. Теперь откройте документ «index» для редактирования, выполнив следующее:
   • нажмите правой кнопкой мыши (далее ПКМ) по документу «index»;
   • наведите на пункт «Открыть с помощью» ⇒ «Блокнот»;
   • если приложения «Блокнот» нет в списке, тогда делаем следующее:
     • выбираем пункт «Открыть с помощью» ⇒ «Выбрать другое приложение»;
     • появится окно «Каким образом вы хотите открыть файл?». Листаем в самый низ и нажимаем по ссылке «Ещё приложения»;
     • выбираем приложение «Блокнот».
   • нажимаем кнопку «ОК».
10. Замените заголовок страницы и текст по своему усмотрению.
11. Сохраните документ:
    • перейдите в раздел меню «Файл» ⇒ выберите пункт «Сохранить» или используйте сочетание клавиш «Ctrl+S».
12. Сверните документ открытый в блокноте не закрывая его.
13. Разверните браузер и обновите страницу клавишей «F5».
14. Оцените полученный результат.

Подсказка: Обновить страницу также можно нажатием на специальный значок на панели инструментов браузера.

Задание 1.2. «Ознакомьтесь с теорией»

Абзацы

Тег <p> определяет параграф или текстовый абзац. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину. Для перевода строки внутри абзаца используется тег <br />.

Текстовые абзацы и параграфы заключаются в открывающий <p> и закрывающий </p> теги. Если закрывающего тега нет, то считается, что конец абзаца совпадает с началом следующего блочного элемента. Выравнивание текста внутри абзаца осуществляется с помощью атрибута «align». Доступные значения:

• left - выравнивание по левому краю;
• center - выравнивание по центру;
• right - выравнивание по правому краю;
• justify - выравнивание по ширине.
  

Пример использование тега <p> и атрибута «align»:

<p align="justify"> Одна из основных задач HTML — придавать тексту структуру и смысл, семантику, так, чтобы браузер смог отобразить текст корректно. </p>
<p align="left"> Упорядоченный контент делает чтение более лёгким и приятным.</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.3. «Простейшее форматирование текста»

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