Современная web-разработка

Правила:
Соблюдаем тишину, когда преподаватель говорит!
Не стесняемся задавать вопросы!
Работаем в команде!

HTML (HyperText Markup Language) – язык гипертекстовой разметки.
Как это работает?
Пользователь подключается к сети и набирает адрес какого-нибудь сайта, браузер отправляет запрос на сервер, соответствующий адресу, а тот в ответ присылает файл с расширением .html .
Что такое HTML?

Для того, чтобы начать создавать собственные страницы на HTML, не нужно ничего, кроме текстового редактора. Например, «Блокнота». Однако современные редакторы способны намного упростить и ускорить процесс разработки. Мы будем использовать Brackets, так как он прост в обращении, а также легко настраивается под нужды любого разработчика.
Сайт редактора расположен по адресу http://brackets.io.
В чем мы будем работать?

Создадим пустую папку на компьютере (например с именем sandbox), которую будем называть папкой проекта, и откроем ее через Brackets, использую Файл→Открыть деректорию.
Создадим новый файл при помощи Файл→Новый.
Сохраним его с именем index.html: Файл→Сохранить.
Учимся пользоваться Brackets.

Открыть директорию – Ctrl+Alt+O;
Создать новый файл – Ctrl+N;
Сохранить файл – Ctrl+S;
Учимся пользоваться Brackets.

Hello, world!
Hello, world!

Hello, world!
Hello, world!

Hello, world!

Hello, world!
Live Preview is awesome!
Hello, world!

Hello, world!

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

Затем следуют теги, задающие различные элементы страницы. В большинстве случаев теги составляют пару:
// code
Первый тег называется открывающим, а второй — закрывающим
Структура HTML

Пары должны образовывать древовидную структуру, то есть не могут перекрываться, как в следующем примере:
Структура HTML

Элементом называется либо пара соответствующих тегов, либо одиночный тег. В следующем примере элемент br вложен в p, а также в div, которые тоже являются элементами:
Структура HTML

html – базовый тег документа. В нём располагаются все остальные элементы.
head - в основном содержит в себе служебную информацию: описание для поисковых систем, скрипты, стили.
body - содержит в себе элементы, находящиеся непосредственно на странице.
Структура HTML. Основный теги.

meta - указывает информацию для web-сервисов и браузеров. В частности, позволяет задать кодировку страницы.
title - располагается в head. Заголовок, отображающийся на вкладке в браузере.
Заголовок страницы
Напишите эти два тега в своем документе!
Структура HTML. Теги тега head.

Теги h1, h2, h3, h4, h5 и h6 задают заголовки различных размеров.
Если вы хотите просто увеличить текст и сделать его жирным не используйте эти теги! Для этого существует стили!
Заголовки

Космос
Млечный путь
Солнечная система
Солнце
Земля
Океан
Песчинка
Заголовки

Тег p задает текстовый абзац.
Книга
Глава
Первый абзац.
Второй абзац.
Абзацы

Абзацы

// code…
Жирный
курсивный
подчёркнутый
зачёркнутый
надстрочный
подстрочный
текст.
E = mc
2
Форматирования

Форматирования

В конце каждой главы находятся несколько практических заданий. Для большинства из них приведены изображения страниц, которые требуется получить.
Справочные сведения, расположенные сразу после формулировки задания, нужно изучать перед началом его выполнения, так как в них содержится необходимая для реализации информация.
Задания

Создайте профиль Петра I
Задание 1. Профиль

Списки бывают двух типов: маркированные (unordered, ul) и нумерованные (ordered, ol). Элемент списка задаётся при помощи тега li.
Маркированный список
Земля
Луна
Нумерованный список
Первый
Второй
Списки

Списки

Чтобы вставить картинку на страницу, нужно сначала скопировать её в папку проекта, например, с именем picture.jpg, а затем использовать одиночный тег img. Одиночные теги не имеют закрывающей пары.
Картинки

Обратите внимание на наличие атрибута src у тега img. Атрибуты могут быть только у открывающих тегов. Они записываются так:
<тег атрибут-1=«значение-1» атрибут-2=«значение-2»>
В нашем случае атрибут src устанавливает путь до картинки. Путь может быть как локальным, так и удалённым, например:
Картинки

Картинки из интернета alt="Картинка">
Картинки

Создайте профиль Петра I
Задание 1. Профиль

Задание 2. Галерея изображений. Изображение с ссылками.

Тег a задаёт ссылки, позволяющие переходить на другие страницы. Адрес ссылки записывается с помощью атрибута href.
// code..
Google
Yandex
1С
Ссылки

Внутри тега a может быть не только текст, но и, например, картинки. Создайте ещё одну страницу с именем page.html и напишите в ней какой-нибудь простой код. Теперь мы можем сделать ссылку-картинку, заодно добавив всплывающую подсказку с помощью атрибута title:
title="Ссылка на страницу page">
Ссылки

Для создания таблиц существует три основных тега:
table, который задает саму таблицу;
tr, задающий новую строку в таблице;
td, задающий новую ячейку.
Внутрь ячеек можно помещать любой контент, даже другие таблицы.
Таблицы

Ссылка
Заголовок
Один
Два
Таблицы
Один
Два

Задание 2. Галерея изображений. Изображение с ссылками.