Kyljmeeski FK

Значения атрибутов

2020-06-15T07:25:23.134Z

У каждого атрибута, за исключением логических, есть значение, которое относится к одному из следующих типов: ключевое слово, строка, адрес, число, проценты, код языка. Это не все типы, но самые распространённые.

Ключевое слово

У некоторых атрибутов есть зарезервированные значения, которые называются «ключевые слова». К примеру, значение атрибута type элемента <input> определяет тип элемента формы. Ниже элемент <input> создаёт кнопку.

<input type="button" value="Кнопка">

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

Строка

Строка представляет собой текст, заключённый в двойные или одинарные кавычки.

<div title="Строка текста"></div>
<div title='Строка текста'></div>

Кавычка определяет начало и конец строки, поэтому внутри строки нельзя дополнительно ставить такие же кавычки. К примеру, следующая строка использует неправильное сочетание кавычек.

<div title="Новый 30" монитор"></div>

Чтобы корректно написать строку с внутренними кавычками есть несколько вариантов.

1. Экранировать внутреннюю кавычку вот таким образом — \". В таком случае она уже не будет восприниматься браузером как кавычка, а считается символом.

<div title="Новый 30\" монитор"></div>

2. Использовать сочетание одинарных и двойных кавычек.

<div title='Новый 30" монитор'></div>

Здесь строка у атрибута title взята в одинарные кавычки, поэтому мы спокойно можем писать внутри двойную кавычку.

Всё это аналогичным образом работает и для одинарных кавычек.

Адрес

Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на сайт, другую веб-страницу или загружается определённый файл. Например, в элементе <img> адрес используется в качестве значения атрибута src, он задаёт путь к файлу с изображением.

Различают абсолютные и относительные адреса.

Абсолютные адреса

Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан адрес и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В примере 1 приведена ссылка, в которой применяется абсолютный адрес.

Пример 1. Использование абсолютного адреса в ссылке

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылка</title>
 </head>
 <body>
  <p><a href="http://google.com">Google</a></p>
 </body>
</html>

В данном примере текстовая ссылка ведёт на сайт google.com.

Кроме протокола HTTP существует и защищённый протокол HTTPS. Не всегда очевидно, какой протокол используется на сайте, поэтому в адресе ссылки его можно вообще опустить. Адрес в таком случае запишется так:

<a href="//google.com">Google</a>

Абсолютные адреса применяются в первую очередь для указания на другой сетевой ресурс и достаточно редко используются для внутренних ссылок.

Относительные адреса

Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.png"> означает загрузить графический файл с именем pic.png, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.

/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера — так называется программа, которая анализирует приходящие от браузера запросы и передаёт ему документы, показываемые пользователю.

/images/pic.png
Черта (/) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведёт на файл pic.png, который располагается в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке папок сайта и там «поискать» в папке help файл с именем me.html.

manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде точек или черты, то папка размещена внутри текущей папки, а уже в ней находится файл info.html.

Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.

В примере 2 приведены ссылки, в которых используются относительные адреса.

Пример 2. Относительные адреса в ссылках

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="image/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="page/tip.html">Как сделать такое же фото?</a></p>
 </body>
</html>

Иногда можно встретить адреса в виде ./file/doc.html. Точка впереди означает, что отсчёт ведётся от текущей папки. Подобная запись избыточна и её можно сократить до file/doc.html.

Числа

Числа состоят из цифр от 0 до 9; для отрицательных чисел, если они необходимы, впереди ставится знак минус (-45). В примере 3 показано использование чисел в качестве значений атрибутов.

Пример 3. Использование чисел

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Числа</title>
 </head>
 <body>
  <p>Температура воды</p>
  <meter value="0" max="100" low="10" high="60">Низкая</meter>
  <meter value="30" max="100" low="10" high="60">Нормальная</meter>
  <meter value="80" max="100" low="10" high="60">Горячая</meter>
  <meter value="100" max="100">Кипяток</meter>
 </body>
</html>

Кроме целых чисел допустимо использовать десятичные дроби, при этом целая и дробная часть отделяются друг от друга точкой — 36.6, как показано в примере 4.

Пример 4. Дробные числа

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>input, атрибут max</title>
 </head>
 <body> 
  <form>
   <p>Укажите вашу температуру в градусах: 
   <input type="number" min="35" max="41" value="36.6" step="0.1"></p>
  </form> 
 </body>
</html>

Проценты

Процентная запись позволяет привязаться к размерам родительского элемента и задавать размеры относительно него. Предположим, у нас есть следующий код:

<p><img src="figure.jpg" alt="" width="50%"></p>

Элемент <img> располагается внутри <p>, поэтому элемент <p> будет родителем для <img>. Верно и обратное — элемент <img> является дочерним по отношению к <p>. Соответственно, в данном случае ширина картинки в процентах считается от родительского абзаца, который по умолчанию занимает всё свободное пространство окна по ширине.

Браузер понимает, что речь идёт именно о процентах, если после числа добавляется символ %, например: width="40%".

В примере 5 приведён код веб-страницы, в котором ширина картинки указывается в процентах.

Пример 5. Размеры изображения в процентах

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображение</title>
 </head>
 <body>
  <p><img src="image/winnie.png" alt="Винни-Пух в гостях у Кролика" width="100%"></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Ширина изображения задана как 100%, поэтому занимает всю доступную ширину окна браузера. Высота при этом не указана и вычисляется браузером автоматически.

Рис. 1. Размер картинки в процентах

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

Код языка

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

Пример 6. Использование атрибута lang

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>lang</title>
 </head>
 <body>
  <p>Фраза на французском</p>
  <p lang="fr">Je n'ai pas mangé depuis six jours</p>
 </body>
</html>

В данном примере для всей страницы указан русский язык с помощью атрибута lang со значением ru. Чтобы показать, что язык относится ко всей странице, атрибут добавлен к элементу <html>. Для текста на французском атрибут lang со значением fr добавлен к элементу <p>.

Допустимые значения атрибута lang вы можете посмотреть на этой странице.

Атрибуты элементов

2020-06-15T07:22:29.091Z

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

Атрибут со значением

Вначале пишется открывающий тег, затем через пробел имя атрибута, после чего ставится знак равно (=) и в кавычках указывается значение атрибута. Общий синтаксис такой:

<E атрибут="значение">…</E>

Здесь буквой E обозначается название произвольного элемента. Для самозакрывающих элементов всё будет аналогично, кроме содержимого и закрывающего тега.

<E атрибут="значение">

Вместо двойных кавычек ("значение") можно писать одинарные кавычки ('значение') или вообще опустить кавычки (значение). Однако хорошим тоном будет всегда писать значения атрибутов в кавычках, потому что их отсутствие может привести к неявным ошибкам. Приведём небольшой пример.

<p><img src="arena.png" alt="Вид заголовка"></p>
<p><img src="arena.png" alt=Вид заголовка></p>

В данном примере первая строка написана правильно со всеми кавычками, а в следующей строке у атрибута alt кавычки отсутствуют. Поскольку пробел отделяет один атрибут от другого, то браузер в качестве значения alt возьмёт только первое слово («Вид»), а слово «заголовка» будет воспринимать как новый атрибут. Но так как подобного атрибута не существует, то это приведёт к ошибке.

Каждый атрибут должен быть единственным и не должен повторяться (alt писать можно, alt alt нельзя).

В примере 1 показано добавление картинки на страницу с помощью элемента <img> с разными атрибутами.

Пример 1. Использование атрибутов

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавление картинки</title>
 </head>
 <body>
  <p><img src="image/sun.png" alt="Солнышко" width="196" height="183"></p>
 </body>
</html>

Логические атрибуты

У логических атрибутов нет значений, само наличие или отсутствие атрибута уже меняет поведение элемента. Синтаксис достаточно простой:

<E атрибут>…</E>

В примере 2 показано применение логического атрибута для аудиоплеера.

Пример 2. Использование логического атрибута

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Добавление аудио</title>
 </head>
 <body>
  <audio src="audio/music.mp3" controls loop autoplay></audio>
 </body>
</html>

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

controls
controls=""
controls="controls"

Опять же имена атрибутов не чувствительны к регистру, это значит, что их можно писать маленькими или большими буквами. Но рекомендуем придерживаться единообразия и писать атрибуты в нижнем регистре — name. А никак не Name или NAME. Ещё раз подчеркнём, что так писать не надо.

Порядок атрибутов

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

<img src="title.png" width="438" height="118" alt=""> 
<img alt="" height="118" width="438" src="title.png">
<img 
  src="title.png" 
  width="438" height="118" 
  alt="">

Универсальные атрибуты

У некоторых элементов есть свой набор характерных атрибутов, но кроме этого существуют атрибуты, которые можно добавлять к любому элементу. По этой причине они называются универсальными или глобальными атрибутами. Список всех таких атрибутов вы можете посмотреть здесь, перечислим лишь некоторые популярные: class, id, lang, style, title.

Структура HTML-кода

2020-06-15T07:20:59.650Z

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

Пример 1. Исходный код веб-страницы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h1>Заголовок</h1>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

<!DOCTYPE html>

Элемент <!DOCTYPE> (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К <!DOCTYPE> это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

<html>

Открывающий тег <html> определяет начало HTML-документа, внутри него хранится «голова» (<head>) и «тело» документа (<body>).

<head>

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента <title>. Внутри <head> могут располагаться следующие элементы: <base>, <link>, <meta>, <script>, <style> или <title>.

<meta charset="utf-8">

Элемент <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Элемент <title> определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страницы в браузере

Элемент <title> является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в <title> быть не должно. Но допустимо добавлять разные текстовые символы, например, так: <title>Adobe™ Photoshop®</title>.

</head>

Закрывающий тег </head> показывает, что «голова» документа завершена.

<body>

«Тело» документа <body> предназначено для размещения элементов и содержимого веб-страницы.

<h1>Заголовок</h1>

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент <h1> представляет собой наиболее важный заголовок первого уровня, а элемент <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы <h1>...<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.

<!-- Комментарий -->

Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он всё равно будет передаваться в документе, так что, посмотрев его исходный код, можно обнаружить скрытые заметки.

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

<p>Первый абзац.</p>

Элемент <p> определяет абзац текста.

<p>Второй абзац.</p>

Элемент <p> является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что «тело» документа завершено.

</html>

Последним элементом в коде всегда идёт закрывающий тег </html>.

Элементы HTML

2020-06-15T07:11:45.667Z

Если мы посмотрим на код HTML, то увидим, что помимо самого текста, который выводится в браузере, код содержит несколько команд в угловых скобках (к примеру, <h1>). Такие команды называются элементами HTML и состоят из нескольких частей: открывающего тега, содержимого и закрывающего тега (рис. 1).

Рис. 1. Элемент <h1>

Открывающий тег показывает начало элемента и может содержать или не содержать атрибуты, которые расширяют возможности элемента (об атрибутах расскажем позже). Каждый тег начинается с открывающей угловой скобки, затем идёт имя элемента и закрывающая угловая скобка (<p>). Теги можно писать в нижнем и верхнем регистре, иными словами, маленькими, большими буквами или произвольно смешивать их. Все варианты написания ниже корректны.

<article>
<ARTICLE>
<Article>

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

После содержимого элемента идёт закрывающий тег, в котором вместе с открывающей угловой скобкой есть косая черта (</p>). По закрывающему тегу мы определяем, что элемент завершён.

Некоторые элементы не содержат закрывающего тега и такие элементы называются самозакрывающими. Естественно, у них нет и содержимого. Вот пример.

<meta charset="utf-8">

Узнать, к какому типу относится элемент и является ли он самозакрывающим, можно в справочнике HTML.

Итак, каждый элемент содержит открывающий тег и может включать содержимое и закрывающий тег. Порядок открывающих и закрывающих тегов важен и его нельзя нарушать.

Правильные варианты:

<p>Абзац текста</p>
<h1>Заголовок</h1>
<article>Статья</article>

Неправильные варианты:

<h1>Заголовок
</p>Абзац<p>
<meta charset="utf-8"></meta>

Комментарии в HTML

В коде HTML разработчик может писать свои комментарии, которые никак не отображаются в браузере. Такие комментарии нужны для пояснения своего кода и для заметок себе и другим разработчикам. Комментарий начинается с . Всё что находится между этими тегами является комментарием и выводиться в браузере не будет.

В примере 1 показан типичный HTML-документ.

Пример 1. HTML-документ

<!DOCTYPE html>
<html>
 <head>
  <!-- Кодировка документа -->
  <meta charset="utf-8">
  <!-- Название страницы -->
  <title>Моя веб-страница</title>
 </head>
 <body>
  <h1>Заголовок страницы</h1>
  <p>Основной текст.</p>
 </body>
</html>

В данном примере используются элементы <html>, <head>, <title>, <body>, <p> и самозакрывающие элементы <!doctype> и <meta>.

Вложения элементов

Одни элементы допустимо вкладывать внутрь других, однако следует соблюдать их порядок. На рис. 2 демонстрируется, как можно и нельзя добавлять один элемент внутрь другого.

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

Рис. 2. Вложение тегов, а — правильное, б — неверное

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

Инструментарий

2020-06-15T07:07:48.782Z

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

текстовый редактор для написания кода;
браузер для просмотра результатов;
валидатор — сервис для проверки синтаксиса HTML и выявления ошибок в коде;
графический редактор.

Далее рассмотрим эти инструменты подробнее.

Текстовый редактор

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

Подсветка синтаксиса — выделение тегов, текста, ключевых слов и атрибутов разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок.
Работа с вкладками. Сайт представляет собой набор файлов, которые приходится править по отдельности, для чего нужен редактор, умеющий одновременно работать сразу с несколькими документами. При этом файлы удобно открывать в отдельных вкладках, чтобы быстро переходить к нужному документу.
Проверка текущего документа на ошибки.
Автодополнение — автоматическое закрытие скобок, кавычек и тегов. Опять же, это ускоряет работу и снижает число возможных ошибок. Некоторые редакторы также позволяют быстро вводить теги, определяя их по первым введённым буквам.

Ссылки на известные подобные редакторы приведены ниже.

Notepad++

Бесплатный редактор под Windows, обладающий массой возможностей, при этом оставаясь простым в освоении и очень шустрым.

Где скачать
https://notepad-plus-plus.org/download

Brackets

Лёгкий, быстрый, но современный текстовый редактор от Adobe, ориентированный на веб-разработку.

Где скачать
http://brackets.io

Sublime Text

Популярный среди веб-разработчиков редактор для Mac, Windows, Linux. Хотя Sublime Text является платным, но скачанной с сайта незарегистрированной версией можно пользоваться неограниченное время.

Где скачать
https://www.sublimetext.com/3

Браузер

Браузер — это программа, предназначенная для просмотра веб-страниц. На первых порах подойдёт любой браузер, но с повышением опыта и знаний потребуется завести целый «зверинец», чтобы проверять правильность отображения сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные особенности, поэтому для проверки универсальности кода требуется просматривать и корректировать код с их учётом. На сегодняшний день наибольшей популярностью пользуются следующие браузеры: Chrome, Firefox, Internet Explorer, Opera, Safari.

Google Chrome

Браузер, появившийся на рынке в конце 2008 года. Разработан компанией Google.

Где скачать
https://www.google.ru/intl/ru/chrome/browser/desktop/

Mozilla Firefox

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

Где скачать
https://www.mozilla.org/ru/firefox/products/

Microsoft Internet Explorer (IE)

Один из старейших браузеров, который бесплатно поставляется вместе с операционной системой Windows. Это и определило его популярность.

Где скачать
https://www.microsoft.com/ru-ru/download/internet-explorer.aspx

Microsoft Edge

Новый браузер, пришедший на смену IE. Поставляется вместе с операционной системой Windows 10.

Где скачать
https://www.microsoft.com/ru-ru/windows/microsoft-edge

Opera

Быстрый и удобный браузер, поддерживающий множество дополнительных возможностей, повышающих комфортность работы с сайтами.

Где скачать
http://ru.opera.com/download/

Safari

Этот браузер поставляется вместе с операционной системой MacOS на компьютерах, а также на смартфонах и планшетах Apple.

Где скачать
http://www.apple.com/ru/safari/

Валидатор

Валидация HTML-документа предназначена для выявления ошибок в синтаксисе веб-страниц и расхождений со спецификацией HTML. Соответственно, программа или сервис для такой проверки называется валидатором.

Для проверки следует зайти по адресу validator.w3.org и ввести путь к проверяемому документу или сайту в специальной форме. После проверки будут показаны возможные ошибки или появится надпись, что документ прошел валидацию успешно.

Графический редактор

Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самой популярной программой такого рода является Photoshop, ставший стандартом де-факто для обработки фотографий и создания графических изображений для сайтов. Но в большинстве случаев мощь Photoshop-а избыточна и лучше воспользоваться чем-нибудь более простым и проворным. В частности, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.

Скачать Paint.Net
http://www.getpaint.net/download.html

Paint.Net работает только под Windows, под другие операционные системы есть редактор Gimp, также бесплатный для использования.

Скачать Gimp
https://www.gimp.org/downloads/

Из интересных редакторов есть Pixlr, у которого существует версия в виде веб-приложения, по своим возможностям отдалённо напоминающее Photoshop, но работающее прямо в браузере. Это позволяет быстро внести правки в графический файл, не устанавливая дополнительных программ.

https://pixlr.com/editor

Введение в HTML

2020-06-15T05:38:22.381Z

Чтобы сразу же ввести в курс дела нетерпеливых читателей, предложим им возможность создания веб-страницы без последовательного изучения правил HTML. По крайней мере, вы сумеете убедиться, что создание веб-страниц достаточно простое дело.

Для этого нам понадобятся две вещи: текстовый редактор для написания кода HTML и браузер — программа для просмотра результата.

В примере 1 приведён несложный пример такого кода.

Пример 1. Первая веб-страница

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Моя первая веб-страница</title>
 </head>
 <body>
  <h1>Заголовок страницы</h1>
  <p>Основной текст.</p>
 </body>
</html>

Чтобы посмотреть результат примера в действии, проделайте следующие шаги.

Windows

В Windows откройте программу Блокнот (Пуск > Выполнить > набрать «notepad» или Пуск > Программы > Стандартные > Блокнот).
Наберите или скопируйте код в Блокноте (рис. 1).

Рис. 1. Вид HTML-кода в программе Блокнот

Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example1.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: «Все файлы» и кодировку UTF-8 (рис. 2). Обратите внимание, что расширение у файла должно быть именно html.

Рис. 2. Параметры сохранения файла в Блокноте

Запустите браузер Internet Explorer (Пуск > Выполнить > набрать «iexplore» или Пуск > Программы > Internet Explorer).
Если всё сделано правильно, то в браузере вы увидите результат, как показано на рис. 3.
В Windows 10 другой браузер по умолчанию — Microsoft Edge. Соответственно, в этой операционной системе запускать надо его.
В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу или перетащите файл прямо в окно браузера.
Если всё сделано правильно, то в браузере вы увидите результат, как показано на рис. 3.

Вид страницы в браузере Internet Explorer

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

Редактор Блокнот и браузер Internet Explorer приведены лишь для примера, поскольку поставляются вместе с Windows и дополнительно их устанавливать не нужно. В следующем разделе мы рассмотрим другие, более продвинутые и удобные инструменты, с которыми и будем в дальнейшем работать.

MacOS

На «маках» есть программа Pages, по своим возможностям напоминающая Microsoft Word. Она не годится для регулярного создания HTML-файлов, поскольку для работы нам нужен простой текстовый редактор. Но так как мы говорим о быстром старте, когда никаких дополнительных программ устанавливать не требуется, то для первого раза Pages сгодится.

Откройте Launchpad, запустите Pages и выберите новый пустой документ.
В окне программы вставьте код HTML (рис. 4).

Рис. 4. Программа Pages с кодом HTML

Выберите Файл > Экспортировать в > Простой текст… (рис. 5).

Рис. 5. Окно экспорта документа

Нажмите Далее...
В появившемся окне (рис. 6) укажите имя файла example1.html и его местоположение (Документы).

Рис. 6. Сохранение HTML-кода

Откройте браузер Safari через Launchpad.
Выберите Файл > Открыть файл и щёлкните на ранее сохранённый файл example1.html. В окне браузера вы увидите результат примера (рис. 7).

Рис. 7. Вид страницы в браузера Safari

Кодировка

В некоторых случаях вместо русского текста в браузере вы можете увидеть странные символы (рис. 8).

Рис. 8. Неверное отображение текста

Это происходит из-за неверного преобразования текста, когда HTML-документ сохранили в кодировке Windows. Если у вас случилось подобное, то вам надо сохранить файл ещё раз, указав кодировку UTF-8 (рис. 9).

Рис. 9. Кодировка текста UTF-8

В MacOS сохранение в кодировке UTF-8 происходит автоматически и беспокоиться об этом не надо.