Практикум по основам языка разметки гипертекстов 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
Количество просмотров: 503
Количество скачиваний: 0
Скачать
- Предыдущая
Станция компьютерных устройств
Следующая -
Подготовка к ГИА по информатике на примере диагностической работы по ИНФОРМАТИКЕ
Похожие презентации
Простое и сложное предложение (3 класс)
Леди Баг и Супер Кот
Правовые формы работы с информацией
Книга - великое чудо из чудес
Структура и виды познания
Молодежный билет
Презентация на тему Задачи на движение
Шаблон - концепция проекта
Практическая работаПрезентация
Презентация на тему География религий мира
СЕМЯ. ВНЕШНЕЕ И ВНУТРЕННЕЕ СТРОЕНИЕ СЕМЯН
Методичні основи планування інвестиційних проектів. Планування витрат за проектом
Лот 25, г. Хабаровск, ул. Сысоева, 21, кв. 68
Опыт использования новых миорелаксантов при лапароскопических оперативных вмешательствах
Двойная роль гласных
Проектные данные для хасавюрта
Доходный гостиничный бизнес Таунхаус
Модель оценки обеспечения прав ребенка на местном уровне
Кто Я? (психология самоидентификации)
Многогранники в живой природе
Презентация на тему КРЫЛАТЫЕ СЛОВА
Модель жизненных циклов организации
Темы исследовательских работ студенческого научного общества кафедры анестезиологии-реаниматологии и токсикологии УГМУ
ЦЕЛИ И ЗАДАЧИ ИСТОРИИ ОТЕЧЕСТВА
Презентация на тему Объем цилиндра
Запрос. Программа расчета элементов оснований и фундаментов
Итоговая аттестация по программе магистерской подготовки Государственное и муниципальное управление
Modernism
(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,V){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:w,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:H}},social:I}},categories:{result:[{id:J,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: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:L,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:J,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:344259,name:"Практикум по основам языка разметки гипертекстов HTML",category:L,count:K,jpg:"jpg\u002F344259",hits:503,download:a,h1:M,meta:{h1:M,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:890747,name:"Простое и сложное предложение (3 класс)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprostoe-i-slozhnoe-predlozhenie-3-klass",jpg:"jpg\u002F890747"},{id:1044122,name:"Леди Баг и Супер Кот",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fledi-bag-i-super-kot-2",jpg:"jpg\u002F1044122"},{id:452092,name:"Правовые формы работы с информацией",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpravovye-formy-raboty-s-informaciej",jpg:"jpg\u002F452092"},{id:347866,name:"Книга - великое чудо из чудес",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkniga--velikoe-chudo-iz-chudes",jpg:"jpg\u002F347866"},{id:842659,name:"Структура и виды познания",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstruktura-i-vidy-poznaniya",jpg:"jpg\u002F842659"},{id:1182401,name:"Молодежный билет",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmolodezhnyy-bilet",jpg:"jpg\u002F1182401"},{id:300739,name:"Презентация на тему Задачи на движение ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-zadachi-na-dvizhenie-3",jpg:"jpg\u002F300739"},{id:945109,name:"Шаблон - концепция проекта",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fshablon-kontseptsiya-proekta",jpg:"jpg\u002F945109"},{id:432110,name:"Практическая работаПрезентация",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprakticheskaya-rabota-prezentaciya",jpg:"jpg\u002F432110"},{id:297252,name:"Презентация на тему География религий мира",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-geografiya-religij-mira-2",jpg:"jpg\u002F297252"},{id:341250,name:"СЕМЯ. ВНЕШНЕЕ И ВНУТРЕННЕЕ СТРОЕНИЕ СЕМЯН",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsemya-vneshnee-i-vnutrennee-stroenie-semyan",jpg:"jpg\u002F341250"},{id:1052060,name:"Методичні основи планування інвестиційних проектів. Планування витрат за проектом",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmetodichn-osnovi-planuvannya-nvestitsynih-proektv-planuvannya",jpg:"jpg\u002F1052060"},{id:987404,name:"Лот 25, г. Хабаровск, ул. Сысоева, 21, кв. 68",href:"\u002Fprezentacii-na-razlichnye-temy\u002Flot-25-g-habarovsk-ul-sysoeva",jpg:"jpg\u002F987404"},{id:405533,name:"Опыт использования новых миорелаксантов при лапароскопических оперативных вмешательствах",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fopyt-ispolzovaniya-novyx-miorelaksantov-pri-laparoskopicheskix-operativnyx-vmeshatelstvax",jpg:"jpg\u002F405533"},{id:372499,name:"Двойная роль гласных",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fdvojnaya-rol-glasnyx",jpg:"jpg\u002F372499"},{id:1026098,name:"Проектные данные для хасавюрта",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fproektnye-dannye-dlya-hasavyurta",jpg:"jpg\u002F1026098"},{id:944835,name:"Доходный гостиничный бизнес Таунхаус",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fdohodnyy-gostinichnyy-biznes-taunhaus",jpg:"jpg\u002F944835"},{id:427324,name:"Модель оценки обеспечения прав ребенка на местном уровне",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmodel-ocenki-obespecheniya-prav-rebenka-na-mestnom-urovne",jpg:"jpg\u002F427324"},{id:900965,name:"Кто Я? (психология самоидентификации)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkto-ya-psihologiya-samoidentifikatsii",jpg:"jpg\u002F900965"},{id:455255,name:"Многогранники в живой природе",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmnogogranniki-v-zhivoj-prirode",jpg:"jpg\u002F455255"},{id:303035,name:"Презентация на тему КРЫЛАТЫЕ СЛОВА ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-krylatye-slova",jpg:"jpg\u002F303035"},{id:391557,name:"Модель жизненных циклов организации",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmodel-zhiznennyx-ciklov-organizacii",jpg:"jpg\u002F391557"},{id:1139614,name:"Темы исследовательских работ студенческого научного общества кафедры анестезиологии-реаниматологии и токсикологии УГМУ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftemy-issledovatelskih-rabot-studencheskogo-nauchnogo-obshchestva",jpg:"jpg\u002F1139614"},{id:1174596,name:"ЦЕЛИ И ЗАДАЧИ ИСТОРИИ ОТЕЧЕСТВА",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftseli-i-zadachi-istorii-otechestva",jpg:"jpg\u002F1174596"},{id:277755,name:"Презентация на тему Объем цилиндра ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-obem-cilindra-1",jpg:"jpg\u002F277755"},{id:1138048,name:"Запрос. Программа расчета элементов оснований и фундаментов",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fzapros-programma-rascheta-elementov-osnovaniy-i",jpg:"jpg\u002F1138048"},{id:1019737,name:"Итоговая аттестация по программе магистерской подготовки Государственное и муниципальное управление",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fitogovaya-attestatsiya-po-programme-magisterskoy-podgotovki",jpg:"jpg\u002F1019737"},{id:377511,name:"Modernism",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmodernism",jpg:"jpg\u002F377511"}],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:N,SITE_HOST:"slaidy.com",SITE_LANG:O,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:N,short_name:b,description:b,lang:O,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:U,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:V,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:V,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:w,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:H}},social:I,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,"6LfWmAYrAAAAAFyidHOK1ZHtYSECWR5CvAmygt5c","3190226","\u003C!-- Yandex.RTB R-A-1990700-7 --\u003E\r\n\u003Cscript\u003E\r\nwindow.yaContextCb.push(() =\u003E {\r\n Ya.Context.AdvManager.render({\r\n \"blockId\": \"R-A-1990700-7\",\r\n \"type\": \"fullscreen\",\r\n \"platform\": \"touch\"\r\n })\r\n})\r\n\u003C\u002Fscript\u003E","[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
Количество просмотров: 503
Количество скачиваний: 0
Скачать
- Предыдущая
Станция компьютерных устройств
Следующая -
Подготовка к ГИА по информатике на примере диагностической работы по ИНФОРМАТИКЕ
Похожие презентации
Простое и сложное предложение (3 класс)
Леди Баг и Супер Кот
Правовые формы работы с информацией
Книга - великое чудо из чудес
Структура и виды познания
Молодежный билет
Презентация на тему Задачи на движение
Шаблон - концепция проекта
Практическая работаПрезентация
Презентация на тему География религий мира
СЕМЯ. ВНЕШНЕЕ И ВНУТРЕННЕЕ СТРОЕНИЕ СЕМЯН
Методичні основи планування інвестиційних проектів. Планування витрат за проектом
Лот 25, г. Хабаровск, ул. Сысоева, 21, кв. 68
Опыт использования новых миорелаксантов при лапароскопических оперативных вмешательствах
Двойная роль гласных
Проектные данные для хасавюрта
Доходный гостиничный бизнес Таунхаус
Модель оценки обеспечения прав ребенка на местном уровне
Кто Я? (психология самоидентификации)
Многогранники в живой природе
Презентация на тему КРЫЛАТЫЕ СЛОВА
Модель жизненных циклов организации
Темы исследовательских работ студенческого научного общества кафедры анестезиологии-реаниматологии и токсикологии УГМУ
ЦЕЛИ И ЗАДАЧИ ИСТОРИИ ОТЕЧЕСТВА
Презентация на тему Объем цилиндра
Запрос. Программа расчета элементов оснований и фундаментов
Итоговая аттестация по программе магистерской подготовки Государственное и муниципальное управление
Modernism
(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,V){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:w,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:H}},social:I}},categories:{result:[{id:J,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: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:L,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:J,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:344259,name:"Практикум по основам языка разметки гипертекстов HTML",category:L,count:K,jpg:"jpg\u002F344259",hits:503,download:a,h1:M,meta:{h1:M,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:890747,name:"Простое и сложное предложение (3 класс)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprostoe-i-slozhnoe-predlozhenie-3-klass",jpg:"jpg\u002F890747"},{id:1044122,name:"Леди Баг и Супер Кот",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fledi-bag-i-super-kot-2",jpg:"jpg\u002F1044122"},{id:452092,name:"Правовые формы работы с информацией",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpravovye-formy-raboty-s-informaciej",jpg:"jpg\u002F452092"},{id:347866,name:"Книга - великое чудо из чудес",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkniga--velikoe-chudo-iz-chudes",jpg:"jpg\u002F347866"},{id:842659,name:"Структура и виды познания",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstruktura-i-vidy-poznaniya",jpg:"jpg\u002F842659"},{id:1182401,name:"Молодежный билет",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmolodezhnyy-bilet",jpg:"jpg\u002F1182401"},{id:300739,name:"Презентация на тему Задачи на движение ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-zadachi-na-dvizhenie-3",jpg:"jpg\u002F300739"},{id:945109,name:"Шаблон - концепция проекта",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fshablon-kontseptsiya-proekta",jpg:"jpg\u002F945109"},{id:432110,name:"Практическая работаПрезентация",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprakticheskaya-rabota-prezentaciya",jpg:"jpg\u002F432110"},{id:297252,name:"Презентация на тему География религий мира",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-geografiya-religij-mira-2",jpg:"jpg\u002F297252"},{id:341250,name:"СЕМЯ. ВНЕШНЕЕ И ВНУТРЕННЕЕ СТРОЕНИЕ СЕМЯН",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsemya-vneshnee-i-vnutrennee-stroenie-semyan",jpg:"jpg\u002F341250"},{id:1052060,name:"Методичні основи планування інвестиційних проектів. Планування витрат за проектом",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmetodichn-osnovi-planuvannya-nvestitsynih-proektv-planuvannya",jpg:"jpg\u002F1052060"},{id:987404,name:"Лот 25, г. Хабаровск, ул. Сысоева, 21, кв. 68",href:"\u002Fprezentacii-na-razlichnye-temy\u002Flot-25-g-habarovsk-ul-sysoeva",jpg:"jpg\u002F987404"},{id:405533,name:"Опыт использования новых миорелаксантов при лапароскопических оперативных вмешательствах",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fopyt-ispolzovaniya-novyx-miorelaksantov-pri-laparoskopicheskix-operativnyx-vmeshatelstvax",jpg:"jpg\u002F405533"},{id:372499,name:"Двойная роль гласных",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fdvojnaya-rol-glasnyx",jpg:"jpg\u002F372499"},{id:1026098,name:"Проектные данные для хасавюрта",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fproektnye-dannye-dlya-hasavyurta",jpg:"jpg\u002F1026098"},{id:944835,name:"Доходный гостиничный бизнес Таунхаус",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fdohodnyy-gostinichnyy-biznes-taunhaus",jpg:"jpg\u002F944835"},{id:427324,name:"Модель оценки обеспечения прав ребенка на местном уровне",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmodel-ocenki-obespecheniya-prav-rebenka-na-mestnom-urovne",jpg:"jpg\u002F427324"},{id:900965,name:"Кто Я? (психология самоидентификации)",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkto-ya-psihologiya-samoidentifikatsii",jpg:"jpg\u002F900965"},{id:455255,name:"Многогранники в живой природе",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmnogogranniki-v-zhivoj-prirode",jpg:"jpg\u002F455255"},{id:303035,name:"Презентация на тему КРЫЛАТЫЕ СЛОВА ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-krylatye-slova",jpg:"jpg\u002F303035"},{id:391557,name:"Модель жизненных циклов организации",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmodel-zhiznennyx-ciklov-organizacii",jpg:"jpg\u002F391557"},{id:1139614,name:"Темы исследовательских работ студенческого научного общества кафедры анестезиологии-реаниматологии и токсикологии УГМУ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftemy-issledovatelskih-rabot-studencheskogo-nauchnogo-obshchestva",jpg:"jpg\u002F1139614"},{id:1174596,name:"ЦЕЛИ И ЗАДАЧИ ИСТОРИИ ОТЕЧЕСТВА",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ftseli-i-zadachi-istorii-otechestva",jpg:"jpg\u002F1174596"},{id:277755,name:"Презентация на тему Объем цилиндра ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-obem-cilindra-1",jpg:"jpg\u002F277755"},{id:1138048,name:"Запрос. Программа расчета элементов оснований и фундаментов",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fzapros-programma-rascheta-elementov-osnovaniy-i",jpg:"jpg\u002F1138048"},{id:1019737,name:"Итоговая аттестация по программе магистерской подготовки Государственное и муниципальное управление",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fitogovaya-attestatsiya-po-programme-magisterskoy-podgotovki",jpg:"jpg\u002F1019737"},{id:377511,name:"Modernism",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fmodernism",jpg:"jpg\u002F377511"}],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:N,SITE_HOST:"slaidy.com",SITE_LANG:O,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:N,short_name:b,description:b,lang:O,start_url:"\u002F?standalone=true",display:"standalone",background_color:k,theme_color:j,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:T,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:U,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:U,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:V,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:V,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:w,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:j,header_bg:k,accent:H}},social:I,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,"6LfWmAYrAAAAAFyidHOK1ZHtYSECWR5CvAmygt5c","3190226","\u003C!-- Yandex.RTB R-A-1990700-7 --\u003E\r\n\u003Cscript\u003E\r\nwindow.yaContextCb.push(() =\u003E {\r\n Ya.Context.AdvManager.render({\r\n \"blockId\": \"R-A-1990700-7\",\r\n \"type\": \"fullscreen\",\r\n \"platform\": \"touch\"\r\n })\r\n})\r\n\u003C\u002Fscript\u003E","[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. Составитель - учитель информатики и ИКТ В.В. Окулова