Быстрый поиск

Лабораторная работа: Создание сайта на языке HTML

Министерство образования РФ

МОУ «Брянский городской лицей № 27 имени героя Советского Союза И. Е. Кустова»

Тема

«Создание сайта на языке HTML»

Выполнила

ученица 10 «Б» класса

Артюхова А.В

Проверила

Зинакова С.А

Брянск 2008г.

Вступление

Internet, WWW (World Wide Web, Всемирная Паутина), intranet, extranet все эти вещи и в деловой жизни, и в обиходе становятся столь же привычными, как телефон. Бесчисленное множество новых технологий, вызванных к жизни их распространением, прочно входит в наш быт, изменяя наш образ мысли и деятельности. Одно из новейших направлений — сети intеrnet, внутрикорпоративные сети, построенные с использованием Internet-технологий — уже само успело дать потомство в виде extranet, сетей, образуемых несколькими связанными сетями intranet для обеспечения совместного доступа к информации.

Как всегда бывает во время бума, тысячи компаний дышат в затылок друг другу, стремясь не упустить своей кусок пирога. На рынке появились десятки замечательных продуктов для Internet, но часто не хватает времени или опыта для того, чтобы разобраться в них, изучить их сильные и слабые стороны и принять на вооружение.

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

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

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

Обычно сайт имеет титульную страницу, которая является «визитной карточкой» этого сайта. Она создаёт впечатление всего сайта.

Интернет и сайты сегодня в жизни всего человечества играют огромную роль. Сайт представляет предприятие или компанию на «мировой арене» тем самым, делая её известной даже на другом конце Земли. Интернет- это двигатель прогресса, экономики и политики. Люди могут общаться, не выходя из дома или офиса, даже если их разделяют тысячи километров.

Я выбрала темой своей научной работы именно создание сайта, потому что сегодня все больше и больше людей выбирают современные Интернет – технологии. К тому же в эпоху современных технологий гораздо проще найти нужную информацию во всемирной паутине, чем искать её в архивах и библиотеках. Также некоторые отрасли науки очень быстро изменяются и поэтому даже новые книги могут содержать уже устаревшую информацию. А еще один компьютер, в котором находятся книги и странички сайтов, занимает гораздо меньше места, чем шкафы с книгами и распечатками.

Часть 1. Теория

Гипертекст-это текст, в котором имеются ссылки для автоматического перехода на другие тексты - гиперссылки, а язык HTML (Hyper Text Marcup Language) - это независимый от платформ язык разметки текста. Документы размеченные при помощи этого языка визуализируются браузерами конечных пользователей в большинстве случаев одинаково, благодаря тому, что "понимают" и правильно обрабатывают структурные элементы HTML. Исходный код представляет собой текст, между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны, а виден результат их воздействия на документ.

Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер. Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль. Для создания документа HTML необходимо создать текстовый файл с содержимым, вставить нужные тэги и после внесения изменений текстовый файл сохраняется с расширением .htm или .html.

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

Одним из самых популярных визуальных редакторов является Netscape Composer, входящий в состав пакетов Netscape Navigator Gold и Netscape Communicator. Популярностью также пользуются пакеты Microsoft FrontPage и NetObjects Fusion.

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

В WWW существует негласное правило, согласно которому первый файл, загружаемый браузером с какого-либо сервера по умолчанию, должен называться index.html. Таким образом, если вы явно не указываете имя документа, который вам требуется, а пишете только имя сервера, например www.yahoo.com, автоматически будет загружен файл index.html, находящийся на этом сервере, т. е. фактически будет выполнена команда http://www.yahoo.com/index.html.

Основные теги для создания сайтов

Тэг <HTML> определяет границы документа HTML, ему соответствует конечный тэг </HTML>. Между этими двумя тэгами располагается собственно весь документ.

А уже непосредственно документ, обозначенный тэгами <HTML> и </HTML> дополнительно делится на голову - <HEAD></HEAD> и тело - <BODY></BODY> <head></head> - заголовок страницы, а также служит только для формирования общей структуры документа, задавая его глобальные свойства. Информация находящаяся в этом разделе документа является служебной и необходима программе броузеру пользователя.

При помощи <title> </title> создается краткое однострочное название страницы, которое выводится в заголовке окна броузера, рядом с названием самого броузера. Если титул опускается разработчиком страницы, броузер попытается сгенерировать его из названия файла. Рекомендуется делать длину титула минимальной и одновременно с этим информативной.

Элемент <BODY> предназначается для выделения той части документа, которая будет визуализирована для пользователя. Он имеет как начальный, так и конечный теги. Начальный тег <BODY> может иметь несколько атрибутов.

Вложенные атрибуты элемента <BODY>:

BACKGROUND

Атрибут задает графическое изображение, которое как черепица заполнит фон документа.Файл с изображением должен быть сохранен в формате GIFилиJPEG.

Вданном случае файл с изображением фона лучше размещать в том же каталоге, что и сам файл, тогда (URL) и (путь) указывать не нужно.

BGCOLOR

Этот атрибут задает цвет фона документа при помощи шеснадцатеричных значений интенсивности цветов RGB , или при помощи строчного литерала,соответсвующего названию цвета.

TEXT

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

LINK

Этот атрибут задает цвет гиперссылки, в большенстве броузеров он задан по умолчанию темно синим.

ALINK

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

VLINK

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

Организация в списки

Элемент <OL>

Элемент <OL> используется с целью задания нумерованых списков, имеет атрибуты type=1, или A, или a, или I, или i для задания вида нумерации и start для указания с какого индекса начинается нумерация списка. Элемент <OL> включает в себя дополнительный элемент <LI>, который задает элементы списка.

Элемент <UL>

Элемент <UL>, по сути является аналогом <OL> без дополнительных элементов <LI>, он используется с целью задания ненумерованых списков, имеет атрибут type=circle,square, или disc для задания вида маркера. Элемент <UL> включает в себя дополнительный элемент <LI>, который задает элементы списка.

Элемент <DL>

Элемент <DL>используется с целью задания словарей, глоссариев и прочих перечней. Элемент <DL> включает в себя дополнительные элементы <DT> и <DD>, которые обозначают соответственно термин и определение.

Элемент <MENU>

Элемент <MENU> используется с целью создания списков по логическому определению, такие списки могут связываться с другими элементами документа логически.

Элемент <DIR>

Элемент <DIR> используется с целью создания списков по логическому определению, такие списки могут связываться с другими элементами документа логически.

Гиперссылки

Гиперссылка используется с целью создания ссылок на другие элементы документа или даже на другие документы, такие ссылки являют собой основную причину ошеломляющей популярности пространства World Wide Web , где пользователь может легко перескочить с одного фрагмента текста на другой или со страницы на страницу, не задавая явным образом URL последних. Элемент выполняет два действия: задает имя ссылки и задает ссылку на имя. Имя ссылки броузер автоматически выделяет другим цветом и подчеркивает.

Name

Для задания имени используется атрибут name, который задает привязку ссылки в тексте, на которую и будет производиться ссылка.
<A name=имя> необязательный текст </A >

Href

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

Вставка изображения

Элемент <IMG> используется для вставки в документ графического изображения.

Под графическим изображением подразумеваются: маленькие пиктограммы, рисунки, графические объекты и карты изображений. Кроме того элемент <IMG> поддержевает различные атрибуты, определяющие расположение изображения относительно окружающего текста и содержания Web-страницы в целом.

Src

Этот атрибут указывает на фаил графики, задавая его адрес.

Align

Этот атрибут задаёт расположение рисунка в окне и его выравнивание. Он может принимать значения:

Bottom-по нижнему краю

Top-по верхнему краю

Left-по левому

Right-по правому

Middle-по центру.

Таблицы

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

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

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

Элемент <TABLE> может иметь атрибуты

Bgcolor

Этот атрибут задает фоновый цвет ячейкам, которые не обладают собственным атрибутом bgcolor или background.

Background

Этот атрибут задает фоновый рисунок ячейкам, которые не обладают собственным атрибутом bgcolor или background.

Bordercolor

Этот атрибут задает цвет рамки, используется только с атрибутом border.

<TABLЕ border=число bordercolor=цвет >

Align

Этот атрибут задает задает режим горизонтального выравнивания таблицы на странице, он может принимать значения left, center и right .

Формы

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

Часть 2. Практика