Язык WWW и HTML: функции, структура, теги и оформление веб-страниц

Тип работы: Материал
Бесплатно: Антиплагиат
Объем: 14 страниц
В избранное:

Создание программы в интернете

Конспекты лекций

Составитель: Адылбекова Э. Т.

Лекция №1

Тема: Язык WWW и HTML. Функции, команды, структура языка HTML

План:

1. Язык WWW и HTML.

2. Функции, команды, структура языка HTML

В 80-х годах объединение сетей получило широкую известность под названием "Интернет". Сотни, тысячи различных учреждений добавили свои компьютеры во Всемирную сеть. В 90-е годы, несмотря на быстрое развитие, сеть использовалась только для передачи файлов и неоформленного текста.

Одним из самых значимых событий в истории интернета стало открытие сервиса World Wide Web (сокращенно WWW, всемирная паутина) . Авторы WWW-исследователи Европейской лаборатории физики элементарных частиц в Женеве, физики Тим Бернерс-Ли и Роберт Кайо. Ученые создали систему таким образом, чтобы все физики Европы могли обмениваться мнениями с результатами исследований в виде иллюстративного текста со ссылкой на другие издания через Интернет. В настоящее время WWW - это деятельность интернета в динамичном развитии.

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

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

Функции языка HTML

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

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

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

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

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

Функции, команды и структура языка HTML

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

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

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

В языке HTML также есть некоторые функции. Такие тег также вписываются в угловые скобки. Откроются завесы, закрывать их не нужно.

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

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

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

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

HTML-документ состоит из основного текста этого документа и тегов разметки и представляет собой простой набор символов.

Лекция №2

Тема: Основная часть документа. Работа с элементом Body

План:

1. Основная часть документа.

2. Работа с элементом Body

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

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

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

Ссылка. Ссылки для легкого перемещения внутри Web узла и быстрого перехода в другие части сети.

Мультимедиа и специальные программы. Видеоролики, тэги, управляющие работой с Java-аплетами, программами Flash, Shockwave, должны располагаться в теле документа.

Вид документа: однотомное издание шифр издания::

<HTML>

<HEAD>

<TITLE>

официальное наименование документа

</TITLE>

</HEAD>

<BODY>

. . .

текст документа

. . .

</BODY>

</HTML>

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

Комментарии к действиям и действиям, применяемым в документе, могут быть внесены в любую точку тела документа. Комментарий очень эффективен при создании больших Web-страниц. Комментарий из специальных символов <!- я не знаю, как это сделать. В конце текста должны быть прописаны символы ->. Пояснение текст продолжает составляться из любых символов, кроме символа” большой" ( > ) .

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

Цветовое оформление Web-страницы

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

TEXT- определяет цвет букв текста, если он не написан, по договоренности принят черный цвет. При изменении цвета фона закрепляются соответствующие ему цвета символов. Если задан параметр  , то цвет текста изменится. Чтобы объяснить это действие, попробуйте сделать фон страницы зеленым, а цвет шрифта-желтым: <BODY BGCOLOR= "green" TEXT = "yellow"> . Увидеть результат и сделать это наоборот.

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

VLINK -определяет цвет используемой гипертекстовой ссылки. По договоренности он считается красно-коричневым цветом. Но с VLINK цвет не меняется.

ALINK- определяет цвет гипертекстовой ссылки, когда она отображается курсором. Этот параметр меняется крайне редко.

BACKGROUND -определяет изображение, расположенное на фоне текста, которое играет роль обоев (гобои) . Тип файла изображения должен быть gif или jpg.

Цвета могут быть описаны с английскими именами, то есть black, white, green, blue, yellow и т. д. Но есть и другой тип описания цвета.

В языке HTML различные цвета также могут быть переданы способом RGB в виде шестнадцатеричных чисел (color= "# СОFFСО") , что очень много возможностей. Где первые два числа определяют красную () цветовую часть, следующие два числа - зеленую () цветовую часть, последние два числа-синюю () цветовую часть. Многие из приведенных выше параметров используют цвет, который передается по основным шестнадцатеричным названиям цветов на английском языке или их кодам. Ее из интернета http://www. design. ru адрес можно получить в разделе “Бесплатное” web-дизайнера Артемии Лебедевой.

Лекция № 3

Тема: Работа со шрифтами. Форматирование и выравнивание текста

План:

1. Работа со шрифтами.

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

Работа со шрифтами

Эффективность дизайна Web-страницы определяет, насколько она подготовлена. Что такое эффективность проектирования? Это понятное и красивое оформление внешнего вида Web-страницы. Умение работать со шрифтами-одно из основных условий достижения эффективности данного дизайна. Поэтому каждый Web-конструктор страниц должен в полной мере владеть приемами работы со шрифтами.

В настоящее время шрифтов так много, что их можно разделить на три группы::

1. Категория-основной класс шрифтов (например, serief, sans-serif и др. ) .

2. Гарнитура - класс шрифтов (например, times, arial и др. ), сгруппированных в зависимости от определенных свойств.

3. Изображение-неповторимая особенность каждого шрифта (например, утолщенное, искривленное и т. д. ) .

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

Фрагмент текста можно выделить шрифтами (Bold) с утолщенным шрифтом. Для этого используются характер открытия и характер закрытия,  текст .

Некоторые необычные слова могут быть подчеркнуты (Underline) . В этом случае используются тэги  и .

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

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

 текст 

 текст 

Управление стилями шрифта. Работа со шрифтами в HTML основана на работе со шрифтом . Тег  , который управляет шрифтами, имеет свои атрибуты:

size- высота символов текста;

color- цвет шрифта;

fase- тип имени требуемого шрифта.

Вы можете увеличить или уменьшить размер шрифта. Они рассчитываются с точкой, то есть 1 пункт равен 1/72 дюйма или 0, 353 мм. Он передается относительно размера шрифта, установленного в программе:

 текст 

 текст 

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

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

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

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

Форма записи < Р> :

<Р>текст < /Р>.

Расположение текста абзаца на странице зависит от параметров, которые присваиваются атрибуту align tag. Также можно задать параметры выравнивания атрибута ALIGN:

RIGHT- выравнивание с правой стороны;

LEFT- выравнивание с левой стороны;

Center -выравнивание по центру;

Justify- выравнивание по ширине.

Если текст нужно написать, оставив пробел в новой строке, то после нужно поставить несколько знаков, обозначающих пробел, т. е. &nbsp. Например,

Тема

      текст

Работа с темами. Для обозначения логических частей текста обычно используют заголовки (headings) . Они обозначаются латинскими заглавными буквами (H) или строчными буквами (h) . Цифра после буквы обозначает размер предмета, и они бывают шести видов, то есть от <Н1>до <Н6>. Как и любой текст, тему можно выровнять по левому краю, по правому краю и по центру. Не переносите тему.

Выделение логических частей. Одним из лучших способов выделения логических частей текста является горизонтальная линия (Horizontal Rule) . Для него характерна < HR> характер, здесь можно не использовать характер закрытия. <HR> следует ставить или перед или после тела. Если вас не устраивает расстояние текста от линии, то после <HR> тег разместите несколько тег один за другим.

Например,

Тема

<HR>

 текст

чем больше, тем больше текст отрывается от линии. Это также может быть использовано в случае, отличном от линии.

Следует также отметить необязательные атрибуты < HR> tag:

<HR ALIGN=”…” COLOR=”…” NOSHADE SIZE=”N” WIDTH=”N”>

где

align= " . . . " - внутри кавычек отображаются типы выравнивания, т. е. right (правый), left (левый) и center (средний) . Соответственно, ваша линия будет располагаться справа, слева и посередине.

color= " . . . " - внутри кавычек устанавливается цвет линии. Подается стандартно (об этом будет рассказано позже) . Этот атрибут работает только в Internet Explorer 3 или 4.

Noshade предустановленная толстая линия.

size= " n " - толщина линии, где n-толщина, выраженная в пикселях

width= "n” или width=” n%" - где n ширина линии, выраженная в пикселях или процентах.

Наиболее часто используемыми параметрами являются толщина и размер линии. Они передаются через параметры size или width: <HR SIZE=2 WIDTH=”10%">.

Лекция № 4

Тема: Связь страниц. Организация гипертекстовых ссылок

План:

1. Способы связывания страниц

2. Организация гипертекстовых ссылок

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

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

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

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

В языке HTML связь со ссылкой организуется двойным тегом <A > < < / A>. Это href tag=" . . . " есть атрибут. Его значение часто состоит из имени файла или URL-адреса, на который указывает эта ссылка. Когда ссылочное слово изображается на броузере, его часто подчеркивают и изображают синим цветом. Эта же ссылка обеспечивает переход к URL-адресу по сети.

... продолжение

Вы можете абсолютно на бесплатной основе полностью просмотреть эту работу через наше приложение.