Основные понятия языка html – 59. Язык html. Структура html-документа. Основные элементы языка html. Язык JavaScript и его использование в html-документах. Другие средства web-программирования.

HTML Основные понятия

В связи с развитием сетевых технологий, появлением глобальной сети Интернет появились такие понятия, как WWW (World Wide Web - всемирная паутина), HTML (HyperText Markup Language - язык разметки гипертекста).

Интернет Internet (сокр. от Interconnected Networks — объединённые сети) — глобальная телекоммуникационная сеть информационных и вычислительных ресурсов. Интернет является физической основой для всемирной паутины WWW.

Приблизительно в 1991-92 годах был изобретен основной язык документов в сети Интернет – язык HTML. Поэтому этот год считается одним годов рождения Интернет. Автором стал Тим Бернерс-Ли.

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

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

Практически вместе с появлением языка гипертекстовой разметки HTMLпоявился протокол передачи гипертекстовых документов HTTP (HyperText Transfer Protocol, протокол передачи гипертекстовых документов). Протокол (protocol) - это совокупность правил передачи данных, позволяющий компьютерным системам с различной архитектурой общаться между собой. Для создания ссылок Тим-Бернерс Ли разработал унифицированный указатель ресурса - Uniform Resource Locator (URL).

С появлением протокола HTTP появилась возможность передавать документы по сети Интернет. Здесь популярной стала архитектура «Клиент-сервер», позволяющая хранящиеся на сервере (англ.: to serve - служить, обслуживать) документы передаются при запросе пользователю. Для такой работы на сервере должно быть установлено специальное программное обеспечение, а на компьютере пользователя программа преобразующая гипертекстовую информацию в визуальную – Интернет браузер.

Браузеры позволяют просматривать HTML документы (страницы), расположенные как локально на компьютере, так и на сайте. Web – сайты это так называемые узлы Интернет. Сайты размещаются на серверах, которые отличаются высокой производительностью и работают круглосуточно. Для возможности поддержки сайтов на серверах устанавливается специальное программное обеспечение web-серверов. Причем, если на сервере установлена операционная система UNIX, то под ней работает web-сервер Apache, а если установлена операционная система Windows, то - web-сервер MicrosoftInternetInformationServer (IIS).

Итак, web-сервер формирует страницу по запросу клиента и отправляет ему. Причем страницы могут как просто передаваться клиенту, так и генерироваться при помощи серверных языков.

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

В целях большей совместимости гипертекстового языка и браузеров был создан WorldWideWebconsortium (W3C – Консоциум всемирной паутины).

HTMLдокумент можно создать в обычном текстовом редакторе. Это может быть блокнот или другой простейший редактор. Нужно помнить, что при сохранении файлов в блокноте автоматически подставляется расширение txt, его нужно заменять на html. Тажке для создания html страниц можно использовать программы-редакторы (MicrosoftOfficeWord, AdobeDreamweaver, HomeSiteи т.д.). При использовании редакторов генерируемых html код может быть «засоренным», то есть подставлены сотни ненужных тегов. Поэтому результаты работы таких программ часто нужно еще редактировать вручную.

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

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

Дополнительные материалы:

Основные теги HTML.

Создание таблиц в HTML

Поделиться в соц. сетях:

Лекция 6. Основы языка HTML — Мегаобучалка

Основные понятия, связанные с определением языка HTML

Назначение языка HTML

Теги HTML

Атрибуты тегов

Основные понятия, связанные с определением языка HTML

Все Web-страницы Интернета имеют одну общую черту — они созданы с помощью средств языка HTML.

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

HTML — это язык разметки гипертекста. Он определяет правила, согласно которым обычный текст представляется в виде Web-страниц.

Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней, постепенно вбирая в себя новые черты, которые позволяли создавать все более и более впечатляющие Web-страницы.

Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и назначение языка HTML можно понять, исходя из его названия.

Как было сказано выше Гипертекст — это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы.

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

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

Но самое важное слово в этом описании — язык.

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

Назначение языка HTML

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

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



Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных браузеров. Может быть, это будет текстовый браузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст доку­мента вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля.

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

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

Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение содержания и оформления документа выдерживается четко. В последней версии HTML- 4.0 использовать команды форматирования, как правило, не рекомендуются.

Тэги HTML

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

Тэг — это набор символов. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тэг.

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

Как правило, один тег HTML воздействует только на часть документа, например на абзац. В таких случаях используют парные тэги: открывающий и закрывающий. Открывающий тэг создает эффект, а закрывающий — прекращает его действие. Закрывающие тэги начинаются с символа косой черты (/).

 

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

Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тэг игнорируется целиком.

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

 

Атрибуты тегов

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

Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (=). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда. Закрывающие тэги никогда не содержат атрибутов.

Примеры использования тегов HTML:

<HEAD> Общий заголовок

<TITLE> Заголовок окна </TITLE >

</HEAD>

<BODY>

<Н1>Крупный текст</h2 >

<Н2>Средний текст</Н2>

<Р> Эти строки изображаются слитно, несмотря на то, что в документе они отделены друг от друга

<Р> Закрывающий тэг абзаца не обязателен.

<Р>Тэг начала абзаца более важен, чем реальный переход на новую строку. <HR>

Текст после горизонтальной линейки <BR> разбит на две строки.

</BODY>

</HTML>

Примеры парных тэгов HTML:

<HTML> ... </HTML>

<HEAD>... </HEAD>

<h4> ... </h4>

Примеры одиночных тэгов HTML:

<BR> ... <HR>... <BASEFONT> ... <FRAME> ... <INPUT>…<P>

Примеры тэгов HTMLс атрибутами:

 

<BODY BGCOLOR=»YELLOW» TEXT=»BLUE» > ...

<HR COLOR=RED SIZE=16 WIDTH=100%> ...

Перечень основных понятий:Язык HTML. Теги HTML.

Ключевые моменты:. Основные понятия, связанные с определением языка HTML. Назначение языка HTML. Теги HTML. Атрибуты тегов.

 

Вопросы к самопроверке:

1. Что такое HTML?

2. Что такое гипертекст?

3. Что понимается под разметкой?

4. Что представляет собой HTML?

5. Для чего не предназначен HTML?

6. Как называют коды языка HTML, с помощью которого выполняется разметка исходного текста?

7. Что такое Тэг?

8. В каких случаях используют парные тэги?

9. Что такое атрибуты?

10. Что требуют некоторые атрибуты?

Практическая работа № 1 Основные понятия языка html. Структура документа html

3

Цель работы: знакомство студентов с основными понятиями языка HTML, структурой HTML-документа, обязательными метками, комментариями, способами форматирования текста, физиче­скими и логическими стилями, приобретение навыков созда­ния простейших статических Web-документов.

На лабораторных занятиях мы будем использовать текстовый редактор Блокнот для подготовки HTML-файлов, а браузер Internet Explorer - как инструмент контроля за сделанным.

Теоретические сведения

Основные понятия

Гипертекст — информационная структура, позволяющая устанавли­вать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от од­ного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (ги­перссылки). Выделение слова свидетельствует о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделен­ным словом, рассматривается более подробно. Отдельный документ, выполненный в формате HTML, называется:

- HTML-документом;

- Web-документом;

- Web-страницей.

Такие страницы, как правило, имеют формат НТМ или HTML.

Гиперссылка — фрагмент текста, который является указателем на дру­гой файл или объект. Гиперссылки необходимы для того, чтобы обес­печить возможность перехода от одного документа к другому.

Группа Web-страниц, принадлежащих одному автору или одному ИЭДВ телю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом, или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL - aдpеc в Интер­нете.

Фрейм (Frame) — термин, имеющий два значения. Первое значение область документа со своими полосами прокрутки. Второе — 0ДНН0Ч ное изображение в анимационном графическом файле (кадр).

Апплет (Applet) — программа, передаваемая на компьютер клиенте В ви­де отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт (Script), или сценарий, — программа, включенная в состав Web-страницы для расширения ее возможностей. Браузер lnternet Explorer в определенных ситуациях выводит сообщение: «Разрешить выполнение сценариев на странице?». В этом случае имеются в виду скрипты.

CGI (Common Gateway Interface) — общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц. Без таких программ невозможно создание интерактивных Web-страниц.

Браузер (Browser) — программа для просмотра Web-страниц.

Элемент — конструкция языка HTML. Можно представить его себе как контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов. Например:

<Начало элемента> Содержание элемента, данные, которые форматирует элемент </Конец элемента>

Тег (по-английски tag — метка, дескриптор, ярлык) — начальный или конечный маркер элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки < >, а конечный тег всегда снабжается косой чертой. Текст, не находящийся между такими скобками (< >), виден весь при просмотре в браузере. Например:

<Начальный тег> Содержание элемента, данные, которые

форматирует элемент </Конечный тег>

<Р> Этот текст будет расположен в отдельном абзаце </Р>

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

Любая Web-страница представляет собой набор элементов. Один из основных принципов HTML — возможность вложения одного элемента в другой.

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

<Р align="center"> Этот текст будет выравнен по центру экрана

</Р>

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

Обратите внимание:

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

- все атрибуты располагаются в начальном теге;

- для удобства работы начальный тег вы можете писать с про­писной (заглавной) буквы (Р), а конечный — со строчной (ма­ленькой) буквы (/р), хотя это и не обязательно;

- не для всех элементов требуется ставить конечный (закрыва­ющий) тег;

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

Практическая работа № 1 Основные понятия языка html. Структура документа html

3

Цель работы: знакомство студентов с основными понятиями языка HTML, структурой HTML-документа, обязательными метками, комментариями, способами форматирования текста, физиче­скими и логическими стилями, приобретение навыков созда­ния простейших статических Web-документов.

На лабораторных занятиях мы будем использовать текстовый редактор Блокнот для подготовки HTML-файлов, а браузер Internet Explorer - как инструмент контроля за сделанным.

Теоретические сведения

Основные понятия

Гипертекст — информационная структура, позволяющая устанавли­вать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от од­ного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (ги­перссылки). Выделение слова свидетельствует о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделен­ным словом, рассматривается более подробно. Отдельный документ, выполненный в формате HTML, называется:

- HTML-документом;

- Web-документом;

- Web-страницей.

Такие страницы, как правило, имеют формат НТМ или HTML.

Гиперссылка — фрагмент текста, который является указателем на дру­гой файл или объект. Гиперссылки необходимы для того, чтобы обес­печить возможность перехода от одного документа к другому.

Группа Web-страниц, принадлежащих одному автору или одному ИЭДВ телю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом, или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL - aдpеc в Интер­нете.

Фрейм (Frame) — термин, имеющий два значения. Первое значение область документа со своими полосами прокрутки. Второе — 0ДНН0Ч ное изображение в анимационном графическом файле (кадр).

Апплет (Applet) — программа, передаваемая на компьютер клиенте В ви­де отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт (Script), или сценарий, — программа, включенная в состав Web-страницы для расширения ее возможностей. Браузер lnternet Explorer в определенных ситуациях выводит сообщение: «Разрешить выполнение сценариев на странице?». В этом случае имеются в виду скрипты.

CGI (Common Gateway Interface) — общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц. Без таких программ невозможно создание интерактивных Web-страниц.

Браузер (Browser) — программа для просмотра Web-страниц.

Элемент — конструкция языка HTML. Можно представить его себе как контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов. Например:

<Начало элемента> Содержание элемента, данные, которые форматирует элемент </Конец элемента>

Тег (по-английски tag — метка, дескриптор, ярлык) — начальный или конечный маркер элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки < >, а конечный тег всегда снабжается косой чертой. Текст, не находящийся между такими скобками (< >), виден весь при просмотре в браузере. Например:

<Начальный тег> Содержание элемента, данные, которые

форматирует элемент </Конечный тег>

<Р> Этот текст будет расположен в отдельном абзаце </Р>

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

Любая Web-страница представляет собой набор элементов. Один из основных принципов HTML — возможность вложения одного элемента в другой.

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

<Р align="center"> Этот текст будет выравнен по центру экрана

</Р>

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

Обратите внимание:

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

- все атрибуты располагаются в начальном теге;

- для удобства работы начальный тег вы можете писать с про­писной (заглавной) буквы (Р), а конечный — со строчной (ма­ленькой) буквы (/р), хотя это и не обязательно;

- не для всех элементов требуется ставить конечный (закрыва­ющий) тег;

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

Что такое html, основные понятия

Из истории HTML


HTML появился приблизительно в 1986-1991 годах в Европейском Центре ядерных исследований в Женеве (Швейцария). Разработал его британский учёный Тим Бернерс-Ли.
Тим Бернерс-Ли - cоздатель HTML

В настоящее время большинство страниц в Интернете создаются при помощи HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

HTML


( от англ. HyperText Markup Language - язык гипертекстовой разметки)

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

Теги


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

Пример конструкции

<открывающий тег>   Текст в тегах   </закрывающий тег>

Пример кода
<b>жирный шрифт</b> <!--тег <b> для обозначения жирного шрифта, а тег </b> обозначает прекращение выделения жирным -->
<i>курсив</i> <!--тег <i> для обозначения курсива-->

В браузере данный код отобразит следующее:

жирный шрифт
курсив

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

Атрибуты тегов

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

Если для тега нет значения какого-либо допустимого атрибута (то есть указания его ширины и высоты и тд), то это означает, что браузер будет подставлять значение, заданное по умолчанию.

Пример кода

<img src="image.jpg" width="100" height="100">

Атрибут тега имеет определённый тип (например: текст, число, путь к файлу и тд), который обязательно должен учитываться при написании атрибута. Тег img служит для обозначения изображения, атрибут src для введение его адреса относительно данного файла, а другие атрибуты width и height обозначают соответственно Ширину и Высоту нашего изображения.

Ссылки


Язык HTML позволяет связывать страницы между собой с помощью ссылок (линков).
<a href="index.html">На главную</a>

Наличие ссылок являтся основным свойством веб-страниц. Ссылкой может являться не только некоторая часть текста, но изображение, ее часть или область сайта.

Пример кода готовой страницы


(файл index.html):
<html>
  <head>
    <title>
    Название странички
    </title>
  </head>

  <body>
    <h2>Заголовок</h2>
    Это моя web-страничка!
    <a href="index.html">Ссылка на саму себя</a>
  </body>
</html>

Демонстрация Скачать исходники

Спасибо за внимание! Продолжение в следующих уроках!

Что такое HTML? (коротко о главном)

Источник изображения

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

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

Что представляет собой HTML?

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

Если объяснить суть данного понятия простыми и наглядными образами, то можно сказать, что HTML — это тело, а CSS (Cascading Style Sheets — каскадные таблицы стилей) — одежда. В то время как CSS определяет внешний вид web-страницы, HTML формирует ее структуру (скелет) посредством заголовков, списков и других подобных элементов, начиная от начала страницы — хедера, и до ее конца — футера.

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

Основные функциональные понятия HTML

Как показано на примере HTML-кода, помещенного ниже, он всегда начинается с <!DOCTYPE html>. Для браузера появление этого элемента указывает на то, что ему следует отображать HTML-структуру:

<!DOCTYPE html>

<html>

<body>

<h2>Тут будет размещен заголовок</h2>

<p>А в этом месте будет первый абзац</p>

</body>

</html>

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

  • <body></body> — открывающий и закрывающий тэг, указывающий на начало и окончание той части страницы, в которой будет содержаться ее контент. На русский язык этот тэг переводится словом «тело»;
  • <h2></h2> — опять таки открывающий и закрывающий тэг, указывающий на начало и окончание заголовка. Всего таких тегов может быть 6, и отличаются они величиной шрифта — чем выше числовой порядок заголовка, тем меньшими буквами он будет отражаться. Вместе с тегом <p>, <h2> формирует структуру самого контента: в частности метки <p></p> определяют начало и конец абзацев текста.

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

Для закрепления только что полученного навыка можно дописать еще несколько строчек кода. До этого мы оперировали в рамках «тела» контента, за которое отвечает тэг <body>, но пока это самое тело у нас без «головы». Исправить это досадное недоразумение можно добавив следующие строки:

<!DOCTYPE html>

<html>

<head>

  <title>

  Тут будет название всей страницы

  </title>

</head>

<body>

<h2>Тут будет заголовок, написанный самым большим шрифтом</h2>

<p>А это — усовершенствованный, частично <strong>выделенный жирным шрифтом</strong>абзац.</p>

<h4>Тут будет тоже заголовок, но не такой заметный, как предыдущий — он будет выполнен более мелким шрифтом</h4>

<p>Еще один абзац для полноты картины.</p>

</body>

</html>

По сути, приведенный выше второй фрагмент HTML кода — это расширенный вариант первого:

  • появилось титульное название страницы, которое помещено между тэгами <title></title>, которые, в свою очередь формируют заглавную, а не контентную частью страницы, так как они размещены внутри тега <head></head>, а не <body></body>;
  • появился еще один заголовок более низкого порядка (он будет менее заметен), который будет размещен в рамках <h4></h4>;
  • преобразится часть текста в первом по порядку абзаце: фраза, заключенная в тэг <strong></strong> (на русский язык переводится «сильный»), будет выделена жирным.

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

Не так страшен HTML, как его рисуют, верно?

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

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

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

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

Также к вашим услугам отдел верстки нашей компании ([email protected]), который с удовольствием исполнит любую вашу прихоть в рамках платформы: слайдеры, поп-апы, сложные лид-формы, галереи и т.д. В нашем редакторе можно все!

Высоких вам конверсий!

Игорь Кизин,

руководитель отдела верстки LPgenerator

По материалам blog.hubspot.com

21-10-2013

Что такое HTML? Определение и основные особенности :: SYL.ru

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

Что такое HTML?

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

что такое html

Позднее добавилась возможность перейти по ссылке, которая ведет к другому текстовому документу, расположенному в интернете. Это привело к началу формирования взаимосвязанной системы сайтов, которая выросла до сегодняшних масштабов. От этого и произошло название HTML - Hyper Text Markup Language. На русский язык эту фразу переводят как "язык гипертекстовой разметки".

Начало развития

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

Основные элементы

Что такое HTML, если рассматривать его изнутри? Любой файл HTML - это обычный текстовый документ. В основе его разметки лежат теги. Зачастую они представляют собой парные конструкции, которые предназначены для изменения свойств информации (причем не только текстовой). Например, если написать в теле html-файла: "Любое слово", браузер отобразит написанное курсивом.

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

В помощь программисту

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

что такое html разметка

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

CSS

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

window html

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

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

Средства CSS побладают расширенными возможностями для оформления сайтов, с которыми чистый HTML не сравнится.

Сложности разработки

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

hyper text markup language

Построение сложных страниц может быть выполнено двумя подходами:

  • Первый предполагает создание таблиц, в ячейках которых располагается информация.
  • Второй основан на слоях или блоках. Что такое HTML-слой? Это абсолютно произвольная область. Размер и расположение никак не ограничены.

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

JavaScript

HTML-разметка без каких-либо дополнений позволяет создавать страницы со статичной информацией. Чтобы сделать сайты интерактивными, к существующим стандартам был добавлен язык сценариев под названием JavaScript. В нем используется концепция объектов, к которым могут применяться методы и функции во время какого-либо события. Например, главный объект с точки зрения JavaScript - это Window. HTML-страница может быть закрыта, если применить к нему метод "close".

html программа

Основные преимущества языка сценариев:

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

Вместо заключения

Вопрос: "Что такое HTML?" раскрыт. Надо сказать, что статья не описывает и меньшей части всех возможностей гипертекстовой разметки. Чтобы разобраться в большинстве тонкостей, нужно прочесть не одну книгу, а теорию совмещать с практикой.

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

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