Слайд 3Что мы используем… JetBrains PhpStorm - профессиональная интегрированная среда разработки для PHP, включает
поддержку PHP 5.5 и языков для фронт-энд разработки. Open Server — это портативная серверная платформа и программная среда, созданная специально для веб-разработчиков. Adobe Photoshop — многофункциональный графический редактор
Слайд 4HTTP (англ. HyperText Transfer Protocol — протокол передачи гипертекста). HTML (от
англ. HyperText Markup Language — язык разметки гипертекстовых документов). Язык HTML был разработан британським ученым Тимом Бернерсом Ли приблизительно в 1991г. XHTML (англ. Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста)
Слайд 5Этапы проектирования
1. Дизайн основной и типовых страниц сайта Начинается работа
с создания дизайна, обычно в графическом редакторе. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн.
файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания.
Слайд 117. Внутренняя и внешняя SEO-оптимизация. Поисковая оптимизация (search engine
optimization, SEO) — комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей. Обычно, чем выше позиция сайта в результатах поиска, тем больше заинтересованных посетителей переходит на него с поисковых систем.
Слайд 13Начнем верстать? html – теги, определяющие начало и конец документа. head – служебная
секция. Здесь размещаются команды для браузеров, инструкции для поисковых роботов, ссылки на отдаленные файлы, скрипты. title – теги, определяющие главный заголовок документа. body – эта секция содержит всю видимую часть web-страницы.
– определяет тип контента и кодировку, windows-1251 – поддерживает как латинский так и кириллистический алфавит.
Слайд 14Теги Все теги делятся на два типа: парные (контейнерные) одиночные (пустые)
Слайд 25 и - теги, служащие для выделения абзацев. Новый абзац всегда отделяется от
предыдущего пустой строкой.
- тег, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал. - тег, служащий для логического разделения текста горизонтальной линией.
и
- Между этими тегами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер". Теги определяют направление текста (слева направо и справа налево) (Атрибуты dir="rtl", dir="ltl" – определяют направление текста. В первом случае направление будет справа налево, а во втором – слева направо (по умолчанию).
Слайд 27Тег
Используется для вывода значения в некотором известном диапазоне. Используется преимущественно
для отображения числовых значений, например, количества результатов поиска, объема жидкости, давления и др.
Браузеры, которые поддерживают тег , отображают значение в виде рисунка, на котором цветом помечается текущее значение в указанном диапазоне. Остальные браузеры выводят текст, написанный внутри тега .
Слайд 30Списки HTML маркированный список HTML нумерованный список HTML вложенные списки или многоуровневые HTML списки определений
Слайд 31Маркированный список Теги – определяют маркированный HTML список. – определяют элементы (пункты) маркированного HTML
списка.
Пример
Sony
Asus
Dell
Результат
Слайд 32Нумерованный список Теги – определяют нумерованный HTML список. – определяют элементы (пункты) нумерованного HTML
списка.
Пример Результат
Sony
Asus
Dell
Sony
Asus
Dell
Слайд 33HTML вложенные списки или многоуровневые Теги – определяют нумерованный HTML список. – определяют элементы
(пункты) нумерованного HTML списка.
Пример Результат
Америка
Европа
Швеция
Норвегия
Финляндия
Азия
Австралия
Слайд 34HTML списки определений Теги – определяют HTML списки определений. – определяют определяемые термины.
– определяют опрeделения.
Пример Результат
GIF
Формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.
JPEG
…
Слайд 35HTML таблица Теги служит контейнером для элементов, определяющих содержимое таблицы – определяют строку
таблицы.
– определяют столбец таблицы Тег
предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Атрибут colspan - Устанавливает число ячеек, которые должны быть объединены по горизонтали Атрибут rowspan - Устанавливает число ячеек, которые должны быть объединены по вертикали.
Слайд 38HTML изображния HTML код изображения определяется тегом Тег – непарный. Атрибуты и значения: src="" – обязателен,
он указывает на источник изображения. alt="" – определяет альтернативный текст, комментарий, который считывает поисковый робот при анализе содержимого web-страницы. Его также нужно обозначать.
width="" – определяет ширину изображения в пикселях. height="" – определяет высоту изображения в пикселях. hspace="" – определяет расстояние между изображением и текстом по горизонтали. vspace="" – определяет расстояние между изображением и текстом по вертикали.
справа от изображения на дополнительном расстоянии в 50 пикселей
Текст
Текст
Текст
Текст
Текст
Текст внизу изображения на доболнительном расстоянии в 20 пикселей
Слайд 40 Определяет размер окна браузера и выбирает для отображения оптимальное изображение относительно
окна просмотра. Элемент идеально подходит для мобильных устройств в которых медленно работает интернет. Для валидности элемент должен находится внутри тега Ретина, т.е. экраны с плотностью точек на дюйм 150 и выше, на которых обычное изображение выглядит размыто Адаптивность, задача изменения размеров изображения согласно вашим правилам, прописанным в дизайне в зависимости от размера вьюпорта. Кадрирование или Художественные цели. Обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном.
Слайд 41HTML ссылки 1. Переходим на вторую страницу
Слайд 42HTML ссылки внутри документа
1. D D Имеем 2-е буквы D. Первая
выступает в роле HTML ссылки, а вторая – в роли элемента на который ссылаемся.
Второй присваиваем идентификатор со значением.
Слайд 43Видео Теги определяют видеопоток на сайте:
Атрибуты и значения autoplay="autoplay" – видео воспроизводится сразу после
загрузки страницы. autobuffer="autobuffer" – видео воспроизводится уже в момент загрузки страницы. controls="controls" – панель управления видеоплеером. loop="loop" – по окончанию, видео проигрывается снова. src="url" – источник видео. type="video/ogg" – определяет формат видео. height="" – высота видеоплеера. width="" – ширина видеоплеера.
Canvas 2D Создает область, в которой при помощи JavaScript можно рисовать
разные объекты, выводить изображения, трансформировать их и менять свойства.
strokeRect(x, y, ширина, высота) // Рисует прямоугольник fillRect(x, y, ширина, высота) // Рисует закрашенный прямоугольник clearRect(x, y, ширина, высота) // Очищает область на холсте размер с прямоугольник заданного размера
Слайд 49Тег Покажи, что у тебя есть! Тег используется для хранения
информации, которую можно скрыть или показать по требованию пользователя. Тег - Указывает заголовок для тега , по которому можно щелкать для разворачивания/сворачивания информации. Тег должен идти первым внутри .
Слайд 51Создание модальных окон при помощи HTML5 Dialog
Слайд 52Создание карт Карты-изображения позволяют привязывать ссылки к разным областям одного изображения. Карта изображения
определяется парным тегом . HTML-документ может содержать несколько карт изображения, поэтому каждой карте должно быть присвоено уникальное имя, которое определяется атрибутом name. Карта изображения состоит из участков изображения и соответствующих им ссылок. Описывает участок изображения и ставит ему в соответствие ссылку одиночный тег .
Слайд 56MapHilight - динамическое выделение областей карты кликов (imagemap)
MapHilight обладает гибкими настройками
по кастомизации стилей регионов карты сайта. На практике это означает, что регионам можно задавать любые настройки бордеру (цвет, толщина, прозрачность) и заливки (цвет, прозрачность). Доступен параметр анимации - выделение заховеренной области может происходить с анимацией (ее скорость регулируется) или без нее.
Слайд 57Пошагово 1.Есть папочка 2.В ней картинка 3. Создали в папке index.html 4. Закинуть в
папку
5. Прописать в head
6. Пойти по ссылке http://htmlmapgenerator.ru/index.php 7. Загрузить свою картинку и выделить области
Слайд 588.Нажать «Сгенерировать XHTML» 9.Вставить в свій файл
Слайд 59Практика (дом.задание)
1. Создание резюме (HTML)
Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:
Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.
