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

Август 1, 2022

Главная
Информатика
Основы языка гипертекстовой разметки документов

Содержание

2. Интернет –это сеть, объединяющая компьютерные сети, опоясывающая весь мир Web-страничка – документ, основа которого HTML файл
3. ЯЗЫК HTML – это универсальный язык, который понимают все компьютеры во всем мире (HYPER TEXT Markup
4. Для создания Web-сайта разработано много программ- MS FrontPage, Macromedia Dreamweawer и др. Процесс создания и редактирования
5. Тег (Tag)– инструкция браузеру, указывающая способ отображения текста. Теги несут ключевую информацию о том, как форматировать
6. … Теги бывают двойные и одиночные Двойной тег состоит из открывающего (который говорит, что с этого
7. Главные теги
8. Структура или «скелет» WEB-странички В стадии разработки Мой класс
10. … … Теги заголовка. Они задают уровень заголовка и гарнитуру шрифта (размер текста: Н1 - самый
11. Теги форматирования Моя первая WEB-страница Располагает заголовок по центру Создана 1 апреля 2005 года Располагает абзац
12. … - жирный … - курсив … - подчеркивание … - форматирование текста color = цвет
13. Запуск БЛОКНОТА ПУСК-Программы-Стандартные- Блокнот Воспользуемся Блокнотом для создания WEB-странички
14. Создайте HTML-файл Мой класс Мой класс был очень шумным и веселым
15. Работа с блокнотом Задайте имя файла и расширение HTML Выберите место для сохранения Сохраните HTML-файл
16. Гиперссылки на Web-страницах
17. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную
18. При размещении текста на Web – страницах используют различные варианты списков: Нумерованные списки; Маркированные списки; Списки
19. На страницах сайта располагают формы для отправления сведений администратору сайта. Формы включают в себя управляющие элементы
20. Тестирование и публикация Web-сайтов
21. Перед опубликованием сайта в Интернете надо: Просмотреть страницы сайта в различных браузерах; Проверить: Нормально ли читается
22. Для публикации Web – сайта необходимо получить от провайдера следующие сведения: URL – сайта Секретное имя
23. Золотые правила оформления сайта: • Меню может быть выделено, и бросаться в глаза даже в ущерб
24. Дизайн сайта- это художественное и функциональное оформление сайта, предполагающее единство содержательных и навигационных элементов, выбранных исходя
25. Чего стоит избегать при создании страницы: • Не стоит использовать часто используемые слова и фразы при
26. В качестве основных ошибок при создании Web-страниц можно отметить: • неудачное цветовое решение; • неработающие ссылки;
28. Скачать презентацию

Слайд 2

Интернет –это сеть, объединяющая
компьютерные сети, опоясывающая
весь мир
Web-страничка –

документ,
основа которого
HTML файл

Web -сайт – это место в сети Интернет,
где хранятся набор Web-страниц,
принадлежащих одному владельцу.

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

HTML( файл) -
документ, созданный на основе
языка HTML

Перед вами определения важнейших понятий

Слайд 3

ЯЗЫК HTML – это универсальный язык,
который понимают все компьютеры во

всем мире
(HYPER TEXT Markup Language), это язык гипертекста,
который используется для создания любого сайта.
Был разработан Тимом Бернес Ли(1990г.),
и благодаря росту Мировой паутины, набрал
популярность.

HTML – файл представляет собой простой текстовый файл, имеющий расширение HTML.

Слайд 4

Для создания Web-сайта разработано много программ- MS FrontPage, Macromedia Dreamweawer и

др. Процесс создания и редактирования страницы очень нагляден, т.к.производится в режиме WYSIWYG («What You See Is What You Get» - «Что видишь, то и получаешь». Но для создания простейшей Web-странички можно воспользоваться текстовым редактором «Блокнот».

В основе HTML-файла лежат теги. Теги определяют структуру Web-страницы

Слайд 5

Тег (Tag)– инструкция браузеру, указывающая
способ отображения текста.
Теги несут ключевую информацию

о том, как форматировать текст, где помещать картинки, где делать перенос и т.д.

Для того, что бы отличать теги от текста, их
заключают в угловые скобки < >.
Каждый тег имеет свое имя.

Слайд 6

…

Теги бывают двойные и одиночные
Двойной тег состоит из

открывающего (который говорит, что с этого места тег начинает действовать) и закрывающего (который говорит, что в этом месте действие тега заканчивается).

Одинарный тег просто говорит о том, что в этом месте надо что – то сделать, например перейти на новую строку или поместить рисунок.

Слайд 7

Главные теги

<TITLE><br></HEAD><br><p><BODY> <br></BODY><br></div></h2></div></div><div class="slides-wrapper"><div id="slide8" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 8</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/554670/slide-7.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Структура или «скелет» WEB-странички В стадии разработки Мой класс" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/554670/slide-7.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/554670/slide-7.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/554670/slide-7.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/554670/slide-7.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Структура или «скелет» WEB-странички<br><p><HTML> <br><HEAD> </HEAD><br><BODY> </BODY><br> </HTML> <br><p>В стадии разработки<br><p><TITLE></div></h2><div class="slides-content">Мой класс

Слайд 9

Слайд 10

…

…
Теги заголовка.
Они задают уровень заголовка

и гарнитуру шрифта (размер текста: Н1 - самый большой, Н6 - самый маленький)
Теги

определяют деление на абзацы.
Закрывающийся тег

необязателен
Параметр тегов ALIGN выравнивает текст:
LEFT – по левому краю
RIGHT – по правому краю
CENTER – по центру

Теги форматирования

Слайд 11

Теги форматирования
Моя первая WEB-страница
Располагает заголовок по центру

ALIGN=“left”> Создана 1 апреля 2005 года

Располагает абзац по левому краю

Слайд 12

… - жирный … - курсив …

- подчеркивание … - форматирование текста color = цвет текста
- разрыв строки

Теги форматирования

Слайд 13

Запуск БЛОКНОТА
ПУСК-Программы-Стандартные- Блокнот
Воспользуемся Блокнотом для создания WEB-странички

Слайд 14

Создайте HTML-файл

Мой класс

Мой

класс был очень шумным и веселым

Слайд 15

Работа с блокнотом
Задайте имя файла
и расширение HTML
Выберите место
для сохранения
Сохраните

HTML-файл

Слайд 16

Гиперссылки на Web-страницах

Слайд 17

Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому

обеспечивает переход на Web-страницу, указанную в адресной части ссылки.

Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки.
Указатель ссылки – это текст или рисунок, выделенный синим цветом и подчеркиванием.
Адресная часть гиперссылки представляет собой URL – адрес документа, на который указывает ссылка.

Слайд 18

При размещении текста на Web – страницах используют различные варианты списков:
Нумерованные

списки;
Маркированные списки;
Списки определений
Возможно создание вложенных списков, причем вкладываемый список может по типу отличаться от основного.

Слайд 19

На страницах сайта располагают формы для отправления сведений администратору сайта.
Формы включают

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

Слайд 20

Тестирование и публикация Web-сайтов

Слайд 21

Перед опубликованием сайта в Интернете надо:
Просмотреть страницы сайта в различных браузерах;
Проверить:
Нормально

ли читается текст на выбранном фоне;
Правильно ли расположены рисунки;
Правильно ли работают гиперссылки

Слайд 22

Для публикации Web – сайта необходимо получить от провайдера следующие сведения:
URL

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

Слайд 23

Золотые правила оформления сайта:
• Меню может быть выделено, и бросаться в

глаза даже в ущерб читабельности. Его не надо рассматривать - оно должно быть заметным.
•      Информация должна быть представлена так, чтобы ее удобно было долго читать. Это значит: небольшая ширина колонки (чтобы не бегать глазами по горизонтали), текст с засечками (serifs, более пригоден для долгого чтения), темным по светлому (так не утомляются глаза).
•      На одной странице должен быть размещен только один связанный блок текста. Если надо перейти к блоку с другим содержанием - сделайте ссылку.
•      Ссылки должны однозначно определять то место, куда они указывают! Если это заголовок статьи - сделайте рядом описание. Если это переход к целому разделу - опишите все пункты раздела.
•      Не надо давать пользователю выбор! В смысле, в одно и то же время давать возможность выбора. Опишите одну альтернативу, со ссылкой. Затем другую со ссылкой. Если первая пользователю подойдет, он не будет думать о второй.
•      Не злоупотреблять динамическими объектами.

Слайд 24

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

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

Слайд 25

Чего стоит избегать при создании страницы:
• Не стоит использовать часто используемые

слова и фразы при поиске, поисковая система отслеживает соответствие содержания страницы ключевым словам;
•      Не стоит превышать заданные лимиты в тэгах title, description, key words;
•      Не стоит использовать заглавные буквы в заголовках и тексте;
•      Не стоит использовать фреймы, поисковые системы с ними не справляются.

Слайд 26

В качестве основных ошибок при создании Web-страниц можно отметить:
• неудачное цветовое

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

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

Содержание

Интернет –это сеть, объединяющая компьютерные сети, опоясывающая весь мир Web-страничка –

ЯЗЫК HTML – это универсальный язык, который понимают все компьютеры во

Для создания Web-сайта разработано много программ- MS FrontPage, Macromedia Dreamweawer и

Тег (Tag)– инструкция браузеру, указывающая способ отображения текста.Теги несут ключевую информацию

… Теги бывают двойные и одиночные Двойной тег состоит из

… … Теги заголовка. Они задают уровень заголовка

…

…

Теги форматирования Моя первая WEB-страница Располагает заголовок по центру

Моя первая WEB-страница

… - жирный … - курсив …

Запуск БЛОКНОТАПУСК-Программы-Стандартные- БлокнотВоспользуемся Блокнотом для создания WEB-странички

Создайте HTML-файл Мой класс Мой

Работа с блокнотомЗадайте имя файла и расширение HTMLВыберите место для сохраненияСохраните