Автоматическая перезагрузка страницы в браузере при сохранении файла

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

👨🏻‍💻 ИЗУЧИТЬ УРОК | #sublime #html

​jsFiddle - "песочница" для веб-разработчиков

Является одной из самых популярных онлайн сред разработки. Позволяет писать, редактировать и запускать JavaScript, HTML и CSS коды. Есть возможность подключить JavaScript библиотеку для работы. Ключевые особенности: вставка фрагментов кода, возможность расшаривания, а так же совместная работа.

#сайт #javascript #html #css

Pug - HTML-Препроцессор и шаблонизатор, написанный на js

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

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

#препроцессор #шаблонизатор #html

Sketch2Code - сервис для быстрого прототипирования сайта

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

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

#сервис #html

Haml - HTML-препроцессор и шаблонизатор

Это упрощенный язык разметки, который потом может быть скомпилирован в HTML. Он поможет вам писать более красивую и лаконичную HTML-разметку для ваших проектов.

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

Сайтодел | #инструмент #html

⌨️ Базовый HTML шаблон

DOCTYPE — кодировка документа. В данном случае html.

html — основной контейнер документа с английским в качестве параметра языка.

meta — метатеги для браузеров и поисковых систем. Указана кодировка документа utf-8 и стандартный viewport для определения размеров страницы.

title — тег заголовка страницы.

body — тело документа страницы, которое видит пользователь.

Сайтодел | #сниппет #html

⌨ Как вставить картинку с помощью HTML и CSS?

Есть два способа разместить картинку на сайте. Можно использовать тег <img> в HTML-документе, а можно применить свойство background-image в CSS-файле. Нужно запомнить, что расширения файлов для первого и второго способа разные!

<img src="img/picture.png" alt="picture" class="picture">

У тега <img> есть обязательные атрибуты: src показывает путь к картинке, alt показывает альтернативный текст в случае, если картинка не загрузится. По желанию тегу <img> можно задать класс.

div {
background-image: url(img/picture.png);
}

CSS-свойство background-image находит путь к картинке с помощью указания url. Если картинка является важной частью контента, используется тег <img>. Если же она используется как фоновое изображение, применяют свойство background-image.

Сайтодел | #код #html #css

⌨ Как вставить иконку в код без помощи тега <img>?

Мало кто знает, что в Figma есть опция копировать графику в формате SVG. Для этого необходимо нажать правой кнопкой мыши на изображение и выбрать опции Copy/Paste, затем Copy as SVG. При этом программа сгенерирует код, который можно будет вставить в HTML-файл.

В редакторе кода изображение появится в виде тега <svg> с довольно длинным содержимым. Пугаться его не стоит, именно так и должно быть.

Метод хорош тем, что картинку не нужно сохранять на устройство. Также изображению в формате SVG можно менять цвет, что не сделаешь с изображением в теге <img>:

.icon__svg:hover path{
fill: #FFFFFF;
}

В данном примере иконка меняет цвет на указанный в fill во время наведения курсора.

Сайтодел | #код #html

⌨ Как сделать таблицу в HTML?

Таблица в языке HTML создается с помощью тега <table>

Для строки применяется тег <tr>, а ячейки делаются тегом <td>

Ячейки находятся внутри строки. Один тег <tr> содержит в себе несколько тегов <td>. Все теги парные, то есть требуют закрытия.

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

Сайтодел | #код #html

⌨ Как создавать списки в HTML?

В HTML списки бывают упорядоченные и неупорядоченные.

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

Это могут быть инструкции и рецепты. Упорядоченные списки создаются через тег <ol> (ordered list – «упорядоченный список»). Пример:

<ol>
<li>Включите компьютер.</li>
<li>Откройте Telegram.</li>
<li>Найдите канал «Сайтодел».</li>
<li>Подпишитесь на него.</li>
<li>Прочитайте посты и уроки.</li>
</ol>

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

Это могут быть списки дел или важные пункты из текста. Неупорядоченные списки создаются через тег <ul> (unordered list – «неупорядоченный список»). Пример:

<ul>
<li>одежда</li>
<li>книги</li>
<li>ручки</li>
<li>ноутбук</li>
<li>сумка</li>
</ul>

Сайтодел | #код #html

⌨ Как использовать классы в CSS?

HTML-теги и CSS связаны между собой. Один из способов установить взаимосвязь между тегом и свойствами CSS-стилей – это использование классов.

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

Сначала необходимо задать классы тегам в HTML-документе:

<div class="sitodel"> Блок 1 </div>
<div class="sitodel"> Блок 2 </div>
<div class="sitodel"> Блок 3 </div>

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

Второй этап – перенести классы в CSS-код:

.sitodel{
height:150px;
width:300px;
text-align: center;
font-size:16px;
margin-right:15px;
}

Таким способом мы можем установить связь между элементами и их стилями.

Сайтодел | #код #html

⌨ Как добавить ссылку в HTML?

Чтобы добавить ссылку в HTML документ, используйте тег <a> (anсhor) вместе с атрибутом href. В атрибуте href добавляется сам адрес, который ведет на внешний ресурс или внутреннюю страницу сайта. При клике на ссылку, пользователь переходит на указанную страницу. Пример:

<a href="t.me/sitodel"> Канал, где мы научим тебя создавать сайты</a>

Ссылки бывают относительными и абсолютными. В абсолютной ссылке указывается полный путь до HTML-файла. Такой формат подходит для внешних ресурсов. Пример абсолютной ссылки указан выше.

Относительные ссылки обычно используются внутри одного сайта:

<a href="page.html">HTML страница</a>

Ссылка-якорь применяется для навигации внутри одной страницы:

<footer id="footer">подвал</footer>
<a href="#footer">Контакты</a>

Сайтодел | #код #html

⌨ Блочные и строчные элементы в HTML

Есть два основных типа HTML-элементов, которые соответствуют характеру их содержимого и поведению на веб-странице — это блочные и строчные элементы.

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

Примеры блочных тегов:

<h1> Сайтодел – канал о создании сайтов </h1>
<div> Мы рассказываем о веб-технологиях и о фронтенд-разработке
</div>
<p> Подписывайся на наш канал и не пропусти самое главное! </p>

Примеры строчных тегов:

<a href ="t.me/sitodel"> Ссылка на канал </a>
<img src ="picture.img">
<b> Важное сообщение выделяется жирным </b>

Сайтодел | #код #html

⌨️ Блочные элементы в HTML

В языке HTML элементы и обозначающие их теги разделяются на блочные и строчные. Блочные элементы занимают всю доступную ширину. Высота элемента зависит от его содержимого, а его начало – всегда новая строка.

<div> - это универсальный блочный контейнер и один из самых популярных тегов. Он используется для того, чтобы помещать в него содержимое. Этот тег позволяет выравнивать то, что в нем содержится и поэтому очень удобен в работе.

<h1>...<h6> - эти теги нужны для того, чтобы обозначать заголовки разных уровней и тем самым выстраивать структуру текста.

<p> - этот тег обозначает абзац текста.

<hr> - горизонтальная линия, которая отделяет блоки друг от друга и всегда начинается с новой строки.

Пример использования блочных элементов:

<body>
<div>
<h1>Сайтодел</h1>
<p>Приветствую тебя, читатель!
На нашем сайте ты найдешь всю полезную информацию по созданию сайтов и приложений!
</p>
</div>
</body>

Сайтодел | #код #html

⌨ Как сделать навигационную панель на HTML?

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

<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="items.html">Товары</a></li>
<li><a href="aboutus.html">О нас</a></li>
<li><a href="contact.html">Контакты</a></li>
</ul>

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

Одной только HTML-разметки для создания навигационной панели недостаточно. Необходимо оформить в CSS свойства контейнера с ссылками <ul>, а также задать стиль надписям в тегах <li>

Сайтодел | #код #html

⌨️ Что такое HTML-формы?

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

В данном примере пользователю предлагается ввести имя, фамилию и выбрать пол.

В первой части кода вводимые данные имеют формат текста:

<form>
Имя:
<input type="text" name="firstname" value="Введите имя">
Фамилия:
<input type="text" name="lastname" value="Введите фамилию">

Во второй части нужно выбрать один пункт из двух:

Мужчина
<input type="radio" name="gender" value="male" checked>
Женщина
<input type="radio" name="gender" value="female">
</form>

Формы заключаются в специальный HTML-тег <form>, который нужно обязательно закрывать.выпадающие

Сайтодел | #код #html