Разделы презентаций

Пошаговое создание сайта в HTML

Содержание

ТЕГИ HTML

Слайды и текст этой презентации

Слайд 1ОСНОВЫ HTML

ОСНОВЫ HTML

Слайд 3ТЕГИ HTML

ТЕГИ HTML

Слайд 4ПРИМЕРЫ ТЕГОВ







ПРИМЕРЫ ТЕГОВ

Слайд 5ПРИМЕРЫ ПАРНЫХ ТЕГОВ

ПРИМЕРЫ ПАРНЫХ ТЕГОВ

Слайд 6ПРИМЕРЫ ОДИНОЧНЫХ ТЕГОВ

ПРИМЕРЫ ОДИНОЧНЫХ ТЕГОВ

Слайд 7АТРИБУТЫ ТЕГОВ
это дополнительные ключевые слова, отделенные от содержимого тэга и

друг от друга пробелами
значение отделяется от атрибута знаком =


значение атрибута должно быть в кавычках, но иногда их можно не писать

Закрывающие теги никогда не имеют атрибутов!

АТРИБУТЫ ТЕГОВэто дополнительные ключевые слова, отделенные от содержимого тэга и друг от друга пробелами значение отделяется от

Слайд 8ПРИМЕР ТЕГА С АТРИБУТАМИ


ПРИМЕР ТЕГА С АТРИБУТАМИ

Слайд 9СТРУКТУРА HTML -ДОКУМЕНТА

СТРУКТУРА HTML -ДОКУМЕНТА

Слайд 10Создайте папку, назовите её своим именем и фамилией.
Откройте Notepad++ и

введите в новый документ следующий код:



Моя

первая страничка

Привет всем! Смотрите - это моя первая Web- страничка!


Создайте папку, назовите её своим именем и фамилией.Откройте Notepad++ и введите в новый документ следующий код:

Слайд 11Выберите в меню «Синтаксис» ? «Н» ? «HTML»

Выберите в меню «Синтаксис» ? «Н» ? «HTML»

Слайд 12Смените кодировку на UTF-8. Если не поменять кодировку,
то при

просмотре страницы Вы увидите …

Смените кодировку на UTF-8. Если не поменять кодировку, то при просмотре страницы Вы увидите …

Слайд 13вместо …

вместо …

Слайд 14В ГОЛОВЕ МОЕЙ ОПИЛКИ…ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ
Заголовок документа содержит

служебную информацию и не влияет на внешний вид документа. Его

задачей является предоставление браузеру пользователя или серверу информации о том, как отобразить ваш документ.
Title
Base
Link
Meta
Script
В ГОЛОВЕ МОЕЙ ОПИЛКИ…ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ Заголовок документа содержит служебную информацию и не влияет на внешний вид

Слайд 15ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : TITLE


Заголовок документа

Тело документа

ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : TITLE Заголовок документа Тело документа

Слайд 16Теоретически название документа может иметь неограниченную длину, на практике рекомендуется

ограничиться 60 символами. Не давайте своим документам безликие названия, типа "Первая

страница«
название документа должно характеризовать его содержимое
содержимое тегов играет не последнюю роль при оптимизации и раскрутке сайта.
Теоретически название документа может иметь неограниченную длину, на практике рекомендуется ограничиться 60 символами. Не давайте своим

Слайд 17Одиночный тег служит для указания полного URL-адреса документа.

Вы

сохранили какую-нибудь html-страницу себе на компьютер, с тем, чтобы просмотреть

ее позже. Все картинки на этой страницы превратятся в красные крестики. Но если вы не отключены от сети, а на странице присутствует тег , то браузер будет знать, где искать необходимый файл, найдет его и загрузит картинки. У этого тега один атрибут href, значением которого является адрес страницы.

ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : BASE

Одиночный тег служит для указания полного URL-адреса документа. Вы сохранили какую-нибудь html-страницу себе на компьютер, с тем,

Слайд 18

Структура html


Тело документа



ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : BASE
У этого тега один атрибут

href, значением которого является адрес страницы.
Структура html Тело документа ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : BASEУ этого тега один атрибут href,

Слайд 19Одиночный тег необходим для подключения внешних файлов. Например, если

вы будете использовать каскадную таблицу стилей, то ее удобнее хранить

в отдельном файле и подключать этот файл ко всем страницам сайта.

У тега несколько атрибутов:
href - указывает URL-адрес подключаемого файла.
rel - указывает на тип отношения данного документа к внешнему (например: rel="stylesheet" указывает, что внешний файл определяет стиль текущего документа).
type - указывает тип и параметры присоединенной таблицы стилей.

ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : LINK

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

Слайд 20

Структура html



Тело документа

ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : LINK

Структура html Тело документа ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : LINK

Слайд 21Информация в этом теге не имеет никакого отношения к HTML,

однако ее использование очень удобно для решения ряда задач: - указание

кодировки страницы, например, для русского текста в кодировке Windows

указание ключевых слов страницы (используется при оптимизации страниц)

указание краткого описания страницы:

ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : META

Информация в этом теге не имеет никакого отношения к HTML, однако ее использование очень удобно для решения

Слайд 22ТЕГ
Менее значим для ранжирования, однако, иногда поисковики берут описание,

которое выводят под ссылкой на сайт, именно из этого тега.


Главное упомянуть ключевые слова по мере убывания их значимости, и превратить текст в удобочитаемое предложение, которое пользователь может прочитать и понять. Можно упомянуть о скидке или уникальном предложении.
Количество символов – не более 150-200.

ТЕГ Менее значим для ранжирования, однако, иногда поисковики берут описание, которое выводят под ссылкой на сайт, именно

Слайд 23ТЕГ
Многие поисковики игнорируют этот тег, однако заполнить его можно

и продвижению это не повредит.
Главное не повторять более 3-4 раз

одно и то же ключевое слово, а дубли склевать путем размещения рядом слов без запятых, например: "мебельный магазин", "магазины мягкой мебели", "мягкая мебель", "фабрика мягкой мебели" можно объединить в словосочетание: "мебельный магазин мягкая мебель фабрика".
ТЕГ Многие поисковики игнорируют этот тег, однако заполнить его можно и продвижению это не повредит.Главное не повторять

Слайд 25В ЗДОРОВОМ ТЕЛЕ…ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ
Обязательных параметров у тега

нет, да и применение необязательных параметров тоже не приветствуется.


Рассмотрим те, которые пока поддерживаются всеми браузерами: alink - устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный при нажатии на нее. vlink - устанавливает цвет посещенной ссылки, т.е. той, по которой уже щелкали. background - указывает на изображение, которое будет использоваться в качестве фонового рисунка. Этот рисунок заполняет собой все видимое пространство окна. Если рисунок меньше окна браузера, то он повторяется, образуя мозаику из одинаковых картинок.
В ЗДОРОВОМ ТЕЛЕ…ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ Обязательных параметров у тега нет, да и применение необязательных параметров тоже не

Слайд 26ФОРМАТИРУЕМ ТЕКСТ
Атрибуты, указанные в теге распространяют свое действие
на

весь документ.

ФОРМАТИРУЕМ ТЕКСТАтрибуты, указанные в теге распространяют свое действие на весь документ.

Слайд 27leftmargin - определяет отступ от левого края окна браузера до

контента страницы. rightmargin - определяет отступ от правого края окна браузера

до контента страницы. topmargin - определяет отступ от верхнего края окна браузера до контента страницы. bottommargin - определяет отступ от нижнего края окна браузера до контента страницы. text - устанавливает цвет текста для всего документа.

leftmargin - определяет отступ от левого края окна браузера до контента страницы. rightmargin - определяет отступ

Слайд 28

Тег body в html

type="text/css" href="/style.css">

страницы">




Просто текст


Ссылка на страницу Google


Ссылка на страницу Яндекс


Тег body в html Просто текст Ссылка на страницу Google Ссылка

Слайд 30ФОРМАТИРОВАНИЕ ТЕКСТА

ФОРМАТИРОВАНИЕ ТЕКСТА

Слайд 31ТЕГИ, ДЕЛАЮЩИЕ ТЕКСТ ЗАГОЛОВКАМИ

Эти теги выделяют текст в виде заголовков.

Т.е. каждый заголовок начинается с новой строки, выделен полужирным шрифтом

и имеет свой размер. Эти теги могут использоваться с параметром горизонтального выравнивания 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.


Это заголовок шестого уровня

Это просто текст стандартного размера


Так выглядит заголовок первого уровня Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy

Слайд 34ТЕГИ РАЗДЕЛЕНИЯ НА АБЗАЦЫ И ПЕРЕНОСА СТРОКИ
Тег
- тег

принудительного перевода строки. Текст, после этого тега начинается с новой

строки.
Теги

разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег

, закрывающий тег не обязателен. В отличии от тега
абзацы отделяются друг от друга пустой строкой. У тега

есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра: left - слева, right - справа, center - по центру, jastify - по ширине.

ТЕГИ РАЗДЕЛЕНИЯ НА АБЗАЦЫ И ПЕРЕНОСА СТРОКИТег - тег принудительного перевода строки. Текст, после этого тега начинается

Слайд 35

Форматирование html


Это абзац, он

отделен от всего текста пустыми строками сверху и снизу и

выровнен по левому краю.


Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по правому краю.


Это абзац, он отделен от всего текста пустыми строками сверху и снизу и выровнен по центру.


Это просто текст.
Это текст с новой строки.


Форматирование html Это абзац, он отделен от всего текста пустыми строками сверху и снизу и

Слайд 37ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ КУРСИВОМ

Эти теги выделяют текст курсивом, но делают

они это по разным причинам.
Теги используются для логического

выделения названий книг, статей и цитат.
Теги используются для выделения определений.
Тегами и выделяют важные фрагменты текста. Последний не рекомендуется к употреблению.
ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ КУРСИВОМ Эти теги выделяют текст курсивом, но делают они это по

Слайд 38
Этот текст в тегах cite

Этот

текст в тегах dfn

Этот текст в тегах

em

Этот текст в тегах i

Этот текст в тегах cite Этот текст в тегах dfn Этот текст в тегах

Слайд 39ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОЛУЖИРНЫМ ШРИФТОМ

Оба используются для выделения важных фрагментов

текста, но предпочтительнее использовать первый.


Просто текст

Этот текст

в тегах strong

Этот текст в тегах b

ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОЛУЖИРНЫМ ШРИФТОМ Оба используются для выделения важных фрагментов текста, но предпочтительнее использовать первый. Просто

Слайд 41ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОДЧЕРКИВАНИЕМ
Оба используются для подчеркивания важных фрагментов текста,

но предпочтительнее использовать первый.


Просто текст

Этот текст в

тегах ins

Этот текст в тегах u

ТЕГИ, ВЫДЕЛЯЮЩИЕ ТЕКСТ ПОДЧЕРКИВАНИЕМ Оба используются для подчеркивания важных фрагментов текста, но предпочтительнее использовать первый. Просто

Слайд 43ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ МОНОШИРИННЫМ ШРИФТОМ
Выводят текст моноширинным шрифтом, но предпочтительнее

использовать первый.


Просто текст

Этот текст в тегах kbd



Этот текст в тегах samp

Этот текст в тегах tt

ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ МОНОШИРИННЫМ ШРИФТОМ Выводят текст моноширинным шрифтом, но предпочтительнее использовать первый. Просто текст

Слайд 45ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ В ВЕРХНЕМ И НИЖНЕМ ИНДЕКСАХ
Теги выводят

текст ниже уровня строки шрифтом меньшего размера. Теги выводят

текст выше уровня строки шрифтом меньшего размера. Удобны для вывода математических и химических формул.


y=x2 - уравнение параболы.


H2O - формула воды.

ТЕГИ, ВЫВОДЯЩИЕ ТЕКСТ В ВЕРХНЕМ И НИЖНЕМ ИНДЕКСАХТеги выводят текст ниже уровня строки шрифтом меньшего размера.

Слайд 47ТЕГ FONT И ЕГО ПАРАМЕТРЫ
Теги указывают параметры шрифта текста: face

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

В этом случае, если первый указанный шрифт не будет найден (вы же не знаете, какие шрифты установлены на компьютере пользователя), браузер станет использовать следующий по списку. size - размер шрифта в условных единицах от 1 до 7. По умолчанию размер шрифта равен 3. color - цвет текста (по умолчанию - черный).
ТЕГ FONT И ЕГО ПАРАМЕТРЫТеги указывают параметры шрифта текста: face - название шрифта. Названий шрифтов можно

Слайд 48В HTML существуют два способа задания цвета:
по имени (156)


указанием шестнадцатеричного кода цвета.
Итак, поменяем цвет в атрибуте bgcolor на

нежно-голубой, а цвет текста - на менее яркий.
Обновите html-страницу (Ctrl+F5) и посмотрите на результат.

Шестнадцатеричный код цвета. «#RRGGBB» означает шестнадцатеричный код цвета: доля красного (RR) может лежать в диапазоне от 00 до FF (это соответствует десятичному числу 255), также как и доли зелёного (GG) и синего цвета (BB). Таким образом, палитра доступных цветов насчитывает 166 = 16 777 216 наименований.





В HTML существуют два способа задания цвета: по имени (156) указанием шестнадцатеричного кода цвета. Итак, поменяем цвет

Слайд 49
Это простой текст.

Этот текст

красный, размера 5.

Этот текст

синий, размера 2.

Это простой текст. Этот текст красный, размера 5. Этот текст синий, размера 2.

Слайд 50СОВМЕСТНОЕ ИСПОЛЬЗОВАНИЕ ТЕГОВ
Выделим слово "текст" красным цветом:
Текст
Теперь добавим

теги курсива (открывающий - слева, закрывающий - справа):
Текст


А теперь - теги полужирного начертания:
Текст
СОВМЕСТНОЕ ИСПОЛЬЗОВАНИЕ ТЕГОВВыделим слово

Слайд 51Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть

закрыт последним.
Так неправильно!
Так правильно

Соблюдайте порядок вложенности тегов. Тег, который открыт первым, должен быть закрыт последним. Так неправильно! Так правильно

Слайд 52Теги указывают на то, что текст является аббревиатурой. По

умолчанию текст подчеркивается пунктиром, а при наведении на него курсора

мыши появляется всплывающая подсказка с расшифровкой аббревиатуры. Это достигается добавлением в тег параметра title, в качестве значения которого и выступает расшифровка.

HTML
Теги указывают на то, что текст является аббревиатурой. По умолчанию текст подчеркивается пунктиром, а при наведении на

Слайд 53Теги применяются для указания адреса. Отображается курсивом с новой

строки.
Пишите по адресу: Ленинский пр., д.2

Теги

делают текст перечеркнутым.
Этот текст в тегах del


Теги выделяют короткие цитаты.
Линкольн любил говорить: Не достигает цели тот, кто от нее отказывается.


Теги применяются для указания адреса. Отображается курсивом с новой строки.Пишите по адресу: Ленинский пр., д.2 Теги делают

Слайд 54Теги выводят текст большего размера, чем остальная часть текста.

Теги выводят текст меньшего размера, чем остальная часть текста.

Этот текст в тегах big

Это просто текст

Этот текст в тегах small
Теги выводят текст большего размера, чем остальная часть текста. Теги выводят текст меньшего размера, чем остальная часть

Слайд 55Тег рисует горизонтальную линию, отделенную сверху и снизу пустыми

строками. У этого тега есть следующие параметры:
align - выравнивает линию

по центру (center), слева (left) или справа (right).
width - устанавливает длину линии в пикселах или в процентах от ширины окна.
size - устанавливает толщину линии в пикселах.
color - устанавливает цвет линии.
noshade - убирает рельефность линии.
Тег рисует горизонтальную линию, отделенную сверху и снизу пустыми строками. У этого тега есть следующие параметры: align

Слайд 56
Линия без параметров

Линия по центру

width=50%>
Линия слева


Линия без параметров Линия по центру Линия слева

Слайд 57СПИСКИ
HTML использует три вида списков:
упорядоченные (нумерованные)
и


неупорядоченные (маркированные)
и
элементы списков заключаются между

тэгами
  • и

    • списки определений
    и

    определяемые термины помечаются тэгом

    определения – тэгом


    СПИСКИHTML использует три вида списков: упорядоченные (нумерованные) и неупорядоченные (маркированные) и элементы списков заключаются между тэгами

    Слайд 58ГИПЕРССЫЛКИ

    ГИПЕРССЫЛКИ

    Слайд 59

    Ссылки в html


    Посетите

    поисковую систему Яндекс


    Ссылки в html Посетите поисковую систему Яндекс

    Слайд 61 поисковую систему Яндекс

    По умолчанию ссылки

    загружаются в то же окно, но если указать параметр target="_blank",

    то ссылка загрузится в новое окно.
    поисковую систему Яндекс По умолчанию ссылки загружаются в то же окно, но если указать параметр target=

    Слайд 62Иногда, когда документ слишком длинный, полезно сделать ссылки на его

    разделы.

    Для таких переходов следует создать пустую ссылку с параметром

    name там, куда следует перейти. И ссылку с указанием этого имени (после знака #) в качестве адреса параметра href там, откуда следует перейти



    первый абзац, в котором стоит пустая ссылка – якорь


    второй абзац


    третий абзац


    Наверх


    Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Для таких переходов следует создать пустую

    Слайд 63У ссылок есть параметр title, в качестве значения которого можно

    указать текст, который будет выводиться в качестве подсказки, если подвести

    курсор мыши к ссылке.


    Посетите
    поисковую систему Яндекс


    У ссылок есть параметр title, в качестве значения которого можно указать текст, который будет выводиться в качестве

    Слайд 64ЗАДАНИЕ
    Сделайте все обязательные настройки для создания страницы в Notepad++
    Создайте страницу

    с названием «index.html»
    Вставьте все необходимые элементы веб-страницы
    Вставьте заголовок (Сказка о

    Красной Шапочке)
    Вставьте текст-исходник
    ЗАДАНИЕСделайте все обязательные настройки для создания страницы в Notepad++Создайте страницу с названием «index.html»Вставьте все необходимые элементы веб-страницыВставьте

    Слайд 65Сделайте фон страницы – ivory,
    Отступ слева - 100 пикселей
    справа

    - 50 пикселей
    сверху - 50 пикселей
    снизу - 50 пикселей
    Цвет ссылок

    alink – red; vlink – maroon
    Текст «Красная шапочка» 5 размера, красного цвета с выравниванием посередине
    Текст «Шарль Перо» заголовком 4 типа
    По всему тексту «Красная шапочка» жирным курсивом, прямая речь курсивом
    Сделайте фон страницы – ivory, Отступ слева - 100 пикселейсправа - 50 пикселейсверху - 50 пикселейснизу -

    Слайд 66Имена авторов моноширинным текстом, серого цвета с размером 4.
    Текст «…так

    начинается …совсем другая история…» моноширинный, подчеркнутый сверху и снизу линиями
    Вставьте

    по тексту абзацные отступы
    Имена авторов моноширинным текстом, серого цвета с размером 4.Текст «…так начинается …совсем другая история…» моноширинный, подчеркнутый сверху

    Слайд 67ИЗОБРАЖЕНИЯ

    ИЗОБРАЖЕНИЯ

    Слайд 68Изображения на web-страницах могут использоваться двумя способами:
    в качестве фона


    в качестве самостоятельного изображения.
    Рекомендуется использование трех форматов графики: JPEG,

    GIF и PNG.

    Все изображения для сайта хранятся в отдельной папке, например, images. А пути к изображениям прописываются также, как в ссылках.
    Изображения на web-страницах могут использоваться двумя способами: в качестве фона в качестве самостоятельного изображения. Рекомендуется использование трех

    Слайд 69ФОНОВЫЕ ИЗОБРАЖЕНИЯ
    Фоновое изображение заполняет собой все пространство элемента, для которого

    оно задано.
    Указав в теге атрибут background="fon.gif", рисунком fon.gif

    будет залито все окно браузера.

    "../images/fon.gif" – если в разных папках "fon.gif" – если в одной папке
    ФОНОВЫЕ ИЗОБРАЖЕНИЯФоновое изображение заполняет собой все пространство элемента, для которого оно задано. Указав в теге атрибут background=

    Слайд 70Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor.

    Это связано с тем, что у пользователя может быть отключена

    загрузка изображений и вашего красивого фона он не увидит. Тогда браузер и будет использовать параметр bgcolor.



    Фоновое изображение


    Здесь содержание документа


    Задавая фоновый рисунок документа, не забывайте указывать также параметр bgcolor. Это связано с тем, что у пользователя

    Слайд 71ВСТРАИВАНИЕ ИЗОБРАЖЕНИЙ
    Для размещения на странице изображений используется тег , имеющий

    единственный обязательный параметр src, определяющий URL-адрес изображения.

    ВСТРАИВАНИЕ ИЗОБРАЖЕНИЙДля размещения на странице изображений используется тег , имеющий единственный обязательный параметр src, определяющий URL-адрес изображения.

    Слайд 72

    Тег img



    Остальное содержимое

    документа


    Остальное содержимое документа

    Тег img Остальное содержимое документа Остальное содержимое документа

    Слайд 74 Верхняя граница изображения выравнивается по самому высокому

    элементу текущей строки. Изображение как бы встраивается в строчку. Если

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




    Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки (заглавная буква строки).








    Верхняя граница изображения выравнивается по самому высокому элементу текущей строки. Изображение как бы встраивается в строчку.

    Слайд 75 Выравнивание середины изображения по базовой линии

    текущей строки.



    Выравнивание нижней границы изображения по

    базовой линии текущей строки.

    Выравнивание середины изображения по базовой линии текущей строки. Выравнивание нижней границы изображения по базовой линии текущей

    Слайд 76Если же мы хотим, чтобы текст располагался под картинкой, то

    необходимо использовать тег
    с параметром clear, который запрещает обтекание.

    Обтекание можно запретить с правой стороны (right), с левой стороны (left) и с обеих сторон (all).


    Остальные элементы документа
    Если же мы хотим, чтобы текст располагался под картинкой, то необходимо использовать тег с параметром clear, который

    Слайд 77РАЗМЕРЫ ИЗОБРАЖЕНИЙ
    Любое изображение имеет размер, заданный в пикселах. При встраивании

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

    этого у тега существуют параметры
    width - ширина
    height - высота.
    Они задаются в пикселах или в процентах (процент от ширины экрана)

    При загрузке изображения браузер будет автоматически масштабировать вашу картинку к заданным параметрам ширины и высоты. Только имейте в виду, что неаккуратное задание параметров, может привести к изменению пропорций рисунка, а следовательно, к его искажению.
    РАЗМЕРЫ ИЗОБРАЖЕНИЙЛюбое изображение имеет размер, заданный в пикселах. При встраивании изображения на страницу, возможно вам понадобиться уменьшить

    Слайд 79 Остальное содержимое документа теперь не

    прилипает к изображению.


    Вы, наверно, обратили внимание, что текст очень близко

    прилипает к картинкам. Это не всегда красиво. Для решения этой проблемы имеются параметры hspace - горизонтальный отступ и vspace - вертикальный отступ. Отступы задаются в пикселах.
    Остальное содержимое документа теперь не прилипает к изображению.Вы, наверно, обратили внимание, что текст очень близко прилипает

    Слайд 80АЛЬТЕРНАТИВНЫЙ ТЕКСТ
    Если у пользователя отключен режим загрузки изображений, то вместо

    картинки он увидит красный крестик. Неплохо было бы дать ему

    подсказку, что изображено на рисунке. Для этого используется параметр alt. Текст из этого параметра будет отображаться вместо картинки.

    рыбка рыбка
    АЛЬТЕРНАТИВНЫЙ ТЕКСТЕсли у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик. Неплохо было

    Слайд 81ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ ССЫЛКИ




    Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера

    . В примере наша картинка будет ссылаться на страницу html_example1.html, которая будет открываться в отдельном окне.
    ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ ССЫЛКИ Чтобы изображение сделать ссылкой, достаточно поместить его внутрь тега-контейнера . В примере

    Слайд 82Добавьте в тег атрибут border="0", значением которого является толщина

    рамочки.

    Добавьте в тег атрибут border=

    Слайд 83Вставьте фоновую картинку, отрегулируйте отступы от краев страницы
    Все имена авторов

    сделайте гиперссылками на соответствующие страницы Википедии
    Вставьте картинки по тексту
    Вставьте логотип

    ИРСО и сделайте его гиперссылкой на сайт ИРСО.

    Вставьте фоновую картинку, отрегулируйте отступы от краев страницыВсе имена авторов сделайте гиперссылками на соответствующие страницы ВикипедииВставьте картинки

    Слайд 84ТАБЛИЦЫ

    ТАБЛИЦЫ

    Слайд 85Без использования CSS, только с помощью таблиц можно создавать страницы

    со сложным дизайном. Любая таблица представляет собой набор строк и

    столбцов, на пересечении которых находятся ячейки.




    Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Любая таблица представляет собой

    Слайд 86Рассмотрим нашу таблицу с точки зрения HTML:
    сама таблица задается

    с помощью тегов ,
    у таблицы есть название - теги

    ,
    таблица состоит из строк - теги ,
    каждая строка состоит из столбцов - теги ,
    столбцы имеют названия, расположенные в первой строке - теги .



    Название таблицы
    123
    111213
    212223
    313233

    Рассмотрим нашу таблицу с точки зрения HTML: сама таблица задается с помощью тегов , у таблицы есть

    Слайд 87ПАРАМЕТРЫ HTML ТАБЛИЦ: ОТСТУП, ШИРИНА, ЦВЕТ ФОНА, РАМКА
    width - задает

    ширину таблицы (в пикселах или % от ширины экрана),
    bgcolor -

    задает цвет фона ячеек таблицы,
    background - заливает фон таблицы рисунком,
    border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы,
    cellpadding - задает отступ в пикселях между границей клетки и ее содержимым.


    ПАРАМЕТРЫ HTML ТАБЛИЦ: ОТСТУП, ШИРИНА, ЦВЕТ ФОНА, РАМКАwidth - задает ширину таблицы (в пикселах или %

    Слайд 88Наша таблица прижата к левому краю окна, также как и

    текст в ней. Исправим это, добавив еще три параметра:
    align -

    задает выравнивание таблицы: слева (right), справа (left), по центру (center),
    cellspacing - задает расстояние между ячейками таблицы (в пикселах),
    cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).

    Название таблицы

    Наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще

    Слайд 89Обратите внимание, границы у таблицы двойные.
    Если указать cellspacing="0", то границы

    примут привычный вид.

    Обратите внимание, границы у таблицы двойные.Если указать cellspacing=

    Слайд 90За границы отвечают два параметра: frame - задает вид рамки

    вокруг таблицы и может принимать следующие значения:
    void - рамки нет,


    above - только верхняя рамка,
    below - только нижняя рамка, hsides - только верхняя и нижняя рамки, vsides - только левая и правая рамки, lhs - только левая рамка, rhs - только правая рамка, box - все четыре части рамки.
    rules - задает вид внутренних границ таблицы и может принимать следующие значения:
    none - между ячейками нет границ, groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
    rows - границы только между строками, cols - границы только между стобцами, all - отображать все границы.
    За границы отвечают два параметра: frame - задает вид рамки вокруг таблицы и может принимать следующие

    Слайд 92Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют

    свое действие на все ячейки (td) строки. У строк можно

    использовать три параметра:
    align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
    valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle),
    bgcolor - задает цвет строки.

    Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки.

    Слайд 93
    Название таблицы

    123



    11 Текст во всех ячейках

    этой строки центрирован по центру как по вертикали, так и по горизонтали




    Название таблицы 123 11 Текст во всех ячейках этой строки центрирован по центру как по

    Слайд 94
    21 Здесь текст прижат к левому

    краю по горизонтали и книзу - по вертикали
    22









    21 Здесь текст прижат к левому краю по горизонтали и книзу - по вертикали 22 23

    Слайд 96 21 Здесь текст прижат к левому краю по

    горизонтали и книзу - по вертикали
    Эти же параметры можно

    применять и к отдельным ячейкам, т.е. к любому тегу

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

    Слайд 98РАБОТА С ТАБЛИЦАМИ СЛОЖНОЙ СТРУКТУРЫ
    Самым распространенным применением таблиц сложных структур

    является разметка web-страницы.

    РАБОТА С ТАБЛИЦАМИ СЛОЖНОЙ СТРУКТУРЫСамым распространенным применением таблиц сложных структур является разметка web-страницы.

    Слайд 99Если наложить на этот рисунок таблицу, то мы увидим, что

    она состоит из трех строк и двух столбцов фиксированной ширины.


    Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух

    Слайд 100Нам нужно, чтобы в первой и третьей строках было по

    одному столбцу. Это достигается при помощи параметра colspan тега .

    Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.



    Название таблицы
    123
    111213
    212223
    313233
    12 13
    23
    31 Текст во всех ячейках этой строки прижат по горизонтали к правому краю, по вертикали - кверху 32 33
    , действие будет распространяться только на саму ячейку.
    В предыдущем коде добавьте в любой тег     		параметр bgcolor="red".
    21 Здесь текст прижат к левому краю по горизонтали и книзу - по вертикали Эти же

    Слайд 97к ячейкам можно применять еще два параметра:
    width - задает ширину

    столбца (в пикселах или в процентном соотношении, где за 100%

    принимается ширина таблицы),
    height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

    1 2 3

    Нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра

    Слайд 101

    height="100">шапка сайта


    меню контент

    bgcolor="darkred">
    		низ сайта

    шапка сайта меню контент низ сайта

    Слайд 102Первая строка
    шапка сайта

    Первая строка шапка сайта

    Слайд 103Вторая строка

    меню
    меню
    меню

    height="30">меню
    меню
    меню


    новости


    контент

    Вторая строка меню меню меню меню меню меню новости контент

    Слайд 104Две строки и два столбца. Но первый столбец первой строки

    объединяет две строки.
    Для такого случая есть параметр rowspan тега .

    Этот параметр указывает браузеру объединить несколько строк в одну. Значением этого параметра является число, указывающее сколько строк будет объединено.
    Две строки и два столбца. Но первый столбец первой строки объединяет две строки.Для такого случая есть параметр

    Слайд 105

    width="30%">меню
    шапка


    контент


    меню шапка контент

    Слайд 107Первая строка
    шапка меню
    Вторая

    строка
    контент
    Третья строка

    height="30">низ сайта
    Первая строка шапка меню Вторая строка контент Третья строка низ сайта

    Слайд 108ВЛОЖЕННЫЕ ТАБЛИЦЫ


    width="70%" height="60">шапка меню


    контент

    bgcolor="darkred">
    низ сайта


    ВЛОЖЕННЫЕ ТАБЛИЦЫ шапка меню контент низ сайта

    Слайд 109Поместим в готовую таблицу еще одну таблицу про цветы

    Поместим в готовую таблицу еще одну таблицу про цветы

    Слайд 110Код этой таблицы простой - три строки и два столбца

    width="470" border="1" align="center" cellspacing="0" cellpadding="10">

    height="70">
    Здесь текст о ромашках



    Здесь текст о тюльпанах



    Здесь текст о герберах


    Код этой таблицы простой - три строки и два столбца Здесь текст о ромашках Здесь текст

    Слайд 111Теперь возьмем код этой таблицы и поместим его вместо слова

    "контент" в код нашей разметки.
    Теперь уберем все границы у вложенной

    таблицы. Для этого в теге этой таблицы зададим параметр
    Теперь возьмем код этой таблицы и поместим его вместо слова

    Слайд 112
    Создаем таблицу 6 на
    В третью и пятую строку вставим фоновое

    изображение (объединяем их)
    В четвертую вставляем фоновое изображение

    Создаем таблицу 6 наВ третью и пятую строку вставим фоновое изображение (объединяем их)В четвертую вставляем фоновое изображение

    Слайд 117МЕНЯЕМ ФОН HTML-СТРАНИЦЫ И ЦВЕТ ТЕКСТА
    добавим в тег атрибуты

    bgcolor="blue" text="yellow".
    bgcolor - атрибут, отвечающий за цвет фона страницы,


    blue - его значение (красный - red, зеленый - green).
    Атрибут text задает цвет текста документа, его значение yellow - желтый.



    Моя первая страница


    Всем привет!


    МЕНЯЕМ ФОН HTML-СТРАНИЦЫ И ЦВЕТ ТЕКСТАдобавим в тег атрибуты bgcolor=

    Слайд 118В HTML существуют два способа задания цвета:
    по имени (156)


    указанием шестнадцатеричного кода цвета.
    Итак, поменяем цвет в атрибуте bgcolor на

    нежно-голубой, а цвет текста - на менее яркий.
    Обновите html-страницу (Ctrl+F5) и посмотрите на результат.

    В HTML существуют два способа задания цвета: по имени (156) указанием шестнадцатеричного кода цвета. Итак, поменяем цвет

    Слайд 119

    Моя первая страница



    Это заголовок первого уровня

    Это

    простой текст.
    Этот выделен полужирным начертанием.


    А этот курсивом.


    Это заголовок второго уровня


    Это текст Arial, размер шрифта - 5


    Это заголовок третьего уровня


    Этот текст Verdana, размер шрифта - 2


    Моя первая страница Это заголовок первого уровня Это простой текст. Этот выделен

    Похожие презентации

    Методы выявления и учета болезней яблони и вишни Методы выявления и учета болезней яблони и вишни 225
    Урок биологии в 7 классе Урок биологии в 7 классе 193
    А. С. Пушкин Евгений Онегин А. С. Пушкин 1 История создания А. С. Пушкин Евгений Онегин А. С. Пушкин 1 История создания 252
    Культура русских земель XII - XIII вв. 1. Особенности культуры 12-13 веков 2 Культура русских земель XII - XIII вв. 1. Особенности культуры 12-13 веков 2 228
    Подростковый кризис Подростковый кризис 207
    Н а р к о т и к и: миф и реальность Н а р к о т и к и: миф и реальность 172
    Применение SOS- модели на уроке иностранного языка Выполнила: студентка 4 Применение SOS- модели на уроке иностранного языка Выполнила: студентка 4 189
    Завоевания монголов в XIII веке Завоевания монголов в XIII веке 367
    Использование нетрадиционных техник в изобразительной деятельности детей Использование нетрадиционных техник в изобразительной деятельности детей 200
    Лекция 4 Лекция 4 234
    Как писать сочинение? Как писать сочинение? 176
    p.47 (2)past continuous test p.47 (2)past continuous test 163
    Международные отношения в Европе, Азии и Америке в 1953-1962 гг Международные отношения в Европе, Азии и Америке в 1953-1962 гг 216
    Птицеводство Птицеводство 336
    Договор найма жилого помещения Договор найма жилого помещения 325
    Литература 1940-х годов Литература 1940-х годов 418
    Экспертные методы применяются для прогнозирования Экспертные методы применяются для прогнозирования 453
    Безопасные летние каникулы Безопасные летние каникулы 170
    TEMA09.PPT TEMA09.PPT 289
    Факты о морях Факты о морях 195

    Обратная связь

    Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

    Email: Нажмите что бы посмотреть 

    Что такое TheSlide.ru?

    Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

    Для правообладателей

    Яндекс.Метрика