17 | Code Basics son lecciones prácticas gratuitas de programación para aquellos que comienzan desde cero.
18 |
19 |
20 | Si eres completamente nuevo y quieres aprender los fundamentos, como variables, cadenas, bucles, funciones, etc., entonces Code Basics es para ti.
21 |
22 |
23 | ```
24 |
25 | No te asustes por la cantidad de palabras y símbolos desconocidos, al final del curso entenderás cómo funciona el marcado que se muestra arriba y aprenderás a usarlo en tus propias páginas. Ten en cuenta que la esencia de este marcado es el texto. El resto son elementos auxiliares para mostrar el texto donde los diseñadores y/o desarrolladores lo han previsto.
26 |
27 | instructions: |
28 | Copia el HTML y pégalo en el editor de esta página
29 |
30 | ```html
31 |
Hello, World!
32 | ```
33 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Copy the HTML and paste it into the editor on this page
2 |
3 | ```html
4 |
Hello, World!
5 | ```
6 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/en/README.md:
--------------------------------------------------------------------------------
1 |
2 | Every day we look at dozens of web pages and read texts on them that are rendered as though they were in a magazine. These pages are hypertext - a system of web pages that can be navigated using links. A language, HTML, exists to implement this system.
3 |
4 | HTML stands for HyperText Markup Language. By its function, HTML is a set of rules by which the browser distinguishes headings from lists, tables from pictures, and so on. HTML appeared in 1993 and was intended to standardize the rules for displaying text within web pages.
5 |
6 |
7 | Even this page is text marked up using HTML and processed by the browser. Technology has come a long way, but the concept of using HTML to mark up text has remained unchanged for many years.
8 |
9 | Here is an example of HTML markup:
10 |
11 | ```html
12 |
13 |
Code Basics
14 |
15 | Code Basics - free hands-on programming lessons for people
16 | starting from scratch.
17 |
18 |
19 | If you are a complete beginner and want to learn the basics - variables,
20 | strings, loops, functions, etc., then Code Basics is for you.
21 |
22 |
23 | ```
24 |
25 | Don't be intimidated by all the confusing words and symbols - by the end of the course, you'll understand how the markup above works, and you'll learn how to use this markup on your own pages. Note that the whole essence of the markup above is text. The rest are auxiliary elements to display the text where it was conceived to be by the designers and/or developers.
26 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: The basics of HTML
3 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Copia el HTML y pégalo en el editor de esta página
2 |
3 | ```html
4 |
Hello, World!
5 | ```
6 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/es/README.md:
--------------------------------------------------------------------------------
1 | Todos los días vemos docenas de páginas web, leemos textos que se muestran como si fueran de revistas. Estas páginas son hipertexto, un sistema de páginas web que se pueden navegar mediante enlaces. Para implementar este sistema, existe el lenguaje HTML.
2 |
3 | HTML (HyperText Markup Language) es un lenguaje para marcar hipertexto. En términos de funcionalidad, HTML es un conjunto de reglas que permiten al navegador distinguir entre encabezados y listas, tablas e imágenes, entre otros. El lenguaje fue creado en 1993 con el objetivo de estandarizar las reglas para mostrar texto dentro de las páginas web.
4 |
5 | Incluso esta página es un texto que está descrito con HTML y procesado por el navegador. La tecnología ha avanzado mucho, pero el concepto de usar HTML para marcar texto sigue siendo el mismo después de muchos años.
6 |
7 | Aquí tienes un ejemplo de marcado HTML:
8 |
9 | ```html
10 |
11 |
Code Basics
12 |
13 | Code Basics son lecciones prácticas gratuitas de programación para aquellos que comienzan desde cero.
14 |
15 |
16 | Si eres completamente nuevo y quieres aprender los fundamentos, como variables, cadenas, bucles, funciones, etc., entonces Code Basics es para ti.
17 |
18 |
19 | ```
20 |
21 | No te asustes por la cantidad de palabras y símbolos desconocidos, al final del curso entenderás cómo funciona el marcado que se muestra arriba y aprenderás a usarlo en tus propias páginas. Ten en cuenta que la esencia de este marcado es el texto. El resto son elementos auxiliares para mostrar el texto donde los diseñadores y/o desarrolladores lo han previsto.
22 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Marcado HTML
3 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/index.html:
--------------------------------------------------------------------------------
1 |
Hello, World!
2 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Скопируйте HTML и вставьте его в редактор на этой странице
2 |
3 | ```html
4 |
Hello, World!
5 | ```
6 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/ru/README.md:
--------------------------------------------------------------------------------
1 | Каждый день мы смотрим на десятки интернет-страниц, читаем на них тексты, которые выводятся, как будто из журналов. Эти страницы представляют из себя гипертекст — систему интернет-страниц, по которым можно путешествовать с помощью ссылок. Для реализации этой системы существует язык HTML.
2 |
3 | HTML (HyperText Markup Language) — язык для разметки гипертекста. По своим функциям, HTML — набор правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. Язык появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.
4 |
5 | Даже эта страница является текстом, который описан с помощью HTML и обработан браузером. Технологии шагнули далеко вперёд, но концепция использования HTML для разметки текста остаётся неизменной и спустя много лет.
6 |
7 | Вот пример HTML разметки:
8 |
9 | ```html
10 |
11 |
Code Basics
12 |
13 | Code Basics — бесплатные практические уроки по программированию для тех,
14 | кто начинает с нуля.
15 |
16 |
17 | Если вы совсем новичок и хотите научиться основам — переменным,
18 | строкам, циклам, функциям и т.д., то Code Basics вам подойдёт.
19 |
20 |
21 | ```
22 |
23 | Не пугайтесь такого обилия непонятных слов и знаков — к концу курса вы будете понимать работу приведённой выше разметки, а также научитесь использовать разметку на своих страницах. Обратите внимание, что вся суть в разметке выше — это текст. Остальное — вспомогательные элементы для того, чтобы вывести текст там, где было задумано дизайнерами и/или разработчиками.
24 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: HTML разметка
3 |
--------------------------------------------------------------------------------
/modules/10-html/10-html-markup/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const element = query(document, 'h1', HTMLHeadingElement);
5 | expect(element).to.have.text('Hello, World!');
6 | });
7 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Wrap the phrase _The quick brown fox jumps over the lazy dog_ `
` into the
tag and paste in the editor.
2 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Tags
3 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Envuelva la frase _The quick brown fox jumps over the lazy dog_ en una etiqueta `
` y péguela en el editor.
2 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Etiquetas
3 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/index.html:
--------------------------------------------------------------------------------
1 |
` фразу _The quick brown fox jumps over the lazy dog_ и вставьте в редактор
2 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Теги
3 |
--------------------------------------------------------------------------------
/modules/10-html/20-tags/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const element = query(document, 'p', HTMLParagraphElement);
5 | expect(element).to.contain.text('lazy');
6 | });
7 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Format this text
2 |
3 |
4 |
My Circle, a career portal, studied the IT education market and determined which online schools teach programming well. In the final ranking, Hexlet came in second place.
5 |
6 |
"My Circle" surveyed 3,500 IT professionals and compiled a ranking table of online schools for programmers. "My Circle" and "Habr" users who attended online universities took part in the survey. In the final table, Hexlet came in second place.
7 |
8 |
9 | Each paragraph must be inside a separate tag
10 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Text in HTML
3 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Formatea el texto
2 |
3 |
4 |
El portal de carreras "Mi Entorno" ha estudiado el mercado de la educación en TI y ha descubierto en qué escuelas en línea se enseña programación de manera efectiva. En la clasificación final, Hexlet ocupó el segundo lugar.
5 |
6 |
"Mi Entorno" encuestó a 3500 profesionales de TI y elaboró una clasificación de escuelas en línea para programadores. La encuesta contó con la participación de usuarios de "Mi Entorno" y "Habr.com", que estudiaron en universidades en línea. En la tabla final, Hexlet ocupó el segundo lugar.
7 |
8 |
9 | Cada párrafo debe estar dentro de una etiqueta separada.
10 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Texto en HTML
3 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/index.html:
--------------------------------------------------------------------------------
1 |
My Circle, a career portal, studied the IT education market and determined which online schools teach programming well. In the final ranking, Hexlet came in second place.
2 |
3 |
"My Circle" surveyed 3,500 IT professionals and compiled a ranking table of online schools for programmers. "My Circle" and "Habr" users who attended online universities took part in the survey. In the final table, Hexlet came in second place.
Карьерный портал «Мой круг» изучил рынок IT-образования и выяснил, в каких онлайн-школах эффективно учат программированию. В итоговом рейтинге Хекслет занял второе место.
5 |
6 |
«Мой круг» опросил 3500 IT-специалистов и составил рейтинг онлайн-школ для программистов. В опросе приняли участие пользователи «Моего круга» и «Хабра», которые учились в онлайн-университетах. В финальной таблице «Хекслет» занял второе место.
7 |
8 |
9 | Каждый абзац должен находиться внутри отдельного тега
10 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Текст в HTML
3 |
--------------------------------------------------------------------------------
/modules/10-html/30-text-in-html/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, querySelectorAll, expect }) => {
4 | query(document, 'p', HTMLParagraphElement);
5 | const elements = querySelectorAll(document, 'p', HTMLParagraphElement);
6 | expect(elements).to.have.length(2)
7 | // expect(elements).to.contain.text(['surveyed', 'studied'])
8 | });
9 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Create a bullet list of three items. You learned about this type of list in this lesson
2 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Tag nesting
3 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Crea una lista marcada con tres elementos. Este tipo de lista lo has aprendido en la lección
2 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Anidación de etiquetas
3 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/index.html:
--------------------------------------------------------------------------------
1 |
2 |
In 1973, IBM released the Model 3340 hard drive, which was designed with two 30MB modules
3 |
Of all HTTP protocol errors, users most often encounter the 404 Not Found
4 |
Hypertext Markup Language HTML was developed by British scientist Tim Berners-Lee
5 |
6 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Создайте маркированный список из трёх элементов. Этот тип списка вы изучили в уроке
2 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Вложенность тегов
3 |
--------------------------------------------------------------------------------
/modules/10-html/40-nested-tag/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, querySelectorAll, expect }) => {
4 | query(document, 'ul', HTMLUListElement);
5 | const elements = querySelectorAll(document, 'ul > li', HTMLLIElement);
6 | expect(elements).to.have.length(3);
7 | });
8 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Create a paragraph with any text and a tooltip. Add the class `hexlet` to it.
2 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: HTML Attributes
3 | tips:
4 | - >-
5 | All global attributes can be viewed on [MDN Web
6 | Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes)
7 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Crea un párrafo con un texto arbitrario y un tooltip. Asígnale la clase `hexlet`.
2 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Atributos HTML
3 | tips:
4 | - >-
5 | Puedes encontrar todos los atributos globales en [MDN Web
6 | Docs](https://developer.mozilla.org/es/docs/Web/HTML/Atributos_globales)
7 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/index.html:
--------------------------------------------------------------------------------
1 |
Hover your cursor over this text
2 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Создайте параграф с произвольным текстом и всплывающей подсказкой. Добавьте к нему класс `hexlet`
2 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Атрибуты HTML
3 | tips:
4 | - >-
5 | Все глобальные атрибуты можно посмотреть на [MDN Web
6 | Docs](https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes)
7 |
--------------------------------------------------------------------------------
/modules/10-html/50-attributes/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const elements = query(document, 'p', HTMLElement);
5 | expect(elements).to.have.attr('title').match(/,*/);
6 | expect(elements).to.have.attr('class', 'hexlet');
7 | });
8 |
--------------------------------------------------------------------------------
/modules/10-html/description.en.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: HTML Basics
4 | description: |
5 | To normalize text rendering in a browser was developed HTML markup language that describes the rules for the layout of text data. Despite the long evolution of the language, its basic concepts haven't changed even after more than 20 years. In first module, we will review the fundamental concepts of HTML: tag, attribute, and nesting of tags, and will learn the core features of marking up text with paragraphs.
6 |
--------------------------------------------------------------------------------
/modules/10-html/description.es.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Fundamentos de la estructura HTML
4 | description: |
5 | Para estandarizar la presentación de texto en un navegador, se desarrolló el lenguaje de marcado HTML, el cual describe las reglas de formato de los datos de texto. A pesar de su largo desarrollo, los conceptos básicos no han cambiado incluso después de más de 20 años. En el primer módulo, analizaremos los conceptos fundamentales de HTML: etiqueta, atributo, anidamiento de etiquetas y aprenderemos las capacidades básicas para marcar texto utilizando párrafos.
6 |
--------------------------------------------------------------------------------
/modules/10-html/description.ru.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Основы разметки HTML
4 | description: |
5 | Для стандартизации вывода текста внутри браузера был разработан язык разметки HTML, описывающий правила оформления текстовых данных. Несмотря на долгое развитие языка, базовые концепции не поменялись даже спустя более 20 лет. В первом модуле разберём основные концепции HTML: тег, атрибут, вложенность тегов и научимся базовым возможностям по разметке текста с помощью параграфов
6 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/description.es.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Párrafos
4 | theory: |
5 | Los párrafos son la forma principal de dividir un texto largo en bloques lógicos más pequeños. Estos bloques se separan automáticamente entre sí con sangrías. Este tipo de texto es mucho más fácil de leer y no asusta a los usuarios.
6 |
7 | Los párrafos se encuentran principalmente dentro de un texto largo. Por ejemplo, cualquier lección en Hexlet o Code Basics se divide en párrafos para facilitar la lectura, al igual que en esta lección.
8 |
9 | La división se realiza en bloques de significado pequeños. Esto no solo hace que sea más cómodo de leer, sino que también permite encontrar rápidamente la información necesaria en un texto largo.
10 |
11 | Los párrafos se crean utilizando la etiqueta de apertura y cierre `
`, dentro de la cual se coloca una pequeña parte del texto. Por ejemplo:
12 |
13 | ```html
14 |
Primer párrafo
15 |
Segundo párrafo
16 | ```
17 |
18 | Así es como se ven en el navegador:
19 |
20 |
21 |
Primer párrafo
22 |
Segundo párrafo
23 |
24 |
25 | instructions: |
26 | Envuelve la frase _Hello, World_ en una etiqueta de párrafo.
27 |
28 | definitions:
29 | - name: Párrafo
30 | description: Un bloque de texto pequeño, separado del resto del contenido por sangrías superior e inferior.
31 | tips:
32 | - No se pueden anidar párrafos uno dentro del otro.
33 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Wrap the phrase _Hello, World_ in a paragraph tag
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/en/README.md:
--------------------------------------------------------------------------------
1 | Paragraphs are the main way to divide a large text into small logical blocks. These blocks are automatically "indented" from each other. Such text is much easier to read and does not scare users.
2 |
3 | Paragraphs are mostly found within large text. For example, any lesson on Hexlet or Code Basics is broken up into paragraphs for easy reading, just like this one.
4 |
5 | t is broken down into small blocks of meaning. Not only is it more comfortable to read, but you can quickly find the information you need in a large text.
6 |
7 | Paragraphs are created using the paired `
` tag with a small amount of text in the body. For example:
8 |
9 | ```html
10 |
First paragraph
11 |
Second paragraph
12 | ```
13 |
14 | This is what they look like in the browser:
15 |
16 |
17 |
First paragraph
18 |
Second paragraph
19 |
20 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Paragraphs
3 | definitions:
4 | - name: Paragraph
5 | description: >-
6 | A small block of text separated from the rest of the content by indents at
7 | the bottom and top
8 | tips:
9 | - Paragraphs cannot be nested within each other
10 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Envuelve la frase _Hello, World_ en una etiqueta de párrafo.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/es/README.md:
--------------------------------------------------------------------------------
1 | Los párrafos son la forma principal de dividir un texto largo en bloques lógicos más pequeños. Estos bloques se separan automáticamente entre sí con sangrías. Este tipo de texto es mucho más fácil de leer y no asusta a los usuarios.
2 |
3 | Los párrafos se encuentran principalmente dentro de un texto largo. Por ejemplo, cualquier lección en Hexlet o Code Basics se divide en párrafos para facilitar la lectura, al igual que en esta lección.
4 |
5 | La división se realiza en bloques de significado pequeños. Esto no solo hace que sea más cómodo de leer, sino que también permite encontrar rápidamente la información necesaria en un texto largo.
6 |
7 | Los párrafos se crean utilizando la etiqueta de apertura y cierre `
`, dentro de la cual se coloca una pequeña parte del texto. Por ejemplo:
8 |
9 | ```html
10 |
Primer párrafo
11 |
Segundo párrafo
12 | ```
13 |
14 | Así es como se ven en el navegador:
15 |
16 |
17 |
Primer párrafo
18 |
Segundo párrafo
19 |
20 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Párrafos
3 | definitions:
4 | - name: Párrafo
5 | description: >-
6 | Un bloque de texto pequeño, separado del resto del contenido por sangrías
7 | superior e inferior.
8 | tips:
9 | - No se pueden anidar párrafos uno dentro del otro.
10 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/index.html:
--------------------------------------------------------------------------------
1 |
Hello, World
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Оберните фразу _Hello, World_ в тег параграфа
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/ru/README.md:
--------------------------------------------------------------------------------
1 | Параграфы – основной способ разделять большой текст на небольшие логические блоки. Эти блоки автоматически «отбиваются» друг от друга отступами. Такой текст намного проще читается и не пугает пользователей.
2 |
3 | Параграфы, в основном, встречаются внутри большого текста. Например, любой урок на Хекслете или Code Basics разбит на параграфы для удобства чтения, прямо как в этом уроке.
4 |
5 | Разбитие идёт по небольшим смысловым блокам. Так не только комфортнее читать, но и можно быстрее найти нужную информацию в большом тексте.
6 |
7 | Параграфы создаются с помощью парного тега `
`, в тело которого помещается небольшая часть текста. Например:
8 |
9 | ```html
10 |
Первый параграф
11 |
Второй параграф
12 | ```
13 |
14 | Вот как они выглядят в браузере:
15 |
16 |
17 |
Первый параграф
18 |
Второй параграф
19 |
20 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Параграфы
3 | definitions:
4 | - name: Параграф
5 | description: >-
6 | Небольшой блок текста, отделяемый от остального содержимого отступами
7 | снизу и сверху
8 | tips:
9 | - Параграфы нельзя вкладывать друг в друга
10 |
--------------------------------------------------------------------------------
/modules/20-hypertext/10-paragraph/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const element = query(document, 'p', HTMLParagraphElement);
5 | expect(element).to.contain.text('Hello, World');
6 | });
7 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Add the phrase to the editor
2 |
3 |
4 | Hexlet - hands-on programming courses
5 |
6 |
7 | in which make the word "courses" bold (physical markup) and highlight the combination "by programming" in italics (logical markup). Don't forget to wrap the phrase in a paragraph
8 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Text layout
3 | definitions:
4 | - name: Semantics
5 | description: >-
6 | Meaning. In the context of HTML - the semantic choice of markup for a
7 | piece of information
8 | tips:
9 | - >-
10 | Tags for visual emphasis are shorter than for semantic emphasis. It helps to
11 | remember when to use `` and ``, and when to use `` and ``
12 | - In practice, instead of `` and `` they use CSS styling
13 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Agrega al editor la siguiente frase
2 |
3 |
4 | Hexlet — courses prácticos de programming
5 |
6 |
7 | donde la palabra "cursos" esté en negritas (formato físico) y el conjunto "programación" esté en cursiva (formato lógico). No olvides envolver la frase con una etiqueta de párrafo (`
`).
8 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Estilo del Texto
3 | definitions:
4 | - name: Semántica
5 | description: >-
6 | Significado. En el contexto de HTML, la elección semántica de la marca
7 | para un fragmento de información.
8 | tips:
9 | - >-
10 | Las etiquetas para resaltar visualmente son más cortas que las de resaltado
11 | semántico. Esto puede ayudar a recordar cuándo usar `` y `` versus
12 | `` y ``.
13 | - En la práctica, se prefiere usar estilos CSS en lugar de `` y ``.
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/index.html:
--------------------------------------------------------------------------------
1 |
Hexlet — hands-on programmingcourses
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Добавьте в редактор фразу
2 |
3 |
4 | Hexlet — hands-on programming courses
5 |
6 |
7 | в которой слово «courses» сделайте жирным начертанием (физическая разметка), и выделите сочетание «programming» курсивом (логическая разметка). Не забудьте обернуть фразу в параграф
8 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Начертание текста
3 | definitions:
4 | - name: Семантика
5 | description: >-
6 | Смысловое значение. В контексте HTML — смысловой выбор разметки для
7 | участка информации
8 | tips:
9 | - >-
10 | Теги для визуального выделения короче, чем для смыслового. Это поможет
11 | запомнить, когда использовать `` и ``, а когда `` и ``
12 | - В практике вместо `` и `` используют стилизацию с помощью CSS
13 |
--------------------------------------------------------------------------------
/modules/20-hypertext/20-text-style/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const b = query(document, 'p > b', HTMLElement);
5 | expect(b).to.have.text('courses');
6 |
7 | const em = query(document, 'p > em', HTMLElement);
8 | expect(em).to.have.text('programming');
9 | });
10 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Add a first and second level header with arbitrary text in the editor
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Headings
3 | tips:
4 | - Follow the sequence of headings. Don't skip levels
5 | - There is usually only one first level header on the page
6 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Agrega en el editor un título de primer y segundo nivel con un texto arbitrario.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Títulos
3 | tips:
4 | - Sigue la secuencia de los títulos. No te saltes los niveles.
5 | - Por lo general, en una página solo hay un título de primer nivel.
6 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/index.html:
--------------------------------------------------------------------------------
1 |
Code Basics
2 |
Coding lessons
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Добавьте в редакторе заголовок первого и второго уровня с произвольным текстом
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Заголовки
3 | tips:
4 | - Соблюдайте последовательность заголовков. Не перескакивайте уровни
5 | - На странице, обычно, находится только один заголовок первого уровня
6 |
--------------------------------------------------------------------------------
/modules/20-hypertext/25-hypertext-header/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const h1 = query(document, 'h1');
5 | expect(h1).to.be.visible;
6 |
7 | const h2 = query(document, 'h2');
8 | expect(h2).to.be.visible;
9 | });
10 |
--------------------------------------------------------------------------------
/modules/20-hypertext/30-lists/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/30-lists/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Create a numbered list of 5 items
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/30-lists/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Lists
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/30-lists/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Crea una lista numerada con 5 elementos.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/30-lists/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Listas
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/30-lists/index.html:
--------------------------------------------------------------------------------
1 |
2 |
Before the invention of electronic computers, computers in the U.S. were used to refer to workers engaged in manual calculations.
3 |
Some programmers use the rubber duck debugging method to debug code.
4 |
An update of a computer program that fixes detected bugs is called a patch
5 |
On the first American typewriters, the keys were usually arranged alphabetically.
6 |
The inventor of the computer mouse, Douglas Engelbart, in his explanatory drawings depicted the screen cursor as an arrow pointing vertically upward.
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/en/README.md:
--------------------------------------------------------------------------------
1 |
2 | When making a to-do list, it may be necessary to break items down into several additional sub-items. For example, in the to-do list, the item "Go to the store" may contain a shopping list.
3 |
4 | _Nested lists_ are used to create this structure. This allows you to insert a new list as a list item, rather than just text, creating a complex structure:
5 |
6 |
7 |
8 |
Go to the store
9 |
10 |
Buy milk
11 |
Buy bread
12 |
13 |
14 |
Take a class on Code Basics
15 |
16 |
17 |
18 | In HTML it looks like this:
19 |
20 | ```html
21 |
22 |
Go to the store
23 |
24 |
Buy milk
25 |
Buy bread
26 |
27 |
28 |
Take a class on Code Basics
29 |
30 | ```
31 |
32 | It is important to note that the nested list is part of the list item and is inside the `
` tag:
33 |
34 | ```html
35 |
Go to the store
36 |
37 |
Buy milk
38 |
Buy bread
39 |
40 |
41 | ```
42 |
43 | This nesting allows you to preserve semantics and indicate that the nested list refers specifically to "Go to the store" and not to any other item.
44 |
45 | You can nest different kinds of lists into each other: bulleted into numbered and vice versa. The main thing is to monitor the opening and closing of tags. In the case of an error, the browser will try to correct the error itself, but it may not be correct.
46 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Nested lists
3 | tips:
4 | - >-
5 | At each nesting level the labeled list changes its marker. This is done to
6 | visually distinguish nested lists
7 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Crea la estructura para la siguiente lista:
2 |
3 |
4 |
5 |
Carrera de JavaScript
6 |
7 |
Frontend
8 |
Backend
9 |
10 |
11 |
Carrera de PHP
12 |
13 |
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/es/README.md:
--------------------------------------------------------------------------------
1 |
2 | Al crear una lista de tareas, puede ser necesario dividir los elementos en varios subelementos adicionales. Por ejemplo, en una lista de tareas, el elemento "Ir al supermercado" puede contener una lista de compras.
3 |
4 | Para crear esta estructura se utilizan _listas anidadas_. Esto permite incluir como elemento de la lista no solo texto, sino también una nueva lista, creando una estructura compleja:
5 |
6 |
7 |
8 |
Ir al supermercado
9 |
10 |
Comprar leche
11 |
Comprar pan
12 |
13 |
14 |
Tomar lecciones en Code Basics
15 |
16 |
17 |
18 | Así es como se ve en HTML:
19 |
20 | ```html
21 |
22 |
Ir al supermercado
23 |
24 |
Comprar leche
25 |
Comprar pan
26 |
27 |
28 |
Tomar lecciones en Code Basics
29 |
30 | ```
31 |
32 | Es importante destacar que la lista anidada es parte del elemento de la lista y se encuentra dentro de la etiqueta `
`:
33 |
34 | ```html
35 |
Ir al supermercado
36 |
37 |
Comprar leche
38 |
Comprar pan
39 |
40 |
41 | ```
42 |
43 | Esta anidación permite mantener la semántica y especificar que la lista anidada se refiere específicamente al elemento "Ir al supermercado" y no a cualquier otro.
44 |
45 | Puedes anidar listas de diferentes tipos entre sí: con viñetas y numeradas. Lo más importante es asegurarse de abrir y cerrar las etiquetas correctamente. En caso de error, el navegador intentará corregir el error automáticamente, pero esto puede no ser correcto.
46 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Listas anidadas
3 | tips:
4 | - >-
5 | En cada nivel de anidamiento, la lista con viñetas cambia su marcador. Esto
6 | se hace para distinguir visualmente las listas anidadas.
7 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/index.html:
--------------------------------------------------------------------------------
1 |
2 |
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/ru/README.md:
--------------------------------------------------------------------------------
1 |
2 | При составлении списка дел может возникнуть необходимость разбить пункты на несколько дополнительных подпунктов. Например, в списке дел пункт «Сходить в магазин» может содержать в себе список покупок.
3 |
4 | Для создания такой структуры используются _вложенные списки_. Это позволяет вкладывать в качестве элемента списка не просто текст, а новый список, создавая сложную структуру:
5 |
6 |
7 |
8 |
Сходить в магазин
9 |
10 |
Купить молоко
11 |
Купить хлеб
12 |
13 |
14 |
Пройти уроки на Code Basics
15 |
16 |
17 |
18 | Вот как это выглядит в HTML:
19 |
20 | ```html
21 |
22 |
Сходить в магазин
23 |
24 |
Купить молоко
25 |
Купить хлеб
26 |
27 |
28 |
Пройти уроки на Code Basics
29 |
30 | ```
31 |
32 | Важно отметить, что вложенный список является частью пункта списка и находится внутри тега `
`:
33 |
34 | ```html
35 |
Сходить в магазин
36 |
37 |
Купить молоко
38 |
Купить хлеб
39 |
40 |
41 | ```
42 |
43 | Такая вложенность позволяет сохранить семантику и указать, что вложенный список относится именно к пункту «Сходить в магазин», а не к какому-либо ещё.
44 |
45 | Вы можете вкладывать списки разных видов друг в друга: маркированные в нумерованные и наоборот. Главное — следить за открытием и закрытием тегов. В случае ошибки браузер попытается самостоятельно исправить ошибку, но это может быть некорректно
46 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Вложенные списки
3 | tips:
4 | - >-
5 | На каждом уровне вложенности маркированный список меняет свой маркер. Это
6 | сделано для визуального отличия вложенных списков
7 |
--------------------------------------------------------------------------------
/modules/20-hypertext/40-nested-lists/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, querySelectorAll, expect }) => {
4 | const ol = query(document, 'ol', HTMLOListElement);
5 | const olLis = querySelectorAll(document, 'ol > li', HTMLLIElement);
6 | expect(olLis).to.have.length(2);
7 |
8 | const ul = query(document, 'ol > li > ul', HTMLUListElement);
9 | const ulLis = querySelectorAll(ul, 'li', HTMLLIElement);
10 | expect(ulLis).to.have.length(2);
11 | });
12 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Create a table of 3 rows with 2 cells in each. The first line contains the table headers
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Tables
3 | tips:
4 | - The number of cells in each row of the table must be the same
5 | - >-
6 | The `caption` of the table is _always_ placed immediately after opening the
7 | table
8 | - >-
9 | Browsers automatically add the `` tag if it is missing. In small
10 | tables it can be omitted
11 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Crea una tabla con 3 filas y 2 celdas en cada una. La primera fila debe contener el encabezado de la tabla.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Tablas
3 | tips:
4 | - El número de celdas en cada fila debe ser el mismo.
5 | - >-
6 | El título de la tabla (`caption`) _siempre_ debe ir después de la etiqueta
7 | de apertura de la tabla (`
`).
8 | - >-
9 | Los navegadores automáticamente agregan la etiqueta `` si está
10 | ausente. En tablas pequeñas, puedes omitir su uso.
11 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Items
5 |
Price
6 |
7 |
8 |
9 |
10 |
Apple
11 |
1 dollar
12 |
13 |
14 |
Pears
15 |
1.3 dollars
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Создайте таблицу из 3 строк с 2 ячейками в каждой. Первая строка содержит в себе шапку таблицы
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Таблицы
3 | tips:
4 | - Количество ячеек в каждой строке таблицы должно быть одинаковым
5 | - >-
6 | Заголовок таблицы `caption` _всегда_ располагается сразу после открытия
7 | таблицы
8 | - >-
9 | Браузеры автоматически добавляют тег ``, если он отсутствует. В
10 | небольших таблицах его можно не указывать
11 |
--------------------------------------------------------------------------------
/modules/20-hypertext/50-table/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ querySelectorAll, query, expect }) => {
4 | query(document, 'table > thead', HTMLTableHeaderCellElement);
5 | const ths = querySelectorAll(document, 'table > thead > tr > th', HTMLElement);
6 | expect(ths).to.have.length(2);
7 |
8 | const trs = querySelectorAll(document, 'table > tbody > tr', HTMLElement);
9 | expect(trs).to.have.length(2);
10 |
11 | const tds = querySelectorAll(document, 'table > tbody > tr > td', HTMLElement);
12 | expect(tds).to.have.length(4);
13 | });
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 |
2 | Create a table with two rows and three columns. In the second row, combine the first two cells using the attributes you learned about. The first row should be the header of the table
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Combining cells inside rows and columns
3 | tips:
4 | - >-
5 | The number of cells in each row of the table must be the same after merging.
6 | It's important to distinguish between the number of `
` tags and the
7 | total number of cells. For example, using the `colspan="2"` attribute on a
8 | cell you will get two cells but visually combined in one. For this reason,
9 | it's necessary to remove one physical cell from the markup to compensate
10 | - >-
11 | If the `colspan` attribute is used, then the cells in the same line will be
12 | removed from the HTML code. If the `rowspan` attribute is used, the cells in
13 | the rows below are deleted
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Crea una tabla con dos filas y tres columnas. En la segunda fila, une las dos primeras celdas utilizando atributos. La primera fila debe ser el encabezado de la tabla.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Unir celdas dentro de filas y columnas
3 | tips:
4 | - >-
5 | El número de celdas en cada fila de la tabla debe ser el mismo después de la
6 | unión. Es importante distinguir entre el número de etiquetas `
` y el
7 | número total de celdas. Por ejemplo, al usar el atributo `colspan="2"`,
8 | obtendrás dos celdas lógicas, pero estarán unidas. Por esta razón, es
9 | necesario eliminar una celda física de la marcación para compensar.
10 | - >-
11 | Si se utiliza el atributo `colspan`, se deben eliminar las celdas en la
12 | misma fila del HTML. Si se utiliza el atributo `rowspan`, se deben eliminar
13 | las celdas en las filas inferiores.
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
2 rows added
5 |
3 columns added
6 |
2 columns in second row combined
7 |
8 |
9 |
10 |
11 |
Result
12 |
Exercise completed
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Создайте таблицу, состоящую из двух строк и трёх столбцов. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть шапкой таблицы
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Объединение ячеек внутри строк и столбцов
3 | tips:
4 | - >-
5 | Количество ячеек в каждой строке таблицы должно быть одинаковым после
6 | объединения. Важно различать количество тегов `
` и общее количество
7 | ячеек. Например, использовав на ячейке атрибут `colspan="2"` вы получите две
8 | логические ячейки, только они будут объединены. По этой причине необходимо
9 | убрать одну физическую ячейку из разметки для компенсации
10 | - >-
11 | Если используется атрибут `colspan`, то из HTML нужно удалить ячейки в той
12 | же строке. Если используется атрибут `rowspan`, то удаляются ячейки в
13 | строках ниже
14 |
--------------------------------------------------------------------------------
/modules/20-hypertext/60-colspan-rowspan/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ querySelectorAll, query, expect }) => {
4 | const trs = querySelectorAll(document, 'table > tbody > tr', HTMLElement);
5 | expect(trs).to.have.length(1);
6 |
7 | const trHead = querySelectorAll(document, 'table > thead > tr');
8 | expect(trHead).to.have.length(1);
9 |
10 | const tds = querySelectorAll(document, 'table > tbody > tr > td', HTMLElement);
11 | expect(tds).to.have.length(2);
12 |
13 | const tdWithColspan = query(document, 'table > tbody > tr > td:nth-child(1)', HTMLElement);
14 | expect(tdWithColspan).to.have.attribute('colspan', '2');
15 | });
16 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Write the "one-fourth" fraction symbol. You can find the alias of this symbol on [Wikipedia](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references)
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/en/README.md:
--------------------------------------------------------------------------------
1 | There are special characters you can use in your text called mnemonic aliases. They allow you to use characters that are present in the symbol table but are not on the keyboard, such as math symbols or Greek:
2 |
3 |
ξ π ϒ
4 |
5 | To record these characters, we use the `&character-name;` construction. It's important to pay attention to the letter case in the name of the character.
6 |
7 | Let's take the symbols of suits in cards as an example:
8 |
9 | |Character|Code|
10 | |--------|---------|
11 | |♣ |`♣`|
12 | |♠ |`♠`|
13 | |♥ |`♥`|
14 | |♦ |`♦`|
15 |
16 | Many of these symbols can be found on [Wikipedia](https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references).
17 |
18 | The main typographic mnemonic aliases in HTML are:
19 |
20 | * ` ` - a non-breaking space. This is a very important thing that allows you to stay on the same line of text so as not to spoil the logical structure of the text in certain cases
21 | * `«` and `»` - the left and right angle quotes («»). They're used everywhere in typography
22 | * `—` - a long dash
23 |
24 | Aliases are common when you want to insert tags without them being processed by the browser. In this case, you can use the aliases `<` and `>`, which are needed to denote **<** and **>**, respectively
25 |
26 | ```html
27 | <p> this markup will not be treated as a paragraph </p>
28 | ```
29 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Special HTML Characters
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Escribe en el editor el símbolo de una fracción simple "un cuarto". Puedes encontrar la entidad mnemotécnica de este símbolo en [Wikipedia](https://ru.wikipedia.org/wiki/Мнемоники_в_HTML).
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/es/README.md:
--------------------------------------------------------------------------------
1 | En el texto es posible utilizar caracteres especiales, también conocidos como entidades mnemotécnicas. Estos permiten utilizar símbolos que están presentes en la tabla de caracteres pero que no se encuentran en el teclado, como los símbolos matemáticos o griegos:
2 |
3 |
ξ π ϒ
4 |
5 | Para escribir estos caracteres se utiliza la construcción `&nombre-del-símbolo;`. Es importante respetar las mayúsculas y minúsculas en el nombre del símbolo.
6 |
7 | Tomemos como ejemplo los símbolos de los palos de las cartas:
8 |
9 | |Símbolo|Código|
10 | |--------|---------|
11 | |♣ |`♣`|
12 | |♠ |`♠`|
13 | |♥ |`♥`|
14 | |♦ |`♦`|
15 |
16 | Puedes encontrar muchos de estos símbolos en [Wikipedia](https://es.wikipedia.org/wiki/Anexo:Referencias_a_entidades_de_caracteres_XML_y_HTML).
17 |
18 | Las entidades mnemotécnicas más comunes en HTML son:
19 |
20 | * ` ` — espacio no separable. Es muy importante ya que evita que se haga un salto de línea con un espacio donde podría afectar la estructura lógica del texto.
21 | * `«` y `»` — comillas angulares tradicionales. Se utilizan ampliamente en tipografía.
22 | * `—` — guion largo.
23 |
24 | Las entidades mnemotécnicas son útiles cuando se necesita insertar etiquetas sin que sean procesadas por el navegador. En ese caso, se pueden utilizar las entidades `<` y `>` para representar los símbolos **<** y **>** respectivamente:
25 |
26 | ```html
27 | <p> este marcado no será procesado como un párrafo </p>
28 | ```
29 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Caracteres especiales HTML
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/index.html:
--------------------------------------------------------------------------------
1 | ¼
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Запишите в редакторе символ простой дроби «одна четвёртая». Найти мнемонику этого символа можно на [«Википедии»](https://ru.wikipedia.org/wiki/Мнемоники_в_HTML)
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/ru/README.md:
--------------------------------------------------------------------------------
1 | В тексте возможно использование специальных символов — мнемоник. Они позволяют использовать знаки, которые присутствуют в таблице символов, но отсутствуют на клавиатуре, например, математические или греческие:
2 |
3 |
ξ π ϒ
4 |
5 | Для записи этих символов используется конструкция `&название-символа;` Важно соблюдать регистр букв в названии символа.
6 |
7 | Для примера возьмём символы мастей у карт:
8 |
9 | |Символ|Код|
10 | |--------|---------|
11 | |♣ |`♣`|
12 | |♠ |`♠`|
13 | |♥ |`♥`|
14 | |♦ |`♦`|
15 |
16 | Со многими из этих символов можно ознакомиться на [«Википедии»](https://ru.wikipedia.org/wiki/Мнемоники_в_HTML).
17 |
18 | Основными типографическими мнемониками в HTML являются:
19 |
20 | * ` ` — неразрывный пробел. Очень важная вещь, которая позволяет не переносить строку с пробелом там, где это может испортить логическую структуру текста
21 | * `«` и `»` — традиционные «кавычки-ёлочки». Повсеместно используются в типографике
22 | * `—` — длинное тире
23 |
24 | Мнемоники распространены, когда необходимо вставить теги без их обработки браузером. В таком случае можно воспользоваться мнемониками `<` и `>`, которые нужны для обозначения **<** и **>** соответственно:
25 |
26 | ```html
27 | <p> такая разметка не будет обработана как параграф </p>
28 | ```
29 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Специальные символы HTML
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/70-special-characters/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ expect }) => {
4 | const text = document.body.innerHTML.trim();
5 | expect(text).to.equal('¼');
6 | });
7 |
--------------------------------------------------------------------------------
/modules/20-hypertext/80-links/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/80-links/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Agrega un enlace absoluto al sitio web https://code-basics.com/
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/80-links/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Enlaces
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/80-links/index.html:
--------------------------------------------------------------------------------
1 | Code Basics
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/80-links/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Добавьте абсолютную ссылку на сайт https://code-basics.com/
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/80-links/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Ссылки
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/80-links/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const element = query(document, 'a');
5 | expect(element).to.have.attr('href', 'https://code-basics.com/');
6 | });
7 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Add any text to the `
` tag and paste it into the editor. Try different versions of the texts.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/en/README.md:
--------------------------------------------------------------------------------
1 |
2 | Sometimes you need to insert text while retaining its original formatting. Let's take a look at Mayakovsky's famous "ladder" from the poem "To Sergei Yesenin.
3 |
4 |
5 |
6 | As the saying says,
7 | you are
8 | now far.
9 | Void and stars,
10 | a stodgy kind
11 | passover.
12 | Not a payday,
13 | not a whiskey bar.
14 | Sober.
15 |
16 |
17 |
18 | Vladimir Mayakovsky believed that it was in this form that the rhythm of verse could best be framed.
19 |
20 | It is very difficult to format such text using special characters in HTML. You have to "juggle" with space characters. These markings will be very difficult to maintain in the future as a result:
21 |
22 | ```html
23 |
As the saying says,
24 |
you are
25 |
now far.
26 | ```
27 |
28 | To solve this problem, there is a special tag called `
`, whose task is to display the text within itself while saving all the space characters. By default, the `
` tag outputs text in a monospaced font in which all characters have the same width, unlike regular fonts.
29 |
30 | ```html
31 |
32 | As the saying says,
33 | you are
34 | now far.
35 | Void and stars,
36 | a stodgy kind
37 | passover.
38 | Not a payday,
39 | not a whiskey bar.
40 | Sober.
41 |
42 | ```
43 |
44 | Inside the `pre` tag, you can use tags to format the text: ``, ``, ``, ``.
45 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Formatted text
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Agrega cualquier texto dentro de la etiqueta `
` y colócalo en el editor. Prueba diferentes variantes de texto.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Texto con formato
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/index.html:
--------------------------------------------------------------------------------
1 |
2 | As the saying says,
3 | you are
4 | now far.
5 | Void and stars,
6 | a stodgy kind
7 | passover.
8 | Not a payday,
9 | not a whiskey bar.
10 | Sober.
11 |
12 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Добавьте любой текст в тег `
` и вставьте его в редактор. Попробуйте различные варианты текстов.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/ru/README.md:
--------------------------------------------------------------------------------
1 |
2 | Иногда возникает потребность вставить текст, сохраняя его оригинальное форматирование. Взглянем на знаменитую «лесенку Маяковского» из стихотворения «Сергею Есенину».
3 |
4 |
5 |
6 | Вы ушли,
7 | как говорится,
8 | в мир в иной.
9 | Пустота...
10 | Летите,
11 | в звезды врезываясь.
12 | Ни тебе аванса,
13 | ни пивной.
14 | Трезвость.
15 |
16 |
17 |
18 |
19 | Владимир Маяковский считал, что именно в таком виде лучше всего оформляется ритм стиха.
20 |
21 | Оформить такой текст с помощью спецсимволов в HTML очень сложно. Придётся «жонглировать» пробельными спецсимволами. Из-за этого такую разметку будет очень сложно поддерживать в будущем:
22 |
23 | ```html
24 |
Вы ушли,
25 |
как говорится,
26 |
в мир в иной.
27 | ```
28 |
29 | Для решения этой проблемы существует специальный тег `
`, задача которого — вывести текст внутри себя с сохранением всех пробельных символов. По умолчанию тег `
` выводит текст моноширинным шрифтом, в котором все символы имеют одинаковую ширину, в отличие от обычных шрифтов.
30 |
31 | ```html
32 |
33 | Вы ушли,
34 | как говорится,
35 | в мир в иной.
36 | Пустота...
37 | Летите,
38 | в звезды врезываясь.
39 | Ни тебе аванса,
40 | ни пивной.
41 | Трезвость.
42 |
43 | ```
44 |
45 | Внутри тега `pre` можно использовать теги для оформления текста: ``, ``, ``, ``.
46 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Форматированный текст
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/90-pre/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 |
5 | const pre = query(document, 'pre');
6 | expect(pre).to.be.visible;
7 |
8 | });
9 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/description.es.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Inserción de Código de Computadora en HTML
4 | theory: |
5 | Al escribir blogs educativos sobre programación o artículos, a menudo es necesario mostrar fragmentos de código. En cada lección de Code Basics, hay bloques de código similares a este:
6 |
7 | ```html
8 |
Este es un ejemplo de código
9 | ```
10 |
11 | Para crear un bloque de código se utiliza la etiqueta ``, dentro de la cual se coloca el código en cualquier lenguaje de programación.
12 |
13 | ```javascript
14 | // Ejemplo de código en JavaScript
15 | const square = (num) => {
16 | return num * num;
17 | };
18 | ```
19 |
20 | A menudo se utiliza la etiqueta `` junto con la etiqueta `
` para preservar el formato. Si no se utiliza la etiqueta `
`, es necesario controlar los saltos de línea manualmente, por ejemplo, envolviendo cada línea con la etiqueta `
`.
21 |
22 | Es importante tener en cuenta que todas las etiquetas dentro de `` serán interpretadas por el navegador, por lo que se utilizan caracteres especiales dentro de él. Otra solución común es envolver el nombre de la etiqueta con una etiqueta adicional, como ``:
23 |
24 | ```html
25 |
26 | <p>Insertamos la etiqueta p como texto plano </p>
27 |
28 | ```
29 |
30 | instructions: |
31 | Agrega cualquier texto dentro de la etiqueta `` y colócalo en el editor. Prueba diferentes variantes de texto.
32 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Add any text to the `` tag and paste it into the editor. Try different versions of the texts
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/en/README.md:
--------------------------------------------------------------------------------
1 |
2 | If you have a programming tutorial blog or write articles, then you'll need to demonstrate your code. Every lesson on Code Basics has these blocks:
3 |
4 | ```html
5 |
You can see the markup here
6 | ```
7 |
8 | To create a block of code, use the tag ``, and you can write code in any language there.
9 |
10 | ```javascript
11 | // Example code in JavaScript
12 | const square = (num) => {
13 | return num * num;
14 | };
15 | ```
16 |
17 | The `` tag is often used with the `
` tag to preserve formatting. If the `
` tag is not used, you have to control line breaks yourself, for example by wrapping each line with a `
` tag.
18 |
19 | It's important that all tags inside `` are be processed by the browser, which is why special characters are used inside. Also, a common solution is to wrap the name of the tag in a separate tag, such as ``:
20 |
21 | ```html
22 |
23 | <p>Insert the p tag as plain text </p>
24 |
25 | ```
26 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Inserting computer code into HTML
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Agrega cualquier texto dentro de la etiqueta `` y colócalo en el editor. Prueba diferentes variantes de texto.
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/es/README.md:
--------------------------------------------------------------------------------
1 | Al escribir blogs educativos sobre programación o artículos, a menudo es necesario mostrar fragmentos de código. En cada lección de Code Basics, hay bloques de código similares a este:
2 |
3 | ```html
4 |
Este es un ejemplo de código
5 | ```
6 |
7 | Para crear un bloque de código se utiliza la etiqueta ``, dentro de la cual se coloca el código en cualquier lenguaje de programación.
8 |
9 | ```javascript
10 | // Ejemplo de código en JavaScript
11 | const square = (num) => {
12 | return num * num;
13 | };
14 | ```
15 |
16 | A menudo se utiliza la etiqueta `` junto con la etiqueta `
` para preservar el formato. Si no se utiliza la etiqueta `
`, es necesario controlar los saltos de línea manualmente, por ejemplo, envolviendo cada línea con la etiqueta `
`.
17 |
18 | Es importante tener en cuenta que todas las etiquetas dentro de `` serán interpretadas por el navegador, por lo que se utilizan caracteres especiales dentro de él. Otra solución común es envolver el nombre de la etiqueta con una etiqueta adicional, como ``:
19 |
20 | ```html
21 |
22 | <p>Insertamos la etiqueta p como texto plano </p>
23 |
24 | ```
25 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Inserción de Código de Computadora en HTML
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/index.html:
--------------------------------------------------------------------------------
1 |
2 | const a = 5;
3 |
4 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Добавьте любой текст в тег `` и вставьте его в редактор. Попробуйте различные варианты текстов
2 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/ru/README.md:
--------------------------------------------------------------------------------
1 |
2 | При ведении учебных блогов по программированию, либо при написании статей, возникает необходимость продемонстрировать код. В каждом уроке на Code Basics есть такие блоки:
3 |
4 | ```html
5 |
Здесь видно разметку
6 | ```
7 |
8 | Для создания блока с кодом используется тег ``, внутри которого записывается код на любом языке программирования.
9 |
10 | ```javascript
11 | // Пример кода на JavaScript
12 | const square = (num) => {
13 | return num * num;
14 | };
15 | ```
16 |
17 | Тег `` часто используют вместе с тегом `
`, что позволяет сохранить форматирование. Если тег `
` не используется, то переносы строк нужно контролировать самостоятельно, например, оборачивая каждую строку в тег `
`.
18 |
19 | Важно, что все теги внутри `` будут обработаны браузером, по этой причине внутри используются специальные символы. Также частое решение — оборачивание названия тега в отдельный тег, например ``:
20 |
21 | ```html
22 |
23 | <p>Вставляем тег p в виде простого текста </p>
24 |
25 | ```
26 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Вставка компьютерного кода в HTML
3 |
--------------------------------------------------------------------------------
/modules/20-hypertext/95-code/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 |
5 | const code = query(document, 'code');
6 | expect(code).to.be.visible;
7 |
8 | });
9 |
--------------------------------------------------------------------------------
/modules/20-hypertext/description.en.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Text in HTML
4 | description: |
5 | HTML provides dozens of rules for working with text, from creating blocks of text, to complex tables and nested lists. Marking up text properly is a core skill when building a web site.
6 |
--------------------------------------------------------------------------------
/modules/20-hypertext/description.es.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Texto en HTML
4 | description: |
5 | HTML proporciona docenas de reglas para trabajar con texto: desde la creación de bloques de texto hasta tablas complejas y listas anidadas. El marcado correcto del texto es una de las habilidades clave al trabajar con un sitio web.
6 |
--------------------------------------------------------------------------------
/modules/20-hypertext/description.ru.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Текст в HTML
4 | description: |
5 | HTML предоставляет десятки правил для работы с текстом: от создания блока текста, до сложных таблиц и вложенных списков. Корректная разметка текста — один из ключевых навыков при работе с сайтом.
6 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/en/EXERCISE.md:
--------------------------------------------------------------------------------
1 |
2 | Paste the image from https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png into the editor with alt text "W3C" for when the image is not available
3 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/en/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Images
3 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/es/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Inserta la imagen en el editor desde la dirección https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png y el texto **W3C** para los casos en que la imagen no esté disponible.
2 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/es/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Imágenes
3 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/index.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/ru/EXERCISE.md:
--------------------------------------------------------------------------------
1 | Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом **W3C** для случаев, если картинка недоступна
2 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/ru/data.yml:
--------------------------------------------------------------------------------
1 | ---
2 | name: Изображения
3 |
--------------------------------------------------------------------------------
/modules/30-media/10-img/test.js:
--------------------------------------------------------------------------------
1 | const { test } = require('tests');
2 |
3 | test(({ query, expect }) => {
4 | const element = query(document, 'img');
5 | expect(element).to.have.attr('src', 'https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png');
6 | expect(element).to.have.attr('alt', 'W3C');
7 | });
8 |
--------------------------------------------------------------------------------
/modules/30-media/20-audio/Makefile:
--------------------------------------------------------------------------------
1 | test:
2 | node test.js 2>&1
3 |
--------------------------------------------------------------------------------
/modules/30-media/20-audio/description.es.yml:
--------------------------------------------------------------------------------
1 | ---
2 |
3 | name: Audio
4 | theory: |
5 |
6 | Anteriormente, para agregar audio a una página HTML, era necesario utilizar "extensiones" especiales que permitían incrustar un reproductor de audio en la página. A partir del estándar HTML5, esta funcionalidad está disponible de forma predeterminada. Se implementa mediante la etiqueta `
2 | -------------------------------------------------------------------------------- /modules/30-media/10-img/ru/EXERCISE.md: -------------------------------------------------------------------------------- 1 | Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом **W3C** для случаев, если картинка недоступна 2 | -------------------------------------------------------------------------------- /modules/30-media/10-img/ru/data.yml: -------------------------------------------------------------------------------- 1 | --- 2 | name: Изображения 3 | -------------------------------------------------------------------------------- /modules/30-media/10-img/test.js: -------------------------------------------------------------------------------- 1 | const { test } = require('tests'); 2 | 3 | test(({ query, expect }) => { 4 | const element = query(document, 'img'); 5 | expect(element).to.have.attr('src', 'https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png'); 6 | expect(element).to.have.attr('alt', 'W3C'); 7 | }); 8 | -------------------------------------------------------------------------------- /modules/30-media/20-audio/Makefile: -------------------------------------------------------------------------------- 1 | test: 2 | node test.js 2>&1 3 | -------------------------------------------------------------------------------- /modules/30-media/20-audio/description.es.yml: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | name: Audio 4 | theory: | 5 | 6 | Anteriormente, para agregar audio a una página HTML, era necesario utilizar "extensiones" especiales que permitían incrustar un reproductor de audio en la página. A partir del estándar HTML5, esta funcionalidad está disponible de forma predeterminada. Se implementa mediante la etiqueta `