DevWow - разработка с нуля

​​Тег

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

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

​​Рассмотрим более подробно тег

У первого тега значение атрибута type= " text ", это означает, что это обычное однострочное поле ввода. В значении атрибута size указывается размер этого поля в символах. Атрибут placeholder выводит текст внутри текстового поля, который исчезает при начале ввода символов.

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

Следующие два варианта и предоставляют пользователю возможность право выбора некоторых пунктов. В первом случае есть возможность множественного выбора нескольких пунктов в виде флажков, а во втором — единственного выбора в виде переключателей. В обоих случаях есть возможность отметить любой пункт по умолчанию, если задать атрибут checked="checked".

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

Оставшиеся 3 тега — кнопки. submit отправляет данные на сервер. reset предназначена для того, чтобы очистить все поля в форме. А третья type="button" — просто кнопка, при нажатии на которой ничего не произойдет, но ее, например, можно привязать к событию javascript. У всех этих кнопок в значении атрибута value указывается тот текст, который будет отображен на кнопке.

​​Структура форм

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

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

​​Формы и их элементы

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

​​Структура вложенного списка

Первый элемент списка
Второй элемент списка

Первый элемент вложенного списка
Второй элемент вложенного списка
Третий элемент вложенного списка


Третий элемент списка


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

​​Списки

Списки в html­ бывают двух видов: маркированные и нумерованные. Отличаются они тем, что у маркированных элемент списка начинается с маркеров, а у нумерованного с цифр или букв.

Структура маркированного списка:


Первый элемент списка
Второй элемент списка
Третий элемент списка


Структура нумерованного списка:


Первый элемент списка
Второй элемент списка
Третий элемент списка


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

​​Загрузка изображений на страницу

Для отображения изображений на странице существует тег ​​, который является одиночным тегом.
У этого тега есть обязательный атрибут ​src​, в значении которого мы указываем путь к изображению.
Этот путь может быть как относительным так и абсолютным.



У тега​ ​ можно указать дополнительные атрибуты.
Атрибут ​alt ​означает альтернативный текст. Используется он для того, чтобы: во­ первых, если
картинка не загрузится на страницу, то пользователь увидит тот текст, который вы указали в этом
атрибуте, и во­вторых, альтернативный текст необходим при продвижении сайта, в нем можно указать
ключевые слова, и тогда это изображение будет участвовать в поиске по картинкам.
Следующий атрибут — ​title​, который является универсальным, и его можно использовать практически для любого тега. То, что вы напишите в его значении, будет выводиться в виде всплывающей подсказки.
Любому изображению можно задать ширину и высоту, указав эти значения в атрибутах ​width ​и ​height
соответственно. При помощи этих атрибутов изображение лучше не увеличивать, а то получится очень
плохое качество. Если задать ширину и высоту изображению, то браузер при загрузке страницы будет
сразу выделять заданную область под картинку.
Всегда храните все изображения в отдельной папке, тогда вы будете знать, где искать то или иное
изображение.

​​Форматы изображений - SVG

SVG — формат векторной графики, файлы SVG можно читать и редактировать (при наличии некоторых навыков) при помощи обычных текстовых редакторов.Существует возможность увеличить любую часть изображения SVG без потери качества.
Широко доступно использование растровой графики в SVG документах. Имеется возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG.Текст в графике SVG является текстом, а не изображением, поэтому его можно выделять и копировать, он индексируется поисковыми машинами, не нужно создавать дополнительные метафайлы для поисковых роботов.

SVG
+ Небольшие размеры файлов, отличное сжатие;
+ Возможно увеличить любую часть изображения SVG без потери качества
- Большой размер файла
- Сложность использования

​​Форматы изображений - PNG

Растровый графический формат PNG, набирающий всё большую популярность, появился в 1995 году как замена GIF. Формат PNG в свою очередь подразделяется на форматы PNG­8 (аналог формата gif, за исключением того, что PNG­8 не поддерживает анимацию) и PNG­24.
Еще существует формат PNG­32 — в этом формате растровой графики для одного пикселя возможно использовать четыре байта информации. Три отвечают за формирование полноцветного изображения, а четвертый байт выделяется отдельно для формирования альфа­канала, позволяющего использовать PNG­32 для получения картинок с прозрачным фоном.

PNG – 8
+ Поддерживает прозрачность
+ При сжатии не теряет в качестве
- Кол­-во цветов до 256

PNG – 24
+ При сжатии не теряет в качестве
+ Использует 16 млн. цветов
+ Плавный переход от прозрачной области к цветной
- Большой размер файла

​​Форматы изображений - GIF

Растровый формат графических изображений, способный хранить сжатые данные без потери качества в формате не более 256 цветов. Имеется поддержка прозрачности и анимации, но полупрозрачность не поддерживается. Пиксель либо прозрачный, либо нет.
GIF использует формат сжатия LZW. Таким образом хорошо сжимаются изображения, строки которых имеют повторяющиеся участки. В особенности изображения, в которых много пикселей одного цвета по горизонтали.

GIF
+ Поддерживает анимацию
+ Поддерживает прозрачность
+ При сжатии не теряет в качестве
- Кол-­во цветов до 256

​​Форматы изображений - JPEG

В настоящее время в веб­е используются четыре формата изображений: jpeg, gif, png, svg. Расмотрим поподробнее JPEG

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

JPEG

+ Небольшой размер файла
+ Поддерживает 16 млн. цветов
+ Можно управлять качеством изображения при сохранении
- При сжатии размеров теряется качество
- Не поддерживает прозрачность

Снизу прикрепляем фотографию заката в формате JPEG с уменьшением степени сжатия слева направо:

​​Якоря в гиперссылках

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

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

Для этого существует атрибут id, который можно определять практически для любого тега. Название это атрибута может быть любым и обязательно должно быть уникальным. В значении атрибута href тега ссылки ставится символ решетки #, после которого указывается имя того идентификатора, к которому необходимо обратиться.

​​Виды ссылок

Относительные ссылки используются для перемещения внутри документа (сайта).
рис.1

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

У тега ссылки существует атрибут target . Если указать target="_blank" , то страница откроется в новой вкладке браузера. Раньше это значение не поддерживалось в HTML, но люди все равно использовали его, поскольку значение работало. Теперь в HTML5 оно полностью поддерживается.

Когда использовать target="_blank" :

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

​​Гиперссылки

Гиперссылка — это активный элемент (текст, изображение, кнопка и т.п.) одного документа, при нажатии на который происходит переход к другому документу или к его элементу.

Документы, которые содержат гиперссылки, называются гипертекстовыми.
Гиперссылка может быть добавлена к любому элементу гипертекстового документа и выделяется графически.

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

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

​​

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

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

​​Практика

Сделаем свою первую HTML страницу:

1) Скачаем Brackets - http://brackets.io/, нажимаем кнопку downloads
2) Запускаем программу, создаем новый файл (Меню Файл - Новый либо нажимаем Ctrl+N), сохраним его как index.html
3) Напишем в нем заголовок и тег параграфа:
Мой первый сайт!
Добро пожаловать на мой первый сайт
4) Сохраняем его (Ctrl+S) и откроем в браузере этот файл.

​​Ускоряем работу

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

Ctrl + c – копировать.
Ctrl + v – вставить.
Ctrl + x – вырезать.
Ctrl + z – отменить действие.
Ctrl + y – вернуть действие.
Ctrl + s – сохранить.
Ctrl + a – выделить все.
Alt + tab – перемещение между открытыми окнами.
Ctrl + tab – перемещение между открытыми вкладками.
F5 – обновить страницу.
F2 – переименовать.
Shift + Tab – вернуть одну табуляцию назад.
Shift + home – выделить с указанного места до начала строчки.
Shift + end – выделить с указанного места до конца строчки.
Shift + стрелка – при зажатом shift выделять в указанную стрелками сторону.

Попробуйте написать текст в редакторе кода Sublime Text и поэкспериментировать.

​​Инструменты веб-разработчика

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

Для начинающих очень рекомендуем присмотреться к текстовым редакторам кода Sublime Text, Brackets, Atom и notepad++. В них также имеется подсветка кода, расширенный поиск, автосохранение работы (очень крутая штука) и менеджер расширений, через который вы можете улучшить функционал вашего редактора.

А еще они очень красиво оформляют текст:

​​Вложенность тегов

🖥 В HTML теги можно вкладывать одни в другие и эта вложенность может достигать много уровней. Выглядит это как матрешка, поэтому нам нужно закрывать теги в той последовательности, в которой они были открыты. Первый открытый тег закрывается последним.