358 группа. Основы сайтостроения

Опубликуйте ссылку на Ваш сайт в комментариях к настоящему сообщению

1. Создайте главную страницу сайта и разместите ее на WEB-хостинге.
2. Выполните упражнения по учебнику "HTML-конструирование".
3. Каждое упражнение опубликуйте в отдельной WEB-странице на WEB-хостинге.
4. Ссылку на упражнение поместите в оглавление на главной странице сайта.

Web-хостинг beget.ru

Пример сайт ifizmat

Пример на 000webhost.com
Web-хостинг 000webhost.com

Пример на Hostinger.ru
Web-хостинг Hostinger.ru

Задания

Урок 1
1. Стихотворение "Сходство"
2. Уровни заголовков
3. Оглавление "За грибами"
Урок 2
4. Сборник газетных вырезок
5. Стихи о разнице вкусов
6. Двенадцать стульев: памятная запись
7. Классификация: хордовые
8. Выравнивание: словарь Эллочки Щукиной
9. Спецсимволы: Незнайка в Солнечном городе
10. Зачетный класс: Разговор двух друзей
11. Коллекция занимательных историй
Урок 3
12. Стихотворение "Одно искусство"
13. Продолжение коллекции занимательных историй
14. Список вопросов Пятачка
15. Список слов из словаря Эллочки
16. Волшебник Изумрудного города
17. Золотой теленок
18. Классификация животных
19. Как сделать хороший HTML-документ
20. Рекомендации по использованию списков
21. Таблички на пароходе "Скрябин"
22. План похищения Крошки Ру
23. Оглавление учебника информатики
24. Распорядок дня
Урок 4
25. Чуковский К. Крокодил: цепочка вложенных ссылок
26. Чуковский К. Крокодил: ссылка внутри документа (перейти к справке, вместо name используют id)
27. Бармаглот
28. Отгадка Бармаглота
29. Чуковский: Переход к метке другого документа
30. Справочник по животным Ивана Ломтикова
31. Справочник Ивана Ломтикова: многофайловым гипертекстом
32. Игра в загадки
Урок 5
33. GIF: обычный, анимированный, прозрачный
34. Атрибут alt: "А нас и тут неплохо кормят!"
35. Испытатель 2 (src, alt, width, height, border)
36. Попугай: атрибут align со значениями top, middle, bottom, right, left
37. Сова: положение картинки в абзаце
38. Переход по картинке-ссылке: часы, "Попробуй, догони!"
39. Бабочка крапивница: 4 способа
40. Веселый зоопарк
Урок 6
41. Чуковский К. Тараканище
42. Паркетная плитка
43. Паркетная плитка
44. Горизонтальная паркетная плитка: Тараканище
45. Пример гипертекстовой иерархии
46. Модифицированный иерархический справочник
47. Пример паркетного фона 1
48. Пример паркетного фона 2
49. Пример паркетного фона 3
50. Пример паркетного фона 4
51. Антипример фоновой картинки 1
52. Антипример паркетного фона 2
53. Антипример паркетного фона 3
54. Антипример паркетного фона 4
55. Документ-картинка Car
56. Программа Димы Мочалкина "Чеширский кот"
57. Паркетный фон "Часы"
58. Гипертекстовый справочник
Урок 7
59. Испытатель 2. Атрибуты таблицы: align, width, cellpadding, cellspacing, bgcolor, background, border, bordercolor, bordercolordark, bordercolorlight
60. Испытатель 4. "А Васька слушает да ест."
61. Испытатель 6. Pig.
62. Атрибут nowrap
63. Атрибут colspan
64. Атрибут rowspan
65. Атрибут colspan+rowspan
66. “Алиса в стране Чудес”: cellpadding
67. “Алиса в стране Чудес”: пустые столбцы
68. “Алиса в стране Чудес”: комбинация cellpadding и пустых столбцов
69. "Корешок" страницы в таблице
70. Таблицы для многоколонной верстки
71. В.Войнович “Москва 2042”: надписи на стенах
72. Коллаж с анимированным GIF: телевизор
73. Зачетный класс: задача Пети Трясогузкина
74. Зачетный класс: задача Кузи Ивашкина
75. Хитрые таблицы Кузи Ивашкина
76. Картина в раме: наездник
77. Картина в раме: кот с птицей
78. Глаголы исключения
79. Полеты на воздушном шаре
Урок 8
80. Крокодилы: исправление ошибок
Урок 9: Исправление ошибок
81. Рыбалка
82. Полярный медведь Стасик
83. Alfa Romeo
84. Наши соседи по планете
85. Над чем смеются кошки
Урок 10: Задание для самостоятельной работы
86. Инструменты web-разработчика
    Выполнить примеры по CSS, оформить их в виде сниппетов, используя он-лайн HTML-редакоторы. Создать на своем сайте страницу со ссылками на сниппеты и разместить на ней снимки страниц с выполненными примерами.
    [8]. codepen.io: Онлайн-редактор кода HTML, CSS, JavaScript
    [9]. jsfiddle.net: Онлайн-редактор кода HTML, CSS, JavaScript
    
Урок 11: Задание для самостоятельной работы
87. Мобильное приложение сайта
    Создать для своего сайта мобильное приложение по примеру:
    ifizmat: Практика: AppInventor2
    Установить свое приложение на мобильное устройство или эмулятор. Создать отдельную страницу на Вашем сайте со ссылками на Google диск с папкой, содержащей файлы мобильного приложения в форматах aia и apk. На этой же странице разместить 3 снимка экрана мобильного приложения. Выполнить 3 снимка экрана мобильного устройства:
    1) главная страница Вашего сайта в окне мобильного приложения;
    2) страница с выполнением задания Урока 10;
    3) любая страница Вашего сайта по выбору с выполнением одного из задний уроков.
    Пример эмулятора мобильного устройства:
    memuplay.com: MEmu - The Best Free Android Emulator on PC ever
    memuplay.com: Прямая ссылка на скачивание Offline Installer
    

---

Источники

Основные

1. artlebedev.ru: .ру/Ководство — студия дизайна Артемия Лебедева
2. html5book.ru: HTML, CSS, JavaScript и jQuery
3. htmlbook.ru: Для тех, кто делает сайты
4. Роботландский университет: Дуванов А.А.
5. robotlandia.ru: Роботландский университет Дуванов А.А.
6. ucoz.ru: Роботландский университет Дуванов А.А.
7. css.manual.ru: HTML, CSS
8. codepen.io: Онлайн-редактор кода HTML, CSS, JavaScript
9. jsfiddle.net: Онлайн-редактор кода HTML, CSS, JavaScript
10. nic.ru: Whois сервис
11. reg.ru: Регистрация доменов

Дополнительные

12. w3schools.com: W3.CSS Template. Примеры дизайна сайтов.
13. ruseller.com: Топ 10 бесплатных хостингов
14. ruseller.com: 20 ресурсов для прототипирования
15. ruseller.com: Простая техника эффекта параллакса
16. ruseller.com: 28 сайтов с эффектом параллакса
17. thisstartupdoesnotexist.com: Neural network web designer
18. thiscatdoesnotexist.com: Neural network cats photo-artist
19. thispersondoesnotexist.com: Neural network people photo-artist
20. hi-tech.mail.ru: Нейросеть начала создавать «фейковые» сайты
21. hi-tech.mail.ru: Нейросеть научилась создавать фотографии фейковых котов
22. hi-tech.mail.ru: Нейросеть научилась создавать фотографии несуществующих людей
23. emosurf.com: Мы готовим детей к позавчерашнему миру
24. pravmir.ru: Людмила Петрановская: Мы готовим детей к позавчерашнему миру