Структура HTML презентация

HTML
Не является языком программирования.
Весь синтаксис состоит из тегов (<..> и
).
Существует две структуры верстки: табличная и блочная.
Расширение файла с исходным кодом – html. (пример index.html)

СТРУКТУРА HTML

СТАНДАРТЫ HTML
XHTML 1.1
XHTML 1.0 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01
HTML5

ШАБЛОН HTML
Супер сайт!
Очень полезный ресурс
Статья №1
Статья №2

HTML. РАБОТА С ТЕКСТОМ.
..
- абзац.
- переход на новую строчку.
..
- полужирный шрифт.
..
- курсив.
..
- подчеркнутый текст.
..
- надстрочный текст.
..
- подстрочный текст.
..
,
..
,
..
- заголовки.

HTML. СПИСКИ.
Маркированный список
Первый пункт списка
Второй пункт списка
Нумерованный список
Первый пункт списка
Второй пункт списка

HTML. КАРТИНКИ.
- тег для создания ссылки на графическое изображение. У него нет закрывающего тега.
Атрибуты тега
:
src – указывает адрес файла.
align – положение на странице.
width – ширину объекта.
height – высоту объекта.

HTML. ВИДЕО.
- структура позволяющая добавлять видео файл на web страницу.
Атрибуты для
:
autoplay – видео воспроизводится сразу после загрузки страницы.
controls – добавляет панель управления к ролику.
height – задает высоту области воспроизведения.
loop – повторяет видео сразу после его завершения.
poster – указывает адрес картинки, которая отображается превью.
preload – начинает загружать видео вместе со страницей.
src – указывает путь к воспроизводимому файлу.
width – задает ширину области воспроизведения.

HTML. МУЗЫКА.
- структура позволяющая добавлять аудио файл на web страницу.
Атрибуты для
:
autoplay – звук воспроизводится сразу после загрузки страницы.
controls – добавляет панель управления к аудио.
loop – повторяет аудио сразу после его завершения.
preload – начинает загружать аудио вместе со страницей.
src – указывает путь к воспроизводимому файлу.

HTML. ФОРМЫ.
- структура, позволяющая создавать форму взаимодействия с пользователем.
Атрибуты для
:
action – адрес скрипта который получит данные для обработки.
method – метод передачи данных в скрипт.
enctype – способ кодирования данных формы.
Атрибуты для
:
type – тип формы.
name – имя формы.
required – делает поле обязательным для заполнения.
placeholder – пишет образец текста или название поля в поле ввода.

HTML. ТАБЛИЦЫ.
…
…
- структура для создания таблиц.
Атрибуты для :
align – определяет выравнивание таблицы.
background
– задает фоновый рисунок таблице.
bgcolor – цвет фона таблицы.
border – толщина рамки в пикселях.
height – высота таблицы.
width – ширина таблмцы.
Слайд 13
HTML. ССЫЛКИ.
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны
начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.
Относительные ссылки
Файлы в одной папке
Ссылка
Файлы в разных папках
Ссылка
Ссылка
Ссылка
Ссылка относительно корня сайта
Курсы
Абсолютные ссылки
Слайд 14
CSS.
Слайд 15
CSS.
CSS – расшифровывается как каскадная таблица стилей.
Это правила по которым браузер отображает HTML
элементы.
Стили указываются в head страницы.
Слайд 16
CSS.
Слайд 17
CSS. МЕТОД ОБЪЯВЛЕНИЯ №1
Объявляем через атрибут style.
Слайд 18
CSS. МЕТОД ОБЪЯВЛЕНИЯ №2
Сводка таблицы стилей внутри основного документа.
Слайд 19
CSS. МЕТОД ОБЪЯВЛЕНИЯ №3
Ссылка на таблицу стилей.
Слайд 20
CSS.
Позволяет работать с:
Шрифтами
Цветом
Полями
Строками
Высотой
Шириной
Фоновыми изображениями
Позиционированием элементов
И другими вещами…
Слайд 21
CSS. ЦВЕТА.
Возможно указывание цветов по имени (white, black, blue…)
В шестнадцатеричном формате палитры RGB
(#732acb, #3c3).
В десятичном формате палитры RGB ( rgb(0,255,126) ).
В формате RGB с указанием величин в процентах ( rgb(30%, 10%, 90%) ).
Слайд 22
CSS. РАБОТА С ТЕКСТОМ.
text-indent – устанавливает отступы для первой строки абзаца.
text-align – выравнивание
текста.
text-decoration – позволяет добавлять различные декоративные эффекты.
letter-spacing интервал между буквами в пикселях, пунктах, в относительных единицах em – относительная единица длины, равная размеру текущего шрифта.
text-transform – трансформация текста.
Слайд 23
CSS. ПСКВДОКЛАСС.
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTML тэгов.
Пример:
a:link { color: #023fcb; }
Псевдоклассы для ссылок:
:link – используется для ссылок на страницы, которые пользователь еще не посещал.
:visited – используется для ссылок на страницы, которые пользователь посетил.
:hover – используется для ссылок над которыми находится указатель мыши.
:active – используется для активных ссылок.
Слайд 24
CSS. ИДЕНТИФИКАЦИЯ ЭЛЕМЕНТОВ.
class – задает стилевой класс, который позволяет связать определенный тег
со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
id – задает стилевой идентификатор, уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре – должен встречаться один раз.
Слайд 25
CSS. ПРИОРИТЕТНОСТЬ.
Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в
стилях.
Второе место занимает присутствие ID в селекторе(#some-id).
Далее идут все атрибуты (в том числе и атрибут class) и псевдоклассы (pseudo-classes) в селекторе.
Самый низкий приоритет у селекторов с именами элементов.
Если к паре свойство – значение приписать !important, тогда это значение свойства получит максимальный приоритет в каскаде стилей. Это объявление сработает независимо от наличия других правил CSS для этого элемента.
Имя файла: Структура-HTML.pptx
Количество просмотров: 25
Количество скачиваний: 0
Скачать
- Предыдущая
Человек и идеалы гуманизма в эпоху Возрождения
Следующая -
Неолитическая революция и ее последствия
Похожие презентации
Организация разработки стратегии муниципального развития
Двоичная система счисления, 9 класс
Одномерные массивы
Базові засоби розробки і оформлення програм на мові Pascal
Представление числовой информации с помощью систем счисления
APM FEM Система прочностного анализа для КОМПАС-3D
Библиографическое описание документа
Современная журналистика. Блогинг. Занятие 2
Работа со слоями эффектов. (Лекция 2)
Сравнение Bootstrap и Tailwind CSS
Апробация технологий Silverlight/LINQ/WCF для создания web-приложений, ориентированных на интенсивную обработку данных
Торговые символы, этикетки и штрихкод
Online-курс Женское счастье
Презентация к уроку информатики в 10 классе Глобальная компьютерная сеть Интернет
Экспертные системы. Характеристика и состав, примеры применения ЭС
Интерактивная игра по теме Компьютерная графика
Компьютерная графика и области ее применения
Защита межфилиальной связи. Лекция 10
Команда и программа
List of keywords
Обновление мобильного приложения Возрождение-ТВ
6 класс Персональный компьютер как система
Обмен элктронными документами
Занятие №11 “Pygame”
Поиск эффективной стратегии в играх жанров Tower Defence и R oguelike
Задача коммивояжера
Базы данных
Архитектура ЭВМ. Представление об основных составляющих компьютера
Обратная связь
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){return {data:{meta:{result:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E}},item:{result:{id:422441,name:l,category:F,count:G,jpg:"jpg\u002F422441",hits:H,download:b,h1:"Структура HTML презентация",meta:{h1:l,title:l,description:"Структура HTML презентация на тему, доклад, Информатика",keywords:"Структура HTML, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Структура HTML из раздела Информатика. Презентация на заданную тему содержит 26 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EHTML\u003Cbr\u003E\u003Cp\u003EНе является языком программирования.\u003Cbr\u003EВесь синтаксис состоит из тегов (\u003C..\u003E и \u003C\u002F..\u003E).\u003Cbr\u003EСуществует две структуры верстки: табличная и блочная.\u003Cbr\u003EРасширение файла с исходным кодом – html. (пример index.html)\u003Cbr\u003E \u003Cp\u003EСТРУКТУРА HTML\u003Cbr\u003E",file:"Структура-HTML.pptx",texts:[a,"\u003Cp\u003EHTML\u003Cbr\u003E\u003Cp\u003EНе является языком программирования.\u003Cbr\u003EВесь синтаксис состоит из тегов (\u003C..\u003E и \u003C\u002F..\u003E).\u003Cbr\u003EСуществует две структуры верстки: табличная и блочная.\u003Cbr\u003EРасширение файла с исходным кодом – html. (пример index.html)\u003Cbr\u003E","\u003Cp\u003EСТРУКТУРА HTML\u003Cbr\u003E","\u003Cp\u003EСТАНДАРТЫ HTML\u003Cbr\u003E\u003Cp\u003EXHTML 1.1\u003Cbr\u003E\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.1\u002F\u002FEN\"\r\n“http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml11\u002FDTD\u002Fxhtml11.dtd”\u003E\u003Cbr\u003EXHTML 1.0\u003Cbr\u003E\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Strict\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\"\u003E\u003Cbr\u003EHTML 4.01\u003Cbr\u003E\u003C!DOCTYPE HTML PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01\u002F\u002FEN\"\r\n\"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Fstrict.dtd\"\u003E\u003Cbr\u003EHTML5\u003Cbr\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E","\u003Cp\u003EШАБЛОН HTML\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\t\u003Chead\u003E\u003Cbr\u003E\t\t\u003Ctitle\u003EСупер сайт!\u003C\u002Ftitle\u003E\u003Cbr\u003E\t\t\u003Cmeta charset=“utf-8”\u003E\u003Cbr\u003E\t\t\u003Clink rel=“stylesheet” href=“\u002Fcss\u002Fstyle.css”\u003E\u003Cbr\u003E\t\t\u003Cscript type=“text\u002Fjavascript” src=“\u002Fjs\u002Fjavascript.js”\u003E\u003C\u002Fscript\u003E\u003Cbr\u003E\t\u003C\u002Fhead\u003E\u003Cbr\u003E\t\u003Cbody\u003E\u003Cbr\u003E\t\t\u003Ch1\u003EОчень полезный ресурс\u003C\u002Fh1\u003E\u003Cbr\u003E\t\t\u003Cdiv\u003E\u003Cbr\u003E\t\t\t\u003Cp\u003EСтатья №1\u003C\u002Fp\u003E\u003Cbr\u003E\t\t\t\u003Cp\u003EСтатья №2\u003C\u002Fp\u003E\u003Cbr\u003E\t\t\u003C\u002Fdiv\u003E\u003Cbr\u003E\t\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EHTML. РАБОТА С ТЕКСТОМ.\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003E..\u003C\u002Fp\u003E - абзац.\u003Cbr\u003E - переход на новую строчку.\u003Cbr\u003E\u003Cb\u003E..\u003C\u002Fb\u003E - полужирный шрифт.\u003Cbr\u003E\u003Ci\u003E..\u003C\u002Fi\u003E - курсив.\u003Cbr\u003E\u003Cu\u003E..\u003C\u002Fu\u003E - подчеркнутый текст.\u003Cbr\u003E\u003Csup\u003E..\u003C\u002Fsup\u003E - надстрочный текст.\u003Cbr\u003E\u003Csub\u003E..\u003C\u002Fsub\u003E - подстрочный текст.\u003Cbr\u003E\u003Ch1\u003E..\u003C\u002Fh1\u003E, \u003Ch2\u003E..\u003C\u002Fh2\u003E, \u003Ch3\u003E..\u003C\u002Fh3\u003E - заголовки.\u003Cbr\u003E","\u003Cp\u003EHTML. СПИСКИ.\u003Cbr\u003E\u003Cp\u003EМаркированный список\u003Cbr\u003E\t\t\u003Cul\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EПервый пункт списка\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EВторой пункт списка\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\u003C\u002Ful\u003E\u003Cbr\u003EНумерованный список\u003Cbr\u003E\t\t\u003Col\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EПервый пункт списка\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EВторой пункт списка\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\u003C\u002Fol\u003E\u003Cbr\u003E","\u003Cp\u003EHTML. КАРТИНКИ.\u003Cbr\u003E\u003Cp\u003E\u003Cimg\u003E - тег для создания ссылки на графическое изображение. У него нет закрывающего тега.\u003Cbr\u003EАтрибуты тега \u003Cimg\u003E:\u003Cbr\u003Esrc – указывает адрес файла.\u003Cbr\u003Ealign – положение на странице.\u003Cbr\u003Ewidth – ширину объекта.\u003Cbr\u003Eheight – высоту объекта.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EHTML. ВИДЕО.\u003Cbr\u003E\u003Cp\u003E\u003Cvideo\u003E\t\u003Cbr\u003E\t\t\u003Csource src=“”\u003E\u003Cbr\u003E\t\u003C\u002Fvideo\u003E - структура позволяющая добавлять видео файл на web страницу.\u003Cbr\u003EАтрибуты для \u003Cvideo\u003E:\u003Cbr\u003Eautoplay – видео воспроизводится сразу после загрузки страницы.\u003Cbr\u003Econtrols – добавляет панель управления к ролику.\u003Cbr\u003Eheight – задает высоту области воспроизведения.\u003Cbr\u003Eloop – повторяет видео сразу после его завершения.\u003Cbr\u003Eposter – указывает адрес картинки, которая отображается превью.\u003Cbr\u003Epreload – начинает загружать видео вместе со страницей.\u003Cbr\u003Esrc – указывает путь к воспроизводимому файлу.\u003Cbr\u003Ewidth – задает ширину области воспроизведения.\u003Cbr\u003E","\u003Cp\u003EHTML. МУЗЫКА.\u003Cbr\u003E\u003Cp\u003E\u003Caudio\u003E\t\u003Cbr\u003E\t\t\u003Csource src=“”\u003E\u003Cbr\u003E\t\u003C\u002Faudio\u003E - структура позволяющая добавлять аудио файл на web страницу.\u003Cbr\u003EАтрибуты для \u003Caudio\u003E:\u003Cbr\u003Eautoplay – звук воспроизводится сразу после загрузки страницы.\u003Cbr\u003Econtrols – добавляет панель управления к аудио.\u003Cbr\u003Eloop – повторяет аудио сразу после его завершения.\u003Cbr\u003Epreload – начинает загружать аудио вместе со страницей.\u003Cbr\u003Esrc – указывает путь к воспроизводимому файлу.\u003Cbr\u003E","\u003Cp\u003EHTML. ФОРМЫ.\u003Cbr\u003E\u003Cp\u003E\u003Cform action=“”\u003E\t\u003Cbr\u003E\t\t\u003Cinput type=“text”\u003E\u003Cbr\u003E\t\t\u003Cinput type=“submit” value=“Отправить”\u003E\u003Cbr\u003E\t\u003C\u002Fform\u003E - структура, позволяющая создавать форму взаимодействия с пользователем.\u003Cbr\u003EАтрибуты для \u003Cform\u003E:\u003Cbr\u003Eaction – адрес скрипта который получит данные для обработки.\u003Cbr\u003Emethod – метод передачи данных в скрипт.\u003Cbr\u003Eenctype – способ кодирования данных формы.\u003Cbr\u003EАтрибуты для \u003Cinput\u003E:\u003Cbr\u003Etype – тип формы.\u003Cbr\u003Ename – имя формы.\u003Cbr\u003Erequired – делает поле обязательным для заполнения.\u003Cbr\u003Eplaceholder – пишет образец текста или название поля в поле ввода.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EHTML. ТАБЛИЦЫ.\u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E\u003Cbr\u003E\t\t\u003Ctr\u003E\u003Cbr\u003E\t\t\t\u003Ctd\u003E…\u003C\u002Ftd\u003E\u003Cbr\u003E\t\t\t\u003Ctd\u003E…\u003C\u002Ftd\u003E\u003Cbr\u003E\t\t\u003C\u002Ftr\u003E\u003Cbr\u003E\u003C\u002Ftable\u003E - структура для создания таблиц.\u003Cbr\u003EАтрибуты для \u003Ctable\u003E:\u003Cbr\u003Ealign – определяет выравнивание таблицы.\u003Cbr\u003Ebackground – задает фоновый рисунок таблице.\u003Cbr\u003Ebgcolor – цвет фона таблицы.\u003Cbr\u003Eborder – толщина рамки в пикселях.\u003Cbr\u003Eheight – высота таблицы.\u003Cbr\u003Ewidth – ширина таблмцы.\u003Cbr\u003E","\u003Cp\u003EHTML. ССЫЛКИ.\u003Cbr\u003E\u003Cp\u003E\tАдрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http:\u002F\u002F) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.\u003Cbr\u003EОтносительные ссылки\u003Cbr\u003EФайлы в одной папке\u003Cbr\u003E\u003Ca href=\"Ссылаемый документ.html\"\u003EСсылка\u003C\u002Fa\u003E\u003Cbr\u003EФайлы в разных папках\u003Cbr\u003E\u003Ca href=\"..\u002FСсылаемый документ.html\"\u003EСсылка\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"..\u002F..\u002FСсылаемый документ.html\"\u003EСсылка\u003C\u002Fa\u003E\u003Cbr\u003E\u003Ca href=\"Папка\u002FСсылаемый документ.html\"\u003EСсылка\u003C\u002Fa\u003E\u003Cbr\u003EСсылка относительно корня сайта\u003Cbr\u003E\u003Ca href=\"\u002FПапка\u002FСсылаемый документ.html \"\u003EКурсы\u003C\u002Fa\u003E\u003Cbr\u003EАбсолютные ссылки\u003Cbr\u003E \u003Ca href=\"http:\u002F\u002Fhtmlbook.ru\"\u003E\u003Cbr\u003E",I,"\u003Cp\u003ECSS.\u003Cbr\u003E\u003Cp\u003ECSS – расшифровывается как каскадная таблица стилей.\u003Cbr\u003EЭто правила по которым браузер отображает HTML элементы.\u003Cbr\u003EСтили указываются в head страницы.\u003Cbr\u003E",I,"\u003Cp\u003ECSS. МЕТОД ОБЪЯВЛЕНИЯ №1\u003Cbr\u003E\u003Cp\u003EОбъявляем через атрибут style.\u003Cbr\u003E","\u003Cp\u003ECSS. МЕТОД ОБЪЯВЛЕНИЯ №2\u003Cbr\u003E\u003Cp\u003EСводка таблицы стилей внутри основного документа.\u003Cbr\u003E","\u003Cp\u003ECSS. МЕТОД ОБЪЯВЛЕНИЯ №3\u003Cbr\u003E\u003Cp\u003EСсылка на таблицу стилей.\u003Cbr\u003E","\u003Cp\u003ECSS.\u003Cbr\u003E\u003Cp\u003EПозволяет работать с:\u003Cbr\u003EШрифтами\u003Cbr\u003EЦветом\u003Cbr\u003EПолями\u003Cbr\u003EСтроками\u003Cbr\u003EВысотой\u003Cbr\u003EШириной\u003Cbr\u003EФоновыми изображениями\u003Cbr\u003EПозиционированием элементов\u003Cbr\u003EИ другими вещами…\u003Cbr\u003E","\u003Cp\u003ECSS. ЦВЕТА.\u003Cbr\u003E\u003Cp\u003EВозможно указывание цветов по имени (white, black, blue…)\u003Cbr\u003EВ шестнадцатеричном формате палитры RGB (#732acb, #3c3).\u003Cbr\u003EВ десятичном формате палитры RGB ( rgb(0,255,126) ).\u003Cbr\u003EВ формате RGB с указанием величин в процентах ( rgb(30%, 10%, 90%) ).\u003Cbr\u003E","\u003Cp\u003ECSS. РАБОТА С ТЕКСТОМ.\u003Cbr\u003E\u003Cp\u003Etext-indent – устанавливает отступы для первой строки абзаца.\u003Cbr\u003Etext-align – выравнивание текста.\u003Cbr\u003Etext-decoration – позволяет добавлять различные декоративные эффекты.\u003Cbr\u003Eletter-spacing интервал между буквами в пикселях, пунктах, в относительных единицах em – относительная единица длины, равная размеру текущего шрифта.\u003Cbr\u003Etext-transform – трансформация текста.\u003Cbr\u003E","\u003Cp\u003ECSS. ПСКВДОКЛАСС.\u003Cbr\u003E\u003Cp\u003E\tПсевдокласс позволяет учитывать различные условия или события при определении свойств HTML тэгов.\u003Cbr\u003EПример: a:link { color: #023fcb; }\u003Cbr\u003EПсевдоклассы для ссылок:\u003Cbr\u003E:link – используется для ссылок на страницы, которые пользователь еще не посещал.\u003Cbr\u003E:visited – используется для ссылок на страницы, которые пользователь посетил.\u003Cbr\u003E:hover – используется для ссылок над которыми находится указатель мыши.\u003Cbr\u003E:active – используется для активных ссылок.\u003Cbr\u003E","\u003Cp\u003ECSS. ИДЕНТИФИКАЦИЯ ЭЛЕМЕНТОВ. \u003Cbr\u003E\u003Cp\u003Eclass – задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.\u003Cbr\u003Eid – задает стилевой идентификатор, уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре – должен встречаться один раз.\u003Cbr\u003E","\u003Cp\u003ECSS. ПРИОРИТЕТНОСТЬ.\u003Cbr\u003E\u003Cp\u003EСамый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.\u003Cbr\u003EВторое место занимает присутствие ID в селекторе(#some-id).\u003Cbr\u003EДалее идут все атрибуты (в том числе и атрибут class) и псевдоклассы (pseudo-classes) в селекторе.\u003Cbr\u003EСамый низкий приоритет у селекторов с именами элементов.\u003Cbr\u003EЕсли к паре свойство – значение приписать !important, тогда это значение свойства получит максимальный приоритет в каскаде стилей. Это объявление сработает независимо от наличия других правил CSS для этого элемента.\u003Cbr\u003E","\u003Cp\u003EHTML + CSS\u003Cbr\u003E"],href:"\u002Finformatika\u002Fstruktura-html-2",href_category:"\u002Finformatika",date:1659699409,related:[{id:197696,name:"Организация разработки стратегии муниципального развития",href:"\u002Finformatika\u002Forganizatsiya-razrabotki-strategii-munitsipalnogo-razvitiya",jpg:"jpg\u002F197696"},{id:564640,name:"Двоичная система счисления, 9 класс",href:"\u002Finformatika\u002Fdvoichnaya-sistema-schisleniya-9-klass",jpg:"jpg\u002F564640"},{id:240219,name:"Одномерные массивы",href:"\u002Finformatika\u002Fodnomernye-massivy-10",jpg:"jpg\u002F240219"},{id:20720,name:"Базові засоби розробки і оформлення програм на мові Pascal",href:"\u002Finformatika\u002Fbazov-zasobi-rozrobki--oformlennya-program",jpg:"jpg\u002F20720"},{id:546724,name:"Представление числовой информации с помощью систем счисления",href:"\u002Finformatika\u002Fpredstavlenie-chislovoy-informatsii-s-pomoshchyu-sistem-14",jpg:"jpg\u002F546724"},{id:431626,name:"APM FEM Система прочностного анализа для КОМПАС-3D",href:"\u002Finformatika\u002Fapm-fem-sistema-prochnostnogo-analiza-dlya",jpg:"jpg\u002F431626"},{id:116080,name:"Библиографическое описание документа",href:"\u002Finformatika\u002Fbibliograficheskoe-opisanie-dokumenta-1",jpg:"jpg\u002F116080"},{id:340400,name:"Современная журналистика. Блогинг. Занятие 2",href:"\u002Finformatika\u002Fsovremennaya-zhurnalistika-bloging-zanyatie-2",jpg:"jpg\u002F340400"},{id:178743,name:"Работа со слоями эффектов. (Лекция 2)",href:"\u002Finformatika\u002Frabota-so-sloyami-effektov-lektsiya-2",jpg:"jpg\u002F178743"},{id:581407,name:"Сравнение Bootstrap и Tailwind CSS",href:"\u002Finformatika\u002Fsravnenie-bootstrap-i-tailwind-css",jpg:"jpg\u002F581407"},{id:394335,name:"Апробация технологий Silverlight\u002FLINQ\u002FWCF для создания web-приложений, ориентированных на интенсивную обработку данных",href:"\u002Finformatika\u002Faprobatsiya-tehnologiy-silverlightlinqwcf-dlya-sozdaniya-web",jpg:"jpg\u002F394335"},{id:170389,name:"Торговые символы, этикетки и штрихкод",href:"\u002Finformatika\u002Ftorgovye-simvoly-etiketki-i-shtrihkod",jpg:"jpg\u002F170389"},{id:280902,name:"Online-курс Женское счастье",href:"\u002Finformatika\u002Fonline-kurs-zhenskoe-schaste",jpg:"jpg\u002F280902"},{id:490899,name:"Презентация к уроку информатики в 10 классе Глобальная компьютерная сеть Интернет",href:"\u002Finformatika\u002Fprezentatsiya-k-uroku-informatiki-v-10-11",jpg:"jpg\u002F490899"},{id:348429,name:"Экспертные системы. Характеристика и состав, примеры применения ЭС",href:"\u002Finformatika\u002Fekspertnye-sistemy-harakteristika-i-sostav-primery",jpg:"jpg\u002F348429"},{id:274471,name:"Интерактивная игра по теме Компьютерная графика",href:"\u002Finformatika\u002Finteraktivnaya-igra-po-teme-kompyuternaya-grafika",jpg:"jpg\u002F274471"},{id:170559,name:"Компьютерная графика и области ее применения",href:"\u002Finformatika\u002Fkompyuternaya-grafika-i-oblasti-ee-primeneniya-1",jpg:"jpg\u002F170559"},{id:595769,name:"Защита межфилиальной связи. Лекция 10",href:"\u002Finformatika\u002Fzashchita-mezhfilialnoy-svyazi-lektsiya-10",jpg:"jpg\u002F595769"},{id:599094,name:"Команда и программа",href:"\u002Finformatika\u002Fkomanda-i-programma",jpg:"jpg\u002F599094"},{id:195630,name:"List of keywords",href:"\u002Finformatika\u002Flist-of-keywords",jpg:"jpg\u002F195630"},{id:224256,name:"Обновление мобильного приложения Возрождение-ТВ",href:"\u002Finformatika\u002Fobnovlenie-mobilnogo-prilozheniya-vozrozhdenie-tv",jpg:"jpg\u002F224256"},{id:403529,name:"6 класс Персональный компьютер как система",href:"\u002Finformatika\u002F6-klass-personalnyy-kompyuter-kak-sistema",jpg:"jpg\u002F403529"},{id:417635,name:"Обмен элктронными документами",href:"\u002Finformatika\u002Fobmen-elktronnymi-dokumentami",jpg:"jpg\u002F417635"},{id:3224,name:"Занятие №11 “Pygame”",href:"\u002Finformatika\u002Fzanyatie-n11-pygame",jpg:"jpg\u002F3224"},{id:316050,name:"Поиск эффективной стратегии в играх жанров Tower Defence и R oguelike",href:"\u002Finformatika\u002Fpoisk-effektivnoy-strategii-v-igrah-zhanrov",jpg:"jpg\u002F316050"},{id:289671,name:"Задача коммивояжера",href:"\u002Finformatika\u002Fzadacha-kommivoyazhera",jpg:"jpg\u002F289671"},{id:209711,name:"Базы данных",href:"\u002Finformatika\u002Fbazy-dannyh-2033",jpg:"jpg\u002F209711"},{id:328585,name:"Архитектура ЭВМ. Представление об основных составляющих компьютера",href:"\u002Finformatika\u002Farhitektura-evm-predstavlenie-ob-osnovnyh-sostavlyayushchih",jpg:"jpg\u002F328585"}],navigation:{next:"\u002Fistoriya\u002Fneoliticheskaya-revolyutsiya-i-ee-posledstviya-1",next_name:"Неолитическая революция и ее последствия",prev:"\u002Fistoriya\u002Fchelovek-i-idealy-gumanizma-v-epohu",prev_name:"Человек и идеалы гуманизма в эпоху Возрождения"}}},categories:{result:[{id:J,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:J,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:F,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:H,name:"Физика",pseudoname:"fizika"},{id:126,ordering:G,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:d,config:{public:{SITE_NAME:K,SITE_HOST:"mypreza.com",SITE_LANG:L,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:K,short_name:a,description:a,lang:L,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:S,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:x,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:h,item_slide_header:y,item_images:z,item_images_tag:i,item_words_h3:d,item_words_tag:i,item_words_1:h,routing:A,item_slide_skipping:B,item_download_timeout:C,item_slider_width:D,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:k,header_bg:j,accent:j}},social:E,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable",13,"h3","#d53032","#ffffff","Структура HTML","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","div","images","category","both",80,800,"\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","Информатика",26,25,"\u003Cp\u003ECSS.\u003Cbr\u003E",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) – задает фоновый рисунок таблице.
bgcolor – цвет фона таблицы.
border – толщина рамки в пикселях.
height – высота таблицы.
width – ширина таблмцы.

HTML. ССЫЛКИ.
Адрес ссылки может быть как абсолютным, так и относительным. Абсолютные адреса должны начинаться с указания протокола (обычно http://) и содержать имя сайта. Относительные ссылки ведут отсчет от корня сайта или текущего документа.
Относительные ссылки
Файлы в одной папке
Ссылка
Файлы в разных папках
Ссылка
Ссылка
Ссылка
Ссылка относительно корня сайта
Курсы
Абсолютные ссылки

CSS.

CSS.
CSS – расшифровывается как каскадная таблица стилей.
Это правила по которым браузер отображает HTML
элементы.
Стили указываются в head страницы.

CSS.

CSS. МЕТОД ОБЪЯВЛЕНИЯ №1
Объявляем через атрибут style.

CSS. МЕТОД ОБЪЯВЛЕНИЯ №2
Сводка таблицы стилей внутри основного документа.

CSS. МЕТОД ОБЪЯВЛЕНИЯ №3
Ссылка на таблицу стилей.

CSS.
Позволяет работать с:
Шрифтами
Цветом
Полями
Строками
Высотой
Шириной
Фоновыми изображениями
Позиционированием элементов
И другими вещами…

CSS. ЦВЕТА.
Возможно указывание цветов по имени (white, black, blue…)
В шестнадцатеричном формате палитры RGB
(#732acb, #3c3).
В десятичном формате палитры RGB ( rgb(0,255,126) ).
В формате RGB с указанием величин в процентах ( rgb(30%, 10%, 90%) ).

CSS. РАБОТА С ТЕКСТОМ.
text-indent – устанавливает отступы для первой строки абзаца.
text-align – выравнивание
текста.
text-decoration – позволяет добавлять различные декоративные эффекты.
letter-spacing интервал между буквами в пикселях, пунктах, в относительных единицах em – относительная единица длины, равная размеру текущего шрифта.
text-transform – трансформация текста.

CSS. ПСКВДОКЛАСС.
Псевдокласс позволяет учитывать различные условия или события при определении свойств HTML тэгов.
Пример:
a:link { color: #023fcb; }
Псевдоклассы для ссылок:
:link – используется для ссылок на страницы, которые пользователь еще не посещал.
:visited – используется для ссылок на страницы, которые пользователь посетил.
:hover – используется для ссылок над которыми находится указатель мыши.
:active – используется для активных ссылок.

CSS. ИДЕНТИФИКАЦИЯ ЭЛЕМЕНТОВ.
class – задает стилевой класс, который позволяет связать определенный тег
со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
id – задает стилевой идентификатор, уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре – должен встречаться один раз.

CSS. ПРИОРИТЕТНОСТЬ.
Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в
стилях.
Второе место занимает присутствие ID в селекторе(#some-id).
Далее идут все атрибуты (в том числе и атрибут class) и псевдоклассы (pseudo-classes) в селекторе.
Самый низкий приоритет у селекторов с именами элементов.
Если к паре свойство – значение приписать !important, тогда это значение свойства получит максимальный приоритет в каскаде стилей. Это объявление сработает независимо от наличия других правил CSS для этого элемента.