Добавлен: 25.06.2023
Просмотров: 66
Скачиваний: 2
Введение
В последнее время Интернет прочно вошел в жизнь современного человека. Люди все чаще используют всемирную паутину для поиска информации, совершают покупки в интернет-магазинах, используют веб-сайты для того, что бы сделать выбор в пользу той или иной услуги.
В свою очередь компаниям, предоставляющие различные услуги и товары на рынок, для того, что быть успешными и востребованными необходимо обзаводиться собственными веб-сайтами.
Именно поэтому изучение технологий создания сайтов является очень важным и актуальным направлением обучения.
Цель курсовой работы рассмотреть особенности синтаксиса языка HTML, определить его назначение и роль при создании web-страниц.
1. WWW и HTML
World Wide Web (Web) — это сеть информационных ресурсов. Языком публикации, используемым в World Wide Web, является HTML (HyperText Markup Language — язык разметки гипертекстов).
HTML дает разработчикам средства для:
- публикации электронных документов с заголовками, текстом, таблицами, списками, графическими изображениями и т.д.;
- загрузки электронной информации с помощью щелчка мыши на гипертекстовой ссылке;
- разработки форм для передачи данных на удаленные службы, для использования в поиске информации, резервировании, заказе продуктов и т.д.;
- добавления электронных таблиц, видеоклипов, звуковых фрагментов и других приложений непосредственно в документы.
Язык HTML был разработан Тимом Бернерс Ли во время его работы в CERN и распространен браузером Mosaic, разработанным в NCSA. В 1990х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. Для Web очень важно использование единых соглашений между авторами Web-страниц и производителями программного обеспечения. Это явилось причиной совместной работы над спецификациями языка HTML. Документы HTML должны работать в различных браузерах и на разных платформах. Достижение совместимости снижает расходы авторов, поскольку они могут разрабатывать только одну версию документа
В каждой версии HTML предпринималась попытка отразить все большее число соглашений между работниками и пользователями, чтобы усилия авторов не были потрачены впустую, а их документы не стали бы нечитаемыми в короткий срок. Язык HTML разрабатывался с той точки зрения, что все типы устройств должны иметь возможность использовать информацию в Web: персональные компьютеры с графическими дисплеями с различным разрешением и числом цветов, сотовые телефоны, переносные устройства, устройства для вывода и ввода речи, компьютеры с высокой и низкой частотой и т.д.
2 Синтаксис языка HTML
2.1 Простейший HTML документ
HTML-документ — это текстовый файл с расширением *.html (*.htm) . Рассмотрим самый простой HTML-документ:
<html>
<head>
<title>
Документ 1
</title>
</head>
<body>
Первый HTML документ
</body>
</html>
Дополнительные отступы используются только для удобства чтения исходного кода, но с точки зрения синтаксиса языка они не обязательны. Браузеры игнорируют символы конца строки и множественные пробелы в HTML-файлах.
Фрагмент текста заключенных между знаками "<" и ">" (например,<html>) называется тэг (tag).
Большинство HTML-тэгов — парные, то есть на каждую открывающую метку вида<tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Тэги можно набирать как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Рассмотрим структуру любого HTML документа.
Любой документ обязательно должен содержать тэги <html> ... </html>.
Тэг <html> должен открывать HTML-документ. Аналогично, тэг </html> должен завершать HTML-документ.
На втором уровне вложенности, каждый документ может содержать две области: область, образуемую тэгами <head> ... </head>, и, область образуемую тэгами <body> ... </body>.
Пара тегов <head> ... </head> указывает на начало и конец заголовка документа. Данный раздел включает наименование документа и служебную информацию.
В этой части документа располагаются теги <title> ... </title>.
Все, что находится между тегами <title> и </title>, является названием документа.
Пара тегов <body> ... </body> указывает на начало и конец тела HTML-документа. Этот раздел содержит и определяет содержание документа.
Приведем пример еще некоторых простых тегов:
<H1> ... </H1> — <H6> ... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый маленький.
<P> ... </P>
Такая пара меток описывает абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN позволяющий задать выравнивание текста:
<H1 ALIGN=CENTER>Заголовок в центре</H1>
или
<P ALIGN=RIGHT>Текст выровнен по правому краю</P>
2.2 Работа с изображениями
В HTML-документ можно вставлять изображения. Изображение должно принадлежать одному из трех графических форматах: GIF (*.gif) , JPEG (*.jpg или *.jpeg) и PNG (*.png).
Для того, что бы добавить в документ изображение, записанное в файл picture.gif, находящееся в одном каталоге с HTML-документом необходимо написать следующий код:
<IMG SRC="picture.gif">
Тэг <IMG SRC="[имя файла]"> может также включать атрибут ALT="[текст]", например:
<IMG SRC="picture.gif" ALT="Картинка">
Атрибут ALT определяет текст, который будет выведен вместо изображения, если оно по каким-то причинам не доступно.
Язык HTML позволяет так же описывать карты изображений.
Для этого используются тэги <МАР> <AREA> и </map>.
Тэг <МАР> необходим для общего определения карты. Внутри него определяются области карты при помощи этэгов AREA и задается имя карты при помощи атрибута: name="Имя".
Для каждой области карты должен быть создан свой элемент AREA. Он может не иметь закрывающегося тега. Этот элемент должен включать атрибут, определяющий ссылку:
href :=" Адрес"
Атрибут для задания альтернативного текста, заменяющего изображение карты:
alt= "Текст подсказки"
Этот атрибут так же может быть использован как комментарий.
Третий атрибут, это атрибут, определяющий форму области на карте.
Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon).
Для круга необходимо задать координаты центра и радиус (г), выраженные в пикселях. Координаты центра отсчитываются от левого края (х) и верхнего края (у) изображения. Круговая область задается следующим образом:
shape="circle" coords=x,y,r
Для определения области произвольной формы задают координаты (х, у каждого из углов многоугольника, который точно или приблизительно соответствует по форме этой области:
shape="poly" coords=x7, y1, x2,y2, хЗ , уЗ . . .
При определении прямоугольной области задают координаты верхнего левого и правого нижнего углов прямоугольника:
shape="rectM coords=xt, y1, x2,y2
При помощи атрибута nohref (не имеет значения) можно запретить переход по ссылке для определенной области карты.
2.3 Списки
При помощи HTML текст можно организовывать в списки и выводить их на экран в отформатированном виде. Существует три вида списков: нумерованные, ненумерованные и списки определений.
Ненумерованные списки: <UL> ... </UL>
Текст, расположенный между тэгами <UL> и </UL>, воспринимается как ненумерованный список. Каждый новый элемент списка нужно начинать с тэга <LI>. Например, чтобы создать такой список:
- Пункт 1;
- Пункт 2;
- Пункт 3
необходим такой HTML-код:
<UL>
<LI> Пункт 1;
<LI> Пункт 2;
<LI> Пункт 3
</UL>
У тэга <LI> допустимо не указывать закрывающийся тэг.
Нумерованные списки: <OL> ... </OL>
Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры.
<OL>
<LI> Пункт 1;
<LI> Пункт 2;
<LI> Пункт 3
</OL>
получится такой список:
- Пункт 1;
- Пункт 2;
- Пункт 3
Списки определений: <DL> ... </DL>
Список определений отличается от других видов списков. Вместо тэга <LI> в списках определений используются тэги <DT> (от английского definition term — определяемый термин) и <DD> (от английского definition definition — определение определения). Пример такого списка:
<DL>
<DT>Термин 1
<DD>Определение термина 1.
<DT>Термин 2
<DD>Определение термина 2.
</DL>
Этот фрагмент будет выведен на экран следующим образом:
Термин 1
Определение термина 1.
Термин 2
Определение термина 2.
Так же, как тэги <LI>, тэги <DT> и <DD> не имеют парных закрывающих меток.
Элемент любого списка может содержать в себе целый список любого вида.
Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.
2.4 Ссылки
Особенностью web-страниц является организация переходов по гипертекстовому принципу. При нажатии левой кнопкой мыши на некоторый выделенный фрагмент текущего документа происходит переход к некоторому заранее назначенному документу или фрагменту документа.
В HTML переход от одного фрагмента текста к другому задается с помощью тэга вида:
<A HREF="[адрес перехода]">выделенный фрагмент текста</A>
В качестве параметра [адрес перехода] может использоваться несколько типов аргументов. Самое простое — это задать имя другого HTML-документа, к которому нужно перейти. Например:
<A HREF="index.html">Перейти на главную страницу</A>
Такой фрагмент HTML-текста приведет к появлению в документе выделенного фрагмента текста, при нажатии на который в текущее окно будет загружен документ index.html.
Если в адресе перехода не указан каталог, переход будет выполнен внутри текущего каталога. Если в адресе перехода не указан сервер, переход будет выполнен на текущем сервере.
Этот механизм называется относительной адресацией и очень удобен в использовании. Если подготовить к публикации некоторую группу HTML-документов, которые ссылаются друг на друга только по имени файла и находятся в одном каталоге, то вся эта группа документов будет работать точно так же, если ее поместить в любой другой каталог на любом другом компьютере
На практике, часто бывает необходимо дать ссылку на документ, находящийся на другом сервере.
<A HREF="http://www.yandex.ru"> Воспользуйтесь поиском</A>
При необходимости можно задать переход не просто к некоторому документу, но и к определенному месту внутри этого документа. Для этого необходимо создать в документе, к которому будет задан переход анкер.
Рассмотрим пример: допустим, что необходимо осуществить переход из файла page1.html к словам "Раздел 1" в файле page2.html (файлы находятся в одном каталоге). Прежде всего, необходимо создать анкер в файле 2.html:
<A NAME="AAA">Раздел 1</A>
Текст "Переход закончен" при этом никак не будут выделены в тексте документа.
Затем в файле page1.html можно создать ссылку на этот анкер:
<A HREF=" page2.html#AAA">Переход к анкеру AAA</A>
Переход к этому анкеру можно определить и внутри самого документа page2.html — достаточно только включить в него такой фрагмент текста:
<A HREF="#AAA">Переход к анкеру AAA</A>.
Подобным образом удобно создавать оглавления на странице.
Имена анкеров задаются латинскими буквами.
2.5 Таблицы
Таблицы являются очень удобным средством форматирования данных на Web-странице. Браузеры берут на себя заботу об отображении рамки таблицы. Размер рамки может быть автоматически согласован с размером окна просмотра в браузере и, с размером текстового и графического содержимого ячеек таблицы. Кроме того, таблицы позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать определенным образом рисунки и текст относительно друг друга, управлять цветовым оформлением и т. д.
Рассмотрим пример описания таблицы на HTML:
<HTML>
<HEAD>
<TITLE>Таблица</TITLE>
</HEAD>
<H1>Простейшая таблица </H1>
<TABLE BORDER=1> <!--Это начало таблицы-->
<CAPTION> <!--Это заголовок таблицы-->
Таблица 1
</CAPTION>
<TR> <!--Это начало первой строки-->
<TD> <!--Это начало первой ячейки-->
Первая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Первая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец первой строки-->
<TR> <!--Это начало второй строки-->
<TD> <!--Это начало первой ячейки-->
Вторая строка, первая колонка
</TD> <!--Это конец первой ячейки-->
<TD> <!--Это начало второй ячейки-->
Вторая строка, вторая колонка
</TD> <!--Это конец второй ячейки-->
</TR> <!--Это конец второй строки-->