10 вещей о коде веб-сайтов, которые должен знать каждый

Независимо от того, экспериментируете ли вы с созданием своего собственного веб-сайта или когда-нибудь задумывались, как вы могли бы изменить что-то в своей теме Tumblr, важно знать несколько вещей об основах Интернета. Знание «достаточно, чтобы быть опасным» позволяет вам понять, что происходит за кулисами, не тратя более 10 000 часов на овладение языком программирования. После почти 20 лет создания веб-сайтов, вот 10 вещей, которые, я думаю, каждый должен знать о странном и замечательном коде, из которого состоит Интернет.

Код веб-сайта состоит из HTML, CSS и скриптов.

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

Код веб-сайта состоит из трех частей: HTML (язык гипертекстовой разметки), CSS (каскадные таблицы стилей) и скрипты. Каждый фрагмент кода вносит важный вклад в то, чтобы веб-сайт выглядел и работал так, как он есть.

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

<body>This is part of the body of the website</body>

Некоторые элементы HTML не требуют закрывающего тега, потому что все происходит внутри самого тега. Два примера этого: <img src="https://www.example.com/example.jpg" /> (который вставляет изображение на страницу) и <br /> (разрыв строки). Вместо отдельного закрывающего тега эти HTML-элементы имеют просто завершающую косую черту перед закрывающим шевроном.

CSS скрывается во внешней таблице стилей или внутри HTML <style> элемент. CSS использует селекторы для изменения стиля и дизайна элементов HTML.

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

body {
background: #000;
}

Стилизация класса элемента выглядит так:

.bodytext {
color: #FFF;
}

Скрипты включают такие форматы, как Javascript, PHP, Ruby и другие. Скрипты позволяют вашему сайту отображать более сложный контент, например анимацию. Сложные скрипты и базы данных — вот что питает системы управления контентом (CMS); они позволяют владельцу веб-сайта редактировать текст своей страницы и добавлять сообщения в блог, не обращая внимания на HTML или CSS. (Если вы используете что-то вроде Tumblr или WordPress, эти CMS работают на языке сценариев и базах данных.)

Простой код Javascript можно найти внутри HTML <script> тег, или во внешнем листе сценария. Более сложные сценарии и вызовы базы данных по существу скрыты при просмотре HTML-кода веб-сайта.

HTML — это структура; CSS — это дизайн

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

HTML-код — это когда вы хотите отредактировать структура страницы: если вы хотите добавить изображение в заголовок своего веб-сайта, вы хотите отредактировать свой HTML.

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

HTML и CSS линейны

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

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

Точно так же CSS выполняется сверху вниз и может быть перезаписан: если вы укажете в строке 5 таблицы стилей, что ваши абзацы должны иметь черный текст, но снова напишите в строке 20, что вы хотите, чтобы ваши абзацы были зелеными, вы увидите зеленый текст, а не черный в окончательной версии.

Как определить фрагмент кода, который вы хотите изменить

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

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

Чтобы просмотреть Инспектор в Safari:

  1. Перейти к Сафари меню и выберите Предпочтения.
  2. Нажать на Передовой вкладка и проверьте Показать инструменты разработчика коробка.
  3. Закрывать окно настроек.
  4. Щелкните правой кнопкой мыши (или щелкните, удерживая клавишу Control) в любой части веб-сайта, которую вы хотите просмотреть, и выберите Проверить элемент. Инспектор появится в следующем окне.

Чтобы просмотреть Инспектор в Chrome:

  1. Щелкните правой кнопкой мыши (или щелкните, удерживая клавишу Control) в любой части веб-сайта, которую вы хотите просмотреть, и выберите Осмотреть. Инспектор появится в следующем окне.

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

Вы можете развернуть эти стрелки раскрывающегося списка, чтобы просмотреть вложенные элементы HTML (части, скрытые внутри более крупных элементов HTML) и определить фрагмент кода, который вы хотите изменить. Если вы хотите настроить таргетинг на конкретный экземпляр элемента, вам нужно найти свойство «class» этого элемента.

Куда вы идете, чтобы редактировать свой код

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

Многим начинающим конструкторам веб-сайтов с WYSIWYG (что вы видите, то и получается) нравится Squarespace не позволит вам погрузиться непосредственно в HTML, но предложит область «настраиваемого CSS» на тот случай, если вы захотите внести собственные настройки, выходящие за рамки того, что предлагает визуальный редактор службы. Вы сможете изменить дизайн существующих HTML-элементов, но не сможете добавлять совершенно новые разделы.

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

Как сделать заметку в коде

Когда вы впервые экспериментируете со своим кодом, используйте примечания (или «комментарии», как они называются на языке веб-разработчиков). Используйте их рано и часто. Особенно если вы экспериментируете с кодом по часу. Добавление документации к вашему коду может помочь вам, когда вы вернетесь к нему через неделю и полностью забудете, что вы делали или что этот блок кода должен делать.

Заметка HTML выглядит так:

<!-- This is a note between HTML elements. -->

Заметка внутри таблицы стилей CSS выглядит так:

/* This is a CSS note */

Они не будут отображаться нигде на вашей конечной веб-странице, но будут находиться внутри вашего кода HTML и CSS для справки (и для всех, кто просматривает ваш исходный код).

Лучшая шпаргалка по HTML / CSS

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

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

Где найти примеры проектов

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

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

Как устранить неполадки на некорректном веб-сайте

Не знаете, как решить проблему или почему она вообще существует? Мне нравится обращаться к моему списку «Вы пробовали? …»:

  1. … Сохраняете свою работу?
  2. … Убедитесь, что ваши теги (или селекторы) закрыты?
  3. … Проверяете, нет ли в вашем коде недостающих кавычек или лишних пробелов?
  4. … Убедитесь, что ваш класс CSS определен в изменяемом HTML-элементе?
  5. … Читаете на W3Schools, чтобы убедиться, что ваш стиль CSS может делать то, что вы хотите?
  6. … Вернуться к последней сохраненной версии кода и начать заново?
  7. … Ищу вашу проблему в Google или Переполнение стека?

Знай, когда уйти

Иногда проблема слишком велика, чтобы ее можно было исправить, и это нормально, особенно если вы только начинаете работать с HTML и CSS.

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

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

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

Ваши любимые советы? Вопросов?

Есть какие-нибудь необходимые советы для начала работы с кодом веб-сайта? Есть вопросы по поводу моих предложений? Сообщите нам об этом ниже.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *