Как работают веб-сайты? Супер упрощенное объяснение

Интернет и веб-адреса:

  • Для доступа к веб-сайту во всемирной сети мы используем IP-адреса.
  • Каждый веб-сайт имеет свой IP-адрес (это похоже на наш домашний адрес).
  • Когда мы вводим IP-адреса (на самом деле мы вводим веб-адрес www.google.com, который браузер преобразует в IP-адрес) в веб-браузере, веб-браузер делает запрос к веб-серверу (компьютер, который обрабатывает запросы пользователей и предоставляет ответы), а затем загружает три файла: HTML-файл, CSS-файл и файл javascript.
  • Затем веб-браузер использует эти три файла, чтобы показать нам веб-страницу.

Что такое файл HTML?

  • HTML-файл похож на «каменные кирпичи», которые мы используем для строительства дома.
  • Т.е. его единственная цель — определить структуру веб-страницы.
  • Например:

    <HTML>
        <HEAD>
            <TITLE> My Personal Website </TITLE>
        <HEAD>
        <BODY>
                Hello World, My name is Chandan.
        <BODY>
    </HTML>
    

Вывод:

Объяснение:

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

  • <TITLE> Мой личный сайт </TITLE>.
    Эта строка гарантирует, что заголовок нашего сайта будет называться «Мой личный сайт».

  • <BODY> Hello World, My name is Chandan </BODY>
    Эта строка гарантирует, что содержимое или тело нашего сайта отображает строку «Hello World, My name is Chandan».

Что такое файл CSS?

  • CSS указывает веб-браузеру, как представить наши HTML-элементы.
  • Т.е. он похож на парикмахера, который придает форму, длину и цвет нашим волосам.
  • Например:

    body{
        color: lightgreen;
        background-color: grey;
        text-align: center
    }
    

    OUTPUT:

    Приведенный выше пример показывает, что HTML говорит веб-браузеру «ЧТО» показывать, а CSS говорит веб-браузеру «КАК» показывать.

Что такое файл JavaScript?

  • Файлы JS обеспечивают функциональность или «действия» веб-страницы.
  • Без JavaScript мы можем только красиво отображать некоторое содержимое с помощью HTML и CSS.
  • Но чтобы обеспечить некоторую функциональность, нам нужно использовать JavaScript.
  • Например:

    let entireDocumentVariable = document.querySelector("html");
    
    entireDocumentVariable.addEventListener("click", () => alert("Hello, Welcome to my website"));
    

    Результат:

Объяснение:

  • Используя javascript, мы написали функциональность, при которой пользователь, щелкнув по любой области веб-страницы, получает оповещение: «Здравствуйте, добро пожаловать на мой сайт».

Исходный код: https://codepen.io/chandanbsd/pen/WNMdBZm

Оцените статью
Procodings.ru
Добавить комментарий