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

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


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

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

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

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

Презентация на тему HTML страница

Содержание

Заголовок – очень важный элемент web-страницы. По нему поисковые системы ищут web-страницу на пространстве WWW по запросу пользователя. Заголовок должен как можно полно передавать содержание web-страницы. Заголовок должен быть коротким по тексту, но емким по содержанию.
Язык разметки гипертекста HTMLЗанятие 2© Николаева Вера Александровна, 2008 - 2010 Заголовок – очень важный элемент web-страницы. По нему поисковые системы ищут web-страницу Заголовок web-страницы© Николаева Вера Александровна, 2008Пример 2. Титульная страница персонального веб-сайта: Вот Тег должен обязательно включать основные ключевые слова – их наличие и соответствие 1. Фоновый цвет страницы:Атрибуты тега © Николаева Вера Александровна, 2008При отображении web-страницы Атрибуты тега © Николаева Вера Александровна, 2008Не все браузеры отображают все цвета Атрибуты тега © Николаева Вера Александровна, 2008Я рекомендую всегда пользоваться таблицей Артемия Атрибуты тега © Николаева Вера Александровна, 2008Пример 1.Фоновый рисунок имеет законченное содержание Атрибуты тега © Николаева Вера Александровна, 2008Я рекомендую перед тем, как назначить Атрибуты тега © Николаева Вера Александровна, 2008При отображении web-страницы программа-браузер Атрибуты тега © Николаева Вера Александровна, 2008Если ширина файла фонового рисунка меньше, Атрибуты тега © Николаева Вера Александровна, 2008Пример 3.Фоновый рисунок создан специально для Атрибуты тега © Николаева Вера Александровна, 2008Фоновый звук начинает воспроизводиться средствами мультимедиа Шрифт© Николаева Вера Александровна, 2008Шрифт web-страницы задают тегом ................... с атрибутами:1. Тип Шрифт© Николаева Вера Александровна, 20082. Размер шрифта (кегль)	sizeСпособ 1: лучше задавать относительный Шрифт© Николаева Вера Александровна, 20082. Размер шрифта    size Шрифт© Николаева Вера Александровна, 2008Задания. В коде страницы history-font.htm для разных абзацев Шрифт© Николаева Вера Александровна, 20083. Цвет шрифта 	colorСпособ 1: можно задать ключевым Шрифт© Николаева Вера Александровна, 2008Допускается использование всех атрибутов шрифта одновременно в одном Шрифт© Николаева Вера Александровна, 2008Задания. В коде страницы history-font.htm для разных абзацев Шрифт© Николаева Вера Александровна, 20084. Начертание шрифта 	 ………………………………………. Шрифт© Николаева Вера Александровна, 2008Задание. В коде страницы history-font.htm в 3-м абзаце
Слайды презентации

Слайд 2 Заголовок – очень важный элемент web-страницы. По нему

Заголовок – очень важный элемент web-страницы. По нему поисковые системы ищут

поисковые системы ищут web-страницу на пространстве WWW по запросу

пользователя. Заголовок должен как можно полно передавать содержание web-страницы. Заголовок должен быть коротким по тексту, но емким по содержанию. Недопустимы заголовки типа «Новая страница 1».
Заголовок записывается в разделе в теге .<br><p><br><p>Заголовок web-страницы<br><p>© Николаева Вера Александровна, 2008<br><p>Тег <title> в тексте html web-страницы обязательно должен идти сразу за тегом <head>, тогда поисковые роботы сработают эффективно!<br><p>Пример 1. Титульная страница веб-сайта, который рассказывает о городе Санкт-Петербурге:<br> </div> <div class="custom" > <!-- Yandex.RTB R-A-11464146-4 --> <div id="yandex_rtb_R-A-11464146-4"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-4", "renderTo": "yandex_rtb_R-A-11464146-4" }) }) </script></div> <hr> </div> <div class="descrip"> <h3 id="slide3"> <a href="/img/tmb/11/1062350/894d24d3ac32836cc7b3adc21884cd66-720x.jpg" target="_blank">Слайд 3</a> <br>Заголовок web-страницы<br>© Николаева Вера Александровна, 2008<br>Пример 2. Титульная </h3> <div class="image"> <a href="/img/tmb/11/1062350/894d24d3ac32836cc7b3adc21884cd66-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Заголовок web-страницы© Николаева Вера Александровна, 2008Пример 2. Титульная страница персонального веб-сайта: Вот как это выглядит на экране, в окне программы-браузера:"><img src="/img/tmb/11/1062350/894d24d3ac32836cc7b3adc21884cd66-720x.jpg" title="HTML страница" alt="Заголовок web-страницы© Николаева Вера Александровна, 2008Пример 2. Титульная страница персонального веб-сайта:"></a> </div> <div class="text"> <h4>страница персонального веб-сайта: <br>Вот как это выглядит на экране,</h4> в окне программы-браузера:<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide4"> <a href="/img/tmb/11/1062350/9be0562aaf63c8a62fceec1561559817-720x.jpg" target="_blank">Слайд 4</a> Тег должен обязательно включать основные ключевые слова </h3> <div class="image"> <a href="/img/tmb/11/1062350/9be0562aaf63c8a62fceec1561559817-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Тег должен обязательно включать основные ключевые слова – их наличие и соответствие содержанию страницы приводит к повышению страницы в рейтинге поисковых систем.В теге необходимо использовать только те слова и фразы, которые есть в тексте страницы. Если этих слов нет в содержании страницы, они не должны присутствовать в теге , иначе это грозит наказанием от поисковых систем.Заголовок web-страницы© Николаева Вера Александровна, 2007Рекомендуется не превышать длину тега в 50 знаков с пробелами. Ключевое словосочетание может быть написано прописными (заглавными) буквами.Пример. Заголовок главной страницы web-сайта нашего колледжа:МОСКОВСКИЙ КОЛЛЕДЖ автоматизации и ИТ, образование СПО, техникумПеред тем как написать такой текст в заголовке, я изучила статистику запросов сервера www.yandex.ru по некоторым ключевым словам и словосочетаниям за последний месяц на странице:http://wordstat.yandex.ru/advq?rpt=ppc&shw=1"><img src="/img/tmb/11/1062350/9be0562aaf63c8a62fceec1561559817-720x.jpg" title="HTML страница" alt="Тег должен обязательно включать основные ключевые слова – их наличие и"></a> </div> <div class="text"> <h4>– их наличие и соответствие содержанию страницы приводит к</h4> повышению страницы в рейтинге поисковых систем.<br>В теге <title> необходимо использовать только те слова и фразы, которые есть в тексте страницы. Если этих слов нет в содержании страницы, они не должны присутствовать в теге <title>, иначе это грозит наказанием от поисковых систем.<br><p><br><p>Заголовок web-страницы<br><p>© Николаева Вера Александровна, 2007<br><p>Рекомендуется не превышать длину тега <title> в 50 знаков с пробелами. Ключевое словосочетание может быть написано прописными (заглавными) буквами.<br><p>Пример. Заголовок главной страницы web-сайта нашего колледжа:<br><title>МОСКОВСКИЙ КОЛЛЕДЖ автоматизации и ИТ, образование СПО, техникум

Перед тем как написать такой текст в заголовке, я изучила статистику запросов сервера www.yandex.ru по некоторым ключевым словам и словосочетаниям за последний месяц на странице:
http://wordstat.yandex.ru/advq?rpt=ppc&shw=1

Слайд 5 1. Фоновый цвет страницы:

Атрибуты тега
© Николаева Вера

1. Фоновый цвет страницы:Атрибуты тега © Николаева Вера Александровна, 2008При отображении

Александровна, 2008
При отображении web-страницы программа-браузер "зальет" страницу этим фоном.

Вот как это выглядит на экране, в окне программы-браузера:

Слайд 6
Атрибуты тега
© Николаева Вера Александровна, 2008
Не все

Атрибуты тега © Николаева Вера Александровна, 2008Не все браузеры отображают все

браузеры отображают все цвета так, как видит создатель сайта

на своем мониторе. Студия Артемия Лебедева провела исследование и выяснила, что существует только группа цветов, которые отображаются одинаково всеми браузерами. Такие цвета назвали безопасными и включили в таблицу.

Слайд 7
Атрибуты тега
© Николаева Вера Александровна, 2008
Я рекомендую

Атрибуты тега © Николаева Вера Александровна, 2008Я рекомендую всегда пользоваться таблицей

всегда пользоваться таблицей Артемия Лебедева – как для цвета

фона, так и для цвета шрифта, так и для цветов декоративных элементов, кнопок, меню и даже (по возможности) фотографий. В этой таблице каждый цвет представлен в двух видах: кодировкой в режиме RGB (например, для цвета1: 255.255.204) и шестнадцатеричным кодом (например, для цвета1: FFFFCC).

2. Фоновый рисунок страницы:

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

Значение атрибута тега , определяющее фоновый цвет на web-странице записывается шестнадцатеричным кодом.


Слайд 8
Атрибуты тега
© Николаева Вера Александровна, 2008
Пример 1.
Фоновый

Атрибуты тега © Николаева Вера Александровна, 2008Пример 1.Фоновый рисунок имеет законченное

рисунок имеет законченное содержание в пределах файла, но его

ширина меньше ширины экрана:

При отображении web-страницы программа-браузер "размножит" рисунок на фоне страницы по вертикали и по горизонтали. Вот как это выглядит на экране, в окне программы-браузера:


Слайд 9
Атрибуты тега
© Николаева Вера Александровна, 2008
Я рекомендую

Атрибуты тега © Николаева Вера Александровна, 2008Я рекомендую перед тем, как

перед тем, как назначить странице какой-то фоновый рисунок, установить

для ее фона белый цвет. При этом тег будет выглядеть так:

Пример 2.
Фоновый рисунок имеет законченное содержание в пределах файла, но его ширина равна или больше ширины экрана (сейчас наибольшая ширина экрана из стандартных размеров – 1280 пикc, значит ширина рисунка должна быть несколько больше):


Слайд 10
Атрибуты тега
© Николаева Вера Александровна, 2008
При отображении

Атрибуты тега © Николаева Вера Александровна, 2008При отображении web-страницы программа-браузер

web-страницы программа-браузер "размножит" рисунок на фоне страницы по вертикали.

Вот как это выглядит на экране, в окне программы-браузера:

Слайд 11
Атрибуты тега
© Николаева Вера Александровна, 2008
Если ширина

Атрибуты тега © Николаева Вера Александровна, 2008Если ширина файла фонового рисунка

файла фонового рисунка меньше, чем ширина экрана монитора пользователя,

то пользователь увидит такую страницу:

Слайд 12
Атрибуты тега
© Николаева Вера Александровна, 2008
Пример 3.
Фоновый

Атрибуты тега © Николаева Вера Александровна, 2008Пример 3.Фоновый рисунок создан специально

рисунок создан специально для web-страницы и имеет фрагменты в

углах, при совмещении которых получается законченный элемент:

При отображении web-страницы программа-браузер сложит такой рисунок как мозаику, причем совмещения фоновых рисунков ("швов") на странице не будет заметно:

Использовать в качестве фонов большие по размеру и объему рисунки, которые занимают весь экран, в веб-дизайне не принято!


Слайд 13
Атрибуты тега
© Николаева Вера Александровна, 2008
Фоновый звук

Атрибуты тега © Николаева Вера Александровна, 2008Фоновый звук начинает воспроизводиться средствами

начинает воспроизводиться средствами мультимедиа компьютера после загрузки web-страницы браузером.

Внутри раздела html-текста web-страницы пропишите тег фонового звука:

2. Фоновый звук страницы

Чтобы остановить фоновый звук, щелкните кнопкой Остановить на панели инструментов браузера.

В качестве фоновых звуков чаще всего используются файлы формата mid (midi), так как они небольшие по информационному объему. Хотя встречаются страницы и с фоновым звуком формата mp3, что, конечно, плохо, так как говорит о том, что создатель страницы не побеспокоился о пользователях Сети.


Слайд 14
Шрифт
© Николаева Вера Александровна, 2008
Шрифт web-страницы задают тегом

Шрифт© Николаева Вера Александровна, 2008Шрифт web-страницы задают тегом ................... с атрибутами:1.

...................
с атрибутами:

1. Тип шрифта (гарнитура) face

Способ 1: задают семейством

шрифтов под компьютеры разного типа (PC или Mac), под разные платформы и операционные системы

Пример: задаем шрифт без засечек


Способ 2: не задают, и тогда браузер отображает текст web-страницы шрифтом, установленным по умолчанию (в редакторе Microsoft Front Page – default font).

Задание. В коде страницы history-font.htm для всего текста web-страницы задайте гарнитуру шрифта без засечек.


Слайд 15
Шрифт
© Николаева Вера Александровна, 2008
2. Размер шрифта (кегль) size

Способ

Шрифт© Николаева Вера Александровна, 20082. Размер шрифта (кегль)	sizeСпособ 1: лучше задавать

1: лучше задавать относительный размер для отдельных блоков (разделов)

web-страницы.
Пример:
– для основного текста размер не задаем;
– для заголовков задаем увеличенный размер ;
– для абзаца копирайта и e-mail-а задаем уменьшенный размер ;

Способ 2: хуже задавать абсолютный размер.
Пример1: браузер по умолчанию использует значение 3 (это – значение Normal), и значения от 4 до 7 соответствуют увеличенному размеру шрифта, тогда как значения 1 и 2 – уменьшенному размеру шрифта.

Тогда тег текста html имеет вид: ………………


Слайд 16
Шрифт
© Николаева Вера Александровна, 2008
2. Размер шрифта

Шрифт© Николаева Вера Александровна, 20082. Размер шрифта  size  (продолжение)Пример

size (продолжение)
Пример 2: кегль шрифта

задается в пунктах

Для заголовков и подзаголовков текста web-страницы необходимо использовать парный тег - heading. Его значения изменяются от

(самый большой) до

(самый маленький), причем значение

соответствует значению кегля Normal.

Пример 3:

Архитектура Санкт-Петербурга


Для заголовков и подзаголовков текста web-страницы нельзя использовать каллиграфические шрифты, так как не у каждого пользователя Сети такой шрифт может стоять на компьютере и в этом случае такой заголовок будет выглядеть так: ??????
В самом крайнем случае, если заголовок необходимо написать каллиграфическим шрифтом, его надо сделать картинкой в графическом редакторе (например, в Adobe Photoshop).


Слайд 17
Шрифт
© Николаева Вера Александровна, 2008
Задания. В коде страницы

Шрифт© Николаева Вера Александровна, 2008Задания. В коде страницы history-font.htm для разных

history-font.htm для разных абзацев текста web-страницы задайте разный кегль

шрифта:
Для заголовка История создания города задайте кегль парным тегом


Для 1-ого абзаца основного текста задайте кегль парным тегом

3. Для 2-ого абзаца основного текста задайте кегль парным тегом

4. Для абзаца копирайта задайте кегль парным тегом


Слайд 18
Шрифт
© Николаева Вера Александровна, 2008
3. Цвет шрифта color

Способ

Шрифт© Николаева Вера Александровна, 20083. Цвет шрифта 	colorСпособ 1: можно задать

1: можно задать ключевым словом.
Пример: ……………………………………….

Способ 2:

шестнадцатеричным значением в коде RGB
Пример: …………………………………..

При таком способе определения цвета шрифта надо обязательно пользоваться только таблицей безопасных цветов Артемия Лебедева!


Слайд 19
Шрифт
© Николаева Вера Александровна, 2008
Допускается использование всех атрибутов

Шрифт© Николаева Вера Александровна, 2008Допускается использование всех атрибутов шрифта одновременно в

шрифта одновременно в одном теге.
Пример
Если один какой-то атрибут должен

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

Слайд 20
Шрифт
© Николаева Вера Александровна, 2008
Задания. В коде страницы

Шрифт© Николаева Вера Александровна, 2008Задания. В коде страницы history-font.htm для разных

history-font.htm для разных абзацев текста web-страницы задайте разный цвет

шрифта:
Для заголовка История создания города задайте синий цвет шрифта
Для последнего абзаца основного текста задайте оранжевый цвет шрифта

3. Для 1-ого предложения во 2-м абзаце задайте увеличенный размер шрифта и зеленый цвет, отмените для 2-ого предложения зеленый цвет, а для 3-го предложения отмените и увеличенный размер шрифта


Слайд 21
Шрифт
© Николаева Вера Александровна, 2008
4. Начертание шрифта

Шрифт© Николаева Вера Александровна, 20084. Начертание шрифта 	 ……………………………………….  полужирныйили

………………………………………. полужирный
или
…………………………………


……………………………………….

курсив
или
…………………………………….


………………………………………. подчеркивание

………………………………………. зачеркивание


не рекомендуется использовать

По правилам компьютерной верстки на одной web-странице нельзя использовать более 2-х типов шрифта (более 2-х гарнитур).
Одновременно теги и использовать не рекомендуется.


  • Имя файла: html-stranitsa.pptx
  • Количество просмотров: 123
  • Количество скачиваний: 0