Создание сайта языком html – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

1. Контрольный тест на знание тегов HTML – 15 минут.

2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут.

Практические задания – Приложение 1.

Вопросы контрольного теста – Приложение 2.

Литература для учителя

1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.
2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.
3. Томас А.Пауэл “Web-дизайн. Наиболее полное руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005 г.
4. Браун М. “HTML 3.2. Наиболее полное руководство. В подлиннике”, БХВ-СПб, 1999
5. Захаркина В.В. “Основы создания Web-страниц”, методическое пособие, СПБ, 2000 г.
6. К.Ахметов, “Microsoft Internet Explorer 4.0 для всех”, изд-во Компьютер, Москва, 1997 г.

Литература для ученика

1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004 г.
2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург, БХВ, 2004г.

Перечень Internet-ресурсов

1. http://htmlbook.ru — Мержевич Влад. Краткий, но информационно насыщенный учебник по технологии создания сайтов, HTML, CSS, дизайну, графике и др.
2. http://html.manual.ru — Городулин Владимир. HTML-справочник.
3. http://winchanger.narod.ru — А. Климов. Краткий справочник по тегам HTML-языка.

Создание Web сайта на языке html (стр. 1 из 10)

Оглавление

Введение

1. Основные сведения

1.1 О языке html

1.2 Создание web сайта

1.3 Основные положения

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

1.5 Тэги тела документа

1.6 Список базовых тэгов html

2. Дополнительные сведения

2.1 Тэги списков

2.2 Гипертекстовые ссылки

2.3 Графика внутри документа

2.4 Добавление стилей в документ

2.5 Специальные тэги html

2.6 Html формы

2.7 Html фреймы

2.8 Html таблицы

2.9 Оптимизация графики для web

2.10 Основы css

3. Описание создания сайта

3.1 Подготовка

3.2 Создание главной страницы

3.3 Создание второй страницы

3.4 Создание страницы с описанием города

3.5 Страница с фотографиями

3.6 Страница с программами

3.7 Страница с благодарностями

Заключение

Список использованной литературы

Эта дипломная работа посвящена языку HTML. С помощью этого языка создаются файлы с расширением *.htmи *.html, являющиеся Web-страницами. Из них состоят сайты сети Интернет.

К дипломной работе прикреплён сайт, как пример того, что можно создать при помощи языка HTML.

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

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

1. Основные сведения

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

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

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

HTML-тэги могут быть условно разделены на две категории:

1. Тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.

2. Тэги, описывающие общие свойства документа, такие как заголовок или автор документа.

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

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

Например, HTML редакторы, такие, как «Netscape Navigator Gold» компании Netscape, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

1.3 Основные положения

Все тэги HTML начинаются с «<» (левой угловой скобки) и заканчиваются символом «>» (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-броузеру об использовании формата заголовка, а тэг </TITLE> — о завершении текста заголовка.

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

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

Внимание! Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-броузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тэгов <PRE> и </PRE>. Более подробно о тэгах <PRE> будет написано ниже.

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

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML>

…тело документа…

</HTML>

Заголовочная часть документа <HEAD>. Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>

<HEAD>

<TITLE>Список сотрудников</TITLE>

</HEAD>

…

Внимание! Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-броузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Заголовок документа <TITLE>. Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

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

<!—Это комментарий—>

Комментарии могут встречаться в документе где угодно и в любом количестве.

1.5 Тэги тела документа

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа <BODY>. Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>. Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий — 2, и т.д. Большинство броузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться броузером. Заголовок самого верхнего уровня имеет признак «1». Синтаксис заголовка уровня 1 следующий:

<h2>

Заголовок первого уровня

</h2>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx>

Заголовок x-го уровня

</Hx>,

где x — цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>.

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако броузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<PALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа. Вы можете центрировать все элементы документа в окне броузера. Для этого можно использовать тэг <CENTER>.

Проект «Создание веб-сайта на языке HTML»

Браузеры.

Текстовые документы, содержащие разметку на языке HTML (такие документы традиционно имеют расширение .html или .htm), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде. Такие приложения, называемые «браузерами» или «интернет-обозревателями», обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Google Chrome, Mozilla Firefox, Opera, Internet Explorer и Safari (см.: Браузер#Рыночные доли).

Версии.

RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября 1995 года;

HTML 3.2[1] — 14 января 1997 года;

HTML 4.0[2] — 18 декабря 1997 года;

HTML 4.01[3] (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года;

ISO/IEC 15445:2000[4] (так называемый ISO HTML, основан на HTML 4.01 Strict) — 15 мая 2000 года.

HTML 5[5] — в разработке. Конец разработки запланирован на 2014 год.

HTML 5.1 начал разрабатываться примерно 19 декабря 2012 года[6].

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

Версия 3 была предложена Консорциумом Всемирной паутины (W3C) в марте 1995 года и обеспечивала много новых возможностей, таких как создание таблиц, «обтекание» изображений текстом и отображение сложных математических формул, поддержка gif формата. Даже при том, что этот стандарт был совместим со второй версией, реализация его была сложна для браузеров того времени. Версия 3.1 официально никогда не предлагалась, и следующей версией стандарта HTML стала 3.2, в которой были опущены многие нововведения версии 3.0, но добавлены нестандартные элементы, поддерживаемые браузерами Netscape Navigator и Mosaic.

В версии HTML 4.0 произошла некоторая «очистка» стандарта. Многие элементы были отмечены как устаревшие и нерекомендованные (англ. deprecated). В частности, элемент font, используемый для изменения свойств шрифта, был помечен как устаревший (вместо него рекомендуется использовать таблицы стилей CSS).

В 1998 году Консорциум Всемирной паутины начал работу над новым языком разметки, основанном на HTML 4, но соответствующим синтаксису XML. Впоследствии новый язык получил название XHTML. Первая версия XHTML 1.0 одобрена в качестве Рекомендации консорциума Всемирной паутины 26 января 2000 года.

Планируемая версия XHTML 2.0 должна была разорвать совместимость со старыми версиями HTML и XHTML, но 2 июля 2009 года Консорциум Всемирной паутины объявил, что полномочия рабочей группы XHTML2 истекают в конце 2009 года. Таким образом, была приостановлена вся дальнейшая разработка стандарта XHTML 2.0[7].

Перспективы.

В настоящее время Консорциум Всемирной паутины разработал HTML версии 5. Черновой вариант спецификации языка появился в Интернете 20 ноября 2007 года.

Сообществом WHATWG (англ. Web Hypertext Application Technology Working Group), начиная с 2004 года, разрабатывается спецификация Web Applications 1.0, часто неофициально называемая «HTML 5», которая расширяет HTML (впрочем, имея и совместимый с XHTML 1.0 XML-синтаксис) для лучшего представления семантики различных типичных страниц, например форумов, сайтов аукционов, поисковых систем, онлайн-магазинов и т. д., которые не очень удачно вписываются в модель XHTML 2.

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

HTML — теговый язык разметки документов. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки
). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для элемента font). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:

Текст между двумя тегами — открывающим и закрывающим.

Здесь элемент содержит атрибут href, то есть гиперссылку.

А вот пример пустого элемента:

Регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет (в отличие от XHTML). Элементы могут быть вложенными. Например, следующий код:

  Этот текст будет полужирным,

  а этот — ещё и курсивным

даст такой результат:

Этот текст будет полужирным, а этот — ещё и курсивным

Кроме элементов, в HTML-документах есть и сущности (англ. entities) — «специальные символы». Сущности начинаются с символа амперсанда и имеют вид &имя; или NNNN;, где NNNN — код символа в Юникоде в десятичной системе счисления.

Например, © — знак авторского права (©). Как правило, сущности используются для представления символов, отсутствующих в кодировке документа, или же для представления «специальных» символов: & — амперсанда (&), < — символа «меньше» (), которые некорректно записывать «обычным» образом, из-за их особого значения в HTML.

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML hellip;>, которая обычно выглядит примерно так:

 quot;-//W3C//DTD HTML 4.01//EN»

     «http://www.w3.org/TR/html4/strict.dtd»>

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги заголовка () и тела () документа.

Варианты DOCTYPE для HTML 4.01

Строгий (Strict): не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated).

 quot;-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>

Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.

 quot;-//W3C//DTD HTML 4.01 Transitional//EN»

     «http://www.w3.org/TR/html4/loose.dtd»>

С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.

 quot;-//W3C//DTD HTML 4.01 Frameset//EN»

     «http://www.w3.org/TR/html4/frameset.dtd»>

Варианты DOCTYPE для HTML 5.

В HTML 5 используется только один вариант DOCTYPE:

Браузерные войны.

Основная статья: Война браузеров

В середине 1990-х годов основные производители браузеров — компании Netscape и Microsoft — начали внедрять собственные наборы элементов в HTML-разметку. Создалась путаница из различных конструкций для работы во Всемирной паутине, доступных для просмотра то в одном, то в другом браузере. Особенно большие трудности были при создании кросс-браузерных программ на языке JavaScript. Веб-мастерам приходилось создавать несколько вариантов страниц или прибегать к другим ухищрениям. На какое-то время проблема потеряла актуальность по двум причинам:

Из-за вытеснения браузером Internet Explorer всех остальных браузеров. Соответственно, проблема веб-мастеров становилась проблемой пользователей альтернативных браузеров.

Благодаря усилиям производителей других браузеров, которые либо следовали стандартам W3C (как Mozilla и Opera), либо пытались создать максимальную совместимость с Internet Explorer.

На современном этапе можно констатировать рост популярности браузеров, следующих рекомендациям W3C (это Mozilla Firefox и другие браузеры на движке Gecko; Safari, Google Chrome, Opera и другие браузеры на движке WebKit). Доля Internet Explorer на данный момент составляет менее 30 %.

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

Обратите внимание!

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

Девятая загадочная планета Солнечной системы

Владимир Высоцкий. «Песня о друге» из кинофильма «Вертикаль»

Компас своими руками

И тут появился изобретатель

Крутильный маятник своими руками

Создание Web сайта на языке html (стр. 3 из 10)

Отдел маркетинга

Данный отдел занимается продвижением продуктов и услуг

Финансовый отдел

Данный отдел занимается всеми финансовыми операциями

Отдел кадров

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

2.2 Гипертекстовыессылки

Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее — ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

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

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

URL. HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:

method://machine-name/path/foo.html

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола:

http://www.softexpress.com/index.html

Uniform Resource Locator имеетследующийформат:

method://servername:port/pathname#anchor

ОпишемкаждыйизкомпонентовURL:

METHOD. Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:

file:

чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html — отображает файл index.html из каталога /home/alex на пользовательской машине

http:

доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: http://www.softexpress.com/ — доступ к Home-странице компании SoftExpress

ftp:

запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename

mailto:

активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:[email protected] — активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если броузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)

telnet:

обращение к службе telnet

news:

вызов службы новостей, если броузер ее поддерживает. Например: news:relcom.www.support

SERVERNAME. Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com — полное сетевое имя сервера фирмы СофтСервис.

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

PORT. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то «по умолчанию» используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

PATHNAME. Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe

В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту — /cgi-win/ — в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).

#ANCHOR. Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство броузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна броузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тэга NAME, как это будет описано далее.

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

<A HREF=»URL»> текст-который-будет-подсвечен-как-ссылка </A>

Тэг <A HREF=»URL»>открывает описание ссылки, а тэг </A> — закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-броузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается броузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа:

Для получения примера смотри <A HREF=»http:/www.ruswebmasters.com/index.htm>страницу </A>

Для получения примера смотри страницу

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

Для создания такой ссылки необходимо выполнить следующие шаги:

1. Создайте маркер раздела. Синтаксис данного маркера следующий:

<A NAME=»named_anchor»> Текст-который-отобразится-в-первой-строке-броузера </A>

2. Создайте ссылку на данный маркер:

<A HREF=»#named_anchor»> Текст</A>

Например:

<p><b>Списокразделов</b></p> <ul> <li><a href=»#ex1″>Раздел1</a></li> <li><a href=»#ex2″>Раздел2</a></li> </ul> <p><a name=»ex1″></a>Раздел1</p> <ul> <p>Текстраздела1</p> </ul> <p><a name=»ex2″></a>Раздел2</p> <ul> <p>Текстраздела2 <br></p>

Список разделов

o Раздел 1

o Раздел 2

Раздел 1

Текст раздела 1

Раздел 2

Текст раздела 2

Символы «#ex1» сообщает вашему броузеру, что необходимо найти в данном HTML-документе маркер с именем «ex1».

Когда пользователь щелкнет мышью на строке «Раздел 1», броузер перейдет сразу к разделу 1.

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

2.3 Графикавнутридокумента

Одна из наиболее привлекательных черт Web — возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG…ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

Существует два способа использования графики в HTML-документах. Первый — это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа. Это наиболее используемая техника при проектировании документов, называемая иногда «inline image». Синтаксис тэга:

<IMG SRC=»URL» ALT=»text» HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>

Опишем элементы синтаксиса тэга:

URL:

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает броузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом броузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством броузеров.

Создание Web сайта на языке html (стр. 5 из 10)

GET: Информация из формы добавляется в конец URL, который был указан в описании заголовка формы. Ваша CGI-программа (CGI-скрипт) получает данные из формы в виде параметра переменной среды QUERY_STRING. Использование метода GET не рекомендуется.

POST: Данный метод передает всю информацию о форме немедленно после обращения к указанному URL. Ваша CGI-программа получает данные из формы в стандартный поток ввода. Сервер не будет пересылать вам сообщение об окончании пересылки данных в стандартный поток ввода; вместо этого используется переменная среды CONTENT_LENGTH для определения, какое количество данных вам необходимо считать из стандартного потока ввода. Данный метод рекомендуется к использованию.

ACTION: ACTION описывает URL, который будет вызываться для обработки формы. Данный URL почти всегда указывает на CGI-программу, обрабатывающую данную форму.

Тэги формы:

TEXTAREA:

Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной строки информации (свободный текст). Вотпримериспользованитэга<TEXTAREA>:

<TEXTAREA NAME=»address» ROWS=10 COLS=50>

Москва,

Дмитровкое шоссе,

д.9Б, офис 448

</TEXTAREA>

Атрибуты, используемые внутри тэга <TEXTAREA> описывают внешний вид и имя вводимого значения. Тэг </TEXTAREA> необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:

NAME — имя поля ввода

ROWS — высота поля ввода в символах

COLS — ширина поля ввода в символах

Если вы хотите, чтобы в поле ввода по умолчанию выдавался какой-либо текст, то необходимо вставить его внутри тэгов <TEXTAREA> и </TEXTAREA>.

INPUT:

Тэг <INPUT> используется для ввода одной строки текста или одного слова. Атрибуты тэга:

CHECKED — означает, что CHECKBOX или RADIOBUTTON будет выбран.

MAXLENGTH — определяет количество символов, которое пользователи могут ввести в поле ввода. При превышении количества допустимых символов броузер реагирует на попытку ввода нового символа звуковым сигналом и не дает его ввести. Не путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле осуществляется скроллинг. По умолчанию значение MAXLENGTH равно бесконечности.

NAME — имя поля ввода. Данное имя используется как уникальный идентификатор поля, по которому, впоследствии, вы сможете получить данные, помещенные пользователем в это поле.

SIZE — определяет визуальный размер поля ввода на экране в символах.

SRC — URL,. указывающий на картинку (используется совместно с атрибутом IMAGE).

TYPE — определяет тип поля ввода. По умолчанию это простое поле ввода для одной строки текста. Остальные типы должны быть явно указаны:

CHECKBOX:Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.

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

IMAGE:

Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме CGI-программа. Значения, присвоенные переменной NAME будут выглядеть так — создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением .x в конце имени. В эту переменную будет помещена X-координата точки в пикселях (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в NAME и добавленным .y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом <IMG>.

PASSWORD:

То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается броузером на экране.

RADIO:

Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE=»RADIO» с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.

RESET:

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

SUBMIT:

Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.

TEXT:

Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).

VALUE — присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).

Меню выбора в формах. Под меню выбора в формах понимают такой элемент интерфейса, как LISTBOX. Существует три типа тэгов меню выбора для форм:

Select — пользователь выбирает одно значение из фиксированного списка значений, представленных тэгами OPTION. Данный вид представляется как выпадающий LISTBOX.

Select single — то же самое, что и Select, но на экране пользователь видит одновременно три элемента выбора. Если их больше, то предоставляется автоматический вертикальный скроллинг.

Select multiple — позволяет выбрать несколько элементов из LISTBOX.

SELECT: Тэг SELECT позволяет пользователю выбрать значение из фиксированного списка значений. Обычно это представлено выпадающим меню.

Тэг SELECT имеет один или более параметр между стартовым тэгом <SELECT> и завершающим </SELECT>. По умолчанию, первый элемент отображается в строке выбора. Вот пример тэга <SELECT>:

<FORM>

<SELECT NAME=group>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

</SELECT>

</FORM>

SELECT SINGLE: Тэг SELECT SINGLE — это то же самое, что и Select, но на экране пользователь видит одновременно несколько элементов выбора (три по умолчанию). Если их больше, то предоставляется автоматический вертикальный скроллинг. Количество одновременно отображаемых элементов определяется атрибутом SIZE. Пример:

<FORM>

<SELECT SINGLE NAME=group SIZE=4>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

SELECTMULTIPLE: Тэг SELECT MULTIPLE похож на тэг SELECT SINGLE, но пользователь может одновременно выбрать более чем один элемент списка. Атрибут SIZE определяет количество одновременно видимых на экране элементов, атрибут MULTIPLE — максимальное количество одновременно выбранных элементов. Пример:

<FORM>

<SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</SELECT>

</FORM>

Если выбрано одновременно несколько значений, то серверу передаются соответствующее выбранному количество параметров NAME=VALUE с одинаковыми значениями NAME, но разными VALUE.

Отправление файлов при помощи форм. Формы можно использовать для отправки не только небольших информационных сообщений ввиде параметров, а также и для отправки файлов.

Внимание! Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов!

Например:

<FORM ENCTYPE=»multipart/form-data» ACTION=»url» METHOD=POST> Отправитьданныйфайл: <INPUT NAME=»userfile» TYPE=»file»> <P> <INPUT TYPE=»submit» VALUE=»Отправитьфайл»> </FORM>.

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

· Каждый фрейм имеет свой URL, что позволяет загружать его независимо от других фреймов

· Каждый фрейм имеет собственное имя (параметр NAME), позволяющее переходить к нему из другого фрейма

· Размер фрейма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрещено указанием специального параметра)

· Данные свойства фреймов позволяют создавать продвинутые интерфейсные решения, такие как:

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

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

· Создавать окна результатов запросов, когда в одном фрэйме находится собственно запрос, а в другом результаты запроса

· Создавать формы типа «мастер-деталь» для WEB-приложений, обслуживающих базы данных.

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

<HTML> <HEAD>…</HEAD> <FRAMESET>…</FRAMESET> </HTML>

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

+Представим общий синтаксис фреймов:

<FRAMESETCOLS=»value» | ROWS=»value»>

<FRAME SRC=»url1″> <FRAME …> …

</FRAMESET>

Общий контейнер FRAMESET описывает все фреймы, на которые делится экран. Вы можете разделить экран на несколько вертикальных или несколько горизонтальных фреймов. Тэг FRAME описывает каждый фрейм в отдельности. Рассмотрим более детально каждый компонент.

Создание Web сайта на языке html (стр. 10 из 10)

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

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

3.3 Создание второй страницы

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

После набора 17 страниц книги «КУСТАНАЙ: ВЧЕРА, СЕГОДНЯ, ЗАВТРА», содержащих нужный материал, страница с историей была готова.

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

На этом и третья страница была готова.

В четвёртой странице сохранилась та же структура, что и в первых трёх, просто вместо основного текста необходимо было выложить фотографии города. Объём каждой фотографии составлял, в среднем, 70 Кб. Если на одной странице выложить их все, то её загрузка заняла бы огромное время, а создавать несколько страниц было нельзя. Для решения проблемы я с помощью Фотошопа сделал уменьшённые копии каждой фотографии и вставил их в таблицу. Под каждой маленькой фотографией я сделал ссылку, ведущую на её увеличенную копию. Всего на странице представлено 39 фотографий, объём каждой уменьшенной фотографии составил не более 4 Кб, поэтому страница должна загружаться меньше, чем за минуту. А если пользователь захочет скачать все фотографии, то нет необходимости закачивать их по одной – имеется возможность скачки ZIP-архива, содержащего все фотографии.

Таким образом, была завершена работа над четвёртой страницей моего сайта.

3.6 Страница с программами

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

Над последней страницей я работал около 15 минут, так она содержала просто благодарности всем, кто помогал мне создать сайт. Благодарности представлены в виде маркированного списка.

Заключение

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

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

Спасибо за прочтение!

Список использованной литературы

1. Алленова Наталья – Самоучитель по html.

2. Статья в Интернете www.akdi.ru/INTERNet/html32/akdi.htm

3. Сайт www.ic.vrn.ru/

4. Сайт www.arachnoid.com/arachnophilia

5. Сайт www.rzn62.narod.ru

6. Сайт www.mysite.hut.ru

7. Статья “Тезисы выступления акима Костанайской области”

8. Статья География Казахстана”

9. Статья “Казахстан 2030”

10. Личные конспекты

HTML Основы

В данной категории Вы сможете познакомиться с множеством тегов HTML. Вы убедитесь, что HTML — это просто!

В ниже приведённых статьях имеется вся информация, которая нужна по этому языку разметки.

Ознакомившись с данными материалы, Вы сможете сразу начать создавать свой сайт и начать зарабатывать на нём!

Прочитав статьи по основам HTML, Вы узнаете:

1) О структуре HTML-документа.

2) Как добавлять ссылки на HTML-страницы.

3) Как добавлять изображения на HTML-страницы.

4) О способах изменения внешнего вида текста в HTML.

5) Как добавлять списки на HTML-страницы.

6) О способах выравнивания элементов в HTML.

7) Как создавать формы в HTML.

8) Как создавать таблицы в HTML.

9) Как выбрать цвет в HTML.

10) Как установить Favicon на сайт.

11) Как вставить дополнительные пробелы в HTML.

12) Как установить страницу 404.

13) Как сделать редирект на HTML.

14) Как вывести спецсимволы в HTML.

15) Зачем нужен DOCTYPE.

16) Какая разница между HTML и XHTML.

17) Как добавить видео на сайт.

18) О проверке сайта в разных браузерах.

19) О значение валидного HTML-кода.

20) Как проверить статус ICQ через HTML.

21) Что такое мета-теги в HTML.

22) Какие имеются мета-теги для страницы в HTML.

23) Какие имеются мета-теги для браузера в HTML.

24) Какие имеются мета-теги для поисковых систем в HTML.

25) Что такое кодировка.

26) Что лучше: блочная вёрстка или табличная.

27) Что делать, если HTML-файл открывается как TXT.

28) Как вставить аудио на сайт.

29) Почему Dreamweaver — это плохо.

30) Как сделать дизайн для сайта.

31) Что такое вёрстка.

32) Что такое сайт под ключ.

33) Как поставить горячую клавишу на ссылку.

34) Как сделать кпопку «Наверх».

35) Об использовании тега optgroup в HTML.

36) Почему не отображается картинка на сайте.

37) Почему фреймы — это плохо.

38) Стоит ли использовать Flash при создании сайта?

39) Какова структура блочной вёрстки?

40) Как открыть ссылку в новом окне с валидным кодом?

41) Как запретить посетителю сохранять картинки?

42) Как запретить посетителю копировать текст?

43) Стоит ли делать вёрстку под старые браузеры.

44) Как сделать мобильную версию сайта.

45) Как поменять кодировку на сайте.

46) Как сделать автообновление страницы.

47) Как сделать комментирование на HTML-сайте.

48) Как проверить сайт в разных версиях IE.

49) Как установить радио на сайт.

50) Какая структура у двухколоночного сайта.

51) Что такое SVG? Основы.

52) Что такое SVG? Стилизуем объекты.

53) Что такое SVG? Пишем текст.

54) Что такое SVG? Анимируем SVG объекты.

55) Что такое SVG? Поддержка старых браузеров.

56) Зачем нужен тег ruby в html.

57) Язык разметки Markdown.

58) Как быстро создать шаблоны электронной почты на HTML.

59) Как сделать красивые страницы ошибок.

60) Зачем нужен HTML тег code?.

61) Как сделать видео фон на сайте.

62) Красивое оформление HTML/CSS кода.

63) Верстка email писем.

64) Атрибут srcset, Retina, WebP. Какая связь?.

Все материалы по основам HTML