Web-проектирование. Язык HTML

Тема: Web-проектирование. Язык HTML.

Web-сайт буквально можно перевести как «место в сети» (web – паутина, site – место).

Сайт может состоять из нескольких web-страниц связанных между собой системой гиперссылок.

Работа над сайтом – трудоемкий процесс, в котором участвуют web-дизайнеры, программисты, менеджеры. Однако в небольшой компании всеми специальностями может овладеть один человек.

Нам предстоит побывать в роли и менеджера, и дизайнера, и программиста. Мы остановимся на создании web-сайта – начиная от проектирования до публикации и продвижения сайта в сети. Результатом должен стать ваш собственный web-сайт.

Своим бурным развитием Интернет во многом обязан службе WWW, в которой реализована идея представления информации в виде гипертекста, то есть, по сути, любая web-страница является текстовым документом.

HTML – это язык разметки гипертекстов. Именно с помощью его создаются web-страницы.

В HTML специальными словами-тегами обозначают, как программе-браузеру отображать текст.

Тег (тэг) – специальное слово, заключенное в угловые скобки и задающее оформление документа и служебную информацию.

Например, чтобы в окне браузера увидеть текст:

«Привет! Это моя первая web-страничка!»

при подготовке документа параметры форматирования можно описать так:

Привет! Это моя первая web-страничка!

На языке Html этот запишется так:

b Привет b Это моя первая web-страничка!

HTML-код может быть записан в обычном текстовом редакторе (например, Блокноте) или в специальном редакторе.

Задания

1. Создайте у себя на компьютере текстовый файл с именем Страница.html

Обратите внимание на то, что файл web-страницы должен иметь расширение файла .html

Чтобы создать текстовый файл, щелкните правой клавишей мыши по своему рабочему столу и выберите в контекстном меню команды:

Создать - Текстовый документ.

После этого не забудьте переименовать файл: Страница.html

1. Откройте этот созданный файл Страница.html в текстовом редакторе Блокнот.

Для этого щелкните по нему правой клавишей мыши и выберите в контекстном меню команды:

Открыть с помощью - Блокнот

1. В программе Блокнот отредактируйте содержимое этого файла. Напечатайте там следующее:

b Привет b Это моя первая web-страничка!

Курсив

u Подчеркнутый u

bi Полужирный курсив ib

HTML

Обратите внимание, что каждый тег заключен в угловые скобки (их можно ввести на английском языке).

Многие теги двойные: есть открывающий тег и закрывающий тег с таким же именем, но с символом /

Теги могут быть вложенными. В таком случае на текст распространяется сразу две команды, например, полужирный и курсив.

Тег br позволяет начать новую строку.

1. А теперь сохраните сделанные в файле изменения, закройте этот файл.

На рабочем столе в файле Страница.html ваша первая веб страница.

1. Теперь, чтобы посмотреть результат, откройте этот же файл Страница.html в каком-нибудь браузере, например, Yandex, Firefox, Opera, Хром, Internet Explorer

Для этого просто дважды щелкните по этому файлу Страница.html

Или щелкните по нему правой кнопкой мыши и выберите команды:

Открыть с помощью - Какой-нибудь браузер

Если вы всё правильно сделали, то в браузере вы увидите следующее:

Привет Это моя первая web-страничка!

Курсив

Подчеркнутый Полужирный курсив

Обратите внимание, что в браузере тегов не видно. Они дают команду браузеру как отображать текст, но сами не отображаются на экране.

Ещё обратите внимание, что несмотря на то, что в Блокноте мы текст «Полужирный курсив» напечатали на отдельной строке, в браузере он отображается в одной строке с текстом «Подчеркнутый», потому что мы не вставили между ними тег перехода на следующую строку br.

1. Отправьте преподавателю ваш файл Страница.html