СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ
Благодаря готовым учебным материалам для работы в классе и дистанционно
Скидки до 50 % на комплекты
только до
Готовые ключевые этапы урока всегда будут у вас под рукой
Организационный момент
Проверка знаний
Объяснение материала
Закрепление изученного
Итоги урока
календарное планирование по web-дизайну
АНО ПО «Ипатовский академический многопрофильный колледж»
Учебно-методический комплекс преподавателя
Радченко Александра Валерьевича
По дисциплине
«Создание сайтов и web-дизайн»
Руководитель цикловой комиссии естественно-математических дисциплин
| Кузнецов В.Н. |
Подпись Ф.И.О
Календарное планирование по дисциплине «Создание сайтов и web-дизайн»
наименование разделов и тем | количество часов | вид контроля | Дата проведения занятия | ||
планируемое | фактическое | ||||
раздел 1. Основы гипертекстовой технологии | |||||
1. история Интернета | 1 | тест |
|
| |
2. front-end и back-end разработка | 1 | тест |
|
| |
3. Общий вид web-страницы | 1 | тест |
|
| |
Раздел 2. Структура Web-страницы | |||||
1. Раздел «head» web-страницы | 1 | практическая работа |
|
| |
1.1. Метатеги html | 1 | практическая работа |
|
| |
2.Раздел «body» web-страницы | 1 | практическая работа |
|
| |
2.1. шрифты в html. Текстовые эффекты | 1 | практическая работа |
|
| |
2.2. Медиаобъекты на web-cтранице | 3 | практическая работа |
|
| |
2.3. Формы в html | 1 | практическая работа |
|
| |
3. Оформление web-страницы средствами CSS | |||||
3.1. Что такое CSS | 1 | практическая работа |
|
| |
3.2. селекторы и свойства CSS | 1 | практическая работа |
|
| |
4. Элементы SEO | |||||
4.1. Что такое SEO | 1 | тестирование |
|
| |
4.2. сервисы подбора ключевых слов | 1 | практическая работа |
|
| |
4.3. Составление описания web-страницы | 1 | практическая работа |
|
|
Темы практических занятий
Практическая работа №1. Тема «Структура HTML-документа. Создание web-страницы».
Цель: научиться создавать простейшие HTML-документы, разбивать текст на абзацы, выполнять выравнивание различными способами, просматривать содержимое web-страниц с помощью Web-браузера.
Теги – определенные последовательности символов, заключенные между знаками
HTML-документ – все, что заключено между тегами html и html.
Структура html-документа
Заголовок находится между тегами title и title и появляется в верхней рамке окна программы просмотра.
Тело web-страницы находится между тегами body и body
Задание 1.
1. Откройте текстовый редактор Блокнот.
2. Введите в окно программы следующий текст:
Моя web-страница.
pПривет! Это моя web-страничкаp
body
html.
Сохраните текст в формате html.
Задание 2. Форматирование текста.
1.Для форматирования текста используются следующие группы тегов:
h1…h5 - задают размеры текста
, , , , , , , ,
code, kbd, samp, var, pre - задают внешний вид текста
Оберните слово «привет» тегами em, а слово страничка – тегами strong.
2. Для изменения цвета шрифта используется тег font-color. Цвет шрифта задается либо английскими названиями, либо шестнадцатеричными кодами. Например, font-color=#ADFF2F позволяет сделать текст салатовым, а font-color=#FF0000 - ярко красным. Шестнадцатеричную таблицу цветов можно посмотреть, например, здесь - https://basicweb.ru/html/html_colors.php
Введите в web-страницу текст «Каждый охотник желает знать, где сидит фазан». Слово «Красный» сделайте красным, «охотник» - оранжевым, «желает» - желтым, «знать» - зеленым, «где» - голубым, «сидит – синим и «фазан» - фиолетовым.
Практическая работа №3. Таблицы в html.
Тег создания таблиц в html - table. Cоздание строк таблицы - tr. Ячейки создаются тегом
Давайте создадим новую страницу в html. Представим, что мы должны создать телефонную книгу для сайта. Для красоты оформим ее в виде таблицы. Итак, в нашей телефонной книге будут следующие записи:
Мама +79605870400
Папа +79886581402
Сестра +79185542201
Тетя +78652348200.
Открываем «Блокнот» и вводим следующий код (пояснения в скобках не вводим!):
телефонная книга
body
table (этим тегом мы сообщаем браузеру, что дальше данные представляются в форме таблицы)
td папаtd
tdсестраtd
tdтетяtd
tr
Второй ряд создаем самостоятельно!
Форматируем текст (см предыдущую работу) следующим образом: Имена выделяем жирным шрифтом, телефоны курсивом.
Практическая работа №4. Создание интерактивных элементов управления web-страницей.
К интерактивным элементам пользовательского интерфейса сайта относят выпадающие списки, кнопки, радиокнопки, текстовые поля.
Подобные элементы создаются с помощью тега input. Например, input type=”submit” создает кнопку отправки на сайт введенной пользователем информации. Ввод текста организуется атрибутом “text”. Выпадающий список организуется атрибутом «select», опции списка атрибутом option, a радиокнопка, которая позволяет пользователю выбрать один из нескольких предопределенных вариантов – тегом “radio”. Для создания многострочного поля ввода используется тег text area
Давайте сделаем страницу интерактивной, то есть взаимодействующей с пользователем.
Под текстом из лабораторной работы №1 введите: «Выберите цвет». Под текстом введите
select
red
orange
yellow
green
blue
purple
Выбор одного из нескольких вариантов используем радиокнопку (см. рис)
Радиокнопка создается тегом input type=”radio”
А таким тегом создадим кнопку «Отправить»
Если Вы бывали на web-сайтах серьезных компаний, Вы наверняка обращали внимание и на такие формы:
Такие формы помимо кнопок и радиокнопок обязательно содержат поля для ввода произвольного текста. В html одно- и многострочные поля ввода создаются различными тегами. Для создания однострочного поля ввода используется тег input type=”text”. То, что он создает, представлено на рис. Ниже:
Задание.
Проверьте, что получится при вводе тега input type=”password”
А при вводе тега input type=”reset”?
А если ввести тег
Многострочная форма ввода текста создается с помощью тегов textarea и textarea. На рисунке «Анкета» многострочная форма ввода представлена полем «Комментарий».
Тег textarea может иметь следующие атрибуты:
accesskey - Переход к полю с помощью сочетания клавиш.
- Автоматическое получение фокуса
cols - ширина поля в символах
disabled - блокирует изменения элемента
form - связывает текстовое поле с формой по ее идентификатору
maxlenghth - максимальное число введенных символов
name имя поля. Служит для идентификации формы
- замещающий текст
- блокирует изменение поля пользователем
required - обязательное для заполнения поле
rows - высота поля в строках
tabindex -порядок перехода между элементами при нажатии на клавишу tab
- параметры переноса строк
Задание
Создать форму для обратной связи, включающую в себя комбинацию одно- и многострочных полей ввода, кнопок и радиокнопок. Сохранить работу в html формате. Показать работу преподавателю.
Практическая работа №5 Элементы CSS
Аббревиатура CSS расшифровывается как Cascade Style Spreadsheets – Каскадные Таблицы Стилей. То есть, будучи указанным в одном месте, элемент сохранит свое форматирование на протяжении всей страницы.
Каскадные таблицы стилей выглядят примерно следующим образом:
Они состоят из названия тега, к которому применяется данная таблица и набора селекторов, определяющих поведение тега.
Font – теги, указывающие свойства текста:
Family – определяет начертание текста
Size – определяет размер текста
Сolor – цвет текста.
Задание. Измените CSS-свойства в прошлой работе
Практическая работа №6. Элементы поисковой оптимизации в Web-дизайне.
Большинство пользователей ищут в сети конкретную информацию, например, «купить красивые тапочки». Такой человек заходит в сеть и открывает первые пять-десять сайтов из поисковой выдачи. Следовательно, сайт, продающий красивые тапочки, должен выдаваться на самом верху поисковой выдачи. Этим занимается поисковая оптимизация. Поисковая оптимизация (англ. SEO – Search Engine Optimization – оптимизация для поисковых систем) – это комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей с целью увеличения сетевого трафика и последующей монетизации этого трафика).
На SEO сайта влияют следующие факторы:
1. Использование ключевых слов в теге title
2. Качество и релевантность внешних ссылок.
3. Общая ссылочная популярность сайта – количество и качество входящих ссылок
4. Релевантность текста сайта ключевым словам
5. Уникальность контента сайта
6. Взвешенный и тематический индекс цитирования сайта Яндекс. Тематический индекс цитирования (ТИЦ) – определение авторитетности сайта с учетом ссылок на него с других ресурсов. Взвешенный индекс цитирования определяется для каждой из страниц сайта.
7. Участие в ссылкообменных схемах
8. Слишком большая плотность ключевых слов («тошнота» страницы)
9. Тематическая релевантность входящих ссылок
10. Слишком большое время ответа сервера
11. ключевые слова в заголовках.
Для подбора ключевых слов используются специализированные web-сервисы. Одним из наиболее популярных в России является wordstat от Яндекс. Сервис позволяет подбирать наиболее популярные ключевые слова, в том числе, по регионам поиска.
Практическое задание
В сервисе Яндекс wordstat проверьте популярность запроса с названием колледжа. Выпишите отдельно статистику по всем видам устройств, с которых производились запросы.
Тестовые задания на сайте https://testua.ru/informatika/1179-testy-po-html-s-otvetami.html
1. О чем говорит тэг
…
?- Текст, заключенный в тэг, будет расположен по центру страницы
- Текст, заключенный в тэг, будет расположен по левому краю страницы
+ Текст, заключенный в тэг, будет расположен по центру страницы
2. Какие единицы измерения могут использоваться для атрибута ширины?
+ Пиксели и %
- Миллиметры и сантиметры
- Пиксели и миллиметры
3. Использование тэга … позволяет добавлять одну строку текста без начала нового абзаца.
-
+
-
4. Объясните смысл кода, представленного ниже:
+ Будет создана таблица, состоящая из 1 ряда и 3 колонок
- Будет создана таблица, состоящая из 3 рядов и 1 колонки
5. Напишите код HTML, который бы создавал кнопку отправки заполненной формы. Имя кнопки – ОК.
-
-
input type="submit" value="OK"
+
6. Какой тэг при создании страницы добавляет имя страницы, которое будет отображаться в строке заголовка в браузере пользователя?
+ …
- …
- …