Html academia: Курсы для новичков — HTML Academy

Разное 

HTML Academy — Блог компании на vc.ru

9 подкастов о веб-разработке на русском

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

Что такое семантическая вёрстка и зачем она нужна

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

Не лезьте в геймдев, он вас сожрёт (но вам понравится)

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

Что должно быть в макете сайта: шпаргалка для дизайнера

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

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

«Я никогда не научусь верстать» и другие мифы о разработке

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

12 полезных книг по JavaScript

Серия «Вы не знаете JavaScript», книга с носорогом, «Чистый код» и другая классика для веб-разработчиков.

10 правил онлайн-собеседований

htmlacademy.ru

Мир вокруг полыхает, но работу никто не отменял, а некоторым приходится её искать даже в сложных условиях. Ходить на собеседования вживую опасно и вредно, поэтому собеседования по зуму — настоящее спасение. Но даже в мире, полном удалённых работ и учёб, есть много нюансов, о которых легко забыть на онлайн-собеседовании.

Математика и много непонятных слов. Разбираемся насколько сложно стать программистом

Знакомьтесь, это Серёжа, продавец мебели из Москвы. Ему почти 30 лет, и он сомневается, нужно ли ему быть веб-разработчиком. Потому что может и так нормально?

Серёжа продаёт шкафы и попутно сомневается htmlacademy.ru

Как создаются интерактивные курсы. Разбираем поэтапно

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

Страница блога, который разрабатывается в тренажёрах

Пишем Телеграм-бота на JavaScript

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

Как найти работу начинающему программисту. 6 советов для джуна

Рассказывает Наталья Ёркина, тимлид из Ostrovok. ru. Полное интервью с Натальей можно посмотреть тут.

«Вы просто нажимаете на кнопки, любой так может». 18 глупых вопросов тестировщику

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

Шаблон простого сайта на HTML — Блог HTML Academy

Если вам нужно быстро сделать сайт на учёбе или для личных дел, используйте этот шаблон. Вы можете наполнить его чем угодно — добавить тексты, картинки или подключить любые стили, например, использовать Bootstrap или awsm.css. Как больше нравится.

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок страницы</title>
    <link rel="stylesheet" href="./styles/style.css">
  
    <meta property="og:title" content="Заголовок страницы в OG">
    <meta property="og:description" content="Описание страницы в OG">
    <meta property="og:image" content="https://example.
 
 com/image.jpg">
    <meta property="og:url" content="https://example.com/">
  </head>
  <body>
    <header>
      <h2>Это мой сайт</h2>
      <p>Он хороший</p>
      <nav>
        <ul>
          <li><a href="index.html">Эта страница</a></li>
          <li><a href="catalog.html">Другая страница</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <section>
          <h3>Первая секция</h3>
          <p>Она обо мне</p>
          <img src="images/image.png" alt="Человек и пароход">
          <p>Но может быть и о семантике, я пока не решил.</p>
        </section>
        <section>
          <h3>Вторая секция</h3>
          <p>Она тоже обо мне</p>
        </section>
        <section>
          <h3>И третья</h3>
          <p>Вы уже должны были начать догадываться.

  
 </p>
        </section>
      </article>
    </main>
    <footer>
      <p>Сюда бы я вписал информацию об авторе и ссылки на другие сайты</p>
    </footer>
    <!-- сюда можно подключить jquery <script src="scripts/app.js" defer></script> -->
  </body>
</html>

Скачать шаблон

Как может выглядеть сайт по такому шаблону

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

История DOCTYPE

Доктайп помогает браузеру понять, как отображать страницу. 

<!DOCTYPE html>

Тег, в котором мы показываем, что наша страница на русском языке.

<html lang="ru">

Называем кодировку страницы — для русского языка подходит utf-8.

<meta charset="utf-8">

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

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

Подключаем файл со стилями — замените ./styles/style.css

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

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

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

<meta property="og:title" content="Заголовок страницы в OG">
<meta property="og:description" content="Описание страницы в OG">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/">

Это шапка сайта — блок, который может повторяться на любой странице.

<header>
</header>

Какие нужны заголовки и какие теги использовать

Это заголовки первого и второго уровня.

<h2>Это мой сайт</h2>
<h3>Первая секция</h3>

Это верхняя навигация <nav>, в которой ссылки сделаны списком <ul> и завёрнуты в тег <li>.

<nav>
  <ul>
    <li><a href="index.html">Эта страница</a></li>
    <li><a href="catalog.html">Другая страница</a></li>
  </ul>
</nav>

Семантический тег, в котором хранится основное содержимое страницы, которое относится только к этой странице.

<main>

Изображение, картинка или фотография. Обязательно с атрибутом alt — он важен, не забывайте о нём.

<img src="images/image.png" alt="Человек и пароход">

Параграф текста — здесь пишем просто какой-то текст, который хотим вынести на страницу. Подробнее — в тренажёре.

<p>Но может быть и о семантике, я пока не решил.</p>

Если захотите подключить JavaScript и добавить интерактивные элементы, можете сделать это в этом блоке — достаточно раскомментровать.

<!-- сюда можно подключить jquery <script src="scripts/app.js" defer></script> -->

На этом всё, дорабатывайте шаблон по своему усмотрению. Например,

  1. Добавьте телефон
  2. Прикрутите интерактивную диаграмму
  3. Подключите красивые шрифты

Удачи в обучении!

Learn HTML: Элементы и структура Cheatsheet

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

Содержимое элемента

Содержимое элемента HTML — это информация между открывающим и закрывающим тегами элемента.

 
 
Codecademy — это круто! 🙂

  • Элемент списка

  • элемент элемента списка создать элементы списка внутри:

    • Упорядоченные списки
      1. Ненумерованные списки 
         
         
           
           
           
        1. Двигайтесь на восток по Prince St
          2.  
           
           
        2. Поверните налево на Elizabeth
          3.  
           
           
         
         
         
           
           
           
        • Cookies 
          •  
           
           
        • Молоко
          •

        Элемент Video

        Элемент

        Элемент включает медиаплеер для воспроизведения видео. Атрибут src будет содержать URL-адрес видео. Добавление атрибута elements отобразит элементы управления видео в медиаплеере.

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

         
         <управление видео src="test-video.mp4"> 9Видео не поддерживается 
         
         
         
        Это слово будет выделено курсивом.
         
         
            Элемент упорядоченного списка
           Элемент 
              упорядоченного списка создает список предметов в последовательном порядке. По умолчанию каждый элемент списка отображается пронумерованным.
             
             
               
               
               
            1. Разогрейте духовку до 325 F 👩‍🍳
              2.  
               
               
            2. Отправьте тесто для печенья 🍪
              3.  
               
               
            3. Выпекайте 15 мин ⏰
              4.  
               
               
             
             
              Элемент Div
             Элемент 
              используется в качестве контейнера, который делит документ HTML на разделы и является сокращением от «division».  Элементы
              могут содержать  потоковое содержимое , такое как заголовки, абзацы, ссылки, изображения и т. д.
             
             
             
             
             
            Раздел сгруппированных элементов
             
             
             
            Вот текст для раздела
             
             
             
             
             
             
             
             
             
            Второй раздел сгруппированных элементов
             
             
             
            Вот текст
             
             
             
             
             
             Структура HTML 
             HTML организован в виде генеалогического древа. Элементы HTML могут иметь родителей, бабушек и дедушек, братьев и сестер, детей, внуков и т. д.
             
              
             
             
             
             
             
            Это дочерний элемент div и внук body
             
             
             
            Это родственный элемент h2
             
             
             
             
            3  
             
             Закрывающий тег 
             Закрывающий тег HTML используется для обозначения конца элемента HTML. Синтаксис закрывающего тега: левая угловая скобка  < , за которой следует косая черта /, затем имя элемента и правая угловая скобка для закрытия  >  .
             
              
             
             ... 
             
              
             
             Имя и значения атрибута 
             Атрибуты HTML состоят из имени и значения, использующего следующий синтаксис:  name="16 and value" может быть добавлен к открывающему тегу HTML-элемента для настройки или изменения поведения элемента.
             
              
             
             
                          Элемент разрыва строки
             Элемент разрыва строки  
                          создает разрыв строки в тексте и особенно полезен там, где требуется разделение текста, например, в почтовом адресе. Элемент разрыва строки требует только открывающего тега и не должен иметь закрывающего тега.
             
             Хайку с разрывом строки.
             
             
             Стихи — отличный вариант использования.
             
             
             О, радость! Разрыв строки. 
             
               Элемент изображения
             Изображение HTML   9Элементы 0016 встраивают изображения в документы. Атрибут  src  содержит URL-адрес изображения и является обязательным.    — это пустой элемент  , означающий, что у него не должно быть закрывающего тега.
             
              
             
             - 
             Элементы заголовков
             HTML может использовать шесть различных уровней элементов заголовков. Элементы заголовка упорядочены от самого высокого уровня 
             до самого низкого уровня 
             .
             
             
            Последние новости
             
             
             
            Это первый подзаголовок
             
             
             
            Это второй подзаголовок
             
             
             ... 
             
             
             Это пятый подзаголовок
             
             
              Элемент абзаца
             Элемент абзаца 
              содержит и отображает блок текста.
             
             
            Это блок текста! Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
             
             
             Атрибуты уникального идентификатора 
             В HTML конкретные и уникальные атрибуты  id  могут быть назначены различным элементам, чтобы различать их.
             При необходимости значение  id  может вызываться CSS и JavaScript для манипулирования, форматирования и выполнения определенных инструкций для этого элемента и только для этого элемента. Действительные атрибуты  id  должны начинаться с буквы и должны содержать только буквы (  a-Z  ), цифры (  0-9  ), дефисы (  -  ), символы подчеркивания (  _  ) и точки (  .  ).
             
             
            Hello World
             
             
             Атрибуты HTML 
             Атрибуты HTML — это значения, добавляемые к открывающему тегу элемента для настройки элемента или изменения поведения элемента по умолчанию. В приведенном примере мы даем элементу 
              (абзац) уникальный идентификатор, используя атрибут  id , и меняем цвет текста по умолчанию, используя  атрибут стиля .
             
             
            Вот текст для абзаца, который изменяется атрибутами HTML
             
             
                Элемент неупорядоченного списка
               Элемент неупорядоченного списка 
                  используется для создания список предметов в произвольном порядке. Каждый отдельный элемент списка по умолчанию будет иметь маркер.
                 
                 
                   
                   
                   
                • Включите больше музыки 🎸
                  •  
                   
                   
                • Читайте больше книг 📚
                  •  
                   
                   
                 
                 
                 alt  Атрибут
                 Элемент    может иметь альтернативный текст через атрибут  alt . Альтернативный текст будет отображаться, если изображение не отображается из-за неправильного URL-адреса, если формат изображения не поддерживается браузером, если отображение изображения заблокировано или если изображение не было получено по URL-адресу.
                 Текст будет прочитан вслух, если используется программное обеспечение для чтения с экрана и помогает поддерживать пользователей с нарушениями зрения, предоставляя текстовый дескриптор для содержимого изображения на веб-странице.
                 
                  
                 
                  Элемент Body
                 Элемент   представляет содержимое документа HTML. Содержимое внутри  тегов  отображается в веб-браузерах.
                  Примечание:  В документе может быть только один элемент  .
                 
                  
                 
                 
                Учитесь программировать с Codecademy :)
                 
                 
                  
                 
                   Элемент Span
                 Элемент    представляет собой встроенный контейнер для текста и может использоваться для группировки текста в целях стилизации. Однако, поскольку    является универсальным контейнером для отделения фрагментов текста от более крупного текста, его следует избегать, если доступен более семантический элемент.
                 
                 
                Этот текст может быть оформлен иначе, чем окружающий текст. 
                 
                 
                   Strong Element
                 Элемент    выделяет важный, серьезный или срочный текст, и браузеры обычно отображают этот выделенный текст жирным шрифтом   по умолчанию.
                 
                 
                Это важный текст!
                 
                 
                 HTML-элемент 
                 HTML-элемент — это часть содержимого в HTML-документе, использующая следующий синтаксис: открытие тег + контент + закрывающий тег. В приведенном коде:
                •  
                    — открывающий тег.
                •   Привет, мир!  - это содержимое.
                •  
                                      — закрывающий тег.
                 
                 
                Hello World!
                 
                 
                 HTML-тег 
                 Синтаксис одного HTML-тега: открывающая угловая скобка  < , за которой следует имя элемента и закрывающая угловая скобка  >  . Вот пример открытия 
                 9тег 0016.
                   Элемент привязки
                 Элемент привязки    используется для создания гиперссылок в документе HTML. Гиперссылки могут указывать на другие веб-страницы, файлы на том же сервере, местоположение на той же странице или любой другой URL-адрес через атрибут ссылки гиперссылки  href  .  href  определяет местоположение, на которое указывает элемент привязки.
                 
                  
                 
                 Посетить этот сайт 
                 
                  
                 
                  
                 
                 Нажмите на это изображение 
                 
                  
                 
                  Элемент Head
                 Элемент   содержит общую информацию о странице HTML, которая не отображается на самой странице. Эта информация называется метаданными и включает в себя такие вещи, как заголовок HTML-документа и ссылки на таблицы стилей.
                 
                  
                 
                  
                 
                  
                 
                  
                 
                  
                 
                  
                 3 3 target>                  Target Attribute  
                 Атрибут  target  в элементе привязки    указывает, где должна быть открыта гиперссылка. Целевое значение  , равное  "_blank" , сообщит браузеру, что нужно открыть гиперссылку на новой вкладке в современных браузерах или в новом окне в старых браузерах, или если в настройках браузера были изменены настройки для открытия гиперссылок в новом окне. . 
                 
                 
                 Эта привязка ссылается на Google и откроется в новой вкладке или окне. 
                 
                 Отступ 
                 Код HTML должен быть отформатирован таким образом, чтобы уровень отступа текста увеличивался один раз для каждого уровня вложенности.
                 Общепринято использовать два или четыре пробела   на уровень вложенности.
                 
                 
                 
                 
                 
                Заголовок
                 
                 
                 
                   
                   
                   
                • Элемент 1
                  •  
                   
                   
                • Элемент 2
                  •  
                   
                   
                 
                 
                 
                 
                 
                 Ссылка на другую часть страницы 
                 # 
                 Элемент привязки    может создавать гиперссылки на разные части одного и того же HTML-документа, используя атрибут  href , указывающий на нужное место с  # , за которым следует идентификатор   элемента для ссылка к.
                 
                 
                 
                 
                 
                Другая часть страницы!
                 
                 
                 
                 
                 
                 Взять перейти в другую часть страницы 
                 
                  Элемент HTML
                 Элемент  , корень документа HTML, должен быть добавлен после объявления  !DOCTYPE . Весь контент/структура HTML-документа должна находиться между началом и закрытием   тегов.
                 
                  
                 
                  
                 
                  
                 
                  
                 
                 В HTML комментарии могут быть добавлены между открытием   и закрытие  -->  . Контент внутри комментариев не будет отображаться браузерами и обычно используется для описания части кода или предоставления других деталей.
                 Комментарии могут занимать одну или несколько строк.
                 
                  
                 
                 
                Контент
                 
                 
                  
                 
                 Пробелы 
                 Пробелы, такие как разрывы строк, добавляемые в HTML-документ между блочными элементами, обычно игнорируются браузером и не добавляются для увеличения интервала на отображаемой HTML-странице. Вместо этого пробел добавляется для организации и облегчения чтения самого HTML-документа.
                 
                 
                Тестовый абзац
                 
                 
                  
                 
                 
                Еще один тестовый абзац, это сидеть прямо под первым абзацем, без пробелов между ними.
                 
                 
                 </code> Элемент заголовка</h4><p> Элемент <code><title> </code> содержит текст, определяющий заголовок HTML-документа. Заголовок отображается в строке заголовка браузера или на вкладке, на которой отображается HTML-страница. 9Элемент 0015<title> </code> может содержаться только внутри элемента <code><head> </code> документа.</p><pre data-testid="colorized-block" tabindex="0"> <p> <!DOCTYPE html> </p> <p> <html> </p> <p> <head> </p> <p> <title>Заголовок страницы HTML 
                 
                  
                 
                  
                3 
                3 Файл  
                 
                 Пути URL-адресов в HTML могут быть абсолютными путями, такими как полный URL-адрес, например:  https://developer. mozilla.org/en-US/docs/Learn  или относительный путь к файлу, который ссылается на локальный файл в той же папке или на том же сервере, например:  ./style.css  . Относительные пути к файлам начинаются с  ./, за которыми следует путь к локальному файлу.  ./  указывает браузеру искать путь к файлу из текущей папки. 
                 
                 
                 URL для этого элемента привязки является абсолютным путем к файлу. 
                 
                 URL для этого элемента привязки является относительным путем к файлу. 
                 
                 Объявление типа документа 
                 Объявление типа документа    требуется в качестве первой строки документа HTML. Объявление doctype — это инструкция для браузера о том, какой тип документа ожидать и какая версия HTML используется, в данном случае это HTML5.
                 
                  
                 
                 Значок стрелки вправо NextMini
                 курс
                 Изучение HTML 
                 Подходит для начинающих,
                  6  Уроки
                 путь навыков
                 Создание веб-сайта с помощью HTML, CSS и страниц GitHub 
                 Подходит для начинающих,
                  18  Уроки Изучите таблицу
                 HTML | Codecademy
                  Элемент строки таблицы
                 Элемент строки таблицы   используется для добавления строк в таблицу перед добавлением данных таблицы и заголовков таблицы.
                 
                 <таблица> 
                 
                  
                 
                 ... 
                 
                  
                 
                  
                 
                  Элемент данных таблицы
                 Элемент данных таблицы   может быть вложен в элемент строки таблицы,   , чтобы добавить ячейку данных в таблицу.
                 
                 
                 
                 
                 
                 
                 
                  
                  данные первой ячейки  данные второй ячейки  
                  
                 
                 
                  Элемент заголовка таблицы
                 Элемент заголовка таблицы,  , определяет заголовки столбцов таблицы, инкапсулированные в строки таблицы.
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                    
                  заголовок 1  заголовок 2  
                                       
                  столбец 1   col 2   
                                    
                 
                 
                 Rowsspan  Attribute66 Аналогично  Colspan ,  Rowspan 66666666666666666666666666666666. заголовок таблицы или элемент данных таблицы указывает, сколько строк эта конкретная ячейка должна охватывать в таблице. Значение  rowspan  по умолчанию равно 1 и принимает любое положительное целое число до 65534.
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 < /tr> 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                  
                  строка 1:  столбец 1  столбец 2  
                  
                  строка 2 (эта строка будет занимать 2 строки):  столбец 1  столбец 2   
                  столбец 1  столбец 2  
                  
                  строка 3:  столбец 1  столбец 2  
                  
                 
                 
                  Элемент тела таблицы
                 Элемент тела таблицы,   , представляет собой семантический элемент, который будет содержать все данные таблицы, кроме содержимого заголовка и нижнего колонтитула. Если используется,   будет содержать всю строку таблицы   элементов и указывает, что   элементов составляют тело таблицы. 
                 не может иметь как , так и  в качестве непосредственных дочерних элементов.
                 
                 
                  
                 
                 
                 
                 
                 
                 
                 
                 2строка 2
                 
                 
                 
                 
                 
                 
                    
                  строка 1  
                  
                   
                 
                 
                		строка 2 
                  
                  row 3  
                                    
                 
                 
                  Элемент заголовка таблицы 001
                 Элемент заголовка таблицы, >  используется для добавления заголовков к строкам и столбцам таблицы и должен быть заключен в элемент строки таблицы,   .
                 
                 <таблица> 
                 
                  
                 
                 первый столбец 
                 
                 второй столбец 
                 
                  
                 
                  
                 
                 1 
                 
                 2 
                 
                  
                 
                  
                 
                 1 900 Attribute 
                 Атрибут  colspan  в заголовке таблицы   или в элементе table data   указывает, сколько столбцов эта конкретная ячейка должна охватывать в таблице. Значение  colspan  по умолчанию равно 1 и принимает любое положительное целое число от 1 до 1000.
                 
                 <таблица> 
                 
                  
                 
                 строка 1: 
                 
                 столбец 1 
                 
                 столбец 2 
                 
                  столбец 3 
                 
                  
                 
                  
                 
                 строка 2: 
                 
                 столбец 1 (будет занимать 2 столбца) 
                 
                 столбец 2 
                 
                 столбец 3 
                 
                  
                 
                  
                 
                  Элемент нижнего колонтитула таблицы
                 Элемент нижнего колонтитула таблицы,   , использует строки таблицы для предоставления содержимого нижнего колонтитула или для суммирования содержимого в конце таблицы.
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                    
                  заголовок 1  заголовок 2  
                                      
                  col 1  col 2  
                                      
                  резюме столбец 1  резюме столбца 2  
                                    
                 
                 
                 6 Элемент таблицы
                6 HTML элемент 
                 имеет содержимое, которое используется для представления двумерной таблицы, состоящей из строк и столбцов.
                No related posts.
                 
                     Автор записи 
                Добавить комментарий 
                Ваш адрес email не будет опубликован. Обязательные поля помечены *