Разработка сайта в html

Министерство общего и профессионального образования  Свердловской области

ГБОУ СПО «Красноуфимский педагогический колледж»

Учебное - методическое пособие по создание простейшего сайта для начинающих

г. Красноуфимск

2011 г.

Учебное - методическое пособие по создание простейшего сайта для начинающихся

/Красноуфимский педагогический колледж. Красноуфимск, 2011.

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

Данные рекомендации могут быть использованы всеми.

Составитель: Космакова С.Ю. студентка 301 группы специальности 050202 «Информатика».

Руководитель: Игошев А.Д.,Казакова О.С.

Содержание

Введение …………………………………………………………………..4

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

Форматирование текста …………………………………………………10

Рисунки на Web-странице ……………………………………………….12

Гиперссылки ……………………………………………………………...14

Таблицы …………………………………………………………………...16

Заключение ………………………………………………………………..21

Введение

HyperText Markup Language (HTML) - язык разметки гипертекста.

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

Отдельный документ, выполненный в формате HTML, называется:

- HTML-документом;

- Web-документом;

- Web-страницей. 

Такие страницы как правило имеют расширение htm или html.

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

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

Каждая HTML-страница имеет свой уникальный URL-адрес в интернете.

Структура URL-адреса

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

Типичный URL для WWW имеет вид:

http://www.название.домен/имя файла

Здесь название - это часть адреса, который часто употребляется для обозначения владельца сайта, а домен - обозначение крупного "раздела" Интернета: страны (ru), области деятельности (com) и т.д. Например, адрес гипертекстового файла works.htm в Интернете:

http://www.rambler.ru/bisness/works.htm

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

Терминология

Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать из определенным образом. Любая Web-страница представляет собой наор элементов. Одна из основных идей гипертекста возможность вложения элементов.

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

Пример: элемент, содержащий некоторый текст, ограничен начальным тегом (маркером) <P> и конечным тегом (маркером) </p>. Т.е. текст помещен между тегами как в контейнер. Здесь же можно увидеть, как осуществляется возможность вложения элементов. Тег <Font> вложен внутрь тега <P>, поэтому конечный тег </font> стоит перед </p>. В данном примере тег <P> указывает на то, что текст является отдельным абзацем, а тег <Font> задает формат шрифта, в нашем случае зеленый цвет шрифта.

<P> <font color="green">Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.</font> </p>

В результате тагого форматирования на экране компьютера мы увидим текст зеленого цвета в отдельном абзаце:

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

Атрибут - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартный или произвольный. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.

<P align="center"> Этот текст будет выровнен по центру экрана </p>

В данном примере атрибут align (выравнивание) расположен внутри тега <P>, следовательно он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана. На экране мы увидим:

Этот текст будет выровнен по центру экрана.

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

Ниже приведена структура типичного Web-документа.

Правила синтаксиса

1. Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице.

<HTML>

<HEAD>

<TITLE>.....</title>

</head>

<BODY>

..................

</body>

</html>

2. Всегда использовать конечные теги (не забывать </p>, </h1>, </table> и др.).

3. Не нарушать правила вложения тегов.

Правильно: <H1>Заголовок крупный <H2> Заголовок поменьше </h2> </h1>

Не правильно:<H1>Заголовок крупный <H2> Заголовок поменьше </h1> </h2>

4. Любая полезная информация должна находится между начальным и конечным тегами, указывающими ее формат.

5. Все атрибуты располагаются в начальном теге.

6. Принято начальные теги писать ЗАГЛАВНЫМИ буквами (<H1>), а конечные строчными буквами (</h1>).

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

Рисунки на WEB-страничке

<IMG> - элемент для создания ссылки на графический файл (image). Он не содержит конечного тега - вся необходимая информация задается при помощи атрибутов. Этот элемент является универсальным: с его помощью можно использовать изображения в гиперссылках, вставлять картинки в таблицы, просто размещать рисунки на Web-странице, решать задачи дизайна и т.д.

Необходимым атрибутом является src - указатель на файл графики:

src="Ссылка на файл".

Например:

<IMG src="bos2.gif> - обычный рисунок

<IMG src="pantera.gif"> - анимированный рисунок

Очень полезным атрибутом является alt. Он позволяет выводить текст в тех местах, где должны располагаться рисунки. Страница может загружаться достаточно долго, и пока графические файлы на подходе, пользователь должен видеть, какие изображения он сможет получить.

Например:

<IMG src="bos2.gif alt="Портрет маленького джентельмена" >

<IMG src="pantera.gif" alt="Большая черная кошка, которая гуляет сама по себе">

Высоту и ширину области, в которой демонстрируется рисунок, задают при помощь атрибутов height - высота и width - ширина.

Например:

<IMG src="bos2.gif" width="76" height="121">

<img src="bos2.gif" width="176">

Обратите внимание, что во втором случае изменен размер рисунка (мы изменили ширину, высота будет изменена автоматически). При этом происходит потеря качества изображения, поэтому желательно задавать эти атрибуты в соответствии с реальными размерами рисунка.

Атрибут border задает рамку вокруг объекта. border="2' - ширина рамки задается в пикселах.

Например:

<IMG src="pantera.gif" border="2" alt="Большая черная кошка, которая гуляет сама по себе">

Полностью тег IMG должен выглядеть следующим образом:

<IMG src="bos2.gif" width="76" height="121" alt="Портрет маленьгого джентельмена">

Если вы хотите использовать рисунок в качестве обоев странички (background), то в теге <BODY> используем этот атрибут с указанием адреса рисунка обоев.

Например:

<BODY background="wood.jpg">

Гиперссылки

<A> </a> - один из самых важных элементов языка, обеспечивающий создание гиперссылок. Чаще всего используется такой шаблон:

Произвольный текст <A href="адрес ссылки">Текст для щелчка </a>

Например, так выглядит гиперссылка в тексте:

Если вы хотите вернуться к материалам урока "Гиперссылки", то вам <A href="links.htm">сюда.</a>

А так задается шаблон в том случае, когда видимая часть гиперссылки представляет собой рисунок:

<A href="Адрес ссылки"> <IMG src="Ссылка на рисунок"> </a>

Например:

Чтобы вернуться к уроку "Гиперссылки" нажмите на кнопку <A href="links.htm"><IMG src="knopka.gif" width="112" height="50"></a>

Внутри тега <BODY> используются атрибуты link - задает цвет ссылок на всей Web-странице, vlink - задает цвет посещенных ссылок, alink - задает цвет активных ссылок (цвет появляется при нажатии мыши).

Пример:

<BODY link="0000FF" vlink="CC0066" alink="FF0000">

По умолчанию используется ссылка на файлы текущей папки (той, где расположен файл Web-страницы). В этом случае просто указывается имя файла, например: page2.htm, photo35.gif и т.д.

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

href="./Папка/файл.тип

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

href="../Папка/файл.тип

Если ссылка указывает на какой-либо Web-ресурс, то она выглядит следующим образом, например:

href="http://www.netscape.com"

Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например:

<A href="mailto:goncharov@online.ru>Алексей Гончаров</a>

Таблицы

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

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

<TABLE> </table> - внешний элемент талицы.

<TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т.к. строка заканчивается там, где начинается следующая строка.

<TD> </td> - элемент, задающий ячеку таблицы. Конечный тег также можно не использовать.

Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:

Ширину таблицы можно задавать точно в пикселах или в процентном отношении к ширине страницы в окне броузера.

Например, если нам нужно здать таблицу определенного размера, то мы укажем:

<TABLE width="500">

<TR>

<TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.</td>

</tr>

</table>

Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы как 100%.

<TABLE width="100%">

<TR>

<TD> Ширина этой таблицы 100%.</td>

<TD> и она состоит из одной строки и двух столбцов </td>

</tr>

</table>

Для всей таблицы может быть задан цвет фона: bgcolor="Цвет" или bgcolor="#RRGGBB", например:

<TABLE width="100%" bgcolor="#00CC99">

<TR>

<TD> Ширина этой таблицы 50%.</td>

</tr>

<TR>

<TD> и она состоит из двух строк и одного стобца </td>

</tr>

</table>

Можно задавать отдельно цвет ячеек таблицы.

table width="600" border="1" cellspacing="0" cellpadding="5" align="center">
<tr>
<td bgcolor="#00FFFF"></td>
<td bgcolor="#CCFF00"></td>
<td bgcolor="#FF6633"></td>
</tr>
<tr>
<td bgcolor="#0000FF"></td>
<td bgcolor="#33FF66"></td>
<td bgcolor="#FF00FF"></td>
</tr>
<tr>
<td bgcolor="#CCCCCC"></td>
<td bgcolor="#9933FF"></td>
<td bgcolor="#FFFFCC"></td>
</tr>
</table>

Шириной боковой грани управляет атрибут border. Можно задать ширину боковой грани таблицы в пикселах.

<TABLE width="100%" bgcolor="#00CC99" border="3" >

<TR>

<TD> </td>

<TD> Ширина этой таблицы 300 пикселов</td>

<TD> </td>

</tr>

<TR>

<TD> и она состоит из двух строк и трех столбцов</td>

<TD> </td>

<TD></td>

</tr>

</table>

Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:

<TABLE width="100%" bgcolor="#00CC99" border="0" >

<TR>

<TD> </td>

<TD> Ширина этой таблицы 300 пикселов</td>

<TD> </td>

</tr>

<TR>

<TD> и она состоит из двух строк и трех столбцов</td>

<TD> </td>

<TD></td>

</tr>

</table>

Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:

left - выравнивание влево;

right - выравнивание вправо;

center - центрирование.

Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:

top - выравнивание по верхнему краю ячейки

center - выравнивание по центру

baseline - выравнивание по первой строке.

<table width="100%" border="1" cellspacing="0" cellpadding="5" align="center">
<tr> <td width="257">Выравнивание по горизонтали</td>
<td width="233" align="center">
По центру
</td>
<td width="217" align="left">
По левому краю
</td>
<td width="246" align="right">
По правому краю
</td>
</tr>
<tr>
<td width="257" height="112">Выравнивание по вертикали</td>
<td width="233" height="112" valign="top">По верхнему краю</td>
<td width="217" height="112" valign="middle">По центру</td>
<td width="246" height="112" valign="baseline">По нижнему краю</td>
</tr>
</table>

Заключение

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

Учебник по HTML на построен таким образом, чтобы материал был доступен практически любому читателю. Поэтому в нем рассматриваются вопросы непосредственного форматирования документов, оставляя за рамками методы современного построения документов, основанных на стилевом оформлении. Опыт обучения слушателей методам составления разнообразных документов показывает, что на начальном этапе не удается сразу пояснить необходимость применения современных методов. Действительно, человеку, который составляет свой первый документ в текстовом редакторе, невозможно объяснить, зачем, например, нужно применять стили или шаблоны вместо конкретного указания размеров шрифта и его названия.

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