• Задания
  • Тесты

Основы HTML

При выполнении работы можно использовать специальные HTML-редакторы, например, KompoZer

  1. Cоздать папку Фамилия-Web, а в ней html-документ под именем вида Familia_1.htm

    2. Примечание: для этого открываем Блокнот и сохраняем домент с расширением htm

  2. В html-документе Familia_1.htm создать стандартную структуру HTM-документа:

    <html>
    <head>
    ....Сведения о документе....
    <title>
    ......Заголовок документа......
    </title>
    </head>
    <body>
    ...Информационное наполнение...
    </body>
    </html>
  1. Заполнить документ следующим образом:
    1. в качестве заголовка Web-страницы ввести свою фамилию
    2. цвет фона всей Web-странички задать строго в соответсвии с вариантом

      № варианта

      Название цвета 

      Красный 

      Зеленый 

      Синий 

      Цвет 
      1 blue  00 00 FF  
      2 blueviolet  8A 2B E2  
      3 brown  A5 2A 2A  
      4 cadetblue  5F 9E A0  
      5 chocolate  D2 69 1E  
      6 coral  FF 7F 50  
      7 cornflowerblue  64  95  ED   
      8 crimson DC 14 3C   
      9 darkblue 00 00 8B  
      10 darkcyan 00 8B 8B  
      11 darkgreen 00 64 00  
      12 darkmagenta  8B 00 8b  
      13 darkolivegreen 55  6B  2F  
      14 darkred  8B 00 00  
      15 darkslategray 2F 4F 4F  

    3. цвет текста всей Web-странички задать в тон цвету фона. Код цвета можно найти здесь
    4. В качестве информационного наполнения представить рассказ о себе: кто Вы и что Вы, во что верите, на что надеетесь, что любите, к чему стремитесь, чего стыдитесь, чем увлекаетесь, ... 
      Рассказу должен предшествовать заголовок первого уровня (тег <h1>, выравнивание по центру) с текстом "ФИО о себе...". Сам же рассказ следует начать со слов "Я, Фамилия Имя Отчество,...", при этом свое полное ФИО в начале рассказа следует выделить курсивом и сделать гиперссылкой, по которой должнаоткрываться Ваша фотография в отдельном окне фотографию следует предворительно сохранить в папке Фамилия-Web под именем вида familia.jpg). 
      Рассказ должен содержать не менее 500 знаков и логически структурирован по абзацам. При оформлении текста для выделения наиболее значимых фактов о себе следует использовать жирное, курсивное начертание, подчеркивание и прочие средства форматирования
      После рассказа должны средовать два заголовок второго уровня (тег <h2>, выравнивание по правому краю) с текстом
      • ФИО знает...
      • ФИО рекомендует...
  2. Создать html-документ под именем вида Familia_2.htm и заполнить его следующим образом:
    1. заголовок, цвет фона и цвет текста задать такими же, как на странице Familia_1.htm
    2. в качестве информационного наполнения дать письменные ответы на  вопросы, причем:
      • вопросы и ответы должны быть оформлены посредством таблицы вида (цвет границы таблицы задается в тон цвету страницы)
        Вопрос к ФИО Ответ ФИО
        Вопросы о ФИО
           
        Вопросы о HTML
           
      • ячейку с текстом "Вопросы о ФИО" перекрасить в темный оттенок Вашего цвета
      • ячейку с текстом "Вопросы о HTML" перекрасить всветлый оттенок Вашего цвета
      • вопросы должны иметь полужирное (жирное) начертание шрифта (тег <b>...</b>)
      • ответы на вопросы должны иметь курсивноеначертание шрифта (тег <i>...</i>)
    3. После ответов на вопросы вставить изображение покровителя Интернета со странички (предворительно сохранив его в своей папке Фамилия-web под именем вида familia_p.jpg) и сделать это изображение объектом гиперссылки, переводящей нас на страницу  Familia_1.htm
  3. В html-документе Familia_1.htm заголовок "ФИО знает..." преобразовать в гиперссылку, переводящую нас на страницу Familia_2.htm
  4. Создать html-документ под именем вида Familia_3.htm и заполнить его следующим образом:
    1. заголовок, цвет фона и цвет текста задать такими же, как на странице Familia_1.htm
    2. в качестве информационного наполненияследует разместить список Ваших рекомендаций и предостережений для читателей, оформленные в виде многоуровневого списка следующим образом (нумерация каждого уровня выбирается строго в соответствии с вариантом (см. ниже)):
    3. Списку должен предшествовать заголовок первого уровня (тег <h1>, выравнивание по центру) с текстом "Советы ФИО", после которого следует горизонтальная линия в тон цвету Вашей страницы толщиной в (n+3)px (где n - номер Вашего варианта), занимающая в ширину 75% экрана.
      Распределение способов нумерации по вариантам:
      • нумерация 1-го уровня - sp(n);
      • нумерация 2-го уровня - sp(n+1);
      • нумерация 3-го уровня - sp(n+2);
      ГДЕ sp ( n ) – тип списка, где sp в зависимости от собственного номера n есть:
        1. нумерованный список, формат номера - арабские цифры;
        2. маркированный список; тип маркера - круг;
        3. нумерованный список, формат номера - малые римские цифры;
        4. маркированный список; тип маркера - диск;
        5. нумерованный список, формат номера - большие римские цифры;
        6. маркированный список; тип маркера - квадрат;
        7. нумерованный список, формат номера - прописные буквы;
        8. нумерованный список, формат номера - строчные буквы;
        9. нумерованный список, формат номера - арабские цифры;
        10. маркированный список; тип маркера - круг;
        11. нумерованный список, формат номера - малые римские цифры;
        12. маркированный список; тип маркера - диск;
        13. нумерованный список, формат номера - большие римские цифры;
        14. маркированный список; тип маркера - квадрат;
        15. нумерованный список, формат номера - прописные буквы;
        16. нумерованный список, формат номера - строчные буквы;
        17. нумерованный список, формат номера - арабские цифры;
        18. маркированный список; тип маркера - круг;
    4. После ответов на вопросы вставить свою фотографию, сделав ее объектом гиперссылки, переводящей нас на страницу  Familia_1.htm
  5. В html-документе Familia_1.htm заголовок "ФИО рекомендует..." преобразовать в гиперссылку, переводящую нас на страницу Familia_3.htm
  6. Проверить работоспособность всех созданных ссылок.

 

 

 

 

 

 

 

 

 

 

Вопросы
на которые необходимо дать письменные ответы

  • Как Ваше Имя?

  • Как Ваше Отчество?

  • Как Ваша Фамилия?

  • Когда Вы родились?

  • Что такое HTML?

  • Является ли HTML  языком программирования?

  • Для чего используются теги?

  • Что такое атрибуты тегов?

  • Отображаются ли теги в окне браузера?

 

 

© sil 2020