Как понять HTML?
Шпаргалка для начинающих Web Разработчиков
Геннадий Караченцев [Link]
Из чего состоит инертен страница?
Страница
HTML CSS JavaScript
Что все это значит?
HTML CSS JavaScript
• Файл • Стили • Интерактив
• Структура файла • Дизайн • Взаимодействие с
• Представление кода • Эффекты пользователем
• Базовая стилизация • Анимация • Программирование
• Настройки страницы • Позиционирование • Обработка данных
• Подключение файлов • и т.д. • Манипуляции с DOM
Как это все работает?
Меняет
Добавляет внешний Производит
HTML элемент CSS вид
JavaScript действие с
элементом
элемента
Где все это происходит?
HTML
CSS
JS
Браузер
Как работает HTML код?
Браузер
<html>
<title>Document</title>
<body>
html
…
</body>
</html>
css
js
HTML файл
Из чего состоит HTML код?
Результат
HTML <теги> <Тег> Структура
<h1>Привет мир</h1>
С чего начинается строение страницы?
• Имя (index)
• Расширение
Файл .html [Link] HTML Браузер Результат
HTML • Формат,
текстовый
Какими программами пользоваться?
Notpad ++ Brackets Sublime Text Dreamweaver CC
• [Link] • [Link] • [Link] • [Link]
[Link]/download/ [Link]/3 m/ru/products/dream
• Подсвечивает код [Link]
• Подсвечивает код • Есть немного • Подсвечивает код
• Есть много дополнений • Есть много • Профессиональный
дополнений • Удобный дизайн дополнений редактор для
• Удобны дизайн • Удобный дизайн верстки сайтов от
• Можно работать с
компании Adobe
PSD макетами
Создание файла HTML
Очень Распространённая ошибка!!!
Первый код
Откроем файл в
редакторе
Начало кода Построим первый тег Результат
• Запустить редактор <!DOCTYPE html>
• Открыть в нем наш <html lang="en">
файл [Link] <head>
<meta charset="UTF-8"> <h1>Привет мир</h1>
<title>Document</title>
</head>
<body>
<Теги тут …>
</body>
</html>
Поговорим о строении тегах
Закрывающийся тег
Открытие тега Закрытие тега
<p>Параграф</p>
Содержимое
Угловые скобки
Имя тега
Обратный слеш
Еще немного о строении…
Открытые теги
<br /> <input /> <img />
Атрибуты
Атрибуты расширяют возможности тегов
Название Занчение
<img src=“[Link]” />
Значение всегда в кавычках
Знак присвоения значения
Типы тегов
Блочные Строчные
Блок 1 Сточный 1 Сточный 2
Блок 2
Сточный 3 Сточный 4
Блок 3
Сточный 5 Сточный 6 Сточный 7
Блок 4
Сточный 8 Сточный 9
Список тегов
• <H1>-<H6> Заголовки
• <p> - Параграф
• <strong> - Выделить текст жирным
• <em> - Выделить текст курсивом
• <img> - Создать картинку в тексте
• <a> - Создание ссылки
• <span> - Выделения отдельных строк
• <div> - Группировка кода на блоки
Заголовки и подзаголовок
<h1> Тип: блочный
<h2> Заголовок/Подзаголовок блока
<h3>
Заголовок/Подзаголовок раздела
Заголовок/Подзаголовок статьи
<h1>Текст</h1>
<h4> Заголовок/Подзаголовок новости
<h5>
Заголовок/Подзаголовок новости
…
<h6>
Параграф
Тип: блочный
<p>
Используется для обозначения
предложений в тексте статьи,
блога, текстового блока и т.д.
<p>Текст</p>
Жирный и курсивный текст
Тип: строковый
<strong> Выделяет текст жирным <strong>Текст</strong>
<em> Выделяет текст курсивом <em>Текст</em>
Пример:
<p>Привет <strong>мир</strong><p>
<p>Привет <em>мир</em><p>
<p>Привет <strong><em>мир</em></strong><p>
Добавление изображений
Тип: смешанный (inline-block)
<img src=“[Link]” />
<img src=“[Link] />
<img width=“100px” height=“150px” src=“[Link]” />
Ссылки в тексте
Тип: строковый
<a href=“[Link] ссылки</a> Текст ссылки
Ссылка в новом окне:
<a href=“[Link] target=“_blank”>Текст ссылки</a>
Картинка как ссылка: Click
<a href=“[Link]
<img src=“[Link]” />
</a>
Блоки и фрагменты текста
Тип: строковый
<span> Выделяет текст в фрагмент <span>Текст</span>
Пример:
<p>Привет <span>мир</span><p>
Тип: блочный <div>
<div> Выделяет блок верстки …
Пример: </div>
<div class=“text-block” >
<p>Привет мир<p>
</div>
CSS и как это рботает?
HTML CSS CSS 3
Язык разметки CSS стилей
Строение и синтаксис написания CSS стилей
Блок стиля(открытие) Блок стиля(закрытие)
Стиль
h1{ font-size: 18px; }
Селектор
Свойство Значение Конец стиля
h1{
font-size: 18px;
text-align: center;
}
Где создавать стили?
В каком месте, документа HTML, писать стили CSS
Прямо в коде HTML Внутри тега В отдельном файле
Код HTML Тег HTML Файл HTML
CSS CSS
Файл CSS
Стили в коде HTML
Специальный тег <style>
<style>
<style> h1{
…стили font-size: 18px;
text-align: center;
</style> }
</style>
Стиль внутри тега
Размещение стиля в специальном атрибуте style=“”
<h1 style=“text-align: center;”>Заголовок<h1>
<h1 style=“text-align: center; font-size: 25px”>Заголовок<h1>
Стили в файле
Создание стилей в файле с расширением *.css
Текстовый файл
Подключение к HTML
Файл имя_файла.css
CSS
Файл CSS
Подключение CSS файла
Добавление CSS файла к HTML документу через <link>
<!DOCTYPE html>
<html lang="en">
<head> Подключение к HTML
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
</body>
</html>
Список стилей
• font-size – Задать размер текста
• font-family – Семейство шрифта текста
• font-weight – Насыщенность текста
• font-style – Начертание текста
• text-align – Выравнивание текста
• color – Цвет текста
• margin - Отступы
• padding - Поля
• background - Фон
Список сайтов для изучения:
HTML [Link]
CSS [Link]
JS [Link]
А что дальше?
Ваш первый сайт всего за 6 уроков
У Вас есть уникальная возможность попробовать
создать свой первый сайт
Спасибо за внимание!
Если вам понравился и был полезен данный PDF, то вы можете
подписаться на меня в социальных сетях:
А также подписаться на мой YouTube канал и группы в соц сетях:
[Link]