- •Романчик в.С.
- •Минск, бгу, 2011
- •Введение в Интернет Коротко об истории Интернет
- •Как работает Интернет?
- •Система адресации в Интернет
- •Способы подключения к сети Интернет
- •Сервисы Интернет
- •Электронная почта
- •Адресация электронной почты
- •Передача файлов по ftp
- •Всемирная паутина www
- •Задания по теме “Введение в Интернет”
- •Общие задания для лабораторной работы #1
- •Глава 1. Протоколы Интернет Понятие и краткое описание протоколов
- •Соотношение между tcp/ip и osi/iso
- •Межсетевой протокол ip
- •Транспортный протокол tcp
- •Флаги (управляющие биты) Это поле содержит 6 битовых флагов:
- •Механизм действия протокола
- •Передача данных
- •Протокол дэйтаграмм udp
- •Протоколы сетевого уровня
- •Протоколы электронной почты
- •Протокол pop3
- •Протокол imap4
- •Протокол smtp
- •Спецификация mime
- •Проблемы с кодировкой
- •Протокол ftp
- •Http – Протокол передачи гипертекстов
- •Что такое транзакция http
- •Клиентские методы http
- •Что возвращается обратно: коды ответа сервера
- •Заголовки http
- •Задания по теме «Протоколы Интернет»
- •Глава 2 Краткий обзор основных технологий Веб
- •Язык разметки гипертекста html
- •Язык xml
- •Язык программирования скриптов на стороне клиента JavaScript
- •Язык Java на клиентской странице
- •Технология «клиент-сервер». Cgi
- •Программирование для серверов
- •Технология ssi
- •Язык программирования Perl
- •Глава 3. Основные этапы разработки сайтов
- •Модель водопада
- •Спиральная модель
- •Модель Уолта Диснея
- •Управление проектами
- •Глава 4. Веб – дизайн и обработка гипертекстовых документов
- •Главная страница
- •Рекомендации по дизайну главной страницы
- •Какими должны быть внутренние страницы web-сайта
- •Логическое проектирование дизайна сайта
- •Основные этапы и уровни информационного обмена
- •Сжатие изображений с помощью фракталов
- •Язык разметки гипертекста html
- •Теги, атрибуты, значения
- •Структура документа
- •Разрыв строки
- •Предварительное форматирование
- •Выравнивание текста
- •Комментарии
- •Физическая и логическая разметка документа
- •«Физические» теги:
- •«Логические» теги:
- •Специальные символы
- •Графика
- •Формы html
- •Теги div и span
- •Метатеги
- •Новое в html 5
- •Валидация документов
- •Вопросы и задания
- •Задания для выполнения
- •Каскадные таблицы стилей css
- •Способы включения каскадных таблиц стилей
- •Множественные классы
- •Селекторы идентификаторов (id-селекторы)
- •Комментарии
- •Свойства шрифтов. Свойство шрифтов font позволяет задать одну или несколько характеристик шрифта.
- •Свойства текста.
- •Цвет и фон.
- •Представление документа в виде специальных областей – блоков
- •Отступы, поля, позиционирование
- •Границы элементов
- •Визуальное форматирование
- •Визуальные эффекты
- •Свойства списков
- •Свойства таблиц
- •Псевдоклассы
- •Псевдостили текста
- •Псевдоэлементы
- •Различные свойства
- •1. Свойства шрифтов.
- •2. Свойства текста.
- •3. Свойства цвета и фона.
- •4. Свойства рамки.
- •6. Свойства изображений.
- •Css. Примеры
- •Новое в css3
- •Валидация css
- •Глава 5. Язык JavaScript Введение
- •Включение скриптов JavaScript в html-код
- •Создание простых сценариев
- •Комментарии. Скрытие сценариев от браузеров
- •Отладка скриптов. Ввод и вывод данных
- •Инструменты для разработчика
- •Описание языка Типы данных
- •Преобразование типа
- •Специальные числа
- •Булев тип
- •Переменные типа Undefined и Null
- •Массивы
- •Оператор with
- •Оператор switch
- •Метод eval()
- •Функции
- •Передача параметров по значению и по ссылке
- •Глобальные и локальные переменные
- •Модель событий
- •Ключевое слово this
- •Исключения: throw/catch/finally
- •Объектная модель
- •Пользовательские объекты
- •Прототипы
- •Встроенные объекты String, Array, Date, Math Объект String
- •Объект Date (Дата)
- •Методы объекта Date
- •Объект Function (Функция)
- •Свойства Function
- •Методы Function
- •Объекты браузера
- •Объект window
- •Методы объекта window
- •Свойства окна, передаваемые методу open
- •Свойства и методы объекта navigator
- •Свойства объекта screen
- •Свойства и методы объекта history
- •Свойства и методы объекта document
- •Коллекции и подчиненные объекты объекта document Обращение к элементам страницы
- •Свойства и методы объекта location
- •Свойства и методы объекта style
- •Объект layer
- •Свойства объекта layer
- •Методы объекта layer
- •Навигация по дереву документа
- •Свойства объектов-узлов
- •Несколько других свойств узлов - объектов dom
- •Создание новых узлов
- •Добавление узлов в документ
- •Копирование: метод cloneNode()
- •Удаление и замена узлов в документе
- •Работа с атрибутами элементов
- •Метод removeAttribute()
- •Модель ajax:
- •Запрос к серверу. Класс xmlHttpRequest
- •Методы класса xmlHttpRequest
- •Свойства класса xmlHttpRequest
- •Создание экземпляра объекта xmlHttpRequest
- •Использование dom
- •Проблема с кешированием в Microsoft Internet Explorer
- •Информируйте пользователя
- •Подготовьте запасной план
- •Работа с cookie
- •Формат и синтаксис cookie
- •Синтаксис http заголовка для поля Cookie
- •Дополнительные сведения
- •Способы задания значений cookie
- •Примеры на JavaScript
- •Тестовые вопросы по языку JavaScript
- •Упражнения и задачи по JavaScript
- •Список итоговых заданий (курсовая работа)
- •Литература
- •Приложение 1. Программное обеспечение Adobe Dreamweaver cs4
- •Типы данных
- •Ассоциированные массивы
- •Операторы
- •Подпрограммы
- •Введение
- •Возможности php.
- •Инструменты для разработки
- •Как php работает
- •Глава 1. Язык php Типы данных
- •Массивы и инициализация массивов
- •Объектно-ориентированное программирование в php Основные понятия ооп
- •Классы и Объекты
- •Конструкторы и деструкторы
- •Наследование классов и интерфейсов
- •Магические методы
- •Обработка ошибок
- •Ошибки php и журнал error_reporting
- •Чтение и запись бинарных файлов
- •Работа с каталогами в рнр
- •MySql – сервер: бд1; бд2; бд3; бд4;
- •Язык запросов sql
- •Операция соединения.
- •Команды sql для создания баз данных и таблиц
- •Выборка данных из таблиц бд
- •Работа с MySql (сохранение данных в базе данных).
- •Работа с MySql занесение и получение данных из базы данных
- •Некоторые улучшения в организации работы с данными
- •Передача данных от клиента к серверу и обратно. Протокол http
- •Клиентские методы http
- •Обработка html-форм
- •Передача переменных в скрипт.
- •Передача значений переменных по методу get
- •Передача данных из клиентской формы на сервер по методу get
- •Передача данных из клиентской формы на сервер по методу post
- •Php и различные формы
- •Обработка форм
- •Более сложные переменные формы
- •Базы данных и язык sql
- •Реляционные субд Модель данных в реляционных субд
- •Нормализация модели данных
- •Язык sql
- •Команды sql
- •Команды определения структуры данных (Data Definition Language – ddl)
- •Команды манипулирования данными (Data Manipulation Language – dml)
- •Команды управления транзакциями (Transaction Control Language - tcl)
- •Команды управления доступом (Data Control Language – dcl)
- •Работа с командами sql Извлечение данных, команда select
- •Ключевое слово distinct
- •Секция from, логическое связывание таблиц
- •Секция where
- •Секция order by
- •Групповые функции
- •Секция group by
- •Секция having
- •Изменение данных
- •Команда insert
- •Команда delete
- •Команда update
- •Определение структуры данных Команда create table
- •Команда alter table
- •Команда drop table
Структура документа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p>Основной текст.</p>
</body>
</html>
Любой html-документ заключается между тегами <html> и </html>, т.е. тег <html> открывает документ, а тег </html> закрывает его. Между этими двумя основными тегами располагается заголовочная часть документа и его тело.
<html>
<head>
</head>
<body>
<!--содержание документа, комментарий-->
</body>
</html>
Заголовочная часть документа <head>
Тег заголовочной части документа используется сразу после тега <html>. Данный тег описывает общие правила отображения документа в браузере и содержит вспомогательную информацию о документе. Например:
<html>
<head>
<title> Список сотрудников, заголовок</title>
</head>
</html>
Заголовок документа <title>
Большинство Web-браузеров отображают заголовок документа, ограниченный тегами <title> и </title> вверху экрана, отдельно от содержимого документа.
простейшая страница определяется HTML-текстом
<html>
<head>
<title> Иванов И.И. </title>
</head>
<body>
Моя первая HTML-страница!
</body>
< /html>
Тело документа <body>
Тело документа должно находиться между тегами <body> и </body>. Это та часть документа, которая отображается как текстовая и графическая информация документа. Технически стартовые и завершающие теги типа <html>, <head> и <body> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет Web-браузеру разделить заголовочную и смысловую часть документа.
<html>
<head>
<title>Домашняя страница </title>
</head>
<body>
<!-- это комментарий-->
<h1> заголовок </h1>
<hr> <!-- горизонтальная линия -->
<p> абзац </p>
</body>
</html>
Атрибуты тега <body>:
Атрибуты |
Описание |
background |
Атрибут задает графическое изображение, которое как черепица заполнит фон документа. Синтаксис: <body background="(url)(путь) имя файла"> Файл с изображением фона лучше размещать в том же каталоге, тогда (URL) и (путь) указывать не нужно. Файл хранится в формате GIF или JPEG . |
bgcolor |
задает цвет фона документа при помощи шестнадцатеричных значений интенсивности цветов RGB, или при помощи литерала. Синтаксис: <body bgcolor="#ff0000"> или <body bgcolor="red"> |
text |
задает используемый по умолчанию цвет текста. По умолчанию текст будет черным. Синтаксис: <body text=" цвет "> |
link |
задает цвет гиперссылки (по умолчанию темно синий). Синтаксис: <body link="цвет" > |
alink |
задает цвет активной гиперссылки, он меняет цвет гиперссылки в момент щелчка по ней мышью. Синтаксис: <body alink="цвет" > |
vlink |
задает цвет посещенной гиперссылки: <body vlink="цвет" > |
topmargin |
задает верхнюю границу страницы в пикселях: <body topmargin=”число”> |
bottommargin |
задает нижнюю границу страницы : <body bottommargin=”число”> |
leftmargin |
задает границу страницы слева: <body leftmargin=”число”> |
rightmargin |
задает границу страницы справа: <body rightmargin=”число”> |
Особенности обработки текста в HTML
HTML при работе с текстом присущи некоторые особенности.
Любое количество пробелов идущих подряд, в браузере отображается как один. Это же правило относится к символам табуляции и переносам. Лишние пробелы не изменят вид документа в браузере. Исключением является тег <pre>, внутри которого любое число пробелов отображается так, как оно указано в коде.
Нет расстановки переносов в тексте. HTML не поддерживает расстановку переносов в словах, все слова пишутся целиком без разбиения. Короткие строки для выравнивания могут растягиваться за счет автоматического добавления пробелов между словами. Пустые блоки между словами портят внешний вид страницы.
Текст занимает ширину окна браузера. Длинная строка будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса. Если в тексте нет этих символов, браузер отобразит текст одной строкой. Если она шире окна браузера, то появится горизонтальная полоса прокрутки.
Абзац <p>
Символы перехода на новую строку, используемые для разбиения текста на абзацы, в коде HTML воспринимаются как обычные пробелы. Для создания абзацев в HTML-страницах используются специальные теги параграфа— <p>.
Для выравнивания абзаца — по левому краю, по правому краю, по центру и по ширине — используется атрибут дескриптора <p> — align, — принимающий значение left, right, center и justify, соответственно. Так, для выравнивания абзаца по центру используется следующий код:
Пример:
<html> <head>
<title>Применение абзацев</title>
</head>
<body> <p align = “center”> Абзац, выровненный по центру. </p>
<p align = “left”> Абзац, выровненный по левому краю. </p>
<p align = “ justify ”> Абзац, выровненный по ширине. </p> </body> </html>
Следует отметить, что, несмотря на то, что дескриптор <p> — контейнерный, указывать для него закрывающий дескриптор не обязательно, хотя и желательно.
С помощью тегов <p> текст разбивается на абзацы, согласно традициям англо-американской полиграфии — без красной строки и с увеличенным отступом между абзацами.
Заголовок <hn>
Для выделения заголовков более крупным и жирным шрифтом в HTML используются теги <hn>, где n — цифра от 1 до 6. Заголовок 1 уровня выводится самым крупным шрифтом, заголовок 6 уровня — самым мелким. Заголовки и следующий за ними текст всегда начинается с новой строки. Для форматирования заголовков используется параметр — align. Однако, в отличие от тега <p>, в заголовках предусмотрены только три значения этого параметра — left, right и center. Кроме того, теги заголовков, в отличие от тегов абзаца <p>, обязательно нужно закрывать. Иначе весь текст до конца страницы по умолчанию будет считаться заголовком соответствующего уровня.
Пример:
<html> <head>
<title>Применение абзацев</title> </head> <body> <h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвертого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6> </body> </html>