Струкова Наталья Федоровна, учитель математики и информатики высшей квалификационной категории. МБОУ «СОШ 13», г. Златоуст, Челябинская обл. - презентация

1 Струкова Наталья Федоровна, учитель математики и информатики высшей квалификационной категории. МБОУ «СОШ 13», г. Златоуст, Челябинская обл.

2 Структура WEB-страницы Большая часть тегов образует контейнер, состоящий из открывающего и закрывающего тегов. Теги можно набирать заглавными буквами, так и строчными. Структурные элементыНазвание контейнера WEB-страница … Заголовок страницы Название страницы Содержание WEB- страницы

3 Практическое задание 1 1.Запустить текстовый редактор Блокнот 2.Ввести HTML код страницы. Первое знакомство с тегами HTML …………………. 3. Ввести команду [Файл - сохранить]. Файлу присвоить имя index.htm 4. Запустить браузер и открыть созданный файл. В заголовке окна браузера высвечивается название Web страницы.

4 Заголовки Заголовок первого уровня (заголовок располагается по центру) Заголовок первого уровня В браузер!

5 Форматирование шрифта Горизонтальная разделительная линия Обычный текст Жирный Курсив Подчеркнутый Равноширинный В браузер! Выделение Усиленное выделение

6 СПИСКИ Списки бывают нумерованные и ненумерованные, а также списки определений. Нумерованный список Первый элемент списка Второй элемент списка Третий элемент списка

7 СПИСКИ Списки бывают нумерованные и ненумерованные, а также списки определений. Маркированный список Первый элемент списка Второй элемент списка Третий элемент списка

8 СПИСКИ Списки бывают нумерованные и ненумерованные, а также списки определений. Список определений Термин 1 Пояснение к термину1 Термин 2 Пояснение к термину 2 Термин 3 Пояснение к термину 3 В браузер!

9 Абзацы в WEB страницах В браузер! Как программируются абзацы на HTML. Как они выглядят? Как правило браузер использует не красную, а пустую строку для отделения одного абзаца от другого или абзаца от других элементов документа. Задается абзац тегами и, между которыми помещается текст. Фактически работа тега сводится к выводу перед текстовым фрагментом пустой строки. А вот парный тег игнорируется браузером, поэтому его можно и не писать!

10 Фон на WEB страницах В браузер! По желанию вы на вашей странице можете задать фон разного цвета. Но этим увлекаться не следует, так как, во-первых, это утяжеляет страницу, во-вторых, с ней тяжело работать. Первый способ: поместить в контейнер следующий тег Оттенки нескольких цветов ЦветКОД цвета розовый#f5e2ed зеленый#caf4ae голубой#bcdbef кремовый#f4dfae

11 Вставка графических объектов в WEB страницу В браузер! 1. В папке, где содержится ваша WEB страница, необходимо создать папку pic (picture-рисунок в переводе с английского). В ней будут находиться рисунки, которые вы будете размещать на своем сайте. 2. На странице необходимо прописать соответствующий тег: Пример:(так он будет выглядеть в блокноте)

12 Гиперссылки на WEB страницах В браузер! Гиперссылки, размещенные на Web-странице, позволяют загружать в браузер другие Web-страницы, хранящиеся на локальном компьютере или в Интернете. Гиперссылка состоит из двух частей: адреса и указателя ссылки. HREF Гиперссылка создается с помощью универсального тэга и его атрибута HREF, указывающего, в каком файле хра­нится загружаемая Web-страница: Пример: Перейти на другую страницу Перейти на другую страницу

13 Панель навигации на сайте На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход. Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами & nbsp. Такое размещение гиперссылок часто называют панелью навигации. [ Первая ] & nbsp;Первая [ Вторая ] & nbsp;Вторая [ Третья ] & nbsp;Третья [ Абзац ] Абзац

14 Гиперссылка на адрес электронной почты Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер, который задает стиль абзаца, принятый для указания адреса: E-mailmailto:username@server.ru">E-mail username@server.ru username@server.ru ">

15 Форма.Вся форма заключается в контейнер. В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.

16 Текстовые поля Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации. TYPE="text". Текстовые поля создаются с помощью тэга со значением атрибута TYPE="text". NAME Атрибут NAME является обязательным и служит для идентификации полученной ин­формации. SIZE Значением атрибута SIZE является число, задаю­щее длину поля ввода в символах.

17 Текстовые поля. HTML - код Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки Пожалуйста, введите ваше имя:

18 Переключатели TYPE="radio". NAME NAME="group". Далее необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group". VALUE VALUE Еще одним обязательным атрибутом является VALUE, которому присвоим значения "учащийся", "студент" и "учитель". Значение атрибута VALUE должно быть уникаль­ным для каждой «радиокнопки». Вставим в HTML-код группу переключателей, в которой строки разделяются с помощью тэга перевода строки

19 Переключатели. HTML - код Укажите, к какой группе пользователей вы себя относите: учащийся студент учитель

20 Флажки Далее, из предложенного перечня можно выбрать одновременно несколько вариантов, пометив их флажками. TYPE="checkbox". Флажки создаются в тэге со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="box1", NAME="box2" и т. д. VALUE Еще одним обязательным атрибутом является VALUE, которому присвоим значения "WWW", "e- mail" и "FTP". Значение атрибута VALUE должно быть уникальным для каждого флажка. Вставим в HTML-код группу флажков, в которой строки разделяются с помощью тэга перевода строки :

21 Флажки. HTML - код Какие из сервисов Интернета вы используете наиболее часто: WWW FTP

22 Раскрывающиеся списки, Для реализации раскрывающегося списка используется контейнер, в котором каждый элемент списка определяется тэгом. B переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибутаSELECTED.

23 Создание таблицы Первая Вторая Третья Первая Вторая Третья