Что такое HTML?

Что такое HTML?

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

 Что такое HTML?

Данная аббревиатура расшифровывается как HyperText Markup Language или в переводе на русский — язык гипертекстовой разметки. Он состоит из кодов или «тегов» и был создан для разметки веб-страниц. Язык HTML позволяет вашему браузеру правильно отобразить набор символов и преобразовать его в столь знакомые вам картинки и тексты. Образно говоря, этот язык помогает «перевести» браузеру цифровую (символьную) информацию в визуальную. Давайте рассмотрим на простом примере как вообще это работает.

Вы вводите в адресной строке браузера имя сайта, например, yandex.ru. Ваш браузер отправляет в сеть Интернет некий пакет данных, называемый запросом, который в итоге добирается до нужного сервера, где расположен нужный нам сайт Яндекс. Сервер формирует свой пакет данных — ответ — и отправляет нам. В этом пакете лежит файл HTML, ваш браузер открывает его и читает построчно сверху вниз, но на экране отображает вам не его символьное содержимое, а показывает в нужном порядке текст и картинки.

Теги. Парные и непарные.

Приведем пару примеров кода HTML. Для начала о том, что такое «тег». Это один или несколько символов, заключенных в угловые скобки и рассказывающие браузеру, как именно отобразить информацию, заключенную между ними. Теги бывают открывающие и закрывающие, то есть парные. Например, текст, заключенный между парными тегами <b>Текст</b> отобразится браузером как жирный Текст (b — от англ. bold — жирный). И непарные, когда используется только открывающий тег. Например <br> продолжит текст с новой строки, подобно нажатию клавиши Enter. А тег <hr> нарисует горизонтальную линию. Кстати, множество тегов являются начальными буквами от английских слов, что позволяет их легко запоминать. К примеру, тег <i>Текст</i> позволит браузеру понять, что текст, заключенный в этом теге, нужно начертать курсивом, то есть с наклоном. Вот так: Текст. Как вы уже догадались — i от italic. А непарный тег <img> укажет, где на сервере лежит картинка (image — картинка, рисунок), которую нужно показать на странице сайта. Полный синтаксис вставки картинки будет выглядеть так:

где src="images/picture.jpg" — это ссылка на файл картинки c  названием picture.jpg,

лежащей в папке images

Текст Здесь должна быть моя картинка, заключенный в атрибуте «alt»

является альтернативным текстом. Если по какой-то причине браузер не сможет отобразить картинку, на ее месте будет квадратик с альтернативным текстом. Тег <img> включает в себя свыше 10 атрибутов, которые форматируют рисунок, указывая браузеру его размеры, наличие и толщину рамки, выравнивание, отступ от окружающего рисунок контента и так далее. Итак, теги — это коды, которые могут иметь внутри себя дополнительные атрибуты, позволяющие браузеру правильно разметить и отобразить элементы страницы html.

Структура документа HTML.

Давайте посмотрим на структуру HTML-документа. Он всегда начинается с открывающего тега <html> и заканчивается закрывающим </html>. Первый служебный тег <!DOCTYPE html> сообщает браузеру о том, что документ относится к HTML.

Информация, заключенная между тегами <head>...</head>, является служебной. Там находится описание страницы, её мета-данные и так далее. Эта информация визуально браузером не отображается, но учитывается. Более подробно о служебной информации мы поговорим в другой раз, а сейчас нам будет достаточно написать заголовок сайта между тегами <title>Моя первая веб-страница</title>. Заголовок отобразится на вкладке браузера.

Вся видимая часть страницы располагается непосредственно между тегами <body>...</body>

Создаем первую страницу.

Давайте создадим свою первую веб-страницу. Для этого нам понадобится программа Блокнот, по умолчанию входящая в вашу систему Windows и браузер, в котором вы читаете этот блог. Итак, откройте программу Блокнот (Notepad), скопируйте или наберите руками следующий код:

Сохраните файл с именем  index.html в нужную папку (например, в папку «мой первый сайт» на диске D:). Тип файлов нужно выбрать Все файлы, кодировку обязательно выбрать UTF-8

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

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

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

Полезные ссылки на справочную информацию и инструменты для разработчика.

А сейчас я дам вам несколько полезных ссылок, как обещал в самом начале.

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

Мы создавали свою первую страничку в Блокноте и вы можете продолжать использовать эту замечательную программу. Но существует множество других полезных программ, которые существенно облегчают написание html-кода и отладку ошибок. К таким программам относятся редакторы кода с подсветкой текста. Когда разные теги, тексты и прочее отображается своим цветом. Поверьте, это очень удобно. Одной из самых распространенных и используемых программ с расширенным функционалом, и что немаловажно, условно бесплатной — является Sublime Text. Скачать ее можно по этой ссылке с сайта разработчика.

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

Еще одним мощным инструментом является программа Dreamviewer от Adobe

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

Хочу вам сказать, что если вы совсем-совсем новичок, то лучше пользуйтесь Блокнотом. С возрастанием навыков вы будете сами решать, переходить вам на более мощные инструменты или продолжать пользоваться надежным и простым Notepad.

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

В следующей статье мы рассмотрим с вами Каскадные Таблицы Стилей — CSS. То, что сделает ваши сайты красивыми и стильными, яркими и цветными.

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

С уважением.

4
Автор | 2018-01-25T20:24:03+00:00 Декабрь 17th, 2017|HTML, Сайтостроение|2 комментария

2 комментария

  1. Спасибо большое! У меня получилось!

    0

Оставить комментарий

Войти с помощью: