ПРАКТИЧЕСКАЯ РАБОТА №1
ТЕМА: Основные дескрипторы НТМL
Цель: освоить основные дескрипторы HTML.
Оборудование: персональный компьютер, Windows XP.
Теоретическая часть:
Основные дескрипторы.
Как написать курсивом фразу:
Я хочу, чтобы это отображалось в браузере
Заключим, например. в "курсивные" дескрипторы Слово ЭТО:
Я хочу, чтобы <I> ЭТО </I> можно было прочесть в браузере!
жирному должен соответствовать дескриптор <В> (от слова Bold), а подчеркиванию — < U> (от Underline).
Чтобы слово это выводилось жирным шрифтом, а первая буква э — еще и курсивом нужно использовать вложенные дескрипторы <I> и <В>
Для того чтобы разделить текст на абзацы, в НТМЬ применяется дескриптор <Р> — от английского paragraph, что в переводе означает вовсе не "параграф" (как было бы логично с точки зрения русского языка), а именно "абзац".
<Р>Я памятник себе воздвиг нерукотворный,</Р> <Р>К нему не зарастет народная тропа.</Р> <Р>(с)<I><В>А.С.П</В>ушкин</I></P>
Если обычный пробел (а также, кстати, и табуляция) расценивается браузером как отсутствие символа. то неразрывный пробел для него — полноценный символ, хоть и невидимый. Что и требуется.
Как ввести неразрывный пробел в Notepad? С помощью специального обозначения — &ndsp
<Р>Я памятник себе воздвиг нерукотворный,</Р> <Р>К нему не зарастет народная тропа,</Р> <Р>& ndsp </р>
<Р>(с) <I><В>А.С. П</B>ушкин</I></Р>
Абзац с параметрами
<ДЕСКРИПТОРпараметр1=значение1 параметр2=значение2...>
У дескриптора <Р> всего один параметр —align. Он принимает одно из четырех значений —left, right, center или justify. Этот параметр "отвечает" за выравнивание текста — соответственно по левому или правому краю, по центру или по обоим краям сразу. Впрочем, значение justify поддерживается не всеми браузерами, хотя в 1Е проблем не возникает.
По умолчанию обычно текст выравнивается по левому краю, что соответствует коду <Р align= right >. Попробуем отформатировать наш пример по-другому:
<Р>Я памятник себе воздвиг нерукотворный,</Р>
<Р>К нему не зарастет народная тропа.</Р>
<Р>& ndsp </р>
<Р align= right >(с) <I><В>А.С. П</B>ушкин</I></Р>
3. Воспользуемся другим дескриптором — <ВR>. Означает он переход на новую строку, но не на новый абзац — то, что в Word называется "разрыв строки". При этом:
• по умолчанию в новой строке сохраняется тип выравнивания, присвоенный всему абзацу;
• расстояние между новой строкой и предыдущими строками абзаца равно расстоянию между остальными строками абзаца.
Именно это нам и требуется. Теперь лишние абзацы, в том числе и "невидимый", можно убрать
<Р>Я памятник себе воздвиг нерукотворный, <ВR>
К нему не зарастет народная тропа. </Р> <Р align= right >(с).С. П</В>ушкин</1></Р>
Обратите внимание: дескриптор <ВR> — одиночный. У него нет парного закрывающего дескриптора. И неудивительно: ведь этот дескриптор "работает" не на участке текста, а в той точке, где он поставлен.
4. Комментарий в НТМL-коде заключается между символами <! -- и -->:
<!-- комментарий ->
Специальные символы
"специальные" символы заменяются в НТМL-коде на соответствующие Еsс-последовательности (читается "эскейп - последовательности"). Еsс-последовательностью называется АSСII-код символа, перед которым стоят символы &#. Именно по этим символам браузер распознает Еsс-последовательность. Например, открывающей и закрывающей угловым скобкам соответствуют Еsс-последовательности < и >.
Для того чтобы не обращаться то и дело к таблице АSСII-кодов, некоторым наиболее часто используемым символам присвоены специальные мнемонические коды, состоящие из знака &, английского сокращенного названия этого символа и точки с запятой. Их проще запомнить, чем "голые " цифры. (Разумеется, если знать английский язык.) Например, тем же угловым скобкам соответствуют обозначения < (от less than — "меньше") и > ((от greater than — "больше"), неразрывному пробелу —   (от non-breaking sрасе), амперсанду (&) — samp, а левой и правой двойным кавычкам ("елочкам") — « и », соответственно.
Как видим, существует несколько видов кавычек и тире. В издательском деле — и бумажном, и электронном — приняты четкие правша их использования.
Кавычки. На клавиатуре компьютера есть только один вид кавычек — ". Точнее, эго и не кавычки вовсе, а двойной штрих — знак дюйма и секунд. Именно он, а также знаки "меньше" (<) и "больше" (>) 'зачастую используются в электронных публикациях вместо правой и левой кавычек. Но такое применение этих символов некорректно.
В полиграфии существует три вида кавычек: "елочки" («»), верхние "лапки" (" ") и рукописные "лапки" („ "). По традиции российской полиграфии основным видом кавычек являются "елочки". Правой и левой "елочкам" в НТМL соответствуют мнемонические коды « и » соответственно. Во многих изданиях вместо "елочек" используются также верхние "лапки" - это традиция западной полиграфии. Кроме того, верхние "лапки" применяются для вложенных кавычек. Левой и правой верхним "лапкам" соответствуют мнемонические коды ".
Дефис и тире. В полиграфии существует три знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — последний. Именно его зачастую и используют во всех случаях, когда е тексте нужно поставить дефис или тире. Однако существуют четкие правила пунктуации относительно того, какой из этих знаков когда используется.
Так, дефис ставится только внутри слов или между цифрами. Длинное тире, или просто тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Ему соответствует мнемонический код &mdash. Короткое тире (—) ставится между цифрами без букв или между словами, набранными прописными буквами, а также используется в формулах в качестве знака "минус". Между этим знаком и словами пробел не ставится. Короткому тире соответствует мнемонический код
6. Дескриптор <NOBR>.
В НТМЬ есть дескриптор <NOBR> (от англ. по break— "без разрыва"). Все, что находится внутри него, должно поместиться в одной строке браузера. Другими словами, браузеру попросту запрещается переход на новую строку, пока он не встретит закрывающий дескриптор </NOBR>.
Что делает браузер, если содержимое конструкции <NOBR>... < NOBR > не помещается в одной строке? Перейти на новую строку нельзя. Остается только вывести горизонтальную полосу прокрутки
Шрифты
Дескриптор, отвечающий за параметры шрифта в НТМL, тоже называется <FONT >. Разумеется, он парный и влияет на вид текста, заключенного внутрь конструкции < FONT >... </ FONT> В отличие от текстовых процессоров, где в диалоговом окне FONT можно менять многие характеристики шрифта, у дескриптора < FONT > только три параметра: гарнитура, размер и цвет.
Гарнитура
За эту характеристику — пожалуй, главную при описании шрифта — в НТМЬ "отвечает" параметр fасе. Попробуем им воспользоваться
Чтобы написать фразу
Вообще-то, в моем браузере по умолчанию установлен Аrial, < FONT fасе=Couriег> но этот текст должен выводиться моноширинным шрифтом </FONT >... если только я ничего не путаю
Пробелы, абзацы, табуляции внутри дескриптора браузер воспринимает как разделители между названием дескриптора и параметрами. Поэтому если значение параметра содержит пробелы, оно заключается в кавычки. Именно так следует поступить в нашем случае, так как название шрифта — Anal В1аck — состоит из двух слов:
Вообще-то, в моем браузере по умолчанию установлен Агiа1, < FONT face= “Arial Black” > но этот текст должен выводиться шрифтом Агiа1 В1асk</FONT>
При задании атрибута faсе следует помнить, что шрифт не сохраняется в НТМL-файле и не передается по сети вместе с текстом страницы. И нет никакой гарантии, что на компьютере посетителя будут все необходимые шрифты. Как тогда поступает браузер? Просто использует шрифт, установленный по умолчанию. Поэтому если вы использовали подобным образом какой-нибудь экзотический шрифт, желая добиться определенного визуального эффекта, то пользователь, скорее всего, ваших стараний не оценит.
Как выйти из положения?
Прежде всего, параметру faсе можно присвоить в качестве значения не один шрифт, а целый список из нескольких похожих шрифтов. Поскольку браузер просматривает список слева направо, то в начале списка обычно указывают наиболее подходящий шрифт, а в конце — такой, который наверняка должен быть в наличии:
< FONT face= “Cotton, Impact, Arial”> Какой-нибудь из этих шрифтов наверняка должен быть на компьютере посетителя моей странички </ FONT >
Очевидно, указывать абсолютный размер шрифта, например < FONT size=2>, имеет смысл далеко не всегда. Гораздо перспективнее выглядит возможность указать относительный размер — относительно того, что установлен по умолчанию. Для этого нужно перед цифрой поставить знак. Так, например, < FONT size =-2> соответствует шрифту, который меньше текущего на две единицы, а < FONT size =+3> - большему текущего на три единицы Кстати. с помощью такого кода можно без труда убедиться, что по умолчанию шрифт браузера соответствует size =3.
Цвет пикселя на экране монитора составляется так же, как и в телевизоре —
из красной, зеленой и синей точек разной яркости. Именно яркость этих трех точек задается кодом. Первые два знака соответствуют яркости красной точки, вторые — зеленой, третьи — синей. Поэтому формат цвета в НТМL часто обозначают как #RRGGBB (от английских слов Rеd — красный, Grееn — зеленый и В1uе — синий). Яркость каждой составляющей измеряется целым числом, которое в десятичной системе исчисления находится в пределах от 0 до 255, а в шестнадцатеричной — от 00 до FF.
< FONT соlог=mediumaquamarine size=5><В> Проверка цвета: mediumaquamarine </В></ FONT >
< FONT face=Courier size=+2> Текст крупным шрифтом Courier </ FONT >
Порядок перечисления параметров значения не имеет. С тем же успехом мы могли бы написать: < FONT size =+2 fасе= Courier > Текст крупным шрифтом Courier </ FONT >
Если же разные элементы форматирования распространяются на различные фрагменты текста, то можно воспользоваться вложенными дескрипторами < FONT >. Предположим, нам нужно разметить текст следующим образом: выделить фразу моноширинным шрифтом, в нем несколько слов увеличить на две единицы, и еще некоторые буквы, например, те, на которые падает ударение, вывести другим, более ярким цветом. Тогда код будет выглядеть так:
< FONT color =геd>Э</ FONT >ТО о6< FONT со1ог=геd>ы</ FONT >чный текст. < FONT color = Courier >А < FONT соlог=геd>Э</ FONT >ТОТ текст напеч< FONT со1ог=геd>а</ FONT>тан шр < FONT соlоr=геd>и</FONT>фтом < FONT size =+2> Courier< FONT color =геd>e </FONT >r</ FONT ></ FONT >
Бывают случаи, когда нужно изменить шрифт больших массивов текста, например одного или нескольких абзацев. В таких случаях вместо дескриптора < FONT > можно использовать дескриптор <BASEFONT >.
Дескриптор < BASEFONT > определяет параметры шрифта по умолчанию. В отличие от < FONT >, дескриптор < BASEFONT > не является контейнерным и не имеет закрывающего дескриптора: его распространяется до конца Web-страницы или до следующего дескриптора < BASEFONT >.
Уровни заголовков
Во многих текстовых процессорах есть такая функция: если некоторый текст служит заголовком, его можно выделить соответствующим образом, использовав для этого один из специально предусмотренных стилей. Вместо того чтобы каждый раз выполнять одни и те же действия — выделять текст более крупным и жирным шрифтом, выравнивать его по центру страницы и т.п., — достаточно присвоить этому фрагменту стиль соответствующего заголовка.
В НТМL такая возможность тоже есть. Здесь предусмотрено 6 уровней заголовков. Первый уровень соответствует самому крупному заголовку, шестой — самому мелкому. Для разметки заголовков используются дескрипторы вида <Нn>, где Н — первая буква английского слова header (заголовок), а л — номер заголовка, от 1 до 6. Каждый заголовок выводится шрифтом своего размера и начинается с новой строки. Дескрипторы заголовков являются парными: текст заголовка помещается внутри конструкции <Нn>... </Нn>
Есть ли у дескрипторов <Нn> параметры?
Разумеется. И это те же параметры, что и у дескриптора <Р>. Точнее, один параметр абзаца — выравнивание (align). Как и обычные абзацы, заголовки по умолчанию выравниваются по левому краю. Но с помощью параметра align их можно выровнять по правому краю или по центру/
Текст, заключенный внутри заголовочной конструкции, пользуется особым вниманием поисковых серверов. Именно по нему они определяют тему страницы и принимают решение о помещении ее в тот или иной раздел электронных каталогов
Порядок выполнения работы:
Задание 1.Текст выделенный жирным шрифтом - обязательно набрать в блокноте и сохранить в формате НТМL или НТМ. (Все задания выполнять в блокноте и сохранять в формате НTML или НТМ).
Задание 2. Создать текст с вложенными дескрипторами.