Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML (Язык HTML и его назначение)

Содержание:

Введение

Интернет развивается довольно стремительно. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементов WWW. WWW или же World Wide Web-глобальная сеть где содержит миллионы сайтов, на которых размещена различная информация. Для создания страницы необходимо владеть языками для написания серверных скриптов, как PHP,XML,ASP, Perl, для того чтобы страница была более динамичнее используются скрипты VBScript и JavaScript, они помогают производить вычисления ,как например работа с датой и временем.

Первое что необходимо научиться- это создавать простые страницы с помощью HTML. Если вы думаете что нет необходимости, то не стоит так думать. HTML давно перестал уже быть просто языком программирования. Человек изучающий этот язык получает возможность делать сложные вещи простыми способами, главное быстро. В гипертекст включается мультимедиа и обычные документы. Язык HTML на данный момент используется по всему миру. Он позволяет создавать «заготовки» будущей страницы, а уже позже можно с помощью скриптов. Во время создания страниц необходимо владеть языком HTML.

Объект исследования: язык гипертекстовой разметки HTML.

Предмет исследования: изучение возможностей языка гипертекстовой разметки HTML.

Цель: рассмотреть особенности работы в языке гипертекстовой разметки HTML.

Задачи исследования:

Изучить и проанализировать специальную литературу по теме исследования.
Рассмотреть основы языка гипертекстовой разметки HTML.
Выявить особенности работы с языком гипертекстовой разметки HTML.
Создать электронное портфолио при помощи языка HTML.

Методы исследования: изучение литературы, анализ, синтез, классификация и обобщение, моделирование.

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

Глава 1. Язык программирования HTML как средство создания гипертекстовых документов

1.1. Язык HTML и его назначение

Термин HTML (Hyper Text Markup Language) означает «язык маскировки гипертекстов», он был создан для того чтобы создания форматированного текста, насыщенного звуком, изображениями, анимацией, видеоклипами и гипертекстовыми ссылками на различные документы, разбросанные по всему Интернету, находящиеся на этом же сервере или являются частью этого Веб-проекта.

HTML – похож на обычный текстовый файл, в котором находится как стандартный текст, так и особые коды форматирования или разметки. Эти коды указывают, каким образом должен отображаться данный документ программой — просмотрщиком (браузером).

Язык — HTML представляет синтаксис и набор управляющих команд (тегов, tags), они не выводятся на экран, но указывают браузеру, как отображать содержимое документа. Также он для создания ссылок на другие документы, локальные или сетевые, которые находятся в сети Интернет. Добавляются команды, позволяющие «включать» и « выключать» те или иные режимы отображения, предписывающие браузеру выполнить какое-то действие (например, «разорвать» в этом месте абзац и перенести дальнейший текст на новую строку, загрузить из внешнего из внешнего файла и «внедрить» в текст иллюстрацию из указанного внешнего файла и пр.). Также можно разработать Web-страницу, без знания языка HTML,поскольку HTML тексты могут создаваться разными специальными редакторами. Но писать HTML нетрудно. Это даже легче чем изучить интерфейс самих специальных редакторов по HTML которые бывают ограничены в своих возможностях, или во все приводит к ошибки HTML код, который не работает на разных платформах.

Гипертекст-это информационная структура, которая позволяет установить смысловые связи между элементами текста на экране компьютера таким образом, чтобы переходить от одного элемента к другому. Когда его применяют по умолчанию он выделяется синим цветом и подчеркиванием, в последствии можно изменить цвет (гиперссылки).[14]

Слово же «гипертекстовый» в расшифровке названия языка HTML нуждается в отдельном пояснении.[8]

Первая попытка применения гипертекста в Интернете была сделана Тимом Бернерсом Ли, сотрудником Лаборатории физики элементарных частиц европейского центра ядерных исследований (CERN) в 1989 г. [6]Она создавалась для браузера Mosaic, популярного в прошлом. Но не нашлось достойного применения ни для зыка, ни для браузера. В 1993 году появилась HTML+, эта версия практически осталась неизменной. В июне 1994 году появилась версия HTML версия 2.0, которая стала широко использоваться, и также этот год стал ростом популярности WWW. Элементы включенные в эту версию по сей день используются. Через год вышла версия HTML 3.0, в которой появились возможность прорисовки математических символов (дроби, знаков интервала, бесконечности, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Этот проект стал тупиковым и дальнейшего распространения не получил.

1996 год знаменовался тем что вышла версия HTML 3.2 в которую были включены фреймы, которые стали весьма популярны у разработчиков Web-страниц. Практически все современные браузеры поддерживают версию HTML 3.2. В следующей версии HTML 4 (Dynamic HTML) они были включены на полном основании, эта версия вышла в 1997 году. Уже в этом году было очевидно что дальнейшее развитие гипертекста будет осуществляться за счет скриптов- программирования. Оказалось это наиболее эффективным, чем вводить новые элементы.

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

Язык HTML как средство реализации гипертекста и гипермедиа в сети Интернет наряду со стандартом адресации URL (Universal Resourse Locator,

«универсальный адрес ресурса») и протоколом HTTP (Hyper Text Transfer Protocol) является одним из «трёх китов» WWW сделавших Интернет доступным даже для неподготовленных пользователей.

HTML состоит из тегов. Все теги заключаются в скобки “<” и заканчиваются символом “>” тег ( возможно, с указанием одного или нескольких дополнительных атрибутов с заданными значениями; строчный и прописной регистр в записи тегов и параметров, как правило, не различается, за исключением отдельных, особо оговариваемых случаев). Действие этой тега в зависимости от его действий либо выполняется однократно в данной позиции текста, либо распространяется на весь последующий текст до «ответного» данному «закрывающего» тега или до появления такого же тега с иными значениями атрибутов. Также есть «закрывающиеся» теги является почти точной копией «открывающего», но его название предваряется символом дробной черты «/» и в нем не требуется указание каких-либо атрибутов в закрытии тега. Такая конструкция из «открывающего» и «закрывающего» тегов называется контейнером, а действие его распространяется на весь текстовый фрагмент, заключенный внутри контейнера.

Бывает что контейнеры могут быть вложенными друг в друга. В этом случае для текста, заключённого внутри нескольких вложенных друг в друга контейнеров, действие не противоречащих друг другу тегов и их параметров «суммируется», а для одноимённых тегов и параметров значение, присвоенное во вложенном контейнере, имеет больший приоритет, чем в наружном по отношению к нему. Однократные же действия выполняются независимо от их расположения внутри контейнера (контейнеров).

Пример:

1) <B> Устанавливается жирное начертание шрифта</B> -тег <B>...</B определяет начертание внутри него фрагмента текста;

2) <BR> предусмотрен для разрыв строки -

одиночный тег <BR> переносит текст строки на другую строку.

- 1. <FONT COLOR =”GREEN”>Текст зеленого цвета, а <Font SIZE=5> размер </FONT> слово <FONT COLOR=”BLUE”> синий </FONT> цветом </FONT> - здесь имеется три контейнера <FONT>. . . </FONT>, из которых два вложены внутрь третьего. В результате, для слова «размер» при отображении останется заданный во внешнем контейнере в качестве значения параметра COLOR зеленый цвет, но будет увеличен размер символов (параметр SIZE, никак не «конфликтующий» с параметром COLOR), а слово «синий» будет выведено другим, синий, цветом, по сколько в контейнере, в котором оно заключено, прежнее значение параметра COLOR «вытесняется» новым. Однако после закрытия этого вложенного контейнера для текста снова будет использоваться прежний синий цвет.[1]

1.2. Структура Web-страницы и Web-сайта

Web-страница напоминает собой текстовый файл. Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использоваться любой текстовый редактор.

Страница на которую попадает пользователь, когда вводит www-адрес (или URL) данного сайта, должен называться index.html или welcome.html. Остальные страницы сайта (если они есть) могут иметь произвольные имена (но обязательно без символа «#» и состоящие из латинских букв, иначе могут возникнуть проблемы при их размещении на сервере), а пользователь будет попадать на них по ссылкам с основной страницы.

Содержимое файла Web-страницы заключается в тег <HTML> . . .

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

Интернет — страница обычно состоит из двух частей: заголовка (HEAD) и тела (BODY). Эта базовая структура в простейшем виде , ее можно наглядно показать.

<HTML> Начало тега HTML – документа

<HEAD> Начало тега заголовка

<TITLE> начало тега строки — названия страницы

… строка названия страницы

</TITLE> конец тега строки — названия страницы

</HEAD> конец тега заголовка

<BODY> начало тега тела страницы

… тело (всё содержимое) страницы

</BODY> конец тега тела страницы

</HTML> конец тега HTML – документа

Таким образом, чтобы превратить имеющийся текст в готовую Web-страницу, достаточно лишь заключить весь этот текст в тег <BODY>, добавить сверху строку-название, заключённую в «двойной» тег <HEAD><TITLE>… </TITLE> <HEAD/>, а потом всё это заключать в общий тег <HTML> … </HTML>, тогда браузер воспринимает такую запись совершенно правильно и выдаёт в своём окне необходимый текст.

Чтобы создать страницу, следует сначала использовать эти теги.

Указанная строка-название будет выводиться в заголовке окна браузера, когда данная страница будет в нём просматриваться, а также (уже после размещения этой страницы в Интернете) в списках, выдаваемых поисковыми серверами, и в списке «Избранное» браузера, если эта страница будет туда помещена. [12]

Здесь же слово «заголовок» обозначает текстовую строку, которая выводится в окне браузера.

Пример:

<TITLE> Web-страница </TITLE>

</HEAD>

<BODY>

Страничка получилась не очень красивой, но ведь она работает!!!

</BODY> </HTML>

Рис.1 Пример Web-страницы.

Если тег <TITLE> … </TITLE> отсутствует, то в заголовке окна браузера указывается адрес к HTML – файлу (и/или путь) и имя просматриваемого HTML – файла.

Пример:

</HEAD>

<BODY>

Страничка получилась не очень красивой, но ведь она работает!!!

</BODY> </HTML>

Рис. 2 Пример Web-страницы без тега <TITLE>.

При необходимости в HTML – текст можно добавлять комментарии, состоящие из любых символов, заключённых в «полутеги» < ! - - и - ? (т. е. весь комментарий фактически представляет собой один огромный тег, который может состоять из нескольких «физических» строк: обнаружив комбинацию <! - - , браузер игнорирует все последующие символы до - - > включительно). Роль таких комментариев, по сути, та же самая, что и в языках программирования: добавление в код программы каких-либо пояснений, полезных для разработчика данной страницы, но не показываемых в браузере. Кроме того, эти же «полутеги» можно использовать и для временного «отключения» какой- либо части HTML - текста при отладке страницы, просто «закомментировав» с их помощью соответствующий фрагмент. Комментарии не могут быть «вложенными» друг в друга.[1]

Таким образом, большинство людей в последнее время стали больше работать в сети интернет. И одним из способов самовыражения стало созданием личных страничек. Веб-страница (англ.Web page) — документ, содержание которого пригодно для обработки, манипулирования и просмотра посредством веб-браузера. Веб-страницы могут располагаться локально (на персональном компьютере) или на сетевых устройствах(серверах) в локальных и глобальных сетях. Изначально веб-сайты представляли из себя совокупности статических документов. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин веб-приложение - готовый программный комплекс для решения задач веб-сайта. Веб-приложение входит в состав веб-сайта, но веб-приложение без данных сайтом является только техническим.

Язык HTML — это язык гипертекстовой разметки, отображаемых браузерами на экранах ЭВМ. Язык HTML определяет правила описания гипертекстов и отображения их браузерами на экранах компьютеров.

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

HTML разработанимом Бернерсом Ли, сотрудником Лаборатории физики элементарных частиц европейского центра ядерных исследований (CERN) в 1989 г. [6]. Со временем появился HTML+ в 1993 году. Буквально через год вышла версия HTML версия 2.0 и она стала постоянно использоваться и используется по сей день. В 1995 год вышла версия HTML 3.0, она в себя включила математические символы, они вставлялись при помощи элементов языка. Через год вышла версия HTML3.2 в которую включили фреймы, которые используются в приложении курсовой. И HTML 4.0 вышла в 1997 году, далее создания страниц использовались скрипты- программирования.

Глава 2. Создание Web- страниц с помощью языка HTML

2.1. Размещение и оформление текста

Разбивка на абзацы

Чтобы разместить определенный текст на странице, текст может быть заготовлен заранее, тогда добавляются требуемые теги, или же Интернет-страница должна быть в виде шаблона, текст можно ввести в него с клавиатуры или скопировать через буфер обмена. Когда мы в тексте прописываем абзац, в браузере это игнорируются, поэтому каждый абзац обрамляется парой тегов: <P> (в начале) и </P> (в конце),так как этот тег закрывающийся, тогда между абзацами автоматически оставляется небольшой отступ.

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

Длинные фрагменты текста автоматически переносятся на новые строки, в соответствии с установленной в данный момент шириной окна браузера. При необходимости можно запретить такой автоперенос, заключив соответствующий фрагмент текста в тег <NOBR> . . . </NOBR>. Однако, когда такая строка не умещается в окне браузера целиком, её чтение существенно затрудняется необходимостью использования горизонтальной линейки прокрутки, поэтому злоупотреблять этим приёмом не следует.

Полезным также является тег <WBR>, определяющий «скрытый» разрыв строки, т.е перенос текста на новую строку выполняется в данном месте только в том случае, если это необходимо ( а именно, оказавшись в середине строки, которая не выходит за правый край окна, тег <WBR> никакого влияния на размещение текста не оказывает).[7]

Выравнивается с помощью атрибута ALIGN, если по умолчанию то будет слева, ALIGN записывается внутри тега <P>: < P ALIGN =… >, где можно записать одно из следующих значений:

CENTER - центрировать

RIGHT – выровнять по правому краю

LEFT – выровнять по левому краю

JUSTIFY – выравнивание по формату (по левому и правому краям одновременно).

При использовании данного атрибута в конце абзаца нужно обязательно записать закрывающий тег </P>.

Пример:

<TITLE> Абзацы</TITLE>

</HEAD>

</BODY>

<P> По умолчанию- левый край. </P>

<P ALIGN=CENTER> Значение CENTER <BR> разрыв строки. <BR> </P>

<P ALIGN=RIGHT> Значение RIGHT — выравнивание по правому краю. </P>

<P ALIGN=LEFT> Значение LEFT — выравнивание по левому краю.</P>

<P ALIGN=JUSTIFY> Значение JUSTIFY –выравнивание по ширине </P>

</BODY> </HTML>

Рис. 3. Разбивка на абзацы.

Текстовый блок

В случае необходимости указания специальных свойств отдельному фрагменту текста используется тег <DIV>. Изменение свойств осуществляется посредством назначения выбранному фрагменту текста стиля CSS, например:

<DIV STYLE=''COLOR: RED;''> Фрагмент текста, набранный серым цветом. </DIV>

Тег DIV является структурным тегом, а также создает принудительный перенос строки на одну после своего закрывающегося тега. Поэтому задавать с его помощью отдельные свойства фрагмента внутри абзаца нельзя- это вызовет принудительный перенос строки.

Для этого тега возможно использование атрибута типа выравнивания ALIGN.[18]

Заголовки и подзаголовки

В HTML чтобы объявить текст заголовком или подзаголовком ( задав для него крупный и жирный шрифт, чем для остального текста), достаточно заключить абзац в тег <H*>...</H*>, где записаны звездочки записывается цифры от 1 до 6 (если тег открыт к примеру с цифрой 3 , то и закрывается он с той же цифрой). При 1-это задает шрифт наибольшего размера, 2-чуть меньше и т. д. до 6. Так же можно указать выравнивание, по умолчанию будет стоять по левому краю. Чтобы выровнять, можно воспользоваться атрибутом ALIGN и записать в составе открывающего тега <H*>.

Пример:

<H1 ALIGN=CENTER> Заголовок по центру (H1)</H1>

<H3 ALIGN= RIGHT > (Н3) по правому краю </H3>

<H5 ALIGN=LEFT> (Н5) по левому краю </H5>

<H6 > (Н6) по левому краю </H6>

Изменение атрибутов шрифта: вид, размер символов, цвет.

Тег <FONT>отображает внешний вид текста, он представляет контейнер для изменения характеристик цвета шрифта, размер и стиль. Этот тег закрывающийся. У тега <FONT> есть ряд его атрибутов:

1)Чтобы установить желаемый цвет текста COLOR= ''[цвет]'', для установки желаемого цвета используется словесное обозначение( White,Black,Green), также используется цифровой код(#FFFFFF,#000000,#008000), или же значение RGB(Red,Green,Blue) (255 250 250, 000, 0 128 0).

Таблица 1. Названия цветов

Цвет

Значение RGB

Символьная метка

Цифровой код

Белый

Черный

Зеленый

Светло-зеленый

Серый

Светло-серый

Желтый

Темно-бордовый

Синий

Темно-синий

Голубой

Изумрудный

Красный

Пурпурный

Розовый

Оливковый

255 255 255

000

0 128 0

0 255 0

128 128 128

192 192 192

255 255 0

128 0 0

0 0 255

0 0 128

0 255 255

0 128 128

255 0 0

128 0 128

255 0 255

128 128 0

White

Black

Green

Lime

Gray

Silver

Yellow

Maroon

Blue

Navy

Aqua

Teal

Red

Purple

Fuchsia

Olive

#FFFFFF

#000000

#008000

#00FF00

#808080

#C0C0C0

#FFFF00

#800000

#0000FF

#000080

#00FFFF

#008080

#FF0000

#800080

#FF00FF

#808000

- 1. Для того чтобы уменьшить или увеличить размер шрифта используется атрибут SIZE=[цифра], указывается размер шрифта в неких ''абсолютных'' единицах (от 1 до 7, по умолчанию 3).

Таблица 2. Список размеров

Значение атрибута	SIZE Размер символов в пикселях
1	9
2	10
3	12
4	14
5	18
6	24
7	36

Также может предаваться знаком ''+'' или ''-'', указывающим, что требуется увеличить или уменьшить величину шрифта на заданное количество условных единиц относительно текущего размера (например, <FONT SIZE=-2> ... </FONT>).

3) Стиль шрифта текста, отображаемого на экране- атрибут FACE=''[название шрифта]'', где в качестве значения указывается название желаемого шрифта, например: <FONT FACE = ''Courier New''>...</FONT>.

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

Эти три атрибута, которые мы рассмотрели, могут указываться все вместе или в любых их комбинациях.

Пример действия атрибута FACE и COLOR:

<FONT FACE=''Arial Cyr'' COLOR=BLUE> ШРИФТ </FONT>

<FONT FACE=''Times new Roman Cyr'' COLOR= #008000> РАЗНОГО </FONT>

<FONT FACE=''Courier New Cyr'' COLOR= «0 255 255» > НАЧЕРТАНИЯ И ЦВЕТА </FONT> </P>

Пример действия атрибута SIZE:

Результат на экране:

шРИФт

Помимо атрибута SIZE, который находится в теге <FONT> для увеличения или уменьшения размера шрифта можно использовать и специальные теги <BIG>...</BIG> отвечающий за увеличение или <SMALL>...</SMALL>, соответственно за уменьшение, размер заключенного в них текста на одну ''условную единицу''. Эти контейнеры вкладывать друг в друга несколько раз, то можно увеличить/уменьшить шрифт на несколько ''условных единиц''.

Таблица 3. Увеличение текста с помощью тега <BIG>

Использование <FONT>	Использование <BIG>
<FONT SIZE=+1>Текст </FONT>	<BIG>Текст </BIG>
<FONT SIZE=+3>Текст</FONT>	<BIG><BIG><BIG>Текст </BIG></BIG></BIG>
<FONT SIZE=+1>Текст<FONT SIZE=+2>Разного</FONT>размера</FONT>	<BIG>Текст <BIG>разного </BIG>размера </BIG>

Аналогична применению работа тега <SMALL> в теге <FONT> атрибута SIZE с отрицательными значениями.

Управление начертанием текста

Управление параметрами текста используется простой способ. В фрагментах текста произвольной длины или отдельных слов, можно использовать специальные теги для делаемого начертания - полужирное, курсивное, подчеркнутое или ''зачеркнутое'' используя соответственные теги <B>...</B>, <I>...</I>, <U>...</U> и <S>...</S>.

Использование подчеркивания в HTML-документе нежелательно, чтобы пользователь не путал такой текст с гиперссылками.[1]

А для получения нижних индексов или верхних используются теги <SUB>…</SUB> и <SUP>…</SUP>. Эти теги могут быть, как вложены в текст абзаца, так и, наоборот, содержать в себе один или несколько абзацев. Также их можно комбинироваться друг с другом для получения ''смешанных'' начертаний.

Пример:

<FONT SIZE=4> <B> Полужирный </B>, <I> курсив </I>, <B> <I> полужирный курсив </B> </I>, <BR> <U> подчеркнутый </U>, <S> «зачеркнутый»</S>, <SUB> нижний </SUB> и <SUP> верхний </SUP> индексы

</FONT> </P>

Рис.4 Начертание текста

Последовательность записи тегов в конце всей получаемой конструкции должна быть обратной по отношению к ее началу.[7]

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

Для вставки изображения в документ HTML используется тег <IMG>, как вставляется показано ниже:

Элемент IMG

Под графическим изображением подразумевают: схемы, рисунки, графические объекты и карты изображений в форматах JPEG, GIF (включая прозрачные и анимированные), PNG.

Элемент IMG не имеет конечного тэга.[17]

Тег <IMG> имеет следующие атрибуты:

Атрибут: Src

Атрибут этот является важным параметром. Указывает адрес (URL-адрес) до графического файла, или же название самого графического файла(если HTML документ находится в той же папке с графическим файлом) с расширением (поддерживаются *.jpg, *.gif, *.png).

Атрибут: Width

Определяет ширину изображения в пикселях.

Атрибут: Height

Определяет высоту изображения в пикселях.

Обязательно задаются значения параметров «width» и «heght», резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это просто плохо смотрится. [17]

Атрибут: Hspace

Он определяет отступ картинки (в пикселах) по горизонтали от других объектов документа. При помощи указанного числа пикселей отдаляет изображение от текста.

Атрибут: Vspace

Определяет отступ картинки (в пикселах) по вертикали от других объектов документа. Так же необходим при отдалении изображения от текста.

Здесь можно посмотреть примеры применения этих атрибутов.[2]

Важно указывать значения параметров Hspace и Vspace, если вы хотите оставитьизображение от текста. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.

Атрибут: Align

Обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

Left

Выравнивание по левому краю документа. Прилегающий текст обтекает изображение справа.

Right

Выравнивание по правому краю документа. Прилегающий текст обтекает изображение слева.

top и texttop

Выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.

Middle

Выравнивает базовую линию текущей текстовой строки с центром изображения.

Absmiddle

Выравнивает центр текущей текстовой строки с центром изображения.

Absbottom

Выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

Здесь можно посмотреть действие всех значений атрибута «Align» элемента <Img>

bottom и baseline

Выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.

Атрибут: Name

Указывает имя изображения, уникальное для данного документа. Имя можно указывать любое без пробелов с использованием латинских символов и цифр. Если необходимо, то нужно осуществлять доступ к изображению, например, из JavaScript-сценариев.

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

Атрибут: Alt

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

Атрибут: Border

Он позволяет создать рамку в ширину вокруг изображения в пикселах. Рамка не появляется при условии, если этот атрибут не указан в теге <Img>, только если изображение является гипертекстовой ссылкой. В таких случаях значение Border обычно указывают равным нулю.

Записывается так:

Атрибут: Lowsrc

Указывает адрес (URL) графического файла с расширением с альтернативным изображением более низкого качества, чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

<img lowsrc=«http://site.ru/images/mini.gif» src=«http://site.ru/images/ kartinka.gif»> [8]

2.3 Работа с таблицами

В Web-странице находится один из самых главных инструментов, является таблица.

Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки

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

Основные тэги таблицы

Таблица:<TABLE>...</TABLE>

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

Строка таблицы:<TR>...</TR>

Сколько присутствует пар <TR>..</TR>, такое количество строк таблицы определяется в таблице. Строки могут иметь атрибут VALIGN и ALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы:<TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки. [19]

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись:<CAPTION>...</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION>должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION>имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Основные атрибуты таблицы

WIDTH

Определяет размер в процентах от ширины экрана. Используется в тегах <TABLE>, <TR>, <TH>.

Например WIDTH=«60%»;

BGCOLOR

Задаёт фоновый цвет. Используется в тегах <TABLE>, <TR>, <TH>.

BORDERCOLOR

Задаёт цвет рамки. Используется в тегах <TABLE>, <TR>, <TH>.

CELLPADDING

Задает расстояние между содержимым ячейки и ее рамкой в пикселях. Используется в теге <TABLE>.

CELLSPACING

Задает расстояние между ячейками таблицы в пикселях. Используется в теге <TABLE>.

BORDER

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

ALIGN

Если атрибут ALIGN присутствует внутри тэгов <CAPTION>и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top.

Если атрибут ALIGN встречается внутри ;<TR>, <TH>или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH>и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top(вверху), bottom(внизу), middle(по середине) и baseline(все ячейки строки прижаты кверху).

NOWRAP

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

COLSPAN

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию 1.

ROWSPAN

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию 1. [12]

2.4. Гиперссылки

Гипертекстовая ссылка (кратко - гиперссылка) - часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, каталог, приложение), расположенный на локальном диске или в компьютерной сети, либо на элементы этого объекта.[14]

При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Когда создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Создавая графическую гиперссылку, некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

Для создания гиперссылки служит тег <A>

Пример:

HTML-код:

<a href=« http://htmlbook.ru/ «>Ссылка на главную страницу сайта</a>

<a href=«htmlbook.ru/»>Ссылка на главную страницу сайта</a> Отображение в браузере:

Ссылка на главную страницу сайта

Гиперссылка в пределах html страницы

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

Для того чтобы создать ссылку на область внутри текущей страницы, нужно задать этой области название при помощи атрибута NAME тэга <A>. Имя должно состоять только буквы и цифры.

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

Пример:

HTML-код:

<a href=«#Начальная страница»>Наверх страницы</a>

В то место, куда надо сделать переход надо вставить:

<a name=«Начальная страница»></a> Отображение в браузере:

Наверх страницы

Почтовая гиперссылка

Создавая ссылку на адрес электронной почты, необходимо указать адрес e-mail. Следует позаботиться о том, чтобы пользователю было ясно, кому он собирается отослать сообщение.[10]

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

Пример:

HTML-код:

<a href=«mailto:admin@on-line-teaching.com?subject=Письмо автору»title=«Письмо автору с сайта > Отображение в браузере:

admin@on-line-teaching.com

Открытие html страниц в новом окне

При помощи атрибута TARGET можно загрузить страницу в новом окне браузера. Этот атрибут предназначен для задания наименования окна. Имя окна используется в служебных целях. Чтобы открыть страницу в новом окне надо использовать константу _blank.

Пример:

HTML-код:

<a href=«../index.html»target=«_blank»«>Ссылка на главную страницу сайта</a> Отображение в браузере:

Ссылка на главную страницу сайта

Цвет текста гиперссылок

Атрибуты которые задают цвет для гиперссылок LINK, ALINK, VLINK.

Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.

Атрибут VLINK - уже посещенные ссылки.

Атрибут ALINK - выделяет активную гиперссылку.

Порядок перехода по гиперссылкам.

Также некоторые браузеры могут поддерживать функцию перехода по гиперссылкам с помощью клавиши Tab. При этом браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A>. Чтобы включить гиперссылку в перечень, описывающий новый порядок перехода, надо присвоить атрибуту TABINDEX некоторое целое положительное число в диапазоне от 1 до 32767. Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. Когда пользователь нажимает клавишу TAB, курсор перемещается к гиперссылке с наименьшим положительным значением индекса. Если нескольким гиперссылкам присвоено одинаковое значение индекса, первой выбранной окажется та, которая в тексте страницы стоит выше.

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

Основная особенность гипертекстового документа - это способность получить

сложные эффекты форматирования простыми и наглядными методами.

2.5. Списки

В текстовых редакторах можно использовать списки. Так же и в языке HTML существует возможность создания различных списков. Для этого используются теги как <UL>, <OL> и <DL>, в первых двух случаях элемент списка отмечается тегом <LI> и третий тег <DT> отмечается <DD>, при этом допускаются вложенные списки любой глубины.

Пример маркированного списка и использования тегов <UL> и <LI>:

<UL>

<LI>центр</LI>

<LI>право</LI>

</UL>

Рис.5 Пример маркированный список

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

type=”disc”

type=”circle”

type=”square”

Нумерованный список создают, используя теги <OL> и <LI>. Например:

<OL>

<LI>четыре</LI>

</OL>

Рис.6 Пример нумерованного списка

Если не прописывать атрибут type, то по умолчанию нумерация выполняется арабскими цифрами, начиная с единицы. Если же используя атрибуты тега <OL>, то можно изменить стиль оформления списка. Атрибут type=”…” определяет стиль нумерации (буквы или цифры), при этом допускаются следующие его значения:

type=”A”- использовать большие латинские буквы;

type=”a”- использовать маленькие буквы;

type=”I”- использовать большие римские цифры;

type=”i”- использовать маленькие римские цифры;

type=”1”- использовать арабские цифры.[14]

Атрибут start=”…” определяет начальное значение списка, например, start=”3”.

И наконец, третий тип списков – это список определений. Он позволяет перечислить не только пункты списка, но так же и их описания. Такой тег удобно использовать для терминов и его описания. Такой список заключается в теги <DL> и <DL>, каждый пункт располагается в контейнере <DT>…<DT>, а его описание – в контейнере <DD>…<DD>.

Пример:

<DL>

<DT>Первый термин </DT>

<DD>Определение первого термина </DD>

<DT>Второй термин </DT>

<DD> Определение второго термина </DD>

<DT>Третий термин </DT>

<DD> Определение третьего термина </DD></DL>

Рис.7 Пример списка определений

Рассмотрим пример в котором применяются маркированные и нумерованные списки, используя теги <UL>, <OL>:

<UL>

<LI> Первый раздел</LI>

<UL>

<LI>Первый подраздел первого раздела</LI>

<LI>Второй подраздел первого раздела</LI>

<LI>Первый список</LI>

<LI>Второй список</LI>

</OL>

<LI>Третий подраздел первого раздела</LI>

</UL>

<UL>

<LI>Второй раздел</LI>

</UL> [3]

Рис.8 Пример вложенного списка

Таким образом можно создать элементарную HTML-документ пользуясь элементарными тегами.

Таким образом,Web-страницы создаются с помощью любого текстового редактора, так как они представлены в виде отдельного текстового файла. Страница может содержать в себе не только текст, но и множество других элементов (таблицы, оформление текста, иллюстрации и т. п.), в текст встраиваются специальные управляющие конструкции, которые называются тегами. При открытии HTML файла в браузере,он способен расшифровать теги и показать страницу в своём окне так, как она была задумана создателем. При обучении тегов в HTML нет необходимости помещать страницы на действующий сайт в Internet, достаточно всего лишь хранить их в виде файлов на конкретной рабочей станции или на сервере локальной сети.

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

Используя возможности языка HTML можно вставить в тело документа графические изображения: схемы, рисунки, графические объекты и карты , фотографии в форматах JPEG ,GIF , PNG.

Заключение

В нашей жизни всё шире распространился Internet. Работа с языком гипертекстовой разметки HTML дает нам возможность создавать собственные сайты или Web-страницы. Для создания гипертекстовых документом используют обычное ПО, так и специальные программы.

Язык HTML представляет собой обычный текстовый документ, но входе используется набор управляющих команд (тегов), соответствующих определённому стандарту и интерпретируемых браузером в ходе вывода Интернет-страницы на экран.

Во время выполнения курсовой работы были решены поставленные задачи.

1. В процессе работы с курсовой была изучена и проанализирована литература специального и научно-исследовательского содержания. Наиболее полно структура Web-страницы и Web-сайта рассмотрены в работе Храпоничевой Ю.А. [18]. В работе Петюшкин А. [12] подробно описан вопрос о размещении и оформлении текста в Web-документе. В работе Глушакова C.В. [5] хорошо представлен вопрос о гиперссылках в HTML документе.

2. Большое количество людей пользуется сетью Интернет. И одним из способов их самовыражения стало создание личных страничек.

Web-страница (англ. Web page) - документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера[4].

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

3.Веб-страница - самостоятельная часть веб-сайта; документ, снабженный уникальным адресом (URL).[16]

В странице может содержаться не только текст, но и другие элементы (графические файлы, шрифтовое оформление текста, таблицы и т. п.),и для того чтобы управлять конструкцией сайта используют теги. Весь набор правил, по которым нужно создавать файл с web-страницей и записывать отдельные теги, называется языком разметки гипертекста (HyperText Markup Language, HTML). При открытии HTML файла в браузере, он способен расшифровать теги и показать страницу в своём окне так, как она была задумана создателем. При обучении тегов в HTML нет необходимости помещать страницы на действующий сайт в Internet, достаточно всего лишь хранить их в виде файлов на конкретной рабочей станции или на сервере локальной сети.

4. Материалы приложения представлены электронным портфолио, разработанным на автора курсовой работы. Структура портфолио включает в себя титульную страницу, разделы «Биография», «Мои достижения», «Мои работы». Подготовленное портфолио отображает все приемы работы с языком HTML, рассмотренные в теоретической части курсовой работы.

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

Список использованных источников

1. Агулар Р. Html И Css. Основа Любого Сайта:книга/Р. Агулар.-М.: Эксмо, 2010.-43с.

2. Алленова Н.В. Учебник по HTML [электронный ресурс].–2015.–Режим доступа: http://books.laborant.org.ua/html/158777/index.shtml - Дата доступа: 11.09.2016.

3. Бунаков А.Д. Оформление текства с помощью языка HTML [электронный ресурс].–2014.–Режим доступа: http://www.metabo.com.ru/design/tuts.htm

4. Википедия. Веб-страница[электронный ресурс]: https://ru.wikipedia.org/wiki/.

5. Глушаков С.В., Жакин И.А., Хачиров Т.С. Программирование Web-Страниц:книга/С.В. Глушаков,И.А. Жакин,Т.С. Хачиров.: М-2011.-37с.

6. Гончаров А. Самоучитель Html:книга/А.Гончаров .-Спб.: Питер, 2012.- 40с.

7. Кастро Э. Html И Css Для Создания Web-Страниц:книга/ Э. Кастро Издательство: Нт Пресс, 2012 Г.-34с.

8.Кожемякин А.А. Html И Css В Примерах. Создание Web-Страниц:книга/А.А. Кожемякин Инфрам, 2011.-43с.

9. Кузницов М.А. Основы языка HTML[электронный ресурс].–2015.–Режим доступа: http://www.rzn62.narod.ru

10. Мишанов. А.Е. Создание документов в стандарте HTML[электронный ресурс].–2014.–Режим доступа: http://www.arachnoid.com/arachnophilia»www.arachnoid.com/arachnophilia.- Дата доступа: 11.09.2016.

11. Муссиано Ч. И. Кеннеди Б. Html И Xhtml:книга/ Ч. И Муссиано Б. Кеннеди. –Спб.: Символ-Плюс, 2010.-35с.

12. Петюшкин А. Html. Экспресс-Курс:книга/А. Петюшкин.-Спб.: Бхв-Петербург, 2010. -25с.

13. Полонская Е.Л. Язык Html:книга/Е.Л. Полонская.-М.: Диалектика, 2009.-35с.

14. Программирование, компьютеры и кибернетика[электронный ресурс]: http://www.allbest.ru.

15. Рева О.Н. Html. Просто Как Дважды Два:книга/О.Н. Рева -М.:Эксмо, 2011.-44с.

16. Словари и энциклопедии на Академике[электронный ресурс]: http://dic.academic.ru/

17. Ссылки-гиперссылки в HTML [электронный ресурс]:

18. Храпоничева Ю.А. Создание Web-страниц с помощью языка HTML. Учебно-методическое пособие. Ю.А.Храпоничева. - Орёл: ГОУ ВПО «Орловский государственный университет» ,2010.-30 с.

19. Эрик А. Мейер CSS Каскадные таблицы стилей:книга/А. Эрик .-Спб.: Символ-Плюс, 2009.-41с.