Презентация, доклад по информатике на тему Создание web-страницы

Содержание

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.Язык разметки – HTML (Hyper Text Markup Language.Создан в 1991 г. Зарождение языка связано с программистом - Тимом Бернерсом Ли.

Слайд 1 СТРУКТУРА WEB-СТРАНИЦЫ

СТРУКТУРА  WEB-СТРАНИЦЫ

Слайд 2Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.
Язык разметки

– HTML (Hyper Text Markup Language.
Создан в 1991 г. Зарождение языка связано с программистом - Тимом Бернерсом Ли.

Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.Язык разметки – HTML (Hyper Text Markup Language.Создан

Слайд 3Технология HTML состоит в том, что в обычный текстовый документ вставляются

управляющие символы
(тэги – с англ. «метка»)
и в результате мы получаем Web-страницу.
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги – с англ.

Слайд 4Достоинства Web-страниц:
Малый информационный объем;
Возможность просмотра в различных операционных системах

Достоинства Web-страниц:Малый информационный объем;Возможность просмотра в различных операционных системах

Слайд 5РЕДАКТОРЫ ДЛЯ СОЗДАНИЯ WEB-СТРАНИЦ.
Простейшие текстовые редакторы :
в ОС Windows

– Блокнот
в ОС Linux – Kate
Web – редакторы :
в ОС Windows – Microsoft FrontPage
в ОС Linux – Quanta Plus

РЕДАКТОРЫ ДЛЯ СОЗДАНИЯ WEB-СТРАНИЦ.Простейшие текстовые редакторы : в ОС Windows – Блокнот в ОС Linux – KateWeb

Слайд 6 сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться

по Web-страницам.
В качестве гиперссылки на страницах сайта может использоваться текст, такая гиперссылка будет называться текстовой. Весьма часто текстовая гиперссылка представляет собой подчеркнутый текст синего цвета.

Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно. Как же в таком случае определить, является изображение гиперссылкой или нет? На этот случай запомните следующее правило: "Если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой".

Примечание: Из этого правила есть исключение, так например в случае с ролловерами, которые могут не являться гиперссылками, но при наведении курсора мыши на них, курсор тоже принимает форму руки. Кроме изменения вида курсора, при наведении на гиперссылку, должен также отобразиться URL (уникальный адрес ресурса).

сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.В качестве гиперссылки на страницах

Слайд 7Вид Web-страницы задается тэгами, которые заключаются
в угловые скобки.
Тэги
Одиночные
(нет конечного

тэга)


Парные
(обязателен закрывающийся тэг, используется слеш / , который обозначает, что тег является конечным, закрывающим некоторую структуру

Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. ТэгиОдиночные(нет конечного тэга)Парные(обязателен закрывающийся тэг, используется слеш /

Слайд 8

Название документа (заголовок)



Тело документа



Название документа (заголовок)

Слайд 9 Заголовок web-страницы обозначается при помощи тэгов
и
содержит

название документа
Заголовок web-страницы обозначается при помощи тэгов и содержит название документа

Слайд 10Границы документа –тэг - должен открывать документ,
тэг -

должен стоять в последней строке документа.

Без этих тегов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Страница разделяется на две логические части: заголовок и содержание.
Границы документа –тэг - должен открывать документ, тэг - должен стоять в последней строке документа.Без этих тегов

Слайд 11Тэг определяет имя документа, располагается внутри заголовка документа

Тэг определяет имя документа, располагается внутри заголовка документа

Слайд 12Основное содержание страницы помещается в контейнер

и может

включать текст, таблицы, ссылки, графические изображения и т.д.
Основное содержание страницы помещается в контейнер  и может включать текст, таблицы, ссылки, графические изображения и т.д.

Слайд 13Практическая работа
Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере. Создайте

личную папку, куда вы будете сохранять все файлы своего сайта.
Запустить приложение Блокнот
<ТITLE>Компьютер Компьютер и ПО

Сохраните файл под именем COMPUTER.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.
Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Google Chrome или др.). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу COMPUTER.HTML откройте окно браузера.
Практическая работаСоздать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере. Создайте личную папку, куда вы будете сохранять

Слайд 14Форматирование текста на Web-странице

Заголовки. Размеры шрифтов заголовков задаются парами тэгов от

(самый крупный) до <Н6> (самый мелкий).
Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта.

Форматирование текста на Web-страницеЗаголовки. Размеры шрифтов заголовков задаются парами тэгов от (самый крупный) до (самый мелкий).Шрифт. Некоторые тэги имеют

Слайд 15ФОРМАТИРОВАНИЕ ШРИФТА
Тэг
Атрибуты
FACE (гарнитура шрифта) = “Arial”
SIZE(размер) = 4
СOLOR (цвет) =

“red”
ФОРМАТИРОВАНИЕ ШРИФТАТэг 	АтрибутыFACE (гарнитура шрифта) = “Arial”SIZE(размер) = 4СOLOR (цвет) = “red”

Слайд 16Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR

можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.
Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R=

Слайд 17ВЫРАВНИВАНИЕ
Атрибут ALIGN =

“ center”
“right”
“left”

ВЫРАВНИВАНИЕАтрибут ALIGN =

Слайд 18ГОРИЗОНТАЛЬНАЯ ЛИНИЯ
Отделение заголовка от остального содержания страницы производится с помощью горизонтальной

линии –
ТЭГ

ГОРИЗОНТАЛЬНАЯ ЛИНИЯОтделение заголовка от остального содержания страницы производится с помощью горизонтальной линии – ТЭГ

Слайд 19АБЗАЦЫ
Разделение тексты на абзацы производится с помощью
тэга и
(Выравнивание

для абзаца)
АБЗАЦЫРазделение тексты на абзацы производится с помощью тэга и (Выравнивание для абзаца)

Слайд 20Размещение графики на Web-странице
Тэг позволяет вставить изображение

на Web-страницу. Оно появится в том месте документа, где находится этот тэг. Тэг является одиночным. Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.
Например:




Размещение графики на Web-странице   Тэг позволяет вставить изображение на Web-страницу. Оно появится в том месте

Слайд 21Установка фонового изображения на Web-странице
Фоновое изображение – это графический файл

с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров.
Графика, используемая в качестве фоновой, задается в теге . Предварительно подготовив и сохранив в рабочей папке графический файл фонового рисунка.


Установка фонового изображения на Web-странице Фоновое изображение – это графический файл с небольшим рисунком, который многократно повторяется,

Слайд 22ТЕСТ Основы языка HTML"
1.HTML это …

А. язык разметки гипертекста;
Б. протокол передачи

Web-страниц;
В. протокол передачи файлов по сети Интернет;
Г. программа - браузер;
Д. разметочный знак гипертекста.

А

ТЕСТ Основы языка HTML

Слайд 232.Для того, чтобы отличить разметочный знак (тэг) от обычного текста, он

обрамляется символами …

А. !…!;
Б.@…@;
В. #…#;
Г. ^…^;
Д. <…>.
 

Д

2.Для того, чтобы отличить разметочный знак (тэг) от обычного текста, он обрамляется символами …А. !…!;Б.@…@;В. #…#;Г. ^…^;Д.

Слайд 243. Для задания области действия разметочного знака используются парные знаки. Закрывающий

тэг отличается от открывающегося тем, что …

А. код тэга записывается прописными буквами;
Б. код тэга записывается строчными буквами;
В. перед кодом ставится символ / - косая черта;
Г. перед кодом ставится символ * - звездочка;
Д. ничем не отличается.

В

3. Для задания области действия разметочного знака используются парные знаки. Закрывающий тэг отличается от открывающегося тем, что

Слайд 254. Заголовочная часть HTML -документа выделяется тэгом …

А. HTML;
Б. HEAD;
В. BODY;
Д.

TITLE;
Е. STRONG.

Б

4. Заголовочная часть HTML -документа выделяется тэгом …А. HTML;Б. HEAD;В. BODY;Д. TITLE;Е. STRONG.Б

Слайд 265.Основной текст документа выделяется тэгом …

А. HTML;
Б. HEAD;
В. BODY;
Г. TITLE;
Д. STRONG.

В

5.Основной текст документа выделяется тэгом …А. HTML;Б. HEAD;В. BODY;Г. TITLE;Д. STRONG.В

Слайд 276. Для вывода горизонтальной линии служит тэг …

А. BR;
Б. H1;
В. P;
Г.

HR;
Д. A.

Г

6. Для вывода горизонтальной линии служит тэг …А. BR;Б. H1;В. P;Г. HR;Д. A.Г

Слайд 287.Для обозначения абзаца служит
тэг …

А. BR;
Б. H1;
В. P;
Г.

HR;
Д. A.

В

7.Для обозначения абзаца служит  тэг …А. BR;Б. H1;В. P;Г. HR;Д. A.В

Слайд 29Практическая работа
Создать HTML-код страницы


Компьютер и ПО



Компьютер и ПО





На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.


Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.





Практическая работа Создать HTML-код страницы        Компьютер и ПО

Слайд 301. Заголовок изменить на
Устройства компьютера и программное обеспечение.
Цвет шрифта

заголовка - зеленый.
2. Выравнивание 1 предложения по центру. Выравнивание 2 предложения по левому краю.
3. Добавьте 3 предложение:
Возможности современного ПК столь велики, что все большее число людей находят ему применение в своей работе, учебе, быту. 
4. После 3 предложения добавьте горизонтальную линию.
5. Разместите графический файл.
6. Установите фон.

1. Заголовок изменить на Устройства компьютера и программное обеспечение. Цвет шрифта заголовка - зеленый.2. Выравнивание 1 предложения

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть