Работа с диапазонами на HTML5 веб-страницах


Оглавление (нажмите, чтобы открыть):

Информационные и коммуникационные технологии

Создание web-сайта

Урок 1. Создание web-сайта в KompoZer

Прежде, чем приступить к изучению урока, скачайте необходимые материалы к этому уроку и к контрольному заданию в одном архиве по ссылке К разделу «Создание web-сайта» в правом верхнем углу этого поля на желтом фоне, где расположены все материалы для скачивания (архив dop_KompoZer.zip).

Рассмотрим процедуру создания простого сайта в редакторе KompoZer. Для начала опишем интерфейс программы и перечислим основные приемы работы с текстом, гиперссылками и графикой.

В этом уроке мы создадим четыре небольшие веб-страницы, связанные между собой гиперссылками (рисунки 1–4).

Интерфейс программы KompoZer

Интерфейс программы (рис. 5) состоит из следующих элементов:

Меню. Содержит пункты для выполнения всех операций, возможных в KompoZer.

Панель компоновки. Содержит кнопки наиболее часто используемых операций.

Панель форматирования. С помощью панели форматирования можно выбирать шрифт, менять его цвет и размер, выделять блоки текста, создавать нумерованные и маркированные списки, выравнивать текст (влево, вправо, по центру, по ши­рине).

Панель вкладок. KompoZer позволяет одновременно редакти­ровать несколько документов, используя разные вкладки для каждого открытого документа.

Панель режимов редактирования показывает, в каком режи­ме просматривается текущий документ. Доступны режимы Дизайн, Объединенный и Код.

Рабочее окно. В рабочем окне происходит непосредственно со­здание страницы.

Менеджер сайта позволяет загрузить созданную страницу на сервер.

Рисунок 5. Интерфейс программы KompoZer

Рассмотрим работу с текстом, гиперссылками и изображения­ми на примере создания «Домашней страницы Пети Иванова».

Наш сайт будет состоять из четырех страниц:

– О себе (about_me.html);

– Мое расписание (rasp.html);

– Мои учителя (teacher.html).

Для начала следует запустить программу KompoZer, после чего программа войдет в режим создания новой web-страницы. Далее необходимо задать глобальные настройки страницы.

Глобальные настройки страницы

1. Для изменения глобальных настроек страницы (цвета фона, фонового рисунка, цвета гиперссылок, основного цвета текста) выберите пункт Формат – Цвета и фон страницы. Для задания стандартных цветов выберите радиокнопку Цвета поль­зователя по умолчанию, для задания собственных цветов радиокнопку Использовать цвета, после чего выберите из палитры нужные цвета. Для задания фонового рисунка можно выбрать соответ­ствующий файл с изображением в поле Фоновое изображение.

Выбор цвета (рис. 6) можно осуществлять несколькими способами:

выбором цвета (оттенка) из дискретной или непрерывной палитры цветов;

получением цвета (оттенка) путем смешивания красного, зеленого и синего цветов (RGB-модель);

формированием цвета через параметры Оттенок, Насыщен­ность, Яркость;

вводом в поле Имя английского названия цвета (например, Yellow);

вводом в поле Hex 16-ричного кода цвета (если он вам из­вестен).

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

Рисунок 6. Окно палитры цветов

2. Выберите для нашего сайта черный цвет текста, коричневый цвет всех гиперссылок и светло-желтый цвет фона.

3. К глобальным настройкам страницы относятся также заголо­вок окна страницы и тип кодировки документа. Их можно задать с помощью пункта меню Формат – Заголовок и свойства страни­цы.

Введите в поле Заголовок текст Домашняя страница Пети Иванова и с помощью кнопки Выбрать кодировку задайте тип кодировки Windows-1251. Нажмите ОК.

4. Результат показан на рисунке ниже.

Работа с текстом

Для ввода текста достаточно просто установить курсор в рабо­чее окно и начать ввод.

Если Вы копируете текст из другого документа, то необходимо очищать все стили, которые могут быть перенесены из другого документа. Для того, чтобы очистить стили, выделите вставленный на web-страницу текст и выберите из главного меню программы команду Формат — Убрать все стили текста .

Работа с текстом в программе KompoZer очень напоминает работу в текстовом процессоре Word.

5. Добавьте в первую строку нашей главной страницы сайта заголовок: «Домаш­няя страница Пети Иванова». Выделите текст и отформатируйте его следующий образом:

стиль абзаца – Заголовок 1 (Формат – Абзац);

размер шрифта – medium (Формат – Размер);

цвет текста – коричневый (Формат Цвет текста);

стиль текста – полужирный (Формат – Стиль текста);

выравнивание – по центру (Формат – Выравнивание).

6. В новую строку скопируйте следующий текст (не забудьте применить к вставленному тексту функцию Формат — Убрать все стили текста из главного меню программы):

«Дорогие друзья! Меня зовут Петя Иванов. Я рад приветствовать вас на своей домашней странице. Здесь я расскажу вам о себе, своей семье и друзьях».

7. Выделите этот текст и примените к нему следующие настройки: шрифт – Verdana, размер – Medium, стиль абзаца – Обычный текст, цвет текста – черный, выравнивание – по центру. Результат на рисунке ниже.

8. Создайте папку site.

9. Чтобы сохранить созданную страницу, выберите пункт Файл – Сохранить, выберите папку site и введите имя файла – index.html. Нажмите кнопку Сохранить.

10. Запустите файл index.html двойным щелчком. Результат отображения страницы в браузере на рисунке ниже.

11. Теперь создайте вторую страницу сайта Файл – Создать. Задавать глобальные настройки страницы, создавать заголовок и добавлять текст вы уже умеете. Самостоятельно задайте параметры страницы и создайте заголовок «О себе». Затем скопируйте следу­ющий текст:

«Меня зовут Иванов Петя. Я родился 21 мая 2000 года в городе Перми. В 2009 году пошел в первый класс школы № 59, где и учусь в настоящее время в 7 «б» классе. Мои любимые предметы – математика и история.

Кроме школы увлекаюсь шахматами и плаванием. Люблю читать, гулять с друзьями, смотреть телевизор и играть в компьютерные игры. У меня есть любимая собака Ральф, которой 4 года».

Параметры заголовка аналогичны параметрам заголовка на главной странице сайта. Для текста используйте выравнивание по ширине. Остальные параметры аналогичны параметрам текста главной страницы.

У Вас должен получиться примерно такой результат.

12. Скопируйте в папку site изображение petya.jpg.

ВАЖНО! Прежде, чем вставлять изображение, веб-страница должна быть обязательно сохранена!

Для добавления изображения на веб-страницу необходимо:

– убедиться, что веб-страница сохранена;

установить курсор в место вставки рисунка;


выбрать пункт Вставка – Изображение;

с помощью вкладки Адрес задать адрес изображения либо выбрать файл с изображением с помощью кнопки Открыть;

здесь же ввести текст всплывающей подсказки и альтерна­тивный текст (при необходимости);

с помощью вкладки Размеры задать размеры рисунка (если необходимо выполнить масштабирование);

с помощью вкладки Внешний вид задать отступы от изо­бражения до текста по горизонтали и вертикали, а также определить расположение текста по отношению к изобра­жению;

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

13. Сохраните веб-страницу под именем about_me.html. Для этого выполните команду Файл – Сохранить, выберите папку site и введите имя файла. Нажмите кнопку Сохранить.

14. Добавьте изображение, для этого:

установите курсор в начало первого абзаца текста;

выберите пункт Вставка – Изображение;

введите всплывающую подсказку – Петя Иванов (альтер­нативный текст вводить не нужно);

выберите вкладку Размеры, выберите радиокнопку Задать размер, установите флажок Соблюдать пропорции и задайте ширину рисунка – 200;

выберите вкладку Внешний вид и установите отступы слева и справа – 10, а сверху и снизу – 5;

установите расположение текста по отношению к рисун­ку – Влево, окружить текстом.

15. Должен по­лучиться такой результат, как на рисунке ниже.

16. Сохраните страницу about_me.html и просмотрите ее в браузере.

Создание таблиц и списков на web-странице

С помощью программы KompoZer добавим к нашему сайту еще две страницы: «Мое расписание уроков» и «Мои учителя». Для создания расписания уроков будем использовать таблицу, а для списка учителей – маркированный список.

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

Для создания простой таблицы необходимо выполнить следу­ющие действия:

выбрать пункт меню Таблица – Вставить – Таблица;

выбрать вкладку Точная и задать количество строк и столбцов таблицы, ширину таблицы (либо в % от ширины окна, к либо в пикселях), а также ширину рамки таблицы;

выбрать вкладку Ячейка и задать тип выравнивая содержи­мого ячейки по горизонтали и вертикали, а также расстоя­ние между ячейками и величину отступа от границы до со­держимого ячейки.

Начнем создавать таблицу «Расписание уроков». В конечном варианте таблица должна будет выглядеть следующим образом:

Обратите внимание, что в таблице есть ячейки, которые раз­биты на две части. В одной ячейке разбиение идет по горизонтали (ИЗО и Музыка) – это означает, что занятия по этому предмету проходят раз в две недели поочередно. В двух ячейках разбиение идет по вертикали (французский и английский языки), что озна­чает деление класса на две группы и их параллельные занятия у разных преподавателей. Кроме того, первая строка и первый столбец таблицы выделены другим цветом.

18. Для начала создайте таблицу с простой структурой без деления ячеек, как уже было описано выше. Размер таблицы – 6 строк на 6 столбцов, Рамка – 1, Выравнивание таблицы – влево, Поля – 2 пикселя, Поля внутри ячейки – 2 пикселя.

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

Изменение свойств таблицы

Если возникает необходимость изменить некоторые свойства уже существующей таблицы, то нужно:

установить курсор в любую ячейку таблицы;

выбрать пункт меню Таблица – Свойства таблицы;

изменить нужные свойства всей таблицы (вкладка Таблица) или отдельных ячеек (вкладка Ячейки).

20. Измените способ выравнивания нашей таблицы. Для этого вы­берите указанный выше пункт меню и с помощью вкладки Табли­ца измените тип выравнивания таблицы на значение – по центру.

Выделение ячеек таблицы

Если необходимо изменить свойства не всей таблицы цели­ком, а ее отдельных ячеек (строк или столбцов), то сначала надо выделить нужные ячейки. Для выделения используются сле­дующие способы:

выделить с помощью мыши первую ячейку диапазона, а за­тем при нажатой клавише Ctrl щелкать по остальным ячей­кам диапазона;

выделить с помощью мыши первую ячейку диапазона, а за­тем при нажатой клавише Shift щелкнуть по последней ячейке диапазона (в том случае, если нужно выделить под­ряд идущие ячейки);

установить курсор в любое место таблицы и щелкнуть по нужной строке или столбцу в линейке настройки таблицы.

Теперь рассмотрим вопрос о разбиении и объединении ячеек. Дело в том, что в HTML-редакторах нет возможности разбиения уже существующей ячейки. Есть только возможность объедине­ния строк и столбцов. Рассмотрим пример. Пусть мы хотим со­здать таблицу с приведенной ниже структурой.

Для этого мы должны создать структуру таблицы из трех (а не из двух) строк, а затем объединить нужные строки в первом и третьем столбцах. Аналогично нужно действовать и при необхо­димости объединения столбцов.

Добавление строк и столбцов

Для добавления строк и столбцов необходимо:

установить курсор в строку или столбец, куда нужно осу­ществить вставку;

выбрать пункт меню Таблица – Вставить, а далее один из четырех пунктов: Строку сверху, Строку снизу, Столбец до или Столбец после.

21. Добавьте в нашу таблицу два столбца и одну строку, исполь­зуя приведенный выше алгоритм. Должно получиться 7 строк и 8 столбцов.

Для объединения ячеек надо выполнить следующие действия:

выбрать пункт меню Таблица – Объединить выбранные ячейки.

22. Выполните объ­единение ячеек:

объедините третий и четвертый столбцы во всех строках, кроме четвертой;

объедините шестой и седьмой столбцы во всех строках, кро­ме третьей;

объедините строки с номерами 5 и 6 во всех столбцах, кроме четвертого.

Результат на рисунке ниже.

Изменение цвета фона ячеек

Для изменения цвета фона ячеек необходимо:

выбрать пункт меню Таблица – Цвет фона ячейки или таблицы;

выбрать из палитры нужный цвет.

23. Измените в нашей таблице цвет первой строки и первого столбца коричневый цвет.

24. Далее необходимо заполнить таблицу данными (шрифт – Verdana, размер – medium). Для первой строки и первого столбца используйте белый цвет шрифта. Цвет шрифта можно изменить с помощью кнопок на панели форматирования . При наборе текста ширина яче­ек будет изменяться. Не обращайте на это внимание.

25. Сохраните полученную таблицу в файле rasp.html

Изменение ширины столбцов

После набора текста при необходимости можно изменить ши­рину столбцов. Это можно сделать двумя способами:


– использовать специальную шкалу, которая находится под панелью вкладок;

– с помощью пункта меню Таблица – Свойства таблицы, вкладки Ячейки. При использовании этого способа нужно выделить столбец, ширину которого необходимо изменить, установить флажок Ширина, указать размер столбца и установить флажок Разбивка текста на строки. Если последний флажок не будет установлен, то ширина столбца будет авто­матически определяться по самой длинной строке и ее изме­нение вручную будет невозможно.

Для создания списков необходимо выполнить следующие дей­ствия:

ввести с клавиатуры элементы списка;

выделить элементы списка;

выбрать пункт меню Формат – Список;

выбрать тип списка – Маркированный или Нумерованный.

Изменение формата списка

Для изменения формата уже существующего списка необходимо:

выделить элементы списка;

выбрать пункт меню Формат, Список, Свойства списка.

26. Создайте файл teacher.html с глобальными настройками, как у предыдущих страниц. Вверху на странице напишите заголовок «Мои учителя», отформатируйте аналогично заголовкам на других страницах.

Список учителей будем создавать в виде списка.

27. Скопируйте на страницу следующий текст:

«Орлова Любовь Евгеньевна – русский язык и литература;

Шахова Елена Петровна – алгебра и геометрия;

Любимов Вячеслав Сергеевич – физика и информатика;

Горелова Ирина Федоровна – английский язык;

Филиппова Ольга Александровна – французский язык;

Большаков Андрей Сергеевич – ОБЖ и технология;

Леонова Татьяна Дмитриевна – история и обществознание».

28. Оформите этот текст маркированным списком и расположите по центру страницы, отформатируйте шрифт.

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

Создание текстовых гиперссылок

Для создания текстовой гиперссылки необходимо выполнить следующие действия:

выбрать пункт Вставка – Ссылка (или нажать кнопку Ссылка на Панели компоновки);

в первое поле диалогового окна ввести текст гиперссылки;

во втором поле диалогового окна указать URL-адрес объек­та, на который указывает гиперссылка, или ввести имя файла с указанием пути к нему.

30. Создайте на главной странице нашего сайта четыре гиперссылки. Для этого введите выше заголовка четыре слова через три пробела:

«Главная О себе Мое расписание Мои учителя»

Выделите всю строку, отформатируйте абзац, как обычный текст (не заголовок), шрифтом Verdana, выровняйте по центру страницы.

Результат на рисунке.

31. Далее выделите слово Главная аккуратно, не захватывая пробелы справа.

32. Нажмите кнопку Ссылка и в появившемся окне нажмите кнопку Выбрать файл , найдите файл index.html и два раза щелкните по нему, чтобы имя файла появилось в строке, нажмите ОК.

33. Аналогичным образом выделите фразу О себе.

34. Нажмите кнопку Ссылка и в окне свойств ссылки присвойте ей файл about_me.html.

35. Аналогично создайте еще две гиперссылки:

– Мое расписание (имя файла – rasp.html);

– Мои учителя (имя файла – teacher.html).

36. Сохраните файл.

После выполнения этих действий вы должны увидеть прибли­зительно такой вариант главной страницы, как на рисунке ниже.

37. Теперь выделите всю строку с гиперссылками, скопируйте ее Правка – Копировать. Перейдите в файл О себе, и вставьте скопированную строку выше заголовка страницы Правка – Вставить. Возможно, что у Вас получится вот так, т.е. всем гиперссылкам программа присвоила свойства заголовка.

38. Чтобы это убрать, выделите всю строку со ссылками, и отформатируйте ее как обычный текст Формат – Абзац – Обычный текст и установите строку по центру. Результат будет такой же, как на главной странице сайта.

39. Сохраните файл.

40. Скопируйте строку с гиперссылками на оставшиеся две страницы Мое расписание уроков и Мои учителя, и при необходимости отформатируйте как обычный текст с выравниванием по центру.

41. Не забывайте сохранить файлы, иначе изменения не применятся.

42. Запустите файл index.html в браузере, проверьте работоспособность всех гиперссылок.

HTML Адаптивный веб-дизайн

Что такое Адаптивный веб-дизайн?

Адаптивный веб-дизайн делает вашу веб-страницу хорошо выглядеть на всех устройствах (настольных компьютерах, планшетах и телефонах).

Отзывчивый веб-дизайн об использовании HTML и CSS, чтобы изменить размер, скрыть, сжать, увеличить или переместить содержимое, чтобы он хорошо выглядеть на любом экране:

Примечание: Веб-страница должна хорошо выглядеть на любом устройстве!

Настройка видового экрана

При создании адаптивных веб-страниц добавьте следующий элемент на всех веб-страницах:

Пример

При этом будет установлен видовой экран страницы, в котором будут даны инструкции по управлению размерами и масштабированием страницы.

Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки выше, чтобы увидеть разницу.

Мастер Йода рекомендует:  ТОП-20 лучших сайтов для практики этичного хакинга

Адаптивные образы

Адаптивные образы — это изображения, которые хорошо масштабируются в соответствии с любым размером браузера.

Использование свойства Width


Если свойство CSS width имеет значение 100%, изображение будет реагировать и масштабироваться вверх и вниз:

Пример

Обратите внимание, что в приведенном выше примере изображение может быть увеличено до размера, превышающего его исходный размер. Лучшим решением, во многих случаях, будет использование свойства max-width вместо этого.

Использование свойства max-width

Если свойство max-width имеет значение 100%, изображение будет масштабироваться, если это необходимо, но никогда не масштабироваться, чтобы быть больше, чем его исходный размер:

Пример

Отображение различных изображений в зависимости от ширины браузера

позволяет определять различные изображения для различных размеров окна браузера.

Измените размер окна обозревателя, чтобы увидеть, как изображение ниже изменяется в зависимости от ширины:

Пример

Размер адаптивного текста

Размер текста можно задать с помощью блока «VW», что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

Hello World

Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер текста.

Пример

Hello World

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Мультимедийные запросы

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

С помощью мультимедийных запросов можно определить совершенно разные стили для различных размеров браузера.

Пример: измените размер окна обозревателя, чтобы увидеть, что три элемента div ниже будут отображаться горизонтально на больших экранах и штабелироваться вертикально на небольших экранах:

Пример

Совет: Чтобы узнать больше о мультимедийных запросах и адаптивном веб-дизайне, прочитайте наш учебник RWD.

Отзывчивый веб-страница-полный пример

Отзывчивый веб-страницы должны хорошо выглядеть на больших экранах настольных и малых мобильных телефонов.

Инструменты для работы с html5

Сегодня вашему вниманию хотим предоставить подборку инструментов, которые могут значительно упростить рутинные процессы при верстке сайта. Также очень много инструментов для веб-дизайнеров и разработчиков предоставляет Adobe. Давайте посмотрим на этот список. Возможно, сможете найти что-то полезное для себя.

Новая программа для создания графики, анимации и интерактивного контента для веб-сайтов с использованием HTML, JavaScript и CSS.

Moqups — удобный онлайн-редактор для создания макетов, прототипов, ui концепций.

Поможет достаточно быстро прописать css классы и id для готовых спрайтов.

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

HTML5, CSS3 и конечно, JavaScript — площадка для веб-разработчиков и дизайнеров. Это веб-сайт, предназначенный для кодеров, программистов и разработчиков для тестирования и написания кодов в режиме онлайн.

Набор HTML5, JQuery (JavaScript) файлов и CSS, шаблонов и элементов сможет стать для вас хорошим стартом и помочь сэкономить достаточно много времени.

Инструмент для создания адаптивных макетов.

Typekit — это достаточно быстрый метод интеграции шрифтов в веб­сайты. Библиотека шрифтов Typekit, доступная с помощью подписки, дает дизайнерам и разработчикам возможность применять различные шрифты и делать веб­страницы более разнообразными.

Данный сервис позволяет разработчикам использовать HTML, CSS и JavaScript для создания кроссплатформенных приложений, которые работают на iOS, Android и других мобильных платформах.

С помощью ресурса можно протестировать ваш браузер и узнать, на сколько хорошо он поддерживает

Онлайн-инструмент для создания переключателей с дополнительными переходами.

Это не обычный инструмент для создания эскизов. Эскизы можно сохранять и редактирвоать, а также делиться ими через социальные сети и электронную почту. В работе на этом сайте используются возможности HTML Canvas для создания 3D-рграфики.

Это конвертор SVG в HTML5 Canvas JavaScript.

Это бесплатный онлайн-инструмент, с помощью которого вы можете создавать прелоадеры. Ресурс использует библиотеку использует библиотеку CanvasLoader UI Library.

Изображения можно «перетаскивать» в специальную зону. Код генератора доступен в форме плагина jQuery, что открывает возможности по использованию функционала в своих приложениях.

Среда для редактирования для CMS, основанных на javascript

HTML5 фреймворк для написания игр, работающих на современных сенсорных экранов и десктопных браузерах.

Инструмент, который позволяет протестировать, как шрифт будет отображаться на экранах с разными размерами.

Это ресурс позволит проверить, какие из селекторов будут работать не правильно.

Генератор шаблонов, который позволяет быстро создать пустой адаптивный шаблон.

Набираете код в левом окне и видите результат в правой части экрана.

Еще одна площадка для генерации css. Простые эффекты могут быть доступны всего в несколько кликов.

Типы полей ввода HTML5

В HTML5 включены несколько дополнительных типов полей ввода, позволяющих ограничивать данные, которые пользователи смогут ввести, без необходимости прибегать к лишнему JavaScript-коду. Самая отрадная черта этих новых типов полей состоит в том, что, если браузеры не поддерживают их, они по умолчанию превращаются в стандартные текстовые поля ввода. Более того, существуют отличные полизаполнения, позволяющие обеспечить поддержку требуемых функций в устаревших браузерах. Вскоре мы о них поговорим. А пока взглянем на новые типы полей ввода HTML5 и разберем их преимущества.

Браузеры, поддерживающие поле type=»email», будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты. В приведенном далее примере кода type=»email» используется наряду с required и placeholder:

Your Email address

Если type=»email» применяется в сочетании с атрибутом required, то попытка отправить форму с данными, не соответствующими требованиям, приведет к выводу на экран предупреждающего сообщения (рисунок 8.6).

В это поле следует ввести электронный адрес.

Кроме того, на многих устройствах с сенсорными экранами (например, Andro . Обратите внимание на виртуальную клавишу с символом @, предназначенную для облегчения ввода адреса электронной почты.

Виртуальная клавиатура на экране iPad при использовании поля ввода type=»email»

Браузеры, поддерживающие поле type=»number», ожидают, что пользователь введет в него числовое значение. Они также по умолчанию отображают элементы управления в виде числовых полей ввода со значениями, изменяемыми с помощью мыши, давая пользователям возможность менять определенное значение, просто нажимая располагающиеся рядом с ним стрелки «вверх/вниз». Вот пример кода:

На рисунке 8.8 показано, как результат будет выглядеть в поддерживающем это поле браузере (Chrome 16).

Поле со счетчиком.


Поведение, которое будет наблюдаться, если вы не введете число, варьируется. Например, Chrome (версии 16) очистит поле, как только оно потеряет фокус, не предусматривая при этом никакой обратной связи, в то время как Firefox (версии 9) позволит ввести все что угодно (поле по умолчанию будет работать как стандартное текстовое поле ввода). В предыдущем примере кода мы задали диапазон допустимых значений, указав минимальное и максимальное значения, как в следующем коде:

Type=»number» min=»1929″ max=»2015″

Числа, не попадающие в этот диапазон, подвергаются (должны подвергаться) особой обработке. Реализация различается в зависимости от браузера. Например, Chrome (версии 16) выводит предупреждающее сообщение, а Firefox (версии 9) ничего не делает.

Как вы, возможно, и предполагали, поля ввода type=»url» предназначены для указания URL-адресов. Подобно полям ввода, относящимся к типам tel и email, поведение рассматриваемого поля почти идентично тому, что наблюдается у стандартного текстового поля. Однако некоторые браузеры добавляют специфическую информацию в предупреждающие сообщения, выводимые на экран при попытке отправить форму с некорректными значениями. Далее приведен пример кода, включающего атрибут placeholder:

Your Web address

На рисунке 8.9 показано, что произойдет при попытке отправить форму, в соответствующем поле которой неправильно введен URL-адрес, в браузере Chrome (версии 16).

Требуется ввести корректный электронный адрес

Как и в случае с type=»email», на устройствах с сенсорными экранами внешний вид встроенной виртуальной клавиатуры зачастую изменяется исходя из типа поля ввода. На рисунке 8.10 показано, как она будет выглядеть на экране iPad при использовании поля ввода type=»url».

Виртуальная клавиатура на экране iPad при использовании поля ввода type=”url”

Заметили виртуальные клавиши Go, прямой слеш (/) и.com? Поскольку мы использовали тип поля ввода url, они отображаются на экране для облегчения набора URL-адреса (если только вы не собираетесь указать адрес сайта, который не заканчивается на com, в случае чего, как вы сами понимаете, благодарить компанию Apple будет не за что).

Type=»tel» — еще один тип поля ввода, предназначенного для указания контактной информации. Поле типа tel применяется для того, чтобы сообщить браузеру, что в соответствующем поле формы пользователь должен ввести телефонный номер. Вот пример кода:

Telephone (so we can berate you if you’re wrong)

Несмотря на то что предполагается числовой формат вводимых данных, во многих браузерах, даже современных, вроде Chrome 16 и Firefox 9, это поле будет попросту вести себя как текстовое поле ввода. На текущий момент в этих браузерах не предусматривается вывод надлежащих предупреждающих сообщений при попытке отправить форму с некорректными введенными значениями.

Однако, как и в случае с типами полей ввода email и url, устройства с сенсорными экранами зачастую внимательно подходят к типу поля ввода tel, обеспечивая отображение измененной соответствующим образом встроенной виртуальной клавиатуры для облегчения ввода информации. На рисунке 8.11 показано поле ввода типа tel при доступе к нему на экране iPad (под управлением операционной системы iOS 5).

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

Несмотря на то что поле ввода type=»search» работает таким же образом, как и стандартное текстовое поле ввода, некоторые браузеры немного по-разному выполняют визуализацию на основе одного и того же кода. Вот пример кода:

Search the site….

На рисунке 8.12 показано, как будет выглядеть результат применения этого кода в браузере Firefox (версии 9). Обратите внимание, что при стилизации по умолчанию поле ввода является прямоугольным.

Однако в браузере Chrome (версии 16) визуализация на основе того же самого кода получается другой — поле ввода по умолчанию имеет закругленные края и кнопку быстрой очистки справа (рисунок 8.13).

Пример поля ввода tel на экране iPad

Поле поиска в Firefox

Поле поиска в Chrome.

Говоря об атрибуте pattern=»», сразу хочется предупредить: «Бойтесь, очень бойтесь» (помните, из какого фильма эта реплика?). На мой взгляд, эта реплика с тем же успехом применима к регулярным выражениям. Если вы не знаете, что такое регулярные выражения, то смею заметить, меньше знаешь — крепче спишь. Но если знаете, а еще хуже, понимаете их, то следующий раздел — для вас.

Узнайте о регулярных выражениях.

Если вы смотрели фильм «Изгоняющий дьявола» (The Exorcist) в одиночку, на кладбище, в полночь, во время Хеллоуина, то, вероятно, готовы узнать о регулярных выражениях. Читайте о них по адресу https://en. wikipedia. org/wiki/Regular_expressions.

Атрибут pattern позволяет определять с помощью регулярного выражения синтаксис данных, ввод которых должен быть разрешен в определенном поле. Вот пример кода:

Your Name (first and last)

При написании книги я потратил примерно 458 секунд на поиск в Интернете регулярного выражения, которое соответствовало бы синтаксису имени и фамилии. Если указать регулярное выражение в виде значения атрибута pattern, то поддерживающие браузеры будут ожидать ввода соответствующего синтаксиса. Кроме того, при использовании этого атрибута в сочетании с атрибутом required некорректно введенные значения будут подвергаться показанной далее обработке в поддерживающих их браузерах. В данном случае я попытался отправить форму, не указав фамилию (рисунок 8.14).

Рисунок 8.14. Выводится предупреждение о некорректном вводе данных

Поле ввода type=»color» генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате. Вот пример кода:

Your favorite color

К сожалению, в настоящее время очень немногие браузеры поддерживают тип поля ввода color. Похоже, что только Opera (версии 11) обеспечивает палитру цветов. Если требуемый цвет не отображается на палитре изначально, то, нажав располагающуюся внизу кнопку Other (Другие), можно открыть палитру цветов, используемую в операционной системе по умолчанию (рисунок 8.15).

Отображение палитры цветов.

Типы полей ввода date и time.

Согласно задумке, новые типы полей ввода date и time призваны обеспечить пользователю удобный выбор значений дат и времени. Если вам когда-либо доводилось приобретать в Интернете билеты, например, на спортивные соревнования, то вы, скорее всего, пользовались при этом элементом управления в виде календаря того или иного рода. Для обеспечения такой функциональности почти всегда применяется JavaScript (обычно это библиотека jQuery), однако есть надежда, что это стало возможным с использованием одной лишь HTML5-разметки.

Вот пример кода:

Как и в случае с полем ввода типа color, в настоящее время немногие браузеры поддерживают поле типа date, и в большинстве из них поля такого типа по умолчанию работают как стандартные текстовые поля ввода. Однако в старом добром браузере Opera эта функциональность уже реализована, а На рисунке 8.16 показано, как в Opera (версии 11) будет выглядеть результат визуализации на основе приведенного выше примера кода.

Календарь в браузере Opera

Существует несколько разных «модификаций» полей ввода типов date и time. Далее приведен их краткий обзор.

Вот пример кода:

Интерфейс позволит пользователю выбрать один месяц, после чего обеспечит ввод данных в виде года и месяца, например 2012-06.

На рисунке 8.17 показано, как все это будет выглядеть в браузере.

Пользователь может выбрать в календаре целый месяц

Вот пример кода:

При использовании типа поля ввода week соответствующий инструмент-указатель позволит пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате, например, 2012-W47.

На рисунке 8.18 показано, как все это будет выглядеть в браузере.

Пользователь выбирает в календаре всю неделю

Вот пример кода:

Поле ввода, относящееся к типу time, допускает ввод значений в 24-часовом формате, например 23:50. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени (рисунок 8.19).

Поле для ввода значения времени

Datetime и datetime-local.

Вот пример кода:

На рисунке 8.20 показано, как результат выполнения этого кода будет выглядеть в браузере Opera (версии 11).

На календаре выбран текущий день (на момент выполнения кода)

На экране устройств под управлением операционной системы iOS все это будет выглядеть еще лучше, о чем свидетельствует рисунок 8.21.

При вводе данных в поле типа datetime генерируются значения даты и времени (разделенные буквой T), а затем помечается часовой пояс (буквой Z в случае с UTC (Universal Coordinated Time — универсальное координированное время) либо знаком «+» или «-», если речь идет о величинах смещения). 25 октября 2009 года в системе UTC будет выглядеть так:

Поскольку UTC является практически эквивалентом GMT (Greenwich Mean Time — среднее время по Гринвичу), разобраться в смещениях не составит труда.

Например, тихоокеанское стандартное время (Лос-Анджелес) на 8 часов отстает от GMT (UTC — 8 часов). Это нашло бы свое отражение во вводимом значении, как показано далее:

Результат выполнения того же кода на экране iPad

Версия datetime-local работает точно так же, как и datetime, однако не включает информацию о часовом поясе.

ИЗМЕНЕНИЕ ШАГОВЫХ ПРИРАЩЕНИИ.


При работе с элементами управления в виде числовых полей ввода различных типов со значениями, изменяемыми с помощью мыши, вы можете менять шаговые приращения (величину инкремента), используя для этого атрибут step. Например, для шага величиной 4 часа за один раз вам потребуется ввести значение, равное 4 часам и выраженное в виде 14 400 секунд (60 (секунд) умножить на 60 (минут) и умножить на 4 (часа)). Далее приведен пример с datetime, измененный для использования 4 часовых шагов во временном селекторе:

Поле ввода типа range позволит создать такой элемент интерфейса, как ползунок. Вот пример кода:

На рисунке 8.22 показано, как результат будет выглядеть в браузере Safari (версии 5.1).

Ползунок в браузере Safari

Диапазон по умолчанию — от 0 до 100. Однако, указав значения для min и max в предыдущем примере, мы ограничили диапазон, и теперь он составляет от 1 до 10.

Серьезная проблема, с которой я столкнулся при работе с полем ввода типа range, заключается в том, что для пользователя никогда не отображается текущее значение. Хотя ползунок предназначен только для выбора числовых значений в некоем диапазоне, мне зачастую требовалось, чтобы текущее значение отображалось во время его изменения. На данный момент сделать это с помощью HTML5 невозможно. Однако если вам потребуется обязательно обеспечить отображение текущего значения, выбранного ползунком, то вы сможете легко сделать это, используя незамысловатый JavaScript-код. Измените предыдущий пример кода следующим образом:

Здесь мы добавили атрибут onchange и элемент с идентификатором range. А теперь добавим следующий небольшой JavaScript-фрагмент:

Этот код лишь извлекает текущее значение, выбранное с помощью ползунка, и отображает его в элементе с идентификатором range (в нашем теге ). Используем также немного CSS-стилизации, чтобы сделать значение крупнее и задать для него красный цвет. На рисунке 8.23 демонстрируется итоговый эффект, при котором значение будет обновляться по мере движения ползунка.

При движении ползунка отображается текущее значение

Часть 1. Приступая к работе

Серия контента:

Этот контент является частью # из серии # статей: Основы HTML5

Этот контент является частью серии: Основы HTML5

Следите за выходом новых статей этой серии.

HTML5 — это инструмент для упорядочивания Web-контента. Он предназначен для упрощения Web-проектирования и Web-разработки за счет языка разметки, обеспечивающего стандартизированный и интуитивно понятный пользовательский интерфейс. HTML5 предоставляет разработчику средства для секционирования и структуризации Web-страниц, а также позволяет создавать обособленные компоненты, которые не только обеспечивают логическую организацию Web-сайта, но и предоставляют ему возможности синдикации. Язык HTML5 реализует подход к проектированию Web-сайтов, основанный на отображении информации, поскольку он воплощает саму суть отображения информации — разделение и маркирование информации для упрощения ее использования и понимания. Именно в этом состоит огромная семантическая и эстетическая ценность HTML5. HTML5 предоставляет дизайнерам и разработчикам всех уровней возможности для предоставления в публичный доступ буквально любого контента – от простых текстов до мультимедийно насыщенных интерактивных материалов.

Часто используемые сокращения
  • API: Application programming interface(Интерфейс прикладного программирования, API-интерфейс)
  • CSS3: Cascading style sheet version 3 (Каскадная таблица стилей), версия 3
  • GUI: Graphical user interface (Графический интерфейс пользователя)
  • HTML: Hypertext Markup Language (Язык гипертекстовой разметки, язык HTML)
  • HTML5: HTML, версия 5
  • SQL: Structured Query Language (Язык структурированных запросов)
  • UI: User interface (Интерфейс пользователя)

HTML5 предоставляет эффективные инструменты для управления данными, для рисования, для воспроизведения видео- и аудиоконтента. HTML5 облегчает разработку кросс-браузерных Web-приложений, а также приложений для мобильных устройств. HTML5 относится к числу технологий, которые стимулируют развитие мобильных сервисов на основе облачных вычислений. Кроме того, HTML5 способствует повышению гибкости – благодаря возможности создания впечатляющих и интерактивных Web-сайтов. И, наконец, HTML5 предлагает новые теги и усовершенствования, в числе которых следующие: элегантная структура, органы управления формами, API-интерфейсы, мультимедийные функции, поддержка баз данных, существенно увеличенная скорость обработки.

Мастер Йода рекомендует:  Пишем одностраничное приложение с Flask и Vue.js

Новые теги HTML5 обладают «говорящими» названиями, которые раскрывают назначение и характер использования этих элементов. В предыдущих версиях HTML использовались весьма неопределенные названия тегов. В спецификации HTML5, напротив, используются весьма описательные, интуитивно понятные названия. HTML5 предоставляет информационно-насыщенные названия, которые однозначно идентифицируют соответствующий контент. Например, широко применявшийся до настоящего времени тег

HTML5 предоставляет следующие возможности.

  • Теги с описательными названиями, которые точно указывают, для содержания какого контента предназначены эти теги.
  • Усовершенствованные сетевые коммуникации.
  • Существенно улучшенное хранение данных
  • Средства Web Worker для исполнения фоновых процессов.
  • Интерфейс WebSocket для установки постоянного соединения между резидентным приложением и сервером.
  • Улучшенное извлечение хранящихся данных.
  • Повышенная скорость сохранения и загрузки страниц
  • Поддержка CSS3 при управлении пользовательским интерфейсом, что обеспечивает контентную ориентированность HTML5.
  • Улучшенная обработка форм в браузере.
  • API-интерфейс баз данных на основе SQL, позволяющий применять локальное хранилище на стороне клиента.
  • Теги canvas и video, позволяющие добавлять графические и видеоматериалы без установки сторонних подключаемых модулей.
  • Спецификация API-интерфейса Geolocation, использующая геолокационные возможности смартфонов в интересах задействования облачных сервисов и приложений для мобильных устройств.
  • Усовершенствованные формы, ослабляющие потребность в загрузке кода JavaScript, что обеспечивает более эффективную связь между мобильными устройствами и серверами cloud-среды.

HTML5 позволяет предоставить пользователю более впечатляющие возможности: страницы, спроектированные с использованием спецификации HTML5, способны предоставлять такие же возможности, как приложения для настольных систем. Кроме того, HTML5 существенно улучшает разработку для нескольких платформ благодаря сочетанию возможностей API-интерфейсов с повсеместностью браузера. HTML5 позволяет разработчикам предоставлять возможности современных приложений, беспрепятственно охватывающие несколько платформ.

Фактически HTML5 является синонимом непрерывных инноваций: новые теги, новые методики и общая инфраструктура разработки, базирующаяся на взаимодействии технологии HTML5 с родственными технологиями CSS3 и JavaScript. Это создает основу для функционирования приложений, ориентированных на клиентов. Помимо широкого распространения средств и методик технологии HTML5 на настольных системах, она может быть реализована в функционально насыщенных Web-браузерах для мобильных телефонов. Это растущий рынок, характерными представителями которого являются популярные и вездесущие платформы Apple iPhone, Google Android и Palm webOS.

Важнейшим аспектом мощных возможностей HTML5 является препарирование информации — или разделение контента на блоки, которое делает процесс гораздо понятнее. Высокая эффективность этого инструмента при проектировании и разработке подтверждается его усиливающимся доминированием в сфере Web-обработки.

HTML5 знаменует приход более эффективного семантического процесса на текстовом уровне и преобладание контролируемости над конструированием и использованием форм. Все эти и многие другие инновационные аспекты HTML5 обуславливают усиливающееся доминирование этой новой парадигмы. Этот нарастающий эффект до той или иной степени повлиял на многие организации (причем не только на коммерческие), в том числе на многие организации, у которых обработка информации и коммуницирование лишь недавно вошли в число основных видов деятельности.

Технология HTML5 — это не волшебная лампа с джинном внутри. Тем не менее технические и методические активы этой технологии уже сделали ее вторым по значимости способом решения проблем (первый способ — потереть волшебную лампу).

Планирование страницы

Мы собираемся создать простую Web-страницу. В ходе этого процесса рассмотрим несколько новых тегов, впервые появившихся в спецификации HTML5. Для создания эффективной и рациональной Web-страницы необходимо разработать план, охватывающий все создаваемые компоненты.

Создаваемая нами страница будет иметь высокоуровневый дизайн, показанный на рисунке 1. Страница состоит из области Header, области Navigation, области Article, содержащей три раздела, области Aside и, наконец, области Footer. Эта страница предназначена для работы в браузере Google Chrome, что исключает возможный визуальный беспорядок, порождаемый стремлением к браузерной совместимости, который мог бы затруднить понимание базовой структуры. Наша цель состоит в создании страницы, которая наглядно демонстрировала бы новые теги HTML5 и показывала возможности их использования для создания хорошо оформленного кода и элегантного дизайна страницы.

Рисунок 1. План Web-страницы Acme United

В процессе создания этой страницы я коснусь технологии CSS3, которая требуется для надлежащего отображения HTML5-страниц. Технология CSS3 необходима для придания определенного стиля HTML5-странице, для навигации по этой странице и для создания общего впечатления об этой странице. Группы свойств, описываемые в разделе CSS3 Reference на Web-сайте W3Schools.com (см. раздел Ресурсы), охватывают такие полезные теги, как фон, шрифт, выделенные области и анимация.

Однако прежде чем приступать к конструированию страницы, необходимо изучить несколько новых элементов HTML5.

Область Header

В рассматриваемом примере область Header содержит заголовок страницы и подзаголовок. Тег используется с целью создания контента для области Header данной страницы. Тег может содержать открывающую информацию о теге и о теге в дополнение к самой Web-странице. Создаваемая нами Web-страница имеет область Header , показанную на высокоуровневом представлении ее дизайна, а также область Header внутри области Article и области Section . В листинге 1 показан пример разметки тега .

Листинг 1. Пример тега

Тег также может содержать тег (листинг 2). Тег группирует заголовки вместе, используя показанные уровни заголовков с

с главным заголовком и подзаголовком.
Листинг 2. Пример тега

Область Navigation

Область Navigation на данной странице создается с помощью тега . Тег специфицирует область, специально предназначенную для навигации. Тег следует использовать для навигации по основному сайту, а не для хранения ссылок на другие области данной страницы. Область Navigation может содержать код, подобный показанному в листинге 3.

Листинг 3. Пример тега

Области Article и Section

В листинге 4 показан пример применения тега и тега .

Листинг 4. Пример тегов и

Изобразительные теги

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

Листинг 5. Пример тега и тега

Медиа-теги

Листинг 6. Пример тега

В листинге 7 показан пример структуры тега .

Листинг 7. Пример тега
Листинг 8. Пример тега


Тег описывает встроенный контент, который может быть отображен на странице, например, файлы Adobe Flash в формате SWF. Листинг 9 содержит атрибут type , который идентифицирует встроенный источник как Flash-файл.

Листинг 9. Пример тега

В дополнение к атрибутам src и type тег имеет атрибут height и атрибут width .

Область Aside

В листинге 10 показан пример применения тега .

Листинг 10. Пример тега

Область Footer

Тег содержит информацию о странице, о статье или о разделе, например, сведения об авторе или дату написания. В качестве нижнего колонтитула он может содержать информацию об авторских правах и другую важную юридическую информацию (листинг 11).

Листинг 11. Пример тега

Конструирование страницы

Теперь, когда вы познакомились с базовыми тегами, необходимыми для создания HTML5-страницы, приступим к конструированию своей страницы. Мы собираемся сконструировать Web-страницу для компании Acme United. Полностью эта страница показана на рисунке 2. Вы можете загрузить ее для последующего использования (см. раздел Загрузка).

Рисунок 2. Web-страница Acme United

SИтак, приступим к формированию страницы. Сначала следует тег . В спецификации HTML5 тег был упрощен: вам достаточно запомнить его атрибут — html . Это не только облегчает ввод этого тега, но и улучшает его защиту от ошибок. Обратите внимание, что атрибут имеет вид html , а не html5 . Вне зависимости от количества версий HTML, тег всегда сможет иметь атрибут html .

Тег содержит все остальные HTML-теги за исключением тега . Каждый из остальных тегов должен быть размещен между тегом и тегом (листинг 12).

Листинг 12. Пример тега

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

Создание адаптивной страницы в html5 и css3 для начинающих

Здравствуйте, уважаемые друзья и гости блога! Сегодня я вам расскажу, покажу и предоставлю для бесплатного скачивания исходники по созданию адаптивной страницы в html5 и css3, которые будут полезны как начинающим, так и уже сформировавшимся вебмастерам. По крайней мере я надеюсь на это!

За шесть шагов мы с вами пройдем курс обучения по созданию адаптивной страницы в html и css3 для начинающих. Это будет подписная адаптивная страница.

Вот ее пример. Подписавшись Вы можете скачать видеоуроки+исходники не дожидаясь выхода всех шести уроков.

Вы узнаете как это делается, создадите свою собственную адаптивную страницу в html и css, а так же получите все необходимые исходные материалы для этого.

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

Поэтому буду рассказывать поэтапно, выкладывая ежедневно по одному шагу в день. Так я думаю будет намного проще разобраться неискушенному вебмастеру во всех тонкостях создания адаптивной страницы на html и css.

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

И так, давайте начнем с первого шага …

Шаг первый: Создание разметки страницы в html5 и css3

В этом уроке мы с вами разберем подробно, как создать и создадим макет страницы, которую будем постепенно верстать на протяжении всех шести шагов.

Что такое адаптивная страница? Это та страница, которая отображается на всех устройствах, включая компьютеры, мобильные устройства и т.д., одинаково адаптивно и оптимизирована для всех них полностью!

Для начала нужно создать необходимые файлы для нашей адаптивной страницы верстаемой в html5 и css3. Вот они эти файлы:

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

Для редактирования файлов Вы можете использовать любой текстовый редактор, как простой блокнот, входящий в состав вашего набора Windows, так и более удобный Notepad++. Но конечно лучше для этого использовать Adobe Dreamweaver. Смотрите это на ваше усмотрение.

Вот содержимое файла index:

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

С ними вам будет удобно работать далее применимо ко всем вашим последующим заготовкам по созданию уже вашей собственной адаптивной страницы.

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

Все шаги создания адаптивной страницы в html5 и css3 :

Ежедневно мы с вами будем делать по одному шагу, который нас приблизит к выполнению нашего целевого задания. И Вы в конце всех шести уроков по верстке сможете создать собственную адаптивную страницу, которую будете использовать для своих личных нужд, а не заказывать кому-то за деньги!

Теперь обещанный видеоурок :

Так, что друзья завтра я Вас жду на следующем нашем уроке.

Как писать на HTML5 и какие у него возможности

Разбираемся, какие возможности есть у HTML5, чем он отличается от предыдущих версий и что почитать по теме HTML для самообучения.

Что такое HTML

HTML (HyperText Markup Language) — язык разметки гипертекста. Это формат документов, который изначально содержал:

  1. Сам текст.
  2. Теги (элементы) для разметки этого текста.

Словарь HTML состоит из множества тегов. Все они записаны в стандарт, который поддерживает международная организация World Wide Web Consortium (Консорциум W3C). Последняя рекомендация W3C для языка HTML имеет номер версии 5.2. В документе перечислены все элементы, которые можно использовать в коде веб-страницы. Это большой словарь, к которому придётся часто обращаться.

Конечно, современные браузеры отлично покажут документ независимо от того, в каком стиле оформлен код HTML, но вам будет стыдно перед коллегами, которые заглянут в исходники. Курс «Frontend-разработчик» поможет не только освоить HTML, но и в разы обойти программистов-самоучек. А сейчас обратимся к самым азам.

Пишет про разработку в Skillbox. Работал главным редактором сайта «Хабрахабр», ведет корпоративные блоги.

Набор технологий HTML5

HTML5 — последняя и самая мощная версия стандарта HTML, с новыми элементами, атрибутами и поведением. Под термином HTML5 также подразумевают набор технологий для разработки сайтов и веб-приложений.

Термином HTML5 обозначаются свыше десяти отдельных стандартов. А некоторые из технологий HTML5 до сих пор не утверждены окончательно. Их поддерживают не все браузеры (или каждый браузер по-разному).

Когда мы говорим об интерактивных сайтах и AJAX, то почти всегда речь идёт о технологиях HTML5.

В HTML5 есть программные интерфейсы (API) для передачи видео и звука, для чатов, в том числе видеочатов через браузер, и многих других интересных интерактивных штук. На HTML5 даже создают браузерные игры. И всем известный YouTube сейчас работает через HTML5, хотя раньше обязательно требовал Flash.

Отличия HTML5 от предыдущих версий

Формально перейти с обычного HTML (HTML4) на HTML5 очень просто: достаточно написать в начале кода веб-страницы тег для указания типа документа.

Всё, теперь у нас документ по стандарту HTML5.

В HTML4 было много разных типов, а в HTML5 остался только один . Весь код, который написан на «обычном» HTML (HTML4), будет работать и в HTML5.

Однако здесь добавлено много новых технологий:

  1. Мультимедиа-контент: HTML5 audio и v >Улучшенные формы (API валидации, несколько новых атрибутов, новые значения для атрибута type тега и новый элемент ).
  2. Новые семантические элементы ( , , , , , ,

и ).

  • MathML для математических формул.

  • Веб-сокеты: постоянное соединение между страницей и сервером и обмен данными через него. Страница интерактивно обновляется без перезагрузки.
  • WebRTC: возможность общения в реальном времени. Легко подключаться к другим людям и контролировать видеоконференции непосредственно в браузере, без необходимости плагинов и внешних приложений.
  • Server-sent-события: сервер отправляет события клиенту, а не по классической парадигме, где сервер может передавать данные только в ответ на запрос клиента.
  • Офлайн-работа: кеш приложения, офлайн- и онлайн-события.
  • Хранилище и использование файлов: веб-приложения хранят структурированные данные на стороне клиента, а HTML5 File API работает с файлами.
  • Camera API: позволяет взаимодействовать с камерой устройства.
  • WebGL и SVG: трёхмерная графика ( ) и основанный на XML формат векторных изображений.
  • …и другое.
  • Как редактировать HTML?

    Разметка HTML5 создаётся с помощью тех же приложений, что и разметка обычного HTML, начиная с «Блокнота» в Windows и заканчивая современными средствами разработки со встроенными шаблонами для быстрого создания документов HTML5 — например, Notepad++, Sublime Text.

    Справочные ресурсы по HTML

    Как научиться писать на HTML

    Одной зубрёжкой тегов не обойтись. Изучайте основные элементы и экспериментируйте. Поставьте сами конкретную задачу (например, сделать сайт-визитку) или возьмите платное задание как фрилансер и пробуйте его реализовать.

    Можно подсматривать в справочник, гуглить, спрашивать совета на форумах и сайтах с вопросами-ответами. Или найти максимально похожий сайт, открыть его код — и разбираться, как он работает. Можно изменить его для своих нужд, только не забудьте стереть копирайты и комментарии авторов.

    Копипаст чужой работы — нормальное явление в программировании, здесь это называется Open Source, очень модное и продвинутое течение.

    Некоторые разработчики не хотят открывать свой код, они шифруют (обфусцируют) скрипты на сайтах, но их тоже можно разобрать специальными инструментами.

    Чтобы создавать интерактивные сайты с более сложной функциональностью, с современным и красивым дизайном, нужно дополнительно изучить CSS, JavaScript, веб-дизайн и некоторые другие предметы. Тут требуется более фундаментальная подготовка.

    Погрузившись в обучение, вы научитесь создавать свои собственные
    веб-проекты и сможете претендовать на позицию junior-разработчика.

    Рецепты HTML5: Погружаемся в кодинг под HTML5 на конкретных примерах

    Содержание статьи

    Кто на свете всех милее, всех румяней и желанней? Не подумай ничего пошлого, я имею в виду всего лишь новую версию языка разметки — HTML5. Последние версии современных браузеров уже понимают некоторые HTML5-фишки, а значит — самое время начать применять его в своих проектах.

    Что такое HTML5?

    На первый взгляд HTML5 — это всего лишь новая версия языка разметки. Однако сейчас под этим термином подразумевают несколько иное. Рассматривать HTML5 без упоминания того же CSS3 просто нелепо, поскольку для разработки действительно современных web-приложений без него никак не обойтись. Нельзя забывать и о JavaScript. С его помощью реализуется обращение к богатому API, описанному в стандарте HTML5. Резюмируя все вышесказанное, напрашивается определение: HTML5 — это совокупность современных технологий/стандартов (JS, HTML5, CSS3 и так далее), применяемых для разработки web-приложений.

    Капелька истории

    HTML5 появился отнюдь не внезапно. Его разработка началась еще в 2007 году. За процесс работки отвечала специально созданная группа от консорциума W3C. Но многие возможности HTML5 были придуманы еще в рамках стандарта Web Application 1.0, а над ним корпели аж с 2004 года. Так что в реальности HTML5 не такая уж и юная технология, как может показаться на первый взгляд.

    Первая черновая версия спецификации HTML5 стала доступна уже 22 января 2008 года. Прошло три года, но окончательная версия спецификации так и не готова и вряд ли поспеет в ближайшие годдва. Этот печальный момент обязывает разработчиков аккуратно применять новые возможности в своих проектах. Спецификация может запросто поменяться, да и не все современные браузеры (FireFox 4, Google Chrome 10, IE9, Opera 11) в полной мере поддерживают новые возможности.

    Полезные рецепты

    Говорить о теории HTML5 можно очень долго, но рубрика у нас называется «Кодинг», поэтому я предлагаю тебе прочувствовать возможности стандарта на практике. Я не стал заморачиваться над созданием сверхоригинальных рецептов, а решил привести примеры вещей, которые действительно полезны и которые уже сейчас можно и нужно применять на своих сайтах. Итак, поехали.

    Рецепт №1: Включаем Drag&Drop на полную

    Одной из приятных няшек (наверное, зря ты употребил столько энергетиков, ведь тут должно быть слово «фишек» — прим. ред.) HTML5 стала возможность применения File API и Drag and Drop API.

    С их помощью можно организовать красивую передачу файлов с компьютера пользователя на сервер. Помнишь, раньше для отправки файлов всегда было поле с кнопочкой «Browse»? После ее нажатия появлялся стандартный диалог выбора файлов, в котором и требовалось выбрать файл для передачи. Назвать этот способ удобным язык не поворачивается. Особенно если речь идет о добавлении в очередь загрузки нескольких файлов.

    Чуть позже умельцы начали лепить аплоадеры на флеше, которые предоставляли больший функционал, но имели серьезный недо статок — потребность в установленном флеше. Кроме того, в обоих случаях у пользователя не было возможности добавлять файлы для передачи путем простого перетаскивания мышкой на страницу.

    А ведь технология Drag&Drop применяется в системе сплошь и рядом. Мне лично всегда хотелось просто выделить нужные файлы и легким взмахом крысы кинуть на страницу. Это куда удобней, чем рыскать в поисках файла при помощи стандартного диалога.

    Блог Vaden Pro

    Одной из задач создания новой версии HTML5 было упрощение разметки документа. Решением данной задачи стало создание новых тегов, которые отвечают за структуризацию документа.

    Основной принцип построения дерева страницы основывается на дроблении всей страницы на структурные элементы – блоки или секции. К числу этих секций относят такие теги, как header > (шапка сайта), section >, aside > , и footer > (подвал). До момента создания вышеперечисленных тегов верстальщики использовали теги div > для структуризации документа с использованием уникальных классов и > div > очень сложный для восприятия и не читабельный. Причиной этого является отсутствие логической нагрузки на теге. Это было главным камнем преткновения для поисковых систем.

    Данный факт стимулировал появления на свет тегов со смысловой нагрузкой, что стало так называемой «картой» для роботов в дремучем лесу кода.

    Положительные стороны использования новых тегов

    Поисковая оптимизация

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

    Вследствие этого поисковые системы повысят эффективность нахождения уникального контента и плагиата.

    Однако стоит отметить, что многие сеошники не уяснили основную суть принципа работы поисковиков по такой разметке, но это дело времени.

    Доступность

    Для наглядного разбора доступности новых методов верстки рассмотрим пример сайта:

    Глядя на этот сайт достаточно просто сориентироваться, где находится основной контент, а где вспомогательная информация, а также четко видно, где шапка сайта, менюшки и подвал. Однако при использовании голосовых браузеров очень трудно добраться до сути сайта, к примеру, если это сайт-магазин. Чтобы добраться до сути ассортимента предлагаемого товара пользователю понадобится не дюжее упорство и терпение, которым обладает не каждый.

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

    Эти положительные стороны HTML5 повлияли на неожиданный интерес создателей альтернативных систем поиска, они делают серьезный уклон на семантику документа.

    Коротко об основном назначении структурных тегов:

    section

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

    Более подробно о использовании этого тега для построения семантической структуры документа можно прочесть в статье «Построение структуры документа в HTML5 используя section»

    Для более понятного разъяснения вернемся к примеру разбития объемного текста на главы и параграфы, которые также могут иметь подразделы и подпункты. Обратимся к следующему примеру кода для закрепления материала

    Кстати, обратите внимание на наличие нескольких заголовков с маркером h1 это специальный прием, который мы обсудим позже.

    Некоторые пользователи утверждают, что section > — это не более, чем замена тега блочной верстки div > . Однако это утверждение не верно. Существует четкое разграничение, когда применение section уместно, а когда нет. К примеру, при привязки некоторому контейнеру особого стиля нужно обращаться только к div > . Также стоит обращать внимание и на смысловую нагрузку, которая есть в блоке- section не употребляется при отсутствии естественного заголовка.

    article

    Опытные веб-мастера называют эту секцию частным случаем тега section > . Article выделяет «автономную» (такую, которую в целом можно вырезать из страницы, и при этом она не потеряет своего смысла) часть страницы, которая в свою очередь состоит из взаимосвязанных элементов.

    К примерам автономных частей можно отнести анонсы статей на блоге, рекламные блоки, различные виджеты (к примеру с погодой).

    Однако, в спецификации достаточно заумно описано это понятие, в следствие чего возникло очень много споров по поводу того, что именно использовать: section > или аrticle > . К основным разногласиям по этому вопросу можно отнести следующие моменты:

    • для создания главного контейнера веб-страницы следует использовать section >, аrticle > или div > . С одной стороны все содержимое так или иначе связано между собой, однако сайт можно назвать независимой единицей.
    • как именно оформлять шапку сайта, а точнее какие теги использовать?
    • и, наконец, как работать с основным контентом сайта? Нужно использовать section > с аrticle > внутри или же исключительно пользоваться одним аrticle > .


    Эта путаница напоминает те времена, когда аналогичные споры возникали при использовании тегов acronim > и abbr > . В тот раз проблема была решена достаточно просто, но радикально: отказались от использования acronim > .

    И в связи со всем этим возникает вполне логичный и законный вопрос: зачем использовать аrticle > , если можно отказаться от него и работать только с section > ? В конечном итоге модернизация HTML5 была направлена на облегчения работы веб-мастеров.

    Скорее всего в данном случае отказаться от аrticle > будет не корректно, так как мы бы получили абсолютно идентичную разметку в блочном стиле, которая была в предыдущей версии HTML. Решением данного вопроса стало бы усовершенствование section > таким образом, чтобы были видны четкие различия между основным контентом сайта и вспомогательной информации.

    В помощь начинающим мастерам сайтостроения предлагаю несколько особенных черт, по которым можно достаточно просто решить, когда именно нужно использовать аrticle > :

    1. Основной подход – имеет ценность для пользователя, привлекает его внимание, тобишь основное содержимое страницы.
    2. Если рационально было бы добавить атрибуты pubdat или cite.
    3. В случае полной автономности рассматриваемого нами фрагмента кода.

    aside

    Создан для отделения основного содержимого страницы от вспомогательного.

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

    Чаще всего подобная информация на сайте располагается в сайдбаре.

    header

    Служит для четкого выделения заглавной части страницы. В нем располагаются заглавия как всего документа, так и отдельных его частей. Чаще всего внутри этой секции можно встретить такие теги, как hgroup > и h1 >- h6 > . Однако это предписание не обязательно, в принципе в header могут распологаться любые теги.

    Стоит отметить, что в первую очередь данный тег применяют при создании шапки, как указано в примере:

    Однако не стоит ограничивать данный тег шапкой для веб-страницы. header > он может располагаться внутри section >, article >, aside > и в особых исключительных случаях в nav > . При таком подходе тег header > является дочерним элементом и соответствует заглавию этой отдельной части. Рассмотрим пример, когда header > используется внутри article > :

    Стоит отметить, что header собирает воедино заголовок части, однако если эта самая часть состоит только из названия, то применять данный тег не следует:

    Это нерациональное использование header, более правильной с точки зрения семантики будет следующая запись кода:

    footer

    Опускаясь по структуре сайта все ниже мы постепенно подошли к нашему «подвалу», в котором располагается некоторая описательная информация раздела или сайта в общем. Эта информация отделяется тегом footer > :

    В этой части сайта принято располагать информацию о правах на авторство данного ресурса, копирайт, различные ссылки на вспомогательные ресурсы и прочее. Именно поэтому нельзя ограничивать использование тега footer > исключительно на главной странице. рационально будет его использование и в различных разделах ресурса. Также не стоит заблуждаться, что footer > обязательно должен находиться в самом низу сайта. К примеру, имеет место такая разметка страницы:

    Использование nav отвечает за разделение навигационной части сайта и основного контента. Внутри этого блока могут располагаться не только ссылки на другие страницы сайта, но и якорные ссылки по текущей странице. Для примера посмотрим на следующий код:

    Стоит также обратить внимание на то, что формирует не просто перечень ссылок, а самостоятельную секцию со сложной структурой. Смотрим:

    И не стоит забывать о том, что nav > формирует основной навигационный блок веб-страницы. дополнительные навигационные элементы сайта, такие как вспомогательные ссылки в футере или блоки, повторяющие навигацию, не должны выделяться этим тегом.

    Знания в формате 4 и 5

    Меню навигации

    Пользовательские ссылки

    Информация о пользователе

    Вы здесь » Знания в формате 4 и 5 » 11 класс (Семакин И.Г.) » П/р № 3.7* Интернет: создание Web-сайта на языке HTML

    П/р № 3.7* Интернет: создание Web-сайта на языке HTML

    Сообщений 1 страница 1 из 1

    Поделиться12012-10-31 22:02:16

    • Автор: Евгений Александрович
    • Администратор
    • Зарегистрирован: 2012-02-01
    • Приглашений: 0
    • Сообщений: 467
    • Провел на форуме:
      25 дней 6 часов
    • Последний визит:
      2020-11-07 11:53:43

    Цель работы: освоение приемов создания Web-страниц и Web-сайтов на языке HTML: знакомство с элементами HTML и структурой HTML-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.

    Используемое програмниое обеспечение: текстовый редактор «Блокнот».

    Справочная информация

    Структура HTML-документа. Существует много различных инструментальных средств для создания Web-страниц. Для работы с ними можно ничего не знать о языке разметки гипертекста — HTML. Однако любой HTML-редактор на основе создаваемой визуальной модели документа строит в памяти компьютера код страницы с использованием команд этого языка. Таким образом, независимо от способа создания, основа каждой Web-страницы — язык HTML. Документ, который написан на этом языке, представляет собой обычный текстовый файл в формате ASCII, в который вставлены дескрипторы, или тэги.
    Файлы, содержащие информацию на языке HTML, обычно имеют расширение htm или html. Они могут создаваться либо с помощью простейших текстовых редакторов (например, «Блокнота»), либо с помощью специальных HTML-редакторов. Основной файл каждого каталога обычно имеет имя index. Если при загрузке страницы в адресе не указывать имя файла, то обычно будет производиться поиск.
    Тэги (флаги, дескрипторы, контейнеры) — это специальные кодовые слова, определяющие внешний вид текста и графики, выводимой на экран, и формирующие связи с другими web-сайтами и ресурсами Интернета.
    Тэги представляют собой определенные последовательности символов, заключенные между знаками . Тэги бывают парные и непарные, открывающие и закрывающие. Область действия парного тэга начинается с того места, где стоит открывающий тэг, а кончается там, где стоит закрывающий тэг. Отличительный признак закрывающего дескриптора — символ /.
    HTML-документ начинается с тэга и заканчивается тэгом . Между ними располагается то, что будет выводиться на экран
    программой просмотра: текст, картинки, видеофрагменты и т. д. Любой HTML-документ состоит из двух частей: заголовка и тела. Кроме того, допускается использование комментариев. Комментарий должен начинаться с . Всё, что располагается между этими тэгами, на экран выводиться не будет. Комментарии помогают лучше разобраться в коде HTML-доку мента.
    Таким образом, общая структура HTML-документа имеет вид:

    Заголовок документа чаще всего содержит тэг заголовка окна и некоторые метатэги, содержимое которых на экран не выводится. Заголовок окна формируется с помощью следующего кода:

    Тело документа — это содержимое Web-страницы. Оно располагается между тэгами и . Тэг может содержать ряд атрибутов для глобальных установок, относящихся ко всему документу: цвета гиперссылок, цвет текста, фона, фоновый рисунок и т. д. Некоторые атрибуты тэга :

    • аlinк=цвет — цвет загружаемой гиперссылки;
    • link=цвет —цвет невыбранной гиперссылки;
    • vlink=цвет — цвет посещенной гиперссылки;
    • bgcolor=цвет — фоновый цвет страницы;
    • background=»имя графического файла» — повторяющаяся фоновая графика. Рисунок, хранящийся в указанном файле, будет размножен по всему экрану и перекроет цвет фона. Можно использовать форматы файлов GIF и JPEG;
    • text=цвет — цвет текста;
    • topmargin=n — расстояние между верхним краем окна браузера и содержимым страницы (задается в пикселях);
    • leftmargin=n — расстояние между левым краем окна браузера и содержимым страницы.

    Цвет указывается с помощью либо его имени, либо его шестнадцатеричного кода.
    Некоторые цвета:
    black — черный (000000);
    aqua — бирюзовый (00ffff);
    blue — синий (0000ff);
    gray — серый (808080);
    green — зеленый (008000);
    red — красный (ff0000);
    white — белый (ffffff);
    yellow — желтый (ffff00);
    maroon — коричневый (800000);
    fuchsia — розовый (ff00ff);
    lime — светло-зеленый (008000);
    navy — ультрамариновый (000080);
    olive — оливковый (808000);
    purple — пурпурный (800080);
    silver — серебряный (c0c0c0);
    teal — темно-зеленый (008080).

    Форматирование текста. Шрифты. Тэги форматирования служат для определения внешнего вида текста и задания его расположения на странице.
    1)

    Значения параметра align:
    left — по левому краю;
    right — по правому краю;
    center — по центру;
    justify — по центру.

    — выделение абзаца текста.
    В отличие от тэга

    3) . . . — центрирование всех элементов, расположенных между этими тэгами (текста, таблиц, графики).

    4)
    — принудительный разрыв строки в месте установки данного тэга.

    Это форматирование заголовков. Тэги с номерами 1-3 пригодны для вывода заголовков (большой размер шрифта). Тэги с номерами 4-6 задают размер шрифта, равный или меньший размеру шрифта текущего текста.
    По умолчанию текст выводится на экран тем шрифтом, который задан в установках браузера. Для изменения шрифта используется тэг :
    . — определение шрифта.
    Атрибут face определяет тип шрифта (Arial, Times New Roman, Courier New, Impact и т. д.). По умолчанию текст будет выводиться тем шрифтом, который задан в настройках программы-браузера. То же самое будет происходить, если указанный шрифт не установлен на компьютере. Возможно задание сразу нескольких шрифтов через запятую. Тогда сначала будет искаться первый, в случае его отсутствия — второй и т. д.
    size — размер шрифта; может задаваться абсолютным значением в диапазоне от 1 до 7 и относительным (по отношению к базовому значению). При относительном задании необходимо перед числом поставить знак +(увеличение) или — (уменьшение). Рекомендуется использовать относительное значение.
    color — цвет; задается так же, как цвет фона.

    Для изменения начертания шрифта используются тэги;
    1) . . . — полужирный шрифт;
    2) . . . — курсив;
    3) . . . — подчеркивание;
    4) . . . — нижний индекс;
    5) . . . — верхний индекс.

    Гиперсвязи и гиперссылки. Реализуемые в Интернет-документах ссылки можно разделить на две категории:
    1) ссылки на другие позиции внутри того же документа;
    2) ссылки на другой документ.

    Для задания этих типов гиперсвязей используется один тэг , имеющий следующий вид:

    текст или графика

    В качестве гиперссылки можно использовать текст или графическое изображение. Информация, которая располагается между тэгами и , будет выведена на экран. Если это текст, то он будет выделен подчеркиванием и специальным цветом (по умолчанию синим). При размещении указателя мыши над гиперссылкой он принимает вид руки. При выборе ссылки будет осуществлен переход по заданному адресу. Если указывается относительный адрес (например, только имя файла), то он будет искаться в текущей папке.
    При работе с большими документами рекомендуется вставлять в них метки с помощью этого же тэга с параметром NAME:

    Сама метка на экране не отображается. Для организации перехода к меткам документа следует записать следующий HTML-код:

    текст или графика

    Если нужно перейти к заданной метке в другом документе, то необходимо записать такой код:

    Пример
    Файл index.htm:

    Файл history.htm:

    Задание 1
    1. Создать Web-сайт «Моя домашняя страница», состоящий из пяти страниц.

    Страница 1 должна содержать:
    • заголовок;
    • четыре гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения».

    Страницы 2, 3,4 и 5 должны содержать:
    • заголовок;
    • по 2 два или более отформатированных абзаца текста (один абзац — не менее трех полных строк);
    • фотографии (минимум по одной на каждой странице).
    Сайт должен содержать информацию о вас, а также ваших родственниках, друзьях, одноклассниках и т. д.

    Требования к сайту:
    • заголовки и гиперссылки выравнивать по центру;
    • для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);
    • использовать разные способы выравнивания фотографий;
    • обязателен фоновый цвет страницы;
    • на каждой странице должен быть заголовок окна;
    • для заголовков использовать шрифт Arial, для основного текста — Verdana (размеры подобрать самостоятельно).

    2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
    3. Протестировать работоспособность сайта при выключенной графике.
    4. Изменить в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияло на внешний вид страниц вашего сайта.
    5. Разместить созданный сайт на любом бесплатном хостинге (например, на https://www/narod.ru). Проверить его работоспособность.

    Задание 2

    1. Создать сайт на тему «Времена года», «Животные» или «Природа», состоящий не менее чем из пяти страниц. Перед созданием сайта найти соответствующие вашей теме фотографии (скачать из Интернета, отсканировать или сфотографировать).
    Первая страница сайта должна содержать заголовок и графические миниатюры ваших изображений (их уменьшенные копии). Изменение размеров изображений выполнить в Adobe Photoshop, ACDSee или другом графическом приложении, работающем с форматом JPEG. Каждая графическая миниатюра должна являться гиперссылкой на соответствующую страницу сайта (обязательно наличие всплывающих подсказок).

    Требования к сайту:
    • обязательно использовать текстуру (фоновый рисунок) на каждой странице;
    • обязателен текст (минимум два абзаца из трех полных строк) на каждой странице;
    • обязательны заголовки на всех страницах;
    • обязательны заголовки окон;
    • для заголовков и основного текста использовать различные шрифты.

    2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
    3. Протестировать работоспособность сайта при выключенной графике.

    Задание 3

    1. Создать Web-сайт произвольной фирмы, состоящий не менее чем из четырех страниц. Сайт должен содержать страничку новостей, информацию об оказываемых услугах и ценах на них, информацию о сотрудниках фирмы, контактную информацию. Для перемещения по сайту пользователь не должен возвращаться на главную страницу (панель навигации должна присутствовать на всех страницах сайта). Заголовок сайта должен содержать логотип (разработать самостоятельно) и название (в графическом виде). Для этого использовать любой известный вам графический редактор, а затем полученное изображение преобразовать в формат JPEG с помощью Photoshop. Сайт должен быть выдержан в едином дизайнерском стиле (одинаковые шрифты для однотипных элементов, единая цветовая гамма, одинаковое расположение гиперссылок на всех страницах сайта).
    2. Протестировать работоспособность сайта в браузере (по возможности в двух различных браузерах).
    3. Протестировать работоспособность сайта при выключенной графике.

    Задание 4 (конкурсное)

    1. Разработать Web-сайт вашего класса (не менее 6-8 страниц).
    2. Протестировать Web-сайты ваших одноклассников и отметить слабые стороны каждого сайта.
    3. Провести голосование по выбору лучшего сайта класса.
    4. Разместить лучший сайт на любом бесплатном хостинге или сервере вашей школы (если таковой имеется).

    Добавить комментарий