Вы находитесь на странице: 1из 20

Знакомство. Повторение.

Знакомство. (5-10 мин)


Лгун
Необычный вариант знакомства старшеклассников – игра «Лгун».
Эта игра тоже поможет вам лучше узнать друг друга. Необходимо 5–8
человек. Подготовьте бланки в количестве, равном числу игроков. Бланки
должны содержать примерно такие вопросы:
– Самое далекое место, где мне удалось побывать, это – например, Шри
Ланка
– В детстве мне запрещали делать                   _____, а я все равно делал.
Рисовать на обоях.
– Мое хобби –                                   ____________. Бильярд
– Когда я был маленький, я мечтал стать                           . Стюардессой.
– У меня есть одна плохая привычка –              . Всегда говорить правду.

Листочки с этими вопросами раздаются каждому игроку, и каждый


должен заполнить их, отвечая правдиво на все вопросы, кроме одного. То
есть один ответ будет неправильным, ложным.
Когда все заполнят свои анкеты, игроки начинают по очереди читать
вслух свои ответы. Задача остальных игроков угадать, какой из ответов
игрока ложный. Пусть они запишут их вариант на противоположной стороне
их анкет. Узнайте номер ложного ответа и присудите очко всем угадавшим
ложный ответ. Выигрывает тот, кто набрал больше всех очков.
Правило: обязательно необходимо назвать свое имя, и спрашивающие
начинают вопрос с имени выступающего участника.
Актуализация. (15-20 мин)
Видео топ 10 самых востребованных профессий будущего
После просмотра видео распределить между учениками профессии , по
желанию. (Для практического задания – создать сайт по профессии)
Профессии сферы ИТ. Если зайти на сайт ворк.юа, то мы можем
видеть, что вакансий в сфере ИТ больше всего. (Просмотр первых 2-3
страниц сайта, выборочно открытие вакансий, просмотр требований к
соискателям).
Вопросы:
Какие профессии в сфере ИТ вы знаете?
Где вы можете применить свои знания?

Мозговой штурм. (5-7 мин)


Качества программиста (Какими качествами или навыками должен
обладать программист). (Аналитический склад ума, разносторонность
мышления… )
Какие программы должен знать программист. (HTML,CSS,
Jscript+JQvery + фреймворки, PHP, MY SQL)
Итог: идеальный программист (образ идеального программиста).
По дааным сайта Stack Overflow и собственному опыту, я хотела бы
набросать портрет современного программиста.
Презентация «»Образ современного программиста». (5 -7 мин)
Возраст. Программисты сегодня – это молодое поколение, и возраст
большинства колеблется в рамках от 20 до 29 лет; чуть меньше тех, кому от
30 до 34. (2 слайд)
Это и не удивительно: программирование – довольно молодая
профессия, которая стала набирать обороты в последние десять лет. Вот как
раз сейчас работает первое и второе поколение программистов, которые
пошли массово постигать азы данной профессии. 
Пол. Как и следует ожидать, большинство программистов – это
мужчины. Если верить опросу, который прошел на сайте Stack Overflow, то
их 92% от общего числа.(3 слайд)
 Место жительства. Где живет больше всего представителей этой
уникальной профессии – можно посмотреть на карте на слайде.(4 слайд)
Опыт работы. В труде программиста опыт – это очень важно. Знания
и сухая теория не всегда могут помочь решить некоторые задачи.
Как оказывается, в среднем современный программист имеет опыт
работы от двух до пяти лет. (5 слайд)
 Языки. Что касается популярных языков программирования, то
картина на сегодняшний день выглядит довольно предсказуемо. Самый
популярный язык – это JavaScript, немного уступают ему SQL и Java. (6
слайд)
Что касается самого обожаемого языка, попробовав покодить на
котором, хочется еще и еще – им оказался относительно новый Swift. А вот
наиболее презираемые – это Visual Basic и блог-платформа WordPress.

 
 Текстовый редактор. Больше всего программисты всего мира
доверяют NotePad++ для написания кода. (7 слайд) 
Кофеин. Как и многие люди, работающие за компьютером,
программисты пьют много кофе. При этом те разработчики, которые живут в
северных странах, употребляют его намного больше, чем остальные. В
среднем программист выпивает около двух чашек кофе в день. 
Работа. Среди программистов на самом деле очень много студентов,
которые только учатся и подрабатывают кодингом (и не обязательно
добываемая ими профессия с этим связана). Большинство разработчиков
позиционируют себя как «специалисты широкого профиля», один вопрос –
являются ли они такими на самом деле. (8 слайд) 
 Так каков образ современного программиста? (9 слайд) 
Это молодой мужчина, которому около 30 лет, живущий в Индии или
США, не имеющий специального образования и занимающийся кодингом
около трех лет. Он пишет на JavaScript, и использует для этого NotePad++. На
его компьютере установлена Windows 7, он не может включиться в работу
без чашечки крепкого кофе, а свободное от работы время занимается
«левыми» разработками, скорее всего, разрабатывает мобильные приложения
для ОС Android.
Узнали кого-то из своих знакомых или самого себя? Поздравляю, ваш
друг или же вы сами – специалист широкого профиля, представитель
уникальной и очень популярной сегодня профессии.

GOOGLE.
Создать аккаунт на гугл. Написать мне сообщение на адрес
velka8273@gmail.com.

Презентация Введение в HTML

Что такое веб-браузер?


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

Вопрос: Какие браузеры вы знаете?


Вопрос: ГДЕ МОЖНО ВСТРЕТИТЬ БРАУЗЕР?

— Приложение на вашем ноутбуке (Chrome, Firefox, Safari, Opera).


— Приложение на вашем смартфоне (ChromeApp, SafariApp).
— Браузер может быть встроен в другое приложение (например, в
почтовый клиент).
— Браузер также может быть встроен в часы, телевизор, платежный
терминал, банкомат, автомобиль, холодильник.
Поэтому веб-технологии так популярны. Они везде.
Вопрос :ЧТО ТАКОЕ URL?

Вы сообщаете браузеру, что отобразить, указав адрес документа в


формате URL.
URL (Uniform Resource Locator) — единый указатель ресурса, в общем
виде выглядит так: <протокол>://<хост>/<путь>
— Протокол — «язык», на котором общаются браузер и сервер.
— Хост — адрес или имя сервера, у которого мы запрашиваем
документ.
— Путь — адрес расположения документа на сервере.
Пример ссылки: http://maub.zp.ua.

Вопрос: ЧТО ДЕЛАЕТ БРАУЗЕР?


1. Формирует и отправляет запрос на сервер — HTTP.
2. Получает ответ сервера — HTTP.
3. Разбирает полученный документ — HTML.
4. Рисует и отображает полученный документ в окне — HTML и CSS.
5. Реагирует на действия пользователя — CSS и JavaScript.
Вопрос: НА КАКОМ ЭТАПЕ УЧАСТВУЕТ
ВЕРСТАЛЬЩИК?
1. Как сервер отвечает на запросы, определяет backend-программист.
2. На этапе разбора и отрисовки документа верстальщик сообщает
браузеру, что, где и как отобразить на странице.
3. На этапе обработки действий пользователя участвует frontend-
программист.
Большинство документов имеют стандартные элементы, такие, как
заголовок, параграфы или списки.
Используя тэги HTML вы можете обозначать данные элементы,
обеспечивая WEB-броузеры минимальной информацией для отображения
данных элементов, сохраняя вцелом общую структуру и информационную
полноту документов. Все что необходимо, чтобы прочитать HTML-
документ - это WEB-броузер, который интерпретирует тэги HTML и
воспроизводит на экране документ в виде, который ему придает автор.
Семантика или структура документа
ВЕБ-СТРАНИЦА — ЭТО ИНФОРМАЦИЯ
Веб-страницы, в первую очередь, должны представлять информацию в
удобном виде.
Давайте подумаем, из чего она состоит?

ЧТО МЫ ВИДИМ В КНИГАХ, ЖУРНАЛАХ,


ГАЗЕТАХ
— текст, разбитый на абзацы;
— заголовки разных уровней;
— иллюстрации;
— цитаты;
— акценты по тексту.
Все это — хорошо известные вам элементы. И они существовали
задолго
до появления интернета. И ЭТО НЕ ПРО ОФОРМЛЕНИЕ
Их внешний вид может отличаться в различных источниках. Но суть от
этого не меняется. Вы с первого взгляда определите заголовок в новой
книге.
ЗАДАЧА БРАУЗЕРА
Именно такую информацию браузер должен уметь правильно
представлять на экране.
И значит, нам необходимо сообщить ему, что
является заголовком,
абзацем,
где сделать акцент
и когда должна следовать иллюстрация.
HyperText Markup Language (HTML) является стандартным
языком, предназначенным для создания гипертекстовых документов в среде
WEB. HTML-документы могут просматриваться различными типами WEB-
броузеров.
Когда документ создан с использованием HTML, WEB-броузер может
интерпретировать HTML для выделения различных элементов документа и
первичной их обработки. Использование HTML позволяет форматировать
документы для их представления с использованием шрифтов, линий и других
графических элементов на любой системе, их просматривающей.
Цели создания HTML
— Cоздавался как язык для обмена научной и технической
документацией.
— Пригодный для использования людьми, не являющимися
специалистами в области вёрстки.
— HTML был задуман и создан как средство структурирования и
форматирования документов без их привязки к средствам
воспроизведения.
ОСОБЕННОСТИ HTML
— Просто текст в HTML-документе браузер никак не форматирует.
— Переносы строк заменяет на пробел.
— Несколько подряд идущих пробелов показывает как один.
— Для разметки используются специальные метки, которые
обозначают
начало и конец абзаца, заголовка и все остальные элементы.
— Чаще всего их называют тегами.
— Набор тегов ограничен, и у каждого из них своя роль.
СТАНДАРТИЗАЦИЯ
— Стандарт поддерживается Консорциумом Всемирной паутины W3C.
— В стандарт как раз входит допустимый набор тегов, их роль, и
прочие
особенности их использования.
— Текущая версия стандарта HTML — 5.1
— Все браузеры стараются обеспечить максимальную поддержку
актуальному стандарту.
Вёрстка веб-страниц — создание структуры
html-кода и описание стилей, размещающих
элементы веб-страницы (изображения, текст и
так далее) в окне браузера, согласно
разработанному макету, таким образом, чтобы
элементы дизайна выглядели аналогично
макету.
— Википедия
HTML-ТЕГИ
— Теги в HTML заключены в угловые скобки < и > .
— Нам привычнее их называть символами «меньше» и «больше».
— Между угловыми скобками записывается название тега.

Теги HTML — являются основной частью языка HTML.

Схема HTML-тега, выглядит следующим образом:

Схема парного тега:

<имяТега> </имяТега>

Схема одиночного тега:

<имяТега>

Иногда в HTML тегах устанавливают атрибуты со значениями:

<имяТега атрибут="значение"> </имяТега>


<имяТега атрибут="значение">

Где имяТега — это h1, p, b, img, a, table и др.

Виды (категории) HTML-тегов


Теги делятся на несколько видов. Я их разделил на десять категорий, в других учебниках
количество категорий может различаться:

1. Парные теги,
2. Одиночные теги,
3. Блочные теги,
4. Строчные теги,
5. Новые теги HTML5,
6. Устаревшие теги,
7. Нестандартные теги,
8. Теги верхнего уровня (html, head и body),
9. Теги головы HTML-документа,
10. Семантические теги.

Один и тот же тег, может одновременно принадлежать нескольким категориям, например


тег <small> </small> относится к следующим видам: парный, строчный, семантический.

Рассмотрим каждый вид по отдельности.

Парные теги
Парные теги имеют открывающий и закрывающий тег, перед именем закрывающего тега
ставят знак слэш (косая черта) /

Вот небольшой список парных тегов:


<h1> </h1> — заголовок,
<p> </p> — абзац,
<b> </b> — жирный шрифт.

Одиночные теги
Одиночные теги не имеют закрывающего тега.

Вот небольшой список одиночных тегов:


<img> — изображение,
<br> — перенос строки,
<input> — элемент формы.

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

Вот небольшой список блочных тегов:


<h1> </h1> — заголовок первого уровня,
<p> </p> — абзац,
<table> </table> — таблица.

Строчные теги
Строчные теги — это теги в начале и в конце которых НЕ ставится перенос строки.

Вот небольшой список строчных тегов:


<b> </b> — жирный шрифт,
<i> </i> — наклонный шрифт,
<input> — элемент формы.

Новые теги HTML5


Новые теги HTML5 — это теги, которые появились в спецификации языка HTML5.
Вот небольшой список новых тегов:
<article> </article> — основной контент страницы,
<canvas> </canvas> — замена флеш-технологии,
<video> — видео-файл.

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

Вот небольшой список устаревших тегов:


<big> </big> — увеличивает размер шрифта на единицу,
<font> </font> — форматирует текст,
<isindex> — поисковая строка.

Нестандартные теги
Нестандартные теги — это теги, которые не поддерживаются ни одной спецификацией
HTML, но некоторые браузеры их понимают.

Вот небольшой список нестандартных тегов:


<bgsound> — проигрывает музыку при открытии страницы,
<blink> </blink> — мигающий текст,
<marquee> <marquee> — бегущая строка.

Теги верхнего уровня


Теги верхнего уровня — это теги отвечающие за создание HTML-документа, их всего три:

<html> </html> — начало и конец HTML-документа,

<head> </head> — голова HTML-документа,

<body> </body> — тело HTML-документа.

Теги головы HTML-документа


В голове HTML-документа, между тегами <head> </head>, обычно находятся теги
отвечающие за описание страницы, за подключение внешних файлов и др., они не видны
пользователю. Единственный тег головы, который видит пользователь, это тег title.

Вот небольшой список тегов головы HTML-документа:


<link> — подключает внешние файлы .css, .xml, .ico,
<meta> </meta> — мета-теги,
<title> </title> — название страницы,
<style> </style> — внедряет CSS-код в страницу,
<script> </script> — загружает внешний JavaScript-файл .js, также между этими тегами
может размещаться JavaScript-код.
Семантические теги
Семантические теги — это теги которые предназначены для того, чтобы компьютерные
программы (поисковые системы, сборщики информации, речевые браузеры и т.д.),
понимали смысл заложенной в них информации.

Вот небольшой список семантических тегов:


<article> </article> — обрамляют основной контент страницы,
<blockquote> </blockquote> — обрамляют цитаты взятыя из внешних источников,
<small> </smal> — обрамляет текст написанный мелким шрифтом в юридических
документах.

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

Физкультминутка
Повторення правил техніки безпеки.(5 мин)
Гра “Так – ні”.
- До комп’ютерного класу заходимо спокійно з дозволу вчителя.
- Біля комп’ютера сидимо рівно.
- Під час уроку ходимо по класу, коли забажаємо.
- Під час роботи в класі їмо фрукти.
- Ліпимо використану жуйку до столу.
- Без дозволу вчителя не приступаємо до роботи за комп’ютером.
- Рухаючи мишкою, голосно подаємо команди.
- Рукавом сорочки протираємо монітор комп’ютера;

Практическое задание на создание элементарной веб-страницы

 <! DOCTYPE html>


 <html>
 <head>
 <title> MY page!!!</title>
 </head>
 <body>
 Hello WORLD!!!!
 </body>
 </html>

С чего начинается HTML


Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с
".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан


начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так:
<!DOCTYPE HTML>

Эта строка поможет браузеру определить, как правильно интерпретировать данный


документ. В данном случае мы говорим браузеру, что HTML соответствует
международной спецификации версии 5.0 (это проверенная, но очень старая версия). Как
видно из примера, самый короткий html-документ состоит буквально из одной строки.

С чего начинается работа


Первым шагом давайте создадим простую структуру файлов для наших файлов.

 Создаем папку с названием нашего проекта, например Whitesquare.


 В ней создаем пустой файл index.html.
 В папке проекта создаем папку css с пустым файлом styles.css.
 В папке проекта создаем пустую папку images.

На самом деле одной строкой дело не обходится. После объявления версии и типа
документа необходимо обозначить его начало и конец. Это делается с помощью тега-
контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тегом
<HTML> и им же закрывается.

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа.
Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен
выглядеть ваш базовый HTML-файл перед началом работы:

<!DOCTYPE HTML>
<HTML>
    <HEAD>
    <TITLE>Заголовок документа</TITLE>
    </HEAD>
<BODY>
Текст документа
</BODY>
</HTML>

Если приведенный выше пример пояснить схематически, получится следующее:

Из схемы видно, что документ состоит из двух основных блоков – "заголовка" и "тела
документа". Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

Заголовок содержит "техническую" информацию о документе, хотя чаще всего


используется только для обозначения его названия (см. элемент TITLE).
Тело документа – святая святых. Именно в нем находится все то, что отображается на
странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших
HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

Практическое задание. Изменение вида страницы Теги р и атрибуты тега.


Атрибуты фона страницы в боди. Тег hr и атрибуты тега.

Создать билет зайца.

Теги HTML5, которые улучшат верстку для поисковой оптимизации сайтов

HTML5 уже давно анонсирован и используется многими. Теперь вместо <div


class="header"> можно писать просто <header> и поисковый робот будет понимать, что
здесь размещен заголовок страницы. Ниже список тегов и объяснение их значения.

<header> — заголовок

<article> — новость, статья, пост

<aside> — сайдбар, список рубрик

<figure> — блок с изображением и подписью к нему


<figcaption> — описание контента (подпись к изображению) в теге <figure>. Должен быть
первым или последним в блоке.

<footer> — подвал сайта. Имя автора, дата документа, контактная и правовая информация.

<hgroup> — группирование заголовков

<nav> — основная навигация по сайту, как правило главное меню

<section> — раздел документа. <section>может использоваться несколько раз внутри


одной статьи представляя её разделы. <section>может и должен содержать заголовки
<H2> или <H3>

<time> — помечает текст внутри тега <time> как дату

Семантическая структура для HTML5 страницы


DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
    <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">
    <meta name="description" content="Описание контента страницы, 1-2
предложения.">
</head>
<body>

Я добавил тег <meta name="keywords" content=""> который отвечает за ключевые слова.


И тег <meta name="description" content=""> который отвечает за описание страницы.
Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение
тега <title>. Title страницы должен быть уникальным для всего сайта, и содержать в
названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы
делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer
и т.д. По отображению они работают также как и обычные <div> теги, то есть это
блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и
другие — уже нужно использовать только осмысленно.

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом
h1.

<!-- Header страницы -->


    <header>
            <h1>Site title</h1>
    </header>

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

<!-- Header страницы -->


    <header>
            <h1>Site title</h1>
            <p>site slogan</p>
    </header>

Замечание по поводу тега H1

Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в
котором он находится (это может быть header, section, article и т.д.)

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4
на странице мог быть только один заголовок H1! Как правило это был заголовок статьи
или заголовок страницы (например если это страница рубрики на которой отображаются
несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи.
H3 для под разделов и так далее.

 
Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует
помнить что хорошей практикой считается оформлять навигацию элементами списка.

<!-- Главная Навигация по сайту -->


    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </nav>

Контент на странице

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

Представляет собой основной контент. Отличие этого тэга от старого доброго body в том,
что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть
уникальное.

Тэг main не является структурным тэгом и никак не влияет на разметку страницы. Он


также не может входить в состав других структурных тэгов: article, aside, footer, header или
nav в силу своей уникальности. И так же, как и другие новые тэги, он не воспринимается
браузерами, как блочный элемент, поэтому это свойство ему нужно задавать
принудительно в файле CSS:

main {display:block;}

<!-- Основное содержимое страниц -->


<main>
        
...основной контент страницы...

</main>

Оформление статьи

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

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи
задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом
time, который отображается как обычный inline элемент. У тега time есть специальный
аттрибут в котором время публикации должно быть задано в машинном формате. Это
может быть только дата datetime="2017-09-30" или с указанием часов минут и секунд
datetime="2017-09-30T15:25:55". Параметр pubdate указывает что статья была и
опубликована в то же время что и написана. Если это новость, то может быть такое что
время новости одно, а время публикации другое, для этого необходимо указать два раза
тег time, и поставить pubdate только в том теге где указано время публикации.

<main>
...
<!-- Статья -->
    <article>

        <!-- Шапка статьи если в шапке у нас больше чем заголовок -->
        <header>
        
            <!-- Заголовок статьи -->
            <h1>Article title</h1>
            
            <!-- Дата публикации статьи  -->
            <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time>
            
        </header>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo
quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae
aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?
</p>

        <!-- Подзаголовок страницы -->


        <h2>Article sub-title</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo
quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae
aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?
</p>
        
        <footer>
            <a href="#">Читать далее</a>
            <a href="#">Комментарии</a>
        </footer>

    </article>
...
</main>

Из примера выше видно, что внутри статьи были использованы теги header и footer чтобы
выделить заголовок и нижний колонтитул статьи.

Сайдбар или колонка с виджетами

В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути
навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки
социалок и пузомерки и т.д.).
Пузомерка (жаргонное выражение) – это сравнительный рейтинг, обуславливающий
выдачу веб-сайтов в установленной последовательности по какому-либо параметру. В
области SEO-оптимизации главными пузомерками выступают показатели ТИЦ и PR сайта
либо отдельной страницы: чем выше значения, тем больший вес приобретает ресурс при
ссылочном обмене или покупке ссылок. В рейтинге же Rambler Топ-100 ранжирование
сайтов происходит на основе данных о посещаемости заглавной станицы.

В основном пузомерки служат для развлечения и определения номинального лидерства,


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

ТИЦ (Тематический индекс цитирования) – показатель поисковой системы Яндекс,


предназначенный для определения авторитетности сайтов путём подсчёта количества
ссылающихся на него ресурсов сходной тематики. Используется для оценки
релевантности (степени соответствия поисковым запросам) сайтов в Яндекс.Каталоге, что
позволяет определить значимость того или иного проекта.

PR

PageRank (PR) – дословно переводится с английского как “ранг страницы”. Условно


говоря, это оценка, которую поисковая система Google ставит сайту в целом и его
отдельным страницам. Оценивается сайт по десятибальной системе и в принципе
отражает “отношение” поисковика к сайту : чем выше оценка, тем выше “уважение”
Google к сайту, тем выше сайт будет стоять в выдаче. Система оценок PageRank также
позволяет оценивать сайты относительно друг друга: у кого выше оценка, тот и
авторитетнее. В принципе, PageRank это своеобразный индекс цитирования сайта,
разработанный Google, также, как ТИЦ, который присваивает Яндекс.

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок
оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

<!-- Сайдбар -->


<div class="sidebar">

        <!-- Виджет в сайдбаре -->


        <aside>
            <h1>Widget title</h1>
            ...
        </aside>

        <!-- Виджет в сайдбаре -->


        <aside>
            <h1>Последние записи</h1>
            ...
        </aside>

        <!-- Виджет в сайдбаре -->


        <aside>
            <h1>Популярные комментарии</h1>
            ...
        </aside>
        
</div>
 

Тег section

Тег section — используется для представления группы или секции тематически


связанного контента. Его использование похоже на article с главным отличием в том что
допускается отсутствие смысла содержимого внутри элемента <section> вне контекста
самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы
секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы
каждый параграф обернуть в тег <section>. Например тегом section можно выделять
блоки контента на лендинге. Звучит похоже на определение div элемента, который часто
используется как контейнер для контента. Разница в том что div не имеет семантического
значения, и он не говорит не о чем про контент находящийся внутри него. Тег section,
наоборот используется чтобы четко показать что контент внутри него связан по смыслу.
Вы можете заменить некоторые свои div теги на section, но всегда отвечайте себе на
вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

<h1>An Event Apart</h1>

<section>

    <header>
        <h2>Cities</h2>
    </header>
    <p>Join us in these cities in 2017.</p>
    
<section>
        <header>
            <h3>Seattle</h3>
        </header>
        <p>Follow the yellow brick road.</p>
    </section>

    <section>
        <header>
            <h3>Boston</h3>
        </header>
        <p>That's Beantown to its friends.</p>
    </section>

    <section>
        <header>
            <h3>Minneapolis</h3>
        </header>
        <p>It's so <em>nice</em>.</p>
    </section>

</section>

<small>Accommodation not provided.</small>

 
hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.
Например, главный заголовок всей страницы H1 и описание к ней, оформленное тэгом H3.
На странице в дальнейшем еще несколько раз могут использоваться тэги H3 для других
целей. Чтобы логически отделить описание страницы от других тэгов H3, мы его
объединяем с главным тэгом H1 в группу, которая и обозначается тэгом hgroup:

<hgroup>
<h1>Самый сайт</h1>
<h3>Здесь описание Самого сайта</h3>
</hgroup>

figure — теперь для подписи и заголовков к картинкам не нужно городить огород из кучи
блочных и строковых тэгов, а достаточно воспользоваться элегантными тэгами figure и
figcaption. Выглядеть это может так:

<figure>
<img src=kartinka.jpg alt="">
<figcaption>
Красивая картинка
<small>рисовал не я</small>
</figcaption>
<figure>

Здесь figure означает блок с картинкой и текстом к нему, а figcaption служит


одновременно и заголовком и описанием. Чтобы отделить описание от заголовка, его
поместили в тэг small, который в HTML5 теперь просто означает «мелкий текст» и нужен
для всякой служебной инфы, не являющейся по сути контентом.

ime — позволяет однозначно кодировать время и дату по грегорианскому календарю с


учетом всех возможных смещений часовых поясов. Состоит данный тэг из т.н.
«считываемой» части и контентной. Что это значит?

Рассмотрим пример:

<time datetime=2017-09-27>27 сентября 2017</time>

Здесь атрибут datetime со значением 2017-09-27 и является считываемой частью, которую


считывает как браузер, так и всевозможные агрегаторы. На основе этих данных они могут,
например, занести в календарь пользователя определенную дату или создавать временные
шкалы с указанием точек-событий. А вторая часть (контентная) — это то, что видит
пользователь на экране. Если запись и там и там должна быть одинаковая (например,
время в формате 24-часовом), то можно ограничиться вот такой записью:

<time>11:00</time>

Данный тэг может иметь расширенный вариант, в котором указана как дата и время, так и
часовой пояс. Чтобы показать одновременно дату и время необходимо между ними
вставить префикс в виде латинской буквы Т. При этом необходимо указывать часовой
пояс: либо буквой Z (всемирное время), либо смещением относительно всемирного
времени на нужное число с соответствующим знаком + или —

<time datetime=2017-09-27Т11:00Z>

или
<time datetime=2017-09-27Т11:00+02:00>

Есть у этого тэга еще один дополнительный параметр, который выглядит как pubdate и
прописывается после атрибута datetime таким образом:

<time datetime=2017-09-27Т11:00z pubdate>

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

video — служит для простой вставки видео на страницы сайта. То есть, код вставки может
быть до безобразия простым:

<video src=kinoshka.ogv></video>

можно добавить либо автозапуск (autoplay), либо элементы управления (controls)/

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

Также можно добавить размеры окна проигрывателя в пикселах и картинку-заставку


(poster). Выглядеть это может так:

<video src=kinoshka.ogv width=600 height=400 poster=kinoshka.jpg


controls></video>

audio — также, предназначен для простой вставки медиа-контента на страницы сайта. На


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

<audio src=pestnya.ogg controls></audio>

Все это замечательно, конечно, но на данный момент времени все упирается в кодеки.
Разные браузеры поддерживают разные кодеки: Opera и FF — ogv и ogg, Safari — H.246 и
MP3, а Google Chrom — и тех и других. Поэтому сейчас приходится на сайте прописывать
несколько вариантов файлов и использовать для этого специальный тэг source. Пример:

<video controls>
<source src=kinoshka.ogv type='video/ogg; codecs="theora, vorbis"'>
<source src=kinoshka.mp4 type='video/mp4; codecs="avcl.42E01E, mp4a.40.2"'>
</video>

canvas — попросту говоря, рисовалка на сайте. Хоть графики, хоть каляки-маляки всякие
в духе MS Paint. Элемент canvas предоставляет посетителям сайта интерфейс для
двумерного рисования: линии, заливки, формы, текст и пр. Вот отличный пример —
Harmony.

По умолчанию тэг canvas создает на странице невидимую область размерами 300 на 150
пикселей. Размеры, разумеется, можно переопределить.
Чтобы начать рисовать, не достаточно просто прописать этот тэг. Нужен еще
специальный JavaScript:

<canvas width="600 height=400></canvas>


<script type="text/javascript">
var ctx = document.querySelector('canvas')
getContext('2d');
ctx.fillRect (10, 20, 50, 50);
</script>

Эта жуткая на вид штука нарисует на площадке 600х400 пикселей квадрат со сторонами
50х50 пикселей. первые два значения (10 и 20) это соответственно координаты x и y
верхнего левого угла квадрата.

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

Подвал сайта — Footer

Подвал сайта оформляется тегом <footer>

Может располагаться имя автора, дата документа, контактная и правовая информация

<!-- Подвал сайта -->


<footer>
        <p class="copyright">© 2017 Rightblog.ua Copyright</p>
</footer>

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner. Он


показывает структуру страницы блокам и заголовкам.

Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но


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

В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы
для оформления и структуризации данных, например, такие как schema.org

 Важное замечание по использованию HTML5 тегов. В спецификации не указаны


жесткие правила по использованию семантических тегов, указаны лишь рекомендации по
их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег
использовать, лучше используйте div — чтобы не навредить и не нарушить структуру
документа.

Физкультминутка.
Практическое задание.

Задание творческое, создать сайт из 4-х страниц. Задание в презентации к занятию.

Подведение итогов урока.

Рефлексия.

Домашнее задание.

Вам также может понравиться