На этом занятии мы научимся создавать веб-страницы с изображениями, цветным текстом, таблицами, заголовками и вставим видео с YouTube.
Для тех, кто только подключился, вот ссылка на 1-ю статью и первый урок:
Что такое HTML
HTML - это язык гипертекстовой разметки веб-страниц. С помощью HTML можно создать вебсайт. HTML чрезвычайно прост.
HTML всего лишь описывает структуру веб-страницы. HTML состоит из набора элементов. HTML-элементы сообщают браузеру, как отображать контент страницы. HTML-элементы обозначают кусочки контента по типу "это заголовок", "это параграф", "это ссылка" и т.д.
Что такое HTML-элемент? Элемент HTML определяется открывающим тегом, контентом и закрывающим тегом:
<tagname> Контент... </tagname>
HTML-элемент - это все вместе от открываюшего тега до закрывающего
<h1>Заголовок</h1>
<p>Параграф.</p>
Дальше поэкспериментируем с различными HTML-элементами
Заголовки
Попробуем вставлять себе на страницу элементы и смотреть, что получилось, в браузере
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
Я дальше буду использовать phpStorm, как основной редактор. Вы можете использовать любой.
Подробно о разных редакторах и средах разработки мы говорили на первом занятии. Вот ссылка:
Параграфы
<p>Это параграф.</p>
<p>Это другой параграф.</p>
Ссылки
<a href="https://ya.ru">Ссылка на сайт Яндекса</a>
Если нажать на ссылку, то откроется страница Яндекса
Собственно, сам тег <a> очень прост. В нем всего один основной атрибут: href, который обозначает url страницы, на которую должен перейти браузер, когда посетитель нажмет на эту ссылку
Атрибуты пишутся таким образом:
- имя атрибута
- знак равно
- значение атрибута в кавычках
Изображения
<img src="https://picsum.photos/200/300" alt="Demo Photo" width="200" height="300">
Интересный момент: у нас ссылка прилипла справа к изображению. Нам этого не хочется. Чтобы избежать такой проблемы, будем все блоки брать в специально предназначенный для этого тег: <div></div>
Сразу и поправим: Обернем изображение и ссылку в div.
<div><img src="https://picsum.photos/200/300" alt="Demo Photo" width="200" height="300"></div> <div><a href="https://ya.ru">Ссылка на сайт Яндекса</a></div>
Вернемся к элементу изображения.
<img src="https://picsum.photos/200/300" alt="Demo Photo" width="200" height="300">
Этот тег, кстати, не требует закрывающего тега, как div или p, или a. У него есть следующие атрибуты:
- src - Source - путь к изображению.
Мы взяли путь с интернета. Картинка лежит по адресу https://picsum.photos/200/300 (это специальный сервис демо-картинок типа lorem impsum, который мы использовали для текста)
- alt - альтернативный текст, который будет показан вместо изображения.
- width - ширина изображения
- height - высота.
У тега IMG единственный обязательный атрибут - это src. Остальные не являются обязательными, но крайне желательны к заполнению.
Попробуем изображение сохранить в наш проект и указать путь внутри проекта, а не на внешний сайт.
Для этого внутри проекта создадим папку img (в ней будем дальше картинки хранить)
Теперь скачаем с интернета какую-нибудь картинку.
Предлагаю скачать ту, которую выдаст следующая ссылка: https://picsum.photos/200/300
После того, как изображение скачается, файл нужно просто перетащить с папки загрузок в папку внутри проекта.
Сразу картинке дадим какое-нибудь имя. Нажимаем, как показано на скриншоте, чтобы переименовать изображение.
Назовем ее test-image.jpg Важная ремарка: в именах файлов лучше использовать только английские буквы. С кириллицей почти наверняка железобетонно будут проблемы в дальнейшем.
В результате у нас в папке img внутри проекта должен появиться файл по имени test-image.jpg с изображением
Вставим это изображение на страницу.
<div>
<img src="img/test-image.jpg">
</div>
Стоит обратить внимание на путь, указанный в атрибуте src.
Раньше это был адрес в интернете:
А сейчас это путь внутри проекта:
img/test-image.jpg
Причем это относительный путь относительно файла index.html.
То есть папка img находится на том же уровне, что и файл index.html, внутри img лежит файл.
Про относительные, абсолютные пути чуть позже разберем - будет понятней.
HTML разрыв строки
Разрыв строки вставляется в тексте там, где нужно перейти на новую строку, но не нужно начинать новый параграф. Параграф от новой строки, как правило отличается межстрочным интервалом.
Например,
здесь
все
новая
строка
А здесь
все
новый
параграф.
<p>Это <br>параграф<br>с разрывами строки.</p>
За разрыв строки отвечает тэг <br>
Тэг <pre>
Тэг <pre> определяет преформатированный текст. Текст внутри <pre> отображается с разрывами строк как есть. Для понимания разберем простой пример.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi ullamcorper pharetra ex, ut scelerisque est fringilla sed.
In vel laoreet dui.
Aenean facilisis congue varius.
Proin vel sodales turpis.
</p>
Пробуем вставить этот код к себе на страницу.
Все отобразилось в одну строку.
Для того, чтобы отобразилось точно также, как в коде, есть элемент <pre>.
Попробуем параграф заменить на pre.
<pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi ullamcorper pharetra ex, ut scelerisque est fringilla sed.
In vel laoreet dui.
Aenean facilisis congue varius.
Proin vel sodales turpis.
</pre>
На самом деле, можно и по-другому без pre. Pre скорее используется не для того, чтобы форматировать параграфы, а для того, чтобы отобразить код как есть один в один.
Например, если нужно отформатировать текст, то можно оставить все внутри параграфа, но добавить разрывы строк.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Morbi ullamcorper pharetra ex, ut scelerisque est fringilla sed.<br>
In vel laoreet dui.<br>
Aenean facilisis congue varius.<br>
Proin vel sodales turpis.<br>
</p>
Или так
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> <br> Morbi ullamcorper pharetra ex, ut scelerisque est fringilla sed.<br> <br> In vel laoreet dui.<br> <br> Aenean facilisis congue varius.<br> <br> Proin vel sodales turpis.<br>
</p>
Либо можно поделить весь текст на абзацы.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Morbi ullamcorper pharetra ex, ut scelerisque est fringilla sed.
</p>
<p>
In vel laoreet dui.
</p>
<p>
Aenean facilisis congue varius.
</p>
<p>
Proin vel sodales turpis.
</p>
Нет какого-то одного правильного пути. Всегда нужно выбирать наиболее подходящий для решения данной конкретной задачи.
Горизонтальная строка - hr
Попробуем вставить тег <hr> между абзацами.
<p>
Morbi ullamcorper pharetra ex, ut scelerisque est fringilla sed.
</p>
<hr>
<p>
In vel laoreet dui.
</p>
Появилась горизонтальная линия
Таблица
Сейчас попробуем вставить таблицу
Таблица состоит из нескольких тэгов.
<table></table> - Основной тег, обозначающий таблицу
Внутри него тэг <tr></tr>, обозначающий ряд (ряд таблицы - table row - tr)
Внутри ряд колонка. Колонка бывает двух типов - заголовок <th></th> и обычная колонка - <td></td>
Вставляем в наш документ следующий код:
<table>
<tr>
<th>Колонка-заголовок 1. строка 1</th>
<th>Колонка-заголовок 2</th>
</tr>
<tr>
<td>Строка 2. Колонка 1</td>
<td>Строка 2. Колонка 2</td>
</tr>
<tr>
<td>Строка 3. Колонка 1</td>
<td>Строка 3. Колонка 2</td>
</tr>
</table>
Стоит обратить внимание, что у таблицы нет ни рамок, ни фона - это все настраивается в стилях. Тем не менее, текст на странице отображается в табличном виде.
Цитата
В этой статье я код оборачиваю в цитаты - они отображаются в соответствующем стиле. В HTML-документе цитата вставляется с помощью тега <blockquote></blockquote>.
<h2>Цитата</h2>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida leo sit amet placerat mollis. Fusce congue dui ut dolor volutpat hendrerit. Ut consectetur, sapien a laoreet efficitur, nulla justo pretium dui, et porta justo diam quis magna. Suspendisse potenti. Pellentesque fringilla porta nisl, nec ornare dui venenatis quis.
</blockquote>
Как видим на скриншоте, текст сместился чуть вправо. Мы в дальнейшем сможем настроить любые стили к цитатам, таблицам и другим тегам. Например, зададим черную полосу слева. А сейчас мы видим результат отображения цитаты в Chrome так, как у него отображается цитата по умолчанию.
Видео
Для вставки видео возьмем какой-нибудь видеоролик с YouTube.
Мне нравится вот это видео: https://youtu.be/v2AC41dglnM
Я буду вставлять его.
<iframe width="560" height="315" src="https://www.youtube.com/embed/v2AC41dglnM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
На самом деле, это готовый код, который мне предложил YouTube для встраивания в сайт. Видео на самом YouTube вставлено не таким способом. Но нам для экспериментов пока этого достаточно.
Фактически мы используем тэг <iframe></iframe> - он предназначен для вставки кода другой страницы внутрь нашей. То есть внутри нашей страницы еще отображается страница, находящаяся по другому адресу.
Кнопка
Вообще без кнопок, полей ввода, форм интернет был бы не тем. Кнопка - один из основных элементов взаимодействия пользователя с сайтом.
<h3>Кнопка</h3>
<button>Нажми на меня</button>
К кнопкам привязываются самые различные действия. Попробуем сделать так, чтобы при клике на нашу кнопку отображался Alert.
<h3>Кнопка</h3>
<button onclick="alert('Hello World')">Нажми на меня</button>
То есть мы к кнопке добавили атрибут onclick, а в нем описали, что должно произойти при нажатии на кнопку.
А произойти должно следующее - должен отобразиться Alert с текстом Hello World.
Стоит обратить внимание на то, что содержимое атрибута onclick обернуто в двойные кавычки, а текст Hello World обернут в одинарные кавычки.
Если мы обернем Hello World также в двойные кавычки, то мы получим синтаксическую ошибку: фактически мы закроем кавычку после скобки, дальше будет какая-то непонятная браузеру строка, а потом кавычка снова откроется перед скобкой.
Кстати, onclick можно использовать практически к любому элементу страницы: даже к параграфу. Можете попробовать.
Поле ввода текста
<h3>Input</h3>
<input type="text" placeholder="Введите сюда ваш текст">
Поле ввода - это тег <input> - он используется без закрывающего тега.
Мы использовали следующие атрибуты:
- type="text" - указали, что мы будем вводить текст. Может быть еще телефон, дата и т.д. Это полезно, когда вы создаете форму. Например, на телефоне, если выбрать другой тип, то будет открываться соответствующая клавиатура при вводе, например, только цифры.
- placeholder="Введите сюда ваш текст" - указали заглушку
Жирный текст
<h3>Жирный текст</h3>
<p><b>Жирный текст.</b> Обычный текст</p>
За жирный текст отвечает тэг <b></b>. От английского Bold
Курсив
<h3>Курсив</h3>
<p><b>Курсив.</b> Обычный текст</p>
За курсив отвечает тэг <i></i>. От английского Italic
Подчеркнутый текст
<h3>Подчеркнутый текст</h3>
<p><u>Подчеркнутый текст.</u> Обычный текст</p>
За подчеркнутый текст отвечает тег <u></u> - от английского Underline.
На самом деле, тегов очень много.
Полный список можно посмотреть здесь:
https://www.w3schools.com/tags/default.asp
Настоятельно рекомендую почитать и поиграться с ними
На этом наш второй урок окончен. На следующем уроке мы будем делать страницу "О себе".
Вопросы и предложения пишите в комментариях.
Если что-то не понятно и нужна помощь - пишите в Телеграм в @srmt22
Обязательно поставьте лайк, если дочитали до конца
Также вы можете общаться с нашей командой и у вас будут персональные занятия, будете получать быстро ответы на ваши вопросы, мы поможем найти работу и будем помогать выполнять рабочие задачи и развиваться на новом месте. По всем вопросам пишите в Телеграм в @srmt22
Следующее занятие здесь:
