Урок 3: Работа с изображениями, ссылками и таблицами в HTML, стилизация с помощью CSS
Изображения в HTML
Изображения играют важную роль в создании визуально привлекательных веб-страниц. В HTML для вставки изображений используется элемент <img>. Он является пустым элементом, то есть не имеет закрывающего тега. Основные атрибуты <img>:
src — URL изображения.
alt — альтернативный текст, который отображается, если изображение не удалось загрузить.
Пример использования:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример изображения</title>
</head>
<body>
<h1>Изображение в HTML</h1>
<img src="example.jpg" alt="Пример изображения">
</body>
</html>
Ссылки в HTML
Ссылки используются для перехода на другие страницы или ресурсы. В HTML ссылки создаются с помощью элемента <a>. Основной атрибут <a> — href, который указывает адрес целевой страницы.
Пример использования:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример ссылки</title>
</head>
<body>
<h1>Ссылки в HTML</h1>
<p>Перейдите на <a href="вставьтевашсайт">пример сайта</a> для получения дополнительной информации.</p>
</body>
</html>
Таблицы в HTML
Таблицы используются для отображения данных в табличной форме. В HTML таблицы создаются с помощью элементов <table>, <tr>, <th> и <td>.
Пример таблицы:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример таблицы</title>
</head>
<body>
<h1>Таблицы в HTML</h1>
<table border="1">
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Иван</td>
<td>25</td>
</tr>
<tr>
<td>Мария</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Стилизация изображений, ссылок и таблиц с помощью CSS
Теперь применим CSS для стилизации этих элементов.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Стилизация элементов</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
}
h1 {
color: #333;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #1E90FF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Стилизация изображений, ссылок и таблиц</h1>
<h2>Изображение</h2>
<img src="example.jpg" alt="Пример изображения">
<h2>Ссылка</h2>
<p>Перейдите на <a href="вставьтевашсайт">пример сайта</a> для получения дополнительной информации.</p>
<h2>Таблица</h2>
<table>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Иван</td>
<td>25</td>
</tr>
<tr>
<td>Мария</td>
<td>30</td>
</tr>
</table>
</body>
</html>
В этом примере мы использовали следующие стили:
max-width и height для изображения, чтобы оно адаптировалось под размер экрана.
color и text-decoration для ссылки, чтобы изменить цвет и убрать подчеркивание.
text-decoration: underline; для ссылки при наведении.
border-collapse для таблицы, чтобы границы соседних ячеек сливались.
border, padding и text-align для ячеек таблицы.
background-color для заголовков таблицы.
Заключение
В этом уроке мы рассмотрели использование изображений, ссылок и таблиц в HTML, а также их стилизацию с помощью CSS. Эти элементы помогают сделать веб-страницу более информативной и привлекательной. В следующем уроке мы изучим формы и взаимодействие с пользователями через HTML и CSS.