Презентация по информатике на тему "Структура web-страницы" (10 класс)
Cкачать презентацию: Презентация по информатике на тему "Структура web-страницы" (10 класс)
Презентация по слайдам:
Слайд #1
Структура
web-страницы
Слайд #2
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML.
Язык разметки – HTML (Hyper Text Markup Language.
Создан в 1991 г. Зарождение языка связано с программистом - Тимом Бернерсом Ли.
Слайд #3
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы
(тэги – с англ. «метка»)
и в результате мы получаем Web-страницу.
Слайд #4
Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
В качестве гиперссылки на страницах сайта может использоваться текст, такая гиперссылка будет называться текстовой. Весьма часто текстовая гиперссылка представляет собой подчеркнутый текст синего цвета.
Если в качестве гиперссылки использовано графическое изображение, например фотография, то догадаться о том, что это гиперссылка будет сложно. Если при подведении курсора мыши к элементу Web-страницы он принимает форму руки, то этот элемент является гиперссылкой.
Слайд #5
Вид Web-страницы задается тэгами, которые заключаются
в угловые скобки.
Тэги
Одиночные
(нет конечного тэга)
<hr>
Парные
(обязателен закрывающийся тэг, используется слеш / , который обозначает, что тег является конечным, закрывающим некоторую структуру
<head> </head>
Слайд #6
<html>
<head>
Название документа (заголовок)
</head>
<body>
Тело документа
</body>
</html>
Слайд #7
Заголовок web-страницы обозначается при помощи тэгов
<head> и </head>
содержит название документа
Слайд #8
Границы документа –тэг <html> - должен открывать документ,
тэг </html> - должен стоять в последней строке документа.
Без этих тегов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Страница разделяется на две логические части: заголовок и содержание.
Слайд #9
Тэг <title> определяет имя документа, располагается внутри заголовка документа
Слайд #10
Основное содержание страницы помещается в контейнер
<body> </body>
и может включать текст, таблицы, ссылки, графические изображения и т.д.
Слайд #11
Форматирование текста на Web-странице
Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1></Н1> (самый крупный) до <Н6></Н6> (самый мелкий).
Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта.
Слайд #12
Форматирование шрифта
Тэг <FONT>
Атрибуты
FACE (гарнитура шрифта) = “Arial”
SIZE(размер) = 4
СOLOR (цвет) = “red”
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", либо его шестнадцатеричным значением.
Слайд #13
выравнивание
Атрибут ALIGN =
“ center”
“right”
“left”
Слайд #14
Горизонтальная линия
Отделение заголовка от остального содержания страницы производится с помощью горизонтальной линии –
ТЭГ <HR>
Слайд #15
Абзацы
Разделение тексты на абзацы производится с помощью
тэга <P> и </P>
(Выравнивание для абзаца)
Слайд #16
Размещение графики на Web-странице
Тэг <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тэг. Тэг <IMG> является одиночным. В него по умолчанию входят два атрибута – «src» и «alt». Первый должен содержать в себе путь к изображению, второй – текстовое описание, которое используется поисковыми системами.
Графика: GIF, JPG, PNG.
Например: <IMG SRC=“CLOCK.PNG”>
Слайд #17
Слайд #18
Слайд #19
Слайд #20
Практическая работа
Создать заготовку Web-страницы «Компьютер» и просмотреть ее в браузере. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.
Запустить приложение Блокнот
<HTML>
<HEAD>
<ТITLE>Компьютер</ТITLE>
</HEAD>
<BODY>
Компьютер и ПО
</BODY>
</HTML>
Сохраните файл под именем COMPUTER.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.
Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Google Chrome или др.). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу COMPUTER.HTML откройте окно браузера.
