Язык html относится к. Назначение языка HTML. Стандарт HTML и спецификация XHTML. Структура документа HTML. Указания к выполнению
ПРОЕКТИРОВАНИЕ WEB-САЙТОВ
Этапы создания Web-сайта
Создание Web-сайта предполагает наличие нескольких этапов - от придумывания идеи до ее воплощения. Чтобы создать действительно интересный и полезный продукт, необходимо пройти следующие этапы.
Написание контента.
Под контентом (Content)
понимается информационное наполнение сайта. Термин применяется для обозначения идейного содержимого Web-сайта.
Креатив.
Креатив (Creative)
- термин для обозначения визуальной составляющей Web-сайта. Сюда входит разработка дизайна, графических элементов, обработка графики и все, что с ней связано.
Написание кода Web-сайта.
Программирование Web-файла, написание функциональной части
Тестирование.
На этом этапе проверяется все: удобство навигации, целостность данных, корректность ссылок и орфография, к тому же не все браузеры одинаково интерпретируют одни и те же теги HTML.
Публикация.
Размещение Web-сайта в Интернете. Большинство Интернет-провайдеров (Internet service provider - ISP) предоставляют услугу по размещению домашних Web-страниц бесплатно (эта услуга называется Web-хостингом - Web hosting). Для публикации можно размещать Web-сайт у провайдера или воспользоваться другими возможностями.
Поддержка.
Необходимо решить, каким образом будут добавляться новые разделы и материалы, что будет происходить со старыми. Возможно, потребуется создание архива новостей, куда будут попадать новости, потерявшие свою актуальность. Еще более важным является регулярное обновление информации на Web-сайте для его постоянной привлекательности.
Терминология Web-проектирования
Web-браузер
- программа-приложение, предназначенная для интерпретации кодов HTML документов и отображения гипертекстового документа на экране компьютера. Наиболее часто используемые браузеры -Internet Explorer, Opera, Mozilla Firefox, Google Chrome. Наряду с термином «браузер» используют термины-синонимы: «обозреватель» и «навигатор».
Web-сайт
-набор связанных между собой, близких по смыслу Web-страниц и файлов. На каждом Web-сайте существует одна Web-страница называемая домашней (homepage) или главной страницей. Все посетители Web-сайта сначала попадают на нее, а потом с помощью гиперссылок попадают на другие страницы Web-сайта.
Web-страница
(документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в WWW. Web-страница кроме текста может содержать графику, анимации, видеоклипы, музыку, а также гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их.
Один из способов создания Web-страниц (или документов HTML) состоит в использовании текстового редактораБлокнот (NotePad)
, встроенного в Windows. В этом редакторе создается файл Web-страницы, который сохраняется с расширением *.htm с последующим просмотром результатов с помощью браузера.
Создание Web-сайтов средствами языка HTML
Язык HTML
(Hyper Text Markup Language) - язык гипертекстовой разметки документа, служит для написания Web-сайтов.
Язык HTML позволяет:
‒ создавать и редактировать Web-сайты, в том числе домашнюю Web-страницу, которую можно затем разместить в Интернете;
‒ редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.);
‒ создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка).
ОСНОВНЫЕ ПОНЯТИЯ ЯЗЫКА HTML
Элемент
- это конструкция языка HTML, или контейнер, содержащий данные.
Web-страница
представляет собой набор элементов.
Тег (Tag)
- это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. Теги заключаются в угловые скобки, например: . Конечный тег, если он предусмотрен синтаксисом языка, снабжается косой чертой: .
Фрейм (Frame)
- область гипертекстового документа со своими полосами прокрутки. Фреймы позволяют разбивать страницы на прямоугольные области, в каждой из которых отображается своя собственная страница. Вы можете разместить один или несколько фреймов на странице (такая страница называется страницей фреймов
или фреймсет (frameset)
).
Форма (Form)
- область гипертекстового документа, которая необходима для организации обратной связи с посетителями сайта.
Апплет (Applet)
- небольшая прикладная программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
Скрипт (Script)
- программа, включенная в состав Web-страницы для расширения ее возможностей.
Размещение (UpLoad)
- копирование документа с компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании).
Пиксел (Pixel)
- наименьшая цветная точка экрана монитора.
ОБЩАЯ СТРУКТУРА ПРОСТЕЙШЕГО ДОКУМЕНТА HTML
Общая структура простейшего документа HTML такова:
<СОММЕNT>
Комментарий
</b>Название документа <b></ TITLE >
</b></p>
<p><b></HEAD>
</b></p>
<p><b><BODY>
</b></p>
<p>Здесь расположен текст самого документа HTML.</p>
<p><b></BODY>
</b></p>
<p><b></HTML>
</b></p>
<p>Дадим пояснения указанным тегам документа HTML:</p>
<p><b><COMMENT>
</b> - комментарий к документу. Не является обязательным.</p>
<p><b><HTML>
</b> - идентификатор всего блока HTML-команд.</p>
<p><b><HEAD>
</b> - идентификатор заголовка документа HTML.</p>
<p><b><TITLE>
</b> - идентификатор заголовка окна просмотра.</p>
<p><b><BODY>
</b> - идентификатор HTML-команд документа для просмотра.</p>
<p>Три основных тега <b><HTML>
</b>, <b><HEAD>
</b>и <b><BODY>
</b> передают браузеру основную информацию для идентификации и организации документа.</p>
<p>Все указанные теги - парные, т.е. каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой, так и с большой буквы.</p>
<p><b><МЕТА>
</b> - непарный тег применяется для указания <a href="/tools/obzor-smartfona-highscreen-power-ice-obrazcovyi-byudzhetnik-highscreen-power-ice.html">подробной информации</a> о документе.</p>
<p><u>ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТОВОГО ПОТОКА
</u></p>
<p><b><Р>
</b> - идентификатор конца абзаца, после которого добавляется <a href="/browser/specifikacii-po-html5-na-russkom-standarty-kodirovaniya-v-html5-pustye-stroki-i.html">пустая строка</a>. В конце нужен тег <b></Р>
</b>.</p>
<p><b><BR>
</b> - идентификатор перевода строки.</p>
<p><b><HR>
</b> - идентификатор изображения горизонтальной линии.</p>
<p>Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой.</p>
<p><b><PRE>
</b> - установка равноширинного шрифта. В конце нужен тег <b></PRE>.
</b></p>
<p><u>ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ ЗАГОЛОВКОВ И ПОДЗАГОЛОВКОВ ДОКУМЕНТА
</u></p>
<p><b><Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>.
</b> При этом заголовки будут выведены <a href="/utilities/css-bolshie-bukvy-sozdanie-zaglavnyh-bukv-s-pomoshchyu-css-html-bukvy.html">большими буквами</a>, причем размер букв у тега <b><Н1>
</b> будет самый большой, у <b><Н2>
</b> - меньше, у <b><НЗ>
</b> - еще меньше и т.д.</p>
<p><u>ПАРНЫЕ ТЕГИ ФОРМАТИРОВАНИЯ СИМВОЛОВ ТЕКСТА
</u></p>
<p><b><В>
</b> - идентификатор полужирного шрифта.</p>
<p><b><strong>
</b> - идентификатор выделенного шрифта.</p>
<p><b><i>
</b> - идентификатор курсива.</p>
<p><b><U>
</b> - идентификатор подчеркивания.</p>
<p><b><s>
</b> - идентификатор перечеркивания.</p>
<p><b><tt>
</b> - идентификатор равноширинного шрифта (телетайпного или курьера).</p>
<p><b><big>
</b> - задает увеличенный размер шрифта.</p>
<p><b><small>
</b> - задает уменьшенный размер шрифта.</p>
<p><b><center>
</b> - задает центрирование текста.</p>
<p><b><sub>
</b> - задает нижний индекс.</p>
<p><u>ТЕГИ ФОРМАТИРОВАНИЯ АБЗАЦЕВ
</u></p>
<p><b><р align=left>
</b>- выравнивание текста в абзаце по левому краю.</p>
<p><b><р align=right>
</b> - выравнивание текста в абзаце по правому краю.</p>
<p><b><р align=center>
</b> - выравнивание текста в абзаце по центру.</p>
<p><b><р align=justify>
</b> - полное выравнивание по обоим краям экрана,</p>
<p><b>align
</b> - атрибут выравнивания.</p>
<p><u>ТЕГИ СПИСКОВ
</u></p>
<p>Теги списков являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Браузер автоматически генерирует номера для каждого пункта в списке.</p>
<p><b><OL>
</b> - идентификатор упорядоченного списка. В конце <b></OL>.
</b></p>
<p>Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять маркер.</p>
<p><b><UL>
</b> - идентификатор неупорядоченного списка. В конце <b></UL>.
</b></p>
<p>Отдельные элементы в упорядоченном и неупорядоченном списках помечают одиночным тегом <b><LI>
</b>, а элементы в списках определений <b><DL>
</b> тегами <b><DT>
</b> для термина и <b><DD>
</b> для значения термина.</p>
<p><b><LI>
</b> - идентификатор элемента в упорядоченном и неупорядоченном списке.</p>
<p>Конечный тег <b></LI>
</b> может быть опущен.</p>
<p><u>ТЕГИ СПИСКОВ ОПРЕДЕЛЕНИЙ
</u></p>
<p>Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний.</p>
<p><b><DL>
</b> - идентификатор списка определений. В конце </DL>.</p>
<p><b><DT>
</b> - идентификатор термина в списке определений.</p>
<p><b><DD>
</b> - идентификатор значений термина в списке определений.</p>
<p><b><DL>
</b></p>
<p><b><DT>
</b> название термина 1</p>
<p><b><DD>
</b> определение термина 1</p>
<p><b><DD>
</b> другое определение термина 1</p>
<p><b></DL>
</b></p>
<p><u>ТЕГИ ЦВЕТА
</u></p>
<p><b><BODYbgcoIor=«teal» text=«aqua» link=«red»>
</b> - задает цвет текста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).</p>
<p><b><BODY background=«back.jpg»>
</b> - задает фоновый рисунок (обои) на Web-странице в файле back.jpg.</p>
<p><b><BODY background=«\windows\tartan.bmp»>
</b> - фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла.</p>
<p><b><font color=«yellow» size=5>
</b> - задает цвет символов текста (color) и их размер (size). В конце нужен тег <b></font>.
</b></p>
<p><u>ТЕГИ ЛИНИЙ
</u></p>
<p><b><hr coIor=«lime»>
</b> - задает цвет горизонтальной линии.</p>
<p><b><hr color=«red» size=3 width=220 align=center>
</b> - атрибут <b>size=N
</b> задает толщину линии в пикселах; атрибут <b>width=M
</b> задает длину линии в пикселях; атрибут <b>align=center
</b> (или <b>left,
</b> или <b>right
</b>) задает смещение линии (ее размещение в центре, или смещение влево, или вправо).</p>
<p><u>ТЕГИ ДЛЯ ВСТАВКИ ИЗОБРАЖЕНИЙ
</u></p>
<p>Графика на страницах - это средство выражения мысли, подчеркивания идеи.</p>
<p>Изображения можно сохранять в нескольких форматах. Тип файлов GIF - графический формат обмена, стал первым типом файлов, которые поддерживались в WWW. Затем был разработан <a href="/security/tineye-com-na-russkom-yazyke-alternativnyi-poisk-kartinok.html">формат JPEG</a> - объединенная группа экспертов фотографии. Это формат эффективнее GIF для представления больших изображений.</p>
<p>Приобрел популярность <a href="/browser/programma-dlya-chteniya-bmp-failov-chem-otlichayutsya-formaty-izobrazhenii-bmp-png-jpg.html">формат PNG</a> - персональная сетевая графика, который заменяет GIF.</p>
<p>При публикации сайта рисунок должен находиться в папке, где хранятся файлы страниц, а URL-адрес должен быть реальным.</p>
<p>JPEG использует специальную технику компрессии изображений, что является преимуществом для рисунков и фотографий.</p>
<p><b><img src='/programming/yazyk-html-otnositsya-k-naznachenie-yazyka-html-standart-html-i.html' loading=lazy>
</b> - вставка графического изображения в виде анимационного файла lycos.gif. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.</p>
<p><b><img src='/programming/yazyk-html-otnositsya-k-naznachenie-yazyka-html-standart-html-i.html' loading=lazy>
</b> - если при вставке изображения использованы атрибуты width (ширина в пикселях) и height (высота в пикселях), то при загрузке изображения браузер покажет сначала рамку, где должно быть изображение, а затем уже само изображение, поскольку оно загружается дольше. Таким образом, резервируется место на экране под изображение.</p>
<p><b><img src='/programming/yazyk-html-otnositsya-k-naznachenie-yazyka-html-standart-html-i.html' loading=lazy>
</b> - вставка графического изображения в виде файла iexplor.gif, причем указан полный путь <a href="/programming/obmen-failami-mezhdu-graficheskimi-programmami-graficheskie-faily-osnovnye.html">графического файла</a> на диске: c:\html\animat\iexplor.gif (<a href="/what-is-it/samyi-moshchnyi-smartfon-v-mire-samyi-moshchnyi-telefon-v-mire-na-dannyi.html">данный момент</a> нужно заранее продумать, иначе при перемещении на другой компьютер возникнут проблемы отображения).</p>
<p><b><img src='/programming/yazyk-html-otnositsya-k-naznachenie-yazyka-html-standart-html-i.html' loading=lazy>
</b> - атрибут <b>border
</b> задает рамку по периметру изображения толщиной 3 пикселя. Атрибут <b>Alt
</b>дает текст на месте рамки, если изображения нет.</p>
<p>Атрибут <b>border=0
</b> используется, чтобы убрать рамку вокруг рисунка. Это необходимо, например, при использовании анимированных gif-рисунков на прозрачной основе.</p>
<p><b><img src='/programming/yazyk-html-otnositsya-k-naznachenie-yazyka-html-standart-html-i.html' loading=lazy>
</b></p>
<p>Здесь атрибут <b>hspace=5
</b> обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.</p>
<p>Атрибут <b>align=«left»
</b> обеспечивает размещение рисунка слева.</p>
<p><u>ТЕГ ПЕРЕХОДА К ДРУГОМУ ФАЙЛУ
</u></p>
<p><b><а href=«excite.htm»>excite.htm</a>
</b> - гипертекстовая ссылка к файлу excite.htm.</p>
<p><b><а href=«C:\book\book.inf»>book.inf</a>
</b> - гипертекстовая ссылка, переход к файлу book.inf. При запуске браузера следует указать программу для просмотра <a href="/multimedia/kak-sravnit-2-tekstovyh-faila-v-notepad-sravnenie-shozhesti-dvuh-tekstov.html">текстового файла</a> book.inf, например edit.com.</p>
<p>При работе в Интернете следует различать файлы с большими и с маленькими буквами в имени и расширении. Должно быть полное соответствие между именами файлов по размеру каждой буквы в имени и расширении, указанными в гиперссылке и лежащими на сервере, иначе гиперссылки не будут работать.</p>
<p>Для облегчения работы можно задавать цифровые имена файлов (цифры всегда одного размера).</p>
<br><p><u>ТЕГ ПЕРЕХОДА К ДРУГОЙ WEB-СТРАНИЦЕ
</u></p>
<p><b><а href=«http://www.da.ru»>http://www.da.ru</a>
</b> - гипертекстовая ссылка в виде текста, переход в Интернете к Web-странице http://www.da.ru.</p>
<p><b><а href=«zinn.gif»><img src='/programming/yazyk-html-otnositsya-k-naznachenie-yazyka-html-standart-html-i.html' loading=lazy></a
</b>> - гипертекстовая ссылка в виде изображения globe.gif, переход к просмотру изображения zinn.gif.</p>
<p><u>ТЕГ ВСТАВКИ АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ
</u></p>
<p><b><а href=«mailto: krilenka@ya.ru»> krilenka@ya.ru </a>
</b> - гиперссылка на адрес <a href="/what-to-do/kak-poluchit-pochtovyi-yashchik-anonimno-bez-registracii-odnorazovyi.html">электронной почты</a>. При нажатии происходит вызов <a href="/tools/sborshchik-pochty-thunderbird-besplatnaya-pochtovaya-programma-mazila.html">почтовой программы</a> и указанный <a href="/multimedia/add-board-php-dobavit-obyavlenie-rabota-razmestit-obyavlenie-vveden.html">адрес E-mail</a>: krilenka@ya.ru вводится в пункт <b><i>Кому
</i>
</b>.</p>
<p><u>ТЕГ ВСТАВКИ ДОКУМЕНТА
</u></p>
<p><b><embed src=«Welcome.avi» Width=280 Height=140 autostart=true>
</b> -</p>
<p>вставка объекта в документ HTML. В <a href="/programming/remont-led-podsvetki-matricy-televizora-ue32f5000ak-tehnologii-podsvetki-v.html">данном случае</a> это мультимедийный файл *.avi, причем при загрузке страницы происходит автозапуск этого файла, размеры которого на экране заданы атрибутами <b>Width
</b> и <b>Height
</b>.</p>
<p>Если документ HTML большой, то внутри него делают переходы по метке (U01): <b><Р> <а href=«#U01> Введение </а> </Р> <а name=«U01»> Введение </а>
</b></p>
<p><u>ТЕГИ ДЛЯ СОЗДАНИЯ БЕГУЩЕЙ ТЕКСТОВОЙ СТРОКИ
</u></p>
<p><u>(ТОЛЬКО ДЛЯ INTERNET EXPLORER):
</u></p>
<p><b><marquee behavior=«scroll» direction=«right» loop=«-l»> Интернет - это окно в Mиp!</marquee>
</b></p>
<p>Если текстовая строка должна бежать влево, то вместо <b>right
</b> должно быть слово <b>left.
</b> Можно создать бегущую текстовую строку еще проще (т.е. без атрибутов, и она будет бежать влево):</p>
<p><b><marquee>Добро пожаловать! </marquee>
</b></p>
<p>Если текстовая строка должна бежать то влево, то вправо, то в теге <marquee> используется атрибут <b>behavior=«alternate»
</b>.</p>
<p><u>СПИСОК ЦВЕТОВ СИМВОЛОВ HTML
</u></p>
<p>Всего 16 основных цветов:</p>
<p>Вместо указанных терминов для задания цвета можно использовать <b>RGB-коды
</b>(<b>R
</b>ed, <b>G
</b>reen, <b>B
</b>lue), например:<b>#FFFFFF
</b> - белый (white), <b>#FF0000
</b> - красный (red).</p>
<p>Меняя <b>RGB-коды
</b>, цвета можно подбирать желаемые текста и фона.</p>
<p><u>ТЕГИ ПОДКЛЮЧЕНИЯ ЗВУКА
</u></p>
<p>Для воспроизведения звука (файл *.mid) после загрузки документа HTML в браузер Internet Explorer (т.е. в <a href="/what-to-do/komanda-zapuska-v-fonovom-rezhime-linux-kak-zapustit-programmu-na-linux-udalenie.html">фоновом режиме</a>), надо записать следующую команду, например:</p>
<p><b><bgsound src=«\windows\canyon.mid» lоор=1>
</b></p>
<p>Можно также использовать файл формата *.wav. Число воспроизведений <b>loop
</b> можно увеличить с 1 до п.</p>
<p><u>ТЕГИ ФРЕЙМОВ
</u></p>
<p><b><frameset></frameset>
</b> - определение фреймовой (оконной) структуры документа: размеры и расположение фреймов на странице. Заменяет тег BODY в документе с фреймами; может быть вложен в другие фреймсеты.</p>
<p><b><frameset rows=«value,vaIue»>
</b>- определение количества и размеров горизонтальных фреймов (фреймов-строк) в окне браузера (пиксели, проценты ширины).</p>
<p><b><frameset cols=«value,value»>
</b> - определение количества и размеров вертикальных фреймов (фреймов-столбцов) в окне браузера (пиксели, проценты ширины).</p>
<p><b><frame>
</b> - определение фрейма и его свойства внутри FRAMESET-структуры.</p>
<p><b><noframes> </noframes>
</b> - определяет, что показывать, если браузер не поддерживает фреймы.</p>
<p>Атрибуты фреймов:</p>
<p><b><frame src=«URL»>
</b> - указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.</p>
<p><b><firame name=«name»>
</b> - определение имени данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью параметра <b>target
</b>.</p>
<p><b><frame marginwidth=#>
</b> - определение ширины (в пикселях) левого и правого полей фрейма; должен быть равен или быть больше 1.</p>
<p><b><frame marginheight=#>
</b> - определение ширины (в пикселях) верхнего и нижнего полей фрейма; должен быть равен или быть больше 1.</p>
<p><b><frame scrolling=VALUE>
</b> - определение наличия полосы прокрутки содержимого фрейма; значениями могут быть: «yes,» «nо,» или «auto.» По умолчанию стоит auto.</p>
<p><b><frame noresize>
</b> - предотвращение изменения размеров фрейма.</p>
<u><br></u> <p><u>ТЕГИ ФОРМЫ
</u></p>
<p>Для функционирования формы понадобится написать <b>CGI
</b> скрипт. HTML просто создает вид формы.</p>
<table><tr><td> <form></form>
</td> <td> Создание заполняемой формы
</td>
</tr><tr><td> <select multiple name=«NAME» size=?></select>
</td> <td> Элемент select создает в заполняемой форме меню типа «Выбор одного пункта из многих» или «Выбор нескольких пунктов из многих». Size определяет число видимых пунктов без прокрутки.
</td>
</tr><tr><td> < Option >
</td> <td> Элемент option описывает отдельные пункты меню. Не имеет конечного тэга.
</td>
</tr><tr><td> <textarea name=«NAME» cols=40 rows=8> </textarea>
</td> <td> Создание поля для ввода нескольких строк текста. Cols указывает на ширину; rowsуказывает на высоту.
</td>
</tr><tr><td> <input type=«checkbox» name=«NAME»>
</td> <td> Создание поля ввода для атрибутов типа «да»/»нет» или для атрибутов, которые могут одновременно принимать несколько значений. Сразу за тегом следует текст.
</td>
</tr><tr><td> <input type=«radio» name=«NAME» value=«x»>
</td> <td> Создание поля ввода для атрибутов, которые принимают одно значение из нескольких возможных. Текст следует сразу за тегом.
</td>
</tr><tr><td> <input type=text name=«foo» size=20>
</td> <td> Создание поля ввода под одну строку текста. Size указывает длину в символах.
</td>
</tr><tr><td> < input type=«submit» value=«NAME»>
</td> <td> Создание кнопки, при нажатии которой заполненная форма посылается на сервер.
</td>
</tr><tr><td> <input type=«image» border=0 name=«NAME» src=«name.gif»> <input type=«reset»>
</td> <td> Создание графического образа для кнопки, инициализирующей передачу данных на сервер.
</td>
</tr></table><p><u>СОЗДАНИЕ ТАБЛИЦ В HTML
</u></p>
<p>Таблицы являются удобным средством форматирования данных в HTML.</p>
<p>Таблицу задает и определяет ее общие свойства тег <b><table></table>.
</b>По горизонтали, например по центру, таблицу можно выровнять с помощью тега <b><р align=«center»>,
</b> размещаемого перед <b><table>.
</b></p>
<p>Тег <b><table>
</b> может иметь атрибуты:</p>
<p><b><table border=«5» width=«100» cellpadding=« 10» cellspacing=«10»>,
</b></p>
<p><b>border=«5»
</b> - ширина боковой грани в пикселях. При нулевом значении рамка исчезает;</p>
<p><b>width=«100»
</b> - ширина таблицы в пикселях или <b>width=«50%»
</b> - ширина таблицы в % по отношению к ширине страницы в окне;</p>
<p><b>cellspacing=«10»
</b> - ширина фронтальной грани в пикселях;</p>
<p><b>cellpadding=«10»
</b> - задает размер пустого пространства в пикселях, окружающего данные в ячейке.</p>
<p>Тег <b><caption></caption>
</b> задает заголовок таблицы.</p>
<p>Тег <b><tr>
</b> задает строку таблицы. Следующий тег <b><tr>
</b> задает следующую строку таблицы. Конечный тег необязателен.</p>
<p>Тег <b><td>
</b> задает ячейку таблицы. Следующий тег <b><td>
</b> задает <a href="/administrator/excel-poisk-v-sleduyushchei-yacheike-kak-naiti-tekst-slova-i-simvoly-v-excel.html">следующую ячейку</a> таблицы. Конечный тег необязателен.</p>
<p>Цвет фона ячейки задается в теге <b><td>
</b>: <b><td bgcolor=«yellow»>
</b></p>
<p>Непарный тег <b><th>
</b> - задает элемент ячейки, которая является заголовком таблицы. Этот тег должен находиться внутри тега <b><tr>.
</b></p>
<p>Ячейка-заголовок отличается от обычной тем, что текст внутри нее выделяется полужирным шрифтом. Цвет фона заголовка задается: <br><b><tr><th bgcolor=«yellow»>
</b> Зaroлoвoк 1.</p>
<p><u>СКРИПТ
</u></p>
<p>Для реализации Web-сайта используется программа <b><i>Движок
</i>
</b>, реализующая функциональность, отличную от простого показа готовых Web-страниц. Например, просмотр каталога Интернет-магазина (список товаров извлекается из базы данных магазина), поиск в Интернете (страницы с ответами <a href="/tools/sushchestvuyushchie-poiskovye-sistemy-interneta-anonimnost-poiskovyh-sistem.html">поисковой системы</a> формируются динамически), показ баннеров (движок «выдает» страницам сайта тот или иной баннер по заданному алгоритму).</p>
<p>Скрипт - несложная программа на «скриптовом» языке программирования (Perl, Php, Javascript), компонент движка. В предельном случае движок сайта может состоять из одного-единствен-ного скрипта.</p>
<p>Cgi-bin исторически - подкаталог на сервере, в котором располагались скрипты и иные компоненты движка сайта. Некоторые хостинги (услуги по размещению чужого Web-сайта на своем Web-сервере или чужого Web-сервера) предоставляют своим клиентам личные каталоги cgi-bin для размещения скриптов.</p>
<p>Язык
<b>HTML
</b>(Hyper
Text
Markup
Language)
- язык гипертекстовой
разметки документа, служит для написания
Web-сайтов.
Язык HTML
позволяет:</p><ul><p>создавать
и редактировать Web-сайты,
в том числе домашнюю
Web-страницу,
которую можно затем разместить в
Интернете;</p><p>редактировать
документы HTML,
полученные из Интернета,
так
чтобы функционировали все внедренные
в документ объекты
(картинки, анимации
и т.д.);</p><p>создавать
мультимедийные презентации, слайд-шоу,
демонстрационные
проекты, благодаря гипертекстовым
ссылкам и возможности
вставлять в документ
HTML
рисунки, диаграммы, анимации,
видеоклипы, музыкальное
и речевое сопровождение, текстовые
спецэффекты (например, бегущая строка).</p>
</ul><h2>Основные понятия языка html</h2><p><b>Элемент
</b>-
это конструкция языка HTML,
или контейнер, содержащий
данные.</p><p><b>Web
</b><b>-страница
</b>представляет
собой набор элементов.</p><p><b>Тег
</b>(Tag)
- это стартовый и конечный маркеры
элемента. Теги
определяют
границы действия элементов и отделяют
элементы друг от друга. Теги заключаются
в угловые скобки, например: <b><
</b><b>HTML
</b><b>>.
</b>Конечный
тег, если он предусмотрен синтаксисом
языка, снабжается
косой чертой: <b></
</b><b>HTML
</b><b>>
</b>.</p><p><b>Фрейм
</b>(Frame)
- область гипертекстового документа
со своими полосами
прокрутки. Фреймы позволяют разбивать
страницы Hi
прямоугольные
области, в каждой из которых отображается
свои собственная
страница. Вы можете разместить один или
несколько</p><p>фреймов
на странице (такая страница называется
страницей фреймов или фреймсет
(frameset)).</p><p><b>Форма
</b>(Form)
- область гипертекстового документа,
которая необходима для организации
обратной связи с посетителями сайта.</p><p><b>Апплет
</b>(Applet)
- небольшая прикладная программа,
передаваемая
на компьютер клиента в виде отдельного
файла и запускаемая при просмотре
Web-страницы.</p><p><b>Скрипт
</b>(Script)
- программа, включенная в состав
Web-страницы
для расширения ее возможностей.</p><p><b>Размещение
</b>(UpLoad)
- копирование документа с компьютера
клиента
на Web-сервер
- используется при создании собственной
Web-страницы
(т.е. при ее опубликовании).</p><p><b>Пиксел
</b>(Pixel)
- наименьшая цветная точка экрана
монитора.</p><h2>Общая структура простейшего документа html</h2><p>Общая
структура простейшего документа HTML
такова:</p><p><<b>COMMENT>
</b>Koмментарий<b></COMMENT
</b>></p><p><b><HTML>
</b></p><p><b><HEAD>
</b></p><p><b><
</b><b>TITLE
</b><b>>
</b>Название
документа<b></ТП
</b><b>L
</b><b>Е
</b>></p><p><b></
</b><b>HEAD
</b><b>>
</b></p><p><b><
</b><b>BODY
</b><b>>
</b></p><p>Здесь
расположен текст самого документа HTML.</p><p><b></
</b><b>BODY
</b><b>>
</b></p><p><b></
</b><b>HTML
</b><b>>
</b></p><p>Дадим
пояснения указанным тегам документа
HTML.</p><p><b><
</b><b>COMMENT
</b><b>>
</b>-
комментарий к документу. Не является
обязательным.</p><p><b><
</b><b>HTML
</b><b>>
</b>-
идентификатор всего блока HTML-команд.</p><p><b><
</b><b>HEAD
</b><b>>
</b>-
идентификатор заголовка документа
<b>HTML
</b><b>.
</b></p><p><b><
</b><b>TITLE
</b><b>>
</b>-
идентификатор заголовка окна просмотра.</p><p><b><
</b><b>BODY
</b><b>>
</b>-
идентификатор <b>HTML
</b><b>-команд
</b>
документа для просмотра.</p><p>Три
основных тега <b><
</b><b>HTML
</b><b>>,
<
</b><b>HEAD
</b><b>>
</b>и
<b><
</b><b>BODY
</b><b>>
</b>передают
броузеру
основную информацию для идентификации
и <b>организа
</b><b>ции
</b>документа.</p><p>Все
указанные теги - парные, т.е. каждый из
них заканчивается конечным
тегом с косой чертой. Все команды можно
писать как с маленькой, так и с
большой буквы.</p><p><b><МЕТА>
</b>
- непарный тег применяется для указания
подробной информации
о документе.</p>
<p>Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.</p>
<p>Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0 и 3.2. Текущую спецификацию HTML всегда можно найти на сервере W3C .</p>
<p>HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться <a href="/what-is-it/bluetooth---eto-standart-bezopasnogo-besprovodnogo-perenosa-dannyh-mezhdu.html">различными типами</a> WEB-браузеров. Когда документ создан с <a href="/utilities/iframe-i-frame-chto-eto-takoe-i-kak-luchshe-ispolzovat-freimy-v-html.html">использованием HTML</a>, WEB-браузер может интерпретировать HTML для выделения <a href="/utilities/primery-ispolzovaniya-css-teni-teksta-css-neskolko-tehnik-dlya.html">различных элементов</a> документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.</p>
<p>Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML вы можете обозначать данные элементы, обеспечивая WEB-браузеры минимальной информацией для отображения данных элементов, сохраняя в целом <a href="/browser/kompyuternye-seti-11---referat-harakteristika-kompyuternyh-setei.html">общую структуру</a> и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-браузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.</p>
<p>В большинстве случаев автор документа строго определяет <a href="/browser/prikreplennaya-tema-blyutuz-naushniki-dlya-telefona-podklyuchenie-bluetooth.html">внешний вид</a> документа. В <a href="/administrator/bolshoi-znak-plyusa-specsimvoly-html-sluchai-ispolzovaniya-nekotoryh.html">случае HTML</a> читатель (основываясь на возможностях WEB-браузера может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-браузеру интерпретировать эти тэги.</p>
<p>Например, один WEB-браузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку. Пользователи некоторых WEB-браузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.</p>
<p>HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора. Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape позволяют создавать документы графически с использованием технологии WYSIWYG(What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.</p>
<p>Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа: <TITLE> Заголовок документа
HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:
Заголовок документа
Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слэшем перед текстом внутри угловых скобок. В данном примере тэг
говорит WEB-браузеру об использовании формата заголовка, а тэг - о завершении текста заголовка.
Некоторые тэги, такие, как
(тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.
Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом . Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:
...тело документа...
Заголовочная часть документа
Тэг заголовочной части документа должен быть использован сразу после тэга и более нигде в теле документа. Данный тэг представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тэга
. Стартовый тэг помещается непосредственно перед тэгом и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:</p>
<p><HTML> <HEAD> <TITLE> Список сотрудников Заголовок документа </p>
<p>Большинство WEB-браузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тэгами <TITLE> и , размещается внутри -тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.
Комментарии
Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария:
Комментарии могут встречаться в документе где угодно и в любом количестве.
Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.
Тело документа
Тело документа должно находиться между тэгами
и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.
Тэг абзаца
В отличие от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга
Если вы не разделите абзацы тэгом
Ваш документ будет выглядеть как один большой абзац.
Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов. Возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.
Одна из наиболее привлекательных черт Web-возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга . Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.
Существует два способа использования графики в HTML-документах. Первый - это внедрение графических образов в документ, что позволяет пользователю видеть изображения непосредственно в контексте других элементов документа.
Это наиболее используемая техника при проектировании документов, называемая иногда "inline image".
Некоторые WWW browser позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-браузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.
Когда вы описываете форму, каждый элемент ввода данных имеет тэг . Когда пользователь помещает данные в элемент формы, информация размещается в разделе VALUE данного элемента. Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ.
Несмотря на то, что Web-страницы появляются на экране компьютера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете.
Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы однозначно
определяем, как должен выглядеть этот текст при печати на совершенно определенном принтере и
на бумаге заданного формата.
Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор.
Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных броузеров. Может быть, это будет текстовый броузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст документа вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля.
В связи с необходимостью подготавливать документы для столь разнообразных устройств, язык HTML не предназначен для описания формата документа. Он служит для функциональной разметки документа,
то есть позволяет определить назначение
фрагментов текста.
Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа просмотра (броузер) сама «решает», что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом, а может быть выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст Документа, использует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу.
Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение содержания
и оформления документа выдерживается четко. В последней версии HTML (4.0) использовать команды форматирования, как правило, не рекомендуется.
Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами.
Тег - это набор символов. Все теги начинаются с символа «меньше» (<
) и заканчиваются символом «больше» (>
). Пару этих символов иногда называют угловыми скобками.
После открывающей угловой скобки идет ключевое слово,
определяющее тег.
Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения - можно использовать как строчные, так и прописные буквы, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.
Как правило, один тег HTML воздействует только на часть документа, например на абзац. В таких случаях используют парные теги: открывающий
и закрывающий.
Открывающий тег создает эффект, а закрывающий - прекращает его действие. Закрывающие теги начинаются с символа косой черты (/
).
Некоторые теги дают разовый эффект в месте своего появления. В этом случае необходимости в закрывающем теге нет, и он не употребляется.
Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.
При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
Атрибуты тегов
Открывающие теги часто могут содержать атрибуты,
влияющие на эффект, создаваемый тегом. Атрибуты - это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.
Некоторые атрибуты требуют указания значения атрибута.
Это значение отделяется от ключевого слова знаком равенства (=
). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда.
Закрывающие теги никогда не содержат атрибутов.
Комментарии
В языках программирования общепринята возможность использования комментариев - текстовых строк, не являющихся частью программы, а служащих для пояснения. Язык HTML тоже имеет такую возможность.
Комментарии в языке HTML начинаются со специального тега . Комментарий может содержать любые символы, кроме символа «больше» (>
), и, таким образом, не может включать в себя теги.
Примеры тегов HTML:
<Body> <TABLE> </A> <img> </Center>
</b></p>
<p>Примеры парных тегов HTML:</p>
<p><b><HTML> </HTML>,
</b></p>
<p><b>,
</b></p>
<p><b><HEAD> </HEAD>,
</b></p>
<p><b><H3> </H3>,
</b></p>
<p><b><ADDRESS> </ADDRESS> ,
</b></p>
<p><b>,
</b></p>
<p>Примеры одиночных тегов HTML:</p>
<p><b><BR>, <HR>, <META>, <BASEFONT>, <FRAME>, <INPUT>.
</b></p>
<p>Примеры тегов HTML с атрибутами:</p>
<p><b><BODY BGCOLOR="#000000” TEXT=”FFFFFF" BACKGROUND="RAIN.GIF">
</b></p>
<p><b><OPTION SELECTED>
</b></p>
<p><b><FRAME SRC="file.html" NORESIZE>
</b></p>
<p>Структура документа HTML</p>
<p>Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML - это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows 9x.</p>
<p>1. Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега <b><HTML>
</b> и заканчиваться соответствующим закрывающим тегом <b></HTML>
</b>. Эта пара тегов сообщает броузеру, что перед ним действительно документ HTML.</p>
<p>2. Документ HTML состоит <i>из раздела заголовков
</i> и <i>тела документа,
</i>идущих именно в таком порядке. Раздел заголовков заключен между тегами <b><HEAD>
</b> и <b></HEAD>
</b> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <b><TITLE>
</b> и <b>, между которыми размещают «официальный» заголовок документа. Большинство броузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна броузера.
3. Сам текст документа располагается в теле документа.
Тело документа располагается между тегами и .
Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.
