Журнал «Код»

Делаем страницу «О себе» на Бутстрапе

Журнал «Код»·22 Jul 2019

Если ты можешь сде­лать стра­ни­цу о себе, ты можешь сде­лать всё

Делаем страницу «О себе» на Бутстрапе, image #1

Недав­но мы дела­ли ста­тью о коти­ках и мобиль­ной вёрст­ке. Но в жиз­ни доволь­но мало слу­ча­ев, когда нуж­но создать мобиль­ный сайт с коти­ка­ми, поэто­му попро­бу­ем что-то серьёз­ное. Сде­ла­ем стра­ни­цу «О себе». Её мож­но будет выло­жить на соб­ствен­ный сайт и гром­ко заявить о себе миру.

Рабо­тать над стра­ни­цей будем в таком поряд­ке: сна­ча­ла опре­де­лим, что мы хотим ска­зать людям, а потом обер­нём всё в код. Любой дру­гой сайт дела­ет­ся по этой же схе­ме — преж­де чем рас­чех­лять HTML, надо поду­мать над содер­жи­мым.

Можно ли без страницы?

Собственную страницу можно сделать и на конструкторе сайтов, не заморачиваясь с вёрсткой и стилями. Но так каждый может. Это всё равно что жить на съёмной квартире — что тебе хозяева разрешили, то и можно. А вот сделать собственный сайт — это как построить собственный дом. Настоящие программисты делают собственные сайты.

О чём будем писать

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

Исходный текст

Михаил Максимов
Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.
В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.
Мои научные работы
А вот тут поставим ссылки на вымышленные работы этого преподавателя
Как связаться
Телефон: +7 (123) 456-78-90
Почта: mihailmaximov@gmail.com
Скайп: mihailmaximov
Телеграм: @mihailmaximov

Вёрстка текста

За осно­ву возь­мём стан­дарт­ный шаб­лон с Бут­стра­пом. В этой ста­тье мы спря­чем его под стре­лоч­ку, что­бы не зани­мать мно­го места, но если инте­рес­но прой­ти весь путь с нами — ско­пи­руй­те этот код и повто­ряй­те за нами.

Шаблон с Бутстрапом 

 
<!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Михаил Максимов — преподаватель информатики</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- загружаем Бутстрап -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style type="text/css">
  </style>
<!-- закрываем служебную часть страницы -->
</head>
<body>
  <!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->
</html>

Каж­дый эле­мент нашей стра­ни­цы будем поме­щать в свой кон­тей­нер, что­бы потом лег­ко мож­но было настро­ить адап­тив­ность как нам нуж­но. Посмот­ри­те вни­ма­тель­но на этот код: это основ­ной «кир­пи­чик», из кото­ро­го стро­ит­ся архи­тек­ту­ра стра­ниц Бут­стра­па.

 <div class="container" >
  <div class="row">
    <div class="col-12">
      <!-- содержимое контейнера -->
    </div>
  </div>
</div>

Сна­ча­ла свер­ста­ем заго­ло­вок всей стра­ни­цы — для это­го исполь­зу­ем тег <h1>...</h1>. Если меж­ду дву­мя эти­ми тега­ми поме­стить текст, бра­у­зер пой­мёт, что это заго­ло­вок, и сде­ла­ет его поболь­ше. Ска­жем кон­тей­не­ру, что содер­жи­мое при любом раз­ме­ре пусть зани­ма­ет всю шири­ну маке­та, и вста­вим в него наш текст:

<div class="container" >
  <div class="row">
    <div class="col-12">
      <h1>Михаил Максимов</h1>
    </div>
  </div>
</div>

Доба­вим новый кон­тей­нер и поме­стим в него опи­са­ние на два абза­ца, за кото­рые отве­ча­ет тег <p>...</p>. Посмот­рим, что полу­чи­лось:

 <div class="container" >
    <div class="row">
      <div class="col-12">
        <p>Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.</p>
        <p>В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.</p>
      </div>
    </div>
  </div>
Делаем страницу «О себе» на Бутстрапе, image #2

Фотография человека

Доба­вим фото героя, что­бы было инте­рес­нее. За это отве­ча­ет тег <img src="адрес_картинки">. В нашем слу­чае тег будет выгля­деть так:

<img src="https://thecode.media/wp-content/uploads/2019/07/sq_me.jpg" >

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

<div class="container" >
  <div class="row">
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
      <!-- тут 2 абзаца текста из прошлого примера -->
    </div>
    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
      <img src="https://thecode.media/wp-content/uploads/2019/07/sq_me.jpg" >
    </div>
  </div>
</div>
Делаем страницу «О себе» на Бутстрапе, image #3

По умол­ча­нию бра­у­зер пока­зы­ва­ет кар­тин­ки в пол­ном раз­ме­ре, и это выгля­дит некра­си­во. Доба­вим в сти­ли огра­ни­че­ние по раз­ме­ру для кар­тин­ки, что­бы она не выле­за­ла за гра­ни­цы бло­ка, и заод­но настро­им пара­мет­ры заго­лов­ка и тек­ста:

{
<style type="text/css">
  img{ 
    max-width: 100%; 
    max-height: 100%;
  } 
  h1{
    font-size:50px;
    margin-top: 30px;
    margin-bottom: 20px;
  } 
 
  p {
    font-size: 18px;
  } 
</style>
Делаем страницу «О себе» на Бутстрапе, image #4

Раздел страницы: научные работы

Под­за­го­ло­вок сде­ла­ем тегом <h2>...</h2> в отдель­ном кон­тей­не­ре:

<div class="container" >
  <div class="row">
    <div class="col-12">
      <h2>Мои научные работы</h2>
    </div>
  </div>
</div>

Что­бы под­за­го­ло­вок не сли­пал­ся с осталь­ным содер­жи­мым, доба­вим в раз­дел со сти­ля­ми отсту­пы для заго­лов­ка h2 свер­ху и сни­зу:

h2{
      margin-top: 40px;
      margin-bottom: 20px;
    }

Теперь сде­ла­ем спи­сок науч­ных работ так, что­бы на боль­ших экра­нах он зани­мал 4 колон­ки, на сред­них — 2, а на теле­фо­нах зани­мал весь макет по ширине. Заод­но сде­ла­ем спи­сок в виде ссы­лок, что­бы мож­но было по назва­нию перей­ти к каж­дой рабо­те. Ссыл­ки оформ­ля­ют­ся тегом

<a href="адрес_ссылки">текст_ссылки</a>

<a href="https://thecode.media/baboolya/">Задача о бабушке и помидорах</a>

Офор­мим таким обра­зом наш спи­сок науч­ных работ в отдель­ном кон­тей­не­ре:

 
<div class="container">
  <div class="row">
 
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3" >
      <p><a href="https://thecode.media/baboolya/">Задача про бабушку и помидоры</a></p>
      <p><a href="https://thecode.media/electrician/">Хитрый электрик</a></p>
    </div> 
 
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
      <p><a href="https://thecode.media/le-timer/">Как сделать свой таймер-напоминалку</a></p>  
      <p><a href="https://thecode.media/sublime-one-love/">Почему Sublime Text — это круто</a></p>
    </div>
 
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
      <p><a href="https://thecode.media/est-tri-shkatulki/">Поговорим о Якубовиче</a></p>
      <p><a href="https://thecode.media/content-manager/">Как стать контент-менеджером</a></p>
    </div>  
 
    <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
      <p><a href="https://thecode.media/batareyki-besyat/">Задача про сторожа и фонарик</a></p>
      <p><a href="https://thecode.media/variables/">О названиях функций</a></p>
    </div>  
 
  </div>
</div>
Делаем страницу «О себе» на Бутстрапе, image #5

Контакты

Оста­лось доба­вить кон­такт­ную инфор­ма­цию — тоже в сво­ём кон­тей­не­ре. Смот­ри­те: мы поло­жи­ли тег со ссыл­кой внут­ри тега абза­ца — так мож­но.

 
<div class="container" >
  <div class="row">
    <div class="col-12">
      <h2>Контакты для связи</h2>
    </div>
  </div>
</div>
 
<div class="container" >
  <div class="row">
    <div class="col-12">
      <p>Телефон: +7 (123) 456-78-90</p>
      <p>Почта: <a href="mailto: mihailmaximov@gmail.com">mikemaximov@gmail.com</a></p>
      <p>Скайп: mihailmaximov</p>
      <p>Телеграм: @mihailmaximov</p>
    </div>
  </div>
</div>

Смот­рим на резуль­тат и заод­но про­ве­ря­ем адап­тив­ность:

Делаем страницу «О себе» на Бутстрапе, image #6

Готовый код

 
<!DOCTYPE html>
<html>
<!-- служебная часть -->
<head>
  <!-- заголовок страницы -->
  <title>Михаил Максимов — преподаватель информатики</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- загружаем Бутстрап -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style type="text/css">
    img{ 
      max-width: 100%; 
      max-height: 100%;
    } 
 
    h1{
      font-size:50px;
      margin-top: 30px;
      margin-bottom: 20px;
    } 
 
    h2{
      margin-top: 40px;
      margin-bottom: 20px;
    }
 
    p {
      font-size: 18px;
    } 
  </style>
 
</head>
 
<body>
 
  <div class="container" >
    <div class="row">
      <div class="col-12">
        <h1>Михаил Максимов</h1>
      </div>
    </div>
  </div>
 
  <div class="container" >
    <div class="row">
      <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <p>Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.</p>
        <p>В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.</p>
      </div>
      <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
        <img src="https://thecode.media/wp-content/uploads/2019/07/sq_me.jpg" >
      </div>
    </div>
  </div>
 
  <div class="container" >
    <div class="row">
      <div class="col-12">
        <h2>Мои научные работы</h2>
      </div>
    </div>
  </div>
 
  <div class="container">
    <div class="row">
 
      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3" >
        <p><a href="https://thecode.media/baboolya/">Задача про бабушку и помидоры</a></p>
        <p><a href="https://thecode.media/electrician/">Хитрый электрик</a></p>
      </div> 
 
      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
        <p><a href="https://thecode.media/le-timer/">Как сделать свой таймер-напоминалку</a></p>  
        <p><a href="https://thecode.media/sublime-one-love/">Почему Sublime Text — это круто</a></p>
      </div>
 
      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
        <p><a href="https://thecode.media/est-tri-shkatulki/">Поговорим о Якубовиче</a></p>
        <p><a href="https://thecode.media/content-manager/">Как стать контент-менеджером</a></p>
      </div>  
 
      <div class="col-12 col-sm-12 col-md-6 col-lg-3 col-xl-3">
        <p><a href="https://thecode.media/batareyki-besyat/">Задача про сторожа и фонарик</a></p>
        <p><a href="https://thecode.media/variables/">О названиях функций</a></p>
      </div>  
 
    </div>
  </div> 
 
  <div class="container" >
    <div class="row">
      <div class="col-12">
        <h2>Контакты для связи</h2>
      </div>
    </div>
  </div>
 
  <div class="container" >
    <div class="row">
      <div class="col-12">
        <p>Телефон: +7 (123) 456-78-90</p>
        <p>Почта: <a href="mailto: mihailmaximov@gmail.com">mikemaximov@gmail.com</a></p>
        <p>Скайп: mihailmaximov</p>
        <p>Телеграм: @mihailmaximov</p>
      </div>
    </div>
  </div>
</body>
<!-- конец всей страницы -->
</html>

Это самый про­стой спо­соб создать стра­ни­цу о себе на чистом HTML, кото­рая сра­зу будет адап­тив­ной. Но есть ещё один спо­соб сде­лать похо­жее: исполь­зо­вать кон­струк­то­ры сай­тов. Про них — в сле­ду­ю­щей ста­тье.

Подписывайтесь на наш паблик, если вам есть что о себе рассказать!
5978 views·125 shares
5978 views