На этом уроке мы создадим веб-страницу нашего резюме. Загрузим информацию о себе, добавим свое фото, таблицы. На выходе получим полноценную страницу нашего резюме или онлайн-визитку
Информация для тех, кто только пришел к нам: мы в клубе 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-200x300.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-200x300.jpg".
Но, если бы фото лежало на том же уровне, что и index.html, а не внутри папки img, то путь был бы такой: "975-200x300.jpg".
Если поняли, что я пытался донести - супер. Если нет, то ничего страшного. Про пути будет отдельный подробный диалог в следующих уроках.
Также в теге img указан атрибут alt - он обозначает альтернативный текст для изображения. На случай, если изображение не загрузилось, изображения отключены в браузере или вообще устройство не может отображать изображения. Пример простой: человек не смотрит на страницу на экране, а ее содержимое человеку зачитывает голосовой ассистент (Гугл, Алиса и прочие). Старайтесь всегда указывать alt с каким-то значением, обозначающем, что на изображении.
Итого, сейчас наш тег <body> выглядит так:
<body>
<div><img src="img/975-200x300.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-200x300.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-200x300.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-200x300.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>
<td></td> - колонка таблицы. В этот тег обрамляется каждая колонка таблицы. Колонки находятся внутри строки, то есть тег <td> должен быть внутри тега <tr>
<p></p> - параграф.
<span></span> - это общий элемент для "фразирования" контента. Он ничего отдельного не обозначает. В нашем случае смысл <span> в том, чтобы к тексту, обрамленному в этот тег, применить специальный стиль.
<b></b> - (bold) жирный текст. Кстати, есть аналогичный тег <strong> - делает фактически тоже самое.
<ul> - маркированный список. Весь список должен быть обрамлен в этот тег. На всякий случай напомню, что нумерованный список - это <ol>
<li></li> - строка списка. Каждая строка списка должна быть обрамлена в этот тег, а сам тег <li> должен находиться строго внутри тега <ul> или <ol>
<br> - (break) - разрыв строки. Используем, когда нужно перейти на следующую строку, но мы не хотим создавать новый абзац.
<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 - параметр стиля элемента. Задает цвет шрифта элемента.
list-style: none - стиль для списков. Указывает стиль списка. none указывает на то, что маркеры в каждой строке показывать не нужно.
float: left; - обтекать следующие элементы слева
padding: 10px; - внутренний отступ у элемента. Значение 10px - 10 пикселей будет отступ внутри элемента (о пикселях, сантиметрах, процентах и em поговорим, когда более подробно будем разбирать верстку, а сейчас пока пиксель - это просто единица размера на экране, как миллиметр на листе бумаги)
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 в телеграм.
Все уроки можно найти здесь совершенно бесплатно:
Следующий урок здесь:
