Что такое HTML? Возвращаемся к основам

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

Что такое HTML?

Начать можно с чего угодно. Например можно сказать о том, что означает аббревиатура HTML, что это язык гипертекстовой разметки или что он был изобретен в 1980 году физиком Тимом Бернерс-Ли, как система для обмена документами. Но поможет ли это нам в изучении? Все это можно узнать из википедии и продолжить изучение истории интернета там же. Что нам действительно нужно понять о HTML так это то, что на самом деле представляет из себя HTML, какова его концептуальная цель и как он взаимодействует с другими технологиями, такими как CSS и JavaScript.

HTML: самая важная часть

HTML можно рассматривать как фундаментальный строительный блок для интернета того, который вы знаете. Сама технология работы интернета конечно намного сложней, но работа всех «WWW» так или иначе зависит от HTML.

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

Языки разметки

Чтобы понять что такое HTML вам нужно понять что такое язык разметки и для чего он существует.

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

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

Ответом будет конечно «разметка», т.е. вам нужно разметить документ и вставить определенные индикаторы в нужных местах, где требуется форматирование. Эти пометки не будут заметны на конечном результате, а созданы для того, чтобы сообщить наборщику как должен выглядеть документ в итоге. Именно в таком ключе и работает HTML — разметка тут осуществляется с помощью тэгов.

Тэги HTML

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

Последнее слово будет выделено жирным

Вы заметили, что я использовать тэг <b> для того, чтобы показать где будет жирный текст? Так же я использовал </b> чтобы показать где закончить выделение текста жирным. Для того, чтобы сделать часть текста наклонным я использую тот же метод:

Этот текст наклонный. А этот нет.

Эти символы заключенные в скобки называются тегами. Каждый тег имеет начальную позицию и конечную позицию. Часто этот процесс называют открытием и закрытием тега. С помощью тегов вы сообщаете браузеру в каком месте текст должен быть отформатирован. Когда мы помещаем контент между открывающим и закрывающими тегами, то можно сказать, что контент «заключен» в тег.

Примеры HTML тегов

Теперь, когда вы знаете что такое HTML теги вот несколько примеров часто используемых тегов:

абзац или параграф

 

заголовок

(h2, h3, h4 и др. используются для создания заголовков с меньшим размером шрифта) уменьшенный размер шрифта

Ссылки, теги, атрибуты

Ну вот мы наконец и добрались до слов «Гипертекст» и «Язык гипертекстовой разметки». Очень важной частью использования языка HTML и веба в целом являются ссылки. Как же это работает? Если одна веб-страница загружена в вашем браузере, то чтобы перейти на другую страницу вам нужно нажать на ссылку. Такая система позволяет объединить всю массу информации в единое целое.
Для того чтобы создать ссылку в HTML нам конечно же понадобится тег. Этот тег будет выглядеть немного сложнее нежели другие. Давайте посмотрим на пример использования тега <а>:

Читайте Блог RusDigi, где вы найдете статьи по верстке, веб-программированию и системам управления контентом.

Из примера видно, что тег для ссылки не просто тег — тут мы имеем еще и атрибут. Тег <а> сообщает браузеру, что в конкретном месте документа есть ссылка, а атрибут (href) говорит браузеру куда ведет ссылка. А вот и общий синтаксис тега <а>:

< тег атрибут="ЗНАЧЕНИЕ">текст, изображения и т.д..

В нашем предыдущем примере вся информация расположенная внутри тега <а> будет активной ссылкой. В нашем случае это «Блог RusDigi» и вести ссылка будет на указанный в атрибуте href адрес, в нашем случае http://www.rusdigi.org.

Вставка изображения в HTML работает так же как и тег ссылки. Мы будем использовать атрибут «src» чтобы указать браузеру месторасположение изображения и атрибут «alt» чтобы указать какой текст будет появляться при наведении указателя мыши на изображение. Следует так же обратить внимание, что тег <img> не имеет закрывающего тега. Вместо этого в конце открывающего тега необходимо добавить слэш.

текст при наведении курсора мыши

Вы можете читать HTML код

Если вы дочитали до этого момента, то следующий пример не должен вызывать у вас вопросов:

Что такое HTML?

 

Теперь вы легко можете прочитать и понять простые HTML теги. Этот отрывок текста размечен несколькими разными текстами, но понимая их значение вы легко можете «прочесть» код.

 

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

HTML это скелет веб-страницы

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

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

HTML создан быть скучным

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

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

CSS это кожа, волосы и одежда

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

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

Эта статья предназначена в первую очередь для новичков, но и бывалые веб-разработчики могут еще раз вспомнить основы. В следующих статьях мы вспомним что такое CSS и заглянем в HTML5.

Ну а если у вас сломался дверной замок и не знаете где купить дверной замок, то интернет-магазин PlastMarket поможет вам — ведь именно тут любые дверные замки, доставка по Украине и гарантия.



Запись опубликована в рубрике HTML с метками , , , . Добавьте в закладки постоянную ссылку.

5 комментариев: Что такое HTML? Возвращаемся к основам

  1. Atamovich говорит:

    Хорошо написал, понятно и добротно 🙂

  2. Mikl говорит:

    Спасибо за статью. Доходчиво и просто. Как раз будет полезно таким интересующимся новичкам, как я.

  3. Dfgfd говорит:

    А разве тэги и еще актуальны?

    • Гилязетдинов Руслан говорит:

      каждый использует теги по своему усмотрению. кому-то нравиться делать наклонный текст с помощью html, а кто-то использует для этого css. в статье речь о html, поэтому эти теги приведены как пример.

  4. Сергей говорит:

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

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

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