HTML и CSS. 25 уроков для начинающих

Description

В книге 25 иллюстрированных уроков, 100 практических упражнений на тему разработки простых веб-сайтов и более 50 заданий для самостоятельной работы. Дано введение в веб-разработку, раскрыты основы HTML, CSS и работы в WWW. Объяснено, как с помощью HTML структурировать и форматировать текст, работать с графикой и мультимедиа, таблицами, гиперссылками, веб-формами, фреймами и метаданными. Рассказано, как средствами CSS оформлять веб-страницы, использовать блоки, списки и таблицы, изображения и гиперссылки, элементы управления, фон и колонки, располагать, выводить и скрывать элементы, делать макеты веб-страниц, выполнять преобразования, анимацию, медиазапросы и др. Электронное приложение-архив на сайте издательства содержит коды всех примеров и пяти учебных веб-сайтов. Для начинающих веб-разработчиков ПРЕДИСЛОВИЕ Типографские соглашения ЧАСТЬ I. ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ УРОК 1. HTML 1.1. Упражнение. Создаем нашу первую веб-страницу 1.2. Теги. Язык HTML Как набирать HTML-код? — часть 1 1.3. Упражнение. Продолжаем изучать теги Как набирать HTML-код? — часть 2 1.4. Упражнение. Помещаем на веб-страницу изображения, знакомимся с одинарными тегами и атрибутами тегов Не забывайте ставить закрывающие теги! 1.5. Структурирование HTML-кода и метаданные 1.6. Комментарии HTML Как еще можно использовать комментарии? 1.7. Самостоятельные упражнения УРОК 2. CSS 2.1. Оформление по умолчанию 2.2. Упражнение. Задаем оформление для веб-страницы 2.3. Таблицы стилей, стили, атрибуты стилей и наследование. Язык CSS 2.4. Внешние таблицы стилей и их привязка к веб-страницам 2.5. Упражнение. Используем стилевые классы и знакомимся с правилом каскадности 2.6. Упражнение. Используем важные атрибуты стилей 2.7. Упражнение. Применяем составные селекторы 2.8. Внутренние таблицы стилей 2.9. Встооенные стили 2.10. Комментарии 2.11. Самостоятельные упражнения УРОК 3. КАК РАБОТАЕТ WWW? 3.1. Клиенты и серверы 3.2. Упражнение. Публикуем наш веб-сайт на веб-сервере 3.3. Интернет-адрес и его составные части Протокол Адрес хоста Протокол IP, IP-адреса и доменные имена Путь к файлу Примеры интернет-адресов и их обработка веб-обозревателем Пути к файлам в HTML-тегах 3.4. Упражнение. Используем веб-страницу по умолчанию 3.5. Ошибка 404 Notepad++ ЧАСТЬ II. HTML УРОК 4. СТРУКТУРА 4.1. Абзацы и заголовки Разделитель 4.2. Упражнение. Создаем списки 4.3. Список описаний 4.4. Упражнение. Используем семантическую разметку Тег 4.5. Адрес и блочная цитата 4.6. Блочные элементы 4.7. Правила вывода текста в блочных элементах 4.8. Текст фиксированного формата 4.9. Упражнение. Применяем блочный контейнер 4.10. Самостоятельные упражнения УРОК 5. ТЕКСТ 5.1. Теги выделения 5.2. Встроенные элементы 5.3. Упражнение. Применяем встроенный контейнер 5.4. Переносы строк 5.5. Упражнение. Вставляем специальные символы посредством литералов 5.6. Самостоятельные упражнения УРОК 6. ГРАФИКА И МУЛЬТИМЕДИА 6.1. Вставка графических изображений 6.2. Форматы графики, применяемые в WWW Растровые форматы Векторный формат 6.3. Ссылки на файлы и их указание 6.4. Встроенно-блочные элементы Абсолютные пути к файлам и веб-сервер 6.5. Упражнение. Помещаем на веб-страницу видеоролик Формат HTML 5 6.6. Вставка аудиоролика Содержимое тегов и 6.7. Семантическая иллюстрация 6.8. Упражнение. Помещаем на веб-страницу видео YouTube Лицензия Creative Commons 6.9. Самостоятельные упражнения УРОК 7. ТАБЛИЦЫ 7.1. Упражнение. Создаем простую таблицу 7.2. Упражнение. Выполняем слияние ячеек 7.3. Упражнение. Делаем таблицу со сложным содержимым 7.4. Упражнение. Используем секции таблицы Заголовок таблицы 7.5. Самостоятельные упражнения УРОК 8. ГИПЕРССЫЛКИ 8.1. Упражнение. Создаем гиперссылки Графическая гиперссылка Почтовая гиперссылка 8.2. Загрузочные гиперссылки Форматы файлов, поддерживаемые веб-обозревателями Пустая гиперссылка 8.3. Гиперссылки, ссылающиеся на фрагменты веб-страниц. Якоря 8.4. Упражнение. Создаем панель навигации Полоса навигации Карта-изображение 8.5. Самостоятельные упражнения УРОК 9. ВЕБ-ФОРМЫ И ЭЛЕМЕНТЫ УПРАВЛЕНИЯ 9.1. Обработка пользовательских данных. Веб-формы и веб-приложения 9.2. Упражнение. Создаем веб-форму для заказа столика 9.3. Как работает веб-форма? Параметры веб-формы 9.4. Параметры, поддерживаемые всеми элементами управления 9.5. Поля ввода/выбора 9.6. Упражнение. Используем флажки и переключатели 9.7. Упражнение. Создаем список 9.8. Область редактирования 9.9. Кнопки 9.10. Поле выбора файла Регулятор 9.11. Самостоятельные упражнения Группа элементов управления УРОК 10. ФРЕЙМЫ 10.1. Упражнение. Создаем фотогалерею на основе фрейма 10.2. Самостоятельные упражнения УРОК 11. МЕТАДАННЫЕ 11.1. Упражнение. Задаем метаданные для веб-страницы Популярные в России поисковые службы 11.2. Самостоятельные упражнения ЧАСТЬ III. CSS УРОК 12. СЕЛЕКТОРЫ 12.1. Основные селекторы и комбинированный селектор Привязка нескольких стилевых классов 12.2. Упражнение. Используем селекторы атрибутов 12.3. Упражнение. Применяем псевдоклассы Стили с несколькими селекторами 12.4. Псевдоклассы, поддерживаемые CSS 12.5. Упражнение. Используем псевдоэлементы 12.6. Разделители 12.7. Приоритет селекторов и его вычисление 12.8. Самостоятельные упражнения УРОК 13. ШРИФТ И ТЕКСТ 13.1. Гарнитура, кегль, насыщенность и начертание шрифта 13.2. Упражнение. Используем загружаемые шрифты Бесплатные и платные шрифты Форматы загружаемых шрифтов 13.3. Оформление, преобразование текста и форма строчных букв Значения initial и inherit 13.4. Цвет и уровень прозрачности 13.5. Отступы и интервалы Единицы измерения CSS 13.6. Упражнение. Используем генерируемое содержание 13.7. Упражнение. Применяем счетчики 13.8. Выравнивание по горизонтали и вертикали 13.9. Упражнение. Создаем тень у текста Указание сразу всех параметров шрифта 13.10. Самостоятельные упражнения УРОК 14. БЛОКИ 14.1. Упражнение. Используем внутренние и внешние просветы для создания стильного заголовка 14.2. Упражнение. Выводим рамки у элементов 14.3. Рамки со скругленными углами 14.4. Упражнение. Задаем размеры элементов 14.5. Размеры элементов, внутренние просветы и рамки. Режим установки размеров 14.6. Упражнение. Создаем тень у блочного элемента 14.7. Самостоятельные упражнения УРОК 15. СПИСКИ И ТАБЛИЦЫ 15.1. Упражнение. Задаем параметры списков 15.2. Параметры таблиц 15.3. Параметры ячеек таблиц 15.4. Самостоятельные упражнения УРОК 16. ИЗОБРАЖЕНИЯ И ГИПЕРССЫЛКИ 16.1. Параметры графических изображений 16.2. Упражнение. Оформляем гиперссылки, применяя псевдоклассы гиперссылок УРОК 17. ЭЛЕМЕНТЫ УПРАВЛЕНИЯ 17.1. Упражнение. Оформляем веб-формы и элементы управления 17.2. Псевдоклассы и псевдоэлементы элементов управления 17.3. Самостоятельные упражнения УРОК 18. ФОН 18.1. Сплошной фон 18.2. Упражнение. Создаем линейный градиент 18.3. Упражнение. Создаем радиальный градиент 18.4. Повторяющиеся градиенты 18.5. Упражнение. Указываем графический фон 18.6. Упражнение. Накладываем несколько графических фонов 18.7. Самостоятельные упражнения УРОК 19. КОЛОНКИ 19.1. Многоколоночная верстка текста 19.2. Дополнительные параметры колонок УРОК 20. ПРЕДСТАВЛЕНИЕ ЭЛЕМЕНТОВ 20.1. Упражнение. Делаем «легкую» панель навигации 20.2. Упражнение. Используем таблицы без таблиц Управление видимостью элементов Изменение курсора мыши 20.3. Самостоятельные упражнения УРОК 21. МЕСТОПОЛОЖЕНИЕ ЭЛЕМЕНТОВ 21.1. Упражнение. Используем плавающие элементы и семантические врезки Центрирование элемента страницы по горизонтали 21.2. Упражнение. Создаем адаптивную полосу навигации с помощью упорядочивающего элемента 21.3. Упражнение. Используем элементы-перечни 21.4. Параметры потомков упорядочивающего элемента Полное центрирование элемента страницы 21.5. Упражнение. Используем свободно позиционируемые элементы 21.6. Упражнение. Применение относительно позиционируемых элементов 21.7. Самостоятельные упражнения УРОК 22. МАКЕТЫ ВЕБ-СТРАНИЦ 22.1. Классические макеты 22.2. Упражнение. Создаем двухколоночный макет на основе плавающего элемента 22.3. Упражнение. Делаем табличный макет 22.4. Упражнение. Делаем рамочный макет на фиксированных элементах 22.5. Упражнение. Создаем прокручивающийся элемент страницы Формулы Переполнение и плавающие элементы Макет с фиксированной шириной 22.6. Самостоятельные упражнения УРОК 23. ПРЕОБРАЗОВАНИЯ 23.1. Упражнение. Применяем преобразования к элементам 23.2. Упражнение. Применяем сложные преобразования 23.3. Самостоятельные упражнения УРОК 24. АНИМАЦИЯ 24.1. Упражнение. Применяем анимацию с двумя состояниями 24.2. Сложная анимация с двумя состояниями 24.3. Упражнение. Создаем анимацию с несколькими состояниями 24.4. Самостоятельные упражнения УРОК 25. МЕДИАЗАПРОСЫ 25.1. Упражнение. Адаптируем веб-страницы под мобильные устройства 25.2. Упражнение. Создаем печатную редакцию веб-сайта 25.3. Самостоятельные упражнения ЗАКЛЮЧЕНИЕ ПРИЛОЖЕНИЕ 1. В КОПИЛКУ ВЕБ-ВЕРСТАЛЬЩИКА П1.1. Фотография в стиле Polaroid Внешний вид (приведены три элемента) HTML: приведен код, создающий один такой элемент CSS П1.2. Фотогалерея в стиле Polaroid Внешний вид HTML CSS П1.3. Круглая виньетка Внешний вид HTML CSS П1.4. Спойлер Внешний вид HTML CSS П1.5. Меню-гамбургер Внешний вид HTML CSS П1.6. Аккордеон Внешний вид HTML CSS ПРИЛОЖЕНИЕ 2. РАЗРАБОТКА ОДНОСТРАНИЧНЫХ ВЕБ-САЙТОВ П2.1. Упражнение. Создаем одностраничный веб-сайт П2.2. Упражнение. Создаем панель навигации для одностраничного веб-сайта П2.3. Самостоятельные упражнения ПРИЛОЖЕНИЕ 3. HTML-ТЕГИ ПРИЛОЖЕНИЕ 4. ОПИСАНИЕ ЭЛЕКТРОННОГО АРХИВА ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ