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

Оглавление
Занятие № 1. Создание первого HTML-документа
Занятие № 2. Физическое форматирование
(форматирование шрифта)
Занятие № 3. Использование списков
при оформлении текстов.
Занятие № 4. Оформление таблиц в HTML-документе.
Занятие № 5. Графика в HTML- документе.
Занятие № 6. Гиперссылки в HTML- документе.
Практикум по HTML.

Занятие № 1.
Создание первого HTML-документа
Знакомство со структурой HTML-документа.
HTML-документ заключается в теги и .
Между этими тегами два блока:
- блок заголовка - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:
Название страницы
.
- тело документа - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.
Задание:
а) создать HTML-документ:
Название страницы
Пример страницы
б) Сохранить документ в файле с именем index.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 1.
Создание первого HTML-документа
Логическое форматирование.
а) Оформление заголовков:
n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания -
- выравнивание по левому краю
- выравнивание по центру
- выравнивание по правому краю
б) Оформление параграфа (абзаца):
или с выравниванием
в) Перевод на новую строку:
Задание:
а) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку.
б) Сохранить новый документ в файле с именем index1.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 2.
Физическое форматирование (форматирование шрифта)
а)
(
) полужирное начертание (
) курсивное начертание
подчеркнутый шрифт
- задание параметров шрифта.
атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3
атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)
атрибут face – название типа шрифта
Атрибуты можно использовать в любом сочетании.
Горизонтальный разделитель:
- горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании,
size – толщина линии в пикселях,
width – ширина линии в пикселях,
color – цвет линии (название или код цвета).
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 2.
Физическое форматирование (форматирование шрифта)
Задание:
а) создать HTML-документ (на основе файла index.html), в котором будут заданы параметры форматирования текста (например, небольшой текст на тему краеведения).
б) Сохранить документ в файле с именем index2.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Пример текста:
Вокзал и Bell-vue
У пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне оправдывает это название.
В продолжение летнего сезона в вокзале и Bell-vue помещается кафе-ресторан. В обширной, светлой зале вокзала устраиваются петергофскими жителями летом балы, в саду вокзала играет оркестр.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 3. Использование списков при оформлении текстов
Текст с перечислением – список. Выделяют два основных вида списков – маркированный и нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен.
а) Оформление маркированного списка:
элемент списка
элемент списка
. . . . . . . . .
элемент списка
атрибут type – вид маркера (вводится в теге
)
type=circle - маркер в виде небольшой окружности ○
type=disc - маркер в виде закрашенной окружности ●
type=square - маркер в виде закрашенного квадратика ■
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 3. Использование списков
при оформлении текстов
б) Оформление нумерованного списка: элемент списка
элемент списка
. . . . . . . . .
элемент списка
атрибут type – вид нумерации (вводится в теге
)
type=1 - арабская нумерация (1,2,3 …)
type=I - римская нумерация заглавными буквами (I, II, III, IV)
type=I - римская нумерация строчными буквами (i, ii, iii, iv )
type=A - нумерация латинскими заглавными буквами (A,B,C,D…)
type=a - нумерация латинскими строчными буквами (a,b,c,d…)
атрибут start=число в выбранной системе нумерации (стартовое число)
Атрибуты записываются в открывающиеся теги
или
.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 3. Использование списков
при оформлении текстов
Задание:
а) оформить
HTML-документ
(на основе файла
index.html),
содержащий 6 списков
(см. след. слайд,
расположить
друг под другом)
б) Сохранить документ в файле с именем index3.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Дни недели:
Понедельник
Вторник
Среда
Четверг
Пятница
Суббота
Воскресенье
Времена года:
Зима
Весна
Лето
Осень
Летние месяцы:
Июнь
Июль
Август
Занятие № 3. Использование списков
при оформлении текстов
Виды информации,
воспринимаемой человеком:
Зрительная
Слуховая
Осязательная
Обонятельная
Вкусовая
Виды информации,
воспринимаемой компьютером:
Числовая
Символьная
Графическая
Звуковая
Видео
Виды компьютерных сетей:
Локальные
Корпоративные
Региональные
Глобальные
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 4. Оформление таблиц
в HTML-документе
В практическом HTML-программировании таблицы совершенно незаменимы выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки.
Таблица задается командой …
. Внутри этих тегов задаются строки командами …, внутри строк задаются ячейки командами …. Таким образом, по строкам задается вся структура таблицы:
Атрибуты для тегов
, ,
:
border=число - толщина линии
bordercolor= цвет - цвет линии
bgcolor=цвет - цвет заливки фона
Атрибут width=число (или %) – ширина таблицы или ячейки в пикселях
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 12
Занятие № 4. Оформление таблиц
в HTML-документе
Задание:
а) создать HTML-документ (на основе
файла index.html), содержащий таблицу;
б) Сохранить документ в файле с именем index4.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 13
Занятие № 5. Графика в HTML- документе
Браузеры «понимают» три графических формата –
gif, jpg, png.
Формат gif. Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности: мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.
Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.
Формат jpg. Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов.
Графические файлы желательно хранить в отдельной папке.
Оформление фона:
атрибут background=”имя файла” – для тегов , ,
)
Вставка рисунков:
- имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 14
Занятие № 5. Графика в HTML- документе
Задание:
а) Создать папку для рисунков Image;
б)
Скопировать в папку Image файлы с понравившимися рисунками и фонами;
в) Создать html-документ следующего содержания:
оформить фон страницы;
в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;
в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.
г) Сохранить файл с именем index5.html в рабочей папке;
д) Просмотреть результат в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 15
Занятие № 6. Гиперссылки
в HTML- документе
Гипертекст – документ, содержащий ссылки на
другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.
Гиперссылка с одного файла на другой.
Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега
с атрибутом href=имя_файла:
текст или рисунок
Задание перехода к новому документу.
Гиперссылка внутри одного файла.
Для задания гипертекстового перехода внутри документа используют два тега
. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:
текст или рисунок
Задание перехода по метке. На экран выводится ссылка.
Метка. Сюда броузер переходит по ссылке. На экране ничего не отображается.
Метка – набор символов (латинских букв и (или) цифр).
Рисунок как гиперссылка:
Текст как гиперссылка:
текст
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 16
Занятие № 6. Гиперссылки
в HTML- документе
Задание:
Скопировать в рабочую папку html-файлы с
текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).
Создать в рабочей папке паку для изображений images.
Скопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .
Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.
В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.
Просмотреть результат работы в обозревателе Internet Explorer.
Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Имя файла: Практикум-по-основам-языка-разметки-гипертекстов-HTML.pptx
Количество просмотров: 39
Количество скачиваний: 0
Скачать
- Предыдущая
Ковровчане – герои Великой Отечественной войны
Следующая -
Милли ризыклар
Похожие презентации
Как перенести информацию из внешнего мира на какой-либо носитель
Поместите здесь ваш текст. Шаблон
Вещественные числа в языке Python
Сети датацентров и виртуализация. Вычислительные сети и телекоммуникации
Программа – редактор Текстовый редактор
Множественные выравнивания
Традиционный подход к вебпрограммированию на основе перезагрузки страницы. Тема 9
Работа с Интернет-магазином, Интернет-СМИ
Что такое клипарт. Клипарт в интернете
Нескучный текст
Современный педагог
Информационная система Учет нерозданных/невостребованных РПО
Информация. Повторение. 6 класс
10 сайтов, полезных для школьников
Сообщения Координатора CAN
Сложные условия в условном операторе
Тест по устройству ПК
Раньше-позже
Подключение к е-Факторинг 3.0
Мой брокер. Мир инвестиций. Основа для WhiteLabel партнерских проектов
Оплата за ЖКУ без комиссии
Scratch Middle. Чат-бот Урок 6
Коробочные продукты или стандартизированные решения типичных проблем бизнеса
Определение PDO
Електронна таблиця
Процесс DocuSign
Поиск максимальной деформации формы объекта вовремя 3D печати
Проектная работа. 2D-Игры
(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}},categories:{result:[{id:I,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:J,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:K,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:"Разное",pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:I,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:944149,name:"Практикум по основам языка разметки гипертекстов HTML",category:J,count:K,jpg:"jpg\u002F944149",hits:39,download:a,h1:L,meta:{h1:L,title:"Практикум по основам языка разметки гипертекстов HTML презентация",description:"Практикум по основам языка разметки гипертекстов HTML презентация, доклад, проект, Информатика ",keywords:"Практикум по основам языка разметки гипертекстов HTML, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Информатика",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Практикум по основам языка разметки гипертекстов HTML, из раздела: Информатика.  Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EОглавление\u003Cbr\u003E\u003Cp\u003EЗанятие № 1. Создание первого HTML-документа\u003Cbr\u003EЗанятие № 2. Физическое форматирование \r\n(форматирование шрифта)\u003Cbr\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов.\u003Cbr\u003EЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в HTML- документе.\t\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. \u003Cbr\u003E \u003Cp\u003EЗанятие № 1. \r\nСоздание первого HTML-документа\u003Cbr\u003E\u003Cp\u003EЗнакомство со структурой HTML-документа.\r\nHTML-документ заключается в теги \u003CHTML\u003E и \u003C\u002FHTML\u003E.\r\nМежду этими тегами два блока:\r\n- блок заголовка \u003CHEAD\u003E \u003C\u002FHEAD\u003E - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:\r\n\u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E .\r\n- тело документа \u003CBODY\u003E \u003C\u002FBODY\u003E - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.\u003Cbr\u003EЗадание:\r\nа) создать HTML-документ:\r\n\u003CHTML\u003E \r\n \u003CHEAD\u003E\r\n \u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E \r\n \u003C\u002FHEAD\u003E \r\n \u003CBODY\u003E\r\n Пример страницы\r\n \u003C\u002FBODY\u003E \r\n\u003C\u002FHTML\u003E\r\nб) Сохранить документ в файле с именем index.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E",file:"Практикум-по-основам-языка-разметки-гипертекстов-HTML.pptx",texts:["\u003Cp\u003EПРАКТИКУМ ПО ОСНОВАМ \r\nЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТОВ HTML\r\n\u003Cbr\u003E","\u003Cp\u003EОглавление\u003Cbr\u003E\u003Cp\u003EЗанятие № 1. Создание первого HTML-документа\u003Cbr\u003EЗанятие № 2. Физическое форматирование \r\n(форматирование шрифта)\u003Cbr\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов.\u003Cbr\u003EЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в HTML- документе.\t\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. \u003Cbr\u003E","\u003Cp\u003EЗанятие № 1. \r\nСоздание первого HTML-документа\u003Cbr\u003E\u003Cp\u003EЗнакомство со структурой HTML-документа.\r\nHTML-документ заключается в теги \u003CHTML\u003E и \u003C\u002FHTML\u003E.\r\nМежду этими тегами два блока:\r\n- блок заголовка \u003CHEAD\u003E \u003C\u002FHEAD\u003E - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:\r\n\u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E .\r\n- тело документа \u003CBODY\u003E \u003C\u002FBODY\u003E - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.\u003Cbr\u003EЗадание:\r\nа) создать HTML-документ:\r\n\u003CHTML\u003E \r\n \u003CHEAD\u003E\r\n \u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E \r\n \u003C\u002FHEAD\u003E \r\n \u003CBODY\u003E\r\n Пример страницы\r\n \u003C\u002FBODY\u003E \r\n\u003C\u002FHTML\u003E\r\nб) Сохранить документ в файле с именем index.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 1. \r\nСоздание первого HTML-документа\u003Cbr\u003E\u003Cp\u003EЛогическое форматирование.\r\nа) Оформление заголовков:\r\n\u003CHn\u003E \u003C\u002FHn\u003E n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания - \r\n\u003CHn align=left\u003E \u003C\u002FHn\u003E\t- выравнивание по левому краю\r\n\u003CHn align=center\u003E \u003C\u002FHn\u003E\t- выравнивание по центру\r\n\u003CHn align=right\u003E \u003C\u002FHn\u003E \t- выравнивание по правому краю\r\nб) Оформление параграфа (абзаца):\r\n\u003CP\u003E \u003C\u002FP\u003E или с выравниванием \u003CP align=......\u003E \u003C\u002FP\u003E\r\nв) Перевод на новую строку:\r\n\u003CBR\u003E\u003Cbr\u003EЗадание:\r\nа) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку.\r\nб) Сохранить новый документ в файле с именем index1.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 2. \r\nФизическое форматирование (форматирование шрифта)\u003Cbr\u003E\u003Cp\u003Eа)\u003Cstrong\u003E \u003C\u002Fstrong\u003E (\u003CB\u003E \u003C\u002FB\u003E)\tполужирное начертание\r\n \u003Cem\u003E\u003C\u002Fem\u003E ( \u003CI\u003E \u003C\u002FI\u003E) \t\tкурсивное начертание\r\n \u003CU\u003E \u003C\u002FU\u003E \t\t\t\tподчеркнутый шрифт\r\n\u003CFONT size=число color=цвет face= «тип шрифта» \u003E \u003C\u002FFONT\u003E - задание параметров шрифта.\r\nатрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3\r\nатрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)\r\nатрибут face – название типа шрифта\r\nАтрибуты можно использовать в любом сочетании.\u003Cbr\u003EГоризонтальный разделитель:\r\n\u003CHR size=число width=число color=цвет\u003E - горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании, \r\nsize – толщина линии в пикселях,\r\nwidth – ширина линии в пикселях,\r\ncolor – цвет линии (название или код цвета).\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 2. \r\nФизическое форматирование (форматирование шрифта)\u003Cbr\u003E\u003Cp\u003EЗадание:\r\nа) создать HTML-документ (на основе файла index.html), в котором будут заданы параметры форматирования текста (например, небольшой текст на тему краеведения).\r\nб) Сохранить документ в файле с именем index2.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003EПример текста:\u003Cbr\u003EВокзал и Bell-vue\u003Cbr\u003EУ пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне оправдывает это название.\u003Cbr\u003EВ продолжение летнего сезона в вокзале и Bell-vue помещается кафе-ресторан. В обширной, светлой зале вокзала устраиваются петергофскими жителями летом балы, в саду вокзала играет оркестр.\u003Cbr\u003E\r\n\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 3. Использование списков при оформлении текстов\u003Cbr\u003E\u003Cp\u003EТекст с перечислением – список. Выделяют два основных вида списков – маркированный и нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен.\r\nа) Оформление маркированного списка:\r\n\u003Cbr\u003E\u003CUL\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n. . . . . . . . .\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n\u003C\u002FUL\u003E\r\n\u003Cbr\u003Eатрибут type – вид маркера (вводится в теге \u003CUL\u003E)\r\ntype=circle \t- маркер в виде небольшой окружности ○\r\ntype=disc\t- маркер в виде закрашенной окружности ●\r\ntype=square\t- маркер в виде закрашенного квадратика ■\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов\u003Cbr\u003E\u003Cp\u003Eб) Оформление нумерованного списка:\u003Cbr\u003E\u003COL\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n. . . . . . . . .\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n\u003C\u002FOL\u003E\r\n\u003Cbr\u003Eатрибут type – вид нумерации (вводится в теге \u003COL\u003E)\r\ntype=1 \t- арабская нумерация (1,2,3 …)\r\ntype=I\t- римская нумерация заглавными буквами (I, II, III, IV)\r\ntype=I\t- римская нумерация строчными буквами (i, ii, iii, iv )\r\ntype=A - нумерация латинскими заглавными буквами (A,B,C,D…)\r\ntype=a\t- нумерация латинскими строчными буквами (a,b,c,d…)\r\nатрибут start=число в выбранной системе нумерации (стартовое число)\u003Cbr\u003EАтрибуты записываются в открывающиеся теги \u003CUL\u003E или \u003COL\u003E.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов\u003Cbr\u003E\u003Cp\u003EЗадание:\r\nа) оформить \r\nHTML-документ \r\n(на основе файла \r\nindex.html), \r\nсодержащий 6 списков \r\n(см. след. слайд, \r\nрасположить \r\nдруг под другом)\r\n\u003Cbr\u003E\u003Cp\u003Eб) Сохранить документ в файле с именем index3.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EДни недели:\u003Cbr\u003EПонедельник\u003Cbr\u003EВторник\u003Cbr\u003EСреда\u003Cbr\u003EЧетверг\u003Cbr\u003EПятница\u003Cbr\u003EСуббота\u003Cbr\u003EВоскресенье\u003Cbr\u003EВремена года:\u003Cbr\u003EЗима\u003Cbr\u003EВесна\u003Cbr\u003EЛето\u003Cbr\u003EОсень\u003Cbr\u003E Летние месяцы:\u003Cbr\u003EИюнь\u003Cbr\u003EИюль\u003Cbr\u003EАвгуст\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов\u003Cbr\u003E\u003Cp\u003EВиды информации,\u003Cbr\u003Eвоспринимаемой человеком:\u003Cbr\u003EЗрительная\u003Cbr\u003EСлуховая\u003Cbr\u003EОсязательная\u003Cbr\u003EОбонятельная\u003Cbr\u003EВкусовая\u003Cbr\u003EВиды информации,\u003Cbr\u003Eвоспринимаемой компьютером:\u003Cbr\u003EЧисловая\u003Cbr\u003EСимвольная\u003Cbr\u003EГрафическая\u003Cbr\u003EЗвуковая \u003Cbr\u003EВидео\u003Cbr\u003EВиды компьютерных сетей:\u003Cbr\u003EЛокальные\u003Cbr\u003EКорпоративные\u003Cbr\u003EРегиональные\u003Cbr\u003EГлобальные\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 4. Оформление таблиц \r\nв HTML-документе\u003Cbr\u003E\u003Cp\u003EВ практическом HTML-программировании таблицы совершенно незаменимы выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки.\u003Cbr\u003EТаблица задается командой \u003CTABLE\u003E…\u003C\u002FTABLE\u003E . Внутри этих тегов задаются строки командами \u003CTR\u003E…\u003C\u002FTR\u003E, внутри строк задаются ячейки командами \u003CTD\u003E…\u003C\u002FTD\u003E. Таким образом, по строкам задается вся структура таблицы:\u003Cbr\u003E\u003CTABLE\u003E\u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003C\u002FTR\u003E\u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003C\u002FTABLE\u003E\u003Cbr\u003E\u003Cp\u003EАтрибуты для тегов \u003CTABLE\u003E, \u003CTR\u003E, \u003CTD\u003E:\r\nborder=число\t- толщина линии\r\nbordercolor= цвет\t- цвет линии\r\nbgcolor=цвет\t- цвет заливки фона\r\nАтрибут width=число (или %) – ширина таблицы или ячейки в пикселях\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 4. Оформление таблиц\r\n в HTML-документе\u003Cbr\u003E\u003Cp\u003EЗадание: \r\nа) создать HTML-документ (на основе файла index.html), содержащий таблицу;\u003Cbr\u003Eб) Сохранить документ в файле с именем index4.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 5. Графика в HTML- документе\u003Cbr\u003E\u003Cp\u003EБраузеры «понимают» три графических формата – gif, jpg, png.\u003Cbr\u003EФормат gif. Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности: мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.\u003Cbr\u003EПрозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.\u003Cbr\u003EФормат jpg. Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов. \u003Cbr\u003EГрафические файлы желательно хранить в отдельной папке.\u003Cbr\u003EОформление фона:\r\nатрибут background=”имя файла” – для тегов \u003CBODY\u003E, \u003CTABLE\u003E, \u003CTD\u003E)\u003Cbr\u003EВставка рисунков:\r\n\u003CIMG src=”имя файла” width=число height=число\u003E - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 5. Графика в HTML- документе\u003Cbr\u003E\u003Cp\u003EЗадание:\u003Cbr\u003Eа) Создать папку для рисунков Image;\u003Cbr\u003Eб) Скопировать в папку Image файлы с понравившимися рисунками и фонами;\u003Cbr\u003Eв) Создать html-документ следующего содержания:\u003Cbr\u003Eоформить фон страницы; \u003Cbr\u003Eв ячейки, помеченные *, вставить рисунки, указав размеры рисунка; \u003Cbr\u003Eв ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.\u003Cbr\u003E\u003Cbr\u003Eг) Сохранить файл с именем index5.html в рабочей папке;\u003Cbr\u003Eд) Просмотреть результат в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 6. Гиперссылки \r\nв HTML- документе\u003Cbr\u003E\u003Cp\u003EГипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.\u003Cbr\u003EГиперссылка с одного файла на другой. \r\nДля того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега \u003CA\u003E с атрибутом href=имя_файла:\r\n\u003CA href=имя_файла\u003Eтекст или рисунок\u003C\u002FA\u003E\tЗадание перехода к новому документу.\u003Cbr\u003EГиперссылка внутри одного файла.\r\nДля задания гипертекстового перехода внутри документа используют два тега \u003CA\u003E. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:\r\n\u003CA href=#метка\u003E текст или рисунок \u003C\u002FA\u003E\t\tЗадание перехода по метке. На экран \t\t\t\t\tвыводится ссылка.\u003Cbr\u003E\t\u003CA name=метка\u003E\u003C\u002FA\u003E\t\t\tМетка. Сюда броузер переходит по ссылке. \t\t\t\t\tНа экране ничего не отображается.\u003Cbr\u003EМетка – набор символов (латинских букв и (или) цифр).\u003Cbr\u003EРисунок как гиперссылка:\r\n\u003CA href=имя_файла1\u003E \u003CIMG src=имя_файла width=число height=число\u003E \u003C\u002FA\u003E\u003Cbr\u003EТекст как гиперссылка:\r\n\u003CA href=имя_файла\u003Eтекст\u003C\u002FA\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 6. Гиперссылки \r\nв HTML- документе\u003Cbr\u003E\u003Cp\u003EЗадание:\u003Cbr\u003EСкопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).\u003Cbr\u003EСоздать в рабочей папке паку для изображений images.\u003Cbr\u003EСкопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .\u003Cbr\u003EСоздать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.\u003Cbr\u003EВ файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.\u003Cbr\u003EПросмотреть результат работы в обозревателе Internet Explorer.\u003Cbr\u003EОтформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EСписок использованных источников\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fab-w.net\u002F - самоучитель по сайтостроению\u003Cbr\u003Ehttp:\u002F\u002Fevgeniypopov.com\u002F - видеоуроки по HTML \r\nи CSS \u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E"],href:"\u002Fprezentacii-po-informatike\u002Fpraktikum-po-osnovam-yazyka-razmetki-gipertekstov-1",href_category:"\u002Fprezentacii-po-informatike",date:1614773502,related:[{id:985825,name:"Как перенести информацию из внешнего мира на какой-либо носитель",href:"\u002Fprezentacii-po-informatike\u002Fkak-perenesti-informatsiyu-iz-vneshnego-mira",jpg:"jpg\u002F985825"},{id:926602,name:"Поместите здесь ваш текст. Шаблон",href:"\u002Fprezentacii-po-informatike\u002Fpomestite-zdes-vash-tekst-shablon",jpg:"jpg\u002F926602"},{id:862577,name:"Вещественные числа в языке Python",href:"\u002Fprezentacii-po-informatike\u002Fveshchestvennye-chisla-v-yazyke-python",jpg:"jpg\u002F862577"},{id:993454,name:"Сети датацентров и виртуализация. Вычислительные сети и телекоммуникации",href:"\u002Fprezentacii-po-informatike\u002Fseti-datatsentrov-i-virtualizatsiya-vychislitelnye-seti",jpg:"jpg\u002F993454"},{id:1095590,name:"Программа – редактор Текстовый редактор",href:"\u002Fprezentacii-po-informatike\u002Fprogramma--redaktor-tekstovyy-redaktor",jpg:"jpg\u002F1095590"},{id:857692,name:"Множественные выравнивания",href:"\u002Fprezentacii-po-informatike\u002Fmnozhestvennye-vyravnivaniya-6c-2",jpg:"jpg\u002F857692"},{id:1107774,name:"Традиционный подход к вебпрограммированию на основе перезагрузки страницы. Тема 9",href:"\u002Fprezentacii-po-informatike\u002Ftraditsionnyy-podhod-k-vebprogrammirovaniyu-na-osnove",jpg:"jpg\u002F1107774"},{id:1107002,name:"Работа с Интернет-магазином, Интернет-СМИ",href:"\u002Fprezentacii-po-informatike\u002Frabota-s-internet-magazinom-internet-smi-8",jpg:"jpg\u002F1107002"},{id:1069685,name:"Что такое клипарт. Клипарт в интернете",href:"\u002Fprezentacii-po-informatike\u002Fchto-takoe-klipart-klipart-v-internete",jpg:"jpg\u002F1069685"},{id:1105915,name:"Нескучный текст",href:"\u002Fprezentacii-po-informatike\u002Fneskuchnyy-tekst",jpg:"jpg\u002F1105915"},{id:1039278,name:"Современный педагог",href:"\u002Fprezentacii-po-informatike\u002Fsovremennyy-pedagog-2",jpg:"jpg\u002F1039278"},{id:845413,name:"Информационная система Учет нерозданных\u002Fневостребованных РПО",href:"\u002Fprezentacii-po-informatike\u002Finformatsionnaya-sistema-uchet-nerozdannyhnevostrebovannyh-rpo",jpg:"jpg\u002F845413"},{id:972748,name:"Информация. Повторение. 6 класс",href:"\u002Fprezentacii-po-informatike\u002Finformatsiya-povtorenie-6-klass",jpg:"jpg\u002F972748"},{id:942284,name:"10 сайтов, полезных для школьников",href:"\u002Fprezentacii-po-informatike\u002F10-saytov-poleznyh-dlya-shkolnikov",jpg:"jpg\u002F942284"},{id:914356,name:"Сообщения Координатора CAN",href:"\u002Fprezentacii-po-informatike\u002Fsoobshcheniya-koordinatora-can",jpg:"jpg\u002F914356"},{id:1044550,name:"Сложные условия в условном операторе",href:"\u002Fprezentacii-po-informatike\u002Fslozhnye-usloviya-v-uslovnom-operatore",jpg:"jpg\u002F1044550"},{id:1118603,name:"Тест по устройству ПК",href:"\u002Fprezentacii-po-informatike\u002Ftest-po-ustroystvu-pk",jpg:"jpg\u002F1118603"},{id:841055,name:"Раньше-позже",href:"\u002Fprezentacii-po-informatike\u002Franshe-pozzhe-3",jpg:"jpg\u002F841055"},{id:1094531,name:"Подключение к е-Факторинг 3.0",href:"\u002Fprezentacii-po-informatike\u002Fpodklyuchenie-k-e-faktoring-30-31",jpg:"jpg\u002F1094531"},{id:1107627,name:"Мой брокер. Мир инвестиций. Основа для WhiteLabel партнерских проектов",href:"\u002Fprezentacii-po-informatike\u002Fmoy-broker-mir-investitsiy-osnova-dlya",jpg:"jpg\u002F1107627"},{id:1078933,name:"Оплата за ЖКУ без комиссии",href:"\u002Fprezentacii-po-informatike\u002Foplata-za-zhku-bez-komissii",jpg:"jpg\u002F1078933"},{id:912426,name:"Scratch Middle. Чат-бот Урок 6",href:"\u002Fprezentacii-po-informatike\u002Fscratch-middle-chat-bot-urok-6",jpg:"jpg\u002F912426"},{id:994600,name:"Коробочные продукты или стандартизированные решения типичных проблем бизнеса",href:"\u002Fprezentacii-po-informatike\u002Fkorobochnye-produkty-ili-standartizirovannye-resheniya-tipichnyh",jpg:"jpg\u002F994600"},{id:1047101,name:"Определение PDO",href:"\u002Fprezentacii-po-informatike\u002Fopredelenie-pdo",jpg:"jpg\u002F1047101"},{id:913102,name:"Електронна таблиця",href:"\u002Fprezentacii-po-informatike\u002Felektronna-tablitsya",jpg:"jpg\u002F913102"},{id:1011347,name:"Процесс DocuSign",href:"\u002Fprezentacii-po-informatike\u002Fprotsess-docusign",jpg:"jpg\u002F1011347"},{id:1069325,name:"Поиск максимальной деформации формы объекта вовремя 3D печати",href:"\u002Fprezentacii-po-informatike\u002Fpoisk-maksimalnoy-deformatsii-formy-obekta-vovremya",jpg:"jpg\u002F1069325"},{id:1020645,name:"Проектная работа. 2D-Игры",href:"\u002Fprezentacii-po-informatike\u002Fproektnaya-rabota-2d-igry",jpg:"jpg\u002F1020645"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fmilli-rizyklar-2",next_name:"Милли ризыклар",prev:"\u002Fprezentacii-po-istorii\u002Fkovrovchane--geroi-velikoy-otechestvennoy-voyny",prev_name:"Ковровчане – герои Великой Отечественной войны"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:M,SITE_HOST:"slaidy.com",SITE_LANG:N,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:M,short_name:b,description:b,lang:N,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:U,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1: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",1,"Информатика",17,"Практикум по основам языка разметки гипертекстов HTML ","Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Занятие № 4. Оформление таблиц
в HTML-документе
Задание:
а) создать HTML-документ (на основе файла index.html), содержащий таблицу;
б) Сохранить документ в файле с именем index4.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 5. Графика в HTML- документе
Браузеры «понимают» три графических формата – gif, jpg, png.
Формат gif. Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности: мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.
Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.
Формат jpg. Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов.
Графические файлы желательно хранить в отдельной папке.
Оформление фона:
атрибут background=”имя файла” – для тегов , ,
)
Вставка рисунков:
- имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 14
Занятие № 5. Графика в HTML- документе
Задание:
а) Создать папку для рисунков Image;
б)
Скопировать в папку Image файлы с понравившимися рисунками и фонами;
в) Создать html-документ следующего содержания:
оформить фон страницы;
в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;
в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.
г) Сохранить файл с именем index5.html в рабочей папке;
д) Просмотреть результат в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 15
Занятие № 6. Гиперссылки
в HTML- документе
Гипертекст – документ, содержащий ссылки на
другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.
Гиперссылка с одного файла на другой.
Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега
с атрибутом href=имя_файла:
текст или рисунок
Задание перехода к новому документу.
Гиперссылка внутри одного файла.
Для задания гипертекстового перехода внутри документа используют два тега
. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:
текст или рисунок
Задание перехода по метке. На экран выводится ссылка.
Метка. Сюда броузер переходит по ссылке. На экране ничего не отображается.
Метка – набор символов (латинских букв и (или) цифр).
Рисунок как гиперссылка:
Текст как гиперссылка:
текст
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Слайд 16
Занятие № 6. Гиперссылки
в HTML- документе
Задание:
Скопировать в рабочую папку html-файлы с
текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).
Создать в рабочей папке паку для изображений images.
Скопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .
Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.
В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.
Просмотреть результат работы в обозревателе Internet Explorer.
Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова
Имя файла: Практикум-по-основам-языка-разметки-гипертекстов-HTML.pptx
Количество просмотров: 39
Количество скачиваний: 0
Скачать
- Предыдущая
Ковровчане – герои Великой Отечественной войны
Следующая -
Милли ризыклар
Похожие презентации
Как перенести информацию из внешнего мира на какой-либо носитель
Поместите здесь ваш текст. Шаблон
Вещественные числа в языке Python
Сети датацентров и виртуализация. Вычислительные сети и телекоммуникации
Программа – редактор Текстовый редактор
Множественные выравнивания
Традиционный подход к вебпрограммированию на основе перезагрузки страницы. Тема 9
Работа с Интернет-магазином, Интернет-СМИ
Что такое клипарт. Клипарт в интернете
Нескучный текст
Современный педагог
Информационная система Учет нерозданных/невостребованных РПО
Информация. Повторение. 6 класс
10 сайтов, полезных для школьников
Сообщения Координатора CAN
Сложные условия в условном операторе
Тест по устройству ПК
Раньше-позже
Подключение к е-Факторинг 3.0
Мой брокер. Мир инвестиций. Основа для WhiteLabel партнерских проектов
Оплата за ЖКУ без комиссии
Scratch Middle. Чат-бот Урок 6
Коробочные продукты или стандартизированные решения типичных проблем бизнеса
Определение PDO
Електронна таблиця
Процесс DocuSign
Поиск максимальной деформации формы объекта вовремя 3D печати
Проектная работа. 2D-Игры
(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}},categories:{result:[{id:I,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:J,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:K,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:"Разное",pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:I,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:944149,name:"Практикум по основам языка разметки гипертекстов HTML",category:J,count:K,jpg:"jpg\u002F944149",hits:39,download:a,h1:L,meta:{h1:L,title:"Практикум по основам языка разметки гипертекстов HTML презентация",description:"Практикум по основам языка разметки гипертекстов HTML презентация, доклад, проект, Информатика ",keywords:"Практикум по основам языка разметки гипертекстов HTML, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Информатика",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Практикум по основам языка разметки гипертекстов HTML, из раздела: Информатика.  Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003EОглавление\u003Cbr\u003E\u003Cp\u003EЗанятие № 1. Создание первого HTML-документа\u003Cbr\u003EЗанятие № 2. Физическое форматирование \r\n(форматирование шрифта)\u003Cbr\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов.\u003Cbr\u003EЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в HTML- документе.\t\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. \u003Cbr\u003E \u003Cp\u003EЗанятие № 1. \r\nСоздание первого HTML-документа\u003Cbr\u003E\u003Cp\u003EЗнакомство со структурой HTML-документа.\r\nHTML-документ заключается в теги \u003CHTML\u003E и \u003C\u002FHTML\u003E.\r\nМежду этими тегами два блока:\r\n- блок заголовка \u003CHEAD\u003E \u003C\u002FHEAD\u003E - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:\r\n\u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E .\r\n- тело документа \u003CBODY\u003E \u003C\u002FBODY\u003E - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.\u003Cbr\u003EЗадание:\r\nа) создать HTML-документ:\r\n\u003CHTML\u003E \r\n \u003CHEAD\u003E\r\n \u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E \r\n \u003C\u002FHEAD\u003E \r\n \u003CBODY\u003E\r\n Пример страницы\r\n \u003C\u002FBODY\u003E \r\n\u003C\u002FHTML\u003E\r\nб) Сохранить документ в файле с именем index.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E",file:"Практикум-по-основам-языка-разметки-гипертекстов-HTML.pptx",texts:["\u003Cp\u003EПРАКТИКУМ ПО ОСНОВАМ \r\nЯЗЫКА РАЗМЕТКИ ГИПЕРТЕКСТОВ HTML\r\n\u003Cbr\u003E","\u003Cp\u003EОглавление\u003Cbr\u003E\u003Cp\u003EЗанятие № 1. Создание первого HTML-документа\u003Cbr\u003EЗанятие № 2. Физическое форматирование \r\n(форматирование шрифта)\u003Cbr\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов.\u003Cbr\u003EЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в HTML- документе.\t\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. \u003Cbr\u003E","\u003Cp\u003EЗанятие № 1. \r\nСоздание первого HTML-документа\u003Cbr\u003E\u003Cp\u003EЗнакомство со структурой HTML-документа.\r\nHTML-документ заключается в теги \u003CHTML\u003E и \u003C\u002FHTML\u003E.\r\nМежду этими тегами два блока:\r\n- блок заголовка \u003CHEAD\u003E \u003C\u002FHEAD\u003E - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:\r\n\u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E .\r\n- тело документа \u003CBODY\u003E \u003C\u002FBODY\u003E - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.\u003Cbr\u003EЗадание:\r\nа) создать HTML-документ:\r\n\u003CHTML\u003E \r\n \u003CHEAD\u003E\r\n \u003CTITLE\u003E Название страницы \u003C\u002FTITLE\u003E \r\n \u003C\u002FHEAD\u003E \r\n \u003CBODY\u003E\r\n Пример страницы\r\n \u003C\u002FBODY\u003E \r\n\u003C\u002FHTML\u003E\r\nб) Сохранить документ в файле с именем index.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 1. \r\nСоздание первого HTML-документа\u003Cbr\u003E\u003Cp\u003EЛогическое форматирование.\r\nа) Оформление заголовков:\r\n\u003CHn\u003E \u003C\u002FHn\u003E n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания - \r\n\u003CHn align=left\u003E \u003C\u002FHn\u003E\t- выравнивание по левому краю\r\n\u003CHn align=center\u003E \u003C\u002FHn\u003E\t- выравнивание по центру\r\n\u003CHn align=right\u003E \u003C\u002FHn\u003E \t- выравнивание по правому краю\r\nб) Оформление параграфа (абзаца):\r\n\u003CP\u003E \u003C\u002FP\u003E или с выравниванием \u003CP align=......\u003E \u003C\u002FP\u003E\r\nв) Перевод на новую строку:\r\n\u003CBR\u003E\u003Cbr\u003EЗадание:\r\nа) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку.\r\nб) Сохранить новый документ в файле с именем index1.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 2. \r\nФизическое форматирование (форматирование шрифта)\u003Cbr\u003E\u003Cp\u003Eа)\u003Cstrong\u003E \u003C\u002Fstrong\u003E (\u003CB\u003E \u003C\u002FB\u003E)\tполужирное начертание\r\n \u003Cem\u003E\u003C\u002Fem\u003E ( \u003CI\u003E \u003C\u002FI\u003E) \t\tкурсивное начертание\r\n \u003CU\u003E \u003C\u002FU\u003E \t\t\t\tподчеркнутый шрифт\r\n\u003CFONT size=число color=цвет face= «тип шрифта» \u003E \u003C\u002FFONT\u003E - задание параметров шрифта.\r\nатрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3\r\nатрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)\r\nатрибут face – название типа шрифта\r\nАтрибуты можно использовать в любом сочетании.\u003Cbr\u003EГоризонтальный разделитель:\r\n\u003CHR size=число width=число color=цвет\u003E - горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании, \r\nsize – толщина линии в пикселях,\r\nwidth – ширина линии в пикселях,\r\ncolor – цвет линии (название или код цвета).\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 2. \r\nФизическое форматирование (форматирование шрифта)\u003Cbr\u003E\u003Cp\u003EЗадание:\r\nа) создать HTML-документ (на основе файла index.html), в котором будут заданы параметры форматирования текста (например, небольшой текст на тему краеведения).\r\nб) Сохранить документ в файле с именем index2.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003EПример текста:\u003Cbr\u003EВокзал и Bell-vue\u003Cbr\u003EУ пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне оправдывает это название.\u003Cbr\u003EВ продолжение летнего сезона в вокзале и Bell-vue помещается кафе-ресторан. В обширной, светлой зале вокзала устраиваются петергофскими жителями летом балы, в саду вокзала играет оркестр.\u003Cbr\u003E\r\n\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 3. Использование списков при оформлении текстов\u003Cbr\u003E\u003Cp\u003EТекст с перечислением – список. Выделяют два основных вида списков – маркированный и нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен.\r\nа) Оформление маркированного списка:\r\n\u003Cbr\u003E\u003CUL\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n. . . . . . . . .\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n\u003C\u002FUL\u003E\r\n\u003Cbr\u003Eатрибут type – вид маркера (вводится в теге \u003CUL\u003E)\r\ntype=circle \t- маркер в виде небольшой окружности ○\r\ntype=disc\t- маркер в виде закрашенной окружности ●\r\ntype=square\t- маркер в виде закрашенного квадратика ■\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов\u003Cbr\u003E\u003Cp\u003Eб) Оформление нумерованного списка:\u003Cbr\u003E\u003COL\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n. . . . . . . . .\r\n \u003CLI\u003E элемент списка \u003C\u002FLI\u003E\r\n\u003C\u002FOL\u003E\r\n\u003Cbr\u003Eатрибут type – вид нумерации (вводится в теге \u003COL\u003E)\r\ntype=1 \t- арабская нумерация (1,2,3 …)\r\ntype=I\t- римская нумерация заглавными буквами (I, II, III, IV)\r\ntype=I\t- римская нумерация строчными буквами (i, ii, iii, iv )\r\ntype=A - нумерация латинскими заглавными буквами (A,B,C,D…)\r\ntype=a\t- нумерация латинскими строчными буквами (a,b,c,d…)\r\nатрибут start=число в выбранной системе нумерации (стартовое число)\u003Cbr\u003EАтрибуты записываются в открывающиеся теги \u003CUL\u003E или \u003COL\u003E.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов\u003Cbr\u003E\u003Cp\u003EЗадание:\r\nа) оформить \r\nHTML-документ \r\n(на основе файла \r\nindex.html), \r\nсодержащий 6 списков \r\n(см. след. слайд, \r\nрасположить \r\nдруг под другом)\r\n\u003Cbr\u003E\u003Cp\u003Eб) Сохранить документ в файле с именем index3.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EДни недели:\u003Cbr\u003EПонедельник\u003Cbr\u003EВторник\u003Cbr\u003EСреда\u003Cbr\u003EЧетверг\u003Cbr\u003EПятница\u003Cbr\u003EСуббота\u003Cbr\u003EВоскресенье\u003Cbr\u003EВремена года:\u003Cbr\u003EЗима\u003Cbr\u003EВесна\u003Cbr\u003EЛето\u003Cbr\u003EОсень\u003Cbr\u003E Летние месяцы:\u003Cbr\u003EИюнь\u003Cbr\u003EИюль\u003Cbr\u003EАвгуст\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EЗанятие № 3. Использование списков \r\nпри оформлении текстов\u003Cbr\u003E\u003Cp\u003EВиды информации,\u003Cbr\u003Eвоспринимаемой человеком:\u003Cbr\u003EЗрительная\u003Cbr\u003EСлуховая\u003Cbr\u003EОсязательная\u003Cbr\u003EОбонятельная\u003Cbr\u003EВкусовая\u003Cbr\u003EВиды информации,\u003Cbr\u003Eвоспринимаемой компьютером:\u003Cbr\u003EЧисловая\u003Cbr\u003EСимвольная\u003Cbr\u003EГрафическая\u003Cbr\u003EЗвуковая \u003Cbr\u003EВидео\u003Cbr\u003EВиды компьютерных сетей:\u003Cbr\u003EЛокальные\u003Cbr\u003EКорпоративные\u003Cbr\u003EРегиональные\u003Cbr\u003EГлобальные\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 4. Оформление таблиц \r\nв HTML-документе\u003Cbr\u003E\u003Cp\u003EВ практическом HTML-программировании таблицы совершенно незаменимы выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки.\u003Cbr\u003EТаблица задается командой \u003CTABLE\u003E…\u003C\u002FTABLE\u003E . Внутри этих тегов задаются строки командами \u003CTR\u003E…\u003C\u002FTR\u003E, внутри строк задаются ячейки командами \u003CTD\u003E…\u003C\u002FTD\u003E. Таким образом, по строкам задается вся структура таблицы:\u003Cbr\u003E\u003CTABLE\u003E\u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003C\u002FTR\u003E\u003Cbr\u003E\u003CTR\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003CTD\u003E \u003C\u002FTD\u003E\u003Cbr\u003E\u003C\u002FTABLE\u003E\u003Cbr\u003E\u003Cp\u003EАтрибуты для тегов \u003CTABLE\u003E, \u003CTR\u003E, \u003CTD\u003E:\r\nborder=число\t- толщина линии\r\nbordercolor= цвет\t- цвет линии\r\nbgcolor=цвет\t- цвет заливки фона\r\nАтрибут width=число (или %) – ширина таблицы или ячейки в пикселях\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 4. Оформление таблиц\r\n в HTML-документе\u003Cbr\u003E\u003Cp\u003EЗадание: \r\nа) создать HTML-документ (на основе файла index.html), содержащий таблицу;\u003Cbr\u003Eб) Сохранить документ в файле с именем index4.html в рабочей папке.\r\nв) Просмотреть HTML-документ в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 5. Графика в HTML- документе\u003Cbr\u003E\u003Cp\u003EБраузеры «понимают» три графических формата – gif, jpg, png.\u003Cbr\u003EФормат gif. Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности: мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.\u003Cbr\u003EПрозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.\u003Cbr\u003EФормат jpg. Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов. \u003Cbr\u003EГрафические файлы желательно хранить в отдельной папке.\u003Cbr\u003EОформление фона:\r\nатрибут background=”имя файла” – для тегов \u003CBODY\u003E, \u003CTABLE\u003E, \u003CTD\u003E)\u003Cbr\u003EВставка рисунков:\r\n\u003CIMG src=”имя файла” width=число height=число\u003E - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 5. Графика в HTML- документе\u003Cbr\u003E\u003Cp\u003EЗадание:\u003Cbr\u003Eа) Создать папку для рисунков Image;\u003Cbr\u003Eб) Скопировать в папку Image файлы с понравившимися рисунками и фонами;\u003Cbr\u003Eв) Создать html-документ следующего содержания:\u003Cbr\u003Eоформить фон страницы; \u003Cbr\u003Eв ячейки, помеченные *, вставить рисунки, указав размеры рисунка; \u003Cbr\u003Eв ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.\u003Cbr\u003E\u003Cbr\u003Eг) Сохранить файл с именем index5.html в рабочей папке;\u003Cbr\u003Eд) Просмотреть результат в обозревателе Internet Explorer.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 6. Гиперссылки \r\nв HTML- документе\u003Cbr\u003E\u003Cp\u003EГипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.\u003Cbr\u003EГиперссылка с одного файла на другой. \r\nДля того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега \u003CA\u003E с атрибутом href=имя_файла:\r\n\u003CA href=имя_файла\u003Eтекст или рисунок\u003C\u002FA\u003E\tЗадание перехода к новому документу.\u003Cbr\u003EГиперссылка внутри одного файла.\r\nДля задания гипертекстового перехода внутри документа используют два тега \u003CA\u003E. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:\r\n\u003CA href=#метка\u003E текст или рисунок \u003C\u002FA\u003E\t\tЗадание перехода по метке. На экран \t\t\t\t\tвыводится ссылка.\u003Cbr\u003E\t\u003CA name=метка\u003E\u003C\u002FA\u003E\t\t\tМетка. Сюда броузер переходит по ссылке. \t\t\t\t\tНа экране ничего не отображается.\u003Cbr\u003EМетка – набор символов (латинских букв и (или) цифр).\u003Cbr\u003EРисунок как гиперссылка:\r\n\u003CA href=имя_файла1\u003E \u003CIMG src=имя_файла width=число height=число\u003E \u003C\u002FA\u003E\u003Cbr\u003EТекст как гиперссылка:\r\n\u003CA href=имя_файла\u003Eтекст\u003C\u002FA\u003E\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EЗанятие № 6. Гиперссылки \r\nв HTML- документе\u003Cbr\u003E\u003Cp\u003EЗадание:\u003Cbr\u003EСкопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).\u003Cbr\u003EСоздать в рабочей папке паку для изображений images.\u003Cbr\u003EСкопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .\u003Cbr\u003EСоздать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.\u003Cbr\u003EВ файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.\u003Cbr\u003EПросмотреть результат работы в обозревателе Internet Explorer.\u003Cbr\u003EОтформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.\u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E","\u003Cp\u003EСписок использованных источников\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fab-w.net\u002F - самоучитель по сайтостроению\u003Cbr\u003Ehttp:\u002F\u002Fevgeniypopov.com\u002F - видеоуроки по HTML \r\nи CSS \u003Cbr\u003E\u003Cp\u003EПрактикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова\u003Cbr\u003E"],href:"\u002Fprezentacii-po-informatike\u002Fpraktikum-po-osnovam-yazyka-razmetki-gipertekstov-1",href_category:"\u002Fprezentacii-po-informatike",date:1614773502,related:[{id:985825,name:"Как перенести информацию из внешнего мира на какой-либо носитель",href:"\u002Fprezentacii-po-informatike\u002Fkak-perenesti-informatsiyu-iz-vneshnego-mira",jpg:"jpg\u002F985825"},{id:926602,name:"Поместите здесь ваш текст. Шаблон",href:"\u002Fprezentacii-po-informatike\u002Fpomestite-zdes-vash-tekst-shablon",jpg:"jpg\u002F926602"},{id:862577,name:"Вещественные числа в языке Python",href:"\u002Fprezentacii-po-informatike\u002Fveshchestvennye-chisla-v-yazyke-python",jpg:"jpg\u002F862577"},{id:993454,name:"Сети датацентров и виртуализация. Вычислительные сети и телекоммуникации",href:"\u002Fprezentacii-po-informatike\u002Fseti-datatsentrov-i-virtualizatsiya-vychislitelnye-seti",jpg:"jpg\u002F993454"},{id:1095590,name:"Программа – редактор Текстовый редактор",href:"\u002Fprezentacii-po-informatike\u002Fprogramma--redaktor-tekstovyy-redaktor",jpg:"jpg\u002F1095590"},{id:857692,name:"Множественные выравнивания",href:"\u002Fprezentacii-po-informatike\u002Fmnozhestvennye-vyravnivaniya-6c-2",jpg:"jpg\u002F857692"},{id:1107774,name:"Традиционный подход к вебпрограммированию на основе перезагрузки страницы. Тема 9",href:"\u002Fprezentacii-po-informatike\u002Ftraditsionnyy-podhod-k-vebprogrammirovaniyu-na-osnove",jpg:"jpg\u002F1107774"},{id:1107002,name:"Работа с Интернет-магазином, Интернет-СМИ",href:"\u002Fprezentacii-po-informatike\u002Frabota-s-internet-magazinom-internet-smi-8",jpg:"jpg\u002F1107002"},{id:1069685,name:"Что такое клипарт. Клипарт в интернете",href:"\u002Fprezentacii-po-informatike\u002Fchto-takoe-klipart-klipart-v-internete",jpg:"jpg\u002F1069685"},{id:1105915,name:"Нескучный текст",href:"\u002Fprezentacii-po-informatike\u002Fneskuchnyy-tekst",jpg:"jpg\u002F1105915"},{id:1039278,name:"Современный педагог",href:"\u002Fprezentacii-po-informatike\u002Fsovremennyy-pedagog-2",jpg:"jpg\u002F1039278"},{id:845413,name:"Информационная система Учет нерозданных\u002Fневостребованных РПО",href:"\u002Fprezentacii-po-informatike\u002Finformatsionnaya-sistema-uchet-nerozdannyhnevostrebovannyh-rpo",jpg:"jpg\u002F845413"},{id:972748,name:"Информация. Повторение. 6 класс",href:"\u002Fprezentacii-po-informatike\u002Finformatsiya-povtorenie-6-klass",jpg:"jpg\u002F972748"},{id:942284,name:"10 сайтов, полезных для школьников",href:"\u002Fprezentacii-po-informatike\u002F10-saytov-poleznyh-dlya-shkolnikov",jpg:"jpg\u002F942284"},{id:914356,name:"Сообщения Координатора CAN",href:"\u002Fprezentacii-po-informatike\u002Fsoobshcheniya-koordinatora-can",jpg:"jpg\u002F914356"},{id:1044550,name:"Сложные условия в условном операторе",href:"\u002Fprezentacii-po-informatike\u002Fslozhnye-usloviya-v-uslovnom-operatore",jpg:"jpg\u002F1044550"},{id:1118603,name:"Тест по устройству ПК",href:"\u002Fprezentacii-po-informatike\u002Ftest-po-ustroystvu-pk",jpg:"jpg\u002F1118603"},{id:841055,name:"Раньше-позже",href:"\u002Fprezentacii-po-informatike\u002Franshe-pozzhe-3",jpg:"jpg\u002F841055"},{id:1094531,name:"Подключение к е-Факторинг 3.0",href:"\u002Fprezentacii-po-informatike\u002Fpodklyuchenie-k-e-faktoring-30-31",jpg:"jpg\u002F1094531"},{id:1107627,name:"Мой брокер. Мир инвестиций. Основа для WhiteLabel партнерских проектов",href:"\u002Fprezentacii-po-informatike\u002Fmoy-broker-mir-investitsiy-osnova-dlya",jpg:"jpg\u002F1107627"},{id:1078933,name:"Оплата за ЖКУ без комиссии",href:"\u002Fprezentacii-po-informatike\u002Foplata-za-zhku-bez-komissii",jpg:"jpg\u002F1078933"},{id:912426,name:"Scratch Middle. Чат-бот Урок 6",href:"\u002Fprezentacii-po-informatike\u002Fscratch-middle-chat-bot-urok-6",jpg:"jpg\u002F912426"},{id:994600,name:"Коробочные продукты или стандартизированные решения типичных проблем бизнеса",href:"\u002Fprezentacii-po-informatike\u002Fkorobochnye-produkty-ili-standartizirovannye-resheniya-tipichnyh",jpg:"jpg\u002F994600"},{id:1047101,name:"Определение PDO",href:"\u002Fprezentacii-po-informatike\u002Fopredelenie-pdo",jpg:"jpg\u002F1047101"},{id:913102,name:"Електронна таблиця",href:"\u002Fprezentacii-po-informatike\u002Felektronna-tablitsya",jpg:"jpg\u002F913102"},{id:1011347,name:"Процесс DocuSign",href:"\u002Fprezentacii-po-informatike\u002Fprotsess-docusign",jpg:"jpg\u002F1011347"},{id:1069325,name:"Поиск максимальной деформации формы объекта вовремя 3D печати",href:"\u002Fprezentacii-po-informatike\u002Fpoisk-maksimalnoy-deformatsii-formy-obekta-vovremya",jpg:"jpg\u002F1069325"},{id:1020645,name:"Проектная работа. 2D-Игры",href:"\u002Fprezentacii-po-informatike\u002Fproektnaya-rabota-2d-igry",jpg:"jpg\u002F1020645"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fmilli-rizyklar-2",next_name:"Милли ризыклар",prev:"\u002Fprezentacii-po-istorii\u002Fkovrovchane--geroi-velikoy-otechestvennoy-voyny",prev_name:"Ковровчане – герои Великой Отечественной войны"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:M,SITE_HOST:"slaidy.com",SITE_LANG:N,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:M,short_name:b,description:b,lang:N,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:U,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1: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",1,"Информатика",17,"Практикум по основам языка разметки гипертекстов HTML ","Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Занятие № 5. Графика в HTML- документе
Задание:
а) Создать папку для рисунков Image;
б) Скопировать в папку Image файлы с понравившимися рисунками и фонами;
в) Создать html-документ следующего содержания:
оформить фон страницы;
в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;
в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.
г) Сохранить файл с именем index5.html в рабочей папке;
д) Просмотреть результат в обозревателе Internet Explorer.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 6. Гиперссылки
в HTML- документе
Гипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.
Гиперссылка с одного файла на другой.
Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега
с атрибутом href=имя_файла:
текст или рисунок
Задание перехода к новому документу.
Гиперссылка внутри одного файла.
Для задания гипертекстового перехода внутри документа используют два тега
. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:
текст или рисунок
Задание перехода по метке. На экран выводится ссылка.
Метка. Сюда броузер переходит по ссылке. На экране ничего не отображается.
Метка – набор символов (латинских букв и (или) цифр).
Рисунок как гиперссылка:
Текст как гиперссылка:
текст
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова

Занятие № 6. Гиперссылки
в HTML- документе
Задание:
Скопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).
Создать в рабочей папке паку для изображений images.
Скопировать в папку images файлы с изображениями автомобиля, самолета, корабля, паровоза (из локальной сети класса или сети Internet) .
Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.
В файлах-текстах создать ссылки с конца документа на начало этого же документа, а также ссылки на основной html-документ. Сохранить обновленные файлы с текстами в рабочей папке.
Просмотреть результат работы в обозревателе Internet Explorer.
Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.
Практикум по HTML. Составитель - учитель информатики и ИКТ В.В. Окулова