Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML
Содержание
html

Введение в HTML

В этой главе:

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

Как браузер получает веб-страницы?

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

взаимодействие браузера с веб-сервером

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

Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.

Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera.

Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.

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

Зачем нужен HTML-редактор?

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

Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver, Visual Studio и PHPStorm. В качестве бесплатных редакторов можно использовать notepad++ и geany.

Что из себя представляет HTML-документ?

HTML-документ - это обычный текстовой файл c расширением .html, который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.

Windows:
Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:

  1. В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмем сохранить. Всё, HTML-документ создан.
  2. Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск → открываем Панель управления → выбираем Параметры папок → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов.

Открыть файл, сохраненный с расширением .html, для просмотра в браузере можно двумя способами:

  1. Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.
  2. Кликнуть по нему ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам браузер.

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

HTML-код:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Заголовок</title>
  </head>
  <body>
    <h1>Мой первый заголовок</h1>
    <p>Мой первый абзац</p>
  </body>
</html>

Результат данного кода в окне браузера:

моя первая страничка

Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью... → выбираем нужный вам редактор, если в списке нет нужного редактора, жмем Выбрать программу... и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).

Что такое HTML?

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

Что такое теги?

HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например <body>, <p>, <h2> и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: <p>текст</p>. Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например: <br>. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами: <P> означает то же самое, что и <p>. По стандарту HTML5 теги могут быть написаны в любом регистре.

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

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Летнее меню</title>
  </head>
  <body>
    <h1>Напитки в нашем кафе</h1>

    <h3>Мультифрукт - 100р.</h3>
    <p>Фруктовый напиток, содержащий апельсиновый и ананасовый соки.</p>

    <h3>Молочный коктель - 150р.</h3>
    <p>Сливочное мороженое, перемешанное с мякотью фруктов.</p>
  </body>
</html>
Пример веб-страницы с использованием HTML-тегов

То же самое, но без использования тегов:

Напитки в нашем кафе

Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.

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

перейти к следующей теме »


Учебные руководства и справочные материалы для веб-разработчиков.
mail для связи: admin@puzzleweb.ru

реклама на сайте © 2011-2016 www.puzzleweb.ru