Слайд 2
План
Гіпертекст.
Поняття про Web-документи.
Мова HTML.
Структура Web-документів.
Створення Web-сайту за допомогою
редактора MS FrontPage
Команди мови HTML.
Слайд 3
1. Гіпертекст
Гіперпосилання - це фрагменти тексту або зображення
на Web-сторінці, які дозволяють клацанням на них відкривати інші
Web-сторінки.
Гіпертекст – це електронний документ, який містить гіперпосилання на інші документи.
Термін “гіпертекст” запропонував Тед Нельсон 1969 р.
Слайд 4
2. Поняття про Web-документи
Web-документ зберігається і пересилається як
файл з розширенням htm чи html.
Для відображення html-файлів
використовують браузери.
Web-документ— це документ, який призначений для перегляду на екрані комп'ютера електронної інформації за допомогою програми-браузера.
Декілька Web-документів на одну тему, що є на деякому комп'ютері чи належать одному власникові, утворюють Web-вузол (інший термін — Web-сайт).
Слайд 7
3. Мова HTML
Мова HTML (мова гіпертекстової розмітки) призначена
для опису Web-сторінок i не є мовою програмування. Вона
призначена для розмітки текстових документів, тобто для їх форматування.
Керуючим елементом мови HTML є тег, який визначає, як буде виглядати відповідний фрагмент на екрані броузера.
Тег - це команда HTML формування вигляду фрагменту Web-сторінки, яка завжди записується в кутові дужки.
Мова HTML має певні правила орфографії та синтаксис.
Слайд 8
Для створення Web-сторінок Web-дизайнери використовують редактори тексту типу
Блокнот, візуальні редактори типу MS FrontPage, Macromedia Dreamweaver, Netscape
Editor, Webedit, HTMLWriter, HTML Assistant, HTMLed, де використовується
мова HTML — Hyper Text Markup Language (мова для розмічування гіпертекстових документів).
Слайд 9
4. Структура Web-документів
Bci HTML-документа будуються за визначеними правилами:
текст
документа починаеться тегом i закінчується тегом ;
всередині контейнера
знаходяться ще два контейнери (заголовок Web-сторінки) і (її вміст);
всередині контейнера знаходяться інші контейнери, серед них (рядок символів заголовка вікна броузера).
Web-сторінка зберігається в текстовому файл з розширенням HTML або НТМ.
Слайд 11
Наприклад, закінчений HTML-файл може мати такий вигляд:
Mій
перший крок
Привіт, це моя перша сторінка.
Слайд 12
5. Створення Web-сайту за допомогою редактора MS FrontPage
Слайд 13
Режими редагування веб-сторінки:
Слайд 16
6. Команди мови HTML
Команди мови HTML називаються тегами.
Теги бувають одинарними і парними.
Більшість тегів є парними,
як наприклад, тег означення HTML-файлу: ... .
Слайд 17
Розглянемо основні параметри тега BODY:
BACKGROUND = "шлях до
графічгого файлу"— задає
картинку для тла;
BGCOLOR = "white" — задає
білий колір тла, якщо не
використовується тло-картинка;
TEXT = "black" — задає колір тексту (тут — чорний) на
сторінці.
Тег позначає коментар. Текст у середині тега
виводитися на екран не буде.
Коментар можна писати також у середині парного тега текст-коментар .
Слайд 18
Оформлення тексту в HTML-документі
Параграфи вводяться тегом . За
допомогою параграфів можна вирівнювати текст:
по центру
текст
по лівому
краю
<р align="left">текст
по правому краю
<р align="right">текст
по ширині
<р align="justify">текст
Якщо не встановлювати параграф, текст "з мовчазної згоди" вирівнюється по лівому краю.
Слайд 19
— наступний за цим тегом текст буде
наведено у новому рядку без пропуску рядка.
—
буде проведена горизонтальна лінія.
Парні теги форматування символів тексту:
<В> текст В> — Полужирний шрифт тексту;
<І> текст І> — шрифт-курсив;
текст — підкреслений шрифт;
текст — нижній індекс, наприклад, Н20;
текст — верхній індекс, наприклад, а2;
текст — великий шрифт;
текст — малий шрифт;
<В> <І> текст І>В> — товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Слайд 20
Окремим типом абзацу є заголовок.
Теги Результат
на екрані
Заголовок 1
Заголовок 1.
<Н2>Заголовок 2Н2> Заголовок 2.
<НЗ>Заголовок 3Н3> Заголовок 3.
<Н4>Заголовок 4Н4> Заголовок 4.
<Н5> Заголовок 5 Н5> Заголовок 5.
<Н6> Заголовок 6 Н6> Заголовок 6.
Теги вирівнювання:
< CENTER > елемент — вирівнювання до центру;
елемент — вирівнювання до лівого краю;
елемент — вирівнювання до правого краю.
Слайд 21
7. Огляд технологій веб 2. Поняття веб-журналу й
різновиди веб-журналів
Технологія Веб 2.0 (Web 2.0) – друге покоління
мережних сервісів (її використання дає змогу не лише переглядати веб-ресурси мережі, а й завантажувати власні)
Слайд 22
Веб-журнал (блог) – це сайт, основний зміст якого
постійно оновлюється новими записами, які можуть містити символьні, графічні,
звукові та відео дані, і відображається у хронологічному порядку.
Слайд 24
Вікі-енциклопедія — це сайт довідкового характеру, наповнення якого
здійснюється спільними зусиллями великої кількості учасників. Сайт функціонує за
спеціальною технологією, яка називається «вікі» (від гавайського «wiki-wiki» означає «швидко»).
Приклади таких вікі-енциклопедій:
- http://uk.wikipedia.org– україномовна вікі-енциклопедії;
- www.eduwiki.uran.net.ua– «ВікіОсвіта» – мережене об’єднання учасників навчально-виховного процесу;
- http://wiki.km-school.ru– тематична вікі-енциклопедія, присвячена використанню інформаційних технологій;
- http://wiki.vspu.ru/– вікі-енциклопедія Волгоградського державного педагогічного університету.
Слайд 25
Домашнє завдання
Вивчити теоретичний матеріал
Ривкінд Й.Я. Інформатика 11
кл.
п.4.7-4.9, стр.247-272
Законспектувати:
Типи веб-сторінок.
Класифікація веб-сайтів.
Стилі дизайну сайтів.
Засоби розробки
веб-сторінок.