Мини-лекции 32. Анатомия прозоровской страницы

   Вы были в морге на вскрытии? Нет? А, я был... О, обрадовались! Нет пока ещё. Только «ассистентом». Сначала при препарировании нашего погибшего тракториста (вместе с трактором с моста...), а позже при операции хвостатой мерзости (Муси Васильевны)... Спроси любого на предмет, что такое анатомия? Ну, да наука о строении тела человека и животных. Да, нам как-то не подходит, но? Но с другой стороны Анатомия от латинского и греческого anatomia, anatomos «рассекаю, разрезаю» и неважно чего... К сведению есть ещё анатомии: Детского возраста; Для художников (скульпторов) и Пластическая. В смысле всё тоже, но без ливера! Вот и мы посмотрим на, что мы смотрим. Да, на страницу, бамашку. И вроде бы да и вроде бы нет?! Во всяком случае не бумажную точно.

   Если послушаешь простого обывателя: «Я вошёл в сайт. Я попал на сайт.» А на самом деле? На страницу. Но ведь там написано... На заборе много чего написано?! Откройте текстовый редактор. Пустое окно перед Вами. Сохраните как некий документ дав ему имя и через точку расширение html или htm, компьютер поймёт по-любому. Так будет существовать документ, Имя.html. Раньше длина имени была ограничена, а как сейчас? Всё, щёлкнув по образовавшемуся значку... Какому? Значку Вашего браузера по умолчанию. Сначала откроется окно браузера и ваша пустышка, Ваш документ (Имя.html). Это и есть: HTML-документ, он же WEB-страница, интернет-страница. Хотя с виду пустышка?!

   Выборы в нашей деревне, ну очень демократические... Тут тебе и изберком. Участки, урны, куча бумажек, видеокамеры, наблюдатели-дармоеды... И толпы от которых как бы, что-то там зависит?! Вот только после начала ликвидации кровавой ОПГ, все депутаты, извиняюсь народные избранники, разбежались как тараканы! Никого было не найти... А когда вскрыли эту банку с бандитским дерьмом, то оказалось, что из 26 избранников, 20 члены всё той же кровавой ОПГ!!! Мы избираем то, что как в магазине! Что подсунули, из того и выбираем. А, подсунули кровавые бандиты! Им же власть принадлежала... Так, о чём это я? Об обратной стороне медали а, вот на неё то никто и не заглядывал! А, надо бы?! Вот мы и заглянем.

   Нет не туда, а на оборотную сторону. Нет не медали, а нашей страницы. Какой? Да, любой, какой хотите? Хоть этой. Но до этого, ну чтобы Вы хоть, что-то поняли?.. Вот Ваша страница-пустышка. В общем виде, Документ, имя.html. Или HTML - документ, а страница HTML-страница. html, для тех кто не в курсе, это расширение. Чего? Имени файла (документа, и вообще чего либо). Всё ведь начиналось издавна со времён ДОС (DOS), Дисковой Операционной Системы. Хонурики состряпавшие ДОС поставили условия, имя чего либо не должно быть более 8 знаков!!! Пока раскачивались, всех, всё устраивало, но потом... Как дать имя, так чтобы было понятно к какому боку пристроить файлик? Но как оказалось вразумительные имена (с 8 знаками) быстро закончились, и? И было придумано средство как обмануть ДОС? Правильно, через ТОЧКУ и расширение имени. Кому первому стукнуло, пришпандорить к расширению какую-нибудь программу. Нет не саму программу, а условно принадлежность к программе. Какой? Той, в которой и откроется Ваш документ: текст, картинка, программа и тд. Так расширения: Текст - txt; Изображение - bmp, jpg, gif, psd. И хотя «новая ДОС», - WINDOWS позволяет более длинные имена, расширение прочно закрепилось и не думает открепляться...

   А, что для нас на бытовом уровне значит? Во-первых, теперь к файлику пришпандоривается автоматически значок (изображение) либо той программы которая создаёт документ, либо в какой откроется? Хотя многие форматы скажем изображения могут открыться в разных программах и не только в редакторах, но и в чисто смотрелках. Так, что Вашей пустышке дадут значок принадлежности к программе. Какой? Правильно, программе-браузеру. Да, той самой, с помощью которой мы и видим, что скрывается за значком? Пока мы видим только белую (по умолчанию) бумажку! Почему? А Вы об этом браузеру хоть, что-то сказали? Нет! Так чего Вы хочите? А раз так, то Ваша страничка есть не, что иное как инструкция программе-браузеру, типа: что и куда, да ещё и как? А если Вы соображали под шафой, а браузер уже догадался, то всё пойдёт по умолчанию: поле белое, Ваша писанина чёрная, а шрифт: Times New Roman PS MT. В смысле что в башке у браузера забито? Ну вот Вы, что-то написали от трёх букв и более... Где Вы всё это увидите в окне браузера? А Вы браузеру сказали? Нет. И значит всё по умолчанию, - верхний, левый угол!

   Ну,хорошо. Это простая бамашка, а если большая (текст, картинки всякие) тогда как всё это будет выглядеть? Так, как Вы об этом скажете своему браузеру. Нет, не на русском. Нет, не на матерном. А на каком же? На языке HTML (Hyper-Text Markup Language), язык разметки гипертекста. То есть язык на котором Вы и будете разговаривать с браузером.

   Смотрели фильм «Добро пожаловать или посторонним вход воспрещён»? Посмотрите. Там есть сцена где работник пионерского лагеря актёр Алексей Смирнов достаёт своими вопросами Начальника (директора) лагеря (актёр Евгений Евстигнеев):«Куда ставить, та?» (плакат к родительскому дню).
— Да подожди ты...


   Вот и перед Вами станет вопрос, куда ставить? В смысле: Заголовок, Прописная буква, строка, абзац... И много-много ещё чего?! Так, что, чтобы хорошо разбираться в анатомии страниц нужно изучить язык HTML... И это лишь минимум знаний... Но мало поставить что-нибудь куда надо, нужно ещё кое-что разместить на оборотной стороне страницы... Иначе браузер Вас не поймёт и поступит как ему вздумается... Вот как выглядит почти пустышка по минимуму созданная в программе-редакторе Front Page, оборотная сторона рис.7а. Вот, тогда, по умолчанию, программа присваивает своё имя «Новая страница». Даже если как в нашем случае, пустышка. Итак, вся страница заключена (ограничена) в тэги html. Тэг от английского tag — ярлык, признак. Это <html> заключённая в угловые скобочки (программистские) и есть тэг, не путайте с разрешением?!. В нашем случаев в верху открывающий тэг <html>, в низу закрывающий </html>. И как видите нижний отличается от верхнего косой чертой (слэш). Иногда их обзывают тэг-контейнер. А, в контейнере, внутренность, содержимое. Внутри другие тэги: <head> — голова, заголовок, оглавление... Вся эта фигня для компьютера, а не для Вас (нас); <meta> — информация не содержащая в HTML, но указывающая на какие-то действия... Нам до всего этого по барабану... В нашем случае указание, что кодировка текста есть «windows - 1251», и подкрашено мною пурпурным цветом. <title> — имя страницы. Как Вы заметили все тэги парные (открывающие и закрывающие). И последний тэг, <body> — тело, не важно чьё?! :-)) Собственно то самое полезное содержимое и главное, видимое нами: текст, картинки и тд. Красный отрезок линии и есть условно, содержимое.

   Если Вы думаете, что весь HTML ограничивается только угловыми скобочками, то? То Вы глубоко ошибаетесь... Так полное описание HTML 4.0, четвёртой версии составляет 671 страницу. Потом, как говорят злые языки, есть уже пятая и даже есть или на подходе шестая... Так, что всё усложняется с большой скоростью и на ПРОЗЕ тоже!

   А, как же там с внутренним содержанием? Это про тэги <body> и </body>. В body тоже туши свет. Там в одни тэги входят вторые, в них третьи и тд... Так называемый, матрёшечный принцип. Более подробно (если Вам интересно?) здесь: http://proza.ru/2020/07/31/535 и здесь http://proza.ru/2020/07/31/552 И Вы поймёте, что здесь не всё так просто?! Ну, хорошо. Определились «Куда ставить?!», а, что потом? А, потом Вы скажете: «Сделайте нам красиво.» И тут-то всё и началось! Да, пока скажем обычный текст всех устраивал, никто и ничего... Но вот кому-то стукнуло текст нужно сделать: жирным, размером, отличным от общего размера, курсивом и надо же, красного цвета! И, шо теперь делать? Так появился тэг <font> с атрибутами: face, size, color... Плюс тэги: < b >, < i >. В переводе на матерный: Шрифт, размер, цвет, жирность и отображение курсивом. Добавлю, что так называемые атрибуты принадлежат только открывающему тэгу!!! Ну, если в тексте таких извращений 1-2, то ещё куда ни шло, то при массовых извращениях, однако?! Так, во избежания мирового скандала, и появились, так называемые каскадные таблицы стилей — CSS! И если HTML, язык разметки (структуризации), то CSS для презентации. Типа детских раскрасок (Вы же просили красиво...) Да, это так, но не совсем. Да, всё тоже, что и мог HTML. Но! Но в отличие от HTML где каждая хотелка обрастает всякими тэгами, атрибутами... И так каждый объект интереса... А, вот если пометить нужное, то с помощью CSS можно «раскрасить» одним махом, хоть тысячу страниц... Главное заранее договориться. И как пример, на рис.6а кусочек моего бывшего сайта. Точнее часть главной страницы, без применения, а на рис.6b с применением CSS. Почувствуйте разницу?! Надпись, чистый текст с клавиатуры, украшенный CSS, а не изображение фотошопа, если Вы вдруг подумали. Плюс скруглённые уголки.

   Плюс ко всему на странице появился ещё и язык программирования JavaSkript, со своими скриптами (сценариями). Как в виде отдельных файлов, так и внедрённых в страницу. Скрипт или сценарий, это программа, набор команд. Кому? А, всяко-разно... Я же не программист?

   А, теперь, когда Вы чуть-чуть, что-то поняли приступим к вскрытию. А, что нам собственно нужно? Как минимум глянуть на оборотную сторону страницы или по-другому, код. Потому как лицевая сторона резко отличается от оборотной. Итак у нас два пути для этого. 1) Сохраним страницу (скажем, эту) и? И, если Вам позволят это сделать (на некоторых сайтах стоит запрет), и? И на месте сохранения появятся: веб-страница и некая папка. И как страница, так и папка с одним и тем же именем. Щёлкнув по файлику страницы, Вы увидите то, что только видели как бы из интернета. Но не радуйтесь... При отключенном интернете или сервере ПРОЗЫ, страница может оказаться неполноценной? Отчасти будет себя вести нормально, а в общем не совсем... Но мы пока не об этом? Откроем папку и в ней на левом крае иллюстрации (рис.1,2) видим на рис.1 то, что сохранилось... Что и как там, на сервере (ПРОЗЫ) находилось мы с Вами скорее всего не узнаем?! На рис.2 это уже внутренности папки. Всё барахло для страницы. Если бы это была просто бамашка с текстом, папки не было бы... Если Вы сможете удалить папку, то Ваша страница изменится до неузнаваемости... Чтобы удалить папку нужно отмазаться страницы. Система Вас предупредит... И если согласитесь на переименование, папка уже не будет принадлежать страничке! Аналогично и переименование файла странички... Да прочитать текст Вы сможете, а остальное???

   Так, что же в папке рис.2? 1) Три файла изображений: сверху-вниз, это иллюстрация [676.jpg]. Файлик какой-то статистики??? [hit. gif]. И наконец самое загадочное изображение [proza.svg]. SVG, это формат когда мы видим, преобразованное в растровое, векторное. А, всё это отображается с помощью браузера. Если файлик открыть в текстовом редакторе, увидите много всяких непонятных знаков и цифорок изменяя которые мы можем менять как-то: конфигурацию изображения, цвета, размер... А, изображение это тот самый знакомый логотип ПРОЗЫ! Тот самый ПРОЗА.РУ рис.3. Изменяя коэффициенты можно изменить размер как на рис.4. Как в сторону уменьшения, так и увеличения. Как один автор-популяризатор в шутку сказал, что так можно ПРОЗУ.РУ сделать высотой с девятиэтажный дом и с прежним качеством! :-)) 2) Голубой листик + буква Т на жёлтом фоне. Это файл, таблица стилей CSS [s main 11.css]. 3) И наконец 4 файлика под разными именами. Это программы-сценарии, те самые, написанные на языке программирования JavaScript. И c расширением js! Это внешние сценарии, но есть и внедрённые в страницу. Честно признаюсь не знаю, кому предназначены эти команды?!!

   И, наконец картинки... Их три штуки. рис.5, это огрызок сценария [ga.js] В реальном виде, ширина на весь экран монитора, а по высоте около 12 окон при моём разрешении монитора 1024 на 768 точек. Да, кто без очков имеет и большее разрешение. Там конечно окон меньше, но всё равно впечатляет!

   На рис.6 и рис.7 Начало и конец кода нашей страницы. Да, конечно, судя по номерам строк чего-то не хватает? Части кода со страницы 15 и по страницу 113. Да, там такая же HTML - белиберда, ничего интересного?.. Плюс по всему коду, где-то штук 16-17 пустые строки, но всё же?! При всём, текстовых строк всего лишь одна (на странице 2, в коде, 1), размер шрифта меньше. А, теперь вспоминая нашу страничку-пустышку, с чего начинается код? Правильно с тэга <html> и заканчивается закрывающим тэгом </html>. А мы, что видим? Открывающего нет! Это я вставил с красной обводкой... Почему??? Вопрос не ко мне.

   Если Вы вдруг захотите посмотреть код своей страницы, то? Это очень даже просто, но? Я Вам покажу только в моей системе (на момент описания) ХР + Firefox`ESR версия 52.9.0.6746 и? И алгоритм: Инструменты - Веб-разработка - Исходный код страницы. После чего Вы увидите свою страницу «сзади». :-)) Как всё это будет выглядеть в Вашей системе, вопрос конечно интересный?! Уловите алгоритм и главное к чему должны прийти, к коду.

   Если Вы тоже самое сделаете с сохранённой страницей? У меня почти тоже самое, ну почти, чуть-чуть усложнено... Другие же сценарии те, что в папке, выглядят по-разному, как по содержанию, так и по структуре, ну, дык?! Желаю успеха!