Цветовая схема:
C C C C
Шрифт
Arial Times New Roman
Размер шрифта
A A A
Кернинг
1 2 3
Изображения:
Обычная версия
  • ХМАО - Югра, г. Нижневартовск
  • +7 (904) 483-50-68
  • sammitportal@mail.ru
  2. Блог
  3. Блог Мохова С.А.

Блог Мохова С.А. - Сообщения с тегом "HTML"

  • Архив

    «   Июнь 2022   »
    Пн Вт Ср Чт Пт Сб Вс
        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      

  • Поиск

ДЗ 10 классы на каникулы

Нравится0
Сергей Мохов
02.01.202213:142 января 2022 13:14:06
Уважаемые слушатели курсов!
Мы подошли к завершающей стадии выполнения первой полноценной практической работы по созданию многостраничного сайта. Осталось разнообразить его теми инструментами, с которыми (в основном) мы познакомились на прошедших занятиях.

1. Виджеты
Найти в сети (например здесь - http://embedru.maintarget.ru) подходящий виджет и внедрить его на свой сайт.

2. Облако тегов
Внедрить  облако тегов (знаки зодиака), используя соответствующие сервисы. Рекомендуемый сервис: https://wordart.com
Пример использования можно посмотреть в видео.

3. Карты в HTML
Составьте изображение-карту, при клике на определенную область которой (знак зодиака), можно перейти по определенной ссылке.
Изображения можно найти здесь...
https://yandex.ru/images/search?text=Созвездия%20знаков%20зодиака&source=related-duck
Подробную инструкцию можно посмотреть здесь...
https://basicweb.ru/html/karta.php
или здесь...
https://sammitportal.ru/blog/teacher/?page=post&blog=blog_mokhov&post_id=10-klass-el...

4. Ролловеры
Применить эффект ролловера для изображений знаков зодиака.
Пример создания ролловер-изображения:
<a href="url страницы, на которую ведет кнопка">
<img src="адрес первого изображения" onmouseover="this.src='адрес второго изображения'" onmouseout=" this.src='адрес первого изображения'" />
</a>
Для редактирования изображений для ролловеров советую использовать ресурс https://www.photopea.com

5. YouTube Player
Внедрить на сайт проигрыватель видео YouTube. Подробное описание здесь: https://developers.google.com/youtube/iframe_api_reference
Пример работы можно посмотреть в приложенном к сообщению файле.
Пример внедряемого видео:

Результаты вашей работы высылаем в архиве на poznanie@list.ru или принесите на ближайшее занятие.
Удачи!
youtube.html ( 1.57 КБ)
Сергей Мохов
02.01.202213:142 января 2022 13:14:06
Просмотров:157 Комментариев:0 Нравится0

11А класс: Практика "Московский Кремль"

Нравится0
Сергей Мохов
24.01.202107:0424 января 2021 07:04:34
Описание практикума и все необходимые файлы для его выполнения в приложенном архиве.
Внимание! Работу отправляем на адрес  project@xix-nv.ru.
Фото:
Сергей Мохов
24.01.202107:0424 января 2021 07:04:34
Просмотров:429 Комментариев:0 Нравится0

11 класс: Гороскоп на 2021

Нравится0
Сергей Мохов
18.01.202109:3518 января 2021 09:35:35
Создать сайт с гороскопом на 2021 год.
Сергей Мохов
18.01.202109:3518 января 2021 09:35:35
Просмотров:387 Комментариев:0 Нравится0

11 класс: Фреймы

Нравится0
Сергей Мохов
18.01.202109:3518 января 2021 09:35:35
Фреймы
Сергей Мохов
18.01.202109:3518 января 2021 09:35:35
Просмотров:409 Комментариев:0 Нравится0

11 класс: Практическая работа «Вставка рисунков в документ»

Нравится0
Сергей Мохов
22.12.202008:5322 декабря 2020 08:53:08
Практическая работа «Вставка рисунков в документ»

1. Скопируйте на свой компьютер приложенный к сообщению архив IMG.zip и разархивируйте его. Откройте файл img.htm в редакторе. Ваша задача – оформить веб-страницу про некоторые направления в музыке XX века. Для оформления нужно использовать рисунки из подкаталога images.
2.  Добавьте заголовок страницы (TITLE), укажите там название документа и фамилию автора, например: Веб-страница с рисунками: работа Василия Пупкина
3. Найдите и выделите соответствующими тэгами заголовок документа и заголовки разделов.
4. Разбейте текст на абзацы.
5. Оформите веб-страницу:
  • Установите в качестве фона страницы рисунок back.jpg;
  • Выберите соответствующий цвет текста.
  • Оформите жирным шрифтом, курсивом и своим цветом имена и фамилии, названия ансамблей, фильмов, песен.

6. Добавьте на страницу рисунки, расположенные в подкаталоге images.
7. Установите для рисунков выравнивание (с обтеканием текстом) и альтернативный текст. Рисунки лучше ставить в шахматном порядке (один налево, следующий – направо и т.д.)
8. Установите для рисунков внешний отступ 10 пикселей.

Дополнительные задания:

9. Замените верхние кавычки на «ёлочки».
10. Замените везде знаки «минус» на тире, сделайте так, чтобы тире не отрывались от предыдущих слов.

Внимание! Работу отправляем на адрес  project@xix-nv.ru.
Удачи!

IMG.zip ( 37.01 КБ)
Сергей Мохов
22.12.202008:5322 декабря 2020 08:53:08
Просмотров:592 Комментариев:0 Нравится0

11 класс, "Создание таблиц в HTML"

Нравится0
Сергей Мохов
20.12.202009:0020 декабря 2020 09:00:36
Тема "Создание таблиц в HTML"
Задание:Создать страничку с отображением погоды на примере Яндекс.погода.
Пример результата:
погода.jpg
Необходимые для выполнения работы файлы приложены к сообщению.
Справочная информация по созданию таблиц находится в приложенном к сообщению файле.
Удачи!
Фото:
Сергей Мохов
20.12.202009:0020 декабря 2020 09:00:36
Просмотров:679 Комментариев:0 Нравится0

10, 11 класс, электив: Создаём форму регистрации на Facebook

Нравится0
Сергей Мохов
12.12.201908:4512 декабря 2019 08:45:14
Сегодня делаем итоговую практическую на тему "Формы в HTML".
Задача: создать форму, аналогичную (в меру своих возможностей) форме регистрации в социальной сети Facebook.

Совсем недавно она выглядела вот так:
facebook-2.png

Читать подробнее...

Фото:
Сергей Мохов
12.12.201908:4512 декабря 2019 08:45:14
Просмотров:991 Комментариев:0 Нравится0

10, 11 класс, электив: Создание карт изображений

Нравится0
Сергей Мохов
24.11.201921:2324 ноября 2019 21:23:09

10класс.jpg

Карта изображений (Image Map) позволяет привязывать ссылки к фрагментам изображения. Щелкая мышью на отдельных частях изображения, пользователь может переходить по той или иной ссылке на разные Web-страницы.

Предположим, что вы, как HTML-верстальщик, получаете задание. Есть GIF-рисунок размером 220*140 пикселей с изображением карты трех прибалтийских государств:

pribaltika.gif

Необходимо, чтобы при клике по территории каждого государства происходил переход по соответствующей ссылке.

Читать подробнее...

Фото:
Сергей Мохов
24.11.201921:2324 ноября 2019 21:23:09
Просмотров:709 Комментариев:0 Нравится0