Файл: Основы программирования на языке HTML (Техническое задание).pdf

ВВЕДЕНИЕ

Что такое HTML? Это язык разметки гипертекста. То есть каждый день, когда Вы садитесь за свой ПК или ноутбук для того что бы зайти в социальные сети или посмотреть кино, Вы сталкиваетесь с этим языком, не на прямую, но косвенно.

HTML (HyperText Markup Language) - язык разметки гипертекста-предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками. Сам язык не является языком программирования, это язык разметки. Естественно HTML это только фундамент профессионального сайта, т.к. этот язык «примитивен» и является скорее оболочкой сайта, нежели новомодной начинкой. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Язык HTML очень прост, и пользоваться им может абсолютно каждый, для этого быть программистом необязательно, достаточно иметь навыки пользования Интернетом.

1.Основные сведения о HTML

Язык HTML. Краткая история

HTML появился в конце 1980-х годов (а вместе с ним и для WWW), когда ученые из лаборатории элементарных частиц в Европе (CERN) появилась необходимость обмениваться множеством различной информации и документами в сети Интернет (тогда очень быстро развивающейся). В тот момент необходимо было придумать как разместить необходимую информацию так, что бы она была доступна всем пользователям данной сети и в других сетях в Интернете и одинаковым образом, то есть что бы было одинаково все, цвет, шрифт и т.д. Решение поставленной задачи было найдено сотрудником CERN Бернерс-Ли. В 1989 году Тим Бернерс-Ли создал новый язык форматирования документов. Он взял в его основу ранее используемый язык– SGML, который так же предусматривал использование гиперссылок между ними. Новый язык получил свое название HyperText Markup Language. Так же для просмотра HTML-документов был необходим ресурс, и этот же человек его изобрел – браузер. [3]

Язык гиперссылок быстро прижился. Вскоре в Интернет стала заполнять сеть, в которой было большое количество подобных документов, которую постепенно стали называть World Wide Web. Уже в 1993 году команда программистов, руководителем которой являлся основатель компании Netscape Марк Андриессен, спрограммировали первый браузер, с полноценным графическим инструментом и позволяющий работать мышкой – Mosaic. Он быстро приобрёл популярность в развивающейся Сети. Со временем Интернет стал всем областям, не только в среде ученых. Со временем ля многих стало очевидно, что HTML, не развивающийся в динамике в создаваемых с его помощью документах, скучен и невзрачен. Это был толчок к созданию CSS, введению поддержки апплетов Java, а после и сценариев (первым языком был JavaScript). С выходом на рынок новых браузеров, было многое внесено в изменения гиперссылок, а так же и постоянные собственные качество браузеров. Это привело к срочному созданию организации, которая должна было следить за стандартами, и уже в 1994 году она было создана получив название WWW – World Wide Web Consortium (W3C). Эта организация сразу начла заниматься подготовкой стандартов HTML (начиная с HTML 2.0). Организация W3C существует и сейчас. Она до сих пор занимается вопросыми стандартизации. Развитие языка HTML сегодня практически завершено, и все основные усилия направлены на более новые технологии, например недавно новым и расширяемым языком разметки XML и языком преобразований XSLT и др.[12]

---

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

Базовые понятия HTML

Весь процесс написания любого HTML документа заключается в планирование страницы, то есть выбора основных тегов и стилей, а так же в среде написания. Основной средой написания является обыкновенный блокнот, которому мы даем определенное расширение и направляем открытие в браузере. Сейчас рассмотрим предназначение и преимущества каждого дополнения. [2]

Каждый разработчик при написании любого документа придерживается своего основного стиля, но процесс начала и конца прописан точно, то есть теги головы, тела и подвала всегда открываются включают в себя основные элементы и закрываются. Каждый документ HTML начинается с главного и не парного тега <!DOCTYPE html>, именно этот тег означает, что документ будет написан именно на языке HTML. После выше приведенного тега начинается сам документ, который обязательно сопровождается парным тегом <html> </html>. Между этими тегами располагается два основных блока, таких как голова HTML – документа, который сопровождается тегом <head> </head>. Второй блок это тело HTML документа, который сопровождается парным тегом <body> </body>.[11]

Первый блок документа HTML, это голова, парный тег <head> </head>. Блок головы начальный, включает в себя подготовку в написании тела HTML документа. Вся служебная информация, содержащаяся в голове не видна, кроме единственного тега <title> , который мы так же рассмотрим позже. Через этот блок можно добавить стилевые эффекты, определенные сценарии или же служебную информацию.

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

Тег <title> </title> - единственный тег отображающий информацию. Тег используется для отображения названия документа HTML.

Тег <meta> - мета тег, оставляет определенный метки или служебную информацию, например о версии HTML или другую служебную информацию. Этот тег не парный.

Тег <link> - тег ссылающийся на внешние источники данных, по другому можно сказать, что тег прикрепляет к документу HTML файлы, документы или стили. Прикрепляемая информация может быть видна, а может быть не видна, все зависит от вида прикрепляемой информации. Данный тег так же не парный. [10]

---

Тег <script> </script> тег испозующийся для прикрепления внешних сценариев или просто содержит сценарий от JavaScript. JavaScript это язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Изначально придуман для того, что бы сделать документы HTML «живыми». Для написания программ нет необходимой подготовки, так же имеются определенные правила.

Второй блок документа HTML, это тело. Этот блок содержит всю информацию документа, то есть страницы, ссылки, картинки и т.д. Блок сопровождается парным тегом <body></body>. Внутри тега можно задать необходимые для страницы атрибуты. Атрибуты – это значения расширяющие возможности тегов. Атрибуты в основном влияют на внешний вид документа, так например при помощи атрибутов можно изменить цвет страницы, или поставить картинку, можно изменить цвет или вид шрифта. В общем атрибуты дают большие возможности для стиля. Атрибуты содержатся не внутри парного тега, а присваиваются тегу, то есть <BODY bgcolor="#00ff00">, пишется название атрибута и при помощи «=» присваивается его значение обязательно в двойных кавычках «” ”». [12]

(Табл1.1 Основные атрибуты и их значения.)

Атрибут	Свойства	Теги
align	выравнивание left right center justify bottom (снизу) middle (по центру) top (сверху)	н, р, div, hr, table, embed, img, marquee
background	имя файла для обоев	body, table, td
bgcolor	цвет фона	body, table, tr, td, marquee
border	ширина рамки	img, table, marquee
bordercolor bordercolorlight bordercolordark	цвет рамок в таблице для освещенной части для затененной части	table
color	цвет текста	font, hr
cols	задает столбцы	textarea, frameset
face	название шрифта, напр. arial, times new roman	font
(Табл1.1 Основные атрибуты и их значения.)
Height	высота	img, marquee, td, embed
href	адрес загружаемого файла или закладки	a, area, base
lang	язык en en-us de ru uk	почти все теги
src	имя файла рисунка	img, frame, input, bgsound, embed
text	цвет текста	body
title	всплывающий текст	почти все теги

Существует так же парный тег <div></div> про который нельзя не рассказать. Данный тег выступает в роли контейнера. То есть мы можем видимо или невидимо разделить страницу на контейнеры и в них поместить какую либо информацию. Это начальная стадия создания «таблиц». Но на самом деле, мы просто можем определенно разделить страницу, так что бы можно было визуально комфортно расположить информацию. Он так же имеет свои собственный параметры и свойства.[5] Приведем наглядный пример:

---

<div>

<p>

Привет Мир!

</p>

<p>

В первых строках своего письма передаю поклон Марье Ивановне.

</p>

</div> [1]

Свойства:

Style – это определенное свойство, при помощи которого мы можем задать нужный нам стиль. Стиль подразумевает в себе изменение стиля контейнера, можно так же поставить какую либо картинку, либо изменить шрифт. Преимущество в том, что можно это все использовать не по отдельности, а вместе. Либо через присоединенный файл CSS, который подключается в первом блоке HEAD, обраться к его стилистике.

А так же имеются определенные стандартные атрибуты, которые могут быть использованы, а могут быть неиспользованные. Все зависит от того, в какой момент используется парный тег <div></div>. Рассмотрим основные атрибуты парного тега <div></div>:

CLASS – определяет к какому классу будет относится контейнер.

DIR – определяет направление теста внутри контейнера.

LANG – название говорит само за себя, определяет язык, который будет использоваться внутри контейнера.

TITLE – дает дополнительную информацию для контейнера, она будет видна в документе HTML.

Это были самые основные атрибуты, которые использует парный тег <div></div>.

Так же парный тег <div></div> не может существовать без парного тега <p></p>, который отвечает за заголовок и абзац. То есть нам необходимо разделить страницу на определенные контейнеры, что бы разместить в нем информацию. Именно с этого парного тега начинается размещение информации в контейнере. У этого парного тега так же имеются свои свойства.

Рассмотрим основные теги, которые могут применяться внутри парного тега <div></div>:

<h1> </h1> - парный тег, который отвечает за заголовок, имеет параметр от 1 до 6 и каждый параметр делает определенный стиль заголовка. На данные момент увеличивает шрифт заголовка.

<li> </li> - парный тег, который определяет номер строки, где будет содержаться та или иная информация.

<p> </p> - парный тег, который отвечает за создания параграфа. Внутри себя так же может содержать еще параграфы.

<u> </u> - парный тег, который подчеркивает тест внутри контейнера.

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

Для того, что бы в т=документе присутсвовали внешние файлы, такие как картинки, музыка и т.д. применяется специальный тег <link>. У этого тега так же имеются свои атрибуты. Рассмотрим основные атрибуты:

---

Charset – этот атрибут отвечает за кодировку ссылки.

Href – этот атрибут определяет внешний путь, то есть расположение документа, на который идет ссылка.

Hreflang – этот атрибут определяет каким будет зык, на который идет ссылка.

Естественно без атрибута «Href», который отвечает за расположение файла, к которому ссылается документ, работать не будет. Это самый основной и стандартный атрибут.[6]

CSS

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

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

CSS получила такое называние из-за того что вся информация о стиле в этом документе представляется в виде таблицы. То есть идет наименование тега, потом его атрибуты и свойства этих атрибутов и тегов. Пример выглядит так:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address {

margin: 0;

padding: 0; }

То есть сначала представлен тег <body>, прописаны все его атрибуты и свойства.

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

Представляю вам пример каскадных таблиц стиля:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address {

margin: 0;

padding: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

font-size: inherit;

}

fieldset, img {

border: 0;

}

address, caption, cite, code, dfn, em, strong, th, var {

font-style: normal;

font-weight: normal;

}

li {

list-style: none;

}

caption, th {

text-align: left;

}

q:before, q:after {

content: '';

}

abbr, acronym {

border: 0;

font-variant: normal;

}

sup {

vertical-align: text-top;

}

sub {

vertical-align: text-bottom;

}

input, textarea, select {

font-family: inherit;

font-size: inherit;

font-weight: inherit;

}

legend {

color: #000;

}

pre, code, kbd, samp, tt {

font-family: monospace;

---