Понятие html – 22. Язык html, назначение, основные структуры языка.

alexxlab

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

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

Введение в HTML основные понятия

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

Пример простого HTML документа:

 

Мой первый параграф

 

Разъяснение примера.
Объявление<! DOCTYPE html> определяет этот документ как HTML5.
Элемент <html> является корневым элементом HTML-страницы.
 
Элемент <head> содержит мета информацию о документе.
Элемент <title> указывает заголовок документа.
Элемент <body> содержит видимое содержимое страницы.
Элемент <h2> определяет заголовок.
Элемент <p> определяет абзац.
HTML-теги
HTML-теги — это имена элементов, окруженные угловыми скобками:
<имя тега> содержимое идет здесь … </ имя тега>
HTML-теги обычно бывают с закрывающими тегами, такими как <p> и </ p>
Первый тег   — это открывающий тег, второй тег — закрывающий.
Закрывающий тег отличается от открывающего наличием косой черты.
Браузеры
Браузер не отображает теги HTML, но использует их для отображение содержимого страницы.
Первый HTML Первый HTML Результат выполнения кода браузером
В браузере отображается только контент внутри раздела <body> (белая область выше).
Структура HTML страницы схематично
Визуально страница имеет следующую структуру:
HTML страница визуальная структураHTML страница визуальная структураСтруктура HTML страницы
Объявление типа документа <! DOCTYPE>
Объявление типа документа <! DOCTYPE>  позволяет браузерам правильно отображать веб-страницы.
Он должен появляться только один раз, в верхней части страницы (перед любыми тегами HTML).
Объявление <! DOCTYPE> не чувствительно к регистру.
Объявление <! DOCTYPE> для HTML5:
Версии HTML
С первых дней существования Интернета было много версий HTML, а именно:
ВерсияГод
HTML1991
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML2000
HTML52014
Понятие тега HTML
 

Тег (мн. теги, иногда тэг) — это элемент языка HTML, с помощью которого выполняется разметка исходного текста веб-страницы. Теги представляют из себя сокращения или аббревиатуры английских слов заключенные в угловые скобки <>, например, тег <p>…</p> сокращение от английского слова paragraph, то есть текст заключенный в данный тег будет распознаваться браузерами, как параграф.


HTML теги


Каждый тег в HTML имеет специальное значение и отвечает за вывод определенных данных. Регистр букв в названиях тегов не имеет значение, например, тег 
 <p>…</p> и тег <P>…</P> — это одно и то же. То есть теги можно записывать и строчными, и заглавными буквами. Раньше общепринятым было, все теги записывать заглавными буквами, чтобы теги отличались от обычного текста. Сейчас такой необходимости нет, так как многие редакторы имеют подсветку синтаксиса.

 
Классификация тегов
 

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


Некоторые теги дают разовый эффект в месте своего появления. Например, тег горизонтальной полосы <HR> или тег отображения картинки <img>. Такие теги не имеют закрывающих тегов. Такие теги называют не парные.

 
Типы тегов
 

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


  • теги верхнего уровня;
    • 

  • теги заголовка документа;
    • 

  • блочные элементы;
    • 

  • строчные элементы;
    • 

  • универсальные элементы;
    • 

  • списки;
    • 

  • таблицы;
    • 

  • фреймы.
    • 

Это разделение не строгое, поэтому некоторые теги находятся в разных группах. Например, тэги для создания списков <ol> и <ul> относятся и к спискам, и к блочным элементам.

 
Структура тегов
 

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


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


  1.  <img src=»logo.jpg»>
    2. 

  2. <a href=»samsebewebmaster.ru»>Сам Себе Вебмастер</a>
    3. 

Для примера я привел два совершенно разных тега. Первый <img> одинарный — отвечает за вывод изображений, атрибут — src=»logo.jpg». Второй  <a>…</a> парный отвечает за создание ссылок, атрибут — href=»samsebewebmaster.ru».


Вывод 1: Атрибуты могут иметь парные и непарные теги.


Вывод 2: Атрибуты могут иметь только открывающие теги, закрывающие теги не имеют атрибутов.


Картинка для разъяснения:

Cтрутура тега html
 
Рисунок 1. Cтрутура тега html


 

 
Задача на внимательность и знание синтаксиса HTML
 

Давайте посмотрим на примере простой веб-страницы, которую мы рассматривали в уроке Введение в HTML:



1
2

 
Простейшая HTML страница

Простейшая HTML страница
Тескт веб-страницы.
Задание: Проанализируйте и найдите две ошибки в коде использованного примера.
На этом урок закончен. Теперь вы знаете такое понятие, как Тег языка HTML.
 [Всего голосов: 0    Средний: 0/5]
Читайте также:
Понятие тега HTML и его синтаксис
 Как было сказано в определении, HTML – это язык гипертекстовой разметки веб-документов. 
 Осуществляется такая разметка при помощи специальных меток, называемых тегами.
 Тег HTML (от англ. tag) – 
 специальная метка, используемая в HTML для разметки веб-страницы в соответствии с установленными правилами.
  
 Теги в html-документе идентифицируются парой символов ‘ и 
 ‘>’, между которыми располагаются характеристики тега:
  • символ слеша, если он есть;
  • имя тега;
  • атрибуты тега, если они есть;
  • значения атрибутов, если они есть.
 В качестве примера рассмотрим два тега: 
 <p   
 title=»Описание города»> и 
 </p>. Эта пара тегов образует элемент ‘Абзац’ разметки документа. 
 Первый из них является открывающим тегом и обозначает начало элемента 
 ‘Абзац’. Второй же является закрывающим тегом. 
 Он сообщает браузеру о том, что элемент ‘Абзац’ закончился и все, что будет написано далее, следует 
 отнести к другому элементу разметки.
 Как легко догадаться, у закрывающего тега после символа ‘ должен стоять символ слеша 
 ‘/’. Далее следует имя тега (в нашем примере это идентификатор p) 
 и символ ‘>’. Других составляющих закрывающие теги не имеют.
 
 В открывающих тегах слеш не пишется. Тоже самое касается и одиночных тегов, 
 т.е. тегов, для которых закрывающего тега не существует. Зато в них может присутствовать дополнительная информация в виде атрибутов (от англ.  attribute), 
 определяющих какие-нибудь дополнительные свойства, и значений атрибутов, которые обычно записываются 
 в формате имя_атрибута=»значение_атрибута»
 и отделяются друг от друга пробелами. Так в теге 
 <p id=»textIndent» title=»Описание города»> 
 имеется два атрибута и два соответствующих им значения. Следует отметить, что существуют атрибуты и без значений. В таком случае вторая 
 часть пары и символ ‘=’ отсутствуют, а вместо этого через пробел указывается только сам атрибут. Кроме того, 
 строковые значения атрибутов должны указываться в кавычках. Мы для этих целей будем использовать двойные кавычки. Числа разрешается в кавычки 
 не брать, но желательно так не поступать во избежание путаницы.
 Что касается регистра символов имен тегов и имен атрибутов, то он значения не имеет. Так обе записи 
 <p id=»textIndent» title=»Описание города»> и 
 <P ID=»textIndent» TITLE=»Описание города»> равносильны. 
 Однако мы, за редким исключением, как в случае с тегом <!DOCTYPE html>, 
 будем писать их в нижнем регистре.
 Совсем по другому обстоит дело со значениями атрибутов, которые могут быть регистрозависимыми. Например, при указании путевых имен файлов 
 регистр символов должен соответствовать первоисточнику, иначе наверняка возникнет ошибка. Так записи 
 <img src=»/pic_1.jpg»> и 
 <img src=»/PIC_1.JPG»> 
 не эквиваленты, поскольку ссылаются на два разных файла изображения.
 Таким образом, в общем случае для записи открывающего или одиночного тега мы будем использовать следующий синтаксис:
<имя_тега имя_атрибута_1=»значение_атрибута_1″  …   
 имя_атрибута_n=»значение_атрибута_n»>, 
 где 
 имя_тега, а также имя_атрибута мы будем писать строчными буквами, а
 «значение_атрибута» записывать в двойных кавычках в независимости от того, является 
 значение числом или строкой.
Добавить комментарий 
Ваш адрес email не будет опубликован. Обязательные поля помечены *