Front-end Course. Lesson 1

Текстовый редактор или IDE ?
Sublime Text
Atom
WebStorm
Brackets
Visual Studio Code

Структура HTML-документа

Структура HTML-документа
-> указывает браузеру какой стандарт используется -> указывает кодировку документа
Удобрения для сада и огорода
Удобрения для сада
Или
<br>(function hello() {<br> document.getElementById('welcome').innerHTML = ‘Welcome to the page!’; <br>})()<br>
Все права защищены

Теги и атрибуты в HTML
Блочные (display: block) :
● Пример
● Выстраиваются в столбец
● Имеют размеры
В HTML большинство элементов можно разделить на две группы: блочные (block) и строчные (inline).
Строчные (display: inline):
● пример
● выстраиваются в строку
● интерпретируются как буквы
Занимают всю ширину веб-страницы, и содержимое, идущее после блочных тегов, всегда будет начинаться с новой строки.
Строчные элементы не занимают всю ширину окна, содержимое, идущее после этих тегов, находится на той же строке.

Заголовки в HTML
Заголовки в тексте
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня

Абзацы Текста
Абзацы в HTML создаются при помощи тега
Текст
.
Тег
определяет параграф текста.
Является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой пустым пространством.
Тег
Текст
Делает текст жирным.
Тег
Текст
Делаем текст наклонным.
Тег
Текст
Делает текст перечеркнутым.

Изображения
Тег
предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег
в контейнер
. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег
.

HTML Ссылки
Ссылки нужны для того, чтобы связать между собой веб-страницы в сети интернет.
Ссылки бывают внутренние и внешние. Внешние – ведут на другие сайты, внутренние – на страницы текущего сайта.
текст ссылки
Якорь – закладка на веб-странице, к которой можно перейти по ссылке. Должен иметь уникальное имя, которое задается с помощью атрибута id.
Заголовок
Ссылка на него:
Перейти к заголовку

Списки
Любой список представляет собой контейнер
, который устанавливает маркированный список, или
, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега
.
Маркированный список
Маркированный список
Yoda
Obi Van
Darth Vader
Window

Списки
Нумерованные списки
Маркированный список
Yoda
Obi Van
Darth Vader
Window

HTML Таблицы
Для добавления таблицы на веб-страницу используется тег
.
Этот элемент служит
контейнером для элементов, определяющих содержимое таблицы.
Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов
и
.
Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега
использовать тег
.
Текст в ячейке, оформленной с помощью тега
, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги
и
нет.
Слайд 13
Таблицы HTML
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Слайд 14
Формы в HTML
Тег FORM
action="handler.php">
Как по вашему мнению расшифровывается аббревиатура "ОС"?
Офицерский состав
Операционная система
Большой полосатый мух
Слайд 15
Вопросы
Слайд 16
Домашнее Задание
Задание #1
Сверстать форму
Слайд 17
Домашнее Задание
Задание #2
Сверстать таблицу
Слайд 18
Домашнее Задание
Задание #3
Сверстать таблицу
Слайд 19
Домашнее Задание
Доп. Задание #1
Сверстать меню сайта
Используя теги
,
,
. И любой блочный элемент
для зашоловка меню.
Имя файла: Front-end-Course.-Lesson-1.pptx
Количество просмотров: 42
Количество скачиваний: 0
Скачать
- Предыдущая
Родословная Деда Мороза - подготовительная группа
Следующая -
Инвестиции и инновации. (Тема 8.4)
Похожие презентации
Построение геометрических примитивов. Привязки
Windows Ultra
VPN - Начало работы в Диасоф - 5 первых шагов (fin)
Устройства ввода и вывода
Компьютерное моделирование
Конфигурация 1С. Почта Донбасса
Мастер-класс. Создание поздравительной анимационной открытки
Путешествуй. Блог
Множества. Изучение алгоритмизации и основ программирования на языке Python в курсе Информатика и ИКТ
История развития вычислительной техники
Практические задания в Abode Photoshop
Одномерные массивы. Алгоритмы поиска элемента массива
Уменьшение файлов в размере
Спам и защита от него
Работа в Photoshop. Из фото в текст. Задание 3
Этапы развития информационных ресурсов
Эволюция интеллектуальных систем управления
Системы счисления
5-1-1-informacija-vokrug-nas
Информация (1)
Программирование на языке Си#. Форма
Презентация на тему о вреде компьютера
Бесплатная программа компьютерной анимации MMD;PMD/PMX
Отчёт о посещении курсов. Делопроизводство и информационные технологии
Компьютерная графика и анимация. Представление графических данных
Реферативные базы данных: выбор исследователя на основе Web of Science и Scopus
ПЛК и безопасность
Особенности работы беспроводных информационных технологий
(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:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,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:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H}},item:{result:{id:846457,name:"Front-end Course. Lesson 1",category:I,count:J,jpg:"jpg\u002F846457",hits:42,download:a,h1:K,meta:{h1:K,title:"Front-end Course. Lesson 1 презентация",description:"Front-end Course. Lesson 1 презентация, доклад, проект, Информатика ",keywords:"Front-end Course. Lesson 1, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Информатика",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Front-end Course. Lesson 1, из раздела: Информатика.&nbsp; Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EТекстовый редактор или IDE ?\u003Cbr\u003E\u003Cp\u003ESublime Text\u003Cbr\u003E\u003Cp\u003EAtom\u003Cbr\u003E\u003Cp\u003EWebStorm\u003Cbr\u003E\u003Cp\u003EBrackets\u003Cbr\u003E\u003Cp\u003EVisual Studio Code\u003Cbr\u003E \u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E",file:"Front-end-Course.-Lesson-1.pptx",texts:["\u003Cp\u003EFront-end course\u003Cbr\u003E\u003Cp\u003ELesson 1\u003Cbr\u003E","\u003Cp\u003EТекстовый редактор или IDE ?\u003Cbr\u003E\u003Cp\u003ESublime Text\u003Cbr\u003E\u003Cp\u003EAtom\u003Cbr\u003E\u003Cp\u003EWebStorm\u003Cbr\u003E\u003Cp\u003EBrackets\u003Cbr\u003E\u003Cp\u003EVisual Studio Code\u003Cbr\u003E","\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E","\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E -\u003E указывает браузеру какой стандарт используется \r\n\u003Chtml\u003E\r\n\u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E -\u003E указывает кодировку документа\u003Cbr\u003E \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003E\u003Cbr\u003E \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1\"\u003E\u003Cbr\u003E \u003Ctitle\u003EУдобрения для сада и огорода\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"css\u002Fstyle.css\"\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\r\n\u003Cbody\u003E\r\n \u003Csection\u003E\u003Cbr\u003E \u003Ch1\u003EУдобрения для сада\u003C\u002Fh1\u003E\u003Cbr\u003E \u003Cdiv id=“welcome”\u003E\u003C\u002Fdiv\u003E\r\n \u003C\u002Fsection\u003E\u003Cbr\u003E\u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fpath\u002Fto\u002Fscript.js\"\u003E\u003C\u002Fscript\u003E\u003Cbr\u003EИли\u003Cbr\u003E\u003Cscript type=\"text\u002Fjavascript\"\u003E\u003Cbr\u003E(function hello() {\u003Cbr\u003E document.getElementById('welcome').innerHTML = ‘Welcome to the page!’; \u003Cbr\u003E})()\u003Cbr\u003E\u003C\u002Fscript\u003E\r\n\u003C\u002Fbody\u003E\u003Cbr\u003E\u003Cfooter\u003E\r\n \u003Cp\u003E Все права защищены\u003C\u002Fp\u003E\r\n\u003C\u002Ffooter\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EТеги и атрибуты в HTML\u003Cbr\u003E\u003Cp\u003EБлочные (display: block) :\r\n● Пример \u003Cdiv\u003E\r\n● Выстраиваются в столбец\r\n● Имеют размеры\u003Cbr\u003E\u003Cp\u003EВ HTML большинство элементов можно разделить на две группы: блочные (block) и строчные (inline).\u003Cbr\u003E\u003Cp\u003EСтрочные (display: inline):\r\n● пример \u003Cspan\u003E\u003Ca\u003E\r\n● выстраиваются в строку\r\n● интерпретируются как буквы\u003Cbr\u003E\u003Cp\u003EЗанимают всю ширину веб-страницы, и содержимое, идущее после блочных тегов, всегда будет начинаться с новой строки.\u003Cbr\u003E\u003Cp\u003EСтрочные элементы не занимают всю ширину окна, содержимое, идущее после этих тегов, находится на той же строке.\u003Cbr\u003E","\u003Cp\u003EЗаголовки в HTML\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EЗаголовки в тексте\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Ch1\u003EЗаголовок первого уровня\u003C\u002Fh1\u003E\u003Cbr\u003E \u003Ch2\u003EЗаголовок второго уровня\u003C\u002Fh2\u003E\u003Cbr\u003E \u003Ch3\u003EЗаголовок третьего уровня\u003C\u002Fh3\u003E\u003Cbr\u003E \u003Ch4\u003EЗаголовок четвертого уровня\u003C\u002Fh4\u003E\u003Cbr\u003E \u003Ch5\u003EЗаголовок пятого уровня\u003C\u002Fh5\u003E\u003Cbr\u003E \u003Ch6\u003EЗаголовок шестого уровня\u003C\u002Fh6\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EАбзацы Текста\u003Cbr\u003E\u003Cp\u003EАбзацы в HTML создаются при помощи тега \u003Cp\u003EТекст\u003C\u002Fp\u003E.\r\n\r\nТег \u003Cp\u003E определяет параграф текста.\r\nЯвляется блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой пустым пространством.\u003Cbr\u003E\u003Cp\u003EТег \u003Cstrong\u003EТекст\u003C\u002Fstrong\u003E \r\nДелает текст жирным.\u003Cbr\u003EТег \u003Cem\u003EТекст\u003C\u002Fem\u003E \r\nДелаем текст наклонным.\u003Cbr\u003EТег \u003Cs\u003EТекст\u003C\u002Fs\u003E\r\nДелает текст перечеркнутым.\u003Cbr\u003E","\u003Cp\u003EИзображения\u003Cbr\u003E\u003Cp\u003EТег \u003Cimg\u003E предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег \u003Cimg\u003E в контейнер \u003Ca\u003E. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=\"0\" в тег \u003Cimg\u003E.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EHTML Ссылки\u003Cbr\u003E\u003Cp\u003EСсылки нужны для того, чтобы связать между собой веб-страницы в сети интернет. \u003Cbr\u003EСсылки бывают внутренние и внешние. Внешние – ведут на другие сайты, внутренние – на страницы текущего сайта.\u003Cbr\u003E\u003Cp\u003E\u003Ca href=“google.com” target=“blank”\u003Eтекст ссылки\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003EЯкорь – закладка на веб-странице, к которой можно перейти по ссылке. Должен иметь уникальное имя, которое задается с помощью атрибута id.\u003Cbr\u003E\u003Ch2 id=“top”\u003EЗаголовок\u003C\u002Fh2\u003E\r\nСсылка на него:\r\n\u003Ca href=“#top”\u003EПерейти к заголовку\u003C\u002Fa\u003E\u003Cbr\u003E","\u003Cp\u003EСписки\u003Cbr\u003E\u003Cp\u003EЛюбой список представляет собой контейнер \u003Cul\u003E, который устанавливает маркированный список, или \u003Col\u003E, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега \u003Cli\u003E.\u003Cbr\u003E\u003Cp\u003EМаркированный список\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EМаркированный список\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Chr\u003E\u003Cbr\u003E \u003Cul\u003E\u003Cbr\u003E \u003Cli\u003EYoda\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EObi Van\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EDarth Vader\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EWindow\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Ful\u003E\u003Cbr\u003E \u003Chr\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EСписки\u003Cbr\u003E\u003Cp\u003EНумерованные списки\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EМаркированный список\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Chr\u003E\u003Cbr\u003E \u003Col\u003E\u003Cbr\u003E \u003Cli\u003EYoda\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EObi Van\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EDarth Vader\u003C\u002Fli\u003E\u003Cbr\u003E \u003Cli\u003EWindow\u003C\u002Fli\u003E\u003Cbr\u003E \u003C\u002Fol\u003E\u003Cbr\u003E \u003Chr\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EHTML Таблицы\r\n\u003Cbr\u003E\u003Cp\u003EДля добавления таблицы на веб-страницу используется тег \u003Ctable\u003E. \u003Cbr\u003EЭтот элемент служит контейнером для элементов, определяющих содержимое таблицы. \u003Cbr\u003EЛюбая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов \u003Ctr\u003E и \u003Ctd\u003E.\u003Cbr\u003E Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега \u003Ctd\u003E использовать тег \u003Cth\u003E.\u003Cbr\u003E Текст в ячейке, оформленной с помощью тега \u003Cth\u003E, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги \u003Ctd\u003E и \u003Cth\u003E нет.\u003Cbr\u003E","\u003Cp\u003EТаблицы HTML\u003Cbr\u003E\u003Cp\u003E\u003Ctable border=\"1\" width=\"100%\" cellpadding=\"5\"\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Cth\u003EЯчейка 1\u003C\u002Fth\u003E\u003Cbr\u003E \u003Cth\u003EЯчейка 2\u003C\u002Fth\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003Ctr\u003E\u003Cbr\u003E \u003Ctd\u003EЯчейка 3\u003C\u002Ftd\u003E\u003Cbr\u003E \u003Ctd\u003EЯчейка 4\u003C\u002Ftd\u003E\u003Cbr\u003E \u003C\u002Ftr\u003E\u003Cbr\u003E \u003C\u002Ftable\u003E\u003Cbr\u003E","\u003Cp\u003EФормы в HTML\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE HTML\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EТег FORM\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cform action=\"handler.php\"\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cb\u003EКак по вашему мнению расшифровывается аббревиатура &quot;ОС&quot;?\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cinput type=\"radio\" name=\"answer\" value=\"a1\"\u003EОфицерский состав\u003CBr\u003E\u003Cbr\u003E \u003Cinput type=\"radio\" name=\"answer\" value=\"a2\"\u003EОперационная система\u003CBr\u003E\u003Cbr\u003E \u003Cinput type=\"radio\" name=\"answer\" value=\"a3\"\u003EБольшой полосатый мух\u003C\u002Fp\u003E\u003Cbr\u003E \u003Cp\u003E\u003Cinput type=\"submit\"\u003E\u003C\u002Fp\u003E\u003Cbr\u003E \u003C\u002Fform\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EВопросы\u003Cbr\u003E","\u003Cp\u003EДомашнее Задание\u003Cbr\u003E\u003Cp\u003EЗадание #1\u003Cbr\u003E\u003Cp\u003EСверстать форму\u003Cbr\u003E","\u003Cp\u003EДомашнее Задание\u003Cbr\u003E\u003Cp\u003EЗадание #2\u003Cbr\u003E\u003Cp\u003EСверстать таблицу\u003Cbr\u003E","\u003Cp\u003EДомашнее Задание\u003Cbr\u003E\u003Cp\u003EЗадание #3\u003Cbr\u003E\u003Cp\u003EСверстать таблицу\u003Cbr\u003E","\u003Cp\u003EДомашнее Задание\u003Cbr\u003E\u003Cp\u003EДоп. Задание #1\u003Cbr\u003E\u003Cp\u003EСверстать меню сайта\u003Cbr\u003EИспользуя теги \u003Cul\u003E,\u003Cli\u003E,\u003Col\u003E. И любой блочный элемент для зашоловка меню.\u003Cbr\u003E","\u003Cp\u003EДомашнее Задание\u003Cbr\u003E\u003Cp\u003EДоп. Задание #2\u003Cbr\u003E\u003Cp\u003EСоздать таблицу, внутри которой будут размещены изображения внутри ссылок и формы с различным элементами.\u003Cbr\u003E"],href:"\u002Fprezentacii-po-informatike\u002Ffront-end-course-lesson-1",href_category:"\u002Fprezentacii-po-informatike",date:1614083756,related:[{id:966928,name:"Построение геометрических примитивов. Привязки",href:"\u002Fprezentacii-po-informatike\u002Fpostroenie-geometricheskih-primitivov-privyazki-1",jpg:"jpg\u002F966928"},{id:1158173,name:"Windows Ultra",href:"\u002Fprezentacii-po-informatike\u002Fwindows-ultra",jpg:"jpg\u002F1158173"},{id:1039182,name:"VPN - Начало работы в Диасоф - 5 первых шагов (fin)",href:"\u002Fprezentacii-po-informatike\u002Fvpn-nachalo-raboty-v-diasof-5",jpg:"jpg\u002F1039182"},{id:974622,name:"Устройства ввода и вывода",href:"\u002Fprezentacii-po-informatike\u002Fustroystva-vvoda-i-vyvoda-19",jpg:"jpg\u002F974622"},{id:964434,name:"Компьютерное моделирование",href:"\u002Fprezentacii-po-informatike\u002Fkompyuternoe-modelirovanie-12",jpg:"jpg\u002F964434"},{id:1032978,name:"Конфигурация 1С. Почта Донбасса",href:"\u002Fprezentacii-po-informatike\u002Fkonfiguratsiya-1s-pochta-donbassa-1",jpg:"jpg\u002F1032978"},{id:992679,name:"Мастер-класс. Создание поздравительной анимационной открытки",href:"\u002Fprezentacii-po-informatike\u002Fmaster-klass-sozdanie-pozdravitelnoy-animatsionnoy-otkrytki",jpg:"jpg\u002F992679"},{id:1083913,name:"Путешествуй. Блог",href:"\u002Fprezentacii-po-informatike\u002Fputeshestvuy-blog",jpg:"jpg\u002F1083913"},{id:986043,name:"Множества. Изучение алгоритмизации и основ программирования на языке Python в курсе Информатика и ИКТ",href:"\u002Fprezentacii-po-informatike\u002Fmnozhestva-izuchenie-algoritmizatsii-i-osnov-programmirovaniya",jpg:"jpg\u002F986043"},{id:835944,name:"История развития вычислительной техники",href:"\u002Fprezentacii-po-informatike\u002Fistoriya-razvitiya-vychislitelnoy-tehniki-51",jpg:"jpg\u002F835944"},{id:1003672,name:"Практические задания в Abode Photoshop",href:"\u002Fprezentacii-po-informatike\u002Fprakticheskie-zadaniya-v-abode-photoshop",jpg:"jpg\u002F1003672"},{id:996796,name:"Одномерные массивы. Алгоритмы поиска элемента массива",href:"\u002Fprezentacii-po-informatike\u002Fodnomernye-massivy-algoritmy-poiska-elementa-massiva-1f-2",jpg:"jpg\u002F996796"},{id:1062997,name:"Уменьшение файлов в размере",href:"\u002Fprezentacii-po-informatike\u002Fumenshenie-faylov-v-razmere",jpg:"jpg\u002F1062997"},{id:1057344,name:"Спам и защита от него",href:"\u002Fprezentacii-po-informatike\u002Fspam-i-zashchita-ot-nego-7",jpg:"jpg\u002F1057344"},{id:1036762,name:"Работа в Photoshop. Из фото в текст. Задание 3",href:"\u002Fprezentacii-po-informatike\u002Frabota-v-photoshop-iz-foto-v-2",jpg:"jpg\u002F1036762"},{id:1033896,name:"Этапы развития информационных ресурсов",href:"\u002Fprezentacii-po-informatike\u002Fetapy-razvitiya-informatsionnyh-resursov",jpg:"jpg\u002F1033896"},{id:1149948,name:"Эволюция интеллектуальных систем управления",href:"\u002Fprezentacii-po-informatike\u002Fevolyutsiya-intellektualnyh-sistem-upravleniya",jpg:"jpg\u002F1149948"},{id:975154,name:"Системы счисления",href:"\u002Fprezentacii-po-informatike\u002Fsistemy-schisleniya-139",jpg:"jpg\u002F975154"},{id:995681,name:"5-1-1-informacija-vokrug-nas",href:"\u002Fprezentacii-po-informatike\u002F5-1-1-informacija-vokrug-nas",jpg:"jpg\u002F995681"},{id:991890,name:"Информация (1)",href:"\u002Fprezentacii-po-informatike\u002Finformatsiya-1",jpg:"jpg\u002F991890"},{id:961783,name:"Программирование на языке Си#. Форма",href:"\u002Fprezentacii-po-informatike\u002Fprogrammirovanie-na-yazyke-si-forma-1",jpg:"jpg\u002F961783"},{id:282297,name:"Презентация на тему о вреде компьютера ",href:"\u002Fprezentacii-po-informatike\u002Fprezentaciya-na-temu-o-vrede-kompyutera-1",jpg:"jpg\u002F282297"},{id:1010034,name:"Бесплатная программа компьютерной анимации MMD;PMD\u002FPMX",href:"\u002Fprezentacii-po-informatike\u002Fbesplatnaya-programma-kompyuternoy-animatsii-mmdpmdpmx",jpg:"jpg\u002F1010034"},{id:908783,name:"Отчёт о посещении курсов. Делопроизводство и информационные технологии",href:"\u002Fprezentacii-po-informatike\u002Fotchyot-o-poseshchenii-kursov-deloproizvodstvo-i",jpg:"jpg\u002F908783"},{id:1114039,name:"Компьютерная графика и анимация. Представление графических данных",href:"\u002Fprezentacii-po-informatike\u002Fkompyuternaya-grafika-i-animatsiya-predstavlenie-graficheskih",jpg:"jpg\u002F1114039"},{id:1138845,name:"Реферативные базы данных: выбор исследователя на основе Web of Science и Scopus",href:"\u002Fprezentacii-po-informatike\u002Freferativnye-bazy-dannyh-vybor-issledovatelya-na",jpg:"jpg\u002F1138845"},{id:1150222,name:"ПЛК и безопасность",href:"\u002Fprezentacii-po-informatike\u002Fplk-i-bezopasnost",jpg:"jpg\u002F1150222"},{id:919168,name:"Особенности работы беспроводных информационных технологий",href:"\u002Fprezentacii-po-informatike\u002Fosobennosti-raboty-besprovodnyh-informatsionnyh-tehnologiy",jpg:"jpg\u002F919168"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Finvestitsii-i-innovatsii-tema-84",next_name:"Инвестиции и инновации. (Тема 8.4)",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Frodoslovnaya-deda-moroza-podgotovitelnaya-gruppa",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:I,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:J,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:"Разное",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:l,main_text:b,main_title:m,main_description:n,main_keywords:o,main_image:b},app:{logo_image:p,logo_image_width:i,logo_image_height:q,logo_text:r,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,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:b,email:w,footer_before:x,footer:y,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:z,item_images:A,item_images_tag:B,item_words_h3:c,item_words_tag:C,item_words_1:h,routing:D,item_slide_skipping:E,item_download_timeout:F,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:G}},social:H,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,"#000000","#ffffff","Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg",32,"Slaidy.com",720,480,"6LdhFOUnAAAAAIaOUjFtosEpzs6Ny643k1QKXXvv","3190226","[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","Информатика",20,"Front-end Course. Lesson 1 ",1,"Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) контейнером для элементов, определяющих содержимое таблицы.
Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов

Таблицы HTML
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4

Формы в HTML
Тег FORM action="handler.php">
Как по вашему мнению расшифровывается аббревиатура "ОС"?
Офицерский состав
Операционная система
Большой полосатый мух

Вопросы

Домашнее Задание
Задание #1
Сверстать форму

Домашнее Задание
Задание #2
Сверстать таблицу

Домашнее Задание
Задание #3
Сверстать таблицу

Домашнее Задание
Доп. Задание #1
Сверстать меню сайта
Используя теги
,
,
. И любой блочный элемент для зашоловка меню.