Web разработки: Изучение веб-разработки | MDN

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

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

• Я новичок Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «Начало работы с вебом», которая представляет собой практическое вступление в веб-разработку.
• Уже что-то знаю Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение HTML и CSS во всех подробностях: начните с нашей статьи «Введение в HTML», а затем загляните в статью «Вступление в CSS».
• Погружаемся в программирование Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в JavaScript или разработку на стороне сервера. Загляните в разделы «Первые шаги в JavaScript» и «Первые шаги в программировании веб-сайтов на стороне сервера».
• Фреймворки и инструменты Освоив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению инструментов веб-разработки на стороне клиента (en-US), а затем углубиться в JavaScript-фреймворки для фронтенда и программирование веб-сайтов на стороне сервера.

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

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

Начало работы с вебом

Практическое введение в веб-разработку для начинающих.

Изучение HTML: руководства и уроки

HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели.

В этой теме подробно рассматривается HTML.

CSS: стилизация веб-страниц

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

JavaScript: разработка клиентских скриптов для динамических веб-страниц

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

Веб-формы: работа с пользовательскими данными

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

Доступность: сделаем интернет доступным для всех

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

Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми

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

Инструменты и тестирование

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

Серверное программирование веб-сайтов

Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).

Представленные в обучающем разделе примеры кода доступны на GitHub. Если вы хотите скопировать их все на свой компьютер, самый простой способ — загрузить ZIP-архив с последней веткой основного кода.

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

1. Установите Git на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.
2. Откройте командную строку (Windows) или терминал (Linux, macOS).
3. Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка / терминал, используйте следующую команду:

   git clone https://github.com/mdn/learning-area
   

4. Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/проводника либо команды cd).

Вы можете обновить репозиторий learning-area и добавить любые изменения, внесённые в основную версию на GitHub, выполнив следующие действия:

1. В командной строке / терминале войдите в директорию learning-area командой cd. Например, если вы в родительском каталоге:

   cd learning-area
   

2. Обновите репозиторий, выполнив следующую команду:

   git pull
   

Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши списки рассылки или IRC-каналы. Мы хотели бы услышать от вас о том, что на нашем сайте что-то отсутствует или неправильно, запросы новых тем по обучению, просьбы помощи с аспектами, которые вы не понимаете, или что-то ещё.

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

Codecademy

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

Code.org

Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.

EXLskills

бесплатный и открытые курсы для обучения техническим навыкам, с наставничеством и обучением на основе проектов

Карта веб-грамотности

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

Преподавательская деятельность

Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.

Edabit

Тысячи интерактивных задач JavaScript.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 27 окт. 2022 г. by MDN contributors.

Начало работы с Вебом — Изучение веб-разработки

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

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

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

Установка базового программного обеспечения

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

Каким должен быть ваш веб-сайт?

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

Работа с файлами

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

Основы HTML

Язык гипертекстовой разметки (Hypertext Markup Language, HTML) — это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли моё содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья Основы HTML предоставляет достаточно информации для вашего знакомства с HTML.

Основы CSS

Каскадные таблицы стилей (Cascading Stylesheets, CSS) — это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? Основы CSS проведёт вас через то, что вам нужно знать, чтобы начать.

Основы JavaScript

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

Публикация вашего веб-сайта

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

Как работает Интернет

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

• Web Demystified(web обзор): большая серия видеороликов, объясняющая основы web, нацеленных на начинающих веб-разработчиков. Создано Жереми Патонье.
• The web and web standards (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему «веб-разработчик» — это отличная карьера, и какие виды наилучшей практики вы узнаете в ходе курса.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Что такое HTML

❮ Назад Следующее ❯

HTML стенда H YPER T EXT M ARKUP L ANGUAGE

HTML — Стандартные разметки Язы

HTML-элементы представлены тегами <>

HTML-элементы

HTML-элемент представляет собой начальный тег и конец тег с промежуточным содержанием:

Это заголовок

Начальный тег	Содержимое элемента	Конечный тег
	Это заголовок
	Это абзац.

---

Атрибуты HTML

• Элементы HTML могут иметь атрибутов
• Атрибуты предоставляют дополнительную информацию об элементе
• Атрибуты представляют собой пары имя/значение, например charset=»utf-8″

---

Простой HTML-документ

Это заголовок

Это абзац.

  

Это другой абзац.

Попробуйте сами »

Объяснение примера

HTML-элементы являются строительными блоками HTML-страниц.

• Объявление определяет этот документ как HTML5
• Элемент является корневым элементом HTML страница
• Атрибут lang определяет язык документа
• Элемент содержит метаинформацию о документе
• Атрибут charset определяет набор символов, используемый в документе
• Элемент

  <тело>

  Это заголовок

  Это абзац.

  Это другой абзац.

  Примечание: В браузере отображается только содержимое раздела (белая область выше).

  ---

  Заголовки HTML

  Заголовки HTML определяются тегами от

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

  Пример

  Это заголовок 1

  
  

  Это заголовок 2

  
  

  Это заголовок 3

  Попробуйте сами »

  ---

  ---

  HTML-абзацы

  Абзацы HTML определяются тегами

  :

  Пример

  Это абзац.

  
  

  Это другой абзац.

  Попробуйте сами »

  ---

  Ссылки HTML

  Ссылки HTML определяются тегами :

  Пример

  Это ссылка

  Попробуйте сами »

  Адрес ссылки указан в поле атрибут href .

  ---

  HTML-изображения

  HTML-изображения определяются с помощью тегов .

  Исходный файл ( src ), альтернативный текст ( alt ), ширина и высота предоставляются как атрибуты:

  Пример

  jpg» alt=»W3Schools»

  Попробуйте сами »

  ---

  8 Кнопки HTML

  <кнопка> tags:

  Example

  Click me

  Попробуйте сами »

  ---

  Списки HTML

  Списки HTML определяются с помощью

  (неупорядоченный/маркированный список) или
  (упорядоченный/нумерованный список) теги, за которыми следуют
  1. теги (элементы списка):

     Пример

     
      
     • Кофе
     
      
     • Чай
     
      
     • Молоко
     
     

     Попробуйте сами »

     ---

     HTML-таблицы

     HTML-таблица определяется тегом

     .

     Строки таблицы определяются с помощью тегов

     .

     Заголовки таблицы определяется с помощью

     
   
   
   


   
   
   

 
   
   
   
 


     тегов. (жирный и по центру по умолчанию). Ячейки таблицы (данные) определяются с помощью тегов	. Пример <таблица>
     Имя	Фамилия	Возраст
     Джилл	Смит	50
     Ева	Джексон	94

     Попробуйте сами »С помощью CSS»

     ---

     Программирование HTML

     Каждый элемент HTML может иметь атрибуты .

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

     Атрибут	Пример
     идентификатор	<таблица идентификатор =»table01″
     класс	класс =»нормальный»>
     стиль	стиль =»font-size:16px»>
     данные-	данные -id=»500″>
     по клику	onclick =»myFunction()»>
     при наведении мыши на	onmouseover =»this. setAttribute(‘стиль’,’цвет:красный’)»>

     ---

     Полное руководство по HTML

     Это краткое описание HTML.

     Полное руководство по HTML можно найти в W3Schools HTML Tutorial.

     Полный справочник по тегам HTML см. в справочнике по тегам W3Schools.

     ❮ Предыдущий Следующий ❯

     
     

     НАБОР ЦВЕТА

     ---

     ---

     ---

     Лучшие учебники

     Учебник по HTML
     Учебник по CSS
     Учебник по JavaScript
     Учебник How To
     Учебник по SQL
     Учебник по Python
     Учебник по W3.CSS
     Учебник по Bootstrap
     Учебник по PHP
     Учебник по Java
     Учебник по C++
     Учебник по jQuery
     

     Основные ссылки

     HTML Reference
     CSS Reference
     JavaScript Reference
     SQL Reference
     Python Reference
     W3.CSS Reference
     Bootstrap Reference
     PHP Reference
     HTML Colors
     Java Reference
     Angular Reference
     jQuery Reference
     

     
     Top Examples Примеры HTML
     Примеры CSS
     Примеры JavaScript
     Примеры How To
     Примеры SQL
     Примеры Python
     Примеры W3. CSS
     Примеры Bootstrap
     Примеры PHP
     Примеры Java
     Примеры XML
     Примеры jQuery
     

     ---

     FORUM | О

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

     Copyright 1999-2023 Refsnes Data. Все права защищены.
     W3Schools работает на основе W3.CSS.

     Что такое JavaScript

     ❮ Назад Далее ❯

     ---

     JavaScript — это язык программирования для Интернета.

     JavaScript может обновлять и изменять HTML и CSS.

     JavaScript может вычислять , манипулировать и проверять данных.

     ---

     Краткое руководство по JavaScript

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

     Переменные JavaScript могут быть:

     • Числами
     • Струны
     • Объекты
     • Массивы
     • Функции

     ---

     Переменные JavaScript

     Переменные JavaScript — это контейнеры для хранения значений данных.

     В этом примере переменные x, y и z:

     Пример

     var x = 5;
     вар у = 6;
     переменная г = х + у;

     Попробуйте сами »

     Из приведенного выше примера вы можете ожидать:

     • x сохраняет значение 5
     • y сохраняет значение 6
     • z хранит значение 11

     ---

     Числа JavaScript

     JavaScript имеет только один тип числа. Числа можно записывать как с десятичными знаками, так и без них.

     Пример

     var x = 3,14; // Число с десятичными знаками
     var y = 3; // Число без десятичных знаков

     Попробуй сам »

     Все числа хранятся как числа двойной точности с плавающей запятой.

     Максимальное количество десятичных знаков — 17, но число с плавающей запятой — нет. всегда 100% точность:

     Пример

     var x = 0,2 + 0,1; // х будет 0,30000000000000004

     Попробуй сам »

     ---

     Строки JavaScript

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

     Пример

     var carname = «Volvo XC60»; // Двойные кавычки
     var carname = ‘Volvo XC60’; // Одинарные кавычки

     Попробуйте сами »

     Длина строки находится во встроенном свойстве length :

     Пример

     var txt = «ABCDEFGHIJKLMNOPQRSTUVWXYZ»;
     var sln = txt.length;

     Попробуйте сами »

     ---

     ---

     Объекты JavaScript

     Вы уже узнали, что переменные JavaScript контейнеры для значений данных.

     Этот код присваивает простое значение (Fiat) для переменная именованный автомобиль:

     var car = «Fiat»;

     Попробуйте сами »

     Объекты тоже переменные. Но объекты могут содержать много ценности.

     Этот код присваивает множество значений (Fiat, 500, белый) переменная название автомобиля:

     var car = {тип: «Fiat», модель: «500», цвет: «белый»};

     Попробуйте сами »

     ---

     Массивы JavaScript

     Массивы JavaScript используются для хранения нескольких значений в одном переменная.

     Пример

     var cars = [«Saab», «Volvo», «BMW»];

     Попробуйте сами »

     ---

     Функции JavaScript

     Функция JavaScript — это блок кода, предназначенный для выполнения конкретная задача.

     Функция JavaScript выполняется, когда «что-то» вызывает его (вызывает).

     Пример

     function myFunction(p1, p2) {
         return p1 * p2; // Функция возвращает произведение p1 и p2
     }
     

     Попробуйте сами »

     ---

     Что умеет JavaScript?

     В этом разделе приведены некоторые примеры возможностей JavaScript:

     • JavaScript может изменять HTML-контент
     • JavaScript может изменять значения атрибутов HTML
     • JavaScript может изменять стили HTML (CSS)
     • JavaScript может скрывать элементы HTML
     • JavaScript может отображать элементы HTML

     ---

     JavaScript может изменять HTML-контент

     Одним из многих HTML-методов JavaScript является getElementById() .

     В этом примере метод используется для поиска HTML-элемента (с) и изменяет содержимое элемента ( innerHTML ) на «Привет! JavaScript»:

     Пример

     document.getElementById(«demo»).innerHTML = «Hello JavaScript»;

     Попробуйте сами »

     ---

     JavaScript может изменять значения атрибутов HTML

     В этом примере JavaScript изменяет значение Атрибут src (источник) тега :

     Лампочка

     Попробуй сам »

     ---

     JavaScript может изменять стили HTML (CSS)

     Изменение стиля элемента HTML — это вариант изменения HTML атрибут:

     Пример

     document.getElementById(«demo»).style.fontSize = «35px»;
     или
     document.getElementById(‘demo’).style.fontSize = ’35px’;

     Попробуйте сами »

     ---

     JavaScript может скрывать HTML-элементы

     Скрыть HTML-элементы можно, изменив стиль отображения:

     Пример

     document.

     No related posts.