Название страницы

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"f8vkk"},{"data":{"image":{"id":"5ef314cd8d3a946a7b6382eb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fohe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9nabg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем салют, друзья!","type":"unstyled","key":"4deb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сегодня я расскажу вам, что такое html, в этой статье мы рассмотрим историю и его развитие. Выясним как создаются сайты и на сколько это сложно. ","type":"unstyled","key":"1b88p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Погнали!","type":"unstyled","key":"frl3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. HTML код — что это такое простыми словами","type":"unstyled","key":"68sjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"HTML (англ. \"hyper text markup language\" — язык гипертекстовой разметки) — это специальный язык разметки, который применяется при создании сайтов в интернете.","type":"unstyled","key":"6panq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все браузеры без проблем понимают html и могут переводить его для нас с вами в понятном виде. Любая страница сайта является html-кодом, этот код браузер переводит в дружественный вид для пользователя. Этот код вы можете посмотреть, он доступен на каждой странице все что вам нужно сделать это щелкнуть правой кнопкой мыши и выбрать посмотреть исходных код или поступит еще проще - нажать на клавиатуре CTRL+U:","type":"unstyled","key":"7hcdq"},{"data":{"image":{"id":"5ef314e806d4bf0baebe9eef"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7a4u7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"nsmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Язык html очень популярен. Сегодня этот язык является единственным, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый \"движок\" создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).","type":"unstyled","key":"7a52q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файлы, созданные на html, имеют расширения . html или . htm. Для создания файла html, достаточно открыть блокнот и сохранить его с расширением .html. ","type":"unstyled","key":"3uoj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"aho11"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Пример и структура html кода","type":"header-two","key":"cgvem"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже приведен пример со структурой типичной html страницы. Обратите внимание, что html код делится на две области: ","type":"unstyled","key":"4lnsg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1.Заголовок ","type":"unstyled","key":"e2kik"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2.Тело страницы.","type":"unstyled","key":"f75b0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"f79lp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"1hf3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"eckm2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":1,"style":"BOLD"},{"length":5,"offset":26,"style":"BOLD"}],"text":"Название страницы","type":"unstyled","key":"43hg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"4pkid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Заголовочные теги (подключение стилей, скриптов)","type":"unstyled","key":"4hgu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"fpdfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"crhvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"8rkf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"7238c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3j6jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":5,"offset":5,"style":"BOLD"},{"length":6,"offset":12,"style":"BOLD"}],"text":"

","type":"unstyled","key":"7hfbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Шапка сайта","type":"unstyled","key":"6u5o2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":2,"style":"BOLD"}],"text":"

","type":"unstyled","key":"egnlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"b3mcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":5,"offset":5,"style":"BOLD"},{"length":4,"offset":12,"style":"BOLD"}],"text":"

","type":"unstyled","key":"8haen"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":5,"offset":5,"style":"BOLD"},{"length":12,"offset":12,"style":"BOLD"}],"text":"

","type":"unstyled","key":"3j60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Левая колонка","type":"unstyled","key":"fpvii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":2,"style":"BOLD"}],"text":"

","type":"unstyled","key":"1kc7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"bs922"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":5,"offset":5,"style":"BOLD"},{"length":7,"offset":12,"style":"BOLD"}],"text":"

","type":"unstyled","key":"e8ibs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ... Основная часть сайта...","type":"unstyled","key":"48rvs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":2,"style":"BOLD"}],"text":"

","type":"unstyled","key":"8i6bu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"4q0tn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":5,"offset":5,"style":"BOLD"},{"length":13,"offset":12,"style":"BOLD"}],"text":"

","type":"unstyled","key":"vibj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Правая колонка","type":"unstyled","key":"2p8ds"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":2,"style":"BOLD"}],"text":"

","type":"unstyled","key":"eioil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"1grln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":5,"offset":5,"style":"BOLD"},{"length":6,"offset":12,"style":"BOLD"}],"text":"","type":"unstyled","key":"124ct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"e9kil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":2,"style":"BOLD"}],"text":"

","type":"unstyled","key":"u7ph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"3b1ol"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"6708u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Редактировать этот код можно в любом редакторе, но чаще всего для разработки html сайта используют notepad++ (продвинутый редактор, который выделяет теги и показывает ошибки). ","type":"unstyled","key":"a9op5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разметка состоит из html тегов (иногда пишут \"тэг\").","type":"unstyled","key":"2cand"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cfd9m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Что такое HTML тег","type":"header-two","key":"ftg7a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"},{"length":1,"offset":103,"style":"BOLD"},{"length":1,"offset":119,"style":"BOLD"}],"text":"HTML тег — это один из элементов верстки html который нужен для структуры. Теги имеют открывающий знак < и закрывающий >.","type":"unstyled","key":"89rpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":10,"style":"BOLD"},{"length":6,"offset":69,"style":"BOLD"}],"text":"Например, . Почти каждый тег парный и требует закрывающего тега . Если вебмастер забудет поставить закрывающий тег или сделает это некорректно, то верстка будет не валидной. Если это тег относится к тем, что держат \"каркас\" сайта, то сайт может \"поплыть\" (боковая колонка сместится вниз и т.п.).","type":"unstyled","key":"bpi9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрещено закрывать теги не по порядку их открытия. Например","type":"unstyled","key":"aeglj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"62c98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"554lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"26rd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"971gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":28,"style":"BOLD"}],"text":"

","type":"unstyled","key":"5j0it"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":40,"style":"BOLD"}],"text":" ","type":"unstyled","key":"f79vk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":28,"style":"BOLD"}],"text":" ","type":"unstyled","key":"d2o28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":40,"style":"BOLD"}],"text":"

","type":"unstyled","key":"8hhj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"crhp5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"etngv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":28,"style":"BOLD"}],"text":"

","type":"unstyled","key":"cgtc3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":40,"style":"BOLD"}],"text":" ","type":"unstyled","key":"fo8sl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":40,"style":"BOLD"}],"text":"

","type":"unstyled","key":"8l1mh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":28,"style":"BOLD"}],"text":"

","type":"unstyled","key":"8cec"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"4ue5t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"cv5jb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"ckf1o"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":17,"offset":60}],"inlineStyleRanges":[{"length":17,"offset":60,"style":"BOLD"}],"text":"Более подробно про создание html страницы читайте в статье: Знакомство с html (это первый урок по этой тематике)","type":"unstyled","key":"8elop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"571mv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":63,"style":"BOLD"}],"text":"Если HTML представляет собой скелет (структура) сайта, то CSS (CSS (от англ. \"Cascading Style Sheets\", каскадные таблицы стилей) — список стилей для сайта на html)— это набор правил, которые отвечают за то, как это будет выглядеть, а именно, какой будет шрифт (размер, цвет, толщина), как будут располагаться элементы на сайте друг относительно друга и т.п. Поэтому HTML и CSS довольно тесно связаны между собой.","type":"unstyled","key":"cnfav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"33icm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. История развития HTML","type":"header-two","key":"cepsk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"79q3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. HTML 1.0 (1986) — самая первая версия, в которой отсутствовало множество важных тегов. Официально не существует.","type":"unstyled","key":"dcmni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":43,"style":"BOLD"}],"text":"2. HTML 2.0 (22 сентября 1995) — появление тега form","type":"unstyled","key":"bnsve"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":41,"style":"BOLD"}],"text":"3. HTML 3.2 (14 января 1997) — появление тега table, а также различные эффекты обтекания текста изображения","type":"unstyled","key":"9gnd5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":85,"style":"BOLD"}],"text":"4. HTML 4.0, 4.01 (24 декабря 1999)— добавлена поддержка скриптов и фреймов, введена таблица стилей CSS","type":"unstyled","key":"dvokr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":84,"style":"BOLD"}],"text":"5. HTML 5.0 — новая версия, которая вступила в силу с 2014 году. Советую прочитать: особенности оптимизации сайта в html5","type":"unstyled","key":"7inbu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":121,"style":"BOLD"}],"text":"Кстати, в выше рассмотренном примере, чтобы подчеркнуть использование стандарта HTML 5.0 мы использовали специальный тег в начале документа.","type":"unstyled","key":"9488a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"hvCDFj2jlAhCrXcTYOYE"}],"entityMap":{"0":{"data":{"badSeoLink":"true","url":"https://zen.yandex.ru/media/id/5eba7f439f339d116671be06/znakomstvo-s-html-5ef31c1f857af30d8d64496f"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}