Это место - твой путеводитель в мир веб-разработки. Советы, уроки, литература - всё самое нужное и полезное.
Канал будет очень удобен как людям не знакомым с Фронтент и Бекенд разработкой, так и тем кто уже давно этим занимается!
Хештеги, для ориентирования на канале:
▫️ #совет
▪️ #код
▫️ #инструменты
▪️ #Задача
▫️ #Интересно
▪️ #Frontend
▫️ #Backend
Различные языки программирования:
▫️ #JavaScript
▪️ #CSS
▫️ #С
▪️ #C_Sharp
▫️ #Python
▪️ #SQL
▫️ #HTML
Различные инструменты помечаются отдельным хештегом
По мере необходимости хештеги будут дополняться
Канал будет очень удобен как людям не знакомым с Фронтент и Бекенд разработкой, так и тем кто уже давно этим занимается!
Хештеги, для ориентирования на канале:
▫️ #совет
▪️ #код
▫️ #инструменты
▪️ #Задача
▫️ #Интересно
▪️ #Frontend
▫️ #Backend
Различные языки программирования:
▫️ #JavaScript
▪️ #CSS
▫️ #С
▪️ #C_Sharp
▫️ #Python
▪️ #SQL
▫️ #HTML
Различные инструменты помечаются отдельным хештегом
По мере необходимости хештеги будут дополняться
История и общие сведения про HTML
HTML — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.
Язык XHTML является более строгим вариантом HTML, он следует синтаксису XML и является приложением языка XML в области разметки гипертекста.
В HTML можно встроить программный код на языке программирования JavaScript, для управления поведением и содержанием веб-страниц. Также включение CSS в HTML описывает внешний вид и макет страницы.
HTML — стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Веб-браузеры получают HTML документ от сервера по протоколам HTTP/HTTPS или открывают с локального диска, далее интерпретируют код в интерфейс, который будет отображаться на экране монитора.
Язык XHTML является более строгим вариантом HTML, он следует синтаксису XML и является приложением языка XML в области разметки гипертекста.
В HTML можно встроить программный код на языке программирования JavaScript, для управления поведением и содержанием веб-страниц. Также включение CSS в HTML описывает внешний вид и макет страницы.
История и общие сведения про CSS
CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML).
CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц.
Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы.
Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля
CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML).
CSS используется создателями веб-страниц для задания цветов, шрифтов, стилей, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц.
Основной целью разработки CSS является ограждение и отделение описания логической структуры веб-страницы от описания внешнего вида этой веб-страницы.
Кроме того, CSS позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана) или при выводе устройствами, использующими шрифт Брайля
История и общие сведения про JS
JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.
JavaScript — мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили.
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.
HTML - Введение №1
HTML - это стандартный язык разметки для создания Веб страниц.
Что это такое:
– HTML - расшифровывается как Гипертекстовый Язык Разметки.
– HTML - код описывает структуру веб страниц с помощью разметки.
– HTML - элементы являются строительными блоками страниц HTML.
– HTML - элементы представляют теги.
– HTML - теги содержат, "Заголовок", "Параграф", "Таблицы" и т.д.
– Браузеры не отображают теги HTML, они используют их для вывода содержимого страницы.
Пример программы:
HTML - это стандартный язык разметки для создания Веб страниц.
Что это такое:
– HTML - расшифровывается как Гипертекстовый Язык Разметки.
– HTML - код описывает структуру веб страниц с помощью разметки.
– HTML - элементы являются строительными блоками страниц HTML.
– HTML - элементы представляют теги.
– HTML - теги содержат, "Заголовок", "Параграф", "Таблицы" и т.д.
– Браузеры не отображают теги HTML, они используют их для вывода содержимого страницы.
Пример программы:
<!DOCTYPE html>
<html>
<head>
<title>HTML пример</title>
</head>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
</body>
</html>
📓 #HTML
HTML - Введение №2
Объяснение примера из первой части.
<!DOCTYPE html> - декларация, определяет документ HTML5
<html> - элемент, является корневым элементом HTML страницы
<head> - элемент, содержит метаинформацию о документе
<title> - элемент, задает заголовок документа
<body> - элемент, содержит видимый контент страницы
<h1> - элемент, определяет большой заголовок
<p> - элемент, определяет параграф
Что такое HTML элемент?
HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:
Объяснение примера из первой части.
<!DOCTYPE html> - декларация, определяет документ HTML5
<html> - элемент, является корневым элементом HTML страницы
<head> - элемент, содержит метаинформацию о документе
<title> - элемент, задает заголовок документа
<body> - элемент, содержит видимый контент страницы
<h1> - элемент, определяет большой заголовок
<p> - элемент, определяет параграф
Что такое HTML элемент?
HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:
<tagname>Контент находится здесь...</tagname>
HTML элемент это все от начального тега до конечного тега:<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
📓 #HTML
HTML ‐ Введение №3
Простой текстовый редактор - это все, что вам нужно для изучения HTML.
Веб страницы могут быть созданы и изменены с помощью профессиональных редакторов HTML. Однако, для изучения мы рекомендуем простой текстовый редактор, например Notepad++.
Использовать его очень легко, после скачивания зайдите в него и давайте создадим нашу первую программу и выведем в браузер.
Напишите или скопируйте HTML код:
📓 #HTML
Простой текстовый редактор - это все, что вам нужно для изучения HTML.
Веб страницы могут быть созданы и изменены с помощью профессиональных редакторов HTML. Однако, для изучения мы рекомендуем простой текстовый редактор, например Notepad++.
Использовать его очень легко, после скачивания зайдите в него и давайте создадим нашу первую программу и выведем в браузер.
Напишите или скопируйте HTML код:
<!DOCTYPE html>
<html>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
</body>
</html>
Далее просто сохраните HTML страницу в формате UTF-8. Затем просто кликните 2 раза по созданном файлу и откроется первая страничка.📓 #HTML
HTML - Введение №4
Документы в HTML: Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html>.
Сам HTML документ начинается с <html> и заканчивается </html>.
Видимая часть HTML документа находится между <body> и </body>.
Пример
Документы в HTML: Все HTML документы должны начинаться с объявления типа документа: <!DOCTYPE html>.
Сам HTML документ начинается с <html> и заканчивается </html>.
Видимая часть HTML документа находится между <body> и </body>.
Пример
<!DOCTYPE html>
<html>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
</body>
</html>
📓 #HTML
HTML - Введение №6
HTML параграфы определяются тегом <p>:
Пример:
HTML заголовки определены тегами <h1> до <h6>.
<h1> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок:
Пример:
HTML параграфы определяются тегом <p>:
Пример:
<p>Это параграф.</p>
<p>Это еще один параграф.</p>
HTML Заголовки:HTML заголовки определены тегами <h1> до <h6>.
<h1> определяет наиболее важный заголовок. <h6> определяет наименее важный заголовок:
Пример:
<h1>Это заголовок 1</h1>
<h2>Это заголовок 2</h2>
<h3>Это заголовок 3</h3>
<h4>Это заголовок 4</h4>
<h5>Это заголовок 5</h5>
<h6>Это заголовок 6</h6>
📓 #HTML
HTML ‐ Введение №7
Элементы HTML. HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:
📓 #HTML #Совет
Элементы HTML. HTML элемент определяется начальным тегом, некоторым содержимым и конечным тегом:
<tagname>Контент находится здесь...</tagname>
HTML элемент - все от начального тега до конечного тега.<h1> Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
Примечание: Некоторые HTML элементы не имеют содержимого (например, элемент <br>). Эти элементы называются пустыми элементами. Пустые элементы не имеют конечного тега!📓 #HTML #Совет
HTML — Вложенные элементы
HTML элементы могут быть вложенными (элементы могут содержать другие элементы).
Все документы HTML состоят из вложенных элементов HTML.
В этом примере состоит из четырех элементов HTML:
Пример:
HTML элементы могут быть вложенными (элементы могут содержать другие элементы).
Все документы HTML состоят из вложенных элементов HTML.
В этом примере состоит из четырех элементов HTML:
Пример:
<!DOCTYPE html>
<html>
<body>
<h1>Мой первый заголовок</h1>
<p>Мой первый параграф.</p>
</body>
</html>
📓 #HTML #Код
HTML — Атрибуты
У элементов HTML есть атрибуты. Атрибуты — это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей.
Проще говоря, они предоставляют дополнительную информацию о HTML-элементах.
Краткие сведения:
· Все элементы HTML могут иметь атрибуты;
· Атрибуты предоставляют дополнительные сведения об элементе;
· Атрибуты всегда указываются в начальном теге;
· Атрибуты обычно поставляются в парах "имя/значение", например:
Их есть несколько типов, про каждый поговорим подробнее:
· href;
· src;
· width/height;
· alt;
· style;
· lang;
· Title.
📓 #HTML #Код
У элементов HTML есть атрибуты. Атрибуты — это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей.
Проще говоря, они предоставляют дополнительную информацию о HTML-элементах.
Краткие сведения:
· Все элементы HTML могут иметь атрибуты;
· Атрибуты предоставляют дополнительные сведения об элементе;
· Атрибуты всегда указываются в начальном теге;
· Атрибуты обычно поставляются в парах "имя/значение", например:
name="value".Их есть несколько типов, про каждый поговорим подробнее:
· href;
· src;
· width/height;
· alt;
· style;
· lang;
· Title.
📓 #HTML #Код
Атрибут HTML — ALT
Атрибут ALT — указывает альтернативный текст, который будет использоваться, когда изображение не может быть отображено.
– Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то, например, слепой человек, может "слышать" элемент.
Пример:
Атрибут alt также полезен, если изображение не существует.
📓 #HTML #Код
Атрибут ALT — указывает альтернативный текст, который будет использоваться, когда изображение не может быть отображено.
– Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то, например, слепой человек, может "слышать" элемент.
Пример:
<img src="img_girl.jpg" alt="Girl with a jacket">
Атрибут alt также полезен, если изображение не существует.
📓 #HTML #Код
Атрибут HTML — LANG
– Язык документа может быть объявлен в теге <html> .
– Язык объявляется с атрибутом lang.
– Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем:
Первые две буквы указывают язык (EN). Если есть диалект, используйте еще две буквы (US).
📓 #HTML #Код
– Язык документа может быть объявлен в теге <html> .
– Язык объявляется с атрибутом lang.
– Объявление языка важно для приложений специальных возможностей (программы чтения с экрана) и поисковых систем:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Первые две буквы указывают язык (EN). Если есть диалект, используйте еще две буквы (US).
📓 #HTML #Код
Знакомство с CSS — №1
– CSS выступает за Cаскадинг STyle sХитс.
– CSS описывает, как элементы HTML должны отображаться на экране, бумаге или на других носителя х.
– CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.
— Внешние таблицы стилей хранятся в файлах CSS.
Зачем использовать CSS?
CSS используется для определения стилей для веб-страниц, включая дизайн, компоновку и вариации отображения для различных устройств и размеров экрана.
📓 #CSS #Интересно
– CSS выступает за Cаскадинг STyle sХитс.
– CSS описывает, как элементы HTML должны отображаться на экране, бумаге или на других носителя х.
– CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.
— Внешние таблицы стилей хранятся в файлах CSS.
Зачем использовать CSS?
CSS используется для определения стилей для веб-страниц, включая дизайн, компоновку и вариации отображения для различных устройств и размеров экрана.
📓 #CSS #Интересно
Знакомство с CSS — №2
HTML никогда не предназначался для хранения тегов для форматирования веб-страницы! Он был создан для описания содержимого веб-страницы, например:
Когда теги, такие как <font> и атрибуты цвета, были добавлены в спецификацию HTML 3,2, это стало кошмаром для веб-разработчиков.
Разработка крупных сайтов, где шрифты и цветовая информация были добавлены на каждую страницу, стала долгим и дорогостоящим процессом.
Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.
CSS удалил форматирование стиля со страницы HTML, а также экономит много времни!
Определения стилей обычно сохраняются во внешних CSS-файлах.
С помощью внешнего файла стилей можно изменить внешний вид всего веб-сайта, изменив только один файл.
📓 #CSS #Интересно
HTML никогда не предназначался для хранения тегов для форматирования веб-страницы! Он был создан для описания содержимого веб-страницы, например:
<H1> это заголовок </H1>
<p> это абзац. </p>Когда теги, такие как <font> и атрибуты цвета, были добавлены в спецификацию HTML 3,2, это стало кошмаром для веб-разработчиков.
Разработка крупных сайтов, где шрифты и цветовая информация были добавлены на каждую страницу, стала долгим и дорогостоящим процессом.
Чтобы решить эту проблему, Консорциум World Wide Web (W3C) создал CSS.
CSS удалил форматирование стиля со страницы HTML, а также экономит много времни!
Определения стилей обычно сохраняются во внешних CSS-файлах.
С помощью внешнего файла стилей можно изменить внешний вид всего веб-сайта, изменив только один файл.
📓 #CSS #Интересно
Синтаксис CSS
Набор правил CSS состоит из селектора и блока объявлений:
– Селектор указывает на элемент HTML, который требуется присвоить стилю.
– Блок объявления содержит одно или несколько объявлений, разделенных точками с запятой.
– Каждое объявление содержит имя свойства CSS и значение, разделенное двоеточием.
– Объявление CSS всегда заканчивается точкой с запятой, а блоки объявлений окружены фигурными скобками.
В следующем примере все элементы <p> будут выровнены по центру, с красным цветом текста:
Пример:
📓 #CSS #Код #Интересно
Набор правил CSS состоит из селектора и блока объявлений:
h1 {color:blue; font-size:12px}– Селектор указывает на элемент HTML, который требуется присвоить стилю.
– Блок объявления содержит одно или несколько объявлений, разделенных точками с запятой.
– Каждое объявление содержит имя свойства CSS и значение, разделенное двоеточием.
– Объявление CSS всегда заканчивается точкой с запятой, а блоки объявлений окружены фигурными скобками.
В следующем примере все элементы <p> будут выровнены по центру, с красным цветом текста:
Пример:
p {
color: red;
text-align: center;
}📓 #CSS #Код #Интересно
