Основы языка разметки гипертекста

Оглавление
Урок 1
Урок 2
Урок 3
Урок 4
Урок 5
Урок 6
Урок 7
Урок 8

Урок 1
Введение в HTML, история, работа с текстом

Понятия: HTML, web-сайта
HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все web-страницы создаются при помощи языка HTML (специальных управляющих символов – тегов).
Web-сайт состоит из Web-страниц (обычно это файлы с расширением .html или htm), объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.
ГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm

Пример структуры сайта
Схема 1
2 урок

Достоинства HTML
Возможность просмотра на любых ПК, под управлением различных операционных систем (Windows, Linux, Unix, BSD, MacOS, OS/2...)
Малый информационный объем

История
1986 г - Standard Generalized Markup Language (SGML), международная организация по стандартизации (ISO)
1991 г – создан HTML (сотрудники Европейского института физики частиц), для Mosaic (22 тега)
1993 г – HTML версия 1.3 (43 тега)
1995 г - HTML версия 2.0
1996 г - HTML версия 3.0 (таблицы стилей CSS )
1997 г - HTML версия 4.0 (фреймы, сложные таблицы…)
2005 г – начата разработка версии 5.0 (Консорциумом Всемирной паутины (W3C) )

Виды тегов
Парные (c закрытием, контейнер)
Текс
Не парные (одинарные)

Структура HTML

Мета - теги
Помещаются между тегами ...
Служат для детального описания страницы http-equiv="Content-Type" content="text/html; charset=windows-1251">
...

Спецсимволы
Иногда возникает необходимость в использовании
символа, которого нет на клавиатуре или не
воспринемается если мы его напечатаем в документе.

Форматирование текста

Форматирование текста. Пример.
HTML - код
Заголовок
Пробный текст
Вид на экране
Пробный текст

Форматирование текста
Размерами и начертаниями шрифта можно управлять также с помощью тега FONT и его атрибутов:
...
Например:
Текст
Цвет текста можно задать следующим образом:
Текст
или
Текст

Таблица цветов

Выравнивание текста

Сочетания тегов
Теги можно комбинировать друг с другом получая нужный результат. Например, напечатать на экране жирным курсивом текст. Очередность сочений не имеет значения.
Код HTML:
Сочетание тегов
Текст

Сочетания тегов
Код HTML:
Сочетание тегов
Текст

Урок 2
Выполните задание №1, №2 в классе.

Урок 3
Списки и изображения

Списки
Нумерованные
Маркированные
Возможно создавать вложенные
списки

Списки
Располагается внутри контейнера
...
(нумерованный список) или
...
(маркированный список)
А каждый элемент определяется тегами
…

Маркированный список
HTML код:
Прикладное ПО:
СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы
Вид на экране
Прикладное ПО :
СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы

Нумерованный список
HTML код:
Прикладное ПО:
Системное ПО
Прикладное ПО
Системы программирование
Вид на экране:
Прикладное ПО:
Системное ПО
Прикладное ПО
Системы программирование

Нумерованный список
По умолчанию элементы списка нумеруются по порядку 1, 2, 3…
При помощи атрибута TYPE можно изменить стиль нумерации.

Нумерованный список

Нумерованный список*
При помощи атрибутов START VALUE можно изменить порядок нумерации списка.
START - служит для задания начального номера списка, отличного от 1.
VALUE - дает возможность назначить произвольный номер любому элементу списка.
Пример:

Вложенный список
ПО:
Системное ПО
Прикладное ПО
СУБД
Текстовые редакторы
Графические редакторы
Графические редакторы
Системы программирование
HTML код: Вид на экране

Вставка изображений
Для встраивания изображения в документ используется тег
, имеющий обязательный параметр src, который
определяет адрес файла с картинкой и alt, определяющий
альтернативный текст.

Вставка изображений. Форматы.

Вставка изображений. Gif *
256 цветов
поддерживает загрузку файла с чередованием строк
возможен прозрачный фон
осуществляет анимацию изображения
Используют для рисунков и gif-анимации

Вставка изображений. JPEG *
16 млн. цветов
фотографическое качество изображений
позволяет задать еще более высокую степень сжатия за счет потери качества
Используют для фотографий

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

Вставка изображений. Примеры
Изображение risunok.gif находится в той же папке
что и html файл
Изображение risunok.gif находится в папке
katalog по отношению к html файлу
Находится на компьютере в папке
c:\site\risunok.gif
Находится на сайте http://test.ru/

Самостоятельная работа
Выполните задания №3, №4

Урок 4
Гиперссылки, графическое оформление

Гиперссылка
Гиперссылка — это связь между веб-страницами или файлами.
Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки.
Часто гиперссылка указывает на другую веб-страницу, но может также указывать на рисунок, мультимедийный файл, адрес электронной почты или программу.
См. схема 1.

Гиперссылки. Формат.

Гиперссылки. Примеры.
Ссылки с абсолютным адресом
Персональная страничка
Сылка на файл
Ссылки с относительным адресом
Персональная страничка
Сылка на файл
Ссылка на страничку
Ссылки на e-mail
E-mail для связи

Гипперссылка в виде изображения
Вокруг изображения-ссылки автоматически добавляется
рамка толщиной один пиксел и цветом, совпадающим с
цветом текстовых ссылок.
Чтобы убрать рамку, следует у тега
установить параметр
border="0"

Гиперссылка в пределах страницы*
Чтобы построить ссылку на область внутри текущей
страницы, надо дать этой области название при
помощи атрибута NAME тэга
. Имя должно
содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на
области других страниц внутри сайта.
HTML - код
Наверх страницы
В то место, куда надо сделать переход надо вставить:

Графическое оформление
Цвет фона веб-страницы задается с использованием
параметра bgcolor тега .
HTML - код :
...
...
Цвет можно указывать в шестнадцатеричном значении
или по его имени.

Графическое оформление
В качестве фона можно использовать любое подходящее для
этого изображение. Фон не должен отвлекать внимание от
текста, при этом должен хорошо сочетаться с цветовой гаммой
веб-страницы и быть маленьким по размеру.
Цвет фона веб-страницы задается с использованием атрибута
(параметра) background тега .
HTML – код:
...
...
Internet Explorer позволяет сделать фон неподвижным с помощью
параметра bgproperties="fixed" тега .

Урок 5
Выполните задание №5, 6

Урок 6
Таблицы

Таблицы
Для создания таблицы служит тэг
. Как известно таблица состоит из строк,
а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг
, для создания ячеек -
,
.
Слайд 47
Таблицы
HTML-код:
1
2
3
4
5
6
Вид на экране:
Слайд 48
Таблицы
Для создания заголовка таблицы служит тэг
.
По умолчанию браузер располагает заголовок таблицы
по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.
HTML-код:
Заголовок таблицы
1
2
Вид на экране:
Слайд 49
Таблицы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.
Атрибут ALIGN предназначен для
выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали.
HTML-код:
1111
2222
22222
Нижняя ячейка
Нижняя ячейка
Вид на экране:
Слайд 50
Таблицы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах
(WIDTH=250), так и в относительных (WIDTH="80%").
HTML-код:
Ширина 200 пикселей
Ширина 60%
Вид на экране:
Слайд 51
Таблицы
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или
строки в одну большую ячейку.
Атрибут COLSPAN тэгов
,
позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.
Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.
Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.
Слайд 52
Таблицы
HTML-код:
1111
22222
33333
44444
55555
66666
77777
88888
99999
Вид на экране:
Слайд 53
Урок 7
Выполните задание № 7
Имя файла: Основы-языка-разметки-гипертекста.pptx
Количество просмотров: 477
Количество скачиваний: 1
Скачать
- Предыдущая
До начала проекта:
Следующая -
www.ackom.net
Похожие презентации
Библиотека МОУ СОШ № 3
Российское право в контексте истории страны. Задания для выполнения
Виробниче освітлення
Информация об участии членских организаций Пермского крайсовпрофа в летней оздоровительной кампании 2010 года
Назад в средневековье 6 класс
ПРЕДЛОЖЕНИЕ О РАЗВИТИИ
Презентация на тему Органы чувств:Глаз
Управление вовлечением заинтересованных сторон проекта на примере: карьер по добыче песчано-гравийной смеси
Что такое наркотики?
ООО "ЭЛНИС"
Аудитория Mail.ru (31 проект) Январь 2014
Восточное партнерство
Презентация на тему СОДЕРЖАНИЕ И СИСТЕМАТИЗАЦИЯ МАТЕРИАЛА В МЕТОДИЧЕСКОМ КАБИНЕТЕ
Финансовые цели домашних хозяйств
Разработка и создание дизайна рекламной продукции. Отчет о прохождении учебной практики
Banks Products Engine: Пластиковые карты
РЕКЛАМНАЯ ИГРА «ВЫИГРЫШНЫЕ КРАСКИ» С 15 июня по 15 сентября 2012 года ИООО «Кондор» проводит рекламную игру для покупателей продукции
Топ - 10 самых захватывающих аттракционов мира
Искусство XVII века или Искусство первых Романовых. Живопись XVII века
Система для проведения игр типа «Брэйн-Ринг»
Физическая и коллоидная химия
Типы реакций
Конституционное право Правительство РФ
Кот-д Ивуар
Презентация на тему Русская история и русская литература XIX века
j6u5
Токарные инструменты
Брендинг бара Bells
(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)
Обратная связь
Для правообладателей
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U){return {data:{meta:{result:{meta:{h1:m,main_text:b,main_title:n,main_description:o,main_keywords:p,main_image:b},app:{logo_image:q,logo_image_width:i,logo_image_height:r,logo_text:s,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:x,email:y,footer_before:z,footer:A,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:B,item_images:C,item_images_tag:D,item_words_h3:c,item_words_tag:E,item_words_1:h,routing:F,item_slide_skipping:G,item_download_timeout:H,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:I}},social:J}},item:{result:{id:455305,name:"Основы языка разметки гипертекста",category:K,count:54,jpg:"jpg\u002F455305",hits:477,download:l,h1:L,meta:{h1:L,title:"Основы языка разметки гипертекста презентация",description:"Основы языка разметки гипертекста презентация, доклад, проект, Разное ",keywords:"Основы языка разметки гипертекста, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Разное",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Основы языка разметки гипертекста, из раздела: Разное.  Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EОглавление\u003Cbr\u003E\u003Cp\u003EУрок 1 \u003Cbr\u003EУрок 2\u003Cbr\u003EУрок 3\u003Cbr\u003EУрок 4\u003Cbr\u003EУрок 5\u003Cbr\u003EУрок 6\u003Cbr\u003EУрок 7\u003Cbr\u003EУрок 8 \u003Cbr\u003E \u003Cp\u003EУрок 1\u003Cbr\u003E\u003Cp\u003EВведение в HTML, история, работа с текстом\u003Cbr\u003E",file:"Основы-языка-разметки-гипертекста.pptx",texts:["\u003Cp\u003EОсновы языка разметки гипертекста\u003Cbr\u003E\u003Cp\u003EАвтор: Русинов А.С.\u003Cbr\u003E","\u003Cp\u003EОглавление\u003Cbr\u003E\u003Cp\u003EУрок 1 \u003Cbr\u003EУрок 2\u003Cbr\u003EУрок 3\u003Cbr\u003EУрок 4\u003Cbr\u003EУрок 5\u003Cbr\u003EУрок 6\u003Cbr\u003EУрок 7\u003Cbr\u003EУрок 8 \u003Cbr\u003E","\u003Cp\u003EУрок 1\u003Cbr\u003E\u003Cp\u003EВведение в HTML, история, работа с текстом\u003Cbr\u003E","\u003Cp\u003EПонятия: HTML, web-сайта\u003Cbr\u003E\u003Cp\u003EHTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все web-страницы создаются при помощи языка HTML (специальных управляющих символов – тегов).\u003Cbr\u003EWeb-сайт состоит из Web-страниц (обычно это файлы с расширением .html или htm), объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.\u003Cbr\u003EГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm\u003Cbr\u003E","\u003Cp\u003EПример структуры сайта\u003Cbr\u003E\u003Cp\u003EСхема 1\u003Cbr\u003E\u003Cp\u003E2 урок\u003Cbr\u003E","\u003Cp\u003EДостоинства HTML\u003Cbr\u003E\u003Cp\u003EВозможность просмотра на любых ПК, под управлением различных операционных систем (Windows, Linux, Unix, BSD, MacOS, OS\u002F2...)\u003Cbr\u003EМалый информационный объем\u003Cbr\u003E","\u003Cp\u003EИстория\u003Cbr\u003E\u003Cp\u003E1986 г - Standard Generalized Markup Language (SGML), международная организация по стандартизации (ISO) \u003Cbr\u003E1991 г – создан HTML (сотрудники Европейского института физики частиц), для Mosaic (22 тега)\u003Cbr\u003E1993 г – HTML версия 1.3 (43 тега)\u003Cbr\u003E1995 г - HTML версия 2.0 \u003Cbr\u003E1996 г - HTML версия 3.0 (таблицы стилей CSS )\u003Cbr\u003E1997 г - HTML версия 4.0 (фреймы, сложные таблицы…)\u003Cbr\u003E2005 г – начата разработка версии 5.0 (Консорциумом Всемирной паутины (W3C) ) \u003Cbr\u003E","\u003Cp\u003EВиды тегов\u003Cbr\u003E\u003Cp\u003EПарные (c закрытием, контейнер)\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003EТекс\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003EНе парные (одинарные)\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСтруктура HTML\u003Cbr\u003E","\u003Cp\u003EМета - теги\u003Cbr\u003E\u003Cp\u003EПомещаются между тегами \u003Chead\u003E ... \u003C\u002Fhead\u003E\u003Cbr\u003EСлужат для детального описания страницы\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=windows-1251\"\u003E\u003Cbr\u003E\u003Cmeta name=\"Description\" content=\"Краткое описание содержания страницы\"\u003E\u003Cbr\u003E\u003Cmeta name=\"Keywords\" content=\"ключевые слова документа, разделенные запятыми или пробелами\"\u003E\u003Cbr\u003E...\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E","\u003Cp\u003EСпецсимволы\u003Cbr\u003E\u003Cp\u003EИногда возникает необходимость в использовании\u003Cbr\u003Eсимвола, которого нет на клавиатуре или не\u003Cbr\u003Eвоспринемается если мы его напечатаем в документе.\u003Cbr\u003E","\u003Cp\u003EФорматирование текста\u003Cbr\u003E","\u003Cp\u003EФорматирование текста. Пример.\u003Cbr\u003E\u003Cp\u003EHTML - код\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Ctitle\u003EЗаголовок\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Cb\u003EПробный текст\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EВид на экране\u003Cbr\u003EПробный текст\u003Cbr\u003E","\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003EРазмерами и начертаниями шрифта можно управлять также с помощью тега FONT и его атрибутов:\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003CFONT FACE=\"Шрифт\" SIZE=\"Размер\"\u003E ... \u003C\u002FFONT\u003E\u003Cbr\u003EНапример: \u003CFONT FACE=\"Arial\" SIZE=\"5\"\u003EТекст\u003C\u002FFONT\u003E\r\n\u003Cbr\u003EЦвет текста можно задать следующим образом:\u003Cbr\u003E\u003CFONT COLOR=“red”\u003EТекст\u003C\u002FFONT\u003E\u003Cbr\u003Eили\u003Cbr\u003E\u003CFONT COLOR=“#FF0000”\u003EТекст\u003C\u002FFONT\u003E\u003Cbr\u003E","\u003Cp\u003EТаблица цветов\u003Cbr\u003E","\u003Cp\u003EВыравнивание текста\u003Cbr\u003E","\u003Cp\u003EСочетания тегов\u003Cbr\u003E\u003Cp\u003EТеги можно комбинировать друг с другом получая нужный результат. Например, напечатать на экране жирным курсивом текст. Очередность сочений не имеет значения.\u003Cbr\u003EКод HTML:\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Ctitle\u003EСочетание тегов\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003CB\u003E\u003CI\u003E Текст \u003C\u002FB\u003E\u003C\u002FI\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E \u003Cbr\u003E","\u003Cp\u003EСочетания тегов\u003Cbr\u003EКод HTML:\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E\u003Ctitle\u003EСочетание тегов\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003CP ALIGN=\"CENTER\"\u003E\u003Cbr\u003E\u003CH1\u003E Текст \u003C\u002FH1\u003E\u003Cbr\u003E\u003C\u002FP\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E \u003Cbr\u003E","\u003Cp\u003EУрок 2\u003Cbr\u003E\u003Cp\u003EВыполните задание №1, №2 в классе.\u003Cbr\u003E","\u003Cp\u003EУрок 3\u003Cbr\u003E\u003Cp\u003EСписки и изображения\u003Cbr\u003E","\u003Cp\u003EСписки\u003Cbr\u003E\u003Cp\u003EНумерованные\u003Cbr\u003EМаркированные\u003Cbr\u003EВозможно создавать вложенные\u003Cbr\u003Eсписки\u003Cbr\u003E","\u003Cp\u003EСписки\u003Cbr\u003E\u003Cp\u003EРасполагается внутри контейнера \u003COL\u003E... \u003C\u002FOL\u003E (нумерованный список) или \u003CUL\u003E... \u003C\u002FUL\u003E (маркированный список)\u003Cbr\u003EА каждый элемент определяется тегами \u003CLI\u003E…\u003C\u002FLI\u003E\u003Cbr\u003E","\u003Cp\u003EМаркированный список\u003Cbr\u003E\u003Cp\u003EHTML код:\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Cp\u003EПрикладное ПО:\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cul\u003E\u003Cbr\u003E\u003Cli\u003EСУБД\u003C\u002Fli\u003E\u003Cbr\u003E\u003Cli\u003EТекстовые редакторы\u003C\u002Fli\u003E\u003Cbr\u003E\u003Cli\u003EГрафические редакторы\u003C\u002Fli\u003E\u003Cbr\u003E\u003Cli\u003EГрафические редакторы\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EВид на экране\u003Cbr\u003EПрикладное ПО :\u003Cbr\u003EСУБД\u003Cbr\u003EТекстовые редакторы\u003Cbr\u003EГрафические редакторы\u003Cbr\u003EГрафические редакторы\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EНумерованный список\u003Cbr\u003E\u003Cp\u003EHTML код:\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Cp\u003EПрикладное ПО:\u003C\u002Fp\u003E\u003Cbr\u003E\u003Col\u003E\u003Cbr\u003E\u003Cli\u003EСистемное ПО\u003C\u002Fli\u003E\u003Cbr\u003E\u003Cli\u003EПрикладное ПО\u003C\u002Fli\u003E\u003Cbr\u003E\u003Cli\u003EСистемы программирование\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Fol\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EВид на экране:\u003Cbr\u003EПрикладное ПО:\u003Cbr\u003EСистемное ПО \u003Cbr\u003EПрикладное ПО \u003Cbr\u003EСистемы программирование \u003Cbr\u003E","\u003Cp\u003EНумерованный список\u003Cbr\u003E\u003Cp\u003EПо умолчанию элементы списка нумеруются по порядку 1, 2, 3… \u003Cbr\u003EПри помощи атрибута TYPE можно изменить стиль нумерации.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EНумерованный список\u003Cbr\u003E","\u003Cp\u003EНумерованный список*\u003Cbr\u003E\u003Cp\u003EПри помощи атрибутов START VALUE можно изменить порядок нумерации списка.\u003Cbr\u003ESTART - служит для задания начального номера списка, отличного от 1.\u003Cbr\u003EVALUE - дает возможность назначить произвольный номер любому элементу списка.\u003Cbr\u003EПример:\u003Cbr\u003E","\u003Cp\u003EВложенный список\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003Cp\u003EПО:\u003C\u002Fp\u003E\u003Cbr\u003E\u003Col\u003E\u003Cbr\u003E\u003Cli\u003EСистемное ПО\u003C\u002Fli\u003E\u003Cbr\u003E\u003Cli\u003EПрикладное ПО\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003EСУБД\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EТекстовые редакторы\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EГрафические редакторы\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EГрафические редакторы\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Ful\u003E\u003Cbr\u003E\u003Cli\u003EСистемы программирование\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Fol\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EHTML код: Вид на экране\u003Cbr\u003E","\u003Cp\u003EВставка изображений\u003Cbr\u003E\u003Cp\u003EДля встраивания изображения в документ используется тег\u003Cbr\u003E\u003CIMG\u003E, имеющий обязательный параметр src, который\u003Cbr\u003Eопределяет адрес файла с картинкой и alt, определяющий\u003Cbr\u003Eальтернативный текст.\u003Cbr\u003E","\u003Cp\u003EВставка изображений. Форматы.\u003Cbr\u003E","\u003Cp\u003EВставка изображений. Gif *\u003Cbr\u003E\u003Cp\u003E256 цветов\u003Cbr\u003Eподдерживает загрузку файла с чередованием строк \u003Cbr\u003Eвозможен прозрачный фон \u003Cbr\u003Eосуществляет анимацию изображения \u003Cbr\u003EИспользуют для рисунков и gif-анимации\u003Cbr\u003E","\u003Cp\u003EВставка изображений. JPEG *\u003Cbr\u003E\u003Cp\u003E16 млн. цветов\u003Cbr\u003Eфотографическое качество изображений \u003Cbr\u003Eпозволяет задать еще более высокую степень сжатия за счет потери качества \u003Cbr\u003EИспользуют для фотографий\u003Cbr\u003E","\u003Cp\u003EВставка изображений. PNG *\u003Cbr\u003E\u003Cp\u003E281 трлн. цветов\u003Cbr\u003Eподдерживает загрузку файла с чередованием строк \u003Cbr\u003Eвозможен прозрачный фон (с различной степенью прозрачности) \u003Cbr\u003Eпомехоустойчивый, осуществляет проверку на ошибки при передаче файлов \u003Cbr\u003EИспользуют для фотографий\u003Cbr\u003E","\u003Cp\u003EВставка изображений. Примеры\u003Cbr\u003E\u003Cp\u003E\u003CIMG SRC=\"risunok.gif\"\u003E\u003Cbr\u003EИзображение risunok.gif находится в той же папке\u003Cbr\u003Eчто и html файл\u003Cbr\u003E\u003CIMG SRC=\"katalog\u002Frisunok.gif\"\u003E\u003Cbr\u003EИзображение risunok.gif находится в папке\u003Cbr\u003Ekatalog по отношению к html файлу\u003Cbr\u003E\u003CIMG SRC=\"c:\\site\\risunok.gif\"\u003E\u003Cbr\u003EНаходится на компьютере в папке\u003Cbr\u003Ec:\\site\\risunok.gif\u003Cbr\u003E\u003CIMG SRC=\"http:\u002F\u002Ftest.ru\u002Frisunok.gif\"\u003E\u003Cbr\u003EНаходится на сайте http:\u002F\u002Ftest.ru\u002F\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСамостоятельная работа\u003Cbr\u003E\u003Cp\u003EВыполните задания №3, №4\u003Cbr\u003E","\u003Cp\u003EУрок 4\u003Cbr\u003E\u003Cp\u003EГиперссылки, графическое оформление\u003Cbr\u003E","\u003Cp\u003EГиперссылка\u003Cbr\u003E\u003Cp\u003EГиперссылка — это связь между веб-страницами или файлами. \u003Cbr\u003EГиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки.\u003Cbr\u003EЧасто гиперссылка указывает на другую веб-страницу, но может также указывать на рисунок, мультимедийный файл, адрес электронной почты или программу.\u003Cbr\u003EСм. схема 1.\u003Cbr\u003E","\u003Cp\u003EГиперссылки. Формат.\u003Cbr\u003E","\u003Cp\u003EГиперссылки. Примеры.\u003Cbr\u003E\u003Cp\u003EСсылки с абсолютным адресом\u003Cbr\u003E\u003CA HREF=\"http:\u002F\u002Frusinov.name\"\u003EПерсональная страничка\u003C\u002Fa\u003E\u003Cbr\u003E\u003CA HREF=\"c:\\site\\index.html\"\u003EСылка на файл\u003C\u002Fa\u003E\u003Cbr\u003EСсылки с относительным адресом\u003Cbr\u003E\u003CA HREF=\"file.html\"\u003EПерсональная страничка\u003C\u002Fa\u003E\u003Cbr\u003E\u003CA HREF=\"big\u002Fpic.gif\"\u003EСылка на файл\u003C\u002Fa\u003E\u003Cbr\u003E\u003CA HREF=“\u002Fsmall\u002Fgol.html\"\u003EСсылка на страничку\u003C\u002Fa\u003E\u003Cbr\u003EСсылки на e-mail\u003Cbr\u003E\u003CA HREF=\"mailto:[e-mail]\"\u003EE-mail для связи\u003C\u002FA\u003E \u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EГипперссылка в виде изображения\u003Cbr\u003E\u003Cp\u003E\u003CA HREF=\"http:\u002F\u002Frusinov.name\"\u003E\u003Cimg src=\"sample.gif\"\u003E \u003C\u002Fa\u003E\u003Cbr\u003EВокруг изображения-ссылки автоматически добавляется \u003Cbr\u003Eрамка толщиной один пиксел и цветом, совпадающим с\u003Cbr\u003Eцветом текстовых ссылок. \u003Cbr\u003EЧтобы убрать рамку, следует у тега \u003CIMG\u003E установить параметр\u003Cbr\u003Eborder=\"0\" \u003Cbr\u003E","\u003Cp\u003EГиперссылка в пределах страницы*\u003Cbr\u003E\u003Cp\u003EЧтобы построить ссылку на область внутри текущей\u003Cbr\u003Eстраницы, надо дать этой области название при\u003Cbr\u003Eпомощи атрибута NAME тэга \u003CA\u003E. Имя должно\u003Cbr\u003Eсодержать только буквы и цифры.\u003Cbr\u003EТаким образом можно делать гиперссылки, указывающие на\u003Cbr\u003Eобласти других страниц внутри сайта.\u003Cbr\u003EHTML - код\u003Cbr\u003E\u003Ca href=\"#Начало страницы\"\u003EНаверх страницы\u003C\u002Fa\u003E\u003Cbr\u003EВ то место, куда надо сделать переход надо вставить:\u003Cbr\u003E\u003Ca name=\"Начало страницы\"\u003E\u003C\u002Fa\u003E \u003Cbr\u003E","\u003Cp\u003EГрафическое оформление\u003Cbr\u003E\u003Cp\u003EЦвет фона веб-страницы задается с использованием\u003Cbr\u003Eпараметра bgcolor тега \u003CBODY\u003E.\u003Cbr\u003EHTML - код :\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E...\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody bgcolor=\"blue\"\u003E\u003Cbr\u003E\u003Cp\u003E...\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003EЦвет можно указывать в шестнадцатеричном значении\u003Cbr\u003Eили по его имени. \u003Cbr\u003E","\u003Cp\u003EГрафическое оформление\u003Cbr\u003E\u003Cp\u003EВ качестве фона можно использовать любое подходящее для\u003Cbr\u003Eэтого изображение. Фон не должен отвлекать внимание от\u003Cbr\u003Eтекста, при этом должен хорошо сочетаться с цветовой гаммой\u003Cbr\u003Eвеб-страницы и быть маленьким по размеру.\u003Cbr\u003E Цвет фона веб-страницы задается с использованием атрибута\u003Cbr\u003E(параметра) background тега \u003CBODY\u003E.\u003Cbr\u003EHTML – код:\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E...\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody background=\"image\u002Fsamplebg.gif\"\u003E\u003Cbr\u003E\u003Cp\u003E...\u003C\u002Fp\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003EInternet Explorer позволяет сделать фон неподвижным с помощью\u003Cbr\u003Eпараметра bgproperties=\"fixed\" тега \u003CBODY\u003E.\u003Cbr\u003E","\u003Cp\u003EУрок 5\u003Cbr\u003E\u003Cp\u003EВыполните задание №5, 6\u003Cbr\u003E","\u003Cp\u003EУрок 6\u003Cbr\u003E\u003Cp\u003EТаблицы\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EДля создания таблицы служит тэг \u003CTABLE\u003E. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг \u003CTR\u003E, для создания ячеек - \u003CTH\u003E, \u003CTD\u003E.\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EHTML-код:\u003Cbr\u003E\u003Ctable border=\"1\"\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E1\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E2\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E3\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E4\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E5\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E6\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E \u003Cbr\u003E\u003Cp\u003EВид на экране:\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EДля создания заголовка таблицы служит тэг \u003CCAPTION\u003E.\u003Cbr\u003EПо умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей.\u003Cbr\u003E\u003Cp\u003EHTML-код:\u003Cbr\u003E\u003Ctable border=\"1\"\u003E\u003Cbr\u003E\u003Ccaption\u003E Заголовок таблицы \u003C\u002Fcaption\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E1\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E2\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E \u003Cbr\u003E\u003Cp\u003EВид на экране:\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EДля выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.\u003Cbr\u003EАтрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.\u003Cbr\u003EАтрибут VALIGN выравнивает данные по вертикали. \u003Cbr\u003E\u003Cp\u003EHTML-код:\u003Cbr\u003E\u003Ctable border=\"1\" cellpadding=\"5\"\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd align=\"right\"\u003E1111\u003Cbr\u003E2222\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd valign=\"top\" align=\"center\"\u003E22222\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003EНижняя ячейка\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003EНижняя ячейка\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E \u003Cbr\u003E\u003Cp\u003EВид на экране:\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EШирина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH=\"80%\"). \u003Cbr\u003E\u003Cp\u003EHTML-код:\u003Cbr\u003E\u003Ctable border=\"1\" width=\"200\"\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Cp\u003EШирина 200 пикселей\u003C\u002Fp\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Ctable border=\"1\" width=\"60%\"\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E\u003Cp\u003EШирина 60%\u003C\u002Fp\u003E\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E \u003Cbr\u003E\u003Cp\u003EВид на экране:\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EПри помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.\u003Cbr\u003EАтрибут COLSPAN тэгов \u003CTH\u003E, \u003CTD\u003E позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.\u003Cbr\u003EАтрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.\u003Cbr\u003EЦифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003EHTML-код:\u003Cbr\u003E\u003Ctable border=\"1\"\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd rowspan=\"3\"\u003E1111\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd colspan=\"2\"\u003E22222\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd colspan=\"2\"\u003E33333\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E44444\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd colspan=\"2\" rowspan=\"2\"\u003E55555\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E66666\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003E77777\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003E88888\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd colspan=\"5\"\u003E99999\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E \u003Cbr\u003E\u003Cp\u003EВид на экране:\u003Cbr\u003E","\u003Cp\u003EУрок 7\u003Cbr\u003E\u003Cp\u003EВыполните задание № 7\u003Cbr\u003E","\u003Cp\u003EУрок 8 - зачет\u003Cbr\u003E\u003Cp\u003EВыполните тест\u003Cbr\u003E"],href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovy-yazyka-razmetki-giperteksta",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1613711050,related:[{id:440039,name:"Библиотека МОУ СОШ № 3",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbiblioteka-mou-sosh-3",jpg:"jpg\u002F440039"},{id:1026893,name:"Российское право в контексте истории страны. Задания для выполнения",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frossiyskoe-pravo-v-kontekste-istorii-strany-1",jpg:"jpg\u002F1026893"},{id:965502,name:"Виробниче освітлення",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvirobniche-osvtlennya-2",jpg:"jpg\u002F965502"},{id:419926,name:"Информация об участии членских организаций Пермского крайсовпрофа в летней оздоровительной кампании 2010 года",href:"\u002Fprezentacii-na-razlichnye-temy\u002Finformaciya-ob-uchastii-chlenskix-organizacij-permskogo-krajsovprofa-v-letnej-ozdorovitelnoj-kampanii-2010-goda",jpg:"jpg\u002F419926"},{id:314250,name:"Назад в средневековье 6 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fnazad-v-srednevekove-6-klass",jpg:"jpg\u002F314250"},{id:411409,name:"ПРЕДЛОЖЕНИЕ О РАЗВИТИИ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpredlozhenie-o-razvitii",jpg:"jpg\u002F411409"},{id:295531,name:"Презентация на тему Органы чувств:Глаз ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-organy-chuvstvglaz",jpg:"jpg\u002F295531"},{id:1008593,name:"Управление вовлечением заинтересованных сторон проекта на примере: карьер по добыче песчано-гравийной смеси",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fupravlenie-vovlecheniem-zainteresovannyh-storon-proekta-na",jpg:"jpg\u002F1008593"},{id:326304,name:"Что такое наркотики?",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fchto-takoe-narkotiki",jpg:"jpg\u002F326304"},{id:410300,name:"ООО \"ЭЛНИС\"",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fooo-elnis",jpg:"jpg\u002F410300"},{id:386530,name:"Аудитория Mail.ru (31 проект) Январь 2014",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fauditoriya-mail-ru-31-proekt-yanvary-2014",jpg:"jpg\u002F386530"},{id:427683,name:"Восточное партнерство",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvostochnoe-partnerstvo",jpg:"jpg\u002F427683"},{id:304349,name:"Презентация на тему СОДЕРЖАНИЕ И СИСТЕМАТИЗАЦИЯ МАТЕРИАЛА В МЕТОДИЧЕСКОМ КАБИНЕТЕ ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-soderzhanie-i-sistematizaciya-materiala-v-metodicheskom-kabinete",jpg:"jpg\u002F304349"},{id:861944,name:"Финансовые цели домашних хозяйств",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ffinansovye-tseli-domashnih-hozyaystv",jpg:"jpg\u002F861944"},{id:1016882,name:"Разработка и создание дизайна рекламной продукции. Отчет о прохождении учебной практики",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frazrabotka-i-sozdanie-dizayna-reklamnoy-produktsii-1",jpg:"jpg\u002F1016882"},{id:422181,name:"Banks Products Engine: Пластиковые карты",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbanks-products-engine-plastikovye-karty",jpg:"jpg\u002F422181"},{id:463426,name:"РЕКЛАМНАЯ ИГРА «ВЫИГРЫШНЫЕ КРАСКИ» С 15 июня по 15 сентября 2012 года ИООО «Кондор» проводит рекламную игру для покупателей продукции ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Freklamnaya-igra-vyigryshnye-kraski-s-15-iyunya-po-15-sentyabrya-2012-goda-iooo-kondor-provodit-reklamnuyu-igru-dlya-pokupatelej-produkcii",jpg:"jpg\u002F463426"},{id:1116434,name:"Топ - 10 самых захватывающих аттракционов мира",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftop-10-samyh-zahvatyvayushchih-attraktsionov-mira",jpg:"jpg\u002F1116434"},{id:1065799,name:"Искусство XVII века или Искусство первых Романовых. Живопись XVII века",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fiskusstvo-xvii-veka-ili-iskusstvo-pervyh-1",jpg:"jpg\u002F1065799"},{id:437858,name:"Система для проведения игр типа «Брэйн-Ринг»",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsistema-dlya-provedeniya-igr-tipa-brejnring-1",jpg:"jpg\u002F437858"},{id:364763,name:"Физическая и коллоидная химия",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ffizicheskaya-i-kolloidnaya-ximiya",jpg:"jpg\u002F364763"},{id:336234,name:"Типы реакций",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftipy-reakcij-1",jpg:"jpg\u002F336234"},{id:1145706,name:"Конституционное право Правительство РФ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkonstitutsionnoe-pravo-pravitelstvo-rf",jpg:"jpg\u002F1145706"},{id:341531,name:"Кот-д Ивуар",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkotd-ivuar",jpg:"jpg\u002F341531"},{id:298784,name:"Презентация на тему Русская история и русская литература XIX века ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frusskaya-istoriya-i-russkaya-literatura-xix-vekappt",jpg:"jpg\u002F298784"},{id:309183,name:"j6u5",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fj6u5",jpg:"jpg\u002F309183"},{id:944564,name:"Токарные инструменты",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftokarnye-instrumenty",jpg:"jpg\u002F944564"},{id:923050,name:"Брендинг бара Bells",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbrending-bara-bells",jpg:"jpg\u002F923050"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fwwwackomnet",next_name:"www.ackom.net",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fdo-nachala-proekta",prev_name:"До начала проекта:"}}},categories:{result:[{id:l,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:"Информатика",pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:K,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:l,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:M,SITE_HOST:"slaidy.com",SITE_LANG:N,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:M,short_name:b,description:b,lang:N,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:U,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:m,main_text:b,main_title:n,main_description:o,main_keywords:p,main_image:b},app:{logo_image:q,logo_image_width:i,logo_image_height:r,logo_text:s,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:x,email:y,footer_before:z,footer:A,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:B,item_images:C,item_images_tag:D,item_words_h3:c,item_words_tag:E,item_words_1:h,routing:F,item_slide_skipping:G,item_download_timeout:H,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:I}},social:J,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff",1,"Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LfWmAYrAAAAAFyidHOK1ZHtYSECWR5CvAmygt5c","3190226","\u003C!-- Yandex.RTB R-A-1990700-7 --\u003E\r\n\u003Cscript\u003E\r\nwindow.yaContextCb.push(() =\u003E {\r\n Ya.Context.AdvManager.render({\r\n \"blockId\": \"R-A-1990700-7\",\r\n \"type\": \"fullscreen\",\r\n \"platform\": \"touch\"\r\n })\r\n})\r\n\u003C\u002Fscript\u003E","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Разное","Основы языка разметки гипертекста ","Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг

Таблицы
HTML-код:
1
2
3
4
5
6
Вид на экране:

Таблицы
Для создания заголовка таблицы служит тэг

Таблицы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.
Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали.
HTML-код:
1111
2222
22222
Нижняя ячейка
Нижняя ячейка
Вид на экране:

Таблицы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%").
HTML-код:
Ширина 200 пикселей
Ширина 60%
Вид на экране:

Таблицы
При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.
Атрибут COLSPAN тэгов

Таблицы
HTML-код:
1111
22222
33333
44444
55555
66666
77777
88888
99999
Вид на экране:

Урок 7
Выполните задание № 7