Информационные технологии

Лабораторная работа №1

Цель работы: получение навыков практической работы с FTP-сервисом Internet, формирование умений создания простых HTML-документов, а также использования таблиц и списков.

 

Литература:

HTML справочник

spravkaweb.ru

Теория

 

ftp

FTP-сервис  разработан для того, чтобы позволить  пользователю установить соединение  с компьютером в Internet (работает  по протоколу FTP- протокол передачи  файлов (File Transfer Protocol)), просмотреть  доступные на нем и скопировать  на локальную машину или на  сервер необходимые файлы.

Для работы с FTP-сервером требуется иметь специальное имя пользователя, зарегистрированное на сервере, и пароль для установления соединения. Однако существует весьма популярная разновидность этого сервиса, именуемая «анонимный FTP». Для работы с такими серверами в качестве имени используется anonymous, а в качестве пароля – любой выдуманный адрес электронной почты (пример:nnn@nnn.com).

WWW-страницы  создаются с помощью специального  языка HTML (HyperText Markup Language), являющегося  по существу языком компоновки  документов и спецификации гиперссылок. Средствами HTML задаются синтаксис  и размещение специальных встроенных  указаний (теги, заключенные в <> скобки), в соответствии с которыми  браузер отображает содержимое  документа: текст, изображения и  данные других типов, поддерживаемые  данным браузером. Базовый синтаксис  и семантика языка HTML определены  в стандарте HTML, который можно  найти по адресу http://www.w3.org, там же есть ссылки на переводы этих стандартов на различные языки http://www.w3.org/Consortium/Translation/ .

В Internet существует большое количество русскоязычных описаний языка HTML, учебников по разработке WWW-страниц, специализированных серверов для WEB-мастеров и т.д. Большая подборка соответствующих материалов находится на сервере www.webclub.ru .

Для удобного подключения к разным FTP без запоминания паролей и повторных вводов, рекомендую использовать редактор phpDesigner 8.

 

Таблицы

Чтобы допускать минимум ошибок, надо воспользоваться чужим опытом. Самый большой опыт разметки страниц накоплен у печатных изданий. Если взять газету, журнал, книгу и т.д., и внимательно посмотреть, то мы увидим следующие основные элементы:

• Как правило, используются белый фон и черные буквы. Представьте толстую книгу с белыми буквами и черным фоном, прочитав, испортите себе зрение.
• Поля (справа и слева) и отступы (сверху и снизу). Попробуйте распечатать текст без полей и отступов, читать будет неудобно.
• Абзацы выровнены по обеим сторонам. Все строки начинаются по одной линии, и заканчиваются по другой линии. "Глаза" к этому привыкают, и читать становиться удобнее.
• Новый абзац начинается с отступом первой строки, между абзацами пробел больше, чем между строк. Так легче визуально выделить абзацы.
• Применение "колончатой структуры", особенно заметно в газетах и журналах. Таким образом, можно более эффективно использовать всю большую страницу, размещая маленькие тексты и элементы графики, не оставляя "белых пятен". Также текст в узких колонках можно читать сверху в низ, не перемещая "глаза" справа налево.

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

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

На данном этапе, таблицы уже почти не используются для разметки сайтов, так как при их использовании есть ряд недостатков:

• "Медленная загрузка". Пока вся таблица не загрузится, информация на экране не появится.
• Излишний код. Приходится создавать много ячеек и строк, которые, в общем-то, не нужны.
• Отсутствие возможности с точностью до пикселов расположить элемент на экране.
• Отсутствие возможности "надвинуть" один элемент на другой.
• Отсутствие возможности управлять отображением элементов (при переполнении, таблица просто увеличивается в размерах).

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

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.

Стиль элемента при наведении на него курсора мыши определяется с помощью псевдокласса :hover, он добавляется к нужному селектору. Для изменения стиля строки таблицы, :hover следует добавить к селектору tr, задав желаемый цвет фона через свойство background.

 (tbody tr:hover {

    background: #f3bd48; /* Цвет фона при наведении */

    color: #fff; /* Цвет текста при наведении */   })

Поскольку правило будет распространяться на все строки таблицы, что не всегда желательно, то в таблицу можно добавить тег <tbody>, внутри которого цвет строк будет меняться.

Синтаксис:

<table>

  <tr>

    <td>...</td>

  </tr>

</table>

Атрибуты

align - Определяет выравнивание таблицы.

background - Задает фоновый рисунок в таблице.

bgcolor - Цвет фона таблицы.

border - Толщина рамки в пикселах.

bordercolor - Цвет рамки.

cellpadding - Отступ от рамки до содержимого ячейки.

cellspacing - Расстояние между ячейками.

cols - Число колонок в таблице.

frame - Сообщает браузеру, как отображать границы вокруг таблицы.

height - Высота таблицы.

rules - Сообщает браузеру, где отображать границы между ячейками.

summary - Краткое описание таблицы.

width - Ширина таблицы.

Закрывающий тег - Обязателен.

Пример

<!DOCTYPE html>

<html>

 <head>

  <title>Таблица</title>

  <style>

   table {

    width: 100%; /* Ширина таблицы */

    border-collapse: collapse; /* Убираем двойные линии между ячейками */   }

   td, th {

    padding: 3px; /* Поля вокруг содержимого таблицы */

    border: 1px solid #000; /* Параметры рамки */   }

   th {

    background: #afd792; /* Цвет фона */

    color: #333;  /* Цвет текста */   }

   tbody tr:hover {

    background: #f3bd48; /* Цвет фона при наведении */

    color: #fff; /* Цвет текста при наведении */   }

  </style>

 </head>

 <body>

  <table>

 

   <tr>

    <th></th><th>2004</th><th>2005</th><th>2006</th>

   </tr>

   <tbody>

    <tr>

     <td>Рубины</td><td>43</td><td>51</td><td>79</td>

    </tr>

    <tr>

     <td>Изумруды</td><td>28</td><td>34</td><td>48</td>

    </tr>

    <tr>

     <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>

    </tr>

   </tbody>

  </table>

 </body>

</html>   

 

Списки

Описание

Тег <li> определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный соответственно.

Тег <ul> устанавливает маркированный список. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Тег <ol> устанавливает нумерованный список. Атрибут start устанавливает номер, с которого будет начинаться список. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами.

<ul>

  <li>элемент маркированного  списка</li>

</ul>

 

<ol>

  <li>элемент нумерованного  списка</li>

</ol>

Закрывающий тег - Обязателен

Атрибуты

type - Устанавливает вид маркера списка.

 

<li type="disc | circle | square">...</li>

<li type="A | a | I | i | 1">...</li>

 

Для маркированного списка маркеры могут принимать один из трех видов: кружок (disc), окружность (circle) и квадрат (square). Значения атрибута type и получаемый вид показан в таблице:

 

 

Код	Пример
<ul type="disc"> ... </ul>	Чебурашка Крокодил Гена Шапокляк
<ul type="circle"> ... </ul>	Чебурашка Крокодил Гена Шапокляк
<ul type="square"> ... </ul>	Чебурашка Крокодил Гена Шапокляк

 

start - Число, с которого будет начинаться нумерованный список.

<ol start="число">

  <li>Элемент списка</li>

</ol>

 
value - Число, с которого будет начинаться нумерованный список.

<li value="число">...</li>

Значения - Любое целое положительное число.

Значение по умолчанию  - 1

Пример использования тега <ul> и <ol>

 

<!DOCTYPE HTML >

<html>

<head>   <title>Тег UL</title> </head>

<body>

 

  <ul>

   <li type="square">Чебурашка</li>

   <li>Крокодил Гена</li>

   <li type="circle">Шапокляк</li>

  </ul>

 

  <ol>

    <li type="I" value="48">Чебурашка</li>

    <li type="I">Крокодил Гена</li>

    <li type="I">Шапокляк</li>

    <li type="1" value="48">Чебурашка</li>

    <li type="1">Крокодил Гена</li>

    <li type="i">Шапокляк</li>

    <li type="a">Крокодил Гена</li>

    <li type="A">Шапокляк</li>

  </ol>

 

</body>

</html>

Практические задания

Задание 1

1. Создать каталог (F7) на локальном диске в каталоге своей группы (students\группа\имя), для локальной работы с сайтом.
2. Запустить редактор phpDesigner 8 .
3. Создать главную страницу сервера (index.htm или index.html), на которой разместить: 
   Впишите пожалуйста сюда им задание
4. Подключиться к FTP серверу. Регистрацию бесплатного домена и хостинга, рекомендую осуществить по ссылке: http://api.hostinger.ru/redir/49644
5. Скопировать страницу на сервере (все содержимое локального каталога копируем на сервер) и просмотреть в браузере, проверить работоспособность всех ссылок и открывание всех картинок. Просмотреть можно по тому адресу, который вы зарегистрировали. Если ссылка или картинка не открывается, щелкнуть правой кнопкой мыши по этому объекту, выбрать в появившемся меню свойства объекта, проверить появившийся URL на наличие ошибок и исправить.

 
Задание 2

Создать таблицу, задать цвет фона строки таблицы и цвет текста при наведении на неё курсора мыши.

 

Задание 3

Сделать список 

 
К сдаче лабораторной предоставляются: работающие страницы на сервере. Также нужно знать все теги (их свойства), атрибуты тегов которые использовались в исходнике.