Добавлен: 15.05.2023
Просмотров: 191
Скачиваний: 3
Введение
Согласно выбранной теме “Основы программирования на языке HTML”
мы рассмотрим основные элементы HTML и попробуем совместно на примерах в них разобраться.
Цель работы - изучение основ языка HTML.
Для использования примеров необходима ОС Windows,блокнот,paint, браузер
(я использую Google Chrome Версия 60.0.3112.90 ).
Все примеры кода сохраняются в блокноте в кодировке UTF-8 в папке “тест”.
Задачи:
-Рассмотреть основы языка HTML:
- Что является базовым элементом HTML
- Какие типы дескрипторов существуют
- На примерах рассмотреть дескрипторы для обработки различных элементов
- Рассмотреть процесс создания простейшей веб-страницы используя текстовый редактор, без использования конструкторов и специализированных программных продуктов;
Структура: работа состоит из введения, пяти глав, заключения и списка использованной литературы.
Глава I – Базовый элемент разметки гипертекста и работа с ним.
Базовый элемент разметки гипертекста – это дескриптор[1] (“тег”).
Дескриптор — элемент языка разметки гипертекста. Текст, содержащийся между начальным и конечным дескриптором, отображается и размещается в соответствии со свойствами, указанными в начальном дескрипторе. Для того чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования и применяются дескрипторы. Общий синтаксис написания дескрипторов следующий.
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...</тег>
Если какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет проверку браузером.
Создадим простейшую веб-страницу и рассмотрим некоторые из ее элементов. Создадим папку с именем тест, в ней с помощью paint нарисуем картинку 50*50 пикселей черного цвета назовем ее pict.jpg, приведенный ниже текст:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тестовая веб-страница</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<img src="pict.jpg" > <hr>
<p>Основной текст.</p>
<center>Текст <br> с переносом</center>
</body></html>
сохраним в блокноте под названием “тест.html” и откроем в браузере, после просмотра получившейся веб-страницы скриншот № 1, рассмотрим из какого минимального набора элементов должна состоять веб-страница.
Скриншот № 1
Любой HTML-документ содержит три основных обязательных раздела: HTML,HEAD и BODY.[2]
Дескриптор <html> — это контейнер, в котором находится всё содержимое страницы, включая теги <head> и <body>.
Дескриптор <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую.
Дескриптор <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
Дескрипторы бывают парные и одиночные. Парные дескрипторы имеют открывающий и закрывающий дескриптор. Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов вроде <br> закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуем закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать. Парный дескриптор образует контейнер. Содержимое контейнера – это то, что находится между открывающим и закрывающим дескриптором. Возьмём наш код в нем
<html> - открывающий дескриптор
… - cодержимое контейнера контейнер [3]
</html> - закрывающий дескриптор
Одинарные дескрипторы не имеют закрывающего тега. Например: <br>, <img> , <hr>.
<img src="pict.jpg" > - пример одинарного дескриптора.
Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.
Чтобы расширить возможности отдельных тегов и более гибко управлять содержимым контейнеров и применяются атрибуты тегов. Для атрибутов тегов используются значения по умолчанию. Когда для тега не добавлен какой-либо допустимый атрибут, это означает, что браузер в этом случае будет подставлять значение, заданное по умолчанию. Текстовые значения заключаются в кавычки Любые атрибуты нечувствительны к регистру, пишутся внутри открывающего тега и содержат имя и значение. В именах атрибутов нельзя использовать пробелы, кавычки, знак больше (>), слэш (/) и равно (=), а также любые символы не определенные в Юникоде. На практике, все имена атрибутов у тегов известны и вставлять «отсебятину» не имеет смысла. В значениях атрибутов допустимо писать текст и спецсимволы за исключением амперсанда (&), который должен заменяться на &. Допустимо использовать некоторые атрибуты у тегов, не присваивая им никакого значения, к примеру
<img src="pict.jpg" >
<img src="pict.jpg" width="438" height="118">
Порядок атрибутов в любом теге не имеет значения и на результат отображения элемента не влияет. Поэтому теги вида
<img src=" pict.jpg " width="438" height="118">
<img height="118" width="438" src="pict.jpg ">
по своему действию равны. Каждый атрибут тега относится к определенному типу (например: текст, число, путь к файлу и др.), который обязательно должен учитываться при написании атрибута. Так, в примере указан тег <img>, он добавляет на веб-страницу рисунок, а его атрибут width задает ширину изображения в пикселах. Если поставить не число, а нечто другое, то значение будет проигнорировано и возникнет ошибка при проверке кода браузером.
Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.
Условно теги делятся на следующие типы :
- теги верхнего уровня - предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа : <html>, <head>,<body>
- теги заголовка документа - К этим тегам относятся элементы, которые располагаются в контейнере <head>. Все эти теги напрямую не отображаются в окне браузера, за исключением тега <title>, который определяет название веб-страницы.
- блочные элементы - Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки : <blockquote>,<div>,<h>,<hr> и другие.
- cтрочные элементы - элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения: <a>,<b>,<big> и другие.
- универсальные элементы - Особенность этих тегов состоит в том, что они в зависимости от контекста могут использоваться как блочные или встроенные элементы : <del>, <ins>
- списки - взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде: <dd>, <dt>, <dl>.
- Таблицы - состоят из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления табличных данных: <table>,<td>,<tr>,<th>.
- Теги для фреймов - Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега <frame>. С помощью фреймов веб-страница делится на два или более документа, которые обычно содержат навигацию по сайту и его контент. Механизм фреймов позволяет открывать документ в одном фрейме, по ссылке, нажатой в совершенно другом фрейме. Допустимо также использовать вложенную структуру элементов, это позволяет дробить фреймы на мелкие области: <frame>,<frameset>,<iframe>.
Следует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги <ol> и <ul> относятся к категории списков, но также являются и блочными элементами.
Рассмотрев понятие дескрипторов ,их типов и выяснив минимальный набор для работы веб-страницы перейдем непосредственно к её создании и на примерах рассмотрим какие теги связаны с выводом и форматирования текста .
Глава II – Создание веб-страницы, вывод и форматирование текста.
Мы ознакомились с минимальным набором из 3 парных тегов, которые должны присутствовать в веб-странице, но при внедрении определенных элементов для вывода графических элементов или обработки форматирования текста вы скорее всего натолкнетесь на то , что веб-страница будет выглядеть не так как вы задумывали, причина в том что браузеру необходим инструкция для понимания написанного в веб-странице – DTD. Поэтому создание веб-страницы всегда должно начинаться с тега DOCTYPE! Что это за тег и почему он необходим – давайте разберем. Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа)[4]. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.Существует несколько видов <!DOCTYPE>, они различаются в зависимости от версии HTML, на которую ориентированы. В таблице № 1 приведены основные типы документов с их описанием.
|
DOCTYPE |
Описание |
|
HTML 4.01 |
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
Строгий синтаксис HTML. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
Переходный синтаксис HTML. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
В HTML-документе применяются фреймы. |
|
HTML 5 |
|
|
<!DOCTYPE html> |
В этой версии HTML только один доктайп. |
|
XHTML 1.0 |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> |
Строгий синтаксис XHTML. |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> |
Переходный синтаксис XHTML. |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd"> |
Документ написан на XHTML и содержит фреймы. |
|
XHTML 1.1 |
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. |
таблица № 1[5]
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам. Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее. Например, в строгом HTML и XHTML непременно требуется наличие тега <title>, а в переходном HTML его можно
опустить и не указывать. При этом помним, что браузер в любом случае покажет документ, независимо от того, соответствует он синтаксису или нет. Подобная проверка осуществляется при помощи ПО проверки кода на наличия ошибок и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки в документе. В дальнейшем будем применять преимущественно строгий <!DOCTYPE>, кроме случаев, когда это оговаривается особо. Это позволит нам избегать типичных ошибок и приучит к написанию синтаксически правильного кода. Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании <!DOCTYPE> и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику.
И так с первым тегом мы определились – укажем DTD = HTML 5
Открываем блокнот и вставляем в самое начало строчку с тегом указания DTD и тремя обязательными парными тегами – html,head,body сохраняем под именем “моя страница.html” в каталог тест.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Если запустить браузером страницу сейчас, то мы увидим следующее
(скриншот № 2)
скриншот № 2
После тега указания DTD добавим строку
<!-- DTD=HTML 5 -->[6]
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. Хотя такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки. Комментарии нужны для внесения в код своих записей, не влияющих на вид страницы. Начинаются они тегом <!-- и