Пример создания страницы html в блокноте

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"8gg9q"},{"data":{"image":{"id":"5ef31c55638cd448ff43633e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"ait1m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"44ffl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всем салют, друзья!","type":"unstyled","key":"3jc6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это первый урок знакомства с html. Его цель ознакомление с html-кодом страниц сайта, понять вообще как он выглядит, как его посмотреть. Погнали!.","type":"unstyled","key":"cq4gr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"eidmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"Как посмотреть html код страницы","type":"unstyled","key":"6co9u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":97,"style":"BOLD"}],"text":"В любом браузере (например, Firefox, Google Chrome, Opera) вы можете воспользоваться комбинацией CTRL+U, или же нажать правой кнопкой и посмотреть исходный код Вы увидите такую картинку. Каждая страница сайта, которая есть в интернете, имеет свой код.","type":"unstyled","key":"2qhgh"},{"data":{"image":{"id":"5ef31c69b0fd6233b08601c1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fbt98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bmf4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможно после того как вы открыли html-код сайта, на вашем лице появился испуг, потому что многое из написанного кажется непонятным и сложным. Но это всего лишь иллюзия. На самом деле, разметка HTML довольно простая (скорее всего вы даже проходили это на уроках информатики в школе).","type":"unstyled","key":"63t9r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Суммарное число html тегов не так уж и велико (по факту используется лишь 10-15 тегов). Плюс к тому же все страницы одного сайта очень похожи друг на друга (отличия заключаются лишь в контентной части). Предлагаю рассмотреть простой пример создания html-страницы, чтобы начать наше изучение.","type":"unstyled","key":"8l8oc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"53f39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":"Создание простого html-документ в блокноте","type":"unstyled","key":"8c4b6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Для того чтобы сделать свою первую html страницу откройте обычный блокнот и сохраните его под каким-то именем (например, index.html). Тип файла необходимо выбрать \"все файлы\", а после имени обязательно дописать \".html\" или \".htm\", но лучше придерживаться первого варианта (хотя разницы нету).","type":"unstyled","key":"4hu3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По итогу у вас получится файл \"index.html\". В принципе это уже можно назвать html документом, однако в нем ничего нету, поэтому продолжаем и переходим к шагу два - наполнение страницы.","type":"unstyled","key":"cmcio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"201a3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Отрываем созданный файл через блокнот и вписываем в него следующее (можете просто скопировать):","type":"unstyled","key":"av1pi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"comqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"u8pm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"f0rgm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":49,"style":"BOLD"}],"text":"Пример создания страницы html в блокноте","type":"unstyled","key":"e37r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"7kbkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"46ifl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У меня получилось сделать первую страницу!","type":"unstyled","key":"4o6im"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"f7p5h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"dbop6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраняем файл. Открываем index.html с помощью любого браузера, если все сделанно правильно в отрывшейся вкладке должна появиться надпись \"У меня получилось сделать первую страницу!\", а в заголовке \"Пример создания страницы html в блокноте\". Как видите, ничего сложного нет, все просто.","type":"unstyled","key":"ba55d"},{"data":{"image":{"id":"5ef31c88857af30d8d64497c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"filcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1rqk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас немного поговорим о структуре любого html-документа.","type":"unstyled","key":"dq45e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"961rs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Структура html-документа","type":"unstyled","key":"fto57"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":3,"style":"BOLD"}],"text":"1. Любой html документ должен иметь теги","type":"unstyled","key":"alkfb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1bjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"3dnan"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"3ffbo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"6bpps"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":" — открывающий тег документа (располагается самым первым),","type":"unstyled","key":"4tpra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":" - закрывающий тег документа (должен быть самым последним)","type":"unstyled","key":"bf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":77,"style":"BOLD"},{"length":6,"offset":97,"style":"BOLD"}],"text":"Впринипе в html практически все теги состоят из двух элементов: открывающий <ТЕГ> и закрывающий . (отличие думаю вы поняли - /)","type":"unstyled","key":"dgbtn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузеры не воспринимают регистры, поэто с большой буквы или маленькой вы пишете не имеет абсолютно никакого значения. То есть, если Вы напишите так:","type":"unstyled","key":"1amn5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ft8pe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"86qoi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"672oa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"fvpgc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":157,"style":"BOLD"}],"text":"То это будет равносильно тому, что было написано чуть выше, но играть с регистрами букв не рекомендуется. Как минимум потому, что это будет считаться плохой валидацией сайта . Придерживайтесь одного из двух стилей: ","type":"unstyled","key":"5kmp7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"все теги с маленькой буквы, либо с большой (лучше с маленькой).","type":"unstyled","key":"bess8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":3,"style":"BOLD"}],"text":"2. Любой html документ можно разделить на две части\n \n ","type":"unstyled","key":"86jbi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"},{"length":17,"offset":105,"style":"BOLD"},{"length":18,"offset":0,"style":"UNDERLINE"}],"text":"Заголовок страницы. Это невидимая для пользователя часть страницы, не является обязательной (однако, для продвижения сайта и оптимизации кода страницы она очень важна). Синтаксис заголовочной части:","type":"unstyled","key":"er5p5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4ofn4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"","type":"unstyled","key":"d4fk0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"43nsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"заголовочные теги","type":"unstyled","key":"5j9kt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"9r054"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"","type":"unstyled","key":"6i67p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":13,"style":"BOLD"},{"length":7,"offset":22,"style":"BOLD"}],"text":"Между тегами и располагаются следующие элементы:","type":"unstyled","key":"3tgop"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a4itv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":2,"style":"BOLD"}],"text":"· мета теги html (meta)","type":"unstyled","key":"4quah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":21,"style":"BOLD"}],"text":"· заголовок страницы ","type":"unstyled","key":"fbloe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"· подключаемые яваскрипты (JavaScript)","type":"unstyled","key":"r51j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"· подключаемые стили (link) и т.д.","type":"unstyled","key":"6v7vv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":59,"style":"BOLD"}],"text":"Все эти элементы подробно разобраны в специальном уроке по заголовочным тегам »","type":"unstyled","key":"2bpiq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"},{"length":13,"offset":0,"style":"UNDERLINE"}],"text":"Тело страницы (или основная часть). Является видимой для пользователя частью (она располагается в тегах body). Её синтаксис:","type":"unstyled","key":"d0sjn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"a3eko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":1,"style":"BOLD"}],"text":"<body>","type":"unstyled","key":"7pc38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"5ct9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь располагается контент страницы","type":"unstyled","key":"4623a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"...","type":"unstyled","key":"coluf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"</body>","type":"unstyled","key":"c7b4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"<body> — открывающий тег тела страницы. Сразу после него идет то, что видит пользователь: дизайн и контент страницы. Тело и, собственно, весь html-документ должны заканчиваться последовательностью:","type":"unstyled","key":"3b3s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7r9i1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"</body> ","type":"unstyled","key":"8pf43"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":2,"style":"BOLD"}],"text":"</html>","type":"unstyled","key":"dgdf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":7,"offset":115,"style":"BOLD"}],"text":"Примечание: заголовочные теги обязательно должен располагаться перед телом страницы! Сразу после закрывающего тега </head> должно идти основная часть страницы.","type":"unstyled","key":"9udv5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"7s6di"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Уважаемый читатель, я думаю, что теперь Вы имеете небольшое представление о html-документе. Это лишь первый разработанный мною урок, в планах на будущее разработать целый курс который будет включать в себя 21 урок по следующим темам:","type":"unstyled","key":"dp8li"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Урок 1. Знакомство с html\n Урок 2. Пример создание простой html страницы\n Урок 3. Самые основные html теги\n Урок 4. HTML тег <style> - подробное описание с примерами\n Урок 5. HTML тег <a> - подробное описание с примерами\n Урок 6. HTML тег <table> - подробное описание с примерами\n Урок 7. HTML тег <img> - подробное описание с примерами\n Урок 8. HTML тег <form> - подробное описание с примерами\n Урок 9. HTML тег <div> - подробное описание с примерами\n Урок 10. Описание заголовочных тегов html\n Урок 11. Фреймы (теги <frame>, <frameset>, <noframe>, <iframe>)\n Урок 12. Атрибут position в HTML\n Урок 13. HTML тег <ul> - маркерованный список\n Урок 14. HTML теги <h1>-<h6> - заголовочные теги внутри страницы\n Урок 15. Элементы тега <form>: радиокнопки, списки, флажки, текстовые поля\n Урок 16. HTML тег <embed>\n Урок 17. HTML тег <object>\n Урок 18. HTML тег  (комментарии)\n Урок 19. <!DOCTYPE> в html\n Урок 20. HTML тег <ol> - нумерованный список\n Урок 21. HTML тег <font>","type":"unstyled","key":"c562o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вам интересна эта тема, прошу вас оставить комментарий и лайк, при достаточной активности я начну разработку этого курса, всем спасибо!","type":"unstyled","key":"d544n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"vNnEOReWCYoylDB0CVcY"}],"entityMap":{}},"mentions":[]}</article></body></html>