Слайд 16Теоретически название документа может иметь неограниченную длину, на практике рекомендуется
ограничиться 60 символами.
Не давайте своим документам безликие названия, типа "Первая
страница« название документа должно характеризовать его содержимое содержимое тегов играет не последнюю роль при оптимизации и раскрутке сайта.
Слайд 17Одиночный тег служит для указания полного URL-адреса документа.
Вы
сохранили какую-нибудь html-страницу себе на компьютер, с тем, чтобы просмотреть
ее позже. Все картинки на этой страницы превратятся в красные крестики. Но если вы не отключены от сети, а на странице присутствует тег , то браузер будет знать, где искать необходимый файл, найдет его и загрузит картинки.
У этого тега один атрибут href, значением которого является адрес страницы.
ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ :
BASE У этого тега один атрибут
href, значением которого является адрес страницы.
Слайд 19Одиночный тег необходим для подключения внешних файлов. Например, если
вы будете использовать каскадную таблицу стилей, то ее удобнее хранить
в отдельном файле и подключать этот файл ко всем страницам сайта.
У тега несколько атрибутов: href - указывает URL-адрес подключаемого файла.
rel - указывает на тип отношения данного документа к внешнему (например: rel="stylesheet" указывает, что внешний файл определяет стиль текущего документа).
type - указывает тип и параметры присоединенной таблицы стилей.
Слайд 21Информация в этом теге не имеет никакого отношения к HTML,
однако ее использование очень удобно для решения ряда задач:
- указание
кодировки страницы, например, для русского текста в кодировке Windows
указание ключевых слов страницы (используется при оптимизации страниц)
указание краткого описания страницы:
ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ :
META
Слайд 22ТЕГ Менее значим для ранжирования, однако, иногда поисковики берут описание,
которое выводят под ссылкой на сайт, именно из этого тега.
Главное упомянуть ключевые слова по мере убывания их значимости, и превратить текст в удобочитаемое предложение, которое пользователь может прочитать и понять. Можно упомянуть о скидке или уникальном предложении. Количество символов – не более 150-200.
Слайд 23ТЕГ Многие поисковики игнорируют этот тег, однако заполнить его можно
и продвижению это не повредит. Главное не повторять более 3-4 раз
одно и то же ключевое слово, а дубли склевать путем размещения рядом слов без запятых, например: "мебельный магазин", "магазины мягкой мебели", "мягкая мебель", "фабрика мягкой мебели" можно объединить в словосочетание: "мебельный магазин мягкая мебель фабрика".
Слайд 25В ЗДОРОВОМ ТЕЛЕ…ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ Обязательных параметров у тега
нет, да и применение необязательных параметров тоже не приветствуется.
Рассмотрим те, которые пока поддерживаются всеми браузерами:
alink - устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный при нажатии на нее.
vlink - устанавливает цвет посещенной ссылки, т.е. той, по которой уже щелкали.
background - указывает на изображение, которое будет использоваться в качестве фонового рисунка. Этот рисунок заполняет собой все видимое пространство окна. Если рисунок меньше окна браузера, то он повторяется, образуя мозаику из одинаковых картинок.
Слайд 26ФОРМАТИРУЕМ ТЕКСТ Атрибуты, указанные в теге распространяют свое действие на
весь документ.
Слайд 27leftmargin - определяет отступ от левого края окна браузера до
контента страницы.
rightmargin - определяет отступ от правого края окна браузера
до контента страницы.
topmargin - определяет отступ от верхнего края окна браузера до контента страницы.
bottommargin - определяет отступ от нижнего края окна браузера до контента страницы.
text - устанавливает цвет текста для всего документа.
Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом
и имеет свой размер.
Эти теги могут использоваться с параметром горизонтального выравнивания align. Возможные значения этого параметра:
left - слева,
right - справа,
center - по центру,
jastify - по ширине.
Слайд 32 Так выглядит заголовок первого уровня Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Это заголовок второго уровня
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Это заголовок четвертого уровня
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Это заголовок пятого уровня
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Слайд 34ТЕГИ РАЗДЕЛЕНИЯ НА АБЗАЦЫ И ПЕРЕНОСА СТРОКИ Тег - тег
принудительного перевода строки. Текст, после этого тега начинается с новой
строки.
Теги разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег
, закрывающий тег не обязателен. В отличии от тега абзацы отделяются друг от друга пустой строкой.
У тега
есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра:
left - слева,
right - справа,
center - по центру,
jastify - по ширине.
они это по разным причинам. Теги используются для логического
выделения названий книг, статей и цитат. Теги используются для выделения определений. Тегами и выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.
Слайд 47ТЕГ FONT И ЕГО ПАРАМЕТРЫ Теги указывают параметры шрифта текста:
face
- название шрифта. Названий шрифтов можно привести несколько, через запятую.
В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку.
size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3.
color - цвет текста (по умолчанию - черный).
Слайд 48В HTML существуют два способа задания цвета: по имени (156)
указанием шестнадцатеричного кода цвета.
Итак, поменяем цвет в атрибуте bgcolor на
нежно-голубой, а цвет текста - на менее яркий. Обновите html-страницу (Ctrl+F5) и посмотрите на результат.
Шестнадцатеричный код цвета. «#RRGGBB» означает шестнадцатеричный код цвета: доля красного (RR) может лежать в диапазоне от 00 до FF (это соответствует десятичному числу 255), также как и доли зелёного (GG) и синего цвета (BB). Таким образом, палитра доступных цветов насчитывает 166 = 16 777 216 наименований.
Слайд 50СОВМЕСТНОЕ ИСПОЛЬЗОВАНИЕ ТЕГОВ Выделим слово "текст" красным цветом: Текст Теперь добавим
теги курсива (открывающий - слева, закрывающий - справа): Текст
А теперь - теги полужирного начертания: Текст
Слайд 51Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть
закрыт последним. Так неправильно! Так правильно
Слайд 52Теги указывают на то, что текст является аббревиатурой. По
умолчанию текст подчеркивается пунктиром, а при наведении на него курсора
мыши появляется всплывающая подсказка с расшифровкой аббревиатуры. Это достигается добавлением в тег параметра title, в качестве значения которого и выступает расшифровка.
HTML
Слайд 53Теги применяются для указания адреса. Отображается курсивом с новой
строки. Пишите по адресу: Ленинский пр., д.2
Теги
делают текст перечеркнутым. Этот текст в тегах del
Теги выделяют короткие цитаты. Линкольн любил говорить: Не достигает цели тот, кто от нее отказывается.
Слайд 54Теги выводят текст большего размера, чем остальная часть текста.
Теги выводят текст меньшего размера, чем остальная часть текста.
Этот текст в тегах big
Это просто текст
Этот текст в тегах small
Слайд 55Тег рисует горизонтальную линию, отделенную сверху и снизу пустыми
строками. У этого тега есть следующие параметры:
align - выравнивает линию
по центру (center), слева (left) или справа (right). width - устанавливает длину линии в пикселах или в процентах от ширины окна. size - устанавливает толщину линии в пикселах. color - устанавливает цвет линии. noshade - убирает рельефность линии.
Слайд 64ЗАДАНИЕ Сделайте все обязательные настройки для создания страницы в Notepad++ Создайте страницу
с названием «index.html» Вставьте все необходимые элементы веб-страницы Вставьте заголовок (Сказка о
Красной Шапочке) Вставьте текст-исходник
Слайд 65Сделайте фон страницы – ivory, Отступ слева - 100 пикселей справа
- 50 пикселей сверху - 50 пикселей снизу - 50 пикселей Цвет ссылок
alink – red; vlink – maroon Текст «Красная шапочка» 5 размера, красного цвета с выравниванием посередине Текст «Шарль Перо» заголовком 4 типа По всему тексту «Красная шапочка» жирным курсивом, прямая речь курсивом
Слайд 66Имена авторов моноширинным текстом, серого цвета с размером 4. Текст «…так
начинается …совсем другая история…» моноширинный, подчеркнутый сверху и снизу линиями Вставьте
Слайд 74 Верхняя граница изображения выравнивается по самому высокому
элементу текущей строки. Изображение как бы встраивается в строчку. Если
изображение большое, то и строка раздвигается на эту высоту.
Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).
Слайд 75 Выравнивание середины изображения по базовой линии
текущей строки.
Выравнивание нижней границы изображения по
базовой линии текущей строки.
Слайд 76Если же мы хотим, чтобы текст располагался под картинкой, то
необходимо использовать тег с параметром clear, который запрещает обтекание.
Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all).
Остальные элементы документа
Слайд 77РАЗМЕРЫ ИЗОБРАЖЕНИЙ Любое изображение имеет размер, заданный в пикселах. При встраивании
изображения на страницу, возможно вам понадобиться уменьшить размер исходной картинки.
Для
этого у тега существуют параметры width - ширина height - высота. Они задаются в пикселах или в процентах (процент от ширины экрана)
При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
Вы, наверно, обратили внимание, что текст очень близко
прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.
Слайд 80АЛЬТЕРНАТИВНЫЙ ТЕКСТ Если у пользователя отключен режим загрузки изображений, то вместо
картинки он увидит красный крестик. Неплохо было бы дать ему
подсказку, что изображено на рисунке. Для этого используется параметр alt. Текст из этого параметра будет отображаться вместо картинки.
Слайд 85Без использования CSS, только с помощью таблиц можно создавать страницы
со сложным дизайном. Любая таблица представляет собой набор строк и
столбцов, на пересечении которых находятся ячейки.
Слайд 86Рассмотрим нашу таблицу с точки зрения HTML: сама таблица задается
с помощью тегов , у таблицы есть название - теги
, таблица состоит из строк - теги , каждая строка состоит из столбцов - теги , столбцы имеют названия, расположенные в первой строке - теги .
Название таблицы
1
2
3
11
12
13
21
22
23
31
32
33
Слайд 87ПАРАМЕТРЫ HTML ТАБЛИЦ:
ОТСТУП, ШИРИНА, ЦВЕТ ФОНА, РАМКА width - задает
ширину таблицы (в пикселах или % от ширины экрана), bgcolor -
задает цвет фона ячеек таблицы, background - заливает фон таблицы рисунком, border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы, cellpadding - задает отступ в пикселях между границей клетки и ее содержимым.
Слайд 88Наша таблица прижата к левому краю окна, также как и
текст в ней. Исправим это, добавив еще три параметра: align -
задает выравнивание таблицы: слева (right), справа (left), по центру (center), cellspacing - задает расстояние между ячейками таблицы (в пикселах), cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
Название таблицы
Слайд 89Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0", то границы
примут привычный вид.
Слайд 90За границы отвечают два параметра:
frame - задает вид рамки
вокруг таблицы и может принимать следующие значения: void - рамки нет,
above - только верхняя рамка, below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.
rules - задает вид внутренних границ таблицы и может принимать следующие значения:
none - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже), rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.
свое действие на все ячейки (td) строки. У строк можно
использовать три параметра: align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center), valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle), bgcolor - задает цвет строки.
горизонтали и книзу - по вертикали Эти же параметры можно
применять и к отдельным ячейкам, т.е. к любому тегу
Слайд 98РАБОТА С ТАБЛИЦАМИ СЛОЖНОЙ СТРУКТУРЫ Самым распространенным применением таблиц сложных структур
является разметка web-страницы.
Слайд 99Если наложить на этот рисунок таблицу, то мы увидим, что
она состоит из трех строк и двух столбцов фиксированной ширины.
Слайд 100Нам нужно, чтобы в первой и третьей строках было по
одному столбцу. Это достигается при помощи параметра colspan тега .
Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.
Название таблицы
1
2
3
11
12
13
21
22
23
31
32
33
12
13
23
31 Текст во всех ячейках этой строки прижат по горизонтали к правому краю, по вертикали - кверху
32
33
, действие будет распространяться только на саму ячейку. В предыдущем коде добавьте в любой тег
параметр bgcolor="red".
Слайд 97к ячейкам можно применять еще два параметра: width - задает ширину
столбца (в пикселах или в процентном соотношении, где за 100%
принимается ширина таблицы), height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.
Слайд 104Две строки и два столбца. Но первый столбец первой строки
объединяет две строки. Для такого случая есть параметр rowspan тега .
Этот параметр указывает браузеру объединить несколько строк в одну. Значением этого параметра является число, указывающее сколько строк будет объединено.
Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания: