Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Урок html: Уроки по HTML и CSS

Содержание

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
ISBN978-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%
  • ✓ Акции и скидки только для подписчиков
  • ✓ Важные новости БХВ

ПОЛЕЗНАЯ РАССЫЛКА КНИЖНЫХ НОВОСТЕЙ

Подписываясь на рассылку, вы соглашаетесь с политикой конфиденциальности и обработкой своих персональных данных.


Рекомендуем также

  •  

    HTML, скрипты и стили. 4-е изд. – Бумажная книга

    1004₽
  •  

    HTML, JavScript, PHP и mySQL. Джентльменский набор Web-мастера, 5 изд. – Бумажная книга

    1458₽
  •  

    PHP, MySQL, HTML5 и CSS 3. Разработка современных динамических Web-сайтов – Бумажная книга

    866₽
  •  

    HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. 4 изд. – Бумажная книга

    773₽

САЙТ СВОИМИ РУКАМИ — Дикие уроки HTML

Главная — Все уроки — Валентина Ахметзянова

Должна сказать, что уроки эти вышли в 2005 году, многие сведения устарели, хотя основ еще никто не отменял. Прочитав эти уроки, вы освоите азбуку html. Если вы не хотите вникать во все тонкости сайтостроения, то может быть, будет проще использовать готовые движки для сайта типа WordPress, Joomla, MODX, Drupal и многие другие.

  • C чего начать?
  • От автора
  • Введение
  • Первый урок. Первая страничка
  • Второй урок. Тема сайта
  • Третий урок. Графика
  • Четвертый урок. Текст
  • Пятый урок. Bgcolor и background
  • Шестой урок. Фон (ч.I)
  • Седьмой урок. Фон (ч.II)
  • Восьмой урок. Фотоальбом I
  • Девятый урок. Слайд-шоу
  • Десятый урок. Ссылки
  • Одиннадцатый урок. Золушка
  • Двенадцатый урок. Списки
  • Тринадцатый урок. Текст+Графика
  • Четырнадцатый урок. Фреймы (ч.I)
  • Пятнадцатый урок. Фреймы (ч.II)
  • Шестнадцатый урок. Фреймы (ч.III)
  • Семнадцатый урок. Обработка фотографий
  • Восемнадцатый урок. Фотоальбом во фреймах
  • Девятнадцатый урок. Недостатки фреймов
  • Двадцатый урок. Таблицы (ч.I)
  • Двадцать первый урок. Таблицы (ч.II)
  • Двадцать второй урок. Таблицы (ч.III)
  • Двадцать третий урок. Gif
  • Двадцать четвертый урок. Кнопка (gif)
  • Двадцать пятый урок. Смена изображений
  • Двадцать шестой урок. Image Ready (ч.I)
  • Двадцать седьмой урок. Image Ready (ч.II)
  • Двадцать восьмой урок. Image Ready (ч.III)
  • Двадцать девятый урок. Карты изображений (ч.I)
  • Тридцатый урок. Карты изображений (ч.II)
  • Тридцать первый урок. Звук
  • Тридцать второй урок. Формы
  • Тридцать третий урок. Стили CSS
  • Тридцать четвертый урок. CSS (единицы измерений)
  • Тридцать пятый урок. CSS (свойства шрифтов)
  • Тридцать шестой урок. CSS (свойства текста)
  • Тридцать седьмой урок. CSS (селекторы ч.I)
  • Тридцать восьмой урок. CSS (селекторы ч.II)
  • Тридцать девятый урок. CSS (свойства фона)
  • Сороковой урок. CSS (бордюрчики)
  • Сорок первый урок.
    CSS (поля и отступы)
  • Сорок второй урок. Сайт в CSS
  • Сорок третий урок. Meta-теги
  • Сорок четвертый урок. SSI
  • Сорок пятый урок. PR и ИЦ сайта
  • Сорок шестой урок. Свой домен
  • Сорок седьмой урок. Счетчик посещений
  • Сорок восьмой урок. Регистрация в каталогах
  • Сорок девятый урок. Заработок в сети. Webmoney, партнерские программы
  • Пятидесятый урок. Видео на сайте
  • Пятьдесят первый урок. Как заработать на своем сайте
  • Пятьдесят второй урок. Иконки для вашего сайта

В. Ахметзянова

Урок 1: HTML и CSS

Введение

Цели

В этом уроке мы рассмотрим:

  • что такое HTML?
  • что такое элемент?
  • структура веб-страницы
  • основных элементов HTML
  • применение стилей с классами и CSS

Цель

К концу этого урока вы создадите веб-страницу «Подать заявку на получение разрешения на лай»:

Эта веб-страница содержит заголовок, основной текст, две формы и кнопку.

Хотя HTML и CSS не являются языками программирования, они являются важными основами и помогут вам понять, как работает Интернет.

Мы рассмотрим языки программирования (например, Ruby и Python) в следующих уроках.

Введение в HTML и CSS

Что означают HTML и CSS?

HTML расшифровывается как язык гипертекстовой разметки

.

CSS означает каскадные таблицы стилей

.

Что такое HTML и CSS?

HTML — это язык, используемый для создания веб-сайтов. Весь текст и контент, который вы увидеть в Интернете построен с использованием HTML.

CSS используется с HTML для оформления страницы.

Всякий раз, когда вы заходите на веб-сайт (например, www.gov.uk), ваш браузер отправляет запрос на специальный компьютер, называемый «сервером». Сервер отправляет обратно HTML и CSS, который ваш браузер превращает в веб-страницу, на которую вы можете смотреть.

элемента HTML

Элемент является стандартным блоком HTML. Есть абзацы, заголовки, ссылки, списки и многое другое.

элементов HTML состоят из открывающего тега (иногда с некоторыми атрибутами), содержимого и закрывающего тега.

(Изображение из Википедии)

Дополнительные сведения см. в справочной документации по HTML-элементам Mozilla.

Структура веб-страницы

тип документа и HTML

Тип документа — это первое, что необходимо определить на HTML-странице. Оно говорит браузер, какую версию HTML использует страница.

В наши дни вам нужно будет использовать только html . Раньше было много сложные doctypes в старые времена. Дополнительные сведения см. в документации W3C по типам документов и стилям разметки.

За типом документа всегда следует тег , который содержит содержимое вашей страницы.

головка и корпус бирки

HTML-страница разделена на две части. Головка и корпус .

Заголовок содержит информацию о веб-странице, такую ​​как заголовок страницы (текст в вкладка браузера), таблицы стилей, скрипты и другую информацию о странице. Все в голова невидима — нельзя поставить изображение или абзац текста в заголовке .

Тело содержит содержимое веб-страницы, видимое пользователю.

Презентационные элементы HTML

Давайте начнем с определения базовой структуры вашего веб-сайта.

Откройте Visual Studio Code и создайте новую папку для своей работы с именем урок-1-html-и-css . Выберите Файл > Открыть папку… и выберите нужную папку:

Скриншоты, показывающие, как добавить папку в Visual Studio Code

. Затем внутри этой папки создайте новый файл с именем index.html , нажав кнопку * New File… на боковой панели:

Снимок экрана, показывающий, как добавить файл в Visual Studio Code

Задача 1: doctype, html, head и body

Используя то, что мы только что узнали, и под руководством вашего тренера, сделайте следующее:

  • объявить тип документа HTML
  • открывать и закрывать набор из 9 штук0061 теги
  • В рамках этого создайте теги head и body

После этого откройте index. html в веб-браузере:

Снимок экрана, показывающий, как открыть файл HTML в Google Chrome:

Вы видите что-нибудь на странице?

Задача 2: установить заголовок страницы

Теперь внутри тега head создайте тег </code> с заголовком <code> Apply for a Barking Permit </code>.</p><p> Вы должны увидеть, что заголовок вкладки в вашем браузере изменился. Если нет, дважды проверьте свой код.</p><pre> <!doctype HTML> <html> <голова> <title>Подать заявку на получение разрешения на лай <тело>

Обратите внимание, что в нашем примере каждый тег имеет отступ относительно своего родительского тега. Это не требуется но это делает ваш код намного более читабельным, и вы сможете легче видеть вложенные теги.

В HTML несколько пробелов и новых строк сжимаются в один пробел.

 Вы можете
писать
такой текст

, и в конечном итоге они будут отображаться со сжатым пространством, например:

 Вы можете написать такой текст

Элемент: заголовок (

h2 )

Заголовки бывают 6 уровней:

  
Заголовок
 
 
Заголовок
 
 
Заголовок
 
 
Заголовок
 
 
Заголовок
 
 
Заголовок

A h2 определяет самый важный заголовок, тогда как h6 определяет наименее важный.

Заголовки должны идти от h2 до h6 по порядку — всегда начинать с

, затем использовать

и так далее.

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

Не делайте:

  
Заголовок 1
 
 
Заголовок 3
 
 
Заголовок 4

До:

  
Заголовок 1
 
 
Заголовок 2
 
 
Еще один заголовок 2
 
 
Еще один заголовок 2
 
 
Заголовок 3

Заголовки могут пропускать уровень при возврате на более важный уровень заголовка:

  
Заголовок 1
 
 
Заголовок 2
 
 
Заголовок 3
 
 
Заголовок 4
 
 
Еще один заголовок 2
 
 
Еще один заголовок 3
Задача 3: добавить заголовок

Добавьте тег заголовка h2 , который включает фразу Подать заявку на получение разрешения на лай , внутри тега body вашей страницы.

Элемент: абзац (

p )

Помещение контента в тег

разбивает текст на абзацы. Это помогает сделать содержимое вашей страницы более удобным для чтения пользователем.

Задача 4: добавить абзац

Добавьте следующий абзац в свой Тег , после

:

 

Министерство собаководов пробует нового пилота. Хорошие собаки могут подать заявку на
разрешение на лай, чтобы они могли тявкать, когда захотят. пока не понятно как
это разрешение будет применяться.

Элемент: ссылка (

a )

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

Тег ссылки называется и для «якоря».

Задача 5: добавить ссылку

Добавьте ссылку в конец абзаца:

 
Дополнительная информация о лае

Элемент: div (

div )

Тег div позволяет группировать элементы вместе. Группировать элементы полезно, так как позже мы можем стилизовать их вместе (например, придать им одинаковый цвет).

Задача 6: добавить div

Оберните существующий абзац, ссылку и заголовок в div:

 <дел>
   
Подать заявку на получение разрешения на лай
 
  <р>
    Министерство собаководов пробует нового пилота. Хорошие собаки могут подать заявление на получение разрешения на лай, чтобы они могли тявкать в любое время и в любом месте. Пока неясно, как это разрешение будет применяться.
    Подробнее о лае.

Называется «div» для «деления».

Элемент: изображение (

img )

До сих пор мы многое узнали о том, как добавить текст на нашу страницу. Теперь давайте добавим несколько изображений!

Прежде чем мы начнем, нам нужно добавить файлы изображений, которые мы хотим использовать, в папка проекта.

Обычно изображения хранятся в отдельной папке, поэтому сначала создайте папку с именем images внутри той же папки, что и ваш файл HTML.

Затем загрузите нужные изображения. Сделайте это, щелкнув правой кнопкой мыши каждый из следующие ссылки, выберите «Сохранить ссылку как…» и сохраните ее в папку с изображениями. вы только что создали:

  • Шиба-ину.jpg
  • щенок в шляпе.jpg

Изображения в основном состоят из трех компонентов:

  • тег
  • атрибут src , который указывает местоположение или источник изображения
  • атрибут alt , который отображается, если изображение не может быть показано, и считывается программой чтения с экрана

Чтобы увидеть это изображение на веб-странице, нам нужно сделать ссылку на изображение, это включает в себя указание веб-странице, где она находится и как она называется.

Задача 7: добавить изображение

После основного заголовка страницы добавить следующее:

 Счастливый шиба-ину

Здесь вы можете видеть, что мы сказали src изображения смотреть на изображения папку и отобразить изображение shiba-inu. jpeg , затем мы дали ему описание в атрибуте alt .

Формы

Формы позволяют запрашивать у пользователя ввод. Есть несколько интерактивных компоненты (например, текстовые поля и кнопки), которые можно использовать в формах.

Элемент: форма (

форма )

Элемент

группирует набор компонентов вместе, поэтому все входные данные можно подать сразу.

Задача 8: создать пустую форму

Создайте пустую форму в конце вашего

:

 ...
    <форма>

Элементы: метка (

метка ) и ввод ( ввод )

Метки и входы работают вместе, сообщая пользователю, какую информацию ему нужно предоставить, и позволяя ему вводить ее.

элемента имеют атрибут для и элемента имеют идентификатор атрибут. Комбинация для и id связывает элементы вместе.

Элементы также имеют атрибут name , который используется при открытии формы. поданный. В большинстве случаев атрибуты id и name имеют одинаковое значение.

Обычно пару метка/вход заключают в

, поэтому они хорошо сгруппированы.

Задача 9: добавить метки и входы

Давайте создадим пару входных данных в форме, чтобы запросить у пользователя имя и возраст его собаки:

 <форма>
    <дел>
<дел>

Элемент: кнопка (

кнопка )

Последнее, что нужно нашей форме, — это возможность для пользователя отправлять свои ответы. В HTML мы используем тег

Задача 11: что происходит, когда пользователь отправляет форму?

Если вы нажмете кнопку, страница просто обновится, но ничего изменения. Что происходит?

Если вы внимательно посмотрите, то заметите, что ответы, которые вы вводите в форму, появление в URL-адресе — это самый простой способ отправки данных. В позже мы рассмотрим, как обрабатывать эту информацию «на сервере», чтобы вы можете показать пользователю красивую страницу подтверждения.

Стилизация с помощью CSS

CSS — это язык, используемый для оформления веб-сайтов.

Определяет визуальное представление содержимого. Например, цвет, поля, границы, фон, положение на странице.

Что я могу сделать с помощью CSS?

Вы можете изменить цвет, положение, размеры и представление различных элементов.

Анатомия правила CSS

Вот пример правила CSS:

 корпус {
  цвет: ярко-розовый;
}

Это правило устанавливает цвет текста для тела в приятный оттенок ярко-розовый .

! Предупреждение `цвет` пишется с использованием американского правописания

Есть три части:

  • Селектор , который ограничивает, к каким элементам применяется это правило. В этом примере селектор представляет собой тело .
  • Одно или несколько свойств , определяющих, какие вещи изменяет правило. В этом примере свойство — это цвет .
  • Значение для каждого свойства . В этом примере значение равно hotpink .
 селектор {
  свойство1: значение1;
  свойство2: значение2;
}

Существует два способа использования CSS для оформления страницы:

  • использование тега стиля для записи вашего CSS «встроенного», то есть непосредственно в ваш файл HTML
  • использование тега ссылки для загрузки вашего CSS из внешнего файла

Элемент: стиль

Тег