Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Инфоурок / Информатика / Презентации / Коммуникационные технологии и разработка Web – сайтов
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 24 мая.

Подать заявку на курс
  • Информатика

Коммуникационные технологии и разработка Web – сайтов

библиотека
материалов
Сбор информации с помощью форм 25 Тэги для создания формы Компонент формы HTM...
5 При использовании лишь рассмотренных выше тэгов страница будет выглядеть на...
7 COLOR = «название цвета или его 	шестнадцатеричный код» изменение цвета тек...
4 Структура HTML-документа Тэги заключаются в угловые скобки и могут быть оди...
Формирование таблицы  – начало таблицы.  – конец таблицы.  – начало заголовк...
6 ШРИФТЫ Некоторые тэги имеют атрибуты, которые являются именами свойств и мо...
26 Кадры (frames) – это независимые части, на которые можно разбить окно брау...
8 Шестнадцатеричное представление цвета использует RGB- формат “#RRGGBB”, где...
Для создания интерактивных Web-страниц, обеспечивающих обратную связь, исполь...
2 Web – страницы создаются с использованием языка разметки гипертекстовых док...
Атрибуты тега  SRC = “имя файла. расширение” ALT = “название картинки или поя...
13 Положение рисунка относительно текста. Расположить рисунок относительно те...
14 Работа с изображениями Вставка альтернативного текста. Пользователи иногда...
16 Ссылки на метки Можно организовать ссылку на другую часть этого же докумен...
18 Атрибуты тега  alt= название области изображения-карты Это атрибут для зад...
19 Как связать карту с изображением Для создания навигационной карты необходи...
Атрибуты тега  WIDTH = “ширина таблицы” в пикселях или % BORDER = “ширина гр...
Сбор информации с помощью форм 23 Тэги для создания формы Компонент формы HTM...
Сбор информации с помощью форм 24 В переключателях, флажках и списках выбранн...
Атрибуты тега  NAME = “имя кадра” - задает имя кадра. Это имя потом используе...
27 1

Описание презентации по отдельным слайдам:

№ слайда 1 Сбор информации с помощью форм 25 Тэги для создания формы Компонент формы HTM
Описание слайда:

Сбор информации с помощью форм 25 Тэги для создания формы Компонент формы HTML- код Атрибуты Вид наWeb- странице Текстовая область <TEXTAREA NAME = “comments” ROWS = “3” COLS = “4”> </TEXTAREA> Создаетсятекстовая область с помощью тэга<TEXTAREA>собязательными атрибутами : NAME, задающий имя области; ROWS, определяющий число строк; COLS, определяющий число столбцов области. Отправка данных из формы <INPUT TYPE = “SUBMIT”VALUE = “Отправить”> Кнопкасоздается с помощью тэга<INPUT>. АтрибутуTYPEнеобходимо присвоить значение“SUBMIT”,а атрибутуVALUE,который задает надпись на кнопке, присвоить значение“Отправить”. Щелчком по кнопке «Отправить» можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибутуACTIONконтейнера<FORM>надо присвоить значение адреса электронной почты.

№ слайда 2 5 При использовании лишь рассмотренных выше тэгов страница будет выглядеть на
Описание слайда:

5 При использовании лишь рассмотренных выше тэгов страница будет выглядеть на слишком привлекательно – мелкий шрифт черного цвета на белом фоне. С помощью следующих тэгов можно задать различные параметры форматирования текста. ЗАГОЛОВКИ Размер шрифта заголовков задается парами тэгов от <H1></H1> (самый крупный) до <H6></H6> (самый мелкий). Для форматирования заголовков используются следующие пары тэгов: <B> – полужирный шрифт. </B> – отмена полужирного шрифта. <I> – курсив. </I> – отмена курсива. <U> – подчёркивание. </U> – отмена подчёркивания. <STRONG> – полужирный шрифт. </STRONG> – отмена полужирного шрифта. Форматирование текста Введя в Блокноте HTML-код и сохранив файл в формате html, можно запустить его, и в окне Internet Explorer отобразится содержание документа.

№ слайда 3 7 COLOR = «название цвета или его 	шестнадцатеричный код» изменение цвета тек
Описание слайда:

7 COLOR = «название цвета или его шестнадцатеричный код» изменение цвета текста. Например, чтобы в окне обозревателя текст отображался красным цветом, нужно ввести в HTML-код такую команду: <FONT СOLOR= “red”> текст </FONT> Форматирование текста

№ слайда 4 4 Структура HTML-документа Тэги заключаются в угловые скобки и могут быть оди
Описание слайда:

4 Структура HTML-документа Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающиеся и закрывающиеся тэги ( такая пара называется контейнером). Закрывающийся тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и сточными буквами. HTML-код страницы помещается внутрь контейнера <HTML> </HTML>. Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web – страница разделяется на две логические части: заголовок и содержание. Заголовок Web-страницы заключается в контейнер <HEAD> </HEAD> и содержит название страницы и справочную информацию о станице, которая используется браузером для ее правильного отображения. Название страницы помещается в контейнер <TITLE></TITLE> и при просмотре отображается в верхней строке окна браузера. Отображаемое в браузере содержание страницы помещается в контейнер <BODY></BODY>. Созданную Web – страницу необходимо сохранить в виде файла с расширением htm. В качестве расширения файла Web – страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке. Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы, которое высвечивается в верхней строке браузера. Имя Web- страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами. <HTML> <HEAD> <TITLE> Моя первая страница </TITLE> </HEAD> <BODY> … тело документа … </BODY> </HTML>

№ слайда 5 Формирование таблицы  – начало таблицы.  – конец таблицы.  – начало заголовк
Описание слайда:

Формирование таблицы <TABLE> – начало таблицы. </TABLE> – конец таблицы. <CAPTION> – начало заголовка таблицы. </CAPTION> – конец заголовка таблицы. Заголовок располагается прямо по центру относительно ширины таблицы. <TH> (Table Header) – начало заголовков столбцов или строк таблицы. </TH> – конец заголовков столбцов или строк таблицы. <TR> (Table Row) – начало строки таблицы. </TR> – конец строки таблицы. <TD> – начало ячейки таблицы. </TD> – конец ячейки таблицы. Пример записи и результат действия тегов с различными значениями атрибутов. 20 Использование таблиц

№ слайда 6 6 ШРИФТЫ Некоторые тэги имеют атрибуты, которые являются именами свойств и мо
Описание слайда:

6 ШРИФТЫ Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга <FONT> </FONT> и его атрибутов можно задать параметры форматирования шрифта. <FONT> – изменение шрифта. </FONT> – отмена действия шрифта. Атрибуты: FACE = “название шрифта” – изменение гарнитуры (начертания) шрифта (например, FACE=“Arial”). SIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку (например, SIZE=4). Атрибуты могут перечисляться через пробел в произвольном порядке. Лучше не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные. Форматирование текста

№ слайда 7 26 Кадры (frames) – это независимые части, на которые можно разбить окно брау
Описание слайда:

26 Кадры (frames) – это независимые части, на которые можно разбить окно браузера, и в каждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками. Количество частей (кадров) и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом: <FRAMESET> Он определяет фреймовую структуру. </FRAMESET> Завершает определение фреймовой структуры. <FRAME SRC = “имя файла. расширение” > Позволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр. Использование тега <FRAMESET> исключает использование тега <BODY>! Определяя структуру, кадры задают сверху вниз и слева направо. Создание фреймов

№ слайда 8 8 Шестнадцатеричное представление цвета использует RGB- формат “#RRGGBB”, где
Описание слайда:

8 Шестнадцатеричное представление цвета использует RGB- формат “#RRGGBB”, где две первые шестнадцатеричные цифры задают интенсивность красного (Red), две следующие - интенсивность зеленого (Green) и две последние – интенсивность синего (Blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная – FF. Например синий цвет задается значением “#0000FF”. Для изменения цвета можно использовать таблицу цветовых оттенков. Форматирование текста

№ слайда 9 Для создания интерактивных Web-страниц, обеспечивающих обратную связь, исполь
Описание слайда:

Для создания интерактивных Web-страниц, обеспечивающих обратную связь, используются специальные формы. Форма – это набор элементов, знакомых нам по диалоговым окнам, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем. Форма создается с помощью тега: <FORM> </FORM> Пример заполняемой формы: В пределах тега <FORM> для создания разных полей используют теги <INPUT>, <SELECT> и <TEXTAREA> с разными атрибутами, как показано в Примере. Сбор информации с помощью форм 22

№ слайда 10 2 Web – страницы создаются с использованием языка разметки гипертекстовых док
Описание слайда:

2 Web – страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы – HTML-теги, которые определяют вид Web – страницы при ее просмотре в браузере. Если мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML– на языке разметки гипертекста. HTML-документы представляют собой текстовые файлы, в которые встроены специальные команды. Теги (tags) – команды языка HTML Назначение и основные понятия Для файлов, являющихся HTML-документами, принято расширение htm или html.

№ слайда 11 Атрибуты тега  SRC = “имя файла. расширение” ALT = “название картинки или поя
Описание слайда:

Атрибуты тега <IMG> SRC = “имя файла. расширение” ALT = “название картинки или поясняющий текст” Используется в качестве текстового описания к данному изображению, появляется при наведении указателя мыши на картинку. WIDTH = “ширина” (в пикселях или в %) HIGHT = “высота” (в пикселях или в %) BORDER = “число” в пикселях Определяет рамку вокруг изображения. HSPACE = “число” в пикселях VSPACE = “число” в пикселях Определяют горизонтальный и вертикальный отступ вокруг изображения соответственно. Пример записи и результат действия этого тега с различными значениями атрибутов. Работа с изображениями 12

№ слайда 12 13 Положение рисунка относительно текста. Расположить рисунок относительно те
Описание слайда:

13 Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значение: TOP (верх) MIDDLE (середина) BOTTOM (низ) LEFT (слева) RIGHT (справа) Атрибут ALIGN LEFT ALIGN = RIGHT CENTER Используется, чтобы сдвинуть картинку к левому, правому краю, по центру и установить обтекание картинки текстом. Атрибут CLEAR LEFT CLEAR = RIGHT ALL Используется, чтобы очистить поле слева, справа или с обеих сторон графического объекта, а затем продолжить текст в пустой области за объектом. Пример записи и результат действия тега с различными значениями атрибутов. Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке. Работа с изображениями

№ слайда 13 14 Работа с изображениями Вставка альтернативного текста. Пользователи иногда
Описание слайда:

14 Работа с изображениями Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображение и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст. Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке: <IMG SRC = “computer.jpg” ALIGN = “right” ALT = “Компьютер”>

№ слайда 14 16 Ссылки на метки Можно организовать ссылку на другую часть этого же докумен
Описание слайда:

16 Ссылки на метки Можно организовать ссылку на другую часть этого же документа, если предварительно расставить в начале таких частей метки. <A HREF= “#имя метки”>активный текст или изображение </A> Создает ссылку на метку в текущем HTML-документе: <A NAME= “имя метки” >начало текстового фрагмента </A> Можно также создать ссылку на метку в другом документе: <A HREF= “имя файла # имя метки” >активный текст или изображение </A> Пример записи и результат действия тэгов. Создание ссылок

№ слайда 15 18 Атрибуты тега  alt= название области изображения-карты Это атрибут для зад
Описание слайда:

18 Атрибуты тега <AREA> alt= название области изображения-карты Это атрибут для задания текста, заменяющего изображение-карту, не является обязательным. Атрибут, определяющий форму области на карте: rect SHAPE = poly сircle point COORDS =“x,y,x1,y1” Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего). COORDS =“x,y,x1,y1… xn,yn” Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника). COORDS =“x,y,r” Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус). COORDS =“x,y” Описывает координаты точки point (значения атрибута – её координаты). Определение координат областей для изображения-карты. Для определения координат можно использовать графический редактор Paint. Красными точками показаны координаты верхней левой точки необходимой области и правой нижней точки: shape="rect" coords="235, 226, 341, 257" Навигационные карты

№ слайда 16 19 Как связать карту с изображением Для создания навигационной карты необходи
Описание слайда:

19 Как связать карту с изображением Для создания навигационной карты необходимо выполнить следующие два шага. Воспользоваться тэгом <mар>, чтобы описать навигационную карту, включая области и гиперссылки. Воспользоваться тэгом <img>, атрибуты которого идентифицируют изображение и соответствующую ему карту. Установить соответствие между изображением и картой с помощью атрибута usemap тэга <img>. В качестве значения атрибута usemap используется имя карты, заданное в атрибуте name тэга <mар>. Если описание карты расположено на той же станице, что и ссылка на изображение (как обычно и бывает), имени карты должен предшествовать символ цифры (#). Например: <img src="Карта достопримечательностей.JPG" usemap="#kartamap"> Навигационные карты

№ слайда 17 Атрибуты тега  WIDTH = “ширина таблицы” в пикселях или % BORDER = “ширина гр
Описание слайда:

Атрибуты тега <TABLE> WIDTH = “ширина таблицы” в пикселях или % BORDER = “ширина границы таблицы” в пикселях или % Если она равна нулю – границы становятся невидимы. CELLSPACING = “ширина промежутков между ячейками” в пикселях или % CELLPADDING = “ширина промежутков между содержимым ячейки и её границами” в пикселях или % 21 Использование таблиц Атрибуты тега <TH>, <TR>, <TD> Таблица может быть простой (пример на предыдущем слайде) или сложной, когда несколько строк или столбцов объединяются. ROWSPAN = “количество объединяемых строк” COLSPAN = “количество объединяемых столбцов” BGCOLOR = “цвет фона заголовка, строки, ячейки” Пример записи и результат действия тегов с различными значениями атрибутов.

№ слайда 18 Сбор информации с помощью форм 23 Тэги для создания формы Компонент формы HTM
Описание слайда:

Сбор информации с помощью форм 23 Тэги для создания формы Компонент формы HTML- код Атрибуты Вид наWeb- странице Текстовые поля <INPUT TYPE = “text”/> АтрибутNAMEявляется обязательными случит для идентификации полученной информации. Значением атрибутаSIZEявляется число, задающее длину поля ввода в символах Переключатели <INPUT TYPE = “radio”VALUE= “radiobutton”/ > Всеэлементы в группе переключателей должны иметь одинаковые значения атрибутаNAME. Например,NAME = “group”. Еще одним обязательным атрибутом являетсяVALUE, которому присвоим значения переключателей. Значение атрибутаVALUEдолжно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу.

№ слайда 19 Сбор информации с помощью форм 24 В переключателях, флажках и списках выбранн
Описание слайда:

Сбор информации с помощью форм 24 В переключателях, флажках и списках выбранных по умолчанию элемент задается с помощью атрибута SELECTED. Тэги для создания формы Компонент формы HTML- код Атрибуты Вид наWeb- странице Множественный выбор (флажки) <INPUT TYPE = “checkbox”NAME= “box1” VALUE = “…”/ > Флажки, объединенныев группу, могут иметь различные значения атрибутаNAME. Еще одним обязательным атрибутом являетсяVALUE, которому присвоены значения. Значение атрибутаVALUEдолжно быть уникальным для каждого флажка, так как при его выборе именно оно передается серверу. Поля списков <SELECT NAME = “название списка”> <OPTION VALUE=“имя элемента списка”> … </SELECT> Для реализации раскрывающегося списка используют контейнер<SELECT></SELECT>, в котором каждый элемент списка определяется тэгом<OPTIONS>.

№ слайда 20 Атрибуты тега  NAME = “имя кадра” - задает имя кадра. Это имя потом используе
Описание слайда:

Атрибуты тега <FRAME> NAME = “имя кадра” - задает имя кадра. Это имя потом используется в качестве значения атрибута target в теге <A HREF> для того, чтобы документ, на который указывает ссылка, загружался в нужном кадре. Пример записи ссылок с атрибутом target. NORESIZE Означает запрет перемещения мышкой границы между кадрами. no FRAMEBORDER= yes Означает наличие или отсутствие границы между кадрами. Создание фреймов 27

№ слайда 21
Описание слайда:

№ слайда 22
Описание слайда:

№ слайда 23
Описание слайда:

№ слайда 24
Описание слайда:

№ слайда 25
Описание слайда:

№ слайда 26
Описание слайда:

№ слайда 27
Описание слайда:

Краткое описание документа:

В основу всемирной паутины положена идеология и технология гипертекста, технически реализованная при помощи языка HTML. HTML (от англ. HyperText Markup Language, язык гипертекстовой разметки) представляет собой язык, разработанный специально для создания web-документов. HTML-документы представляют собой обычные текстовые ASCII-файлы. Помимо текстового содержания, они включают в свой состав специальные управляющие конструкции языка – так называемые теги. При отображении документа в браузере сами теги на экран не выводятся. Они определяют структурные единицы внутри документа, задают параметры форматирования, включают в состав документа новые элементы (встроенные изображения, Java-апплеты и т.п.) и позволяют создавать гипертекстовые ссылки на другие документы и ресурсы сети Internet.

 

Для создания и редактирования HTML-документов достаточно простого текстового редактора, например Блокнот Windows. На практике обычно используют средства редактирования, разработанные специально для написания HTML - редакторы WYSIWYG (от англ. what you see is what you get, что видишь, то и получаешь) или, как их еще называют, средства визуального редактирования. Такие программные продукты имеют графические интерфейсы, делающие написание HTML-кода подобным работе с программой редактирования текстов и разметки страниц. Подобные программные продукты позволяют повысить эффективность и значительно сократить время разработки, особенно если речь идет о средних и крупных сайтах. Специализированные HTML-редакторы также работают с исходным кодом web-страницы, но располагают различными вспомогательными инструментами, ускоряющими и упрощающими процесс редактирования документов, и дополнительными средствами для выполнения повторяющихся операций. Кроме того, наиболее мощные из них включают в свой состав средства автоматизации процесса разработки (работа с шаблонами, стилями и библиотеками элементов) и средства размещения файлов сайта на web-сервере. К данной группе редакторов относится большое количество программных продуктов, в том числе и распространяемых бесплатно.

 

Автор
Дата добавления 14.01.2015
Раздел Информатика
Подраздел Презентации
Просмотров505
Номер материала 297401
Получить свидетельство о публикации

Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Похожие материалы

Включите уведомления прямо сейчас и мы сразу сообщим Вам о важных новостях. Не волнуйтесь, мы будем отправлять только самое главное.
Специальное предложение
Вверх