Здравствуйте, уважаемые читатели блога 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>).
В языке гипертекстовой разметки есть несколько обязательных тегов, которые содержит любой ХТМЛ документ. Наверное, легче всего представить это в виде простой схемы:
«>
Данную конструкцию можно считать шаблоном, содержащим следующие основные элементы:
- <!DOCTYPE html> — специальный тег, который называют еще декларацией. Он начинается с угловой скобки, заканчивается ею, имеет перед названием восклицательный знак и показывает, на какую версию html ориентироваться браузеру. Приведенный мной вариант написания декларации уже является детищем 5 версии языка разметки и поддерживается последними модификациями всех популярных браузеров;
- html — корневой элемент, который определяет все содержание страницы;
- head — внутри этого тэга размещается служебная информация, которая необходима браузеру для корректной интерпретации документа. Она не видна на открытой вебстранице;
- body — между закрывающим и открывающим тегами будет помещена информация, отображаемая на web-странице.
Вообще, можно выделить два основных типа HTML тэгов:
1. Парный тег с открывающим <tag_name> и закрывающим </tag_name> элементами. Последний имеет слеш перед названием. Примером может служить один из наиболее часто используемых HTML тег абзаца p, содержащий текстовый фрагмент:
<p>Здесь заключен текст.</p>
2. Одиночный, или пустой, тег, не имеющий закрывающего элемента. В него нет возможности заключить какое бы то ни было содержание с целью разметки, но зато можно отобразить на веб-странице какой-нибудь блок или фрагмент. Здесь в качестве примера можно взять тег img, с помощью которого выводятся изображения.
С помощью тэгов браузер получает команды о том, какие элементы будут располагаться на веб страничке. Однако, каждый из этих элементов обладает своими характеристиками и свойствами. Чтобы учесть этот аспект, в языке разметки гипертекста существует такое понятие как атрибут, принимающий то или иное значение (параметр). Тогда в общем случае синтаксис открывающего тега (либо одиночного) можно представить в таком виде:
«>
А вот как можно отобразить с помощью тэга button кнопку на сайте для отправки данных формы на сервер (значение «submit» атрибута «type» позволяет получить нужный вид кнопочки):
<button type="submit">Отправить форму</button>
Если вы являетесь вебмастером или твердо решили стать таковым, то эту информацию следует обязательно взять на вооружение, поскольку она окажет неоценимую помощь при верстке. Конечно, в процессе создания своего ресурса в современных условиях вы, скорее всего, используете одну из популярных систем управления контентом, в просторечии именуемых движком сайта (здесь обзор лучших CMS), например, ту же Вордпресс.
Это может избавить вас от необходимости полностью вручную составлять HTML код всех страниц, ведь одной из функциональных особенностей любой ЦМС является возможность генерировать странички с разметкой автоматически «на лету». Тем более, что для написания базового контента, например, в админ панель WP встроен весьма удобный HTML-редактор.
Однако, при доработке и редактировании сайта (а без этого невозможно обойтись) вам может понадобиться вставить в шаблоны темы с помощью HTML-кода дополнительно те или иные формы, кнопки, логотипы и т.д. Вот тут-то и пригодится знание тегов и их атрибутов.
goldbusinessnet.com
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта. В примере 4.1 показан код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> <h1>Заголовок</h1> <!-- Комментарий --> <p>Первый абзац.</p> <p>Второй абзац.</p> </body> </html>Скопируйте содержимое данного примера и сохраните его в папке c:www под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Далее разберем отдельные строки нашего кода.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.
Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.
| DOCTYPE | Описание |
|---|---|
| HTML 4.01 | |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | Строгий синтаксис HTML. |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | Переходный синтаксис HTML. |
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> | В HTML-документе применяются фреймы. |
| HTML 5 | |
| <!DOCTYPE html> | В этой версии HTML только один доктайп. |
| XHTML 1.0 | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | Строгий синтаксис XHTML. |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | Переходный синтаксис XHTML. |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | Документ написан на XHTML и содержит фреймы. |
| XHTML 1.1 | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. |
Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе.
В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода.
Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE> в начало документа.
<html>Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
<head>Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
<title>Пример веб-страницы</title>Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).
Рис. 4.2. Вид заголовка в браузере
Тег <title> является обязательным и должен непременно присутствовать в коде документа.
</head>Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
<body>Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.
<h1>Заголовок</h1>HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
<!-- Комментарий -->Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!— и заканчиваются тегом —>. Все, что находится между этими тегами, отображаться на веб-странице не будет.
<p>Первый абзац.</p>Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
<p>Второй абзац.</p>Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 4.1.
</body>Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
</html>Последним элементом в коде всегда идет закрывающий тег </html>.
htmlbook.ru
Структура веб-страницы
- Содержание:
- 1. Структура HTML-документа
- 1.1. Элемент <html>
- 1.2. Элемент <head>
- 1.2.1. Элемент <title>
- 1.2.2. Элемент <meta>
- 1.2.3. Элемент <style>
- 1.2.4. Элемент <link>
- 1.2.5. Элемент <script>
- 1.3. Элемент <body>
1. Структура HTML-документа
Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.
DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.
<!DOCTYPE html> <!-- Объявление формата документа --> <html> <head> <!-- Техническая информация о документе --> <meta charset="UTF-8"> <!-- Определяем кодировку символов документа --> <title>...</title> <!-- Задаем заголовок документа --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей --> <script src="script.js"></script> <!-- Подключаем сценарии --> </head> <body> <!-- Основная часть документа --> </body> </html>
Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.
Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.
Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.
Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.
Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p> являются между собой сестринскими.
1.1. Элемент <html>
Является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| manifest | С помощью значения атрибута указывается путь к документу кэша манифеста, например: <html manifest="about_company.appcache"> |
1.2. Элемент <head>
Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
Для элемента доступны глобальные атрибуты.
1.2.1. Элемент <title>
Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
Для элемента доступны глобальные атрибуты.
1.2.2. Элемент <meta>
Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.
<meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую">
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
<meta name="description" lang="ru" content="Описание содержимого страницы"> <meta name="description" lang="en" content="Description"> <meta name="keywords" lang="ru" content="Ключевые слова через запятую"> <meta name="keywords" lang="en" content="Keywords">
С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
<meta name="robots" content="index, follow">
Индексация разрешена, переход по ссылкам запрещен:
<meta name="robots" content="index, nofollow">
Индексация и переход по ссылкам запрещены:
<meta name="robots" content="noindex, nofollow">
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
<meta http-equiv="refresh" content="30">
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| charset | Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8"> |
| content | Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения. |
| http-equiv | Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы". Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд: <meta http-equiv="refresh" content="30"> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url: <meta http-equiv="refresh" content="0; url=http://mail.ru/"> |
| name | Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop. application-name указывает название веб-приложения, используемого на странице. author указывает имя автора документа в свободном формате. description определяет краткое описание к содержимому страницы, например: <meta name="description" content="Описание содержимого страницы"> generator указывает один из пакетов программного обеспечения, используемого для создания документа, например: <meta name="generator" content="WordPress 4.0"> . keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например: <meta name="keywords" content="Ключевые слова через запятую">. Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято. |
1.2.3. Элемент <style>
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты media, scoped, type, а также глобальные атрибуты.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
<style type="text/css"> .paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; }
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
<div class="paper"> ... </div>
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:
<p style="color: #666666; background-color: #ef4444; padding: 20px;">
| Атрибут | Описание, принимаемое значение |
|---|---|
| media | Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| type | Определяет MIME-тип подключаемого файла со стилями, в данном случае <style type="text/css">. |
1.2.4. Элемент <link>
Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css.
Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url
<!DOCTYPE html> <html> <head> <style> @import url(style.css); </style> <meta> <title> </title> </head>
с использованием элемента <link>. Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
<link rel="stylesheet" href="style.css" type="text/css">
Для элемента доступны атрибуты href, hreflang, media, rel, type, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| crossorigin | Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована. use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована. |
| href | Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
| hreflang | Определяет язык текста в документе, на который идет ссылка. |
| media | Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
| nonce | Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
| rel | Атрибут определяет отношения между текущим документом и документом, на который идет ссылка. alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom), <link rel="alternate stylesheet" type="text/css" title="small_font" href="small-font.css">. <link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml"> <link rel="alternate" type="application/atom+xml" title="News" href="/atom.xml?type=news"> archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов. author ссылка на страницу об авторе документа или на страницу с контактными данными автора. bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка. external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта. first указывает ссылку, ведущую на первый документ из последовательности документов. help ссылка на документ со справкой. icon определяет путь к иконке, которая будет использована для текущего документа. last указывает ссылку, ведущую на последний документ в последовательности документов. license ссылка на сведения об авторских правах для документа. next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии. <link rel="next" href="/next.html" type="text/html" title="Следующая страница"> nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер. noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке. pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него. prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка. prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии. <link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница"> search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов. sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок. stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа. tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу. up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре. |
| sizes | Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", и может принимать следующий значения: ширинахвысота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширинахвысота (размеры иконки задаются в пикселях), например: <link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">; any — иконка может масштабироваться до любого размера. |
| title | Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст. |
| type | Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css". |
1.2.5. Элемент <script>
Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| async | Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). |
| charset | Определяет кодировку символов |
| crossorigin | Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src). anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен. use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен. |
| defer | Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. |
| nonce | Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. |
| src | Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу. |
| type | Используются для объявления языка сценария, использованного при составлении содержимого тега. |
1.3. Элемент <body>
В этом разделе располагается все содержимое документа. Для элемента доступны глобальные атрибуты.
| Атрибут | Описание, принимаемое значение |
|---|---|
| onafterprint | Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. |
| onbeforeprint | Событие, срабатывающее перед отправкой страницы на печать. |
| onbeforeunload | Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. |
| onhashchange | Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2. |
| onmessage | Событие происходит, когда сообщение получено через источник события. |
| onoffline | Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. |
| ononline | Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. |
| onpagehide | Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу, после события onload. |
| onunload | Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. |
html5book.ru
HTML-документ
В следующем примере показан HTML-документ в простейшей форме:
<!DOCTYPE html> <html> <head> <title>Заголовок документа</title> </head> <body> <h1>Заголовок</h1> <p>Здесь содержание документа...</p> </body> </html> Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:
Теги для создания HTML-документа
Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки <Имя тега>. Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег <html> имеет закрывающий тег </html> и тег <body> имеет тег закрытия </body> и другие.
В приведенном выше примере используются следующие теги для создания HTML-документа:
| Тег | Описание |
| <!DOCTYPE…> | Этот тег определяет тип документа и версию HTML. |
| <html> | Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами <head>…</head> и телом документа, которое представлено тегами <body>…</body>. |
| <head> | Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как <title>, <link> и т.д. |
| <title> | Тег <title> используется внутри тега <head>, чтобы указать название документа. |
| <body> | Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как <h1>, <div>, <p> и другие. |
| <h1> | Этот тег представляет заголовок. |
| <p> | Этот тег представляет абзац. |
Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).
Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.
Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.
Структура HTML-документа
Структура типичного HTML-документа будет иметь следующий вид:
Тег декларации документа <html> <head> <title>Теги, связанные с заголовком документа</title> </head> <body> Теги, связанные с телом документа </body> </html> Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.
Декларация <!DOCTYPE>
Тег декларация <!DOCTYPE> используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML — 5, и она использует следующее объявление:
<!DOCTYPE html> Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега <!DOCTYPE…> вместе с другими тегами HTML.
Поделитесь:
proglang.su
Визуальные редакторы
Новички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.
Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей семантических ошибок едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML.
Теги
Как упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, <title>…</title>, где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно.
Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и атрибуты. Атрибут может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«…», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.
Структура документа
Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега <!doctype html>, сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.
Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — <html>…</html>. Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже.
Head
Внутри тега <head>…</head> содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тега <title>…</title>. Отображается название в верхней части браузера, где также можно разместить небольшую иконку, характеризующую содержимое страницы. Желательно сразу указать кодировку документа для его корректного отображения. Это можно сделать при помощи тега <meta charset=”UTF-8” />. Метатеги предоставляют данные о структуре страницы и обычно располагаются внутри head.
Link
Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег <link/>. В готовом виде это выглядит примерно вот так: <link href=”style.css” type=”text/css” />, где href указывает на местоположение файла, а type — на его тип.
Body
Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В <body> используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:
- <span> — применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css;
- <a> — создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href;
- <div> — один из популярнейших тегов современности; каждый, кто решил изучить основы языка HTMLl, должен уделить ему особое внимание, поскольку это блочный элемент, на основе которого сделана львиная доля современных сайтов (параметры для блоков <div> задаются в css, и внутри этого тега могут располагаться другие блоки);
- <p> — выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами;
- <ol> — нумерованный список, элементы которого заключаются в парный тег <li>;
- <ul> — маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом <li>;
- <h1>-<h6> — заголовки документа (цифра обозначает уровень заголовка, то есть <h1> — главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней <h5>, <h6> почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок <h1>;
- <strong> — жирный текст;
- <em> — курсив;
- <img /> — вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения);
- <video> — вставка видео на веб-страницу;
- <audio> — тег, вставляющий в документ аудио файл.
Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих.
CSS
Развитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым.
Применение CSS
Для создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов <p> или <a>, написав лишь одно правило. Учитывая современные требования к внешнему виду веб-страниц, использование каскадных таблиц стилей является обязательным.
Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег <style>, который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением .css, например, Styles.css.
JavaScript
Нередко человек, решивший заняться разработкой веб-страниц, понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный сценарный язык программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт.
JavaScript может расширить возможности HTML, он позволяет создавать и редактировать теги. Также при помощи этого замечательного инструмента можно работать с Cokie, загружать данные с сервера, не перезагружая страницу, сделать сайт более интерактивным, чем позволяют возможности HTML. Есть у этого языка и ограничения, которые связаны с безопасностью. Если JavaScript используется не на серверной части, то он будет выполняться в условиях, ограничивающих его возможности, дабы злоумышленники не могли задействовать вредоносный код на любом компьютере.
Редакторы
Основы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений.
Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды.
Основы HTML и CSS для начинающих
Как видите, изучить искусство создания веб-страниц не так уж и сложно, как кажется на первый взгляд. Всего несколько месяцев практических занятий превратят вас из робкого пользователя в начинающего разработчика. Научиться вёрстке гораздо проще, чем освоить какой-нибудь язык программирования или Linux. На самом деле тегов HTML не так уж и много, важно понять практический аспект их применения.
Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно «Фотошоп» лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями.
Что даёт знание HTML
Навыки создания веб-страниц очень актуальны сегодня, так как интернет расширяется не по дням, а по часам. Каждое предприятие, любой, даже самый маленький магазинчик, мастерские и спортивные клубы — все хотят иметь собственный сайт. И конечно же, для этого им понадобится разработчик, владеющий CSS и HTML. Основы просто освоить, после чего дело за практикой. Так как технологии вёрстки постоянно развиваются, то фронтенд-разработчики всегда будут востребованы. Тот, кто решит посвятить себя этой интересной отрасли, никогда не останется без работы.
fb.ru