Слайд 6
Изменение размера, цвета и литеры шрифта
Для этого служит тэг .
Его параметры:
COLOR – задает цвет шрифта, которым будет написан текст (который следует за этим тэгом). Значениями тэга COLOR могут служить названия основных цветов (“red”, “blue”, “green” и т.п.) или RGB-коды цвета.
SIZE – размер шрифта. Параметрами могут быть числа от –7 до +7. Чем больше число, тем крупнее шрифт.
FACE – тип шрифта (форма букв). Параметрами являются названия шрифтов, например, “Arial”, “Courier”, “Times New Roman”. Это те же названия, которые используются в программах Microsoft Office (например, Word). Вы можете указать в тэге FONT сразу несколько шрифтов через запятую. Тогда компьютер при открытии Вашего документа сначала попробует применить 1-й из указанных шрифтов, если его не окажется, то второй шрифт, затем третий и т.д.
Пример команды FONT: пусть во фразе: «у меня пятерка по истории!» слово пятерка хочется написать шрифтом Arial крупными красными буквами. Это запишется так:
У меня пятерка по истории!
Слайд 7
Перевод строки. Служебные символы
В языке HTML игнорируются все символы перевода строки,
которые возникают при наборе текста в редакторе «Блокнот» (при нажатии клавиши Enter). Поэтому даже если набранный в «Блокноте» текст выглядит относительно аккуратно, программа Internet Explorer может показать его не так, как Вы хотите. Например, четверостишие может быть показано в одну-две строчки. Чтобы такого не происходило, переводы строки требуется обозначать специальным служебным символом. Это тэг
, он непарный и в отличие от многих других тэгов его не требуется закрывать тэгом
. Например,
Буря мглою небо кроет,
Вихри снежные крутя.
То как зверь, она завоет...
Если при наборе документа Вы используете несколько пробелов подряд, то броузер (Internet Explorer) все равно покажет их как один пробел. Если Вы все-таки хотите использовать в тексте несколько пробелов, Вам вместо пробела потребуется набирать следующую последовательность символов:
Например, фраза «Ваш возраст: “ “ лет» будет записана так:
«Ваш возраст: “ ” лет» .
Другие служебные символы:
< - знак < > - знак > & - знак &
Слайд 8
Форматирование фрагментов текста (параграфов)
Для того, чтобы текст выглядел аккуратнее, его удобно
разделить на абзацы. Для этого существует тэг
.
Тэг
пишется в начале абзаца, а в конце абзаца он закрывается:
. Для выравнивание текста по левому краю, по правому краю, по центру или по ширине (т.е. по обоим краям) в тэг
добавляются параметры:
Вид выравнивания Тэг + параметр
По левому краю
По правому краю
По центру
Выравнивание по ширине
Бывают ситуации, когда хочется вставить на страницу текст в том виде, в котором он набран в текстовом редакторе, без дополнительной разметки. (например, таблицы, стихи Маяковского и т.п.) Для этого используется тэг
. Например,
Учиться!
Учиться!
Учиться!
Слайд 9
Форматирование разделительных линий
Части текста можно разделять горизонтальными линиями. Для этого служит
тэг
Этот тэг непарный: его закрывать не нужно. Например, следующая запись: ... конец 1-й части
начало 2-й части...
приведет к появлению на экране такого фрагмента:
...конец 1-й части
начало 2-й части ....
Параметрами тэга
можно изменить вид линии (по умолчанию это будет черная линия толщиной в 1 пиксель длиной во весь экран).
Вот эти параметры:
COLOR=”название или код цвета”. Этот параметр задает цвет линии.
WIDTH=”сколько%” Ширина линии (в процентах от всей ширины экрана)
SIZE=число Толщина линии (в пикселях)
ALIGN=”значение” Положение линии слева(Left), справа (Right) или по Центру (Center)
Например, если нам требуется провести синюю линию по центру экрана толщиной 4 пикселя и шириной в 60% экрана, мы запишем:
Не обязательно, чтобы параметры присутствовали все.
Слайд 10
Создание заголовков
Заголовки в документе создаются с помощью команд:
Заголовок
причем
при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.
Отображаемый текст Запись в формате HTML
Заголовок1
Заголовок1
Заголовок2 Заголовок2
Заголовок3 Заголовок3
Заголовок4 Заголовок4
Заголовок5 Заголовок5
Заголовок6 Заголовок6
Слайд 11
Создание списков
В HTML - документах используется 3 вида списков:
1. Неупорядочные списки,
2. Упорядочные списки,
3. Списки - определения.
Неупорядоченный список использует для выделения записей специальные символы. Неупорядоченный список определяется следующими командами начала и конца списка:
Каждый элемент списка начинается с команды:
Ниже приводится пример неупорядочного списка:
Так текст будет выглядеть:
Строки списка:
• Строка 1 списка
• Строка 2 списка
• Строка 3 списка
Таким кодом он может быть записан:
Строки списка:
- Строка 1 списка
- Строка 2 списка
- Строка 3 списка
Слайд 12
В команде может быть параметр TYPE, который определяет внешний вид
символа, используемого для выделения строки в списке и может иметь следующие значения:
- круглая жирная точка,
- окружность,
- маленький черный квадрат.
В упорядоченном списке все записи пронумерованы.
Упорядоченный список определяется следующими командами начала и конца списка:
Каждый элемент списка, как и в неупорядоченном списке, начинается с команды:
В команде может быть параметр TYPE, который определяет тип нумерации и может иметь следующие значения:
- прописными буквами,
- строчными буквами,
- прописными римскими цифрами,
- строчными римскими цифрами,
- арабскими цифрами.
В списке - определении все записи сдвинуты влево при помощи табуляции. Список - определение определяется следующими командами начала и конца списка:
Каждый элемент списка начинается с команды:
Слайд 13
Создание таблиц
Начало и конец вставки таблицы ограничиваются тэгами
и . Между этими тэгами по очереди слева направо и сверху вниз указывается содержимое каждой ячейки в следующей последовательности (для простой таблицы):
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
то, что Вы хотите написать в 1-й ячейке 1-го ряда | то, что Вы хотите написать во 2-й ячейке 1-го ряда | то, что Вы хотите написать в 3-й ячейке 1-го ряда |
то, что Вы хотите написать в 1-й ячейке 2-го ряда | то, что Вы хотите написать во 2-й ячейке 2-го ряда |
то, что Вы хотите написать в 1-й ячейке 3-го ряда |
Тэг указывает на переход к новой ячейке, а тэг - на переход к новой строке. Если Вы хотите какую-нибудь ячейку оформить как заглавную (например, для названия столбца), вместо для нее следует использовать .
Слайд 14
Тэг может содержать (а может и не содержать) следующие параметры:
BORDER
- прорисовать сетку таблицы. По умолчанию таблица отображается без сетки!
CELLPADDING=число - сколько пикселей отступать от границ таблицы до текста.
BGCOLOR=”код или название цвета” - для указания цвета фона ячеек. Этот параметр можно указывать как в тэге (для всех ячеек), так и в тэгах
и | для одной конкретной ячейки. Это же относится к параметру ALIGN=”как_выравнивать_текст”, действие которого аналогично рассказанному для форматирования абзацев.
В сложных таблицах встречаются объединения ячеек. Например, таблица следующего вида содержит объединение двух ячеек по горизонтали:
Этот пример реализуется следующим фрагментом:
1-я ячейка 1-го ряда | Объединенные 2-я и 3-я ячейки | 1-я ячейка 2-й ряд | 2-я ячейка 2-й ряд | 3-я ячейка 2-й ряд | Здесь мы по-прежнему записывали все ячейки последовательно слева направо до конца ряда. Однако, как только мы дошли до объединенных ячеек, мы указываем в | (или в | ), сколько ячеек мы собираемся объединить. Для этого мы использовали параметр COLSPAN, значением которого является число объединяемых ячеек (в нашем случае их 2).
Слайд 15 Другой пример сложной таблицы:
Для реализации этого примера служит следующий фрагмент:
1-й ряд 1-й столбец | 1-й ряд 2-й столбец |
2-й и 3-й ряд 1-й столбец | 2-й ряд 2-й столбец |
3-й ряд 2-й столбец |
Как только мы первый раз доходим до ячеек, объединенных в столбец, мы добавляем в соответствующий тэг параметр ROWSPAN, значением которого является число ячеек, объединенных по вертикали. После этого мы записываем содержимое данной большой ячейки, закрываем и продолжаем записывать таблицу. Когда мы в следующий раз (на следующем ряду) доходим до данной ячейки, мы ее пропускаем и пишем сразу следующую ячейку.
Слайд 16
ВСТАВКА ИЗОБРАЖЕНИЙ
То изображение, которое Вы хотите разместить на своей странице, должно
существовать в отдельном файле. Например, пусть у Вас есть фотография, которая называется foto1.jpg. Чтобы эту фотографию вставить в текст, служит такая запись:

.
Если изображение слишком велико (или мало) и Вы хотите изменить его размеры, в тэг
![]()
следует записать параметры, например:

.
Здесь параметр height задает высоту изображения (вертикальный размер 300 пикселей), а параметр width – ширину (по горизонтали 400 пикселей).
Слайд 17
ПАРАМЕТРЫ ДОКУМЕНТА В ЦЕЛОМ.
ЦВЕТ ТЕКСТА И ФОНА. ОБОИ
Параметры текста, цвет фона
и т.п., примененные ко всему документу, задаются как параметры тэга :
BGCOLOR=”название или код цвета фона”.
TEXT=”название или код цвета текста”.
LINK=”название или код цвета гиперссылок”.
VLINK=”название или код цвета ранее использованных гиперссылок”.
ALINK=”название или код цвета ссылок в момент нажатия на нее правой кнопкой мыши ”.
BACKGROUND=” имя графического файла, который Вы хотите использовать как обои”.
Например, если мы хотим, чтобы в документе текст был написан красными буквами на желтом фоне, в начале документа можно записать следующее:
Для использования в качестве фона рисунка figure1.jpg, запишем:
Слайд 18
ЦВЕТОВОЙ КОД RGB
Для указания цвета можно использовать не только английские названия
основных цветов (red, green и т.п.), но и цветовой код.
Запись кода начинается с символа #, затем идет 16-ичная запись интенсивности красного цвета (1 байт, т.е. два символа),
затем следует 16-ичная запись интенсивности зеленого и, наконец, синего цветов.
Пример: #34A87F - интенсивность красного цвета 34, зеленого – A8, синего – 7F.
00 – отсутствие данного цвета, FF- его максимальная яркость.
Характерные цвета:
#FFFFFF – белый #FFFF00 - желтый
#000000 – черный #FF00FF - розовый
#FF0000 – ярко красный #00FFFF – морской волны
#800000 – темно-красный #808000 - коричневый
#00FF00 – зеленый #800080 - фиолетовый
#0000FF – синий #808080 - серый
Слайд 20
ССЫЛКИ НА ДРУГОЙ РАЗДЕЛ В ТОМ ЖЕ ФАЙЛЕ
Если у Вас есть
потребность из одного места документа создать ссылку на другое место того же самого документа, Вам сначала потребуется пометить то место,куда Вы хотите указать переход. Для этого Вы вставляете туда метку с
помощью следующей структуры:
.
Имя метки (как правило, несколько букв или цифр) на экране при
просмотре не отображается, а служит параметром при указании адреса в
ссылке. Например, если метка и ссылка на нее находятся в одном и том же файле, то вместо имени файла запишется:
текст ссылки Если метка и ссылка на нее находятся в разных файлах, то после имени файла запишется еще и метка:
текст ссылки Например,
к третьей главе
Слайд 21
ФРЕЙМЫ
Фреймы служат для разбиения экрана на несколько участков (окон, или фреймов),
в каждом их которых может быть показан свой файл (или открыт Интернет-ресурс). Пример: Вам требуется разбить по вертикали экран на два окна, левое из которых должно занимать 30% экрана, а правое – остальные 70%. То, что будет отражаться в окнах, должно быть записано в отдельные файлы. Пусть они называются LEFT.html и RIGHT.html, соответственно. Чтобы организовать фреймы, потребуется написать новый (объединительный) файл, в котором следует указать расположение окон на экране и названия открывающихся в них файлов. Стандарт этого файла такой:
название...
Комментарий к написанному: Здесь вместо тэга с параметрами были вставлены тэги . Параметр COLS указывает, какое количество окон организовывать, а также пропорции создаваемых фреймов. Если бы нам требовалось разбить экран не по вертикали, а по горизонтали, пришлось бы заменить параметр COLS на ROWS, который пишется аналогично.
Слайд 22
Фреймов может быть не только два, но и больше. Число фреймов
задает число чисел в параметре COLS или ROWS.
Пропорции между фреймами можно записать не только с использованием процентов:
Если после числа знак процента отсутствует, то компьютер воспримет это как реальное указание размера фрейма в пикселях.
Если вместо числа стоит знак * , то под это окно будет выделена вся область экрана, оставшаяся от других окон. Например, запись COLS=”*,100,200” будет означать, что 2-е окно получит 100 пикселей ширины, 3-е – 200 пикселей, а 1-е – оставшуюся долю.
Если Вы хотите разделить экран, скажем, в пропорции 1:2, Вы можете записать COLS=” *, 2 * ”.
Запись ROWS=”2 *, 20%, 3 * ” обозначает, что экран по горизонтали будет разделен на три фрейма, причем центральному будет выделено 20%, а размеры остальных двух будут в отношении 2:3.
Между тэгами и располагаются тэги , указывающие на то, какой файл открывать в каком окне. Для этого служит параметр SRC, аналогичный использующемуся при вставке рисунков.
Слайд 23
Вместо тэга может быть записана еще одна структура ......
Тогда в
соответствующем окне произойдет дальнейшее деление на окна.
Пример. Пусть требуется оформить экран таким образом:
Вот каким образом запишется эта структура:
Слайд 24
Гиперссылки, открывающиеся в другом фрейме
Во-первых, тот фрейм, в котором мы хотим
открывать гиперссылку, нужно назвать. Для этого добавим в тэг этого фрейма дополнительный параметр NAME, значением которого и будет выбранное нами название. Если ссылки из левого фрейма мы хотим открыть в правом, мы добавляем NAME в правый, а не в левый .
Например, мы решили назвать этот фрейм ABCDE. Тэг будет выглядеть примерно так:
Теперь нужно отредактировать те гиперссылки, содержимое которых по нашему замыслу должно открываться в окне с названием ABCDE.
Для этого в эти ссылки добавим параметр TARGET=“ABCDE” примерно так:
текст ссылки Зарезервировано 4 специальных значения параметра TARGET:
а) _blank - "браузер" всегда задает это значение для нового, неименованного окна.
б) _self - задается по умолчанию для всех кадров, в операторе FRAME которых нет параметра TARGET.
в) _parent - вызываемый по гиперссылке файл загружается в кадр или окно, которое является родительским по отношению к вызывающему. Другими словами, вызываемый файл будет расположен в том же окне, что и его "дедушка".
г) _top - вызываемый по гиперссылке файл загружается в окно, содержащее ссылку, и перекрывает все кадры данного окна.
Слайд 25
КАРТА ОБРАЗОВ
Карта образов позволяет создать несколько ссылок к различным адресам, используя
только одно изображение.
Пусть у Вас есть картинка imgmap.gif размером 100 x 100 пикселей.
Предположим, что картинка состоит из 4 частей, где изображены Ваши друзья:
- В левом верхнем углу - Дима (у него есть домашняя страница dima.html )
- В правом верхнем углу - Алик (Его домашняя страница alik.html )
- В левом нижнем углу - Вова (Его домашняя страница vova.html )
- В правом нижнем углу - Игорь (Его домашняя страница igor.html )
Если Вы хотите, чтобы при нажатии левой кноки мыши на изображение каждого из Ваших друзей Вы попадали на его домашнюю страницу:
1)Где-нибудь в начале документа разметьте картинку, указав название карты (пусть это будет karta1) и соответствие коордитнат областей на картинке файлам, открывающимся при нажатии на них. Примерно так:
2)Вставляя изображение, добавьте параметр usemap с названием карты образов:
Слайд 26
ФОРМЫ
Форма – это участок текста, содержащий объекты для интерактивного опроса, а
также любой текст, сформатированный по Вашему усмотрению и использующийся в качестве комментариев к элементам формы (например, это могут быть тексты вопросов анкеты).
Пример формы:
Слайд 27
На одной странице форм может быть несколько, но каждая из них
ограничена тэгами .
Тэг
Слайд 30
КОМАНДЫ МЕТА:
Создав домашнюю страницу, Вы, несомненно, захотите чтобы Вас смогли "найти"
все пользователи, интересующиеся данным вопросом.
Здесь можно идти двумя основными путями:
1. "Отметиться" в поисковых системах. Есть службы, позволяющие зарегистрироваться на нескольких серверах одновременно.
2. Вставить внутри блока ... команды META.
Основное назначение команд META - инструкции для поисковых машин о тематике Вашей страницы. Для этих целей используются следующие параметры:
- description - краткое описание страницы,
- keyword - список ключевых слов в странице.
Примеры:
Хочу обратить внимание на важность точной подборки ключей, чтобы, с одной стороны, Вас нашли все, кому Ваша страница предназначена, с другой стороны - чтобы ее не находили пользователи, попавшие на Вашу страницу случайно.
Команды, дающие инструкции "браузеру" о кодировке Вашей страницы.
для кодировки в Windows/1251,
для кодировки в KOI-8.