Читать онлайн «Основы языка HTML. Часть первая», Дмитрий Кудрец – Литрес
© Дмитрий Кудрец, 2019
ISBN 978-5-4496-2165-8 (т. 1)
ISBN 978-5-4496-2166-5
Создано в интеллектуальной издательской системе Ridero
Начало истории HTML относится к 1969 году, когда Чарльз Гольдфарб, работающий в компании IBM, создал прототип языка для разметки технической документации, впоследствии названного GML, а с приданием ему в 1986 году статуса международного стандарта – SGML (Standard Generalized Markup Language). Этот обобщенный метаязык предназначен для построения систем логической, структурной разметки любых разновидностей текстов. Слово «структурная» означает, что управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о форматировании документа, а лишь указывает границы и соподчинения его составных частей, т.е. задают его структуру. Однако сам по себе SGML не получил сколько-нибудь заметного распространения до тех пор, пока в 1991 г.
сотрудники европейского института физики частиц (CERN),занятые созданием системы передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык – самое известное из приложений SGML – был назван HTML (Hyper Text Markup Language – язык разметки гипертекста).
Гипертекст – информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.
В 1991 – 1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария) разработку языка возглавил Тим Бернерс-Ли. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения).
Текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащенностью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). С течением времени, основная идея платформонезависимости языка HTML была отдана в жертву современным потребностям в мультимедийном и графическом оформлении.
Текстовые документы, содержащие код на языке HTML, обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами», предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра и, при необходимости, отправки введенных пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox и Opera.
Версии языка HTML
Версия HTML 1.0 была предельно проста – кроме тегов для записи гипертекстовых переходов, она предусматривала лишь несколько тегов для логической разметки текста и один тег IMG для записи ссылок на файлы с картинками-иллюстрациями.
Официальной спецификации HTML 1.0 не существует. До 1995 года существовало множество неофициальных стандартов HTML. Чтобы стандартная версия отличалась от них, ей сразу присвоили второй номер.
Развитие графических средств вывода информации провоцировало появление в следующих версиях HTML многочисленных тегов, позволяющих непосредственно управлять видом элемента на экране. Описанием стандартов HTML, начиная с версии 2.0 (1994 года), стала заниматься организация W3C (World Wide Web Consortium – консорциум Всемирной паутины). 22 сентября 1995 года HTML 2.0 был одобрен как стандарт языка.
В 1995 году Консорциум ввел в HTML версии 3.0 поддержку иерархических стилевых спецификаций CSS (Cascading Style Sheets – каскадные таблицы стилей). CSS – это разрешение противоречий между идеологией структурной разметки и потребностями разработчиков в гибких и богатых средствах визуального представления элементов на экране. Язык CSS имеет свой собственный синтаксис и позволяет задавать визуальные параметры представления элементов на экране.
Таким образом, CSS берет на себя задачу объяснить браузеру, как отображать элементы на экран, и позволяет тем самым отделить структурную разметку документа (в HTML-коде) от описаний визуальных свойств объектов (в CSS- коде).
Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2 (14 января 1997) в которой были опущены многие нововведения версии 3.0, но добавлены много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, нестандартные элементы, поддерживаемые браузерами «Netscape» и «Mosaic».
В 1999 году W3C опубликовала спецификации версии HTML версии 4.0 (18 декабря 1997). Она содержала много элементов, специфичных для отдельных браузеров, но в то же время произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и нерекомендованные. В частности, элемент FONT, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).
Затем был опубликован стандарт HTML 4.01 (24 декабря 1999). На этом развитие языка HTML закончилось окончательно.
НОУ ИНТУИТ | Лекция | Основы языка HTML
< Лекция 4 || Лекция 5: 1234567891011 || Лекция 6 >
Аннотация: В этой лекции рассматривается структура HTML-документа. Описывается создание и применение гиперссылок, списков, таблиц, фреймов, форм. Показаны мультимедийные возможности HTML.
Ключевые слова: HTML, язык разметки, Web, текстовый файл, заголовки, WYSIWYG, composability, frontpage, WWW, html-редактор, markup tag, управляющие, информация, tag, end, синтаксис, значение, тег, возврат каретки, пробел, расстояние, группа, браузер, программа, письмо, head, BODY, Заголовок документа, тело документа, gray-out, элемент текста, samp, Абсолютной величиной, альтернативный текст, аплет, объект, ссылка, указатель, слово, прямой, установка программ, PICT, доменная имя, CTC, education, домашняя директория, mailto, блочный элемент, маркированный список, disc, очередь, шрифт, контейнер, baseline, путь, разделы, фрейм, абсолютные размеры, поддержка, WAV, AIFF, MIDI, VRML, quicktime, MOV, отображение объекта, natural, файл, portable document, format, Размещение, сайт, textarea, check box, radio button, очистка формы
intuit.ru/2010/edi»>HyperText Markup Language (HTML) — язык разметки гипертекста — предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.Гипертекстовый документ — это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок — специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (таких, как emacs или NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.
Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть — собственно текст, т. е. данные, составляющие содержимое документа.
Другая — теги (markup tags), называемые также флагами разметки, — специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.
Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:
intuit.ru/2010/edi»><имя_тега [атрибуты]>Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:
</имя_тега>Атрибуты тега записываются в следующем формате:
имя[=»значение»]
Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, — элементом.
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и » (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
К специальным символам можно отнести и неразрывный пробел. Использование этого символа — один из способов увеличить расстояние между некоторыми словами в тексте. Обычные пробелы использовать для этих целей нельзя, так как группа подряд идущих пробелов интерпретируется браузером как один.
Каждая из таких зарезервированных последовательностей начинается символом амперсенда (&) и заканчивается точкой с запятой (;).
| Последовательность | Символ |
|---|---|
| < | символ < |
| > | символ > |
| & | символ & |
| « | символ » (кавычка) |
| неразрывный пробел |
Структура HTML-документа
Самым главным из тегов HTML является одноименный тег — <HTML>. Он должен всегда открывать ваш документ, так же, как тег </HTML> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ.
Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег </HTML> дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.
HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
</BODY>
</HTML>В HTML-документ можно включать комментарии
, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов <!- и ->, при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга.Заголовок документа
intuit.ru/2010/edi»>Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.
Чаще всего в заголовок документа включают парный тег <TITLE> … </TITLE>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна.
Название документа вписывается между открывающим и закрывающим тегами.
Тело документа
В отличии от заголовка, тело документа является обязательным элементом, так как в нем располагается весь материал вашего документа (есть только одно исключение, с которым мы познакомимся далее, — когда документ содержит вместо тела группу фреймов). Тело документа размещается между тегами <BODY> и </BODY>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML, позволяющими корректно отображать страницу на экране монитора.
Тег <BODY> не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов, которые приведены в таблице.
| Атрибут | Назначение |
|---|---|
| ALINK | Определяет цвет активной ссылки |
| BACKGROUND | Указывает на URL-адрес изображения, которое используется в качестве фонового |
| BGCOLOR | Определяет цвет фона документа |
| LINK | Определяет цвет непосещенной ссылки |
| ТЕХТ | Определяет цвет текста |
| VLINK | Определяет цвет посещенной ссылки |
intuit.ru/2010/edi»>Пример <HTML> <HEAD> <TITLE>Моя страничка</TITLE> </HEAD> <BODY TEXT=red BGCOLOR=white> Тело <!- Это комментарий -> документа </BODY> </HTML>
Дальше >>
< Лекция 4 || Лекция 5: 1234567891011 || Лекция 6 >
Основы HTML (с примерами)
В этом руководстве вы узнаете об основах HTML и их реализации с помощью примеров.
HTML (язык гипертекстовой разметки) — это язык разметки, используемый для структурирования и организации содержимого на веб-странице. Он использует различные теги для определения различных элементов на странице, таких как заголовки, абзацы и ссылки.
Иерархия HTML
Элементы HTML являются иерархическими, что означает, что они могут быть вложены друг в друга для создания древовидной структуры контента на веб-странице.
Эта иерархическая структура называется DOM (объектная модель документа) и используется веб-браузером для отображения веб-страницы.
Например,
<голова>
Моя веб-страница
<тело>
Привет, мир!
Это моя первая веб-страница.
Он содержит
главный заголовок и абзац .
Вывод браузера
В этом примере элемент html является корневым элементом иерархии и содержит два дочерних элемента: head и body . Элемент head , в свою очередь, содержит дочерний элемент, называемый title , а элемент body содержит дочерние элементы: h2 и p .
Давайте посмотрим, что означают различные элементы, использованные в приведенном выше примере.
-
-
-
</code> : содержит заголовок веб-страницы, который будет отображаться в строке заголовка веб-браузера или на вкладке</li><li> <code><body> </code> : содержит основное содержимое веб-страницы, которое будет отображаться в окне веб-браузера</li><li> <code><p> </code> : содержит абзацы текста на веб-странице</li><li> <code> <strong> </code> , <code> <em> </code> : дочерние элементы элементов <code><p> </code>, они используются для пометки текста как важного и выделенного соответственно</li></ul><p> <strong> Примечание </strong> : в веб-браузере отображаются только элементы внутри тега <code><body> </code>.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/9/914374/slide_26.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/9/914374/slide_26.jpg' /></noscript></p><hr/><h3><span class="ez-toc-section" id="_HTML-7"> Что такое элементы HTML? </span></h3><p> Элементы HTML состоят из нескольких частей, включая открывающий и закрывающий теги, содержимое и атрибуты. Вот объяснение каждой из этих частей:</p><p> Здесь,</p><ul><li> <strong> Открывающий тег </strong> : Он состоит из имени элемента, заключенного в угловые скобки. Он указывает начало элемента и точку, в которой начинаются эффекты элемента.</li><li> <strong> Закрывающий тег </strong> : То же, что и открывающий тег, но с косой чертой перед именем элемента. Он указывает конец элемента и точку, в которой эффекты элемента прекращаются.</li><li> <strong> Содержимое </strong> : Это содержимое элемента, которое может быть текстом, другими элементами или их комбинацией.</li><li> <strong> Элемент: </strong> Открывающий тег, закрывающий тег и содержимое вместе составляют элемент.</li></ul><hr/><h3><span class="ez-toc-section" id="_HTML-8"> Что такое атрибуты HTML? </span></h3><p> Элементы HTML могут иметь атрибуты, предоставляющие дополнительную информацию об элементе. Они указываются в открывающем теге элемента и имеют форму пар имя-значение.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/shareslide.ru/img/thumbs/8bbab9563b22eb8563a014416e9b783f-800x.jpg' /><noscript><img loading='lazy' src='/800/600/https/shareslide.ru/img/thumbs/8bbab9563b22eb8563a014416e9b783f-800x.jpg' /></noscript> Давайте рассмотрим пример:</p><pre> <a href="http://example.com"> Пример </a> </pre><p> <code> href </code> является атрибутом. Он предоставляет информацию о ссылке о <code> <a> </code> тег. В приведенном выше примере</p><ul><li> <code> href </code> — имя атрибута</li><li> <code> https://www.programiz.com </code> — значение атрибута</li></ul><p> <strong> Примечание </strong> : Атрибуты HTML в основном необязательны. <br/></p><hr/><h3><span class="ez-toc-section" id="_HTML-9"> Синтаксис HTML </span></h3><p> Мы должны следовать строгим правилам синтаксиса, чтобы написать допустимый код HTML. Это включает в себя использование тегов, элементов и атрибутов, а также правильное использование отступов и пробелов. Вот несколько ключевых моментов о синтаксисе HTML:</p><p> 1. Теги HTML состоят из имени элемента, заключенного в угловые скобки. Например, <code><h2></h2> </code>, <code><p> </code>, <code> <img> </code> — это некоторые HTML-теги.</p><p> 2. HTML-элементы создаются путем помещения содержимого элемента внутрь открывающего и закрывающего тегов элемента.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/9/914374/slide_36.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/9/914374/slide_36.jpg' /></noscript> Например,</p><pre> <span>Некоторый текст.</span> </pre><p> — это элемент HTML.</p><p> 3. Атрибуты HTML используются для предоставления дополнительной информации об элементах HTML и указываются в открывающем теге элемента. Например,</p><pre> <a target="www.google.com" rel="noopener">Нажмите здесь</a> </pre><p> Здесь <code> цель </code> — это атрибут.</p><p> 4. Код HTML должен быть правильно сформирован и иметь правильный отступ, каждый элемент должен находиться на отдельной строке, а каждый уровень иерархии должен иметь отступ на один уровень. Это облегчает чтение и понимание кода и помогает избежать ошибок. Например,</p><pre> <html> <голова> <title>Моя первая HTML-страница <тело>Моя первая HTML-страница
Привет, мир!
Содержание
Основные элементы HTML, теги — бесплатно, онлайн-учебник
❮ Пред. Следующий ❯
Понимание основных тегов HTML важно при изучении HTML.
Вот элементы HTML, которые используются чаще, чем другие.
Это:- теги заголовков
—
,
- тег
,
- тег
,
- тег ,
Все HTML-документы должны начинаться с объявления, указывающего тип документа: .
HTML-документ начинается с и заканчивается на.
Основная часть HTML-документа расположена между
и .Пример HTML-документа:
<голова>Название документа <тело>Это заголовок 1
Это заголовок 2
Вот абзац.
Попробуй сам »
Элементы заголовков используются для структурирования заголовков. Существует шесть типов заголовков HTML, начиная с
до
.
Пример заголовков HTML:
<голова>Название документа <тело>Это заголовок 1
Это заголовок 2
Это заголовок 3
Это заголовок 4
Это заголовок 5
Это заголовок 6
Попробуй сам »
Результат
Элемент
используется для разделения абзацев HTML.
Пример абзаца HTML:
<голова>Название документа <тело>Пример элементов
Это какой-то абзац.
Это еще один абзац
с разрывом строки.Попробуй сам »
Результат
Атрибуты этого тега:
- исходный файл (src),
- альтернативный текст (alt),
- ширина,
- высота.
Тег
используется для вставки HTML-изображений.
Пример изображений HTML:
<голова>Название документа <тело>Это пример изображения
Попробуй сам »
Результат
Тег используется для вставки ссылок HTML. Вы можете указать назначение ссылки с помощью атрибута href.
Пример ссылок HTML:
<голова>Название документа <тело> W3docs.comПопробуй сам »
Результат
Кнопки HTML можно указать с помощью тега
Пример тега HTML
- теги заголовков
Вот элементы HTML, которые используются чаще, чем другие.
Это:
