Рефераты и сочинения для учащихся

Язык гипертекстовой разметки HTML

МІНІСТЕРСТВО ОСВІТИ І
НАУКИ УКРАЇНИ

СХІДНОУКРАЇНСЬКИЙ
НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ

імені Володимира Даля

Реферат

По
дисциплине

Студент Болдакова
И.В.

Содержание

1.
Вступление

2.
Рассмотрим язык гипертекстовой разметки HTML

3.
Инструментарий для создания Web-страниц

3.1
HTML-редакторы

4. Создание
сайта при помощи CMS Joomla 1.5.7

Вывод

Литература

1. Вступление

World Wide Web – глобальная компьютерная сеть на сегодняшний
день содержит миллионы сайтов, на которых размещена всевозможная информация.
Люди получают доступ к этой информации посредством использования технологии
Internet. Для навигации в WWW используются специальные программы –
Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам
WWW.Вся информация в Web-браузере отображается в виде
Web-страниц.

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

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

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

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

Также в данной работе мною рассмотрены основы языка
программирования Web-страниц – HTML, который является общепринятым стандартом
WWW. Это даст нам возможность ознакомиться со структура Web-страницы и приемами
ее правильного оформления. А так же при помощи CMS Joomla мы рассмотрим
создание сайта.

2. Рассмотрим язык гипертекстовой разметки HTML

Web-страницы могут существовать в любом формате, но в
качестве стандарта принят Hyper Text Markup Language – язык разметки
гипертекстов, предназначенный для создания форматированного текста, насыщенного
изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на
другие документы.

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

Язык HTML существует в нескольких вариантах и продолжает
развиваться, но конструкции HTML скорее всего будут использоваться и в
дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале
изучения HTML и расширяя его насколько это возможно, мы имеем возможность
создавать Web-страницы, которые могут быть просмотрены многими браузерами Web,
как сейчас, так и в будущем. Это не исключает возможности использования других
методов, например, метод расширенных возможностей, который предоставляется
Opera, Google Chrome, Internet Explorer или другими браузерами.

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

HTML был ратифицирован World Wide Web Consortium. Он
поддерживается всеми браузерами.

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

Обычно HTML-документ – это файл с расширением.html или. htm,
в котором текст размечен HTML-тегами (англ. tag – специальные встроенные
указания). Средствами HTML задаются синтаксис и размещение тегов, в
соответствии с которыми браузер отображает содержимое Веб-документа. Текст
самих тегов Веб-браузером не отображается.

Все теги начинаются символом ‘<‘ и заканчиваются символом
‘>’. Обычно имеется пара тегов – стартовый (открывающий) и завершающий
(закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в
математике), между которыми помещается размечаемая информация:

<p>Информация</p>

Здесь стартовым тегом является тег <p>, а завершающим
– </p>. Завершающий тег отличатся от стартового лишь тем, что у него
перед текстом в скобках <> стоит символ ‘/‘ (слэш).

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

A) Объявление HTML;

B) Заголовачная часть;

C) Тело документа.

A) Объявление HTML

<HTML> и </HTML>. Пара этих тегов сообщает
программе просмотра (браузеру) что между ними заключен документ в формате HTML,
причем первым тегом в документе должен быть тег <HTML> (в самом начале
документа), а последним – </HTML> (в самом конце документа).

<HTML>  </HTML>

B) Заголовочная часть.

<HEAD> и </HEAD>. Между этими тегами
располагается информация о документе (название, ключевые слова для поиска,
описание и т.д.). Однако наиболее важным является название документа, которое
мы видим в верхней строке окна браузера и в списках “Избранное
(BookMark)”. Специальные программы-спайдеры поисковых систем используют
название документа для построения своих баз данных. Для того чтобы дать название
своему HTML-документу текст помещается между тегами <TITLE> и
</TITLE>.

<HTML> <HEAD> <TITLE>Моя первая
страница</TITLE> </HEAD> </HTML>

C) Тело документа.

Третьей главной частью документа является его тело. Оно
следует сразу за заголовком и находится между тегами <BODY> и
</BODY>. Первый из них должен стоять сразу после тега </HEAD>, а
второй – перед тегом </HTML>. Тело HTML-документа – это место, куда автор
помещает информацию, отформатированную средствами HTML.

<HTML> <HEAD> <TITLE> Моя первая страница</TITLE>
</HEAD> <BODY> ……….

</BODY> </HTML>

Теперь мы можем написать HTML-код нашей странички:

<HTML> <HEAD> <TITLE>Моя первая
страница</TITLE> </HEAD>  <BODY> Здесь будут мои страницы!
</BODY>  </HTML>

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

Для начала новой строки используется тег <br> (сокр.
от англ. break – прервать). Этот тег приводит к отображению браузером
дальнейшего текста с начала следующей строки. Закрывающий для него тег не
используется. Он удобен, если требуется с какого-то места писать с новой строки
без начала нового абзаца, например, в стихотворении. Повторное его
использование позволяет вставить одну или несколько пустых строк, отодвинув
следующий фрагмент страницы вниз.

Сплошной текст без промежутков читается не очень легко, его
неудобно просматривать и находить нужные места. Разбитый на абзацы, текст
воспринимается гораздо быстрее. Для начала нового абзаца используется тег
<p> (англ. paragraph – абзац). Этот тег, кроме начала новой строки,
вставляет одну пустую строку. Но многократное повторение <p>, в отличие
от <br>, не приведет к появлению нескольких пустых строк, останется все
та же одна пустая строка.

Внутри скобок тега кроме его названия могут размещаться
также атрибуты (англ. atributes – атрибуты). Они отделяются от названия и между
собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута=”значение“.
Если значение не содержит пробелов, то кавычки могут быть опущены, но так
делать не рекомендуется. Тег <p> может содержать атрибут ALIGN,
определяющий выравнивание абзаца. По умолчанию абзац выравнен влево
ALIGN=”left”. Возможны также выравнивания вправо
ALIGN=”right” и по центру ALIGN=”center”. При использовании
атрибутов, после форматируемого текста следует использовать закрывающий тег
</p>. Если его нет, то новый тег <p> означает закрытие предыдущего,
соответственно вложенные <p> невозможны. Выравнить текст по центру
возможно также тегом <CENTER>.

Теперь мы можем поместить на нашу Web-страницу некоторый
текст с различным выравниванием:

<HTML> <HEAD> <TITLE>Моя первая
страница</TITLE> </HEAD> <BODY> <p align=center>Здесь
будут мои личные страницы! <p align=left>На них Вы сможете найти:
<bp> – рассказ обо мне и о моих увлечениях; <bp> – мои фотографии.

<p align=right>С одной из моих страниц можно
будет<br>отправить мне электронное письмо.

</BODY> </HTML>

3. Инструментарий для создания Web-страниц

3.1 HTML-редакторы

Каждый выбирает свой инструмент для создания Web-страниц.
Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или
1st Page. А кто-то пользуется простым текстовым редактором, например Блокнотом
(Notepad).

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

Основным недостатком MS FrontPage является то, что он генерирует
очень большой HTML-код (слишком много лишнего), поэтому страницы получаются
большими, что сказывается на скорости загрузки. Более того, при создании
Web-страниц в этом редакторе видишь одно, а в окне браузера – совсем другое.
Странички получаются какими-то кривыми, поэтому для создания качественных
Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

Начнем мы с популярного Macromedia DreamWeaver. Компания
Macromedia считается лидером по производству программ для создания веб-сайтов,
а также законодателем моды в этой области.

DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие
редакторы, использующие технологию WYSIWYG, в первую очередь тем, что
генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от
однотипной работы при создании страниц (например, верстка текста) при помощи
использования опции “запись последовательности команд” (вы
записываете последовательность производимых вами команд, потом нажимаете,
например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

HomeSite 4.0

Следующий редактор – HomeSite 4 – для создания страниц
вручную, т.е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом,
причем существует возможность оптимизировать свою страничку под один из трех
популярных браузеров (MSIE, Google Phrome, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим
Design – это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы
загрузите чужой HTML-код, то HomeSite все перепишет по-своему.

Еще одна отличительная особенность HomeSite – это его
“склейка” с Dreamweaver. HomeSite обладает кнопкой
“Dreamweaver”, а также входит в его стандартный пакет поставки.
Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора
для коректировки HTML-кода.

Одним из последних HTML-редакторов является EVR Soft 1st
Page v2.

Его лозунг – “Create 1st class websites!”
(“Создавайте первоклассные веб-сайты!”). Редактор содержит несколько
режимов – Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать
свой уровень, а со временем перейти на более высокий. Еще одна особенность –
довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно
удобно разбито по категориям.

3.2 Графические редакторы

Создание и оптимизация графики – сложная и капризная задача.
Безусловно, возможно создание Web-страницы и без использования графики – при
помощи шрифтов, скриптов и таблиц стилей (CSS) – и это будет красиво и стильно.
Но ведь окончательный вид документа зависит от большого числа различных
факторов, таких как: ширина окна браузера, предварительные настройки браузера,
принятые по умолчанию размер шрифта, его имя и цвет. К тому же не все скрипты и
стили поддерживаются всеми браузерами. Если же будет использована графика, то
посетитель вашей страницы увидит ее точно такой, какой сделали и видите ее вы.

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

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

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

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

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

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

Результаты обработки векторных изображений не зависят от
разрешающей способности оборудования, поэтому вы можете произвольно изменять их
параметры (размер, цвет, форму и т.д.) – качество не ухудшится. Векторная
графика применяется при создании цифровых объектов с использованием мелких
кеглей (размеров шрифта) или таких объектов, как логотипы, для которых важно
сохранять четкие контуры, при неограниченном масштабировании.

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

А) Редакторы растровой графики

Microsoft Paint – простой (или лучше
сказать – простейший) редактор, входящий в стандартную поставку операционных
систем Microsoft. Он обладает набором простейших функций (кисточка, карандаш,
резинка и т.д.), которые позволяют создавать незамысловатые картинки. К
сожалению, для обработки графики он практически не пригоден. Картинку, которую
вы видете справа – это большее, на что способен этот редактор.

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

Пакет предлагает, например, средства для восстановления
поврежденных изображений, ретуширования фотографий или создания самых
фантастических коллажей, которые только может позволить себе наше воображение.
В общем, потенциал этого пакета поистине огромен. Начиная с версии 5.5 в пакет
включена программа Adobe ImageReady, предоставляющие огромные
возможности по обработке графики под WEB (оптимизация изображений, создание
анимированных gif, “разрезание” картинок на более мелкие и т.д.).
Девиз разработчиков Adobe Photoshop – “Camera of your mind” –
предполагает не только техническое совершенство, но и полную свободу
творчества, на которую человек, работающий с этой программой, просто обречен.

PhotoPaint – еще один не менее известный графический
редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий
с Adobe Photoshop. Здесь также имеются все необходимые инструменты для
обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве
работы, интерфейсе и скорости наложения фильтров – наложение происходит немного
медленнее.

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

Существует еще ряд редакторов (Microsoft Photo Editor,
Microsoft Photo DRAW), также позволяющих реализовать простейшие задачи, но
не удовлетворяющих запросам профессионалов.

B) Редакторы векторной графики

Adobe Illustrator – пакет позволяет создавать, обрабатывать
и редактировать векторную графику. По своей мощности он эквивалентен

растровому редактору Adobe Photoshop: имеет аналогичный
интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие
графические форматы, даже такие как. cdr (Corel Draw) и. swf (Flash).

CorelDraw – безусловно, такой известный графический
пакет не мог обойтись без средств для обработки векторной графики. Пакет по
своей мощности практически не уступает графическим редакторам Adobe Photoshop и
Adobe Illustrator. Помимо обработки векторной графики, в этом пакете существует
обработчик растровой графики (Photo Paint), трассировщик изображений, редактор
шрифтов, подготовки текстур и создания штрихкодов, а также огромные коллекции с
изображениями  (CorelGallery).

Adobe Streamline – еще один продукт фирмы Adobe,
предназначенный для трассировки (перевода) растровой графики в векторную. Это
небольшой, но очень полезный и мощный продукт. Особенно полезен, если вы
создаете Web-страницы с использованием векторной графики, например, технологии
Flash.

4. Создание сайта при помощи CMS Joomla 1.5.7

Плавно, по принципу от простого к сложному, переходим от
статических страниц WWW к динамическим. Что бы это осуществить, нам
понадобиться знание Web – языков PHP, Jscript, Perl, jQuery и хотя бы
язык структурных запросов MySQL. Ничего страшного, всего лишь какие то пару лет
и вы профи, способные делать такие многофункциональные сайты, у которых
страницы генерируются на лету, в которых присутствует базы данных клиетов
форумов, логины, пароли, идентификация, аутентификация, подключение анимации и
много другое.

Но не обязательно обладать знаниями всех языков, что бы
сделать динамический многофункциональный сайт. Мне хватило знания HTML, SCC,
PHP, 3Ds Max, Photoshop и SMC Joomla.

Joomla – система управления содержимым,
написанная на языках PHP и JavaScript, использующая в качестве хранилища
базу данных MySQL. Является свободным программным обеспечением,
распространяемым под лицензией GNU GPL.

Основные возможности:

1. Функциональность можно расширять с помощью дополнительных
модулей (расширений, плагинов).

2. Модуль безопасности для многоуровневой аутентификации
пользователей и администраторов.

3. Система шаблонов позволяет легко изменять внешний вид
сайта.

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

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

Можно работать с Joomla на сервере хостера в интернете
(дополнительные расходы, а так же зависит многое от скорости интернета). Я
предпочитаю работать на локальном сервере. Для этого выбрала Apache/2.2.4
(Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server at 127.0.0.1 Port 80.

Итак, установили локальный сервер. В директории
localhost/home/www/ создаем папку, в которую помещаем саму Joomla. Хочу
заметить, что под PHP5.3.1 Joomla работает не корректно. Постоянно компоненты
форумов FireBoard и Kunena выдает ошибки на сайте, приходится править файл php.
ini и отключать вывод об ошибках, что само действие сулит непредвиденных
обстоятельств для сайта. По этому, рекомендую выбирать версию PHP 5.2.4, работа
стабильная для всех плагинов, модулей и компонентов. После установки Joomla
через браузер создаем в MySQL пользователя-админа и под его логином и паролем
заходим на в админ панель. Далее надо выбрать шаблон для сайта. С первого
взгляда покажется, что это очень легко, но капнув глубже убеждаешься, что 80%
времени уходит для модернизации этого шаблона. Поэтому рекомендую выбирать
максимально подходящий шаблон под нужды, не забывая о выводимых модулях. Далее
подключаем весь функционал сайта: регистрацию, форум, слайд-шоу, баннеры, файлы
для скачек, видео on line, аудио, редактируем, все выводимые страницы. Работаем
в основном с файлом Index. php и template. css и конечно конфигурируем под себя
все подключенные расширения, которых около 6000 для Joomla. Далее остается
самое приятное – это дизайн сайта. При помощи растрового программы Photoshop и
3Ds Max (полнофункциональная профессиональная программная система для создания
и редактирования трёхмерной графики и анимации, разработанная
компанией Autodesk, содержит самые
современные средства для художников и специалистов в области мультимедиа) создаем дизайн
шаблона. Редактируем header, делаем нужный вид.

Вывод

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

Литература

1. Которев Д. В, Костарев А.Ф. “PHP 5 или наиболее полное
руководство в подлиннике.” Петербугр 2005

2. А. Гончаров “Самоучитель HTML”.

3. А. Матросов, А. Сергеев, М. Чаунин “HTML 4.0 в подлиннике”

4. Айзекс С. “Dynamic HTML”

5. Байенс Дж. “Примочки программирования в
WEB”

6. Бурсов М.В. и др. “Основы работы с HTML-редактором Dreamweaver.
Учебно-методическое пособие”

7. Велихов В. “Справочник по HTML 4.0”

Содержание

Введение 3

1. Понятие об HTML 5

1.1. Структура файла в формате HTML 5

1.2. Отличительный признак HTML-документа 8

2. Гипертекстовые ссылки 12

3. Создание документов в стандарте HTML 15

3.1. Заголовки 15

3.2.Форматирование текста и изменение стилей 15

3.3. Фреймы 17

Заключение 20

БИБЛИОГРАФИЯ22

Введение

Глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах. Действительно, пользователь, который приобрел и установил на своей машине Microsoft Office, становится обладателем Internet-технологии в готовом виде, независимо от того, подключен его компьютер к Сети или нет.

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

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

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

1 Понятие об HTML

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

Итак, рассмотрим основные теги, входящие в каждый Web-документ.

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

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

1.1 Структура файла в формате HTML

В первую очередь нам потребуется создать файл с расширением «htm» или «html» и открыть его для редактирования в текстовом редакторе (работая под Windows, можно использовать стандартную программу «Блокнот»).

Текст для HTML-документа набирается в том виде, в котором его должен показать браузер, а при выделения фрагментов, которые предназначены для разметки документа (тегов), используются угловые скобки (знаки «больше» и «меньше»), например: .

Любой документ HTML начинается с открывающего тега и заканчивается соответствующим ему закрывающим тегом. Закрывающий тег отличается от открывающего наличием косой черты перед названием тега. В языке HTML нет различий между большими и малыми буквами при записи тегов, однако принято записывать открывающий тег большими буквами, а закрывающий — малыми. Часть документа, которая находится в пределах от открывающего до соответствующего ему закрывающего тега, называется контейнером (to contain — содержать что-либо). Теги, у которых есть закрывающий и открывающий варианты записи называются парными, а те, которые используются только в одном виде (например, тег ), называются непарными. Весь файл web-страницы — это по сути дела один большой контейнер HTML (так как начинается и заканчивается ).

Внутри контейнера HTML последовательно записываются два контейнера:

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

2. (тело документа). Этот контейнер содержит всё то, что должен показать браузер внутри своего окна при открытии документа. Если документ содержит только текст, то этот текст нужно записывать именно здесь, если есть другие элементы (графика, таблицы, ссылки и т. д.).

Если сравнить исходные тексты различных Web-страниц, можно легко увидеть сходство их структур. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and Office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальным и стандартом фактическим.

Ниже приведен шаблон типичного Web-документа. На его примере мы рассмотрим общие принципы построения HTML-страниц.

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

name=’’Author’’

content=’’Irina’’>

name=’’Keywords’’

content=’’WWW, HTML, document, element’’>

Переход в конец документа

Переход к ссылке 1

Заголовок1

Заголовок2

Заголовок3

Заголовок4

Заголовок5

Заголовок6

Здесь расположена ссылка 1

Здесь должен располагаться оригинальный текст Web-страницы

Переход в начало документа

Текст комментария.

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

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

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

Внутри подобной конструкции можно помещать и теги: они не будут восприниматься браузером.

1.2 Отличительный признак HTML-документа

Одним из принципов языка является многоуровневое вложение элементов. HTML является самым внешним, так как между его стартовым и конечным тегами должна находиться вся Web-страница. В принципе, этот элемент можно рассматривать как формальность. Он имеет атрибуты4 version, lang и dir, которыми в данном случае мало кто пользуется и допускает вложение элементов HEAD, BODY и PLAINTEXT, определяющих общую структуру Web-страницы. Естественно, что конечным тегом заканчиваются все гипертекстовые документы.

Область заголовка Web-страницы. Иными словами, ее первая часть. Так же как и HTML, HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты lang и dir и допускается вложение элементов TITLE, ISINDEX, BASE, NAME, LINK, NEXTID.

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

Описание стиля некоторых элементов Web-страницы. В выше приведенном примере назначены шрифты для элементов Н2 и CODE. Естественно, что для каждого элемента существует стилевое оформление по умолчанию, поэтому употребление STYLE не обязательно.

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

Дата, обозначающая «срок годности»документа:

name=’’Expires’’ content=’’Дата’’

Адрес электронной почты:

name=’’Reply-to’’ content=’’Имя@Адрес’’

Указание приложения, в котором был создан Web-документ:

name=’’Generator’’ content=’’Название HTML-редактора’’

Атрибут name используется приложением-клиентом для получения дополнительной информации о Web-страницах и их упорядочения. Этот атрибут часто заменяют атрибутом http-equiv. Он используется сервером для создания дополнительных полей при выполнении запроса.

Кроме этого, элемент NAME может содержать URL. Шаблон соответствующего атрибута таков:

URL=’’http://адрес’’

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

Один из самых полезных для дизайна — атрибут, определяющий фон страницы. Его появление можно уподобить маленькой революции в WWW, так как одинаковые серые Web-страницы благодаря ему расцвели яркими цветными узорами:

background=’’Путь к файлу фона’’

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

bgcolor=’’#RRGGBB’’

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

Оба вышеперечисленных атрибута не являются альтернативными и часто используются совместно.

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

text=’’#RRGGBB’’

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

link=’’RRGGBB’’

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

vlink=’’RRGGBB’’

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

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

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

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

2 Гипертекстовые ссылки

Существует два шаблона для создания гипертекстовых ссылок.

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

Второй шаблон предназначен для тех случаев, когда видимая часть гиперссылки представляет собой рисунок. Если для последнего определена рамка, то она тоже меняет цвет при использовании. Если ссылка указывает на рисунок, который находиться на локальном диске, она обязательно должна начинаться со слова «file», то есть содержать указание на схему доступа:

file://Диск:Путь к файлу

или

file:///Диск:/Путь к файлу

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

href=’’URL’’

или

href=’’Протокол://Адрес ссылки’’

Например:

href=’’http://www.netscape.com’’

Кодовое слово, стоящее вначале URL7, обозначает так называемую схему доступа. Она определяет тип сервера, доступный при помощи данной ссылки. Для пользователя это представляется как доступ к одной из «разновидностей» Internet. В этом смысле можно сказать, что Internet — это как бы несколько сетей в одной. У каждой из них существуют свои правила доступа, достоинства, недостатки, свои приверженцы и противники. Но все ее клиенты используют одни и те же каналы связи. Похожая ситуация наблюдается и в обычных телефонных сетях. Их можно использовать для связи голосом, передачи факсов, межкомпьютерной связи и т. д.

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

Для выделения фрагмента, являющегося ссылкой, используется контейнер (от слова anchor — якорь). Наиболее важный атрибут тега — это HREF, в качестве значения которого записывается адрес страницы, на которую нужно перейти. Ниже приведён пример вставки гиперссылки:

Щёлкните сюда, чтобы перейти на главную страницу web-сайта ВГПУ

В качестве адреса в атрибуте HREF записывается либо полный URL сайта или страницы, либо имя файла, содержащего страницу, если она лежит на том же компьютере, что и исходная. Если страница лежит на том же компьютере, в том же каталоге, что и просматриваемая, то в HREF достаточно указать имя файла. Если же она лежит в другом каталоге, то вместо имени протокола пишут «file://», а затем — полный путь к файлу и его имя.

Примеры:

HREF=«main.html», HREF=«file://c:WebPagesBookcontents.htm».

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

Чтобы сделать ссылку в пределах одного документа потребуется два шага:

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

2. При добавлении ссылки на «якорь», установленный в п. 1, в атрибуте HREF в кавычках пишут знак “#”, за которым следует имя якоря, например: Глава 15.

7. Использование графики в HTML-документах

Для того чтобы способы помещения иллюстраций на web-страницы были более понятны, эта часть была оформлена в html-формате.

3 Создание документов в стандарте HTML

3.1 Заголовки

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

align=’’left’’

align=’’center’’

align=’’right’’

Заголовок1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

Элемент FONT может с успехом заменять элементы заголовка Н1… Н6. Для последних, например, не предусмотрена возможность указания цвета букв. Чтобы заголовок, созданный на основе элемента FONT, хорошо смотрелся, этот элемент необходимо комбинировать с другими: CENTER, B, I, P и т. д.

3.2.Форматирование текста и изменение стилей

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

Элемент абзаца (paragraph) — один из самых полезных. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает конец предыдущего и начало следующего абзаца. Конечный тег удобно использовать в тех случаях, когда по смыслу необходимо обозначить конец абзаца. Вместе с элементом Р можно использовать атрибут выравнивания align.

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

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

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

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

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

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

align=’’left’’

align=’’center’’

align=’’right’’

3.3 Фреймы

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

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

Для того чтобы разбить документ на несколько прямоугольников, вместо контейнера BODY нам потребуется записать контейнер FRAMESET (набор фреймов). В теге нужно указать на сколько «строк» и «столбцов» разбивается всё окно браузера. Это делается с помощью атрибутов ROWS (строки) и COLS (столбцы). Заметим, что в этих атрибутах недостаточно указать количество строк и столбцов, требуются также их размеры, например в процентах от размеров окна. В примере FramesF1.html это сделано так: (всё окно разбивается на две одинаковые «строки» и на три почти одинаковых столбца).

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

Размеры фреймов в теге можно указывать не только в процентах. Можно также указать из в частях, например (по высоте окно условно разбито на 3 части, первая «строка» кадров занимает две из них, вторая — одну, по ширине имеется 6 условных частей, «столбцы» занимают, соответственно, 2, 1 и 3 части).

Другой вариант — указание размеров в точках, например: COLS=«300,100,400». Возможно и смешанное указание размеров (точки — проценты, точки — части, части — проценты). Можно, например, записать: COLS=«200,30%,70%», что означает: первый «столбец» всегда имеет ширину 200 точек, независимо от размеров окна, второй занимает 30% от оставшейся части ширины окна, а третий — 70% от этого остатка.

Внешний вид фреймов настраивается с помощью атрибутов тегов и. Ниже перечисляются эти атрибуты и объясняется их назначение:

1. BORDERCOLOR (для и ). Управляет цветом границы одного фрейма или всего набора фреймов. Значением является либо название стандартного цвета, либо числовой код (#RRGGBB).

2. BORDER (для ). Задаёт ширину всех границ, отделяющих фреймы друг от друга. Значение нужно указывать в точках.

3. NORESIZE (для ). Этот атрибут не требует значения. Если он присутствует, то пользователь не может перемещать мышью границу соответствующего фрейма.

4. MARGINHEIGHT и MARGINWIDTH (для ). Позволяют указать (в точках) размеры отступов от горизонтальной (и вертикальной) границы фрейма до содержимого HTML-документа, лежащего внутри этого фрейма.

5. SCROLLING (для ). Когда документ HTML не помещается целиком в отведённый ему фрейм, для возможности просмотра появляются полосы прокрутки фрейма. В атрибуте SCROLLING можно указать, показывать ли полосы прокрутки всегда (значение YES), только когда документ не помещается во фрейм (AUTO), или не показывать никогда (NO).

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

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

1. Фрейму, в который в дальнейшем нужно помещать документ, найденный по ссылке, дают имя. Для этого используют атрибут NAME тега.

2. При вставке ссылки в HTML-документ другого фрейма в теге указывают атрибут TARGET (цель), значением его является имя фрейма, в который нужно поместить HTML-документ, указанный в HREF.

Кроме имён, которые можно давать собственным фреймам, существуют и стандартные имена, заранее известные браузеру, а именно:

“_self” — позволяет открывать документ по ссылке в том же фрейме, где находилась ссылка

“_top” — открывает документ во всё окно, где находилась ссылка, разрушая при этом всю структуру фреймов

“_parent” — в родительском фрейме; это не совсем то же самое, что _top, поскольку фреймы бывают вложенными; вся структура родительского фрейма разрушается

“_blank” — в новом окне браузера; старое окно (содержащее ссылку) при этом не уничтожается.

Заключение

Данная тема была выбрана по нескольким причинам. Одна из самых существенных причин в том, что за всемирной компьютерной сетью Internet будущее. И любой человек сознает, что знание Internet необходимо и ему. Но так как информации в сети достаточно большое количество и она “разбросана” по огромному количеству серверов, необходимо уметь и знать как ее находить.

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

В работу вошел материал основанный на материале, который я искал в библиотеках.

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML вероятнее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, Вы сможете создавать документы, которые могут быть просмотрены многими браузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, предоставляемый Netscape Navigator, Internet Explorer или некоторыми другими программами. Работа с HTML — это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только когда это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основой почти всего имеющего отношение к Web программного обеспечения.

Библиография

1. Гончаров А. Самоучитель HTML. С.-Пб: Питер, 2000.

2. Гончаров А. HTML в примерах. С.-Пб.: Питер, 2003.

3. Информатика: Учебник/под ред. Н.В. Макаровой. — М.: Финансы и статистика, 2000. — 768 с.

4. Информатика. Базовый курс. Учебник для Вузов/под ред. С.В. Симоновича. СПб.: Питер, 2000.

5. Информатика. Компьютерная техника. Компьютерные технологии. / Пособие под ред. О.И.Пушкаря. Киев Издательский центр «Академия». 2001.

6. Комягин А.О. Современный самоучитель работы на персональном компьютере. М.: ТРИУМФ, 2003.

7. Ковтанюк Ю.С., Соловьян С.В. Самоучитель работы на персональном компьютере. К.: Юниор, 2001.

8. Симонович С.В., Евсеев Г.А. Практическая информатика. Учебное пособие. М.: АСТпресс, 2001.

9. Симонович С.В., Евсеев Г.А., Алексеев А.Г. Специальная информатика. Учебное пособие. М.: АСТпресс, 2001.

10. Матросов А. HTML 4.0. М.: Дело, 2005.

11. Основы современных компьютерных технологий: Учебное пособие / Под. ред. Хомоненко. С.-Пб.: КОРОНА, 2002.

12. Острейковский В.А. Информатика. М.: Высшая школа, 2001.

13. Хеслоп П. HTML самого начала. С.-Пб: Санкт-Петербург, 2005.

14. Шафран Э. Создание Web страниц. С.-Пб: Питер, 2004.

Содержание:

ВВЕДЕНИЕ

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

Глава 1. ОСНОВНЫЕ ПОНЯТИЯ HTML

Глава 1.1. Определение HTML

HTML – язык гипертекстовой разметки документов (HyperText Markup Language). С помощью HTML создаются Web-страницы, которые находятся в глобальной компьютерной сети Интернет. HTML – это не язык программирования в традиционном смысле, он является языком разметки. С помощью HTML текстовый документ разбивают на блоки смысловой информации (заголовки, параграфы, таблицы, рисунки и т.п.).

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

Особенности HTML-документа:

1. HTML-документ может содержать текст, графику, видео и звук.
2. HTML-документ – это один или несколько текстовых файлов, имеющих расширение .htm или .html.
3. Создавать HTML-документ можно как с помощью специальных программ – редакторов HTML (например, FrontPage), так и с помощью любого текстового редактора (например, блокнота Windows).
4. Для просмотра HTML-документов существуют специальные программы-браузеры. Они интерпретируют HTML-документы, т.е. переводят текст документа в Web-страницу, и отображают ее на экране пользователя. Существует очень много различных браузеров, но наиболее распространенными брfузерами являются Microsoft Internet Explorer, Netscape Navigator и Opera.
5.  Если при интерпретации HTML-документа браузер чего-то не понимает, то сообщения об ошибке не возникает, а это место в HTML-документе игнорируется и не отображается браузером.

Глава 1.2. Элементы HTML

HTML неразрывно связан с CSS и Java, так как без них современные сайты не выглядели бы по современному.

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

Тег – в переводе с английского – ярлык, этикетка. Тег определяет тип выводимого элемента HTML (например, заголовок, таблица, рисунок и т.п.). Сам тег не отображается браузером. Тег представляет собой последовательность элементов:

1. символ левой угловой скобки (<) – начало тега;
2. необязательный символ слеша (/) – символ используется, чтобы обозначить закрывающий тег;
3. имя тега;
4. необязательные атрибуты в открывающем теге;
5. символ правой угловой скобки (>)
6. из имени атрибута;
7.  знака равенства (=);
8. значения атрибута – строки символов, заключенной в кавычки

Ниже приведен пример элемента HTML:

(рис.1)

Рис. 1. Вид документа в браузере

Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h1>…<h6>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.

Глава 1.3. Структура HTML-документа

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

Кроме того, можно заметить, что файл HTML в целом является элементом языка HTML.

Так же в HTML-документе должны присутствовать элементы HEAD (сама информация о документе) и BODY (тело документа).

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

Раздел заголовка начинается тегом < HEAD > и следует сразу за тегом <HTML>. Между открывающим и закрывающим тегами элемента HEAD располагаются другие элементы заголовка.

Для того чтобы дать название HTML-документу, предназначен тег <TITLE>.

Название записывается между тегами <TITLE> и </TITLE> и представляет собой строку текста.

 Элемент TITLE должен находиться только в разделе HEAD.

 BODY должен начинаться тегом <BODY> и завершаться тегом </BODY>, между которыми располагаются элементы HTML, из которых и состоит содержание документа.

Тег <BODY> имеет ряд атрибутов, определяющих внешний вид документа. Ниже приводится спецификация тега <BODY>, где

<BODY

TEXT=”цвет текста”

BGCOLOR=”цвет фона”

BACKGROUND=”адрес фонового рисунка”

LINK=”цвет не посещённой гиперссылки”

VLINK=”цвет посещенной гиперссылки”

ALINK=”цвет активной гиперссылки”

>

Глава 1.4. Пример HTML-документа

(рис.2)

Рис. 2. Вид документа в браузере

ЗАКЛЮЧЕНИЕ

HTML неразрывно связан с CSS и Java, так как без них современные сайты не выглядели бы по современному.

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

ИСТОЧНИКИ ИНФОРМАЦИИ

1. StudFiles «Гипертекстовый документ»

https://studfile.net/preview/4083813/page:28/

1. Книга «Язык гипертекстовой разметки HTML»

http://www.mini-soft.ru/document/yazyk-gipertekstovoy-razmetki-html

1. Студопедия : Гипертекстовый документ. Понятие HTML. Стандарты HTML.

ФЕДЕРАЛЬНОЕ
ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ  ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ  ВЫСШЕГО ОБРАЗОВАНИЯ

«МОРДОВСКИЙ
ГОСУДАРСТВЕННЫЙ ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ ИМЕНИ М. Е. ЕВСЕВЬЕВА»

Физико-математический
факультет

Кафедра
информатики и вычислительной техники

Дисциплина «Программирование»

Реферат на тему:

«Язык HTML. История развития, возможности »

                                         Выполнила:

                                                                   
студентка группы МДМ-116

                                               И. В. Кошелева

                                       Проверил:

доцент кафедры информатики и

                                                              вычислительной
техники              

                                                     Т. В.
Кормилицына

Саранск 2021

Содержание

Введение

История
языка HTML

Язык HTML.
Построение Web–документов

Форматирование
текста

Добавление
изображений

Заключение

Введение

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

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

История
языка HTML

 

HTML является
сейчас основой любой, даже самой продвинутой, технологии в Интернете.

Годом рождения
данного языка принято считать 1986, когда Международная организация по
стандартизации (ISO) был принят стандарт, названный SGML (Standard Generalized
Markup Language). Данный язык описывали как язык для логического оформления
текста, тогда не подразумевали описание внешнего вида документа. SGML даже не
представлял собой готовую систему для разметки текста, он не предполагал
какого-либо списка структурных элементов, которые применялись бы в определённых
ситуациях. Данный язык подразумевал лишь описание синтаксиса написания основных
элементов разметки текста (которые сейчас называют тегами). Это основные
причины того, что язык SGML не получил значимого распространения.

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

В 1994 году
консорциум W3C начал работу над HTML 2.0, окончательный стандарт которой был
принят в 1995 году, когда уже вовсю шла разработка HTML 3.0. В HTML 2.0
появились формы — средства отправки информации от пользователя на сервер. Самым
большим прорывом явился HTML 3.0. Он включил в себя такие нововведения, как
теги для создания таблиц, вставки рисунков, примечаний, разметку математических
формул и др. Наиболее важным нововведением явились CSS (таблицы стилей),
которые позволяли задавать единый вид всему сайту. Они имели свою структуру,
свой синтаксис и применялись вместе с HTML.

В 1995 году
появился браузер Netscape Navigator, разработчикам которого была корпорация
Netscape Communications. Эта корпорация с целью привлечь пользователей стала
вводить новые теги, которые были предназначены на улучшение внешнего вида
документов. Тем самым были разрушены изначальные принципы языка.

В 1996 году в свет
вышел браузер Internet Explorer 2.0 (разработчик: корпорация Microsoft), но он
не имел большой популярности ввиду того, что не поддерживал многих тегов,
введённых Netscape. Их поддержка была введена в Internet Explorer 3.0, после
выхода которого рынок браузеров был поделён пополам между Microsoft и Netscape.

В скором времени
был создан HTML 3.2, который был ориентирован на Internet Explorer. Данный
стандарт долгое время оставался единственным для веб-разработчиков. В 2004 году
в свет вышел HTML 4.01, обеспечивающий достаточно большую кросс-браузерность.
Данный стандарт и CSS сейчас применяются при создании большинства сайтов.

Язык HTML. Построение Web–документов

Форматирование
документа на языке HTML задается специальными дескрипторами. Дескриптором
называется команда форматирования данных и заключена эта команда в угловые
скобки «<» и «>». Существуют открывающие и закрывающие дескрипторы, между
которыми размещается текст, подлежащий форматированию. Открывающие дескрипторы
задают способ форматирования, вторые его отменяют. Разница между такими
дескрипторами заключается в том, что в закрывающем дескрипторе перед именем
стоит косая черта. Например, дескрипторы <P> и </P>. Существуют
также дескрипторы, которые не требуют закрывающего варианта.

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

Если просмотреть
исходный текст типичной Web–странички, то можно увидеть примерно следующее
содержание:

<HTML>

<HEAD>

<TITLE>

заголовок
документа

</TITLE>

</HEAD>

<BODY>

текст

текст

………..

текст

<ADDRESS>

текст

</ADDRESS>

</BODY>

</HTML>

Между
дескрипторами <HTML> и </HTML> находится непосредственно весь
документ. Дескрипторы <HEAD> и </HEAD> определяют область задания
заголовка документа. Между парой <TITLE> и </TITLE> помещается
заголовок документа. Его содержимое просматривается в названии окна броузера.
Информация в заголовке используется некоторыми сетевыми роботами для
индексирования данных при сканировании ресурсов WWW. В эту область можно
вводить, например, данные об авторе, краткое описание документа. Между
дескрипторами <BODY> и </BODY> заключаются данные, которые будут
выводиться броузером на экран. Дескрипторы <ADDRESS> и </ADDRESS>
содержат данные об авторе, которые будут выводиться на экран, например, имя и
фамилию автора, его электронный адрес, дата создания и изменения документа и
т.д.

Строго говоря, ни
одни из вышеописанных дескрипторов не являются обязательными при создании
документов, однако они помогают структурировать документы и их определение
является признаком хорошего стиля при составлении Web–страничек.

Форматирование текста

Форматирование
текста подразумевает вывод на экран текста, выделенного определенным шрифтом
или с определенными атрибутами.

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

Дескриптор         Результат

<B>  полужирный
текст

<I>   курсив

<TT> моноширинный

<U> подчеркнутый
текст

Например, если
необходимо вывести некую строку на экране курсивом, то в тело Web–документа
необходимо ввести следующее:

<I>
Этот текст написан курсивом </I>

В результате
броузер отобразит:

Этот текст написан
курсивом

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

<B>
<I> Это текст напечатан полужирным курсивом </I> </B>

приведет к
следующему результату:

Это текст
напечатан полужирным курсивом

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

<BLINK>
Это мигающий текст </BLINK>

Однако это
расширение языка фирмы Netscape используется весьма редко и поэтому, возможно,
скоро устареет.

В дизайне
Web–страничек часто используются шрифты различных размеров. Вывести строку с
размером шрифта, отличным от обычного можно с помощью дескрипторов <FONT
SIZE=+n>текст </FONT>, где число n – число от 1 до 7, определяющее
размер шрифта относительно обычного. Таким образом, следующий текст в теле
документа

Этот <FONT
SIZE=+4> текст </FONT> на четыре размера больше обычного на экране
будет выглядеть следующим образом:

Этот текст на
четыре размера больше обычного.

Необходимо
заметить, что пары дескрипторов <U> и </U>, а также <FONT SIZE>
и </FONT> являются элементами языка HTML версии фирмы Netscape и поэтому
могут не поддерживаться остальными броузерами.

Добавление изображений

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

Для вставки
иллюстраций в документ используется дескриптор <IMG>:

<IMG
SRC=ИМЯ_ФАЙЛА ALT=КОММЕНТАРИЙ>

Атрибут задает имя
файла картинки. Имя файла может указывать на как локальный файл, так и на
удаленный файл, для чего следует указать соответствующий URL. Файл может
представлять собой статическое изображения и иметь графический формат,
понимаемый броузером, либо динамическое изображение, представленное в формате
GIF89A. В последнем случае в окне броузера файл будет выведен как анимация.

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

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

<IMG
SRC=ИМЯ_ФАЙЛАALT=КОММЕНТАРИЙWIDTH=200 HEIGHT=100>

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

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

<A
HREF=ИМЯ_ФАЙЛА><IMG SRC=ИМЯ_ФАЙЛА АLT=КОММЕНТАРИЙ WIDTH=200
HEIGHT=100></A>

Интересной
возможностью представляется «обтекание» изображение текстом. Это весьма
популярный способ оформления Web–страниц. При этом на экране картинка окружена
текстом, например, слева и снизу. «Обтекание» текста достигается использованием
атрибута ALIGN, который имеет такие параметры, как:

LEFT
– текст будет охватывать изображение слева-снизу.

RIGHT
– текст обхватывает изображение справа-снизу

TOP
– изображение окружено текстом справа-сверху

BOTTOM
– изображение окружено текстом справа-снизу

MIDDLE
– изображение окружено текстом справа-посредине

Например, при
составлении Web–странички, приведенной на рис. 1, была использована такая
запись в теле документа, описывающая изображение:

<IMG
SRC=«file:///D|/MYPAGE/Cnn_logo.gif» HEIGHT=80 WIDTH=103 ALIGN=RIGHT>

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

<BODY
BACKGROUND=ИМЯ_ФАЙЛА>

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

Фреймы

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

Существует два
типа фреймовых документов: фрейм–содержащие документы и простые документы.
Фрейм–содержащие документы задают структуру самого фрейм–документа, т.е. задают
данные о том, как будет разбито окно броузера на подокна. Такие документы
содержат ссылки на другие документы. Обычные же документы – это те документы,
которые не содержат данные, определяющие фреймы.

Структура
фрейм–содержащего документа в общем случае имеет такой вид:

<HTML>

<HEAD>

заголовок

</HEAD>

<FRAMESET>

<NOFRAMES>

Текст

</NOFRAMES>

Область
задания фреймовой структуры

</FRAMESET>

</HTML>

Как видно из
примера, структура такого документа несколько отлична от структуры обычного
документа. Наличие дескрипторов <FRAMESET> и </FRAMESET> вместо
<BODY> и </BODY> как раз и отличает фреймовый документ от обычного.
Использование дескрипторов <NOFRAMES> и </NOFRAMES> является еще
одним признаком хорошего стиля. Между ними задают текст, который будет выведен
в окне броузера, не поддерживающего фреймов.

Ниже приводится
пример фреймового документа:

<HTML>

<HEAD>

</HEAD>

<FRAMESET
ROWS=30%,70%>

<NOFRAMES>

Ваш
броузер не поддерживает фреймы!

</NOFRAMES>

<FRAME
SRC=document1.htm

<FRAME
SRC=document2.htm

</FRAMESET>

</HTML>

Дескриптор
<FRAMESET> описывает либо вертикальное расположение фреймов, либо
горизонтальное. Пример:

<FRAMESET
ROWS=строка размеров фреймов>

Этот дескриптор
описывает горизонтальное расположение фреймов. Для вертикального расположения
запись немного изменяется

<FRAMESET
COLS=строка размеров фреймов>

В строке размеров
элементы отделяются запятой и могут быть заданы следующем образом:

value% –
относительный размер фрейма в процентах. Например: 10%,40%,50% – на первое окно
выделяется 10% от общего размера окна броузера, на второе окно – 40%, и на
третье – 50% соответственно;

value – абсолютный
размер в пикселях. Например: 100,540 – на первый фрейм выделяется область
шириной в 100 пикселов, на второй – все оставшееся место (для видеорежима
монитора 640х480).

C помощью
дескрипторов <FRAMESET> задается только структура фреймов. Для размещения
данных во фреймах используются дескрипторы <FRAME>, не имеющие
закрывающего варианта. Количество этих дескрипторов обязательно должно
соответствовать количеству фреймов, заданных до этого. Каждый дескриптор
<FRAME> указывает на URL некоторого документа, который будет отображен в
соответствующем фрейме. Это осуществляется с помощью атрибута
SRC=URL_ДОКУМЕНТА. При загрузке фрейм–содержащего документа окно броузера будет
разбито на подокна, а затем в них будут загружены документы.

При переходе по
ссылке в обычном документе его содержимое полностью исчезает с экрана и
заменяется новым содержимым другого документа. При использовании фреймов есть
возможность при активации ссылок изменять содержимое окна в текущем фрейме,
содержимое окна другого фрейма или всего окна броузера. Это осуществляется с
помощью комбинации дескриптора <A> и атрибута TARGET (от англ. target –
цель). В общем случае формат этого дескриптора выглядит так:

<A HREF=URL
TARGET=ИМЯ_ЦЕЛИ> Текст гипертекстовой ссылки </A>

Параметр ИМЯ_ЦЕЛИ
представляет собой зарезервированное слово, начинающееся со знака подчеркивания
‘_’. Вот список наиболее употребительных параметров:

TARGET=_SELF – при
переходе по ссылке с таким атрибутом обновляется текущий фрейм. Действует по
умолчанию.

TARGET=_TOP –
обновляется содержимое окна всего броузера.

TARGET=_BLANK –
документ будет открыт в новом окне броузера.

На первый взгляд
может показаться, что использование параметров «_TOP»и «_BLANK» равнозначно,
так как в обоих случаях старое содержимое окна полностью заменяется содержимым
другого документа. Однако в первом случае можно вернуться к предыдущему
содержимому окна средствами самого броузера (с помощью кнопки BACK на панели
инструментов), а во втором случае способ возврата к содержимому предыдущего
документа возлагается на составителя Web–странички или самого пользователя.

Заключение

Гипертекстовая
база данных в концепции WWW – это набор текстовых файлов, написанных на языке
HTML, который определяет форму представления информации (разметка) и структуру
связей этих файлов (гипертекстовые ссылки). В реальности база данных WWW
гораздо более сложная вещь. В ней могут храниться и программы, написанные в
соответствии со спецификацией CGI(Common Gateway Interface), и данные обычных
баз данных под управлением СУБД, к которым обеспечивается доступ через
программы-шлюзы, и Java-applet-ы, и графика и многое другое. Но для простоты
изложения HTML можно считать, что база данных WWW – это документы, размеченные
HTML.

Такой подход предполагает
наличие еще одной компоненты технологии – интерпретатора языка. В World Wide
Web функции интерпретатора разделены между сервером гипертекстовой базы данных
и интерфейсом пользователя.

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

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

• #
• #
• #
• #
• #
• #
• #
• #
• #
• #
• #