Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

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

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

Презентация на тему Основы html

Содержание

2. Знакомство с языком HTML H -Hyper T
3. Знакомство с языком HTML Гипертекст – это
4. Так как WEB-документ предназначен для просмотра его
5. Обычно сайт имеет титульную страницу (страницу с
6. Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую и видеоинформацию.
7. Создание Web-сайтов реализуется - с использованием
8. Основными достоинствами HTML-документов являются: Малый информационный объем;Возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.
9. Для создания Web-страниц используются простейшие текстовые редакторы,
10. Создание Web-страницыОткрыть окно текстового редактора БЛОКНОТ;Набрать HTML-код
11. Запустить браузер и открыть созданный файл командой
12. Структура Web-страницыВид Web-страницы задается тэгами, которые заключаются
13. Каждая html страница начинается тегом начала страницы
14. Структура HTML документа: Невидимая часть Видимая часть
15. Структура Web-страницыHTML-код страницы помещается внутрь контейнера .
16. Любая страница должна иметь следующую структуру: Например:
17. Структура Web-страницыПусть файл index.htm, содержит такой HTML-код:
18. Структура Web-страницы Во время отображения
19. ЗаголовкиРазмер шрифта для имеющихся в тексте заголовков
20. ЗаголовкиПри просмотре файла в браузере окно примет следующий вид:
21. Основные теги и их описание в HTML
22. Заголовки, атрибуты тэгов Задать тип выравнивания
23. Заголовки, атрибуты тэговТекст кода:
24. Форматирование текстаИзменить начертание шрифта позволяют следующие тэги:
25. Форматирование текстаТекст кода:
26. Форматирование текстаДля выделения фрагментов текста используется тэг
27. Форматирование текстаТекст кода:
28. Форматирование текстаРазделение текста на абзацы производится с
29. Форматирование текстаТекст кода:
30. В браузере:
31. Изображения Для размещения на Web-страницах используются графические файлы
32. Текст кода:
33. Изображения Если файл находится в
34. Изображения Иллюстрации на Web-страницах стали
35. Списки Довольно часто при размещении текста на
36. Списки Нумерованный список создается тэгом
37. СпискиТекст кода:
38. Списки Ненумерованный список задается тэгом
39. СпискиТекст кода:
40. СпискиСписок терминов создается с помощью контейнера определений
41. Текст кода:
42. Гиперссылки Первая титульная страница
43. Гиперссылки Панель навигации будет
44. Гиперссылки Компьютер
46. Гиперссылки Для каждой гиперссылки определим адрес
47. Панель навигации
48. ГиперссылкиИспользуя различные значения атрибута HREF, получают различные
49. ГиперссылкиВ качестве указателя ссылки можно использовать не
50. Цветовые схемыЦвет на Web-странице задают либо его
51. Цветовые схемыОсновную цветовую схему Web-страницы можно задать
52. Цветовые схемы Например: Для оформления страницы о программном обеспечении можно использовать следующую цветовую схему:HREF
54. Скачать презентацию
55. Похожие презентации

Знакомство с языком HTML H -Hyper T -Text M-Markup L -Language HTML– язык гипертекстовой разметки документов.

Знакомство с языком HTML Гипертекст – это электронный документ, который содержит гиперссылки

Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы

Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки

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

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

Основными достоинствами HTML-документов являются: Малый информационный объем;Возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый

Создание Web-страницыОткрыть окно текстового редактора БЛОКНОТ;Набрать HTML-код страницы;Сохранить под именем index.htm (обязательно

Запустить браузер и открыть созданный файл командой [Файл – открыть] (или двойным

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

Каждая html страница начинается тегом начала страницы и заканчивается тегом её закрытия

Структура HTML документа: Невидимая часть Видимая часть

Структура Web-страницыHTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер

Любая страница должна иметь следующую структуру: Например:

Структура Web-страницыПусть файл index.htm, содержит такой HTML-код:

Структура Web-страницы Во время отображения страницы в браузере разработчик не

ЗаголовкиРазмер шрифта для имеющихся в тексте заголовков задается тэгами от (самый крупный)

ЗаголовкиПри просмотре файла в браузере окно примет следующий вид:

Основные теги и их описание в HTML Определяет документ HTML Определяет

Заголовки, атрибуты тэгов Задать тип выравнивания заголовка для тэга заголовка позволяет

Заголовки, атрибуты тэговТекст кода: Компьютер

Форматирование текстаИзменить начертание шрифта позволяют следующие тэги: Жирный Курсив Подчеркнутый Жирный

Форматирование текстаТекст кода: Компьютер

Форматирование текстаДля выделения фрагментов текста используется тэг Этот тэг имеет следующие атрибуты:FACE

Форматирование текстаРазделение текста на абзацы производится с помощью тэга .

Изображения Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG, PNG.

Изображения Если файл находится в другом каталоге на данном локальном

Изображения Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи

Списки Довольно часто при размещении текста на Web-страницах удобно использовать списки в

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

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

СпискиСписок терминов создается с помощью контейнера определений . Внутри него текст оформляется

Гиперссылки Первая титульная страница должна предоставлять посетителю Web-сайта возможность

Гиперссылки Панель навигации будет представлять собой абзац, выровненный по

Гиперссылки Для каждой гиперссылки определим адрес перехода. Для этого используется тэг

ГиперссылкиИспользуя различные значения атрибута HREF, получают различные реакции браузера:Ссылка на Web-страницу локального

ГиперссылкиВ качестве указателя ссылки можно использовать не только текст, но и изображение.

Цветовые схемыЦвет на Web-странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным

Цветовые схемыОсновную цветовую схему Web-страницы можно задать в тэге с помощью

Цветовые схемы Например: Для оформления страницы о программном обеспечении можно использовать следующую цветовую схему:HREF

Цветовые схемыВ браузере страница будет выглядеть так:(в данном случае неудачно выбрана цветовая схема для оформления страницы)

Слайды презентации

Слайд 2 Знакомство с языком HTML
H -Hyper
T -Text
M-Markup

Знакомство с языком HTML H -Hyper T -Text M-Markup L -Language

L -Language
HTML– язык гипертекстовой разметки документов.

Слайд 3 Знакомство с языком HTML
Гипертекст – это электронный документ,

Знакомство с языком HTML Гипертекст – это электронный документ, который содержит

который содержит гиперссылки на другие документы.
Гипертекстовый документ предназначен для

вывода информации на экран компьютера.
Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют для организации доступа к информации в WWW, т.е. при работе с WEB-документами.
WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.

Слайд 4 Так как WEB-документ предназначен для просмотра его на

Так как WEB-документ предназначен для просмотра его на компьютере, то желательно,

компьютере, то желательно, чтобы он помещался целиком на экране.

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

Слайд 5 Обычно сайт имеет титульную страницу (страницу с оглавлением),

Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются

на которой имеются гиперссылки на его основные разделы (Web-страницы).

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

Слайд 6 Web-сайты обычно являются мультимедийными, так как кроме текста

могут содержать иллюстрации, анимацию, звуковую и видеоинформацию.

Слайд 7 Создание Web-сайтов реализуется
- с использованием языка разметки

гипертекстовых документов HTML.
Технология HTML состоит в том, что

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

Слайд 8 Основными достоинствами HTML-документов являются:
Малый информационный объем;

Возможность просмотра на

персональных компьютерах, оснащенных различными операционными системами.

Слайд 9 Для создания Web-страниц
используются простейшие текстовые редакторы, которые

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в

не включают в создаваемый документ управляющие символы форматирования текста.

В качестве такого редактора в Windows можно использовать стандартное приложение БЛОКНОТ.

Слайд 10 Создание Web-страницы
Открыть окно текстового редактора БЛОКНОТ;
Набрать HTML-код страницы;
Сохранить

Создание Web-страницыОткрыть окно текстового редактора БЛОКНОТ;Набрать HTML-код страницы;Сохранить под именем index.htm

под именем index.htm (обязательно титульная страница сайта называется этим

именем), установив в поле Тип файла «все файлы»;

Слайд 11 Запустить браузер и открыть созданный файл командой [Файл

Запустить браузер и открыть созданный файл командой [Файл – открыть] (или

– открыть] (или двойным щелчком левой кнопки мыши непосредственно

по значку файла). В заголовке окна браузера высвечивается название Web-страницы (текст, записанный в тэге )

Для корректной работы сайта все объекты, используемые в нем (файлы, рисунки и т.д.), должны храниться в одной папке с файлом index.htm. Обычно для сайта создают отдельную папку.

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

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

угловые скобки.
Тэги могут быть одиночными или парными, для

которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением.

Слайд 13 Каждая html страница начинается тегом начала страницы

Каждая html страница начинается тегом начала страницы и заканчивается тегом её

и заканчивается тегом её закрытия
.
HTML страница состоит

из двух частей: Невидимой части (… ) – в ней расположены заголовок и другие объекты.
Видимая часть (…) – в которой расположены непосредственно элементы веб страницы: абзацы, таблицы, рисунки и т.д.

Слайд 14 Структура HTML документа:

Невидимая часть

Видимая часть

Слайд 15 Структура Web-страницы
HTML-код страницы помещается внутрь контейнера .

Без этих тэгов браузер не в состоянии определить формат

документа и правильно его интерпретировать.
Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для её правильного отображения.
Название Web-страницы содержится в контейнере и отображается в строке заголовка браузера при просмотре страницы.
Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и т.д.

Слайд 16 Любая страница должна иметь следующую структуру:
Например:

Компьютер

Все о компьютере

Слайд 17 Структура Web-страницы
Пусть файл index.htm, содержит такой HTML-код:

Компьютер

Все о компьютере

При просмотре в браузере файла,
получим следующий вид

Слайд 18 Структура Web-страницы
Во время отображения страницы

в браузере разработчик не может вносить никакие изменения в

существующую страницу. Для редактирования страницы её нужно открыть в приложении БЛОКНОТ, используя контекстное меню (вызывается правой кнопкой мыши)

Слайд 19 Заголовки
Размер шрифта для имеющихся в тексте заголовков задается

ЗаголовкиРазмер шрифта для имеющихся в тексте заголовков задается тэгами от (самый

тэгами от (самый крупный) до (самый мелкий).

Все указанные тэги парные.
Заголовок страницы целесообразно выделять самым крупным шрифтом

Все о компьютере

Заголовок желательно отделять от основного содержания страницы горизонтальной линией с помощью одиночного тэга

Слайд 20 Заголовки
При просмотре файла в браузере окно примет следующий

вид:

Слайд 21 Основные теги и их описание в HTML
Определяет

документ HTML
Определяет основную часть или тело документа
--

Определяет заголовки с 1 по 6
Определяет параграф

Вставляет единичный перенос строки
Определяет горизонтальную линейку
Определяет комментарий

Слайд 22 Заголовки, атрибуты тэгов
Задать тип выравнивания заголовка

для тэга заголовка позволяет атрибут ALIGN, которому требуется придать

определенное значение.

ALIGN=“right” – выравнивание по правому краю
ALIGN=“center” – выравнивание по центру
ALIGN=“left” – выравнивание по левому краю

Слайд 23 Заголовки, атрибуты тэгов
Текст кода:

Компьютер

Все о компьютере

Слайд 24 Форматирование текста
Изменить начертание шрифта позволяют следующие тэги:
Жирный

Форматирование текстаИзменить начертание шрифта позволяют следующие тэги: Жирный Курсив Подчеркнутый

Курсив
Подчеркнутый
Жирный подчеркнутый

курсив
Равноширинный
Выделение
Усиленное выделение

Слайд 25 Форматирование текста
Текст кода:

Компьютер

Все

о компьютере
Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный
Выделение
Усиленное выделение

Слайд 26 Форматирование текста
Для выделения фрагментов текста используется тэг

Форматирование текстаДля выделения фрагментов текста используется тэг Этот тэг имеет следующие

Этот тэг имеет следующие атрибуты:
FACE – задает гарнитуру шрифта

(например, FACE=“Arial”)
SIZE – задает размер шрифта (например, SIZE=4)
COLOR – задает цвет шрифта (например, COLOR=“blue”).
Значение атрибута COLOR можно задать либо значением цвета (например, “red”, “green”, “blue” и тд.), либо шестнадцатеричным его значением, которое использует RGB-формат “#RRGGBB”.

Слайд 27 Форматирование текста
Текст кода:

Компьютер

Все о компьютере

Слайд 28 Форматирование текста
Разделение текста на абзацы производится с помощью

тэга .
Например, поместим на титульную

страницу текст, разбитый на абзацы с различным выравниванием:

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

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

Слайд 29 Форматирование текста
Текст кода:

Слайд 30 В браузере:

Слайд 31 Изображения
Для размещения на Web-страницах используются графические файлы форматов

GIF, JPEG, PNG.

Для вставки изображения используется

одиночный тэг с атрибутом SRC, который указывает место хранения файла на локальном компьютере или в Интернете.

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

Слайд 32 Текст кода:

Компьютер

Все

о компьютере

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

Слайд 33 Изображения
Если файл находится в другом

каталоге на данном локальном компьютере, то значением атрибута должно

быть полное имя файла (включая путь к файлу).

Например:

Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла.

Например:

Слайд 34 Изображения
Иллюстрации на Web-страницах стали неотъемлемым

элементом дизайна. Однако пользователи иногда в целях экономии времени

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

Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

Слайд 35 Списки
Довольно часто при размещении текста на Web-страницах удобно

Списки Довольно часто при размещении текста на Web-страницах удобно использовать списки

использовать списки в различных вариантах:
Нумерованные списки, когда элементы списка

идентифицируются с помощью чисел;
Маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров);
Списки определений позволяют составлять перечни определений в так называемой словарной форме.

Возможно создание и вложенных списков

Слайд 36 Списки
Нумерованный список создается тэгом

, а каждый элемент списка определяется тэгом .

Например:

Системные

программы

Прикладные программы

Системы программирования

Слайд 37 Списки
Текст кода:

Компьютер

Программное обеспечение

Системные программы
Прикладные программы
Системы программирования

Слайд 38 Списки
Ненумерованный список задается тэгом

, а каждый элемент списка определяется также тэгом .

С помощью атрибута TYPE тэга

текстовые редакторы;
графические редакторы;
электронные таблицы;
системы управления базами данных.

Слайд 39 Списки
Текст кода:

Компьютер

Программное обеспечение

Системные программы
Прикладные программы
- текстовые редакторы;
- графические редакторы;
- электронные таблицы;
- системы управления базами данных.
Системы программирования

Слайд 40 Списки
Список терминов создается с помощью контейнера определений

СпискиСписок терминов создается с помощью контейнера определений . Внутри него текст

. Внутри него текст оформляется в виде термина, который

определяется непарным тэгом

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

.
Например:

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

Слайд 41 Текст кода:

Словарь

Компьютерные термины

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

Слайд 42 Гиперссылки
Первая титульная страница должна предоставлять

Гиперссылки Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать

посетителю Web-сайта возможность начать путешествие по сайту. Для этого

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

Слайд 43 Гиперссылки
Панель навигации будет представлять собой

Гиперссылки Панель навигации будет представлять собой абзац, выровненный по центру,

абзац, выровненный по центру, в котором указатели гиперссылок разделены

пробелами ( ):

[Программы] [Соварь] [Комплектующие] [Анкета]

Слайд 44 Гиперссылки

Компьютер

Все о

компьютере

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

[Программы] [Соварь] [Комплектующие] [Анкета]

Слайд 45

Слайд 46 Гиперссылки
Для каждой гиперссылки определим адрес перехода.

Для этого используется тэг гиперссылки с атрибутом

HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете.
Тэг должен содержать указатель гиперссылки:
указатель гиперссылки
В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта):

[ Программы ]
[ Словарь ]
[ Комплетующие ]
[ Анкета ]

Слайд 47 Панель навигации

Слайд 48 Гиперссылки
Используя различные значения атрибута HREF, получают различные реакции

ГиперссылкиИспользуя различные значения атрибута HREF, получают различные реакции браузера:Ссылка на Web-страницу

браузера:
Ссылка на Web-страницу локального компьютера:
Куранты , где

clock.htm – имя Web-страницы, КУРАНТЫ – указатель ссылки
Ссылка на Web-страницу, размещенную в Интернете:
Cайт о Москве , где http://www.moskva.ru – URL-адрес страницы в Интернете, САЙТ О МОСКВЕ – указатель ссылки
Вставка изображения:
Башня , где spassk.jpg – имя файла, содержащего изображение, БАШНЯ – указатель ссылки
Запуск проигрывателя звукового файла
Бой часов , где strike.wav – имя звукового файла
И другие.

Слайд 49 Гиперссылки
В качестве указателя ссылки можно использовать не только

ГиперссылкиВ качестве указателя ссылки можно использовать не только текст, но и

текст, но и изображение. В этом случае указатель ссылки

задается с помощью тэга

Обычно на Web-страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга:

,
где width=“30” height=“75” – размеры изображения на Web-странице

Слайд 50 Цветовые схемы
Цвет на Web-странице задают либо его названием,

Цветовые схемыЦвет на Web-странице задают либо его названием, либо числовым шестиразрядным

либо числовым шестиразрядным шестнадцатеричным кодом #RRGGBB, где две первые

цифры задают интенсивность красного цвета (red), средние две цифры – интенсивность зеленого (green), и последние две цифры – интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, а максимальная – FF. Легко догадаться, что синий цвет задает “#0000FF”. В таблице приведены значения некоторых цветов:

Слайд 51 Цветовые схемы
Основную цветовую схему Web-страницы можно задать в

тэге с помощью атрибутов:
Цвет фона : BGCOLOR=“#RRGGBB”
Текстура фона : BACKGROUND=“file_name”
Цвет

текста : TEXT=“#RRGGBB”
Цвет текста ссылки : LINK=“#RRGGBB”
Цвет текста активной ссылки: ALINK=“#RRGGBB”
Цвет текста просмотренной
ссылки : VLINK=“#RRGGBB”