Главная-Программы-Готовая web страница с помощью языка html. Язык разметки гипертекстовых страниц HTML

Готовая web страница с помощью языка html. Язык разметки гипертекстовых страниц HTML

Курс «Создание Web-страниц средствами языка HTM L »

Тема 1. Начальные сведения о языке HTML

Назначение языка HTML

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

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

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

Язык HTML появился одновременно со службой Worl d Wide Web и развивался вместе с ней. Он является основой Worl d Wide Web и одновременно причиной ее широчайшей популярности.

HTML - файл

HTML - файл – текстовый файл, имеющий расширение .htm или . html Web -страница хранится в виде HTML - файла. Для создания HTML - файла могут использоваться как простые текстовые редакторы, такие как Блокнот или Word Pad , так и редакторы Web.

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

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

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

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

    Сам текст документа располагается в теле документа . Тело документа располагается между тегами и BODY >. На практике определить место положения этих основных тегов можно и при их отсутствии. Поэтому, если теги, и , а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Но всё-таки при создании Web-страниц опускать эти теги не рекомендуется.

Простейший правильный документ HTML.

< HEAD >

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

HEAD >

< BODY >

BODY >

Теги HTML

Язык HTML состоит из специальных разметочных указателей – тегов. Их также можно назвать командами, инструкциями или кодами языка HTML.

Тег – инструкция броузеру, указывающая способ отображения текста. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово , определяющее тег.

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

Существует два типа тегов – парные и непарные.

Парные теги – открывающие и закрывающие, аналогичные круглым скобкам алгебраического выражения. Они влияют на текст с того места, где употреблены, до того места, где указан признак окончания их действия (закрывающие теги начинаются с символа косой черты (/).

Например, < HTML > HTML >, < P > P >, H 3>

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

Например,
, ,

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

Пример.

Пример создания таблицы

Из примера видно, что страничка использует кодировку W indows-1251 - наиболее распространенную на сегодняшний день, достаточно лишь каждый раз вставлять этот тэг в таком виде на свою страничку; автор страницы – Иванов Иван; страница посвящена животным.

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

Атрибуты тегов

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

Атрибуты – это дополнительные ключевые слова, отделенные от ключевого слова тега и друг от друга пробелами.

Атрибуты могут иметь значения, записываемые после знака равенства (=). Всегда полезно заключать значение атрибута в кавычки (одинарные либо двойные). Строка в кавычках не должна содержать такие же кавычки внутри себя. Можно опускать кавычки для значений атрибутов, которые состоят только из следующих символов:

    символов английского алфавита;

  • промежутков времени;

    дефисов (-).

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

    символов английского алфавита (A - Z , a - z )

    цифр (0 - 9 )

    промежутков времени

    дефисов (- )

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER" .
Закрывающие теги не содержат атрибутов.

Примеры. FONT >

Комментарии

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

Принцип наследования тегов

Теги-контейнеры.
Мы уже знаем, что теги в большинстве своем состоят из двух частей - это открывающий (он же - содержащий атрибуты) и закрывающий, то есть, "конец" тега. Заданные в теге параметры действуют только между его началом и концом, то есть, только внутри тега:

<начало 2-го тега>

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<начало 3-го тега>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<Конец 3-го тега>

<Конец 2-го тега>

<Конец 1-го тега>

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

Также следует заметить, что некоторые атрибуты вложенных тегов могут воздействовать и на вышестоящие, "старшие" теги. Например, это типично для таблиц, вложенных одна в другую.
Если у внутренней таблицы размер задан 100 , то у внешней не может быть размера меньше 100 пикселов + толщина рамки. Таким образом, вложенная таблица как бы "распирает" ту, в которую она вложена. При этом, даже если у нее не задан размер, а количество текста в ней значительно, она будет распирать "старшую" таблицу на такой размер, который необходим для отображения соответствующего количества строк текста. Это называется "обратная связь".

Практическая работа № 1

«Создание простейшей Web -страницы»

Цель: научиться создавать Web -страницы в текстовом редакторе Блокнот.

Указания к выполнению

    Наберите в нём структуру HTML -документа, которая приведена ниже:

О братьях наших меньших.

Здесь будет размещено содержание Web-страницы

    Сохраните файл, присвоив ему имя index .htm .

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

    Закройте браузер.

    Вернитесь к сохранённому в Блокноте файлу.

Внесите в него следующие изменения: вместо слов «Здесь будет размещено содержание Web -страницы», наберите следующие:Это моя первая страничка .

В строке < TITLE > укажите: «Домашняя страничка (ваше имя и фамилия)».

    Сохраните файл как page 2.htm .

    Просмотрите результат в браузере, при необходимости отредактируйте файл при помощи Блокнота.

Тема 2. Теги HTML

Теги физического и логического форматирования текста

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

Рассмотрим более подробно стандартные элементы языка HTML, позволяющие форматировать текст.

Шрифт - это таблицы замены кода видимым изображением.
Каждая клавиша вашей клавиатуры дает определенный код, распознаваемый ОС (операционной системой, в большинстве случаев это Windows или Linux/Unix).
Таким образом, выбрав определенный шрифт, система заменяет полученный с клавиатуры код на сопоставленное в таблице символов шрифта изображение буквы или значка. Каждый шрифт - это файл. Файл, содержащий изображения букв, цифр и символов, назначаемых на каждую кнопку. Установить шрифт - означает включить в систему файл с дополнительными таблицами сопоставления. В системах MS Windows обычно используется несколько шрифтов, поставляемых вместе с системой - это:

Arial

Ариал

Courier New

Курьер Нью

Comic Sans

Комик Санс

Times New Roman

Таймс Нью Роман

Verdana

Вердана

Каждый из этих шрифтов уместен в своем дизайне и стиле. Наиболее распространен - Ариал. Все эти шрифты есть у 90% всех посетителей вашей будущей странички. Каждый шрифт - это самостоятельный файл в папке Windows/fonts/ *.ttf. Как в HTML придать шрифту тот или иной вид?
< FONT >… FONT > определение типа, размера и цвета шрифта . Все эти характеристики определяются при помощи соответствующих атрибутов.

Абсолютный размер шрифта задается атрибутом si ze (размер) . Этот атрибут может принимать значения от 1 до 7, при этом шрифт 1-го размера - самый маленький, а 7-го – самый большой.
Примеры.

текст размера 1
текст размера 2
текст размера 3
текст размера 4
текст размера 5

текст размера 6
текст размера 7

Тише едешь – дальше будешьONT >.
В дизайне обычно используются первые четыре размера. Все, что выше, дурной тон и признак дилетантства, ибо занимает слишком много места и трудно читается. Правда, и большим размерам находится применение. Например, седьмым размером можно писать буквицу (первую букву начала главы): Т екст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст.
Кроме прочего, мы можем выбрать и сам шрифт, используемый для отображения текста. Делается это атрибутом face (вид).

Примеры. Это шрифт arial размером 3 ONT >
текст FONT >
Как видим, э ти два атрибута - размер и вид шрифта, - можно расположить в любой последовательности в теге :
Можно также использовать атрибут color (цвет). Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, co lor=”#ff 0000”, либо просто его названием, написанным на английском языке, например, color =”red ”.Примеры. Это шрифт синего цвета FONT >
Это шрифт arial размером 3, цвет синий FONT >
Шрифт так же может быть: наклонный (курсив), жирный, подчеркнутый, перечеркнутый, надстрочный, подстрочный, а также сочетающий в себе несколько указанных видов. Достигается это, соответственно, тегами:
< I > текст I >
< B >текст B >
< U > текст U >
< S > текст S >
< SUP > текст SUP >
< SUB > текст SUB >,
а также их сочетанием, например, <U > текст U >B >
Форматирование абзаца. В большинстве обычных документов основными функциональными разделами являются заголовки и абзацы. Web -документы не являются исключением. Для обозначения обычных абзацев в языке HTML используют тег

…P > (Paragraph ). Причем, можно использовать только начальный тег, так как следующий элемент

обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег.
Вместе с тегом абзаца можно использовать и атрибут align (выравнивание) :
align =”left ” – выравнивание по левому краю;
align =”right ” - выравнивание по правому краю;
align =”center ” - выравнивание по центру.
Пример.

Глава 1P >

АнимацияP >

стр. 3P >

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

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

Выравнивание

align = “left”

align = “ center”

align = “ right ”

align = “ justify ”

Толщина и длина линии в пикселях.

Size = 3(ширина в пикселях)

width= 300 (длина в пикселях)

width= 100% (длина в процентах)

Цвет линии

color =”red ”

Язык HTML поддерживает шесть уровней внутренних заголовков документа. Они помечаются тегами от

…

до
…
.
Заголовок первого уровня самый крупный, а шестого уровня – самый мелкий. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо.
Пример. Самый большой заголовок
Самый маленький заголовок

Домашние животные

Логическое форматирование текста . В данном пункте мы рассмотрим теги, по своему эффекту очень напоминающие теги, задающие размер, цвет и начертание шрифта. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может по разному отображаться в разных браузерах, но какой-то эффект гарантирован даже в том случае, когда по какой-то причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, заключенный между открывающим и закрывающим тегами. Закрывающий тег обязателен.
Тег … используется для цитат, названий книг. Обычно изображается курсивом.
Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними.
Тег < CODE >… CODE > указывает на исходный текст компьютерной программы, обычно отображается моноширинным шрифтом (чаще всего шрифт Courier), то есть шрифтом с фиксированным размером.
Тег < KBD >… KBD > оформляет текст, который должен быть (или был) введен с помощью клавиатуры, обычно отображается моноширинным полужирным шрифтом. От английского keyboard - клавиатура
Пример.

Для запуска Windows наберите: win .
Код :
Для запуска Windows наберите: win
Тег … отмечает текст как образец (sample). Используется для отметки текста, выдаваемого программами. Отображается моноширинным шрифтом.
Пример.
Это обычный текст
Тег … используется для выделения переменных в листинге программы. Обычно такой текст отображается курсивом. От английского var iable – переменная.
Пример .
A , B , C
Код:
 A , B , C var >

Тег < EM >… EM > используется для выделения элементов текста (обычно курсивом).
Тег < STRONG >… STRONG > используется для более сильного выделения элементов текста (полужирным шрифтом).
Пример.
Это обычный текст
А это уже текст с использованием тега .
Так как здесь используется смысловое выделение вместо оформительского, рекомендуется использовать эти теги вместо тегов и < B >.

Практическая работа № 2

“Форматирование текста на Web-странице”

Цель: научиться форматировать шрифт и текст на Web -странице.

Указания к выполнению

    В элементе < TITLE > укажите название странички “П/р № 2”.

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

Домашние животные

(заголовок H 1)

(выравнивание по центру)

Собаки

(заголовок H 2)

(выравнивание по центру)

Сторожевые

(выравнивание слева, полужирный шрифт)

Охотничьи

(выравнивание справа, полужирный шрифт)

Дрессировка

(выравнивание по центру, полужирный курсив)

Клубы Выставки Площадки

(выравнивание по центру, размер шрифта 10, цвет шрифта красный, шрифт Arial )

Стихотворение

(цвет шрифта синий, размер шрифта 6, выравнивание по центру)

По жизни я скромен,

Оваций не надо,

Но как же я классно

Смотрюсь у снаряда!

(выравнивание по левому краю, размер шрифта 6)

Создание списков

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

Теги создания ненумерованного списка:

< LI > UL >
Тег
  • является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Тег
  • обозначает каждый из пунктов.

    Пример.


      Пункт 1 списка
      Пункт 2 списка
      Пункт 3 списка

    Вид на экране:

      Пункт 1 списка

      Пункт 2 списка

      Пункт 3 списка

    Теги создания нумерованного списка: < O L> < LI > OL >


    Нумерованные списки. Структура нумерованного списка похожа на структуру ненумерованного списка. Только для обрамления используется тег

    1. . Каждый пункт нумеруется арабскими или римскими числами, буквами латинского алфавита.

    Пример.


      Пункт 1 списка
      Пункт 2 списка
      Пункт 3 списка
      O L>

      Вид на экране:

        Пункт 1 списка

        Пункт 2 списка

        Пункт 3 списка

      Способ нумерации задается при помощи атрибута type . В таблице приведены все способы нумерации:

      Вид нумерации

      Практическая работа № 3

      «Создание нумерованных и ненумерованных списков»

      Цель : научиться создавать списки на Web –страницах.

      Указания к выполнению :

      1 . Создайте новую Web –страницу в редакторе Блокнот.

      2 . В элементе укажите названия странички «П/р № 3».</p> <p><b>3 </b>. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке:</p> <p>Солнце должно быть: </p> <p><i>(Шрифт размером 8, красного цвета, </i></p> <p><i>выравнивание по центру) </i></p> <p>1. Теплым.</p> <p>2. Круглым.</p> <p>3. Желтым.</p> <p>Снег должен быть: </p> <p><i>(Шрифт размером 6, синего цвета, </i></p> <p><i>выравнивание по центру) </i></p> <p>В. Холодным.</p> <p>С. Пушистым.</p> <p><i>(Шрифт обоих списков черный, размер 3). </i></p> <p><i><b>Гиперссылки<br></b> </i><i><u>Виды гиперссылок. </u> </i><i> </i><b>< </b><b>A </b> <b>>… </b><b>A </b> <b>> </b> создание гипертекстовой ссылки.<br>В этом теге обязателен атрибут <b>href </b> <b>. </b>Его значением является адрес URL, на который указывает ссылка. Текст ссылки размещают между тегами <b>< </b><b>A </b> <b>>… </b><b>A </b> <b>>. </b>При отображении документа в браузере текст ссылки обычно подчеркивается и изображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу URL.</p> <p>Можно выделить несколько видов гиперссылок.</p> <ul><p>Внешние (связывают Web-страницу с документами, не принадлежащими данному Web-узлу).</p><p>Внутренние (связывают документы внутри одного и того же Web-узла).</p> </ul><p><i><u>Абсолютный путь. </u> </i><i> </i>Если гиперссылка внешняя, то указывается полный URL документа, называемый еще <i>абсолютным путем. <br>Пример. </i> <A href =”<u><span>http </u> </span><u>:// </u> <u><span>www </u> </span><u>. </u> <u><span>microsoft </u> </span><u>. </u> <u><span>com </u> </span> ”>Microsoft A ><br>Основное неудобство абсолютного пути заключается в том, что при переносе файлов на другой сервер в Интернете требуется менять все гиперссылки.</p> <p><i><u>Относительный путь. </u> </i><i> </i>Если гиперссылка внутренняя, то <b>указывается только та часть </b><b>URL </b> <b>, которая отличается у двух связываемых документов (</b>так называемый<i>относительный путь </i><b>), </b> например, если два документа находятся в одной папке, то достаточно указать имя файла, на который указывает гиперссылка. <br>Если документы находятся в разных папках, то сначала указывается имя папки, затем имя файла, на который указывает гиперссылка.</p> <p><i>Примеры. </i> <A href =”my .htm ”>Моя личная страницаA ><br> <A href =”sport /run .html ”>Бег на длинные дистанцииA ><br>Использовать внутренние ссылки удобнее, так как в этом случае при переносе Web -узла на другой сервер не требуется вносить изменения в отдельные документы.</p> <p><i><u>Якоря. </u> </i><i> </i>Гипертекстовые ссылки могут указывать на определенное место внутри страницы, если в нужное место предварительно вставить <i>якорь </i>. Якорь также использует теги <A > и A >, но вместо атрибута href для него обязательным является атрибут <b>name </b> . Значением этого атрибута является <i>имя якоря. </i>Оно может состоять только из латинских букв, цифр и не должно содержать пробелов. <br>Для ссылки на установленный якорь надо указать имя якоря в конце адреса URL после имени документа, отделив его символом «#».</p> <p><i><u>Указание почтового адреса в гиперссылке </u> </i>. Когда гиперссылка используется для указания адреса электронной почты, ее выбор обеспечивает не переход к новому документу, а запуск почтовой программы на компьютере для отправки сообщения указанному адресату. Обычно такую ссылку размещают в конце страницы для обеспечения связи с Web-мастером или автором страницы, например, <A href =”mailto :vebmaster @mail .ru >Иванов АлексейA ></p> <p><i>Пример.<br></i><HTML ><br> <HEAD ><br> <TITLE >Ссылки и якоряTITLE ><br>HEAD ><br><BODY ><br> Новые версии стандартных программ операционной системы свежие драйверы можно найти на Web -узле компании<br> <A href =”<u><span>http </u> </span><u>:// </u> <u><span>www </u> </span><u>. </u> <u><span>microsoft </u> </span><u>. </u> <u><span>com </u> </span> ”>Microsoft A ><br> <P >А теперь можно перейти к <A href =”my .htm ”>моей личной страницеA ><br></p><p>О том, как связаться с автором, рассказано в <br> <A href =”#address ”>конце этой страницы<br><i> </i>Здесь располагается основное содержание страницы<br><i> </i><a>address”>Адрес электронной почтыA ><br>BODY ><br>HTML ></a></p> <p><b>Практическая работа № 4 </b> </p> <p><b>«Создание гиперссылок» </b> </p> <p><b>Задание 1. </b> Создание простейшей гиперссылки.</p> <p><b>Цель: </b> научиться связывать два HTML –документа с помощью гиперссылок.</p> <p><b>Указания к выполнению: </b> </p> <ul><p>Создайте две Web –страницы в редакторе Блокнот. Одну назовите page 1.htm , вторую page 2.htm . Обе странички сохраните в одной папке под названием site . Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчной буквы.</p><p>В элементе <title > укажите названия странички «П/р № 4. Задание 1».</p> </ul><p>На страницу 2 </p> <p>На страницу 1 </p> <ul><p>Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.</p> </ul><p><b>Задание 2. </b> Создание гиперссылок.</p> <p><b>Цель: </b> научиться связывать три HTML –документа с помощью гиперссылок.</p> <p>Выполнить второе задание вы можете, если успешно справились с Заданием 1.</p> <ul><p>Создайте третью страничку page 3.htm .</p><p>На страничке page 3.htm создайте гиперссылки для перехода на странички page 1.htm и page 2.htm .</p><p>На страничках page 1.htm и page 2.htm добавьте гиперссылку для перехода на страничку page 3.htm .</p><p>Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.</p> </ul><p><b>Задание 3. </b> Цвет гиперссылок<b>. </b> </p> <p><b>Цель: </b> научиться определять цвет гиперссылок.</p> <p>Выполнить задание вы можете, если успешно справились с Заданием 2.</p> <ul><p>На страничках page 1.htm , page 2.htm и page 3.htm в тэге <body > определите цвет гиперссылок:</p> </ul><ul><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.</p> </ul><p><i><b>Рисунки на </b> </i><i><b>Web </b> </i> <i><b>-странице. </b> </i></p> <p>Иллюстрации (рисунки, фотографии) играют важнейшую роль в оформлении Web -страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML , но отображаются браузером внутри. Для этого служит одиночный тег <b>< </b><b>IMG </b> <b>>. </b>Обязательным атрибутом этого тега является атрибут <b>src </b> , значением которого является путь к файлу с рисунком или фотографией,</p> <p>Если картинка лежит в той же папке, что и Web -страница, то путь представляет собой просто имя файла, например: <img src='/programs/gotovaya-web-stranica-s-pomoshchyu-yazyka-html-yazyk-razmetki-gipertekstovyh/' loading=lazy>. Если картинка лежит в другой папке, то эту папку надо указать, например: <img src='/programs/gotovaya-web-stranica-s-pomoshchyu-yazyka-html-yazyk-razmetki-gipertekstovyh/' loading=lazy>. Если картинка лежит на другом сайте, то путь прописывается полностью: <br><img src='https://i1.wp.com/homepage.ru/my/my.jpg' loading=lazy>.</p> <p>В теге <img src='/programs/gotovaya-web-stranica-s-pomoshchyu-yazyka-html-yazyk-razmetki-gipertekstovyh/' loading=lazy> можно также использовать такие атрибуты, как:<br><b>height </b> <b>, </b><b>width </b> – задают высоту и ширину области, в которой демонстрируется рисунок. Если задан только один из этих атрибутов, то второй размер устанавливается в соответствующей пропорции. Но нужно помнить, что масштабирование ухудшает качество изображения. Размер рисунка измеряется в пикселях или в процентах, например: <img src='/programs/gotovaya-web-stranica-s-pomoshchyu-yazyka-html-yazyk-razmetki-gipertekstovyh/' loading=lazy>, <b>border </b> <b> – </b>задаёт толщину рамки вокруг картинки (в пикселях). Этот атрибут можно не задавать, так как, по умолчанию, рамка вокруг картинки есть всегда. Но, если вы хотите её убрать, то <u>выставляйте значение атрибута border равным нулю, <br></u><b>bordercolor </b> – задаёт цвет рамки вокруг картинки, например:<br>< IMG src="picture.gif" border="3" bordercolor="#CC0000"> <br>В нашем примере цвет рамки задан красным, ну, и, естественно, что атрибут border (толщина рамки) не должен равняться нулю, если вы хотите видеть рамку вокруг картинки,<br><b>align – </b>выравнивание картинки относительно других объектов:<br> картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа,<br> картинка - справа, текст - слева.</p> <p>Текст может располагаться также внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):<br>(1) - <br>(2) - <br>(3) - </p> <p><b>vspace </b><span> - задает расстояние между текстом и рисунком (по вертикали):<br>,<br></span><b>hspace </b> <span>- задает расстояние между текстом и рисунком (по горизонтали): </p> <p>< imgsrc=" pr1. png" hspace<span>="30"><br>Расстояние задается в пикселях. </p> <p>С помощью тега <img src='/programs/gotovaya-web-stranica-s-pomoshchyu-yazyka-html-yazyk-razmetki-gipertekstovyh/' loading=lazy> можно использовать изображения в гиперссылках, вставлять картинки в таблицы, решать задачи дизайна…</p> <p><b>Практическая работа № 5 </b> </p> <p><b>«Использование рисунка в качестве гиперссылки» </b> </p> <p><b>Цель </b>: научиться использовать рисунок в качестве гиперссылки.</p> <ul><p>На страничках page 1.htm , page 2.htm и page 3.htm вместо текстовых гиперссылок используйте рисунки. Для этого:</p> </ul><ul><p>откройте папку, указанную учителем (в папке находятся файлы с изображением цветных кнопок), вставьте на первую страничку изображение голубой кнопки и создайте гиперссылку для перехода на вторую страницу:</p> </ul> <ul><p>Самостоятельно вставьте изображение оранжевой кнопки для перехода с первой страницы на третью;</p><p>Задайте бордюр обоих изображений равным 2;</p> </ul><ul><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки работают верно.</p><p>Самостоятельно вставьте изображения кнопок на страницы page 2.htm и page 3.htm и задайте соответствующие гиперссылки.</p><p>Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страничках работают верно.</p> </ul><p><i><u>Альтернативный текст. </u> </i> </span><i> </i> Web<span>-страница может отображаться браузером, не имеющим средств для показа изображений. Пользователи часто отключают показ рисунков, чтобы ускорить прием документа. И в том и в другом случае желательно дать возможность узнать, что же изображено на картинке, если ее нельзя увидеть. Для этой цели используют альтернативный текст, который задается в теге < </span>IMG> атрибутом <b>alt </b><b> (или </b> <b>title </b><b>), </b> <span>этот атрибут выводит текст в месте расположения картинки во время её загрузки. Например: </p> <p><img src='/programs/gotovaya-web-stranica-s-pomoshchyu-yazyka-html-yazyk-razmetki-gipertekstovyh/' loading=lazy></p> <p><i><u>Использование рисунка в качестве фона </u> </i>. Если вы хотите использовать рисунок в качестве фона странички (“обоев”), то в теге <BODY > используем этот атрибут с указанием адреса картинки. Например:</p> <p><BODY background =”boss3.gif” >.</p> <p><i><b>Фреймы </b> </i></p> <p><i><u>Размещение нескольких документов на одной Web-странице. </u> </i>Язык HTML позволяет разбить окно программы броузера на несколько частей и в каждой из них отобразить отдельный документ. Такие области называются <i>фреймами. </i><b> <br></b>Чем отличается структура документа HTML , содержащего фреймы, от обычного документа HTML ? Такой документ не содержит раздела «тела» документа и не содержит какого-либо текста вообще. Вместо этого он содержит описание фреймов и названия документов, загружаемых в отдельные области. <b><br>< </b><b>FRAMESET </b> <b>>… </b><b>FRAMESET </b> <b>> </b>тегописания фреймов.<b><br></b>Между тегами <b>< </b>FRAMESET >…FRAMESET > содержится описание размеров и порядка размещения областей в окне броузера, а также задаются документы, которые должны загружаться в каждую из этих областей.<br>Тег <FRAMESET > должен содержать обязательный атрибут <b>cols </b> или <b>rows, </b>определяющий способ разбиения окна. Значения этих атрибутов определяют высоту (или ширину) областей окна. Их задают через запятую в пикселах или в процентах. В качестве последнего параметра можно использовать символ «звездочка» (*). Под такой фрейм выделяется все свободное пространство.<br>При использовании атрибута cols окно делится на области вертикальными линиями, а при использовании атрибута rows – горизонтальными, например, <br><FRAMESET rows =”45%,30%,25%”>, <FRAMESET cols =”40%,30%,30%”><br>Если заданы оба этих атрибута, в окне создается сетка из подобластей, например,<br><i> </i><frameset rows =30%,30%,30%><br> <frame src =name .htm ><br> <frame src =sun .htm ><br><frameset cols =50%,*><br> <frame src =cat 1.htm ><br> <frame src =cat 2.htm ><br>frameset ><br>В результате экран делится на четыре подобласти: две горизонтальных и две вертикальных. Причем, именно третье значение атрибута <i>rows </i>позволяет отвести на экране место под вертикальную подобласть.</p> <p><b>< </b><b>FRAM </b> <b>E> - </b>одиночныйтег, вложенный в тег <FRAMESET >, должен содержать обязательный атрибут <b>src </b> <b>, </b>определяющий документ, который будет загружен в отдельную область, например, <FRAME src =”doc 3.htm ”><br><i>Пример.<br></i> <html ><br> <head ><br> <meta http -eguiv ="Content -Type " content ="text /html ;charset =windows -1251"> <meta name ="Author " content ="Ivanov Ivan "><br> <meta name ="Keywords " content ="Животные, собаки, клубы"><br>head ><br><title >Страница с навигационной панельюtitle ><br> <frameset cols =25%,*><br> <frame src =19_1.htm ><br> <frame src =19_2.htm ><br>frameset ><br>html ><br>А </p> <p><img src='https://i2.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m27ce16d6.jpg' align="bottom" width="100%" loading=lazy></p> <p><i><u>Качество документов HTML. </u> </i></p> <p>Творческий характер создания документов HTML сродни програм­мированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разно­образие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.</p> <p>Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти осо­бенности. Чтобы создать хороший документ HTML, следует при­держиваться ряда достаточно простых правил.</p> <p>3. Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних дости­жений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям требу­ется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.</p> <p>4. Ошибка, которую часто делают новички, состоит в злоупотреб­лении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схе­мой или при отсутствии необходимых шрифтов.</p> <p>5. Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.</p> <p>6. Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программирование как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнару­жить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.</p> <p>7. Фреймы - очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораз­до больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов - удобство поль­зователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.</p> <p>8. Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка доку­мента Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большо­го количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.</p> <p><b>Практическая работа № 6<br>«Размещение нескольких документов на одной Web-странице» </b> </p> <p><b>Цель: </b> научиться создавать фреймы в текстовом редакторе Блокнот.<br><b>Указания к выполнению: </b></p> <ul><p>Откройте текстовый редактор Блокнот.</p><p>Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом:</p> </ul><p><img src='https://i0.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_25dae440.png' align="bottom" width="100%" loading=lazy></p> <ul><p>В элементе укажите название странички «П/р №6».</p><p>Просмотрите созданную Web-страницу в окне браузера.</p><p><br>Внесите в него следующие изменения: в атрибуте <i>rows </i>измените два первых значения, <i> </i>уберите третье значение.</p><p>Сохраните изменения.</p><p>Просмотрите результат в браузере. Что изменилось?</p><p>Отмените изменения, вернитесь к исходному состоянию Web-страницы.</p><p>Просмотрите Web-страницу в окне браузера.</p> </ul><h6>Тема 3. Графика на Web -странице</h6> <p><i><b>Элементы теории компьютерной графики </b> </i></p> <p><i><u>Цветовая модель. </u> </i></p> <p>Изображение может быть чёрно-белым, полутоновым (оттенки одного цвета) и цветным. Однако, цветное изображение в зависимости от его назначения может быть в разной цветовой палитре. Палитра RGB используется в мониторах компьютеров, т.е. для изображений которые будут просматриваться на мониторе. Палитра CMYK используется при создании изображений, предназначенных для вывода на печать.</p> <p>Наиболее распространённая цветовая модель называется RGB Red – красный, Green – зелёный, Blue – синий) по названиям трёх базовых цветов, используемых в ней для образования всех прочих. Цветовую модель RGB обычно иллюстрируют картинкой в виде трёх пересекающихся кружков. В центре пересечения эти три цвета в сумме дают белый цвет. Попарное пересечение смежных кружков даёт дополнительные цвета: жёлтый, голубой, пурпурный.</p> <p>В модели RGB присутствует три канала – красный, зелёный и синий, то есть RGB – трёхканальная цветовая модель.</p> <p>Каждый из трёх цветовых компонентов RGB может принимать одно из 256 значений – от максимальной интенсивности(255,2555,255 - белый) до нулевой интенсивности (0,0,0 – чёрный), т.е. абсолютно любой цвет и оттенок цвета можно получить сочетанием красного, зелёного и синего цветов в различных пропорциях</p> <p>Для того чтобы создать гармоничную цветовую композицию, необходимо знать характеристики цвета. Таких характеристик естественно много, мы рассмотрим лишь основные.</p> <p><i><u>Характеристики цвета </u> </i></p> <p>Одна из цветовых схем характеризует естественные свойства любого оттенка, - это схема HSV (тон, насыщенность, яркость)</p> <p>Hue тон – одна из точек цветового круга, максимально яркая и насыщенная.</p> <p>Saturation насыщенность – соотношение основного цвета и такого же по яркости серого.</p> <p>Value яркость – общая яркость цвета (крайние позиции – чёрный и максимально яркий тоновый)</p> <p><b>Практическая работа № 6 </b> </p> <p><b>«Работа с цветовой моделью RGB» </b> </p> <p><i><b>Задание 1. Определение цвета в формате </b> </i><i><b>RGB </b> </i> </p> <p><b>Цель </b>: научиться определять цвет в формате RGB .</p> <p><b>Указания к выполнению: </b></p> <ul><p>Запустите графический редактор Paint (Пуск – Программы – Стандартные)</p><p>Определите, какой цвет записан в модели RGB и заполните таблицу:</p> </ul><p>Для этого выполните команду Палитра – Изменить палитру. В диалоговом окне Изменение палитры щёлкните на кнопке Определить цвет, введите числовые значения для цветов в текстовые поля внизу от цветового поля. Допустимый диапазон для каждого блока от 0 до 255, при этом 0 соответствует самому тёмному, а 255- самому светлому.</p> <p><i><b>Задание 2. Смешение цветов разной интенсивности в графическом редакторе </b> </i> Paint </p> <p><b>Цель </b>: научиться работать с цветом разной интенсивности в простейшем графическом редакторе.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Определите, какой цвет будет получен в результате смешения двух цветов максимальной интенсивности (255):</p> </ul><ul><p>красного и зеленого;</p><p>зеленого и синего;</p><p>красного и синего.</p> </ul><ul><p>Определите, какой цвет будет получен в результате смешения двух цветов половинной интенсивности (127):</p> </ul><ul><p>красного и зеленого;</p><p>зеленого и синего;</p><p>красного и синего.</p> </ul><p>зеленый и синий</p> <p>красный и синий</p> <p>максимальная интенсивность</p> <p>половинная интенсивность</p> <p><i><b>Задание 3. Рисование заданным цветом в графическом редакторе </b> </i><i><b>Paint </b> </i> <i><b>. </b> </i></p> <p><b>Цель </b>: научиться определять цвет.</p> <p><b>Указания к применению: </b></p> <ul><p>В новом файле нарисуйте следующие геометрические фигуры, заданного цвета:</p> </ul><ul><p>Квадрат (205, 44, 100);</p><p>Прямоугольник (0, 230, 69);</p><p>Круг (30, 30, 30);</p><p>Овал (200, 100, 20);</p><p>Треугольник (10, 10, 10);</p><p>Трапеция (50, 50, 250).</p> </ul><p><i><u>Цветовые схемы </u> </i></p> <p>Зная особенности восприятия каждого цвета и цветовых сочетаний, можно построить целый ряд готовых схем. Каждая из этих схем, будучи воплощённой в жизнь, звучит по своему, вносит определённое настроение в композицию.</p> <p>Если мы хотим добиться гармоничного сочетания цветов, то можно взять несколько близлежащих, расположенных один за другим на цветовом круге. Например жёлтый и желто-зеленый.</p> <p>Для создания контраста выбирают цвета противоположные, расположенные напротив друг друга. Такие цвета называются дополняющими. Применённые рядом, они делают друг друга ярче и живее. Пары жёлтый – фиолетовый, пурпурный – зелёный – примеры дополняющих цветов.</p> <p>Кроме использования цветов, расположенных рядом друг с другом, можно попробовать использовать одни и те же цвета, но разной степени насыщенности.</p> <p>Однако самый надёжный и неисчерпаемый источник цветовых схем – природа. Человек является её частью, и ничто так не радует его глаз, как гармония естественной нежности и красоты.</p> <p>Престижные цвета: золото, серебро, тёмно-серый, чёрный. Их задача – передать солидность, уверенность, стабильность, и высокую стоимость.</p> <p>Пастельные цвета: нежные, бежевые, розовые, голубоватые – женственные, мягкие, расслабляющие.</p> <p>«Здоровые» цвета: из американской психологии – чистота, здоровье, уверенность, семья (жёлто-зелёная гамма с добавлением чёрного цвета).</p> <p>Природные цвета: близкие к естественным органическим, природным компонентам.</p> <p>«Растяжки» как вариант использования цвета – это обычно тональные оттенки одного цвета и как акцент – более активный цвет</p> <p>Лучше придерживаться проверенного временем рецепта: пользоваться минимумом цветов, но сами цвета при этом подбирать по возможности контрастные. Основное требование к паре цветов для фона и текста – достаточный контраст между ними, необходимыми для комфортного чтения.</p> <p><i><u>Безопасная палитра. </u> </i></p> <p>Нельзя забывать, что создатель Web -страницы не имеет ни малейшего понятия о том, на какой модели компьютера, и под управлением каких программ будет просматриваться его произведение. Он не уверен, не превратится ли его «зелёная ёлка» в красную или оранжевую на экранах пользователей.</p> <p>Поэтому все популярные программы для просмотра Web -страниц (броузеры) заранее настроены на некоторую одну фиксированную палитру. В этой палитре не 256 цветов, а лишь 216. Это связано с тем, что не все компьютеры могут воспроизводить 256 цветов.</p> <p>Такая фиксированная палитра, жёстко определяющая индексы для кодирования 216 цветов, называется безопасной палитрой.</p> <p><i><u>Растровая графика </u> </i></p> <p>Основой растрового представления графики является пиксел (точка) с указанием её цвета. При описании, например, красного эллипса на белом фоне приходится указывать цвет каждой точки, как эллипса, так и фона. Изображение представляется в виде большого количества точек – чем их больше, тем визуально качественнее изображение и больше размер файла.</p> <p>Растровое представление обычно используют для изображения фотографического типа с большим количеством деталей или оттенков. Масштабирование таких картинок в любую сторону обычно ухудшает качество.</p> <p><i><u>Векторная графика </u> </i></p> <p>Векторное представление заключается в описании элементов изображения математическими кривыми с указанием их цветов и заполненности. Красный эллипс на белом фоне будет описан всего двумя математическими формулами – прямоугольника и эллипса соответствующих цветов, размеров и местоположения. Очевидно, что такое описание займёт значительно меньше места, чем в случае с растровой графикой. Ещё одно преимущество – качественное масштабирование в любую сторону.</p> <p>Выбор растрового или векторного формата зависит от целей и задач работы с изображением. Если нужна фотографическая точность цветопередачи, то предпочтительнее растр. Логотипы, схемы, элементы оформления удобнее представить в векторном формате.</p> <p><i><u>Форматы графических файлов для Интернета </u> </i></p> <p>GIF и JPEG – это два наиболее популярных графических формата, которые фактически стали стандартами для использования на WWW .</p> <p>Фотографии лучше всего сохранять в формате JPEG , а иллюстрации в формате GIF </p> <p><i><u>Оптимизация графики. </u> </i></p> <p>Для Web -страниц очень важным является вопрос размера фотографии.</p> <p>Самый первый этап оптимизации – выделение в фотографии главного с отбрасыванием всего остального и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение для достижения наименьшего размера. Но с размерами фотографий нужно придерживаться определенного компромисса – не делать их слишком мелкими. И не делать их слишком огромными. Обычно фотография имеет размер 250 х 300 пикселов и занимает порядка 6-10 Кбайт. Это не значит, что все фотографии должны иметь такие же размеры, но площадь фотографии должна быть ей эквивалентна. Так, например, файл размером 45,93 Кбайта при скорости загрузки 28,8 Кбита в секунду будет загружаться в браузер 17 секунд.</p> <h4>Практическая работа № 8</h4> <p><b>«Размещение графики на Web-странице» </b> </p> <p><i><b>Задание 1. Оформление цветом </b> </i><i><b>Web </b> </i> <i><b>-страницы. </b> </i></p> <p><b>Цель: </b> научиться создавать цветной фон Web -страницы, использовать шрифт различного цвета и размещать горизонтальные линии на страницы.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Создайте новую Web -страницу в редакторе Блокнот.</p><p>В элементе <title > укажите название странички «П/р № 8. Задание 1».</p><p>В начальном элементе <body > используйте соответствующий атрибут, чтобы сделать цвет фона странички черным.</p><p>Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 12.</p><p>Вставьте горизонтальную линию красного цвета.</p><p>Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 8.</p><p>Вставьте горизонтальную линию синего цвета толщиной 10 пикселов, длиной 50% от ширины экрана, и выровняйте ее по центру.</p> </ul><p><i><b>Задание 2. Размещение графики на Web-странице. </b> </i></p> <p><b>Цель </b>: научиться размещать графические изображения на Web -странице.</p> <p><b>Указания к выполнению: </b></p> <ul><p>Создайте новую Web -страницу в редакторе Блокнот.</p><p>В элементе <title > укажите название странички «П/р № 8. Задание 2».</p><p>Если в тэге <body > не указывать цвет странички, то по умолчанию фон будет белым.</p><p>Разместите на страничке рисунок футбольного меча. Файл с именем soccer .gif находится в папке, указанной учителем. Для размещения изображения вам потребуется указать путь к файлу в элементе <img src='/programs/gotovaya-web-stranica-s-pomoshchyu-yazyka-html-yazyk-razmetki-gipertekstovyh/' loading=lazy>. Чтобы упростить описание пути к этому графическому файлу, скопируйте этот файл в ту же папку, в которой будет сохранена Web -страничка. Тогда элемент будет выглядеть следующим образом:</p> </ul><p>Если файл не находится в одной папке с Web -страничкой, то необходимо указать относительный путь к этому файлу.</p> <ul><p>Сделайте подпись к рисунку «Футбольный мяч» с помощью атрибута alt (title ).</p><p>Создайте рамку вокруг рисунка шириной 2 пиксела.</p><p>Над рисунком поместите заголовок «Мир футбола» самого большого размера и выровняйте его по центру страницы.</p> </ul><p><b>Тема 4. Теги HTML. Таблицы </b></p> <p><i><b>C </b> </i> <i><b>оздание и форматирование таблиц<br></b> </i><i><u>Задание строки и ячейки таблицы. </u> </i>Таблица – это один из наиболее удобных способов представления больших объемов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц.<br>При создании таблиц используется принцип вложения: внутри основного элемента таблицы</p>TR > - тег, задающий строку таблицы. Конечный тег можно не использовать, так как строка заканчивается там, где начинается следующая строка. <br>…TD > - тег, задающий ячейку таблицы. Конечный тег также можно не использовать.<br>Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в теле документа. Например, ячейка таблицы может содержать вложенную таблицу или рисунок. Броузеры автоматически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов.<br><i>Пример (таблица, состоящая из двух строк и столбцов).<br></i><TABLE ><br>ГосударствоСтолица<br>РоссияМосква<br>ФранцияПариж<br>TABLE ><br>Вот как это выглядит на экране: <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p><i><u>Задание ширины рамки таблицы. </u> </i> С помощью атрибута <b>border </b>можно задаватьширину рамки таблицы в пикселях, например: <br><TABLE bor der=”2”><br>Можно сделать грани таблицы невидимыми, для этого ширину рамки таблицы нужно задать равной 0, например, <TABLE width =”300” bgcolor =”#00cc 99” bor der=”0”></p> <p><i><u>Задание ширины и высоты таблицы </u> </i><i>. </i>Ширину и высоту таблицы можно задавать точно в пикселях или в процентном отношении к ширине страницы в окне броузера. Существуют стандартные атрибуты:<br><b>width </b> – ширина;<br><b>height </b> – высота.<br>Например, если нам нужно задать таблицу определенного размера, например, шириной в 500 пикселей, то мы укажем:<br><TABLE width =”500” bor der=”1”><br>Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы, как 100%.<br><TABLE width =”100%”bor der=”1 ”><br>Вот как это выглядит на экране:</p> <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p>Если нам при этом необходима большая высота строк, например, 300 пикселей, то мы укажем еще один атрибут:<br><TABLE width=”100%” height=”300” bor der=”1”><br><i><u>Задание цвета фона и цвета ячеек таблицы </u> </i><i>. </i>Для всей таблицы может быть задан цвет фона, для этого существует атрибут <b>bgcolor </b>. Значением этого атрибута может быть либо английское слово, например, red, либо шестнадцатеричный код, например, #FF0000.<br>Например, если в созданной нами самой первой таблице нужно задать серебристый фон, то мы укажем: <TABLE bgcolor=#c0c0c0></p> <p>Вот как это выглядит на экране:</p> <p>Номер телефона</p> <p>Петрова А.И.</p> <p>Смирнов В.П.</p> <p>Можно задавать отдельно цвет ячеек таблицы. В этом случае атрибут bgcolor помещается внутри элемента</p><p>Например, <br><TABLE width=500 border =1><br>ГосударствоСтолица<br>Gold>РоссияYellow>Москва<br>Maroon>ФранцияOrange>Париж<br>TABLE > </p><p>Вот как это выглядит на экране:</p> <p><i><u>Выравнивание данных в ячейках таблицы.<br></u> </i>C уществует набор атрибутов, предназначенных для выравнивания данных в ячейках таблицы. Атрибут <b>align </b> позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:<br>Left – выравнивание влево;<i><u><br></u> </i>Right – выравнивание вправо;<br>Center - выравнивание по центру.<br>Атрибут <b>valign </b> позволяет выравнивать текст по вертикали. Значения могут быть следующие:<br>Top – выравнивание по верхнему краю ячейки;<br>Middle – выравнивание по центру;<br>Baseline – выравнивание по первой строке<br><i>Пример.<br></i><TABLE width =100% border =1 align =center ><br> <TR ><br> <TD ><B >Выравнивание по горизонталиB >TD ><br></p><p>По центру <br>left> По левому краю <br> По правому краю <br> <TR ><br> <TD ><B >Выравнивание по вертикалиB >TD ><br>valign=top > По верхнему краю TD ><br> <TD valign =middle > По центру TD ><br> <TD valign =baseline > По нижнему краю TD ><br>TR ><br>TABLE ><br>В результате мы получим следующую таблицу: <b>Выравнивание по горизонтали </b> </p><p>По центру</p> <p>По левому краю</p> <p>По правому краю</p> <p><b>Выравнивание по <br>вертикали </b></p> <p>По верхнему краю</p> <p>По центру</p> <p>По нижнему краю</p> <p><b><br>< </b><b>table </b> <b>width </b> <b>=500 </b><b>border </b> <b>=3> </b></p> <p> <b>Успеваемость </b> </p> <b>N <b>п </b><b>/ </b> <b>п </b> </b><b><b>Фамилия </b> </b><b><b>Школа </b> </b><b><b>Класс </b> </b><p><b> <span><b>Практическая работа № 9<br>«Создание и форматирование таблицы» </b> </span> </b></p><p><b><b>Цель: </b> научиться создавать и форматировать простые таблицы в текстовом редакторе Блокнот.<br><b>Указания к выполнению: </b> </b></p><p><b>Создайте новую Web-страницу, которая в броузере должна выглядеть следующим образом: </b></p><b>Фамилия </b><p><b>Номер телефона </b></p><p><b>Петрова А.И. </b></p><p><b>31-74-16 </b></p><p><b>Смирнов В.П. </b></p><p><b>46-29-89 </b></p><p><b> Цвет фона таблицы - серебристый, ширина рамки таблицы – 1. </b></p><p><b>В элементе укажите название странички «П/р №14». </b></p><p><b>Просмотрите созданную Web-страницу в окне броузера. </b></p><p><b>Вернитесь к сохраненному в Блокноте файлу.<br>Внесите в него изменения так, чтобы Web-страница в броузере выглядела следующим образом: </b></p><p><b> Телефонный справочник </b></p> <b> Фамилия </b><p><b> Номер телефона </b></p><p><b>Петрова А.И. </b></p><p><b>31-74-16 </b></p><p><b>Смирнов В.П. </b></p><p><b>46-29-89 </b></p> <p>Цвет фона ячеек первой строки – светло-зеленый, цвет фона ячеек остальных строк – серебристый, ширина рамки таблицы – 5. </p><p><b>Просмотрите Web-страницу в окне броузера. </b></p><p><b>Сохраните изменения. </b></p><p><b><i><u><b>Объединение строк или столбцов в ячейке </b> </u> </i><i>. </i> </b></p><p><b>При построении сложных таблиц бывает необходимо объединить (слить) в одной ячейке несколько строк или столбцов. Для этого существуют атрибуты: <b>colspan - у </b>казывает количество столбцов, объединенных в одной ячейке (по умолчанию=1), <b>rowspan - у </b>казывает количество строк, объединенных в одной ячейке (по умолчанию=1). <i>Примеры: </i> </b></p><b>1 </b><p> <b>1 </b></p><p>Все отличие такого построения таблиц заключается в появлении параметра <b>rowspan="2", </b>цифра в которой, соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в ячейке. Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди ячейки с двойкой стоит ячейка с цифрой три? Все очень просто - <i>буквально </i> код для первой строки расшифровывается как "ячейка, содержащая данное 1", "ячейка, содержащая данное 3, состоящая из ДВУХ подстрок", код для второй строки расшифровывается как "ячейка, содержащая данное 2". <u>Как видим, физически ячейка 3 принадлежит к ПЕРВОЙ строке! </u></p> <p>Если же у нас существуют ячейки, совмещенные по горизонтали, то вместо тега <b>rowspan </b> используется тег <b>colspan </b>, естетсвенно, в той ячейке, которая занимает площадь нескольких столбцов). <i>Например: </i><i> </i> </p> <table width="684" border="0"><tr valign="top"><td width="80"> </td> <td width="79"> </td> </tr></table><table width="200" border="1"><tr align="center"><td colspan="2">1 </td> </tr><tr align="center"><td>2 </td><td>3 </td> </tr></table><p><b>Практическая работа № 10<br>«Объединение строк или столбцов в ячейках таблицы» </b> </p> <p><b>Цель: </b> <span> научиться создавать сложные таблицы в текстовом редакторе Блокнот.<br></span><span><b>Указания к выполнению: </b> </p> <ul><p>Откройте текстовый редактор Блокнот. </p><p>Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом: </p> </ul><p>Успеваемость </p> п/п <p>Фамилия </p> <p>Школа </p> <p>Класс </p> <p>Оценки по химии </p> <p>1 п/г </p> <p>2 п/г </p> <p><b>Иванов </b> </p> <p><b>Петров </b> </p> <p><b>Сидоров </b> </p> <p>Цвет фона первой строки таблицы - аквамарин, ширина таблицы – 500, ширина рамки таблицы – 3. </p> <ul><p>В элементе укажите название странички «П/р №10». </p><p>Просмотрите созданную Web-страницу в окне браузера. </p><p>Вернитесь к сохраненному в Блокноте файлу.<br></span><br></p> </ul><p><i><u>Разметка Web-страницы при помощи таблицы. </u> </i> Разметку Web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки. Рассмотрим некоторые из них. <br><b>Первый вариант. </b> Разметка страницы производится с использованием страницы шириной на весь экран, независимо от того, каково разрешение экрана (width =”1000%”). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта. При такой разметке страничка всегда будет занимать весь экран, не зависимо от того, какое разрешение экрана стоит у посетителя (рис. 4.12).</p> <p><img src='https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m775cb074.png' align="bottom" width="100%" loading=lazy></p> <p><b>Рис. 4.12. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Первый вариант </p> <p>К недостаткам такой разметки можно отнести "плавучесть" содержимого страницы, т. е. при уменьшении разрешения экрана содержимое должно поместиться в более узкие рамки, следовательно текст "сползает" вниз. Чтобы этого не происходило, нужно выбрать фиксированный размер таб­лицы, тогда при любом разрешении экрана таблица будет выглядеть неиз­менной.</p> <p><b>Второй вариант. </b> Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана. При этом посетитель, у которого разрешение экрана равно 800x600 пикселов, будет видеть страничку шириной практически во весь экран, а посети­тель, у которого разрешение монитора равно 1024x768 и выше, будет ви­деть таблицу шириной 760 пикселов по центру экрана и белые поля по бокам от нее.</p> <p>В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web-сайта, а третья строка непосредственно под содержание сайта (рис. 4.13).</p> <p><img src='https://i2.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_20004b1a.png' align="bottom" width="100%" loading=lazy></p> <p><b>Рис. 4.13. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Второй вариант </p> <p>Если необходимо разместить внутри текста странички какие-либо иллюстра­ции, фотографии и пр., то в этом случае также используются таблицы. В приведенном ниже примере во вторую ячейку второй строки вставлена таб­лица, состоящая из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой строки -название страницы. Во все ячейки второй строки введен текст (рис. 4.14).</p> <p><b>Рис. 4.14. </b> </span><span>Пример разметки </span><span>Web </span><span>-страницы. Третий вариант </p> <br clear="left"><br><img src='https://i2.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m32b43cfb.png' align="bottom" width="100%" loading=lazy><h6>Тема 5 . Итоговая работа «Создание Web-сайта на заданную тему в ТР «Блокнот»</h6> <p>Учащиеся дома разрабатывают и оформляют на бумаге в виде творческой работы проект Web-сайта, а затем на уроке реализовывают его средствами языка HTML .</p> <p>_____________________________________________________________________________</p> <p>Курс разработан на основе книги И. Смирновой "Начала Web-дизайна".</p> <p>Создание сайтов - это сложный процесс, разбитый на несколько этапов. На первом этапе делают дизайн сайта в графическом виде: так называемые эскизы или прототипы сайта. На деле это выглядит как несколько цветных изображений будущего сайта, которые предоставляются заказчику на утверждение. </p><p>Эскизы или прототипы сайта обычно создаются в программах для графического дизайна. Из профессиональных программ выделим три наиболее распространенные - это , <b>Adobe Illustrator </b>, и <b>CorelDRAW </b>. Есть, конечно, масса других менее профессиональных но не менее любопытных программ, однако на них мы пока не будем заострять свое внимание. </p><p><b>Следующий этап </b> - это утомительная череда многочисленных исправлений и утверждений этих самых эскизов заказчиком. </p><p>Ну вот дизайн сайта создан, откорректирован и утверждён заказчиком, теперь его нужно сверстать, а что же такое верстка? </p><p><b>Ещё один этап </b> в создании сайта: вёрстка. <br><b>Верстка </b> - это создание Web-страницы по эскизу или прототипу сайта. А это значит, что всё то, что "наваял" дизайнер в одной из вышеперечисленных программ, а также, всё что написал копирайтер в виде текстовых файлов, программисту-верстальщику нужно аккуратно и со смыслом разрезать, написать код каждой страницы, поместить в код нарезанные картинки и текст, соединить страницы между собой сквозными ссылками и переходами, добавить формы и прочее, прочее, прочее… Монотонная, рутинная работа. Более подробно о этапах создания сайта можно прочитать </p><p>И наконец, последний этап - "заливка" готового сайта на сервер постоянной дислокации, настройка и отладка, чтобы всё работало так как нам нужно без глюков и багов. </p><p>Итак, чтобы написать сайт, вам потребуется знать такие языки программирования как: <b>HTML, CSS, JavaScript, PHP, MYSQL </b>. Существуют и другие языки, но это наиболее популярные, на сегодняшний день. И я расскажу вам о каждом языке подробней. </p><p><b>HTML </b> (HyperText Markup Language) - это язык разметки, описывающий форму отображения информации. Этот язык используют для создания основания сайта, иными словами для каркаса сайта. </p><p><b>CSS </b> (Cascading Style Sheets) - это язык с помощью которого можно контролировать внешний вид Web-страницы. С помощью CSS можно задавать точные характеристики практически всех элементов Web-страницы. </p><p><b>JavaScript </b> - это язык так сказать для "оживления" Web-страницы, с помощью этого языка можно сделать Web-страницу интерактивной, или другими словами, заставить взаимодействовать с пользователем. С его помощью можно сделать всплывающие окна или подсказки, а также многое другое. Этот язык служит не только для применения в Web-разработке. </p><p><b>PHP </b> - это язык для написания сервер скриптов. Он наиболее популярен в настоящее время, и не труден в освоении. С помощью PHP можно обрабатывать данные на сервере, работать с файлами, рассылать письма, размещать чат, форум и многое другое. </p><p><b>MYSQL </b> - это база данных. С помощью этого языка можно добавлять, изменять или удалять данные, получать информацию по запросу. Если знать MYSQL то можно легко изучить и другие языки баз данных.</p> <h3>Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже</h3> <p>Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.</p> <ul><li><ul><li>Введение</li> <li>1. Основные сведения</li> <li>1.1 О языке html</li> <li>1.2 Создание web сайта</li> <li>1.3 Основные положения</li> <li>1.4 Структура документа</li> <li>1.5 Тэги тела документа</li> <li>1.6 Список базовых тэгов html</li> <li>2. Дополнительные сведения</li> <li>2.1 Тэги списков</li> <li>2.2 Гипертекстовые ссылки</li> <li>2.3 Графика внутри документа</li> <li>2.4 Добавление стилей в документ</li> <li>2.5 Специальные тэги html</li> <li>2.6 Html формы</li> <li>2.7 Html фреймы</li> <li>2.8 Html таблицы</li> <li>2.9 Оптимизация графики для web</li> <li>2.10 Основы css</li> <li>3. Описание создания сайта</li> <li>3.1 Подготовка</li> <li>3.2 Создание главной страницы</li> <li>3.3 Создание второй страницы</li> <li>3.4 Создание страницы с описанием города</li> <li>3.5 Страница с фотографиями</li> <li>3.6 Страница с программами</li> <li>3.7 Страница с благодарностями</li> <li>Заключение</li> <li>Список использованной литературы</li> </ul></li> </ul><h2><b><b>Введение </b> </b></h2> <h2></h2> <h2>Эта дипломная работа посвящена языку HTML. С помощью этого языка создаются файлы с расширением *.htm и *.html, являющиеся Web-страницами. Из них состоят сайты сети Интернет.</h2> <h2>К дипломной работе прикреплён сайт, как пример того, что можно создать при помощи языка HTML.</h2> <p>Вся работа разделена на 3 раздела. Первый раздел полностью посвящён описанию основных тэгов HTML. В нём вы найдёте всю необходимую информацию о том, как создавать простые Web-страницы. Во втором разделе имеются сведения о том, как улучшить внешний вид документа и встроить в него дополнительные возможности. А третий раздел содержит описание того, как создавался сайт, прикреплённый к этой дипломной работе. В нём подробно описаны полтора месяца нелёгкой работы по созданию сайта, рассказано о различных ошибках при создании и их исправлении, о возникавших затруднениях и методах их устранения.</p> <h2>После прочтения этой работы любой человек, даже совсем незнакомый с программированием, сможет понять основы программирования на HTML. А знающие, возможно, найдут что-нибудь новое для себя.</h2> <h2><b>1. </b><b>Основные сведения </b></h2> <h2></h2> <h2><b><b>1.1 </b><b>О </b><b>языке </b><b>HTML </b> </b></h2> <h2></h2> <p>Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.</p> <p>Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML, вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.</p> <p>В большинстве случаев автор документа строго определяет внешний вид документа. В случае HTML читатель, основываясь на возможностях WEB-броузера, может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку. Пользователи некоторых WEB-броузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.</p> <p>HTML-тэги могут быть условно разделены на две категории:</p> <p>1. Тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.</p> <p>2. Тэги, описывающие общие свойства документа, такие как заголовок или автор документа.</p> <p>Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.</p> <h2><b>1.2 </b><b>Создание </b><b>Web </b><b>сайта </b></h2> <h2></h2> <p>HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора.</p> <p>Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.</p> <p><b><b>1.3 </b><b>Основные </b><b>положения </b> </b></p> <p>Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:</p> <p><TITLE> Заголовок документа

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

      Некоторые тэги, такие, как

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

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

      Заголовок документа

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

      И
      . Более подробно о тэгах 
      Будет написано ниже.
      

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

      

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

      Тело документа...
      

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

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

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

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

      

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

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


      

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

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

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

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

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

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

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

      Тэг абзаца

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

      Дополнительные параметры тэга

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

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

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

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

      а) перевод строки
      

      б) символы табуляции (сдвиг на 8 символов вправо)
      

      в) непропорциональный шрифт, устанавливаемый броузером.
      

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

       Список сотрудников 
      

        
      


      Данный список содержит фамилии, имена и отчества
      

      всех сотрудников нашей компании.

      





      Список может быть использован только в служебных целях.
      

      Внимание! Заголовок "Список сотрудников" не отображен броузером как часть документа. Он появится в заголовке окна броузера.
      

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

      Алексей Ярцев
       Дмитровское шоссе,
       д.9Б, офис 326
      

      Дополнительный параметр позволяет расширить возможности тэга 
      .
      


      

      Данный параметр позволяет не просто выполнить перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна броузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг 
       для смещения текста ниже рисунка:
      

      Как вы можете видеть, данная схема демонстрирует связь
        Мастер/Деталь 
      .
      

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

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

      Данная строка является самой длинной строкой документа,
      

      которая не допускает какого-либо разбиения, где бы то ни было.
      

      Цитата 
      . Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом 
      , отступает от левого края документа на 8 пробелов. Например: На открытии данной конференции глава представительства произнес: 
       
       Сегодня один из величайших дней для нашей компании.
       Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. 
      

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

      На открытии данной конференции глава представительства произнес:
      

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

      

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

      

      

      Таблица №1: Основные тэги

Стартовый

Завершающий

Описание

Обозначение HTML-документа

Заголовочная часть документа

Заголовок документа

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

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

Заголовок абзаца второго уровня

Заголовок абзаца третьего уровня

Заголовок абзаца четвертого уровня

Заголовок абзаца пятого уровня

Заголовок абзаца шестого уровня

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

Перевод строки без конца абзаца

Описанные ранее тэги - это все, что необходимо вам для того, чтобы начать работать с HTML.

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

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

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

Существует три основных вида списков в HTML-документе:

а) пронумерованный

б) непронумерованный

в) список описаний

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

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

    и завершается тэгом
  • . Например:

    1. Программирование
    2. Алгоритмизация
    3. Проектирование

    1. Программирование

    2. Алгоритмизация

    3. Проектирование

    Тэг

      может иметь параметры:

        Вид счетчика:

        A - большие латинские буквы (A,B,C...)

        a - маленькие латинские буквы (a,b,c...)

        I - большие римские цифры (I,II,III...)

        i - маленькие римские цифры (i,ii,iii...)

        1 - обычные цифры (1,2,3...)

        Число, с которого начинается отсчет

        Например:

        1. Программирование
        2. Алгоритмизация
        3. Проектирование

        XV. Программирование

        XVI. Алгоритмизация

        XVII. Проектирование.

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

        Пронумерованный список начинается стартовым тэгом

          и завершается тэгом
        . Каждый элемент списка начинается с тэга
      1. . Например:

        • Программирование
        • Алгоритмизация
        • Проектирование

        · Программирование

        · Алгоритмизация

        · Проектирование

        Тэг

          может иметь параметр:

            Тип тэга

              определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:

              • Программирование
              • Алгоритмизация
              • Проектирование

              § Программирование

              § Алгоритмизация

              § Проектирование

              Вложенные списки. Дадим пример вложенных списков:

              Список сотрудников

              Список сотрудников нашей фирмы

              Составлено: 30 июля 1996 года

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

              Список может быть использован только в служебных целях.

              1. Дирекция
                • Иванов И.И.
                • Петров К.В.
              2. Отдел маркетинга
                • Варшавская Е.Л.
                • Самсонов Д.М.

              Вот, что вы увидите на экране броузера:

              Список сотрудников нашей фирмы

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

              Список может быть использован только в служебных целях.

              1. Дирекция

              o Иванов И.И.

              o Петров К.В.

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

              o Варшавская Е.Л.

              o Самсонов Д.М.

              Элемент списка

            • .

              Тэг

            • может иметь параметры:

                или

                  в зависимости от того, в списке какого вида находится данный элемент.

                  Вид маркера (см.

                    ) или счетчика (см.OL)

                    Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

                    Например:

                    1. Программирование
                    2. Алгоритмизация
                    3. Проектирование

                    XV. Программирование

                    XVI. Алгоритмизация

                    XVII. Проектирование

                    Список определений.

                    Список определений начинается с тэга

                    и завершается тэгом
                    . Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом
                    , а описание - тэгом
                    . Например:

                    Отдел маркетинга
                    Финансовый отдел
                    Отдел кадров

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

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

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

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

                    Отдел кадров

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

                    Гипертекстовые ссылки являются ключевым компонентом, делающим 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:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине

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

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

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

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

                    вызов службы новостей, если броузер ее поддерживает. Например: 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, позволяющий это сделать - следующий:

                    текст-который-будет-подсвечен-как-ссылка

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

                    Для получения примера смотри Текст-который-отобразится-в-первой-строке-броузера

                    Текст

                    Например:

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

                    • Раздел 1
                    • Раздел 2

                    Раздел 1

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

                    Раздел 2

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

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

                      o Раздел 1

                      o Раздел 2

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

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

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

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

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

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

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

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

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

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

                      Данный необязательный элемент задает текст, который будет отображен броузером, не поддерживающим отображение графики или с отключенной подкачкой изображений. Обычно, это короткое описание изображения, которое пользователь мог бы или сможет увидеть на экране. Если данный параметр отсутствует, то на месте рисунка большинство броузеров выводит пиктограмму (иконку), активизировав которую, пользователь может увидеть изображение. Тэг ALT рекомендуется, если ваши пользователи используют броузер, не поддерживающий графический режим, например Lynx.

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

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

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

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

                      Приведем пример использования данного тэга:

                      С версии HTML 2.0 у тэга появились дополнительные параметры:

                      Новые параметры:

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

                      То же самое, что и VSPACE, но только по горизонтали.

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

                      Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

                      .

                      где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

                      Цвет фона документа

                      Цвет простого текста документа

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

                      Горизонтальная линия. Используя тэг

                      , вы можете разделить текст горизонтальной чертой.

                      Формат тэга:

                      number|percent ALIGN=left|right|center NOSHADE>

                      Параметры тэга:

                      Толщина линии в пикселях.

                      Ширина линии в пикселях или процентах от ширины окна броузера.

                      Расположение на экране (слева | по центру | справа).

                      По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

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

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

                      bold (жирный)

                      italic (наклонный)

                      mono spaced (type writer - с использованием фиксированных шрифтов)

                      Вы можете комбинировать различные виды стилей, например жирный и наклонный.

                      Таблица №2: Основные стили текста

                      Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:

                      Жизнь - это песня!

                      Жизнь - это песня!

                      Внимание!Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!

                      Дополнительные стили:

                      · big (большой)

                      · small (маленький)

                      · sub (подстрочник)

                      · sup (надстрочник)

                      · Таблица №3: Дополнительные стили текста

                      Размер шрифта . Вы можете изменять размер шрифта при помощи тэга:

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

                      Например:

                      и зм ен ен и е

                      изменение

                      Цвет шрифта . Вы можете изменить цвет шрифта при помощи тэга:

                      Красный Зеленый Синий

                      Красный Зеленый Синий

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

                      Следующие тэги позволят вам сделать ваш HTML-документ более функциональным.

                      Тэг адреса

                      . Тэг
                      используется для выделения автора документа и его дреса (например, e-mail). Синтаксис:

                      Escape-последовательности. Некоторые символы являются управляющими символами в HTML и не могут напрямую использоваться в документе:

                      1) левая угловая скобка "<"

                      2) правая угловая скобка ">"

                      3) амперсанд "&"

                      4) двойные кавычки """

                      Чтобы использовать данные символы в документе, необходимо заменить их escape-последовательностями:

                      Таблица №4: Escape-последовательности

                      Существует большое количество escape-последовательностей для обозначения специальных символов, например " " для обозначения знака © и ® для значка ®, появившихся в HTML 2.0. Одной из особенностей является замена символов во 2-ой части символьной таблицы (после 127-ого символа) на escape-последовательности для передачи текстовых файлов с национальными языками по 7-битным каналам.

                      Внимание!Escape-последовательности чувствительны к регистру: НЕЛЬЗЯ использовать < вместо <.

                      2.6 HTML Формы

                      Некоторые WWW броузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-броузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, прокручиваемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введена пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

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

                      Синтаксис. Все формы начинаются тэгом

                      и завершаются тэгом
                      .

                      Элементы_формы_и_другие_элементы_HTML.

                      METHOD. Метод посылки сообщения с данными из формы. В зависимости от используемого метода вы можете посылать результаты ввода данных в форму двумя путями:

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

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

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

                      Тэги формы:

                      Тэг

                      Атрибуты, используемые внутри тэга необходим даже тогда, когда поле ввода изначально пустое. Описание атрибутов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                      Pentium PRO

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

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

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

                      Например:

                      Отправить данный файл:

                      .

                      2.7 HTML Фреймы

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

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

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

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

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

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

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

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

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

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

                      ... ...

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

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

                      ...

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

                      В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

                      Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

                      Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

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

                      Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

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

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

                      Обучающие:

                      • сформировать систему знаний по технологии создания Web-сайтов;
                      • обучить языку разметки гипертекста HTML для создания сайтов;
                      • познакомить с этапами проектной деятельности.

                      Развивающие:

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

                      Воспитательные:

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

                      Урок 1

                      1. Общие сведения о Web-сайтах и языке HTML

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

                      HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

                      Документ HTML – это текстовый файл с расширением.html или.htm , содержащий набор тегов.

                      Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

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

                      3. Форматирование символов

                      Символы, заключенные между следующими тегами отображают:

                      Параметры шрифта

                      Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

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

                      Одиночный тег
                      разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

                      4. Практическое задание №1 .

                      Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

                      Урок №2

                      1. Форматирование текста по абзацам

                      Тег - начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

                      Выравнивание текста по абзацам:

                      2. Задание цвета всего текста и фона документа

                      Описываются в начальном теге тела документа

                      TEXT =цвет текста >.

                      3. Заголовки разных уровней

                      Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

                      4. Простые списки

                      5. Практичекое задание №2

                      Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

                      Урок №3

                      1. Вставка графических изображений

                      Всеми браузерами поддерживаются форматы .gif , .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.

                      Одиночный тег вставляет графические изображения в текстовый поток в любом месте:

                      >

                      Необязательные атрибуты тега :

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

                      …….
                      /

                      2. Практическое задание №3

                      Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

                      Урок №4

                      Связь с другими документами организуется тегами <A>….

                      > текст гиперссылки .

                      >< IMG SRC =’имя графического файла’>

                      2. Практическое задание №4

                      Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

                      Урок №5

                      1. Таблицы

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

                      С помощью таблиц удобно создавать навигацию по сайту.

                      Пример таблицы из двух строк (рядов), содержащих по две ячейки:

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

                      Основные атрибуты тегов

                      и
                      задают параметры таблицы, строки или ячейки:

                      ALIGN=left, right, center – выравнивание (

                      , ,
                      )

                      BGCOLOR=’цвет’ – фоновый цвет (

                      , ,
                      )

                      HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (

                      )

                      VSPACE=значение - свободное пространство сверху и снизу от таблицы в пикселах (

                      )

                      WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (

                      ,
                      )

                      HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (

                      , )

                      BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (

                      ,
                      , ,
                      )

                      BORDECOLOR=’цвет’ – цет рамки (>)

                      VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (

                      )

                      2. Практичекое задание №5

                      Создание навигации по сайту в форме таблицы из одной строки

                      Уроки №6 и №7

                      1. Секция заголовка , мета-теги

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

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

                      Драматические театры Санкт-Петербурга<b>

                      > - - (указывается тип кодовой таблицы (windows-1251 , Koi8-R и другие), использованной при подготовке текстовой части документа.

                      - информация об

                      В первую очередь стоит выделить JavaScript, ведь он является основой всего программирования, которую необходимо знать при создании веб-ресурса. Среди программных платформ базовыми являются Silver Light и Adobe Flash. Причем последний довольно распространен и сравнительно давно используется веб-разработчиками.

                      Эти языки используются при создании интерактивных сайтов. По прогнозам Silver Light скоро полностью заменит Adobe Flash. В редких случаях этих двух программных продуктов вполне достаточно для создания интернет-сайта, но использование только их одних крайне нежелательно.

                      Выбор подходящего синтаксиса зависит и от операционной системы, которой пользуется разработчик. Чтобы создать веб-ресурс на ОС Windows, часто используется технология, которая была разработана компанией Microsoft – ASP.NET. Она позволяет создать совершенно любой веб-ресурс, как самый простой, так и способный обработать немалое количество запросов. Чтобы воспользоваться ASP.NET, следует иметь знания не на уровне пользователя, а несколько глубже.

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

                      Начиная разбираться в веб-программировании, многие выбирают Java, он наиболее понятен и легко усваивается. Для создания контента используются Java Server Pages.

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

                      Итоги

                      Выбирать подходящий синтаксис необходимо по нескольким параметрам, а именно:

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

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

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

                      С уважением! Абдуллин Руслан

                      Похожие публикации:
                      
                      © 2024, leally.ru - Твой гид в мире компьютера и интернета