Для чего предназначен язык html. Учебное пособие "Создание Web-страниц средствами языка HTML"

- идентификатор перечеркивания.

- идентификатор равноширинного шрифта (телетайпного или курьера).

- задает увеличенный размер шрифта.

- задает уменьшенный размер шрифта.

- задает центрирование текста.

- задает нижний индекс.

ТЕГИ ФОРМАТИРОВАНИЯ АБЗАЦЕВ

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

- выравнивание текста в абзаце по правому краю.

- выравнивание текста в абзаце по центру.

- полное выравнивание по обоим краям экрана,

align - атрибут выравнивания.

ТЕГИ СПИСКОВ

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

- идентификатор упорядоченного списка. В конце .

Неупорядоченные списки служат для составления перечней, ко­гда порядок следования пунктов несущественен. Перед каждым элементом будет стоять маркер.

- идентификатор неупорядоченного списка. В конце

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

ТЕГИ СПИСКОВ ОПРЕДЕЛЕНИЙ

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

- идентификатор списка определений. В конце .

- идентификатор термина в списке определений.

- идентификатор значений термина в списке определе­ний.

название термина 1

определение термина 1

другое определение термина 1

ТЕГИ ЦВЕТА

- задает цвет тек­ста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).

- задает фоновый рисунок (обои) на Web-странице в файле back.jpg.

- фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла.

- задает цвет символов текста (color) и их размер (size). В конце нужен тег .

ТЕГИ ЛИНИЙ

- задает цвет горизонтальной линии.

- атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселях; атрибут align=center (или left, или right ) за­дает смещение линии (ее размещение в центре, или смещение вле­во, или вправо).

ТЕГИ ДЛЯ ВСТАВКИ ИЗОБРАЖЕНИЙ

Графика на страницах - это средство выражения мысли, под­черкивания идеи.

Изображения можно сохранять в нескольких форматах. Тип фай­лов GIF - графический формат обмена, стал первым типом файлов, которые поддерживались в WWW. Затем был разработан формат JPEG - объединенная группа экспертов фотографии. Это формат эффективнее GIF для представления больших изображений.

Приобрел популярность формат PNG - персональная сетевая графика, который заменяет GIF.

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

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

- вставка графического изображения в виде анимационного файла lycos.gif. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.

- если при вставке изображения использованы атрибуты width (ширина в пикселях) и height (высота в пикселях), то при загрузке изображения браузер покажет сначала рамку, где должно быть изображение, а за­тем уже само изображение, поскольку оно загружается дольше. Та­ким образом, резервируется место на экране под изображение.

- вставка графического изображения в виде файла iexplor.gif, причем указан полный путь графического файла на диске: c:\html\animat\iexplor.gif (данный момент нужно заранее продумать, иначе при перемещении на другой компьютер возникнут проблемы отображения).

- атрибут border задает рамку по периметру изображения толщиной 3 пикселя. Атрибут Alt дает текст на месте рамки, если изображения нет.

Атрибут border=0 используется, чтобы убрать рамку вокруг ри­сунка. Это необходимо, например, при использовании анимированных gif-рисунков на прозрачной основе.

Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом. Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.

Атрибут align=«left» обеспечивает размещение рисунка слева.

ТЕГ ПЕРЕХОДА К ДРУГОМУ ФАЙЛУ

excite.htm - гипертекстовая ссылка к файлу excite.htm.

book.inf - гипертекстовая ссылка, переход к файлу book.inf. При запуске браузера следует ука­зать программу для просмотра текстового файла book.inf, например edit.com.

При работе в Интернете следует различать файлы с большими и с маленькими буквами в имени и расширении. Должно быть полное соответствие между именами файлов по размеру каждой буквы в имени и расширении, указанными в гиперссылке и лежащими на сервере, иначе гиперссылки не будут работать.

Для облегчения работы можно задавать цифровые имена файлов (цифры всегда одного размера).

ТЕГ ПЕРЕХОДА К ДРУГОЙ WEB-СТРАНИЦЕ

http://www.da.ru - гипертек­стовая ссылка в виде текста, переход в Интернете к Web-странице http://www.da.ru.

- ги­пертекстовая ссылка в виде изображения globe.gif, переход к про­смотру изображения zinn.gif.

ТЕГ ВСТАВКИ АДРЕСА ЭЛЕКТРОННОЙ ПОЧТЫ

[email protected] - гипер­ссылка на адрес электронной почты. При нажатии происходит вы­зов почтовой программы и указанный адрес E-mail: [email protected] вводится в пункт Кому .

ТЕГ ВСТАВКИ ДОКУМЕНТА

-

вставка объекта в документ HTML. В данном случае это мультиме­дийный файл *.avi, причем при загрузке страницы происходит авто­запуск этого файла, размеры которого на экране заданы атрибутами Width и Height .

Если документ HTML большой, то внутри него делают переходы по метке (U01): Введение Введение

ТЕГИ ДЛЯ СОЗДАНИЯ БЕГУЩЕЙ ТЕКСТОВОЙ СТРОКИ

(ТОЛЬКО ДЛЯ INTERNET EXPLORER):

Интер­нет - это окно в Mиp!

Если текстовая строка должна бежать влево, то вместо right должно быть слово left. Можно создать бегущую текстовую строку еще проще (т.е. без атрибутов, и она будет бежать влево):

Добро пожаловать!

Если текстовая строка должна бежать то влево, то вправо, то в теге используется атрибут behavior=«alternate» .

СПИСОК ЦВЕТОВ СИМВОЛОВ HTML

Всего 16 основных цветов:

Вместо указанных терминов для задания цвета можно использо­вать RGB-коды (R ed, G reen, B lue), например:#FFFFFF - белый (white), #FF0000 - красный (red).

Меняя RGB-коды , цвета можно подбирать желаемые текста и фона.

ТЕГИ ПОДКЛЮЧЕНИЯ ЗВУКА

Для воспроизведения звука (файл *.mid) после загрузки доку­мента HTML в браузер Internet Explorer (т.е. в фоновом режиме), надо записать следующую команду, например:

Можно также использовать файл формата *.wav. Число воспро­изведений loop можно увеличить с 1 до п.

ТЕГИ ФРЕЙМОВ

- определение фреймовой (оконной) структуры документа: размеры и расположение фреймов на страни­це. Заменяет тег BODY в документе с фреймами; может быть вло­жен в другие фреймсеты.

- определение количества и раз­меров горизонтальных фреймов (фреймов-строк) в окне браузера (пиксели, проценты ширины).

- определение количества и раз­меров вертикальных фреймов (фреймов-столбцов) в окне браузера (пиксели, проценты ширины).

- определение фрейма и его свойства внутри FRAMESET-структуры.

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

Атрибуты фреймов:

- указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.

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

- определение ширины (в пикселях) левого и правого полей фрейма; должен быть равен или быть боль­ше 1.

- определение ширины (в пикселях) верхнего и нижнего полей фрейма; должен быть равен или быть больше 1.

- определение наличия полосы про­крутки содержимого фрейма; значениями могут быть: «yes,» «nо,» или «auto.» По умолчанию стоит auto.

- предотвращение изменения размеров фрейма.

ТЕГИ ФОРМЫ

Для функционирования формы понадобится написать CGI скрипт. HTML просто создает вид формы.

СОЗДАНИЕ ТАБЛИЦ В HTML

Таблицы являются удобным средством форматирования данных в HTML.

Таблицу задает и определяет ее общие свойства тег

Тег

border=«5» - ширина боковой грани в пикселях. При нулевом значении рамка исчезает;

width=«100» - ширина таблицы в пикселях или width=«50%» - ширина таблицы в % по отношению к ширине страницы в окне;

cellspacing=«10» - ширина фронтальной грани в пикселях;

cellpadding=«10» - задает размер пустого пространства в пиксе­лях, окружающего данные в ячейке.

Тег задает заголовок таблицы.

Тег

Тег

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

СКРИПТ

Для реализации Web-сайта используется программа Движок , реализующая функциональность, отличную от простого показа го­товых Web-страниц. Например, просмотр каталога Интернет-магазина (список товаров извлекается из базы данных магазина), поиск в Интернете (страницы с ответами поисковой системы формируют­ся динамически), показ баннеров (движок «выдает» страницам сай­та тот или иной баннер по заданному алгоритму).

Скрипт - несложная программа на «скриптовом» языке про­граммирования (Perl, Php, Javascript), компонент движка. В пре­дельном случае движок сайта может состоять из одного-единствен-ного скрипта.

Cgi-bin исторически - подкаталог на сервере, в котором распо­лагались скрипты и иные компоненты движка сайта. Некоторые хостинги (услуги по размещению чужого Web-сайта на своем Web-сервере или чужого Web-сервера) предоставляют своим клиентам личные каталоги cgi-bin для размещения скриптов.

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

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

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

Теги могут вкладываться друг в друга, например,

Текст

Текст

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

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

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

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

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

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

, , и т.д.

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

Является потомком одновременно для и .

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

Является родительским только для .

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

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

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

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

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

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

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

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

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

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

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

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

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

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

При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.

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

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

Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (= ). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда.

Закрывающие теги никогда не содержат атрибутов.

Комментарии

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

Комментарии в языке HTML начинаются со специального тега

Читайте также

Прибыл в страну назначения - что значит?

Доставка с Asos в Россию, делюсь впечатлениями Отслеживание почтовых посылок по номеру заказа асос

Дополнительные заголовки

Как написать плагин для WordPress Условия Магистра Йоды

Подключение и использование Bootstrap онлайн урок Об использовании Bootstrap

Как включить смайлики на айфоне или любом другом девайсе от эппл?

Программы для сканирования на айфон

Модельный ряд MacBook Pro