Ссылки и изображения
Часть 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
Свойство CSS
Оно позволяет контролировать, насколько крупным или мелким будет текст, что непосредственно влияет на его читаемость и общий вид веб-страницы.
1. Абсолютные единицы:
-
-
2. Относительные единицы:
-
-
-
3. Ключевые слова:
- Свойство поддерживает и некоторые предопределенные значения, такие как
font-size задает размер шрифта для текста в HTML-элементах.Оно позволяет контролировать, насколько крупным или мелким будет текст, что непосредственно влияет на его читаемость и общий вид веб-страницы.
font-size может принимать различные типы значений:1. Абсолютные единицы:
-
px (пиксели): фиксированный размер, который не зависит от других факторов. Например, 16px.-
pt (пункты): часто используются в печати, 1pt равен 1/72 дюйма. Например, 12pt.2. Относительные единицы:
-
em: размер шрифта относительно родительского элемента. Например, 1.5em будет 1.5 раза больше шрифта родителя.-
rem: размер шрифта относительно размера шрифта корневого элемента (<html>). Например, 1rem всегда равен размеру шрифта в корневом элементе.-
%: также относительное значение. Например, 150% будет 1.5 раза больше, чем размер шрифта родителя.3. Ключевые слова:
- Свойство поддерживает и некоторые предопределенные значения, такие как
small, medium, large, x-large, и т.д.👍12
Свойство CSS
Это свойство позволяет дизайнерам улучшать типографику на веб-странице, добавляя полезные эффекты.
font-variant используется для управления отображением шрифта, в частности для применения стилизованных версий шрифтов, таких как малые прописные буквы и определённые альтернативные версии знаков. Это свойство позволяет дизайнерам улучшать типографику на веб-странице, добавляя полезные эффекты.
👍11
Свойство CSS
Возможные значения для
1. slice:
- Это значение по умолчанию. Оно указывает, что декорации будут нарезаны на уровне границ, что означает, что каждая часть, которая отображается в новой строке, будет иметь те же стили, что и основное содержимое. Этот метод может привести к "разрыву" декораций.
2. clone:
- Декорации будут клонироваться для каждой части текста, который обрезан, создавая одно и то же декорирование для каждой строки или колонки, как будто каждая часть является отдельным элементом. Это позволяет избежать "разрывов" в границах и делает их непрерывными.
box-decoration-break используется для управления тем, как элементы с составными или комбинированными декорациями (например, границами или фоновыми цветами) ведут себя при разбиении на несколько строк.Возможные значения для
box-decoration-break1. slice:
- Это значение по умолчанию. Оно указывает, что декорации будут нарезаны на уровне границ, что означает, что каждая часть, которая отображается в новой строке, будет иметь те же стили, что и основное содержимое. Этот метод может привести к "разрыву" декораций.
2. clone:
- Декорации будут клонироваться для каждой части текста, который обрезан, создавая одно и то же декорирование для каждой строки или колонки, как будто каждая часть является отдельным элементом. Это позволяет избежать "разрывов" в границах и делает их непрерывными.
👍14