Основы языка HTML
Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов", не зависящий от типа компьютерной платформы. Понятие HTML включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и многое другое. Гипертекст как нельзя лучше подходит для включения элементов мультимедиа в традиционные документы.
HTML – это набор команд, интепритируемых браузером при загрузке документа и перед показом его пользователю. Он не привязан ни к одной архитектуре ПК или ОС. Элементы документа на HTML могут быть созданы и просмотрены под управлением любой ОС.
HTML стандартизирован, т.е. следуя стандарту, при создании документа, можно быть уверенным, что он будет рассмотрен с помощью любого браузера. Язык HTML является языком форматирования (разметки), который исполняет набор команд, управляющих браузером при отображении Web-страницы. Внешний вид HTML-документа (например, заголовок, тело документа и колонтитул) определяется специальными его элементами, которые должным образом интерпретирует Web-браузер. Эти элементы называются дескрипторами или тегами.
Гипертекст породил множество специальных терминов:
Элемент – конструкция языка HTML. Контейнер, содержащий данные и позволяющий отформатировать их определенным образом.
Основная идея гипертекста – возможность вложения элементов.
Дескрипторы – это элементы, которыми определяются внешний вид и «поведение» Web-страницы.
Тег -начальный или конечный маркеры элемента определяют границы действия элемента и отделяют элементы друг от друга.
В тексте web-страницы теги заключаются в угловые скобки <>, а конечный тег снабжен косой чертой /.
Например: ……
Атрибут – параметр или свойство элемента; это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений.
Значение атрибутов располагается после «=» и иногда указывается в «” ”». Атрибуты располагаются в начальном тэге и отделяются друг от друга пробелом.
Например:
Гиперссылка – фрагмент текста, который является указателем на другой фрагмент или объект.
Гиперссылки необходимы для перехода от одного объекта к другому.
Например:
Ссылка
Фрейм – область документа со своими полосами прокрутки; одиночное изображение в сложном графическом файле.
Html-файл (Html-страница) – это документ, созданный в виде гипертекста на основе языка html с расширением *.htm или *.html.
Скрипт (сценарий) – программа, включающаяся в состав web-страницы для расширения ее возможностей.
Расширение – элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового эффекта форматирования.
CGI (Common Gateway Interface) – программа, работающая на сервере и позволяющая расширять возможности web-страниц.
WWW (World Wide Web) – всемирная паутина; распределяющая система доступа к гипертекстовым документам, существующим в Интернете.
Сайт – набор web-страниц, принадлежащих одному владельцу.
Web-страница – это документ, подготовленный в виде гипертекста и размещенный в WWW.
Браузер – программа для просмотра web-страниц.
Основы HTML
HTML - документ состоит из тегов. Теги окружающие некий текстовый или графический раздел определяют какие параметры имеет данный текст или графика: размер, начертание шрифта, мерцание, цвет и т.д. Теги определяют расположение объектов на странице. Дополняют теги атрибуты, позволяя описывать внешний вид части страницы окруженной тегами.
2.2.Структура HTML – документа
Составными частями документа являются заголовок (шапка документа) и главная часть (тело документа).
… HTML> - между этими тегами заключен весь html – документ.
… HEAD> - между этими тегами располагается заголовочная часть html – документ. В заголовке определяются важнейшие глобальные установки: имя документа (его URL - адрес), служебную информацию (срок годности документа, автор, краткое описание документа и т.д.) и форматирование общей структуры документа.
… BODY> - между этими тегами располагается тело html – документ (т.е. его содержательная часть).
Например:
Первые шаги
Мой первый html – документ
BODY>
В заголовке окна браузера будет написано:
Первые шаги
В рабочей области окна браузера:
Мой первый html – документ
Перед тем, как просмотреть созданную Web-страницу в окне Web-браузера, ее необходимо сохранить с расширением *.htm или *.html.
Для просмотра созданной Web-страницы в браузере Internet Explorer выберите команду: меню Файл \ Открыть.
HTML-код любой Web-страницы можно просмотреть и в окне любого Web-браузера. Для этого в браузере Internet Explorer выберите команду Вид \ Просмотр HTML-кода.
2.3. Тег … HEAD>
- базовый адрес (URL - адрес) данного документа, используется для ссылок. Позволяет опускать начальную часть адреса в ссылках документа.
Атрибуты :
Пример:
путь\”>
… TITLE></b> - определяется имя текущего html – документа. Этим именем браузер пользуется для обозначение документа в строке заголовка окна браузера.<br /></ol> <br />Пример: <TITLE> Структура Web - страницы TITLE><br /><br /><b>2.4. Тег …</b><br /><br />Этот <a href="/canvas-zaklyuchaet-v-sebe-otlichnie-vozmojnosti-dlya-sozdaniya/index.html" title="Canvas заключает в себе отличные возможности для создания по настоящему интерактивных веб-приложений, так как с его использованием у веб-мастеров отпадает необходимость устанавливать Flash Player. Как же можно использовать элемент canvas">элемент заключает в себе гипертекст</a>, который определяет собственно Web – страницу. Это та <i>произвольная часть документа</i>, которую разрабатывает автор страницы и которая отображается браузером.<br /><br />Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web – страницы. Внутри начального тега <body> можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.<br /><ul> <li/> <br /><i><b>Background=”Путь к файлу фона” – </b></i>фон страницы;<br /><li/> <br /><i><b>Bgcolor=n - </b></i>простое оформление фона. Цвет фона задается двуразрядными шестнадцатеричными числами (#FF00FF) или (fuchsia);<br /><li/> <br /><i><b>Text=n – </b></i>цвет текста;<br /><li/> <br /><i><b>Link </b></i>- <a href="/cvet-prosmotrennoj-ssilki/index.html" title="Цвет просмотренной ссылки">цвет не просмотренной гиперссылки</a>;<br /><li/> <br /><i><b>Vlink</b></i> – цвет просмотренной гиперссылки;<br /><li/> <br /><i><b>Alink</b></i> – цвет активной гиперссылки.<br /></ul> <br /><b>3. </b><i><b>Форматирование текста HTML - документа</b></i><br /><br /><i><b>Текст </b></i><i>– это единственный объект Web – страницы, который не требует специального определения, т.е. произвольные символы интерпретируются по умолчанию как текстовые данные.</i><br /><br /><b>3.1</b><i><b>. Форматирование шрифта</b></i><br /><br /><i>HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить </i><i><b>физический стиль текста</b></i><i>. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального </i><i><b>логический стиль</b></i><i>, оставив интерпретацию этого стиля браузеру. </i>Поясним это на примерах.<br /><br />Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <b>и</b>, будет написано жирным шрифтом. Текст между метками <i>и </i>будет написан наклонным шрифтом. Несколько особняком стоит пара меток и. <br /><br />Текст, <a href="/teoriya-socialenoj-identichnosti-lichnosti-tashfelem/index.html" title="Теория социальной идентичности личности Ташфелем">размещенный между этими метками</a>, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.<br /><br /><i>Вот самые распространенные логические стили.</i><br /><ol> <li/> <br />… <i>- элемент абзаца.</i><br /></ol> <ul> <li/> <br /><i><b>Align – </b></i><i>выравнивание абзаца. Допустимые значения: </i><i>left</i><i>, </i><i>right</i><i>, </i><i>center</i><i>.</i><br /></ul> <ol start="2"> <li/> <br /><i><b><br /></b></i><i> - элемент принудительный разрыв строки.</i><br /></ol> <ul> <li/> <br /><i><b>Clear –</b></i><i>выравнивание объектов. Допустимые значения:</i><br /></ul> <br /><i>left</i><i> – если объект выровнен влево,</i><br /><br /><i>right</i><i> – если объект выровнен вправо,</i><br /><br /><i>al</i><i>l – для объекта, который может быть выровнен по любому краю,</i><br /><br /><i>none</i><i> – значение по умолчанию.</i><br /><ol start="3"> <li/> <br /><i>от </i><i><b>H1</b></i><i> до </i><i><b>H6</b></i><i> - заголовки текста. </i><i><b><h2>…H1></b></i><i> - заголовок верхнего уровня. </i><i><b><h4>…H4> </b></i><i>- заголовок стандартного размера. </i><i><b><h6>…H6></b></i><i> - заголовок самого маленького уровня.</i><br /></ol> <ul> <li/> <br /><i><b>Align –</b></i><i>выравнивание заголовка. Допустимые значения:</i><i>left</i><i>, </i><i>right</i><i>, c</i><i>enter.</i><br /></ul> <ol start="4"> <li/> <br /><i><b><br />… PRE></b></i><i> - элемент текста заранее отформатированного.</i><br /><li/> <br /><i><b><CENTER> … CENTER></b></i><i> - элемент центрирования текста.</i><br /><li/> <br /><i><b><b> … B></b></i><i> - полужирный шрифт начертания.</i><br /><li/> <br />… <i>- начертание курсивом.</i><br /><li/> <br /><u>… </u><i>- подчеркнутое начертание.</i><br /><li/> <br />… <i><b>STRIKE</b></i><i>> или <</i><i><b>S</b></i><i>> … <</i><i><b>/S</b></i><i>> - зачеркнутое начертание шрифта.</i><br /><li/> <br /><i><b><BIG> … BIG></b></i><i> - увеличение размера шрифта.</i><br /><li/> <br /><i><b><SMALL> … SMALL></b></i><i> - уменьшение размера шрифта.</i><br /><li/> <br /><i><b><sub> … SUB></b></i><i> - элемент, создающий эффект нижнего индекса.</i><br /><li/> <br /><i><b><SUP> … SUP></b></i><i> - элемент, создающий эффект верхнего индекса.</i><br /><li/> <br /><i><b><NOBR> … NOBR> - </b></i><i>элемент, выводит текст в одну строку.</i><br /><li/> <br /><i><b><TT> … TT></b></i><i> - элемент, обозначающий текст телетайпа(ширина всех букв одинаковая).</i><br /><li/> <br /> <i><b><BASEFONT></b></i><i> - элемент базового размера шрифта.</i><br /></ol> <ul> <li/> <br /><i><b>Size=n </b></i><i>– базовый размер шрифта.</i><br /></ul> <ol start="17"> <li/> <br /><i><b> … FONT></b></i><i> - элемент, определение типа, размера и цвета шрифта.</i><br /></ol> <ul> <li/> <br /><i><b>Size=n </b></i><i>– абсолютный размер шрифта.</i><br /><li/> <br /><i><b>Size=+n/-n </b></i><i>– размер относительно базового размера.</i><br /><li/> <br /><i><b>Color</b></i><i> – цвет шрифта</i><br /><li/> <br /><i><b>Face</b></i><i> – имя шрифта. Через <a href="/teni-i-prozrachnoste-box-shadow/index.html" title="Тени и прозрачность box-shadow">запятую можно задать несколько имен шрифтов</a>, использоваться будет то, чье имя браузер найдет первым.</i><br /></ul> <ol start="18"> <li/> <br /><i><b><EM> … EM></b></i><i> -акцент шрифта, т.е. позволяет выразить данный фрагмент текста курсивом.</i><br /><li/> <br /><i><b><b> … STRONG></b></i><i> -сильный акцент шрифта, т.е. позволяет выразить данный фрагмент текста жирным шрифтом.</i><br /></ol> </em></basefont></tt></nobr></sup></sub></small></big></center></h6></h4></h2></body> |
Скачать 22.21 Kb.