Конспект «Основы HTML и CSS»
HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки».
Язык HTML отвечает за структуру и содержание страницы. HTML состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов:
Парные теги
Теги бывают парными и одиночными. Парные теги могут содержать текст и другие теги. У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег:
Текст заголовка В закрывающей части парных тегов перед именем ставится символ / («слэш»).
В парные теги можно вкладывать другие теги. Например, как в списках:
У вложенных тегов всегда нужно следить за правильным порядком закрытия. Вложенный тег не может закрываться позже родительского:
Не все теги можно вкладывать в другие теги, например, тег нельзя вкладывать в
.
Одиночные теги
Существуют не только парные, но и одиночные теги. Например, тег позволяет добавить картинку в разметку.
Сам по себе не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src :
У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:
Например, картинке при желании можно задать размеры:
Комментарии
Код, заключённый между символами , работать не будет. Если эти символы удалить, то код заработает, это называется «раскомментировать». С помощью комментариев обычно временно отключают какой-то код или оставляют подсказки и разъяснения.
CSS
CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».
Язык CSS отвечает за внешний вид страницы.
С помощью CSS можно задавать параметры для любого тега: ширину и высоту, отступы, цвет и размер шрифта, фон и так далее. Все эти параметры задаются с помощью свойств в следующем формате:
свойство: значение;color: red; padding: 10px;Стили к тегам добавляются чаще всего при помощи атрибута class .
Например, если мы хотим, чтобы определённые стили, описанные, допустим, в классе feature-kitten , применились к тегу
, то в разметке напишем так:
CSS-правила
Можно сказать, что CSS-правило — это группа свойств и их значений, которая целиком применяется к тем тегам, на которые указывает селектор.
И выглядит это так:
селектор
Задавать стили можно не только с помощью атрибута class , но и по тегам. Селектор указывает, к каким тегам применятся свойства из CSS-правила. Селекторы по тегам работают проще всего: они выбирают все теги с подходящим именем.
В примере селектором является p , и он выбирает все теги с именем p (то есть теги
), а теги с другим именем, например h1 , не выбирает.
Когда же стилизация задаётся по классам, то стили применяются только к тегам с такими классами.
.название_класса
Миксование классов
У HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:
Обычно миксование используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации.
Комментарии
В CSS тоже существуют комментарии, их отличие от HTML-комментариев в том, что код или подсказки пишутся между символами /* и */ .
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram
HTML и CSS что это?
HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) — два основных языка, используемых в веб-разработке.
HTML — это язык разметки, используемый для создания структуры и содержимого веб-страниц. Он состоит из ряда тегов и атрибутов, определяющих различные элементы веб-страницы, такие как заголовки, абзацы, ссылки, изображения и формы. HTML является основой любой веб-страницы и обеспечивает структуру и содержимое, которые пользователь видит на своем экране.
CSS, с другой стороны, представляет собой язык таблицы стилей, используемый для описания представления и макета веб-страницы. Он позволяет веб-разработчикам применять визуальные стили, такие как стили шрифтов, цвета и макеты, к структуре HTML, созданной с помощью HTML. CSS можно использовать для создания адаптивного и удобного для мобильных устройств дизайна, а также для управления расположением различных элементов на веб-странице.
Вместе HTML и CSS составляют основу большинства современных веб-разработок. Они используются для создания статических веб-страниц, а также динамических веб-приложений и являются важными навыками для всех, кто интересуется веб-разработкой.
Основные теги и атрибуты HTML
HTML (язык гипертекстовой разметки) — это стандартный язык разметки, используемый для создания веб-страниц. Теги HTML используются для определения элементов на веб-странице, а атрибуты HTML используются для предоставления дополнительной информации об этих элементах. Вот некоторые из самых основных тегов и атрибутов HTML:
Теги:
- : определяет корень HTML-документа.
- : содержит информацию о документе, такую как заголовок, метаданные и ссылки на таблицы стилей.
- : определяет заголовок документа, который отображается в строке заголовка браузера.
- : содержит основное содержимое документа.
- От до : определение заголовков разного размера.
- : определяет абзац
- : создает гиперссылку
- : вставляет изображение
- : создает неупорядоченный список
- : создает упорядоченный список
- : определяет элемент списка
- : создает таблицу
- : определяет строку таблицы
- : определяет ячейку таблицы
- : определяет раздел документа
- : определяет небольшой раздел документа
Атрибуты:
- id: предоставляет уникальный идентификатор для элемента
- class: определяет имя класса для элемента, который можно использовать для применения стилей через CSS.
- style: применяет встроенные стили CSS к элементу
- src: указывает исходный URL-адрес изображения.
- href: указывает целевой URL-адрес гиперссылки
- alt: предоставляет альтернативный текст для изображения (если его нельзя отобразить)
- width и height: укажите размеры изображения
- colspan и rowspan: объединить ячейки таблицы по горизонтали и вертикали соответственно
- title: предоставляет всплывающую подсказку для элемента при наведении на него указателя мыши
- target: указывает, где должен быть открыт пункт назначения гиперссылки (например, в новой вкладке)
Основные стили CSS
Вот несколько основных стилей CSS, которые вы можете использовать для стилизации HTML-элементов:
- Color: устанавливает цвет текста элемента.
- color: #000000; /* black */
- Font family: устанавливает шрифт для текста элемента.
- font-family: Arial, sans-serif;
- Font size: устанавливает размер текста элемента.
- font-size: 16px;
- Background color: устанавливает цвет фона элемента.
- background-color: #FFFFFF; /* white */
- Border: устанавливает границу вокруг элемента
- border: 1px solid #000000; /* 1px solid black */
- Margin: устанавливает пространство за границей элемента.
- Padding: задает расстояние между содержимым элемента и его границей.
- Width and height: устанавливает ширину и высоту элемента.
- width: 200px;
- height: 100px;
- Text alignment: устанавливает выравнивание текста внутри элемента.
- text-align: center;
- Display: устанавливает способ отображения элемента.
- display: block; /* or inline or none, etc. */
Обучение фронтенд разработке в DL Academy
Курсы программирования в DL Academy дают редкую возможность совмещать очные занятия у практикующих программистов и консультации с наставниками в процессе работы над домашними заданиями. Более подробную информацию о стоимости курса, программе скидок и прочим условиям можно получить у специалистов DL Academy по телефону 8 (991) 396 36 86 или через контактную форму на сайте.
Учимся верстать: что такое CSS
Всё, что ваш браузер может выводить на экран или запускать называется фронтендом, то есть это HTML, CSS и JavaScript. Сегодня разбираемся для чего нужна и как работает каскадная таблица стилей (CSS).
Анатолий Ализар
Пишет про разработку в Skillbox Media. Работал главным редактором сайта «Хабрахабр», ведёт корпоративные блоги.
CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык описания внешнего вида HTML-документа. Это одна из базовых технологий в современном интернете. Практически ни один сайт не обходится без CSS, поэтому HTML и CSS действуют в единой связке.
Каскадные таблицы стилей работают с HTML, но это совершенно другой язык. HTML структурирует документ и упорядочивает информацию, а CSS взаимодействует с браузером, чтобы придать документу оформление.
На языке HTML мы создаем размеченный текст — документ с гиперссылками, таблицами, маркированными списками, разными начертаниями шрифтов, заголовками, подзаголовками и так далее. Получаем «простыню» текста с таблицами и иллюстрациями. Интернет изобрели ученые, и для них такое положение вещей было приемлемым. Но все изменилось, когда WWW пошел в массы и свои странички начали создавать простые пользователи, которые хотели индивидуальности и самовыражения, а также коммерческие компании со своими корпоративными стандартами оформления. В общем, веб-страницам понадобилось индивидуальное оформление: стиль.
Поэтому берем HTML-основу — и подключаем к ней стиль CSS. С помощью CSS красиво оформляем существующий текст, то есть прописываем уникальные свойства элементам HTML.
Для чего нужна каскадная таблица стилей
Вспомним, как все начиналось. Первая версия стандарта CSS опубликована 17 декабря 1996 года. Основной посыл — добавить оформление документа без программирования или сложной логики. Оформление — это цвета, шрифты, расположение отдельных блоков на странице и т.д.
В таблице стилей мы прописываем стили (правила) оформления. Каждое правило состоит из селектора и блока объявлений. Селектор определяет, на какие части документа распространяется правило. Блок объявлений помещается в фигурные скобки и состоит из одного или более объявлений, разделенных точкой с запятой. На самом деле это очень просто. Вот как выглядит простейшее правило с двумя свойствами для двух селекторов в таблице стилей:
Как видите, CSS просто указывает стиль оформления для элементов HTML и всего документа в целом. Это поля, особые шрифты для заголовка, подзаголовков и основного текста, цвет фона и так далее. Непросто подобрать все эти значения, чтобы было красиво. Но зато здесь открывается простор для творчества.
Сам язык CSS очень простой. Точнее, он был достаточно прост в начале. Предполагалось, что владелец существующего сайта просто подключит стиль — и получит «конфетку» HTML+CSS с красивым оформлением. Затем при необходимости легко и быстро изменит оформление сайта, немного отредактировав файл CSS. Но потом начались сложности.
Разделение контента (HTML) и представления (CSS)
Сама концепция CSS подталкивала к идее полностью разделить контент и оформление документа.
В древние времена верстку документа выполняли HTML-таблицами. Например, если вы хотели боковое меню или сайт в три колонки, то создавали в HTML таблицу с колонками соответствующей ширины и прозрачными границами. Для «раздувания» отдельных ячеек таблицы вставлялись прозрачные картинки. В общем, было много интересных «костылей».
Проблема в том, что при верстке таблицами оформление привязывалось к контенту, то есть при изменении контента часто приходилось менять оформление, переверстывать эти бесконечные таблицы. Это сводило с ума дизайнеров. Они с облегчением вздохнули, когда появился CSS.
Выше приведен пример простого использования CSS. Важно заметить, что CSS изначально не был спроектирован для верстки и макетирования, а только для оформления страницы. Однако веб-дизайнеры и верстальщики уже не могли остановиться.
Макеты на основе CSS float
Первые макеты на CSS использовали свойство CSS float, хотя первоначально его ввели для размещения изображения внутри колонки текста слева или справа. Веб-дизайнеры и верстальщики придумали способ, как создавать CSS для простых макетов с колонками.
В этом случае HTML размечается следующим образом:
Макеты на основе CSS flexbox
Свойство CSS flexbox предложили в 2009 году, и оно получило широкую поддержку в браузерах примерно к 2015 году. Это свойство определяет, как распределяется пространство в одной колонке или строке, то есть оно изначально уже «заточено» на верстку. Так макетирование страниц значительно упростилось. То, что раньше требовало специальных хитростей и различных трюков, на Flexbox стало выполняться гораздо проще и логичнее.
Flexbox элегантно решил классическую задачу с трехколоночной версткой, как в примере выше. Более того, Flexbox открыл новую эру адаптивной верстки — сайтов, которые разрабатываются с прицелом на мобильные устройства и хорошо смотрятся на экранах любого размера, то есть в любой величине окна браузера.
Макеты на основе CSS grid
Наконец, в 2011 году было предложено свойство CSS grid, которое сейчас поддерживается большинством браузеров. Самое главное, что благодаря CSS grid стало возможно полностью отказаться от элементов верстки типа , которые приходилось раньше добавлять в HTML. Теперь вся верстка и оформление выполняются средствами CSS.
CSS grid можно назвать идеальным способом верстки. Наконец достигнута изначальная цель полного разделения содержания (HTML) и оформления (CSS).
Будущее за CSS3
Cascading Style Sheets3 (CSS3) — третье поколение стандарта CSS, которое сейчас находится в активной разработке. Как HTML5 для HTML, так и CSS3 для CSS стал самой масштабной ревизией в истории стандарта.
В отличие от предыдущих версий, спецификация разбита на модули, разработка и развитие которых идут независимо. То есть CSS3 — это тоже не просто стандарт, а «набор технологий», как и HTML5. Эти технологии понемножку проникают в браузеры. Каждая новая версия Chrome или Firefox поддерживает какой-то новый кусочек CSS3, несколько новых свойств. То есть с каждым месяцем расширяются наши возможности по оформлению документов.
За ходом разработки CSS3 можно следить на странице Консорциума W3C. Кстати, уже началась разработка стандарта CSS4, но пока все его спецификации находятся в статусе черновиков.
Методологии CSS
Мы разобрались, что делает CSS. Однако профессиональная работа с этим языком на больших кодовых базах невозможна без специального инструментария и стандартов написания CSS, чтобы код был поддерживаемым и его могли использовать в коллективной работе. Такие рекомендации по написанию называются методологиями CSS.
Нет одной общепринятой методологии CSS. Их несколько, а со временем возможно появление новых. Когда вы освоите сам язык, то начнете разбираться в методологиях — и перед вами откроется совершенно новый мир, в котором кипит жизнь, бурлят обсуждения на форумах, сталкиваются непримиримые точки зрения, рождаются и умирают, сродни религиозным культам, новые методологии.
Например, в последние несколько лет появились и набрали силу две: Atomic CSS (Functional CSS) и CSS в JS. Первая базируется на идее создания маленьких узкоспециализированных классов с названиями, которые основаны на визуальной функции, а вторая — на определении стилей CSS не в отдельной таблице стилей, а прямо внутри каждого компонента. Обе явно противоречат устоявшимся лучшим практикам CSS, но, возможно, со временем и сами станут «лучшими практиками».
Читайте также:
- Что нельзя сделать без JavaScript
- Нужен ли программисту английский?
- Как адаптировать сайт под разные разрешения
HTML/CSS — Введение в тестирование веб-приложений
Мы знаем, что кроссбраузерность и адаптивность отвечают за внешний вид сайта на разных устройствах и браузерах. Настало время поговорить о языках, с помощью которых браузеры выводят информацию и стилизуют ее. Для этого в веб-разработке используется два основных языка:
В этом уроке разберем, за что отвечает каждый из языков, и как с помощью встроенных в браузер инструментов увидеть и протестировать код на этих языках.
Языки HTML и CSS
Посмотрите на страницу, на которой вы читаете этот текст. Вы видите сам текст, иногда появляются изображения, в правой панели располагаются элементы управления.
Чтобы браузер мог вывести эти данные, используется язык HTML — Hyper Text Markup Language или язык разметки гипертекста. Про понятие гипертекста мы поговорим в одном из следующих уроков, а пока остановимся на языке разметки. В этом понятии нет словосочетания «язык программирования», так как HTML предназначен для разметки данных.
Хекслет — онлайн-школа программирования В нашей школе вы можете изучить: HTML/CSS JavaScript PHP Python и многое другое Это простой пример HTML разметки, в которой есть:
- Заголовок первого уровня с текстом «Хекслет — онлайн-школа программирования»
- Один параграф с текстом «В нашей школе вы можете изучить:»
- Список из пяти элементов
Основа всей разметки — текст. Чтобы браузер мог отличить обычный текст от заголовка или списка, используются специальные конструкции — теги. Например, чтобы сказать браузеру, что нужно обработать текст как заголовок первого уровня, используется тег .
Подробнее про теги, их роль и применение вы можете узнать из бесплатного курса Основы современной верстки.
HTML не выводит данные и ничего с ними не делает. Он лишь указывает браузеру или другой программе, как обработать данные. Если у браузера нет правил для вывода заголовков, то он их и не отобразит.
За то, как будет выведен элемент на странице, отвечает язык CSS — Cascading Style Sheets или каскадные таблицы стилей. Это обычный набор правил. Они говорят браузеру о том, какого размера будет элемент, какой у него будет цвет, шрифт, заливка и так далее.
У каждого браузера свой начальный набор таких стилей для каждого из элементов. У стандартных стилей нет четких правил, поэтому каждый браузер может выводить одинаковые элементы по-разному. По этой причине, а также из-за поддержки новых правил тестировщику важно помнить о кроссбраузерности.
Если хотите узнать больше о CSS и его особенности, можете пройти тот же курс Основы современной верстки. В нем помимо HTML есть основы работы с CSS.
Разберемся, как можно проверить верстку и увидеть разметку и стили на любом сайте.
Инструменты разработчика
У всех браузеров есть встроенные веб-инспекторы, которые еще называются инструментами разработчика. Хоть это и инструменты разработчика, но функционал очень полезен и для тестировщиков. Так выглядят базовые моменты, которые можно сделать с помощью инструмента разработчика:
- Проверить HTML и CSS любой страницы
- Временно добавить новые блоки или стили без необходимости разворачивания сайта на своем компьютере
- Протестировать JavaScript код, найти в нем ошибки или вывести промежуточные результаты в специальную консоль
- Получить данные обо всех запросах, которые происходят на сайте. Узнать, какие данные на сайт приходят и какие данные куда уходят
- Проверить скорость загрузки страницы. Найти скрипты или запросы, которые долго выполняются
- Протестировать адаптивность сайта на самых разных разрешениях
Разберем некоторые функции на примере инструмента Developer Tools, который доступен в браузере Firefox:
Чтобы открыть инструмент разработчика, используется один из двух путей:
- Навести курсор мыши на любой элемент страницы, кликнуть правой кнопкой и выбрать пункт Inspect . В русской локализации «Посмотреть код элемента» или «Исследовать Элемент»
- Использовать комбинацию клавиш Ctrl + Shift + I или клавишу F12
После открытия инструмента разработчика на экране появятся вкладки. Разберем, что в них можно делать.
Вкладки для работы с HTML и CSS
Первая вкладка, которая открывается по умолчанию в инструментах разработчика, отвечает за работу с HTML и CSS. Эта панель разбита на две части:
- Верхняя панель показывает структуру HTML со всеми классами, атрибутами, значениями и вложенными элементами. Можно открывать и закрывать вложенные элементы и так ориентироваться по странице. Когда мы наводим курсор на любой из HTML-элементов, то он подсвечивается, как на изображении выше
- Нижняя панель показывает весь CSS-код, который применяется к выбранному элементу
Любой элемент или CSS-код можно изменять. В тестировании это полезно при изменении текста, например, чтобы проверить длинный текст в блоке. Для примера я изменил текст в кнопке на главной странице. Так можно проверить, что кнопка правильно отреагирует на длинный текст и растянется под его размер:
Чем больше вы будете изучать HTML и CSS, тем больше возможностей по тестированию приложений можно открыть для себя.
Вкладки для работы с JavaScript
Рядом со вкладкой для работы с HTML и CSS располагается вкладка Console. В ней происходит взаимодействие с языком JavaScript. В эту вкладку попадают все сообщения от приложения, которые, например, выводятся с помощью функции console.log() :
В этой вкладке вы можете:
- Посмотреть на все ошибки приложения, если они есть
- Вывести промежуточные результаты работы JavaScript с помощью функции console.log()
- Писать свой код на JavaScript
Написание своего кода полезно при тестировании, например, чтобы найти все ссылки на странице. Можно поискать их самостоятельно, а можно с помощью JavaScript получить все ссылки в консоль.
Попробуйте открыть инструмент разработчика. Для этого нужно перейти на любой сайт и вставить следующий код во вкладку Console:
const links = document.querySelectorAll('a') linksЭтот простой код выберет все элементы с тегом на текущей странице. Тег служит для разметки ссылок:
В будущих уроках разберем больше вкладок в инструментах разработчика и узнаем, какие еще возможности для тестирования есть у встроенных средств браузеров.
Для закрепления материала скачайте несколько разных браузеров и посмотрите на устройство вкладок для работы с HTML, CSS и JavaScript в них.
Вы можете использовать инструмент разработчика на любом сайте, так как работа в нем не влияет на работоспособность ресурса. Можете открыть инструмент разработчика на странице этого урока и посмотреть, как выглядит HTML, какие CSS стили применяются, какие ошибки и уведомления появляются в консоли, если они есть.
Инструмент разработчика не изменяет данные на сайте, они хранятся до первой перезагрузки страницы, поэтому не бойтесь экспериментировать и смотреть на интересные моменты разных сайтов. Верстальщики часто пользуются этой возможностью, чтобы посмотреть на верстку разных элементов.
Выводы
В этом уроке мы узнали, что за отображение информации на странице отвечают два языка: HTML и CSS. Язык разметки HTML помогает браузеру отличать элементы друг от друга. Он указывает, что является заголовком, ссылкой, параграфом. CSS позволяет стилизовать контент на странице: добавить цвета, изменить шрифт, расположить элементы на странице.
Так же мы изучили первые базовые вещи при работе с инструментами разработчика. Научились открывать его, просматривать HTML, CSS и изменять их. Узнали о вкладке Console, в которой отображаются ошибки JavaScript.
В будущих уроках мы еще не раз вернемся к инструментам разработчика. Мы научимся управлять размером окна браузера, эмулировать разную скорость работы интернета и просматривать запросы, которые отправляет и получает сайт.
Дополнительные материалы
- Введение в HTML
- Основы CSS
- Chrome DevTools
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях: