Css html: Тренажёр «Знакомство с HTML и CSS» — HTML Academy

06.07.2023 alexxlab

Содержание

HTML/CSS | Введение в тестирование веб-приложений

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Видео может быть заблокировано из-за расширений браузера. В статье вы найдете решение этой проблемы.

Мы знаем, что кроссбраузерность и адаптивность отвечают за внешний вид сайта на разных устройствах и браузерах. Настало время поговорить о языках, с помощью которых браузеры выводят информацию и стилизуют ее. Для этого в веб-разработке используется два основных языка:

HTML
CSS

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

Языки HTML и CSS

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

Чтобы браузер мог вывести эти данные, используется язык HTML — Hyper Text Markup Language или язык разметки гипертекста. Про понятие гипертекста мы поговорим в одном из следующих уроков, а пока остановимся на языке разметки. В этом понятии нет словосочетания «язык программирования», так как HTML предназначен для разметки данных.

Приведем пример:

<h2>Хекслет — онлайн-школа программирования</h2>
<p>В нашей школе вы можете изучить:</p>
<ul>
  <li>HTML/CSS</li>
  <li>JavaScript</li>
  <li>PHP</li>
  <li>Python</li>
  <li>и многое другое</li>
</ul>

Это простой пример HTML разметки, в которой есть:

Заголовок первого уровня с текстом «Хекслет — онлайн-школа программирования»
Один параграф с текстом «В нашей школе вы можете изучить:»
Список из пяти элементов

Основа всей разметки — текст. Чтобы браузер мог отличить обычный текст от заголовка или списка, используются специальные конструкции — теги. Например, чтобы сказать браузеру, что нужно обработать текст как заголовок первого уровня, используется тег <h2></h2>

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

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

Этот простой код выберет все элементы с тегом <a></a> на текущей странице. Тег <a></a> служит для разметки ссылок:

В будущих уроках разберем больше вкладок в инструментах разработчика и узнаем, какие еще возможности для тестирования есть у встроенных средств браузеров.

Для закрепления материала скачайте несколько разных браузеров и посмотрите на устройство вкладок для работы с HTML, CSS и JavaScript в них.

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

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

Выводы

В этом уроке мы узнали, что за отображение информации на странице отвечают два языка: HTML и CSS. Язык разметки HTML помогает браузеру отличать элементы друг от друга. Он указывает, что является заголовком, ссылкой, параграфом. CSS позволяет стилизовать контент на странице: добавить цвета, изменить шрифт, расположить элементы на странице.

Так же мы изучили первые базовые вещи при работе с инструментами разработчика. Научились открывать его, просматривать HTML, CSS и изменять их. Узнали о вкладке Console, в которой отображаются ошибки JavaScript.

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

Дополнительные материалы

Введение в HTML
Основы CSS
Chrome DevTools

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов

Электронная почта *

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

какие символы можно использовать в названиях классов CSS / Хабр

В языке HTML у HTML-элементов есть атрибуты. Некоторые атрибуты есть только у отдельных HTML-элементов, а другие — есть у любого HTML-элемента. Последние называют глобальными атрибутами. К любому HTML-элементу можно привязать один или несколько классов CSS, определяющих разные стили для данного HTML-элемента. Для этого у HTML-элемента существует глобальный атрибут

class. Этот атрибут по правилам языка HTML не обязательно определять для всех HTML-элементов на HTML-странице, можно определить только для тех, для которых это будет нужно.

Например (несущественный сейчас код я заменил многоточиями):

...
<head>
  ...
  <style>
    .class-name1 { border: 2px solid blue; }
    .class-name2 { color: red; }
  </style>
</head>
<body>
  <p>
    Ночь, улица, фонарь, аптека.
  </p>
</body>
...

В примере выше к HTML-элементу p привязано два класса CSS с названиями class-name1 и class-name2. Первый из этих классов CSS определяет для HTML-элемента p границу (ее толщину, вид линии границы, цвет границы), а второй — цвет текста внутри этого HTML-элемента. Эти же классы CSS можно привязать к другим HTML-элементам на HTML-странице.

Если к одному HTML-элементу привязано несколько классов CSS, то все они указываются в одном и том же атрибуте class данного HTML-элемента. При этом названия классов CSS отделяются друг от друга пробельными символами (пробелами, символами горизонтальной табуляции, символами новой строки).

При разборе кода HTML-страницы возникает вопрос: какие символы можно использовать в названиях классов CSS? Например, можно ли названия классов писать по-русски? Или китайскими иероглифами? Или с помощью эмодзи?

С точки зрения языка HTML

С точки зрения языка HTML в данном случае речь идет о значении глобального атрибута class. Это значение определяется в нескольких местах действующего стандарта языка HTML.

С точки зрения синтаксиса языка HTML значение любого атрибута HTML-элемента определяется так (источник цитаты):

Attribute values are a mixture of text and character references, except with the additional restriction that the text cannot contain an ambiguous ampersand.

Грубо говоря, значение атрибута — это смесь текста (символы Юникода) с возможными вкраплениями ссылок на символы вида ю (это пример ссылки на строчную русскую букву «ю»). Там куча всяких ограничений и оговорок, про которые я тут писать не буду, кому интересно — стоит пройти по вышеуказанным гиперссылкам и далее вглубь стандарта.

С точки зрения построения DOM (объектной модели HTML-страницы) значение атрибута class определяется так (источник цитаты):

When specified on HTML elements, the class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

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

Как видим, действующий стандарт HTML не накладывает каких-то строгих ограничений на названия классов CSS. В названиях классов CSS запрещены лишь пробельные символы (пробелы, символы горизонтальной табуляции, символы новой строки) и только (там есть ряд редких исключений для разных управляющих символов и тому подобного, о чем я тут писать не буду). Можно писать эти названия по-русски, а также китайскими иероглифами или даже с помощью эмодзи. Разрешается использовать почти любые символы Юникода, имеющие графическое отображение (символы, не имеющие графического отображения, тоже можно попытаться использовать, но в этом нет смысла, так как эти символы не видно).

С точки зрения языка CSS

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

Для вопроса, заданного в названии этой статьи, важны два модуля (спецификации): определяющий селекторы и работу с ними, а также модуль, определяющий синтаксис языка CSS.

В языке CSS стилевые правила задаются с помощью так называемых «селекторов» (по-английски «selector»). Дословно это слово по-русски означает «отборщик» или «выборщик», потому что селектор отбирает (выбирает) из HTML-дерева узлы с указанным условием. Селекторы в CSS бывают очень разные, отбор происходит по разным условиям. Нас сейчас интересуют селекторы по классу (по-английски «class selector»). Селекторы по классу являются подвидом селекторов по атрибуту (по-английски «attribute selector»), так как класс в языке HTML является атрибутом HTML-элементов.

Вот ссылка на определение селектора в стандарте CSS (источник цитаты):

A selector represents a particular pattern of element(s) in a tree structure. The term selector can refer to a simple selector, compound selector, complex selector, or selector list. The subject of a selector is any element that selector is defined to be about; that is, any element matching that selector.

Следующий параграф стандарта дает определение «простому селектору» (по-английски «simple selector», источник цитаты):

A simple selector is a single condition on an element. A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class is a simple selector. (It is represented by <simple-selector> in the selectors grammar.) A given element is said to match a simple selector when that simple selector, as defined in this specification and in accordance with the document language, accurately describes the element.

Из этой цитаты видно, что понятие «простой селектор» включает, в частности, понятие «селектора по атрибуту» и «селектора по классу». Это определение отправляет нас в раздел грамматики селекторов.

Пройдем по ссылке и найдем определение селектора по классу:

<class-selector> = '.' <ident-token>

Эта схема читается так: селектор по классу начинается с символа точки, после которого сразу же (без разделяющих пробельных символов) идет идентификатор (название) класса (ident-token).

Вот этот самый «ident-token» (идентификатор) уже определен в другом модуле (спецификации) стандарта CSS, посвященном синтаксису (источник цитаты):

<ident-token>, <function-token>, <at-keyword-token>, <hash-token>, <string-token>, and <url-token> have a value composed of zero or more code points.

Напомню, под «кодовыми точками» (кодовыми позициями) подразумеваются символы Юникода (определение есть по вышеуказанной ссылке).

Таким образом, можно сделать вывод, что язык CSS тоже не накладывает особых ограничений на символы, использующиеся в названиях классов. Это означает, что, продолжая вывод по языку HTML, названия классов CSS можно писать на русском языке, китайскими иероглифами или с помощью эмодзи (это, естественно, не исчерпывающий список, а просто несколько ярких примеров).

Конечно, следует иметь в виду, что в языке CSS есть множество служебных символов, вроде скобок разных видов, кавычек разных видов, символа точки и тому подобных. Но их таки можно представить в названии класса с помощью экранирования символов. Экранирование выполняется с помощью символа обратной косой черты (в Юникоде — «reverse solidus») — \. После этого символа можно вписать любой служебный символ и он будет интерпретирован как обычный символ, а не как служебный. Также после символа обратной косой черты можно вписать не сам символ, а его код в шестнадцатеричной системе.

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

Выводы и примеры

Эта статья не является исчерпывающим руководством! В стандартах есть множество разных редких правил и исключений. Все эти исключения невозможно описать в одной статье. В этой статье я просто хотел показать, что актуальные на сегодня стандарты HTML и CSS не ограничивают использование символов в названиях классов только латиницей (в интернетах часто можно встретить такое утверждение даже на относительно надежных ресурсах).

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

Один из примеров такого подхода — методология БЭМ (расшифровывается как «Блок, Элемент, Модификатор»). Цитата из соглашения по именованию этой методологии (это лишь фрагмент, продолжение я заменил многоточием):

– Имена записываются латиницей в нижнем регистре.
– Для разделения слов в именах используется дефис (-).
…

Я согласен, что это правильный подход (по многим причинам, которые я не буду излагать в этой статье). Однако, следует иметь в виду, что это всё-таки рекомендация (или требование корпоративных соглашений), а не требование стандартов HTML или CSS.

Примеры необычных имен классов CSS (не стоит этим злоупотреблять, но полезно знать, что такое возможно):

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8" />
  <title>Тестовая страница</title>
  <meta name="viewport" content="width=device-width, initial-scale=1. 0" />
  <style>
    .имя-класса { border: 2px solid blue; }     /* на русском языке */
    .类名 { color: red; }                       /* на китайском языке */
    .\1F60E\1F60D { background-color: yellow; } /* символы-эмодзи */
    .имя-со-служебным\#-символом { font-style: italic; }
    .\31имя-класса-начинающееся-с-цифры { border: 5px solid green; }
  </style>
</head>
<body>
  <p>
    Ночь. Улица. Фонарь. Аптека.
    Всё как у Блока. В поздний час
    Я встретил злого человека
    И получил фонарь под глаз.
  </p>
  <p>
    Потом примочки ставил лекарь,
    Меня в аптеку посылал...
    Ночь, улица, фонарь, аптека —
    Откуда ж Блок всё это знал?!
    (Автор пародии: Сергей Матвеенко.)
  </p>
</body>
</html>

Проверено валидатором HTML (весь этот файл), валидатором CSS (содержимое HTML-элемента style) и работает в браузерах «Microsoft Edge» (на движке «Chromium») и «Google Chrome».

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

Обратите внимание, что в коде на языке CSS символ решетки # (служебный для языка CSS) экранируется символом \, а при использовании этого символа в названии класса в коде на языке HTML — не экранируется (в языке HTML другой состав служебных символов для имен классов и там свой метод экранирования).

Кроме того, в коде на языке CSS цифру 1 в начале названия класса пришлось экранировать последовательностью \31, а не просто последовательностью \1 из-за того, что цифры после символа \ интерпретируются в CSS как шестнадцатеричный код символа Юникода, а не как числовой литерал.

Также в коде на языке CSS пришлось символы-эмодзи представить в виде их шестнадцатеричных кодов. Браузеры справляются, даже если в коде на языке CSS здесь указать символы-эмодзи напрямую, но вышеуказанные валидаторы (и для HTML, и для CSS) показывают ошибку (для шестнадцатеричных кодов ошибку не показывают).

И, наконец, в коде выше продемонстрировано, что названия классов CSS внутри атрибута class можно разделять не только пробелами, но и символом новой строки (или символом горизонтальной табуляции, но это здесь не показано).

Заключение

Информация, изложенная в этой статье, может пригодиться при написании парсера HTML, валидаторов HTML и CSS, просто при написании HTML-страниц. В интернетах по этому поводу много ссылок на устаревшие стандарты HTML и CSS (это и понятно, современные стандарты называют «живыми» (по-английски «living»), потому что они меняются очень быстро по сравнению с тем, как это было устроено раньше).

Изучите HTML CSS

Самый простой способ выучить

семантику и доступный HTML и CSS шаг за шагом.

Учитесь в интерактивной среде.
Читайте короткие уроки, делайте заметки и выполняйте задания прямо в браузере.

Попробуйте →

Анонимные файлы cookie используются для повышения качества курса.

Пришло время изучить

HTML CSS с
правильной семантикой и доступностью.

Изучите HTML CSS с нуля и попрактикуйтесь в интуитивно понятной среде. На протяжении этого курса вы узнаете о семантике и доступности.

Вы будете читать короткие уроки и решать задачи и проекты шаг за шагом. Попробуйте первые 50 уроков, задач и карточек бесплатно. Вы можете перейти на учетную запись Pro с единовременным платежом, который дает вам доступ на 5 лет.

Изучение HTML CSS подходит как для начинающих, так и для опытных разработчиков, которые хотят правильно изучить HTML CSS.

Чему вы научитесь

Этот курс охватывает HTML и CSS с нуля. Хотя вы можете легко получить результат на экране с помощью HTML и CSS, важно иметь правильную семантику и доступность.

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

Уроки и задачи шаг за шагом проведут вас по этим темам:

Доступность
Семантика
Заголовки
Метатеги
Семантические элементы
Несемантические элементы
Проверка HTML
Направление слева направо
Горизонтальный режим письма
Режим чтения
DevTools (проверка)
Изображения
Шрифты
Единицы
Отзывчивость
Блочные модели
Селекторы
Сворачивающиеся поля
CSS (ось) Сокращения
Anchors
UI Kit
Доступность цвета
Пользовательские свойства
Flex
Сетка
Позиционирование
Формы
Переменный шрифт s
Контексты стека
Контейнерные запросы
Scroll Snap
Адаптивные утилиты
Многое другое . ..

Реальные проекты

Чтобы применить полученные знания, у нас есть для вас 2 проекта. Эти 2 проекта повторяются на протяжении всего курса, помогая вам применить полученные знания.

После прохождения курса вы сможете использовать эти проекты в своей (необразовательной) работе.

HTML Карточки CSS

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

Повторение с интервалами оказалось более эффективным методом обучения.

Что говорят люди

Тодд 🦞

@toddlibby

Это то, о чем я говорю уже пару недель. Такое образование крайне необходимо в развитии.

Брайан Хинтон 🐧

@RealTinyPenguin

Я занимаюсь кодированием и более 20 лет, и я до сих пор учусь понемногу из курса @JoubranJad #learnhtmlcss. Хорошее напоминание о том, что мы все забываем основные вещи с годами и никогда не должны прекращать учиться.

Об инструкторе

Джад Джубран — эксперт Google по разработке, самый ценный профессионал Microsoft (2019–2022) и внештатный консультант по веб-производительности из Амстердама.

Его страсть к JavaScript привела его к созданию и разработке наиболее интерактивных пошаговых курсов по JavaScript, React, основам программирования и HTML CSS.

Зачем изучать HTML CSS с помощью этого курса?

Уроки

Чтение кратких уроков
Сохранение заметок в уроках
Экспорт и печать заметок
Прочитать краткий обзор изученных тем
Рекомендуемые популярные моменты
Прочитать краткий обзор каждого урока

Практика

Практика прямо в браузере
Решайте интерактивные задачи
Решение реальных задач проекты
Продолжить на телефоне
Сравните с официальным решением

Карточки

Освежите память
Учитесь на ходу
Польза от интервального повторения
Обзор по главам
Поддержание полосы прогресса
200+ карточек

Современный

Цены

Бесплатная пробная версия

Попробуйте первые 50 уроков, заданий, проектов (первые 15 глав) и карточки бесплатно. Нет ограничения по времени.
Для остальных глав требуется учетная запись PRO.

Разовый платеж

Мы не любим подписки. Вот почему Learn HTML CSS PRO можно разблокировать за один платеж, который дает вам доступ на 5 лет.
Проверить страницу оплаты. Мы рекомендуем пройти бесплатную пробную версию перед обновлением.

Самый простой способ выучить

семантику и доступный HTML CSS шаг за шагом

Присоединяйтесь к более чем 125 000 учащихся.

Попробуйте →

Основы HTML5 и CSS | edX

Доступна одна сессия:

399 105 уже зарегистрированы!

Я хотел бы получать электронные письма от W3Cx и узнавать о других предложениях, связанных с основами HTML5 и CSS.

Об этом курсе

Чему вы научитесь

Преподаватели

Как пройти этот курс

edX для бизнеса

6 недель

4–6 часов в неделю

Самостоятельный темп

Прогресс в вашем собственная скорость

Бесплатно

Доступно дополнительное обновление

Доступен один сеанс:

Я хотел бы получать электронные письма от W3Cx и узнавать о других предложениях, связанных с основами HTML5 и CSS.

Основы HTML5 и CSS

Этот курс является частью профессионального сертификата W3C «Front-End Web Developer».

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

К концу курса вы должны понимать все основные элементы — от заголовков и ссылок до изображений и боковых панелей — и создать базовую структуру для своего собственного веб-сайта.

Первоначально этот курс был разработан Дейлом А. Схоутеном, Анушей Мутией и Кристофером Перкинсом в рамках партнерства между W3C и Intel®.

Краткий обзор

Учреждение: W3Cx
Предмет: Информатика
Уровень: Вводный
Требования:
Нет

Язык: английский
Расшифровка видео: английский
Связанные программы:
- Профессиональный сертификат Front-End Web Developer
Сопутствующие навыки: веб-стандарты, каскадные таблицы стилей (CSS), Look And Feel, Front End (программная инженерия), HTML5, веб-дизайн, веб-разработка

Как написать веб-страницу
Концепции языка разметки
Основы HTML5 и CSS
Веб-дизайн и стиль
Макет страницы и flexbox

Модуль 1: Моя первая веб-страница
— Большая тройка: HTML5, CSS и JavaScript
— Элементы, теги и атрибуты
— Кодировка символов
— Передовой опыт

Модуль 2: Атрибуты, изображения и ссылки
— Атрибуты
— Семантическое значение
— Изображения
— Гиперссылки

Модуль 3: Добавление стиля с помощью CSS 902 08
— Базовый синтаксис CSS
— Свойства CSS
— Списки и селекторы

Модуль 4: Исправление и отладка
— Инструменты отладки и HTML5
— Отладка и блочная модель CSS
— Отладка приоритета CSS 9

Хитрости CSS коробка
— CSS Grid
— Рецепт проект

Узнать больше
Инструктаж для экспертов
5 курсов повышения квалификации
Самостоятельный темп
Развивайтесь со своей скоростью
7 месяцев
5–7 часов в неделю
Выбери свой путь, когда захочешь рулон.

Css html: Тренажёр «Знакомство с HTML и CSS» — HTML Academy

HTML/CSS | Введение в тестирование веб-приложений

Языки HTML и CSS

Инструменты разработчика

Вкладки для работы с HTML и CSS

Вкладки для работы с JavaScript

Выводы

Дополнительные материалы

Остались вопросы? Задайте их в разделе «Обсуждение»

Открыть доступ

какие символы можно использовать в названиях классов CSS / Хабр

С точки зрения языка HTML

С точки зрения языка CSS

Выводы и примеры

Заключение

Изучите HTML CSS

Самый простой способ выучить

Пришло время изучить

Чему вы научитесь

Реальные проекты

HTML Карточки CSS

Что говорят люди

Тодд 🦞

Брайан Хинтон 🐧

Об инструкторе

Зачем изучать HTML CSS с помощью этого курса?

Уроки

Практика

Карточки

Современный

Бесплатная пробная версия

Разовый платеж

Самый простой способ выучить

Основы HTML5 и CSS | edX

Доступна одна сессия:

Доступен один сеанс:

Основы HTML5 и CSS

Краткий обзор

Добавить комментарий Отменить ответ