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

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

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

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

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

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

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

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

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

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

Михаил Максимов

Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться. 

В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек. 

Мои научные работы

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

Как связаться

Телефон: +7 (123) 456-78-90

Почта: mihailmaximov@gmail.com

Скайп:  mihailmaximov

Телеграм: @mihailmaximov

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

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

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

    
language: HTML

<!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>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

    
language: 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>. Посмот­рим, что полу­чи­лось:

    
language: HTML

<div class="container" >

    <div class="row">

      <div class="col-12">

        <p>Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.</p>

        <p>В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.</p>

      </div>

    </div>

  </div>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

Доба­вим фото героя, что­бы было инте­рес­нее. За это отве­ча­ет тег <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>


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

    
language: CSS
{

<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>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

Под­за­го­ло­вок сде­ла­ем тегом <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>

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

    
language: HTML

<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>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

Контакты

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

    
language: HTML

<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>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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


Гото­вый код

    
language: HTML

<!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, кото­рая сра­зу будет адап­тив­ной. Но есть ещё один спо­соб сде­лать похо­жее: исполь­зо­вать кон­струк­то­ры сай­тов. Про них — в сле­ду­ю­щей ста­тье.

Ещё по теме