Как составить резюме html - Сайт, где вы сможете решить свои вопросы

Урок 3. Создаем веб-страницу резюме или свою онлайн-визитку

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

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

Кто хочет обучаться индивидуально с ментором – пишите в телеграм на @srmt22.

Ссылка на наш канал и все уроки:

Итак, поехали.

Запускаем PhpStorm и создаем проект

Итак, запускаем PhpStorm

Подробно об установке и первом запуске phpStorm я рассказывал на уроке 1. Кому нужно, ссылка ниже:

У меня уже открылся предыдущий проект. Он нам больше не нужен. Будем работать с новым.

Жмем File->New Project

1. Слева выбираем Php Empty Project

2. Справа выбираем размещение для нашего проекта и вводим имя. Я назвал mycv

3. Жмем Create.

Кстати, одного из учеников был вопрос: можно ли перевести PhpStorm на русский язык?

Скорее всего да, но я бы не рекомендовал. Я рекомендую пользоваться оригиналом. Во-первых, привыкайте использовать английскую версию, как большинство. Во-вторых, вообще учите английский язык – откроете для себя больше перспектив в работе и проектах. Не важно: в России или за ее пределами. В-третьих, большая часть информации, скриншоты и ответы в интернете будут на английском – вам проще будет решить проблему, если у вас интерфейс выглядит, как у большинства.

PhpStorm может выдать такое окно. Вопрос в том, как открыть новый проект:

в текущем окне: закроет текущий проект, откроет новый – This Window
в новом окне: будет два окна со старым и новым проектом – New Window
Открыть 2 проекта в одном и том же окне – Attach

Мы выбираем This Window.

Вот он наш пустой проект.

Создаем HTML файл

Создаем первый файл – новый html.

Для этого правой кнопкой мыши нажимаем на называние проекта и выбираем New->HTML File

В следующем окне вводим имя нашего нового файла: index.html и нажимаем Enter

Файл появился сразу с предварительно заполненный по шаблону HTML5. Как нам и нужно.

Сразу поменяем язык на ru

<html lang=”en”>

меняем на

<html lang=”ru”>

Меняем заголовок документа на нужный

<title>Title</title>

меняем на

<title>Иванов Иван Иваныч. Резюме</title>

Заполняем тело страницы

На всякий случай, напомню, тело страницы мы вставляем внутри тега <body></body>.

Давайте добавим туда заголовок.

<body>
<h1>Иванов Иван Иванович</h1>
</body>

Ниже скриншот результата, на всякий случай.

Давайте посмотрим, как сейчас выглядит наша страница в Chrome.

Нажмите на кнопку “Открыть в Chrome” прям в phpstorm.

Заголовок появился. Вкладка в браузере соответствует нашему тегу <title></title>

Ремарка: заполняйте информацию про себя. Мы эту страницу на следующих уроках в целый сайт превратим и опубликуем в интернете.

Как и положено в резюме, давайте укажем наш пол, возраст и дату рождения.

Возьмем сразу всю описательную часть про нас вместе с заголовком в отдельный блок <div></div>, а сам текст возьмем в параграф <p></p>.

Содержимое тега <body> сейчас будет у нас такое:

<body>
<div>
<h1>Иванов Иван Иванович</h1>
<p>Мужчина, 100 лет, родился 1 января 1970</p>
</div>
</body>

Обратите внимание на отступы. Внутри каждого нового блока принято вставлять либо табуляцию, либо 4 пробела. PhpStorm за вас большую часть будет делать автоматически, но внешний вид и качество кода – это ваша ответственность.

То есть, создали блок <div> – внутри него все должно иметь отступ 4 пробела, внутри создали еще один блок – внутри него уже 4 новых пробела, итого 8.

Укажем нашу контактную информацию. Сразу под информацией о дате нашего рождения. Внутри того же <div>

<p><b>Контакты</b></p>
<p><a href=”tel:+79999999999″>+7 (999) 999-99-99</a></p>
<p><a href=”mailto:blablabla@srmt22.ru”>blablabla@srmt22.ru</a></p>
<p><a href=”https://t.me/srmt22″ target=”_blank”>@srmt22 – Telegram</a> – предпочтительный способ связи</p>

Здесь стоит пояснить отдельно каждую строку.

<p><b>Контакты</b></p>

<p></p> – тег параграфа. Напомню, что он означает, что текст должен отображаться, как отдельный параграф.

<b></b> – Bold, Жирный. Текст внутри этого тега будет отображаться, как жирный.

<p><a href=”tel:+79999999999″>+7 (999) 999-99-99</a></p>

С номером телефона и параграфом все понятно. Поясню про ссылку.

<a href=”tel:+79999999999″></a> – это тег ссылки.
В нем мы используем атрибут href – он обозначает браузеру, что делать при клике на эту ссылку.
Содержимое атрибута обязательно должно быть в кавычках.
Внутри tel:+79999999999 – tel: сообщает браузеру, что при клике на эту ссылку, он должен предложить набрать номер, который указан за двоеточием. Если посетитель будет открывать страницу с телефона, то телефон предложит набрать этот номер. Собственно, с компьютера будет тоже самое, просто звонить компьютер предложит с приложения для звонков по умолчанию, а это может быть скайп или любое другое приложение.

<p><a href=”mailto:blablabla@srmt22.ru”>blablabla@srmt22.ru</a></p>

mailto – при клике на эту ссылку браузер запустит автоматически приложение для отправки почты и предложит написать письмо на указанный email.

<p><a href=”https://t.me/srmt22″ target=”_blank”>@srmt22 – Telegram</a> – предпочтительный способ связи</p>

Здесь обычная ссылка на страницу телеграм. Эта страница предложит открыть телеграм и там уже откроется чат.
Здесь также есть еще один атрибут target.
target=”_blank” – опять значение в кавычках, а само значение _blank – оно означает, что эту ссылку нужно открыть в новой вкладке браузера. То есть, при клике на эту ссылку, у посетителя не закроется вкладка с вашей страницей, а просто откроется новая вкладка, в которой уже будет отображена страница https://t.me/srmt22.

Важный момент. PhpStorm, будучи крутой средой разработки вам дает подсказки, когда вы печатаете код. Стоит только набрать _, как сразу же предложится ввести _blank, _self, _top.

А теперь секрет: если нажать на клавиатуре F1, находясь в коде, то PhpStorm вам выдаст справочную информацию. Смотрите скрин ниже.

Рекомендую пользоваться и смотреть, какие значения атрибутов еще возможны. Например, у target могут быть _self – оно по умолчанию – открывать в той же вкладке, _blank – открывать в новой вкладке, _parent – в родительском контексте/окне (об этом позже), _top – в окне/контексте самого верхнего уровня (об этом позже).

Я ниже под статьей тезисно все самые важные моменты урока выпишу отдельно.

Итого, наш тег <body> сейчас выглядит следующим образом:

<body>
<div>
<h1>Иванов Иван Иванович</h1>
<p>Мужчина, 100 лет, родился 1 января 1970</p>
<p><b>Контакты</b></p>
<p><a href=”tel:+79999999999″>+7 (999) 999-99-99</a></p>
<p><a href=”mailto:blablabla@srmt22.ru”>blablabla@srmt22.ru</a></p>
<p><a href=”https://t.me/srmt22″ target=”_blank”>@srmt22 – Telegram</a> – предпочтительный способ связи</p>
</div>
</body>

А в браузере это все выглядит вот так:

Добавляем Фото

Давайте теперь добавим наше фото.

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

Для этого правой кнопкой жмем на имя проекта и жмем New->Directory

Указываем имя нашей папки и нажимаем Enter

Все, я считаю, что файлы и папки мы создавать научились. Дальше подробно объяснять со скриншотами, как это сделать, я не буду.

Дальше нужен файл с вашим фото. Если фото нет под рукой, то не тратьте время – просто скачайте любую картинку с интернета.

Я возьму любую картинку все с того же https://picsum.photos/200/300

Качаем изображение к себе на компьютер.

Для тех, кто не знает, как сохранить изображение – правой кнопкой нажимаем на изображение и жмем “Сохранить изображение как” – в зависимости от операционной системы и браузера, текст может быть другим, но смысл тот же

Перетаскиваем изображение в нашу папку img прям в окно phpstorm.

Phpstorm может спросить подтверждение для перемещения/копирования файла в папку. Жмем кнопку “Refactor”, “Copy” или любую другую кроме отмены для подтверждения действия.

Файл изображения появится в папке img. (возможно, нужно будет нажать на стрелочку слева от названия папки img, чтобы развернуть ее содержимое)

Давайте добавим наше фото на страницу.

Давайте только добавим ее перед нашим блоком <div> со всем текстом – сразу под <body>

<div><img src=”img/975-200×300.jpg” alt=”Иванов Иван Иванович”></div>

Для изображений используется тег img (от англ. Image).
В нем есть атрибут src (от англ. Source).
Значение атрибута все также в кавычках.
Значением атрибута src является путь к файлу изображения относительно файла нашей страницы index.html.

Про относительные и абсолютные пути мы позже будем подробно говорить, но сейчас на пальцах.

Папка нашего проекта – это корень.
Внутри него на одном уровне лежат папка img и файл index.html-наша страница.
В img лежит файл с фото – photo.jpg (или как-то по-другому у вас называется фото).

Папка img лежит рядом с index.html, поэтому внутри файла index.html к путь к папке img следующий: “img”, а ко всем файлам к ней следующий: “img/filename”.

То есть сейчас внутри index.html путь к фото такой: “img/975-200×300.jpg”.
Но, если бы фото лежало на том же уровне, что и index.html, а не внутри папки img, то путь был бы такой: “975-200×300.jpg”.

Если поняли, что я пытался донести – супер. Если нет, то ничего страшного. Про пути будет отдельный подробный диалог в следующих уроках.

Также в теге img указан атрибут alt – он обозначает альтернативный текст для изображения. На случай, если изображение не загрузилось, изображения отключены в браузере или вообще устройство не может отображать изображения. Пример простой: человек не смотрит на страницу на экране, а ее содержимое человеку зачитывает голосовой ассистент (Гугл, Алиса и прочие). Старайтесь всегда указывать alt с каким-то значением, обозначающем, что на изображении.

Итого, сейчас наш тег <body> выглядит так:

<body>
<div><img src=”img/975-200×300.jpg” alt=”Иванов Иван Иванович”></div>
<div>
<h1>Иванов Иван Иванович</h1>
<p>Мужчина, 100 лет, родился 1 января 1970</p>
<p><b>Контакты</b></p>
<p><a href=”tel:+79999999999″>+7 (999) 999-99-99</a></p>
<p><a href=”mailto:blablabla@srmt22.ru”>blablabla@srmt22.ru</a></p>
<p><a href=”https://t.me/srmt22″ target=”_blank”>@srmt22 – Telegram</a> – предпочтительный способ связи</p>
</div>
</body>

А на экране все это выглядит так:

Если честно, пока выглядит отвратительно. Давайте сделаем так, чтобы изображение отображалось справа.

Для этого в тег <img> нужно добавить новый атрибут style со значением float:right

Вот так будет выглядеть строка с тегом <img>:

<div><img src=”img/975-200×300.jpg” alt=”Иванов Иван Иванович” style=”float: right”></div>

Об атрибуте style: с его помощью мы описываем стиль для тега. Мы описываем стиль с помощью свойств CSS (CSS — формальный язык описания внешнего вида документа, написанного с использованием языка разметки)
float мы задали значение right – это значит, что изображение будет “обтекать” контент, который идет за ним, справа. Есть также значения left, none (не должен обтекать никого), inline-start, inline-end.

О стилях будет отдельный урок. И не один. Стили – наше все. С их помощью мы и задаем внешний вид странице: цвета, фон, положение, размер, границы и прочее.

Теперь наше изображение отображается справа.

Далее добавляем информацию о городах и странах, в которые готов переехать и указываем, готовы ли мы к командировкам.

Делаем новый блок <div> сразу под нашим <div> где указаны контактные данные

<div>
<p>Москва, готов к переезду (Нидерланды, Австрия, Чехия, Люксембург, Норвегия, ОАЭ, Бельгия, Сербия, Великобритания, США, Швеция, Греция, Германия, Ирландия, Финляндия, Испания, Италия, Сингапур, Швейцария, Кипр, Канада, Португалия, Венгрия, Эквадор, Лихтенштейн, Хорватия, Словения, Уругвай, Индонезия), готов к командировкам</p>
</div>

Далее добавляем желаемую должность.

Добавляем ее в заголовок 2-го уровня h2.

Я в предыдущем уроке рассказывал про заголовки и мы экспериментировали с ними.

Но, на всякий случай, напомню: заголовки бывают разных уровней:
h1, h2, h3, h4, h5.

h1 – первый основной заголовок. Желательно, чтобы h1 на странице был один. Далее идут заголовки следующих уровней: h2 – сколько угодно. Под h2 ниже по смыслу и важности идут h3, h4, h5 и так далее.

Соответственно, h1 – это наш заголовок страницы с нашей фамилией. h2 будет наша должность.

Добавляем новый блок <div> под наш блок с городами и странами.

<div>
<h2>Руководитель группы разработки PHP, NodeJs</h2>
</div>

Давайте дальше укажем наши специализации – сразу под h2 внутри того же <div>

<p>Специализации:</p>
<ul>
<li>Руководитель группы разработки</li>
<li>Технический директор (CTO)</li>
<li>Директор по информационным технологиям (CIO)</li>
<li>Менеджер продукта</li>
<li>Руководитель проектов</li>
</ul>

Маркированные списки

У нас на экране новые теги <ul> и <li> – это списки.

Как они работают:

Весь список берется в тег <ul>

Каждая строка списка берется в тег <li>

ul – это маркированный список (с маркерами слева)

Если ul заменить на ol, то список будет нумерованным (с цифрами слева) – попробуйте проэкспериментировать. Не забудьте только, что если вы меняете открывающий тег ul на ol, то закрывающий тоже нужно заменить (хотя, phpstorm это сделает за вас).

Давайте теперь добавим информацию о желаемой занятости и графике работы.

Добавляем прямо под закрывающий тег </ul>

<p>
Занятость: проектная работа, частичная занятость, полная занятость<br>
График работы: удаленная работа, полный день
</p>

Обратите внимание, что я сделал один параграф на две строки, а строки разбил тегом разрыва строки <br>.

<br> (break) – делает разрыв строки. Полезно, если нам не нужно делать новый абзац, но нужно перейти на следующую строку.

Давайте сверимся, что у нас получилось.

<body>
<div><img src=”img/975-200×300.jpg” alt=”Иванов Иван Иванович” style=”float: right”></div>
<div>
<h1>Иванов Иван Иванович</h1>
<p>Мужчина, 100 лет, родился 1 января 1970</p>
<p><b>Контакты</b></p>
<p><a href=”tel:+79999999999″>+7 (999) 999-99-99</a></p>
<p><a href=”mailto:blablabla@srmt22.ru”>blablabla@srmt22.ru</a></p>
<p><a href=”https://t.me/srmt22″ target=”_blank”>@srmt22 – Telegram</a> – предпочтительный способ связи</p>
</div>
<div>
<p>Москва, готов к переезду (Нидерланды, Австрия, Чехия, Люксембург, Норвегия, ОАЭ, Бельгия, Сербия, Великобритания, США, Швеция, Греция, Германия, Ирландия, Финляндия, Испания, Италия, Сингапур, Швейцария, Кипр, Канада, Португалия, Венгрия, Эквадор, Лихтенштейн, Хорватия, Словения, Уругвай, Индонезия), готов к командировкам</p>
</div>
<div>
<h2>Руководитель группы разработки PHP, NodeJs</h2>
<p>Специализации:</p>
<ul>
<li>Руководитель группы разработки</li>
<li>Технический директор (CTO)</li>
<li>Директор по информационным технологиям (CIO)</li>
<li>Менеджер продукта</li>
<li>Руководитель проектов</li>
</ul>
<p>
Занятость: проектная работа, частичная занятость, полная занятость<br>
График работы: удаленная работа, полный день
</p>
</div>
</body>

Далее давайте добавим наш опыт работы. Будем использовать таблицы.

Добавляем новый блок <div> под наш последний блок <div></div> и там добавляем заголовок h3

<div>
<h3>Опыт работы 15 лет 1 месяц</h3>
</div>

Теперь добавляем таблицу с нашим опытом работы (если опыта работы нет, то можете взять из этой статьи или придумать свой)

Опыт работы добавляем под заголовок внутри того же блока <div></div>

Здесь будет полотно текста с таблицей, списками, параграфами, заголовками жирным текстом и новый тег <span>

Скопируйте и вставьте себе код, замените текст на свой. А ниже уже подробнее разберем

<div>
<h3>Опыт работы 15 лет 1 месяц</h3>
<table>
<tr>
<td>
<p>
Май 2021 — по настоящее время<br>
<span style=”color: gray”>1 год 3 месяца</span>
</p>
</td>
<td>
<p><b>Берг-Холдинг</b><br>
Москва, berg.ru</p>
<p>Автомобильный бизнес</p>
<ul>
<li>Автозапчасти, шины (розничная торговля)</li>
<li>Автокомпоненты, запчасти, шины (продвижение, оптовая торговля)</li>
<li>Автокомпоненты, запчасти (производство)</li>
</ul>
<h4>Руководитель группы веб-разработки</h4>
<p>Управление разработкой собственных продуктов компании (внутренние сервисы, портала).</p>

<p>Устранение проблем производительности и повышение отказоустойчивости продукта, рефакторинг, распил монолита, обертывание в Docker-контейнеры, подготовка к миграции в Kubernetes.</p>

<p>Перевод старого Legacy недокументированного кода на микросервисную архитектуру.</p>

<p>Система обслуживает более 500 поставщиков, более 100 брендов, более 31 000 000 SKU доступно для заказа, более 100 000 наименований товаров в постоянном наличии, более 20 000 клиентов.</p>

<p>Планирование спринтов и основных приоритетов разработки, участие в совете архитекторов и релизном комитете.</p>

<p><b>Стэк технологий на проекте:</b></p>
<p>
php7<br>
php8<br>
Symfony<br>
Doctrine<br>
php-unit<br>
nodejs<br>
python<br>
GoLang<br>
Docker<br>
Mysql<br>
Clickhouse<br>
Redis<br>
PostgreSql<br>
Ansible<br>
vuejs<br>
Sphynx<br>
Debian<br>
GitLab<br>
Jenkins<br>
Zabbix<br>
Prometheous<br>
Grafana<br>
RabbitMQ<br>
Kafka<br>
</p>
</td>
</tr>
</table>
</div>

Получится такой результат:

Теперь подробнее:

<div></div> – обозначает новый блок. О них подробнее мы поговорим, когда детально будем изучать верстку.

<h3></h3> – заголовок 3-го уровня.

<table></table> – таблица. В этот тег обрамляется вся таблица.

<tr></tr> – (table row) – в него обрамляется каждая строка/ряд таблицы. Этот тег должен находиться внутри <table>

<td></td> – колонка таблицы. В этот тег обрамляется каждая колонка таблицы. Колонки находятся внутри строки, то есть тег <td> должен быть внутри тега <tr>

<p></p> – параграф.

<span></span> – это общий элемент для “фразирования” контента. Он ничего отдельного не обозначает. В нашем случае смысл <span> в том, чтобы к тексту, обрамленному в этот тег, применить специальный стиль – мы применили цвет текста “серый”.

Атрибут style=”color:gray” – как мы ранее прошли, style – это атрибут для задания css-стилей к элементам страницы. Мы здесь указали свойство color, назначающее цвет текста внутри этого элемента, и задали цвет текста gray – серый.

<b></b> – (bold) жирный текст. Кстати, есть аналогичный тег <strong> – делает фактически тоже самое.

<ul> – маркированный список. Весь список должен быть обрамлен в этот тег. На всякий случай напомню, что нумерованный список – это <ol>

<li></li> – строка списка. Каждая строка списка должна быть обрамлена в этот тег, а сам тег <li> должен находиться строго внутри тега <ul> или <ol>

<br> – (break) – разрыв строки. Используем, когда нужно перейти на следующую строку, но мы не хотим создавать новый абзац.

Давайте создадим еще пару строк таблицы с нашими предыдущими местами работы и опытом там.

То есть сейчас мы по аналогии с предыдущей строкой таблицы создаем такую же <tr></tr>, в ней создаем две колонки <td></td><td></td>, а в них уже заполняем информацию по аналогии с предыдущей строкой.

У меня получилось 140 строк кода уже. Здесь новичку легко запутаться в открывающих и закрывающих тегах. На помощь приходят возможности IDE (Интегрированная среда разработки) – у нас phpstorm. Давайте научимся сворачивать куски кода, чтобы они нам не мешали. Обратите внимание, что слева рядом с номерами строк есть кнопки “-” – понажимайте на них и посмотрите, как код будет сворачиваться и разворачиваться. Это очень удобно.

Вот какая таблица получилась у меня (я несколько сократил объем текста, потому что иначе вы увидите полотно кода на несколько экранов):

<table>
<tr>
<td>
<p>
Май 2021 — по настоящее время<br>
<span style=”color: gray”>1 год 3 месяца</span>
</p>
</td>
<td>
<p><b>Берг-Холдинг</b><br>
Москва, berg.ru</p>
<p>Автомобильный бизнес</p>
<ul>
<li>Автозапчасти, шины (розничная торговля)</li>
<li>Автокомпоненты, запчасти (производство)</li>
</ul>
<h4>Руководитель группы веб-разработки</h4>
<p>Управление разработкой собственных продуктов компании (внутренние сервисы, портала).</p>

<p>Устранение проблем производительности и повышение отказоустойчивости продукта, рефакторинг, распил монолита, обертывание в Docker-контейнеры, подготовка к миграции в Kubernetes.</p>

<p><b>Стэк технологий на проекте:</b></p>
<p>
php7<br>
php8<br>
Symfony<br>
Kafka<br>
</p>
</td>
</tr>
<tr>
<td>
<p>
Октябрь 2019 — май 2021<br>
<span style=”color: gray”>1 год 8 месяцев</span>
</p>
</td>
<td>
<p><b>Ацифра</b><br>
Москва</p>
<h4>Ведущий разработчик, TeamLead</h4>
<p>
Развитие и поддержка проектов заказчиков, аутстаффинг.<br>
Решение технических и бизнес задач;<br>
Управление командой разработчиков 10+.<br>
</p>
</td>
</tr>
<tr>
<td>
<p>
Октябрь 2013 — октябрь 2019<br>
<span style=”color: gray”>6 лет 1 месяц</span>
</p>
</td>
<td>
<p><b>MADMAKERS</b><br>
Санкт-Петербург</p>
<h4>Руководитель группы разработчиков, разработчик</h4>
<p>
Принимаю непосредственное участие в разработке.<br>
<br>
Делаем серверные, десктопные, мобильные приложения под любые платформы.<br>
</p>
</td>
</tr>
</table>

Вот так все это выглядит в браузере

Нам осталось несколько блоков нашего резюме:

Ключевые навыки и информация об образовании.

Давайте добьем наше резюме.

Делаем новый блок <div></div> под нашим блоком с таблицей.

Указываем заголовок h3 “Ключевые навыки” и перечисляем наши навыки.

<div>
<h3>Ключевые навыки</h3>
<ul style=”list-style: none”>
<li>Adobe Photoshop</li>
<li>ERP Systems</li>
<li>HTML5</li>
<li>JavaScript</li>
<li>Linux</li>
<li>Mac Os</li>
<li>MySQL</li>
<li>PLM</li>
</ul>
</div>

Я сделал список навыков маркированным списком. С нюансом: я указал браузеру стиль списка none, то есть я указал, что маркеры слева у каждой строки показывать не нужно. Есть и другие значения кроме none. Можно указать разные типы маркеров.

list-style: none – стиль для списков. Указывает стиль списка. none указывает на то, что маркеры в каждой строке показывать не нужно.

Посмотрите результат. Каждый навык в отдельной строке. Давайте оформим красиво.

Попробуйте к тегу <li> добавить такой атрибут стиля:

style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”

То есть получится

<li style=”float: left; padding: 10px; margin: 5px; background: lightgray ; border-radius: 5px;”>Adobe Photoshop</li>

С таким стилем элемент списка навыков будет отображаться со светло-серым фоном, закругленной рамкой, внутренним отступом 10px, внешним отступом 5px, а еще будет обтекать следующие элементы слева. А сами свойства разделяются точкой с запятой.

Теперь подробнее.

Стили CSS

float: left; – обтекать следующие элементы слева

padding: 10px; – внутренний отступ у элемента. Значение 10px – 10 пикселей будет отступ внутри элемента (о пикселях, сантиметрах, процентах и em поговорим, когда более подробно будем разбирать верстку, а сейчас пока пиксель – это просто единица размера на экране, как миллиметр на листе бумаги)

margin: 5px; – внешний отступ у элемента. Значение 5px – 5пикселей будет отступ снаружи элемента.

background: lightgray; – цвет фона. Указан светло-серый.

border-radius: 5px; – скругление рамки элемента. 5px радиус скругления

Немного подробнее о внешних, внутренних отступах и рамке:

Чтобы все строки списка отображались одинаково, к ним нужно применить одинаковый стиль – везде в тег <li>нужно добавить одинаковый атрибут style. (на самом деле это чрезвычайно кривой путь, но как делать “красиво” мы будем рассматривать позже)

<div>
<h3>Ключевые навыки</h3>
<ul style=”list-style: none”>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Adobe Photoshop</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>ERP Systems</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>HTML5</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>JavaScript</li>
</ul>
</div>

Получается вот такой список навыков:

Ну, и последний блок – информация о нашем образовании.

Делаем точно также, как список мест работы – таблицей.

<div style=”clear: both; padding-top: 50px;”>
<h3>Высшее образование (Магистр)</h3>
<table>
<tr>
<td>2010</td>
<td>
<b>Балтийский государственный технический университет ВОЕНМЕХ им. Д.Ф. Устинова, Санкт-Петербург</b><br>
Аэрокосмический, Плазмогазодинамика и теплотехника
</td>
</tr>
</table>
</div>

Обратите внимание на то, что я задал несколько параметров стиля для нашего нового блока <div>

clear: both; -если не задать clear, то идущий выше список навыков продолжит обтекать наш блок слева, как мы и указали. clear указывает на то, как этот блок можно обтекать. left (нельзя слева), right (нельзя справа), both (нельзя нигде) – мы выбрали, что нельзя нигде. То есть этот блок обтекаться не будет. Попробуйте убрать этот параметр стиля и увидите, как навыки начинают обтекать блок с информацией об образовании.

padding-top: 50px – Я задал внутренний отступ сверху в 50px для блока с образованием. Иначе блок навыков и образование прилипали друг к другу. Могут быть padding-top (сверху), padding-right (справа), padding-bottom (снизу), padding-left (слева). Можно задавать отступы каждый по-отдельности, как я сделал. Можно задать сразу все отступы, как мы делали для навыков: просто указали padding:10px. Можно указать все отступы по порядку: padding: 1px 2px 3px 4px – то есть сверху 1px, справ 2px, снизу 3px, слева 4px. Отступы указываются по часовой стрелке, начиная сверху: верх, справа, низ, слева. Также можно задать вот так: padding: 10px 20px – это будет означать, что верх-низ по 10px, лево-право по 20px.

Ну и на последок, давайте окультурим нашу страницу – добавим общий стиль, о котором поговорим уже на следующем занятии.

В самый низ документа перед закрывающим тегом </body> добавьте следующий код:

<style>
body {
font-family: sans-serif;
padding: 50px 0;
}
div {
max-width:1200px;
margin: 0 auto;
}
a,
a:focus,
a:visited{
color: darkslategrey;
text-decoration: none;
border-bottom:1px solid transparent;
transition: all ease-in 200ms;
}
a:hover {
border-bottom-color:black;
color: black;
}
</style>

Вкратце: мы телу документа задали шрифт без засечек, вертикальный отступ в 50px, для div задали максимальную ширину 1200px и позиционировали блоки посередине экрана, чтобы они не прилипали к краям на больших экранах и не растягивались.

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

Теперь это уже похоже на вменяемую веб-страницу

Вот весь получившийся исходный код.

<!DOCTYPE html>
<html lang=”ru”>
<head>
<meta charset=”UTF-8″>
<title>Иванов Иван Иваныч. Резюме</title>
</head>
<body>
<div><img src=”img/975-200×300.jpg” alt=”Иванов Иван Иванович” style=”float: right”></div>
<div>
<h1>Иванов Иван Иванович</h1>
<p>Мужчина, 100 лет, родился 1 января 1970</p>
<p><b>Контакты</b></p>
<p><a href=”tel:+79999999999″>+7 (999) 999-99-99</a></p>
<p><a href=”mailto:blablabla@srmt22.ru”>blablabla@srmt22.ru</a></p>
<p><a href=”https://t.me/srmt22″ target=”_blank”>@srmt22 – Telegram</a> – предпочтительный способ связи</p>
</div>
<div>
<p>Москва, готов к переезду (Нидерланды, Австрия, Чехия, Люксембург, Норвегия, ОАЭ, Бельгия, Сербия, Великобритания, США, Швеция, Греция, Германия, Ирландия, Финляндия, Испания, Италия, Сингапур, Швейцария, Кипр, Канада, Португалия, Венгрия, Эквадор, Лихтенштейн, Хорватия, Словения, Уругвай, Индонезия), готов к командировкам</p>
</div>
<div>
<h2>Руководитель группы разработки PHP, NodeJs</h2>
<p>Специализации:</p>
<ul>
<li>Руководитель группы разработки</li>
<li>Технический директор (CTO)</li>
<li>Директор по информационным технологиям (CIO)</li>
<li>Менеджер продукта</li>
<li>Руководитель проектов</li>
</ul>
<p>
Занятость: проектная работа, частичная занятость, полная занятость<br>
График работы: удаленная работа, полный день
</p>
</div>
<div>
<h3>Опыт работы 15 лет 1 месяц</h3>
<table>
<tr>
<td>
<p>
Май 2021 — по настоящее время<br>
<span style=”color: gray”>1 год 3 месяца</span>
</p>
</td>
<td>
<p><b>Берг-Холдинг</b><br>
Москва, berg.ru</p>
<p>Автомобильный бизнес</p>
<ul>
<li>Автозапчасти, шины (розничная торговля)</li>
<li>Автокомпоненты, запчасти, шины (продвижение, оптовая торговля)</li>
<li>Автокомпоненты, запчасти (производство)</li>
</ul>
<h4>Руководитель группы веб-разработки</h4>
<p>Управление разработкой собственных продуктов компании (внутренние сервисы, портала).</p>

<p>Устранение проблем производительности и повышение отказоустойчивости продукта, рефакторинг, распил монолита, обертывание в Docker-контейнеры, подготовка к миграции в Kubernetes.</p>

<p>Перевод старого Legacy недокументированного кода на микросервисную архитектуру.</p>

<p>Система обслуживает более 500 поставщиков, более 100 брендов, более 31 000 000 SKU доступно для заказа, более 100 000 наименований товаров в постоянном наличии, более 20 000 клиентов.</p>

<p>Планирование спринтов и основных приоритетов разработки, участие в совете архитекторов и релизном комитете.</p>

<p><b>Стэк технологий на проекте:</b></p>
<p>
php7<br>
php8<br>
Symfony<br>
Doctrine<br>
php-unit<br>
nodejs<br>
python<br>
GoLang<br>
Docker<br>
Mysql<br>
Clickhouse<br>
Redis<br>
PostgreSql<br>
Ansible<br>
vuejs<br>
Sphynx<br>
Debian<br>
GitLab<br>
Jenkins<br>
Zabbix<br>
Prometheous<br>
Grafana<br>
RabbitMQ<br>
Kafka<br>
</p>
</td>
</tr>
<tr>
<td>
<p>
Октябрь 2019 — май 2021<br>
<span style=”color: gray”>1 год 8 месяцев</span>
</p>
</td>
<td>
<p><b>Ацифра</b><br>
Москва</p>
<h4>Ведущий разработчик, TeamLead</h4>
<p>
Развитие и поддержка проектов заказчиков, аутстаффинг.<br>
Решение технических и бизнес задач;<br>
Разработка стабильного читабельного кода;<br>
Проверка кода других разработчиков;<br>
Участие в принятии решений по архитектуре проектов;<br>
Участие в общении с бизнес-заказчиками, аналитиками, декомпозиции/постановке задач;<br>
Участие в ведении технической документации<br>
Управление командой разработчиков 10+.<br>
</p>
</td>
</tr>
<tr>
<td>
<p>
Октябрь 2013 — октябрь 2019<br>
<span style=”color: gray”>6 лет 1 месяц</span>
</p>
</td>
<td>
<p><b>MADMAKERS</b><br>
Санкт-Петербург</p>
<h4>Руководитель группы разработчиков, разработчик</h4>
<p>
Руковожу командой<br>
Принимаю непосредственное участие в разработке.<br>
<br>
Делаем серверные, десктопные, мобильные приложения под любые платформы.<br>
Создаем сайты, интернет-магазины, веб-сервисы, Rest-Api, интеграции.<br>
</p>
</td>
</tr>
</table>
</div>
<div>
<h3>Ключевые навыки</h3>
<ul style=”list-style: none”>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Adobe Photoshop</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>ERP Systems</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>HTML5</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>JavaScript</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Linux</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Mac Os</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>MySQL</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>PLM</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>SMTP/POP3/IMAP</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Unix</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>VMware</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>VmWare vSphere</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Веб-программирование</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Управление проектами</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Git</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>HTML</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>CSS</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Администрирование сетевого оборудования</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>SQL</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Teamcenter</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Node.js</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>electron js</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Nginx</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Docker</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>PHP</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Atlassian Jira</li>
<li style=”float: left; padding: 10px; margin: 5px; background: lightgray; border-radius: 5px;”>Scrum</li>
</ul>
</div>

<div style=”clear: both; padding-top: 50px;”>
<h3>Высшее образование (Магистр)</h3>
<table>
<tr>
<td>2010</td>
<td>
<b>Балтийский государственный технический университет ВОЕНМЕХ им. Д.Ф. Устинова, Санкт-Петербург</b><br>
Аэрокосмический, Плазмогазодинамика и теплотехника
</td>
</tr>
</table>
</div>

<style>
body {
font-family: sans-serif;
padding: 50px 0;
}
div {
max-width:1200px;
margin: 0 auto;
}
a,
a:focus,
a:visited{
color: darkslategrey;
text-decoration: none;
border-bottom:1px solid transparent;
transition: all ease-in 200ms;
}
a:hover {
border-bottom-color:black;
color: black;
}
</style>
</body>
</html>

Следующее занятие

На следующем занятии мы плотно поработаем над стилями нашей страницы, почистим код и приведем внешний вид страницы в приличный вид.

Самостоятельное задание

Обучение не имеет смысла, если не тыкаться и не пытаться что-то сделать самостоятельно.

Я предлагаю вам сделать 2 новых html-страницы в этом же проекте. Одна о вашем любимом городе, а вторая – о вашей любимой музыке. Не отказывайте себе в фотографиях и экспериментах со стилями. Результаты присылайте мне на @srmt22 в телеграм. Если что-то не понятно, можете писать комментарии к статье или все туда же в телеграм.

Что мы узнали на этом занятии?

<div></div> – обозначает новый блок.

<h3></h3> – заголовок 3-го уровня. Заголовки бывают разных уровней от 1 до 6.

<table></table> – таблица. В этот тег обрамляется вся таблица.

<tr></tr> – (table row) – в него обрамляется каждая строка/ряд таблицы. Этот тег должен находиться внутри <table>

<p></p> – параграф.

<b></b> – (bold) жирный текст. Кстати, есть аналогичный тег <strong> – делает фактически тоже самое.

<a></a> – это тег ссылки.

атрибут href – он обозначает браузеру, что делать при клике на ссылку в теге <a></a>

Содержимое атрибута обязательно должно быть в кавычках.

tel:+79999999999 – значение атрибута href тега <a>. tel: сообщает браузеру, что при клике на эту ссылку, он должен предложить набрать номер

mailto – значение атрибута href тега <a>. При клике на эту ссылку браузер запустит автоматически приложение для отправки почты.

target=”_blank” – атрибут тега <a> – _blank означает, что эту ссылку нужно открыть в новой вкладке браузера. Бывает _blank, _self, _top

img – (image) – тег изображения.

атрибут src тега img (от англ. Source). – Значением атрибута src является путь к файлу изображения

Атрибут style – в нем описываются параметры стиля для конкретного элемента

color:gray – параметр стиля элемента. Задает цвет шрифта элемента.

float: left; – обтекать следующие элементы слева

margin: 5px; – внешний отступ у элемента. Значение 5px – 5 пикселей будет отступ снаружи элемента.

background: lightgray; – цвет фона. Указан светло-серый.

border-radius: 5px; – скругление рамки элемента. 5px радиус скругления

clear: both; – указывает на то, как этот блок можно обтекать. left (нельзя слева), right (нельзя справа), both (нельзя нигде) – мы выбрали, что нельзя нигде. То есть этот блок обтекаться не будет.

padding-top: 50px – Внутренний отступ сверху в 50px. Могут быть padding-top (сверху), padding-right (справа), padding-bottom (снизу), padding-left (слева). Можно задавать отступы каждый по-отдельности, как я сделал. Можно задать сразу все отступы, как мы делали для навыков: просто указали padding:10px. Можно указать все отступы по порядку: padding: 1px 2px 3px 4px – то есть сверху 1px, справ 2px, снизу 3px, слева 4px. Отступы указываются по часовой стрелке, начиная сверху: верх, справа, низ, слева. Также можно задать вот так: padding: 10px 20px – это будет означать, что верх-низ по 10px, лево-право по 20px.

F1 в PhpStorm открывает справку

Код можно сворачивать, нажимая на +/- рядом с номерами строк

Спасибо большое за прочтение. Обязательно, чтобы канал развивался, ставьте лайк, подписывайтесь, делайте репосты.

Индивидуальные занятия

Кому понравилось и кто хочет большего, есть индивидуальные занятия в нашем клубе разработчиков. Пишите за подробностями в @srmt22 в телеграм.

Все уроки можно найти здесь совершенно бесплатно:

Следующий урок здесь:

Источник

In May 2009, Google introduced Rich Snippets, a small block of information displayed in Google’s search engine results to make it easier for users to decide which pages are relevant to their search. In June 2011, Google announced the creation of Schema.org, a new initiative from Google, Bing and Yahoo! that aims to improve the web by creating structured data markup schema.

This tutorial demonstrates how to create an online resume that incorporates Schema.org Microdata. The tutorial also includes instructions on how to use Authorship Markup!

Bonus Items Included!

The tutorial demo is a one page site template that you are free to use for your online resume. As a bonus, several color versions are included in the source files zip; dark green, light green, dark blue and light blue.

Please note that this is not a web design or CSS tutorial, so only the HTML5 and Schema.org Microdata markup will be covered.

Now, let’s begin!

Step 1: The CSS

Create a CSS style sheet called “style.css” and include the following code. Don’t worry; it’s fairly simple, and understanding it isn’t necessary for this tutorial.



/* Default Styles
--------------------------------------------------- */

body {
	margin: 0px;
	padding: 0px;
	background: url("../images/bg_dark_green.png");  
	background-color: inherit;
	font-size: 16px; 
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: #000;
}

a:link { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

a:visited { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

a:hover { 
	text-decoration: underline;
	color: #669933;
	font-weight: bold;
}

a:active { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

#wrapper	{
	width: 965px;
	margin: 0 auto;	
}

#content {
	background-color: #eee;
	width: 960px;
	text-align: left;
	overflow: auto;
	position: relative;
	margin: 25px 0px 25px 0px;
	border: #fff solid 2px;
}

.clear	{
	float: none;
	clear: both;
	margin: 20px 0px 20px 0px;
}


/* Header
--------------------------------------------------- */


#contact-details .header_1 {
	float: left;
	width: 350px;
	text-align: center;
	margin: 40px 0px 0px 20px;
}

#contact-details .header_1 img {
	border: #fff solid 4px;
	background: url("../images/bg_img_dark_green.png"); 
	padding: 16px;
	margin: 10px 0px 0px 0px;
}

#contact-details .header_2 {
	float: left;
	width: 570px;
	margin: 40px 0px 0px 10px;
}

#contact-details .header_2 a {
	font-weight: normal;
}

#contact-details  h1	{
	margin: 0px 0px 0px 20px;
	font-size: 52px;
	font-weight: bold;
}

#contact-details  h3	{
	margin: 0px 0px 32px 20px;
	font-size: 30px;
	font-weight: bold;
	font-style: italic;
}

#contact-details ul.info_1	{
	list-style: none;
	margin: 0px 0px 0px -12px;
	font-size: 18px;
}

#contact-details ul.info_2	{
	list-style: none;
	margin: 0px 0px 15px -12px;
	font-size: 18px;
}

#contact-details li.address	{
    background: url("../images/home.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.phone	{
    background: url("../images/phone.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.email	{
    background: url("../images/mail.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.site_url	{
    background: url("../images/computer.png") no-repeat;
	background-position: 0px 2px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.twitter	{
    background: url("../images/twitter_sm.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}



/* Main Content
--------------------------------------------------- */

h2.top	{
	margin: 0px; 
	font-size: 22px;
	font-weight: bold;
}

h2	{
	margin: 40px 0px 0px 0px; 
	font-size: 22px;
	font-weight: bold;
}


dl	{
	margin: 0px 50px 0px 0px;
}


dt	{
	float: left;
	width: 200px;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	text-align: right;
}

dd	{
	width: 620px; 
	float: right;
	margin-right: 20px;
}

dl#contact 	{
	margin: 0px;
}

dt#contact 	{
	margin: 0px;
}

dd#contact 	{
	margin: 0px;
}

p.bus1	{
	margin: 0px;
	font-weight: bold;
	color: #669933;
}

p.edu-info	{
	margin: 10px 0px 0px 0px;
	font-weight: bold;
	color: #669933;
}

p.edu-info a	{
	color: #000;
}

p.edu-info a:hover	{
	color: #669933;
}

p.time	{
	margin: 0px;
}

p.summary	{
	margin: 10px 0px 0px 0px;
}


#skills ul.list1	{	
	float: left;
	list-style: none;
	margin: 0px 0px 0px -40px;
	width: 220px;
}

#skills ul.list2	{	
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	width: 220px;
}

#skills li {
    background: url("../images/bullet_green.png") no-repeat;
	background-position: 0px 2px;
    padding: 0px 0px 0px 25px;
}

abbr	{
	border-width: 0px;
}


/* Footer
--------------------------------------------------- */

#footer	{
	margin: 60px 40px 0px 40px;
}

#footer	img {
	border: 0px;
}

#footer .footer_content	{
	width: 700px;
	overflow: auto;
	margin: auto;
	border: #fff solid 2px;
	background-color: #dcdcdc;
}

#footer ul.icons_1	{
	float: left;
	width: 525px;
	margin: 15px 10px 10px 15px;
	padding: 0px;
}

#footer ul.icons_2	{
	float: right;
	width: 100px;
	margin: 10px 20px 10px 10px;
	padding: 0px;
}

#footer .icons_1 li, #footer .icons_2 li { 
	margin: 0px 0px 0px 7px; 
	padding: 0px; 
	list-style-type: none; 
	display: inline; 
}

#footer a	{
	color: #000;
}

#footer a:hover	{
	color: #669933;
}

#footer	.credits {
	float: none;
	clear: both;
	margin: 10px 0px 20px 0px;
	font-size: 12px;
	text-align: center;
}

#footer	.credits a	{
	font-weight: normal;
}

Step 2: The Markup (Without Schema.org Microdata Included)

Next, we need an .html. This is a basic layout that we’re all likely familiar with.



<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<meta charset="utf-8">

<title>Online Resume of Your Name</title>

<!-- Meta -->
<meta name="description" content="A few lines about yourself">
<meta name="keywords" content="web,developer,designer,resume" />
<meta name="author" content="Your Name">

<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Content Area -->
<div id="content">

<!-- Begin Header -->
<header>

<!-- Begin Contact Section -->
<section id="contact-details">

<!-- Begin Profile Image Section -->
<div class="header_1">
<img src="images/profile.jpg" width="250" height="250" alt="Your Name" />
</div>
<!-- End Profile Image Section -->

<!-- Begin Profile Information Section -->
<div class="header_2">

<h1><span>Your Name</span></h1>
<h3>Web Developer / Designer</h3>

<ul class="info_1">
<li class="address">555 Street Address, Toledo, Ohio, 43606  U.S.A.</li>
</ul>

<ul class="info_2">
<li class="phone">(000) 000-0000</li>
<li class="email"><a href="mailto:your-email@gmail.com">your-email@gmail.com</a></li>
<li class="site_url"><a href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li>
<li class="twitter"><a href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li>
</ul>

</div>
<!-- End Profile Information Section -->

</section>
<!-- End Contact Section -->

</header>
<!-- End Header -->

<div class="clear">&nbsp;</div>

<!-- Begin Profile Section -->
<dl>
<dt>Profile:</dt>
<dd>

<section class="summary">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
</section>

</dd>
</dl>
<!-- End Profile Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Skills Section -->

<dl>
<dt>Skills:</dt>
<dd>

<section id="skills">
<ul class="list1">
<li>XHTML</li>
<li>HTML5</li>
<li>PHP</li>
<li>JavaScript</li>
<li>Magento</li>
<li>WordPress</li>
</ul>
<ul class="list2">
<li>HTML</li>
<li>CSS</li>
<li>MySQL</li>
<li>jQuery</li>
<li>CMS Made Simple</li>
<li>Photoshop</li>
</ul>
</section>

</dd>
</dl>

<!-- End Skills Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Experience Section -->
<dl>
<dt>Experience:</dt>

<dd>

<section id="experience">

<!-- Position #1 -->

<h2 class="top">Web Developer / Designer</h2>
<p class="bus1">Company Name 1</p>
<p class="time">February 2009 - Present</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>


<!-- Position #2 -->

<h2>Web Developer / Programmer</h2>
<p class="bus1">Company Name 2</p>
<p class="time">November 2007 - February 2009</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>


<!-- Position #3 -->

<h2>Web Developer / Programmer</h2>
<p class="bus1">Company Name 3</p>
<p class="time">March 2006 - November 2007</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

</section>

</dd>
</dl>
<!-- End Experience Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Publications Section -->
<dl>
<dt>Publications:</dt>

<dd>

<section id="publications">

<a href="https://code.tutsplus.com/tutorials/how-to-create-an-advanced-twitter-widget--net-21497" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a>, <a href="https://code.tutsplus.com" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11

</section>

</dd>
</dl>
<!-- End Publications Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Education Section -->
<dl>
<dt>Education:</dt>
<dd>

<section id="education">

<p class="bus1">University of Toledo</p>

2801 Bancroft Street
<br />
Toledo, Ohio, 43606  U.S.A.

<p class="summary">Web Design</p>
<p class="time">2003 - 2005</p>

<p class="edu-info">
<a href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a>
</p>

</section>

</dd>
</dl>
<!-- End Education Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Footer -->
<footer id="footer">

<!-- Begin Footer Content -->
<div class="footer_content">

<!-- Begin Schema Person -->

<ul class="icons_1">
<li><a href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li>
<li><a href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li>
<li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li>
<li><a href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li>
<li><a href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li>
<li><a href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul class="icons_2">
<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>

<!-- End Schema Person -->

</div>
<!-- End Footer Content -->

<div class="credits">
Social Icons by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons" target="_blank" title="Paul Robert Lloyd">Paul Robert Lloyd</a>, Profile &amp; Download Icons by <a href="http://dryicons.com/" target="_blank" title="DryIcons">DryIcons</a>, Phone Icon by <a href="http://www.comfi.com/telecom-icons/" target="_blank" title="ComFi Telecom">ComFi Telecom</a>, Profile Image User Symbol by <a href="http://thenounproject.com/" target="_blank" title="The Noun Project">The Noun Project</a>.
<br />
All used under a Creative Commons Attribution-ShareAlike license: <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank" title="Creative Commons Attribution-ShareAlike license">http://creativecommons.org/licenses/by-sa/3.0/</a>
</div>

</footer>
<!-- End Footer -->

</div>
<!-- End Content -->

</div>
<!-- End Wrapper -->

</body>
</html>

A Few Notes About the Markup

HTML5 Shiv

Because Schema.org Microdata is based on the HTML5 microdata specification, HTML5 markup is being used to create the one page resume site template. Unfortunately, older web browsers like IE7 and IE8 do not recognize certain HTML5 elements. Pages written using HTML5 will not render correctly in these older browsers.

Here is a screenshot of the online resume demo when viewed in (IE8 Click on image to see full image):

To solve the problem with these older IE browser versions, the below code has been added between

tags (just below the CSS Stylesheet):

1
2	<!--[if lt IE 9]>
3	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
4	<![endif]-->

This code is an HTML5 JavaScript shim for IE to recognise and style the HTML5 elements.

Note: An HTML5 JavaScript shim is not required in IE9+ and other modern browsers that support HTML5.

Definition List

Definition lists, <dd></dd> were used in the markup instead of unordered lists. THis is due to the fact that it makes more sense, when considering how each item has a title and a description.

Section vs Article

There seems to be some confusion regarding HTML5 section and article elements. The section element was used in the markup because none of the sections of the resume are considered to be standalone content.
The HTML5 article element is used for standalone content that would most likely be syndicated like a blog post or news article. This article does a really good job explaining the difference between HTML5 article and section elements.

Step 3: Add Schema.org Microdata – Person and PostalAddress

The first types of schemas that we are going to add to the markup is Person and PostalAddress.

`Itemscope` Element and `Itemtype` Attribute

An itemscope element is added to <div></div>tags that are placed around the content that contains the information related to the Schema, like this:


<div itemscope itemtype="http://schema.org/Person">

Content that contains information about a Person

</div>

The itemscope element and itemtype attribute for the Person Schema will be placed in both the Contact and Social Media Links sections of the resume web page, like so:


<!-- Begin Contact Section -->
<section id="contact-details">
<div itemscope itemtype="http://schema.org/Person">

Rest of Code Block Here

</div>
</section>
<!-- End Contact Section -->


<!-- Begin Social Media and Download Links -->
<div itemscope itemtype="http://schema.org/Person">

Rest of Code Block Here

</div>
<!-- End Social Media and Download Links -->

The itemscope element and itemtype attribute for the PostalAddress Schema is nested within the Person Schema and is placed around the unordered list <ul></ul>containing the address information like this:


<!-- Begin PostalAddress Schema -->
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<ul class="info_1">
<li class="address"><span itemprop="streetAddress">555 Street Address</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li>
</ul>
</div>
<!-- End PostalAddress Schema -->

`Itemprop` Attributes

Itemprop attributes need to be added wherever appropriate using span tags so that additional information is provided to search engines about our web page. Below are the attributes we will be using from these schemas:

Person Schema

itemprop="image"
itemprop="name"
itemprop="jobTitle"
itemprop="telephone"
itemprop="email"
itemprop="url"

PostalAddress Schema

itemprop="streetAddress"
itemprop="addressLocality"
itemprop="addressRegion"
itemprop="postalCode"
itemprop="addressCountry"

Final Markup for the Contact and Social Media Links Sections


<!-- Begin Contact Section -->
<section id="contact-details">
<div itemscope itemtype="http://schema.org/Person">

<!-- Begin Profile Image Section -->
<div class="header_1">
<img src="images/profile.jpg" itemprop="image" width="250" height="250" alt="Your Name" />
</div>
<!-- End Profile Image Section -->

<!-- Begin Profile Information Section -->
<div class="header_2">

<h1><span itemprop="name">Your Name</span></h1>
<h3><span itemprop="jobTitle">Web Developer / Designer</span></h3>

<!-- Begin PostalAddress Schema -->
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<ul class="info_1">
<li class="address"><span itemprop="streetAddress">555 Street Address</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li>
</ul>
</div>
<!-- End PostalAddress Schema -->

<ul class="info_2">
<li class="phone"><span itemprop="telephone">(000) 000-0000</span></li>
<li class="email"><a href="mailto:your-email@gmail.com" itemprop="email">your-email@gmail.com</a></li>
<li class="site_url"><a rel="me" itemprop="url" href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li>
<li class="twitter"><a rel="me" itemprop="url" href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li>
</ul>

</div>
<!-- End Profile Information Section -->

</div>
</section>
<!-- End Contact Section -->


<!-- Begin Social Media and Download Links -->
<div itemscope itemtype="http://schema.org/Person">

<ul class="icons_1">
<li><a rel="author" itemprop="url" href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li>
<li><a rel="me" itemprop="url" href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li>
<li><a rel="me" itemprop="url" href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul class="icons_2">
<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>

</div>
<!-- End Social Media and Download Links -->

Step 4: Add Schema.org Microdata – Item List

The next schema we are going to add to the markup is ItemList.

`Itemscope` Element and `Itemtype` Attribute

The itemscope element and itemtype attribute for the ItemList Schema will be placed in the Skills Section like this:


<!-- Begin Skills Section -->
<div itemscope itemtype="http://schema.org/ItemList">

Rest of Code Block Here

</div>
<!-- End Skills Section -->

`Itemprop` Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:

`ItemList` Schema

itemprop="itemListElement"

Final Markup for the Skills Section


<!-- Begin Skills Section -->
<div itemscope itemtype="http://schema.org/ItemList">

<dl>
<dt itemprop="name">Skills:</dt>
<dd>

<section id="skills">
<ul class="list1">
<li itemprop="itemListElement">XHTML</li>
<li itemprop="itemListElement">HTML5</li>
<li itemprop="itemListElement">PHP</li>
<li itemprop="itemListElement">JavaScript</li>
<li itemprop="itemListElement">Magento</li>
<li itemprop="itemListElement">WordPress</li>
</ul>
<ul class="list2">
<li itemprop="itemListElement">HTML</li>
<li itemprop="itemListElement">CSS</li>
<li itemprop="itemListElement">MySQL</li>
<li itemprop="itemListElement">jQuery</li>
<li itemprop="itemListElement">CMS Made Simple</li>
<li itemprop="itemListElement">Photoshop</li>
</ul>
</section>

</dd>
</dl>

</div>
<!-- End Skills Section -->

Step 5: Add Schema.org Microdata – Organization

Next, the Organization schema is going to be added to the markup.

`Itemscope` Element and `Itemtype` Attribute

The itemscope element and itemtype attribute for the Organization Schema will be placed around each “Position” listed in the “Experience” section, like so:


<!-- Position #1 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Block Here

</div>

<!-- Position #2 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Block Here

</div>

<!-- Position #3 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Block Here

</div>

`Itemprop` Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:

Organization Schema

itemprop="jobTitle"
itemprop="name"
itemprop="description"

Final Markup for the Experience Section


<section id="experience">

<!-- Position #1 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2 class="top"><span itemprop="jobTitle">Web Developer / Designer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 1</span></p>
<p class="time">February 2009 - Present</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>

</div>

<!-- Position #2 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 2</span></p>
<p class="time">November 2007 - February 2009</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>

</div>

<!-- Position #3 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 3</span></p>
<p class="time">March 2006 - November 2007</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

</div>

</section>

Step 6: Add Schema.org Microdata – Article

Next the Article schema is going to be added to the markup.

`Itemscope` Element and `Itemtype` Attribute for Article

The itemscope element and itemtype attribute for the Article Schema will be placed in the “Article” listed in the Publications Section like this:


<section id="publications">
<div itemscope itemtype="http://schema.org/Article">

Rest of Code Block Here

</div>
</section>

`Itemprop` Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from this schema:

Article Schema

itemprop="name"
itemprop="url"

Final Markup for the Publications Section


<section id="publications">
<div itemscope itemtype="http://schema.org/Article"><span itemprop="name">
<a itemprop="url" href="https://code.tutsplus.com/tutorials/how-to-create-an-advanced-twitter-widget--net-21497" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a></span>, <a href="https://code.tutsplus.com" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11
</div>
</section>

Step 7: Add Schema.org Microdata – EducationalOrganization and PostalAddress

Next the EducationalOrganization and PostalAddress schemas are going to be added to the markup.

`Itemscope` Element and `Itemtype` Attribute for EducationalOrganization

The itemscope element and itemtype attribute for the EducationalOrganization Schema will be placed in the Education Section like this:


<section id="education">
<div itemscope itemtype="http://schema.org/EducationalOrganization">

Rest of Code Block Here

</div>
</section>

`Itemscope` Element and `Itemtype` Attribute for PostalAddress

The itemscope element and itemtype attribute for the PostalAddress Schema is nested within the EducationalOrganization Schema and is placed around the code containing the address information in the Education section like this:


<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">2801 Bancroft Street</span>
<br />
<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
</div>

`Itemprop` Attributes

Add the “itemprop” attribute wherever appropriate using <span></span>tags. Below are the attributes we will be using from these schemas:

EducationalOrganization Schema

itemprop="name"
itemprop="url"

PostalAddress Schema

itemprop="streetAddress"
itemprop="addressLocality"
itemprop="addressRegion"
itemprop="postalCode"
itemprop="addressCountry"

Final Markup for the Education Section


<section id="education">
<div itemscope itemtype="http://schema.org/EducationalOrganization">

<p class="bus1"><span itemprop="name">University of Toledo</span></p>

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">2801 Bancroft Street</span>
<br />
<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
</div>

<p class="summary"><span itemprop="name">Web Design</span></p>
<p class="time">2003 - 2005</p>

<p class="edu-info">
<a itemprop="url" href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a>
</p>

</div>
</section>

About Authorship Markup

Image shows Authorship Markup (John Resig) displayed in Google search results.

In June 2011, Google began to support “Authorship Markup”. Through the use of markup, such as rel="author" and rel="me", search engines can identify content created by the same author across the web. Using Authorship Markup, a multi-authored website can link all articles and posts written by each author to their own specific “author page”.

Individual articles and posts of a multi-authored website need to link to the appropriate author page using rel=”author” tag. If the author page also includes a link to the author’s Google Profile using the rel=”me” tag, then the author information may appear in search results.

To help users discover quality content, Google is piloting the display of author information in search engine results. This feature is being rolled out gradually and may become a very important part of search engine results and rankings.

Rel Tags

Both the Contact and Social Media Links sections of the one page resume site template contain URLs linking to a primary website and social media pages. The “rel” attribute needs to be added to the links of these sections so that Authorship Markup can be implemented. Authorship Markup allows search engines to identify content created by the same author across the web.

There are two specific rel tags used for Authorship markup:

rel="me"
rel="author"

Most of the links included in the resume web page point to sites that are about the same person. So the rel=”me” tag has been added. For the Google Profile link, the rel=”author” tag has been added. Depending on where you post your online resume, you may need to use the rel=”me” tag for the Google Profile link instead.

Step 8: Create a Google Profile

If you want to start identifying your original content across the web using Authorship Markup, you first need to create a Google Profile.

If you already have a Google Profile page, then you should update your profile information accordingly (add a picture of yourself, information about yourself, occupation, etc.)

You also need to make sure there is a +1 tab displayed on the page.

If your Google profile includes a good, clear head shot of yourself, it will be eligible to appear as a thumbnail in search results.

Step 9: Link Web Page(s) to Your Google Profile

According to Google, to establish authorship of a web page, you need to do two things:

Link that web page to your Google Profile
Update your Google Profile with a link back to the home page of the site the web page is on.

You can link your content to your Google Profile using a text link:

1
2	<a href="[https://plus.google.com/your_profile]?rel=me">Google+</a>

or by using the Google Profile Button code:

1
2	<a rel="me" href="https://profiles.google.com/your_profile">
3	<img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32">
4	</a>

Google recently made changes to their authorship markup instructions which affect the use of rel="author" and rel="me" tags. The new instructions say to use rel="author" for both the text and profile button links. However, the rel="me" tag needs to be used instead of rel="author". See screenshot below.

Screenshot of “Error: Author profile page does not have a rel=me link to a Google Profile”

Using John Resig as an example:

On the About Page of John Resig’s primary website he linked to his Google Profile using rel=”me”
In John Resig’s Google Plus Profile he linked to the Home Page and About Page of his primary website

Step 10: Complete Google Authorship Form (Important!)

One you have added the Schema.org microdata and completed steps 8 and 9, Complete and submit the Google Authorship Request Form.

Your Authorship Markup may not work correctly until the Google Authorship Form is completed and submitted.

Step 11: Test Microdata Markup Using Rich Snippets Testing Tool

Click on image to see complete testing results

You can make sure that Google can correctly parse and display your microdata markup in search results by checking your web page using the Google Rich Snippets Testing Tool. This Testing Tool can check several types of structured data markup including Microdata, Micro formats and RDFa.

Note: The Google Rich Snippets Testing Tool is in Beta and can have unexpected results. The results shown in the full size screenshot include an error “Warning: Missing required field fn.” Schema.org does not use the “fn” tag, however the tag is used with Microformats. This is most likely a glitch.

All Done!

You have now created a nice looking online resume using HTML5 and Schema.org Microdata, which provides information about you that may be displayed in search engine results. Additionally, by using Authorship Markup, you can help search engines identify all of your original content across the web!

Have any questions? Let us know in the comments and thank you so much for reading!

Did you find this post useful?

I’m a highly driven, passionate Web Developer / Designer that builds websites using the latest web technologies and standards.

I’ve been working in the Web Development / Design Industry for over 7 years and for the past few years I’ve been a Self-Employed Web Developer / Designer based in Toledo, Ohio.

Источник

Standard word processors don’t hold a candle to HTML and CSS when it comes to controlling the finer details of styling and layout. I’ve had difficulty fine-tuning my resume in a word processor, so I started using HTML and CSS to create and maintain my resume instead. I’ve found it to work a lot better overall, but there are a few helpful things to know before beginning the transition.

Getting Started

First, a disclaimer: this guide is not meant to provide resume templates or styling advice. Rather, I’m detailing a process for handling a resume print layout in HTML/CSS. This includes setup, print styling, and a final PDF export.

Wireframe

It’s much easier to write HTML and CSS when working from a mockup or wireframe. I used an old resume from Word as my baseline, but you could just as easily mock something up in a free tool like Adobe XD or Figma (Figma even supports print sizes by default).

If you already have content from a past resume ready to go (like I did), you can break out your design into sections and add the details later:

Wireframe of resume built in Figma

We don’t have to adhere to the exact styling of a template or mockup, but it can be useful for organizing the overall layout.

Setting up a “Canvas”

To better visualize your resume as you code, I’d recommend creating a “canvas” – an HTML container with the same proportions as your resume. By placing this container on an empty page, you’ll get a view very similar to a typical word processor:

We can actually use physical measurement units in CSS (even though they end up mapping to pixels anyway), so it was quite easy to set this canvas up:

.canvas-container {
  margin: 0 auto; /* for centering, feel free to use flexbox or some other method*/
  box-sizing: border-box;
  padding: 0.5in; /* controls margins */
  width: 8.5in;
  height: 11in;
  background-color: white;
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.7);
}

Enter fullscreen mode

Exit fullscreen mode

Here’s what that might look like on a barebones page (use 0.5x or 0.25x zoom for the best effect):

Use your canvas container to set default styles on your entire page, similar to defaults in a word processor. Other good properties to consider adding here are line-height and font properties like font-size and font-family.

Layout and Content

Using your wireframe for reference, map out how you will divide your canvas space into sections of content. This is where tools like Flexbox and Grid will come in handy if your layout is more complex.

My setup was fairly straightforward: each area of my resume was broken into a section element. Whenever I had content spanning two columns, I used a grid to split them up:

.multicolumn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

Enter fullscreen mode

Exit fullscreen mode

Here’s what that looks like in practice:

In my resume, I only needed a multicolumn layout for two sections, Experience and Certifications / Skills. I hid the content, but here’s how those grids are situated on my current layout:

One added bonus of using something like grid is maintainability; I could very easily add another instance of work experience and have the grid automatically adjust without destroying the rest of my layout:

Apart from using grid in those two instances, everything else fit nicely into sections using normal flow. Feel free to use whatever works best for you.

Exporting

Most companies and recruiters won’t accept an HTML page as a valid resume. Therefore, you’ll want to export your page as a PDF. Browsers can do this readily via the Print command, but we’ll need to do some adjustments to our CSS beforehand.

Print Styles

We’ll be taking advantage of the print media query to style our exported page. It allows us to apply styles specifically when a browser attempts to print.

If you followed my advice of building everything inside a container, this should be a straightforward process. For simplicity, I made the entire html element’s width and height match the print size of my container. You may also need to remove any margins (and box-shadows!) for elements between the body and your container, otherwise the added space might cause an extra page to render:

@media print {
  html {
    height: 11in;
    width: 8.5in;
    overflow: hidden;
  }

  body {
    margin: 0;
  }

  .canvas-container {
    width: 100%;
    box-shadow: none;
  }
}

Enter fullscreen mode

Exit fullscreen mode

Generating a PDF

With browser styles in place, we can use the browser’s Print dialog to save our page as a PDF.

While I love Firefox, Blink’s Print functionality tends to do a much better job of accurately exporting a page. I used Chrome for my final export – as detailed in the following instructions.

After opening the print dialog, set your Destination to “Save as PDF”. Additionally, you’ll want to adjust a few settings before saving the final result. Expand the “More settings” option and check the following:

Color is enabled if you are using anything other than shades of gray
Paper size is set to your preferred size (I used Letter throughout this guide)
Margins should be set to None
Scale should be set to 100
Background Graphics are enabled

Example of Chrome’s print dialog with proper settings for PDF export

Go ahead and save the page. With that, you should have both an easily maintainable HTML resume and a PDF export to use for actual applications.

Conclusion

I hope this guide was a helpful starting point in how to create a resume in HTML and CSS.

If you’re curious for what my final result was, the source code for my current implementation is available here.

If you’ve gone through this process or have any additional tips for handling a print layout in HTML/CSS, please let me know in the comments below.

This post originally appeared on my personal blog, with a few modifications here for brevity.

Источник

Почти каждый в определенный момент нуждается в создании резюме. Когда работаешь фрилансером и соперничаешь за новые проекты с другими, возникает вопрос о том, как лучше всего кратко и быстро предоставить сведения о своих навыках и опыте потенциальному клиенту. Что может быть лучше, чем онлайн резюме? В данном уроке показано как построить адаптивное одностраничное резюме. Код будем писать в HTML5/CSS3, чтобы страница должным образом отображалась на экранах с различным расширением.

Демо Загрузить исходные материалы

Построение документа

Начинаем создание веб-страницы с документа HTML5 и стандартных мета элементов. Однако для того, чтобы сделать этот макет адаптивным, нам понадобится установить некоторые дополнительные элементы. Большинство из них это типичные мета-теги, которые будут поддерживаться во всех современных браузерах.

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Online Responsive Resume Demo</title>
  <meta name="author" content="Jake Rocheleau">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Simonetta:400,900|Balthazar">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" type="text/css" href="responsive.css">
  <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  <![endif]-->
</head>

Мета-тег viewport – это тег, который крайне важен для того, чтобы отзывчивая страница могла работать на смартфонах. Мы сбрасываем масштаб макета к 1:1. Отметим также, что был включен внешний стилевой файл для Google Web Fonts. Используем два пользовательских шрифта “Simonetta” и “Balthazar”. Уникальные шрифты, конечно, захватывают внимание посетителя и гармонично сочетаются в одностраничном дизайне. Также было установлено одно маленькое условие IE, которое включает открытый скрипт для прежних браузеров. Internet Explorer 8 и старее испытывают затруднения в отображении HTML5 элементов и CSS3 свойств, но благодаря некоторым умным разработчикам эти затруднения можно обойти, используя JavaScript.

Главные блоки с контентом

Весь документ состоит из множества различных блоков внутри. Шапка <header> включает фотографию, имя, адрес e-mail и другие важные данные. После этого каждый блок был разбит на <section> для остального контента.

Когда вы будете менять размер страницы, эти блочные элементы будут изящно падать друг под друга.

<header class="clearfix">
	<div id="info">
		<h1><span itemprop="name">Jake Rocheleau</span></h1>
		<h3><span itemprop="jobTitle">Freelance Writer &amp; Web Developer</span></h3>
		<small itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
			<span itemprop="addressLocality">Hudson</span>,
			<span itemprop="addressRegion">Massachusetts</span>,
			<span itemprop="addressCountry">USA</span>
		</small>
		<small><span itemprop="email">jakerocheleau@gmail.com</span></small>
		<small><a href="http://byjakewithlove.com/" itemprop="url">My Portfolio</a> &bull; <a href="http://twitter.com/jakerocheleau" itemprop="url">@jakerocheleau</a></small>
	</div>
	<div id="photo">
		<img src="images/jake-rocheleau-250.jpg" alt="Jake Rocheleau resume photo avatar" itemprop="image" />
	</div>
</header>

Перед тем, как мы перейдем к деталям CSS, хочется больше рассказать про использование микроданных. Если приглядеться, то есть атрибуты внутри многих элементов с именами itemtype, itemscope, и itemprop. Они все касаются проекта Schmea project, который предлагает структуру данных для сети.

Форматирование полезных микроданных

Все главные поисковые системы, включая Google, Yahoo!, и Bing приняли Schema в качестве лучшего синтаксиса для повышения данных. Маркировка деталей помогает поисковым системам выводить связанные результаты онлайн для вас. Давайте разберемся, как установить их.

<div id="w" itemscope itemtype="http://schema.org/Person">

Атрибут itemscope применен для любого блока, который держит информацию на пункте схемы. Это всегда сопровождается атрибутом itemtype, который является сценарием описания персоны. В этом блоке обертки можно маркировать любое содержание при помощи itemprop наряду с любой из деталей, которые перечислены на странице документации.

Рекомендованный метод должен обернуть ваш контент внутри тега span вместо того, чтобы добавлять его прямо к элементу. Когда вы маркируете что-либо, например, фотографию, вы должны прикреплять itemprop прямо к элементу img. Но в противном случае, вы будете иметь гораздо более чистую разметку, обернув свои данные в span теги.

Сколько это слишком много?

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

Стоит непредвзято взглянуть на то, как вы можете использовать микроданные в аспектах вашего собственного сайта. Если вы проведете 10-15 минут, просматривая Schema, вы поймете, что она намного проще, чем вы думаете. Мы можем увидеть это на двух примерах из резюме демо версии:

<section id="skills" class="clearfix" itemscope itemtype="http://schema.org/ItemList">

	<h2 itemprop="name">Skillset</h2>
	<section id="skills-left">
	<h4 itemprop="about">Development</h4>
		<ul>
			<li itemprop="itemListElement">HTML5/CSS3</li>
			<li itemprop="itemListElement">JavaScript &amp; jQuery</li>
			<li itemprop="itemListElement">PHP Backend</li>
			<li itemprop="itemListElement">SQL Databases</li>
			<li itemprop="itemListElement">WordPress</li>
			<li itemprop="itemListElement">Pligg CMS</li>
			<li itemprop="itemListElement">Some Objective-C</li>
		</ul>
	</section>
	<section id="skills-right">
	<h4 itemprop="about">Software</h4>
		<ul>
			<li itemprop="itemListElement">Adobe Photoshop</li>
			<li itemprop="itemListElement">Adobe Dreamweaver</li>
			<li itemprop="itemListElement">MS Office 2007-2010</li>
			<li itemprop="itemListElement">cPanel &amp; phpMyAdmin</li>
			<li itemprop="itemListElement">Xcode 4</li>
		</ul>
	</section>
</section>

Когда мы перечисляем навыки и умения, установим новый блок, определяющий ItemList schema. Значение здесь имеет то, что Google может понять, что каждый itemListElement связан друг с другом. В этом случае у нас есть список языков и программ, с которыми известно как работать.

<section id="articles">
	<h2>Recent Articles</h2>
	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/css-javascript-fallback-methods/" itemprop="url" title="10 Useful Fallback Methods For CSS And Javascript">10 Useful Fallback Methods For CSS And Javascript</a></span> &bull; Published in <span itemprop="datePublished">July 2012</span></p>
	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/wordpress-url-rewrite/" itemprop="url"

 title="Rewriting URLs In WordPress: Tips And Plugins">Rewriting URLs In WordPress: Tips And Plugins</a></span> &bull; Published in <span itemprop="datePublished">July 2012</span></p>

	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/jpeg-optimization-guide/" itemprop="url" title="JPEG Optimization For The Web – Ultimate Guide">JPEG Optimization For The Web – Ultimate Guide</a></span> &bull; Published in <span itemprop="datePublished">July 2012</span></p>

	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/design-perfect-newsletter/" itemprop="url" title="9 Tricks To Design The Perfect HTML Newsletter">9 Tricks To Design The Perfect HTML Newsletter</a></span> &bull; Published in <span itemprop="datePublished">May 2012</span></p>
	<p itemscope itemtype="http://schema.org/Article">
	<span itemprop="name">
	<a href="http://www.hongkiat.com/blog/google-website-optimizer-ab-testing-guide/" itemprop="url" title="Guide To A/B Testing With Google Website Optimizer">Guide To A/B Testing With Google Website Optimizer</a></span> &bull; Published in <span itemprop="datePublished">March 2012</span></p>
</section>

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

Относительные CSS стили

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

* { margin: 0; padding: 0; }
html { height: 101%; }
body { background: #f2f2f2 url('http://media02.hongkiat.com/responsive-resume/bg-tile.png'); font-size: 62.5%; padding-bottom: 65px; }
h1 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #454545; font-size: 3.6em; margin-bottom: 6px; }
h2 { font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; color: #484848; font-size: 2.5em; margin-bottom: 10px; text-decoration: underline; }
h3 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #777; font-weight: normal; font-size: 1.8em; margin-bottom: 10px; }
h4 { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; color: #656565; font-weight: bold; font-size: 1.75em; margin-bottom: 4px; }

 
p { font-family: "Balthazar", "Droid Serif", Times New Roman, serif; color: #565656; font-size: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; }

small { font-family: "Balthazar", serif; color: #656565; font-size: 1.6em; display: block; margin-bottom: 6px; }
ul { display: block; list-style: none; }
ul li { padding-left: 45px; list-style-type: none; vertical-align: top; background: url('http://media02.hongkiat.com/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; color: #666; font-size: 1.6em; line-height: 2.3em; }

img { border: 0; max-width: 100%; }
a { color: #5582d6; text-decoration: none; }
a:hover { text-decoration: underline; }

Ничего интересного, за исключением некоторых пользовательских шрифтов.

/** @group core layout **/
#w { margin: 0px 50px; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 900px; border-bottom-rightright-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-rightright-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px; }

header { width: 100%; }
/** @group personal settings **/
#info { float: left; margin-bottom: 12px; }
#photo { float: rightright; }
#photo img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}

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

Адаптивный дизайн

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

@media only screen and (max-width: 740px) { 
    h1 { font-size: 4.5em; }
    h3 { font-size: 2.2em; }
    h2 { display: block; text-align: center; }
    #info { float: none; display: block; text-align: center; }
    #photo {
        float: none;
        display: block;
        text-align: center;
    }
    #w { padding: 20px 15px; }
    p { padding: 0; }
}

Первоначальный размер в 740px. Фотография будет конфликтовать с нашим заголовком. Помещаем оба элемента в центр всего макета. Увеличим также размер текста заголовка.

Когда окно становится меньше, удаляем некоторые внутренние отступы блока обертки и параграфы. Следующее, что нам нужно, это сместить элементы списка UL — навыки. Убираем две колонки и получаются плавающие друг за другом пункты.

@media only screen and (max-width: 570px) { 
    ul li {
        display: inline-block;
        padding-left: 15px;
        width: 140px;
        background-position: -5px 0px;
        margin-right: 6px;
        line-height: 1.7em;
    }
    #skills-left, skills-rightright { margin-bottom: 15px; }
}

Также необходимо изменить многие текстовые свойства по умолчанию. Установим фиксированную ширину и сетка смотрится достаточно органично до следующей точки.

Кодирование для смартфонов

Последние три точки маленькие, но очень важные. При переключении между режимами пейзажа и портрета iPhone будет изменять размеры любого мобильного браузера. Это же относится и к большинству устройств Android и Windows Mobile Phones.

@media only screen and (max-width: 480px) { 
    ul li { width: 120px; }
    #w { margin: 0 20px; }
}

@media only screen and (max-width: 320px) { 
    #w { margin: 0 10px; }
}  
/** iPhone only **/
@media screen and (max-device-width: 480px) { 
    ul li { width: 150px; }
}

При достижении точки в 480px или меньше будут удалены внутренние отступы обертки и изменится размер элементов списка. В точке 320px удаляем отступы вокруг блока. Вы все еще можете увидеть фон из текстуры, но это не очень важно в данной точке.

Последнее — используем max-device-width — 480px. В данном случае делаем шире список, чтобы элементы списка заполняли весь экран.

Заключительное слово

Работая в сети Internet было бы полезно иметь портфолио онлайн, откуда потенциальный клиент может перейти на одностаничное резюме и ознакомиться со всеми навыками и способностями автора. Это показывает вас с серьезной стороны и раскрывает ваш профессионализм в веб-дизайне.

Надеемся, что данный урок вам понравился и пригодится в дальнейшем. Если вас заинтересовал материал, скачивайте код и делитесь своими мыслями о статье.

Перевод — Дежурка.

Автор — Jake Rocheleau.

Читайте также: Создание простой галереи изображений Lightbox на jQuery.

Источник

Free Coding Ebook 👉

Get Now

Hello Coder, Welcome to Codewithrandom Blog. In this blog, I’ll show you how to create a Resume/CV Website Using HTML and CSS. We add an Image and all the necessary information that we have in our Resume/CV, So Let’s Create it.

Responsive Resume/CV Website Using HTML & CSS

Everything will be coded using HTML5 and CSS3 to function correctly across a range of screen resolutions.

Code by	Dudley Storey
Project Download	Link Available below
Language used	HTML and CSS
External link / Dependencies	No
Responsive	Yes

Resume Website Table

The majority of people in the business segment have at some point written a resume. As a freelancer, you are constantly competing for new projects. Because of this ephemeral work cycle, it is beneficial to give prospective clients a quick overview of your prior experience.

50+ HTML, CSS and JavaScript Projects With Source Code

An official document known as a resume, sometimes known as a CV outside of the United States, gives a summary of your professional qualities, including your relevant work experience, abilities, education, and noteworthy accomplishments. A resume helps you highlight your skills and persuade potential employers that you are competent and employable. It is typically combined with a cover letter.

I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

Step1: Adding HTML Markup

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Resume</title>
</head>

<body>
    <div id="resume">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/james-moriarty.jpg" alt="James Moriarty">
        <h1>James Moriarty</h1>
        <p>Cell: <a href=#>555-666-7777</a>
        <p>Web: <a href=#>moriarty.com</a>
        <p>Email: <a href=#>napoleon@crime.com</a>
        <p id="objective">I am a reserved but ambitious young professional seeking a career that fits my professional
            skills, personality, and murderous tendencies. My good birth, excellent education and phenomenal
            mathematical faculty have allowed me to advance the prospects of several criminal enterprises.
        <dl>
            <dt>Education
            <dd>
                <h2>Oxford University</h2>
                <p><strong>Major:</strong> Applied Mathematics<br />
                    <strong>Minor:</strong> Romance Languages
                </p>
        </dl>
        <dl>
            <dt>Skills
            <dd>
                <h2>Office Skills</h2>
                <p>Office and records management, database administration, event organization, customer support, travel
                    coordination
                <h2>Computer skills</h2>
                <p>Microsoft productivity software (Word, Excel, etc), Adobe Creative Suite, Windows
        </dl>
        <dl>
            <dt>Experience
            <dd>
                <h2>Consulting Criminal<span>London 1892 – present</span></h2>
                <ul>
                    <li>Development within the criminal underworld
                    <li>Conducted negotiations with several rogue governments
                </ul>
                <h2>The Coldstream Guards<span>Army Coach, London 1889 – 1888</span></h2>
                <ul>
                    <li>Recruiting, training and terrorizing young men.
                </ul>
                <h2>Oxford University<span>Professor of Mathematics 1885 – 1888</span></h2>
                <ul>
                    <li>Published papers in binomials, asteroid dynamics and game theory
                    <li>Intimidated students
                </ul>
            </dd>
        </dl>
        <dl>
            <dt>Hobbies
            <dd>World domination, Social Manipulation, Murder Most Foul
        </dl>
        <dl>
            <dt>References
            <dd>Available on request
        </dl>
    </div>
</body>

</html>

The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code.

<link rel="stylesheet" href="style.css" />

Adding the Structure for our Resume Website:

First, we’ll use the div element to create a container with the id “resume,” and then we’ll use the img> tag to add an image to our résumé. Use the h1> tag because our name is the most significant item on our CV. We will now include the person’s phone number, website, and email utilising the p> tag. We will add the person’s goal using the paragraph.

10+ Javascript Projects For Beginners With Source Code

Now, utilising the description list, we will develop a section on education. We will use the h2> tag to insert the heading for our college inside of our list. The major and minor subjects will then be added using the strong tag.

Similar to how we constructed our schooling part, we will create the abilities, experience, interests, and references sections utilising a description list.

Let’s have a look at the structure.

Output:

Restaurant Website Using HTML and CSS

Step2: Adding CSS Code

In your stylesheet, copy and paste the CSS code provided below.

* {
  box-sizing: border-box;
}

body {
  margin: 2.2rem;
}

div#resume {
  min-width: 310px;
  font: 16px Helvetica, Avernir, sans-serif;
  line-height: 24px;
  color: #000;
}

div#resume h1 {
  margin: 0 0 16px 0;
  padding: 0 0 16px 0;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: -2px;
  border-bottom: 1px solid #999;
  line-height: 50px;
}

div#resume h2 {
  font-size: 20px;
  margin: 0 0 6px 0;
  position: relative;
}

div#resume h2 span {
  position: absolute;
  bottom: 0;
  right: 0;
  font-style: italic;
  font-family: Georgia, serif;
  font-size: 16px;
  color: #999;
  font-weight: normal;
}

div#resume p {
  margin: 0 0 16px 0;
}

div#resume a {
  color: #999;
  text-decoration: none;
  border-bottom: 1px dotted #999;
}

div#resume a:hover {
  border-bottom-style: solid;
  color: #000;
}

div#resume p.objective {
  font-family: Georgia, serif;
  font-style: italic;
  color: #666;
}

div#resume dt {
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
  text-align: right;
  padding: 0 26px 0 0;
  width: 150px;
  border-right: 1px solid #999;
}

div#resume dl {
  display: table-row;
}

div#resume dl dt,
div#resume dl dd {
  display: table-cell;
  padding-bottom: 20px;
}

div#resume dl dd {
  width: 500px;
  padding-left: 26px;
}

div#resume img {
  float: right;
  padding: 10px;
  background: #fff;
  margin: 0 30px;
  transform: rotate(-4deg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  width: 30%;
  max-width: 220px;
}

@media screen and (max-width: 1100px) {
  div#resume h2 span {
    position: static;
    display: block;
    margin-top: 2px;
  }
}

@media screen and (max-width: 550px) {
  body {
    margin: 1rem;
  }
  div#resume img {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 400px) {
  div#resume dl dt {
    border-right: none;
    border-bottom: 1px solid #999;
  }
  div#resume dl,
  div#resume dl dd,
  div#resume dl dt {
    display: block;
    padding-left: 0;
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    width: 100%;
  }
  div#resume dl dd {
    margin-top: 6px;
  }
  div#resume h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
  }
  div#resume dt {
    font-size: 20px;
  }
  h1 {
    font-size: 36px;
    margin-right: 0;
    line-height: 0;
  }
  div#resume img {
    margin: 0;
  }
}

@media screen and (max-width: 320px) {
  body {
    margin: 0;
  }
  img {
    margin: 0;
    margin-bottom: -40px;
  }
  div#resume {
    width: 320px;
    padding: 12px;
    overflow: hidden;
  }   p,
  li {
    margin-right: 20px;
  }
}

Step1:We will set the box size to “border box of website” using the universal selector, and the margin to 2.2 rem using the body tag selector.

We’ll style our container using the id selector (#resume). The minimum width will be 300 px, and the font size will be 16 pixels with the “Helvetica” font family. In addition, we’ll have a line height of 24 pixels.

Calculator Using HTML,CSS & JavaScript With Source Code

* {
  box-sizing: border-box;
}

body {
  margin: 2.2rem;
}

div#resume {
  min-width: 310px;
  font: 16px Helvetica, Avernir, sans-serif;
  line-height: 24px;
  color: #000;
}

Step2:We will now use the tag selector h1 to individually style each component of our resume. Our heading will have a margin of 16 pixels from the bottom, and our h1 tag’s font size and line height are both set to 42 pixels.

Weather App Using Html,Css And JavaScript

The h2 heading will also get some style. The font size will be set to 20 px, the bottom margin to 6, and the position to “relative.”

The remaining html elements will receive styling in the same way that we added styling to our h1 and h2 tags. You merely need to execute the code as written to get the desired result.

div#resume h1 {
  margin: 0 0 16px 0;
  padding: 0 0 16px 0;
  font-size: 42px;
  font-weight: bold;
  letter-spacing: -2px;
  border-bottom: 1px solid #999;
  line-height: 50px;
}

div#resume h2 {
  font-size: 20px;
  margin: 0 0 6px 0;
  position: relative;
}

div#resume h2 span {
  position: absolute;
  bottom: 0;
  right: 0;
  font-style: italic;
  font-family: Georgia, serif;
  font-size: 16px;
  color: #999;
  font-weight: normal;
}

div#resume p {
  margin: 0 0 16px 0;
}

div#resume a {
  color: #999;
  text-decoration: none;
  border-bottom: 1px dotted #999;
}

div#resume a:hover {
  border-bottom-style: solid;
  color: #000;
}

div#resume p.objective {
  font-family: Georgia, serif;
  font-style: italic;
  color: #666;
}

div#resume dt {
  font-style: italic;
  font-weight: bold;
  font-size: 18px;
  text-align: right;
  padding: 0 26px 0 0;
  width: 150px;
  border-right: 1px solid #999;
}

div#resume dl {
  display: table-row;
}

div#resume dl dt,
div#resume dl dd {
  display: table-cell;
  padding-bottom: 20px;
}

div#resume dl dd {
  width: 500px;
  padding-left: 26px;
}

div#resume img {
  float: right;
  padding: 10px;
  background: #fff;
  margin: 0 30px;
  transform: rotate(-4deg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  width: 30%;
  max-width: 220px;
}

Create Portfolio Website Using HTML and CSS (Source Code)

Step3: We have almost finished adding the aesthetic to our resume; the final step is to include responsiveness. The heading of our resume will be set to “static” if the screen size is equal to or less than the stated screen size.

For this, we will be using the media query and screen width and defining a maximum width of “1100px.” Similar to this, we will specify the width for various screen sizes so that our resume website may adjust the size of our resume to the screen size automatically.

@media screen and (max-width: 1100px) {
  div#resume h2 span {
    position: static;
    display: block;
    margin-top: 2px;
  }
}

@media screen and (max-width: 550px) {
  body {
    margin: 1rem;
  }
  div#resume img {
    transform: rotate(0deg);
  }
}

@media screen and (max-width: 400px) {
  div#resume dl dt {
    border-right: none;
    border-bottom: 1px solid #999;
  }
  div#resume dl,
  div#resume dl dd,
  div#resume dl dt {
    display: block;
    padding-left: 0;
    margin-left: 0;
    padding-bottom: 0;
    text-align: left;
    width: 100%;
  }
  div#resume dl dd {
    margin-top: 6px;
  }
  div#resume h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
  }
  div#resume dt {
    font-size: 20px;
  }
  h1 {
    font-size: 36px;
    margin-right: 0;
    line-height: 0;
  }
  div#resume img {
    margin: 0;
  }
}

@media screen and (max-width: 320px) {
  body {
    margin: 0;
  }
  img {
    margin: 0;
    margin-bottom: -40px;
  }
  div#resume {
    width: 320px;
    padding: 12px;
    overflow: hidden;
  }
  p,
  li {
    margin-right: 20px;
  }
}

Now we’ve completed our resume website using html & css. I hope you understood the whole project. Let’s take a look at our Live Preview.

Final Output Of Resume/CV Website Using HTML and CSS:

Live Preview Of our resume website using Html & Css

Now We have Successfully created our resume website using html & css. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search Codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Which code editor do you use for this Indian Flag coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

Yes! this project is a responsive project.

Do you use any external links to create this project?

No!

Источник

Запускаем PhpStorm и создаем проект

Создаем HTML файл

Заполняем тело страницы

Добавляем Фото

Маркированные списки

Стили CSS

Следующее занятие

Самостоятельное задание

Что мы узнали на этом занятии?

Индивидуальные занятия

Bonus Items Included!

Step 1: The CSS

Step 2: The Markup (Without Schema.org Microdata Included)

A Few Notes About the Markup

HTML5 Shiv

Definition List

Section vs Article

Step 3: Add Schema.org Microdata – Person and PostalAddress

Itemscope Element and Itemtype Attribute

Itemprop Attributes

Person Schema

PostalAddress Schema

Final Markup for the Contact and Social Media Links Sections

Step 4: Add Schema.org Microdata – Item List

Itemscope Element and Itemtype Attribute

Itemprop Attributes

ItemList Schema

Final Markup for the Skills Section

Step 5: Add Schema.org Microdata – Organization

Itemscope Element and Itemtype Attribute

Itemprop Attributes

Organization Schema

Final Markup for the Experience Section

Step 6: Add Schema.org Microdata – Article

Itemscope Element and Itemtype Attribute for Article

Itemprop Attributes

Article Schema

Final Markup for the Publications Section

Step 7: Add Schema.org Microdata – EducationalOrganization and PostalAddress

Itemscope Element and Itemtype Attribute for EducationalOrganization

Itemscope Element and Itemtype Attribute for PostalAddress

Itemprop Attributes

EducationalOrganization Schema

PostalAddress Schema

Final Markup for the Education Section

About Authorship Markup

Rel Tags

Step 8: Create a Google Profile

Step 9: Link Web Page(s) to Your Google Profile

Step 10: Complete Google Authorship Form (Important!)

Step 11: Test Microdata Markup Using Rich Snippets Testing Tool

All Done!

Getting Started

Wireframe

Setting up a “Canvas”

Layout and Content

Exporting

Print Styles

Generating a PDF

Conclusion

Построение документа

Главные блоки с контентом

Форматирование полезных микроданных

Сколько это слишком много?

Относительные CSS стили

Адаптивный дизайн

Кодирование для смартфонов

Заключительное слово

Free Coding Ebook 👉 Get Now

Step1: Adding HTML Markup

Step2: Adding CSS Code

Live Preview Of our resume website using Html & Css

Which code editor do you use for this Indian Flag coding?

is this project responsive or not?

Do you use any external links to create this project?

Вам также может понравиться

Как исправить корявый почерк взрослому

Как составить заявление в прокуратуру при увольнении

Как составить резюме без шаблонов

Добавить комментарий Отменить ответ

`Itemscope` Element and `Itemtype` Attribute

`Itemprop` Attributes

`Itemscope` Element and `Itemtype` Attribute

`Itemprop` Attributes

`ItemList` Schema

`Itemscope` Element and `Itemtype` Attribute

`Itemprop` Attributes

`Itemscope` Element and `Itemtype` Attribute for Article

`Itemprop` Attributes

`Itemscope` Element and `Itemtype` Attribute for EducationalOrganization

`Itemscope` Element and `Itemtype` Attribute for PostalAddress

`Itemprop` Attributes

Free Coding Ebook 👉

Get Now