Файл: Основы программирования на языке HTML (Глава 1. История создания языка программирования HTML).pdf
Добавлен: 05.07.2023
Просмотров: 145
Скачиваний: 3
СОДЕРЖАНИЕ
Глава 1. История создания языка программирования HTML
1.1 Программирование с HTML в период с 1986 по 1999 года
1.2 Программирование с HTML в период с 2000 года по настоящее время
Глава 2. Структура web страницы, написанной на языке программирования HTML
2.1. Алгоритм создания web страницы на языке программирования HTML
2.2. Содержание (тело) HTML документа
Глава 3. Форматирование HTML документа
3.1. Текстовая и визуальная информация в HTML документе
Так же в описании создаваемой web страницы необходимо указывать кодировку, чтобы программа – браузер могла правильно понять формат содержащей в себе информации. Если будет указана неверная кодировка, то пользователи, зайдя на созданную страницу, смогут увидеть только непонятные для себя иероглифы. Вот пример правильного указания кодировки в описании страницы:
Таким образом, при создании web страницы следует работать по стандартам языка разметки, которых, на данный момент, существует три вида. При составлении html документа и правильном использовании по стандартам всех необходимых тегов форматирования, программа web браузер будет правильно взаимодействовать с таким web документом и, соответственно, будет работать без ошибок.
2.2. Содержание (тело) HTML документа
После изучения правильного алгоритма создания HTML документа посредством помещения кода нашей страницы между тегами “<html>” и “</html>” и ознакомления с описанием сайта, стоит отметить непосредственное содержании html документа, в котором как раз средствами написанных и применённых тегов описывается правильная работа графического отображения web страницы для пользователя.
Содержание или тело документа описывается между тегами “body” (перевод с англ. «тело»). Примерный вид имеет следующий:
На примере выше мы создали “тело” нашей web страницы и написали в нём текст и указали этот текст, как параграф.
В теле HTML документа создаётся практически всё, что видит пользователь, зайдя на какой-либо интернет ресурс. В тело помещается текст, весь медиа контент, таблицы, есть возможность подключать скрипты на языке программирования “JavaScript” и ещё много другое.
В тексте документа web страницы, разработчики сайта, могут оставлять комментарии для более быстрой и удобной навигации для программистов. Данный вид текста не будет доступен простым пользователям ресурса. Этот вид комментариев помещается между специальными тегами “<!--” и “-->”. Пример использования:
Перейдя на данную страничку в программе – браузере, пользователь увидит только «Тело сайта», так как сработает тег для комментирования.
Для составления самого простого html документа, достаточно просто в «тело» документа написать любой текст и web браузер покажет эту информацию. Но для более качественной работы с web документом требуется использование специальных тегов, которые предназначены для определённого форматирования текстовой или визуальной информации.
Например, можно создать новый html документ с одними лишь открывающими и закрывающими тегами «тела» сайта и прописать туда обычный текст. Web браузер обработает данный документ как обычный html, что видно на примере ниже - текст в редакторе и уже в web браузере:
Как видно из примера, любой web браузер воспримет данный документ быстро, но для более качественной работы необходимо помнить о стандартах разметки, правилах и тегах языка HTML.
Исходя из описанного, можно сделать вывод, что любой html документ необходимо создавать с использованием тегов форматирования для лучшей работы с документом, а в последствии, после публикации своего web сайта, для лучшей читабельности пользователем. Так же стоит отметить, если работа над web проектом проходит в команде, то следует чаще использовать комментарии, чтобы любой другой разработчик сразу же мог понять код и вникнуть в суть тегов написанного вами документа.
Глава 3. Форматирование HTML документа
3.1. Текстовая и визуальная информация в HTML документе
Ранее я уже описал строение HTML документа. Любой web сайт, написанный на языке разметки, состоит из тега «html», в котором помещается весь текст сайта и всё описание, само описания сайта в теге «head», в котором также можно подключить различные стили, для визуального отображение страницы с помощью языка CSS, а также само «тело» сайта в теге «body», в котором пишется вся текстовая и визуальная информация, доступная для пользователя при запросе.
Хотелось бы более подробно остановиться на обработке информации в «теле» HTML документа, а также изучить работу тегов.
Любая информация на любой web страницt делится на элементы. Они бывают как строчные, так и блочные. Многие дизайнеры для создания дизайна для web сайта работают в основном с блочными элементами, потому что с ними легче и лучше работать с языком CSS, для управления стилем самой страницы.
В любом правильно составленном тексте есть заголовки. В HTML они тоже имеются и задаются тегом «h».
Заголовки бывают шести типов, от 1 до 6. Правильно пишется так: <hx>Текст заголовка</hx>, где x от 1 до 6.
Ниже на фото будет показано правильное составление всех шести заголовков в программе – редакторе, а на втором изображении показано, что получится уже непосредственно в программе – браузере:
Далее, примеры, приведенные в курсовой работе мы будем запускать через бесплатный браузер Google Chrome. После того, как в текстовом редакторе был написан весь нужный нам код, сохраняем получившийся документ на компьютер и, как было указано ранее, обязательно в формате «.html». После сохранения необходимо просто запустить файл, и он откроется уже непосредственно в браузерной программе. Результат показан на фото ниже:
На фото видно, что каждый заголовок со своим номером имеет свой размер.
После создания заголовков идёт создание основного текста, разделенного на абзацы. Для этого используется специальный тег «p». Пример использования показан на фото:
Для проверки работоспособности пробуем запустить наш HTML файл в браузере и посмотрим на его работу.
Стоит заметить, что каждый текст, помещённый между тегами «p», независимо от того составлен он на одной или нескольких строках, всё равно будет выведет в одну. В некоторых случаях допускается составлять абзацы без закрывающегося тега «</p>».
В каждом теге можно указывать его параметр. К примеру, в тег абзаца можно указать его графический стиль при помощи языка CSS, можно указать имя для этого элемента и в отдельном файле CSS указать стиль его отображения пользователю при запросе web страницы.
Для форматирования обычного текста часто используют только эти два тега, «<h>» и «<p>».
Далее, мы рассмотрим блочные элементы. Они постоянно используются дизайнерами, для лучшего управлением стилем определённого элемента на web странице. С помощью блочного тега можно проще группировать разные элемента и соответственно качественнее управлять их параметрами для графического вида. В наше время практически все web дизайнеры используют блочное управление элементами для быстрой вёрстки сайта с нуля или из макета.
Блочный элемент строится из открывающегося тега «<div>» и закрывающегося «</div>». Как описывалось ранее, в тегах можно устанавливать их параметры, стили, имя, классы. В настоящее время web сайты имеют огромное количество блочных элементов и если искать определённый элемент, то это вызовет затруднения для разработчика данного документа. Для более быстрого поиска по ним, как для редактирования, так для стилизации посредством языка CSS, блочным элементах в параметры тега добавляют специальный атрибут, будь то его имя, или его «id», можно также добавить класс. В современных web сайтах таких элементов могут быть тысячи.
Как в текстовых редакторах, так и в языке разметки HTML, без помощи языка CSS можно выделить нужным нам текст, промаркировать его, сделать важным фрагментом. Для того, что сделать это, нужно использовать тег «<mark>». Требуется не забывать использовать закрывающий тег, иначе весь текст дальше открывающего тега будет помечен жёлтым цветом.
На фото ниже будет показана работа в редакторе с данным тегом и вывод в браузере:
А ниже вывод нашего документа в web браузере:
С HTML документом можно работать наравне с текстовым редактором. Можно изменять размер текста, работать со шрифтом.
Для того, чтобы сделать определённый фрагмент текста полужирным шрифтом, нужно использовать тег «b». По смыслу тег «b» похож функционалом на тег «strong».
Чтобы сделать выделенный участок текста или выделить определённое слово курсивом, достаточно поместить его между тегом «i», а в более новых версиях языка HTML можно использовать тег «em». Он аналогичен по своей работе.
Важное слово или несколько слов в тексте определенного предложения, нужно поместить его между тегом «u». Данный фрагмент текста между тегами будет отображаться как подчеркнутый текст.
К примеру, если программисту понадобилось для каких-либо нужд показать определённое слово или группу слов в предложении как перечёркнутый текст, можно использовать тег форматирования шрифта «s».
На фото ниже показано, как будет выглядеть текст в программе редакторе, а затем, как HTML документ будет выглядеть уже в web браузере:
Таким образом, из проведённой работы выше, мы можем сделать несколько выводов.
Весь документ html работает внутри тега "html" открывающийся и закрывающийся.
Непосредственно web документ состоит из нескольких частей, в которых происходит вся настройка web страницы и визуальное отображение для конечного пользователя.
В теге "head", как раз, происходит настройка страницы, к примеру, задаётся язык, стили, а также можно подключать сторонние библиотеки, как для стилей, так и для подключения кода javascript.
Визуальное отображение обрабатывается между тегами "body". Для работы с текстом и последующей подаче её для пользователя в теле сайта используются специальные теги форматирования.
3.2. Виды, параметры и теги списков в HTML документе
В языке разметки HTML можно также создавать списки. Списки - это те же самые абзацы, только упорядоченные. Списки бывают маркированные и пронумерованные. В курсовой работе я работаю с двумя вариантами составления этих списков.
Первый вариант - маркированный список. Создаётся данный вид списка при помощи тега «ul». Далее, внутри это списка, нужно каждый новый абзац начинать при помощи тега «li». В конце этого абзаца желательно по стандартам ставить закрывающий тег, но это не обязательно, так как работать будет и без него. Получается, список является контейнером для нескольких абзацев.
На фото ниже приведен вариант из текстового редактора, а на втором фото пример запуска из браузера:
Второй вариант - нумерованные списки. Нумерованные списки в web документах открываются и закрываются специальным тегом «ol». Внутри данного списка новые абзацы со значениями создаются всё так же посредством тегов «li». Хотел бы заметить, что в старых версиях языка разметки HTML нумерованные списки принимались только с стандартными значениями и начинались только с цифры 1. С появлением новой версии HTML 5 появилась возможность добавлять в открывающий нумерованный список параметры, с помощью которых можно редактировать формат каждого нумерованного абзаца, номер, с которого будет начинаться список по порядку и сделать так, чтобы нумерация шла не от меньшего к большему, а наоборот.
Для того, чтобы применить первый вариант параметра и отредактировать формат его абзацев, требуется в открывающийся тег, после «ol» прописать дополнительно «type=”x”», где «х» может принимать несколько вариантов. Первый «A» - все абзацы, внутри списка, будут начинаться прописными латинскими буквами.
Второй вариант «а» - все абзацы, внутри списка, будут начинаться строчными латинскими буквами.
С помощью следующего варианта абзацы будут нумероваться римскими цифрами. Сделать это можно с помощью тега «I». Если написать маленькую i в теге, то римские буквы будут в строчном формате.
Чтобы задать номер, с которого будет начинаться счёт абзацев, требуется в параметрах открывающегося списка добавить помимо «type» ещё параметр «start=’x’», где х – значение(цифра), с которого как раз и будет начинаться отчёт.
Третьим параметром под названием «reversed» задаётся порядок обратного отсчёта при составлении нумерованного списка.