Что такое HTML. Пояснение для новичков.

Это статья из цикла «Что такое?». В ней вы узнаете, что такое html. Те, кто знаком с этим термином – можете не читать эту статью.

С каждым годом число пользователей интернет увеличивается минимум 10-20 миллионов человек. Всего, по различным данным, так или иначе, интернетом пользуются более 2 миллиарда человек. Как же сделать так, чтобы пользователь из Новой Зеландии и Норильска при отображении сайта «www.domain.com» видел одну и ту же картинку? Ответ прост: необходим единый язык, понимаемый различными компьютерами. В качестве такого языка в данный момент выступает HTML.

HTML (HyperText Markup Language) — язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не для того. HTML дает возможность производить переход от одной части текста к другой, и, что замечательно, эти части могут храниться на совершенно разных компьютерах.

HTML не стоит путать с языками программирования, он создан специально для разметки вэб-страниц. Именно язык разметки дает браузеру необходимые инструкции о том, как отображать тексты и другие элементы страницы на мониторе. Важно заметить, что не только различные браузеры, но и различные их версии могут по-разному воспринимать и отображать на экране код. Следовательно, некоторые элементы корректно выглядящие в браузере Operа могут выглядеть иначе в Internet Explorer и других браузерах.

При верстке (грубо говоря, создании страниц) HTML-страниц это необходимо помнить, и просматривать их в самых популярных браузерах типа Mozilla Firefox, Internet Explorer и Operа.

Код разметки в HTML состоит из так называемых «тегов». Теги предоставляют информацию браузерам о форматировании и разметке страницы. Название тега заключается в угловые скобки «<» и «>». Некоторые тэги бывают открывающимися и закрывающимися, например, тег b, который делает текст жирным.

<b>Текст</b> — текст,
заключенный между <b> и </b> будет выделен жирным.

Они влияют на отображение содержимого, находящегося в нем. Данные, находящиеся между такими символами, называются содержимым тега. Иногда встречаются теги, являющиеся одновременно и закрывающими и открывающими, например hr — линия.

Чтобы писать на HTML надо его просто знать. Однако, учитывая огромную популярность Интернета, и огромное количество пользователей, желающих сделать свои странички, было создано множество редакторов, упрощающих работу с кодом. Один из самых простых из них – это FrontPage, входящий в пакет Microsoft Office. Это программное обеспечение (ПО) достаточно просто в обращении. И все же FrontPage имеет ряд существенных минусов: засоряет страницы (до 70% лишнего кода), снижает быстродействие, имеет ограниченные возможности дизайна.

Более продвинутые редакторы – HomeSite и DreamWeaver. Они помогут создать как сайт-визитку, так и настоящий шедевр современного искусства. К минусам этого ПО можно отнести: долгую обработку массивного кода и небольшое засорение кода лишними тегами. Требуется знание HTML в этом случае на порядок-два выше, чем при работе с FrontPage.

Наконец, высший пилотаж – это написание страниц в Блокноте. Работает быстро и легко. Некоторые веб-мастера (особенно старой закалки) работают с ним. Большинство же предпочитают ПО уровня DreamWeaver и выше.

Для работы с html страницами я использую программу PHP Desigber 2008, также неплохой программой – редактором является Notepad ++.

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

Есть сайт, который мне постоянно помогал в изучении HTML — это сайт htmlbook.ru. На сайте есть полезный раздел — HTML по шагам. С него и можно начать изучение.

Источник: Работа в интернете.

Постовой:
Нашел в блоге Записки Жука хорошую программу для авто. постинга в социальные закладки.

blogwork.ru

Что такое HTML и зачем это нужно.

Далее. Следующие уроки по HTML.

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

Например, я открою страницу поисковой системы Яндекс.

 

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

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

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

Теперь давайте разберемся с самим  определением и рассмотрим, что оно означает.

HTML – это аббревиатура, которая расшифровывается как HyperText Markup Language или в переводе на русский язык «Язык Разметки Гипертекста».

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

Язык.

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

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

Разметка.

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

HTML код позволяет «разметить» веб-страницу на отдельные элементы и сообщить браузеру какой элемент чем является.

Например, такая форма записи:

<p>Абзац</p>

Сообщает браузеру о том, что он имеет дело с абзацем.

А такая форма записи:

<h2>Заголовок</h2>

Говорит о том, что элемент является заголовком.

Из этого следует, что HTML не отвечает за внешний вид и оформление документа.

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

Страница со стилями оформления:

 

Та же самая страница, но с отключенными стилями (используется только один HTML-код):

 

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

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

Гипертекст.

И, наконец, последнее слово в определении языка HTML – это гиперссылка. На веб-страницах есть элемент, который делает эти страницы особенными и отличает их от обычного текста с картинками. Этот элемент — ссылки.

Ссылка – это такой элемент на странице, который делает возможным открытие другой части текущей страницы или совершенно другой страницы при клике по нему.

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

HTML – это язык, который разрабатывался специально для того, чтобы создавать страницы, которые содержат гиперссылки.

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

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

Далее. Следующие уроки по HTML.

webgyry.info

Что значит html и как легко можно создать html файл? | Интернет

Слышали про html? Или, может быть, слышали об html страницах в Интернете? На самом деле, все просто. HTML – это, упрощенно говоря, один из языков программирования, и не самый сложный из них.

HTML – сокращение от HyperText Markup Language, что переводится как язык гипертекстовой разметки.
Содержание:

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

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

По сути, html – это изнанка страниц многих сайтов. Часто их красивое оформление создается с помощью языка разметки html. Иначе это еще называют создание страниц с помощью html верстки.

Сайты могут создаваться и на других языках программирования, например, на языке php.

Ученый из Британии Тим Бернерс Ли разработал язык html в 1986-1991 годах в Швейцарии. По сути html позволяет создавать простые, но при этом красивые документы. Уже позже в html были добавлены мультимедийные возможности (видео и т.п.) и поддержка работы с гипертекстом (для создания гиперссылок).

Для работы с  html были созданы  всем известные программы-браузеры, они же интернет-обозреватели, такие как:

  • Mozilla Firefox (Мозилла Фаерфокс),
  • Internet Explorer (Интернет Эксплорер),
  • Google Chrome (Гугл Хром),
  • Opera (Опера),
  • Яндекс (Yandex) браузер,
  • Safari (Сафари) и
  • другие.

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

Что такое html страница?

Документы, файлы, страницы, созданные на языке  html, имеют расширение вида .html или .htm. Например, html-страница (или html-файл, или html-документ) может иметь название вида:

  • тест.html,
  • html,
  • html или
  • название.html.

Строго говоря, тест.html – это имя файла (или имя страницы), где

  • тест – имя файла, а
  • .html – расширение имени файла (или расширение имени страницы), которое обычно просто называют «расширение».

Сейчас более распространенным вариантом вместо слова «расширение» стало слово «формат».  Поэтому выражение «формат html» означает, что файл (или страница) написан на языке html и имя такого файла имеет расширение html. Значит,

файл c именем тест.html имеет формат html.

Операционная система Windows по умолчанию скрывает расширения файлов (то есть, форматы файлов).  Программисты сделали это «не со зла», а для того, чтобы уберечь пользователя от бездумного изменения расширений файлов. Можно сделать так, чтобы по умолчанию расширения файлов были открыты. В Windows 7 для этого:

  • кликаем по кнопке Пуск,
  • открываем Панель управления,
  • находим Параметры папок,
  • открываем вкладку Вид, прокручиваем в самый низ и
  • убираем галочку напротив опции «Скрывать расширения для зарегистрированных типов файлов»,
  • жмем «ОК».
Рис. 1. Открываем все расширения файлов

Если сейчас Вы поднимите глаза вверх и посмотрите в адресную строку своего браузера, то увидите там имя той страницы, которую сейчас читаете, а в конце имени стоит .html. Это пример html страницы блога, которая размещена в Интернете. Обычно у блога (у сайта) много html страниц. Например, каждая статья на этом блоге является отдельной html страницей.

В Интернете также встречаются сайты-одностранички, состоящие всего из одной html страницы. Например, это может быть

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

Язык HTML постоянно развивается и на сегодняшний день существует несколько его версий, начиная от HTML 2.0  от 22 сентября 1995 года и заканчивая последней версией языка HTML 5 от 28 октября 2014 года. В сентябре 2016 года планируется выпуск HTML 5.1.

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

HTML – это язык разметки документов с помощью тегов. Теги заключаются в треугольные скобки “< >”. Теги могут быть парными и непарными.

  • Например, тег “b”, заключенный в треугольные скобки, делает текст жирным

<b>текст, выделенный жирным</b>

В результате получится так: текст, выделенный жирным

  • А тег “i” делает текст курсивным.

<i>текст, выделенный курсивом</i>

В результате получим: текст, выделенный курсивом

  • Есть еще тег для перевода строки “br”.
  • С помощью тега “a href” выделяют гиперссылку.
  • Тег для заголовка документа – <head>. Это тег, открывающий документ. Он является парным в том смысле, что для него обязательно нужен закрывающий тег со слешем </head>.
  • После заголовка идет основная часть, которая находится между открывающим тегом <body> и закрывающим тегом </body>. Этот тег так же, как тег head, является парным: его нужно открыть и не забыть закрыть.

В парных тегах закрывающий тег со слешем необходим по той причине, что он отменяет (точнее, корректно завершает) действие открывающего тега.

Тегов HTML существует много, в Интернете можно без труда найти учебники HTML.

Как создать html файл

Создать самостоятельно html страницу (или html файл) на своем компьютере и запустить свое творение в браузере очень просто.

1) Открываем Блокнот (простой текстовый редактор, который входит в состав Windows). Его можно найти на своем компьютере, введя в строку Поиск запрос: Блокнот.

2) Копируем и вставляем в Блокнот следующий текст:

<html>
<head>
<!– Информация о HTML-документе –>
</head>
<body>
<!– Содержание страницы –>
Привет! Это моя первая HTML страница.<br>
Вторая строка, ура!
</body>
</html>

3) Важный момент, без которого html файл не будет работать: в Блокноте сохраняем файл строго(!) в формате html, как показано на скриншоте. Файл можно для простоты сохранить на Рабочем столе на своем компьютере.

Рис. 2. Обращаем внимание на Тип файла и сохраняем файл в формате html

1 на рис. 2 – Кликаем «Рабочий стол», чтобы там сохранить html файл.
2 на рис. 3 – Открываем выпадающее меню напротив «Тип файла».
3 – В этом меню выбираем «Все файлы».
4 – вводим любое имя (у меня 001) и после точки обязательно(!) вводим html.
5 на рис. 2 – жмем «Сохранить».

4) На Рабочем столе находим файл 001.html:

Рис. 3. Html файл на Рабочем столе

У меня браузером по умолчанию является Google Chrome, поэтому значок у файла имеет вид значка этого браузера. Если будет другой браузер по умолчанию, то у файла 001.html будет другой значок.

Кликаем по файлу (рис. 3) 2 раза мышкой и в итоге видим в браузере свою первую страницу на html:

Рис. 4. Проверка, как выглядит html страница в браузере

Таким образом, у нас получилась локальная страница html в том смысле, что она доступна только с вашего, локального компьютера. Чтобы страница была доступна другим, надо ее загрузить в Интернет. Точнее, разместить  на хостинге, который доступен всегда: 24/7/365 (24 часа в сутки, 7 дней в неделю, весь год). Тогда такую страницу сможет увидеть каждый пользователь Интернета.

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

Другие материалы:

Недостатки бесплатного хостинга для сайта

Как зарегистрировать хостинг, домен и сайт на timeweb

Что значит хэштег и как им пользоваться?


www.inetgramotnost.ru

что это такое, когда появился и из чего состоит

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

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

Как и когда появился HTML язык?

HTML был придуман в 86-м году прошлого века. Инициатором стал ученый из Великобритании Тимон Бернерс-Ли, работающий в Европейской организации по ядерным исследованиям в Женеве.

Тогда он предложил HTML в качестве языка для передачи технических и научных данных между Институтами. Это поспособствовало тому, что все научные документы легко читались и выглядели одинаково хорошо на всех устройствах.

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

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

Но со временем потребности возрастали, что привело к появлению картинок, звука, диаграмм и прочих элементов. В связи с этим выходили новые версии HTML, последней из которых является HTML 5. Современная версия позволяет создавать уже не только сайты, но и web-приложения.

Из каких компонентов состоит HTML?

HTML язык содержит несколько основных компонентов, которые выполняют определенные функции:

  1. Тег (дескриптор). HTML полностью состоит из дескрипторов. Они посылают команды веб-браузеру, выполняющему конкретные функции. К примеру, вставляет картинки или создает списки.
  2. Атрибут (аргумент). Предназначен для внесения изменений в теге. То есть, он может выровнять по краю или центру абзац/картинку внутри самого тега.
  3. Значение. Определяет изменения от атрибутов. Например, при выравнивании текста или изображения, для атрибута можно задать различные значения: текстовые (left либо right), или числовые (размеры картинки по ширине и высоте).

Какая структура HTML документа?

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

Пример части структуры страницы на которой вы находитесь

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

За ним следует непосредственно документ страницы, имеющий начало и конец, которые обозначаются открывающимся (<html>) и закрывающимся (</html>) тегами соответственно. По сути, этот парный тег является контейнером, где находится все содержимое web-страницы – весь полезный контент охвачен этими двумя элементами.

Внутри самого документа находятся 2 блока: <head> и <body>, и выглядит это следующим образом:

<html>
<head></head>
<body></body>
</html>

В <head> содержатся служебные элементы для поисковиков и браузеров:

  • заголовок <title> (обязательный тег) документа, отображающийся в выдаче поисковика и во вкладке браузера;
  • мета теги названия, описания и ключей;
  • описание содержания документа;
  • ссылки на стилевые файлы <link>;
  • ссылки на скрипты <script>.

Все, что прописано в данном теге, пользователю не показывается на странице. Он видит только элементы страницы, прописанные в разделе <body>:

  • непосредственно текст;
  • таблицы;
  • графические элементы;
  • изображения;
  • аудио- и видеофайлы и прочий код.

Исходя из вышесказанного, приведем простейший пример HTML документа:

<!DOCTYPE html>
<html>
<head>
<title>Я написал свой первый HTML документ</title>
</head>
<body>
<h2>Мой первый HTML документ</h2>
<p>Всем привет!</p>
</body>
</html>

Прописав подобный текст в любом текстовом документе (в том числе и в Блокноте), сохранив его в расширении html и открыв в одном из браузеров, на экране вы увидите заголовок <h2> и описание документа <p>. При этом заголовок будет выделен жирным шрифтом большего размера, чем сам текст.

Подводим итоги

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

Пожалуйста, оцените эту статью. Чтобы мы могли делать лучший контент! Напишите в комментариях, что вам понравилось и не понравилось!

Полезно

Рейтинг статьи: / 5. Кол-во оценок:

webmasterie.ru

Что такое HTML. Учебник по HTML.

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании (именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

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

M в аббревиатуре HTML означает «mark up» – размечать.

Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».

Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.

Отмечают же его для того, чтобы браузер показывал текст на экране в заданном тегами виде.

Закрывающий тег отличается от открывающего наличием косой черты «/».

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

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

Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.

Общий вид HTML-документа:
<!DOCTYPE html>
<html>
<head>
    Заголовок HTML-документа (не отображается на экране)
</head>
<body>
    Тело HTML-документа (отображается на экране)
    <!-- Это комментарий
         для внесения пояснений в HTML-документ -->
</body>
</html>

<!DOCTYPE html>

Первый тег <!DOCTYPE> – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.

подробнее о !DOCTYPE…

Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем.

подробнее об информации в контейнере <head>…

Содержание контейнера <body>

Между парой тегов <body>…</body> хранится всё содержание web-страницы, которое отображается на экране монитора в окне браузера.

Это может быть простой текст, списки, ссылки, изображения, таблицы и др.

Читать дальше: <!DOCTYPE>

htmlweb.ru

Что такое HTML и с чего начать изучение HTML?

Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!

Сразу хочу заметить, что это НЕ язык программирования, а язык разметки.

Почему выучить HTML легко?

Чтобы говорить свободно на английском языке не нужно знать все слова, которые есть в английском языке. Так и здесь, Вам лишь необходимо усвоить некоторые из основных тегов и научиться с ними работать. А дальше Вам лишь останется практиковаться и нарабатывать навык.

Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии.

Немного теории…

Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.

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

Но что такое тег в HMTL?

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

Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂

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

Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:

Все, что мы будем писать между тегами <head> и </head> мы не увидим на нашей странице. Эти теги могут сообщать браузеру о кодировке, о заголовке нашей страницы, здесь могут подключить различные стили, скрипты и так далее. Все это Вы увидите в последующих уроках.

А вот все теги, которые мы будем писать между тегами <body> и </body>, в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.

Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…

Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега <body> есть закрывающий тег </body>. Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.

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

Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:

Правильный HTML КОД

1

<div><p>Произвольный текст</p></div>

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

ОШИБКА В HTML КОДЕ

1

<div><p>Произвольный текст</div></p>

Так закрывать теги категорически запрещается!

Практика, чтобы понять что такое HTML…

Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++. В данном редакторе есть все возможности для создания и редактирования HTML страниц.

Начнем. После открытия программы вы увидите такое окошко:

Чтобы создать HTML страницу, необходимо ввести «тело» страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.

HTML КОД

1
2
3
4
5
6
7
8
9

<html>
    <head>
        <title>Изучаю HTML - Начало</title>
    </head>
    <body>
        <h2>Основной заголовок</h2>
        <h4>Более маленький подзаголовок</h4>
    </body>
</html>

Итак, у вас должно получиться следующее:

Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню «Файл», здесь жмем «Сохранить как…». Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.

Сейчас можно открыть этот файл в любом браузере. И если Вы в своем браузере увидели такую вот картину:

То необходимо дописать после закрывающего тега </title> вот такую строчку:

HTML КОД

И убедиться в том, что в текстовом редакторе выбрана кодировка UTF-8 (без BOM):

И тогда Вы увидите следующую страничку в своем браузере:

Видео урок — что такое HTML? (практика)

Если при прочтении Вам было тяжело, то посмотрите данный видео урок:

Вывод

Замечательно, у нас получилась первая HMTL страничка. Если же что-то пошло не так, то обязательно повторите все шаги и убедитесь в том, что Вы все сделали точно также. Теперь у Вас сложилось первое впечатление о HTML и что это такое.

Урок 1. Что такое HTML — изучаем что такое HTML структура 4.92/5 (98.40%) 25 голос(ов)

Понравилась статья — расскажи друзьям! 🙂

Facebook

Twitter

Вконтакте

Одноклассники

Google+

www.sitehere.ru

Что такое HTML, структура документа HTML

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

Что такое HTML?

HTML расшифровывается, как язык разметки гипертекста (от англ. HyperText Markup Language). Данный язык отвечает за то, как именно будет отображаться гипертекст на страницах сайта. Теперь давайте разберемся, что же такое гипертекст? Не секрет, что отдельная веб-страница может содержать много разнотипной информации, будь то текст, какие-то таблицы, графики, видеоролики, аудио и т.д. Так вот, всю эту информацию можно назвать одним словом — гипертекст.

Отметим, что HTML является именно языком разметки, а не языком программирования. В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение .html или .htm и обрабатываются браузерами — IE, Mozilla Firefox, Google Chrome, Yandex Chrome, Opera и др.

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title>Структура HTML документа</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<meta name="description" content="Описание страницы" />
<meta name="keywords" content="Ключевые слова страницы" />
</head>
<body>
...
</body>
</html>

Разберем по порядку, что входит в данную структуру:

1. Первое, что идет в документе HTML — указание версии (первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.

2. Далее идет тег <html>, в конце страницы этот тег нужно закрыть, поставив </html>.

3. Затем идет область для верхней части сайта (шапки). Для этого служит тег <head>. В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами <title> и </title>. Далее указывается кодировка HTML документа (пятая строка). Это делается для правильно отображения кириллицы. Закрываем область шапки тегом </head>.

4. Мета-тег «description» — краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.

5. Мета-тег «keywords» — ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.

6. Тело страницы открывается тегом <body> и закрывается, соответственно, тегом </body>. В теле веб-страницы размещается, как правило, основной контент — текст, видео, аудио и другая информация.

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

Понравилось? Поделитесь с друзьями!

siteblogger.ru

No related posts.

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

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