Изучите HTML5 на этом бесплатном интерактивном курсе для начинающих

1656645497 izuchite html5 na etom besplatnom interaktivnom kurse dlya nachinayushhih

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

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

Нажмите на изображение, чтобы перейти на страницу курса
Нажмите на здесь чтобы перейти на страницу курса

В течение курса Эрик проведет вас от начинающего к опытному владению HTML, показывая вам, как создать веб-сайт. И самое приятное: чтобы пройти курс, вам понадобится меньше часа!

Теперь давайте посмотрим, как он построен.

Содержание курса

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

Урок №1: Знакомство с Интернетом

1*uY2K9BXnJ-uP4X9vAPvfDg

Начинается с того, что вы узнаете немного об Интернете в целом, рассмотрите клиентов, серверы и три языка, на которых говорят браузеры: HTML, CSS и JavaScript.

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

Урок №2: Создание документа HTML

1*O0F7kNLF412jOLz6dP3XkQ

Следующим шагом является создание вашего первого документа HTML. В этой лекции будет объяснено, как работают файлы HTML, а также даны вам краткие навыки относительно строки URL в браузере.

Урок №3: Элементы вложенности

1*84ti63CghL17e22bu_7mIg

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

Урок №4: Главные элементы и скрипты

<head>  
  <title>Learning HTML</title>  
  <meta charset="UTF-8">  
  <meta name="desctiption" content="My first HTML website">  
  <meta name="viewport" content="width=device-width, intial-scale=1.0">  
  <link rel="stylesheet" href="  
  <link rel="stylesheet" href="  
  <style>  
    h1 {  
      text-align: center;  
    }  
  </style>  
  <script>  
    document.getElementById("h1").innerHTML = "Hello Universe!";  
  </script>  
</head>

Элемент head является первым тегом HTML после <html> сам тэг. Это контейнер для метаданных и часто определяет название**,** набор символов, стили, ссылки, сценарии и другую метаинформацию.

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

Урок №5: Элементы макета

1*F39HrDLec0NvKoaMK3lZDg

HTML5 представил кучу элементов макета, делающих HTML более семантическим. Эти новые теги теперь усиливают значение наиболее часто используемых элементов макета, таких как <header> <article> <aside> и <footer>тогда как в прошлые времена мы имели лишь нелепый элемент, как <div> использовать. В этом ящике вы узнаете о наиболее полезных и важных из них.

Урок №6: Элементы фигуры и изображения

1*5TENKIfD5Q3klY2skLS14Q

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

Урок №7: Встраивание видео

1*N45m6ef7HyUyDEM4oTJ-qw

Возможно, вы заметили, что видео с YouTube есть по всей сети, не правда ли? Не только на youtube.com. Это стало возможным благодаря одной из функций HTML для вставки мультимедиа на страницу из другого места в Интернете. В этом уроке мы рассматриваем методы вставки видео с таких сайтов, как YouTube, а также непосредственно с видеофайла.

Урок №8: Панель навигации и элементы списка

1*sGbn8eMzacjpzJQoO8UaFw

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

Урок №9: Заголовки

1*Xh0zp6eosxQsCp9C3s8s5Q

Заголовки создаются с помощью <h*> тег, где знак* нужно заменить цифрами от 1 до 6. Важность заголовка падает с увеличением числа, т.е. <h1> это тот, который обычно используется для важнейшего заголовка или текста на своей странице.

Урок №10: Форматирование абзацев и текста (часть 1)

1*aydm1Ni1yLwAQn3xn8HxpA

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

Урок №11: Форматирование текста (часть 2)

1*SZ3DuSMio-lNb1EQ5vHf-g

В этом уроке вы узнаете больше о форматировании, но с тегами, влияющими на большие блоки текста. Примерами этого есть <code> элемент и <blockquote> элемент.

Урок №12: Таблицы (часть 1)

1*AGQ66VeOeDOJzO1qK-KLig

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

Урок №13: Таблицы (часть 2)

1*9KLwnPQq2FDXhEgnB5ulAQ

В этом уроке вы узнаете более сложные элементы таблиц, например <thead>, <tbody>и <tfoot>. Они позволяют отдельно управлять элементами внутри заглавия, тела и нижнего колонтитула.

Вы также будете подвергнуты воздействию <colgroup>что позволяет добавлять стили к определенным столбцам.

Урок №14: ссылки на страницы и последние штрихи

1*Fj7VP0FXfgB7KExjKwhMgw

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

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

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

Формат Scrimba

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

Вот gif, объясняющий концепцию:

Приостановить скринкаст → Редактировать код → Запустить!  → Просмотрите свои изменения

Приостановить скринкаст → Редактировать код → Запустить! → Просмотрите свои изменения

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

Так чего же вы ждете? Перейдите на страницу курса и начните сегодня!

Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba – самый простой способ научиться кодировать. Если вы хотите научиться создавать современный веб-сайт на профессиональном уровне, посетите наш курс по адаптивному веб-дизайну.

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

Добавить комментарий

Ваш адрес email не будет опубликован.