Цель курса:
Создание веб-сайта с помощью языка гиперразметки HTML.
Литература:
Коротко о главном:
Текст (Text) - статичное содержимое (книги, журналы, газеты).
Гипер текст (Hyper Text) - интерактивное (interact - взаимодействие) содержимое (веб-страницы).
HTML (Hyper Text Markup (Meta) Language) - язык гипертекстовой разметки, т.е. набор правил говорящий о том, как правильно описывать гипер текст. Веб-страница - это документ, сложная иерархическая структура. Любая структура состоит из элементов. Элементами в документах выступают: параграфы, картинки, таблицы, списки и т.д. В HTML для описания элементов используется понятие ТЭГ.
Общий вид тэга:
<[/]ТЭГ[ св1="зн1" св2="зн2" ...][/]>
[] - нахождение не обязательно
Тэг характеризуется:
-
Именем;
-
свойствами;
-
содержимым: тестовым или дочерними тэгами.
Виды тэгов:
-
<ТЭГ> - открывающий тэг, говорит о начале элемента.
-
</ТЭГ> - закрывающий тэг, говорит о том, что описание элемента закончено.
-
<ТЭГ /> - сокращенный тэг, элемент был открыт и сразу закрыт, сокращенный вариант конструкции: <ТЭГ></ТЭГ>.
Пример:
<ЧЕЛОВЕК имя="Антон" фамилия="Бреславский">
<ГОЛОВА>
<ВОЛОСЫ цвет="черный" />
<ИНТЕРЕСЫ>Программирование, интернет, мозг</ИНТЕРЕСЫ>
</ГОЛОВА>
<ТЕЛО>
<РУКА />
</ТЕЛО>
</ЧЕЛОВЕК>
В открывающем или сокращенном ТЭГЕ могут быть описаны свойства:
<ИМЯ св1="зн1" св2="зн2">
Создание проекта
Цель: реализация веб-представительства в Интернет. Выбирается тематика, социально-значимая проблема или что-то интересное, что Вы хотите показать людям через интернет.
Требование к содержимому веб-проекта:
- Текст (параграфы, списки, таблицы) - краткое описание проблемы (тезисы);
- Графическое содержимое (изображения, фотографии);
- Видео с популярного ресурса http://youtube.com;
- Реализация формы активных элементов (отсылка на электронный адрес и сохранение данных в файл).
Сохранение данных
Активные элементы (поля ввода, кнопки, списки выбора) для сохранения должы быть заключены в форму. Тэг FORM - отвечает за организацию форм. Он имеет ряд свойств, задумываться о которых не стоит.
<FORM action="/send.php?EMAIL=YOUR_EMAIL" method="POST">
<INPUT type="text" size="15" name="Фамилия" />
...
<INPUT type="submit" value="Отправить" />
</FORM>
YOUR_EMAIL - замените на Ваш адрес электронной почты, в результате все данные начнут передаваться на этот электронный адрес.
Размещение проекта
После того как проект сделан его необходимо разместить по адресу http://it-op.breslavsky.ru/your_surname/
your_surname - это Ваша фамилия на латинском языке, например, breslavsky, ivanov, cheslov и т.д.
Чтобы опубликовать проект откройте "Мой компьютер", в адресной строке наберите: ftp://it-op@it-op.breslavsky.ru, после обращения к ресурсу Вас попросят ввести пользователя и пароль, введите: it-op
Для Вас откроется папка интернет сервера, создайте папку с Вашей фамилией на латинском языке, перейдите в нее и скопируйте все файлы Вашего проекта в эту папку.
Внимание: в Вашем проекте главный файл который Вы хотите показать пользователям должен называться как index.html
Пример проекта можно увидеть по адресу: http://it-op.breslavsky.ru/breslavsky/
Частые ошибки
- На домашнем компьютере все работает, а после публикации нет!
Все имена файлов HTML, картинок, видео, должны быть только на латинскоя языке, можно воспользоваться простым транслитом.