Простейший каталог сайтов
29 апреля 2020 - Администратор
Комментарии (0)
Нет комментариев. Ваш будет первым!
В этой статье мы разберём пример создания каталога сайта с помощью HTML таблиц.
В нашем сайте будет размещён логотип, создана таблица, состоящая из трёх столбцов. Первый столбец - это логотип сайта с активной ссылкой. Второй столбец - описание сайта. Третий столбец - рейтинг.
Чтобы создать сайт, необходимо создать папку сайта, в ней необходимо создать папку images для изображений и создать файл index.html в текстовом редакторе.
Чтобы разместить логотип, нужно создать абзац, в котором мы разместим логотип при помощи парного тега <img> </img> Подробно о изображениях на веб страницах
<p><img src="images/logo.jpg" width = "100%"></img></p>
С помощью атрибута width мы сделали ширину логотипа на всю страницу. width = 100%
Чтобы создать таблицу каталога, используется тег <table> </table>
Для заголовков используется тег <th> </th>
Для строк используется тег <tr> </tr>
Для столбцов используется парный тег <td> </td>
Подробно о таблицах на веб страницах
Чтобы разместить логотип сайта с активной ссылкой, необходимо использовать тег <a> </a> . В нём в атрибуте href указывается путь к сайте, который можно написать свой. Внутри тега <a> ставится тег <img> для отображения иконки сайта. В нём в атрибуте src нужно указать путь к картинке. Чтобы увеличить количество сайтов, можно продублировать тег <tr> </tr> и поменять содержимое
Пример html страницы с таблицей простейший каталог сайтов
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый каталог сайтов</title>
</head>
<body>
<p><img src="images/logo.jpg" width = "100%"></img></p>
<h1>Каталог</h1>
<table border="1" width="100%" cellpadding="5">
<tr><th>сайт</th><th>описание</th> <th>рейтинг</th> </tr>
<tr>
<td><a target="_blank" href="http://itrobo.ru/programmirovanie/samouchitel-po-si-s-nulja.html"><img src="images/icon1.jpg" width="100" height="100" ></td>
<td>Курс по си</td>
<td>5,4</td>
</tr>
<tr>
<td><a target="_blank" href="http://itrobo.ru/programmirovanie/kurs-po-paskal.html"><img src="images/icon2.jpg" width="100" height="100" ></td>
<td>Курс по pascal abc</td>
<td>4,5</td>
</tr>
</table>
</body>
</html>
В итоге мы получим html страницу
Вернуться к содержанию курса html ^
Полезно : Регистрация домена и размещение сайта на хостинге
Поделиться
Нет комментариев. Ваш будет первым!