CSS итоговое задание

Авторadmin / Опубликовано

Итоговое задание html/css

Урок 3: HTML

  1. Создайте каталоги:
    • img
    • css
  2. Создайте главную страницу index.html
    • Расположите необходимые теги скелета страницы (сайт www.toptal.com → установить пункт для вывода meta и title).
    • В тело страницы добавить таблицу (16 grid сетка(25%,50%,25%)). Установите атрибут border и width у таблицы и некоторых ячеек. Добавьте комментарий с номером ячейки перед каждой ячейкой:

  3. Заполнение необходимых для всех страниц ячеек таблицы:

    4. (1) Добавьте картинку с логотипом (logo.gif). Сделайте картинку гиперссылкой на текущую страницу index.html и расположите ее по центру ячейки.
    (2) Добавьте название заголовком первого уровня («Название сайта» или «Сайт студента»). Под заголовком расположите кнопку с надписью Поиск.
    (3) Создайте таблицу с тремя строками по одной ячейки в каждой. Сделайте меню сайта, используя маркированный список и вставьте его в ячейки таблицы :

    • Пункт1
    • Пункт2
    • Пункт3

    Сделайте пункты списка ссылками на страницы: page1.html, page2.html, page3.html.

  4. Добавьте в область head мета-теги (или проверьте, что они есть и заполните значения):
    • описание страницы:
      • <meta name="description" content="Сайт студента">
    • ключевые слова:
      • <meta name="keywords" content="помощь студенту, студент ЮФУ, шпаргалки">
    • запретить индексацию:
      • <meta name="robots" content="noindex, nofollow">
    • кодировку:
      • <meta charset="utf-8">
    • авторство:
      • <meta name="author" content="Светлана Майер" />
      <meta name="copyright" lang="ru" content="ЮФУ" />
    • электронный адрес ответа:
      • <meta name="reply-to" content="sfmayer@sfedu.ru">
    • дату создания сайта:
      • <meta http-equiv="creation-date" content="Sun, 02, Oct 2023 12:00:00 GMT">
    • язык сайта:
      • <meta http-equiv="content-language" content="ru">
    • viewport — это область, которую видит пользователь на экране, когда заходит на страницу сайта с любого устройства:
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. Для тега body добавьте атрибут для расположения изображения на фон страницы (файл fon.gif).
  6. Добавьте favicon в область head:
    7.  <link rel="icon" href="img/favicon.ico">
  7. Создайте страницы page1.html, page2.html, page3.html; и, скопировав весь код с index.html, добавьте код во все страницы. На каждой странице в ячейку (4) таблицы добавьте заголовок второго уровня с названием страницы (например, «Страница1» и т.п.)
  8. Вернитесь в главный файл и проверьте работоспособность ссылок и логотипа (по щелчку).
  9. Добавьте в главном файле под заголовком текст «Слоган». Оформите его в теге div.
  10. Добавление видео с youtube: В главном файле в ячейке (4) таблицы вставьте любое видео с youtube: Открыть видео в браузере → Поделиться → Встроить → скопируйте код. Расположите видео по центру ячейки.
  11. В страницы page1.html и page2.html в ячейку (4) после заголовка добавьте по два абзаца текста, сформировав его на сайте https://ru.lipsum.com/. Добавьте теги параграфов. В page2.html добавьте также пункты списка (4 пункта), оформив их маркированным списком.
  12. На странице page3.html в ячейку (4) после заголовка добавьте видео-файл congratulations.mp4 из папки img и аудио-файл по ссылке: http://www.sovmusic.ru/m32/trusneig.mp3. Расположите их по центру друг под другом. Задайте ширину видеоплееру.

    13. Пример вставки видео:

    <video controls="controls" >
	<source src=" img/congratulations.mp4 " type="video/mp4">
</video>
  13. В страницы page1.html и page2.html в ячейку (5) расположите изображения, измените их размер, чтобы они вмещались в ячейки (атрибут width).

Урок 4: CSS

Метод встраивания (inline):

  1. На страницах page1.html и page2.html добавьте стиль для заголовков в ячейках (4) (color, text-align) (свойства можно смотреть здесь: https://labs-org.ru/css-6/ или https://htmlbook.ru/css/cat/text)

    2. Метод вложения (embedded):

  2. На странице page2.html измените свойства заголовка h2 (text-align, border). Свойства для рамок здесь: https://labs-org.ru/css-10/ или https://htmlbook.ru/css/cat/border.
  3. На странице page2.html установите шрифт для параграфа:
  • Подберите и скачайте шрифт google web fonts https://fonts.google.com/, выбрав кириллические шрифты (например, Amatic_SC) → Download family → Скачайте архив в папку CSS. Разархивируйте архив в текущей папке. После извлечения файлов удалите архив.
  • Добавьте в область head контейнер (парный тег) style.
  • Прикрепите шрифт к странице. Пример:
    • /* Обычный */
	@font-face {
		font-family: 'AmaticSC-Regular'; 
		src: url('css/AmaticSC-Regular.ttf'); 
	}
  • Для тега параграфа добавьте свойство изменения гарнитуры шрифта на добавленный шрифт. Проверьте результат.

    •  

    Рубрики