Ирина Эланс

Автор который поможет с любыми образовательными и учебными заданиями

Скрины своего сайта и символы кодировки страниц HTML

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ УКРАИНЫ ХАРЬКОВСКИЙ НАЦИОНАЛЬНЫЙ УНИВЕРСИТЕТ ГОРОДСКОГО ХОЗЯЙСТВА ИМЕНИ

A. Н. БЕКЕТОВА

Расчетно-графическая работа

По информационным технологиям

Выполнила:

студентка 4 курсу

ФМ

гр. ГОТ -2010-2

Проверила:

Харьков-2013

Содержание

1.Введение

2.Раздел 1

3.Раздел 2

4.Раздел 3

5.Вывод

Введение

Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, броузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.

в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE> предназначен для создания в документах таблиц, но, часто используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении

Раздел 1

Синтаксис HTML.

Рассмотрим основные элементы HTML.

Означает документ на языке HTML. Данный элемент является самым внешним, так как между его начальным и конечным тегами должна находится вся WEB – страница. В принципе этот элемент. Он имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом </html> оканчиваются все документы в формате HTML.

Область заголовка Web – страницы, её первая часть. HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты IANG, DIR, должен включать элемент TITLE и допускает вложение элементов BASE, META, LINK, OBJECT, SCARIPT, STULE.

Элемент для размещения заголовка Web – страницы. Строка текста , расположенного внутри этого элемента, отображается не в документе, а в заголовке окна броузера. Эта строка часто используется при организации поиска в WWW. Эта строка должна достаточно точно отражать назначение документа.

Элемент для описания стиля некоторых элементов Web – страницы. В файле Strukt. Htm назначены шрифты для элементов h2, code. Для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление элемента style не обязательно, но желательно. Этот элемент введён сравнительно недавно, без него немыслима работа в приложениях World, Excel.

<META>

Элемент содержит служебную информацию, которая не отражается при просмотре Web- страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега. Каждый элемент Meta содержит два основных атрибута, первый из которых определяет тип данных, а второй – содержание.

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

Атрибут, определяющий фон страницы, является одним из самых важных для дизайна.

background = “Путь к файлу”

Более простое оформление фона сводится к заданию его цвета:

bgcolor = “#RRGGBB”

text = “#RRGGBB”

Для задания цвета текста гиперссылок используются следующие атрибуты:

link = “#RRGGBB”

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

vlink = “#RRGGBB”

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

Alink = “#RRGGBB”

<!-- Комментарий --!>

В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле – не исключение. Текст, введений внутри этого элемента, игнорируется броузером. Эти элементы могут располагаться в любом месте WEB-страницы. Признаком комментария служит восклицательный знак, а текст комментария должен обрамляться двойным дефисом. Например:

<!-- Комментарий --!>

Элемент заголовка. Существует шесть уровней заголовка, которые обозначаются H1…H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков могут использовать атрибуты, задающие выравнивание влево, по центру или вправо:

align = “left”

align = “center”

align = “right”

<HR>

Горизонтальная линия – очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части.

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

align = “left”

align = “center”

align = “right”

align = “justify”

Можно задать толщину линии:

Size = толщина в пикселях

Можно управлять длиной линии:

width = длина в пикселях

width = длина в процентах

Можно выбрать цвет:

color = “цвет”

<A></a>

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

<A name = “>Произвольный текст</a>

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

<P>Переход к <A href = “#метка”>метке</a></p>

Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.

<BASE>

Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускать начальную часть адреса в ссылках документа.

Раздел 2

Кодирование символов

Основным языком Интернета является английский язык. Но для гипертекстовых документов предусмотрено использование национальных алфавитов. Стандартным режимом отображения является кодировка ISO Latin 1 (ISO 8859-1). Она подходит как для MS-DOS (набор символов ASCCII), так и для Windows. В тоже время броузеры поддерживают набор символов Unicode 2.0 (ISO10646), что позволяет использовать национальные алфавиты. Это означает, что символы могут кодироваться однобайтовым числом (коды в пределах 0-255) или двухбайтовым (0-65 535). В первом случае для использования национального алфавита необходим атрибут charset, так как одни и те же коды символов могут быть интерпретированы по-разному для различных кодовых страниц.

Кириллица (Windows) и/или Кириллица (Кои8-Р) – это две наиболее популярные в нашей стране кодировки.

Если в документе есть указание на определённую кодовую страницу, то выбор шрифта будет предопределён. Коды 32-127, то есть знаки препинания, цифры и буквы латинского алфавита, отображаются правильно, а коды 128-255 могут отображаться по-разному.

Если кодовая страница указана неправильно, то, например, при создании гипертекстовых документов в MS FrontPage Express в текст страницы автоматически добавляется конструкция типа charset =xxxxx, которая не позволяет использовать кириллицу. В этом случае необходимо правильно указать значение атрибута: charset =windows-1251.

Если документ использует кодировку Unicode, то для работы с ним подойдут такие средства, как Блокнот, Norton Commander или WordPad, и придётся остановиться на гипертекстовом редакторе. В этом случае русская буква А будет выглядеть в режиме «источника» так &#1040 (в десятичной кодировке). Такую страницу будет сложно читать и редактировать. Поэтому каждый новый редактор надо тестировать на возможность использования русских букв: набрать небольшой текст, сохранить документ, а затем просмотреть его в режиме источника.

Использование символов

В HTML и в броузерах реализована возможность прорисовки символов по их кодам. Символы могут быть общепринятыми, нестандартными и используемыми в HTML в качестве служебных символов. Их называют спецсимволами. Первый способ ввода спецсимвола заключается в указании его кода. Например, латинскую букву А можно задать так: &#65. Для некоторых символов предусмотрена мнемоническая кодировка.

Часто используемые спецсимволы (по стандарту ISO 8859 – 1):

Код символа	Числовой код	Мнемонический код	Название	Символ
34	&#34	&quot	Прямая кавычка	“
38	&#38	&amp	Амперсанд	&
60	&#60	&lt	знак «меньше»	<
62	&#62	&gt	Знак «больше»	>
153	&#153	&trade	Троговая марка	™
160	&#160	&nbsp	Неразрывный пробел
162	&#162	&cent	Цент	¢
163	&#163	&pound	Фунт	£
164	&#164	&curren	Знак валюты	¤
165	&#165	&yen	Йена	¥
166	&#166	&brvbar	Вертикальная строка	¦
167	&#167	&sect	Знак параграфа	§
169	&#169	&copy	Знак копирайта	©
171	&#171	&laquo	Левая типографская кавычка	«
172	&#172	&not	Знак отрицания	¬
174	&#174	&reg	Знак “зарегестрировано”	®
176	&#176	&deg	Знак градуса	°
177	&#177	&plusmn	Знак “плюс минус»	±
178	&#178	&sup2	Степень 2	²
179	&#179	&sup3	Степень 3	³
181	&#181	&mikro	Знак «микро»	µ
182	&#182	&para	Знак абзаца	¶
183	&#183	&middot	Точка-маркер	·
185	&#185	&sup1	Степень 1	¹
187	&#187	&raquo	Правая типографская кавычка	»
188	&#188	&frac14	Одна четвёртая	¼
189	&#189	&frac12	Одна вторая	½
215	&#215	&times	Знак умножения / кавычки/	*
247	&#247	&divide	Знак деления	/

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

640× 480

Двойная кавычка, угловые скобки и амперсанд (<, >, &) являются служебными в HTML. Если их надо использовать в обычном тексте на Web-странице, то они должны быть указаны только при помощи кодов.

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

Управление цветом

Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются параметры цвета. Самый простой способ определить цвет – написать название цвета на английском языке. Так, например, задаётся красный цвет шрифта в элементе FONT:

Color = “red”

Допустимые названия цветов:

Русское название	Английское название	RGB – код
Аквамарин	Aqua	#00FFFF
Белый	White	#FFFFFF
Жёлтый	Yellow	#FFFF00
Зелёный	Green	#008000
Золотой	Gold	#FF0700
Индиго	Indigo	#4B0080
Каштановый	Maroon	#800000
Красный	Red	#FF0000
Оливковый	Olive	#808000
Оранжевый	Orange	#FF0000
Пурпурный	Purple	#800080
Светло-зелёный	Lime	#00FF00
Серебристый	Silver	#C0C0C0
Серый	Gray	#808080
Сизый	Teal	#008080
Синий	Blue	#0000FF
Ультрамарин	Navy	#000080
Фиолетовый	Violet	#EE80EE
Фуксиновый	Fuchsia	#FF00FF
Чёрный	Black	#000000

Но в общем случае цвет определяется RGB – кодом. Любой цвет в этом случае представляется как комбинация красного (R), зелёного (G), синего (B) цветов, взятых в определённых пропорциях. Доля каждой цветовой составляющей определяется интенсивностью цвета и выражается двуразрядным шестнадцатеричным числом. В десятичном исчислении эти числа соответствуют диапазону от 0 до 255. В Windows–95 это соответствует цветовому режиму монитора True Color (24-разрядное двоичное кодирование цвета).

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

Ещё одно направление применения цвета: элемент HR, создающий горизонтальную линию, допускает использование ряда атрибутов. С их помощью линию можно превратить в цветной прямоугольник. Его можно использовать для разделения частей страницы или в качестве маркеров списка.

HTML – код, рисующий радугу на Web-странице:

<FONT color = “ red “> Радуга </ front>

<TR><TD bgcolor = #FF3030 >K

<TR><TD bgcolor = FFD000 >0

<TR><TD bgcolor = #F3FF5F >Ж

<TR><TD bgcolor = #00FF00 >З

<TR><TD bgcolor = #6FD3F7 >Г

<TR><TD bgcolor = # 5F72FDF >С

<TR><TD bgcolor = # B568F4 >Ф

</ table>

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

Раздел 3

Введение в HTML

Быстрый старт

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

В примере 1 приведен несложный пример такого кода.

Пример 1. Первая веб-страница

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>

<head>

<title>Моя первая веб-страница</title>

</head>

<body>

<h1>Суши бар «Последний самурай»</h1>

<p>Горячие блюда</p>

<p>Десерты</p>

<p>Напитки</p>

/body>

</html>

Изображения

Добавление изображения происходит в два этапа: вначале готовится графический файл желаемого размера, затем он добавляется на страницу через тег <img>. Сам HTML предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя.

Для добавления изображения на веб-страницу используется тег <img>, атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес.

Пример 1.2 Вставка изображения в документ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>

<head>

<title>Добавление рисунков</title>

</head>

<body>

<p><img src="/example/images/home.png" alt="Адрес размещения изображения относительно корня сайта"></p> <p><img src="images/home.png"

</body alt=> "Адрес размещения изображения относительно текущего HTML-документа"></p> </html>

Списки

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

Любой список представляет собой контейнер <ul>, который устанавливает маркированный список, или <ol>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <li>.

Маркированный список

Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера <ul>, а каждый пункт списка начинается с тега <li>, как показано ниже. <ul>

<li> </li> <li>Первый пункт</li>

<li>Третий пунктВторой пункт</li>

</ul>

В списке непременно должен присутствовать закрывающий тег </ul>, иначе возникнет ошибка. Закрывающий тег </li> хотя и не обязателен, но советуем всегда его добавлять, чтобы четко разделять элементы списка.

Нумерованые списки

Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом <li>, как показано ниже. <ol>

<li> </li> <li>Первый пункт</li>

<li>Третий пунктВторой пункт</li>

</ol>

Таблицы

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

Создание таблицы

Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги <td> и <th> нет.

Атрибуты тега <table>

Тот факт, что таблицы применяются достаточно часто и не только для отображения табличных данных обязан не только их гибкости и универсальности, но и обилию атрибутов тегов <table>, <tr> и <td>. Далее перечислены некоторые атрибуты тега <table>, которые применяются наиболее часто. align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы. border

Устанавливает толщину границ в пикселах. Граница отображается вокруг таблицы и между ячейками. cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками. cellspacing

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение. cols

Атрибут cols указывает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого атрибута таблица будет показана только после того, как все ее содержимое будет загружено в браузер и проанализировано. Использование атрибута cols позволяет несколько ускорить отображение содержимого таблицы. rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью атрибута border.

width

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого. Как и в случае с высотой, если ширина явно не указана, то она будет вычисляться на основе содержимого таблицы.

Атрибуты тега <td>

Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои атрибуты, часть из которых совпадает с атрибутами тега <table>. Align

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки. bgcolor

Устанавливает цвет фона ячейки. Используя этот атрибут совместно с атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице. Colspan

Вывод

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

Скрины своего сайта и символы кодировки страниц HTML