Курс вёрстки и программирования сайтов goo.gl/fB8G7a

Ямасыпов Виталий
вконтакте: vk.com/snake_yava
почта:
[email protected]
skype: snake-yava
icq: 366696661

Основные понятия
WWW (World Wide Web – «всемирная паутина») – глобальное информационное пространство, основанное на физической инфраструктуре Интернета и протоколе передачи данных HTTP.
Понятие WWW часто путают с понятием Интернет – глобальной телекоммуникационной сетью. Интернет состоит из огромного количества компьютеров и сетей, в то время как всемирную паутину составляет множество веб-сайтов.
Помимо WWW посредством Интернета работает множество различных служб: e-mail, IP-телефония, Интернет-радио и телевидение, файловые серверы, компьютерные игры и др.

Основные понятия
HTTP (Hypertext Transfer Protocol – «протокол передачи гипертекста») – предназначен для установления связи с веб-сервером и обеспечения доставки HTML-страниц веб-браузеру клиента.
Иначе говоря, HTTP – это «язык», на котором общаются браузер и сервер.

Основные понятия
Веб-сервер (HTTP-сервер) – это программное обеспечение (ПО), предоставляющее доступ к сайтам. Наиболее популярными веб-серверами являются Apache (для ОС Windows и Unix) и Microsoft IIS (для Windows).
Также веб-сервером называют компьютер, на котором установлено такое ПО.

Основные понятия
Гипертекст – размеченный текст, содержащий в себе ссылки на внешние ресурсы.
Веб-страница – гипертекстовой ресурс Всемирной паутины, обычно написанный на языке HTML. Веб-страница может содержать ссылки для перехода на другие страницы, а также изображения, медиафайлы, например звуковые файлы и видео, Flash-анимацию и т.п.
Программа, демонстрирующая веб-страницу, называется веб-браузер.
Несколько веб-страниц, объединенных общей темой и дизайном, образуют веб-сайт.

HTML

Основы HTML
Язык HTML (от англ. HyperText Markup Language – «язык разметки гипертекста»)
Гиперте́кст (англ. hypertext) — термин, обозначающий систему из текстовых страниц, имеющих перекрёстные ссылки.

Синтаксис HTML
Структура тега:
<имя тега атрибут1 атрибут2="значение2" ...>вложенные элементы
Пример:
face="Arial">Текст
Неправильно:
жирный курсив
Правильно:
жирный курсив
Непарные теги:
,

Структура документа HTML
… заголовок документа
… тело документа

Простейший HTML-документ
Заголовок
Мой первый
HTML-документ!
(это пример)

Представление цвета в HTML
Название в HTML / Название на русском / Код в RGB
aqua морская волна #00ffff
black черный #000000
blue синий #0000ff
fuchsia фуксия #ff00ff
grey серый #808080
green зеленый #008000
lime ярко-зеленый #00ff00
maroon темно-бордовый #800000
Например для текста:
серый текст
Название в HTML / Название на русском / Код в RGB
navy темно-синий #000080
olive оливковый #808000
purple пурпурный #800080
red красный #ff0000
silver серебряный #c0c0c0
teal бирюзовый #00808
white белый #ffffff
yellow желтый #ffff00
Для фона всей страницы:
фон

Полезные ссылки
Google ;) google.com
Теги HTML htmlbook.ru/html
Книга по HTML html5book.ru/html-html5
Создание HTML-документа stepbystep.htmlbook.ru/?id=2
Особенности HTML stepbystep.htmlbook.ru/?id=3
Структура HTML-кода stepbystep.htmlbook.ru/?id=4
Теги HTML stepbystep.htmlbook.ru/?id=5

HTML. Задание 1
1) Создайте HTML-страницу со следующим содержанием:
Мой первый сайт!
(это пример)
Фамилия Имя Отчество
Название страницы – «Моя первая страница». Фамилия, имя и отчество должны выводиться разными цветами. Название файла – index.html. Задайте странице цветной фон: подберите такой цвет, чтобы он не затруднял чтение текста.
2) Создайте HTML-страницу с фразой:
«Каждый Охотник Желает Знать Где Сидит Фазан».
Каждое слово должно быть соответствующего цвета: красный, оранжевый, желтый, зеленый, голубой, синий, фиолетовый. Дайте странице заголовок «Радуга».
У к а з а н и е: для получения кодов цветов используйте подбор цвета в Яндексе или подобный инструмент.

Скачать и установить:
Notepad++ https://notepad-plus-plus.org/

Основные теги
- блок-контейнер,
- абзац,
- строчный элемент
Теги для работы с текстом
…
– выделение текста жирным
…
– выделение текста курсивом
…
– подчеркивание текста
…
– форматировать текст как подстрочный индекс
Пример:
HTML-код: 101
2
= 5
В браузере: 1012 = 5
…
– форматировать текст как надстрочный индекс
…
– выравнивание текста по центру

Работа с текстом
…
– устанавливает размер, цвет и гарнитуру текста
Атрибуты:
color="цвет" – задает цвет текста
face="шрифт" – определяет гарнитуру текста; значением атрибута может
быть список шрифтов, перечисленных через запятую – в этом случае выбира-
ется первый доступный шрифт
size="1-7" – устанавливает размер шрифта (от 1 до 7)
Пример:
HTML-код:
текст

Основные теги, работа с текстом, списки
…
– задает начало и конец параграфа
Атрибут:
align="…" – определяет режим выравнивания текста
left – по левому краю (по умолчанию)
center – по центру
right – по правому краю
justify – по ширине
…
– вложенный текст, является заголовком документа уровня N, N
принимает значения от 1 до 6. Наибольшим заголовком является
, наименьшим
.
– перенос строки

Списки
арабские цифры (по умолчанию)
прописные буквы
строчные буквы
прописные римские цифры type="i">строчные римские цифры
диск (по умолчанию)
окружность
квадрат

HTML. Задание 2
а) Создайте страницу «Мое хобби». Страница должна содержать заголовок
«Мое хобби», выровненный по центру, краткое описание вашего хобби и нумерованный список ваших интересов (спорт, науки, игры и т.п.). Название
файла – hobby.html.
б) Измените тип нумерации на нумерацию буквами и римскими цифрами.
в) Измените тип списка на маркированный, используйте разные типы маркеров.
г*) Создайте текстовую надпись большого размера. Примените к ней по очереди шрифты Wingdings, Wingdings 2, Wingdings 3 и Webdings.

Создание ссылок
Для создания ссылок используется тег
…
.
Обязательный атрибут href указывает абсолютный или относительный адрес, на который ведет ссылка. Ссылка может указывать на HTML-документ,
изображение, файл для сохранения на диск и пр. Текст ссылки записывается
между открывающим и закрывающим тегом.
Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, например:
http://www.example.com/docs/about.html
Относительный адрес:
docs/about.html

Создание ссылок
Пример для абсолютного адреса:
HTML-код:
Яндекс
В браузере: Яндекс
Замечание: для файлов в пределах одного сайта рекомендуется использовать только относительные пути. В этом случае ссылки сохранят работоспособность при изменении адреса сайта, переносе в другую папку и т.п.
Для открытия ссылки в новом окне используется атрибут target со значе-
нием _blank.
Пример:
Яндекс

HTML. Задание 3
а) Модифицируйте файл index.html: добавьте ссылку на страницу «Мое хобби» и ссылку на сайт отдела (должна открываться в новом окне). На странице
«Мое хобби» добавьте гиперссылку, указывающую на страницу index.html.
б*) Создайте страницу links.html. Разместите на ней ссылки на ваши любимые сайты. Ссылки должны быть расположены в нумерованном или маркированном списке и открываться в новом окне.

Изображения
Вставка изображений на странице Осуществляется непарным тегом. Обязательный атрибут src указывает абсолютный или относительный URL изображения.
Стандартными форматами изображений являются GIF, PNG и JPEG.

Изображения
Другие атрибуты:
align="…" – определяет режим выравнивания изображения относительно
текста в строке:
top – по верхнему краю
middle – по центру строки
bottom – по нижнему краю (по умолчанию)
left – по левому краю окна
right – по правому краю окна
alt="…" – определяет текст, описывающий изображение для браузеров без
поддержки графики (или с отключенной графикой), поисковых машин и т.п.
border="N" – устанавливает толщину рамки вокруг изображений, равной N
пикселей, 0 – для отключения рамки
height="N" – высота изображения в пикселях или процентах
width="N" – ширина изображения в пикселях или процентах

Изображения
Изображение может быть сделано ссылкой, путем помещения внутрь тега
.
Примеры:
1. HTML-страница находится
в папке site, а изображение picture.jpg находится в папке site/images/
2. Изображение находится на другом сайте в Интернет
3. Картинка-ссылка

Фоновое изображение страницы
Можно задавать адрес фонового изображения для страницы в атрибуте background тега.
Тест фона

HTML. Задание 4
а) Добавьте на первую страницу (index.html) свою фотографию вместо строк
«Мой первый сайт, это пример».
б) При помощи атрибутов width и height уменьшите и увеличьте размер изо-
бражения в 2 раза. Обратите внимание на потерю качества изображения при
увеличении.
в) Сделайте изображение на первой странице гиперссылкой: при нажатии на
фотографию должен открываться полноразмерный вариант в новом окне.
г) Добавьте графический фон на страницы сайта.
д*) Добавьте на страницу информер (небольшая картинка, показывающая
погоду, курс валют и т.п. актуальную информацию). URL информера можно
найти в поисковой системе или на специализированном сайте. Например:
http://www.informer.ru/ , http://gismeteo.ru/

Создание таблиц
Таблица в HTML – это совокупность данных, расположенных и связанных
между собой при помощи ячеек, размещаемых в строках и колонках.
Таблица заполняется данными построчно. Для вставки таблиц определено 3 основных тега. Содержимое ячеек помещается в теги …, которые, в свою очередь, помещаются в теги строк …, а они уже – в тег
…
.
Пример:
1
2
3
4
5
6

Создание таблиц
Атрибуты:
align="…" – определяет режим выравнивания таблицы относительно
текста в строке
left – по левому краю
right – по правому краю
background="URL" – задает фоновый рисунок в таблице
bgcolor="цвет" – цвет фона таблицы
border="N" – устанавливает толщину границ таблицы, равную N пикселей
(0 для отключения)
bordercolor ="цвет" – цвет рамки
cellpadding="N" – размер поля вокруг содержимого каждой ячейки

CSS

Основы CSS
CSS (Cascading Style Sheets – каскадные таблицы стилей, произносится «си-эс-эс») – технология управления внешним видом элементов (тегов) веб-страницы. CSS предоставляет гораздо больше возможностей по оформлению страницы, чем HTML.
Например, с помощью стилей CSS можно убрать у ссылок подчеркивание, сделать у таблицы пунктирные границы или даже поменять курсор «мыши».
CSS используется практически на всех сайтах.

Синтаксис CSS
Рассмотрим синтаксис CSS. В стилях задается набор правил отображения в
парах «свойство – значение», и то, к каким элементам их применять (селектор):
Селектор
{
свойство1: значение1;
свойство2: значение2;
свойство3: значение3 значение4;
}
Правила записываются внутри фигурных скобок и отделяются друг от друга точкой с запятой. Между свойствами и их значениями ставится двоеточие.
CSS, как и HTML, игнорирует пробелы. Можно добавлять комментарии, заключая их между /* и */

Селекторы
Селектор определяет, к каким элементам (тегам) страницы будут применяться правила, заданные парами «свойство – значение».
В качестве селектора можно использовать:
Название тега – тогда стиль применится ко всем таким тегам.
Несколько тегов через запятую – тогда стиль применится для всех перечисленных тегов.
ID элемента - В стилях уникальный идентификатор указывается после знака # – правила рименятся к тегу с атрибутом id="идентификатор".
Классы

Классы
Часто нужно, чтобы стиль применялся не ко всем тегам на странице, а только к некоторым элементам (например, не ко всем ссылкам на странице, а только к тем, которые расположены в меню сайта). Для этого используются классы:
ТЕГ.имя_класса { … }
Правила, указанные после такого селектора, будут действовать только на теги с атрибутом class="имя_класса":
<ТЕГ class="имя_класса"> …
Можно не указывать имя тега, тогда правила будут применятся ко всем тегам с подходящим значением атрибута class.

Классы
Пример:
Для всех тегов с атрибутом class="class1" добавим подчеркивание текста и уменьшим размер шрифта, а для тега
уберем подчеркивание.
.class1 {text-decoration: underline; font-size: 80%}
A.class1 {text-decoration: none;}
В HTML-коде укажем для тегов имя класса:
Мои любимые сайты
Яндекс
Google
Redut.ru

*
Использование CSS позволяет разделить оформление и содержимое документа.
В нашем примере правила оформления содержатся в файле style.css, а содержание – в links.html. Такое разделение существенно упрощает редактирование сайта в дальнейшем.
Рекомендуется для оформления использовать только средства CSS, отказаться от использования таких тегов, как
,
,
,
, атрибутов align, border, color, height, width и т.д.

Включение стилей
Стили CSS могут включаться в HTML-документ 3 разными способами:
Внешние стили.
Хранятся в отдельном файле .css. Подключаются тегом
Основное преимущество: один стиль может использоваться сразу в нескольких документах HTML.
Стили уровня документа.
Применяются ко всему документу, записываются внутри тега
…
, который вкладывается в тег … в документе HTML.
Такой способ указания стилей используется, когда нужно применить одинаковые стили сразу к множеству HTML-элементов (тегов) в одном документе.
Стили тега
Применяются к одному конкретному контейнеру тега:

Полезные ссылки
Google ;) google.com
Основы CSS http://css.manual.ru/articles/css_basics
Основы CSS http://www.intuit.ru/department/internet/operawebst/27/
CSS по шагам http://stepbystep.htmlbook.ru/?pid=5