- •Практическое занятие №1 Создание Web-страниц формата .Html в текстовом редакторе «Блокнот»
- •1. Html и Интернет (очень кратко)
- •Http://www.Abc.Def.Ru/Index.Html
- •2. Создание структуры кода страницы и заголовка
- •3. Разметка Web-страницы с помощью таблиц
- •4. Импорт и форматирование текста
- •5. Добавление графики
- •6. Работа с цветом и фоном
- •7. Специальные символы
- •8. Создание гиперссылок
2. Создание структуры кода страницы и заголовка
2.1. Откройте программу Блокнот (Notepad). Если ярлыка программы нет на рабочем столе, то ее можно найти с помощью команд: Пуск → Все программы → Стандартные.
2.2. Документы HTML имеют следующую структуру:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Наберите в Блокноте указанные теги. Здесь и далее по умолчанию набирайте команды и текст обычным, нежирным шрифтом.
Блокнот – примитивный редактор. Единственное существующее в нем средство ускорения набора кода – буфер обмена. Максимально используйте его.
Тег <HTML> указывает на язык программирования HTML. Эта запись нужна потому, что Web-страницы могут создаваться и другими средствами.
В разделе HEAD задаются базовые параметры страницы, посетитель при загрузке сайта их не видит. Исключение: название страницы выводятся на экран в самой верхней строке браузера, на синем фоне. Базовые параметры используются: браузерами при загрузке страницы на компьютер; поисковыми машинами при помещении данной страницы в список ссылок, создаваемых по запросу клиента; а также для других целей.
В разделе BODY размещается содержание станицы. Здесь все, что находится за пределами угловых скобок < >, выводится на экран.
2.3. Теперь сохраним сделанное в формате .html. Для этого сначала создадим папку, куда будем помещать все материалы создаваемого сайта. Создайте такую папку в месте, указанном преподавателем, и назовите ее произвольным именем (естественно, пользуясь английской клавиатурой).
2.4. Далее в папку сохраним созданную страницу (под именем Index или любым другим, набранным латинскими буквами). Перейдите опять в Блокнот, вызовите окно Файл → Сохранить как, и в строке Имя файла замените .txt на .html, а * на то имя, которое вы собираетесь дать создаваемой странице. В строке Тип файла поставьте Все файлы. При запуске файла включается браузер и демонстрируется содержимое страницы, пока это пустое окно.
2.5. Создайте заголовок страницы, отображаемый в строке заголовка браузера. Для этого в разделе HEAD надо создать строку: <TITLE></TITLE>, и между этими тегами написать название страницы, наша страница будет называться: Казахская кухня. Сохраните сделанное изменение командой Файл → Сохранить или Ctrl + S. Теперь при запуске страницы в строке заголовка, на самом верху экрана, появляется ее название.
Название страницы, задаваемое тегом <TITLE> и наименование файла страницы – это разные вещи. Первое используется поисковыми системами для создания базы ссылок, второе входит в адрес URL и используется при доставке страницы пользователю.
В теге <TITLE> часто задают ключевые слова. Набор ключевых слов надо тщательно продумать с точки зрения возможных запросов пользователей. Иначе говоря: при наборе каких слов поисковая система будет загружать пользователю вашу страницу.
2.6. Теперь при запуске страницы в строке заголовка, на синей полосе в верхней части экрана, появляется ее название. Для того, чтобы посмотреть сделанное изменение, надо в Internet Explorer нажать кнопку Обновить. Для перехода обратно к программному коду надо применить команду Файл → Править в Блокнот. В старых версиях Explorer надо нажимать: Вид → Источник.
В дальнейшем все созданное надо сохранять в Блокноте, потом переходить в Internet Explorer и обновлять страницу. После чего через меню Вид переходить обратно в Блокнот (если используемая версия браузера позволяет это).
2.7. Создадим несколько параметров, не выводимых на экран. В HEAD запишите непарный тег с атрибутами: <META name=‘author’ contents=‘Имя Фамилия’ >, при этом поставьте свои имя и фамилию. Этот дескриптор создает имя автора для поисковой системы.
2.8. Далее там же запишем <META name=‘description’ contents=‘Страница создана при выполнении лабораторной работы по предмету …’ >, поставьте название предмета. Здесь после contents пишется то, что поисковая система будет приводить в качестве резюме при помещении вашей странице в список вместе с другими найденными страницами. Легко убедиться, что Meta-теги на экране не отображаются (кроме TITLE).