Пошаговое создание сайта в HTML - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Пошаговое создание сайта в HTML, слайд №1

Пошаговое создание сайта в HTML, слайд №2

Пошаговое создание сайта в HTML, слайд №3

Пошаговое создание сайта в HTML, слайд №4

Пошаговое создание сайта в HTML, слайд №5

Пошаговое создание сайта в HTML, слайд №6

Пошаговое создание сайта в HTML, слайд №7

Пошаговое создание сайта в HTML, слайд №8

Пошаговое создание сайта в HTML, слайд №9

Пошаговое создание сайта в HTML, слайд №10

Пошаговое создание сайта в HTML, слайд №11

Пошаговое создание сайта в HTML, слайд №12

Пошаговое создание сайта в HTML, слайд №13

Пошаговое создание сайта в HTML, слайд №14

Пошаговое создание сайта в HTML, слайд №15

Пошаговое создание сайта в HTML, слайд №16

Пошаговое создание сайта в HTML, слайд №17

Пошаговое создание сайта в HTML, слайд №18

Пошаговое создание сайта в HTML, слайд №19

Пошаговое создание сайта в HTML, слайд №20

Пошаговое создание сайта в HTML, слайд №21

Пошаговое создание сайта в HTML, слайд №22

Пошаговое создание сайта в HTML, слайд №23

Пошаговое создание сайта в HTML, слайд №24

Пошаговое создание сайта в HTML, слайд №25

Пошаговое создание сайта в HTML, слайд №26

Пошаговое создание сайта в HTML, слайд №27

Пошаговое создание сайта в HTML, слайд №28

Пошаговое создание сайта в HTML, слайд №29

Пошаговое создание сайта в HTML, слайд №30

Пошаговое создание сайта в HTML, слайд №31

Пошаговое создание сайта в HTML, слайд №32

Пошаговое создание сайта в HTML, слайд №33

Пошаговое создание сайта в HTML, слайд №34

Пошаговое создание сайта в HTML, слайд №35

Пошаговое создание сайта в HTML, слайд №36

Пошаговое создание сайта в HTML, слайд №37

Пошаговое создание сайта в HTML, слайд №38

Пошаговое создание сайта в HTML, слайд №39

Пошаговое создание сайта в HTML, слайд №40

Пошаговое создание сайта в HTML, слайд №41

Пошаговое создание сайта в HTML, слайд №42

Пошаговое создание сайта в HTML, слайд №43

Пошаговое создание сайта в HTML, слайд №44

Пошаговое создание сайта в HTML, слайд №45

Пошаговое создание сайта в HTML, слайд №46

Пошаговое создание сайта в HTML, слайд №47

Пошаговое создание сайта в HTML, слайд №48

Пошаговое создание сайта в HTML, слайд №49

Пошаговое создание сайта в HTML, слайд №50

Пошаговое создание сайта в HTML, слайд №51

Пошаговое создание сайта в HTML, слайд №52

Пошаговое создание сайта в HTML, слайд №53

Пошаговое создание сайта в HTML, слайд №54

Пошаговое создание сайта в HTML, слайд №55

Пошаговое создание сайта в HTML, слайд №56

Пошаговое создание сайта в HTML, слайд №57

Пошаговое создание сайта в HTML, слайд №58

Пошаговое создание сайта в HTML, слайд №59

Пошаговое создание сайта в HTML, слайд №60

Пошаговое создание сайта в HTML, слайд №61

Пошаговое создание сайта в HTML, слайд №62

Пошаговое создание сайта в HTML, слайд №63

Пошаговое создание сайта в HTML, слайд №64

Пошаговое создание сайта в HTML, слайд №65

Пошаговое создание сайта в HTML, слайд №66

Пошаговое создание сайта в HTML, слайд №67

Пошаговое создание сайта в HTML, слайд №68

Пошаговое создание сайта в HTML, слайд №69

Пошаговое создание сайта в HTML, слайд №70

Пошаговое создание сайта в HTML, слайд №71

Пошаговое создание сайта в HTML, слайд №72

Пошаговое создание сайта в HTML, слайд №73

Пошаговое создание сайта в HTML, слайд №74

Пошаговое создание сайта в HTML, слайд №75

Пошаговое создание сайта в HTML, слайд №76

Пошаговое создание сайта в HTML, слайд №77

Пошаговое создание сайта в HTML, слайд №78

Пошаговое создание сайта в HTML, слайд №79

Пошаговое создание сайта в HTML, слайд №80

Пошаговое создание сайта в HTML, слайд №81

Пошаговое создание сайта в HTML, слайд №82

Пошаговое создание сайта в HTML, слайд №83

Пошаговое создание сайта в HTML, слайд №84

Пошаговое создание сайта в HTML, слайд №85

Пошаговое создание сайта в HTML, слайд №86

Пошаговое создание сайта в HTML, слайд №87

Пошаговое создание сайта в HTML, слайд №88

Пошаговое создание сайта в HTML, слайд №89

Пошаговое создание сайта в HTML, слайд №90

Пошаговое создание сайта в HTML, слайд №91

Пошаговое создание сайта в HTML, слайд №92

Пошаговое создание сайта в HTML, слайд №93

Пошаговое создание сайта в HTML, слайд №94

Пошаговое создание сайта в HTML, слайд №95

Пошаговое создание сайта в HTML, слайд №96

Пошаговое создание сайта в HTML, слайд №97

Пошаговое создание сайта в HTML, слайд №98

Пошаговое создание сайта в HTML, слайд №99

Пошаговое создание сайта в HTML, слайд №100

Пошаговое создание сайта в HTML, слайд №101

Пошаговое создание сайта в HTML, слайд №102

Пошаговое создание сайта в HTML, слайд №103

Пошаговое создание сайта в HTML, слайд №104

Пошаговое создание сайта в HTML, слайд №105

Пошаговое создание сайта в HTML, слайд №106

Пошаговое создание сайта в HTML, слайд №107

Пошаговое создание сайта в HTML, слайд №108

Пошаговое создание сайта в HTML, слайд №109

Пошаговое создание сайта в HTML, слайд №110

Пошаговое создание сайта в HTML, слайд №111

Пошаговое создание сайта в HTML, слайд №112

Пошаговое создание сайта в HTML, слайд №113

Пошаговое создание сайта в HTML, слайд №114

Пошаговое создание сайта в HTML, слайд №115

Пошаговое создание сайта в HTML, слайд №116

Пошаговое создание сайта в HTML, слайд №117

Пошаговое создание сайта в HTML, слайд №118

Пошаговое создание сайта в HTML, слайд №119

Пошаговое создание сайта в HTML, слайд №120

Пошаговое создание сайта в HTML, слайд №121

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Пошаговое создание сайта в HTML. Доклад-сообщение содержит 121 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

Описание слайда:

ОСНОВЫ HTML

Слайд 2

Описание слайда:

Слайд 3

Описание слайда:

ТЕГИ HTML

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

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

Слайд 11

Описание слайда:

Слайд 12

Описание слайда:

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

Слайд 13

Описание слайда:

вместо … вместо …

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

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

Слайд 16

Описание слайда:

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

Структура html Тело документа

Слайд 19

Описание слайда:

ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : LINK Одиночный тег необходим для подключения внешних файлов. Например, если вы будете использовать каскадную таблицу стилей, то ее удобнее хранить в отдельном файле и подключать этот файл ко всем страницам сайта. У тега несколько атрибутов: href - указывает URL-адрес подключаемого файла. rel - указывает на тип отношения данного документа к внешнему (например: rel="stylesheet" указывает, что внешний файл определяет стиль текущего документа). type - указывает тип и параметры присоединенной таблицы стилей.

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

ЭЛЕМЕНТЫ ВНУТРИ ТЕГОВ : META Информация в этом теге не имеет никакого отношения к HTML, однако ее использование очень удобно для решения ряда задач: - указание кодировки страницы, например, для русского текста в кодировке Windows указание ключевых слов страницы (используется при оптимизации страниц) указание краткого описания страницы:

Слайд 22

Описание слайда:

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

Слайд 23

Описание слайда:

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

Слайд 24

Описание слайда:

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

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

Слайд 27

Описание слайда:

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

Слайд 28

Описание слайда:

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

Слайд 29

Описание слайда:

Слайд 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. Это заголовок шестого уровня Это просто текст стандартного размера

Слайд 33

Описание слайда:

Слайд 34

Описание слайда:

ТЕГИ РАЗДЕЛЕНИЯ НА АБЗАЦЫ И ПЕРЕНОСА СТРОКИ Тег - тег принудительного перевода строки. Текст, после этого тега начинается с новой строки. Теги разделяют текст на абзацы. Перед началом каждого абзаца следует поместить тег , закрывающий тег не обязателен. В отличии от тега абзацы отделяются друг от друга пустой строкой. У тега есть параметр align, который задает способ выравнивания текста внутри параграфа. Возможные значения этого параметра: left - слева, right - справа, center - по центру, jastify - по ширине.

Слайд 35

Описание слайда:

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

Слайд 36

Описание слайда:

Слайд 37

Описание слайда:

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

Слайд 38

Описание слайда:

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

Слайд 39

Описание слайда:

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

Слайд 40

Описание слайда:

Слайд 41

Описание слайда:

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

Слайд 42

Описание слайда:

Слайд 43

Описание слайда:

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

Слайд 44

Описание слайда:

Слайд 45

Описание слайда:

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

Слайд 46

Описание слайда:

Слайд 47

Описание слайда:

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

Слайд 48

Описание слайда:

Слайд 49

Описание слайда:

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

Слайд 50

Описание слайда:

СОВМЕСТНОЕ ИСПОЛЬЗОВАНИЕ ТЕГОВ Выделим слово "текст" красным цветом: Текст Теперь добавим теги курсива (открывающий - слева, закрывающий - справа): Текст А теперь - теги полужирного начертания: Текст

Слайд 51

Описание слайда:

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

Слайд 52

Описание слайда:

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

Слайд 53

Описание слайда:

Теги применяются для указания адреса. Отображается курсивом с новой строки. Теги применяются для указания адреса. Отображается курсивом с новой строки. Пишите по адресу: Ленинский пр., д.2 Теги делают текст перечеркнутым. Этот текст в тегах del Теги выделяют короткие цитаты. Линкольн любил говорить: Не достигает цели тот, кто от нее отказывается.

Слайд 54

Описание слайда:

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

Слайд 55

Описание слайда:

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

Слайд 56

Описание слайда:

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

Слайд 57

Описание слайда:

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

Слайд 58

Описание слайда:

ГИПЕРССЫЛКИ

Слайд 59

Описание слайда:

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

Слайд 60

Описание слайда:

При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. В нашем примере абсолютный адрес страницы index.html следующий: При абсолютной адресации используется полный путь, т.е. с указанием протокола, сервера, каталога и страницы. В нашем примере абсолютный адрес страницы index.html следующий: При относительной адресации путь указывается от того каталога, в котором хранится исходный файл. Например, если мы хотим разместить ссылку со страницы index.html (исходный файл) на страницу articles.html, то, учитывая, что обе страницы лежат в одном каталоге (т.е имеют один уровень), она будет выглядеть следующим образом:

Слайд 61

Описание слайда:

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

Слайд 62

Описание слайда:

Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Иногда, когда документ слишком длинный, полезно сделать ссылки на его разделы. Для таких переходов следует создать пустую ссылку с параметром name там, куда следует перейти. И ссылку с указанием этого имени (после знака #) в качестве адреса параметра href там, откуда следует перейти первый абзац, в котором стоит пустая ссылка – якорь второй абзац третий абзац Наверх

Слайд 63

Описание слайда:

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

Слайд 64

Описание слайда:

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

Слайд 65

Описание слайда:

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

Слайд 66

Описание слайда:

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

Слайд 67

Описание слайда:

ИЗОБРАЖЕНИЯ

Слайд 68

Описание слайда:

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

Слайд 69

Описание слайда:

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

Слайд 70

Описание слайда:

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

Слайд 71

Описание слайда:

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

Слайд 72

Описание слайда:

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

Слайд 73

Описание слайда:

Для выравнивания используйте "left", "right"> Для выравнивания используйте "left", "right"> Картинка слева, а текст обтекает ее справа и этот текст может занимать несколько строчек. Картинка справа, а текст обтекает ее слева и этот текст может занимать несколько строчек.

Слайд 74

Описание слайда:

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

Слайд 75

Описание слайда:

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

Слайд 76

Описание слайда:

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

Слайд 77

Описание слайда:

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

Слайд 78

Описание слайда:

Слайд 79

Описание слайда:

Остальное содержимое документа теперь не прилипает к изображению. Остальное содержимое документа теперь не прилипает к изображению.

Слайд 80

Описание слайда:

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

Слайд 81

Описание слайда:

ИЗОБРАЖЕНИЕ В КАЧЕСТВЕ ССЫЛКИ

Слайд 82

Описание слайда:

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

Слайд 83

Описание слайда:

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

Слайд 84

Описание слайда:

ТАБЛИЦЫ

Слайд 85

Описание слайда:

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

Слайд 86

Описание слайда:

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

Слайд 87

Описание слайда:

ПАРАМЕТРЫ HTML ТАБЛИЦ: ОТСТУП, ШИРИНА, ЦВЕТ ФОНА, РАМКА width - задает ширину таблицы (в пикселах или % от ширины экрана), bgcolor - задает цвет фона ячеек таблицы, background - заливает фон таблицы рисунком, border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы, cellpadding - задает отступ в пикселях между границей клетки и ее содержимым.

Слайд 88

Описание слайда:

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

Слайд 89

Описание слайда:

Слайд 90

Описание слайда:

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

Слайд 91

Описание слайда:

Слайд 92

Описание слайда:

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

Слайд 93

Описание слайда:

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

Слайд 94

Описание слайда:

21 Здесь текст прижат к левому краю по горизонтали и книзу - по вертикали 22 23 31 Текст во всех ячейках этой строки прижат по горизонтали к правому краю, по вертикали - кверху 32 33

Слайд 95

Описание слайда:

Слайд 96

Описание слайда:

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

Слайд 97

Описание слайда:

Слайд 98

Описание слайда:

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

Слайд 99

Описание слайда:

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

Слайд 100

Описание слайда:

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

Слайд 101

Описание слайда:

Слайд 102

Описание слайда:

Слайд 103

Описание слайда:

Слайд 104

Описание слайда:

Слайд 105

Описание слайда:

Слайд 106

Описание слайда:

Слайд 107

Описание слайда:

Слайд 108

Описание слайда:

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

Слайд 109

Описание слайда:

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

Слайд 110

Описание слайда:

Слайд 111

Описание слайда:

Слайд 112

Описание слайда:

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

Слайд 113

Описание слайда:

Слайд 114

Описание слайда:

Слайд 115

Описание слайда:

Слайд 116

Описание слайда:

Слайд 117

Описание слайда:

МЕНЯЕМ ФОН HTML-СТРАНИЦЫ И ЦВЕТ ТЕКСТА добавим в тег атрибуты bgcolor="blue" text="yellow". bgcolor - атрибут, отвечающий за цвет фона страницы, blue - его значение (красный - red, зеленый - green). Атрибут text задает цвет текста документа, его значение yellow - желтый. Моя первая страница Всем привет!

Слайд 118

Описание слайда:

Слайд 119

Описание слайда:

Моя первая страница Это заголовок первого уровня Это простой текст. Этот выделен полужирным начертанием. А этот курсивом. Это заголовок второго уровня Это текст Arial, размер шрифта - 5 Это заголовок третьего уровня Этот текст Verdana, размер шрифта - 2