Основные теги HTML

• Объясните три аспекта, которые должны быть учтены дизайнерской компанией при создании вебсайта.

• Объясните свойства формата XML в отличие от HTML.

Шаг первый: поставить цель

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

Шаг второй: определить целевую аудиторию

• Как только вы определились с целью, то должны понять, для кого создаётся сайт. Чёткий портрет целевой аудитории нужно составлять подробно и долго. Условимся, что вы знаете хотя бы пол, возраст, ценности, факторы, влияющие на принятие решения, и способы совершения целевого действия вашей аудитории.
• Например, так: «Наша аудитория — это 70% мужчин в возрасте от 18 до 25 лет. Они импульсивны, целевое действие хотят выполнить сразу, не вникая в контент».
• Эти данные будут учтены при разработке посадочных страниц с точки зрения маркетинга и дизайна.
• Распространённая ошибка на данном этапе — говорить, что ваш сайт создаётся для всех.

Шаг третий: показывать на сайте то, что хотят видеть пользователи

• На сайте пользователь должен найти ответы на свои вопросы. Если структура сайта создаётся на основе пользовательского спроса, то в будущем возникнет гораздо меньше проблем с поисковым продвижением и конверсией.
• Для создания структуры под поисковый спрос необходимо выяснить, как люди формируют поисковые запросы, относящиеся к вашей сфере деятельности.
• Пример. Вы решили разработать сайт, посвящённый кино, привлечь на него пользователей и монетизировать его через рекламу. По каким шаблонам запросов пользователи смогут найти этот сайт?

Разница между XML и HTML

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

Раздел 10.2A Создание сайта Раздел 10.2B HTML

Цели урока

• объяснять достоинства и недостатки различных методов разработки сайтов
• разрабатывать веб-сайт, используя CMS, WYSIWYG
• размещать графические объекты и анимацию на веб-странице
• объяснять структуру HTML-документа
• использовать НТМL-теги при разработке веб-страницы
• применять HTML-теги для вставки мультимедиа объектов на веб-страницу
• использовать гиперссылки для навигации по веб-ресурсу
• использовать CSS при разработке веб-страницы
• разрабатывать веб-страницу, используя блочную верстку

Критерии оценивания

• Описывать назначение каскадных таблиц стилей, с основными принципами оформления текста с помощью CSS ;
• Демонстрировать использование стилей на конкретных примерах оформления WEB-страниц.
• Использовать теги DIV и SPAN
• Использовать блочную верстку в своих веб-страницах

Тег

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

Объясните назначение CMS и WYSIWYG редакторов

Способ создания сайта

Назначение

CMS

WYSIWYG

• CMS (Сontent Management System - система управления содержимым/контентом) - это компьютерная программа или информационная система, которая используется для организации и обеспечения процесса по совместному созданию, управлению и редактированию содержимого сайта.
• WYSYWIG («What You See Is What You Get» — «что видишь, то и получишь») — свойство визуального редактора, в котором содержание в процессе редактирования выглядит похожим на конечный вариант веб-страницы.

Вставьте пропущенные этапы создания сайта c помощью CMS

• Установка CMS
• ­___________________________________
• Установка модулей
• Перенос на хостинг
• ____________________________________

• 2) Установка шаблона
• 5) Наполнение сайта

" width="640"

Дополните строку кода:

• ____ type="text/css"/

" width="640"

href="style.css" type="text/css"/

Рассмотрите код HTML и дополните его тегом стиля CSS для заголовка, текста и выделенного параграфа

• ________________________________________________
• ________________________________________________
• ________________________________________________
•  
• Заголовок

• Текст Текст Текст Текст Текст Текст Текст

• Параграф

• body {color:red;}
• h1 {color:#00ff00;}
• p.ex {color:rgb(0,0,255);}

, который можно использовать для вставки видео " width="640"

Запишите тег, аналогичный embed , который можно использовать для вставки видео

• Встроенный  
• Внутренний  
• Внешний  

Вопросы

• Встроенный  - с помощью атрибута style в элементах HTML
• Внутренний  - с помощью  элемента в  разделе
• Внешний  - с помощью внешнего файла CSS

• Внутренний CSS определяется в  разделе HTML-страницы внутри  элемента

• Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.
• С помощью внешней таблицы стилей вы можете изменить внешний вид всего веб-сайта, изменив один файл!
• Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в  разделе HTML-страницы:

• Внешнюю таблицу стилей можно записать в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением .css.
• Вот как выглядит "styles.css":

Вопросы

• Элемент является элементом уровня блока.
• Hello World
• Блочная верстка  является основной в среде веб-разработчиков. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

Индивидуальная работа

• Приметить к своим страницам все критерии и показать

• Использовал цветовую схему к тексту
• Использовал маркированный нумерованные списки
• Использовал форматирование шрифтов
• Использовал таблицу
• Использовал горизонтальных линий
• Использовал изображения, музыка, звук, видео, записи, фильмы, анимация
• Использовать атрибуты width и height
• Использовал бегущую строку
• Добавил в страницу текстовые ссылки
• Добавил в страницу рисунок ссылка.
• Написал код для добавления видео из ЮТУБ
• Использовал файл .css
• Описал в файле .css не менее 5 селекторов (включая и )
• Выполнил подключение к файлу css во всех документах html
• Использовал теги и в файлах .html

Рефлексия.