|
|
@@ -78,6 +78,95 @@
|
|
|
</head>
|
|
|
```
|
|
|
|
|
|
-Ссылки представлены в формате **URL**:
|
|
|
-<протокол>://<сайт>/путь/к/файлу
|
|
|
+Ссылки представлены в формате **URL**(Unified Resource Locator):
|
|
|
+
|
|
|
+<протокол>://<сайт>/путь/к/файлу?<параметры> где:
|
|
|
+- **протокол** - тип сетевого протокола для обмена данными с серверами. Обычно это **http** или **https**.
|
|
|
+- **сайт** - доменное имя или IP-адрес сайта
|
|
|
+- **путь к файлу** - путь в дереве каталогов на сайте к конкретному файлу. В отличие от windows используется прямой слэш (`/`)
|
|
|
+- **параметры** - если путь ведет не к статическому файлу, а к коду, который выполняется, то в параметры могут быть переданы этому коду для обработки.
|
|
|
+
|
|
|
+Ссылки могут быть абсолютными (как выше в общей структуре URL) и относительными. В случае с относительными отсутствующие части берутся из
|
|
|
+*строки адреса браузера*:
|
|
|
+
|
|
|
+```html
|
|
|
+ <head>
|
|
|
+ ....
|
|
|
+ <script src="index.js"></script>
|
|
|
+ <link href="index.css" rel="stylesheet" type="text/css" />
|
|
|
+ </head>
|
|
|
+```
|
|
|
+
|
|
|
+Как видите, ссылки на `index.js` и на `index.css` не содержат в себе других частей **URL**, а значит они являются *относительными*. значит мы можем открыть
|
|
|
+эти файлы, добавив адрес из строки браузера. **Проделайте это**. Относительные ссылки полезны, если вы не знаете в какой папке, или на сайте с каким
|
|
|
+именем будет располагаться ваш код. При использовании абсолютных ссылок вам придется найти и исправить сотни ссылок даже в небольшом проекте с
|
|
|
+использованием HTML.
|
|
|
+
|
|
|
+#### Тэги HTML:
|
|
|
+- `a`. Служит для создания ссылок на другие страницы или сайты.
|
|
|
+- `img`. Добавляет картинку.
|
|
|
+- `p`. Добавляет параграф
|
|
|
+- `div`. Добавляет контейнер для других тэгов.
|
|
|
+- `table`. Добавляет таблицу
|
|
|
+- `tr`. Добавляет строку таблицы
|
|
|
+- `td`. Добавляет ячейку таблицы
|
|
|
+- `i`. Добавляет курсивный текст
|
|
|
+- `ul`. Добавляет ненумерованный список
|
|
|
+- `ol`. Добавляет нумерованный список
|
|
|
+- `li`. Добавляет элемент списка в тэги `ul` или `li`
|
|
|
+- `input`. Добавляет поля ввода.
|
|
|
+- `textarea`. Добавляет многострочное поле ввода для текста
|
|
|
+- `select`. Добавляет выпадающий список.
|
|
|
+- `br`. Добавляет перенос строки.
|
|
|
+
|
|
|
+Тэги бывают парные и непарные. Парные могут включать в себя другие тэги и текст; непарные (`img`, `input`, `br`) не включают в себя ничего, кроме своих
|
|
|
+параметров. В конце непарного тэга желательно ставить `/`: `<br />`, `<input type='email' name='email' />` и так далее.
|
|
|
+
|
|
|
+Так же тэги деляться на **блочные** и **строчные**. **Блочные** по умолчанию занимают всю ширину и начинаются с новой строки; **строчные** же обычно
|
|
|
+предназначены для придания части текста какого-то свойства (например `a` создает ссылку, `i` - курсив).
|
|
|
+
|
|
|
+### CSS
|
|
|
+
|
|
|
+**CSS** (Cascading Style Sheets) - каскадная таблица стилей.
|
|
|
+
|
|
|
+**HTML** хранит общую структуру и информацию; а **CSS** - то, *как* эта структура отображается. Таким образом можно кардинально изменить
|
|
|
+вид сайта, просто изменив **CSS** и не меняя информацию и структуру **HTML**-документа.
|
|
|
+
|
|
|
+#### CSS-Селекторы
|
|
|
+
|
|
|
+Для того, что бы определить *стиль* (внешний вид) тех или иных элементов в дереве HTML-тэгов, нужен способ указания множества тэгов, к которым
|
|
|
+применяется стиль. Этот способ называется **CSS-Selector**, и пишется на специальном "языке", который позволяет осуществлять поиск в дереве тэгов
|
|
|
+и задавать им стиль.
|
|
|
+```css
|
|
|
+* { /* все тэги */
|
|
|
+ background-color: lightgray;
|
|
|
+}
|
|
|
+
|
|
|
+a { /* все тэги a */
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+
|
|
|
+a.mainmenu { /* все тэги a, в которых параметр class="mainmenu" */
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.mainmenu { /* все тэги, в которых параметр class="mainmenu" */
|
|
|
+ background: darkgray;
|
|
|
+}
|
|
|
+
|
|
|
+#someId { /* тэг, в котором параметр id="someId" */
|
|
|
+ background-color: red;
|
|
|
+}
|
|
|
+
|
|
|
+#someId a { /* все тэги a внутри тэга с id="someId" */
|
|
|
+ color: green;
|
|
|
+}
|
|
|
+
|
|
|
+#someId > a { /* все тэги a внутри тэга с id="someId" на уровень ниже и не далее*/
|
|
|
+ color: blue;
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+Таким образом с помощью языка **CSS-Селекторов** вы можете выбрать множество тэгов внутри **HTML**-документа и применить те или иные настройки внешнего
|
|
|
+вида к ним.
|
|
|
|
me@helium