Главная База знаний "Allbest" Программирование, компьютеры и кибернетика Язык разметки гипертекста

Язык разметки гипертекста

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

Рубрика	Программирование, компьютеры и кибернетика
Вид	статья
Язык	русский
Дата добавления	10.05.2009
Размер файла	16,8 K

посмотреть текст работы

скачать работу можно здесь

полная информация о работе

весь список подобных работ

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

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

HTML - hyper text markup language

или, по-русски, язык разметки гипертекста - никакой на самом деле не язык программирования, а набор инструкций для программы-просмотрщика (броузера). Чтобы писать странички непосредственно в html-коде вам потребуется обычный текстовый редактор или, что удобнее, такая программа, как, например, HomeSite или Arachnophilia (ни в коем случае не Microsoft FrontPage или Netscape Composer - эти программы в первую очередь сделаны для опосредованного, "визуального" создания страничек, то есть в них с собственно html-кодом вы можете вовсе не иметь дело; но они могут не все, допускают кучу бесящих издержек и создают огромное количество лишних участков кода).

Ещё раз: хтмл - не язык программирования. Имея "словарик", хтмл-код можно читать, как относительно связный текст. И ещё одно: "делание" страничек требует минимальных систематических знаний по хтмл-у, не надо запоминать всё, что написано в многочисленных руководствах по хтмл-у. Решайте задачи по мере их возникновения.

Поехали

Язык хтмл состоит из т.н. "тэгов". (TAG - бирка, метка). Большая часть тэгов состоит как бы из двух частей, между которыми содержится текст, который увидит посетитель странички, свойства этого текста описываются этим тэгом. В первой части содержится само "имя" тэга и, если это нужно, некоторые параметры. Вторая часть содержит только имя тэга с предваряющей его косой чертой. Например: </pre> Такая конструкция сигнализирует броузеру, что к последующему содержанию странички этот тэг (в нашем случае тэг "<pre>") уже не относится.

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

Пример:

<html>

<head>

<title>Стишок</title>

</head>

<body>

Однажды, в студеную зимнюю пору

Сижу за решеткой, в темнице сырой.

Гляжу, поднимается медленно в гору

Вскормленный в неволе орел молодой.

И шествуя важно, в спокойствии чинном,

Мой верный товарищ, махая крылом,

В больших сапогах, в полушубке овчинном,

Кровавую пищу клюет под окном!

</body>

</html>

Разбор примера:

<html> - указывает броузеру, что файл, который к нему попал - не просто текстовый, а документ html.

В пределах тэга <head>...</head> указывается, в основном, служебная информация, о ней - при необходимости, позже. Единственное, что следует отметить, это находящийся в этих пределах тэг <title>...</title> - В нём указывается "Заголовок" странички, который выводится в синей полосе вверху окна броузера.

В пределах тэга <body>...</body> находится как раз то, что будет собственно в окне броузера. "Перевод" примера:

<Начало документа хтмл>

<блок служебной информации>

<заголовок странички>Стишок<конец заголовка>

<начало тела документа>

Однажды, в студеную зимнюю пору

Сижу за решеткой, в темнице сырой.

Гляжу, поднимается медленно в гору

Вскормленный в неволе орел молодой.

И шествуя важно, в спокойствии чинном,

Мой верный товарищ, махая крылом,

В больших сапогах, в полушубке овчинном,

Кровавую пищу клюет под окном!

<конец тела документа>

<конец документа хтмл>

Если скопировать содержимое примера в отдельный файл, назвать этот фал "как_нибудь.htm" и открыть этот файл в броузере, вы увидите ваш стишок, записанный в одну строку. Дело в том, что хтмл не воспринимает символ перевода каретки на новую строку. Кроме того, он не воспринимает более одного пробела, поэтому не важно, сколько пробелов между словами было в исходном тексте - на экране броузера останется только один. О том, что нужно делать, когда нужно больше пробелов, будет сказано ниже.

Чтобы разбить текст на строки, нужно в конце каждой строки поставить тэг <br> (о нём мы уже вскользь упоминали). Вот так:

<html>

<head>

<title>Стишок</title>

</head>

<body>

Однажды, в студеную зимнюю пору<br>

Сижу за решеткой, в темнице сырой.<br>

Гляжу, поднимается медленно в гору<br>

Вскормленный в неволе орел молодой.<br>

И шествуя важно, в спокойствии чинном,<br>

Мой верный товарищ, махая крылом,<br>

В больших сапогах, в полушубке овчинном,<br>

Кровавую пищу клюет под окном!

</body>

</html>

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

Попробуем усложнить задачу. Заствим вывести текст белым шрифтом на черном фоне. Задать цвет шрифта можно несколькими способами: первый, который мы рассмотрим вначале, сделает белым весь текст на страничке (если для отдельного блока текста не указано иного - этот случай рассмотрим вторым). Есть ещё один способ - использовать css, но об этом позже.

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

ПАРАМЕТРЫ ТЭГОВ

Это такие инструкции, которые сами по себе тэгами не являются и отдельно не используются, а описывают свойства содержимого (например, текста или картинки) какого-то тэга. Например, чтобы сделать весь текст на страничке белым необходимо к тэгу body добавить параметр text="white". Делается это так:

<html>

<head>

<title>Стишок</title>

</head>

Однажды, в студеную зимнюю пору<br>

Сижу за решеткой, в темнице сырой.<br>

Гляжу, поднимается медленно в гору<br>

Вскормленный в неволе орел молодой.<br>

И шествуя важно, в спокойствии чинном,<br>

Мой верный товарищ, махая крылом,<br>

В больших сапогах, в полушубке овчинном,<br>

Кровавую пищу клюет под окном!

</body>

</html>

Если открыть такую страничку, то скорее всего вы не увидите ничего - т.к. белые буквы сольются с фоном. Сделаем фон черным:

<html>

<head>

<title>Стишок</title>

</head>

Однажды, в студеную зимнюю пору<br>

Сижу за решеткой, в темнице сырой.<br>

Гляжу, поднимается медленно в гору<br>

Вскормленный в неволе орел молодой.<br>

И шествуя важно, в спокойствии чинном,<br>

Мой верный товарищ, махая крылом,<br>

В больших сапогах, в полушубке овчинном,<br>

Кровавую пищу клюет под окном!

</body>

</html>

Договоримся называть ту часть параметра тэга, которая пишется без кавычек и обозначает, что собственно мы хотим изменить (например bgcolor или text) - собственно параметром, а то, что мы пишем в кавычках имея в виду то, каким образом мы хотим изменить параметр - значением параметра. Легко догадаться, что поменяв в примере black и white на, например red, blue, gray, yellow вы измените цвета фона или текста. Можете поупражняться.

А что, если нужно задать определённые свойства не всему тексту на страничке, а только отдельному куску (второй пример)? Это тоже можно сделать несколькими способами.

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

<font>кусок текста, который мы изменяем</font>

Это для начала. Теперь нужно дописать к тэгу <font> необходимые параметры, например:

размер size (значения: 14pt - "четырнадцатый" - вы можете ввести любое число, +1 - увеличить на 1 пункт, -1 - уменьшить на 1 пункт)

цвет color (значения: black, white, red, green, blue и т.д. или шестнадцатеричный код цвета - как его указывать и откуда брать расскажу ниже)

Вывести текст курсивом можно так: <i>текст</i>

i - от слова italic (так легче запомнить)

Жирный шрифт: <strong>текст</strong>

Теперь пример:

<html>

<head>

<title>Стишок</title>

</head>

Однажды, в студеную зимнюю пору<br></font>

<i>Сижу за решеткой, в темнице сырой.</i><br>

<strong>Гляжу, поднимается медленно в гору</strong><br>

<font color="red"><i><strong>Вскормленный в неволе орел молодой.</strong></i></font><br>

И шествуя важно, в спокойствии чинном,<br>

<strong><font color="red"><i>Мой верный товарищ, махая крылом,</i></strong></font><br>

В больших сапогах, в полушубке овчинном,<br>

Кровавую пищу клюет под окном!

</body>

</html>

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

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

Шестнадцатеричный код цвета легко узнать почти в любой графической программе. Например, в Photoshop достаточно один раз щелкнуть на образце текущего цвета внизу панели инструментов, вызвав диалог выбора цвета. Параметры, обозначенные буквами “R”, “G” и “B” («red», «green» и «blue» соответственно) вы, переведя их в шестнадцатеричную систему (делается на калькуляторе, для особых фанатов - можно и вручную), можете использовать как параметр для тэга, записав их в таком же порядке и предварив символом “#”. Вот так например:

Последние версии Фотошопа делают всё сами и в окошке выбора цвета указывается готовый код выбранного цвета.

ВЫРАВНИВАНИЕ ТЕКСТА

Обычно текст на страничке расположен кусками, каждый кусок - абзац. В хтмл-е абзац (paragraph) выглядит так: <p>текст абзаца</p>

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

выравнивание align (значения: left - по левому краю, right - по правому, center - по центру, justify - по ширине)

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

ССЫЛКИ

Чтобы сделать ссылку, пользуемся тэгом <a>:

<a href="http://yandex.ru">Яндекс</a>

Доступные параметры:

target - указывает, где будет открываться страничка, на которуюю ты ссылаешься (значения: "_blank" - в новом окне, при использовании фреймов (расскажу ниже) параметру можно присвоить значение имя соответствующего фрейма)

Пример:

<a href="http://yandex.ru" target="_blank">Яндекс</a>

КАРТИНКИ

Вставляя картинку, делаем так:

параметру src, как ты понимаешь, нужно присвоить значение - путь к картинке...

Есть ещё параметр alt (alternative text), которому присваивается значение - текст, который будет выводиться при наведении курсора на картинку.

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

Пример:

ТАБЛИЦЫ

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

<html>

<head>

</head>

<body>

<tr>

<td align="center" valign="middle">Сдесь был Вася!</td>

</tr>

</table>

</body>

</html>

Попробуйте сделать это без таблиц. Не выйдет.

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

</head - конец блока служебной информации>

<td - начало ячейки таблицы align="center" - содержимое ячейки выровнять по центру valign="middle" - содержимое ячейки по высоте выровнять по середине>Сдесь был Вася!</td - конец ячейки таблицы>

</tr - конец строки таблицы>

</table - конец таблицы>

</body - конец основного блока информации>

</html - конец документа хтмл>

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

Сделаем теперь таблицу с четырьмя ячейками:

<html>

<head>

</head>

<body>

<tr>

<td>Первая</td>

<td>Вторая</td>

</tr>

<tr>

<td>Третья</td>

<td>Четвёртая</td>

</tr>

</table>

</body>

</html>

Перевожу:

<html>

<head>

</head>

<body>

<td - начало ячейки таблицы>Первая</td конец ячейки таблицы>

<td - начало ячейки>Вторая</td - конец ячейки>

</tr - конец строки таблицы>

<td - начало ячейчи>Третья</td - конец ячейки>

<td начало ячейки>Четвёртая</td - конец ячейки>

</tr - конец строки>

</table - конец таблицы>

</body>

</html>

Как видите, всё довольно однообразно.

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

bgcolor - цвет фона (какие значения может принимать такой параметр, мы уже обсуждали чуть выше)

border - толщина "бортика" (значения: числовые, в т.ч. нуль)

bordercolor - цвет "бортика" (как указывать цвета мы уже обсуждали)

width - ширина таблицы (можно указывать числом - тогда вы получите таблицу соответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первой табличке "Здесь был вася")

height - высота таблицы (аналогично ширине)

Есть и другие параметры, например

lightbordercolor

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

Пример:

<html>

<head>

</head>

<body>

<tr>

<td>Первая</td>

<td>Вторая</td>

</tr>

<tr>

<td>Третья</td>

<td>Четвёртая</td>

</tr>

</table>

</body>

</html>

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

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

bgcolor - цвет фона (всё так же, как для таблицы в целом)

width - ширина ячейки (можно указывать числом - тогда вы получите ячейку соответствующей ширины в пикселях, или в процентах от ширины окна броузера (как в первой табличке "Здесь был вася")

height - высота ячейки (аналогично ширине)

align - выравнивание в ячейке (значения: left - по левому краю, right - по правому, center - по центру)

valign - выравнивание по высоте (Vertical ALIGN) (значения: top - по верхнему краю, bottom - по "дну", middle - посередине)

Пример:

<html>

<head>

</head>

<body>

<tr>

<td bgcolor="pink" valign="bottom" align="right" width="300" height="10">Первая</td>

<td>Вторая</td>

</tr>

<tr>

<td>Третья</td>

<td>Четвёртая</td>

</tr>

</table>

</body>

</html>

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

Снова усложним задачу. Сделаем таблицу из четырёх колонок с заголовком.

<html>

<head>

</head>

<body>

<tr>

<td colspan="2">ЗАГОЛОВОК</td></tr>

<td width="50%">Первая</td>

<td>Вторая</td>

</tr>

<tr>

<td>Третья</td>

<td>Четвёртая</td>

</tr>

</table>

</body>

</html>

Обратите внимание на параметр colspan в ячейки с заголовком: он-то и позволяет этой ячейке занять два столбца.

Аналогично действуем и создавая ячейку на две строки:

<html>

<head>

</head>

<body>

<tr>

<td colspan="2">ЗАГОЛОВОК</td></tr>

<td rowspan="2">двухстрочная ячейка</td>

<td>Первая</td>

</tr>

<tr>

<td>вторая</td>

</tr>

</table>

</body>

</html>

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

Создаём таблицу размером во всё окно броузера (указывая ширину и высоту как 100%) с четырьмя ячейками и в каждую из ячеек помещаем соответствующий кусок картинки. Выравнивание в ячейках организуем так, чтобы картинка "собралась" в центре. Итак:

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

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

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

Всё бы ничего, но при просмотре примера видим, что куски картинки разделены, не сливаются в единое изображение. Это можно преодолеть, используя два не описанных ранее параметра тэга table, описывающих расстояния между ячейками таблицы - cellspacing и cellpadding (точнее, между ячейками в строке и между строками). Естественно, параметр border тоже надо приравнять нулю.

Пример:

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Теперь всё в порядке! В качестве последнего штриха, сделаю ссылки хотя бы чуть-чуть осмысленными и опишу каждый кусок картинки с помощью параметра alt:

<html>

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

К слову сказать, обратите внимание, каким образом мы добились в примере наличия кавычек в пределах параметра alt. Поскольку кавычки - символ, используемый в html-коде, возникают определённые трудности с его использованием в "смысловой" части сайта. Попробуйте вместо " поставить в примере обычные кавычки - вы увидите, возникнет ошибка.

Чтобы избежать подобных ошибок, для каждого из символов, использующихся в html имеется соответствующий "заменитель", который используется, когда необходимо отобразить такой символ на экране броузера. Так, например, чтобы вывести на экран символ "<" нужно написать <

статья "Язык разметки гипертекста" скачать

Подобные документы

Язык разметки гипертекста (HTML)
Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).

курсовая работа [47,9 K], добавлен 24.11.2012
Расширенный язык разметки гипертекста (XHTML)
Новый язык разметки гипертекста XHTML. Валидация XHTML-документов, определение их типа. Распространённые ошибки в XHTML-разметке. Конформность пользовательских агентов. Использование XHTML с другими пространствами имен. Расширение семантики HTML.

курсовая работа [44,1 K], добавлен 14.07.2009
Язык разметки гипертекста - HTML
Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.

реферат [23,7 K], добавлен 17.08.2007
Язык разметки гипертекста HTML
Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.

презентация [439,3 K], добавлен 29.01.2014
Языки гипертекстовой документации
Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.

презентация [4,3 M], добавлен 15.02.2014
Каскадные таблицы стилей CSS. Верстка
HTML как язык разметки гипертекста, его структура, элементы. Каскадные таблицы стилей, их разработка. Верстка: страницы как мы их видим. Новые технологии – HTML5, CSS3. LESS. Динамический язык стилевой разметки. Технологии упрощенной разметки HAML, SASS.

дипломная работа [3,4 M], добавлен 19.04.2013
Интерпретатор для подмножества языка разметки гипертекста HTML
Изучение алгоритма рекурсивного спуска и системы построения грамматики с помощью лексического анализатора Lex. Написание программы интерпретатора языка разметки HTML. Проверка входной последовательности на корректность входа как общая функция программы.

контрольная работа [226,7 K], добавлен 25.12.2012
Создание Web-документа
Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.

реферат [34,4 K], добавлен 22.11.2009
Анализатор цветового набора для WEB-страницы
Язык разметки гипертекста HTML, основы работы с Delphi. Разработка формата файла базы данных цвета. Методика подбора цвета для WEB-страниц. Изучение и систематизация информации о правилах создания эргономичных интерфейсов (в том числе WEB-интерфейсов).

курсовая работа [475,8 K], добавлен 17.07.2009
Анализ гипертекста в виртуальном дискурсе на материалах Интернет-ресурсов по тематике шоу-бизнеса
Взаимосвязь гипертекста и Web-дизайна, содержание и оформление виртуального дискурса. Гипертекст как основа виртуального дискурса. Начало гипертекста, ключевые слова, заголовки, язык текста и его понимание. Членение гипертекста, количество и объем частей.

магистерская работа [117,2 K], добавлен 10.04.2013

Другие документы, подобные "Язык разметки гипертекста"

весь список подобных работ

скачать работу можно здесь

сколько стоит заказать работу?

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.