Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В сегодняшней статье поговорим о таком нужном и важном софте как клиент FileZilla, который я всегда упоминаю, когда речь идет о необходимости работы с сайтом, расположенным на удаленном сервере.

Данная программа является каждодневным и постоянно используемым инструментом вебмастера, ведь именно она помогает загружать и выгружать различные изображения, видео, редактировать файлы, причем делать это с такой же легкостью, как будто они расположены на персональном компьютере. Да в конце концов, посредством Файлзиллы есть возможность делать резервное копирование (бэкап файлов сайта), что позволит их сохранить при неожиданном форс-мажоре.

В общем, значение этого самого популярного в мире FTP клиента трудно переоценить, который, ко всем прочим плюсам, является еще и абсолютно бесплатным. Конечно, и у Файлзиллы есть свои недостатки, например, уязвимости в плане безопасности. Но все эти проблемы вполне решаемы, путей их устранения в числе прочих аспектов я коснусь в настоящей публикации.

ЧИТАТЬ ДАЛЬШЕ

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. На современном этапе язык ХТМЛ служит для обеспечения корректного отображения контента (текста, изображений, видео) на всех страницах веб-ресурсов (блогов, сайтов, порталов и т.д.) в удобном для пользователей виде.

На блоге Goldbusinessnet.com для изучения HTML есть специальный раздел, предназначенный начинающим, так что вы без труда сможете постигнуть основы этого языка разметки, который, к слову, не является супер-пупер сложным и подвластен большинству тех, кто раньше вообще не сталкивался с ним и был далек от этой темы.

В сегодняшнем материале я планирую представить в основном общую информацию, которая, тем не менее, очень важна не только начинающим изучать HTML с нуля, но и более опытным юзерам. В частности, мы рассмотрим, из каких элементов состоит код языка разметки, какие из них являются обязательными и присутствуют в каждом документе, а также на каком официальном ресурсе можно найти абсолютно все действующие теги, служащие основой любого кода ХТМЛ.

HTML — это специальный язык разметки гипертекста (история зарождения и развития)

Начнем с того, что аббревиатура HTML расшифровывается как «HyperText Markup Language», что в переводе на русский означает «язык гипертекстовой разметки».

Он был создан основоположником интернета Тимом-Бернерсом Ли в конце 80-х — начале 90-х прошлого столетия. Этот язык разметки (подчеркиваю, разметки, а не программирования, как считают некоторые неопытные пользователи) изначально задумывался как средство обмена научной и технической информации между специалистами. Именно с помощью HTML любое содержание должно было воспроизводится без искажений на каждом устройстве.

Значение языка гипертекстовой разметки многократно возросло с появлением первых браузеров (читайте о самых популярных на сегодняшний день), или, по-другому, веб-обозревателей. Они позволяют не только найти и получить нужную страницу (документ), но и интерпретируют полученный ХТМЛ код в понятный пользователям глобальной сети вид.

Кстати, именно появление браузеров вкупе с развитием ХТМЛ можно считать зарождением новой эры, когда интернет начал принимать современные очертания.

В 1994 году по инициативе того же Тима-Бернерса Ли основана организация W3C, которая была призвана разработать единые стандарты для производителей программ и оборудования. Это было начальным этапом по наведению порядка в Мировой Паутине, хотя не все складывалось гладко (но без этого шага неминуемо последовал бы хаос в полном смысле этого слова). В рамках этих мероприятий была разработана 2 версия языка разметки гипертекста.

В этом же году получил полноправную "путевку в жизнь" браузер Mosaic, ставший прародителем Netscape Navigator (который в свою очередь впоследствии был преобразован в Mozilla Firefox).

В 1995 году по инициативе корпорации W3C опубликована очередная версия HTML 3, которая уже поддерживала каскадные таблицы стилей (CSS).

Надо сказать, что разработчики веб-обозревателя Internet Explorer, появившегося в том же 1995 в качестве детища компании Microsoft и поставлявшегося в составе самой популярной в мире операционной системы Windows, начали внедрять свои стандарты, которые коснулись и HTML.

Появился некоторый дисбаланс, поскольку одни разработчики вновь появлявшихся веб-браузеров (например, Opera) следовали рекомендациям Всемирного Консорциума W3C касательно языка ХТМЛ, а другие использовали стандартизацию по лекалам компании Майкрософт, которая была внедрена в Интернет Эксплорер.

В результате страницы сайтов отображались по-разному в различных браузерах. Это негативным образом коснулось как простых пользователей, так и вебмастеров, которые вынуждены были прибегать к различным ухищрениям для того, чтобы добиться высокой степени кроссбраузерности (идентичного отображения документов в разных браузерах).

Такая ситуация сложилась в том числе потому, что работа по внедрению единого стандарта шла в W3C крайне медленно и отставала от развития технологий, используемых в глобальной сети.

По этой причине многие необходимые аспекты не были к тому времени до конца учтены. Чтобы не допустить окончательно неразберихи, в !997 году Консорциум сделал стремительный рывок, представив в начале года версию HTML 3.2, а уже в конце года — и 4.0, которая оказалась принципиально новой, в ней многие элементы были отменены, поскольку безнадежно устарели.

А в 1999 году миру явился HTML 4.01, созданный на базе четвертой версии и безальтернативно просуществовавший долгое время. Это стало большим успехом Консорциума, потому что к этому времени подавляющее большинство популярных браузеров было адаптировано под этот стандарт.

Исключение долгое время составлял лишь Explorer, разработчики которого явно не торопились полностью подключиться к единой стандартизации. Главной причиной была сила популярности ОС Виндовс (напомню, этот обозреватель по умолчанию является ее частью), соответственно и доля IE первое время оставалась весьма значительной в мире.

Однако, время расставило все по своим местам. Бурное развитие конкурентов (Мозилы, Оперы, а, главное, Хрома, явившегося продуктом могущественного Гугла) серьезно пошатнуло позиции Эксплорера, а потому владельцы Microsoft вынуждены были предпринять определенные шаги.

Одним из этих шагов стал постепенный переход к Международным стандартам, в результате чего уже 9 версия IE была практически полностью адаптирована к ним. Таким образом, возросшая активность организации W3C позволила сохранить стабильность и порядок во многих аспектах, что позволило ей завоевать серьезный авторитет среди крупнейших компаний компьютерной и интернет индустрии. Все ожидали следующего этапа, и он настал.

Долгие годы версия ХТМЛ 4.01 успешно выполняла поставленную задачу. Но жизнь двигается вперед, инфотехнологии активно развиваются, поэтому в один прекрасный момент возникла потребность внедрить в язык HTML отвечающие современным требованиям рекомендации.

В результате в 2014 году появилось сообщение об официальной рекомендации новой версии HTML5, что означало полную готовность стандарта к широкому применению.

Более того, в 2016 и 2017 году соответственно со стороны Международного Консорциума окончательные рекомендации получили модификации 5.1 и 5.2, а на данном этапе уже ведутся работы по внедрению версии HTML 5.3.

Далее выясним, какое место занимает ХТМЛ в обеспечении корректной работы современного интернета. Для этого проследим механизм получения пользователем нужной ему веб-страницы.

Полноправным посредником этой операции как раз и служит приложение, именуемое браузером. Необходимо отметить, что каждая страничка любого сайта (по-другому документ) в интернете имеет свой уникальный URL-адрес, включающий протокол HTTP (HTTPS), предназначенный для передачи гипертекста, а также путь до объекта, указывающий на его местоположение:

http://site.ru/category1/article2

Поскольку гипертекст напрямую связан с протоколом HTTP и, соответственно, с языком HTML, для лучшего понимания всей темы следует уяснить и его значение.

Гипертекст (англ. hypertext) — текстовый фрагмент, расположенный на конкретной странице веб-ресурса и содержащий гиперссылки на другие страницы этого или стороннего сайта, вследствие чего пользователь имеет возможность нелинейного чтения, преимущество которого заключается в том, что в процессе ознакомления с материалом можно переходить по ссылкам для уточнения информации, после чего продолжить изучение контента основной страницы.

А теперь краткая информация тем, кто всерьез решил заняться сайтостроением. Физически все файлы вебсайтов, включая HTML-странички, предназначенные для их просмотра в браузере, располагаются на серверах, представляющих из себя мощные компьютеры, специально ориентированные на выполнение этой задачи. Естественно, они имеют доступ в интернет.

Услугу по размещению сайтов на серверах, называемую хостингом (как ею воспользоваться), предоставляют провайдеры (хостеры), взимая за нее определенную плату. Впрочем, всегда можно найти себе и бесплатный хостинг, но в таком случае для вас будут действовать некоторые ограничения, которых нет у платных аналогов.

Любой вебресурс обладает уникальным доменным именем, связанным с ай-пи адресом сервера, на котором он расположен (читайте о связке IP и DNS) и входящим в состав урла.

Поэтому после ввода пользователем URL (пример дан чуть выше), в состав которого, напомню, входит еще и путь до конкретного файла, содержащего нужную HTML страницу, и последующего нажатия клавиши Enter начнется "диалог" между клиентом, в качестве которого в этом случае выступает браузер, и сервером, где "живут" все файлы нужного сайта. Браузер посылает HTTP запрос, в результате чего сервер отдает вместе с ответом содержание требуемого документа.

Содержимое странички как раз и закодировано средствами языка ХТМЛ, преобразуемое тем же браузером в обычный контент (который и является гипертекстом, но уже без разметки), отображаемый на экране устройства и удобный для восприятия обычным пользователем.

Зачем нужна подобная кодировка? Код HTML не просто позволяет корректно отображать элементы посредством указания соответствующих тэгов, но еще и придать им нужный дизайн с помощью атрибутов (о них поговорим ниже), а также привязки к файлу каскадных таблиц стилей (CSS) .

Общая структура HTML страницы и основные тэги

Итак, абсолютно любой документ в интернете предстает перед глазами юзера в окончательном, готовом для изучения, виде. Однако, как мы выяснили выше, браузер получает от сервера его содержание в формате HTML, которое выглядит примерно так:

Если взглянуть на код любого документа, то можно выделить две составляющие:

• контент в "чистом" виде, то есть, содержание, которое получает пользователь;
• элементы разметки (команды), каждый из которых больше известен под наименованием «тег» или «тэг» (англоязычный вариант — «tag»)

Именно теги во многом определяют, как будет выглядеть web-страничка на мониторе устройства пользователя (ПК, планшета, смартфона и т.д.). В коде вы их можете определить по наличию угловых скобок, между которыми заключено их название (например, <body>), причем, можно выделить два основных типа:

1. Парный тег с открывающим <head> и закрывающим </head> элементами. Последний имеет слеш перед названием. Примером может служить один из наиболее часто используемых HTML тег абзаца p, содержащий текстовый фрагмент:

<p>Здесь заключен текст.</p>

2. Одиночный, или пустой, тег, не имеющий закрывающего элемента. В него нет возможности заключить какое бы то ни было содержание с целью разметки, но зато можно отобразить на веб-странице какой-нибудь блок или фрагмент. Здесь в качестве примера можно взять тег img, с помощью которого выводятся изображения.

В языке гипертекстовой разметки есть несколько обязательных тегов, которые содержит любой ХТМЛ документ. Наверное, легче всего представить это в виде простой схемы:

Данную конструкцию можно считать шаблоном, содержащим следующие основные элементы:

• <!DOCTYPE html> — специальный тег, который называют еще декларацией. Он начинается с угловой скобки, заканчивается ею, имеет перед названием восклицательный знак и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров;
• html — корневой элемент, который определяет все содержание страницы;
• head — внутри этого тэга размещается служебная информация, которая необходима браузеру для корректной интерпретации документа. Она не видна на открытой вебстранице;
• body — между закрывающим и открывающим тегами будет помещена информация, отображаемая на web-странице.

С помощью тэгов браузер получает команды о том, какие элементы будут располагаться на веб страничке. Однако, каждый из этих элементов обладает своими характеристиками и свойствами. Чтобы учесть этот аспект, в языке разметки гипертекста существует такое понятие как атрибут, принимающий то или иное значение (параметр). Тогда в общем случае синтаксис открывающего тега (либо одиночного) можно представить в таком виде:

А вот как можно отобразить с помощью тэга button кнопку на сайте для отправки данных формы на сервер (значение «submit» атрибута «type» позволяет получить нужный вид кнопочки):

<button type="submit">Отправить форму</button>

Если вы являетесь вебмастером или твердо решили стать таковым, то эту информацию следует обязательно взять на вооружение, поскольку она окажет неоценимую помощь при верстке. Конечно, в процессе создания своего ресурса в современных условиях вы, скорее всего, используете одну из популярных систем управления контентом, в просторечии именуемых движком сайта (здесь обзор лучших CMS), например, ту же Вордпресс.

Это может избавить вас от необходимости полностью вручную составлять HTML код всех страниц, ведь одной из функциональных особенностей любой ЦМС является возможность генерировать странички с разметкой автоматически "на лету". Тем более, что для написания базового контента, например, в админ панель WP встроен весьма удобный HTML-редактор.

Однако, при доработке и редактировании сайта (а без этого невозможно обойтись) вам может понадобиться вставить в шаблоны темы с помощью HTML-кода дополнительно те или иные формы, кнопки, логотипы и т.д. Вот тут-то и пригодится знание тегов и их атрибутов.

Почему важно использовать HTML5 и где найти все действующие теги и атрибуты для разметки гипертекста

В статье я уже обмолвился, что последнее обновление HTML 4.01 вышло в далеком уже 1999 году. Однако, эта версия оказалась настолько удачной, что просуществовала аж целых 15 лет, что кажется невероятным, если учесть бурное развитие инфотехнологий.

Но все же с тех далеких пор интернет сильно изменился. Ускорение глобализации, рост числа пользователей планшетов, смартфонов и других мобильных устройств продиктовали насущную необходимость внесения весьма существенных изменений и дополнений, поэтому начиная с 2014 года официальной действующей версией является HTML5.

Для вебмастеров очень важным является понимание того, что при создании новых сайтов уже нужно использовать пятую версию, так как это сулит немалые преимущества. Но заслуга Международного Консорциума W3C заключается в том, что новый вариант разметки создавался очень взвешенно, в нем осталось все лучшее, что было присуще прежней редакции.

Более того, HTML4 до сих пор поддерживается, в том числе популярными браузерами, а потому вебмастерам, имеющим давно действующие проекты, заточенные под четвертую версию, можно осуществить плавный и максимально безболезненный перевод своих сайтов на HTML5. Но все-таки сделать это желательно как можно быстрее по многим причинам, главной из которых логично считать следующую.

Дело в том, что в отличие от всех предыдущих версий, которые создавались на базе метаязыка SGML, ХТМЛ 5 разработан в связке с DOM (Document Object Modul), являющимся по своей сути универсальным программным интерфейсом, дающим возможность приложениям получать доступ к содержанию документов с гипертекстовой разметкой.

Это дает право считать HTML5 не продолжением предшествующих версий, а принципиально новой платформой, использующей программное обеспечение для создания видео, аудио, графики, а также многих других полезных вещей. Такие вот дела.

Как я уже сказал, полный переход на пятую версию происходит постепенно, поэтому браузеры какое-то время будут поддерживать HTML4. Кроме того, удачный вариант четвертой модификации позволил оставить подавляющее число тегов и атрибутов без изменений. При внедрении ХТМЛ 5 лишь незначительное их количество стало неликвидным или было изменено.

Наверное, настало время проинформировать вас относительно веб-ресурсов, где вы сможете посмотреть полный перечень всех действующих и валидных на данный момент элементов разметки. В первую очередь, естественно, это первоисточник, коим является официальный сайт World Wide Web Consortium (W3C).

На этой странице там представлен список всех стандартов. Возможно, вы захотите лицезреть элементы, относящиеся к четвертой версии, тогда переходите по ссылке HTML 4.01 Specification, после чего выбираете вверху страницы подраздел «elements».

Но все-таки наиболее актуальны теги и атрибуты, соответствующие ХТМЛ5. Для получения к ним доступа на той же web-странице с перечнем стандартов нужно кликнуть по линку «HTML5», а после перехода прокрутить страницу в самый низ и перебраться в раздел «Index» - «Elements»:

На первых порах вам будут нужны первая колонка (Element), в которой указаны действующие тэги, при клике по которым вы переместитесь на вебстраницу с их подробным описанием, и шестая, где даны соответствующие им атрибуты (Attributes). Кстати, если нажать на ссылку globals, то можно перейти к просмотру списка глобальных атрибутов, работающих для всех без исключения тегов. В других столбцах следующая информация:

• Description — краткое описание элемента;
• Categories — категории, к которым относится данный тег;
• Parents — к какой категории относится родительский элемент;
• Children — то же самое, только касается дочерних элементов;
• Interface — нормативное определение элемента в интерфейсе DOM, на основании которого базируется весь HTML 5.

Ежели захотите углубиться в тему и получить более подробную информацию по каждой из всех присутствующих в таблице категорий, следует просто нажать на ее название. Правда, все данные там на английском, но здесь уж ничего не поделаешь. Тем, кто не понаслышке знаком с этим языком, будет несложно понять содержание, остальным — Гугл переводчик в помощь.

Но я все же постараюсь дать краткое пояснение в отношении чтения данной таблицы на примере тега a, посредством которого создается гиперссылка (hyperlink). Скажем, в колонках «Categories» и «Parents» напротив него присутствует категория «phrasing» (подразумевающая текст документа, а также теги, осуществляющие разметку текстового фрагмента), которой может принадлежать «a» и его родительский элемент абзаца p.

<p>Фрагмент текста с <a href="http://site.ru/article1">гиперссылкой</a>, которая создается с помощью дочернего элемента a.</p>

Попутно обращаю ваше внимание на то, что в выше приведенном примере для тега a указан атрибут «href», значением которого является URL страницы сайта.

Пятая версия языка разметки еще более тесно связана с каскадными таблицами стилей (CSS), определяющими стиль оформления, поэтому продолжилась тенденция упразднения некоторых атрибутов, которые выполняют ту же самую задачу, но гораздо менее функциональны.

Впрочем, отследить абсолютно все отличия HTML5 от HTML4 вы сможете опять же в специальном разделе веб-ресурса, принадлежащего Консорциуму, которые включают новые, измененные, а также устаревшие элементы и атрибуты. В завершение предлагаю видеоролик от Евгения Попова, который может дополнить информацию в статье: