Простой сайт на html через блокнот

@gotovets · Регистрация: 12.02.2020

Студворк — интернет-сервис помощи студентам

Приветствую!Прошу вашего совета. Пишу сайт с нуля. Не могу найти инфу,которая будет работать на блокноте. Сделать разметку картинок и подписать их. Пробовала по разному, не получается. Будет типа интернет-магазина цветов, нужно красиво сделать галерею с подписями. Буду рада любому совету.

Вот код html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title> Интернет-магазин Мята </title>
 
<title></title>
    <link rel="stylesheet" href="text.css">
</head>
 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
 
<body 
bgcolor="#000" background="fon.jpg">
 
<nav class="top-menu">
  <a class="navbar-logo" href=""><img src="https://i.pinimg.com/236x/e5/89/6a/e5896adf1184ee46e07aa97f340834a1.jpg"></a>
  <ul class="menu-main">
    <li><a href="">Главная</a></li>
    <li><a href="">Доставка</a></li>
    <li><a href="">О нас</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</nav>
 
<p>
    <img src="букет1.jpg" alt="photo" "width="350" height="350">
    <img src="букет2.jpg" alt="photo" width="350" height="350">
    <img src="букет3.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет4.jpg" alt="photo" "width="350" height="350">
    <img src="букет5.jpg" alt="photo" width="350" height="350">
    <img src="букет6.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет7.jpg" alt="photo" "width="350" height="350">
    <img src="букет8.jpg" alt="photo" width="350" height="350">
    <img src="букет9.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет10.jpg" alt="photo" "width="350" height="350">
    <img src="букет11.jpg" alt="photo" width="350" height="350">
    <img src="букет12.jpg" alt="photo" width="350" height="350">
</p>
<p>
    <img src="букет13.jpg" alt="photo" "width="350" height="350">
    <img src="букет14.jpg" alt="photo" width="350" height="350">
    <img src="букет15.jpg" alt="photo" width="350" height="350">
</p>
 
</body>
</html>

Вот код css для менюшки( на всякий случай)

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
@import url('https://fonts.googleapis.com/css?family=Arimo');
.top-menu {
  background: rgba(255,255,255,.5);
  box-shadow: 3px 0 7px rgba(0,0,0,.3);
  padding: 20px;
}
.top-menu:after {
  content: "";
  display: table;
  clear: both;
}
.navbar-logo {display: inline-block;}
.menu-main {
  list-style: none;
  margin: 0;
  padding: 0;
  float: right;
}
.menu-main li {display: inline-block;}
.menu-main a {
  text-decoration: none;
  display: block;
  position: relative;
  line-height: 61px;
  padding-left: 20px;
  font-size: 30px;
  letter-spacing: 2px;
  font-family: 'Arimo', sans-serif;
  font-weight: bold;
  color: #ff5c77;
  transition:.3s linear;
}
.menu-main a:before {
  content: "";
  width: 9px;
  height: 9px;
  background: #ff5c77;
  position: absolute;
  left: 50%;
  transform: rotate(45deg) translateX(6.5px);
  opacity: 0;
  transition: .3s linear;
}
.menu-main a:hover:before {opacity: 1;}
@media (max-width: 660px) {
.menu-main {
  float: none;
  padding-top: 20px;
}
.top-menu {
  text-align: center;
  padding: 20px 0 0 0;
}
.menu-main a {padding: 0 10px;}
.menu-main a:before {transform: rotate(45deg) translateX(-6px);}
}
@media (max-width: 600px) {
.menu-main li {display: block;}
}

@kyvaldenius · 14.02.2020, 16:02

Сообщение от gotovets

Сделать разметку картинок и подписать их. Пробовала по разному, не получается. Будет типа интернет-магазина цветов, нужно красиво сделать галерею с подписями. Буду рада любому совету.

задание очень не понятное

Если "Сделать разметку картинок и подписать их" то надо включать CSS и писать правила для стилей
"Будет типа интернет-магазина цветов" -- на блокноте с чистым HTML это очень громкое название

Интернет-магазин ... Интернет-магазин (англ. online shop или e-shop) — сайт, торгующий товарами посредством сети Интернет. Позволяет пользователям онлайн, в своём браузере или через мобильное приложение, сформировать заказ на покупку, выбрать способ оплаты и доставки заказа, оплатить заказ.

для этого необходимо использовать технологии asp.net , javascript, php и все возможные другие для веб разработки, а также базы данных

если просто таблица с картинками и подписями то html и CSS (для красоты )

если нужен последний вариант " таблица с картинками и подписями" то либо поискать по интернету готовые примеры или на понравившихся сайтах через просмотр кода

@gotovets · 14.02.2020, 17:43 **[ТС]**

Это как макет, то есть прям полноценный сайт я делать не собираюсь. Я же написала как раз,что стили прописываю в css,но именно для картинок не могу. Пыталась по разному,почему-то не работает)

Добавлено через 6 минут
А на счет поискать по интернету...говорю же пробовала по разному, с разных сайтов,почему то не работает. Может делаю что-то не так.

@yurickas · 14.02.2020, 18:41

Не по теме:

надо сделать мем: инфа по html для блокнота.

Новые блоги и статьи Все статьи Все блоги /
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@gotovets 0 / 0 / 0 Регистрация: 12.02.2020 Сообщений: 4
	14.02.2020, 17:43 [ТС]
	Это как макет, то есть прям полноценный сайт я делать не собираюсь. Я же написала как раз,что стили прописываю в css,но именно для картинок не могу. Пыталась по разному,почему-то не работает) Добавлено через 6 минут А на счет поискать по интернету...говорю же пробовала по разному, с разных сайтов,почему то не работает. Может делаю что-то не так. 0

@yurickas
	14.02.2020, 18:41
	Не по теме: надо сделать мем: инфа по html для блокнота. 0