Введение

Вы когда-нибудь задумывались, как у некоторых стартапов, таких как Uber и других гигантов, таких как Goldman Sachs, есть модные веб-сайты с расширенными возможностями? Хотя многие веб-сайты создаются с помощью программного обеспечения для создания онлайн-сайтов, такого как Squarespace, Weebly, Wix и GoDaddy, и это лишь некоторые из них, многие из них по-прежнему написаны с использованием языков HTML, CSS и JavaScript. Давайте обсудим эти языки более подробно.

HTML

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

CSS

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

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

JavaScript

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

Резюме концепции

  1. HTML – это язык, который используется для структурирования вашего веб-сайта.
  2. CSS используется для оформления содержимого HTML, например абзацев, заголовков, текста и т. д.
  3. JavaScript используется для создания динамического контента на веб-страницах, чтобы сделать его более привлекательным и удобным для пользователя.

HTML-элементы

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

Основополагающие теги HTML

  1. ‹!DOCTYPE› — этот тег определяет тип документа и необходим в начале каждого HTML-документа, который вы пишете.
  2. ‹html› — этот тег определяет тип документа как HTML-документ. Это также необходимо в начале каждого HTML-документа, который вы пишете.
  3. ‹title› — этот тег используется для создания заголовка или названия вашей веб-страницы.
  4. ‹body› — этот тег используется для определения тела вашей веб-страницы. Здесь будет отображаться весь основной контент вашей веб-страницы.
  5. От ‹h1› до ‹h6› — эти теги используются для создания заголовков на вашей веб-странице. Если у вас есть несколько подтем или много разных категорий контента, который вы хотите отобразить, вы можете использовать эти заголовки для разделения контента таким образом.
  6. ‹p› — этот тег довольно прост и используется для написания абзаца текста на вашей веб-странице.
  7. ‹br› — этот тег используется для вставки разрыва строки в ваш код. Обычно он используется, когда нужно разделить большие блоки или абзацы текста, чтобы не перегружать пользователя.
  8. ‹! — … —› — Этот тег определяет комментарий в вашем коде. То, что написано в этом комментарии, не отображается на веб-странице. Он просто используется для организации вашего кода и упрощения понимания вашего мыслительного процесса другими веб-разработчиками.

Пользовательский ввод

  1. ‹form› — этот тег определяет HTML-форму, которая позволяет пользователям вводить в нее данные. Например, на странице входа может использоваться форма, позволяющая клиентам вводить свое имя пользователя и пароль.
  2. ‹input› — этот тег создает поля ввода для HTML-формы.
  3. ‹textarea› — этот тег позволяет отображать текст над каждым полем ввода. Например, «имя пользователя» и «пароль» являются текстовыми полями, указывающими, какой ввод предназначен для имени пользователя, а какой — для пароля.
  4. ‹button› — этот тег позволяет щелкнуть кнопку. Например, кнопка «Отправить» для ввода учетных данных для входа может быть сделана с помощью кнопки HTML.
  5. ‹select› — этот тег определяет выпадающее меню для выбора. Например, при оформлении заказа на веб-сайте электронной коммерции может появиться раскрывающееся меню с тегом «выбрать» для выбора между различными способами оплаты.
  6. ‹option› — этот тег определяет один из вариантов в раскрывающемся списке.
  7. ‹datalist› — этот тег создает список предопределенных параметров для элементов управления вводом.

Картинки

  1. ‹img› — этот тег позволяет дизайнеру определить изображение.
  2. ‹figcaption› — этот тег определяет подпись к рисунку.
  3. ‹figure› — тег фигуры — это элемент, который содержит некоторые другие элементы, обычно изображения. Фигура используется для определения и добавления изображений или других элементов без нарушения потока веб-страницы, если фигура удалена.
  4. ‹picture› — этот тег определяет контейнер для добавления ресурсов для нескольких изображений.

CSS-элементы

В общем, HTML-элементы имеют начальный и конечный теги, как показано ниже:

Теперь возвращаясь к синтаксису CSS, есть три способа написания кода CSS в документе HTML. Это встроенный CSS, внутренний CSS и внешний CSS. Давайте рассмотрим каждый из них более внимательно

Встроенный CSS

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

Внутренний CSS

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

Внешний CSS

Внешняя таблица стилей CSS — это отдельный файл «.css», на который ссылается веб-страница. Преимущество внешних таблиц стилей заключается в том, что вы создаете их только один раз, и их можно использовать для редактирования и изменения нескольких веб-страниц. Если вы хотите внести изменения сразу в несколько веб-страниц, вам нужно только один раз изменить внешнюю таблицу стилей CSS, и все веб-страницы будут изменены автоматически.

Ниже приведено изображение, описывающее синтаксис CSS для каждого из трех стилей:

Как видно из рисунка выше, таблица стилей Inline CSS изменяет только один элемент. На картинке выше только этот конкретный абзац на веб-странице окрашен синим цветом. Этот стиль не влияет на другие абзацы на веб-странице. Внутренняя таблица стилей CSS, как показано выше, расположена в разделе «head» таблицы стилей HTML и влияет на каждый экземпляр элемента body и каждый экземпляр элемента абзаца на веб-странице. В частности, он меняет фон каждого раздела тела на синий, а цвет каждого абзаца на желтый. Наконец, ссылка на внешний лист CSS находится в заголовке файла HTML, но есть только ссылка на файл CSS, содержащий инструкции по стилю.

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

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

<!DOCTYPE html>
<html>
<body>
<h1 style=”background-color:gray; color: yellow; text transform:capitalize; font-family:Helvetica “>
Random Header 1
</h1>
<p style=”background-color:purple ; color: white ; text-transform:capitalize; font-family:Helvetica “>
Random paragraph of words
</p>
<p>
Username:
</p>
<input type=”name” name=”Random Input One”>
<p>
Passwords:
</p>
<input type=”name” name=”Random Input Two”>
<button>
Submit
</button>
<select>
Select One of These:
<option>Bodos</option>
<option>Starbucks</option>
<option>Grit</option>
<option>Newcomb</option>
<option>CoffeBeans</option>
</select>
</body>
</html>

JavaScript

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

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

JavaScript для веб-разработки

Основы, которые вам необходимо знать перед написанием кода на JavaScript, приведены ниже:

  1. Переменные
  2. Операторы
  3. Условные
  4. Функции
  5. События

Переменные

Переменные — это, так сказать, блоки, в которых вы можете хранить значения. Синтаксис объявления и инициализации переменной начинается с ключевого слова «var», за которым следует имя переменной, затем знак равенства и само значение. Существует несколько типов переменных, которые можно инициализировать в зависимости от требований и потребностей пользователя и разработчика. К ним относятся строки, числа, логические значения, массивы и объекты. Строки представляют собой наборы символов. Например, «Боб» — это строка, представляющая собой набор символов «В», «о» и «б». Цифры говорят сами за себя и не имеют кавычек вокруг них. Например, при объявлении переменной 10 как числа вы пишете это так:

var ten = 10;

Если бы это было написано с кавычками около 10, то технически это была бы строковая переменная. Логические переменные являются бинарными и им присваивается одно из двух значений: True или False. Пример объявления логической переменной показан ниже:

var clicked = true;

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

var random_array = [1,‘John’,‘Sebastian’,10];

Наконец, это объявление объекта переменной. Это одна из самых важных деклараций, когда речь идет о дизайне и разработке веб-сайтов. Объект JavaScript — это, по сути, что угодно на языке JavaScript. Все (кнопки, формы, изображения и т. д.) в JavaScript является объектом и может храниться в переменной. Пример объявления объектной переменной показан ниже:

var random_object_variable = document.querySelector(‘h3’);

Операторы

В JavaScript также есть операторы. Это сложение, вычитание, умножение, деление, присваивание и равенство. Первые четыре (сложение, вычитание, умножение и деление) делают именно то, для чего предназначены. Сложение добавляет две переменные, вычитание находит разницу между двумя переменными, умножение повторяет сложение двух переменных, а деление делит две переменные. Мы также видели назначение раньше. Присваивание обозначается знаком «=» и присваивает значение переменной. Однако функция Equality проверяет, равны ли два значения друг другу, и возвращает либо истинный, либо ложный результат. Обозначается символом «===».

Условные

Условные выражения — это фрагменты кода или структуры, которые позволяют увидеть, возвращает ли выражение значение true или false. На основе этого результата запускается либо определенный фрагмент кода, либо его альтернатива. Очень хорошо известным условным оператором, который используется в JavaScript, а также в Java, Python и других языках, является оператор «if…else». Например:

var color = ‘Green’;
if(color === ‘Green’) 
{
   alert(‘Go!’); 
} 
else 
{
   alert(‘STOP!’); 
}

Выражение внутри оператора if «color===‘Green’» — это проверка, о которой мы упоминали ранее. Он использует оператор равенства для сравнения цвета переменной со строкой «Зеленый», чтобы увидеть, равны ли они друг другу. Если сравнение возвращает true, то выполняется фрагмент кода внутри оператора if. Если сравнение возвращает false, то выполняется фрагмент кода в операторе else.

Функции

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

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

В JavaScript вы также можете определить свои собственные функции. Например:

function divide(num1,num2) 
{
   var answer = num1 / num2;
   return answer;
}

Мы можем вызывать эту функцию в разных сценариях, просто написав имя функции и задав ей параметры. Например:

divide(4,2); → 2

События

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

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

document.querySelector('html').onclick = function() 
{
    alert('You have clicked this webpage');
}

Приложение:

  1. https://www.google.com/search?biw=1680&bih=939&tbm=isch&sa=1&ei=u6f_XK7SCuPB_QbR87q4Bg&q=css+code+&oq=css+code+&gs_l=img.3..0l5j0i30j0i5i30l4.4093.12820..13282... 3.0..0.303.1007.11j3-1......0....1..gws-wiz-img.....0..0i67j0i24.kFsZsQN95ww#imgrc=l5M-3mWDpfVoOM:
  2. https://www.google.com/search?q=html+vs+css+vs+javascript&source=lnms&tbm=isch&sa=X&ved=0ahUKEwik58PZ4-HiAhWkr1kKHbkqARIQ_AUIECgB&biw=1680&bih=939#imgrc=g1k0loc9PWEMkM:
  3. https://www.google.com/search?q=javascript+vs+html+vs+css&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj29OfukeniAhXNo1kKHcj8CwAQ_AUIECgB&biw=1680&bih=939#imgrc=g1k0loc9PWEMkM:
  4. https://www.google.com/search?q=html+start+and+end+tags&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjgpN77keniAhUEuVkKHVJSBmgQ_AUIECgB&biw=1680&bih=939#imgrc=SQrRUalTkWShbM: