Document

{"draftJsState":{"blocks":[{"data":{"image":{"id":"5dcc0770af919452a14acd4f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b7hd4"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":3,"offset":197}],"inlineStyleRanges":[],"text":"В прошлый раз мы ознакомились с основными понятиями HTML и CSS, установили среду разработки и нашли первые источники обучения. Если вы пропустили этот материал, ознакомиться с вводной частью можно тут .","type":"unstyled","key":"5pmrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня мы с Вами познакомимся с HTML тегами, атрибутами и их значениями. Начнем!","type":"unstyled","key":"a4dml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"HTML теги, атрибуты и значения","type":"header-three","key":"c6169"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"d32se"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"ci8nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"ITALIC"}],"text":" ","type":"unstyled","key":"17k9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"ITALIC"}],"text":" ","type":"unstyled","key":"c35e2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"ITALIC"}],"text":" Document","type":"unstyled","key":"2qbb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"ITALIC"}],"text":" ","type":"unstyled","key":"eqhem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"98khk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"ITALIC"}],"text":" …","type":"unstyled","key":"fpsjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"f1k1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"ITALIC"}],"text":"","type":"unstyled","key":"a9ud6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приведенная выше запись является основной структурой веб-документа. ","type":"unstyled","key":"6l556"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так это будет выглядеть в редакторе кода:","type":"unstyled","key":"8ksfm"},{"data":{"image":{"id":"5dcc08bae9686b2cdd918b8b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"10pqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"...","type":"unstyled","key":"6o5lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эта запись представляет собой основную формулу при написании тех или иных объектов. Наличие атрибутов у тегов опционально. Некоторые теги требуют включения атрибутов- некоторые нет. ","type":"unstyled","key":"dt06k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":80,"style":"BOLD"},{"length":5,"offset":80,"style":"ITALIC"}],"text":"Напишем наш первый тег, например тег заголовка и зададим ему класс со значением title, используя эту формулу:","type":"unstyled","key":"rbvl"},{"data":{"image":{"id":"5dcc08d643ca9b53a9702c7e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9hd0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":229,"style":"BOLD"}],"text":"Вот так это будет выглядеть. Теперь внутри этого тега впишем текст: Заголовок, заголовочек и откроем это в браузере. Чтобы это сделать достаточно зайти в папку, где хранятся два файла, которые мы создали ранее и дважды ткнуть на index.html","type":"unstyled","key":"aaobs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На выходе получим вот это:","type":"unstyled","key":"7hnbn"},{"data":{"image":{"id":"5dcc08f9e161f40e7bb6e660"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6294a"},{"data":{"image":{"id":"5dcc0908e8c8e22cded84df4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"evd2l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вуаля! Красота, правда? ","type":"unstyled","key":"498vm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"}],"text":"Основные теги, используемые при написании HTML кода сайта","type":"unstyled","key":"bm71o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Примечание:","type":"unstyled","key":"53bdp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":7,"style":"BOLD"},{"length":15,"offset":7,"style":"ITALIC"}],"text":"Запись - обязательна к написанию в каждом html-документе. Нынешний стандарт - html5 - и, в соответствии с этим стандартом, каждый html документ должен иметь эту запись. Она позволяет браузеру понять, что он обрабатывает именно веб-сайт. ","type":"unstyled","key":"143pa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":16,"offset":0,"style":"ITALIC"}],"text":"... - данный тег представляет собой основной контейнер для содержимого веб-страницы. Весь контент, находящийся на странице, должен быть написан внутри этого тега. ","type":"unstyled","key":"mocg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":16,"offset":0,"style":"ITALIC"}],"text":"... - данный тег представляет собой контейнер для служебной информации на сайте. Подключение стилей, различных библиотек CSS и JS, кодировка страницы и пр. - все это должно находится внутри этого тега. ","type":"unstyled","key":"d7i89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"},{"length":18,"offset":0,"style":"ITALIC"}],"text":"... - внутри этого тега находится название веб-страницы, которое будет отображаться во вкладке браузера.","type":"unstyled","key":"8qb2g"},{"data":{"image":{"id":"5dcc0946e161f40e7bb6e663"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"a1vlf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":2,"style":"BOLD"},{"length":6,"offset":2,"style":"ITALIC"}],"text":"В title написано document, поэтому во вкладке в браузере будет написано document.","type":"unstyled","key":"c4jjt"},{"data":{"image":{"id":"5dcc09939ed2982a511bd4f6"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"25ups"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"},{"length":22,"offset":0,"style":"ITALIC"}],"text":" - конструкция, дающая понять браузеру в какой кодировке написана веб-страница","type":"unstyled","key":"2872c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"},{"length":6,"offset":0,"style":"ITALIC"}],"text":" - служебный тег. Содержит различную служебную информацию- кодировка, ключевые слова и ТД. ","type":"unstyled","key":"6v3gh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":83,"style":"BOLD"}],"text":" charset- атрибут \"кодировка\". В качестве значения имеет разные типы кодировок. \"UTF-8\"- кодировка по умолчанию. ","type":"unstyled","key":"8hr20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"},{"length":43,"offset":0,"style":"ITALIC"}],"text":" - конструкция, подключающая в данном случае файл со стилями веб-страницы. ","type":"unstyled","key":"91idq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделаем цвет нашего заголовка красным в файле со стилями и посмотрим, что из этого выйдет:","type":"unstyled","key":"b7b6r"},{"data":{"image":{"id":"5dcc09f43b6d88657bb9c332"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1keou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":85,"style":"BOLD"}],"text":"Цвет текста мы задали(обратите внимание, что мы обратились к заголовку по его классу title), теперь посмотрим, как это будет выглядеть в браузере:","type":"unstyled","key":"blion"},{"data":{"image":{"id":"5dcc0a1240e93148148a2993"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8ouu6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ничего не изменилось. Резонный вопрос: А как так? Почему не работает? Всё же правильно написано: и свойство, которые меняет цвет текста; и обратились правильно. ТАК ПОЧЕМУ?(( Ответ прост: файл с разметкой не может распознать стили, потому что их надо подключить. Того, что они лежат в одной папке, недостаточно. ","type":"unstyled","key":"526s5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это как поезд с двумя вагонами. Поезд приехал, но одного вагона нет - его забыли прицепить. Вагон-то есть, но он остался где-то далеко.","type":"unstyled","key":"5jlfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поэтому подключим файл со стилями к файлу с разметкой: используем следующую запись:","type":"unstyled","key":"4r31d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"},{"length":43,"offset":0,"style":"ITALIC"}],"text":" - конструкция, подключающая в данном случае файл со стилями веб-страницы. ","type":"unstyled","key":"6apfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Результат:","type":"unstyled","key":"f9e8n"},{"data":{"image":{"id":"5dcc0a468ddf2d1f5dfbf519"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cea3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили мы подключили, теперь всё должно работать - смотрим, что по этому поводу думает браузер:","type":"unstyled","key":"24i6l"},{"data":{"image":{"id":"5dcc0a5f13aa6c3a6247fb97"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fp4lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всё работает! Прекрасно, просто изумительно.","type":"unstyled","key":"5ni96"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь пару слов о том, из чего состоит тег для подключения стилей:","type":"unstyled","key":"con16"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В нем так же, как и во всех остальных тегах используется эта формула","type":"unstyled","key":"tuo6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"...","type":"unstyled","key":"8385k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":0,"style":"ITALIC"}],"text":"href- атрибут, указывающий на путь к файлу. В этом примере файл со стилями находится в папке css, имя файла- main.css","type":"unstyled","key":"3kv09"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":5,"offset":0,"style":"ITALIC"}],"text":"rel- атрибут, указывающий на тип подключаемого файла. stylesheet- означает, что подключается именно файл со стилями. ","type":"unstyled","key":"2kepb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"},{"length":16,"offset":0,"style":"ITALIC"}],"text":"... - контейнер для основного содержимого сайта. head для служебного, body- для всего остального. НЕ ПУТАТЬ!","type":"unstyled","key":"pgl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Примечание: каждый тег может имет следующий атрибут: class=\"\" - задаёт тегу класс, по которому будет осуществляться обращение к определенному элементу при задании стилей. Может иметь любое значение, как и было в случае с заголовком.","type":"unstyled","key":"n3gk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На сегодня всё. В следующий раз мы освоим теги текста и теги декораций. Если устали от кода, можете почитать другие статьи от автора:","type":"unstyled","key":"7jom2"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":44,"offset":0}],"inlineStyleRanges":[],"text":"Что такое flat design и как его использовать","type":"unstyled","key":"eu71d"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":25,"offset":0}],"inlineStyleRanges":[],"text":"Учим HTML вместе! Часть 1","type":"unstyled","key":"acrnm"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":42,"offset":0}],"inlineStyleRanges":[],"text":"Что такое Типографика для мобильных сайтов","type":"unstyled","key":"8bts3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":71,"offset":0,"style":"ITALIC"}],"text":"Понравилась статья? Поддержи автора: подпишись на канал и поставь лайк!","type":"unstyled","key":"f8njv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"DnWRjmMiCwQ5s25NQsmE"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/uchim-html-vmeste-chast-1-5dca902d1322b67386d18e4a"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/chto-takoe-flat-design-i-kak-ego-ispolzovat-5dcbd57df91fc7585e531785"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/uchim-html-vmeste-chast-1-5dca902d1322b67386d18e4a"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://zen.yandex.ru/media/id/5dc7403d28fbfa14e839f282/tipografika-dlia-mobilnyh-saitov-5dcaa1ae8ddf2d1f5dfbe857"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}