Файл: Основы программирования на языке HTML (Основы программирования на HTML).pdf
Добавлен: 18.05.2023
Просмотров: 114
Скачиваний: 3
style – используется для указания CSS-стилей напрямую в HTML-документе. Пример:<pstyle=”color:red”</p>
Атрибут idhtml-тега может быть использован для однозначной идентификации любого элемента внутри html-страницы. Существуют две основные причины, по которым Вы можете использовать атрибут id для элемента:
Если элемент содержит атрибут id как уникальный идентификатор, то можно идентифицировать только этот элемент и его содержимое.
Если на веб-странице (или в таблице стилей) есть два элемента с одним и тем же именем, Вы можете использовать атрибут id для различения элементов, имеющих одно и то же имя.
Атрибут title — дает название элемента для элемента. Синтаксис для атрибута title аналогичен атрибуту id.
Поведение этого атрибута будет зависеть от элемента, который его несет, хотя он часто отображается как подсказка, когда курсор наводится на элемент или когда элемент загружается.
Атрибут class
Атрибут class — используется для связывания элемента со списком стилей и задает класс элементу.
Образец гипертекстового документа выглядит следующим образом:
Изображение 1. Гипертекстовый документ на языке HTML.
Структура гипертекстового документа на языке HTML:
Каждый гипертекстовый документ начинается с элемента <!DOCTYPE>, который указывает тип текущего документа. Это необходимо чтобы веб-браузер правильно распознавал веб-страницу, т.к. существует несколько версий языка HTML, в которых синтаксис языка различается и веб-браузер может отображать веб-страницу не так как было задумано веб-разработчиком. При этом многие веб-браузеры могут игнорировать отсутствие элемента <!DOCTYPE>и автоматически определять тип документа, анализируя весь или часть гипертекстового документа по применяемым тегам и синтаксису документа.
Для гипертекстовых документов созданных, применяя язык HTML 5.0,указывается:
<!DOCTYPE html>
Для гипертекстовых документов созданных, применяя языкHTML 4.01, указывается:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
При этом у DOCTYPEесть параметры:
Элемент верхнего уровня — указывает элемент верхнего уровня в документе, для HTML это тег <html>.
Публичность — объект является публичным (значение PUBLIC) или системным ресурсом (значение SYSTEM), например, таким как локальный файл. Для HTML/XHTML указывается значение PUBLIC.
Регистрация — сообщает, что разработчик DTD зарегистрирован в международной организации по стандартизации (InternationalOrganizationforStandardization, ISO). Принимает одно из двух значений: плюс (+) — разработчик зарегистрирован в ISO и - (минус) — разработчик не зарегистрирован. Для W3C значение ставится «-».
Организация — уникальное название организации, разработавшей DTD. Официально HTML/XHTML публикует W3C, это название и пишется в<!DOCTYPE>.
Тип — тип описываемого документа. Для HTML/XHTML значение указывается DTD.
Имя — уникальное имя документа для описания DTD.
Язык — язык, на котором написан текст для описания объекта. Содержит две буквы, пишется в верхнем регистре. Для документа HTML/XHTML указывается английский язык (EN).
URL — адрес документа с DTD.
Следующая часть гипертекстового документа начинается с элемента <html> с обязательным закрывающим тегом </html>. Этот элемент включает в себя содержимое всего гипертекстового документа, как правильно, он идёт сразу после объявления типа документа (<!DOCTYPE>).
Элемент <html>имеет следующие атрибуты:
title - Добавляет всплывающую подсказку при наведении курсора на любую часть гипертекста.
manifest - Указывает файл манифеста, необходимый для создания веб-страницы, подгружаемого без использования интернета, при наличии этого файла на компьютера.
Внутри элемента<html>размещаются элементы <head>и <body>.
Элемент<head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.
Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <link>, <meta>, <script>, <style>, <title>.
Элемент <base> определен внутри контейнера <head> и инструктирует браузер относительно полного базового адреса текущего документа. Тег <base> предназначен для документов, в которых используется относительный адрес и эти документы могут переноситься в другую папку или даже на другой компьютер без потери связи. Браузер ищет тег <base>, определяет полный адрес документа и корректно загружает его. Например, если адрес документа указан как <basehref="http://www.megasite.ru/hzchd/">, то при добавлении рисунков достаточно использовать относительный адрес <imgsrc="images/labuda.gif">. При этом полный путь к изображению будет http://www.megasite.ru/hzchd/images/labuda.gif, что позволяет браузеру всегда находить графический файл, независимо от того, где находится текущая веб-страница.
Тег <basefont> предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всем документе за исключением тега <font>, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body>, причем несколько раз. Это позволяет изменять вид шрифта для части документа.
Тег <link>устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.
Тег <meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.
Тег <script> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке. Скрипты могут располагаться во внешнем файле и связываться с любым HTML-документом. Такой подход позволяет использовать одни и те же общие функции на многих веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах.
<script> может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа, т.е. в элемент <head>.
Тег <style> применяется для определения стилей элементов веб-страницы на языке CSS . Тег <style> необходимо использовать внутри контейнера <head>.
Элемент <title>определяет заголовок документа, не является частью документа и не показывается напрямую на веб-странице. Отображается во вкладке браузера. Допускается использовать только один тег <title> на документ и размещать его в контейнере <head>.
Иных элементов и тегов в элементе <head>размещать не следует. После элемента <head>идёт следующий элемент <body>.
Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.
Часто тег <body> используется для размещения обработчика событий, например, onload, которое выполняется после того, как документ завершил загрузку в текущее окно или фрейм.
Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документадля лучшей совместимости браузера.
1.6. Основные элементы для создания веб-страницы на языке HTML.
На текущий момент в языке гипертекстовой разметке HTMLсуществует более 100 элементов, однако они не все и всегда нужны или применяются в повседневности.
Наиболее часто используемые элементами, а следовательно основными, являются следующие элементы: <!DOCTYPE>, <html>, <head>, <title>, <body>, <html>, <h1>-<h6>, <p>, <img>, <a>, <br>, <hr>, <div>, <b>, <i>, <table> и <form>.
Первые пять элементов мы уже разобрали в пункте 1.5., они наиболее частовстречаются из-за их необходимости в коде любого гипертекстового документа на языке HTMLдля правильного отображения веб-страницы в веб-браузерах.
Остальные элементы используются непосредственно для редактирования веб-страницы.
Элементы <h1>,<h2>, <h3>, <h4>, <h5>,<h6> (heading, перевод с англ. языка «заголовок») используются для выделения заголовков в документе, непосредственно увеличивает шрифт текста и делает его жирным, а все иные тексты в документы, не вошедшие в состав данного элемента, начинаются с новой строки, т.к. элементы <h1-h6> являются блочными. Требуется использовать открывающие и закрывающие теги. <h1>заголовок первого уровня, остальные идут по убыванию. Помимо визуальной функции, данный элемент также используются поисковыми системами для обработки важной информации и выдачи её в поисковых результатах.
Примеры:
<h1>Город Москва</h1>
<h2>История города Москвы</h2>
<h3>Москва при Иване Грозном</h3>
Элемент <p> (paragraph, перевод с англ. языка «параграф») используется в качестве текстового абзаца, является блочным элементом. Для правильности веб-документа нужен закрывающий тег</p>, иначе закрывающий элементом будем считаться следующий блочный элемент.
Примеры:
<p>Москва – столица Российской Федерации</p>.
<p>Историческая столица Великого княжества Московского, Русского царства, Российской империи (в 1728—1730 годах), Советской России и СССР.</p>
Элемент <img>(image, перевод с англ. языка «изображение») используется для показа изображений. Закрывающий тег не требуется. Для указания адреса изображения используется атрибут «src». Атрибут «alt» используется дляотображения текста вместо изображения, если последнее не прогрузилось. Атрибут «title» используется для показа текста при наведении курсора мыши на элемент. Атрибуты «width»и «height» задают ширину и высоту изображения, соответственно.
Примеры:
1) <img src="https://avatars.mds.yandex.net/get-pdb/69339/aea2d337-4336-41bb-b6f6-b07099be516d/s1200?webp=false" title="Red Square" =alt="Краснаяплощадь">
Изображение 2. Отображение элемента <img> с атрибутом «title»при наведении курсора мыши.
2) <imgsrc="URL" border="1" title="Red Square" alt="Краснаяплощадь">
Изображение 3. Отображение элемента <img> с атрибутом «alt» при отсутствии изображения по указанному адресу.
Элемент <a> (anchor, прямой перевод с англ. языка «якорь») используется для создания ссылок в веб-документе. В атрибуте «href» указывается адрес веб-страницы, изображения или иного документа. Атрибут «name». Закрывающий тег обязателен.
Примеры:
<ahref="//redsquare.jpg">Краснаяплощадь</a>
<p>Прочитайте об этом замечательном месте на сайте<ahref="www.wikipedia.org"title="Нажми, чтобы перейти на другой сайт">Всемирной энциклопедии</a></p>
Изображение 4. Отображение элемента <a> с атрибутом «title» при наведении курсора мыши на элемент.
<br> - устанавливает перевод строки следующих элементов. Не требует закрывающего тега.
Пример:
<p>— Скажи-ка, дядя, ведь не даром<br>
Москва, спаленная пожаром,<br>
Французу отдана?<br>
Ведь были ж схватки боевые,<br>
Да, говорят, еще какие!<br>
Недаром помнит вся Россия<br>
ПроденьБородина!</p>
Изображение 5. Пример использования тега <br> в стихотворении.
Изображение 6. Вышеуказанный пример из изобр. 5 без тегов <br>.
Элемент <hr> отображает горизонтальную линию в пределах элемента нахождения. Относится к блочным элементам, закрывающий тег не требуется.
Пример:
<h1>Стихи Бунина Ивана Алексеевича</h1>
<p>Беру твою руку и долго смотрю на нее,
Ты в сладкой истоме глаза поднимаешь несмело:
Вот в этой руке – все твое бытие,
Я всю тебя чувствую – душу и тело.</p>
<hr>
<p>Нынче ночью кто-то долго пел.
Далеко скитаясь в темном поле,
Голос грустной удалью звенел,
Пел о прошлом счастье и о воле.</p>
Изображение 7. Пример использования тега <hr>.
Элемент <div> является блочным элементом для выделения фрагментов документов, для редактирования этих фрагментов независимо от других. В основном применяется в связке с CSS-стилями веб-страницы, в таком случае для элемента <div>задаются атрибуты «id» и «class». Закрывающий тег обязателен.