HTML и CSS. 25 уроков для начинающих
- Описание
- Детали
- Отзывы (1)
- Исправления
Описание
В книге 25 иллюстрированных уроков, 100 практических упражнений на тему разработки простых веб-сайтов и более 50 заданий для самостоятельной работы.
Дано введение в веб-разработку, раскрыты основы HTML, CSS и работы в WWW. Объяснено, как с помощью HTML структурировать и форматировать текст, работать с графикой и мультимедиа, таблицами, гиперссылками, веб-формами, фреймами и метаданными. Рассказано, как средствами CSS оформлять веб-страницы, использовать блоки, списки и таблицы, изображения и гиперссылки, элементы управления, фон и колонки, располагать, выводить и скрывать элементы, делать макеты веб-страниц, выполнять преобразования, анимацию, медиазапросы и др.
Электронное приложение-архив на сайте издательства содержит коды всех
примеров и пяти учебных веб-сайтов.
Вы узнаете, как
- разбить текст на абзацы и заголовки,
- создать таблицу,
- поместить на страницу графическое изображение, аудио- или видеоролик,
- сделать веб-форму для ввода данных,
- настроить параметры шрифта,
- окружить элемент рамкой и создать у него тень,
- залить элемент градиентным или графическим фоном,
- вывести текст в несколько колонок,
- сверстать веб-страницу на основе классического двухколоночного макета,
- анимировать элемент веб-страницы,
- сделать печатную редакцию сайта,
- украсить страницу круглой виньеткой или фотоальбомом в стиле Polaroid.
Дронов Владимир Александрович, профессиональный программист, писатель и журналист, работает с компьютерами с 1987 года. Автор более 30 популярных компьютерных книг, в том числе «Django 2.
1. Практика создания веб-сайтов на Python», “HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера“, «Python 3. Самое необходимое», «Python 3 и PyQt 5. Разработка приложений», “Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS“, “Angular 4. Быстрая разработка сверхдинамических Web-сайтов на TypeScript и PHP” и книг по продуктам Adobe Flash и Adobe Dreamweaver различных версий. Его статьи публикуются в журналах “Мир ПК” и “ИнтерФейс” (Израиль) и интернет-порталах “IZ City” и “TheVista.ru”.
Детали
| Артикул | 2678 |
|---|---|
| ISBN | 978-5-9775-4070-4 |
| Количество страниц | 400 |
| Серия | Для начинающих |
| Переплет | Мягкая обложка |
| Печать | Черно-белая |
| Год | 2022 |
| Габариты, мм | 165 × 215 × 20 |
| Вес, кг | 0. 49 |
Дополнительные файлы скачать: Зеркало1Дополнительные файлы скачать (Chrome): Зеркало2
Урок 17стр. 232 (Урок 17)
В первом тираже книги была замечена опечатка. При допечатке — исправлена.
Вместо
form {
width: 400px;
padding: 0px 10px;
border: thin dotted darkgrey;
border-radius: 5px;
}
…должно быть:
input, select {
font: 14pt Courier;
padding: 5px;
border: medium double black;
border-radius: 5px;
}
- ✓ Новинки на 2 недели раньше магазинов
- ✓ Цены от издательства ниже до 30%
- ✓ Акции и скидки только для подписчиков
- ✓ Важные новости БХВ
ПОЛЕЗНАЯ РАССЫЛКА КНИЖНЫХ НОВОСТЕЙ
Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности и обработкой своих персональных данных.
Рекомендуем также
-
PHP, MySQL, HTML5 и CSS 3. Разработка современных динамических Web-сайтов – Бумажная книга
866₽ -
HTML, JavScript, PHP и mySQL. Джентльменский набор Web-мастера, 5 изд. – Бумажная книга
1458₽ -
HTML, скрипты и стили. 4-е изд. – Бумажная книга
1004₽ -
HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 4 изд. – Бумажная книга
773₽
Создание небольшого веб-сайта электронной коммерции с использованием HTML и CSS | Автор: Амаша Шалинди Де Сильва
Все веб-страницы разделены на три основных раздела — <ЗАГОЛОВОК> <ТЕЛО> <НИЖНИЙ УГОЛ>. Мы просто меняем текст между тегами HTML в зависимости от каждого раздела.
Фото шапкиHTML код шапки Мы используем тег
Мы используем тег для встраивания изображения на HTML-страницу. Мы используем « src », чтобы указать путь к образу. Здесь я хочу отобразить логотип моей веб-страницы. Чтобы применить функциональность CSS, я должен это четко понимать. Для этого я определил класс под названием «logob».
Мы используем тег
для определения неупорядоченного списка. Мы начинаем элемент списка с тега
Мы используем тег Давайте посмотрим, как сделать этот заголовок привлекательным с помощью CSS. CSS можно добавить в документы HTML тремя способами. Они бывают встроенными, внутренними и внешними CSS. Здесь я использовал внешний файл CSS. Селектор класса выбирает элементы HTML с определенным атрибутом класса. Мы используем символ (.), за которым следует имя класса. При загрузке страницы будут некоторые изменения макета. Чтобы избежать этого, мы устанавливаем атрибуты width и height . Свойство «cursor» выделяет курсор мыши, который будет отображаться при наведении на элемент. Приведенная выше часть кода показывает, как я использовал функциональные возможности CSS для класса div «intro». Мы используем свойство «overflow» , чтобы указать, следует ли обрезать содержимое или добавить полосы прокрутки, когда содержимое элемента слишком велико, чтобы поместиться в указанной области. Здесь я использовал « hidden » в качестве значения. Вы когда-нибудь замечали, что когда вы наводите курсор на некоторые элементы, их цвет меняется 🤔 Мы используем «:hover» для выбора элементов, когда вы наводите на них курсор. Здесь я использовал атрибут цвета, чтобы он знал, что он нажал на элементы навигации. Хотите знать, как я создал эту кнопку? 😉 Когда мы сравниваем с « display: inline », основное отличие заключается в том, что « display: inline-block » позволяет нам установить ширину и высоту элемента. Мы используем свойство « border-radius », определяющее радиус углов элемента. Я знаю, что вы с нетерпением ждете, чтобы узнать, как я создаю эти значки. Это просто. Давайте посмотрим на код. Я определил раздел под названием «Преимущества раздела». В соответствии с этим я определил класс div под названием «поле центра преимуществ». В соответствии с этим я определил класс div под названием «преимущество». В соответствии с этим я определил класс span под названием «icon». Здесь я импортировал значки коробок. Как видите, я применил CSS отдельно к своим классам div и span. Как вы можете видеть здесь, я использовал сетку. Давайте посмотрим, как я показываю товар на своем сайте😁 Как вы видите на фото, я упомянул название товара, сколько у него звезд и его цену. Когда я перемещаю курсор по продукту, кажется, что продукт увеличивается в размере. Давайте посмотрим на код, чтобы получить более подробное представление. Здесь я определил класс div с именем «ac». Ниже я определил класс div под названием «img-cover». Я вставил изображение с помощью тега . Я использовал класс div под названием «рейтинг» для отображения звезд. Я использовал класс div под названием «price» для отображения цены. Давайте посмотрим, как мне сделать этот продукт привлекательным с помощью CSS. Мы демонстрируем нашу продукцию в виде сетки. Давайте посмотрим на пример того, как я использовал сетку. Лучшие шаблоны веб-сайтов электронной коммерции Nicepage создают уникальный интернет-магазин с отличным опытом покупок в Интернете для ваших клиентов. Использование нашего адаптивного шаблона веб-сайта электронной коммерции должно быть превосходным для создания и изменения шаблона мебельного магазина, шаблона сайта интернет-магазина модной одежды, дизайна веб-сайта электронной коммерции, посвященного органическим продуктам питания, или веб-сайта магазина электроники. Тема электронной коммерции WordPress и адаптивный шаблон электронной коммерции для продажи в магазине, используемые, например, в веб-шаблоне мебельного магазина, могут исследовать популярные категории, поэтому вы можете начать продавать онлайн как можно быстрее. Не забывайте о шаблонах дизайна видеоэффектов, которые могут сделать ваш сайт интернет-магазина интерактивным и завораживающим. Бесплатные интернет-магазины электронной коммерции, похожие на отзывчивые онлайн-магазины Prestashop, отнимают у вас много времени на управление ими, но многоцелевые интернет-магазины электронной коммерции, которые вы создаете в нашей системе, сэкономят все это время. Бесплатные темы WordPress (темы wp) на нашем веб-сайте используют не только плагины WordPress, но и более быстрые темы электронной коммерции веб-дизайна, видеоресурсы веб-дизайна из различных источников, средство создания логотипов недвижимости для адаптивного интернет-магазина PrestaShop и многие другие функции, которые другие сайты отвергают.
CSS-код «логотипа»
Здесь я покажу вам только некоторые части кода😉
означает, что переполнение обрезается, а остальное содержимое будет невидимым. Мы используем « position », чтобы выделить тип метода позиционирования, используемый для элемента. Как вы можете видеть здесь, я использовал фоновое изображение и изменил свойства в соответствии с моими предпочтениями.
В качестве цвета фона кнопки я использую оранжевый. Свойство «box-shadow» прикрепляет к элементу одну или несколько теней. Свойство « padding » для создания пространства вокруг содержимого элемента или внутри границ. Свойство « font-weight » указывает, как должны отображаться символы, толстые или тонкие.
СС « Grid Layout » предлагает систему компоновки на основе сетки со строками и столбцами, что упрощает разработку веб-страниц. Свойство « flex-direction » указывает направление гибких элементов.
Фото: Как я показываю товар. Я вставил описание продукта с помощью тега
Мы используем «:hover», чтобы увеличить размер продукта, когда пользователь наводит на него курсор. «9Эффект перехода 0005» обычно возникает, когда пользователь наводит курсор на элемент. Свойство « transform » позволяет вращать, масштабировать, перемещать ваши элементы. Примеры Html-кода магазина
