Личная страничка в 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 Мб), то страница будет загружаться медленно. Уменьшите размер исходного файла.

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

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

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

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

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

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

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

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

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