Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
  • Загальні властивості стилів та їхні значення






    Лабораторна робота № 6

    Тема: «HTML. Таблиці стилей та елементи форми.»

    Мета: Вміти створювати сторінки з кнопками, списками, полями введення тощо, оформляти сторінки, використовуя таблиці стилів.

    ТЕОРЕТИЧНІ ВІДОМОСТІ

    Форми

    Тег для опису форми.

    < FORM ACTION=” url обробника даних”

    METHOD ={Get|Post} <! -- спосіб передачі даних по посиланню абоза значенням

    ENCTYPE ={application/x-www-form-urlencoded або text/plain} -тип кодуваннядля обробки програмою або для передачі по електронній пошті

    [TARGET=значение]>

    елементи форми

    < /FORM>

     

    Поле введення: тексту, паролю, вибір файлу, прихований текст:

    < INPUT TYPE={Text | Password | File | Hidden }

    NAME= ім’я елемента

    VALUE= текст за замовчуванням

    SIZE= кількість видимих символів рядка

    MAXLENGTH= максимальна кількість символів рядка >

    Кнопки: посилання даних, кнопки-картинки, відміни:

    < INPUT TYPE={Submit | Image | Reset}

    VALUE=назва на кнопці >

    Список варіантів:

    < INPUT TYPE = checkbox NAME=значення1 [CHECKED]>

    < INPUT TYPE = checkbox NAME= значення2 >

    ………………..

    < INPUT TYPE = checkbox NAME= значенняN>

    Список перемикачів:

    < INPUT TYPE = radio NAME= значення1 [CHECKED]>

    < INPUT TYPE = radio NAME= значення2>

    ………………..

    < INPUT TYPE = radio NAME= значенняN>

    Список, що випадає:

    < SELECT NAME= ім’я списку

    SIZE= висота видимої частини списку (у рядках)

    MULTIPLE (без значень) > -вибір декількох пунктів

    < OPTION VALUEпередаваєме значення»

    SELECTED (без значень) > зазамовчуванням

    ……………

    < OPTION параметри N>

    < / SELECT >

    Текстове поле:

    < TEXTAREA NAME= ім’я

    ROWS= висота (у рядках)

    COLS = довжина (у символах)>

    Текст < / TEXTAREA >.

     

    Таблиці стилів

    Впроваджена таблиця:

    < STYLE TYPE=" text/css" >

    {Список тегів|.клас} {властивість1: значення1;

    властивість2: значення2; властивість3: значення3;... < / STYLE >

    Загальні властивості стилів та їхні значення

    Властивість Значення Пояснення
    Border-color red, green, #ffcc55 Колір рамки
    Border-style none, dotted, dashed, solid, double, groove, ridge, inset, outset Стиль рамки
    Border-width 2mm, 3mm Товщина рамки
    Font-family Arial, «Times New Roman», Serif пріоритетний список шрифтів
    ІFont-size 12pt, 16pt Розмір шрифту
    Font-style normal, oblique, italic Стиль шрифту
    Font-weight normal, bold, bolder Товщина шрифту
    Word-spacing число у mm Відстань між словами
    Letter-spacing число у mm Відстань між символами
    Line-height число у mm Відстань між рядками
    Background-attachment Fixed, scroll Тло фіксоване, прокручується
    Background-color red, green, #ffcc55 Колір тла
    Background-image URL(" aдрeca графічного файлу для тла")
    Color red, green, #ffcc55 Колір елемента
    Text-align Left, right, center, justify Вирівнювання тексту
    Text-decorate none, underline, overline, line-through, blink Оформлення тексту  
    Text-indent Число Абзацний відступ
    Vertical-allign top, super, middle, sub, bottom Вертикальне вирівнювання
    Margin або Margin-top Margin-right Margin-bottom Margin-left Число1 число2 число3 число4 Відступи зверху, справа, знизу, зліва
    Padding або Padding-top Padding-right Padding-bottom Padding-left Число1 число2 число3 число4 Величина вільного простору між стороною рамки і елементом у рамці
    Height Число Висота елемента
    Width Число Ширина елемента
    Float none, left, right Обтікання об'єкта текстом
    List-style-image URL(" адpeca графічного маркера списку")
    List-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none Вигляд маркера списку (диск, круг, квадрат, арабські цифри, малі чи великі римські тощо)
    List-style-position inside, outside Позиція маркера

    Зв’язана таблиця стилів:

    Таблицею є самостійний файл. css, а у html -файлі створюється запис у тегу < HEAD>:

    < LINK HREF =" адреса таблиці стилів (наприклад, styles.css)"

    TYPE = " text/css" REL = " stylesheet" TITLE = " URL таблиці стилів" >


    ПОСЛІДОВНІСТЬ ВИКОНАННЯ РОБОТИ

    1. Скористайтеся існуючим сайтом, створеним у Лабораторній роботі №5. Додайте до нього ще одну сторінку Анкета.

    2. Створіть сторінку anketa.html. Ведений текст на сторінці не форматуйте, тільки зробіть заголовок №1 та курсив де потрібно (рис 1).

    3. Для введення Імені додайте Поле введення з текстом-підказкою у рядку ФИО.

    4. Додайте Поле для введення особистого паролю, який буде складатися з 5 символів.

    5. Розташуйте Список перемикачів з 2 елементів для опису статі.

    6. Для ознаки діяльності створіть Список варіантів з 5 елементів, розташованих по різному. З обраним за умовчанням елементом Студент..

    7. Створіть Відкриваючий список з 5 елементів (наприклад, науково-пізнавальна, фантастика, фентезі, пригоди, історичні), 3 елемента з яких є видимими. Останній елемент (історичні) оберіть за умовчанням. Передбачити багатоваріантний вибір.

    8. Розташуйте Текстове поле з 5 рядків та 40 символів вздовж, із вспливаючою підказкою Смелее!.

    9. У кінці сторінки додайте дві кнопки. Першу Кнопку відміни з підписом Отмена, другу Кнопку Подачи з підписом Готово.

    10. Додайте гіперпосилання на якусь адресу.

    Рис 1.

    11. Відформатуйте цю сторінку, застосувавши внутрішню таблицю стилів, яка зробить курсив на всій сторінці – бузкового кольору, заголовки №1 зробить шрифтом Arial, розміром 12pt, червоного кольору.

    12. Додайте вбудований стиль у тег курсиву для визначення статі, як напівжирний.

    13. Для всього сайту зробіть зовнішню таблицю стилів з іменем mystyle.css, яка для всього коду встановить колір тіла – сірий, шрифти обиратиме Times New Roman або Ser if, колір символів – бордовий, відступи тексту верхнє та нижнє було по 20, ліве та праве – по 10, також передбачити, щоб колір гіперпосилання до використання та після був відповідно червоним та зеленим.

     

    КОНТРОЛЬНІ ЗАПИТАННЯ

     

    1. Для чого використовуються форми?

    2. З допомогою яких тегів створюються форми?

    3. Чим відрізняються ведення різних варіантів Кнопки?

    4. Як ввести пароль?

    5. У чому різниця між описом елементів списку перемикачів та списку варіантів?

    6. У списку, що розгортається, як обрати декілька варіантів?

    7. Як у списках встановити значення за умовчанням?

    8. Яке призначення таблиці стилів?

    9. Які є способи взаємодії таблиці стилів і html- файлу?

    10. З чого складається таблиця стилів?

    11. Які одиниці вимірювання застосовують у мові CSS?

    12. Для чого групують властивості?

    13. Що таке успадковування властивостей?

    14. Яке призначення тегу DIV?

    15. Яке призначення тегу SPAN?

     






    © 2023 :: MyLektsii.ru :: Мои Лекции
    Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
    Копирование текстов разрешено только с указанием индексируемой ссылки на источник.