- •Общие понятия интернет-технологий
- •Стек протоколов tcp/ip
- •Канальный уровень
- •Сетевой уровень
- •Служба dns Транспортный уровень – протоколы tcp и udp
- •Протоколы прикладного уровня
- •Подключение к сети Интернет
- •Способы установления связи
- •Виды доступа в Internet
- •Сервисы Интернет
- •Электронная почта
- •Телеконференции, форумы, блоги
- •Служба мгновенных сообщений (ims)
- •Интерактивный чат
- •Поиск информации в сети Internet Поисковые системы
- •Создание ресурсов Internet Необходимые компоненты ресурса
- •Создание веб-страницы
- •Создание веб-страницы
- •Типы тэгов:
- •1. Маршрутизация в сети Интернет.
- •2. Адресация в сети Internet
- •3. Понятие ip адреса.
- •4. Базовые протоколы (ip, tcp, udp)
- •5. Протокол ip. Основные задачи. Принцип работы.
- •6. Протоколы tcp и udp. Основные задачи. Принцип работы.
- •6.1. Порты tcp и udp
- •7. Принцип организации dns.
- •8. Служба Telnet. Протокол Telnet.
- •8.1. Служба ssh
- •9. Служба ftp. Протокол ftp.
- •10. Служба www. Протокол http.
- •11. Электронная почта. Общие сведения.
- •11.1. Mime – кодирование.
- •11.2. Формат сообщения электронной почты:
- •12. Протоколы электронной почты
Создание веб-страницы
Разберём пример создания ресурса Интернет на примере личной веб-страницы. Итак, для этого требуется:
1. Хостинг
2. Контент
3. Представление
Хостинг – место для размещения страницы. В данном случае мы воспользуемся собственным хостингом на сервере класса. Обычно для размещения личных страниц используются хостинги, предлагаемые провайдерами интернет или крупными IT-компаниями, такими как Яндекс, Рамблер и прочими. Чтобы получить место для странички, необходимо зарегистрироваться на таком ресурсе, то есть создать имя и пароль пользователя, а также ознакомиться с правилами предоставления сервиса и способами взаимодействия с ним. Обычно провайдер предлагает несколько способов, такие как интерактивный веб-интерфейс и FTP. Интерактивный интерфейс – управление через браузер, пользователь делает все действия прямо на сервере провайдера, вводя нужные данные и загружая фрагменты через специальные формы. Такой способ прост и не требует специальных знаний, но неудобен и имеет ограниченные возможности. Гораздо удобнее создавать страницы на собственном компьютере и потом загружать их на сервер с помощью FTP.
С контентом всё ясно – это текст о себе, фотографии и так далее. Также личная страница обычно содержит контактные данные – адрес электронной почты, ссылки на блоги и любимые форумы и так далее.
Представление – это, как правило, то, что отличает хороший сайт от плохого. Создание веб-сайтов – не только серьёзное ремесло, но в немалой степени и искусство. Однако так глубоко мы вдаваться не будем, пока наша цель – создание несложной пользовательской страницы.
Создание веб-страницы
Основой веб-страницы является файл формата html, который при размещении на веб-сервере и позволяет пользователям Интернет получать доступ к данной информации. Также при создании страниц используются файлы графических и других медиаформатов, которые средствами языка html вставляются в текст.
Язык гипертекстовой разметки html сам по себе несложен, но позволяет включать запросы и вызовы различных дополнительных сервисов, фрагменты кода на языках php и java, обращения к базам данных и так далее. Исходной целью создания html была разметка текста для удобного представления его через www. Для создания простой страницы нам потребуются немногие команды, теги html
Тег – управляющий элемент html. Тег записывается в угловых скобках, содержит имя тега и необязательные свойства – атрибуты тега. Многие теги являются парными, заключающими в себе часть текста или другие теги. Например тег-гиперссылка состоит из двух частей - <a href="name.domain">текст</a> - открывающий тег <a содержит атрибут – адрес ссылки href="", тег завершается угловой скобкой >, затем следует текст (может содержать другие теги) и после него - закрывающий тег </a>. При обработке такого кода браузером будет выведено слово "текст", при щелчке мышкой на котором браузер получит команду перейти на адрес name.domain.
Типы тэгов:
оформление документа
<html>, <head>, <title>, <body>, <meta>, style
форматирование текста
<h1>, <p>, <div>, <blockquote>, <br>, <hr>, <pre>
свойства текста
<font>, <b>, <i>, <u>, <sub>, <sup>
вставка элементов
<img>, <a>
таблицы
<table>, <tr>, <td>
списки
<ul><ol><li>
head |
Элемент HEAD содержит информацию о документе в целом. В заголовке можно использовать лишь строго заданный набор элементов. Элемент HEAD определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. |
title |
Определяет имя документа. Имя, как правило, отображается в заголовке окна браузера. |
style |
Задаёт стиль форматирования для элементов текста. <style type="text/css"> <!-- p{text-align:justify;text-indent:0.2in;font:13pt;margin-top:5pt;margin-bottom:1pt} h1{text-align:center; color:#800010} body{background-color:#959595} --> </style> |
meta |
HTML позволяет авторам указывать метаданные - информацию о документе. Элемент МЕТА используется для описания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но полезная для поиска и индексации страницы роботами поисковых серверов. Элемент META может использоваться для идентификации свойств документа (например, автора, списка ключевых слов и т.д.) и назначения им значений. В этой спецификации не определяется нормативный набор значений. Элемент не имеет конечного тэга. Параметры: NAME определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере. <HEAD> <TITLE>Пример документа</TITLE> <META name="description" content="Личный сайт Ихтиогадра Жабовидного"> <META name="keywords" content="ихтиогадр, монстр, существо, ужасы, фантастика"> <META name="authors" content="Ихтиогадр"> </HEAD> |
body |
Между тегами <BODY> и </BODY> располагается тело HTML-документа – то есть весь доступный пользователю контент и способы его представления. |
<H1> |
Теги заголовков <H1>, <H2> и так далее – оформляют фрагмент текста как заголовок соответствующего уровня. В отличие от <title> этот заголовок не выводится в строку браузера, а показывается в тексте. Форматы написания текста заголовков, а также абзацев, списков и так далее – могут изменяться как атрибутами тегов (например, <H1 color="RED" align="CENTER">Красный заголовок в центре</H1>), так и заданием свойств в шаблоне через параметры style в заголовке документа. Удобно задать стиль элемента текста один раз и далее в документе использовать единый стандарт оформления. |
<P> |
Тег абзаца. Выделяет часть текста как отдельный абзац. Не требует закрывающего тега. |
<br> |
Перевод строки. В отличие от абзаца не оформляет отступ и интервал. |
<hr> |
Горизонтальная линия, делящая текст. Может содержать атрибуты цвета, толщины и выравнивания. |
<font> |
Сам по себе значения не имеет, требуется для указания атрибутов шрифта – начертания, цвета, размера. <font color=""></font> |
<b> <i> <u> <s> |
Выделение жирным, курсивным, подчёркнутым, зачёркнутым шрифтом |
<sub> <sup> |
Надстрочный и подстрочный текст |
<img> |
Вставка изображения – графического файла. <img src="картинка.jpg">. Может ссылаться как на файл, находящийся вместе с этой страницей, так и на любой графический файл в интернете (в этом случае адрес файла записывается полностью - <img src="http://host.domain/files/myfile.jpg"> |
<a> |
Вставка гиперссылки. <a href="name.domain">текст</a> |
<table> |
Вставка таблицы. Внутри таблицы при помощи тегов <td> и <tr> можно сделать нужное количество строк и столбцов. Текст, изображения и ссылки (записанные в виде соответствующих тегов) будут заключены между тегами будет заключйн в ячейки таблицы. |
<ol> <ul> |
Нумерованный и ненумерованный списки. |
<li> |
Элемент списка. Не требует закрывающего тега. |
Всего тегов значительно больше, и вышеперечисленные имеют различные параметры, которые здесь не упомянуты, но данного набора уже достаточно для создания несложных страниц. Как и с любым языком, и не только программирования, овладение html требует практики. Учебников и справочников по синтаксису – полон интернет.
Существуют различные программы-редакторы, предназначенные для создания веб-страницсе они упрощают и автоматизируют написание html-текста, но для понимания процесса желательно первые страницы создать вручную, в обычном текстовом редакторе, а уже потом перекладывать рутинную работу на программы-
помощники. В принципе, всем известный MS Office позволяет создавать веб-документы, но качество и размер таких документов совершенно неудовлетворительны. OpenOfficе, альтернативный офисный пакет от фирмы Sun, делает это гораздо лучше – созданные им страницы можно использовать, и в том числе править в редакторе, они содержат внятный html-текст.
Разбиение (вёрстка) веб-страницы. Использование таблиц, фреймов, масок.
Модель таблиц HTML позволяет авторам упорядочивать данные - текст, форматированный текст, изображения, ссылки, формы, поля форм, другие таблицы и т.д. - в строки и столбцы ячеек.
С каждой таблицей может быть связан заголовок (см. элемент CAPTION), предоставляющий краткое описание таблицы.
Строки таблицы могут группироваться в разделы заголовков, нижних заголовков и тела, (с помощью элементов THEAD, TFOOT и TBODY соответственно).
Ячейки таблицы могут содержать "заголовок" (см. элемента TH) или "данные" (см. элемент TD). Ячейки могут распространяться на несколько строк или столбцов.
Элементы для создания таблиц:
Результат:
|
Table
Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION.
Параметры:
ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.
VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.
WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
|
Результат:
HDD |
WD Caviar 3.1Gb |
85$ |
Quantum FB ST 6.4Gb |
110$ |
|
Результат:
Video |
|
Matrox G400 |
115$ |
Voodoo III |
129.95$ |
TR
Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
Параметры:
ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
Td, th
Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок. Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.
Параметры:
ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right.
По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование. VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру, если значение этого параметра не было задано ранее в элементе TR.
WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки.
BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка.