Парный тэг языка html называется. Основы HTML
Язык гипертекстовой разметки HTML (англ. HyperText Markup Language ) - является языком разметки документов во Всемирной паутине.
Хочу сразу обратить Ваше внимание, что HTML является языком разметки, а не программирования, как многие ошибочно полагают. Его основная задача создать каркас для описания различных компонентов документа, таких как абзацы , заголовки , списки , таблицы , ссылки на другие страницы и так далее.
HTML документы описываются специальными именами HTML элементов (тегами ), каждый тег описывает различное содержание документа. Теги представляют собой команды , которые сообщают браузеру, каким образом отображать веб-страницу (документ).
Теги бывают двух видов: парные и одиночные (пустые). У парных HTML-тегов первый тег в паре является начальным (открывающим ) тегом, а второй тег является конечным (закрывающим ) тегом. Основная функция начального тега заключается в том, чтобы сообщить браузеру где команда начинается, а конечным тегом определить где она заканчивается.
Давайте рассмотрим чем отличаются парные теги от одиночных.
Вид (синтаксис) парного тега:
<тег> Содержание тегатег>Обратите внимание, что все теги заключены в угловые скобки < и > , а закрывающий тег всегда должен содержать прямой слеш перед названием тега - тег> , этим мы сообщаем браузеру, что на этом месте наша "команда" закончена.
Большинство ошибок в верстке (создание структуры HTML кода ) у Вас может возникать по той причине, что не указан закрывающий тег или он указан без прямого слеша / . Если не указать прямой слеш, то браузер воспринимает тег как открывающий, а не закрывающий. В том случае если вы вообще не указали закрывающий тег, то браузер не узнает где Ваша команда заканчивается, чтобы её остановить, что может привести к серьезным ошибкам, будьте внимательны. К счастью, современные редакторы HTML кода позволяют быстрее отслеживать ошибки такого рода.
Вид (синтаксис) одиночного тега:
<тег> СодержаниеВ современном стандарте HTML 5 одиночные теги записываются как и начальные теги у парных тегов (наименование тега помещено в угловые скобки < и > ).
Обращаю Ваше внимание, что до выхода современного стандарта одиночные теги требовали наличие прямого слеша перед наименованием тега (записывались по аналогии с закрывающими тегами). Использование прямого слеша в одиночных тегах не будет считаться ошибкой, но в этом и нет необходимости - короче код, быстрей загрузка.
Основное отличие одиночных тегов от парных заключается в том, что одиночные теги не требуют закрывающий тег после содержимого элемента. Они добавляют на страницу одиночные объекты, например, изображение, или производят какое-то одиночное действие, например, такое как перевод строки. В HTML одиночных тегов значительно меньше чем парных, к концу обучения вы будете знать их все.
Хотя в HTML 5 теги не чувствительны к регистру, я рекомендую вам писать их в нижнем регистре. С помощью тегов браузер распознает структуру и значение текста, они сообщают браузеру, какая часть документа является заголовком, где начинается новый абзац, где начинается список, либо размещена таблица, что нужно выделить цветом, что перенести на следующую строку и так далее. Анализируя эту информацию, браузер отображает каждый элемент так, как мы ему это сообщили.
Пример простого HTML документа:
И так, мы с Вами поняли, что HTML - это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу. Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:
Это заголовок
Это параграф (абзац).
Хочу сразу обратить Ваше внимание на то, что браузеры игнорируют символы табуляции и пробелы в документе (если им явно это не указать, но об этом позднее). Чтобы вам было легче воспринимать HTML код в примерах, теги вложенные в другие теги мы будем отделять табуляцией (как показано в примере) выше.
А теперь детально разберем из чего состоит любая HTML страница:
DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.
Декларация сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки - HTML 5 .
Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом . Декларация не чувствительна к регистру, но записывать её принято в верхнем регистре.Хронология версий HTML:
Версия | HTML | HTML 2.0 | HTML 3.2 | HTML 4.01 | XHTML | HTML 5 |
---|---|---|---|---|---|---|
Год | 1991 | 1995 | 1997 | 1999 | 2000 | 2014 |
Текст между
и
(англ. HTML Paragraph Element ) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.Ниже показано как отображается вышерассмотренный пример в браузере:
Обращаю Ваше внимание, что все примеры, которые рассматриваются в учебнике доступны для просмотра в отдельном окне. Желательно, чтобы вы помимо вопросов и задач, которые будут приводится в конце каждой статьи создавали аналогичные (собственные примеры) и эксперементировали с ними. Это позволит Вам максимально быстро изучить и применять рассмотренный материал.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы ответьте, или найдите ответ на следующие вопросы:
- Какая основная задача языка гипертекстовой разметки?
- Какая версия языка HTML сейчас используется?
- Что такое декларация? Какая декларация используется в современном стандарте?
- В какой HTML элемент помещается видимое содержимое документа (страницы)?
HTML(HyperText Markup Language) – это язык разметки гипертекста . Язык разметки используется для придания структуры интернет-странице, сайту. Язык разметки не несет в себе оформление, а выполняет задачи структурирования. Структура задается с помощью специальных элементов — меток, понятных браузеру. Эти метки называются тегами – от англ. слова tag - именованная метка.
Гипертекст – это документ, разметка которого выполнена с помощью языка HTML . Термин «гипертекст» изначально был введён Тедом Нельсоном для обозначения текста, «который разветвляется сам по себе или выполняет действие по запросу».
HTML документ – это обычный текстовый файл, который имеет специальную структуру. При открытии интернет-браузер обрабатывает этот документ, в результате чего мы с вами видим привычные для нас интернет-страницы, где есть текст, картинки, ссылки, и т.д. Интернет-страницы имеют расширение – html .
Рассмотрим структуру простого HTML документа
|
Строка называется тегом. Вообще, все, что заключено в символы <> называется тегом. Данные символы — служебные в языке HTML. Теги бывают двух видов:
- Парные — данные теги имеют открывающийся и закрывающийся тег. Закрывающийся тег содержит знак наклонной черты. Между данными тегами вписывается содержимое тега. Содержимым тега может быть как обычный текст, так и другие, вложенные теги. Примеры парных тегов:
- Непарные
— теги, которые не закрываются. Пример:
Теги можно писать большими и малыми буквами, поскольку HTML не различает написание. Закрывать парные теги нужно всегда!
Считается хорошим тоном знать и уметь оперировать большим количеством тегов. Этого не нужно пугаться, всё запомнится и уложится в голове, как только вы начнёте применять свои знания на практике. С основными тегами мы познакомимся в ходе нашего дальнейшего обучения. А вообще, в интернете сейчас доступно огромное количество справочников по HTML , где вы сможете найти актуальную информацию, ведь прогресс не стоит на месте, а языки программирования стремительными тепами развиваются и практически каждые пол года выходят обновления. Также, минимум тегов, которые будут необходимы нам в ходе обучения вы найдете в нашей шпаргалке
Рассмотрим структуру HTML документа:
- — что же это за тег такой? Это версия HTML которая используется в данной странице. Подобным тегом принято начинать все HTML-документы. Это считается хорошим тоном. DOCTYPE указывает браузеру в какой версии HTML был написан документ, для того, что бы все браузеры (а их сейчас много) могли правильно обработать разметку и отобразить содержимое документа. Если этого не сделать, то браузер по умолчанию некорректно определит версию документа, в результате чего вся разметка может поехать и неправильно отображаться в разных браузерах. В данном случае DOCTYPE указывает на версию HTML5 .
- — все содержимое страницы заключено между данными парными тегами, которые информируют браузер, что это HTML страница.
- -служебная секция (заголовок), которая используется для подключения внешних файлов, и установок отвечающих за вид, вывод и работу данной страницы. Содержимое ее, чаще всего, не отображается на странице, кроме тега title. Тег title – содержит заголовок страницы, который отображается во вкладке.
- — все что отображается на странице, пишется в теге body.
Для расширения функционала HTML в тегах добавляют специальную информацию, которая называется атрибутами. Так в строке:
|
charset="UTF-8" — атрибут. Атрибутов может быть много. Атрибуты пишутся через пробел. В данном случае, с помощью тега meta HTML странице указывается кодировка UTF-8. Т.е. браузеру указывается кодировка данного документа, для правильного отображения содержимого страницы.
Атрибуты используются для расширения функционала тегов и позволяют модифицировать как способы отображения тегов на странице, так и их поведение. Не все теги используются для вывода информации, есть теги которые используются только для программирования поведения страницы, например с помощью JavaScript.
Вопросы для самоконтроля
- Что такое гипертекст?
- В чем состоит необходимость использования HTML?
- Что такое кодировка страницы? Зачем она применяется? Где в браузере можно поменять кодировку?
- Какие виды атрибутов вам известны?
- Что такое теги? Чем они отличаются от атрибутов?
- Какие теги обязательно должна содержать HTML страница?
Текст урока разработан совместно с Каменщик М.
Определение в Википедии: HTML (от англ. HyperText Markup Language - язык разметки гипертекста ) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML ). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
Все что Вы видите в окне браузера, каждый элемент веб страницы: текстовые блоки, абзацы и заголовки, фотографии, реклама, различные меню, формы для заполнения и т.д., - все это создано и размещено на странице веб разработчиком при помощи HTML.
Язык HTML отвечает за разметку страницы, за порядок и последовательность расположения ее элементов. При помощи HTML элементам страницы задают определенные свойства и характеристики. Редактирование текста - это тоже HTML.
Но HTML - это не язык программирования, как некоторые ошибочно полагают, - по сути это редактор, язык разметки гипертекстовых документов. И это, конечно же, основа веб-дизайна.
Теги парные и одиночные
Основой языка HTML являются теги . Каждый элемент страницы обозначен тем или иным тегом.
Тег - это «метка», состоящая из буквы или нескольких букв, заключенных между символами «меньше чем» - "<" и «больше чем» - ">" . Теги бывают парные и непарные (одиночные) .
- парные теги . У таких тегов сначала идет открывающий тег - между символами "<" и ">" , сообщающий браузеру о начале своего действия в данном месте; затем закрывающий тег – между символами"" и ">" (то есть у закрывающего тега к символу «меньше чем» - "<" добавляется слэш / ), сообщающий браузеру о завершении своего действия.
Закрывающий тег не всегда является обязательным.
- одиночные теги не имеют закрывающего элемента.
Парный тег
- открывает кавычки. Он имеет обязательный, закрывающий кавычки, тег
.
Кавычки
Парный тег
Парный тег
Создает новый параграф. Он имеет закрывающий тег
, который не является обязательным!Каждый следующий тег
Не только создает новый абзац, но и завершает предыдущий. Новый абзац будет отделен от предыдущего пустой строкой.
Здесь же введем еще одно из ключевых понятий языка HTML - Атрибут тега.
Атрибуты тега являются его дополнением - они задают дополнительные правила отображения содержимого тега на странице.
Например, атрибут align тега
Определяет выравнивание содержимого тега (текста ) по горизонтали.
Многие теги имеют несколько атрибутов, среди которых есть обязательные. Есть теги не имеющие атрибутов!
Первый абзац - его завершение не обозначено закрывающим тегом.
Второй абзац имеет закрывающий тег. Атрибут align задает выравнивание текста по центру в горизонтальной плоскости!
Первый абзац - его завершение не обозначено закрывающим тегом.
Второй абзац имеет закрывающий тег. Атрибут align задает выравнивание текста по центру в горизонтальной плоскости!
Одиночный тег
Одиночный тег
, использующийся для переноса строки, не имеет закрывающего тега и не имеет атрибутов.
С помощью тега
установим перенос строки внутри текущего абзаца.
С помощью тега
установим перенос строки внутри текущего абзаца.
Редактор HTML
По сути веб страница - это обычный текстовый документ, поэтому для ее создания можно воспользоваться простым текстовым редактором, который является частью ОС Windows - Блокнотом .
Естественно, существует несколько визуальных редакторов для работы с HTML, лидером среди которых является Dreamweaver (Дримвивер ) - HTML-редактор от компании Adobe .
Но Dreamweaver и другие специализированные HTML-редакторы - это помощники, которые автоматизируют работу с кодом. И перед тем, как приступать к их помощи и начинать с ними работать, необходимо этот код знать. Поэтому первые шаги в изучении HTML и CSS (Cascading Style Sheets - каскадные таблицы стилей ) следует делать, используя Блокнот . При этом набирать код Вы будете вручную - с клавиатуры. А это как раз то что нужно для начинающих изучение языка HTML и технологии CSS.
В дальнейшем, естественно, необходимо переходить к специализированным HTML-редакторам.
HTML элемент - это основная структурная единица веб-страницы, написанная на языке HTML.
Парные и одиночные теги HTML
Синтаксис HTML элементов, состоящих из парных тегов:
- Элемент начинается с открывающего тега.
- Элемент заканчивается закрывающим тегом.
- Содержимым элемента является все, что находится между открывающим и закрывающим тегами. Содержимое может быть текстом и/или другим HTML элементом.
Примечание: не забывайте в закрывающем теге ставить символ "/ ", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом. Если не поставить символ "/ " в закрывающем теге, то браузер примет его за новый элемент, вложенный в предыдущий, который по мнению браузера всё ещё не закрыт.
Синтаксис HTML элементов, состоящих из одиночных тегов:
- Элемент состоит только из открывающего тега.
Элементы, состоящие из одиночных тегов называются пустыми . Всего в HTML 16 одиночных тегов:
Вложенные элементы
HTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:
Мой первый абзац
Когда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:
Это очень
интересноЗдесь элемент выходит за пределы элемента
Пример с правильной вложенностью:
Это очень интересно
Здесь элемент правильно вложен - он находится полностью в элементе
Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:
Мой первый абзацПробельные символы
Мой первый заголовок
Код примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет менее удобен для чтения:
Мой первый заголовок
Мой первый абзац
Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.
Министерство образования Республики Беларусь
БЕЛОРУССКИЙ НАЦИОНАЛЬНЫЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ
Кафедра «Основы бизнеса»
Отчёт о выполнении лабораторной работы №1
«СТРУКТУРА ГИПЕРТЕКСТОВОГО ДОКУМЕНТА»
по дисциплине «Информационные технологии»
Выполнила: студентка гр.105032Бычко Е.В.
Принял:преподавательДашкевичН.В.
Лабораторная работа №1
СТРУКТУРА ГИПЕРТЕКСТОВОГО ДОКУМЕНТА
Цель работы: приобрести начальные навыки создания простейших Internet-документов; научиться выполнять форматирование созданных Web-страниц.
Выполнение работы
Задание 1.Создание файловой структуры
Пользуясь средствами Проводника, в своей рабочей папке была создана файловая структура, приведенная на рис. 1.1.
Рис. 1.1. Файловая структура
Задание 2. Создание HTML документа
Средствами приложения блокнот создайте HTMLдокумент, при просмотре которого в браузерах в строке заголовка окна отображается текст «Содержимое строки заголовка», в основной области – текст «Так выглядит документ HTML». На рисунке 2.1. представлен HTML документ.
Рис. 2.1. HTMLдокумент
Просмотр документа в браузере представлен на рисунке 2.2.
Рис. 2.2. Документ в браузере
Задание 3. Изменение HTMLдокумента
Необходимо изменить документ таки образом, чтобы при просмотре в браузере в строке заголовка отображался текст «Общий вид документа html», а в основной части документа – текст:
«Вот некоторые приемы работы,
которые мы освоим:
разбиение текста
выравнивание текста
создание заголовков
работа с таблицами.»
Структура HTML документа представлена на рисунке 3.1.
Рис. 3.1. HTMLдокумент
Просмотр документа в браузере (рис. 3.2).
Рис. 3.2. Документ в браузере
Контрольные вопросы
Что такое гипертекст?
Какова структура простейшего HTML-документа?
Структура самого простого HTML документа имеет следующий вид:
ПЕРВЫЙ ТЕКСТ НА СТРАНИЧКЕ
Как задаётся начало текстового абзаца?
Для задания начального абзаца необходимо использовать парный тег - начало и конец абзаца.
В чём заключается разметка гипертекста средствами HTML?
HTML - теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками - тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных. В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства. Атрибуты указываются в открывающем теге.
Чем непарные теги отличаются от парных?
Теги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в том месте, где они вставлены. При использовании парных тегов в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключённую между ними.