Основные понятия

Основные понятия

Internet - это крупнейшая компьютерная сеть в мире.

А начинался Internet из исследовательского проекта в конце 60-х годов, который выполнялся по заказу военных США. Тогда была создана сеть под названием ARPANET, охватывавшую большую часть территории США. Позже сеть подвергалась неоднократным улучшениям на основе новых технологий и получила название Internet. В начале 90-х годов компании стали предлагать услуги Internet, ориентированные на потребности обычных пользователей. Так постепенно сеть разрасталась и вовлекала граждан, живущих по всему миру.

Физически Internet состоит из сотен тысяч соединенных между собой компьютеров, разбросанных по всему миру. Компьютеры в Internet взаимодействуют между собой, используя набор протоколов, называемых TCP/IP (Transmission Control Protokol/Internet Protokol). Это набор правил, регламентирующих способы передачи данных между компьютерами в сети. Протоколы TCP/IP позволяют компьютерам обмениваться информацией таким образом, будто они подключены друг к другу напрямую.

WWW (World Wide Web) - это часть Internet, представляющая собой гигантский набор документов, хранящихся на компьютерах по всему миру. Сокращенно WWW называют просто Вэб.

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

Веб-страницы создаются при помощи языка HTML - HyperText Markup Language, языка гипертекстовой разметки.

URL (Uniform Resource Locator) - это уникальный адрес, которым обладает каждая вэб-страница в сети. Если пользователю известен URL страницы, то он может ее отобразить у себя в браузере, набрав ее адрес в строке браузера.

В общем случае URL состоит из наименования используемого протокола, названия сервера и обозначения пути доступа к странице.

Протокол определяет правила обращения к вэб-странице.

Название сервера (доменное имя) - обозначает компьютер, содержащий данную вэб-страницу.

Путь доступа - указывает местоположение страницы на диске сервера.

Например адрес данной страницы http:///html/index. html

http - наименование протокола

- наименование сервера или доменное имя

/html/index. html - путь доступа к странице на самом сервере.

Кроме http (Hyper Text Transfer Protocol) протокола, существуют другие виды протокола, применяемые для доступа к данным в Internet, - например, FTP (File Transfer Protocol). Сайты FTP, на которые следует ссылаться посредством аббревиатуры ftp, позволяют пользователю выгружать на сервер данные, хранящиеся в виде отдельных файлов.

Web-браузер - это программа, установленная на компьютере пользователя, и служащая для поиска и отображения информации в сети. Браузер считывает вэб-страницы и другие файлы с диска сервера и отображает их содержимое на мониторе компьютера пользователя. Среди наиболее популярных браузеров следует назвать Microsoft Internet Explorer, Netscape Navigator, Opera.

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

Введение

Язык разметки гипертекста (HyperText Makeup Language - HTML) формулируется в терминах языка стандартной обобщенной разметки (Standard Generalized Markup Language - SGML) []. Язык SGML представляет собой метод создания структурированных документов, а также языков для их разметки.

В языке SGML каждый документ имеет три части:

Декларации языка SGML, привязывающие к определенным значениям параметры обработки, а также имена синтаксиса. Например, декларация SGML в описании типа документа HTML объявляет, что строка, с которой начинается метка, - это </ , а максимальная длина имени составляет 40 символов.

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

Данные, которые состоят из разметки документа и собственно информации.

Мы используем термин HTML для обозначения как типа документа, так и языка разметки для кодировки документов данного типа.

Все документы типа HTML придерживаются единых деклараций языка SGML и пролога. Следовательно, реализации программы WorldWide Web в общем случае лишь передают и сохраняют ту часть документа HTML, которая содержит данные. Чтобы создать для обработки на анализаторе SGML объект с документом, необходимо поставить текст HTML DTD перед имеющимися данными.

И наоборот, для реализации анализатора языка HTML необходимо лишь воссоздать те части анализатора SGML, которые необходимы для разбора данных, появляющихся вслед за разбором деклараций HTML DTD.

Структурированный текст

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

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

<HTML>

<TITLE>

Простой блок данных

</TITLE>

<H1>

Пример структуры

</H1>

Обычный параграф

<P>

<UL>

<LI>Первая запись, включающая

<A NAME="URI">

текст

</A>

<LI>Вторая запись

</UL>

</HTML>

Некоторые элементы языка (такие как P, LI) являются пустыми. Они не имеют поля данных, и ограничиваются лишь начальной меткой.

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

Основные теги языка HTML

<html></html> - Указывает программе просмотра страниц что это HTML документ.

<head></head> - Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.

<body></body> - Определяет видимую часть документа

Теги оглавления

<title></title> - Помещает название документа в оглавление программы просмотра страниц

Атрибуты тела документа

<body bgcolor=?> - Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.

<body text=?> - Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.

<body link=?> - Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.

<body vlink=?> - Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.

<body alink=?> - Устанавливает цвет гиперссылок при нажатии.

Теги для форматирования текста

<pre></pre> - Обрамляет предварительно отформатированный текст.

<h1></h1> - Создает САМЫЙ БОЛЬШОЙ заголовок

<h6></h6> - Создает самый маленький заголовок

<b></b> - Создает жирый текст

<i></i> - Создает наклонный текст

<tt></tt> - Создает текст - имитирующий стиль печатной машинки. Используется для цитат, обычно наклонный текст.

<em></em> - Используется для выделения из текста слова (наклонный или жирный текст)

<strong></strong> - Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)

<font size=?></font> - Устанавливает размер текста в пределах от 1 до 7.

<font color=?></font> - Устанавливает цвет текста, используя значение цвета в виде RRGGBB.

Гиперссылки

<a xhref="URL"></a> - Создает гиперссылку на другие документы или часть текущего документа.

<a xhref="mailto:EMAIL"></a> - Создает гиперссылку вызова почтовой программы для написания письма автору документа.

<a name="NAME"></a> - Отмечает часть текста как цель для гипперссылок в документе.

<a xhref="http://www. *****/#NAME"></a> - Создает гиперссылку на часть текущего документа.

Форматирование

<p> - Создает новый параграф

<p align=?> - Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center

<br> - Вставляет перевод строки.

<blockquote></blockquote> - Создает отступы с обеих сторон текста.<dl></dl>Создает список определений.

<dt> - Определяет каждый из терминов списка

<dd> - Описывает каждое определение

<ol></ol> - Создает нумерованный список

<li> - Определяет каждый элемент списка и присваивает номер

<ul></ul> - Создает ненумерованный список

<li> - Предваряет каждый элемент списка и добавляет кружок или квадратик.

<div align=?> - Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей

Графические элементы

<img xsrc="name"> - Добавляет изображение в HTML документ

<img xsrc="name" align=?> - Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle

<img xsrc="name" border=?> - Устанавливает толщину рамки вокруг изображения

<hr> - Добавляет в HTML документ горизонтальную линию.<hr size=?>Устанавливает высоту(толщину) линии

<hr width=?> - Устанавливает ширину линии, можно указать ширину в пикселах или процентах.

<hr noshade> - Создает линию без тени.

<hr color=?> - Задает линии определенный цвет. Значение RRGGBB.

Таблицы

<table></table> - Создает таблицу.

<tr></tr> - Определяет строку в таблице.

<td></td> - Определяет отдельную ячейку в таблице.

<th></th> - Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)

Атрибуты таблицы

<table border=#> - Задает толщину рамки таблицы.

<table cellspacing=#> - Задает расстояние между ячейками таблицы.

<table cellpadding=#> - Задает расстояние между содержимым ячейки и ее рамкой.

<table width=#> - Устанавливает ширину таблицы в пикселах или процентах от ширины документа.

<tr align=?> или <td align=?> - Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.

<tr valign=?> или <td valign=?> - Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.

<td colspan=#> - Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)

<td rowspan=#> - Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)

<td nowrap> - Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

Кадры

<frameset></frameset> - Предваряет тег <body> в документе, содержащем кадры;

<frameset rows="value, value"> - Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.

<frameset cols="value, value"> - Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.

<frame> - Определяет единичный кадр или область в таблице кадров.

<noframes></noframes> - Определяет, что будет показано в окне браузера если он не поддерживает кадры.

Атрибуты кадров

<frame xsrc="URL"> - Определяет какой из HTML документов будет показан в кадре.

<frame name="name"> - Указывает Имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров.

<frame marginwidth=#> - Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.

<frame marginheight=#> - Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.

<frame scrolling=VALUE> - Указывает будет-ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.

<frame noresize> - Препятствует изменению размеров кадра.

Формы

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

<form></form> - Создает формы

<select multiple name="NAME" size=?></select> - Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.

<option> - Указывает каждый отдельный элемент меню

<select name="NAME"></select> - Создает ниспадающее меню <option>Указывает каждый отдельный элемент меню

<textarea name="NAME" cols=40 rows=8></textarea> - Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.

<input type="checkbox" name="NAME"> - Создает checkbox. За тегом следует текст.

<input type="radio" name="NAME" value="x"> - Создает radio кнопку. За тегом следует текст.

<input type=text name="foo" size=20> - Создает строку для ввода текста. Параметром Size указывается длина в символах.

<input type="submit" value="NAME"> - Создает кнопку "Принять"

<input type="image" border=0 name="NAME" xsrc="name. gif"> - Создает кнопку "Принять" - для этого используется изображение<input type="reset">Создает кнопку "Отмена"

HTML (HyperText Markup Language) - язык гипертекстовой разметки документов. Назначение HTML в том, чтобы сделать документы пригодными для чтения с экрана монитора.

Как создать HTML?

Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Вы можете создать HTML документ в простом Блокноте. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на. html или. htm вы получите полноценную web страничку.

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

Что такое теги в HTML?

Теги - это инструменты разметки текста. Теги могут прописываться как строчными, так и прописными буквами, разницы никакой нет. Теги бывают парными и не парными. В качестве примера парного тега можно привести тег <html></html>, этот тег начинает и заканчивает любой HTML документ. Вторая часть парного тега отличается от первой только наличием символа "/", однако первая часть тега может содержать и дополнительные параметры. Например в теге <font size="4"></font>, параметр size="4" определяет размер текста. Примером непарного тега является <hr> - тег вставки в HTML документ горизонтальной линии, такой как в конце этого абзаца.

Обязательные теги языка HTML

Любой HTML документ должен содержать следующие теги <html></html>, <head></head>, <body></body>, <title></title>. Порядок расположения тегов в HTML документе представлен ниже

<html>

<head>

<title>Название вашей страницы</title>

</head>

<body>

Тело вашего документа

</body>

</html>

Внутри тега <head></head> располагается название вашего HTML документа (чаще всего именно его вы видите в качестве ссылки в результатах поиска поисковыми машинами), помимо этого тега внутри конструкции <head></head> могут располагаться так называемые Мета Теги. Их назначение и описание смотри в справочнике по Мета Тегам.

Тело HTML документа

Заголовки

Заголовки в языке HTML выделяются тегами <h1></h1>, <h2></h2>, ... , <h6></h6>. Таким образом существует 6 уровней заголовков. Можете поэкспериментировать - Вставьте вместо "Тело документа" предыдущем примере <h1>HTML - это просто</h1>, сохраните в текстовом формате, измените расширение документа с. txt на. html и откройте его в браузере. Ну как? По моему приятно когда начинает получаться, можете попробовать то же самое с заголовками других уровней.

Абзацы в языке HTML

Абзац в HTML документе заключается в тег <P></P>. Таким образом конструкция <p> - Как настроение?</p><p> - Не плохо.</p> будет выглядеть следующим образом

- Как настроение?

- Не плохо.

Выделение текста в HTML

Для выделения текста, или области текста в HTML используют теги <b></b>, <i></i>, <u></u>, таким образом строка

<b>жирный</b> <i>курсив</i> <u>подчёркнутый</u> <u><i><b>жирный подчёркнутый курсив</b></i></u>

будет выглядеть

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

Ненумерованные списки в HTML

Ненумерованные списки прописывают в HTML коде следующим образом <UL><LI>пункт 1<LI>пункт 2<LI>пункт 3</UL>, что даст нам список вида

пункт 1

пункт 2

пункт 3

Нумерованные списки в HTML

Нумерованные списки прописывают следующими тегами <OL><LI>пункт 1<LI>пункт 2<LI>пункт 3</OL>, смотрим, что получится

пункт 1

пункт 2

пункт 3

Вложенные списки списки в HTML

Посмотрите пример вложенного списка

<ul>

<li>Глава 1

<ul><li>Раздел 1<li>Раздел 2</ul>

<li>Глава 2

<ul><li>Раздел 1<li>Раздел 2</ul>

</ul>

такая запись в HTML коде даёт нам следующий результат

Глава 1

Раздел 1

Раздел 2

Глава 2

Раздел 1

Раздел 2

Специальные символы в тексте документа

Специальные символы в тексте документа прописываются следующим образом

&lt; - левая скобка (<)

&gt; - правая скобка (>)

&amp; - (&)

&quot; - кавычки (")

Так строка вида &lt; &quot;Язык HTML&quot; &gt; будет выглядеть

< "Язык HTML" >

Прерывание строки в тексте HTML документа

Прерывание строки осуществляется тегом <BR>. Например строка текста Автор<BR>Год издания<BR>Тираж даст следующий результат

Автор

Год издания

Тираж

Гиперссылки

Гиперссылка в языке HTML прописывается тегом <a></a>. Например запись вида

<a href="html. rar">Скачать учебник языка HTML</a>

будет выглядеть так

Параметр href определяет место документа на который ссылается ссылка, в нашем примере ссылка относительная она ссылается на документ html. rar расположенный в той же директории что и страница HTML. Абсолютная ссылка прописывается следующим образом

<a href="http://*****/html. rar">Скачать учебник языка HTML</a>

Выглядит она аналогично предыдущей ссылке, но определяет точное местоположение документа.

Правила расстановки относительных ссылок в языке HTML

Если документ на который ссылается ссылка расположен в директории (папке) на уровень ниже, скажем dir, то ссылка параметр href будет иметь вид href="dir/html. rar" , а если документ расположен в директории на уровень выше, то нам необходимо будет записать href="../html. rar".

Вставка рисунков в HTML страницу

Рисунок в HTML документ вставляется следующим образом <img src="ris. jpg" width="100" height="140" alt="Учебник по языку HTML">. Разберем, каково значение параметров тега <img>. Как видите, это одиночный тег. Параметр src задаёт путь к изображению (абсолютный или относительный). Правила указания относительного пути, такие же как и для ссылки. Параметры width и height определяют ширину и высоту рисунка в пикселях в HTML документе. Параметр alt задаёт альтернативный текст - тот текст который отображается в браузере если отключена загрузка графики.

Фреймы в HTML документе

Фрейм - это рамка, в которую загружается другой HTML документ. Многие сайты имеют фреймовую структуру, наш не исключение. Меню нашего сайта загружается во фрейм. Как это делается? Смотрите

<iframe name="I2" src="menu. htm" width="200" scrolling="no" height="500" marginwidth="2" marginheight="2">Ваш браузер не поддерживает фреймы</iframe>

Параметр name - имя фрейма, src - путь к загружаемой во фрейм странице width, height соответственно ширина и высота рамки. Параметр scrolling определяет отображаются ли полосы прокрутки во фрейме, если этот параметр не прописан в HTML коде, то полосы прокрутки отображаются при необходимости, если он равен "no", то полосы прокрутки не отображаются, если - "yes", то - отображаются в любом случае. Параметр name используется для задания конечной рамки по умолчанию - рамки в которую будут загружаться страницы при переходе по гиперссылкам HTML документа. Это осуществляется добавлением в HTML код тега <base> между тегами <head></head>. Для нашей рамки <base target="I2">.

Таблицы в языке HTML

Таблицы в HTML документ вставляются следующим образом

<table border="1" style="border-collapse: collapse" bordercolor="#111111">

<tr><td>Ячейка11<td>Ячейка12</tr>

<tr><td>Ячейка21<td>Ячейка22</tr>

</table>

Таблицу открывает и закрывает тег <table></table>, тег <tr></tr> - определяет столбец, одиночный тег <td> определяет ячейку в столбце, таким образом представленный код прописывает таблицу размером 2х2, которая в HTML документе будет выглядеть следующим образомЯчейка11 Ячейка12

Ячейка21 Ячейка22

Теги style и bordercolor определяют соответственно стиль отображения таблицы и цвет границы. Более подробно смотрите в учебнике по HTML.