Сайт о телевидении

Сайт о телевидении

» » HTML — язык разметки гипертекста. Основы HTML, язык разметки гипертекста Hyper Text Markup Language

HTML — язык разметки гипертекста. Основы HTML, язык разметки гипертекста Hyper Text Markup Language

HyperText Markup Language (HTML) – язык разметки гипертекста – предназначен для написания гипертекстовых документов, публикуемых в World Wide Web.

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

Существует два способа создания гипертекстовых документов. Можно воспользоваться одним из WYSIWYG HTML-редакторов (например, Microsoft FrontPage, или др.), для работы с которыми не требуется специальных знаний о внутренней структуре создаваемого документа. Этот способ позволяет создавать документы для WWW без знания языка HTML. HTML-редакторы автоматизируют создание гипертекстовых документов, избавляют от рутинной работы. Однако их возможности ограничены, они сильно увеличивают размер получаемого файла и не всегда полученный с их помощью результат соответствует ожиданиям разработчика. Но, безусловно, этот способ незаменим для новичков в деле подготовки гипертекстовых документов.

Альтернативой служит создание и разметка документа при помощи обычного редактора текста (NotePad). При этом способе в текст вручную вставляются команды языка HTML. Создавая документы таким способом, вы точно знаете, что делаете.

Как уже отмечалось, HTML-документ содержит символьную информацию. Одна ее часть - собственно текст, т. е. данные, составляющие содержимое документа. Другая – теги (markup tags), называемые такжефлагами разметки , – специальные конструкции языка HTML, используемые для разметки документа и управляющие его отображением. Именно теги языка HTML определяют, в каком виде будет представлен текст, какие его компоненты будут исполнять роль гипертекстовых ссылок, какие графические или мультимедийные объекты должны быть включены в документ. Графическая и звуковая информация, включаемая в HTML-документ, хранится в отдельных файлах. Программы просмотра HTML-документов (браузеры) интерпретируют флаги разметки и располагают текст и графику на экране соответствующим образом. Для файлов, содержащие HTML-документы, приняты расширения.htm или.html.

Прописные и строчные буквы при записи тегов не различаются. В большинстве случаев теги используются парами. Пара состоит из открывающего (start tag) и закрывающего (end tag) тегов. Синтаксис открывающего тега:

<имя_тега [атрибуты]>

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

Атрибуты тега записываются в следующем формате:

имя[="значение"]

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

Действие любого парного тега начинается с того места, где встретился открывающий тег и заканчивается при встрече соответствующего закрывающего тега. Часто пару, состоящую из открывающего и закрывающего тегов, называют контейнером , а часть текста, окаймленную открывающим и закрывающим тегом, –элементом .

Последовательность символов, составляющая текст, может состоять из пробелов, табуляций, символов перехода на новую строку, символов возврата каретки, букв, знаков препинания, цифр, и специальных символов (например, +, #, $, @), за исключением следующих четырех символов, имеющих в HTML специальный смысл: < (меньше), > (больше), & (амперсенд) и " (двойная кавычка). Если необходимо включить в текст какой-либо из этих символов, то следует закодировать его особой последовательностью символов.

Структура HTML-документа

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

Закрывающий тег так же важен, как и открывающий. Если, например, документ включен в электронное письмо, тег дает команду программе просмотра прекратить интерпретацию текста, как HTML-кода.

HTML-документ состоит из двух частей: заголовок (head) и тело (body), расположенных в следующем порядке:

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

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

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

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

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

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

Моя страничка Тело документа

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

Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных браузеров может распознать цвет и без указания символа #).

Ниже представлена таблица 16 стандартных цветов вместе с их шестнадцатеричными кодами.

black (черный)

silver (серебряный)

maroon (темно-бордовый)

red (красный)

green (зеленый)

lime (известь)

olive (оливковый)

yellow (желтый)

navy (темно-синий)

blue (синий)

purple (фиолетовый)

fuchsia (фуксия)

teal (сине-зеленый)

gray (серый)

white (белый)

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

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

необязательно. Несколько стоящих подряд тегов<Р> не дают дополнительного пространства между абзацами.

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

Пример

Иосиф Бродский

Откуда к нам пришла зима,

не знаешь ты, никто не знает.

Умолкло все. Она сама

холодных губ не разжимает.

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

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

    позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка.

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

Название документа, задаваемое с помощью тега , не выводится на экран как часть документа. Чтобы отобразить название используется один из тегов заголовка. Заголовки в типичном документе разделяются по уровням. Язык HTML позволяет задать шесть уровней заголовков:H1(заголовок первого уровня),Н2, Н3, H4, Н5иH6. Заголовок первого уровня имеет обычно больший размер и насыщенность по сравнению с заголовком второго уровня.</p><p><b>Пример </b></p><p><TITLE> Заголовки

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

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

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

Теги

Применение

Результат

Полужирный

Полужирный

Курсив

Курсив

Подчеркнутый

Подчеркнутый

Пишущая машинка

Пишушая машинка

Зачеркнутый

Зачеркнутый

Большой

Маленький

Маленький

Верхний -- xиндекс

Верхний -- x индекс

Нижний -- xиндекс

Нижний -- x индекс

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

жирный и подчеркнутый текст

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

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

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

Этот атрибут позволяет указать как один, так и несколько шрифтов (через запятую). Весь список будет просмотрен слева направо и первый из имеющихся на машине пользователя будет использован для вывода документа.

Атрибут SIZEслужит для указания размера шрифта в условных единицах от 1 до 7. Считается, что размер "нормального" шрифта соответствует числу 3. Размер может быть как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2). Во втором примере текущий размер шрифта увеличивается на 2.

Атрибут COLORустанавливает цвет шрифта, который может быть задан как в формате RGB, так и указанием имени.

Пример

Текст красного цвета и

большого размера

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

Для создания гипертекстовой ссылки используется пара тегов .... Фрагмент текста, изображение или любой другой объект, расположенный между этими тегами, отображается в окне браузера как гипертекстовая ссылка. Активация такого объекта приводит к загрузке в окно браузера нового документа или к отображению другой части текущей Web-страницы. Гипертекстовая ссылка формируется с помощью выражения

фрагмент документа

HREFздесь является обязательным атрибутом, значение которого и есть URL-адрес запрашиваемого ресурса. Кавычки в задании значения атрибутаHREFне обязательны.

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

Графические указатели, т. е. изображения-ссылки, выделяются рамкой того же цвета, что и текстовые указатели.

Пример

В настоящее время стандарты HTML поддерживают теги для списков трех различных видов: нумерованных (упорядоченных), маркированных (неупорядоченных) и списков определений. Списки и элементы списков являются блочными элементами. Это означает, что перед ними и после них автоматически добавляются пустые строки.

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

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

Весь нумерованный список заключается между парой тегов , а каждый элемент списка расположен между тегами

  • и
    • (закрывающий тег может отсутствовать).

  • Программирование

  • Алгоритмизация

  • Проектирование

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

    Маркированный список начинается стартовым тегом

      и завершается тегом
    . Каждый элемент списка начинается с тега
  • и завершается (необязательным) тегом
    • .

    Пример

  • Программирование

  • Алгоритмизация

  • Проектирование

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

  • Дирекция

  • Иванов И.И.

  • Петров К.В.

  • Отдел маркетинга

  • Варшавская Е.Л.

  • Самсонов Д.М.

    • При выводе вложенных маркированных списков браузер автоматически проставляет маркеры перед элементами, находящимися на разных уровнях вложенности.

    Таблица – эффективный способ отображения статистических данных или ин­формации, которую удобнее представлять именно в таком виде. Данные таблицы хранятся в ячейках, являющихся отдельными полями, из которых состоят строки и столбцы таблицы. Надписи, которые размещаются над столбцами и описывают их содержимое, называют шапкой таблицы.

    При формировании таблицы применяется несколько парных тегов.

    и
    . Указывают на начало и конец таблицы. Все остальные теги и текст таблицы должны находиться между этими двумя тегами.

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

    <ТН> и . Определяют начало и конец ячейки шапки таблицы.

    и . Отмечают начало и конец ячейки данных.

    Кроме того, с помощью тега , размещаемого внутри тега

    можно создать заголовок таблицы.

    <ТН>Имя члена клуба

    <ТН>Посещал клуб книголюбов?

    <ТН>Дата посещения

    <ТD>Нет данных

    <ТD>Николай

    Наличие атрибута BORDER в теге

    EленаHeтДа
    говорит о том, что ячейки таблицы ограничены линиями.

    В результате получится таблица:

    Чтобы добавить изображение, нужно в том месте веб-страницы, где оно должно появиться ввести тег . Для указания имени файла, содержащего рисунок, применяется атрибутSRC. Пример:

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

    Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

    Подписаться

    НTML - это язык гипертекстовой разметки.

    Язык используется для организации веб-страниц. Проведем аналогию. Вы покупаете газету. В ней напечатаны несколько статей. У каждой статьи есть название, в ней есть фотографии. А текст набирается несколькими колонками. Это - структура газетной страницы.

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

    Для чего нужен HTML

    Язык HTML нужен, чтобы сообщить браузеру, как нужно отобразить страницу на экране.

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

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

    Что такое HTML-код

    Код - это команды браузеру, как следует отобразить страницу. Есть структура, которая должна соблюдаться всегда. Например, наличие только одного заголовка H1 на странице, основная информация помещается в раздели т. д.

    В языке есть три инструмента.

    Теги бывают двух видов - парные и одиночные.

    Структура HTML-кода на странице

    Мы говорили, что структура у любого html-документа всегда одна и та же. Далее перечислим обязательные элементы.

    1. ! - указывает, что в документе используется HTML.
    2. ... - в этот тег помещается весь код страницы. Все, что в него не помещено, не распознается браузером и не отображается.
    3. ... - парный тег, в него помещается технрическая информация, например, о кодировке документа.
      1. ... - это заголовок страницы, он помещается внутри раздела head. У любой страницы должен быть свое уникальное название.
      2. - это служебная информация. Она подключает к странице отдельные стили - css и т. д. Не отображается пользователю.
    4. ... - тело страницы. Вся основная информация заключается в этот тег.
      1. ... - гиперссылки.
      2. - изображения.
      3. ... - жирный текст.
      4. ... - курсив.

    Элементов внутри body может быть неограниченное количество.

    Например, вот так выглядит часть кода страницы одной из записей нашего блога.

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

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

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

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

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


    Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега < HTML > и заканчиваться соответствующим закрывающим тегом (). Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, - идущих именно в таком порядке. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <НЕАD> и . В частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <ТITLE>.

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

    < TITLE > Заголовок документа < /TITLE >

    Текст документа

    Элементы HTML.

    Для парных тегов область влияния определяется частью документа между открывающим и закрывающим тегом. Такую часть документа рассматривают как элемент языка HTML. Так, можно говорить об «элементе BODY», включающем тег , основное содержание документа и закрывающий тег . Весь документ HTML. можно рассматривать как «элемент HTML.». Для непарных тегов элемент совпадает с тегом, который его определяет.

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

    Теперь можно сформулировать правила вложения элементов.

    Элементы не должны пересекаться. Другими словами, если открывающий тег располагается внутри элемента, то и соответствующий закрывающий тег должен располагаться внутри этого же элемента.

    Блочные элементы могут содержать вложенные блочные и текстовые элементы.

    Текстовые элементы могут содержать вложенные текстовые элементы.

    Текстовые элементы не могут содержать вложенные блочные элементы.

    Функциональные блочные элементы.

    В большинстве документов основными функциональными элементами являются заголовки и абзацы. Язык HTML. поддерживает шесть уровней заголовков. Они задаются при помощи парных тегов от <Н1> до <Н6>. При отображении Web-документы ются при помощи таким образом; тегом (документа на экране компьютера эти элементы показываются при помощи шрифтов разного размера.

    Обычные абзацы задаются с помощью парного тега <Р>. Язык HTML. не содержит средств для создания абзацного отступа («красной строки»), поэтому при отображении на экране компьютера абзацы разделяются пустой строкой. Закрывающий тег рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа. Например:

    Заголовок

    <Р>Первый абзац<Р>Второй абзац

    Заголовок второго уровня

    Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца строки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Язык HTML. рассматривает символы конца строки и пробелы особым образом. Любая последовательность; состоящая только из пробелов и символов конца строки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом
    .

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

    . При отображении документа на экране линейка разделяет части текста друг от друга. Ее длина и толщина задается атрибутами тега
    .

    Этот тег создает горизонтальную линейку шириной в 10 пикселов, занимающую половину ширины окна и расположенную справа.


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

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

    В Интернет можно найти провайдеров, предлагающих бесплатное открытие сайтов на своих серверах. Бесплатные сайты можно открыть на отечественных серверах narod.ru, boom.ru, hotmail.ru и на зарубежных серверах, например geocities.com, tripod.com.

    На указанных серверах можно зарегистрировать доменные имена вида:

    <имя>. narod.ru

    имя>.boom.ru,

    Примеры зарегистрированных доменных имен:

    wdu.da.ru- сайт электронного университета;

    wduniv.newmail.ru - сайт распределенного университета.

    После регистрации доменного имени сайта на нем можно размещать гипертексты. Размещение гипертекстов на сайте производится с помощью специальных программ, позволяющих создавать, редактировать, накапливать и копировать самые различные гипертексты. Сразу после размещения самой первой (главной) гипертекстовой страницы ее информация может читаться с помощью браузера в любой стране с любого компьютера, подключенного к Интернет. Для этого в окошке браузера указывается адрес сайта в Интернет. Например: http://bak.boom.ru

    Все размещаемые файлы должны быть гипертекстами, записанными в формате HTML и имеющими идентификаторы вида <имя>.html.

    HTML - это язык разметки гипертекстов (hypertext markup language).

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

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

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

    Объем информации определяется владельцами - людьми или организациями, создавшими сайты и размещающими на них свою информацию. Объем информации на сайтах может составлять от нескольких килобайт до нескольких гигабайт (миллионов килобайт).

    Структура сайтов может быть самой разнообразной. Простейшая структура - это главная страница со ссылками на набор текстов. Эти ссылки могут находиться в тексте главной страницы либо выделяться в оглавлении в ее начале.

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

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

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

    3. Язык гиппертекстов HTML

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

    Парные тэги выделяют некоторый фрагмент гипертекста - «заглавие», «тело» и т. д. Первый тэг начинает фрагмент, а второй - завершает его. В закрывающих дескрипторах перед именем ставится знак дроби / .

    Общая структура гипертекстов, записанных в языке HTML:

    гипертекст::= заглавие тело

    заглавие::= титул

    титул::= название

    тело::= текст

    В соответствии с правилами HTML гипертексты обязаны иметь «заглавие» и «тело». Как публикации гипертексты могут и должны содержать сведения об авторах и владельцах авторских прав (сайтов).

    В заглавии гипертекста должно содержаться «название», которое браузерами отображается на самой верхней строке экрана ЭВМ. Название должно выражать главную идею публикации (страницы). Гипертекст без названия - это как статья без названия.

    «Тело» гипертекста должно содержать тексты, таблицы, фотографии и иллюстрации. Отличие электронных гипертекстов от обычных бумажных текстов - включение гиперссылок, нажатие на которые вызывает загрузку новых гипертекстом.

    Пример гипертекста и результат его отображения браузером на экране ЭВМ:

    Гипертекст: Результат:

    Результат работы браузера - загрузка и вывод на экран ЭВМ гипертекста, хранящегося на сайте по адресу, указанному в окне браузера. Если гипертекст слишком велик, то браузер выводит кнопки протяжки гипертекста справа или внизу экрана.

    Размеры экранов ЭВМ имеют следующий спектр. Минимальный размер экрана - 640 х 480 пикселей. Далее стандартные размеры экранов - 800 х 600, 1024 х 768 и 1280 х 1024 пикселей. Поэтому на разных экранах гипертексты могут вы глядеть по-разному.

    Общая структура гипертекстов и их отображения на экране ЭВМ:

    Гипертекст: Результат:

    Текстовая часть может состоять из строк и абзацев с заголовками и без заголовок, со списками, таблицами и меню.

    тело::- текст

    текст::= заголовок { текст } |

    список { текст } |

    таблица { текст } |

    Заголовки в гипертекстах оформляются в следующем виде:

    заголовок::=

    название

    заголовок::=

    название

    заголовок::=

    название

    где тэги H2, ... , h6 задают размер заголовков по отношению к основному тексту.

    Абзацы в гипертекстах начинаются с дескриптора

    гипертекст |

    |

    Переход на новую строку и абзацах указывается дескриптором . Конец абзаца р> не обязателен, но необходим при использовании параметров в дескрипторе абзаца.

    Основной параметр абзацев - align - выравнивание текстов на экране ЭВМ. Выравнивание текстов производится браузерами автоматически в соответствии с размерами экрана ЭВМ:

    align=center- по центру экрана:

    align=left- к левому краю;

    align=right - к правому краю;

    align=justify - на весь экран.

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

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

    Для выделения слов в гипертекстах можно использовать жирный шрифт или подчеркивание с помощью следующих тэгов:

    Большие символы

    жирный шрифт

    курсив i>

    подчеркивание

    перечеркивание

    маленькие символы

    Шрифтовое выделение в гипертекстах задается тэгом : шрифты:: = текст font>

    Параметры шрифтов - их размер и тип. Размеры шрифта задаются параметром size = размер.

    Размер указывается явно от 1 до 6, либо в форме увеличения +1, +2 или уменьшении - 1, - 2.

    Тип шрифта задается параметром

    face = шрифт

    Здесь шрифт - один из стандартных шрифтов: «Times», «Courier» и т. д.

    Цвет шрифта задается параметром со1ог = цвет, где цвет - цвет выделенного фрагмента гипертекста. Например - выделение текста красным цветом:

    текст font >

    Стандартные названия цветов в языке НТМL:

    red - красный, green - зеленый, blue – синий, black-черный,

    white - белый, gold - золотой, yellow-желтый и т. д.

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

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

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

    Общая форма внешних гиперссылок:

    где «адрес» - это адрес гипертекста внутри сайта или на другом сервере сети Интернет.

    Примеры внешних гиперссылок:

    а)адрес сайта в Интернет:

    http: // bак2.naгоd.гu

    б)адрес страницы на сайте:

    http: // bак2.naгоd.гu / inrogl.html.

    в)адрес страницы в папке сайта;

    http: // bак2.naгоd.гu / tests / test2.html.

    тесты 2 а>

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

    Графические файлы обычно размешаются на сайтах и отдельной папке с именем image. Загрузка иллюстраций на экраны пользовательских ЭВМ проводится браузерами с помощью операторов :

    Общая форма операторов загрузки графических иллюстраций:

    Расположение иллюстраций на экране ЭВМ задается параметрами выравнивания: align=left- по левому краю, align=right - по правому краю экрана. Текст при этом обтекает иллюстрации соответственно справа пли слепа.

    Иллюстрации могут быть прижаты к верхнему или нижнему краю экрана, что задается параметрами: align =top - к верхнему краю, align=bottom - к нижнему краю экрана, либо выровнены по середине экрана - align = middle.

    Для расположения иллюстрации па экране ЭВМ в операторе загрузки могут быть указаны их ширина и высота:

    высота:= height= «высота»

    ширина:= width= «длина»

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

    Размеры иллюстраций обычно выбирают так, чтобы они были видны целиком даже на экранах ЭВМ с минимальным размером. Если кран ЭВМ больше, то иллюстрации будут занимать только его часть.

    Гипертекстовые списки - это перечни с нумерацией или выделением элементов списков. Все элементы начинаются тэгами

  • . Нумерованные списки начинаются тэгом
      и заканчиваются тэгом
    . Ненумерованные списки ограничиваются тэгами .

    Гипертекстовые списки – удобное средство для организации оглавлений в сложных сайтах и больших гипертекстов. Элементами в таких списках являются адреса соответствующих разделов сайтов (глав, параграфов разделов электронных книг и библиотек).

    Заключение

    HTML - это язык разметки гипертекстов (hypertext markup language).

    Все размещаемые файлы должны быть гипертекстами, записанными в формате HTML и имеющими идентификаторы вида.html.

    Язык HTML - это язык разметки гипертекстов, хранящихся на Web-серверах и отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

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

    Основные правила вложения элементов:

    Элементы не должны пересекаться;

    Блочные элементы могут содержать вложенные блочные и текстовые элементы;

    Текстовые элементы могут содержать вложенные текстовые элементы;

    Текстовые элементы не могут содержать вложенные блочные элементы.

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

    Список литературы

      «Экономическая информатика» /Под. ред. П.В. Конюховского и Д.Н. Колесова, СПб: Питер, 2000, 560с.

      Каймин В.А., «Информатика», учеб.4-е изд. М.:,2003-285с.

      «Информатика», базовый курс, 2-е издание /Под. ред. С.В. Симоновича, СПб.: 2003, 640с.

    • Internet Engineering Task Force ) опубликовал черновик предложения по стандарту HTML

    Структура документа HTML

    Документ HTML 4 состоит из трех частей:

    • строка, содержащая информацию о версии HTML ,
    • объявляющий раздел header/"шапка" (ограниченный элементом HEAD ),
    • тело, содержащее собственно сам документ.

    Тело может содержаться в элементах BODY или FRAMESET . Пробельные символы (пробелы, символы новой строки , символы табуляции и комментарии) могут появляться до или после этого раздела.

    Simple page

    Hello world!

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

    После этого можно видеть открывающий тег элемента html . Это оболочка вокруг всего документа. Закрывающий тег html является последним объектом в любом документе HTML .

    Внутри элемента html имеется элемент head . Он содержит информацию о документе ( метаданные ). Внутри head находится элемент title , который определяет заголовок "Simple page" в панели меню .

    После элемента head следует элемент body , который является оболочкой, содержащей реальное содержимое страницы - в данном случае только элемент заголовка первого уровня (h1 ), который содержит текст "Hello world!" .

    Элементы часто содержат другие элементы. Тело документа всегда будет содержать множество вложенных друг в друга элементов.

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

    Синтаксис элементов HTML

    Базовый элемент в HTML состоит из двух тэгов вокруг блока текста. Существуют элементы, которые не являются оболочкой для текста, и почти в каждом случае элементы могут содержать подэлементы (как html содержит head и body в примере выше).

    Элементы могут также иметь атрибуты , которые могут модифицировать поведение элемента и вводить дополнительное значение .

    Основы HTML

    В этом примере элемент div (раздел страницы, способ разбиения документов на логические блоки) имеет добавленный атрибут id , для которого задано значение masthead . Элемент div содержит элемент h1 (заголовок первого, или самого важного уровня), который в свою очередь содержит некоторый текст. Часть этого текста упакована в элемент abbr (который используется для определения расширения сокращений), который имеет атрибут title , значение которого задано как Hypertext Markup Language .

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

    ключевое_слово="значение"

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

    Атрибуты и их возможные значения определяются в основном спецификациями HTML (http://www.w3.org/TR/html401/index/attributes.html), поэтому - нельзя создавать свои собственные атрибуты. Единственными реальными исключениями являются атрибуты id и class , значения полностью которых предназначены для добавления в документы вашего собственного значения и семантики.

    Элемент внутри другого элемента называют "потомком" этого элемента. В примере выше abbr является потомком h1 , который в свою очередь является потомком div . И наоборот, div является "предком" элемента h1 .

    Элементы блочного уровня и строковые элементы

    Имеется две основные категории элементов в HTML , которые соответствуют типам контента и структуре, которую представляют эти элементы - элементы блочного уровня и строковые элементы .

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

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

    Заголовок

    Заголовок HTML -документа является необязательным элементом разметки. Первоначально существование заголовка определялось необходимостью именования окна браузер . Это достигалось за счет элемента разметки TITLE :

    Это заголовок ... ...

    Еще одной функцией заголовка HTML -документа является управление HTTP -обменом через элемент разметки META . При современной практике размещения Веб-узлов компаний на серверах провайдеров администраторы этих узлов могут не иметь возможности управлять программой-сервером. В этом случае для управления обменом остается только одна возможность - через заголовок HTML -документа.

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

    Основные теги заголовка - это элементы HTML -разметки, которые наиболее часто встречаются в заголовке HTML -документа, т.е. внутри элемента разметки HEAD :

    • TITLE (заглавие документа);
    • BASE (база URL );
    • ISINDEX (поисковый шаблон);
    • META (метаинформация);
    • LINK (общие ссылки);
    • STYLE (описатели стилей);
    • SCRIPT (сценарии).

    Чаще всего применяются элементы TITLE, SCRIPT, STYLE . Использование элемента META говорит об осведомленности автора о правилах индексирования документов в поисковых системах и возможности управления HTTP -обменом данными. BASE и ISINDEX в последнее время практически не применяются. LINK указывают только при использовании внешних относительно данного документа описателей таблиц стилей.

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

    Контейнер заголовка служит для размещения информации, относящейся ко всему документу в целом.

    Элемент разметки TITLE служит для именования документа в World Wide Web . При выборе текста для содержания контейнера TITLE следует учитывать, что отображается он системным шрифтом , так как является заголовком окна браузера.

    Синтаксис контейнера TITLE в общем виде выглядит следующим образом:

    название документа

    Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа. Слова из TITLE попадают в индекс поисковой системы. Из этих соображений элемент TITLE всегда рекомендуется использовать на страницах Веб-узла.

    Элемент разметки BASE служит для определения базового URL для гипертекстовых ссылок документа, заданных в неполной (частичной) форме. Кроме того, BASE позволяет определить целевое окно загрузки документа по умолчанию при выборе гипертекстовой ссылки текущего документа. Наиболее часто BASE встречается на страницах узлов, которые имеют "зеркала". Часть документов основного сервера по разным причинам на "зеркальный" сервер не переносится. В этом случае документ с принудительно заданным базовым URL всегда будет ссылаться на основной сервер .

    Тег начала контейнера содержит один обязательный атрибут HREF , и может содержать один необязательный атрибут TARGET . Синтаксис контейнера BASE в общем виде выглядит следующим образом:

    Элемент разметки ISINDEX используется для указания поискового шаблона и унаследован от ранних версий HTML . В HTML 4.0 этот контейнер не определен.

    Элемент разметки META

    META содержит управляющую информацию, которую браузер использует для правильного отображения и обработки содержания тела документа , например с помощью атрибута Content-type можно задать перекодировку документа на стороне клиента.

    С помощью META также можно задать и другие операторы . Например, запретить кэширование документа. Для запрета кэширования достаточно вставить в заголовок META - тег вида:

    В новой версии протокола HTTP (HTTP 1.1) управление кэшированием осуществляется через оператор Cache-Control . Для получения такого же результата, как в случае с Pragma , в заголовке HTML -документа достаточно указать:

    Можно запретить хранение документа после пересылки.



     
    Статьи по теме:
    Как передать музыку по блютузу? История Huawei: Как китайский бренд меняет индустрию телекоммуникационных технологий Что за бренд хуавей Способы загрузки ос с флешки Как сделать на ноутбуке подсветку клавиатуры Создание MIDI мелодии в программе Anvil Studio
    Новое:
    Hover-эффекты для изображений на чистом CSS3...
    Варианты переноса строк Как перейти на строчку...
    Надоела стандартная раскладка клавиш?
    Приложения для Android: обучающие программы для...
    Power bi отчет с 1с. BI - системы. Критерии для...
    Почему не работают USB порты на компьютере?
    Популярное:
    Как Zello рация для Андроид помогает водителям
    Рейтинг производительности процессоров от «Интел
    Что такое Информационные технологии (IT или ИТ)?
    Панорама Джексон (Вайоминг)
    Battle Carnival не запускается
    Телефон Lenovo не включается