Одна из ключевых особенностей HTML - это возможность комбинировать различные теги для достижения желаемого результата.
Каждый тег в HTML имеет свое специфическое назначение и характеристики, и правильное их сочетание позволяет создавать сложные и функциональные веб-страницы.
Например, представьте, что вы хотите создать на странице заголовок первого уровня, за которым следует абзац текста. Для этого вы можете использовать теги <h1> и <p>
Комбинирование тегов HTML - это ключевой навык для любого веб-разработчика. Это позволяет создавать сложные и богатые веб-страницы, четко структурируя контент и делая его максимально понятным для пользователей и поисковых систем.
Постоянная практика и понимание назначения различных тегов HTML помогут вам в совершенстве овладеть этим навыком.
Каждый тег в HTML имеет свое специфическое назначение и характеристики, и правильное их сочетание позволяет создавать сложные и функциональные веб-страницы.
Например, представьте, что вы хотите создать на странице заголовок первого уровня, за которым следует абзац текста. Для этого вы можете использовать теги <h1> и <p>
Комбинирование тегов HTML - это ключевой навык для любого веб-разработчика. Это позволяет создавать сложные и богатые веб-страницы, четко структурируя контент и делая его максимально понятным для пользователей и поисковых систем.
Постоянная практика и понимание назначения различных тегов HTML помогут вам в совершенстве овладеть этим навыком.
👍6
Пример комбинирования 1: Работа с текстом
<!DOCTYPE html>
<html>
<head>
<noscript>Комбинирование HTML-тегов</noscript>
</head>
<body>
<h1>Добро пожаловать на страницу комбинирования HTML-тегов!</h1>
<h2>Структурирование контента</h2>
<p>Заголовки от <code><h1></h1></code> до <code><h6></h6></code> позволяют создавать иерархию и логическую организацию контента на веб-странице.</p>
<h3>Списки</h3>
<p>Упорядоченные списки (<code><ol></ol></code>) и неупорядоченные списки (<code><ul></ul></code>) помогают перечислять элементы:</p>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ul>
<h3>Цитаты</h3>
<p>Теги <code><blockquote></blockquote></code> и <code><q></q></q> позволяют выделять цитаты:</p>
<blockquote>
<p>Это длинная цитата, выделенная с помощью тега <code><blockquote></blockquote></code>.</p>
</blockquote>
<p>А это короткая цитата, выделенная тегом <code><q></q></code>: <q>Короткая цитата</q>.</p>
<h3>Абзацы и форматирование текста</h3>
<p>Теги <code><p></p></code> разбивают текст на логические блоки. Также можно использовать теги для <strong>выделения</strong>, <em>курсива</em>, <small>уменьшения</small> размера, <sup>надстрочных</sup> и <sub>подстрочных</sub> символов, <del>зачеркивания</del> и <ins>вставки</ins> текста.</p>
<h2>Специальные символы</h2>
<p>В HTML можно использовать "специальные" символы, например &copy; (©) для обозначения авторского права.</p>
</body>
</html>
👍8
Ссылки и изображения
Часть 1
Объяснение:
- <h1> <h2>: Заголовки первого и второго уровня.
- <a href="...">...</a>: Тег для создания гиперссылки.
- href: Атрибут, указывающий целевой URL.
- target="_blank": Открывает ссылку в новой вкладке.
- noscript: Поясняющий текст, который отображается при наведении курсора на ссылку.
Часть 1
Объяснение:
- <h1> <h2>: Заголовки первого и второго уровня.
- <a href="...">...</a>: Тег для создания гиперссылки.
- href: Атрибут, указывающий целевой URL.
- target="_blank": Открывает ссылку в новой вкладке.
- noscript: Поясняющий текст, который отображается при наведении курсора на ссылку.
👍7
Ссылки и изображения
Часть 2
Объяснение:
- <img>: Тег для вставки изображения.
- src: Указывает путь к изображению.
- alt: Альтернативный текст, который отображается, если изображение не загружается.
- noscript: Дополнительный текст, который отображается при наведении на изображение.
- width и height: Задают размеры изображения в пикселях.
- <div>: Блок контейнера. Здесь к нему используется стиль через атрибут style для задания фона.
В обычной практике стили лучше задавать в CSS, но пока что курс по css у нас впереди😉
Часть 2
Объяснение:
- <img>: Тег для вставки изображения.
- src: Указывает путь к изображению.
- alt: Альтернативный текст, который отображается, если изображение не загружается.
- noscript: Дополнительный текст, который отображается при наведении на изображение.
- width и height: Задают размеры изображения в пикселях.
- <div>: Блок контейнера. Здесь к нему используется стиль через атрибут style для задания фона.
В обычной практике стили лучше задавать в CSS, но пока что курс по css у нас впереди😉
1👍8
<table border="1">
<caption>Список пользователей</caption>
<thead>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
</thead>
<tbody>
<tr>
<td>Дима</td>
<td>30</td>
</tr>
<tr>
<td>Саня</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Всего</td>
<td>2</td>
</tr>
</tfoot>
</table>
👍8
Проект - таблицы
- <caption>: Заголовок таблицы.
- <thead>: Группа заголовков таблицы.
- <tbody>: Основная часть таблицы.
- <tfoot>: Низ таблицы, обычно используется для сумм или итогов.
Тег <tr> (table row) используется для определения строки таблицы.
Тег <td> (table data) используется для определения обычной ячейки таблицы.
Тег <th> (table header) используется для определения заголовка ячейки, который обычно выделяется полужирным шрифтом и выравнивается по центру.
- <caption>: Заголовок таблицы.
- <thead>: Группа заголовков таблицы.
- <tbody>: Основная часть таблицы.
- <tfoot>: Низ таблицы, обычно используется для сумм или итогов.
Тег <tr> (table row) используется для определения строки таблицы.
Тег <td> (table data) используется для определения обычной ячейки таблицы.
Тег <th> (table header) используется для определения заголовка ячейки, который обычно выделяется полужирным шрифтом и выравнивается по центру.
👍7🔥3
<form>
<fieldset>
<legend>Регистрация</legend>
<label for="username">Имя пользователя:</label>
<input type="text" id="username" name="username" required placeholder="Введите имя пользователя">
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required placeholder="Введите пароль">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required placeholder="Введите ваш email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<label for="message">Сообщение:</label>
<textarea id="message" name="message" rows="5" cols="30" placeholder="Введите сообщение"></textarea>
<label for="options">Выберите вариант:</label>
<select id="options" name="options">
<option value="1">Вариант 1</option>
<option value="2">Вариант 2</option>
<option value="3">Вариант 3</option>
</select>
<input type="submit" value="Отправить">
</fieldset>
</form>
👍10
Проект - формы
- <fieldset>: Группирует связанные элементы формы.
- <legend>: Заголовок группы, например — "Регистрация"
- <label>: Связывает текст с полем, улучшая доступность.
- <input type="text">: Поле для ввода имени пользователя. Обязательное поле (атрибут required) с текстом-подсказкой (placeholder)
- Тег <select> используется для создания выпадающего списка, а <option> — для определения доступных вариантов.
- Атрибут required указывает, что поле обязательно для заполнения.
- Атрибут pattern позволяет задать регулярное выражение для проверки введенных данных.
- <fieldset>: Группирует связанные элементы формы.
- <legend>: Заголовок группы, например — "Регистрация"
- <label>: Связывает текст с полем, улучшая доступность.
- <input type="text">: Поле для ввода имени пользователя. Обязательное поле (атрибут required) с текстом-подсказкой (placeholder)
- Тег <select> используется для создания выпадающего списка, а <option> — для определения доступных вариантов.
- Атрибут required указывает, что поле обязательно для заполнения.
- Атрибут pattern позволяет задать регулярное выражение для проверки введенных данных.
👍15
Проект по встроенным элементам (2)
video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.
Путь к файлу задаётся через атрибут src или вложенный элемент <source>.
audio используется для вставки аудиофайлов: музыки, звуковых эффектов, аудиокниг и других аудиоматериалов. Он позволяет управлять воспроизведением файла, изменять громкость и перемотку.
video добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.
Путь к файлу задаётся через атрибут src или вложенный элемент <source>.
audio используется для вставки аудиофайлов: музыки, звуковых эффектов, аудиокниг и других аудиоматериалов. Он позволяет управлять воспроизведением файла, изменять громкость и перемотку.
👍10
Вид html документа по встроенным элементам (такой вид - повод изучить css для красоты)
👍7
Всем доброго времени суток!
Мы с вами сделали первый шаг на пути становления профессиональными верстальщиками — освоили основы HTML. Теперь нас ждет увлекательное путешествие в мир стилей CSS.
Каждый день мы будем открывать для себя новые стили, которые придадут вашим проектам изящество и приятный вид. Давайте вместе создавать красивые и привлекательные веб-страницы!
Made in HTML/CSS - ваш гид в становлении профи
Мы с вами сделали первый шаг на пути становления профессиональными верстальщиками — освоили основы HTML. Теперь нас ждет увлекательное путешествие в мир стилей CSS.
Каждый день мы будем открывать для себя новые стили, которые придадут вашим проектам изящество и приятный вид. Давайте вместе создавать красивые и привлекательные веб-страницы!
👍12👨💻2
1 глава css - тексты
Чтобы задать стиль элементу html , в css пишем сам элемент и ставим { }. Например: p{ }
CSS стиль
1. Названия цветов: Например,
2. RGB: Формат, где цвет задается с помощью значений красного, зеленого и синего (например,
3. HEX: Шестнадцатеричный формат, начинающийся с символа
4. HSL: Цвет задается через оттенок, насыщенность и яркость (например,
Чтобы задать стиль элементу html , в css пишем сам элемент и ставим { }. Например: p{ }
CSS стиль
color используется для определения цвета текста в HTML элементах. Он может принимать значение в различных форматах, таких как:1. Названия цветов: Например,
red, blue, green.2. RGB: Формат, где цвет задается с помощью значений красного, зеленого и синего (например,
rgb(255, 0, 0) для красного).3. HEX: Шестнадцатеричный формат, начинающийся с символа
# (например, #FF0000 для красного).4. HSL: Цвет задается через оттенок, насыщенность и яркость (например,
hsl(0, 100%, 50%) для красного).🔥5👍4👨💻2
CSS стиль
Свойство font может быть указано либо как отдельное ключевое слово, которое будет выбирать системный шрифт, либо как сокращение для различных свойств, связанных со шрифтом.
font используется для управления типографикой текста на веб-страницах. Это свойство объединяет несколько аспектов шрифта и позволяет легко задавать их в одном месте. Свойство font может быть указано либо как отдельное ключевое слово, которое будет выбирать системный шрифт, либо как сокращение для различных свойств, связанных со шрифтом.
👍7🔥4
CSS стиль
Это свойство позволяет указать один или несколько шрифтов, которые браузер будет использовать при отображении текста. Если первый указанный шрифт недоступен, браузер перейдет к следующему в списке.
Свойство
Семейства шрифтов:
- serif (с засечками) — например, Times New Roman, Georgia.
- sans-serif (без засечек) — например, Arial, Helvetica.
- monospace (моноширинные) — например, Courier New, Lucida Console.
- cursive (курсивные) — например, Comic Sans MS, Pacifico.
- fantasy — например, Impact, Charcoal.
font-family используется для определения типа шрифта, который будет применяться к тексту в HTML элементах. Это свойство позволяет указать один или несколько шрифтов, которые браузер будет использовать при отображении текста. Если первый указанный шрифт недоступен, браузер перейдет к следующему в списке.
Свойство
font-family может принимать как конкретные названия шрифтов, так и обобщенные семейства шрифтов, такие как:Семейства шрифтов:
- serif (с засечками) — например, Times New Roman, Georgia.
- sans-serif (без засечек) — например, Arial, Helvetica.
- monospace (моноширинные) — например, Courier New, Lucida Console.
- cursive (курсивные) — например, Comic Sans MS, Pacifico.
- fantasy — например, Impact, Charcoal.
👍11
CSS правило
Это правило определяет собственный шрифт, который можно использовать на веб-сайте, даже если он не установлен на компьютере пользователя.
С помощью
@font-face позволяет веб-дизайнерам использовать пользовательские шрифты, которые не являются стандартными для браузеров.Это правило определяет собственный шрифт, который можно использовать на веб-сайте, даже если он не установлен на компьютере пользователя.
С помощью
@font-face вы можете указать файл шрифта, который браузер должен загрузить, а также задать различные параметры для него.🔥8👍5