Документ без названия

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вы установили Notepad++, запустили и видите, что новый файл создается автоматически. Теперь создадим в этом файле каркас нашей HTML страницы. Каркас мы самостоятельно писать не будем, потому что он от страницы к странице не меняется, и при этом он содержит довольно громоздкий код, который не нужно держать в голове и который создается из какой-то основы. Скопируйте этот текст:","type":"unstyled","key":"7d2pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5s9ga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4r76c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"kgbu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dtl3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Документ без названия","type":"unstyled","key":"erdr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"c4f5f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"46l5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7csjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7sdbq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первым делом обратите внимание, что когда фаил изменился, дискетка в левом углу вкладки загорелась красным – это значит что фаил изменился, но небыл сохранен. Сохраните фаил, для быстрого сохранения лучше использовать сочетание клавиш ctrl+s (для сайта рекомендуется создать отдельную папку и назвать ее “HTML”) и дайте ему название intex.html.","type":"unstyled","key":"2v71i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запомните что главная страница ВСЕГДА называется index.html. Когда мы набираем название сайта без указания нужной страницы, сервер отправляет нам именно index.html, поэтому мы назвали нашу страницу именно index.html.","type":"header-three","key":"bp3jr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь перейдем к разбору каждой строки.","type":"unstyled","key":"2fcd9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Cтрока !DOCTYPE","type":"header-two","key":"7ipqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Cтрока указывает браузеру на тип документа.","type":"unstyled","key":"6nolc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"!DOCTYPE - можно перевести как тип документа.","type":"unstyled","key":"dr8j9"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":32,"offset":152}],"inlineStyleRanges":[],"text":"Далее мы говорим браузеру что наш документ создан на языке HTML, указываем версию - 4.01 и подверсию – Transitional. Если вам интересно можете почитать http://htmlbook.ru/html/!doctype, здесь вы можете почитать всю информацию про DOCTYPE.","type":"unstyled","key":"56f6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"http://www.w3.org/TR/html4/loose.dtd - этот адрес направляет браузер на спецификацию html. Сильно можно не заморачиваться с этой строчкой, она указывается всего раз и учить ее не нужно.","type":"unstyled","key":"189nn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше начинается самое интересное. Далее идет каркас из HTML-тегов.","type":"unstyled","key":"ffugt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое HTML-тег?","type":"header-three","key":"dv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег – это конструкция языка, которая указывает браузеру, что нужно делать. Какие-то теги говорят браузеру, что нужно отобразить абзац, какие-то – что нужно отобразить заголовок, какие-то – что нужно сделать таблицу, т.е. с помощью тегов мы программируем действия браузера.","type":"unstyled","key":"fm12k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег ","type":"header-two","key":"2cmnt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый такой тег – это тег , обратите внимание, как пишется тег – сначала идет открывающая скобка, название тега и закрывающая скобка, также обратите внимание, что в самом низу есть тег (такой же тег но уже со слешем) – это закрывающий тег. Здесь важно понимать, что есть одинарные теги а есть парные теги, в данном случае мы видим классический пример парного тега. Тег является контейнером для всех остальных тегов.","type":"unstyled","key":"7vipv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запомните, что любой HTML код должен находиться внутри контейнера .","type":"header-three","key":"6f8u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег ","type":"header-two","key":"68u4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следующий тег – тег он также является контейнером и содержит внутри себя два других тега.","type":"unstyled","key":"fdcul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему head? Head в переводе с английского –голова.","type":"unstyled","key":"j1mb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже вы видите тег , body – это тело. Любой HTML код содержит как форматирующие теги, так и специальные.","type":"unstyled","key":"8skhc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое форматирующие теги?","type":"header-three","key":"9gib4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форматирующие теги – это теги, которые отвечают за абзацы, заголовки, картинки и т.д. Они создают видимую часть страницы – все, что видит пользователь. На самом деле нужны еще теги которые будут говорить браузеру в какой кодировке сделана страница, какой у нее должен быть заголовок, какие таблицы стилей должны подключаться, какие скрипты должны подключаться. Это две такие группы тегов – одна форматирующая, а другая вспомогательная, которая осуществляет работу всей страницы.","type":"unstyled","key":"a8ogv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Область … предназначена для всех вспомогательных тегов, а область … - для всех форматирующих.","type":"unstyled","key":"crej3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контейнер ","type":"header-two","key":"cjegl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнем мы с первого тега , который отвечает за кодировку.","type":"unstyled","key":"dal5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вообще тег многогранный, и может отвечать не только за кодировку как в данном случае, но и за многие другие вещи. Пока мы углубляться в тег не будем, для этого у нас будет отдельный урок попозже, когда вы уже втянитесь в язык HTML. Сейчас это может вас только запутать.","type":"header-three","key":"cfieh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь у нас есть указатель charset=utf-8 –который говорит браузеру что данный документ создан в кодировке UTF-8.","type":"unstyled","key":"c51k9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для чего нужна кодировка?","type":"header-three","key":"ugtg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ни для кого не секрет что у нас в мире говорят и пишут на разных языках. Если мы с вами создаем и пишем страницу на русском языке, то немец будет писать на немецком, а японец вообще будет писать такими символами, которых у нас даже на клавиатуре нет! Поэтому раньше если мы писали на каком-либо языке, то нам нужно было указывать в кодировке, что мы пишем именно на этом языке. Когда мы заходили на страницу, браузер сразу понимал, на каком языке написан сайт и какой язык для текста используется на этом сайте и соответственно пытался отобразить контент в зависимости от этой кодировки. К сожалению это не всегда получалось. Когда мы заходили на какие-нибудь китайские, арабские и т.п. сайты, у нас вместо их символов отображались черные квадраты, знаки вопроса и т.д. браузер просто не понимал что это за символы. Для решение этой проблемы была создана универсальная кодировка – UTF-8. С того момента как она вошла в обиход и стала стандартом, отпала необходимость указывать кодировку для конкретного языка. Достаточно указывать эту универсальную кодировку – UTF-8, и у вас сайт будет нормально отображаться во всех браузерах и при этом упрощается работа еще и с базой данных.","type":"unstyled","key":"f449u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имейте ввиду что мы всегда будем указывать эту универсальную кодировку – UTF-8.","type":"unstyled","key":"77o73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь есть один подвох – что-бы браузер правильно отображал страницу в этой кодировке должен быть и сам документ. В Notepad++ на панели инструментов есть такой пункт - кодировки. Здесь если у вас не стоит «Кодировать в UTF-8 (без BOM)» то щелкните пункт «Преобразовать в UTF-8 (без BOM)». В этом случае у вас документ будет преобразован в UTF-8 (возможно загорится красная дискета, просто сохраните файл) и в правом нижнем углу вы увидите, что ваш документ ANSI as UTF-8 в кодировке Dos\\Windows – это будет означать что ваш документ создан в режиме UTF-8 и отображение у вас будет нормальным.","type":"unstyled","key":"chsai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Совет:","type":"header-three","key":"4dscn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"зайдите в настройки и во вкладке «Новый документ» поставьте что-бы ваши документы сразу создавались в кодировке UTF-8 без метки BOM.","type":"unstyled","key":"aermq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег ","type":"header-two","key":"fksqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Title в переводе с английского – заголовок. Здесь указывается название страницы, которое будет отображаться во вкладке браузера. Давайте назовем нашу HTML-страницу – «Моя первая страница», сохраним наш документ и посмотрим как это выглядит в браузере. В Notepad++ на панели инструментов есть пункт «Запуск» и выберите запуск в каком-нибудь браузере. Вот он нам пишет – «Моя первая страница» во вкладке и в заголовке браузера, т.е. то что мы указали в <title> у нас здесь отобразилось. Как вы видите – видимая часть у нас пустая, также как и блок <body>, который у нас пока пуст, который отвечает за форматирующие теги , за то что видит пользователь.","type":"unstyled","key":"59jqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Каркас мы с вами создали, разобрали с вами что такое DOCTYPE, разобрали теги-контейнеры <html> и <head>, тег <meta> который, в данном случае, отвечает за кодировку и тег <title> который отвечает за название страницы. На этом мы с вами остановимся, увидимся в следующем уроке.","type":"unstyled","key":"cka9q"},{"data":{"image":{"id":"5e5efbd407fa2c0a6634bdc2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"39epi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dcis3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"Bul0JrDmo52597TxWdyk"}],"entityMap":{"0":{"data":{"href":"http://htmlbook.ru/html/!doctype","url":"http://htmlbook.ru/html/!doctype"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>