Приложения 

Web программирование html. Основы языка WEB программирования HTML. Язык HTML. Построение Web–документов

Это способ создания графики без использования компилятора. Это обычный текстовый файл, должен быть в DOS – формате.
Шрифты: Windows, ANSI. Их понимает и обрабатывает любой броузер (Internet Explorer, Netscape).
Любой броузер – интерпритатор, исполняюший последовательно файл и исполняет его.

HTML быстро развивается и не все броузеры одинаково обрабатывают эти файлы. Сейчас все ориентируются на Internet Explorer 7.0 в Microsoft Wista.

Язык содержит перечень тегов, один тег – команда интерпритатору, но она пишется исходя из общих правил записи тегов.
ЗДЕСЬ ТОЖЕ НЕТ СТАНДАРТОВ!
Все веб-сайты состоят из нескольких HTML-файлов и нескольких графических файлов

Недостатки:
1. Файл будет сильно большим;
2. Интерпритатор его обработает гораздо медление.

По традиции файл входа в сайт называется index.
- начало тэга
- конец тэга
- заголовок
- тело.

Структура HTML-файла:



В HEAD расположена различная вспомогательная информация общая для всего BODY. Ее писать не обязательно, но обычно пишут следующее:
… - содержимое заголовка.
Помимо этого в HEAD указывают версию html, для которой писалось BODY, и указывается как закрашивать фон.
Содержимое BODY – это просто очередность строк, в которую вставляют различные управляющие тэги, прежде всего это информация которую нужно вывести на страницу. Тэги управляют изображением этой информации.
Особенности восприятия текста BODY в браузере:

  • Браузер не видит концов строк, а также переход со строки на строку.
  • Если между словами несколько пробелов, то браузер заменяет их на 1. Весь этот текст BODY браузер выводит в виде одной строки. Но длина строки определяется текущей шириной Windows-окна. Если текст не помещается в строке, то браузер автоматически переносит на другую строку. Слова не разрываются, и перенос осуществляется по словам.

Теги :

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

…
…… - абзац (между абзацами строки не вставляются);

Управление жирностью.
Текст - повышенная жирность
- наклонный текст
- подчеркнутый текст
- перечеркнутый текст
- верхний индекс
- нижний индекс
- текст внутри мигает (создавался для Netscape, Explorer его не выполняет).
- ширина букв одинаковая
- увеличения на 1
- уменьшения на 1

Управление заголовком

Существует 6 типов заголовков:

….

//Текст в 4 раза больше

….


….
….
//в 2-3 раза меньше, чем обычно

Изменение стиля

Текст
Текст программы

- Internet адрес

Не все текстовые символы можно изображать браузером, которые создаются в текстовом редакторе:

 ….. – вставить пробел;
<….. – < ;
>….. – > ;
&….. – & ;
—… – - ;
&guot….. – ” ;
«… – << ;
»… – >> ;
Ω>… – W ;
β>… – b ;
‘>… – a ;
∑>… – S ;

НЕТ ОБЩЕГО СТАНДАРТА!!!

Управления расположения текста относительно границ страници :

Текст


“center”
“right”
“justify”
- так же как и в web выводит текст на экран;

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

*.gif, *.jpg, *.png – можно использовать любое из этих расширений.

Простейший способ вставить рисунок – рассположить его в том же катологе где находиться HTML-страничка.

Управление расположением:

Widht = “N” – в пикселях
“K”- в процентах
Height =“N”
“K”

Смещение на заданую величину

Hspace = “N”
“K”
Vspace = “N”
“K”

Вывод анимации:

Для указания количества воспроизведений нужно вставить loop = “N” после названия файла, где N-число.

Пример.
Требуется вывести картинку по центру экрана и подписать его.



Мой..... <.TITLE><br> </HEAD><br> <BODY><br> <P align = center> <img src='/application/web-programmirovanie-html-osnovy-yazyka-web-programmirovaniya-html-yazyk-html/' loading=lazy> <br>1…<BR>2 <br>3 ... <BR><br> </P><br> </BODY><br> </HTML></p> <h2><b>Гиперссылки </b></h2> <p>Это выполнение оператора go to;</p> <p>Особенность web-странице – віполняется в диалоге, во время перемещения стрелочки, она заменяется на изображение и нажатием на левую кнопку мышки переходит на другую web-страницу. Это самый главный инструмент при работе с web. В классической программе – нужно все время следить за положением курсора и обрабатывать сообщения Windows.<br> Web-страници никаких обработок не делают.</p> <p><b>Варианты записи адресса: </b></p> <p>текст – тот текст в html на который перейдет курсор, при нажатиии на изображение;<br> ___.gif – картинка, связаная с текстом;<br> ___.html – движение по web-сайту; <br> Myweb.com.ua – на интернет адресс.</p> <h2>Анимация на web-страницах.</h2> <p>Основной элемент анимации – это использования gif-анимации. Можна выводить и avi-файлы.<br> Недостаток – пользователь должен сохранить эти файлы, а это дорого.</p> <p><b>Анимация средствами html </b></p> <p>В html нет граффических операторов, функций графики.</p> <p><MARQUEE параметры> <br> ____<br> ____<br> <IMARQUEE></p> <h2>Параметры управления движением</h2> <p>1. Direction = right, left, up, down.</p> <p>Если нужно что бы движение было под каким-то углом, то достаточно двух параметров.</p> <p>2. Loop = INFINITE; (бесконечно)<br> Loop = 0;<br> Loop = N; (анимационный повтор N раз)</p> <p>3.Behavior = scroll; изображение двигается слева направо и наоборот<br> Behavior = slide; движение до конца строки<br> Behavior = alternative; движение из одного конца строки в другой.</p> <h2>Размер обложки анимации</h2> <p>Width = Dx <br> Height = Dy <br> Align = middle; (top) перемещение по центру, по верхней части экрана<br> bgcolor = цвет; цвет фона, области движения<br> scrollmount = K; скорость движения<br> scrolldelay = M; величина задержки между движениями.</p> <h2><b>Движущаяся информация </b></h2> <p>1.текст + рисунок<br> 2.текст</p> <ul><li>бегущая строка</li> <li>изображение линий</li> </ul><h2><b>Рисование линий </b></h2> <p>___<HR>___ <br> По умолчанию появится линия на весь экран, толщина линии 1 пиксель.<br> Возможно управление, есть 2 параметра:<br> Width = N – ширина линии<br> Size = H – толщина линии<br> Color = - цвет</p> <h2><b>Вывод звука </b></h2> <p>Для начала нужно иметь звуковой файл.<br> Фоновый звук – открывается страничка и сразу играет звук.</p> <p><BGSOUND src = .mid loop = N></p> <p>Wav <br> Параметры:<br> Loop = N – количество проигрований музыки<br> Balance = “___” - ±10000 дополнительная регулировка, определяет смещение по ролику относительно начала, конца файла.<br> Volume = “___” – громкость<br> “0” – максимальная громкость. <br> “10000” – звук выключен.<br> Есть возможность выводить мультимедиа проигрователь.</p> <p>HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - <тег>, чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.</p><h2>Визуальные редакторы</h2><p>Новички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.</p><p>Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML.</p><h2>Теги</h2><p>Как упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, <title>..., где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно.

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

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

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

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

Head

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

Link

Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.

Body

Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них: