Sintez. Education center

Преподаватели
Алексей Краснов - преподаватель программирования
Александр Федерягин - ведущий разработчик Sintez Corp.
Анастасия Кузнецова - frontend разработчик Sintez Corp.
Глеб Булыкин - Генеральный директор Sintez Corp.
Александр - онлайн координатор в Костроме

Контакты
1
Номер группы
https://vk.com/sintezadv - Александр, поддержка онлайн
https://vk.com/1group_coding_K - сообщество 1-й группы
http://sintez.pw/pay - страница онлайн оплаты

ЗАНЯТИЕ №1
Введение
Форматирование текста
Теги
Атрибуты
Строение web-страницы

Online компилятор
http://codepen.io/pen/

Форматирование текста
Заголовки
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовки 4-6 уровня
Форматирование текста
Жирный текст
Важный
текст
Курсивный текст
Акцент в тексте
Подчеркнутый
Выделенный
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовки 4-6 уровня
Жирный текст
Важный текст
Курсивный текст
Акцент в тексте
Подчеркнутый
Выделенный

Абзац (p)
Определяет текстовый абзац. Является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой, т.е. расстоянием между абзацами. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
Атрибут тэга:
align - Определяет выравнивание текста.
- выравнивание по левому краю
- выравнивание по правому краю
- выравнивание по центру
- выравнивание по ширине

Оформление текста
текст
Color - устанавливает цвет текста
Face - определяет гарнитуру шрифта
Size - задает размер шрифта
Первое
слово крупнее и выделено красным цветом
Компания
Google
подвела итоги года

HTML
(от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине.

Теги
<ТЭГ> - обозначение начального (открывающего) тэга
- обозначение конечного (закрывающего) тэга <ТЭГ /> - одиночный тэг
Текст, между начальным и конечным тегом, отображается и размещается в соответствии со свойствами, указанными в начальном теге.
Элемент - текст, заключённый между начальным и конечным тегом, включая и сами эти теги
Содержание - текст между тегами

Атрибуты тега
У тега могут быть свойства, называемые атрибутами, дающие дополнительные возможности форматирования текста. Они записываются в виде сочетания: имя атрибута-значения, причём текстовые значения заключаются в кавычки.
<ТЭГ атрибут=”значение”>
пример

Структура web-страницы
- декларация версии HTML (здесь, HTML - 5)
- начало страницы
- начало “головы” страницы
- окончание “головы” страницы
- начало “тела” страницы
- окончание “тела” страницы - окончание страницы

Head
“Голова” сайта, не отображается, содержит основные параметры и настройки страницы.
Название страницы charset="utf-8"> - кодировка страницы
Распространенные кодировки
windows-1251 - однобитовая кириллическая кодировка, выходит из употребления, состоит из 255 знаков
utf-8 - позволяет работать одновременно с несколькими языками, т.е. выдавать тексты, в которых используются символы разных алфавитов и даже иероглифы

Body
“Тело” сайта - предназначено для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Тег также применяется для определения цветов ссылок и текста на веб-странице

Атрибуты Body
alink - Устанавливает цвет активной ссылки.
background - Задает фоновый рисунок на веб-странице.
bgcolor - Цвет фона веб-страницы.
bgproperties - Определяет, прокручивать фон совместно с текстом или нет.
bottommargin - Отступ от нижнего края окна браузера до контента. leftmargin - Отступ по горизонтали от левого края окна браузера до контента.
link - Цвет ссылок на веб-странице.
rightmargin - Отступ от правого края окна браузера до контента. scroll - Устанавливает, отображать полосы прокрутки или нет.
text - Цвет текста в документе.
topmargin - Отступ от верхнего края окна браузера до контента. vlink - Цвет посещенных ссылок.

Теги br и hr
Заголовки
До переноса
После переноса
Одиночный тег
для переноса строки. 2 тега
добавляет пустую строку
Одиночный тег
добавляет горизонтальную разделительную линию

Цитаты
Заголовки
выделение длинныx цитат из нескольких строк/абзацев
короткие цитаты из одной строки
источник цитаты

Списки
Неупорядоченный список
Пункт 1
Пункт 2
Пункт 3
Упорядоченный список
Пункт 1
Пункт 2
Пункт 3

Многоуровневые списки
Многоуровневый упорядоченный список
Пункт 1
Пункт 1.1
Пункт 1.2
Пункт 2
Пункт 3

Спецсимволы HTML
Для обозначения некоторых символов используется цифровой код или имя символа, например
& & & амперсанд
< < < знак меньше
> > > знак больше
Для отображения используйте справочники, как например http://www.puzzleweb.ru/html/html_symbols.php
(не все браузеры корректно воспроизводят символы)

С помощью HTML создайте аналогичную страницу и выложите ее скриншот в комментарий к соответствующему заданию.
Для работы дома вы можете использовать онлайн компилятор или программу Sublime Text 3
Домашнее задание 1

Cделать страницу с расшифровкой отображения спецсимволов
Домашнее задание 2
Для обозначения некоторых символов используется цифровой код или имя символа, например
& & & амперсанд
< < < знак меньше
> > > знак больше
Для отображения используйте справочники, как например http://www.puzzleweb.ru/html/html_symbols.php
(не все браузеры корректно воспроизводят символы)