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

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

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

Уважаемые слушатели курсов!
Мы подошли к завершающей стадии выполнения первой полноценной практической работы по созданию многостраничного сайта. Осталось разнообразить его теми инструментами, с которыми (в основном) мы познакомились на прошедших занятиях.

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 КБ)

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

Описание практикума и все необходимые файлы для его выполнения в приложенном архиве.
Внимание! Работу отправляем на адрес  project@xix-nv.ru.
Фото:

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

Создать сайт с гороскопом на 2021 год.

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

Фреймы

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

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

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 КБ)

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

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

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

Сегодня делаем итоговую практическую на тему "Формы в HTML".
Задача: создать форму, аналогичную (в меру своих возможностей) форме регистрации в социальной сети Facebook.

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

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

Фото:

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

10класс.jpg

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

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

pribaltika.gif

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

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

Фото: