Тема 3.1. Сетевые технологии обработки информации. Всемирная сеть Интернет.
Домашнее задание:
1) Подготовить опорный конспект по данному материалу.
2) Разработать кроссворд по данной теме в объеме 10-15 вопросов.
3) Фотоотчет отправить преподавателю в личку в ВК.
Тема 3.1. Сетевые технологии обработки информации. Всемирная сеть Интернет.
Лекция № 11 Представление о структуре HTML -документа.
План
1. Основные понятия языка HTML.
2. Структура документа HTML.
3. Форматирование текста (абзаца, шрифта).
Язык HTML был разработан Тимом Бернерс-Ли сотрудником Европейской лаборатории физики элементарных частиц и распространен браузером Mosaic, разработанным в NCSA. В 1990-х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. В Web очень важно использование одних и тех же соглашений HTML авторами Web-страниц и производителями. Это явилось причиной совместной работы над спецификациями языка HTML.
Многие называют HTML языком программирования. Это не совсем верно, так как в традиционном понимании HTML является языком разметки электронных документов, лишь указывающим программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Начиная с середины 90-х годов XX века, HTML претерпел некоторые изменения в своей спецификации – варианты используемых инструкций, применяемых тегов и модулей горячо обсуждались и изменялись. На сегодня последней версией языка HTML является версия 4.01.
Со времени создания первой версии HTML претерпел некоторые изменения, но если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)».
Гипертекст – информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом, рассматривается более подробно.
Отдельный документ, выполненный в формате HTML, называется:
· HTML-документом;
· Web-документом;
· Web-страницей.
Такие страницы, как правило, имеют расширение НТМ или HTML .
Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web -узлом, или Web -сайтом.
Каждая HTML-страница имеет свой уникальный URL -адрес в Интернете.
Фрейм ( Frame ) – этот термин имеет два значения. Первое – область документа со своими полосами прокрутки. Второе значение – одиночное изображение в анимационном графическом файле (кадр).
Апплет ( Applet ) – программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
Скрипт, или сценарий ( Script ), – программа, включенная в состав Web-страницы для расширения ее возможностей. Браузер Internet Explorer в определенных ситуациях выводит сообщение: "Разрешить выполнение сценариев на странице?" В этом случае имеются в виду скрипты.
CGI ( Common Gateway Interface ) – общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц. Например, без таких программ невозможно создание интерактивных Web-страниц.
Браузер ( Browser ) – программа для просмотра Web-страниц.
Элемент – конструкция языка HTML. Можно представить его себе как контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов.
Пример
<Начало элемента> Содержание элемента, данные, которые форматирует элемент </Конец элемента>
Тэг (по-английски — tag-метка, дескриптор, ярлык) – начальный или конечный маркеры элемента. Тэги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы тэги заключаются в угловые скобки < >, а конечный тэг всегда снабжается косой чертой. Текст, не находящийся между такими скобками < > – весь виден, при просмотре в браузере.
Пример
<Начальный тэг> Содержание элемента, данные, которые форматирует элемент </Конечный тэг>
Пример
<Р> Этот текст будет расположен в отдельном абзаце </Р>
Элемент, содержащий некоторый текст, ограничен начальным тэгом (маркером) <р> и конечным тэгом (маркером) </р>, т. е. текст помещен между тэгами, как в контейнер, а тэги <р> и </р> размечают начало и конец абзаца соответственно.
Любая Web-страница представляет собой набор элементов. Один из основных принципов HTML возможность вложения элементов, они могут вкладываться один в другой.
Атрибут – параметр или свойство элемента. Атрибуты располагаются внутри начального тэга и отделяются друг от друга пробелами. Если элемент содержит текст, то атрибуты могут задавать цвет и размер шрифта, выравнивание текстового абзаца и т. п. Если элемент содержит рисунок, то атрибуты могут задавать размер рисунка, наличие и размер рамки вокруг рисунка и пр.
Пример
<Р align="center"> Этот текст будет выровнен по центру экрана </р>
В этом примере опять встречается тэг, определяющий начало и конец абзаца. Однако в начальном тэге находится атрибут align, который задает выравнивание текста по центру экрана.
Примечание:
· любая полезная информация должна находится между начальным и конечным тэгами, указывающими ее формат;
· все атрибуты располагаются в начальном тэге;
· для удобства работы начальный тэг вы можете писать с прописной (заглавной) буквы (Р), а конечный – со строчной (маленькой) буквы (/р) хотя это и не обязательно;
· не для всех элементов требуется ставить конечный (закрывающий) тэг.
· написание каждого нового элемента начинайте с новой строки. Вложенные элементы выделяйте отступом (табуляцией). Это опять – таки не обязательно, но значительно облегчит вашу работу.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:
В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox) .
Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги головы (<head></head>) и тела документа(<body></body>) .
Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст,таблицы,картинки, - находится в теле документа.
На этой смешной картинке я попытался схематически изобразить структуру:
Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот) . Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.
Вставка комментария: <!-- -->
Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия - тогда разобраться будет значительно легче! Т.к. это учебник html с примерами, давайте к ним и обратимся:)
Вы уже наверное догадались, что закомментированный текст нужен только для Вас, т.е. при просмотре документа через браузер его видно не будет.
В начале комментарий нужно открыть тегом <!-- затем вписать текст, и закрыть тегом --> .
Примечание: тег <!-- --> внутри элемента TITLE не действует.