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

Оглавление
Занятие № 1. Создание первого HTML-документа
Занятие № 2. Физическое форматирование
(форматирование шрифта)
Занятие № 3. Использование списков
при оформлении текстов.
Занятие № 4. Оформление таблиц в Занятие № 4. Оформление таблиц в HTMLЗанятие № 4. Оформление таблиц в HTML-документе.
Занятие № 5. Графика в Занятие № 5. Графика в HTMLЗанятие № 5. Графика в HTML- документе.
Занятие № 6. Гиперссылки в Занятие № 6. Гиперссылки в 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
Количество просмотров: 302
Количество скачиваний: 0
Скачать
- Предыдущая
Станция компьютерных устройств
Следующая -
Подготовка к ГИА по информатике на примере диагностической работы по ИНФОРМАТИКЕ
Похожие презентации
План мероприятий молодежного добровольческого центра УрГПУ
Проведение рекламных активностей в торговой сети Любимый Магазин
Где на Земле теплее?
Творчество Николая Васильевича Гоголя
О результатах служебной деятельности Сарапульского МРО ЛРР Управления за 1 квартал 2021 года
Разработка основных сооружений для биохимической переработки сточных вод в п. Приобье Октябрьском районе
Структуры данных: деревья, сети, графы, таблицы
Гражданский процесс
Восточный макрорегион
Понятие и характеристики эмоционально волевой сферы личности
Cash Наличные деньги
Игра «Знаток математики» 5-6 класс
Основные правила и требования к организации парольной защиты.
САРОВ – УНИВЕРСИТЕТСКИЙ ЦЕНТРЦель: Выход Сарова на российские и мировые рынки образования.Направления реализации:Объединение
Маэстро Гергиев - артист мира
ЛИЦЕНЗИОННЫЙ ДОГОВОР СТ. ПРЕПОДАВАТЕЛЬ БЕССАРАБОВА В.В.
Княжна Марья Болконскаяв романе «Война и мир»
Проблемы этической экспертизы клинических исследований в России
Тема:
Презентация на тему Обучение грамоте Буква "Ч"
Химические аварии
Речевые формы эмоциональной экспрессии
Презентация на тему "Работа классного руководителя по пропаганде здорового образа жизни и профилактике правонарушений среди у
Урок –практикум по теме«Площадь прямоугольника»
Работаем над техникой чтения
Презентация на тему Танки Второй мировой войны 4 класс
Болехів та околиці (фотографии)
Буквы о – а в корне -раст- – -рос-
(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:"Информатика",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:J,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:K,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:I,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:344259,name:"Практикум по основам языка разметки гипертекстов HTML",category:K,count:J,jpg:"jpg\u002F344259",hits:302,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. Оформление таблиц в Занятие № 4. Оформление таблиц в HTMLЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в Занятие № 5. Графика в HTMLЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в Занятие № 6. Гиперссылки в HTMLЗанятие № 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Составитель: учитель информатики и ИКТ \r\nГБОУ СОШ № 411 «Гармония» \r\nс углубленным изучением английского языка Петродворцового района Санкт-Петербурга \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. Оформление таблиц в Занятие № 4. Оформление таблиц в HTMLЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в Занятие № 5. Графика в HTMLЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в Занятие № 6. Гиперссылки в HTMLЗанятие № 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-na-razlichnye-temy\u002Fpraktikum-po-osnovam-yazyka-razmetki-gipertekstov-html",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1612742339,related:[{id:1099044,name:"План мероприятий молодежного добровольческого центра УрГПУ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fplan-meropriyatiy-molodezhnogo-dobrovolcheskogo-tsentra-urgpu-3",jpg:"jpg\u002F1099044"},{id:415998,name:"Проведение рекламных активностей в торговой сети Любимый Магазин",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprovedenie-reklamnyh-aktivnostey-v-torgovoy-seti-lyubimyy-magazin",jpg:"jpg\u002F415998"},{id:356853,name:"Где на Земле теплее?",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fgde-na-zemle-teplee",jpg:"jpg\u002F356853"},{id:316335,name:"Творчество Николая Васильевича Гоголя",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftvorchestvo-nikolaya-vasilevicha-gogolya",jpg:"jpg\u002F316335"},{id:1110018,name:"О результатах служебной деятельности Сарапульского МРО ЛРР Управления за 1 квартал 2021 года",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fo-rezultatah-sluzhebnoy-deyatelnosti-sarapulskogo-mro-1",jpg:"jpg\u002F1110018"},{id:1060426,name:"Разработка основных сооружений для биохимической переработки сточных вод в п. Приобье Октябрьском районе",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frazrabotka-osnovnyh-sooruzheniy-dlya-biohimicheskoy-pererabotki",jpg:"jpg\u002F1060426"},{id:344654,name:"Структуры данных: деревья, сети, графы, таблицы",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstruktury-dannyx-derevya--seti--grafy--tablicy",jpg:"jpg\u002F344654"},{id:973699,name:"Гражданский процесс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fgrazhdanskiy-protsess-10",jpg:"jpg\u002F973699"},{id:342230,name:"Восточный макрорегион",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvostochnyj-makroregion",jpg:"jpg\u002F342230"},{id:841005,name:"Понятие и характеристики эмоционально волевой сферы личности",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fponyatie-i-harakteristiki-emotsionalno-volevoy-sfery",jpg:"jpg\u002F841005"},{id:378951,name:"Cash Наличные деньги",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fcash-nalichnye-dengi",jpg:"jpg\u002F378951"},{id:349134,name:"Игра «Знаток математики» 5-6 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Figra-znatok-matematiki-56-klass",jpg:"jpg\u002F349134"},{id:449775,name:"Основные правила и требования к организации парольной защиты.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovnye-pravila-i-trebovaniya-k-organizacii-parolnoj-zashhity",jpg:"jpg\u002F449775"},{id:462749,name:"САРОВ – УНИВЕРСИТЕТСКИЙ ЦЕНТРЦель: Выход Сарова на российские и мировые рынки образования.Направления реализации:Объединение",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsarovuniversitetskiycentrcelyvyhodsarovanarossiyskieimirovyerynkiobrazovaniyanapravleniyarealizaciiobyedinenie",jpg:"jpg\u002F462749"},{id:351111,name:"Маэстро Гергиев - артист мира",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmaestro-gergiev--artist-mira",jpg:"jpg\u002F351111"},{id:395806,name:"ЛИЦЕНЗИОННЫЙ ДОГОВОР СТ. ПРЕПОДАВАТЕЛЬ БЕССАРАБОВА В.В.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Flicenzionnyj-dogovor-st-prepodavatel-bessarabova-vv",jpg:"jpg\u002F395806"},{id:348578,name:"Княжна Марья Болконскаяв романе «Война и мир»",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fknyazhna-marya-bolkonskayav-romane-vojna-i-mir",jpg:"jpg\u002F348578"},{id:440075,name:"Проблемы этической экспертизы клинических исследований в России",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fproblemy-eticheskoj-ekspertizy-klinicheskix-issledovanij-v-rossii",jpg:"jpg\u002F440075"},{id:386576,name:"Тема:",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftema-10",jpg:"jpg\u002F386576"},{id:275327,name:"Презентация на тему Обучение грамоте Буква \"Ч\"",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-obuchenie-gramote-bukva-ch",jpg:"jpg\u002F275327"},{id:323826,name:"Химические аварии",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fximicheskie-avarii-1",jpg:"jpg\u002F323826"},{id:1154748,name:"Речевые формы эмоциональной экспрессии",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frechevye-formy-emotsionalnoy-ekspressii-5",jpg:"jpg\u002F1154748"},{id:479944,name:"Презентация на тему \"Работа классного руководителя по пропаганде здорового образа жизни и профилактике правонарушений среди у",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-quotrabota-klassnogo-rukovoditelya-po-propagande-zdorovogo-obraza-zhizni-i-profilaktike-pravonarushenij-sredi-u%d1",jpg:"jpg\u002F479944"},{id:415904,name:"Урок –практикум по теме«Площадь прямоугольника»",href:"\u002Fprezentacii-na-razlichnye-temy\u002Furokpraktikumpotemeploschadypryamougolynika",jpg:"jpg\u002F415904"},{id:310992,name:"Работаем над техникой чтения",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frabotaem-nad-texnikoj-chteniya",jpg:"jpg\u002F310992"},{id:274098,name:"Презентация на тему Танки Второй мировой войны 4 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftanki-vtoroj-mirovoj-vojny-4-klass--prezentaciya",jpg:"jpg\u002F274098"},{id:1130677,name:"Болехів та околиці (фотографии)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbolehv-ta-okolits-fotografii",jpg:"jpg\u002F1130677"},{id:435573,name:"Буквы о – а в корне -раст- – -рос-",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbukvyoavkornerastros",jpg:"jpg\u002F435573"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fpodgotovka-k-gia-po-informatike-na-primere-diagnosticheskoj-raboty-po-informatike",next_name:"Подготовка к ГИА по информатике на примере диагностической работы по ИНФОРМАТИКЕ",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fstanciya-kompyuternyx-ustrojstv",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
Количество просмотров: 302
Количество скачиваний: 0
Скачать
- Предыдущая
Станция компьютерных устройств
Следующая -
Подготовка к ГИА по информатике на примере диагностической работы по ИНФОРМАТИКЕ
Похожие презентации
План мероприятий молодежного добровольческого центра УрГПУ
Проведение рекламных активностей в торговой сети Любимый Магазин
Где на Земле теплее?
Творчество Николая Васильевича Гоголя
О результатах служебной деятельности Сарапульского МРО ЛРР Управления за 1 квартал 2021 года
Разработка основных сооружений для биохимической переработки сточных вод в п. Приобье Октябрьском районе
Структуры данных: деревья, сети, графы, таблицы
Гражданский процесс
Восточный макрорегион
Понятие и характеристики эмоционально волевой сферы личности
Cash Наличные деньги
Игра «Знаток математики» 5-6 класс
Основные правила и требования к организации парольной защиты.
САРОВ – УНИВЕРСИТЕТСКИЙ ЦЕНТРЦель: Выход Сарова на российские и мировые рынки образования.Направления реализации:Объединение
Маэстро Гергиев - артист мира
ЛИЦЕНЗИОННЫЙ ДОГОВОР СТ. ПРЕПОДАВАТЕЛЬ БЕССАРАБОВА В.В.
Княжна Марья Болконскаяв романе «Война и мир»
Проблемы этической экспертизы клинических исследований в России
Тема:
Презентация на тему Обучение грамоте Буква "Ч"
Химические аварии
Речевые формы эмоциональной экспрессии
Презентация на тему "Работа классного руководителя по пропаганде здорового образа жизни и профилактике правонарушений среди у
Урок –практикум по теме«Площадь прямоугольника»
Работаем над техникой чтения
Презентация на тему Танки Второй мировой войны 4 класс
Болехів та околиці (фотографии)
Буквы о – а в корне -раст- – -рос-
(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:"Информатика",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:J,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:K,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:I,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:344259,name:"Практикум по основам языка разметки гипертекстов HTML",category:K,count:J,jpg:"jpg\u002F344259",hits:302,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. Оформление таблиц в Занятие № 4. Оформление таблиц в HTMLЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в Занятие № 5. Графика в HTMLЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в Занятие № 6. Гиперссылки в HTMLЗанятие № 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Составитель: учитель информатики и ИКТ \r\nГБОУ СОШ № 411 «Гармония» \r\nс углубленным изучением английского языка Петродворцового района Санкт-Петербурга \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. Оформление таблиц в Занятие № 4. Оформление таблиц в HTMLЗанятие № 4. Оформление таблиц в HTML-документе.\u003Cbr\u003EЗанятие № 5. Графика в Занятие № 5. Графика в HTMLЗанятие № 5. Графика в HTML- документе.\u003Cbr\u003EЗанятие № 6. Гиперссылки в Занятие № 6. Гиперссылки в HTMLЗанятие № 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-na-razlichnye-temy\u002Fpraktikum-po-osnovam-yazyka-razmetki-gipertekstov-html",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1612742339,related:[{id:1099044,name:"План мероприятий молодежного добровольческого центра УрГПУ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fplan-meropriyatiy-molodezhnogo-dobrovolcheskogo-tsentra-urgpu-3",jpg:"jpg\u002F1099044"},{id:415998,name:"Проведение рекламных активностей в торговой сети Любимый Магазин",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprovedenie-reklamnyh-aktivnostey-v-torgovoy-seti-lyubimyy-magazin",jpg:"jpg\u002F415998"},{id:356853,name:"Где на Земле теплее?",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fgde-na-zemle-teplee",jpg:"jpg\u002F356853"},{id:316335,name:"Творчество Николая Васильевича Гоголя",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftvorchestvo-nikolaya-vasilevicha-gogolya",jpg:"jpg\u002F316335"},{id:1110018,name:"О результатах служебной деятельности Сарапульского МРО ЛРР Управления за 1 квартал 2021 года",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fo-rezultatah-sluzhebnoy-deyatelnosti-sarapulskogo-mro-1",jpg:"jpg\u002F1110018"},{id:1060426,name:"Разработка основных сооружений для биохимической переработки сточных вод в п. Приобье Октябрьском районе",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frazrabotka-osnovnyh-sooruzheniy-dlya-biohimicheskoy-pererabotki",jpg:"jpg\u002F1060426"},{id:344654,name:"Структуры данных: деревья, сети, графы, таблицы",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstruktury-dannyx-derevya--seti--grafy--tablicy",jpg:"jpg\u002F344654"},{id:973699,name:"Гражданский процесс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fgrazhdanskiy-protsess-10",jpg:"jpg\u002F973699"},{id:342230,name:"Восточный макрорегион",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvostochnyj-makroregion",jpg:"jpg\u002F342230"},{id:841005,name:"Понятие и характеристики эмоционально волевой сферы личности",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fponyatie-i-harakteristiki-emotsionalno-volevoy-sfery",jpg:"jpg\u002F841005"},{id:378951,name:"Cash Наличные деньги",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fcash-nalichnye-dengi",jpg:"jpg\u002F378951"},{id:349134,name:"Игра «Знаток математики» 5-6 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Figra-znatok-matematiki-56-klass",jpg:"jpg\u002F349134"},{id:449775,name:"Основные правила и требования к организации парольной защиты.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovnye-pravila-i-trebovaniya-k-organizacii-parolnoj-zashhity",jpg:"jpg\u002F449775"},{id:462749,name:"САРОВ – УНИВЕРСИТЕТСКИЙ ЦЕНТРЦель: Выход Сарова на российские и мировые рынки образования.Направления реализации:Объединение",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsarovuniversitetskiycentrcelyvyhodsarovanarossiyskieimirovyerynkiobrazovaniyanapravleniyarealizaciiobyedinenie",jpg:"jpg\u002F462749"},{id:351111,name:"Маэстро Гергиев - артист мира",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmaestro-gergiev--artist-mira",jpg:"jpg\u002F351111"},{id:395806,name:"ЛИЦЕНЗИОННЫЙ ДОГОВОР СТ. ПРЕПОДАВАТЕЛЬ БЕССАРАБОВА В.В.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Flicenzionnyj-dogovor-st-prepodavatel-bessarabova-vv",jpg:"jpg\u002F395806"},{id:348578,name:"Княжна Марья Болконскаяв романе «Война и мир»",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fknyazhna-marya-bolkonskayav-romane-vojna-i-mir",jpg:"jpg\u002F348578"},{id:440075,name:"Проблемы этической экспертизы клинических исследований в России",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fproblemy-eticheskoj-ekspertizy-klinicheskix-issledovanij-v-rossii",jpg:"jpg\u002F440075"},{id:386576,name:"Тема:",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftema-10",jpg:"jpg\u002F386576"},{id:275327,name:"Презентация на тему Обучение грамоте Буква \"Ч\"",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-obuchenie-gramote-bukva-ch",jpg:"jpg\u002F275327"},{id:323826,name:"Химические аварии",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fximicheskie-avarii-1",jpg:"jpg\u002F323826"},{id:1154748,name:"Речевые формы эмоциональной экспрессии",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frechevye-formy-emotsionalnoy-ekspressii-5",jpg:"jpg\u002F1154748"},{id:479944,name:"Презентация на тему \"Работа классного руководителя по пропаганде здорового образа жизни и профилактике правонарушений среди у",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-quotrabota-klassnogo-rukovoditelya-po-propagande-zdorovogo-obraza-zhizni-i-profilaktike-pravonarushenij-sredi-u%d1",jpg:"jpg\u002F479944"},{id:415904,name:"Урок –практикум по теме«Площадь прямоугольника»",href:"\u002Fprezentacii-na-razlichnye-temy\u002Furokpraktikumpotemeploschadypryamougolynika",jpg:"jpg\u002F415904"},{id:310992,name:"Работаем над техникой чтения",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frabotaem-nad-texnikoj-chteniya",jpg:"jpg\u002F310992"},{id:274098,name:"Презентация на тему Танки Второй мировой войны 4 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftanki-vtoroj-mirovoj-vojny-4-klass--prezentaciya",jpg:"jpg\u002F274098"},{id:1130677,name:"Болехів та околиці (фотографии)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbolehv-ta-okolits-fotografii",jpg:"jpg\u002F1130677"},{id:435573,name:"Буквы о – а в корне -раст- – -рос-",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbukvyoavkornerastros",jpg:"jpg\u002F435573"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fpodgotovka-k-gia-po-informatike-na-primere-diagnosticheskoj-raboty-po-informatike",next_name:"Подготовка к ГИА по информатике на примере диагностической работы по ИНФОРМАТИКЕ",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fstanciya-kompyuternyx-ustrojstv",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. Составитель - учитель информатики и ИКТ В.В. Окулова