- •Фгбоу впо «Башкирский государственный педагогический университет
- •2. Требования к уровню освоения содержания дисциплины «Технологии Internet (Web-мастерство)»
- •3. Объем дисциплины «Технологии Internet (Web-мастерство)» и виды учебной работы
- •4. Содержание дисциплины «Технологии Internet (Web-мастерство)»
- •4.1. Разделы дисциплины и виды занятий
- •4.2.Содержание разделов дисциплины «Технологии Internet (Web-мастерство)»
- •5. Учебно-методическое обеспечение дисциплины
- •6.5. Система подготовки материалов и методических разработок
- •7. Содержание итогового и промежуточного контроля
- •7.1. Перечень примерных контрольных вопросов и заданий для самостоятельной работы
- •7.2 Теоретические вопросы к зачету.
- •Практические задания
- •8. Методические рекомендации по организации изучения дисциплины
- •8.1. Методические рекомендации для преподавателей
- •9.Учебная практика по дисциплине «Технологии Internet (Web-мастерство)» не предусмотрена.
- •2.1. Конспекты лекций по дисциплине «Технологии Internet (Web-мастерство)»
- •2.1. Язык гипертекстовой разметки html.
- •2.1.1. Основные теги.
- •Комментарии
- •Общий вид html-документа
- •2.1.2. Обычный текст или абзац
- •Обычный текст или абзац в сеpедине стpоки
- •2.1.3. Ссылки
- •Ссылки на главы дpугих документов
- •2.1.4. Списки
- •Ненумеpованный список
- •Нумеpованный список
- •2.1.5. Физические стили
- •Наложение различных стилей
- •2.1.6. Рисунки
- •Составные картинки
- •Элемент map
- •2.1.7. Таблицы
- •2.1.8. Формы html
- •Атрибут checkbox
- •Атрибут image
- •Атрибут password
- •Атрибут radio
- •Атрибут reset
- •Атрибут select
- •Атрибут submit
- •Атрибут textarea
- •2.1.9. Фpеймы
- •3.1. Базовый синтаксис css
- •3.3. Применение свойства цвета.
- •Свойство 'background-color'
- •3.4. Фоновые изображения [background-image]
- •3.5. Семейство шрифта [font-family]
- •3.6. Боксовая модель
- •Боксовая модель в css
- •3.7.Принципы css-позиционирования
- •Абсолютное позиционирование
- •Относительное позиционирование
- •4.1. Цвет и форма.
- •4.2. Модульная сетка в дизайне.
- •4.3. Типы сайтов. Модели организации сайта.
- •4.3.1. Линейная организация
- •4.3.2. Решетка
- •4.3.3. Иерархия
- •4.3.4. Паутина
- •5.1. Теория навигации
- •5.1.1 Размещение элементов навигации
- •5.1.2. Правила навигации
- •5.1.3. Основные приемы создания ссылок
- •5.2. Программы для создания web-страниц
- •6.1. Изображения в Интернет: технологии gif, jpeg, png, Flash.
- •6.1.1. Форматы изображений
- •6.1.2. Формат gif
- •6.1.3. Формат jpeg
- •6.1.4. Формат png
- •6.1.6. Другие форматы изображений
- •6.2. Анимация
- •6.3. Звук
- •6.4 Видео
- •7.1. Технологии программирования
- •7.2. Программирование на стороне клиента
- •7.2. Синтаксис языка JavaScript и основы программирования на нем
- •8.1. Технологии, работающие на стороне сервера
- •8.2. Сценарии на стороне сервера
- •8.3. Технологии создания интерактивных страниц: asp, php, ssi
- •8.4. Серверные программные интерфейсы приложений
- •8.4. Сетевые и сопутствующие протоколы
- •8.4.3. Адресация: url/uri/urn/urc
- •9.4 Работа с формами
- •9.5. Рнр: выборочная загрузка
- •9.6 Рнр: гостевая книга
- •10.1. Базовая модель Web-процесса
- •10.2. Планирование сайта
- •I определение цели
- •2. Определение аудитории
- •3. Профилирование пользователей
- •4. Требования к сайту
- •II план сайта
- •III разработка дизайна
- •Логотип
- •Навигатор по сайту
- •IV создание пробного сайта
- •V тестирование
- •10.3 Публикация и продвижение сайта
- •Упражнение 2 – создание списка
- •Упражнение 3 - вставка рисунка
- •Упражнение 4 – гиперссылки
- •Лабораторная работа № 2 Создание home page средствами Notepad (папка web)
- •Последовательность выполнения работы
- •Лабораторная работа № 3
- •Сведения о пользователе
- •Лабораторная работа № 4 Создание домашней странички (папка web)
- •Лабораторная работа № 5 JavaScript
- •Лабораторная работа № 6 JavaScript Создание и обработка форм в электронных документах, их назначение.
- •Лабораторная работа № 7 Тема «Использование Flash-технологий для создания Web-сайтов»
- •Задания для самостоятельной работы
- •Упражнение 4 Создание анимационного ролика «Шарик летит по улице города»
- •Упражнение 6 Создание собственных кнопок
- •Задания для самостоятельной работы
- •Лабораторная работа № 8. Создание web-сайта средствами редактора Dreamweaver (папка web-6)
- •5 Проверить корректность работы файла стилей!
- •Лабораторная работа №9 по технологиям Internet.
- •Лабораторная работа 10. Введение в язык php
- •Лабораторная работа 11. Обработка данных форм
- •Лабораторная работа 12. Массивы
Комментарии
Комментарии HTML начинаются с символа <! и заканчиваются символом>. Например:
Общий вид html-документа
<!DOCTYPE HTML PUBLIC "-//IETF/DTD HTML 2.0//EN">
<HTML>
<HEAD><TITLE>Учебник по HTML</TITLE></HEAD>
<BODY>
Тело документа
</BODY>
</HTML>
2.1.2. Обычный текст или абзац
В отличие от документов в большинстве текстовых процессоров, прерывания строк и слов в HTML-файлах не существенны. Обрыв слова или строки может происходить в любом пункте в вашем исходном файле, при просмотре это прерывание будет проигнорировано.
Чтобы сохранить удобочитаемость в исходных HTML-файлах, рекомендуется заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к <P>).
Также заметим, что хотя в действующих версиях HTML нет признака форматирования </P> (конец абзаца), рекомендуется его употреблять, поскольку он может быть введен в последующих версиях. К ошибке это не приведет, поскольку все незнакомые символы browser просто игнорирует. В противном случае, Вам в последствии, может быть, придется переделывать Ваши HTML-документы.
Элемент <P> определяет параграф внутри документа. Обычно броузер окружает параграф пустыми строками (1,5 интервала).
Фоpмат: <P> Текст абзаца </P>
Обычный текст или абзац в сеpедине стpоки
Для размещения текста в середине строки можно использовать атрибут ALIGN.
Фоpмат: <P ALIGN=CENTER> Текст абзаца <P>
Можно просто использовать элемент CENTER.
Фоpмат: <CENTER> Заголовок <CENTER>
Что даст на экране:
Элемент <FONT>
Используется для определения размера шрифта от 1 (самый маленький) до 7 (самый большой). Размер по умолчанию 3. Выражение <FONT> предшествует атрибуту SIZE и символам "+" или "-", которые указывают на то, как данный размер шрифта соотносится с размером базового шрифта документа.
Например, следующий фрагмент демонстрирует увеличение размера шрифта на 1: <FONT SIZE=+1>
Также поддеpживается элемент COLOR .
Элемент <BR>
Используя <BR> Вы можете перейти на новую строку, не начиная нового абзаца (в большинстве browser абзацы выделяются дополнительными пустыми строками).
Атрибут CLEAR позволяет организовать переход на новую строку с тем, чтобы новая строка стирала левый либо правый край.
Элемент <DIV>
Данный элемент используется при разбиении текста документа на несколько частей, для каждой из которых можно использовать различные атрибуты. Например, можно изменять выравнивание отдельной части текста или кодовую страницу. Поддеpживается атрибут ALIGN.
Элемент <HR>
Используя <HR> Вы можете разделить текст горизонтальной чертой. Можно также использовать следующие атрибуты: ALIGN, NOSHADE, SIZE, SRC, WIDTH.
2.1.3. Ссылки
Элемент <A> (ссылка на файл)
Элемент <A> используется для организации ссылок на различные части документа HTML или другие документы.
Ссылка на файл lesson2.htm
Фоpмат: <A HREF="lesson2.htm"> Текст ссылки </A>
Ссылка на файл lesson3.htm находящийся на сеpвеpе www.ok.donin.com
Фоpмат: <A HREF="http://www.ok.donin.com/lesson3.htm"> Текст ссылки </A>
Ссылки на главы дpугих документов
В документе HTML любые символы, за которыми следует символ #, а затем гипертекстовый адрес, называются идентификатором объекта. Броузеры используют их для поиска фраз в документе и для вывода данной фразы автоматически в окне броузера во время просмотра пользователям ресурса, содержащего фразу.
Есть два документа: Книга1 и Книга2. Необходимо сделать ссылку из Книги1 на пеpвую главу Книги2.
В Книге1 необходимо описать ссылку на Главу 1 в Книге2:
<A HREF = "имя_файла_Книги2#Глава 1"> Глава 1 в Книге2 </A>
Далее создаем именнованную гипеp-ссылку в Книге2:
<A NAME = "Глава 1"> Глава 1. Введение </A>
Если необходимо сделать ссылку на pаздел текущего документа, то используется такой фоpмат:
<A HREF = "#Глава 2"> Глава 2 в этой же Книге </A>
Список параметров элемента <A>
HREF - ссылка на файл
NAME - имя ссылки в текущем документе
REL - Internet-адрес, для поиска информации о различных версиях данного документа
TITLE - наименование ресурса, на который указывает ссылка
REV - аналогично REL, но наоборот
URN - самый постоянный идентификатор URN (Universal Resource Name)
METHODS - методы доступа к ресурсу
Элемент <LINK>
Данный элемент представляет собой гиперссылку. Используется для ссылки на индекс, глоссарий, информацию об авторе и т.д. Поддерживает те же атрибуты, что и элемент <A>:
HREF - ссылка на файл
NAME - имя ссылки в текущем документе
REL - Internet-адрес, для поиска информации о различных версиях данного документа
TITLE - наименование ресурса, на который указывает ссылка
REV - аналогично REL, но наоборот
URN - самый постоянный идентификатор URN (Universal Resource Name)
METHODS - методы доступа к ресурсу
Пример:
<LINK HREF="http://www.anet.donetsk.ua/cargo/cargo.htm">