Создаем базовую вёрстку сайта. Часть 2

На прошлом уроке мы с вами сделали половину вёрстки сайта. В этом уроке мы закончим вёрстку основного раздела <main> </main>  В следующих уроках мы закончим вёрстку сайта и начнем заниматься его дизайн-оформлением.

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

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

Мы уже сделали хедер и два тематических блока сайта. В этом уроке мы доделаем два тематических блока.

  • откройте VC Code
  • откройте файл index.html
  • для удобства "сверните" уже написаный код с помощью стрелки справа от нумерации ряда

Сейчас будем верстать новый тематический блок сайта.

Ссылка на дизайн главной страницы сайта, который мы будем делать на этом мини-курсе

https://www.figma.com/

  • напишите код под последним блоком <article> </article>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
...
     </article>
     <article>
     </article>
</main>

Далее весь код я буду писать между <article> и </article>.
Внимательно следите за нумерацией строк.

  • напишите код внутри <article> </article>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
     </div>
</article>

  • напишите код внутри <div> </div>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
</article>

  • напишите код после </div>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
     </ul>
</article>

  • скачайте изображение для первой статьи в папку "img" - Скачать
  • напишите код внутри <ul> </ul>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
          </li>
     </ul>
</article>

  • напишите код внутри <li> </li>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
                <img src="img/archive_1.jpg">
          </li>
     </ul>
</article>

  • напишите код после <img>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
                <img src="img/archive_1.jpg">
                <div>
                </div>
          </li>
     </ul>
</article>

  • напишите код внутри <div> </div>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
               <img src="img/archive_1.jpg">
               <div>
                    <h3>2021 Объект 32 ФАН</h3>
                    <p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
               </div>
          </li>
     </ul>
</article>

Далее нам нужно добавить еще 2 блока <li> </li> в которых изменится только текст и номер изображения. Поэтому воспользуемся копированием.
  • выделите полностью блок <li> ... </li> с его содержимым

  • скопируйте код (CTRL + C)
  • и вставьте его ниже два раза (CTRL + V)
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
               <img src="img/archive_1.jpg">
               <div>
                    <h3>2021 Объект 32 ФАН</h3>
                    <p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
               </div>
          </li>
          <li>
               <img src="img/archive_1.jpg">
               <div>
                    <h3>2021 Объект 32 ФАН</h3>
                    <p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
               </div>
          </li>
          <li>
               <img src="img/archive_1.jpg">
               <div>
                    <h3>2021 Объект 32 ФАН</h3>
                    <p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
               </div>
          </li>
     </ul>
</article>

Теперь нам нужно изменить контент внутри этих блоков

  • скачайте изображение для второй статьи в папку "img" - Скачать
  • скачайте изображение для третьей статьи в папку "img" - Скачать
  • измените цифру "1" на цифру "2" во второй статье в <img>
  • измените цифру "1" на цифру "3" во третьей статье в <img>
  • измените текст во второй статье в <h3> </h3>
HTML
Код скопирован в буфер обмена copy

          <li>
               <img src="img/archive_2.jpg">
             <div>
                    <h3>Dikey & Shipa 2018. Мечтатели</h3>
                    <p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
               </div>
          </li>
          <li>
               <img src="img/archive_3.jpg">
               <div>
                    <h3>2021 Объект 32 ФАН</h3>
                    <p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
               </div>
          </li>

Для нашего удобства "свернём" блок со статьями.
  • нажмите на галочку справа от строки с кодом <ul>

В этом блоке осталось доделать только кнопку.

  • напишите код после </ul>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
...
     </article>
     <article>
           <ul>
...
           </ul>
           <button>Весь архив</button>
     </article>
</main>

Еще один тематический блок закончен.
  • сохраните изменения в файле index.html
  • обновите браузер и посмотрите, что получилось

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

Переходим к последнему тематическому блоку сайта, который так же будет расположен внутри <main> </main>

У нас уже есть 3 блока <article> </article> . Мы знаем, что внутри них "живет" каждый тематический блок.

  • напишите код после последнего <article> </article>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
...
     </article>
     <article>
...
     </article>
     <article>
     </article>
</main>

Заголовки у последний двух тематических статей выглядят одинаково, поэтому мы можем скопировать код из предыдущего блока <article> </article>

  • выделите код в предыдущем тематическом блоке <article> </article> и скопируйте его

  • вставьте код внутри последнего  <article> </article>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Архив работ</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
...
     </ul>
</article>
<article>
     <div>
          <h2>Маршруты</h2>
          <img src="img/heading_design.png">
     </div>
</article>

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

  • сверните при помощи стрелки код внутри предпоследней <article> </article>

Далее нас нужно сделать две статьи.

  • напишите код ниже </div>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Маршруты</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
     </ul>
</article>

  • напишите код внутри <ul> </ul>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Маршруты</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
          </li>
     </ul>
</article>

  • скачайте изображение для первой статьи в этом блоке в папку "img" - Скачать
  • напишите код внутри <li> </li>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Маршруты</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
               <h3>Улица Бадаева, Санкт-Петербург</h3>
          </li>
     </ul>
</article>

  • напишите код после <h3> </h3>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Маршруты</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
               <h3>Улица Бадаева, Санкт-Петербург</h3>
               <button>Текст</button>
          </li>
     </ul>
</article>

  • скачайте изображение для второй статьи в этом блоке в папку "img" - Скачать
  • выделите код <li> </li> и скопируйте его

  • вставьте код ниже </li> - это и будет нашей второй статьей в этом блоке
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Маршруты</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
          <li>
               <h3>Улица Бадаева, Санкт-Петербург</h3>
               <button>Текст</button>
          </li>
          <li>
               <h3>Улица Бадаева, Санкт-Петербург</h3>
               <button>Текст</button>
          </li>
     </ul>
</article>

Осталось добавить кнопку после двух статей.

  • для удобства "сверните" тег <ul> </ul> с помощью стрелочки справа от нумерации строк

  • напишите код после </ul>
HTML
Код скопирован в буфер обмена copy

<article>
     <div>
          <h2>Маршруты</h2>
          <img src="img/heading_design.png">
     </div>
     <ul>
...
     </ul>
     <button>Все прогулки</button>
</article>

  • сохраните изменения в файле с кодом index.html
  • обновите браузер и посмотрите что получилось

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

Готово! Все четыре основных тематических блока в разделе <main> </main> у нас готовы.

 

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

Telegram чат

 

Для продолжения прохождения курса ниже загрузите свой файл index.html

Создаем базовую вёрстку сайта. Часть 1

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

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

Создание основного файла

  • откройте VS Code
  • нажмите верхнюю кнопку на левой панели меню "Проводник"
  • нажмите кнопку "Открыть папку"

  • в появившемся окне выберите папку "Sity_says"
  • нажмите кнопку "Открыть"

Вы должны увидеть в VS Code папки, которые лежат внутри главной папки "Sity_says"

  • наведите мышку на название главной папки "Sity_says"
  • нажмите на первый значок, расположенный справа "Создать файл"

  • в появившемся поле напишите название файла index.html
  • нажмите Enter на клавиатуре

С правой стороны в рабочей области у вас открылся файл index.html в котором мы будем писать скелет нашего сайта.

Создание основного кода страницы

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

  • поставьте восклицательный знак на первой строке в рабочем файле index.html
  • напишите код
HTML
Код скопирован в буфер обмена copy

<!DOCTYPE html>
<html lang="ru">
</html>

При внесении изменений в код справа от названия файла вы видите точку. Это значит, что есть не сохраненные изменения в коде. Не забывайте сохранять изменения, чтобы код отображался в браузере корректно.

Сохранить изменения можно нажав на клавиатуре сочетание клавиш CTRL + S

  • напишите новый блок кода между <html lang="ru"> и </html>
HTML
Код скопирован в буфер обмена copy

<!DOCTYPE html>
<html lang="ru">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>City Says</title>
     </head>
</html>

  • ниже под </head> напишите
HTML
Код скопирован в буфер обмена copy

<!DOCTYPE html>
<html lang="ru">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>City Says</title>
     </head>
     <body>
     </body>
</html>

У нас готова основа для того чтобы дальше мы могли создавать страницу сайта.

Далее весь код, который я буду показывать будет располагаться на строках между <body> и </body>.
На примерах я буду показывать части кода. Следите внимательно за нумерацией строк.

Ссылка на дизайн главной страницы сайта, который мы будем делать на этом мини-курсе

https://www.figma.com/

Создадим самый верхний блок сайта. Его называют "хедер". Чаще всего там располагается логотип, навигация и телефоны компании.

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

  • напишите новый блок между <body>
HTML
Код скопирован в буфер обмена copy

<body>
     <header>
     </header>
</body>

  • скачайте изображение логотипа в папку "img" - Скачать
  • скачайте изображения нопки поиска в папку "img" - Скачать

Как выглядит ваша папка с проектом сейчас. Оба изображения лежат в папке "img".

  • напишите следующий блок кода. Это будет логотип, поиск и иконки смены языка сайта
HTML
Код скопирован в буфер обмена copy

<body>
     <header>
          <div>
               <img src="img/logo.png">
               <img src="img/search.png">
               <button>Ru</button>
               <button>En</button>
          </div>
     </header>
</body>

  • сохраните изменения в файле CTRL + S
  • зайдите в папку проекта и нажмите правой кнопкой мыши на файле index.html
  • выберите пункт "Открыть с помощью"
  • выберите браузер Google Chrome

Результат, который вы должны увидеть в брузере:

Если у вас другой результат, проверьте еще раз правильность написания кода.

Далее будем делать навигацию.

  • скачайте изображение для выпадающего меню навигации в папку "img" - Скачать
  • напишите следующий код
HTML
Код скопирован в буфер обмена copy

<body>
     <header>
          <div>
               <img src="img/logo.png">
               <img src="img/search.png">
               <button>Ru</button>
               <button>En</button>
          </div>
          <ul>
               <li>Уличное искусство
                    <img src="img/nav.png">
               </li>
               <li>Маршруты</li>
               <li>Новости
                    <img src="img/nav.png">
               </li>
               <li>О нас</li>
          </ul>
     </header>
</body>

  • сохраните изменения в файле CTRL + S

Результат, который вы должны увидеть в брузере:

Блок header готов. Далее будут идти тематические блоки сайта.

Делаем первый тематический блок:

  • напишите код между </header> и </body>
HTML
Код скопирован в буфер обмена copy

<body>
     <header>
...
     </header>
     <main>
     </main>
</body>

Далее весь код, который я буду показывать будет располагаться на строках между <main> и </main>.
На примерах я буду показывать части кода. Следите внимательно за нумерацией строк.

  • скачайте изображение для текстового блока в папку "img" - Скачать
  • скачайте изображение для левой стрелки в папку "img" - Скачать
  • скачайте изображение для правой стрелки в папку "img" - Скачать
  • напишите код между </main> и </main>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
     </article>
</main>

  • внутри <article> </article> напишите код
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
          <div>
          </div>
     </article>
</main>

  • внутри <div> </div> напишите код для заголовка
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
          <div>
               <h1>Арт искусство премиум класса</h1>
          </div>
     </article>
</main>

  • под <h1> </h1> напишите код для текста
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
          <div>
               <h1>Арт искусство премиум класса</h1>
               <p>Разрабатываем и воплощаем проекты сооружений всех классов. Фиксируем стоимость до начала работ.</p>
          </div>
     </article>
</main>

Под текстом у нас будет кнопка.

  • напишите под <p> </p> код для кнопки
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
          <div>
               <h1>Арт искусство премиум класса</h1>
               <p>Разрабатываем и воплощаем проекты сооружений всех классов. Фиксируем стоимость до начала работ.</p>
               <button>Подробнее о проекте</button>
          </div>
     </article>
</main>

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

  • под <button> </button>  напишите код для навигации.
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
          <div>
               <h1>Арт искусство премиум класса</h1>
               <p>Разрабатываем и воплощаем проекты сооружений всех классов. Фиксируем стоимость до начала работ.</p>
               <button>Подробнее о проекте</button>
               <div>
                    <img src="img/arrow_left.png">
                    <ul>
                    </ul>
                    <img src="img/arrow_right.png">
               </div>
          </div>
     </article>
</main>

  • далее внутри <ul> </ul> нужно написать 5 одинаковых строчек кода
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
          <div>
               <h1>Арт искусство премиум класса</h1>
               <p>Разрабатываем и воплощаем проекты сооружений всех классов. Фиксируем стоимость до начала работ.</p>
               <button>Подробнее о проекте</button>
               <div>
                    <img src="img/arrow_left.png">
                    <ul>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li></li>
                    </ul>
                    <img src="img/arrow_right.png">
               </div>
          </div>
     </article>
</main>

Завершаем этот блок кодом для изображения.

  • напишите после </div> код для изображения. Очень внимательно посмотрите, где стоит эта строчка кода.
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
          <div>
               <h1>Арт искусство премиум класса<h1>
               <p>Разрабатываем и воплощаем проекты сооружений всех классов. Фиксируем стоимость до начала работ.</p>
               <button>Подробнее о проекте</button>
               <div>
                    <img src="img/arrow_left.png">
                    <ul>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li></li>
                         <li></li>
                    </ul>
                    <img src="img/arrow_right.png">
               </div>
          </div>
          <img src="img/block_1.png">
     </article>
</main>

Вот, что получилось в итоге.

Сохраните изменения и посмотрите, что получилось в браузере.

Конечно, сейчас блок выглядит не так как на макете от дизайнера. Но мы делаем только базу, а красоту наводить будем в следующих уроках.

 

В рамках этого урока сделаем еще один тематический блок сайта

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

     

  • напишите код ниже под </article>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
     </article>
</main>

  • скачайте изображение для текстового блока в папку "img" - Скачать
  • напишите код внутри <article> </article>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
          <img src="img/block_2.png">
     </article>
</main>

  • напишите код под <img>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
          <img src="img/block_2.png">
          <div>
          </div>
     </article>
</main>

  • напишите код внутри <div> </div>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
          <img src="img/block_2.png">
          <div>
               <div>
               </div>
          </div>
     </article>
</main>

  • скачайте изображение папку "img" - Скачать
  • напишите код внутри <div> </div>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
          <img src="img/block_2.png">
          <div>
               <div>
                     <h2>О проекте</h2>
                     <img src="img/heading_design.png">
               </div>
          </div>
     </article>
</main>

Не забывайте сохранять изменения в коде.

  • напишите код под </div>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
          <img src="img/block_2.png">
          <div>
               <div>
                     <h2>О проекте</h2>
                     <img src="img/heading_design.png">
               </div>
               <p>Занимаемся поставками инженерного оборудования, организуем их проектирование, строительство и реконструкцию. Разрабатываем и воплощаем проекты сооружений всех классов. Фиксируем стоимость до начала работ. Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
          </div>
     </article>
</main>

  • напишите код под <p> </p>
HTML
Код скопирован в буфер обмена copy

<main>
     <article>
...
     </article>
     <article>
          <img src="img/block_2.png">
          <div>
               <div>
                     <h2>О проекте</h2>
                     <img src="img/heading_design.png">
               </div>
               <p>...</p>
               <button>Подробнее о проекте</button>
          </div>
     </article>
</main>

  • сохраните изменения в файле с кодом
  • обновите сайт в браузере и посмотрите что у вас получилось

 

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

Telegram чат

 

Для продолжения прохождения курса ниже загрузите свой файл index.html

Что нам потребуется для создания сайта

Прежде чем приступать к созданию сайта нам нужно подготовить рабочее пространство на компьютере.

  • Установить ПК версию Telegram
  • создать новую папку, в которой будут храниться файлы сайта;
  • скачать программу, в которой мы будем писать код;
  • установить браузер Google Chrome;
  • внимательно изучить макет дизайна сайта.

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

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

Все возникающие вопросы вы можете задавать в Telegram-чате этого курса.

Подписаться на Telegram

Установка ПК версии Telegram

Для удобства коммуникации и быстрой проверки ваших вопросов на курсе, я буду часто просить скриншоты вашего кода. Например, вы делаете урок и у вас никак не получается то, что я показываю. Вы делаете скриншот вашего кода на ПК или ноутбуке (не фото на телефон, а скриншот экрана) и скидываете в чат. Так я быстро смогу найти ошибку и подсказать вам что делать.

Скачайте подходящую вам версию Telegram и установите на свой компьютер - Скачать

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

Заходите в "Настройки" или жмете на свою Аватарку. Затем в "Папки с чатами"

Далее "Создать новую папку". Напишите ей короткое название, например "Учеба".

Через плюсик добавьте чаты и нажмите "Создать".

Зайдите в созданную папку и нажмите на чате ПКМ. Далее нажмите "Закрепить" и этот чат всегда будет самым первым в этой папке.

Создание папки проекта

Создайте на своем компьютере новую папку с названием "City_says"

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

Я работаю на MacBook, поэтому визуально может быть небольшое отличие.

Внутри этой папки создайте еще две папки с названиями "fonts", "css", "img"

В следующих уроках мы будем добавлять в эти папки нужные нам файлы.

Программа для работы с кодом сайта

Необходимо скачать специальную программу «Visual Studio Code», в которой мы будем писать весь код. Есть и другие программы для работы с кодом, но на моих курсах я показываю все примеры именно в VS Code. Так вы точно не запутаетесь и не допустите ошибку при написании кода.

https://code.visualstudio.com

Выберите подходящий для вас вариант ОС (операционной системы), скачайте и установите программу.

Браузер Google Chrome

Если на вашем компьютере нет Google Chrome, то его нужно скачать и установить. Не обязательно делать его браузером по умолчанию.

https://www.google.com/

Этот браузер наиболее точно передаст результат нашей работы без дополнительных усилий.

Макет дизайна сайта

Чаще всего макеты дизайна вы будете получать от дизайнеров на сайте figma. Это удобный сайт, с которым работает большинство современных дизайнеров. Им легко пользоваться и вы быстро освоитесь.

Ссылка на дизайн главной страницы сайта, который мы будем делать на этом мини-курсе

https://www.figma.com/

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

 

Итог

Итак, мы подготовились к началу нашего мини-курса по созданию сайтов. У вас стоит новая программа для работы с кодом VS Code, современный браузер Google Chrome. Вы создали папку проекта и посмотрели дизайн-макет сайта.

Самое время приступать к практической работе! Желаю удачи!

Все возникающие вопросы вы можете писать в Telegram-чат курса.

Telegram чат

Введение

Добро пожаловать на стартовый мини-курс Разработка сайтов: HTML и CSS

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

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

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

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

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

Присоединяйтесь к курсу и уже скоро вы сможете создать свой первый сайт!

Главная страница сайта, которую мы создадим на этом бесплатном курсе

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

 

Оборудование

Для начала вам нужен компьютер. Готово – вы программист! Конечно, это шутка. Вашим основным и самым главным инструментом для работы является Персональный компьютер (ПК) или Ноутбук. Качество оборудования будет напрямую влиять на скорость работы. Но не беспокойтесь, не бегите покупать новый ПК, тем более что сейчас это, увы, не дешевое удовольствие. Сначала работаете и набиваете руку на том, что есть, а уже потом с заработанных денег можно и железо обновлять.

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

Что вам понадобится для работы в первую очередь: ПК или Ноутбук. Он должен быть в нормальном состоянии, быстро загружать браузер, открывать папки, программы и иметь доступ в интернет. У вас должен быть интернет. Желательно чтобы он был не мобильным, а кабельным. Вы можете подключаться к нему по Wi-Fi через домашний роутер или напрямую через интернет-кабель. Работать на мобильном интернете можно, но это скорее исключение, когда вы в дороге или вне дома, а вам нужно внести какие-то правки в работу. Полноценно работать все-таки лучше на хорошем интернете. Это увеличит эффективность во много раз. Вы еще устанете слушать от меня эти слова про эффективность. Поверьте, это важно.

Монитор. Самым крутым будет монитор с большой диагональю. Например, у меня монитор LG UltraWide 34 дюйма. Такой монитор нужен для того, чтобы ускорить работу с кодом. На большом мониторе вы сможете открывать рядом сразу несколько окон, но если у вас монитор с маленькой диагональю – не страшно, можно обновить его со временем, если это будет нужно. Работать на экране ноутбука тоже можно, просто нужно приловчиться и настроить расположение окон на рабочем столе под себя. Иногда я работаю на MacBook c диагональю 13,3 дюйма и даже там я могу организовать себе комфортное рабочее пространство.

Пример расположения программ, открытых у меня на большом мониторе, при написании обучения.

А вот так работаю на мониторе ноутбука.

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

Как еще можно ускорить работу на ноутбуке. Ноутбук можно использовать в качестве системного блока, подключив к нему монитор проводом HDMI (еще возможны старые разъемы DVI или VGA), мышку и клавиатуру.

Клавиатура. Казалось бы, что о ней говорить? Но знаете почему клавиатура Apple считается самой лучшей в мире? Ход клавиш. Ход клавиш – это расстояние, которое проходит клавиша на клавиатуре от момента нажатия на нее пальцем, до момента срабатывания. И чем больше ход клавиши, тем больше времени ты ждешь появления символа на мониторе. Кажется, что это такая мелочь, но если сложить все эти доли секунд, которые вы тратите на долгое нажатие кнопок клавиатуры, ожидание загрузки файлов из-за старого компьютера и еще кучи подобных незаметных моментов, то получается, что работа в разрезе года (мы же планируем работать не один месяц) теряет в эффективности приличное количество времени.

Покажу на примерах.

  • Клавиатура Apple. Красивая, тонкая, дорогая.

  • Классическая клавиатура. Самый распространенный вариант для ПК. Дешевая, функциональная, с огромным ходом клавиш.

  • Что-то среднее между красивой тонкой клавиатурой Apple и функциональной классической клавиатурой. Раньше я использовала именно такую клавиатуру, закупала их сразу по 2 штуки, на случай поломки. Не дорого, функционально, с небольшим ходом клавиш. Модель А4Tech KV-300H

Ну и очевидные вещи. Клавиатура должна быть удобной, на ней должны быть хорошо видны русские и английские символы. В работе вам очень пригодится правая маленькая цифровая панель, не забывайте о ней. Если она вдруг перестала работать, проверьте горит ли кнопка NumLock. Работа без цифрового блока возможна, но менее продуктивна.

Мышь. Даже если у вас ноутбук, обязательно пользуйтесь мышкой, так как многие вещи с помощью тачпада сделать будет практически нереально. И, опять же, это значительно ускорит работу. Мышка может быть абсолютно любой удобной для вас. Проводная, USB или Bluetooth – сейчас их на рынке огромное множество, выбирайте какая понравится. Но даже в таком, казалось бы, маленьком гаджете можно найти бонусы для ускорения работы. Например, моя беспроводная Bluetooth мышка Logitech MX Anywhere 2S была куплена, потому что у нее есть несколько крутых функций. Она подключается одновременно к 3м разным девайсам у меня это: ПК, Ноутбук и Телевизор. У нее, как и у всех мышек, есть колесико прокрутки, но у этой мышки колесико имеет разные скорости прокрутки. Это круто, когда работаешь с длинными файлами кода или лендинг-страницами. Да, она не дешевая, но и купила я ее не сразу. До этого у меня была самая обычная проводная мышь. Так что сперва наращиваем скиллы, а потом ускоряем их при помощи разных подобных гаджетов.

 

Soft-skills

Хорошим софт скиллом для вас будет скорость набора текста. Я, например, печатаю, не глядя на клавиатуру со скоростью 277-290 знаков в минуту на сложных текстах и 310-350 знаков на простых. Проверить свою скорость набора текста можно вот на этом бесплатном сайте — https://brainapps.ru/

После прохождения теста напишите в телеграм-чат какой у вас результат.

Не переживайте, этот скилл растет с опытом. Но если хотите ускориться, можете потренировать его при помощи бесплатного сервиса — https://typerun.top/

Внимательность – это тоже важный скилл в работе программиста. Так как работа достаточно рутинная и приходится писать много однообразного кода, будьте готовы к повышенным требованиям в этом вопросе. Именно поэтому я все время рекомендую убирать все лишнее из поля зрения во время работы. Чтобы ничего не отвлекало и не рассеивало внимание.

Моя рекомендация – учите английский язык. Криво-косо, но как-нибудь учите. Вам не нужно читать техническую документацию на английском прямо сейчас или каком-то другом языках, нужно просто шевелить мозгами. Если кажется, что нет времени – это только кажется. Ставите бесплатное приложение Duolingo и вперед, по одному-два упражнения в день. Занимает 10 минут, а мозг начинает работать активнее. Я владею английским, польским и итальянским языками на хорошем разговорном уровне. Знание языков в современном мире открывает перед нами хорошие возможности. Плюс заказы на английском языке оплачиваются в разы выше. Так что, если хорошо владеете английским, у меня для вас хорошие новости! У вас, как минимум, +10 бирж фриланса с классными заказами на английском языке.

Все сайты в своей основе (в коде) написаны на английском языке. И это прекрасно. Стандартизация работы позволяет быстро и качественно создавать сайты, корректировать их и, вообще, работать с ними. Представьте себе ситуацию, если бы каждый программист писал сайт на том языке, на котором бы захотел. Сегодня он написал сайт на немецком, а завтра пришел другой программист, который пишет сайты только на английском. Рядом с ними стоит дизайнер и знает только русский. И стоят они, три товарища, и никак не могут решить, на каком же языке им в итоге работать. Поэтому и есть единый стандарт – английский язык.

 

Базовые термины

«Папка» — место на компьютере, где хранятся файлы разного формата.

«Файл» — документ, который находится в компьютере и имеет свое название, вес и формат. Это могут быть файлы Word, Exсel, фотографии, программы и различные системные файлы.

«Формат файла» — его еще называют «расширение файла», он определяет в какой программе можно просматривать какой-либо файл. Формат файла прописывается в конце документа после точки. Например «Фото с котиками.jpg» в данном случае .jpg это формат файла, и он говорит нам о том, что это картинка. На курсе мы используем файлы формата .html .css .png .jpg

«Вес файла» — количество Mb или Kb, которое занимает файл на компьютере. Mb в 1024 раза больше, чем Kb. Разные форматы файлов имеют разный вес, это нужно учитывать в работе и использоваться форматы, которые имеют меньший вес, если этот момент не прописан в техническом задании.

«Программы» — то, что будет помогать нам работать. Например, программы для написания кода. Программы могут быть как встроенными (предустановленными) на вашем компьютере, так и устанавливаться отдельно. Есть платные программы, есть программы с пробным периодом. Какие лучше всего использовать нам мы обсудим позднее.

«Плагин» — это дополнение к основной программе, для расширения ее функционала.

«Путь» — это последовательность папок от самой первой (корневой) до самой последней папки, где лежит нужный нам файл.

«Ссылка» —  это адрес, который ведет пользователя на конкретную страницу или файл в интернете.

«Типы изображений» — это различные форматы файла изображений. Самый распространенный формат изображений — .JPG (.JPEG) и .PNG.

Дальше немного жаргона опытных и не очень пользователей ПК, которые мы часто используем при работе:

«Копипаст» — это сочетание горячих клавиш для копирования чего-либо и вставки этого в нужное место. Например, скопировать текст из документа и вставить его в код.

«Альтаб» — это переключение между открытыми программами при помощи горячих клавиш (Alt + Tab).

«Лендинг» — это сайт, на котором всего одна основная страница. Чаще всего он очень длинный, его можно крутить долго вниз и читать разную информацию, размещенную на нем. Например, мой сайт https://sokhareva.ru это классический лендинг. Думаю, что вы уже много подобных сайтов встречали в интернете, они сейчас очень распространены.

«Софт скиллы» (Soft Skills) — это ваши гибкие навыки и умения, не связанные с конкретной деятельностью. Например, навыки ведения переписки и коммуникации с окружающими, навыки решения проблем, принятия решений и тд.

«Хард скиллы» (Hard Skills) — это профессиональные навыки, которые помогают работать на определенной должности. Например, хард скиллом станет углубленное знание какого-либо языка программирования. И чем глубже знания в этом направлении, тем выше хард скилл.

Практика для самостоятельной работы

Практическая 1

Для того чтобы выполнять некоторые практические работы мы будем пользоваться сайтом Codepen. На сайте удобный интерфейс и в нем сразу можно видеть результат своего кода не только в HTML, но и с применением CSS и JS. То, что мы будем изучать в дальнейшем.

Задание выполняете прямо на сайте по ссылке - https://codepen.io/Sokhareva/pen/WNmKLjK

В разделе HTML правите код. В разделе JS написано само задание. В разделе CSS прописаны стили, которые мы будем изучать в дальнейшем.

Если что-то не получилось и хочется начать заново, просто обновите страницу и всё, что вы написали сбросится.

Примечание. В этом задание используется новый тег <div> </div> . В дальнейшем вы часто будете его использовать, а пока краткое описание. Сам по себе этот тег ничего не значит и никак себя не проявляет, но к нему можно применять стили и оформлять этот блок, как угодно. Но самое важно, что <div> — это блок-контейнер, в который вы можете "положить" все что угодно, а потом это оформить. В нашем примере в <div> обернут весь контент для карточки товара и за счет стилей (атрибут class ) мы сделали для него красивую рамку с тенью.

Результат вашей работы:

Практическая 2

Задание выполняете прямо на сайте по ссылке - https://codepen.io/Sokhareva/pen/ExMprBQ

В разделе HTML правите код. В разделе JS написано само задание.

Результат вашей работы:

Практическая 3

Создаем таблицу! Вам самостоятельно нужно сформировать данные в таблицу используя правильные теги.

Задание выполняете прямо на сайте по ссылке - https://codepen.io/Sokhareva/pen/GReBeMJ

В разделе HTML правите код. В разделе JS написано само задание.

Результат вашей работы:

Практическая 4

Исправляем не валидный код.

Задание выполняете прямо на сайте по ссылке - https://codepen.io/Sokhareva/pen/jOJpRGe

Для проверки валидности используйте сайт - https://validator.w3.org/

 

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

Правильный путь к файлам

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

Существует два варианта ссылок: относительные и абсолютные.

Относительные пути

Путь не посредственно из HTML-файла. Применяется для решения таких задач как:

  • путь до изображения (значение атрибута src в теге <img> )
HTML
Код скопирован в буфер обмена copy

<img src="путь до изображения">

  • подключение стилей CSS в файл HTML
  • подключение аудио, видео форматов, а также шрифтов

Классический вид ваших папок с проектами будет выглядеть так. Основной файл index.html , .editorconfig (скрытый файл с настройками) и папки со стилями (css), шрифтами (fonts) и изображениями (img).

Эта группа будет первым уровнем, а все что лежит внутри папок - вторым и так далее до конечного файла.

Например:

В папке "img" лежит изображение с названием "raspisanie_urokov.img". Для того что бы правильно прописать путь в теге <img> мы берем папку первого уровня и название изображения.

HTML
Код скопирован в буфер обмена copy

<img src="img/raspisanie_urokov.img">

Если бы внутри папки "img" была бы еще одна папка, назовем ее school, то нам бы прошлось указывать весь путь от папки первого уровня до конечного файла, в нашем случае это изображение "raspisanie_urokov.img"

HTML
Код скопирован в буфер обмена copy

<img src="img/school/raspisanie_urokov.img">

Тут важно запомнить синтаксис:

/ - разделитель между папками и расширение файла в конце .img (.pdf .png и тд)

Бывает обратная ситуация, когда нужно идти не от первого уровня папок, а от самого файла. Это часто используется при написании пути в файле стилей style.css .

CSS
Код скопирован в буфер обмена copy

background-image: url("путь к файлу");

папка "css" - первого уровня. Файл style.css лежит внутри этой папки и получается занимает второй уровень.

папка "img" - первого уровня. Изображение "raspisanie_urokov.img" лежит внутри папки и занимает второй уровень.

Получается, что мы не можем внутри файла style.css написать таким образом:

background-image: url("img/raspisanie_urokov.img")

нам как бы нужно вернуться на первый уровень папок (в корневую папку) и "зайти" в нужную нам папку и оттуда забрать изображение.

CSS
Код скопирован в буфер обмена copy

background-image: url("../img/raspisanie_urokov.img");

Корневая папка на примере "Проектная работа" обозначается в пути к файлу двумя точками.

Редактор кода всегда дает подсказки в написании путей до файлов, но вам нужно понимать, как это работает, а не бездумно пользоваться автоматизацией.

Абсолютные пути

Это пути, когда в написании используется / в самом начале пути:

HTML
Код скопирован в буфер обмена copy

<img src="/img/raspisanie_urokov.img">

При таком написании пути нужный вам файл будет искаться по всей системе, а не в корневой папке. При таком написании ваш сайт будет работать не корректно.

В каком же случае используются абсолютные ссылки?

Когда вы пишите значение атрибута href в теге <a> (ссылка)

HTML
Код скопирован в буфер обмена copy

<a href="https://yandex.ru">Яндекс</a>

Код-стайл HTML

Код-стайл — это набор определенных правил, которые будут указывать на то, как нужно оформлять код в конкретном проекте.

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

База

  • Теги и атрибуты пишутся строчными буквами;
  • Для значения атрибута всегда используются двойные кавычки;
  • Для отступа вложенных тегов (ступеньки) всегда используется 1 табуляция. Рекомендованная табуляция - 2 пробела.

DOCTYPE

Обязательно в начале каждой страницы должен быть указан <!doctype> .

HTML
Код скопирован в буфер обмена copy

<!DOCTYPE html>

Кодировка текста

Чтобы текст в браузере всегда отображался корректно, не забывайте указывать кодировку текста: utf-8 .

HTML
Код скопирован в буфер обмена copy

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

Подключение стилей

Стилевые файлы подключаются всегда внутри <head> </head> с помощью тега <link> . Если пробовать подключить стили внутри <body> </body> ничего не сработает. Стили мы будем подключать в следующих уроках.

Для тега <link> обязательно используются атрибуты:

  • rel="stylesheet" - атрибут подключения стиля
  • href="название документа со стилями"

О стилях мы будем говорить в следующих уроках.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPE html>
<html>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="#">
</html>

Порядок атрибутов

Важно сохранять порядок атрибутов в разных блоках.

Атрибут class пишется всегда первым. Остальные атрибуты располагайте по своему усмотрению, но, если они повторяются на странице их порядок должен сохраняться.

Селекторы

Селекторы используются для стилизации HTML кода. При помощи селектора class вы выделяете элемент кода, для дальнейшей ее стилизации. Class со своим названием может повторяться в коде несколько раз. То есть вы можете присваивать одинаковый класс нескольким элементам.

Тогда как селектор id с уникальным именем (например, для якорных ссылок) может использоваться на странице только 1 раз.

Alt атрибут

В каждом теге <img> обязательно должен быть прописан alt - атрибут, чтобы в случае отсутствия изображения пользователь видел текст.

Всегда проверяйте свой код на валидность.
Для этого используйте специальные сервисы. Например: https://validator.w3.org/

Используйте теги по смыслу

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

Сайт, на котором теги разделили по смыслу, в них можно провалиться и посмотреть, что эти теги обозначают: http://html5doctor.com/#glossary

В названиях классов используйте простые и понятные слова

Чтобы вы могли быстро сориентироваться внутри своего кода.

Самостоятельная работа

Согласно код-стайлу нашего курса внесите необходимые правки в свой документ index.html

  • Табуляция для тегов <head> и <body> внутри тега <html> отсутствует. Теги <head> и <body> отделяются от остального контента 1 пустой строкой;

  • Параграф занимает одну строку

  • Теги заголовков и контент внутри пишутся в одну строку

  • Alt в теге <img> прописывается в одну строку. Описание для изображения <figcaption> пишется в одну строку.
HTML
Код скопирован в буфер обмена copy

<figure>
      <img src="#" alt="описание изображения">
      <figcaption>Подпись к изображению</figcaption>

</figure>

  • Заголовок таблицы <caption> пишется в одну строку. Теги <th> и <td> пишутся в одну строку.

Самостоятельно приведите файл index.html к стандартному код-страйлу курса.

Плагины в VS Code

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

Откройте программу VS. В левой панели выберите последний раздел "Плагины".

В этом разделе представлен список всех расширений, которые можно установить на VS. Конечно, все они нам не понадобятся. Мы установим только необходимые.

Плагин HtmlHint

Найдите такой плагин и нажмите кнопку "Установить".

Этот плагин подсвечивает вам не валидный код (не правильный). Так вы сразу будете обращать внимание на ошибки в процессе написания кода.

Проверяем работу плагина.

Если допустить ошибку в написании кода, плагин будет подсвечивать эти области разными цветами. Например, ошибку в теге <p!> плагин подчеркнул желтым.

В левом нижнем углу VS есть символы, которые показывают сколько ошибок в коде. Если нажать на треугольник с восклицательным знаком, откроет панель, в которой будут написаны ошибки и их положение в коде - Строка №.

Плагин Emmet 

Встроенный плагин VS. Устанавливать отдельно его не нужно, но нужно знать, что он существует.

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

Когда вы начинаете набирать какой-то тег Emmet выдает вам подсказку. С помощью стрелок вверх-вниз вы можете выбрать нужный вам вариант из представленных, а кнопкой TAB воспользоваться автозаполнением.

Самый классный пример - начать писать в коде восклицательный знак !

Emmet сразу же создаст для вас стандартную структуру сайта. Очень экономит время. Просто напишите символ восклицательного знака   ! и нажмите TAB.

Когда вам нужно сделать более сложную структуру, например таблицу

Можно прописать основной тег <tr> знак больше > и вложенный тег <td> . Нажать TAB или Enter и Emmet автоматически пропишет вам несколько вложенных тегов.

HTML
Код скопирован в буфер обмена copy

<table>
    tr>td
</table>

Вариант посложнее, когда вложенных одинаковых тегов должно быть несколько.

HTML
Код скопирован в буфер обмена copy

<table>
    tr>td*5
</table>

И еще более сложный вариант. Когда в таблице много строк и столбцов.

HTML
Код скопирован в буфер обмена copy

<table>
    tr*3>td*3
</table>

Это спасает нас от постоянного копирования или лишней работы руками. Именно поэтому я призываю вас заранее продумывать написание кода, глядя на макет, а потом применять такие удобные формулы.

Плагин EditorConfig

Этот плагин позволяет создавать файл с определенными настройками для VS. Это понадобиться в будущем, когда у вас будет несколько проектов и в них могут отличаться базовые настройки.

Например, сейчас при использовании табуляции автоматически ставится 4 пробела (выделенная строка №12)

В некоторых проектах может быть 2 или 3 пробела.

Для того чтобы EditorConfig работал необходимо создать системный файл. Системные файлы — это файлы не имеющие названия, а только расширение. В нашем случае файл будет называться .editorconfig

Самостоятельно

Перейдите в VS - Создать файл - напишите расширение файла без названия .editorconfig и сохраните в той же папке, где лежит файл index.html .

Если VS ругается на файл, просто нажмите окей или согласитесь с его предупреждением.

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

Чтобы включить отображение файла на Windows - Ссылка на официальный сайт

На MacOS - нажмите горячие клавиши Shift + Cmd + . (точка)

Внутри файла .editorconfig мы пропишем настройки для нашего проекта.

Настройки для разных типов файлов могут отличаться, но сейчас мы сделаем настройки для всех файлов. Для этого достаточно прописать [*] 

Звездочка (*) означает любое имя файла.

Далее, все файлы у нас будут иметь одинаковую кодировку: charset = utf-8  

Следующая настройка говорит о том, что мы не используем табуляцию напрямую, а имитируем пробелы: indent_style = space

А дальше зададим сколько пробелов будет в табуляции: indent_size = 2 - то есть 2 пробела в табуляции.

Это значит, что при нажатии на TAB у вас не просто получится отступ, как это бывает, например в документах Word, а программа автоматически сделает 2 пробела.

Далее, настройка для вставки пустой строки в конце файла insert_final_newline = true Каждый раз когда вы сохраняете свои файлы, у вас автоматически подставляется 1 пустая строка в самом конце.

И последняя настройка - удаление не нужных пробелов trim_trailing_whitespace = true  Теперь все лишние пробелы будут автоматически удалены и не будут загружать наш код.

Проверьте на своем файле index.html как работают эти настройки.

Удалите все пустые строки после тега </html> если они есть.

Сохраните файл и вы увидите, что автоматически добавилась 1 пустая строка. Это работает insert_final_newline = true

Поставьте несколько пробелов в самом начале файла после тега <doctype>

Сохраните файл, и вы увидите, что лишние пробелы исчезнут. Это работает trim_trailing_whitespace = true

После сохранения файла, вы могли увидеть сокращение отступа. Это произошло, потому что табуляция стала равна двум пробелам.

Это работают indent_style = space и indent_size = 2

А сейчас проверьте себя.

Заметили, что после применения настроек табуляция стала равна двум пробелам, но лишняя табуляция из документа не пропала?

На скрине видно разделение табуляции вертикальной полосой.

Видите? По правилам отступов у нас должна быть только 1 табуляция, состоящая из двух пробелов.

Как же разом поправить эту ошибку в документе? Ведь руками убирать лишние пробелы будет очень долго.

В VS нажмите CTRL + SHIFT + P у вас появится строка для ввода. Начните набирать >format document. Система вам подскажет. Нажмите Enter или кликните мышкой.

Ваш документ будет отформатирован согласно настройкам .editorconfig

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

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

Мы помним, что поставили [*] в начале файла .editorconfig , тем самым дали понять программе, что хотим применять эти настройки ко всем файлам.

Но что делать, если мы хотим исключить какой-то тип файла из некоторых настроек? Например, мы не хотим применять настройки добавления последний строки к файлам с форматом .js

На новой строке в файле .editorconfig мы пишем [*.js] , что означает любое имя файла с форматом .js пишем настройку insert_final_newline = false , что означает добавление последний новой строки = неправда, то есть не добавлять.

Теперь во все файлы с расширением .js не будет автоматически добавляться последняя строка.

Проверь себя

  • у вас есть отдельная папка со статьей про Lego
  • внутри папки есть файл index.html с кодом статьи
  • внутри папки есть файл .editorconfig (этот файл должен находиться в той же папке, что и файл index.html )
  • в файле .editorconfig прописаны настройки:
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
  • внутри родительской папки есть папка "img"
  • внутри папки "img" лежит изображение для статьи

Валидность кода

Валидность кода (валидация кода) — это показатель того, насколько ваш код написан правильно. Писать валидный код очень важно, не только для зрительного восприятия и его чтения другими программистами, но и для считывания вашего кода браузером и поисковыми системами.

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

Справится с проверкой помогут специальные сервисы по проверке валидности кода.

Мы будем пользоваться сайтом: validator.w3.org

На этом сайте вы можете:

  • Проверить валидность кода готового сайта. В строку нужно вставить url сайта

  • Проверить валидность отдельного файла

  • Проверить валидность кода

Для примера я специально сделаю ошибки в нашем файле index.html .

Выделю весь код целиком (CTRL + A), скопирую его (CTRL + C), вставлю в окно валидатора (CTRL + V) и нажму кнопку Check

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

Я убрала из тега <html> </html> атрибут lang , чтобы показать уровень ошибки "Warning" - предупреждение. Этот уровень ошибки не критичный, его можно пропустить, но если есть возможность, то лучше её исправить.

В данном случае, валидатор нам подсказывает, что нужно дописать атрибут lang

Далее идут ошибки уровня "Error" - эти ошибки игнорировать нельзя. Они требуют обязательного исправления.

Как читать ошибки, чтобы понять, как их исправить.

В строке с метаданными о размерах экрана я сделала ошибки: поставила лишнюю кавычку и изменила число с 1.0 на 1

HTML
Код скопирован в буфер обмена copy

<meta name="viewport" content="width=device-width, initial-scale="1">

и получила сразу несколько ошибок:

Синим текстом нам подсвечивает в какой строке находится эта ошибка: At line 5 / From line 5

В этой строке есть ошибка, правильное написание этой связки атрибутов:

HTML
Код скопирован в буфер обмена copy

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Неправильно написан путь к изображению для атрибута src в элементе <img> .

В написании пути должен использоваться правый слэш / и не допускаются пробелы.

Эта ошибка у нас расположилась на 17 строке.

У меня остались только ошибки атрибутов в таблице. Валидатор знает, что такой метод форматирования таблиц уже не используется, поэтому указывает на ошибку. Но мы изучали эти атрибуты для того, чтобы понять принцип работы кода и познакомиться с основами HTML. Далее мы будем переходить уже на современные методы оформления вёрстки. Поэтому сейчас мы эти ошибки пропускаем.

Как быстро найти строку в VS

Переходим в VS и нажимаем CTRL + G и пишем номер строки

VS сразу перекидывает нас на нужную строку. Исправляем ошибку.

Еще немного примеров не из нашей статьи:

Эта ошибка говорит нам о том, что на 55 строке в элементе <img> пропущен атрибут src .

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

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

Отображение тега в браузере: &lt и &gt .

Исправляю ошибку:

Так же часто спецсимволы используют для отображения денежных валют. Вот пример нескольких вариантов:

HTML
Код скопирован в буфер обмена copy
доллар - &#36;
фунт - &#163;
евро - &#8364;
рубль - &#8381;
Конечно, все варианты ошибок рассмотреть не возможно, но в процессе работы с кодом вы всегда будете проверять его на валидаторе, таким образом минимизируя риск критичной ошибки.

Самостоятельная работа

Проверьте ваш код из файла index.html в валидаторе, исправьте ошибки.

Специализированные теги

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

Тег <br>

Мы уже использовали ранее этот тег для переноса ссылки на новую строку. Но я хочу обратить ваше внимание на то, что тег <br> — это принудительный перенос строки. То есть текст после этого тега всегда будет с новой строки. Чем это чревато?

Сейчас в мире очень много различных девайсов (смартфоны, планшеты, электронные книги, мониторы). У всех девайсов разное разрешение (разный размер экрана). Соответственно, контент на них отображается по-разному. И если для экрана смартфона перенос строки будет уместен, то для монитора в этом нет никакого смысла.

В современном коде, используется адаптивная вёрстка (о ней мы будем говорить в следующих уроках), которая автоматически подстраивается под размер экрана. А тег <br> применяется в исключительных ситуациях, где действительно необходимо сделать принудительный перенос строки и это не повлияет на отображение контента на разных экранах.

Тег <pre> </pre>  - сохранение исходного форматирования

Это значит, что всё, что будет прописано в HTML файле, будет отображаться в браузере.

Например, мы уже знаем, что лишние пробелы в HTML файле браузерами не считываются, так же, как и новые строки. Смотрим в коде:

HTML
Код скопирован в буфер обмена copy

<p>
          Текст
     Текст
</p>

Смотрим в браузере:

Если обернуть текст в тег <pre> </pre> , то пробелы и перенос строки станут считываться в браузере и мы получим:

HTML
Код скопирован в буфер обмена copy

<p>
<pre>
          Текст
     Текст
<pre>
</p>

Все пробелы, перенос строки и даже шрифт будут без какого-то дополнительного форматирования:

Тег <sub> </sub>  - нижний регистр

Часто используется для математических формул и химических элементов. Например: Н2O

HTML
Код скопирован в буфер обмена copy

<p>
     H<sub>2</sub>O
</p>

Тег <sup> </sup> - верхний регистр
Тут по аналогии с предыдущим. Часто используется в единицах измерения: м3

 

HTML
Код скопирован в буфер обмена copy

<p>
     м<sup>3</sup>
</p>

Тег <u> </u> - подчеркнутый текст (underline). Подчеркивает текст снизу

HTML
Код скопирован в буфер обмена copy

<p>
     <u>Подчеркнутый текст</u>
</p>

Тег <s> </s> - зачеркнутый текст.

HTML
Код скопирован в буфер обмена copy

<p>
     <s>Перечеркнутый текст</s>
</p>

Тег <abr> <abr>  - Аббревиатура

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

Но сам по себе тег не будет работать, ему нужно прописать атрибут, куда и будет включена расшифровка.

HTML
Код скопирован в буфер обмена copy

<p>
     <abr title="Московский Государственный Университет">МГУ</abr>
</p>

При наведении мышки в браузере видим всплывающую строку:

Следующие два тега служат для зачеркивания и подчеркивания текста. Но выше в уроке, мы уже проходили похожие теги. В чем отличие?

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

Тег <del> </del> зачёркивает текст, а тег <ins> </ins> - подчёркивает текст.

Эти теги часто используются в паре. По смыслу они означают зачёркнутую ошибку в тексте и её исправление.

Как будто вы писали СТАТЬЮ (зачеркнули это слово) ТЕКСТ (написали следующее верное слово) и случайно написали книгу.

HTML
Код скопирован в буфер обмена copy

<p>
    Как будто вы писали <del>СТАТЬЮ</del> <ins>ТЕКСТ</ins> и случайно написали книгу.
</p>

Не будет ошибкой, если вы используете в данном случае теги <s> </s> и <u> </u> . Такой вариант тоже правильный и приведёт вас к тому же результату.

HTML
Код скопирован в буфер обмена copy

<p>
    Как будто вы писали <s>СТАТЬЮ</s> <u>ТЕКСТ</u> и случайно написали книгу.
</p>

Просто существуют теги, которые больше подходят по смыслу для каких-то случаев.
Тег <wbr> (without br) - точки переноса строки в браузере.
Бывают ситуации, когда нужно показать браузеру в каком именно месте сделать перенос строки при "сжатии" браузера.
Возьмем текст: У нас есть аббревиатура, которая при сжатии браузера будет переходить на новую строку "Новосибирский ФТУОГСТ"
При таком написании текста, когда при "сжатии" браузера аббревиатура переносится на новую строку в месте пробела. Вот так:

Но если нам нужно изменить параметры переноса, то мы добавим тег <wbr> в место возможного переноса строки:

HTML
Код скопирован в буфер обмена copy

<p>
     У нас есть аббревиатура, которая при сжатии браузера будет переходить на новую строку "Новосибирский ФТУО<wbr>ГСТ"
</p>

И получим принудительный перенос в нужном месте:

То есть, в сплошной аббревиатуре, где нет пробелов, мы показали браузеру в каком месте сделать принудительный перенос при "сжатии" страницы.

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

Служебные теги

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

Код языка страницы

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

HTML
Код скопирован в буфер обмена copy

lang="ru"

Этот атрибут прописывается не в теге <head> , а выше в теге <html>

HTML
Код скопирован в буфер обмена copy
<!DOCTYPEhtml>
<html lang="ru">
     <head></head>
...
</html>

Кодировка страницы

Ранее мы с вами посмотрели структуру страницы и оставили тег <head> </head> не заполненным.

Тег <meta>  

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

Атрибут тега <meta> charset="UTF-8"

HTML
Код скопирован в буфер обмена copy

<meta charset="UTF-8">

Этот атрибут позволяет браузеру понять на каком языке написана страница. Сейчас браузер умный и может догадаться сам, но это не всегда работает корректно. Например, браузер Safari видит страничку без прописанного тега с атрибутом charset :

Кодировок текста довольно много, но в современных браузерах мы используем именно UTF-8 .

Для понимания вот список других кодировок в браузере Safari:

Поэтому обязательно прописывает атрибут charset для тега <meta>

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html lang="ru">
     <head>
          <meta charset="UTF-8">
     </head>
...
</html>

Поведение страницы внутри сайта

Атрибуты для тега <meta>

name="viewport" - этот атрибут отвечает за масштаб отображения сайта. По умолчанию он всегда равен 1.

content="width=device-width - этот атрибут говорит браузеру, что ширина страницы будет равна ширине экрана устройства. Именно с помощью этого атрибута браузер подстраивается под экран планшета или телефона в горизонтальной или вертикальной ориентации.

initial-scale=1.0 - этот атрибут так же отвечает за масштаб.

Собираем всё вместе:

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html lang="ru">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
...
</html>

Почему мы использовали 2 тега <meta>

Тег <meta> — это технический тег, внутри которого прописываются разные настройки для страницы сайта. Мы могли написать все настройки в один тег, а могли выделить каждый атрибут в отдельный тег <meta> .

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

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

Имя страницы

Сейчас имя вашей страницы index.html — это служебное название и когда вы открываете его в браузере, вы видите это название во вкладке браузера.

Так же, если вы сохраните в закладках эту страницу, она так же будет с именем index.html и пользователь никак не сможет понять, о чем эта страница.

Это исправляется при помощи служебного тега <title> </title>

В этом названии мы пишем заголовок. Чтобы пользователь знал, что это за страница.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html lang="ru">
     <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Название страницы</title>
     </head>
...
</html>

Название во вкладке браузера так же стало отображать текст, который вы прописали в теге <title>

Этот заголовок <title> считывается поисковиками так же, как и заголовок <h1> .

Наглядный пример

Давайте наберем в поисковой системе Yandex запрос: Жизнь на Марсе

Мы увидим несколько ссылок в которых содержится поисковая фраза "жизнь на Марсе"

Перейдем по 3 ссылка на Википедию и откроем инспектор кода.

Мы увидим, что в <title> </title> прописано именно то, что показывает поисковая система.

Итог

У сайта может быть еще много разных настроек, но сегодня мы познакомились с основой. Нашей задачей было разобраться, для чего нужен блок <head> и что в нем указывается.

Самостоятельно добавьте служебные теги в файл index.html

Ссылки и кнопки

В этом уроке мы будем разбираться в каких случаях используется тег <a> </a> - ссылка, а в каких тег <button> </button> - кнопка.

Тег <a> </a>

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

Тег <button> </button>

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

Ссылки могут быть выделены синим цветом и иметь подчеркивание. Если ссылка фиолетового цвета, значит, вы уже переходили по ней (нажимали на неё).

Ссылки — это довольно сложный тег, у которого есть очень много параметров.

Слово или текст, к которому должна быть прикреплена ссылка оборачиваются в тег <a> </a> .

Если воспользоваться автозаполнением от VS, то вы увидите, что он дополнит ваш тег свойством href="" .

Напоминаю, как выглядит тег со свойством:

HTML
Код скопирован в буфер обмена copy

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

Ссылка. Тег <a> </a>

href — это атрибут тега. В кавычках мы указываем адрес, по которому пользователь перейдет при клике на ссылку. При написании ссылки обязательно нужно указывать полный путь к странице. Не просто lego.com , а https://lego.com

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

HTML
Код скопирован в буфер обмена copy

<a href="#">текст ссылки</a>

Визуально в браузере она будет выглядеть как ссылка - подчеркнутый синий текст.

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

Атрибут target="_blank"

Этот атрибут позволяет нам настроить открытие ссылки в новой вкладке браузера, не закрывая основную вкладку.

HTML
Код скопирован в буфер обмена copy

<a href="https://lego.com" target="_blank">текст ссылки</a>

В результате, после клика по ссылке, у вас будет две открытых вкладки в браузере: основная вкладка со статьей и сайт lego.com .

Атрибут download

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

HTML
Код скопирован в буфер обмена copy

<a href="index.html" download>текст ссылки</a>

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

Якорные ссылки

Скорее всего вы часто встречали эти ссылки на одностраничных сайтах в интернете (landing page). Когда при нажатии на какой-то раздел, вас перекидывает вниз по странице к этому разделу. Наглядно это можно посмотреть на сайте нашего курса web-academy.it. Где при нажатии на раздел "Для кого" вас перекидывает вниз в соответствующий раздел.

Так же вы могли встретить такие ссылки в оглавлениях, когда при нажатии на какой-то текст в оглавлении, вас перекидывает на нужный раздел.

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

Например, в параграф. А в теге ссылки необходимо прописать уже не путь, а нужный id, он указывается через символ # .

HTML
Код скопирован в буфер обмена copy

<p id="paragraph">Текст параграфа</p>

<a href="#paragraph">Текст ссылки</a>

Кнопка. Тег <button> </button>

Раньше кнопки использовали в основном для отправки данных. Например, пользователь вводил в форму какие-то данные и по нажатии кнопки эти данные "улетали" на сервер. Теперь кнопки несут в себе разный функционал, а не только отправка формы. Например, вы часто встречали всплывающее окно на сайте с вопросом "Ваш город Москва?" и там же кнопки с ответом Да/Нет. Настраивать функционал кнопок мы будем в следующих уроках.

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

Вернёмся к нашей статье.

Откройте файл index.html и давайте оформим ссылки.

  • пропишите адрес href для ссылок
    https://lego.com
    https://ru.wikipedia.org/wiki/Lego
  • добавьте атрибут target , чтобы ссылка открывалась в новой вкладке.

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

Вы уже точно обратили внимание на то, что даже если в вашем коде текст написан с новой строки, в браузере он все равно идет одной строчкой. Всё, потому что браузер не считывает перенос строк, для этого есть специальный одиночный тег <br>Он ставится в том месте, где вы нажимаете Enter для переноса строки. То есть в конце строки, после которой будет переход на новую строку.

HTML
Код скопирован в буфер обмена copy

<a href="https://lego.com" target="_blank">текст ссылки</a><br>
<a href="https://ru.wikipedia.org/wiki/Lego" target="_blank">текст ссылки</a>

Теперь вторая ссылка стоит на новой строке.

Мы завершили оформление html разметки нашей статьи.

 

Если у вас что-то не получается, обязательно пишите свои вопросы в Telegram-чат курса.

 

Для продолжения прохождения курса ниже загрузите свой файл index.html

Таблицы

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

Но таблицы интересны тем, что их структуру можно использовать для вёрстки и отображения разных данных. Потому что таблицы просты и понятны, внутри неё (относительно её сетки) можно легко настроить расположение других блоков. Раньше практически все сайты писали именно так - используя таблицы. Сейчас технологии вёрстки уже ушли далеко вперед, но иногда ещё можно встретить такой вариант, например в вёрстке формы письма.

Сначала изучим теорию

Тег <table> </table>  - Таблица

Этим тегом мы сообщаем браузеру, что сейчас будет таблица, внутри которой будут элементы таблицы.

Тег <caption> </caption>  - Заголовок таблицы

Тег <tr> </tr>  - Строка в таблице (table row)

Тег <td> </td>  - Ячейка в строке таблицы

Собираем таблицу 2х2:

HTML
Код скопирован в буфер обмена copy

<table>
      <caption>Заголовок таблицы</caption>
      <tr>
              <td>Ячейка 1</td>
              <td>Ячейка 2</td>
      </tr>
      <tr>
              <td>Ячейка 1</td>
              <td>Ячейка 2</td>
      </tr>
</table>

Так же у таблицы есть разные атрибуты: высота, ширина, толщина линий и тд.

Атрибут border  - отвечает за толщину внешних границ таблицы.

HTML
Код скопирован в буфер обмена copy

<table border="10"> </table>

                   

Атрибут cellspacing - отвечает за расстояние от внешней границы ячейки до границы таблицы.

HTML
Код скопирован в буфер обмена copy

<table border="10" cellspacing="20"> </table>

                 

Атрибут cellpadding - отвечает за отступ внутри ячейки.

HTML
Код скопирован в буфер обмена copy

<table border="10" cellspacing="20" cellpadding="10"> </table>

               

В более сложные таблицы добавляются новые теги: <thead> , <tbody> , <th> . Давайте посмотрим, как их использовать.

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="10">
      <caption>Товары</caption>
      <thead>
              <th>Номер</th>
              <th>Наименование</th>
              <th>Цена</th>
      </thead>
      <tbody>
              <tr>
                  <td>Номер 1</td>
                  <td>Молоко</td>
                  <td>100 рублей</td>
              </tr>
              <tr>
                  <td>Номер 2</td>
                  <td>Хлеб</td>
                  <td>50 рублей</td>
              </tr>
              <tr>
                  <td>Номер 3</td>
                  <td>Масло</td>
                  <td>150 рублей</td>
              </tr>
      </body>
</table>

У нас получилось довольно много кода, но посмотрите на компактный результат:

Тег <thead>  - выделяет первую строку таблицы, чаще всего там пишется название столбца. Заголовки столбцов выделяются жирным шрифтом.

Поэтому теги ячеек внутри тега <thead> называем <th> .

Тег <tbody>  — это основная масса данных таблицы.

Тут, внутри тега tbody используем уже знакомые нам теги <tr>[/tag] + [tag]<td> .

Так же в таблице может быть заключительная строка. Чаще всего она подводит какой-то итог или для написания какого-то примечания для таблицы.

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

Для ячеек в теге <tfoot> используется стандартная связка тегов <tr> + <td> .

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="10">
      <caption>Товары</caption>
      <thead>
              <th>Номер</th>
              <th>Наименование</th>
              <th>Цена</th>
      </thead>
      <tbody>
              <tr>
                  <td>Номер 1</td>
                  <td>Молоко</td>
                  <td>100 рублей</td>
              </tr>
              <tr>
                  <td>Номер 2</td>
                  <td>Хлеб</td>
                  <td>50 рублей</td>
              </tr>
              <tr>
                  <td>Номер 3</td>
                  <td>Масло</td>
                  <td>150 рублей</td>
              </tr>
      </body>
      <tfoot>
              <tr>
                  <td>Итого</td>
                  <td>300 рублей</td>
              </tr>
      </tfoot>
</table>

                     

В итоговом варианте хорошо видно, как "ломается" сетка таблицы из-за того, что в последней строке количество ячеек отличается от предыдущих. Появляется как бы пустая ячейка без чётких границ.

Как это исправить?

Нам нужно "растянуть" вторую ячейку и объединить её с третьей. Нам поможет атрибут colspan . В значении атрибута необходимо написать какое количество ячеек должно быть объединено. В нашем случае - 2 .

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="10">
      <caption>Товары</caption>
      <thead>
              <th>Номер</th>
              <th>Наименование</th>
              <th>Цена</th>
      </thead>
      <tbody>
              <tr>
                  <td>Номер 1</td>
                  <td>Молоко</td>
                  <td>100 рублей</td>
              </tr>
              <tr>
                  <td>Номер 2</td>
                  <td>Хлеб</td>
                  <td>50 рублей</td>
              </tr>
              <tr>
                  <td>Номер 3</td>
                  <td>Масло</td>
                  <td>150 рублей</td>
              </tr>
      </body>
      <tfoot>
              <tr>
                  <td>Итого</td>
                  <td colspan="2">300 рублей</td>
              </tr>
      </tfoot>
</table>

                     

Так же обратите внимание, что тег заголовка таблицы <caption> находится внутри тега <table> , но не входит в <thead> или <tbody> . Он пишется отдельно от них.

Ячейки в строках мы объединять научились, но иногда приходится объединять ячейки в столбце. Для этого нам нужен атрибут rowspan

Он работает по аналогии с colspan , вам так же нужно указать значение, сколько ячеек сгруппируется по вертикали (в столбце).

Очень внимательно посмотрите, как это пишется в коде:

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="10">
      <caption>Продукты</caption>
      <thead>
              <th>Группа</th>
              <th>Наименование</th>
      </thead>
      <tbody>
              <tr>
                  <td rowspan="2">Молочная продукция</td>
                  <td>Молоко</td>
              </tr>
              <tr>
                  <td>Кефир</td>
              </tr>
              <tr>
                  <td rowspan="2">Хлебобулочные изделия</td>
                  <td>Хлеб</td>
              </tr>
              <tr>
                  <td>Печенье</td>
              </tr>
      </body>
</table>

                     

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

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="10">
      <caption>Продукты</caption>
      <thead>
              <th>Группа</th>
              <th>Наименование</th>
      </thead>
      <tbody>
              <tr>
                  <td rowspan="2">Молочная продукция</td>
                  <td>Молоко</td>
                  <td>Ряженка</td>
              </tr>
              <tr>
                  <td>Кефир</td>
              </tr>
              <tr>
                  <td rowspan="2">Хлебобулочные изделия</td>
                  <td>Хлеб</td>
              </tr>
              <tr>
                  <td>Печенье</td>
              </tr>
      </body>
</table>

                     

Для того, чтобы это исправить, "Ряженку" нужно поставить на следующую строку - на третью. А "Кефир", соответственно, на четвертую.

Не забудьте, что так у вас получится 3 строки для "Молочной продукции". Поэтому, не забудьте увеличить rowspan у "Молочной продукции" до трёх.

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="10">
      <caption>Продукты</caption>
      <thead>
              <th>Группа</th>
              <th>Наименование</th>
      </thead>
      <tbody>
              <tr>
                  <td rowspan="3">Молочная продукция</td>
                  <td>Молоко</td>
              </tr>
              <tr>
                  <td>Ряженка</td>
              </tr>
              <tr>
                  <td>Кефир</td>
              </tr>
              <tr>
                  <td rowspan="2">Хлебобулочные изделия</td>
                  <td>Хлеб</td>
              </tr>
              <tr>
                  <td>Печенье</td>
              </tr>
      </body>
</table>

                     

Переходим к верстке таблицы в нашей статье про Lego

Внимательно посмотрите на таблицу и представьте все её элементы. Какие теги вы будете использовать при ее оформлении.

В таблице <table> мы видим:

  • заголовок таблицы <caption>
  • жирным текстом выделена первая строка, а значит это <thead> с пятью ячейками <th>
  • нам нужно создать в <tdoby> из 4 строк <tr> по 5 ячеек <td>
  • <tfoot> в данной таблице отсутствует

Приступим к оформлению кода.

HTML
Код скопирован в буфер обмена copy

<table>
      <caption>Сравнение популярных наборов Lego</caption>
      <thead>
              <th>Текст</th>
              <th>Текст</th>
              <th>Текст</th>
              <th>Текст</th>
              <th>Текст</th>
      </thead>
      <tbody>
              <tr>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
              </tr>
              <tr>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
              </tr>
              <tr>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
              </tr>
              <tr>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
                  <td>Текст</td>
              </tr>
      </body>
</table>

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

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

Давайте добавим атрибут border со значением 1. И посмотрим результат в браузере.

HTML
Код скопирован в буфер обмена copy

<table border="1">
      <caption>Наименование таблицы</caption>
      <thead>
...
      </thead>
      <tbody>
...
      </body>
</table>

Уже лучше, но мы видим, что линии в таблице двойные. Это потому, что сама таблица имеет рамку и каждая ячейка в ней, так же имеет рамку. Чтобы соединить эти рамки нужно убрать cellspacing . Присвоить ему значение 0. Посмотрим в браузере, что получилось.

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0">
      <caption>Наименование таблицы</caption>
      <thead>
...
      </thead>
      <tbody>
...
      </body>
</table>

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

Это решается атрибутом cellpadding . Давайте пока что присвоим ему значение 15. То есть отодвинем на 15 пикселей границы от текста внутри ячейки.

Смотрим, что получилось.

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="15">
      <caption>Наименование таблицы</caption>
      <thead>
...
      </thead>
      <tbody>
...
      </body>
</table>

В целом, визуально таблица совпадает с той, что у нас в статье, только не хватает ширины таблицы. Это можно сделать атрибутом width . Значение можно поставить 700.

HTML
Код скопирован в буфер обмена copy

<table border="1" cellspacing="0" cellpadding="20" width="700">
      <caption>Наименование таблицы</caption>
      <thead>
...
      </thead>
      <tbody>
...
      </body>
</table>

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

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

Вот что у вас должно получиться в итоге:

Списки

В HTML бывает два вида списков: Нумерованные и Ненумерованные.

Нумерованный список - ordered list. Тег <ol> </ol>

Часто такие списки используются при перечислении каких-то параметров

  1. Параметр один;
  2. Параметр два;
  3. Параметр три.

Ненумерованный список - unordered list. Тег <ul> </ul>

Это просто маркерованный список, когда для него не важны порядковые номера.

  • Параметр один;
  • Параметр два;
  • Параметр три.

Элемент списка - list item. Тег <li> </li>

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

HTML
Код скопирован в буфер обмена copy

<ol>
      <li>элемент списка</li>
      <li>элемент списка</li>
      <li>элемент списка</li>
</ol>
<ul>
      <li>элемент списка</li>
      <li>элемент списка</li>
      <li>элемент списка</li>
</ul>

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

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

Давайте добавим список в наш файл index.html

Начнем с нумерованного списка.

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

Если смотреть на эту часть статьи мы четко видим структуру: Заголовок - Параграф - Нумерованный список.

Давайте обернем нужными тегами текст в нашем файле index.html

Обратите внимание на строки текста, когда вы копируете текст из сторонних программ или файлов и вставляете в VS он не всегда корректно становится по строкам. Не забывайте поправлять эти ошибки.

Добавьте нужные теги, сохраните файл и проверьте отображение в браузере.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
              <h1>Главный заголовок</h1>
              <p>Текст абзаца</p>
              <p>Текст абзаца</p>
              <p>
                  <q>Цитата</q>
                  <cite>Автор</cite>
              </p>
              <figure>
                   <img src="img/beatles.jpg" alt="Lego Beatles" width="700">
                   <figcaption>Коллекционный набор Lego The Beatles</figcaption>
              </figure>
              <h2>Заголовок второго уровня</h2>
              <p>Текст абзаца</p>
              <ol>
                   <li>Текст</li>
                   <li>Текст</li>
                   <li>Текст</li>
                   <li>Текст</li>
                   <li>Текст</li>
              </ol>
...
      </body>
</html>

Горячие клавиши

Для того чтобы быстро поменять парный тег можно воспользоваться горячими клавишами CTRL + D. Как это работает? Двойным кликом выделяете открывающий тег, нажимаете CTRL + D. У вас дополнительно выделится закрывающий тег. Далее можете написать новый тег сразу в двух местах - в открывающем и закрывающем теге. Для практики попробуйте изменить тег <ul> на <ol> . Посмотрите результат в браузере.

Не забудьте вернуть правильные теги, как в статье.

Атрибут нумерованного списка start

HTML
Код скопирован в буфер обмена copy

<ol start="6">
      <li>элемент списка</li>
</ol>

Этот атрибут показывает с какого номера будет начинаться нумерованный список. Хотите, чтобы ваш список начинался с номера 50, тогда пишем start="50" и т.п.
Если у вас стандартная нумерация списка, то атрибут start="1" не прописывают. Это значение у списка стоит по умолчанию.

Так же мы видим, что ключевые фразы написаны жирным текстом. На мой взгляд это просто дизайнерское выделение, поэтому можно использовать уже знакомый нам тег <b> </b>

Самостоятельно поработайте с параграфом и ненумерованным списком. Поставьте все необходимые теги.

Результат вашей работы:

Изображения

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

Так как мы работаем в интернете нам обязательно нужно обращать внимание на то, какой вес имеют изображения. Слишком "тяжёлые" картинки могут влиять на продуктивность работы сайта. То есть как быстро сайт будет грузиться у пользователя. Чем лучше показатели загрузки сайта, тем лучше он выдаётся в поисковых запросах. Поэтому этот момент важен не только для пользователя, но и для владельца сайта.

Есть два вида изображений: векторные и растровые.

Растровые изображения

Это изображения, состоящие из множества точек (пикселей). Например, все фотографии - растровые. И при приближении таких изображений вы можете наблюдать, что оно теряет качество.

Основные форматы: jpeg, png, webp, avif, gif

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

png - хорошо сохраняет качество и имеет прозрачность.

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

avif - новый формат изображений, который поддерживается не всеми браузерами (около 70%).

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

Векторные изображения

Такие изображения можно увеличивать без потери качества. Чаще всего этот формат используется для иконок, иллюстраций и фигур.

Формат: svg

svg — это код, благодаря которому на экране отображается рисованное изображение.

Все изображение перед использованием на сайте необходимо «сжимать». Это позволит оптимизировать работу сайта. Для этого можно использовать различные сайты-помощники. Вот некоторые из них:

https://www.iloveimg.com/

Контентные и декоративные изображения

Контентные изображения — это иллюстрации, которые непосредственно передают смысл текста на сайте.
Декоративные изображения — это картинки, которые просто украшают наш сайт и не несут никакой явной смысловой нагрузки.

Возвращаемся к практике

В прошлом уроке мы пропустили изображение в нашей статье. Давайте вернемся к нему сейчас и изучим тег <img> .

Тег <img> одиночный (не парный). У него нет закрывающего тега.

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

Чтобы это сделать нужно прописать свойство тега src="ссылка на картинку" .

HTML
Код скопирован в буфер обмена copy

<img src="ссылка на картинку">

Так же для тега <img> используется атрибут alt="Тут нужно описать, что изображено на картинке" .

HTML
Код скопирован в буфер обмена copy

<img src="ссылка на картинку" alt="описание картинки">

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

Вот так описание из атрибута alt выглядит в браузере, когда картинка не может быть загружена.

На примере изображена иконка "разбитой" картинки. В этом месте должна быть картинки, но я не указала на неё ссылку и браузер не смог её загрузить. Вместо этого он показал мне описание из атрибута alt - Lego Beatles

Так же атрибут alt считывается голосовыми помощниками и поисковыми системами.

Еще атрибуты для тега <img> - width и height .

Эти атрибуты нужны для того, чтобы определить размеры изображения.

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

HTML
Код скопирован в буфер обмена copy

<img src="ссылка на картинку" alt="описание картинки" width="ширина" height="высота">

То есть атрибуты просто указываются по порядку, между ними ставится пробел.

Возвращаемся в наш рабочий файл index.html .

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

Добавляем изображение в файл index.html

Создайте в папке проекта новую папку img

Скачайте изображение для статьи в папку img - Скачать

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
              <h1>Главный заголовок</h1>
              <p>Текст абзаца</p>
              <p>Текст абзаца</p>
              <p>
                  <q>Цитата</q>
                  <cite>Автор</cite>
              </p>
              <img src="img/beatles.jpg" alt="Lego Beatles">
              <h2>Заголовок второго уровня</h2>
...
      </body>
</html>

Сохраните изменения и посмотрите в браузере, что получилось.

Изображение кажется сильно большим. Давайте пропишем ему ширину равную 700 пикселям.

HTML
Код скопирован в буфер обмена copy

<img src="ссылка" alt="описание" width="700">

Если у изображения есть описание, в таком случае используется связка тегов:

Тег <figure> </figure> тег <figcaption> </figcaption> тег <img>  

Тег <figure> это группирующий тег - он связывает изображение и описание к нему.

HTML
Код скопирован в буфер обмена copy

<figure>

      <img src="ссылка" alt="описание">

      <figcaption>Подпись к изображению</figcaption>

</figure>

Давайте добавим к картинке описание изображения в специальный тег <figcaption> </figcaption> - Коллекционный набор Lego The Beatles

Вот, что у нас получилось.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
              <h1>Главный заголовок</h1>
              <p>Текст абзаца</p>
              <p>Текст абзаца</p>
              <p>
                  <q>Цитата</q>
                  <cite>Автор</cite>
              </p>
              <figure>
                   <img src="img/beatles.jpg" alt="Lego Beatles" width="700">
                   <figcaption>Коллекционный набор Lego The Beatles</figcaption>
              </figure>
              <h2>Заголовок второго уровня</h2>
...
      </body>
</html>

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

Нажмите F12 и давайте посмотрим, что нам покажет инспектор кода в браузере.

Если вы наведёте на тег <figure> , то браузер вам подсветит оранжевые области. Этим цветом обозначаются отступы .

Мы не прописывали эти отступы в коде, получается, что у тега <figure> они встроенные, то есть применяются по умолчанию. Это встроенные стили тега.

Для начала нам достаточно этих знаний для работы с изображениями.

Основные теги

Для лучшего понимания работы тегов, возьмем за основу статью и разберем её на составляющие.

Все теги выучить практически невозможно, их огромное множество. Поэтому абсолютно нормально пользоваться сторонними сервисами, например, https://html5book.ru/
Теги ищите в разделе html. Так же там вы найдете атрибуты, подходящие под каждый тег и описание использования тега в разных ситуациях.

Скачать итоговую статью можно тут: Скачать

Мы будем переносить разметку в наш файл .html по порядку и постепенно изучим несколько новых тегов.

Заголовки

Самое первое, что мы видим в статье - большой заголовок. В HTML заголовки бывают 6 типов:

HTML
Код скопирован в буфер обмена copy

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

<h3>Заголовок 3</h3>

<h4>Заголовок 4</h4>

<h5>Заголовок 5</h5>

<h6>Заголовок 6</h6>

Важность заголовков. Самый важный заголовок H1 . Наглядно это можно увидеть в текстовом редакторе:

Очень важно запомнить, что тег <h1> </h1> должен быть только один. И в нём должна быть прописана суть всей страницы. То, о чем эта страница. В том числе с помощью этого тега поисковые системы находят вашу страницу в интернете.

Далее заголовок H2 . Он отлично подойдет для названия разделов.

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

И так далее до заголовка H6 .

Технически, если вы присвоите разделу тег <h3> </h3> ничего не произойдёт, ваш код будет отображаться корректно. Но при написании кода существуют правила, чтобы не только вы могли читать свой код, но и другие разработчики. А также, чтобы вы сами могли прочитать свой код, вернувшись к нему спустя несколько месяцев, а то и лет. Если не будет правил и структуры, поверьте, вы уже не вспомните для чего и какой тег вы использовали. Поэтому, будьте внимательны к структуре, привыкайте к ней и запоминайте. Чистый, читаемый код - залог вашего успеха!

Для примера заголовок H1 на разных сайтах. Он хорошо выделен по сравнению с другим текстом, он крупнее.

"Создаем интерьеры для жизни", "Гибкая упаковка", "Психология как искусство быть рядом"

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

Давайте вернемся к нашему PDF-файлу со статьёй.

Первое что мы видим - большой заголовок"Почему взрослые играют в Lego: увлечение для всех возрастов"

Посмотрите всю статью, выделите для себя другие заголовки, подумайте, как бы вы их распределили от h1 до h6 . Помните, что не обязательно использовать все заголовки до h6 . Чаще всего используют заголовки до h3-h4 . Можете записать себе отдельно структуру заголовков, а походу выполнения задания сверяться со своими записями.

Откройте файл index.html в VS. Удалите все абзацы ( <p> </p> ), созданные в первом уроке. Скопируйте текст из статьи и вставьте его в код.

Не печатайте текст руками, просто выделите его в файле, скопируйте и вставьте в редактор кода.
Всегда старайтесь сокращать время на написание кода. Например, когда вам тестово нужно вставлять какой-то текст используйте текст-рыбу Lorem.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
          Почему взрослые играют в Lego: увлечение для всех возрастов
...
      </body>
</html>

Сохраните изменения и посмотрите в браузере как выглядит статья. Ваш браузер может показывать вам абру-кадабру. Но если показывает русский шрифт корректно, значит сейчас ничего менять не нужно (Google Chrome должен показывать корректно).

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

Давайте выделим заголовок статьи. Разместите текст заголовка в тег <h1> </h1> . Обновите страницу в браузере и посмотрите результат. Заголовок отделился от неформатированного текста и стал крупным.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
              <h1>Почему взрослые играют в Lego: увлечение для всех возрастов</h1>
...
      </body>
</html>

Посмотрите внимательно на статью. Дальше в ней идут два абзаца, которые мы уже умеем выделять с помощью тега <p> .

Так как VS умеет дописывать закрывающие теги, работа пойдет быстрее если вы выделите и вырежете абзац (Ctrl + X), пропишите тег <p> </p> и вставите в значение тега текст (Ctrl + V).

Сделайте в своем файле два параграфа после заголовка.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
              <h1>Почему взрослые играют в Lego: увлечение для всех возрастов</h1>
              <p>Lego — это не просто игрушки для детей. В последние годы...</p>
              <p>По данным компании Lego, около 75% взрослой аудитории признают, что...</p>
      </body>
</html>

Обратите внимание на оформление. Каждый абзац занимает только 1 строку (6 и 7). Бывает, что при копировании текста, увеличивается количество строк - это нужно исправлять.

Посмотрите в браузере результат. Параграфы должны визуально отделиться от общей массы текста.

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

Текст, выделенный жирным шрифтом: Теги <b> </b> и <strong> </strong>

Визуально текст с такими тегами в браузере будет выглядеть одинаково. Но у тегов есть так же и смысловая составляющая - что этот тег обозначает.

Тег <b> </b>  - просто выделяет текст жирным шрифтом. Это делается просто для дизайна.

Тег <strong> </strong>  - для поисковых систем этот тег очень важен. Для них он сильнее чем тег <b> . То есть текст, выделенный тегом <strong> несет очень сильную смысловую нагрузку. И голосовыми помощниками он будет выделяться сильнее. Такими помощниками, например, пользуются слепые люди.

Текст, выделенный курсивом Теги <i> </i> и <em> </em>

Тег <i> </i> - просто выделен курсивом ради дизайна.

Тег <em> </em>  - несёт важную смысловую нагрузку для поисковых систем и голосовых помощников.

Ещё немного про отличие этих тегов. Тег <strong> - этот тег несёт самую большую смысловую нагрузку. Эта та часть текста, где бы вы сказали: "ВНИМАНИЕ!". Тогда как тег <em> выделит ту часть текста, где нужно сказать: "Очень важное примечание! Не пропусти".

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

Первое что мы видим — это важное число. Так как текст у нас про Lego для взрослых, то и число это будет важным, т.к. мы хотим показать, что это хороший и важный показатель. Я выделяю курсивом - тегом <em> </em>

Далее идут статистические данные о росте продаж. В данном случае мы хотим усилить эти данные, показать насколько они важные. Выделяю тегом <strong> </strong>

После этого статистика покупателей и доля взрослой аудитории. На мой взгляд важной смысловой нагрузки это не несёт. Скорее это просто стилистическое оформление, чтобы привлечь внимание. Тег <i> </i>

Далее названия наборов. Эти слова хоть и выделены жирным, но не сильно влияют на интонацию в тексте. Тег <b> </b>

Проверьте себя:

Сохраните ваш код и посмотрите, как изменилась статья в браузере.

Следующий блок в нашем файле со статьей - Цитата. Тег <q> </q>

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

Если же автор цитаты указать необходимо можно использовать следующую конструкцию:

HTML
Код скопирован в буфер обмена copy

<p>
      <q>Цитата</q>
      <cite>Автор</cite>
<p>

Если обернуть слова в теги <q> и <cite> не используя при этом тег <p> , то мы просто выделим текст среди общей массы кавычками, никак не отделив его от основного текста.

Именно поэтому дополнительно эти теги "оборачиваются" в параграф <p> . Чтобы отделить цитату от общей массы неформатированного текста. Так же обратите внимание, что тег цитаты <q> автоматически подставляет кавычки, поэтому лишние кавычки из текста нужно убрать.

Добавьте цитату в ваш файл index.html и посмотрите, что получилось в браузере.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
              <h1>Главный заголовок</h1>
              <p>Текст абзаца</p>
              <p>Текст абзаца</p>
              <p>
                  <q>Цитата</q>
                  <cite>Автор</cite>
              </p>
      </body>
</html>

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

Далее идет изображение. Это довольно сложный элемент и на данном этапе кода мы его пропустим. Так же, пропускаем подпись к изображению. Позже мы к ним вернёмся.

Далее в статье можно отследить заголовки второго уровня <h2>

Почему это заголовки именно второго уровня. Мы помним, что заголовок <h1> у нас может использоваться только 1 раз и мы его уже использовали для самого главного заголовка статьи. Для ее названия. Заголовки второстепенные объединяют под собой некий сгруппированный текст по смыслу. Поэтому все три заголовка одинаковые по значимости и поэтому мы используем следующий уровень после <h1> . То есть тег <h2> .

Добавьте нужный тег к заголовкам.

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

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
      <head></head>
      <body>
              <h1>Главный заголовок</h1>
              <p>Текст абзаца</p>
              <p>Текст абзаца</p>
              <p>
                  <q>Цитата</q>
                  <cite>Автор</cite>
              </p>
              <h2>Заголовок второго уровня</h2>
...
              <h2>Заголовок второго уровня</h2>
...
              <h2>Заголовок второго уровня</h2>
      </body>
</html>

Комментирование текста

Если у вас в коде есть какая-то часть кода или текст, которые вы бы не хотели удалять, но в данный момент они вам не нужны в визуальном отображении в браузере - этот элемент можно закомментировать.

Горячие клавиши ALT + SHIFT + A (та же комбинация, чтобы снять комментарий)

Как это выглядит:

<!-- Закомментированная часть, которая не будет отображаться -->

Умный VS подсветит нам закомментированную часть зелёным цветом.

Попробуйте закомментировать текст в своем файле, сохраните и проверьте визуальное отображение в браузере. Текст для описания изображения должен исчезнуть.

*не забудьте убрать комментирование

Базовые знания

Вёрстка — это самый базовый навык, которым необходимо обладать, для того чтобы стать фронтенд-разработчиком. Вёрстка — это лицо вашего сайта.

Что будет на курсе:

  • HTML и CSS;
  • Основы Java Script (JS);
  • Научимся делать "резиновые" сайты;
  • Будет много практики и мотивации;
  • Создадим портфолио и научимся искать заказчиков и работодателей.

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

Код будем писать в программе «Visual Studio Code», которую вы ранее устанавливали в базовом курсе.

Вёрстка HTML — это язык текстовой разметки, с помощью которого вы говорите браузеру как показывать контент на сайте.

В начале курса мы посмотрим, как работает HTML, познакомимся с основными конструкциями, которые в нём есть и научимся их использовать.

Элементы разметки

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

HTML - это не язык программирования!

Это гипертекстовый язык разметки, благодаря ему мы объясняем браузеру как показывать контент на сайте.

Чтобы познакомится с HTML сразу перейдем к практике.

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

Откройте редактор кода Visual Studio Code (далее VS).

Горячие клавиши Ctrl + N - создаем новый файл - у вас в рабочей области появится новая вкладка.

Теперь этот файл нужно сохранить: Горячие клавиши Ctrl + Shift + S.

Название файла должно выглядеть так: index.html

Формат файла обязательно должен быть .html — это говорит нам о том, что такой файл будет открываться через браузер.

Теперь, введем в файле текст. В VS есть ряд встроенных плагинов, которые позволяют облегчить работу с кодом. Они умеют подставлять нужный код, подсвечивают ошибки и многое другое. Возможностей много, поэтому будем разбираться с ними постепенно. Часть из них вы уже опробовали в базовом курсе.
В первой строке начните писать слово Lorem и VS предложит вам написать большое предложение. Нажмите клавишу TAB, чтобы добавить предложенный текст. Разработчики называют этот текст "рыба".

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

Дальше, нам нужно сделать 3 таких текстовых абзаца и разделить их строками. Переход на новую строку делаем при помощи нажатия на клавишу Enter.

Как видите, текст уходит за рамки рабочего пространства, чтобы дальше нам было удобно его читать нажмите горячие клавиши Alt + Z. Вот, теперь всё хорошо видно.

Сохраняйте изменения горячими клавишами Ctrl + S. Когда работаете с кодом и проверяете его отображение в браузере, обязательно сохраняйте изменения, иначе они не отобразятся.

Теперь посмотрим, как нам этот файл будет отображать браузер.

Откройте браузер и нажмите горячие клавиши Ctrl + O и выберите созданный файл. Вы увидите, что текст в браузере отображается без разделения на строки. То есть браузер игнорирует пустые строки в html-файле.

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

Тег — это специальная конструкция, внутри которой прописан текст, буква, слово. Тегов в вёрстке много, поэтому мы будем знакомиться с ними постепенно.

Первым разберём тег <p> </p> - параграф. Это парный тег. У него есть открывающий тег <p> и закрывающий тег </p> . Необходимо «обернуть» наш текст Lorem… в этот тег. То есть поставить первую часть тега в начало параграфа, а вторую в конец.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi aspernatur nam repellendus perspiciatis tempore est amet officiis, ab odit doloribus in ea architecto non saepe aperiam culpa porro cum possimus.</p>

Когда начнёте ставить первую часть тега, вы увидите, что VS сам подставляет вам закрывающий тег </p> . Следите за этим, чтобы у вас не было лишнего кода. Второй закрывающий тег нужно ставить в конце параграфа. Так же, когда начнёте прописывать закрывающий тег, VS сам допишет некоторые символы. Следите, чтобы вы случайно их не задублировали.

Теперь дополнительные пустые строки между абзацами нам не нужны. Удалите их. Сохраните изменения Ctrl + S.

HTML
Код скопирован в буфер обмена copy

<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>

Возвращаемся в браузер и обновляем страницу горячими клавишами Ctrl + R. Вы увидите, что текст разделился на абзацы и между абзацами появилось дополнительное расстояние.

Теперь подробнее про сам тег <p> </p>

Это парный тег, который содержит в себе начальный (открывающий) и конечный (закрывающий) теги. Все правила, которые связаны с этим тегом применяются именно к его содержанию.

Начальный (открывающий) тег - <p>
Конечный (закрывающий) тег - </p>
Название тега - p
Содержание тега - Lorem… (тут содержание может быть любым)

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

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

Помимо названия тега он может содержать атрибуты. Атрибут позволяет более тонко настроить параметры тега.

Как атрибут вписывается в тег:

HTML
Код скопирован в буфер обмена copy

<p align="right">Привет!</p>

align - атрибут

right - его значение

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

Давайте добавим атрибут align в наш код в VS. Когда вы начнете прописывать атрибут и поставите знак равно (=) программа автоматически откроет вам кавычки. Вам остаётся только вписать значение атрибута.

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

Наш редактор кода VS достаточно современный, чтобы определять устаревшие атрибуты. Вы можете увидеть, что атрибут align подсвечен красным цветом - так редактор сообщает нам, что атрибут устарел. Но пока мы ничего менять не будем.

Давайте исследуем страницу html в браузере.

Нажмите F12 на клавиатуре. Либо правой кнопкой мыши «Проверить элемент» или «Посмотреть код». У вас откроется дополнительная панель, в которой мы можем исследовать код. Содержимое веб-страницы.

Эта панель может быть как снизу страницы, так и сбоку. На примере показана панель в браузере Mac Safari.

А вот так выглядит панель в браузере Google Chome:

Не обращайте внимание на содержание, тут для нас главное понять какая вкладка нам нужна. А нужна нам вкладка Elements (Элементы). Там мы видим содержимое нашей страницы, именно так, как мы написали его в нашем файле index.html

Нажимая на стрелочки, вы разворачиваете "дерево" и видите теги и их содержимое.

И если с тегами <p> всё понятно, то откуда взялись дополнительные теги <html> </html> , <head> </head> и <body> </body> ?

Сейчас наши браузеры достаточно продвинутые, чтобы самостоятельно дописать эти теги, но они могут сделать это не корректно. Поэтому в дальнейшем мы обязательно будем прописывать эти теги в нашем файле .html

Есть ещё один важный тег, который необходимо прописывать в файле, но браузер его нам не показывает.

Это тег <!doctype html> Благодаря этому тегу браузер понимает какая спецификация HTML используется. Мы не будем использовать другие спецификации, поэтому не будем заострять на этом внимание.

Допишите этот тег в своем файле. Обратите внимание, когда начнете набирать первые символы VS, предложит вам автозаполнение.

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

Тег <!doctype html> всегда пишется первым в файле. Обратите внимание, что этот тег одиночный - у него нет закрывающего тега.

HTML
Код скопирован в буфер обмена copy
<!DOCTYPE html>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>

Следующим идет парный тег <html> </html>

Очень важно запомнить, что весь контент (код) вашего сайта должен находиться внутри этого тега, кроме тега <!doctype>.

С помощью этого тега браузер считывает код вашего сайта.

Добавьте тег <html> </html> в ваш файл и перенесите параграфы внутрь тега. Следите за открывающим и закрывающим тегами.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
     <p align='right'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
     <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
</html>

Обратите внимание на отступы. Очень важно соблюдать "вложенность" каждого следующего элемента. Благодаря такому написанию разные блоки кода визуально отделены друг от друга.

Если мы вернёмся в браузер и еще раз посмотрим на панель с исследованием кода, то мы увидим, что параграфы "вложены" еще глубже - в тег <body> .

Два тега <head> и <body>  так же всегда будут присутствовать в нашем коде. Значение этих тегов отражено в их названии:

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

body - тело. Этот тег содержит в себе весь основной код страницы, который отображается в браузере и виден всем посетителям страницы.

Добавьте теги <head> и <body> в свой документ и перенесите контент. Обратите внимание, что оба тега парные, обязательно добавьте закрывающие теги.

HTML
Код скопирован в буфер обмена copy

<!DOCTYPEhtml>
<html>
     <head></head>
     <body>
         <p align='right'>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
         <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aspernatur qui tenetur itaque ducimus cupiditate quod libero ullam mollitia autem quas non doloribus aperiam optio, omnis error voluptatem est, corporis deleniti!</p>
     </body>
</html>

Сохраните изменения в файле. Перейдите в браузер и обновите страницу. Вы увидите в инспекторе кода, что все теги, которые мы прописали, отображаются корректно, в том числе и <!doctype> .

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