Все пользуются Интернетом и все просматривают различные сайты, и, наверное, всем хотелось бы разместить свой сайт в Интернете, но это не просто так сделать, на это существует много причин. Однако для того чтобы Вы смогли разместить качественный сайт, Вам просто необходимо знать основу «WEB-программирования », которой и является язык HTML . В данной статье мы рассмотрим основные элементы, теги, атрибуты, даже напишем первую web страницу.
Hyper Text Markup Language - «HTML» (язык разметки гипертекста ) многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого. Пользователь, освоивший этот язык, приобретает возможность делать серьезные вещи простыми методами и, главное, быстро, что в современном мире считается очень хорошо!
На языке HTML можно создавать собственные мультимедийные продукты и распространять их на cd-дисках, и все эти продукты, выполненные в виде наборов HTML-страниц, не требуют разработки специализированных программных средств, так как все необходимое для работы с данными (Web-браузеры ) стали частью стандартного программного обеспечения большинства персональных компьютеров.
- Элемент (element ) - конструкция языка HTML. Это объект, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста - возможность вложения элементов.
- Тег (tag ) - начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой.
- Атрибут (attribute) - параметр или свойство элемента. Другими словами это переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Предполагается, что символьные значения атрибутов заключаются в прямые кавычки, но некоторые браузеры позволяют не использовать кавычки. Это объясняется тем, что тип атрибута всегда известен заранее. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.
- Гиперссылка - часть текста, которая является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
- Фрейм (frame ) - этот термин имеет два значения. Первое - область документа со своими полосами прокрутки. Второе значение - одно изображение в сложном (анимационном ) графическом файле (похожее на кадр из кинофильма). Также возможно вместо термина «фрейм» в специальной литературе и локализованных программных продуктах можно встретить термин «кадр» или «рамка».
- HTML-файл или HTML-страница - документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют расширения htm или html.
- Апплет (applet ) - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
- Скрипт или сценарий (script ) - программа, включенная в состав Web-страницы для расширения ее возможностей.
- Расширение (extension ) - элемент, не входящий в спецификацию языка, но использующийся, обеспечивая возможность создания нового интересного эффекта форматирования.
- CGI (Common Gateway Interface ) - общее название для программ, которые, работая на сервере, позволяют расширить возможности Web-страниц. Например, без таких программ невозможно создание интерактивных страниц.
- Код HTML - гипертекстовый документ в своем первоначальном виде, когда видны все элементы и атрибуты.
- Web-страница - документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.
- Сайт (site ) - набор Web-страниц, расположенных в одном месте и связанных между собой.
- Браузер (browser ) - программа для просмотра Web-страниц. () - копирование файлов с сервера на компьютер-клиент.
- URL (Uniform Resource Locator ) или универсальный указатель ресурса, адрес некоторого объекта в Интернете, т.е. типичный URL для WWW, имеет вид: http://www.название.домен/имя файла.
Все элементы языка можно условно разделить на три группы. К первой относятся элементы, которые создают структуру гипертекстового документа. Использование таких элементов - необходимая формальность, которой нельзя пренебрегать. Ко второй группе можно отнести элементы, создающие эффекты форматирования. Их использование диктуется конкретными требованиями к документу, фантазией и компетенцией разработчика, К третьей группе относятся элементы, которые позволяют управлять программными средствами, установленными и работающими на компьютере-клиенте. Часто такие элементы создаются автоматически, когда разработчик использует для вставки некоторого объекта в документ гипертекстовый редактор или подобную программу.
Несмотря на то, что спецификация HTML является стандартом, этот язык дополняется новыми элементами (расширениями ). Поэтому некоторые Web-страницы удобнее просматривать при помощи определенных браузеров. Расширения создаются только известными фирмами, которые разрабатывают программное обеспечение для WWW, а рядовые пользователи могут совершенствовать свои Web-страницы при помощи программирования. Аплеты позволяют снять ограничения HTML и дают простор фантазии разработчика.
Версии HTMLПервая версия языка HTML была разработана в начале 90-х годов Тимом БенерсЛи для одного из распространенных в прошлом браузера Mosaic. Но тогда ни для браузера, ни для самого HTML еще не нашлось хорошего применения. В 1993 году появился HTML+, и эта версия также осталась практически незамеченной. Но распространение язык HTML получил благодаря версии 2.0, которая появилась в июне 1994 года. И с того момента происходят возрастание популярности WWW по всему миру. Стандарты, включенные в версию 2, настолько прижились что используются и по сей день.
HTML версия 3.0, которая появилась примерно год спустя, в ней была реализована возможность прорисовки математических символов (знаков интеграла, бесконечности, дроби, скобок и т. д. ) при помощи элементов языка. Но развитие этого проекта затормозилось и не получило дальнейшего распространения.
В 1996 году появился HTML версии 3.2. Это было блестящие решение, достаточно упомянуть, что в спецификацию языка были введены фреймы, которые стали теперь весьма популярными у разработчиков сайтов. И по сей день все браузеры поддерживают эту версию HTML.
Официальная спецификация HTML 4 (Dynamic HTML ) разрабатывалась в 1997 год. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет web-программирования. Это оказалось намного более эффективным, чем вводить в язык все новые элементы.
Структура Web-страницыНиже представлен код Web-страницы, который выполнен на языке HTML, и на примере этой страницы мы разберем ее структуру, но для начала скопируйте весь код в обычный текстовый блокнот и нажмите «Сохранить как» и сохраняйте уже файл с расширением html, т.е. после названия напишите.html
Структура web документа
Переход в Конец документа
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Здесь расположена первая ссылка
Здесь должен располагаться
основной текст web страницы.
А я, например, вставлю сюда
несколько переносов,
для того чтобы Вы могли
наглядно наблюдать,
как у Вас работает
ссылки внутри документа,
а то если у Вас будет большое разрешение,
Вы просто не заметите переход по ссылкам
Обозначение документа на языке HTML. Одно из принципов языка является многоуровневое вложение элементов. Данный элемент является самым внешним, так как между его начальным и конечным тегам должна находиться вся Web-страница. По идеи, этот элемент можно рассматривать как формальность. Он имеет атрибуты version, lang и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY FRAMESET и других, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все подобные документы.
< head >
Область заголовка Web-страницы. Другими словами, ее первая часть. Так же, как и предыдущий элемент, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir.
< title >
Элемент для размещения заголовка Web-страницы. Строка текста, расположенная внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Данный элемент очень сильно влияет на продвижение в поисковой системе т.к. поисковые системы уделяют особое внимание на тег TITLE. Мой совет: никогда не делаете очень длинный текст в этом теге (65 символов достаточно ).
Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных, а второй - содержание.
< body >
Этот элемент объединяет в себе гипертекст, который определяет собственно Web-страницу. Это та видимая часть документа, которую разрабатывает авто страницы и которая отображается браузером. Соответственно, конечный тег этого элемента надо искать в конце Web-страницы. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить много атрибутов, которые служат для установки всей страницы целиком. Рассмотрим их по порядку.
Один из самых полезных атрибутов данного тега, который оказывает свое влияние на дизайн страницы это
background="путь к файлу фона"
Более простое оформление фона сводится к заданию его цвета
bgcolor="#FFFFFF"
Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего цветов (rbg).
Так как можно изменить фон страницы можно и изменить цвет текста. Для этого имеется следующий атрибут
text=" #RRGGBB"
Для задания цвета текста гиперссылок используется следующий атрибут
link="#RRGGBB"
Можно также указать изменение цвета для последней выбранной пользователем гиперссылки
Элемент заголовка. Различают шесть уровней заголовков, которые обозначаются следующим образом.
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок
Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибут, задающий выравнивание влево, по центру или вправо:
align="left" align="center" align="right"
Для создания нового абзаца используется тэг
А для перехода на новую строчку без создания абзаца - тэг
т.е происходит перенос. Эти тэги закрывать не обязательно. Конечно, если Вы не используете в тэге
Элемент ALIGN, которым может задавать выравнивание абзаца:
По левому краю
По центру
По правому краю
Текст, находящийся между этими элементами выравнивается по ширине
Горизонтальная линия (horizontal rule ) - очень распространенный элемент. Во-первых, потому что с его помощью очень легко и удобно делить страницу на части. Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Элемент не имеет конечного тега, но имеет ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
- align="left"
- align="center"
- align="right"
- align="justify"
HTML-документ может быть очень громоздким, и не очень удобный пользователю у которого возникает необходимость быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Для этого в нужных местах текста расставить соответствующие метки.
Произвольный текст
В этом случае данной строке документа присваивается имя, и, следовательно, другой части документа или даже на другом документе может быть создана гиперссылка, приводящая к этой метки.
Для вставки изображений (картинки
) в HTML документ используется следующий тег (представлено полное описание атрибутов данного тега
):
(list) были разработаны в HTML, несомненно, под влиянием успеха текстовых редакторов. От обычного текста список отличается, прежде всего, тем, что пользователю не нужно думать о нумерации его пунктов: эту задачу HTML берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация продолжается автоматически. В случае ненумерованных списков HTML ставит перед каждым пунктом отметки: кружки, прямоугольники, ромбы и другие изображения. В конечном итоге список принимает приличный, вид. Существует две группы таких тегов: одни определяют общий вид списка (и позволяют указывать атрибуты ), а другие задают его внутреннюю структуру. В списках можно использовать стандартные атрибуты. Существует несколько видов списков.
Самым распространенным является ненумерованный список (unordered list ). Он представлен ниже:
- Пункт 1 списка
- Пункт 2 списка
- Пункт 3 списка
Элемент ul является своеобразным выделением списка. Он позволяет разделять один список от другого. Элемент liобозначает каждый из пунктов.
ТаблицыЯвляются одним из самых необходимых средством форматирования данных на Web-странице. Основное удобство заключается в том, что браузер прорисовку всей таблицы берет на себя. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, разумеется, с размером находящихся в ячейках таблицы строк текста и рисунков. По мимо всего прочего, таблицы позволяют решать многие дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и так далее. При создании таблиц применяется принцип вложения: внутри основного элемента таблицы (TABLE) создается ряд элементов, определяющих строки (TR), а внутри этих элементов располагаются элементы для описания каждой ячейки в строке (ТD,ТН).
Для того чтобы разобраться в структуре существующей таблицы или разработать новую таблицу, существует одно правило, что последовательность элементов описывает таблицу сверху вниз и справа налево. Например, если после элемента TABLE указан элемент TR, это указывает на то, что начинается описание новой строки таблицы. Все, что расположено за этим элементом, будет размещено в одной строке (справа налево). Это может быть последовательность элементов TD (ячеек
), другая таблица и так далее. После того как появится новый элемент TR, начнется описание следующей строки, и т. д. до конца таблицы (тега ).
Таблицу можно выровнять по горизонтали при помощи атрибута align:
- align="left" - влево;
- align="center" - по центру;
- align=" right" - вправо.
Ширину таблицы можно задать точно в пикселях или в процентном отношении к ширине страницы в окне браузера. Например: width=400 или width=50%
Для управления видом рамки используются два атрибута. Дело в том, что браузер создает изображение рамки, имитируя ее трехмерность (выпуклость ) при помощи различия в освещенности граней
СценарииПрактически все web – мастера хотят, чтобы их страницы на сайте имели современный вид, были многофункциональными, красивыми и динамичными. Стандартными средствами HTML это невозможно, поэтому применяются разные средства: апплеты, объекты, каскадные таблицы стилей и так далее. Но самым популярным и распространенным видом (приемом ) является использование сценариев.
Сценарий - это программный код, который включается в текст страницы в виде исходного текста и выполняется браузером при просмотре страницы. Сценарий может быть написан на языке JavaScript, разработанном фирмой Netscape, или на Visual Basic Script (VBScript ), разработанном фирмой Microsoft.
Данный тег позволяет отделить текст программы-сценария от другой информации страницы. Тег SCRIPT обязательно включает в себя атрибут language, который определяет язык и может принимать следующие значения:
- javascript - код на языке JavaScript;
- vbscript - код на языке VBScript.
Атрибут type тоже может указывать на тип языка, хотя его применение не является обязательным. Чтобы не нарушать все правила, внутри элемента можно поместить такое определение:
type="text/javascript"
Одной из самых прикольных особенностей сценариев является возможность изменения содержимого страницы в результате выполнения программы. Но это только особеность, а не правило. С помощью атрибута defer (который не принимает никаких значений) можно «сказать» браузеру, что таких изменений внесено, не будет. В некоторые случаях это позволяет ускорить загрузку страницы.
Из стандартных атрибутов можно использовать атрибут charset.
Тег SCRIPT (или ряд таких элементов ) может располагаться как внутри элемента HEAD, так и внутри элемента BODY. Если сценарий находится внутри элемента BODY, возможна и такая ситуация, когда какой-нибудь браузер, не поддерживающий элемент SCRIPT, воспримет программный код как обычный текст и выведет его на экран. Чтобы этого не случилось, код сценария вводят как комментарий:
-
-
-
Все современные браузеры распознают этот прием и игнорируют символы комментария. Если в тексте сценария нужно ввести комментарий, то для этого используют иное обозначение: в начале строки вводят два слеша //.
Программный код сценария выполняется в момент загрузки страницы, т.е. когда на экране еще видно ее содержание. Ниже представлен пример простейшего сценария (вывод сообщения в окне
).
-
-
-
- Просто сценарий
-
- alert("Вы написали свой первый сценарий!")
-
-
-
-
Это простая страница, но она включает сценарий из одной строки. С помощью метода alert перед загрузкой выводится сообщение. И оно будет висеть до тех пор, пока пользователь не нажмет на кнопку ОК, загрузка не будет продолжена.
Возможен случай, например страница, будет просматриваться в браузере, не поддерживающем сценариев, для этого предусмотрен элемент NOSCRIPT. Современные программы просмотра игнорируют его содержимое. Этот элемент можно использовать несколькими методами. Для начала, внутри него можно показать объявление наподобие следующего: «Ваш браузер не может выполнить сценарий, необходимый для просмотра этой web-страницы!
» Во-вторых, внутри элемента можно разработать упрощенную версию страницы, без скриптов. В-третьих, можно создать ссылку на другой HTML-документ. Элемент NOSCRIPT должен обязательно снабжаться конечным тегом.
Вот мы с Вами и рассмотрели основы такого языка WEB-программирования как HTML. Даже после прочтения этой небольшой статьи Вы уже имеете представление, и даже возможность программировать на этом языке. Желаю удачи!
Это способ создания графики без использования компилятора. Это обычный текстовый файл, должен быть в DOS – формате.
Шрифты: Windows, ANSI. Их понимает и обрабатывает любой броузер (Internet Explorer, Netscape).
Любой броузер – интерпритатор, исполняюший последовательно файл и исполняет его.
HTML быстро развивается и не все броузеры одинаково обрабатывают эти файлы. Сейчас все ориентируются на Internet Explorer 7.0 в Microsoft Wista.
Язык содержит перечень тегов, один тег – команда интерпритатору, но она пишется исходя из общих правил записи тегов.
ЗДЕСЬ ТОЖЕ НЕТ СТАНДАРТОВ!
Все веб-сайты состоят из нескольких HTML-файлов и нескольких графических файлов
Недостатки:
1. Файл будет сильно большим;
2. Интерпритатор его обработает гораздо медление.
По традиции файл входа в сайт называется index.
- начало тэга
- конец тэга
- заголовок
- тело.
Структура HTML-файла:
В HEAD расположена различная вспомогательная информация общая для всего BODY. Ее писать не обязательно, но обычно пишут следующее:
… - содержимое заголовка.
Помимо этого в HEAD указывают версию html, для которой писалось BODY, и указывается как закрашивать фон.
Содержимое BODY – это просто очередность строк, в которую вставляют различные управляющие тэги, прежде всего это информация которую нужно вывести на страницу. Тэги управляют изображением этой информации.
Особенности восприятия текста BODY в браузере:
- Браузер не видит концов строк, а также переход со строки на строку.
- Если между словами несколько пробелов, то браузер заменяет их на 1. Весь этот текст BODY браузер выводит в виде одной строки. Но длина строки определяется текущей шириной Windows-окна. Если текст не помещается в строке, то браузер автоматически переносит на другую строку. Слова не разрываются, и перенос осуществляется по словам.
Теги :
Тэги управляют способами изображения информации, они все графические.
Примеры тэгов:
……
…… - это указание оборвать связь на новую строку;
……
…… - абзац (между абзацами вставляются строки);
……
…
…… - абзац (между абзацами строки не вставляются);
Управление жирностью.
Текст
- повышенная жирность
- наклонный текст
- подчеркнутый текст
- перечеркнутый текст
- верхний индекс
- нижний индекс
- текст внутри мигает (создавался для Netscape, Explorer его не выполняет).
- ширина букв одинаковая
- увеличения на 1
- уменьшения на 1
Существует 6 типов заголовков:
….
//Текст в 4 раза больше
….
….
….
//в 2-3 раза меньше, чем обычно
Текст
Текст программы
- Internet адрес
Не все текстовые символы можно изображать браузером, которые создаются в текстовом редакторе:
 ….. – вставить пробел;
<….. – < ;
>….. – > ;
&….. – & ;
—… – - ;
&guot….. – ” ;
«… – > ;
Ω>… – W ;
β>… – b ;
>… – a ;
∑>… – S ;
НЕТ ОБЩЕГО СТАНДАРТА!!!
Управления расположения текста относительно границ страници :Текст
“center”
“right”
“justify”
- так же как и в web выводит текст на экран;
чтобы вставить в текст рисунок, нужно написать следующий тэг в том участке текста, куда необходимо вставить рисунок или анимацию:
*.gif, *.jpg, *.png – можно использовать любое из этих расширений.
Простейший способ вставить рисунок – рассположить его в том же катологе где находиться HTML-страничка.
Управление расположением:Widht = “N” – в пикселях
“K”- в процентах
Height =“N”
“K”
Hspace = “N”
“K”
Vspace = “N”
“K”
Для указания количества воспроизведений нужно вставить loop = “N” после названия файла, где N-число.
Пример.
Требуется вывести картинку по центру экрана и подписать его.
Мой.....
1…
2
3 ...
Гиперссылки
Это выполнение оператора go to;
Особенность web-странице – віполняется в диалоге, во время перемещения стрелочки, она заменяется на изображение и нажатием на левую кнопку мышки переходит на другую web-страницу. Это самый главный инструмент при работе с web. В классической программе – нужно все время следить за положением курсора и обрабатывать сообщения Windows.
Web-страници никаких обработок не делают.
Варианты записи адресса:
текст – тот текст в html на который перейдет курсор, при нажатиии на изображение;
___.gif – картинка, связаная с текстом;
___.html – движение по web-сайту;
Myweb.com.ua – на интернет адресс.
Основной элемент анимации – это использования gif-анимации. Можна выводить и avi-файлы.
Недостаток – пользователь должен сохранить эти файлы, а это дорого.
Анимация средствами html
В html нет граффических операторов, функций графики.
____
____
1. Direction = right, left, up, down.
Если нужно что бы движение было под каким-то углом, то достаточно двух параметров.
2. Loop = INFINITE; (бесконечно)
Loop = 0;
Loop = N; (анимационный повтор N раз)
3.Behavior = scroll; изображение двигается слева направо и наоборот
Behavior = slide; движение до конца строки
Behavior = alternative; движение из одного конца строки в другой.
Width = Dx
Height = Dy
Align = middle; (top) перемещение по центру, по верхней части экрана
bgcolor = цвет; цвет фона, области движения
scrollmount = K; скорость движения
scrolldelay = M; величина задержки между движениями.
1.текст + рисунок
2.текст
- бегущая строка
- изображение линий
______
По умолчанию появится линия на весь экран, толщина линии 1 пиксель.
Возможно управление, есть 2 параметра:
Width = N – ширина линии
Size = H – толщина линии
Color = - цвет
Для начала нужно иметь звуковой файл.
Фоновый звук – открывается страничка и сразу играет звук.
Wav
Параметры:
Loop = N – количество проигрований музыки
Balance = “___” - ±10000 дополнительная регулировка, определяет смещение по ролику относительно начала, конца файла.
Volume = “___” – громкость
“0” – максимальная громкость.
“10000” – звук выключен.
Есть возможность выводить мультимедиа проигрователь.
В последнее время всё чаще и чаще различные интернет ресурсы устраивают холивары на тему: является ли HTML языком програмирования или нет. Как водится, аргументов в пользу обеих точек зрения приводят немалое количество, поэтому я решил поставить для себя точку в этом ненужном споре.
Определение языка программированияЯзы́к программи́рования - формальная знаковая система , предназначенная для записи компьютерных программ. Язык программирования определяет набор лексических, синтаксических и семантических правил, задающих внешний вид программы и действия , которые выполнит исполнитель (компьютер) под её управлением.Так сказано в Википедии , и большинство остальных ресурсов либо полностью употребляет это определение, либо вольно излагает его без потери смысла. Рассмотрим поподробнее составные части определения ЯП:
- Формальный язык - это множество конечных слов (строк, цепочек) над конечным алфавитом.
- Знаковая система - это система однообразно интерпретируемых и трактуемых сообщений/сигналов, которыми можно обмениваться в процессе общения. Иногда знаковые системы помогают структурировать процесс общения с целью придания ему некой адекватности в плане реакций его участников на те или иные «знаки». В качестве примера знаковой системы обычно приводят язык (как в письменной форме так и, в случае естественных языков, в форме речи).
- Компью́терная програ́мма - последовательность инструкций, предназначенных для исполнения устройством управления вычислительной машины.
- Ле́ксика - совокупность слов того или иного языка, части языка или слов, которые знает тот или иной человек или группа людей.
- Синтаксис - сторона языка программирования, которая описывает структуру программ как наборов символов (обычно говорят - безотносительно к содержанию). Синтаксису языка противопоставляется его семантика. Синтаксис языка описывает «чистый» язык, в то же время семантика приписывает значения (действия) различным синтаксическим конструкциям.
- Сема́нтика в программировании - дисциплина, изучающая формализации значений конструкций языков программирования посредством построения их формальных математических моделей. В качестве инструментов построения таких моделей могут использоваться различные средства, например, математическая логика, λ-исчисление, теория множеств, теория категорий, теория моделей, универсальная алгебра. Формализация семантики языка программирования может использоваться как для описания языка, определения свойств языка, так и для целей формальной верификации программ на этом языке программирования.
- Язы́к - знаковая система, соотносящая понятийное содержание и типовое звучание (написание).
Язык программирования - множество заранее определенных, однообразных и понятных исполнителю (читай: интерпретатору/компилятору/компьютеру/программисту) инструкций, предназначенных для записи последовательно с целью их исполнения неким устройством, являющимся частью вычислительной машины. Также язык программирования должен обладать рядом особенностей: инструкций должно быть ограниченное число, и все их должны знать; инструкции должны выстраиваться определенным образом для получения определенных результатов, и все должны об этом знать; должны существовать правила написания инструкций и все должны их знать; каждая конструкция языка должна однозначно соотносить то что написано с тем, что требовалось обозначить.
Вот так громоздко и некрасиво получилось, зато без сложных слов. Мы вернемся к этому определению чуть позже.
Виды языков программированияЧасто употребляют также разделение на низкоуровневые и высокоуровневые языки. Эти виды отличаются «толщиной прослойки» между процессором и программистом. Говоря простыми словами - в низкоуровневых языках каждая инструкция представляет собой одну или небольшое число процессорных команд, а в высокоуровневом языке каждая инструкция это большой набор процессорных команд.
Рассмотрим поближе определения разных типов по версии Википедии :
- Аспе́ктно-ориенти́рованное программи́рование (АОП) - парадигма программирования, основанная на идее разделения функциональности для улучшения разбиения программы на модули.
- Структу́рное программи́рование - методология разработки программного обеспечения, в основе которой лежит представление программы в виде иерархической структуры блоков. Предложена в 70-х годах XX века Э. Дейкстрой, разработана и дополнена Н. Виртом.
- Процедурное программирование - программирование на императивном языке, при котором последовательно выполняемые операторы можно собрать в подпрограммы, то есть более крупные целостные единицы кода, с помощью механизмов самого языка.
- Логи́ческое программи́рование - парадигма программирования, основанная на автоматическом доказательстве теорем, а также раздел дискретной математики, изучающий принципы логического вывода информации на основе заданных фактов и правил вывода. Логическое программирование основано на теории и аппарате математической логики с использованием математических принципов резолюций.
- Объе́ктно-ориенти́рованное программи́рование (ООП) - парадигма программирования, в которой основными концепциями являются понятия объектов и классов. В случае языков с прототипированием вместо классов используются объекты-прототипы.
- Функциона́льное программи́рование - раздел дискретной математики и парадигма программирования, в которой процесс вычисления трактуется как вычисление значений функций в математическом понимании последних (в отличие от функций как подпрограмм в процедурном программировании).
- Мультипарадигма́льный язы́к программи́рования - как правило, язык программирования, который был разработан специально как инструмент мультипарадигмального программирования, то есть изобразительные возможности которого изначально предполагалось унаследовать от нескольких, чаще всего неродственных языков.
- Эзотерический язык программирования - язык программирования, разработанный для исследования границ возможностей разработки языков программирования, для доказательства потенциально возможной реализации некой идеи (так называемое «доказательство концепции», англ. proof of concept), в качестве произведения программного искусства, или в качестве шутки (компьютерного юмора).
Все языки программирования делятся на две группы: декларативные и императивные .
Программа на императивном языке программирования с математической точки зрения представляет собой общее решение поставленной задачи, иными словами, ответ на вопрос «как делать?». Это последовательность команд, которые должен выполнить исполнитель.
Программа на декларативном языке программирования является сочетанием формализованной в рамках языка программирования задачей и всех необходимых для её решения теорем, проще говоря, ответ на вопрос «что делать?». Конкретную последовательность выполняемых действий выполняет компилятор, или чаще интерпретатор – программа, в реальном времени выполняющая код программы без его преобразования в машинный код.
Полнота по Тьюрингу В теории вычислимости исполнитель (множество вычисляющих элементов) называется тьюринг-полным , если на нём можно реализовать любую вычислимую функцию. Другими словами, для каждой вычислимой функции существует вычисляющий её элемент (например, машина Тьюринга) или программа для исполнителя, а все функции, вычисляемые множеством вычислителей, являются вычислимыми функциями (возможно, при некотором кодировании входных и выходных данных).Название пошло от Алана Тьюринга , который придумал абстрактный вычислитель - машину Тьюринга и дал определение множества функций, вычислимых посредством машин Тьюринга.
Другими словами язык является полным по Тьюрингу , если любая вычислимая функция, которая Вам нужна, может быть записана на этом языке и решена его исполнителем.
Не полные по Тьюрингу языки также существуют, но так как их создают в основном в академических целях, то они малоизвестны и широко не применяются.
HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - , чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.
Визуальные редакторыНовички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.
Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML.
ТегиКак упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, ..., где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно.
Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.
Структура документаКаждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.
Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — .... Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже.
HeadВнутри тега ... содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тега .... Отображается название в верхней части браузера, где также можно разместить небольшую иконку, характеризующую содержимое страницы. Желательно сразу указать кодировку документа для его корректного отображения. Это можно сделать при помощи тега . Метатеги предоставляют данные о структуре страницы и обычно располагаются внутри head.
LinkЗнание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.
BodyИменно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:
- - применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css;
- - создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href;
- - один из популярнейших тегов современности; каждый, кто решил изучить основы языка HTMLl, должен уделить ему особое внимание, поскольку это блочный элемент, на основе которого сделана львиная доля современных сайтов (параметры для блоков задаются в css, и внутри этого тега могут располагаться другие блоки);
Выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами;
- - нумерованный список, элементы которого заключаются в парный тег
- - маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом
- - - заголовки документа (цифра обозначает уровень заголовка, то есть - главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней , почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок ;
- - жирный текст;
- - курсив;
- - вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения);
- - вставка видео на веб-страницу;
- - тег, вставляющий в документ аудио файл.
Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих.
CSSРазвитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым.
Применение CSSДля создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов
Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег , который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением.css, например, Styles.css.
JavaScriptНередко человек, решивший заняться понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт.
JavaScript может расширить возможности HTML, он позволяет создавать и редактировать теги. Также при помощи этого замечательного инструмента можно работать с Cokie, загружать данные с сервера, не перезагружая страницу, сделать сайт более интерактивным, чем позволяют возможности HTML. Есть у этого языка и ограничения, которые связаны с безопасностью. Если JavaScript используется не на серверной части, то он будет выполняться в условиях, ограничивающих его возможности, дабы злоумышленники не могли задействовать вредоносный код на любом компьютере.
РедакторыОсновы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений.
Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды.
Основы HTML и CSS для начинающихКак видите, изучить искусство создания веб-страниц не так уж и сложно, как кажется на первый взгляд. Всего несколько месяцев практических занятий превратят вас из робкого пользователя в начинающего разработчика. Научиться вёрстке гораздо проще, чем освоить какой-нибудь язык программирования или Linux. На самом деле тегов HTML не так уж и много, важно понять практический аспект их применения.
Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно "Фотошоп" лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями.
Что даёт знание HTMLНавыки создания веб-страниц очень актуальны сегодня, так как интернет расширяется не по дням, а по часам. Каждое предприятие, любой, даже самый маленький магазинчик, мастерские и спортивные клубы — все хотят иметь собственный сайт. И конечно же, для этого им понадобится разработчик, владеющий CSS и HTML. Основы просто освоить, после чего дело за практикой. Так как технологии вёрстки постоянно развиваются, то фронтенд-разработчики всегда будут востребованы. Тот, кто решит посвятить себя этой интересной отрасли, никогда не останется без работы.
Реферат
1. Краткая история WWW
2. Язык HTML - построение Web-документов:
а) шаблон Web-документа
б) форматирование текста
в) форматирование параграфов
г) работа с изображениями изображений:
I. фоновые изображения
II. статические и динамические изображения
е) фреймы:
I. Вертикальные фреймы
II. Горизонтальные фрейм
III. Вложенные фреймы
Альтернативные средства офрмления документов
1. Краткая история World Wide WebОбщеизвестно, что сеть Internet–это, в частности, громадное хранилище всевозможной информации. До появления службы World Wide Web (WWW) навигацию по Internet в поисках нужной информации нельзя было назвать удобной. Чтобы получить файл с FTP–сервера, приходилось отдельно загружать приложение–клиент. При этом нужно было помнить свой пароль, приходилось перемещаться по многочисленным каталогам в поисках нужного файла, не забывая перед его получением установить правильный режим передачи; знать многочисленные команды работы с FTP–серверами и т.д. Если же нужно было просмотреть какую–либо конференцию, то приходилось запускать уже другое приложение, у которого был свой набор команд для чтения, пересылки, сохранения сообщений из конференций. Все это былонеудобно.
Около пяти лет назад была предпринята попытка организовать информационный порядок в сети Internet. Это привело к появлению службы World Wide Web (Всемирная Паутина), которая получила рождение в Европейском Центре Ядерных Исследований в Швеции. В основе идеи WWW лежат так называемые hypermedia документы или Web–документы, также называемые Web–страницами, призванные навести порядок в организации и поиске данных. Эти документы могут содержать как текстовую, так и не текстовую информацию (например, изображения, звук), а также ссылки. Ссылки – это указатели, с помощью которых можно свободно перемещаться из одного места документа в другое место, или же вообще ссылаться на отдельный документ, который может находиться на другом конце света. Хотя Web–документы могут содержать самую разную информацию, не только текстовую, их практически всегда называют гипертекстовыми (hypertext) документами, что в общем, не совсем верно.
На экране типичный Web–документ выглядит как набор текстасо ссылками, могут присутствовать различные иллюстрации. Документ можно листать, просматривая содержимое, быстро перемещаться по нему или другим документам с помощью ссылок.
С появлением WWW сеть Internet стала обслуживать текст и графику, с помощью мыши стало возможным путешествовать по всему миру и легко находить нужную информацию с помощью простого указания и щелчка. Стало легко перекачивать файлы и читать конференции. Вот почему служба WWW приобрела всемирную популярность и получила большое распространение. Каждый день в сети Internet появляются в больших количествах Web–серверы и публикуются тысячи новых документов.
Для построения Web–документов в WWW используется специальный язык HTML, что означает HyperText Markup Language – язык гипертекстовой разметки, язык форматирования данных. Основанный на языке SGML (Standard Generalized Markup Language), язык HTML определяет форматирование и организацию данных в Web–документах. Он не определяет то, как точно будет размещен текст на экране, этот язык определяет структуру данных. Web–документ может содержать не только текстовую информацию, и поэтому язык HTML правильнее было бы называть HyperMedia Markup Language, однако в литературе практически всегда употребляется аббревиатура HTML. Документ, созданный на языке HTML – это обычный файл в ASCII–формате. В его основе лежат специальные дескрипторы (теги), которые и определяют форматирование данных в любом Web–документе. Естественно, для просмотра HTML–документов в World Wide Web необходимо специальное программное обеспечение. Такие программы называются броузерами (от англ. browse – листать, просматривать). С их помощью можно загружать и просматривать Web–странички, осуществлять навигацию по WWW и т.д. В настоящий момент существует довольно большое количество броузеров, из которых самыми популярными являются броузеры Microsoft Internet Explorer, Netscape Navigator и NCSA Mosaic. Броузер, прочитав HTML–файл, с помощью дескрипторов интерпретирует содержащиеся в документе данные и соответствующим образом отображает их на экране компьютера.На рис. 1 показан пример Web–документа:
Рис.1 Пример Web–документа
Язык HTML быстро развивается. В процессе своего развития он приобретал новые возможности и утрачивал мало использовавшиеся и устаревшие. В настоящий момент текущей официальной версией языка HTML является версия 3.2, обладающая развитыми средствами построения Web–документов. По сравнению с версией HTML 2.0 новая версия предлагает такие новые возможности, как таблицы, «обтекание» изображений текстом, встраивание апплетов Java и др. возможности.
На сегодняшний день кроме официальной версии языка также существуют версии HTML от фирм Microsoft и Netscape, которые также поддерживают и дополнительные возможности, не описанные в спецификации к официальной версии HTML. Чтобы решить проблему совместимости броузеров при отображении документов, составленных с использованием элементов неофициальных версий языка HTML, вышеупомянутые фирмы включают в свои продукты поддержку альтернативной версии языка. На подходе уже есть версия языка под номером 4.0, называемая Dynamic HTML, обещающаяусовершенствованные старые и новые захватывающие возможности для оформления Web–документов. W3C (World Wide Web Consortium – организация по стандартам в World Wide Web) уже предлагает на рассмотрение эту версию языка как стандарт. Существуют варианты новой версии языка от фирм Microsoft и Netscape, которые, однако, пока несовместимы между собой. В настоящей работе раскрываются основные средства построения документов из языка HTML версии 3.2 фирмы Netscape Communications.
2. Язык HTML. Построение Web–документовКак было сказано выше, форматирование документа на языке HTML задается специальными дескрипторами. Дескриптором называется команда форматирования данных и заключена эта команда в угловые скобки «». Существуют открывающие и закрывающие дескрипторы, между которыми размещается текст, подлежащий форматированию. Открывающие дескрипторы задают способ форматирования, вторые его отменяют. Разница между такими дескрипторами заключается в том, что в закрывающем дескрипторе перед именем стоит косая черта. Например, дескрипторы . Существуют также дескрипторы, которые не требуют закрывающего варианта.
Язык HTML не чувствителен к регистру букв, поэтому все дескрипторы можно задавать как прописными, так и строчными буквами. Броузер будет их однозначно интерпретировать в любом написании.
Если просмотреть исходный текст типичной Web–странички, то можно увидеть примерно следующее содержание:
заголовок документа
текст
текст
текст
текст
Между дескрипторами и находится непосредственно весь документ. Дескрипторы и определяют область задания заголовка документа. Между парой и помещается заголовок документа. Его содержимое просматривается в названии окна броузера. Информация в заголовке используется некоторыми сетевыми роботами для индексирования данных при сканировании ресурсов WWW. В эту область можно вводить, например, данные об авторе, краткое описание документа. Между дескрипторами и заключаются данные, которые будут выводиться броузером на экран. Дескрипторы и содержат данные об авторе, которые будут выводиться на экран, например, имя и фамилию автора, его электронный адрес, дата создания и изменения документа и т.д.
Строго говоря, ни одни из вышеописанных дескрипторов не являются обязательными при создании документов, однако они помогают структурировать документы и их определение является признаком хорошего стиля при составлении Web–страничек.
Форматирование текстаФорматирование текста подразумевает вывод на экран текста, выделенного определенным шрифтом или с определенными атрибутами.
Для форматирования текста нужно заключить строку или строки текста между парой дескрипторов. Ниже приводится основной список дескрипторов и результаты форматирования текста:
Например, если необходимо вывести некую строку на экране курсивом, то в тело Web–документа необходимо ввести следующее:
Этот текст написан курсивом
В результате броузер отобразит:
Этот текст написан курсивом
Дескрипторы можно комбинировать друг с другом в произвольном порядке, например, комбинация
Это текст напечатан полужирным курсивом
приведет к следующему результату:
Это текст напечатан полужирным курсивом
В некоторых Web–документах можно встретить мигающие строки текста, призванные привлечь внимание пользователя. Для этих целей используется дескриптор :
Это мигающий текст
Однако это расширение языка фирмы Netscape используется весьма редко и поэтому, возможно, скоро устареет.
В дизайне Web–страничек часто используются шрифты различных размеров. Вывести строку с размером шрифта, отличным от обычного можно с помощью дескрипторов текст , где число n – число от 1 до 7, определяющее размер шрифта относительно обычного. Таким образом, следующий текст в теле документа
Этот текст на четыре размера больше обычного
на экране будет выглядеть следующим образом:
Этот текст на четыре размера больше обычного.
Необходимо заметить, что пары дескрипторов и , а также и являются элементами языка HTML версии фирмы Netscape и поэтому могут не поддерживаться остальными броузерами.
Форматирование абзацевТекстовая информация, размещаемая на Web–страницах, организована в абзацы. Абзац начинается дескриптором и завершается закрывающим дескриптором
, однако последний необязателен. Пример кода на HTML:Первый абзац
Второй абзац
В результате на экране будет такой результат:
Первый абзац
Второй абзац
При составлении документа необходимо учитывать, что броузер игнорирует пробелы между словами и переводы строк при форматировании текста, поэтому он рассматривает как абзац только тот текст, который находится между дескрипторами . Принудительный разрыв строки задается дескриптором
, который не имеет закрывающего варианта. Пример кода:Первая строка
Вторая строка
В результате броузер выведет на экран:
Первая строка
Вторая строка
Если же нужно вывести на экран текст с нужным количеством пробелов и разрывами строк, необходимо заключить его в дескрипторы И . Это обычно используется для вывода на экран листингов исходного текста программ. При этом текст будет выведен моноширинном шрифтом.
Создание заголовков
Заголовки различного уровня задаются с помощью дескрипторов и , где n – число от 1 до 6. Самый крупный заголовок задается дескриптором , самый маленький – дескриптором . Например:
Это заголовок уровня 1
Это заголовок уровня 3
Это заголовок уровня 6
В результате на экране будет выведено:
Это заголовок уровня 1
Это заголовок уровня 3
Это заголовок уровня 6
Заголовки являются одним из наиболее часто используемых элементов оформления документов в WWW.
Создание списков
В языке HTML существует возможность задавать списки трех типов: нумерованные списки, ненумерованные списки, списки определений. Начало и конец списка задается специальными дескрипторами, а перед каждым элементом списка задается дескриптор
- , не имеющий закрывающего варианта.
Нумерованный список:
- Элемент списка
- Элемент списка
- Элемент списка
Результат:
Ненумерованный список:
- Элемент списка
- Элемент списка
- Элемент списка
Результат:
* Элемент списка
* Элемент списка
* Элемент списка
Списки определений представляют собой группы текста, по два элемента каждая, при этом второй элемент смещен вправо относительно первого. Как правило, такие списки используются для пояснения различных понятий. Пример:
Первое определяемое понятие
Пояснение первого понятия
Второе определяемое понятие
Пояснение второго понятияі
Результат:
Первое определяемое понятие.
Пояснение первого понятия.
Второе определяемое понятие.
Пояснение второго понятия.
СсылкиСсылки являются одним из основных элементов языка HTML. Ссылки предлагают пользователю быстрый и удобный способ для перемещения в то или иное место в документе или даже в другой документ. Например, вместо того, чтобы листать длинный Web–документ в поисках нужного фрагмента, можно с помощью простого щелчка мыши мгновенно переместиться на нужное место (если, конечно, для этого предусмотрена соответствующая ссылка). Если есть два разных документа, то для того, чтобы обеспечить доступ из одного документа в другой, необязательно их совмещать вместе, достаточно в одном документе сделать ссылку на другой и все будет сводиться к простому щелчку мышки.
На экране ссылки выглядят как строка или строки текста, выделенные иным цветом и подчеркнутые тонкой линией. Если подвести к этому участку текста курсор мышки, он превратиться в изображение указательного пальца, а после щелчка на этом месте будет осуществлен переход по этой ссылке.
Атрибут HREF указывает на имя метки в текущем документе.
Конечно, при этом необходимо в документе обозначить метку, для которой будет задана ссылка. Для этого используется дескриптор c атрибутом :
На экране метка в отличие от ссылок ничем не выделяется среди остального текста.
Если же необходимо осуществить переход на метку, расположенную в другом документе, то вышеприведенный пример немного изменится:
URL может быть как относительным, так и абсолютным. Кроме того, ссылка может указывать не только на документ, но также и на изображения, двоичные файлы, звуковые файлы т.д. Поведение броузера при переходе по той или иной ссылке зависит от его конкретных настроек. Так, если ссылка указывает на документ, то он будет загружен, если же это звуковой или видеофайл, то он будет проигран. Если же это двоичный файл, броузер предложит его переписать на локальный диск.
Внедрение изображенийИспользование изображений позволяет красочно оформлять Web–документы, сочетание текста и графики придает любой страничке приятный вид и наглядность.
Для вставки иллюстраций в документ используется дескриптор :
Атрибут задает имя файла картинки. Имя файла может указывать на как локальный файл, так и на удаленный файл, для чего следует указать соответствующий URL. Файл может представлять собой статическое изображения и иметь графический формат, понимаемый броузером, либо динамическое изображение, представленное в формате GIF89A. В последнем случае в окне броузера файл будет выведен как анимация.
Атрибут ALT указывает на текст, который будет выводиться в окне броузера вместо изображения, если, например, броузер пользователя не поддерживает графику или же отключена опция загрузки изображений. Этот атрибут не является обязательным, однако его использование считается хорошим стилем при составлении Web–документов.
Часто при подготовке страничек с использованием графики случается, что желаемый размер изображения не совпадает с действительным. Например, необходимо поместить картинку на определенной площади с определенным размером. Для этого нужно использовать атрибуты WIDTH и HEIGHT, которые задают требуемые размеры изображения в ширину и высоту соответственно. Например, если необходимо поместить изображение большого размера на площади высотой в 100 и шириной в 200 пикселов, то в тело документа необходимо записать следующее:
Порядок следования этих атрибутов может быть произвольным.
Обилие графики в документе, с одной стороны, улучшает его общий вид, с другой стороны, существенно увеличивает время его загрузки. Чтобы найти компромисс между скоростью загрузки документа и его наглядностью, дизайнеры Web–страниц часто прибегают к такому приему: изображение размещают на страничке в меньшем формате и делают его ссылкой на себя. Если щелкнуть мышкой на таком изображении, то броузер загрузит его и отобразит в оригинальных размерах. Изображение–ссылка описывается в документе следующим образом:
Интересной возможностью представляется «обтекание» изображение текстом. Это весьма популярный способ оформления Web–страниц. При этом на экране картинка окружена текстом, например, слева и снизу. «Обтекание» текста достигается использованием атрибута ALIGN, который имеет такие параметры, как:
LEFT – текст будет охватывать изображение слева-снизу.
RIGHT – текст обхватывает изображение справа-снизу
TOP – изображение окружено текстом справа-сверху
BOTTOM – изображение окружено текстом справа-снизу
MIDDLE – изображение окружено текстом справа-посредине
Например, при составлении Web–странички, приведенной на рис. 1, была использована такая запись в теле документа, описывающая изображение:
Изображения можно использовать и в качестве фона документа. Весь текст и все иллюстрации в документе будут выводиться броузером поверх фонового изображения. Фоновые изображения задаются весьма просто следующим образом:
Если размер изображения недостаточно большой, чтобы заполнить собою все окно броузера, последний в таком случае просто размножит изображение до полного заполнения окна.
Фреймы
Одними из последних нововведений в официальной версии языка HTML являются так называемые фреймы. При использовании фреймов окно броузера разбивается на несколько подокон, в каждом из которых можно отображать любые Web–документы, осуществлять их прокрутку независимо от других окон. Хорошо продуманная структура фреймов может существенно облегчить навигацию по документам и улучшить восприятие информации. В качестве примера можно привести электронный вариант книги или журнала, когда в одном окне можно выбирать разделы–ссылки содержания, а в соседнем окне просматривать информацию, непосредственно относящуюся к конкретному разделу из содержания.
Существует два типа фреймовых документов: фрейм–содержащие документы и простые документы. Фрейм–содержащие документы задают структуру самого фрейм–документа, т.е. задают данные о том, как будет разбито окно броузера на подокна. Такие документы содержат ссылки на другие документы. Обычные же документы – это те документы, которые не содержат данные, определяющие фреймы.
Структура фрейм–содержащего документа в общем случае имеет такой вид:
заголовок
Текст
Область задания фреймовой структуры
Как видно из примера, структура такого документа несколько отлична от структуры обычного документа. Наличие дескрипторов и вместо и как раз и отличает фреймовый документ от обычного. Использование дескрипторов и является еще одним признаком хорошего стиля. Между ними задают текст, который будет выведен в окне броузера, не поддерживающего фреймов.
Ниже приводится пример фреймового документа:
Ваш броузер не поддерживает фреймы!