Основы HTML и CSS презентация

Что нужно для работы с html/CSS/JS?
2. Текстовые редакторы:
https://code.visualstudio.com/download
Brackets
https://brackets.ru.uptodown.com/windows
1. Браузер
GoogleChrome – подерживает все последние фишки
VSCode – от Microsoft
Установить плагины:
Mithril Emmet - !+ Tab
Russian Language Pack for Visual Studio Code - русский язык
Auto Close Tag- для комфортной работы с тегами
Auto Rename Tag – для комфортного описания HTML
Bracket Pair Colorizer 2 - продвинутая подсветка
Live Server - для отображения в браузере
open in browser –
Prettier - Code formatter –
vscode-icons - иконки
CodePen – on-line редактор

Настройки - Параметры
1. Word Wrap - настройка переноса длинных строк
2. Trim Trailing Whitespace- настройка переноса длинных строк
3. Hover- задержка подсказки, сделать 3000
или выключить (убрать галочку)
4. Minimap - отключить миникарту
5. Breadcrumbs - отключить “хлебные крошки” - навигацию
6. Mouse Wheel Zoom - включить масштабирование колёсиком мыши
Настройка VSCode

Тэг – команда языка HTML
открывающий тэг
Первая страница
Привет!
Первая страница
Привет!
контейнер (парный тэг)
HTML = Hypertext Markup Language (язык разметки гипертекста)

Html-документ
HTML = Hypertext Markup Language (язык разметки гипертекста)
Пример веб-страницы
Сообщаем браузеру кодировку HTML-страницы
Самая распространённая современная кодировка — utf-8.
Используйте её во всех своих проектах.
Комментарий для html – кода
Для кириллицы в Windows charset часто задавали как windows-1251. Но сейчас это считается плохой практикой.
Каждый HTML-документ начинается с декларации типа документа, или «доктайпа». Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.

Переход на новую строку
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...
break – разрыв
На поле Куликовом — А. Блок

Абзац
Молекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?
И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнёт ковыль...
paragraph – абзац
интервал

Одиночный тег " #FF0000 " >
left, right ,center
толщина линии
ширина линии, может задаваться в пикселах, либо в процентах от ширины окна браузера)

Заголовки
заголовок документа
заголовок раздела
заголовок 1 уровня
заголовок 2 уровня
заголовок 3 уровня
заголовок 4 уровня
заголовок 5 уровня
заголовок 5 уровня
Не используйте заголовки чтобы сделать текст БОЛЬШИМ или жирным.
Поисковые системы используют ваши заголовки для индексации структуры и содержания ваших веб страниц.
Глава 1. Информация

Курсив (italic):
Вася
Вася
Жирный (bold):
Вася
Вася
Подчёркивание (underline):
Вася
Вася
Зачёркивание (strikeout):
Вася
Вася
Верхний индекс (superscript):
Вася
2
Вася2
Нижний индекс (subscrip
Вася
Вася
2
Вася2
Курсив (emphasize):
Вася
Сильное выделение (strong):
Вася
Семантический смысл тегов – это значит, что каждый тег не просто задает тот или иной внешний вид интерфейса на странице, но и еще сообщает о том, зачем этот тег, поясняет смысл и назначение тега.
Всевозможные поисковые системы, сервисы используют семантические правила для извлечения необходимой информации, а это значит, что если станица правильно спроектирована с использованием подходящих тегов, то она будет гораздо ценней для этих поисковиков и сервисов. Это немаловажный фактор при продвижении сайта.
При использовании тегов
и
текст становится более важным на странице.
особый семантический смысл
немаловажный фактор при продвижении сайта.
< big> Это большой текст
< small> Это маленький текст
акцентированный
Форматирование текста (HTML)

Форматирование текста (HTML)
Для отображения программных кодов
a:=b+c;
Определение (definition):
Информация
— это...
Цитата (citation):
Карету мне, карету!
Сокращение (abbreviation):
НИИЧАВО
Ввод с клавиатуры
Текст телетайпа
Текст примера
Компьютерная переменная

Специальные символы (HTML entities)
Дом сдали в 2011 году.
Пёс весил 12 кг.
Неразрывный пробел ( )
год
инициалы
единицы измерения
не
отрывать:
Из дома вышел А.С. Пушкин – солнце
русской поэзии.
Угловые скобки (< >)
Верно ли, что X < Y?
X < Y

Тег предварительного форматирования
…
Текст
разбит
на строки
Отображение
Текст
разбит
на строки
Внутри
контейнера
не допустимо применять теги:
,
,
,
,
и
.
Тег
…
применяется при отображении программного кода
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
iMin := 1;
for i:=2 to n do
if a[i] < a[iMin] then
iMin := i;
preformatted (уже отформатированный)
Слайд 14
Задание 1. Cоздайте html-файл (кодировка utf-8) с заголовком "Задача 1", результат которого показан
на рисунке. Используйте подходящий тег заголовков (
-
), теги
,
,
,
,
,
(необязательно все перечисленные). В html-код добавьте комментарии: дату решения данной задачи и ФИО.
Задание 2. Создайте html-файл (кодировка utf-8) с заголовком "Задача 2", результат которого показан на рисунке. Используйте подходящий тег заголовков (h1-h6), теги
,
,
,
,
,
,
,
(необязательно все перечисленные). Обратите внимание, что шрифт фамилии автора меньшего размера. Заметим, что тег
в разных браузерах может отображаться по-разному. В html-код добавьте условие данной задачи в виде комментариев.
Стихотворение
Мириады маленьких дел
Пьют по капле гаснущий день,
А дела большие сушит жажда.
Оставляя все на «потом»,
Прозреваем задним числом,
Только день не повторится дважды.
И.Тальков
образец
копировать
Не позволяй душе лениться
Не позволяй душе лениться!
Чтоб в ступе воду не толочь,
Душа обязана трудиться
И день и ночь, и день и ночь!
Гони ее от дома к дому,
Тащи с этапа на этап,
По пустырю, по бурелому
Через сугроб, через ухаб!
Не разрешай ей спать в постели
При свете утренней звезды,
Держи лентяйку в черном теле
И не снимай с нее узды!
В.Заболоцкий
образец
копировать
Слайд 15
Задание 3. Создайте html-файл, результат которого показан на рисунке.
Используйте тег
и
Код программы
for (int i=0; i<10; i++)
{
cout<
образец
копировать
Задание 4. Воссоздайте код представленной html-страницы. Используйте тег
, пробелы и обычные точки или звездочки.
Слайд 16
Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь (LZW)
прозрачные области
анимация
только с палитрой (2…256 цветов)
рисунки
с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
SVG (Scalable Vector Graphics, масштабируемые векторные изображения)
Слайд 17
Форматы рисунков
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.
Главная цель этого проекта —
ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
Особенности WebP:
сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
поддерживает прозрачность (альфа-канал).
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
WebP: 26 килобайт.
JPEG: 44 килобайт
Avif – уникальный формат изображения
Качество лучше на 20%, чем формата WebP;
На 50% выше, чем формат JPG.
Правда, в некоторых случаях JPG позволяет сжимать с большим качеством изображения.
Слайд 18
Форматы в зависимости от цели использования
Под фотографическими изображениями понимаются полноцветные фотографии, чёрно-белые фотографии, полноцветные изображения,
рисунки с большим количеством разноцветных деталей.
Под графикой, логотипами, иконками — графика со множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями, с прозрачностью.
Слайд 19
Рисунки в документе
из той же
папки:
из другой папки:
с другого сервера:
image
(изображение)
source
(источник)
Слайд 20
Атрибуты для картинок
alt – альтернативный текст, который отображается на месте изображения, если по
каким-либо причинам само изображение не может быть показано;
Слайд 21
Как загрузить картинку от show.html?
src="../../history/im4.jpg">
im5.jpg
Слайд 22
Гиперссылки (локальные)
Переход на
новую страницу
anchor
(якорь)
hyper reference (гиперссылка)
страница в той
же папке:
во вложенной папке:
Информация
в родительской папке:
Информация
в соседней папке:
Информация
Скачать
для скачивания:
Имя файла: Основы-HTML-и-CSS.pptx
Количество просмотров: 9
Количество скачиваний: 0
Скачать
- Предыдущая
Навчаюся змінювати слова — назви предметів. Змінювання іменників за зразком один — багато. Урок №36
Следующая -
Организация обработки больших данных. Лекция 4
Похожие презентации
Модельно-ориентированное программирование. Основные вехи развития компьютеров
Указатели и массивы
Мобильное приложение для нейрореабилитации Спикер
САПР. Решение чертежно-графических задач средствами компьютерной графики
Технологии создания и преобразования информационных объектов
Эргономические требования к презентации
Цифровое видео: Спасём жизнь вместе!
Информация в природе, обществе и технике
Прототип мобильного приложения для обучения правильной технике свинга при помощи AI
Правила написания электронного письма
Системы управления сетями и услугами телекоммуникаций
Величини текстового типу, операції над ними
Социальные сети в России
Информационные системы в защите персональных данных
Разработка алгоритмов обработки и способов хранения данных телефонного биллинга для построения автоматизированных систем
Webinar. Тренинг Обнаженная красота
Системы счисления (1, 10, 16)
Типы данных и таблицы. Выборка данных из таблиц. Оператор select. (Тема 5)
Вступне практичне завдання на курси 2016 QAP INT. Технічні вимоги
Локальные сети
Компьютерная анимация
Программирование разветвляющихся алгоритмов в Turbo Pascal
Інформаційно-технологічний центр. Відділ ServiceDesk
Основні поняття математичної статистики
Программное обеспечение каталога ресурсов Интернет
Представление о программных средах компьютерной графики и черчения, мультимедийных средах
Управление коммуникациями проекта
Основные средства VBA
Обратная связь
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){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,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:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:579444,name:k,category:G,count:23,jpg:"jpg\u002F579444",hits:H,download:b,h1:"Основы HTML и CSS презентация",meta:{h1:k,title:k,description:"Основы HTML и CSS презентация на тему, доклад, Информатика",keywords:"Основы HTML и CSS, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Основы HTML и CSS из раздела Информатика. Презентация на заданную тему содержит 23 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:a,file:"Основы-HTML-и-CSS.pptx",texts:["\u003Cp\u003EОсновы HTML и CSS\u003Cbr\u003E\r\n\u003Cbr\u003E","\u003Cp\u003EЧто нужно для работы с html\u002FCSS\u002FJS?\u003Cbr\u003E\u003Cp\u003E 2. Текстовые редакторы:\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fcode.visualstudio.com\u002Fdownload\u003Cbr\u003E\u003Cp\u003EBrackets\u003Cbr\u003E\u003Cp\u003Ehttps:\u002F\u002Fbrackets.ru.uptodown.com\u002Fwindows\u003Cbr\u003E\u003Cp\u003E1. Браузер\u003Cbr\u003E\u003Cp\u003EGoogleChrome – подерживает все последние фишки \u003Cbr\u003E\u003Cp\u003EVSCode – от Microsoft \u003Cbr\u003E\u003Cp\u003EУстановить плагины:\u003Cbr\u003EMithril Emmet - !+ Tab\r\n Russian Language Pack for Visual Studio Code - русский язык\u003Cbr\u003EAuto Close Tag- для комфортной работы с тегами\u003Cbr\u003EAuto Rename Tag – для комфортного описания HTML\u003Cbr\u003EBracket Pair Colorizer 2 - продвинутая подсветка\u003Cbr\u003ELive Server - для отображения в браузере\u003Cbr\u003Eopen in browser – \u003Cbr\u003EPrettier - Code formatter – \u003Cbr\u003Evscode-icons - иконки\u003Cbr\u003E\u003Cp\u003ECodePen – on-line редактор\u003Cbr\u003E","\u003Cp\u003E Настройки - Параметры\u003Cbr\u003E\u003Cp\u003E1. Word Wrap - настройка переноса длинных строк\u003Cbr\u003E\u003Cp\u003E2. Trim Trailing Whitespace- настройка переноса длинных строк\u003Cbr\u003E\u003Cp\u003E3. Hover- задержка подсказки, сделать 3000\u003Cbr\u003E или выключить (убрать галочку) \u003Cbr\u003E\u003Cp\u003E4. Minimap - отключить миникарту\u003Cbr\u003E\u003Cp\u003E5. Breadcrumbs - отключить “хлебные крошки” - навигацию\u003Cbr\u003E\u003Cp\u003E6. Mouse Wheel Zoom - включить масштабирование колёсиком мыши\u003Cbr\u003E\u003Cp\u003EНастройка VSCode \u003Cbr\u003E","\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EТэг – команда языка HTML\u003Cbr\u003E\u003Cp\u003Eоткрывающий тэг\u003Cbr\u003E\u003Cp\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 Привет!\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003E\u003Chead\u003E\u003Cbr\u003E \u003Ctitle\u003EПервая страница\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cbody\u003E\u003Cbr\u003E Привет!\u003Cbr\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003Cp\u003Eконтейнер (парный тэг)\u003Cbr\u003E\u003Cp\u003EHTML = Hypertext Markup Language (язык разметки гипертекста)\u003Cbr\u003E","\u003Cp\u003EHtml-документ\u003Cbr\u003E\u003Cp\u003EHTML = Hypertext Markup Language (язык разметки гипертекста)\u003Cbr\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Chtml\u003E \u003Cbr\u003E \u003Cbr\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E \u003Cbr\u003E \u003Ctitle\u003E Пример веб-страницы \u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E \u003Cbr\u003E \u003C!--содержимое страницы--\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E\u003Cp\u003EСообщаем браузеру кодировку HTML-страницы \u003Cbr\u003E \u003Cmeta charset=\"имя кодировки\"\u003E\u003Cbr\u003E Самая распространённая современная кодировка — utf-8.\u003Cbr\u003E Используйте её во всех своих проектах.\u003Cbr\u003E\u003Cp\u003EКомментарий для html – кода\u003Cbr\u003E\u003C!-- комментарий --\u003E\u003Cbr\u003E\u003Cp\u003EДля кириллицы в Windows charset часто задавали как windows-1251. Но сейчас это считается плохой практикой.\u003Cbr\u003E\u003Cmeta charset=\"windows-1251\"\u003E\u003Cbr\u003E\u003Cp\u003EКаждый HTML-документ начинается с декларации типа документа, или «доктайпа». Тип документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.\u003Cbr\u003E","\u003Cp\u003EПереход на новую строку\u003Cbr\u003E\u003Cp\u003EИ вечный бой! Покой нам только снится\u003Cbr\u003EСквозь кровь и пыль...\u003Cbr\u003EЛетит, летит степная кобылица\u003Cbr\u003EИ мнёт ковыль...\u003Cbr\u003E\u003Cp\u003Ebreak – разрыв \u003Cbr\u003E\u003Cp\u003E\r\nНа поле Куликовом — А. Блок\u003Cbr\u003E","\u003Cp\u003EАбзац\u003Cbr\u003E\u003Cp\u003EМолекула воды испарилась из кипящего чайника и, подлетая к потолку, лоб в лоб столкнулась с неизвестно как \u003Cbr\u003Eпрокравшейся на кухню молекулой \u003Cbr\u003Eводорода. Кто быстрей отлетел?\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003EИ вечный бой! Покой нам только снится\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EСквозь кровь и пыль...\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EЛетит, летит степная кобылица \u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003EИ мнёт ковыль...\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003Eparagraph – абзац\u003Cbr\u003E\u003Cp\u003Eинтервал\u003Cbr\u003E","\u003Cp\u003EОдиночный тег \u003CHR\u003E\u003Cbr\u003E\u003Cp\u003E\u003CHR align = \"left \" size =4 width = \"50%\" color= \" #FF0000 \" \u003E\u003Cbr\u003E\u003Cp\u003Eleft, right ,center\u003Cbr\u003E\u003Cp\u003Eтолщина линии\u003Cbr\u003E\u003Cp\u003Eширина линии, может задаваться в пикселах, либо в процентах от ширины окна браузера)\u003Cbr\u003E\u003Cp\u003E\u003Cbody\u003E \u003Chr noshade size=\"4\" width=\"75%\"\u003E \u003Chr noshade size=\"2\" width=\"60%\"\u003E \u003Chr noshade size=\"1\" width=\"50%\"\u003E \u003Chr noshade size=\"1\" width=\"38%\"\u003E \u003Chr noshade size=\"1\" width=\"25%\"\u003E \u003Chr noshade size=\"1\" width=\"10%\"\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E","\u003Cp\u003EЗаголовки\u003Cbr\u003E\u003Cp\u003Eзаголовок документа\u003Cbr\u003E\u003Cp\u003Eзаголовок раздела\u003Cbr\u003E\u003Cp\u003E\u003Ch1\u003E заголовок 1 уровня \u003Ch1\u003E \u003Cbr\u003E\u003Ch2\u003E заголовок 2 уровня \u003Ch2\u003E\u003Cbr\u003E\u003Ch3\u003E заголовок 3 уровня \u003Ch3\u003E\u003Cbr\u003E\u003Ch4\u003E заголовок 4 уровня \u003Ch4\u003E \u003Cbr\u003E\u003Ch5\u003E заголовок 5 уровня \u003Ch5\u003E \u003Cbr\u003E\u003Ch6\u003E заголовок 5 уровня \u003Ch6\u003E \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EНе используйте заголовки чтобы сделать текст БОЛЬШИМ или жирным.\u003Cbr\u003EПоисковые системы используют ваши заголовки для индексации структуры и содержания ваших веб страниц.\u003Cbr\u003E\u003Cp\u003E\u003Ch1\u003EГлава 1. Информация\u003C\u002Fh1\u003E\u003Cbr\u003E","\u003Cp\u003EКурсив (italic):\u003Cbr\u003E\u003Cp\u003E\u003Ci\u003EВася\u003C\u002Fi\u003E\u003Cbr\u003E\u003Cp\u003EВася\u003Cbr\u003E\u003Cp\u003EЖирный (bold):\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003EВася\u003C\u002Fb\u003E\u003Cbr\u003E\u003Cp\u003EВася\u003Cbr\u003E\u003Cp\u003EПодчёркивание (underline):\u003Cbr\u003E\u003Cp\u003E\u003Cu\u003EВася\u003C\u002Fu\u003E\u003Cbr\u003E\u003Cp\u003EВася\u003Cbr\u003E\u003Cp\u003EЗачёркивание (strikeout):\u003Cbr\u003E\u003Cp\u003E\u003Cs\u003EВася\u003C\u002Fs\u003E\u003Cbr\u003E\u003Cp\u003EВася\u003Cbr\u003E\u003Cp\u003EВерхний индекс (superscript):\u003Cbr\u003E\u003Cp\u003EВася\u003Csup\u003E2\u003C\u002Fsup\u003E\u003Cbr\u003E\u003Cp\u003EВася2\u003Cbr\u003E\u003Cp\u003EНижний индекс (subscrip\u003Cu\u003EВася\u003C\u002Fu\u003E\u003Cbr\u003E\u003Cp\u003EВася\u003Csub\u003E2\u003C\u002Fsub\u003E\u003Cbr\u003E\u003Cp\u003EВася2\u003Cbr\u003E\u003Cp\u003EКурсив (emphasize):\u003Cbr\u003E\u003Cp\u003E\u003Cem\u003EВася\u003C\u002Fem\u003E\u003Cbr\u003E\u003Cp\u003EСильное выделение (strong):\u003Cbr\u003E\u003Cp\u003E\u003Cstrong\u003EВася\u003C\u002Fstrong\u003E\u003Cbr\u003E\u003Cp\u003EСемантический смысл тегов – это значит, что каждый тег не просто задает тот или иной внешний вид интерфейса на странице, но и еще сообщает о том, зачем этот тег, поясняет смысл и назначение тега.\u003Cbr\u003EВсевозможные поисковые системы, сервисы используют семантические правила для извлечения необходимой информации, а это значит, что если станица правильно спроектирована с использованием подходящих тегов, то она будет гораздо ценней для этих поисковиков и сервисов. Это немаловажный фактор при продвижении сайта.\u003Cbr\u003E\u003Cp\u003E При использовании тегов \u003Cem\u003E и \u003Cstrong\u003E \u003Cbr\u003Eтекст становится более важным на странице.\u003Cbr\u003Eособый семантический смысл \u003Cbr\u003Eнемаловажный фактор при продвижении сайта.\u003Cbr\u003E\u003Cp\u003E\u003C big\u003E Это большой текст \u003C\u002Fbig\u003E\u003Cbr\u003E\u003Cp\u003E\u003C small\u003E Это маленький текст \u003C\u002Fsmall\u003E\u003Cbr\u003E\u003Cp\u003Eакцентированный \u003Cbr\u003E\u003Cp\u003EФорматирование текста (HTML)\u003Cbr\u003E","\u003Cp\u003EФорматирование текста (HTML)\u003Cbr\u003E\u003Cp\u003EДля отображения программных кодов\u003Cbr\u003E\u003Cp\u003E\u003Ccode\u003Ea:=b+c;\u003C\u002Fcode\u003E\u003Cbr\u003E\u003Cp\u003EОпределение (definition):\u003Cbr\u003E\u003Cp\u003E\u003Cdfn\u003EИнформация\u003C\u002Fdfn\u003E &mdash; это...\u003Cbr\u003E\u003Cp\u003EЦитата (citation):\u003Cbr\u003E\u003Cp\u003E\u003Ccite\u003EКарету мне, карету!\u003C\u002Fcite\u003E\u003Cbr\u003E\u003Cp\u003EСокращение (abbreviation):\u003Cbr\u003E\u003Cp\u003E\u003Cabbr\u003EНИИЧАВО\u003C\u002Fabbr\u003E\u003Cbr\u003E\u003Cp\u003E\u003Ckbd\u003E Ввод с клавиатуры \u003C\u002Fkbd\u003E\u003Cbr\u003E\u003Cp\u003E\u003Ctt\u003E Текст телетайпа \u003C\u002Ftt\u003E\u003Cbr\u003E\u003Cp\u003E\u003Csamp\u003EТекст примера \u003C\u002Fsamp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cvar\u003E Компьютерная переменная \u003C\u002Fvar\u003E\u003Cbr\u003E","\u003Cp\u003EСпециальные символы (HTML entities)\u003Cbr\u003E\u003Cp\u003EДом сдали в 2011&nbsp;году. \u003Cbr\u003E\u003Cp\u003EПёс весил 12&nbsp;кг.\u003Cbr\u003E\u003Cp\u003EНеразрывный пробел (&nbsp;)\u003Cbr\u003E\u003Cp\u003Eгод\u003Cbr\u003E\u003Cp\u003Eинициалы\u003Cbr\u003E\u003Cp\u003Eединицы измерения\u003Cbr\u003E\u003Cp\u003Eне отрывать: \u003Cbr\u003E\u003Cp\u003EИз дома вышел А.С. Пушкин – солнце \u003Cbr\u003Eрусской поэзии. \u003Cbr\u003E\u003Cp\u003EУгловые скобки (&lt; &gt;)\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003EВерно ли, что X \u003C Y?\u003C\u002Fp\u003E \u003Cbr\u003E\u003Cp\u003EX &lt; Y\u003Cbr\u003E","\u003Cp\u003EТег предварительного форматирования \u003CPRE\u003E … \u003C\u002FPRE\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cpre\u003E\u003Cbr\u003E Текст \u003Cbr\u003E разбит\u003Cbr\u003E на строки\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cbr\u003E\u003Cp\u003EОтображение\u003Cbr\u003E\u003Cp\u003EТекст \u003Cbr\u003Eразбит\u003Cbr\u003Eна строки\u003Cbr\u003E\u003Cp\u003EВнутри контейнера \u003Cpre\u003E не допустимо применять теги: \u003Cbig\u003E, \u003Cimg\u003E, \u003Cobject\u003E, \u003Csmall\u003E,\u003Csub\u003E и \u003Csup\u003E.\u003Cbr\u003EТег \u003CPRE\u003E … \u003C\u002FPRE\u003E применяется при отображении программного кода\u003Cbr\u003E\u003Cp\u003E\u003Cpre\u003E\u003Cbr\u003E iMin := 1;\u003Cbr\u003E for i:=2 to n do\u003Cbr\u003E if a[i] \u003C a[iMin] then\u003Cbr\u003E iMin := i;\u003Cbr\u003E\u003C\u002Fpre\u003E\u003Cbr\u003E\u003Cp\u003EiMin := 1;\u003Cbr\u003Efor i:=2 to n do\u003Cbr\u003E if a[i] \u003C a[iMin] then\u003Cbr\u003E iMin := i;\u003Cbr\u003E\u003Cp\u003Epreformatted (уже отформатированный)\u003Cbr\u003E","\u003Cp\u003EЗадание 1. Cоздайте html-файл (кодировка utf-8) с заголовком \"Задача 1\", результат которого показан на рисунке. Используйте подходящий тег заголовков (\u003Ch1\u003E-\u003Ch6\u003E), теги \u003Cbr\u003E, \u003Cp\u003E, \u003Ci\u003E, \u003Cem\u003E, \u003Cstrong\u003E, \u003Cb\u003E (необязательно все перечисленные). В html-код добавьте комментарии: дату решения данной задачи и ФИО.\u003Cbr\u003E \u003Cbr\u003E\u003Cp\u003EЗадание 2. Создайте html-файл (кодировка utf-8) с заголовком \"Задача 2\", результат которого показан на рисунке. Используйте подходящий тег заголовков (h1-h6), теги \u003Cbr\u003E, \u003Cp\u003E, \u003Ci\u003E, \u003Cem\u003E, \u003Cstrong\u003E, \u003Cb\u003E, \u003Chr\u003E, \u003Csmall\u003E (необязательно все перечисленные). Обратите внимание, что шрифт фамилии автора меньшего размера. Заметим, что тег \u003Chr\u003E в разных браузерах может отображаться по-разному. В html-код добавьте условие данной задачи в виде комментариев.\u003Cbr\u003E\u003Cp\u003EСтихотворение\u003Cbr\u003EМириады маленьких дел\r\nПьют по капле гаснущий день,\r\nА дела большие сушит жажда.\r\nОставляя все на «потом»,\r\nПрозреваем задним числом,\r\nТолько день не повторится дважды.\u003Cbr\u003EИ.Тальков\u003Cbr\u003E\u003Cp\u003Eобразец\u003Cbr\u003E\u003Cp\u003Eкопировать\u003Cbr\u003E\u003Cp\u003EНе позволяй душе лениться\u003Cbr\u003EНе позволяй душе лениться!\r\nЧтоб в ступе воду не толочь,\r\nДуша обязана трудиться\r\nИ день и ночь, и день и ночь!\r\n\r\nГони ее от дома к дому,\r\nТащи с этапа на этап,\r\nПо пустырю, по бурелому\r\nЧерез сугроб, через ухаб!\r\n\r\nНе разрешай ей спать в постели\r\nПри свете утренней звезды,\r\nДержи лентяйку в черном теле\r\nИ не снимай с нее узды!\u003Cbr\u003EВ.Заболоцкий\u003Cbr\u003E\u003Cp\u003Eобразец\u003Cbr\u003E\u003Cp\u003Eкопировать\u003Cbr\u003E","\u003Cp\u003EЗадание 3. Создайте html-файл, результат которого показан на рисунке.\u003Cbr\u003E Используйте тег \u003Ccode\u003E и &nbsp;\u003Cbr\u003E\u003Cp\u003EКод программы\u003Cbr\u003Efor (int i=0; i\u003C10; i++)\r\n{\r\n cout\u003C\u003Ci\u003C\u003Cendl;\r\n if (i==5)\r\n break; \u002F\u002F прекращение цикла\r\n}\u003Cbr\u003E\u003Cp\u003Eобразец\u003Cbr\u003E\u003Cp\u003Eкопировать\u003Cbr\u003E\u003Cp\u003EЗадание 4. Воссоздайте код представленной html-страницы. Используйте тег \u003Cpre\u003E, пробелы и обычные точки или звездочки.\u003Cbr\u003E","\u003Cp\u003EФорматы рисунков\u003Cbr\u003E\u003Cp\u003EGIF (Graphic Interchange Format)\u003Cbr\u003Eсжатие без потерь (LZW)\u003Cbr\u003Eпрозрачные области\u003Cbr\u003Eанимация\u003Cbr\u003Eтолько с палитрой (2…256 цветов)\u003Cbr\u003Eрисунки с четкими границами, мелкие рисунки\u003Cbr\u003E\u003Cp\u003EJPEG (Joint Photographer Expert Group)\u003Cbr\u003Eсжатие с потерями\u003Cbr\u003Eтолько True Color (16,7 млн. цветов)\u003Cbr\u003Eнет анимации и прозрачности\u003Cbr\u003Eрисунки с размытыми границами, фото\u003Cbr\u003E\u003Cp\u003EPNG (Portable Network Graphic)\u003Cbr\u003Eсжатие без потерь\u003Cbr\u003Eс палитрой (PNG-8) и True Color (PNG-24)\u003Cbr\u003Eпрозрачность и полупрозрачность (альфа-канал)\u003Cbr\u003Eнет анимации\u003Cbr\u003Eплохо сжимает мелкие рисунки\u003Cbr\u003E\u003Cp\u003ESVG (Scalable Vector Graphics, \tмасштабируемые \r\n векторные изображения)\u003Cbr\u003E","\u003Cp\u003EФорматы рисунков\u003Cbr\u003E\u003Cp\u003EWebP — новый формат, созданный и развиваемый с 2010 года компанией Google.\u003Cbr\u003EГлавная цель этого проекта — ещё больше уменьшить вес при сохранении такого же качества.\u003Cbr\u003EФормат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.\u003Cbr\u003EОсобенности WebP:\u003Cbr\u003Eсжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);\u003Cbr\u003Eсжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);\u003Cbr\u003Eподдерживает прозрачность (альфа-канал).\u003Cbr\u003EИногда WebP сжимает изображение даже лучше, чем заявляет Google.\u003Cbr\u003E\u003Cp\u003EWebP: 26 килобайт. \u003Cbr\u003E\u003Cp\u003EJPEG: 44 килобайт\u003Cbr\u003E\u003Cp\u003EAvif – уникальный формат изображения\u003Cbr\u003E\u003Cp\u003EКачество лучше на 20%, чем формата WebP;\u003Cbr\u003EНа 50% выше, чем формат JPG.\r\nПравда, в некоторых случаях JPG позволяет сжимать с большим качеством изображения.\u003Cbr\u003E","\u003Cp\u003EФорматы в зависимости от цели использования\u003Cbr\u003E\u003Cp\u003EПод фотографическими изображениями понимаются полноцветные фотографии, чёрно-белые фотографии, полноцветные изображения, рисунки с большим количеством разноцветных деталей. \u003Cbr\u003EПод графикой, логотипами, иконками — графика со множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями, с прозрачностью.\u003Cbr\u003E","\u003Cp\u003EРисунки в документе\u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"night.jpg\"\u003E \u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"images\u002Fnight.jpg\"\u003E \u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"..\u002F..\u002Fimages\u002Fnight.jpg\"\u003E \u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"http:\u002F\u002Fexample.com\u002Fimg\u002Fnight.jpg\"\u003E \u003Cbr\u003E\u003Cp\u003Eиз той же папки:\u003Cbr\u003E\u003Cp\u003Eиз другой папки:\u003Cbr\u003E\u003Cp\u003Eс другого сервера:\u003Cbr\u003E\u003Cp\u003Eimage\r\n(изображение) \u003Cbr\u003E\u003Cp\u003Esource\r\n(источник) \u003Cbr\u003E","\u003Cp\u003EАтрибуты для картинок\u003Cbr\u003E\u003Cp\u003Ealt – альтернативный текст, который отображается на месте изображения, если по каким-либо причинам само изображение не может быть показано;\u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"flag.jpg\" alt=\"здесь должно быть изображение 150x200\" title = \"dfd\"\u003E \u003Cbr\u003E","\u003Cp\u003EКак загрузить картинку от show.html?\u003Cbr\u003E\u003Cp\u003E\u003Cimg src =\"..\u002Ffood\u002Fim1.jpg\"\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cimg src =\"..\u002Fim2.jpg\"\u003E \u003Cbr\u003E\u003Cp\u003E\u003Cimg src =\"..\u002F..\u002Fim3.jpg\"\u003E \u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"..\u002F..\u002Fhistory\u002Fim4.jpg\"\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"..\u002F..\u002Fhistory\u002Fbefore\u002Fim5.jpg\"\u003E\u003Cbr\u003E\u003Cp\u003Eim5.jpg\u003Cbr\u003E","\u003Cp\u003EГиперссылки (локальные)\u003Cbr\u003E\u003Cp\u003EПереход на \u003Cbr\u003E\u003Ca href=\"newpage.html\"\u003Eновую страницу\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003Eanchor \u003Cbr\u003E(якорь) \u003Cbr\u003E\u003Cp\u003Ehyper reference (гиперссылка) \u003Cbr\u003E\u003Cp\u003Eстраница в той же папке:\u003Cbr\u003E\u003Cp\u003Eво вложенной папке:\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"news\u002Finfo.htm\"\u003EИнформация \u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003Eв родительской папке:\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"..\u002Finfo.htm\"\u003EИнформация \u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003Eв соседней папке:\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"..\u002Fnews\u002Finfo.htm\"\u003EИнформация \u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"file.pdf\" download\u003E Скачать \u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003Eдля скачивания:\u003Cbr\u003E","\u003Cp\u003EГиперссылки (внешние)\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"http:\u002F\u002Fexample.net\u002Fnews\u002Finfo.htm\"\u003E Информация \u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003Eна URL:\u003Cbr\u003E\u003Cp\u003E для запуска почтовой программы:\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"mailto:[e-mail]\"\u003E\r\nНапишите мне!\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003E\u003Ca href=\"new.html\" target=\"_blank\"\u003E Открыть в новом окне\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003EЗагружает страницу в новое окно браузера\u003Cbr\u003E"],href:"\u002Finformatika\u002Fosnovy-html-i-css-3",href_category:"\u002Finformatika",date:1677733561,related:[{id:233411,name:"Модельно-ориентированное программирование. Основные вехи развития компьютеров",href:"\u002Finformatika\u002Fmodelno-orientirovannoe-programmirovanie-osnovnye-vehi-razvitiya",jpg:"jpg\u002F233411"},{id:235952,name:"Указатели и массивы",href:"\u002Finformatika\u002Fukazateli-i-massivy",jpg:"jpg\u002F235952"},{id:160073,name:"Мобильное приложение для нейрореабилитации Спикер",href:"\u002Finformatika\u002Fmobilnoe-prilozhenie-dlya-neyroreabilitatsii-spiker",jpg:"jpg\u002F160073"},{id:609917,name:"САПР. Решение чертежно-графических задач средствами компьютерной графики",href:"\u002Finformatika\u002Fsapr-reshenie-chertezhno-graficheskih-zadach-sredstvami",jpg:"jpg\u002F609917"},{id:145649,name:"Технологии создания и преобразования информационных объектов",href:"\u002Finformatika\u002Ftehnologii-sozdaniya-i-preobrazovaniya-informatsionnyh-obektov",jpg:"jpg\u002F145649"},{id:367576,name:"Эргономические требования к презентации",href:"\u002Finformatika\u002Fergonomicheskie-trebovaniya-k-prezentatsii",jpg:"jpg\u002F367576"},{id:302511,name:"Цифровое видео: Спасём жизнь вместе!",href:"\u002Finformatika\u002Ftsifrovoe-video-spasyom-zhizn-vmeste",jpg:"jpg\u002F302511"},{id:371135,name:"Информация в природе, обществе и технике",href:"\u002Finformatika\u002Finformatsiya-v-prirode-obshchestve-i-tehnike-1",jpg:"jpg\u002F371135"},{id:581249,name:"Прототип мобильного приложения для обучения правильной технике свинга при помощи AI",href:"\u002Finformatika\u002Fprototip-mobilnogo-prilozheniya-dlya-obucheniya-pravilnoy-5",jpg:"jpg\u002F581249"},{id:310497,name:"Правила написания электронного письма",href:"\u002Finformatika\u002Fpravila-napisaniya-elektronnogo-pisma",jpg:"jpg\u002F310497"},{id:248083,name:"Системы управления сетями и услугами телекоммуникаций",href:"\u002Finformatika\u002Fsistemy-upravleniya-setyami-i-uslugami-telekommunikatsiy",jpg:"jpg\u002F248083"},{id:302690,name:"Величини текстового типу, операції над ними",href:"\u002Finformatika\u002Fvelichini-tekstovogo-tipu-operats-nad-nimi",jpg:"jpg\u002F302690"},{id:259744,name:"Социальные сети в России",href:"\u002Finformatika\u002Fsotsialnye-seti-v-rossii-2",jpg:"jpg\u002F259744"},{id:129882,name:"Информационные системы в защите персональных данных",href:"\u002Finformatika\u002Finformatsionnye-sistemy-v-zashchite-personalnyh-dannyh",jpg:"jpg\u002F129882"},{id:235955,name:"Разработка алгоритмов обработки и способов хранения данных телефонного биллинга для построения автоматизированных систем",href:"\u002Finformatika\u002Frazrabotka-algoritmov-obrabotki-i-sposobov-hraneniya",jpg:"jpg\u002F235955"},{id:104705,name:"Webinar. Тренинг Обнаженная красота",href:"\u002Finformatika\u002Fwebinar-trening-obnazhennaya-krasota",jpg:"jpg\u002F104705"},{id:174797,name:"Системы счисления (1, 10, 16)",href:"\u002Finformatika\u002Fsistemy-schisleniya-1-10-16",jpg:"jpg\u002F174797"},{id:385956,name:"Типы данных и таблицы. Выборка данных из таблиц. Оператор select. (Тема 5)",href:"\u002Finformatika\u002Ftipy-dannyh-i-tablitsy-vyborka-dannyh",jpg:"jpg\u002F385956"},{id:332014,name:"Вступне практичне завдання на курси 2016 QAP INT. Технічні вимоги",href:"\u002Finformatika\u002Fvstupne-praktichne-zavdannya-na-kursi-2016",jpg:"jpg\u002F332014"},{id:143735,name:"Локальные сети",href:"\u002Finformatika\u002Flokalnye-seti-2",jpg:"jpg\u002F143735"},{id:144109,name:"Компьютерная анимация",href:"\u002Finformatika\u002Fkompyuternaya-animatsiya-2",jpg:"jpg\u002F144109"},{id:370657,name:"Программирование разветвляющихся алгоритмов в Turbo Pascal",href:"\u002Finformatika\u002Fprogrammirovanie-razvetvlyayushchihsya-algoritmov-v-turbo-pascal",jpg:"jpg\u002F370657"},{id:361009,name:"Інформаційно-технологічний центр. Відділ ServiceDesk",href:"\u002Finformatika\u002Fnformatsyno-tehnologchniy-tsentr-vddl-servicedesk",jpg:"jpg\u002F361009"},{id:436838,name:"Основні поняття математичної статистики",href:"\u002Finformatika\u002Fosnovn-ponyattya-matematichno-statistiki",jpg:"jpg\u002F436838"},{id:137221,name:"Программное обеспечение каталога ресурсов Интернет",href:"\u002Finformatika\u002Fprogrammnoe-obespechenie-kataloga-resursov-internet",jpg:"jpg\u002F137221"},{id:608821,name:"Представление о программных средах компьютерной графики и черчения, мультимедийных средах",href:"\u002Finformatika\u002Fpredstavlenie-o-programmnyh-sredah-kompyuternoy-grafiki-6",jpg:"jpg\u002F608821"},{id:323752,name:"Управление коммуникациями проекта",href:"\u002Finformatika\u002Fupravlenie-kommunikatsiyami-proekta-14",jpg:"jpg\u002F323752"},{id:329633,name:"Основные средства VBA",href:"\u002Finformatika\u002Fosnovnye-sredstva-vba",jpg:"jpg\u002F329633"}],navigation:{next:"\u002Finformatika\u002Forganizatsiya-obrabotki-bolshih-dannyh-lektsiya-4-5",next_name:"Организация обработки больших данных. Лекция 4",prev:"\u002Flingvistika\u002Fnavchayusya-zmnyuvati-slova-nazvi-predmetv-zmnyuvannya-1",prev_name:"Навчаюся змінювати слова — назви предметів. Змінювання іменників за зразком один — багато. Урок №36"}}},categories:{result:[{id:I,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:I,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:G,pseudoname:"informatika"},{id:109,ordering:H,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:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,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:e,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,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:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Основы HTML и CSS","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","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","Информатика",9,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Задание 1. Cоздайте html-файл (кодировка utf-8) с заголовком "Задача 1", результат которого показан на рисунке. Используйте подходящий тег заголовков (
-
), теги
,
,
,
,
,
(необязательно все перечисленные). В html-код добавьте комментарии: дату решения данной задачи и ФИО.
Задание 2. Создайте html-файл (кодировка utf-8) с заголовком "Задача 2", результат которого показан на рисунке. Используйте подходящий тег заголовков (h1-h6), теги
,
,
,
,
,
,
,
(необязательно все перечисленные). Обратите внимание, что шрифт фамилии автора меньшего размера. Заметим, что тег
в разных браузерах может отображаться по-разному. В html-код добавьте условие данной задачи в виде комментариев.
Стихотворение
Мириады маленьких дел
Пьют по капле гаснущий день,
А дела большие сушит жажда.
Оставляя все на «потом»,
Прозреваем задним числом,
Только день не повторится дважды.
И.Тальков
образец
копировать
Не позволяй душе лениться
Не позволяй душе лениться!
Чтоб в ступе воду не толочь,
Душа обязана трудиться
И день и ночь, и день и ночь!
Гони ее от дома к дому,
Тащи с этапа на этап,
По пустырю, по бурелому
Через сугроб, через ухаб!
Не разрешай ей спать в постели
При свете утренней звезды,
Держи лентяйку в черном теле
И не снимай с нее узды!
В.Заболоцкий
образец
копировать

Задание 3. Создайте html-файл, результат которого показан на рисунке.
Используйте тег
и
Код программы
for (int i=0; i<10; i++)
{
cout<
образец
копировать
Задание 4. Воссоздайте код представленной html-страницы. Используйте тег
, пробелы и обычные точки или звездочки.

Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь (LZW)
прозрачные области
анимация
только с палитрой (2…256 цветов)
рисунки
с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото
PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
SVG (Scalable Vector Graphics, масштабируемые векторные изображения)

Форматы рисунков
WebP — новый формат, созданный и развиваемый с 2010 года компанией Google.
Главная цель этого проекта —
ещё больше уменьшить вес при сохранении такого же качества.
Формат использует новый алгоритм сжатия, в котором искажения отличаются от искажений других форматов. Ухудшается детализация и структура, в то время как края остаются чёткими.
Особенности WebP:
сжимает изображения без потерь лучше, чем PNG (на 26% по данным Google);
сжимает изображения с потерями лучше, чем JPEG (на 25–34% по данным Google);
поддерживает прозрачность (альфа-канал).
Иногда WebP сжимает изображение даже лучше, чем заявляет Google.
WebP: 26 килобайт.
JPEG: 44 килобайт
Avif – уникальный формат изображения
Качество лучше на 20%, чем формата WebP;
На 50% выше, чем формат JPG.
Правда, в некоторых случаях JPG позволяет сжимать с большим качеством изображения.

Форматы в зависимости от цели использования
Под фотографическими изображениями понимаются полноцветные фотографии, чёрно-белые фотографии, полноцветные изображения,
рисунки с большим количеством разноцветных деталей.
Под графикой, логотипами, иконками — графика со множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями, с прозрачностью.

Рисунки в документе
из той же
папки:
из другой папки:
с другого сервера:
image
(изображение)
source
(источник)

Атрибуты для картинок
alt – альтернативный текст, который отображается на месте изображения, если по
каким-либо причинам само изображение не может быть показано;

Как загрузить картинку от show.html?
src="../../history/im4.jpg">
im5.jpg

Гиперссылки (локальные)
Переход на
новую страницу
anchor
(якорь)
hyper reference (гиперссылка)
страница в той
же папке:
во вложенной папке:
Информация
в родительской папке:
Информация
в соседней папке:
Информация
Скачать
для скачивания: