> For the complete documentation index, see [llms.txt](https://thedvlpr.gitbook.io/javascript-for-dummies/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://thedvlpr.gitbook.io/javascript-for-dummies/bratki-javascript-a.md).
# Братки JavaScript-а
[](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)
В предыдущем уроке ([клац](/javascript-for-dummies/vvod-v-javascript.-chto-eto-i-dlya-chego-nuzhen.md)), я упоминал братьев **JavaScript** – это **HTML** и **CSS**. Попробую коротко донести до тебя основную суть.
### HTML
Каждая веб-страница, которую ты видишь – состоит из разметки (эта разметка и называется **HTML (HyperText Markup Language)**). **Разметка** – это фундамент страницы. Выглядит он в базовом виде, примерно так:
```markup
Title Page
Здесь располагается все, что должен увидеть пользователь
```
Данный код нужно сохранять в файле формата `.html` (например, `index.html`).
Надеюсь ты видишь, что здесь есть разные слова, заключенные в скобки `<>`. Так вот, это не просто так, из разряда – что хочу, то и пишу, эти штуки называются `тегами`. Они практически все являются **парными**. Это означает, что после того, как ты открыл одну скобку `<открывающий тег>`, ты обязательно должен его закрыть ``, иначе браузер не примет твой код.
**Пример парного тега:**
```markup
Этот текст будет жирнымЭтот текст будет подчеркнутым
```
Как видишь, сначала я открываю тег, пишу внутри него, то что хочу, а затем закрываю его. Думаю, ты заметил чем отличается **открывающий тег** от **закрывающегося**. Только одним `/`. Но запомни, этот `слэш`очень важный.
**Хочу предупредить, что не все теги являются парными, например:**
```markup
- тег переноса строки
- горизонтальная линия, которая как бы подчеркивает
содержимое
- отображение картинки на странице
и д.р.
```
Весь список можно погуглить, если понадобится.
В целом, **HTML** служит для того, чтобы разделить информацию на **логические блоки**, для того, чтобы проще этим было управлять (через тот же **`JavaScript`**) и оформлять через **`CSS`**.
### CSS
Так называемые **каскадные таблицы стилей (Cascading Style Sheets)**. Они служат для того, чтобы навести марафет на странице. Через них, например, устанавливают *цвет фона страницы*, *размеры шрифтов*, *цвет этих же шрифтов*, устанавливают *позиционирование элементов относительно друг друга*, относительно окна и так далее.
**Пример CSS-кода:**
```css
.paragraph-1 {
color: green;
font-size: 16px;
font-weight: bold;
}
.paragraph-2 {
text-align: center;
text-transform: uppercase;
}
```
Данный код (`чаще всего это называют правилами`) применится к любому элементу (тегу) на странице, у которого будет прописан атрибут `class="paragraph-1"` или `class="paragraph-2"`, и даже можно так `class="paragraph-1 paragraph-2"` (в этом случае к элементу с таким атрибутом применятся и правила `paragraph-1` и правила `paragraph-2`), например:
```markup
Данный текст будет зеленым, шрифт будет жирным и размером 16px
Данный текст будет распологаться по центру страницы и будет
написан прописными буквами
Данный текст будет зеленого цвета, шрифт будет жирным, он будет
распологаться по центру страницы и написан прописными буквами.
Правило на размер шрифта 16px не отработатает, потому что у нас
есть правило `text-transform: uppercase;`, которое явно
указывает на то, чтобы все буквы были заглавными
```
**CSS-код подключается к странице двумя способами:**
1. Прописываем **CSS код** внутри тега `` до его закрытия (``), обрамляем сам код в тег ``;
2. Подключаем через **внешний файл**.
**Первый способ:**
Тег `` **HTML-код:**
```markup
Title Page
Данный текст будет зеленого цвета, шрифт будет жирным и
размером 16px
Данный текст будет распологаться по центру страницы и
будет написан прописными буквами
```
**Второй способ:**
Отдельно создаем файл формата `.css`, запихиваем туда наш **CSS код** и подключаем с помощью одиночного тега `` к странице **HTML**:
```markup
Title Page
Данный текст будет зеленого цвета, шрифт будет жирным и
размером 16px
Данный текст будет распологаться по центру страницы и будет
написан прописными буквами
```
Т.е., эффект будет одним и тем же, стили применятся и в том и в другом случае. Но преимущество **второго метода** в том, что весь **CSS код** отделен от другого, что дает возможность проще разбираться в самом коде и не `говнокодить`.
### Подытожим
Надеюсь с помощью данного материала у меня получилось направить тебя в нужное русло и далее ты сам просмотришь доп.материал в интернете. Я же оставлю тебе ссылочки на код выше, дабы ты мог посмотреть, как и что работает.
#### Ссылки:
[Learn 1. JavaScriptStupid](https://repl.it/@JSstupid/Learn-1-JavaScriptStupid)
[Learn-1.1-JavaScriptStupid](https://repl.it/@JSstupid/Learn-11-JavaScriptStupid)