Основы языка html Введение. Основы языка html
Основы языка html Введение
Содержание
1.Основы языка HTML 2
Введение 2
1.1.Структура HTML-документа 3
1.2.Форматирование гипертекста 7
1.3.Использование графики в HTML-документах 11
1.4.Гиперссылки 13
1.5.Списки 15
1.6.Использование таблиц в HTML 19
1.7.Фреймы 25
1.8.Мультимедийные возможности HTML 30
1.9.Формы в HTML-документах 31
39
2.Динамический HTML 39
2.1.Стили и таблицы стилей 40
2.Использование языка сценариев JavaScript 51
4.Рекомендации по созданию HTML-документов 53
5. Технология создания WEB – сайта 55
5.1.Анализ сайтов 55
5.2.Проектирование сайта 57
5.3.Контент и кратив 62
5.4.Написание кода 63
5.5.Тестирование 65
5.6.Публикация 65
5.7.Поддержка 66
HyperText Markup Language (HTML) - язык разметки гипертекста - предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ - это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок - специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Netscape Composer, основы работы с котором рассмотрены в разделе "Обработка текста на ЭВМ", Microsoft FrontPage, HotDog, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.
Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (таких, как emacs или NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.
Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая -- теги (markup tags), называемые также флагами разметки, -- специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.
Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:
<имя_тега [атрибуты]>
Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:
</имя_тега>
Атрибуты тега записываются в следующем формате:
имя[="значение"]
Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, - элементом.
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
К специальным символам можно отнести и неразрывный пробел. Использование этого символа - один из способов увеличить расстояние между некоторыми словами в тексте. Обычные пробелы использовать для этих целей нельзя, так как группа подряд идущих пробелов интерпретируется браузером как один.
Каждая из таких зарезервированных последовательностей начинается символом амперсенда (&) и заканчивается точкой с запятой (;).
Последовательность | Символ |
< | символ < |
> | символ > |
& | символ & |
" | символ " (кавычка) |
| неразрывный пробел |
studfiles.net
HTML язык. Понятия HTML документ и HTML язык, основы языка HTML
Что такое HTML язык? В этой статье мы рассмотрим основы языка HTML. Если Вы новичок и ещё ничего не знаете про HTML язык, то эта статья именно для Вас.Итак в самом начале логичнее всего начать изучать что - либо с определения. И именно с определения мы и начнём.
HTML - сокращённо от английских слов HyperText Markup Language, переводится как язык гипертекстовой разметки - язык программирования или разметки Web страниц в Интернете.
Как видите здесь речь идёт не просто о тексте, а именно о гипертексте. Гипертекст, это текст, который содержит в себе ссылки. HTML язык занимается разметкой Web страниц, содержащих в себе, текст, ссылки, изображения.
Теперь, когда всё с определением понятно, давайте приступим непосредственно к основам HTML кода, что он из себя представляет и какие принципы лежат в его основе.
А в основе понимания языка гипертекстовой разметки лежит очень простой принцип:
Все объекты и элементы на HTML страницах заключаются в тэги. Тэг - это специальное зарезервированное слово, помещенное вот в такие скобочки .Существуют открывающий тэг, например и закрывающий тэг , пара тэгов, открывающий и закрывающий создают некий контейнер для тех или иных данных, в случае с HTML языком эти пара тэгов являются контейнером для всего HTML документа.
Наряду с тем, что тэги существуют попарно, открывающий и закрывающий, также существуют одиночные тэги, например тэг , который обозначает переход текста на новую строку , или тэг
который обозначает строчку маркированного списка. Пример такого списка представляю Вам ниже:- Тэги
- Стили
- Страницы
Хотя, хочу сказать Вам по секрету, если вы заглянете в кодировку страницы, то увидите, что мой редактор кода (я работаю с HTML редактором CoffetCup) подставил в данном примере закрывающий тэг , обычно всё же достаточно одного открывающего тэга
, а пара тэгов , создают в данном случае контейнер для маркированного списка.Теперь, когда немного понятно, что такое тэги и какие они бывают давайте рассмотрим в качестве примера простой HTML документ, из каких же тэгов он состоит. Ниже представляю Вам код каркаса самого обычного HTML документа с описание назначения каждого тэга:
Вот таким образом создается в самом начале любой HTML документ. Данный код, который мы рассмотрели выше обычно вставляется автоматически программами редакторами. К примеру одной из таких программ является Adobe Dreamveawer, но есть много других программ HTML редакторов.
После того, как HTML документ создан он сохраняется в файл с расширением *.htm или *.html. К примеру файл index.html - является главным файлом, с которого начинается загрузка HTML файла, поэтому файл с таким названием должен быть на сайте обязательно. Также файлы с кодом HTML могут иметь расширение php, к примеру index.php, это означает, что эти файлы содержат в себе также PHP - код.
Ну что же, можно сказать, что это все самые базовые основы языка HTML.
Автор: Tatjana Rodionovskaja
inoption.info
Лекция 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. Что требуют некоторые атрибуты?
megaobuchalka.ru
Основы языка HTML
HTML (HyperText Markup Language – язык разметки гипертекста) – это не язык программирования. Поэтому вам не придётся изучать алгоритмы и прочие программистские штучки, чтобы освоить его. Если вас интересует программирование, рекомендую книгу Как стать программистом. Ну а мы «вернёмся к нашим баранам».
Язык HTML – это универсальный язык подготовки документов для Интернета. HTML-документ (или HTML-файл) – это разновидность веб-документа, который в общем случае представляет собой обычный текстовый файл, который можно отредактировать в любом текстовом редакторе. Основы языка HTML – это специальные символы, которые управляют отображением текста. Эти символы называются тегами.
Тег (от английского tag) определяет правила отображения текста. Более правильно говорить не тег, а дескриптор. Однако в нашем языке слово тег уже укоренилось, и если вы будете говорить «дескриптор» вместо «тег», то не каждый веб-мастер вас поймёт.
Зачем вообще нужен язык HTML? Интернет страницы отображаются на вашем компьютере с помощью специальной программы, которая называется браузер. Если вы не знаете, что это такое, рекомендую книгу Интернет для чайников. Браузер может отобразить обычный текст, даже если вы не используете теги. Однако этот текст будет отображаться именно как обычный текст. То есть вы не сможете выделить участки текста цветом, жирным шрифтом и т.п. Для того чтобы решить эту проблему, и используется язык HTML.
В этом разделе будут описаны основы языка HTML. Изучив этот раздел, вы сможете создавать простые HTML-документы. Стоит упомянуть, что язык HTML не стоит на месте. Мы будем говорить о HTML 4.0, хотя на сегодняшний день уже используется HTML 5.0, который предоставляет очень широкие возможности для веб-разработчика. Однако данная книга рассчитана на начинающих, поэтому про HTML 5.0 можете на время забыть.
Напомню, что для того, чтобы создать HTML-документ (а также для редактирования), вам потребуется простой текстовый редактор, такой, как Блокнот. Однако блокнот неудобен для работы, так как обладает скромными возможностями. Ещё раз порекомендую скачать и установить бесплатный текстовый редактор PSPad, который более удобен для работы с HTML-документами, потому что обладает дополнительными возможностями, такими как подсветка синтаксиса (то есть ключевые слова и теги в таком редакторе выделяются цветом). Для примера посмотрите на рисунок 1.1, где на рис 1.1а открыт файл в Блокноте, а на рис. 1.1б – в редакторе PSPad. Как говорится, почувствуёте разницу (рисунки вы можете посмотреть в книге, здесь они не приводятся).
Данную книгу можно рассматривать как самоучитель HTML для чайников, так как здесь изложены только элементарные основы языка и не ничего лишнего. В то же время полученных знаний вам хватит для того, чтобы создать простой сайт.
av-mag.ru
НОУ ИНТУИТ | Лекция | Основы языка HTML
Аннотация: В этой лекции рассматривается структура HTML-документа. Описывается создание и применение гиперссылок, списков, таблиц, фреймов, форм. Показаны мультимедийные возможности HTML.
HyperText Markup Language (HTML) - язык разметки гипертекста - предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.
Гипертекстовый документ - это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла на экране компьютера. С помощью этих меток можно выделять заголовки документа, изменять цвет, размер и начертание букв, вставлять графические изображения и таблицы. Но основным преимуществом гипертекста перед обычным текстом является возможность добавления к содержимому документа гиперссылок - специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа.
Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Netscape Composer, основы работы с котором рассмотрены в разделе "Обработка текста на ЭВМ", Microsoft FrontPage, HotDog, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.
Альтернативой служит создание и разметка документа при помощи обычного редактора plain-текста (таких, как emacs или NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.
Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая - теги (markup tags), называемые также флагами разметки, - специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения .htm или .html.
Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:
<имя_тега [атрибуты]>
Прямые скобки, используемые в описании синтаксиса, означают, что данный элемент может отсутствовать. Имя закрывающего тега отличается от имени открывающего лишь тем, что перед ним ставится наклонная черта:
</имя_тега>
Атрибуты тега записываются в следующем формате:
имя[="значение"]
Кавычки при задании значения аргумента не обязательны и могут быть опущены. Для некоторых атрибутов значение может не указываться. У закрывающего тега атрибутов не бывает.
Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером, а часть текста, окаймленную открывающим и закрывающим тегом, - элементом.
Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.
К специальным символам можно отнести и неразрывный пробел. Использование этого символа - один из способов увеличить расстояние между некоторыми словами в тексте. Обычные пробелы использовать для этих целей нельзя, так как группа подряд идущих пробелов интерпретируется браузером как один.
Каждая из таких зарезервированных последовательностей начинается символом амперсенда (&) и заканчивается точкой с запятой (;).
< | символ < |
> | символ > |
& | символ & |
" | символ " (кавычка) |
неразрывный пробел |
Структура HTML-документа
Самым главным из тегов HTML является одноименный тег - <HTML>. Он должен всегда открывать ваш документ, так же, как тег </HTML> должен непременно стоять в последней его строке. Эти теги обозначают, что находящиеся между ними строки представляют единый гипертекстовый документ. Без этих тегов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег </HTML> дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.
HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:
<HTML> <HEAD> ... </HEAD> <BODY> ... </BODY> </HTML>В HTML-документ можно включать комментарии, позволяющие скрыть часть текста от браузера. Все, что заключено между последовательностями символов <!- и ->, при просмотре страницы остается невидимым. Комментарии не могут быть вложенными друг в друга.
Заголовок документа
Включение в документ заголовочной части не является обязательным. Задачей заголовка является представление необходимой информации для браузера и сервера HTTP. Информация, размещенная внутри заголовка документа, обычно не выводится на экран (кроме названия документа).
Заголовок документа открывается тегом <HЕAD>, который обычно следует сразу же за тегом <HTML>. Закрывающий тег </HEAD> показывает конец этого раздела, между ними располагаются остальные теги заголовка документа.
Чаще всего в заголовок документа включают парный тег <TITLE> ... </TITLE>, определяющий название документа. Многие программы просмотра используют его как заголовок окна, в котором выводят документ. Программы, индексирующие документы в сети Интернет, используют название для идентификации страницы. Хорошее название должно быть достаточно длинным для того, чтобы можно было корректно указать соответствующую страницу, и в то же время оно должно помещаться в заголовке окна. Название документа вписывается между открывающим и закрывающим тегами.
Тело документа
В отличии от заголовка, тело документа является обязательным элементом, так как в нем располагается весь материал вашего документа (есть только одно исключение, с которым мы познакомимся далее, - когда документ содержит вместо тела группу фреймов). Тело документа размещается между тегами <BODY> и </BODY>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML, позволяющими корректно отображать страницу на экране монитора.
Тег <BODY> не только обозначает начало содержимого документа, но и задает его основные свойства: цвет фона, текста и многое другое. Эти свойства определяются с помощью атрибутов, которые приведены в таблице.
ALINK | Определяет цвет активной ссылки |
BACKGROUND | Указывает на URL-адрес изображения, которое используется в качестве фонового |
BGCOLOR | Определяет цвет фона документа |
LINK | Определяет цвет непосещенной ссылки |
ТЕХТ | Определяет цвет текста |
VLINK | Определяет цвет посещенной ссылки |
Пример
<HTML> <HEAD> <TITLE>Моя страничка</TITLE> </HEAD> <BODY TEXT=red BGCOLOR=white> Тело <!- Это комментарий -> документа </BODY> </HTML>www.intuit.ru
Лекция 8.5. Основы языка разметки гипертекста HTML. — МегаЛекции
План
1. Назначение и возможности языка HTML
2. Структура HTML-документа
Вопрос 1. . Назначение и возможности языка HTML
Язык гипертекстовой разметки HTML (HyperText Markup Language) предназначен для определения с помощью управляющих символов (тегов) структуры и внешнего вида Web-страниц при отображении их в браузере, а также создания ссылок на другие документы.
HTML не является языком программирования, он представляет собой язык разметки документа.
Возможности языка HTML достаточно обширны. С его помощьюможно создавать элементы, которые обеспечивают прекрасный дизайн Web-страниц. Используя программирование на специальных языках сценариев (JavaScript, VBScript), можно создавать динамические эффекты на страницах.
Язык HTML состоит из специальных операторов, которые управляют отображением текста в браузере и при этом сами не видны на экране. Эти операторы называются тегами (от английского слова tag – ярлык, признак).
Все теги языка HTML выделяются символами-ограничителями «<» и «>», между которыми записывается идентификатор (имя) тега и, возможно, его параметры. Единственным исключением из этого правила являются теги комментария с более сложными ограничителями (<!-- и -->). Идентификаторы тегов, а также идентификаторы их параметров можно записывать на любом регистре.
Большинство тегов HTML используется попарно, т.е. для открывающего тега в документе имеется соответствующий закрывающий тег. По правилам HTML закрывающий тег записывается так же, как и открывающий, но с символом «/» (прямой слеш) перед именем тега. Принципиальным различием парных тегов является то, что закрывающие теги не используют параметры.
Теги, которые нуждаются в соответствующих завершающих тегах, называются тегами-контейнерами. Они могут содержать в себе другие теги. Все, что записано между тегами-контейнерами, называется содержимым тега-контейнера. Иногда закрывающий тег можно опускать.
Существуют общие правила интерпретации тегов браузерами. В отличие от языков программирования, в которых ошибочно записанные операторы приводят к выдаче соответствующих сообщений на этапе компиляции программы и требуют правки, в HTML не принято реагировать на неверную запись тегов. Неверно записанный тег или его параметр просто игнорируется браузером. Это общее правило для всех браузеров, под действие которого попадают не только ошибочно записанные теги, но и теги, не распознаваемые данной версией браузера.
Теги могут записываться с параметрамиили, иначе, атрибутами. Наборы допустимых параметров индивидуальны для каждого тега. Общие правила записи параметров заключаются в следующем. После названия тега могут следовать параметры, которые отделяются друг от друга пробелами. Порядок следования параметров тега произволен. Многие параметры требуют указания их значений, однако некоторые параметры не имеют значений или могут записываться без них, принимая значения по умолчанию. Если параметр требует значения, то оно указывается после названия параметра через знак равенства. Значение параметра может записываться как в кавычках, так и без них. Кавычки обязательны в случае, когда в значении параметра имеются пробелы. В значениях параметров (в отличие от названий тегов и самих параметров) иногда важен регистр записи.
Далее основные теги HTML рассматриваются в рамках работы со структурой Web-документа и конкретными объектами Web-страниц.
Вопрос 2. Структура HTML-документа
Структура любого HTML-документа строго фиксирована, определяется тремя группами тегов и представлена на рис.1.
Файлы HTML-документов обычно имеют расширение HTM или HTML.
Текст HTML-документа должен начинаться с открывающего тега <HTML> и заканчиваться закрывающим тегом </HTML>.
Теги <HEAD> </HEAD> определяют раздел заголовка документа. В них заключаются теги <TITLE> </TITLE>, которые содержат текст, выводимый в строке заголовка окна браузера. Теги <HEAD> </HEAD>не являются обязательными, однако хорошо составленный заголовок может быть полезен для пользователя. Теги, находящиеся внутри раздела HEAD, не отображаются в браузере.
В теги <BODY> </BODY> заключается телоHTML-документа, которое может включать в себя текст, списки, таблицы, графические изображения, звук, гиперссылки.
Отметим, что простейшие HTML-документы представляют собой обычные текстовые файлы, для просмотра и редактирования которых можно воспользоваться любым текстовым редактором.
|
Рис.1. Структура HTML-документа
Рассмотрим пример кода простейшего HTML-документа:
<HTML>
<HEAD>
<TITLE>ЭTO простой НТМL-документ</ TITLE >
</HEAD>
<BODY>
<h2> Это простой НТМL-документ </h2>
<Р><B>Стиль шрифта Bold</B> </P>
<Р><I>Стиль шрифта Italic</I></P>
</BODY>
</HTML>
Текст, заключенный в теги <Н1> </Н1>, отображается как заголовок первого уровня (Heading 1). Текст, заключенный в теги <В> </В> и <I> </I>, выделяется полужирным начертанием и курсивом соответственно. <Р> </Р> – начальный и конечный теги абзаца.
Рекомендуемые страницы:
Воспользуйтесь поиском по сайту:
megalektsii.ru
Основы html для начинающих
Здравствуйте! В этой статье рассмотрим основы языка разметки HTML, познакомимся со структурой HTML-документа и основными тегами. Для создания HTML-документа можно использовать обычный блокнот, сохранив файл с расширением .html, но лучше работать в специальном блокноте для написания кода Notepad++, скачать его можно с официального сайта, он абсолютно бесплатен.
После скачивания и установки, откройте программу и установите кодировку «UTF-8 (без бом)», как на скриншоте.
Теперь разберем структуру документа. Вот так выглядит так называемый скелет HTML.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Заголовок всего документа</title> <meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> </body> </html>Обратите внимание на иерархию элементов в структуре документа. Корневым элементом считается <html>, а все последующие элементы идут внутри него, а </html> в самом конце документа обозначает его закрытие. Все элементы, которые написаны до или после тега <html></html>, не будут обрабатываться браузером.
Элемент <html> является родительским для элементов <head> и <body>, а они соответственно дочерними, так как находятся внутри тега <html> … </html>. Такая иерархия будет распространяться на все вложенные элементы документа.
Элемент <head>
В теге <head> … </head> содержится техническая информация о web-странице: кодировка, заголовок, описание, ключевые слова, подключение таблицы стилей, шрифтов и т.д. То, что находится в этом разделе, не выводится в окне браузера, но эти данные указывают браузеру, как именно показать страницу.
Обязательным тегом, входящим в <head> … </head>, является <title> … </title>. Это заголовок всего документа, он отображается на открытой вкладке браузера и в результатах выдачи поисковых систем, в так называемом, сниппете, а его размер не должен превышать 60 символов. Тег <title> очень важен для SEO-продвижения сайта.
<title>Заголовок всего документа</title>Тег <meta> считается необязательным элементом раздела <head>, но он используется почти всегда. Этот тег является одинарным и не требует закрытия, как, например, <title> … </title>. С его помощью указываются метаданные страницы, о которых говорилось выше, еще всевозможные элементы разметки, закрытие от индексации и т.д.
Описание страницы задается с помощью атрибута name и его значения – description. Описание так же важно для продвижения сайта в поисковых системах.
<meta name="description" content="Описание содержимого страницы">На счет значения keywords ходит много споров, многие вебмастера считают, что на ключевые слова поисковые системы давно не обращают внимания и поэтому вообще их не прописывают, а другие утверждают обратное.
<meta name="keywords" content="Ключевые слова через запятую">Атрибут charset указывает кодировку документа, на данный момент стоит UTF-8.
<meta charset="UTF-8">Тег <link> как и <meta> является одинарным, используется для определения отношения между текущим документом и другими файлами или, проще говоря, подключает содержимое стороннего файла к нашей странице, таких подключений может быть несколько. Так же <link> может указывать каноничность документа.
<link rel="stylesheet" type="text/css" href="style.css">Элемент <body>
Элемент <body> это основная часть документа, которая выводится в окне браузера, то есть, что находится в теге <body> … </body>, показывается пользователю при открытии HTML-документа. В этом разделе прописываются разные теги и их атрибуты с разными значениями, о которых просто не реально рассказать в одной статье, поэтому я рекомендую сайт htmlbook.ru. На этом сайте вы найдете все теги HTML и CSS с примерами использования и подробным описанием каждого. Также рекомендую посмотреть бесплатные мини-курсы по сайтостроению. Эти курсы состоят из видеоуроков и позволяют более наглядно познакомится с написанием кода.
zyubin.ru