Создание документов в HTML. Создание Web-страниц. Изучение языка HTML Веб страница документ html представляет собой

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

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

Веб-с айт (от англ. website : web - «паутина, сеть» и site - «место», буквально «место, сегмент, часть в сети») - совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённая под одним адресом (доменным именем или IP-адресом).

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

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

Программа, демонстрирующая веб-страницу, называется веб-браузер.

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.

HTML позволяет:

· форматировать текст;

· включать в документ изображения, мультимедиа;

· с помощью этого языка создаются гипертекстовые ссылки на другие Web-страницы.

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

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение «Блокнот».

Обычно файл Веб-страницы имеет расширение.html или.htm.

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

Для того, чтобы просмотреть HTML-страницу, достаточно просто ввести ее URL-адрес в строке адреса Web-браузера, а затем следовать по гиперссылкам. Но именно в этом и заключается основная проблема - как узнать адрес страницы? Чаще всего бывает так, что известно то, что необходимо найти, но неизвестно где именно искать. Для решения этой проблемы существуют специальные поисковые системы. С точки зрения пользователя, поисковая система - это обычный сайт на главной странице которого находятся разбитые по рубрикам («Спорт», «Бизнес», «Компьютеры» и т.п.) ссылки на другие сайты. Кроме того, поисковая система позволяет пользователю ввести несколько ключевых слов и возвращает ссылки на страницы, содержащие эти ключевые слова.

Веб - сайт

Веб-сайт (англ. Website, от web - паутина и site - "место") - в компьютерной сети объединённая под одним адресом совокупность документов частного лица или организации. По умолчанию подразумевается что сайт располагается в сети Интернет. Все веб-сайты Интернета в совокупности составляют Всемирную паутину. Для прямого доступа клиентов к веб-сайтам на серверах был специально разработан протокол HTTP. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят "своя страничка в Интернет", то подразумевается целый веб-сайт или личная страница в составе чужого сайта. Кроме веб-сайтов в сети Интернет так же доступны WAP-сайты для мобильных телефонов.

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

В большинстве случаев в Интернете одному веб-сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы) чтобы логически отделить разные виды предоставляемых услуг (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Гугла на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/.

HTML (HyperText Markup Language) - это специальный язык форматирования текстовых документов (его еще называют языком разметки документов - программа просмотра WWW документов). HTML представляет собой достаточно простой набор команд, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу отдельно подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

HTML не задает конкретные и точные атрибуты форматирования документа, как, например, Microsoft Word. Конкретный вид документа окончательно определяет только программа-браузер на Вашем компьютере. Необходимость именно такого подхода связана с разнородностью аппаратного и программного обеспечения компьютеров, подключенных к Интернет. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

С точки зрения пользователя Windows, Web-страница – это просто файл типа *.htm или *.html, находящийся на сервере Интернет, в локальной сети или на жестком диске Вашей машины.

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

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

Когда вы загружаете из WWW хоть какой документ, то его текст в окне вашего браузера отображается в отлично отформатированном, комфортном для просмотра виде. Это означает, что WEB странички представляют собой не обычный текст, а содержат также некую вспомогательную информацию для управления представлением документа в окне вашего браузера. Так как при разработке документа не понятно, на компьютере какого типа пользователь будет его просматривать, то WEB странички не могут готовиться и храниться в формате, разработанном для определенной компьютерной платформы, к примеру, в формате Microsoft Word для Windows ХР. Для того, чтоб пользователь, работающий на компьютере хоть какого типа, лицезрел документ, отформатированный соответствующим образом, употребляется разработанный специально для этого язык HTML.

Если вы работаете с браузером , то изберите команду меню Вид - Просмотр HTML кода (View - Source). На дисплее появится окно с начальным кодом этой странички на языке HTML.

В либо довольно надавить CTRL+U

Вид WEB страничек в Интернет очень нередко изменяется. Но для нас на данный момент это не значительно.

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

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

Язык HTML существует в нескольких вариантах, либо спецификациях. Как и версии программных товаров, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Любая следующая спецификация представляет собой расширение и дополнение предшествующей. Мы будем использовать конструкции последней спецификации HTML 4.0, которые поддерживаются последними версиями большинства всераспространенных браузеров.

Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение HTML (.html), либо HTM (.htm). В документе HTML обыденный текст смешивается с элементами разметки, заключенными в угловые скобки < и >, к примеру, , , , . Такие элементы разметки именуются тегами. Теги бывают одиночными, открывающими и закрывающими и состоят из последующих вереницей в определенном порядке частей:

• левой угловой скобки .

Таким макаром, открывающий тег , стоящий сначала документа HTML и значащий его начало, состоит из имени HTML и двух угловых скобок < >, а тег , находящийся в конце WEB документа, не считая обозначенных частей содержит также знак слэш /, значащий закрывающий тег и указывающий на конец документа. Тег значит начало кода интегрированной в документ программы-сценария. Этот тег содержит, не считая имени script, атрибут language со значением "vbscript", значащий, что сценарий написан на языке vbscript.

В тегах могут употребляться только знаки латинского алфавита, а в значениях атрибутов - любые знаки. Если в качестве значений атрибута употребляются, к примеру, знаки кириллицы, то они обязаны быть заключены в кавычки, к примеру, name="Раздел 1".

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

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

Книжный Интернет-магазин Три Cтупеньки

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

Большая часть тегов могут иметь один либо несколько атрибутов - характеристик, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Но атрибутов может и не быть совсем. Атрибут тега состоит из имени, к примеру, align, знака равенства=и значения, которое задается строчкой знаков, к примеру, "center": align="center". Значения атрибутов обычно заключаются в кавычки. Но если эти значения употребляют только знаки латинского алфавита, числа и дефисы, то кавычки можно опустить, к примеру: align=center. Но опускать кавычки категорически не рекомендуется в силу ряда обстоятельств связанных с предстоящей интеграцией HTML с JavaScript и языками. Потому вырабатывайте привычку сходу писать атрибуты в кавычках.

Каждый HTML документ имеет определенную структуру, которая смотрится последующим образом:

…

Структура HTML документа содержит последующие неотклонимые элементы:

• теги и , которые отмечают начало и конец документа;
• заголовок, ограниченный тегами и ;
• тело, ограниченное тегами ….

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

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

Цель работы: знакомство студентов с основными понятиями языка HTML, структурой HTML-документа, обязательными метками, комментариями, способами форматирования текста, физиче­скими и логическими стилями, приобретение навыков созда­ния простейших статических Web-документов.

На лабораторных занятиях мы будем использовать текстовый редактор Блокнот для подготовки HTML-файлов, а браузер Internet Explorer - как инструмент контроля за сделанным.

Теоретические сведения

Основные понятия

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

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

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

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

Такие страницы, как правило, имеют формат НТМ или HTML.

Группа Web-страниц, принадлежащих одному автору или одному ИЭДВ телю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом, или Web-сайтом. Каждая HTML-страница имеет свой уникальный URL - a д p е c в Интер­нете.

Фрейм (Frame ) - термин, имеющий два значения. Первое значение область документа со своими полосами прокрутки. Второе - 0ДНН0Ч ное изображение в анимационном графическом файле (кадр).

Апплет (Applet ) - программа, передаваемая на компьютер клиенте В ви­де отдельного файла и запускаемая при просмотре Web-страницы.

Скрипт (Script ) , или сценарий, - программа, включенная в состав Web-страницы для расширения ее возможностей. Браузер lnternet Explorer в определенных ситуациях выводит сообщение: «Разрешить выполнение сценариев на странице?». В этом случае имеются в виду скрипты.

CGI (Common Gateway Interface ) - общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц. Без таких программ невозможно создание интерактивных Web-страниц.

Браузер (Browser ) - программа для просмотра Web-страниц.

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

Содержание элемента, данные, которые форматирует элемент

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

Содержание элемента, данные, которые

форматирует элемент

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

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

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

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

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

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

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

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

Для удобства работы начальный тег вы можете писать с про­писной (заглавной) буквы (Р), а конечный - со строчной (ма­ленькой) буквы (/р), хотя это и не обязательно;

Не для всех элементов требуется ставить конечный (закрыва­ющий) тег;

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