Раз уж я в это дело залез, то можно и немного поконспектировать. Один черт делать нечего. Книга в 281-у страницу как раз есть чем себя развлечь.
Репозитарий учебного проекта — https://gitlab.com/interlan-bds/my-html5-learning-project
Настройка окружения для HTML5 разработки
По традиции будем использовать VSCode с плагинами.
- Prettier — Code formatter: Enforces a consistent style by parsing your code and re-printing it
with its rules that take the maximum line length into account, wrapping code when necessary. - Path Intellisense: Visual Studio Code plugin that autocompletes filenames and paths.
- Auto Rename Tag: Auto rename paired HTML/XML tags.
- ESLint: Finds and fixes problems in your JavaScript code.
- vscode-icons: File and folder icons for Visual Studio Code.
- ejs Snippets: This extension adds rich language support for the HTML Markup to VS Code
- Live Server: Launch a local development server with live reload feature for static & dynamic pages.
С картинками рисовать не буду и так все понятно и много раз уже рассказывал как плагины устанавливать. Про назначение каждого отдельно потом в процессе поговорим.
Настройки плагинов
Автоформатирование при сохранении.
- File > Preferences > Settings включаем «Editor: Format On Save»
Автосохранение при изменениях (не обязательно, просто так удобнее).
- File > Auto save
Минимальный сайт
Код.
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my site!</h1>
<p>Hello world</p>
</body>
</html>Запуск по CTRL+F5 и просто по F5 в режиме отладки.
Интересный способ выстроить файл по стандарту без VSCode Prettier
Устанавливаем утилиту.
$ npm install --global js-beautifyНаводим красоту во всех HTML-файлах.
$ js-beautify --type html -r -s 1 -m 0 *.htmlМожно обрабатывать сразу несколько HTML документов и получается красиво.
<!DOCTYPE html>
<html>
<body>
<h1>Welcome to my site!</h1>
<p>Hello world</p>
</body>
</html>Стандартный форматер VSCode запускается командой CTRL+SHIFT+I, но так как у меня CTRL+SHIFT переключает язык я поменял комбинацию на CTRL+I.
Два типа HTML элементов
Содержащие контент.
<h1>My First Heading</h1>Элементы без контента.
<img src="an-apple.jpg" alt="An apple" />Общая структура HTML документа
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body></body>
</html>Задаем кодировку HTML-документа
<head>
<meta charset="utf-8" />Задаем язык документа
<html lang="ru">Задаем иконку документа
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" />Сервис для генерации иконок: https://realfavicongenerator.net
Комментарии
<!-- Комментарий -->HTML — элементы
Заголовки
<h1>Welcome to my site!</h1>
...
<h6>Welcome to my site!</h6>Параграф
<p>This is your first paragraph.</p>Гиперссылка
Внешняя.
<a href="/contact.html">Contact Page</a>Если тербуется открывать в новом окне, то добавляем атрибут target=»_blank».
Внутренняя.
<!DOCTYPE html>
<html>
<body>
<h1>Home Page</h1>
<a href="#cake">Go to My Cake</a>
<h2 id="apple">My Apple</h2>
<img src="an-apple.jpg" alt="This is an apple" height="1000" />
<h2 id="cake">My Cake</h2>
<img src="a-cake.jpg" alt="This is a cake" height="1000" />
<a href="#apple">Go to My Apple</a>
<a href="#">Back to the top</a>
</body>
</html>Гиперссылка для загрузки файла.
<a href="/my-img.jpg" download="new-name">Download Image</a>Списки
Несортированный список.
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Нумерованный список.
<!DOCTYPE html>
<html>
<body>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</body>
</html>Списки описания.
<!DOCTYPE html>
<html>
<body>
<dl>
<dt>HTML</dt>
<dd>is the standard markup language for Web pages.</dd>
<dt>CSS</dt>
<dd>is the language we use to style an HTML document.</dd>
<dt>JavaScript</dt>
<dd>is the world's most popular programming language.</dd>
</dl>
</body>
</html>Таблицы
Объявление таблицы и заголовка таблицы.
<table>
<caption>
September 2022
</caption>Заголовки столбцов таблицы.
<thead>
<tr>
<th>Mon</th>
<th>Tue</th>Описание содержимого таблицы, строки и столбцы.
<tbody>
<tr>
<td></td>
<td></td>
Объединение группы ячеек таблицы.
<td colspan="2"></td>Разделители
В рамках параграфа.
<br />Линия разделитель.
<hr />Прогресс
Прогресс-бар в процентах.
<!DOCTYPE html>
<html>
<body>
<p>
Uploading:
<progress value="60" max="100"></progress>
60%
</p>
</body>
</html>Прогресс-бар вида сколько выполнено из скольки.
<!DOCTYPE html>
<html>
<body>
<p>
Disk usage:
<meter value="60" max="120"></meter>
60GB of 120GB
</p>
</body>
</html>Вывод кода и преформатированного контента
Преформатированный текст.
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element is displayed
in the browser's default monospace font,
and it preserves both spaces
and line breaks
</pre>
</body>
</html>Вывод компьютерного кода.
<code>var x = 10;</code>Интеграция содержимиого одной страницы в другую
<!DOCTYPE html>
<html>
<head>
<style>
#my-iframe {
width: 800px;
height: 600px;
border: none;
}
</style>
</head>
<body>
<h1>Web Development Books</h1>
<iframe id="my-iframe" src="https://www.amazon.com/dp/B09VFLS7TF"></iframe>
</body>
</html>Специальные символы
https://www.html.am/reference/html-special-characters.cfm
Вот и дошел до четвертой главы и дальше будут стили, но ими попозже займусь.
