Методическое пособие по созданию Web-документа

Правительство Санкт-Петербурга

Комитет по науке и высшей школе

Государственное бюджетное образовательное

учреждение среднего профессионального образования

«Санкт-Петербургский политехнический колледж»

Методическое пособие

«Создание Web-документа»

для специальности:

09.02.03 Программирование в компьютерных системах

2015

Основой каждой Web-странички является HTML (сокращение от английского Hypertext Markup Language) - язык разметки гипертекста.

Документ, написанный на языке HTML, представляет собой текст, в который вставлены теги. Теги помогают программе просмотра разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в совсем других файлах, и так далее. С помощью тегов формируются связи с другими Web-сайтами и ресурсами Интернета. Текст с тегами называется исходным кодом. Просмотреть готовый файл, написанный на языке HTML, можно в программах просмотра (Microsoft Internet Explore, Netscape Navigator). Там вы уже не увидите тегов, так как они находятся «внутри» документа и на экране программ просмотра не отображаются.

Теги – это определенные последовательности символов, заключенные между знаками (меньше) и (больше). Символ т начало тега, символ обозначаем, коней, тега. Все, что заключено между тегами HTML и HTML, являемся HTML – документом.

Прописные и строчные буквы в написании тегов значения не имеют.

Любой HTML- документ состоит из двух частей. Первая часть — заголовок, который находится между тегами HEAD и HEAD. В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тегами TITLE и TITLE и появляется в верхней рамке окна программы просмотра. Например:Моя страничка

Вторая часть — тело, которое выводится на экран программой просмотра — текст, картинки, видеофрагменты. Оно заключается между тегами B0DY и B0DY.

Структура Web-страницы.

HTML

HEAD

TITLE Название Web-страницы, отображается в строке заголовка браузера TITLE

HEAD

BODY

Основное содержание страницы

BODY

HTML

Форматирующие теги бывают парные и непарные. Область действия парного тега начинается с того места, где стоит открывающий тег, а кончается там, где встречается закрывающий. Так, например, текст будет выводиться на экран полужирным шрифтом, если стоит между тегами и . Признак закрывающего тега — символ /.

Непарных тегов мало, например, для переход; новую строку используется тег br.

Создание своей странички.

Прежде всего необходимо решить, какую информацию вы хотите разместить в Интернете, продумать структуру сайта, его содержание.

Существует множество различных Web-редакторов. В них команды выполняются автоматически. Но, чтобы понять строение HTML-документов и лучше запомнить теги, нужно познакомиться с азами языка HTML используя, например, программу Блокнот.

Создайте папку HP. В ней будут храниться все ваши HTML-документы и графические файлы.

Наберите в Блокноте следующий HTML-документ:

Моя страничка

Привет! Это моя личная домашняя страничка! BODY
HTML

Сохраните этот файл под названием ind1.htm в папке HP. Закройте Блокнот. Откройте вновь созданный документ (рис.1).

Рис.1 Файл ind1.htm в окне программы просмотра

Разбиение текста на параграфы.

Поставьте тег p перед началом параграфа. Когда программа просмотра обнаружит этот тег, она сама вставит перед началом параграфа пустую строку.

p текст /p

Вместе с тегом параграфа можно задать параметры выравнивания (ALIGN).

RIGHT –по правому краю;
LEFT - по левому краю
CENTER – по центру.

Примеры оформления текстов.

Тег p align=left обеспечит выравнивание текста параграфа по левому краю.(Этот абзац выровнен по левому краю)

Чтобы выровнять текст абзаца по правому краю, используйте тег p align=right. Тогда ваш текст будет выглядеть так же как этот. Такое выравнивание текста значительно затрудняет чтение, но привлекает к себе внимание. Поэтому его часто используют для оформления заголовков и эпиграфов.

Такого расположения текста можно добиться с помощью тега p align=center.

Его используют для создания коротких заголовков, но большой текст, выровненный по центру, читать тяжело.

Если вас не устраивает расстояние текста от левого края и вы хотите сделать «красную строку», то поставьте друг за другом после тега p несколько значков, обозначающих пробел ( ). Например:

Заголовок

      Текст

Заголовки.

Для выделения логических частей текста обычно используются заголовки. Они обозначаются прописной или строчной латинской буквой h. Цифра после буквы указывает уровень заголовка (все их может быть шесть). Как и любой текст, заголовки можно выравнивать по левому, по правому краю или по центру. Переносы в заголовках запрещены. Рассмотрите пример и объясните значения каждого из тегов.

h1 align=center Колледж проводит набор по специальностям h1

h2 align=left Обработка  металлов давлением h2

h3 align=right Технология машиностроения h3

h4 align=center Сварочное производство h4

h5 align=center Программирование в компьютерных системах h5

Усовершенствуйте свою страничку, используя заголовки и параграфы. Откройте файл ind1.htm в Блокноте и отредактируйте следующим образом:

Моя страничка


Привет! Это моя личная домашняя страничка!

Мой город

Я живу в Колпине

Я учусь в СППК

Я увлекаюсь музыкой и спортом

Мои друзья учатся со мной в одной группе