Личная страничка в HTML

Создайте свою личную страницу с именем, фотографией и сведениями о вас. На основе ваших личных страничек мы сделаем сайт вашего курса и отправим его в закрытую рассылку Школу лингвистики, чтобы преподаватели могли с вами познакомиться.

Возможно несколько вариантов выполнения задания.

• Если вы неопытный веб-мастер, возьмите мастер-файл mywebpage/index.html как образец и отредактируйте его. Как правило, мы начинаем редактировать этот файл на семинаре, продолжите делать это дома.

Рекомендуем редактировать файл в NotePad++ (или аналогах для Mac/Linux), параллельно просматривая итоговый вид того же файла в браузере.

• Если вы имееет большой опыт в создании страниц и сайтов, вы можете загрузить авторский вариант страницы, сделанный “с нуля”. (Однако имейте в виду, что страницы, сделанные с применением онлайн-конструкторов типа wix.com и ему подобных, не принимаются.)

Перед отправкой домашнего задания убедитесь, что страница читается в браузере на вашем компьютере, а фотография видна.

Создайте на GitHub в репозитории lingdata папку mywebpage и положите в нее файл index.html, а также файл myphoto.jpg с фотографией (если нужно, добавьте файлы для стилей и другие файлы). Файл с фотографией будет использован также при генерации общей страницы вашего курса с фотографиями.

Критерии оценивания (макс. 8 баллов)

• страница имеет корректную структуру, вложенность тегов не нарушена, стоят все закрывающие теги у парных тегов

• содержание страницы – напишите про себя что-то интересное и нетривиальное

• вы умеете пользоваться атрибутом URL - фотография отображается корректно и в разумном размере, страница содержит рабочие гиперссылки

• вы умеете пользоваться элементарными средствами визуального выделения и увеличения/уменьшения текста (например, курсивом, размером шрифта, цветом)

• дизайн страницы умеренный, не “кричащий”. Рекомендуется использовать не более трех-четырех цветов в оформлении страницы

• файл назван правильно, находится в правильной папке и с правильной кодировкой

• не стирайте шапку файла с гиперссылкой на сайт Школы лингвистики и меню

Указания для начинающих веб-мастеров

• Перед началом работы сохраните файл (Save as…) под именем index и с расширением .html (это очень важно). Кодировка файла - UTF8 (Юникод).
  (Стандартный блокнот Windows изменит и кодировку, и расширение файла, не пользуйтесь им. Word тоже не подходит.)

• Откройте файл для редактирования в текстовом редакторе (кликните правой кнопкой мышки и выберите Открыть с помощью.../Open with...).

• Откройте тот же файл для просмотра в браузере. Каждый раз, сохраняя изменения в файле в текстовом редакторе, обновляйте страницу в браузере (F5), чтобы увидеть изменения.

• Разберитесь, на какие основные блоки делится страница визуально и какие html-теги за это отвечают.

• В следующей строке нарушен принцип вложенности тегов - согласно ему, границы тегов не должны пересекаться. Переставьте один закрывающий тег так, чтобы исправить эту ошибку.

  Человек, умеющий создавать HTML
  

• Отредактируйте русский текст (на html теги можно особого внимания не обращать, но вы можете смело менять количество элементов списка, добавлять блоки и так далее). В Notepad++ содержательный текст будет отображаться черным цветом, в отличие от тегов.

• С помощью тега <a href="... добавьте гиперссылки на ваши страницы с соцсетях, на гитхабе, на другие личные страницы, если это не секрет.

• Поэкспериментируйте с форматированием - измените цвет фона у шапки, ширину столбцов, выделите фрагменты текста курсивом или полужирным.

• Загрузите в папку mywebpage репозитория lingdata на гитхабе свою фотографию-портрет. Файл должен называться myphoto.jpg. Лицо должно занимать половину или две трети изображения по высоте. Лучше избегать фотографий в стиле “я со спины”, “пол-лица закрывает роскошная шляпа”; публиковать фотографии котиков (вместо себя) - тоже не лучшее решение, так никто из преподавателей не сможет вас опознать:) Как на локальном компьютере, так и в репозитории файл должен лежать рядом с файлом index.html (в одной папке).

• Найдите тег на html-странице и замените URL изображения на название файла. Вы можете также дать ссылку на фотографию, выложенную в сети Интернет, но имейте в виду, что в будущем ваша ссылка легко может оказаться “битой”, да и сделать ссылку на нее на общей страничке курса/группы нам будет сложнее.

• Если фотография отображается как очень большая/маленькая или искажена по высоте/ширине, поменяйте значение атрибута height в теге (а бывает еще атрибут width ).

• Вы можете добавить еще одну-две фотографии на личную страничку.

• Проверьте, что в вашем репозитории есть ветка gh-pages. Если ее нет, то ее нужно создать.

• После того, как вы загрузили и закоммитили все файлы в репозитории, по ссылке https://<your-account>.github.io/lingdata/mywebpage/ вы сможете увидеть результат. (Иногда нужно подождать 3-5 минут, чтобы все заработало.)

Частые ошибки начинающих веб-мастеров

URL-ссылки ведут на файл, лежащий в домашнем компьютере

Пример: <img src=”C://Desktop/myphoto.jpg”>. В этом случае фотография будет отображаться, только если вы откроете html-страничку тоже на домашнем компьютере, а не в Интернете. Решение: Положите файл с фотографией на сервер (в папку репозитория GitHub). Если вы укажете имя файла без пути, то тогда браузер будет искать файл с изображением в той же папке, что и html-страница.

Страница загружается очень медленно

Если ваши фотографии очень “тяжелые” (например, файл весит 500 Мб), то страница будет загружаться медленно. Уменьшите размер исходного файла. И давайте обойдемся без видео и gif-ок.

Не отображается часть текста, оформление текста

Проверьте, что теги прописаны правильно, являются вложенными. Лучше добавлять контент на страницу постепенно, проверяя, что на сайте все выглядит так, как ожидается. Каждый раз, сохраняя файл в текстовом редакторе, делайте коммит на github и обновляйте веб-страницу в браузере. Имейте в виду, что GitHub pages могут некорректно отображать очень сложный код оформления. Если локально страница выглядит так, как задумывалось, не волнуйтесь. Мы тоже проверяем ваши страницы, скачав вашу папку на локальный компьютер.

Куда делись мои красивые стили?

Если вы пользуетесь CSS-стилями, проверьте, что URL, указывающие на файлы css-стилей, ведут куда надо (а сами файлы стилей лежат онлайн в репозитории GitHub или на другом внешнем сервере, например, на bootstrap).

Бонус (задание на 9-10 баллов)

Чтобы получить 9-10, создайте свою страничку с нуля. Не используйте шаблон. (При этом ваша работа должна соответствовать критериям на 8.)

На страничке обязательно должны быть ваши имя с фамилией, фотография, родной город, школа, ссылки на соцсети (хотя бы телеграмм). Очень желательно воспроизвести на вашем самодельном сайте гиперссылки на сайт Школы лингвистики и сайты групп (см. меню мастер-файла html), чтобы с вашей личной страницы можно было переходить к другим страницам.

Попробуйте создать адаптивный дизайн, чтобы на устройствах с небольшим экраном заголовки не отрывались от текста, а подписи от фотографий.

Не используйте искусственный интеллект и не прибегайте к услугам других помощников для создания страницы с нуля. Мы можем попросить вас поправить код страницы в классе, чтобы убедиться, что вы выполнили задание сами.