Лекция № 1 Язык гипертекстовой разметки HTML
реклама
Лекция № 1
Тема: Язык гипертекстовой разметки HTML.
Общая структура документа, абзацы, цвета, ссылки.
Что такое HTML
Всемирная паутина соткана из Web-страниц (Web-pages), а эти страницы
создаются при помощи языка разметки гипертекста (HyperТext Markup
Language, HTML). Хотя многие, особенно новички, говорят сегодня о
"Программировании (именно с большой буквы) на HTML", HTML вовсе не
является языком программирования. HTML – это язык разметки. Вы
используете HTML для разметки текстового документа, точно так же, как это
делает редактор при помощи жирного красного карандаша. Эти пометки
служат для определения формата (или стиля), который будет использован при
выводе текста на экран монитора.
Общий вид HTML-файла, теги
M в аббревиатуре HTML означает "mark-up" -- разметка. Текст размечается
тегами, которые являют собой ключевые слова языка, заключенные в угловые
скобки "<" и ">" (больше-меньше). Чаще их употребляют парами, чтобы
отметить начало и конец некоторого куска текста. Отмечают же его для того,
чтобы браузер показывал текст на экране в заданном тегами виде.
В приведенном примере три пары тегов:
<HTML> - </HTML>
Пара, которая показывает, что содержимое файла - документ в формате
HTML.
<HEAD> - </HEAD>
Пара обрамляющая текст, не выводимый на экран, и предназначенный
для машин.
<BODY> - </BODY>
Пара обрамляющая текст, выводимый на экран.
Закрывающий тег отличается от открывающего наличием косой черты "/".
Пример 1.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
</HEAD>
<BODY>
Так
выглядит
простейший HTML-файл.
</BODY>
</HTML>
На вид текста на экране влияют только теги, и не влияют ни пробелы, ни
разбивка текста на строки.
<!DOCTYPE>
Первый тег <!DOCTYPE> - это идентификатор применяемого стандарта
HTML. Существует три стандарта синтаксиса: строгий, переходный и с
применением фреймов. В приведенном примере задано соответствие строгому
синтаксису.
Пример переходного синтаксиса:
<!DOCTYPE
HTML
PUBLIC
"//W3C//DTD
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML
4.01
Что такое строгий и переходный синтаксис? Какой стандарт выбрать? Как
соответствовать выбранному стандарту? подробнее о !DOCTYPE...
Форматирование простого текста, параграфы
Разбить текст на параграфы можно тегами <P> - </P>. В большинстве случаев,
если опустить закрывающий тег </P>, то все равно ясно, что начало
следующего параграфа означает конец предыдущего, но для остальных тегов
подобное неверно.
У открывающего тега <P> может быть атрибут (аргумент, параметр) ALIGN
(выравнивание), который принимает значения CENTER, RIGHT или значение
принятое по умолчанию (то есть когда атрибут опущен) - LEFT. Например
тег <P ALIGN=CENTER> задает параграф, строки которого центрированы.
Этот атрибут могут иметь большинство парных тегов.
Перехода на новую строку можно добиться и непарным тегом <BR>,
который не означает конца параграфа в том смысле, что стиль изображения
текста, не изменится.
Атрибуты <BR CLEAR={LEFT | RIGHT | ALL | NONE}>
Атрибут CLEAR может быть использован, чтобы передвинуть перемещаемый
образ на другой край. <BR CLEAR=LEFT> передвинет образ к левому краю,
< BR CLEAR=RIGHT> - к правому краю, в то время как <BR CLEAR=ALL>
сделает то же самое и к левому и к правому краям одновременно. Например,
если рядом с текстом слева встречается рисунок, то можно использовать тег
<BR> для смещения текста ниже рисунка.
Текст,
заключенный
между
тегами
<NOBR>
и
</NOBR>,
гарантированно располагаться в одной строке без переноса на другую
будет
Во избежание неприятностей с элементом <NOBR> вы можете предложить
браузеру читателя альтернативное место перевода строки при помощи тега
<WBR> ("мягкий" перевод строки). Эта инструкция будет выполнена только
в том случае, если браузер не сможет вывести вашу фразу одной строкой в
пределах окна просмотра.
Для проведения горизонтальной линии используется тег <HR>
Атрибуты
<HR>
ALIGN
Назначение
Выравнивает по краю или центру; имеет значения
LEFT, CENTER,RIGHT.
WIDTH
Устанавливает длину линии в пикселах или процентах
от ширины окна браузера; в последнем случае
добавляется символ % и значение обязательно
заключается в кавычки
SIZE
Устанавливает ширину линии в пикселах.
NOSHADE
Отменяет рельефность линии.
COLOR
Указывает цвет линии. Используется формат RGB или
стандартное имя.
Обратите внимание на различие между парными тегами <P> -- </P>, которые
обрамляют начало и конец куска текста, и непарным тегом <BR>, который
отмечает место вставки некоторого элемента.
Вот вам пример, использующий еще и теги заголовков <H1> - </H1> (самый
крупный), <H3> -- </H3> и самый маленький <H6> - </H6> . Здесь
закрывающий тег необходим.
<H1 ALIGN=CENTER> Весенняя гроза</H1>
<H3 ALIGN=CENTER>Федор Тютчев</H3>
<P ALIGN=LEFT>
Люблю грозу в начале мая,<BR>
Когда весенний, первый гром,<BR>
Как бы резвятся и играя,<BR>
Грохочет в небе голубом.
<P ALIGN=CENTER>
Гремят раскаты молодые,<BR>
Вот дождик брызнул, пыль летит,<BR>
Повисли перлы дождевые,<BR>
И солнце нити золотит.
<P ALIGN=RIGHT>
С горы бежит поток проворный,<BR>
В лесу не молкнет птичий гам,<BR>
И гам лесной, и шум нагорный --<BR>
Все вторит весело громам.
<P>
Ты скажешь: ветреная Геба,<BR>
Кормя Зевесова орла,<BR>
Громокипящий кубок с неба<BR>
Смеясь, на землю пролила.
<H6 ALIGN=RIGHT> 1828,1854</H6>
Парные теги влияют на вид следующего за ними текста, непарные
влияют только на место вставки. Закрывающему тегу атрибуты не
нужны.
Выделение текста и шрифты
Не стоит задавать шрифты их названиями. Нет никакой гарантии, что нужный
шрифт есть у читателя. Лучше задать его стандартными тегами: хоть результат
и зависит от средства просмотра и его настроек, зато наверняка текст будет
изображен во-первых похоже, а во-вторых в едином стиле. Вот эти теги:
<В>
Выделяет текст полужирным шрифтом.
<I>
Выделяет текст курсивом.
<TT>
Выводит текст шрифтом фиксированной ширины.
<U>
Элемент подчёркивания.
<STRIKE>
Элемент зачеркивания. Отображается текст, перечеркнутый
горизонтальной линией.
<BIG>
Выводит текст шрифтом большего размера.
<SMALL>
Выводит текст шрифтом меньшего размера.
<SUB>
Сдвигает текст ниже уровня строки и выводит его шрифтом
меньшего размера.
<SUP>
Сдвигает текст выше уровня строки и выводит его шрифтом
меньшего размера.
<CENTER>
Центрирует блок текста, отменяет действие <P>
Цитаты, переменные, адреса
<CITE>
Используется для выделения цитат или названий книг
и статей, при этом текст обычно выводится курсивом.
<CODE>
Применяется
программного
для
кода
вывода
(для
небольшого
больших
куска
листингов
используется тег <PRE>) шрифтом фиксированной
ширины.
<EM>
Выделение важных фрагментов текста. Браузеры
обычно отображают такой текст курсивом.
<KBD>
Элемент, выделяющий шрифтом фиксированной
ширины
текст,
вводимый
пользователем
с
клавиатуры.
<SAMP>
Используется для выделения нескольких символов
шрифтом фиксированной ширины.
<STRONG>
Сильное выделение важных фрагментов текста.
Браузеры
обычно
отображают
такой
текст
полужирным шрифтом.
<VAR>
Используется для отметки имен переменных. Обычно
такой текст отображается курсивом.
<ADDRESS>
Служит для идентификации автора документа и для
указания адреса автора
<BLOCKQUOTE> Для выделения цитаты. Современные браузеры
смещают текст цитаты вправо.
<BLINK>
Мигание, работает только в NC
Неформатированный текст
Для предотвращения форматирования используется тег <PRE> - </PRE>.
Текст, заключенный между двумя этими тегами выводится точно так, как он
набран в исходном документе. Это бывает нужно, например, в текстах
программ.
<PLAINTEXT> Переводит вывод текста в шрифт фиксированной ширины, а
также выключает HTML-обработку текста до тех пор, пока браузер не
встретит </PLAINTEXT> тег.
<FONT>
имя
возможные
атрибута
значения
описание
примечания
Это весьма полезное свойство,
так как платформы Windows и
Macintosh
Times New позволяет
FACE
имеют
идентичные
почти
шрифты,
Roman,
указать как один, называющиеся
Courier,
так и несколько Весь список будет просмотрен
Arial,
шрифтов (через слева направо, и первый из
Helvetica
запятую).
имеющихся
по-разному.
на
машине
пользователя
использован
будет
для
вывода
документа.
Этот
атрибут
служит
для
указания размера
SIZE
1-7, +/- 1-7
шрифта
в
условных
единицах от 1 до
7
Принято считать, что размер
"нормального"
шрифта
соответствует числу 3. Размер
может
быть
абсолютной
указан
как
величиной
(SIZE=5), так и относительной
(SIZE=+2). Последний метод
чаще употребляется.
Этот
атрибут
устанавливает
цвет
шрифта,
который
может
быть указан как в
COLOR
формате
RGB,
так
и
стандартным
именем
Например:
<FONT SIZE=3 FACE="Verdana, Arial, Helvetica" COLOR="">-</FONT>
<FONT SIZE=+1>
<A
HREF="txt.htm"
target="verz">Простейший
HTML-
документ.</A>
</FONT>
<BASEFONT>
Тег <BASEFONT> служит для указания размера, типа и цвета шрифта,
стандартных для данного документа. Эти величины обязательны для всего
документа, если только не переназначаются при помощи элемента FONT.
После
закрытия
элемента
FONT
значения
тега
<BASEFONT>
восстанавливаются. Значения атрибутов BASEFONT могут быть изменены
другим тегом <BASEFONT> в любом месте документа. Обратите внимание,
что это не контейнер и закрывающего тега не существует. Тег <BASEFONT>
использует те же самые атрибуты, что и элемент FONT.
Ссылки
Основное свойство гипертекста (H в слове HTML) -- удобство передвижения
не только вперед и назад: к сноскам, поясняющим документам -- и
возвращаться обратно. Строятся ссылки с помощью анкера (Anchor) - тега
<A> -- </A>.
Атрибуты:
В настоящее время этот атрибут считется невалидным, вместо него можно
испоьзовать
следующую
конструкцию:
onclick="return
!window.open(this.href)"
имя
возможные
атрибута значения
описание
Задание
HREF
URL
примечания
адреса Неполные адреса могут быть
гиперссылки в URL модифицированы
формате
командой
BASE
задает
символическую
NAME
метку
на
метку
внутри
внутри документа начинается со знака
документа,
переходов
Ссылка
для #. Ссылка на метку другого
в
это документа имеет вид url#label
место документа
Определяет систему Работает только при наличии
REL
связей
документа.
для атрибута
HREF.
разделенные
Содержит,
запятыми,
отношения
список
-
документов, которые имеют
отношение
к
данному
документу.
Тоже самое, что и REL только
Определяет систему отношения имеют обратный
связей
REV
для порядок - список документов, к
документа.
которым
данный
документ
имеет отношение
methods
METHOD
of
HTTP
protocol
Определяет
заголовок, который
появляется
TITLE
когда
мышь "находит" на
ссылку или во время
загрузки документа.
uniform
URN
resource
name
Этот атрибут используется при
использовании многооконных
window,
TARGET
_blank,
_parent,
_self, _top
документов,
определяемых
Определяет
место командой FRAME
(окно)
загрузки
window – имя активного окна,
документа.
куда
следует
загрузить
документ (окно должно быть
ранее
описано
в
задании
FRAMEs). Если окно с этим
именем
отсутствует,
то
открывается новое окно.
_blank - загрузка документа в
новое окно (без имени).
_parent – загрузка документа в
"родительское"
окно
по
отношению к текущему.
_self – загрузка документа в то
же самое окно, откуда он был
вызван.
_top - загрузка документа в
основное окно.
Примеры:
Задание метки
<A NAME="first"></A>
Ссылки внутри одной страницы
<A HREF="#second">переход в конец текста</A>.
Ссылки на другой файл на том же сервере
<A HREF="2.html">Предыдущий урок</A>
<BR><A HREF="4.html">Следующий урок</A>
<BR><A HREF="index.html">Оглавление</A>
<BR><A HREF="0.html">Список тегов и атрибутов</A>
Для задания базового пути, отличного от текущего используется тег <BASE>,
размещаемый в заголовке. Например:
<BASE HREF="//kdg.htmlweb.ru/">
Ссылки на файл на другом сервере
А тут надо задать полный URL.
<A
HREF="http://vsetaksi.ru/msc/index.htm">Московские
такси</A>
Ссылки на метку в другом файле
Для задания полного URL метки в другом файле достаточно объединить URL
файла и ссылку на метку
<A HREF="3.html#first">переход в начало текста</A>.
Ссылки на адрес электронной почты(E-Mail)
<А HREF="mailto:[email protected]">Send me E-mail</A>.
Связь с системой телеконференций UseNet
<А
HREF="news:news.newusers.questions">news.newusers.quest
ions</A>
Ссылки на телеконференции могут стать ценным качеством вашей домашней
страницы. Вы можете отсылать читателей к той или иной конференции для
получения дополнительной информации. Например, если ваша страница
касается проблем создания HTML-документов, есть смысл предусмотреть
ссылку на группу новостей, обсуждающую этот вопрос.
Связь с FTP
<А HREF="ftp://ftp.newusers.ru">FTP</A>
FTP
(File
Transfer
Protocol,
протокол
передачи
файлов)
позволяет
пользователям копировать файлы с других компьютеров (FTP-сайтов). Таким
методом компании часто распространяют свои новые программные продукты.
Если не указывать имя файла, браузер выведет перечень всех файлов в
каталоге. Это особенно удобно, если вы хотите, чтобы читатель получил
доступ к нескольким файлам сразу, например, в случае больших файлов,
разбитых на части для удобства передачи.
Ссылки на TelNet
Доступ к удаленной машине осуществляется с помощью программы Telnet,
написанной для операционной системы UNIX. Telnet позволяет устанавливать
связь с удаленным компьютером подобно тому, как вы связываетесь с
машиной своего провайдера. Некоторые программы просмотра допускают
использование в URL-адресе имени пользователя для входа в удаленный
компьютер
<A HREF="telnet://[email protected]">system!</A>
При этом браузер подскажет, какое имя нужно ввести для регистрации на
удаленной машине.
