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

Создайте свою личную страницу с именем, фотографией и сведениями о вас.

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

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

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

Порядок действий

• перед началом работы сохраните файл с расширением .html (это очень важно). Кодировка файла - UTF8.

• не забудьте разместить на сайте свою фотографию-портрет. Лицо должно занимать половину или две трети изображения по высоте. Лучше избегать фотографий в стиле “я со спины”, “пол-лица закрывает роскошная шляпа”; публиковать фотографии котиков (вместо себя) - тоже не лучшее решение, так никто из преподавателей не сможет вас опознать:) Файл с фотографией желательно перевести в формат jpg. Страница должна содержать гиперссылку на этот файл.
  Если вы пользуетесь нашим файлом-шаблоном, найдите тег img и замените ссылку (URL) в нем на имя файла или на свою ссылку. Вы можете дать ссылку на фотографию в сети, но имейте в виду, что в будущем ваша ссылка легко может оказаться “битой”.

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

• проверьте, что страница читается в браузере, а фотография видна.

• Создайте на GitHub в репозитории lingdata папку mywebpage и положите в него файл index.html, а также файл с фотографией (и файлы для стилей и т. п., если нужно).

Дополнительные опции, которые не влияют на оценку

• Если вы уже хорошо знаете HTML (и CSS), при желании можете показать свои умения, улучшив внешний вид страницы за счет форматирования. Лучших веб-мастеров мы потом попросим сделать общую страницу для вашей группы, с фотографиями всех студентов.

Критерии оценивания

• страница имеет корректную стуктуру, вложенность тегов не нарушена

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

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

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

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

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

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

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

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

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

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

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

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

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

Дополнительные материалы

• Введение в HTML

• Bootstrap объяснение сеточной системы Bootstrap

• Еще один образец