Россия, Екатеринбург
СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
Была в сети 18.04.2025 06:01
Неверова Ирина Юрьевна
методист, преподаватель информатики
65 лет
49 617
398 
Местоположение
Специализация
Создание web - документа (сайта) на языке разметки HTML
Категория:
Информатика
02.04.2015 07:12
Просмотр содержимого документа
«Создание web - документа (сайта) на языке разметки HTML»
Создание WEB – документа на языке разметки HTML
ЕАДК, Преподаватель: И.Ю. Неверова
- Чтобы опубликовать документ на Интернет, достаточно поместить его на сервер, постоянно подключенный в Интернет и способный общаться с другими серверами с помощью протокола передачи гипертекстов (HyperText Transfer Protocol, или http://). Совокупность таких серверов получила название "всемирной паутины" (World Wide Web, или WWW).
- Разработку документов, однако, можно проводить и на компьютере, не имеющем выхода в Интернет. Например, разрабатывая «Документ» в текстовом редакторе «Блокнот», его затем переносят в формат HTML и размещают на сервере Yellow Internet (любой желающий может бесплатно разместить на этом сервере свои файлы суммарным объемом до двух мегабайт).
Web - страница
- Файлы с текстом, составленные в редакторе Word в формате . doc занимают в несколько раз больше объёма памяти, чем текст, сохранённый в формате HTML .
- Если тот же текст набрать в редакторе Блокнот , то сохранённый как Web – страница (в формате HTML ) он займёт ещё меньший объём памяти дискового носителя информации. Из чего следует сделать вывод, что информация в коде HTML занимает значительно меньший объём, чем та же информация, разработанная в других приложениях Windows .
- Для составления web -документа применяется простой текстовый редактор Блокнот ( Notepad ), входящий в набор стандартных программ Windows .
- Web -документ может содержать как текстовую, так и графическую, видео- и аудиоинформацию, что позволяет создавать качественные электронные пособия для всемирной сети Internet .
Создание web -страницы в Блокноте
- Web -дизайн - это деятельность по применению Web -технологий для конструирования Web - ресурсов .
- Web-дизайнер наряду с алгоритмическим подходом к информации должен иметь сведения о композиции, восприятии формы и цветов, применении шрифтов.
- Для подготовки информации и сохранения её в виде WWW -документов (страниц, сайтов) был разработан специальный язык разметки гипертекста – HTML ( Hypertext Markup Language ).
- Основное назначение языка состоит в представлении текстовой, графической, видео- и аудиоинформации в виде, обеспечивающем минимальный объём передаваемой в сеть информации.
Web-дизайн оформления страницы
Что такое HTML?
- Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.
- Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации , HTML оказались пронумерованными. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C ( http://www.w3.org/ ).
Что Вам понадобится для освоения HTML?
Для освоения HTML по этому пособию Вам понадобятся две вещи:
- Любой браузер , т.е., программа, пригодная для просмотра HTML-файлов.
- Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows , вполне подойдет Notepad (Блокнот) .
Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер - как инструмент контроля за всем нами сделанным.
Создание Web- страницы
Создание Web- сайтов реализуется с использованием языка разметки гипертекстовых документов HTML . Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web- страницу. Браузер при загрузке Web- страницы представляет ее на экране в том виде, который задается тэгами .
- Открыть окно текстового редактора БЛОКНОТ;
- Набрать HTML- код страницы;
- Сохранить файл под именем Имя .htm ( html) ( обязательно титульная страница сайта называется этим именем), установив в поле Тип файла «все файлы»;
![Создание Web- страницы Запустить браузер и открыть созданный файл командой [ Файл – открыть ] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web- страницы (текст, записанный в тэге ) Для корректной работы сайта все объекты, используемые в нем ( файлы, рисунки и т.д.), должны храниться в одной папке с файлом index.htm . Обычно для сайта создают отдельную папку.](https://fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img10.jpg)
Создание Web- страницы
- Запустить браузер и открыть созданный файл командой [ Файл – открыть ] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web- страницы (текст, записанный в тэге )
- Для корректной работы сайта все объекты, используемые в нем ( файлы, рисунки и т.д.), должны храниться в одной папке с файлом index.htm . Обычно для сайта создают отдельную папку.
Структура Web- страницы
- Сайты создаются с помощью тегов.
- Вид Web- страницы задается тэгами, которые заключаются в угловые скобки.
- Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером).
- Все теги заключаются в угловые скобки
- Закрывающий тэг содержит прямой слэш ( / ) перед обозначением.
- Тэги могут записываться как прописными, так и строчными буквами.
- Любая страница должна иметь следующую структуру:
Например :
Компьютер
Все о компьютере
Код можно писать как заглавными, так и маленькими буквами.
Структура Web- страницы
- HTML- код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
- Заголовок Web- страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для её правильного отображения.
- Название Web- страницы содержится в контейнере и отображается в строке заголовка браузера пи просмотре страницы.
- Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и т.д.
Структура Web- страницы
- Пусть файл index.htm , содержит такой HTML- код:
Компьютер
Все о компьютере
При просмотре в браузере файла,
получим следующий вид
Начинаем создавать web- документ
- Во время отображения страницы в браузере разработчик не может вносить никакие изменения в существующую страницу. Для редактирования страницы её нужно открыть в приложении БЛОКНОТ, используя контекстное меню (вызывается правой кнопкой мыши)
- Откройте программу "Блокнот", "WordPad" или любой другой текстовый редактор,который есть на Вашем компьютере. Перепишите или скопируйте код красного цвета, но для более успешного запоминания, лучше начинать писать код вручную. Заполняйте очень внимательно, важен каждый знак, каждая запятая, каждая ковычка, иначе может не получиться.
Наша пробная страница BODY " width="640"
Сохраняем web- документ
- Кодом мы создаём страницу сайта. Теперь надо сохранить эту страницу в формате HTML. В меню текстового редактора нажмите "Файл" "Сохранить как.." , в открывшемся окне выберите место для сохранения файла. У нас это рабочий стол и укажите папку в которой будет лежать файл - это папка "Уроки HTML". и нажмите на кнопку "Открыть"
Наша пробная страница TITLE Наша пробная страница BODY
Сохраняем web- документ
- Затем в строке Имя файла напишите например: page.html и нажмите кнопку "Сохранить". В папке "Уроки HTML", взависимости от браузера, установленного у Вас, появится один из этих значков, изображенных на картинке справа.
В дальнейшем, когда Вы будете добавлять или изменять код, в меню текстового редактора нажимаете "Сохранить"
Просмотр web -страницы
- Чтобы открыть и посмотреть на созданную страницу, нажмите на значок правой кнопкой мыши и в выпавшем списке выберите "Открыть". Страница откроется в браузере, правда пока она пустая или, если вы вписали текст "Наша пробная страница", этот текст и будет отображен на странице. Если вы закрыли текстовый редактор в котором писали код, чтобы открыть его вновь и продолжить работу, нажмите на значок и в выпавшем списке выберите "Открыть с помощью" и из списка выберите “ Блокнот ” .
Как создать страницу HTML
Заголовок желательно отделять от основного содержания страницы горизонтальной линией с помощью одиночного тэга " width="640"
Заголовки
- Размер шрифта для имеющихся в тексте заголовков задается тэгами от (самый крупный) до (самый мелкий). Все указанные тэги парные (контейнеры)
- Заголовок страницы целесообразно выделять самым крупным шрифтом
Все о компьютере / H1
- Заголовок желательно отделять от основного содержания страницы горизонтальной линией с помощью одиночного тэга
Заголовки
- При просмотре файла в браузере окно примет следующий вид:
Заголовки, атрибуты тэгов
- Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN , которому требуется придать определенное значение.
- ALIGN = “right” – выравнивание по правому краю
- ALIGN = “center” – выравнивание по центру
- ALIGN = “left” – выравнивание по левому краю
Заголовки, атрибуты тэгов
- Текст кода
Компьютер
Все о компьютере
Форматирование текста
- Изменить начертание шрифта позволяют следующие тэги:
- Жирный
- Курсив
- Подчеркнутый
- Жирный подчеркнутый курсив
- Равноширинный
- Выделение
- Усиленное выделение
Форматирование текста
- Текст кода:
- Компьютер
- Все о компьютере
- Жирный
- Курсив
- Подчеркнутый
- Жирный подчеркнутый курсив
- Равноширинный
- Выделение
- Усиленное выделение
Форматирование текста
- Для выделения фрагментов текста используется тэг
- Этот тэг имеет следующие атрибуты:
- FACE – задает гарнитуру шрифта (например, FACE=“Arial”)
- SIZE – задает размер шрифта (например, SIZE=4)
- COLOR – задает цвет шрифта (например, COLOR=“blue”) . Значение атрибута COLOR можно задать либо значением цвета (например, “red”, “green”, “blue” и т.д.), либо шестнадцатеричным его значением, которое использует RGB -формат “#RRGGBB” , где две первые цифры задают интенсивность красного цвета ( red) , средние две цифры – интенсивность зеленого ( green) , и последние две цифры – интенсивность синего ( blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, а максимальная – FF . Легко догадаться, что синий цвет задает “#0000FF”
Форматирование текста
- Текст кода:
Компьютер
Все о компьютере
На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие . Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету . " width="640"
Форматирование текста
- Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания.
- На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Например, поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
P ALIGN=“left” На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие .
Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету .
Форматирование текста
Текст кода:
Форматирование текста
- В браузере:
Изображения
Для размещения на Web- страницах используются графические файлы форматов GIF, JPEG, PNG.
Для вставки изображения используется одиночный тэг с атрибутом SRC , который указывает место хранения файла на локальном компьютере или в Интернете.
Выравнивание рисунка по горизонтали в этом случае задается в тэге .
Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web- страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
Изображения
- Текст кода:
Компьютер
Все о компьютере
На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету.
Если файл находится на удаленном сервере в Интернете, то должен быть указан URL -адрес этого файла. Например : Иллюстрации на Web- страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст. Поясняющий текст выводится с помощью атрибута ALT , значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке: " width="640"
Изображения
- Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла (включая путь к файлу).
Например : SRC=“C:\computer\comp.jpg”
- Если файл находится на удаленном сервере в Интернете, то должен быть указан URL -адрес этого файла.
Например :
- Иллюстрации на Web- страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
- Поясняющий текст выводится с помощью атрибута ALT , значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
Списки
Довольно часто при размещении текста на Web- страницах удобно использовать списки в различных вариантах:
- Нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
- Маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров);
- Списки определений позволяют составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного
- Нумерованный список создается тэгом , а каждый элемент списка определяется тэгом .
Например :
Системные программы
Прикладные программы
Системы программирования
Списки
- Текст кода:
Компьютер
Программное обеспечение
Списки
- Ненумерованный список задается контейнером , а каждый элемент списка определяется также тэгом
- . С помощью атрибута TYPE тэга
- можно задать вид маркера списка: “disc” (диск), “square” (квадрат) или “circle” ( окружность).
Например :
текстовые редакторы;
графические редакторы;
электронные таблицы;
системы управления базами данных.
Списки
- Текст кода:
Компьютер
Программное обеспечение
- Системные программы
- Прикладные программы
- текстовые редакторы;
- графические редакторы;
- электронные таблицы;
- системы управления базами данных.
- Системы программирования
Списки
- Список терминов создается с помощью контейнера определений . Внутри него текст оформляется в виде термина, который определяется непарным тэгом , и определения, которое следует за тэгом .
Например :
Процессор
Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память
Устройство, в котором хранятся программы и данные.
Списки
- Текст кода:
Словарь
Компьютерные термины
Процессор
Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память
Устройство, в котором хранятся программы и данные.
![Гиперссылки Первая титульная страница должна предоставлять посетителю Web- сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации). Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо сначала создать заготовки Web- страниц. Такие «пустые» страницы должны иметь заголовок, а содержание пока можно пропустить. Все создаваемые страницы необходимо сохранить в виде файлов с расширением HTM в папке сайта. Каждая страница обязательно должна содержать код, отражающий структуру Web- страницы Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ) : [ Программы ] [ Соварь ] [ Комплектующие ] [ Анкета ]](https://fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img39.jpg)
Гиперссылки
- Первая титульная страница должна предоставлять посетителю Web- сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации).
- Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо сначала создать заготовки Web- страниц. Такие «пустые» страницы должны иметь заголовок, а содержание пока можно пропустить. Все создаваемые страницы необходимо сохранить в виде файлов с расширением HTM в папке сайта.
- Каждая страница обязательно должна содержать код, отражающий структуру Web- страницы
- Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ) :
[ Программы ] [ Соварь ] [ Комплектующие ] [ Анкета ]
![Гиперссылки Компьютер Все о компьютере На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. [Программы] [Словарь] [Комплектующие] [Анкета]](https://fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img40.jpg)
Гиперссылки
Компьютер
Все о компьютере
На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету.
[Программы] [Словарь] [Комплектующие] [Анкета]
Гиперссылки
![Гиперссылки Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки с атрибутом HREF , значением которого является URL- адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки: указатель гиперссылки В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта): [ Программы ] [ Словарь ] [ Комплетующие ] [ Анкета ]](https://fhd.multiurok.ru/7/0/a/70a0d0e7bbf68ec362ad51e17d053a444281dc61/img42.jpg)
Гиперссылки
- Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки с атрибутом HREF , значением которого является URL- адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки:
указатель гиперссылки
- В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта):
[ Программы ]
[ Словарь ]
[ Комплетующие ]
[ Анкета ]
Гиперссылки
Панель навигации
Куранты , где clock.htm – имя Web- страницы, КУРАНТЫ – указатель ссылки Ссылка на Web- страницу, размещенную в Интернете: = “http://www.moskva.ru” C айт о Москве , где http://www.moskva.ru – URL -адрес страницы в Интернете, САЙТ О МОСКВЕ – указатель ссылки Вставка изображения: = “spassk.jpg” Башня , где spassk.jpg – имя файла, содержащего изображение, БАШНЯ – указатель ссылки Запуск проигрывателя звукового файла = “strike.wav” Бой часов , где strike.wav – имя звукового файла " width="640"
Гиперссылки
- Используя различные значения атрибута HREF , получают различные реакции браузера:
- Ссылка на Web- страницу локального компьютера:
= “clock.htm” Куранты , где clock.htm – имя Web- страницы, КУРАНТЫ – указатель ссылки
- Ссылка на Web- страницу, размещенную в Интернете:
= “http://www.moskva.ru” C айт о Москве , где http://www.moskva.ru – URL -адрес страницы в Интернете, САЙТ О МОСКВЕ – указатель ссылки
- Вставка изображения:
= “spassk.jpg” Башня , где spassk.jpg – имя файла, содержащего изображение, БАШНЯ – указатель ссылки
- Запуск проигрывателя звукового файла
= “strike.wav” Бой часов , где strike.wav – имя звукового файла
скачать файл , где kremlin.zip – архивный файл Создание бланка электронного письма с заполненным адресом получателя: = “mailto:your [email protected]” создать письмо , где [email protected] – электронный адрес получателя письма В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга Обычно на Web- страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга: , где width=“30” height=“75” – размеры изображения на Web- странице " width="640"
Гиперссылки
- Сохранение файла на локальном компьютере:
= “kremlin.zip” скачать файл , где kremlin.zip – архивный файл
- Создание бланка электронного письма с заполненным адресом получателя:
= “mailto:your [email protected]” создать письмо , где [email protected] – электронный адрес получателя письма
- В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга
- Обычно на Web- страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга:
, где width=“30” height=“75” – размеры изображения на Web- странице
Мета-тэги
- В раздел заголовка Web -страницы могут быть добавлены информационные тэги , имеющие атрибуты NAME, HTTP-EQUIV и CONTENT .
- Мета-тэг может информировать браузер о кодировке Web -страницы:
- Мета-тэги используются поисковыми системами для индексирования содержания, ключевых слов и автора Web -страницы:
Цветовые схемы
- Цвет на Web- странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным кодом #RRGGBB , где две первые цифры задают интенсивность красного цвета ( red) , средние две цифры – интенсивность зеленого ( green) , и последние две цифры – интенсивность синего ( blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, а максимальная – FF . Легко догадаться, что синий цвет задает “#0000FF” . В таблице приведены значения некоторых цветов:
цвет
Черный
код
Белый
#000000
название
#FFFFFF
Black
Красный
цвет
Фиолетовый
код
White
Зеленый
#FF0000
#FF00FF
Синий
Бирюзовый
#00FF00
Red
название
Серый
#00FFFF
#0000FF
Magenta
Lime
Желтый
#808080
Blue
Cyan
Золотой
#FFFF00
#FFD800
Оранжевый
Gray
Yellow
#FFA500
Коричневый
Gold
#A82828
orange
Brown
Цветовые схемы
- Основную цветовую схему Web- страницы можно задать в тэге с помощью атрибутов:
- Цвет фона : BGCOLOR=“#RRGGBB”
- Текстура фона : BACKGROUND=“file_name”
- Цвет текста : TEXT=“#RRGGBB”
- Цвет текста ссылки : LINK=“#RRGGBB”
- Цвет текста активной ссылки: ALINK=“#RRGGBB”
- Цвет текста просмотренной
ссылки : VLINK=“#RRGGBB”
Цветовые схемы
- При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR . Поэтому для фона указывают цвет, совпадающий с основным цветом фонового рисунка.
- Чтобы текст хорошо читался, цвета на странице подбирают контрастирующими по яркости: пастельный фон – темный текст, или темный фон – светлый текст. Нежелательны буквы белого цвета – они могут оказаться невидимыми при печати страницы на принтере.
Например : Для оформления страницы о программном обеспечении можно использовать следующую цветовую схему:
Цветовые схемы
Цветовые схемы
В браузере страница будет выглядеть так:
(в данном случае неудачно выбрана цветовая схема для оформления страницы)
Таблицы
- Таблицу формируют несколько различных тэгов:
- Таблица задается контейнером , внутри которого содержится описание структуры таблицы и её содержания.
- Любая таблица состоит из строк, которые задаются контейнером (Table row) , в который помещается описание ячеек.
- Формат ячеек и их содержание помещается в контейнер (Table data) , а заголовки столбцов таблицы – в контейнер (Table header) .
- Толщина разделительных линий в таблице задается с помощью атрибута BORDER , а для выравнивания информации внутри ячейки по горизонтали применяют атрибут ALIGN .
Таблицы
- Чтобы получить в браузере следующий вид Web- страницы, нужно внести в код соответствующие тэги (смотри следующий слайд)
Таблицы
Код страницы:
Компьютер
Комплектующие
наименование производитель характеристики цена
Таблицы
Для добавления второй строки в таблицу нужно добавить следующую группу тэгов:
Винчестер Caviar Blue 640 Gb 4800 руб.
Интерактивные формы
- Интерактивные формы предназначены для сбора информации от посетителей Web- страницы. Внешне форма выглядит как анкета, в которую посетитель может вписать свой текст или выбрать значения из предлагаемых перечней.
- Форма помещается в специальный контейнер , внутри которого располагаются все тэги элементов формы. Там же обязательно находится кнопка, отправляющая заполненную анкету на сервер для последующей обработки данных. Поля формы создаются с помощью тэгов , и , в которых с помощью атрибутов задаются параметры полей.
- Текстовые поля создаются тэгом:
.
Атрибут VALUE принимает такое значение, которое задается пользователем при заполнении поля. Если пользователь ввел в поле текст «фамилия», то на сервер будет передано regist= фамилия.
Интерактивные формы
Компьютер
Анкета
фамилия
Интерактивные формы
- Добавим еще одно текстовое поле:
Компьютер
Анкета
фамилия
Имя
Интерактивные формы
- Флажки
Флажки могут объединяться в группы присвоением атрибутам NAME всех флажков одинакового значения. Для установки флажка по умолчанию используется атрибут CHECKED . Группа флажков создается тэгами:
На сервер передается значение атрибута VALUE флажка, установленного пользователем. Если пользователем установлены несколько флажков, то на сервер будут переданы значения установленных флажков группы через запятую CHB=1,2.
учащимся школы VALUE="2" студентом Выставлен автоматически " width="640"
Интерактивные формы
Компьютер
Анкета
фамилия
Имя
Являюсь:
VALUE="1" Checked учащимся школы
VALUE="2" студентом
Выставлен автоматически
Интерактивные формы
- Переключатели существуют только группой, что обеспечивается присвоением атрибутам NAME всех переключателей одинакового значения. Для установки переключателя по умолчанию используется атрибут CHECKED . Группа переключателей:
На сервер передается значение атрибута VALUE переключателя, установленного пользователем. Если пользователь установил первый переключатель, то на сервер будет передано rad=1. Установить можно только один переключатель из группы.
до 13 лет VALUE="2" 13-15 лет VALUE="3" старше 15 лет " width="640"
Интерактивные формы
Компьютер
Анкета
фамилия
Имя
возраст:
VALUE="1" Checked до 13 лет
VALUE="2" 13-15 лет
VALUE="3" старше 15 лет
Интерактивные формы
- C писки
Списки предоставляют пользователю выбор элементов в форме ниспадающего меню (значение атрибута SIZE=1 ) или списка прокрутки. Список помещается в контейнер:
Первый
Второй
Третий
На сервер передается значение атрибута OPTION , выбранного пользователем или установленного по умолчанию атрибутом SELECTED. Если пользователем выбран третий элемент списка, то на сервер будет передано list= Третий.
Интерактивные формы
Компьютер
Анкета
фамилия
Имя
Регион:
Москва
Санкт-Петербург
Хабаровский край
Интерактивные формы
- Текстовая область
Текстовая область представляет собой текстовое поле с заданным количеством строк (значение атрибута ROWS ) и столбцов (значение атрибута COLS ). Создается тэгом:
Текст по умолчанию
На сервер передается содержимое поля.
Интерактивные формы
Компьютер
Анкета
фамилия
Имя
напишите свои пожелания
Кнопка очистки данных формы реализуется с помощью тэга: Очистить ” " width="640"
Интерактивные формы
- Кнопки
На форме должны присутствовать кнопки, которые реализуют отправку данных из формы для обработки на сервер и очистку формы от введенных данных.
Кнопка отправки данных формы реализуется с помощью тэга:
Отправить ”
Кнопка очистки данных формы реализуется с помощью тэга:
Очистить ”
Интерактивные формы
Компьютер
Анкета
фамилия
Имя
напишите свои пожелания
Желаем успехов в создании web -сайта!
http:/multiurok.ru/neverova
Вебинар для учителей
Свидетельство об участии БЕСПЛАТНО!
