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

Оглавление
Урок 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
Количество просмотров: 507
Количество скачиваний: 1
Скачать
- Предыдущая
До начала проекта:
Следующая -
www.ackom.net
Похожие презентации
ДОГОВОР КОНСИГНАЦИИ
Москва (9 класс)
Огонь
Спортивно-оздоровительные состязания школьников
Крыжановская М.Р._ Типы предприятий города Каменска-Уральского
Библейские сказания
Обращение граждан в организации : правила оформления обращения, регламент рассмотрения обращения
Обувная фирма Flamingo
Формирование фонда капитального ремонта в МКД
Глобальное управление
Агляд-конкурс мастацкай самадзейнай творчасці сярод груп першага курса Я - беларус. Я - зерне, код народа
Оятская роспись. Часть 1. 3 класс
Презентация на тему Суффиксы -ЕК и -ИК
Общая характеристика элементов VA-группы. Азот
Именительный падеж имён существительных
Режим дня и гигиена школьника
Генеральное консульство Республики Корея
Индийский океан 7 класс
Международный конкурс Прибыль слов
Лучшие курорты Франции. Туризм во Франции давно уже набрал свои обороты. Заметим, что курорты Франции всегда были популярны. Эта за
БИЗНЕС ОБРАЗОВАНИЕ ДЛЯ ЗАНЯТЫХ ЛЮДЕЙ
“Співпраця громадських організацій з органами місцевого самоврядування у сфері вело-інфраструктури”
заключительное занятие Жизнь это -
Методы идентификации лесо- и пиломатериалов
IT в СПб (Соискатели и Работодатели)
Спорт, как способ обретения внутреннего самоконтроля
Картины из соломки
Сочи – мой любимый город
(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}},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"}]},item:{result:{id:455305,name:"Основы языка разметки гипертекста",category:K,count:54,jpg:"jpg\u002F455305",hits:507,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:480708,name:"ДОГОВОР КОНСИГНАЦИИ",href:"\u002Fprezentacii-na-razlichnye-temy\u002F10219-dogovor-konsignacii",jpg:"jpg\u002F480708"},{id:341715,name:"Москва (9 класс)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmoskva-9-klass",jpg:"jpg\u002F341715"},{id:324445,name:"Огонь",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fogon",jpg:"jpg\u002F324445"},{id:936759,name:"Спортивно-оздоровительные состязания школьников",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsportivno-ozdorovitelnye-sostyazaniya-shkolnikov",jpg:"jpg\u002F936759"},{id:1011086,name:"Крыжановская М.Р._ Типы предприятий города Каменска-Уральского",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkryzhanovskaya-mr-tipy-predpriyatiy-goroda-kamenska",jpg:"jpg\u002F1011086"},{id:345635,name:"Библейские сказания",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbiblejskie-skazaniya",jpg:"jpg\u002F345635"},{id:939612,name:"Обращение граждан в организации : правила оформления обращения, регламент рассмотрения обращения",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fobrashchenie-grazhdan-v-organizatsii-pravila-oformleniya-1",jpg:"jpg\u002F939612"},{id:1096875,name:"Обувная фирма Flamingo",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fobuvnaya-firma-flamingo",jpg:"jpg\u002F1096875"},{id:1120242,name:"Формирование фонда капитального ремонта в МКД",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fformirovanie-fonda-kapitalnogo-remonta-v-mkd",jpg:"jpg\u002F1120242"},{id:912356,name:"Глобальное управление",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fglobalnoe-upravlenie",jpg:"jpg\u002F912356"},{id:873893,name:"Агляд-конкурс мастацкай самадзейнай творчасці сярод груп першага курса Я - беларус. Я - зерне, код народа",href:"\u002Fprezentacii-na-razlichnye-temy\u002Faglyad-konkurs-mastatskay-samadzeynay-tvorchasts-syarod",jpg:"jpg\u002F873893"},{id:1122257,name:"Оятская роспись. Часть 1. 3 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Foyatskaya-rospis-chast-1-3-klass",jpg:"jpg\u002F1122257"},{id:278640,name:"Презентация на тему Суффиксы -ЕК и -ИК",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-suffiksy-ek-i-ik",jpg:"jpg\u002F278640"},{id:336140,name:"Общая характеристика элементов VA-группы. Азот",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fobshhaya-xarakteristika-elementov-vagruppy-azot",jpg:"jpg\u002F336140"},{id:359820,name:"Именительный падеж имён существительных",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fimenitelnyj-padezh-imyon-sushhestvitelnyx",jpg:"jpg\u002F359820"},{id:981047,name:"Режим дня и гигиена школьника",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frezhim-dnya-i-gigiena-shkolnika",jpg:"jpg\u002F981047"},{id:1110136,name:"Генеральное консульство Республики Корея",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fgeneralnoe-konsulstvo-respubliki-koreya",jpg:"jpg\u002F1110136"},{id:309280,name:"Индийский океан 7 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Findijskij-okean-7-klass",jpg:"jpg\u002F309280"},{id:928853,name:"Международный конкурс Прибыль слов",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmezhdunarodnyy-konkurs-pribyl-slov-1",jpg:"jpg\u002F928853"},{id:420006,name:"Лучшие курорты Франции. Туризм во Франции давно уже набрал свои обороты. Заметим, что курорты Франции всегда были популярны. Эта за",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-2005",jpg:"jpg\u002F420006"},{id:439415,name:"БИЗНЕС ОБРАЗОВАНИЕ ДЛЯ ЗАНЯТЫХ ЛЮДЕЙ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbiznes-obrazovanie-dlya-zanyatyx-lyudej",jpg:"jpg\u002F439415"},{id:387536,name:"“Співпраця громадських організацій з органами місцевого самоврядування у сфері вело-інфраструктури”",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-sp-vpracya-gromadsykih-organ-zac-y-z-organami-m-scevogo-samovryaduvannya-u-sfer-velo--nfrastrukturi--1",jpg:"jpg\u002F387536"},{id:980468,name:"заключительное занятие Жизнь это -",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fzaklyuchitelnoe-zanyatie-zhizn-eto-",jpg:"jpg\u002F980468"},{id:899408,name:"Методы идентификации лесо- и пиломатериалов",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmetody-identifikatsii-leso-i-pilomaterialov",jpg:"jpg\u002F899408"},{id:429168,name:"IT в СПб (Соискатели и Работодатели)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fit-v-spb-soiskateli-i-rabotodateli",jpg:"jpg\u002F429168"},{id:962632,name:"Спорт, как способ обретения внутреннего самоконтроля",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsport-kak-sposob-obreteniya-vnutrennego-samokontrolya",jpg:"jpg\u002F962632"},{id:896234,name:"Картины из соломки",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkartiny-iz-solomki",jpg:"jpg\u002F896234"},{id:442409,name:"Сочи – мой любимый \t\t\t\t\t\t\tгород",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsochimoylyubimyygorod",jpg:"jpg\u002F442409"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fwwwackomnet",next_name:"www.ackom.net",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fdo-nachala-proekta",prev_name:"До начала проекта:"}}}},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