/
suphrt
/
LAB-01
Обзор
Документация
Войти
/
suphrt
/
LAB-01
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
index.html
128 строк
7 KB
suphrt
upload files
22 мар 2025, 09:29
22 мар 2025, 09:29
b8e2566
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="keywords" content="РКСП, примеры верстки, html"> <title>Лабораторная работа №1</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Лабораторная работа №1</h1> <p>Пример веб-страницы с различными элементами</p> </header> <main> <section class="text-block"> <h1>Оформление текста</h1> <p> Одна из областей, от которых типографы обычно стараются держаться подальше, - это дизайн бланков и форм. Проектировать их непросто, так что это - вызов вашему мастерству. Но вознаграждение не заставит себя ждать в смысле профессионального роста. </p> <p> Выберите шрифт, чуть более узкий, чем используете обычно. Бланки и формы постоянно копируются, так что убедитесь в том, что шрифт хорошо читается, имеет приличное жирное начертание для выделения текста и различимые цифры. </p> <p> Чётко отделите напечатанный текст от полей, которые подлежат заполнению. Линейки и отточия должны служить направляющими для рукописного заполнения формы, а не выглядеть, как решётка тюремного окна. То же самое относится к рамкам вокруг текста. Так ли они необходимы? Не бойтесь, буквы не разбегутся! </p> <p> Без ограничительных рамок формы выглядят вполовину менее официальными и не так наводят на мысль о запретах. Разные поля на странице можно разделить белым пространством, как в нашем примере. </p> <p> Если какой-то шрифт был создан нейтральным, чистым и практичным, то это Univers Адриана Фрутигера, 1957. Узкие начертания гарнитуры действительно хорошо читаемы. </p> <h2>Индексация Univers (Lynotype):</h2> <p>Первая цифра обозначает насыщенность:</p> <ul> <li class="first"><a class="bold100">1 - сверхсветлое начертание</a></li> <li class="second"><a class="bold200">2 - тонкое и т.д. </a><a class="bold900">до 9 - сверхжирного.</a></li> </ul> <p>Вторая - пропорции:</p> <ol> <li><a class="compressed">сжатое,</a></li> <li><a class="narrow">узкое,</a></li> <li><a class="normal">нормальное,</a></li> <li><a class="wide">широкое начертание.</a></li> </ol> </section> <section class="links"> <h2>Полезные ссылки</h2> <ul> <li><a href="https://www.yandex.ru">Перейти в Яндекс</a></li> <li><a href="mailto:arustamyan.milana@gmail.com">Написать email</a></li> <li><a href="tel:+79553332211">Позвонить по телефону</a></li> </ul> </section> <section class="table"> <h2>Пример таблицы</h2> <table> <thead> <tr> <th>Имя</th> <th>Возраст</th> <th>Профессия</th> </tr> </thead> <tbody> <tr> <td>Милана</td> <td>19</td> <td>Project-manager</td> </tr> <tr> <td>Артём</td> <td>25</td> <td>WB Seller</td> </tr> </tbody> </table> </section> <section class="form-section"> <h2>Форма регистрации</h2> <div class="form"> <form action="#" method="POST"> <label for="username">Имя пользователя:</label> <input type="text" id="username" name="username" placeholder="Иван" required> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="example@example.com" required> <label for="password">Пароль:</label> <input type="password" id="password" name="password" required> <label for="phone">Телефон:</label> <input type="tel" id="phone" name="phone" placeholder="+7 (***) *** ** **" required> <button type="submit" class="submit-btn">Зарегистрироваться</button> </form> </div> </section> <section class="images"> <h2>Изображения</h2> <div class="image-container"> <img src="images/large-image.png" alt="Большое изображение" class="large-image"> <img class="small1" src="images/small1.jpg" alt="Маленькое изображение 1"> <img class="small2" src="images/small2.jpg" alt="Маленькое изображение 2"> <img class="small3" src="images/small3.jpg" alt="Маленькое изображение 3"> </div> </section> </main> <footer> <h3>Выполнила:</h3> <p>студентка группы БИВТ-23-7 Арустамян Милана</p> </footer> <script src="script.js"></script> </body> </html>