Задание 1.1. «Создание шаблона веб-страниц»
- Создайте на рабочем столе личную папку, куда вы будете сохранять все файлы своего сайта.
- Запустите встроенный текстовый редактор Блокнот.
- Выберите в меню раздел «Формат» и убедитесь, что напротив пункта «Перенос по словам» стоит галочка.
- Наберите или скопируйте шаблон HTML документа.
<html>
<head>
<title> Заголовок документа </title>
</head>
<body>
Здесь находится тело документа.
</body>
</html>
- Сохраните документ с расширением .html, для этого:
- перейдите в раздел меню «Файл» ⇒ выберите пункт «Сохранить как...»;
- укажите путь в личную папку;
- впишите index.html в поле «Имя файла»;
- кодировка - UTF-8;
- нажмите кнопку «Сохранить»;
- закройте текстовый документ.
- Если всё выполнено верно, то в вашей папке появится веб-документ «index». Закройте текстовый документ.
- Сделайте две копии файла «index» и переименуйте их в «editor» и «grafica». Итого в вашей папке должно находиться три веб документа.
Задание 1.2. «Оформите главную страница сайта»
- Откройте документ «index». Посмотрите как отображается в браузере оформленный вами гипертекст.
- Временно сверните браузер.
- Теперь откройте веб-документ «index» для редактирования, выполнив следующее:
- нажмите правой кнопкой мыши (далее ПКМ) по веб-документу «index»;
- наведите на пункт «Открыть с помощью» ⇒ «Блокнот»;
- если приложения «Блокнот» нет в списке, тогда делаем следующее:
- выбираем пункт «Открыть с помощью» ⇒ «Выбрать другое приложение»;
- появится окно «Каким образом вы хотите открыть файл?». Листаем в самый низ и нажимаем по ссылке «Ещё приложения»;
- выбираем приложение «Блокнот».
- нажимаем кнопку «ОК».
- Наберите текст и отформатируйте его по образцу представленному ниже.
- Вставьте ссылки на первый и второй элемент маркированного списка, для этого
- замените Html-редактор на <a href="editor.html">Html-редактор</a>;
- замените Графический редактор на <a href="grafica.html">Графический редактор</a>.
- Сохраните документ.
Задание 1.3. «Оформите страницу «HTML-редактор»»
- Откройте документ «editor». Посмотрите как отображается в браузере оформленный вами гипертекст.
- Временно сверните браузер.
- Теперь откройте веб-документ «editor» для редактирования с помощью программы блокнот.
- Наберите текст и отформатируйте его по образцу представленному ниже.
- Используйте тег <img src="имя картинки.расширение" width="350 px">, чтобы вставить картинку.
- Ссылка [ Домой ] содержит код <a href="index.html">Домой</a>.
- Сохраните документ.
Задание 1.3. «Оформите страницу «Графический редактор»»
- Откройте документ «grafica». Посмотрите как отображается в браузере оформленный вами гипертекст.
- Временно сверните браузер.
- Теперь откройте веб-документ «grafica» для редактирования с помощью программы блокнот.
- Наберите текст и отформатируйте его по образцу представленному ниже.
- Используйте тег <img src="имя картинки.расширение" width="350 px">, чтобы вставить картинку.
- Ссылка [ Домой ] содержит код <a href="index.html">Домой</a>.
- Сохраните документ.