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

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


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

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

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

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

Презентация на тему Создание статических web-страниц с помощью HTML и CSS

Содержание

Введение и основные понятия: Основные сведения о языках разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели и задачи языка HTML Что такое WEB-сервер, web-сайт, web-страница и чем они отличаютсяЧто такое тег? Типы элементов. Понятие тегов и
Создание статических  web-страниц с помощью HTML и CSS Введение и основные понятия: Основные сведения о языках разметки: HTML, XML, XHTML. Понятие языка разметкиОдна из наиболее широко используемых форм хранения информации это документ. История1986ISO-8879SGML 1991CERNHTML1994Подготовка HTML 2.0Консорциум W3 (W3C)www.W3.orgмарт 1995начало работы над HTML 3 + Основные понятия Web-сайт Web-сервер Web-адресWeb-страница ... Как это работает123413242  154    3WWWindex.htmlHTMLPHPCGIASP...HTMLвеб-серверjpg, gif, swf,avi, mpg … Простая HTML страница 	 		Пример HTML страницы 	 	 		Мой первый HTML-документ Объявление Строгое DTD. Документы, использующие такое объявление типа документа, включают в себя Структура HTML документа			Здесь размещается служебная информация. 	Пользователь ее не видит. Заголовок документа			 Заголовок документа 	 	 		...Содержание документа... Тело документа			...Служебная информация... 	 	 		Мой первый HTML документ		   		Некоторый Какие бывают элементы? Блочные (block elements) 	Структурное форматирование Текстовые (inline elements) 	Непосредственное Структурированный текстЗаголовок первого уровняЭлемент P представляет абзац. В нем не могут содержаться Как браузер показывает текст? ЗаголовкиЗаголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6 Абзац	Браузеры, которые интерпретируют мягкие переносы, должны обеспечивать следующую семантику: если строка прекращается Улучшаем страницу  Мой дядя самых честных правил, Когда не в шутку Принудительный разрыв строки Мой дядя самых честных правил, Когда не в шутку Окончательный вид документа  	  		Мой первый документ Атрибуты элементовАтрибутАтрибутТегИмя атрибутаЗначение атрибутаАтрибут Используем атрибуты Выровнять по центру Выровнять по правому краю Выровнять по ширине Создаем блочную цитатуThey went in single file, running like hounds on a Авторское форматирование Время –    	начинаю 		про Ленина рассказ.Но не Элемент ADDRESS - контактная информация  (Блочный элемент, текст отображается курсивом)Мой адрес:Тула, Группировка элементов Элементы DIV и SPAN вместе с атрибутами id и class Элементы DIV и SPAN	Первый div	Второй div 	Третий div	Первый span 	Второй span 	Третий span Коротко о цветеДиапазон: 00 - FF (0 - 255)#00FF00 – green (зеленый) Раскрашиваем страницу 	 		Раскрашиваем страницу 	 			Этот текст синего цвета,		 а этот Элемент FONT (не желателен)серифный шрифт: Times New Roman, serifрубленый шрифт: Arial, sans-serifмоноширинный Непосредственное форматирование текста - курсив - полужирный - подчеркнутый - перечеркнутый - Логическое форматирование - выделение важных фрагментов курсивом - выделение особо важных фрагментов Специальные символы Дополнительноп.1. Текст п. 1 никогда не будет перенесен браузером. п.2. Но п.3 Лабораторная работаОформление текстаОткройте файл lab-1-1.htmlОформите HTML-файл следуя инструкциям, указанным в документе в Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма в Переход браузера...Ссылка 1 Линк 2Переход 3.........Некоторый заголовок......Какой-то текст...Абзац...Ссылки. Элемент A (якорь, anchor) метка3 Лабораторная работаСоздание и использование якорей Переход к другому документуЭто ссылка на 1.htmlЭто ссылка на 2.htmlЭто ссылка на Лабораторная работаСоздание и использование гиперссылок Переход к другому документу с меткойтекст ПримерСсылка на файл 1.html с меткой Лабораторная работаСоздание и использование гиперссылок и якорей Примеры абсолютных ссылок на различные файлы по разным протоколам:протокол://имя_сервера:порт/путьСсылка по протоколу HTTP Лабораторная работаСоздание и использование абсолютных гиперссылок Несколько типичных вариантов относительных ссылок href= Несколько типичных вариантов относительных ссылок href= Примеры относительных адресов В каком окне открывать ссылку?ссылка Цвет ссылок цвет неотработанной ссылки (пользователь еще не Атрибуты, явно задающие цвета ссылок  Атрибуты : link — цвет неотработанной Как показать файл? Подписываем картинку  Да, и ссылка тоже... Лабораторная работаВставка иллюстраций Картинка как ссылка Задаем размеры и выравниваем картинку hspacehspacevspacevspaceleft - горизонтальное выравнивание изображения по левому Фоновое изображение документа Лабораторная работаИспользование иллюстраций ИтогиМеханизм адресации на ресурсы в internet в языке HTML реализован в виде
Слайды презентации

Слайд 2 Введение и основные понятия:
Основные сведения о языках

Введение и основные понятия: Основные сведения о языках разметки: HTML, XML,

разметки: HTML, XML, XHTML. Эволюция языков разметки. Цели и

задачи языка HTML
Что такое WEB-сервер, web-сайт, web-страница и чем они отличаются
Что такое тег? Типы элементов. Понятие тегов и атрибутов
Структура и правила оформления HTML-документа.
Основные элементы форматирования текста. Элементы блочной (block) и текстовой (inline) разметки

Слайд 3 Понятие языка разметки
Одна из наиболее широко используемых форм

Понятие языка разметкиОдна из наиболее широко используемых форм хранения информации это

хранения информации это документ. В документе, помимо данных, должна

содержаться некоторая дополнительная информация (метаданные), позволяющая следующее:
Определить внешнее представление документа.
Осуществлять эффективный поиск.
Обеспечить интеграцию информационных ресурсов
Виды разметки. Разметка разделяется на стилистическую разметку, структурную и семантическую.
Стилистическая разметка отвечает за внешний вид документа.
Пример разметки:
Евгений Онегин А.С. Пушкин
В книгу вошел роман в стихах...
Структурная разметка задает структуру документа.
Пример структурной разметки:

Евгений Онегин

А.С. Пушкин


В книгу вошел роман в стихах...


Семантическая (контентная) разметка информирует о содержании данных.

Евгений Онегин


Слайд 4 История
1986
ISO-8879
SGML
1991
CERN
HTML
1994
Подготовка HTML 2.0
Консорциум W3 (W3C)
www.W3.org
март 1995
начало работы

История1986ISO-8879SGML 1991CERNHTML1994Подготовка HTML 2.0Консорциум W3 (W3C)www.W3.orgмарт 1995начало работы над HTML 3

над HTML 3 + CSS
январь 1997
HTML 3.2
декабрь 1997
HTML 4.0

+ CSS 2.0

24 декабря 1999
HTML 4.01

2000
XHTML 1.0











2016 год
HTML 5.0
ещё в разработке

22 января 2008 года
W3C официально объявил "HTML 5 - в разработке"


Слайд 5 Основные понятия
Web-сайт
Web-сервер
Web-адрес
Web-страница


...

Основные понятия Web-сайт Web-сервер Web-адресWeb-страница ...

Слайд 6 Как это работает



1
2
3
4
1
3
2
4
2 1
5
4

Как это работает123413242 154  3WWWindex.htmlHTMLPHPCGIASP...HTMLвеб-серверjpg, gif, swf,avi, mpg …

3
WWW
index.html
HTML
PHP
CGI
ASP
...
HTML
веб-сервер
jpg, gif, swf,
avi, mpg …


Слайд 7 Простая HTML страница

Простая HTML страница 	 		Пример HTML страницы 	 	 		Мой первый

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Пример HTML страницы


Мой

первый HTML-документ


Скоро мы узнаем, что означают эти странные знаки.




тег


Слайд 8 Объявление

Объявление Строгое DTD. Документы, использующие такое объявление типа документа, включают в

EN" "http://www.w3.org/TR/html4/strict.dtd"> Строгое DTD. Документы, использующие такое объявление типа

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

http://validator.w3.org/
http://jigsaw.w3.org/css-validator/


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

Структура HTML документа			Здесь размещается служебная информация. 	Пользователь ее не видит.

Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">





Здесь размещается служебная информация. Пользователь ее не

видит.




Здесь размещается содержание документа. Именно это видит пользователь.



Начало документа

Конец документа

Начало заголовка

Конец заголовка

Начало тела документа

Конец тела документа

Определение типа документа


Слайд 10 Заголовок документа




Заголовок документа



...Содержание документа...


Заголовок документа			 Заголовок документа 	 	 		...Содержание документа...





Слайд 11 Тело документа



...Служебная информация...


Мой первый HTML документ

Тело документа			...Служебная информация... 	 	 		Мой первый HTML документ		  		Некоторый


Некоторый текст. Основное содержание

текущей страницы. Первый абзац 


Второй абзац. Для форматирования текста используют разные элементы языка HTML.

 


Комментарий


Слайд 12 Какие бывают элементы?
Блочные (block elements)
Структурное форматирование

Какие бывают элементы? Блочные (block elements) 	Структурное форматирование Текстовые (inline elements)


Текстовые (inline elements)
Непосредственное форматирование
Логическое форматирование (phrase elements)

Нежелательные

(deprecated)
Устаревшие (obsolete)
Новые (new)



С о д е р ж а н и е

Открывающий тег

Закрывающий тег


Элемент


Слайд 13 Структурированный текст
Заголовок первого уровняЭлемент P представляет абзац. В

Структурированный текстЗаголовок первого уровняЭлемент P представляет абзац. В нем не могут

нем не могут содержаться элементы уровня блока (включая и

сам элемент P). Элементы, определяющие стиль шрифта:
полужирный,
курсивный,
подчёркнутыйи другие

Второй абзац



Слайд 14 Как браузер показывает текст?

Как браузер показывает текст?

Слайд 15 Заголовки

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5

Заголовок 6

ЗаголовкиЗаголовок 1Заголовок 2Заголовок 3Заголовок 4Заголовок 5Заголовок 6

Слайд 16 Абзац

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

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

семантику: если строка прекращается в месте мягкого переноса, в

конце первой строки должен отображаться символ переноса.



Если строка не прерывается в месте мягкого переноса, символ переноса отображаться не должен. При выполнении таких операций как поиск и сортировка мягкие переносы всегда должны игнорироваться.





Слайд 17 Улучшаем страницу
Мой дядя самых честных правил, Когда не

Улучшаем страницу Мой дядя самых честных правил, Когда не в шутку

в шутку занемог, Он уважать себя заставил И лучше выдумать не

мог.






Мой дядя самых честных правил,


Когда не в шутку занемог,


Он уважать себя заставил


И лучше выдумать не мог.



Слайд 18 Принудительный разрыв строки

Мой дядя самых честных правил,

Принудительный разрыв строки Мой дядя самых честных правил, Когда не в



Когда не в шутку занемог,

Он уважать себя заставил

И

лучше выдумать не мог.



Слайд 19 Окончательный вид документа

Окончательный вид документа 	 		Мой первый документ 	 	 		Мой первый

Мой первый документ Мой первый HTML-документ


Евгений Онегин

А.С.Пушкин (отрывок)


Мой дядя самых честных правил,

Когда не в шутку занемог,

Он уважать себя заставил

И лучше выдумать не мог.





Слайд 20 Атрибуты элементов



Атрибут



Атрибут



Тег

Имя атрибута

Значение атрибута

Атрибут


Атрибуты элементовАтрибутАтрибутТегИмя атрибутаЗначение атрибутаАтрибут

Слайд 21 Используем атрибуты
Выровнять по центру
Выровнять

Используем атрибуты Выровнять по центру Выровнять по правому краю Выровнять по

по правому краю
Выровнять по ширине
Выровнять

по левому краю


Толщина разделительной линии

Разделительная линия без тени

Ширина в пикселях




Слайд 22 Создаем блочную цитату


They went in single file, running

Создаем блочную цитатуThey went in single file, running like hounds on

like hounds on a strong scent, and an eager

light was in their eyes. Nearly due west the broad swath of the marching Orcs tramped its ugly slot; the sweet grass of Rohan had been bruised and blackened as they passed.

Слайд 23 Авторское форматирование

Время –
начинаю

Авторское форматирование Время –  	начинаю 		про Ленина рассказ.Но не потому,


про Ленина рассказ.
Но не потому,
что горя

нету более,
время
потому,
что резкая тоска
стала ясною
осознанною болью.


Слайд 24 Элемент ADDRESS - контактная информация (Блочный элемент, текст

Элемент ADDRESS - контактная информация (Блочный элемент, текст отображается курсивом)Мой адрес:Тула,

отображается курсивом)
Мой адрес:Тула, ул. Советская 31а, офис 306, тел:

545-54-65




Слайд 25 Группировка элементов
Элементы DIV и SPAN вместе с

Группировка элементов Элементы DIV и SPAN вместе с атрибутами id и

атрибутами id и class обеспечивают общий механизм добавления в

документы структуры. Эти элементы определяют встраиваемую информацию (SPAN) или информацию уровня блока (DIV), но не налагают никаких других выражений для представления контекста


Блок номер 1

Блок номер 2

Блок номер 3




Слайд 26 Элементы DIV и SPAN

Первый div
Второй

Элементы DIV и SPAN	Первый div	Второй div 	Третий div	Первый span 	Второй span 	Третий span

div
Третий div

Первый span
Второй span


Третий span


Слайд 27 Коротко о цвете

Диапазон: 00 - FF (0 -

Коротко о цветеДиапазон: 00 - FF (0 - 255)#00FF00 – green

255)
#00FF00 – green (зеленый)
#FF0000 – red (красный)
#0000FF

– blue (синий)
#FFFFFF – white (белый)
#000000 – black (черный)
#FFFF00 – yellow (жёлтый)
#FFD700 - gold (золотой)
#FFCC00 - tangerine (мандариновый)
#E49B0F - gamboge (гуммигут)
#FDE910 – lemon (лимонный)

Безопасная палитра цветов:
00,33,66,99, CC,FF (216 сочетаний).






Слайд 28 Раскрашиваем страницу


Раскрашиваем страницу

Раскрашиваем страницу 	 		Раскрашиваем страницу 	 			Этот текст синего цвета,		 а

text="#0000FF">
Этот текст синего цвета,
а этот - красного.

color="green">Горизонтальная линия тоже может быть разноцветная.



Слайд 29 Элемент FONT (не желателен)
серифный шрифт: Times New Roman,

Элемент FONT (не желателен)серифный шрифт: Times New Roman, serifрубленый шрифт: Arial,

serif
рубленый шрифт: Arial, sans-serif
моноширинный шрифт: Courier, monospace

Каким

шрифтом будет показан текст?

size="1"
size="2"
size="3" Базовый размер по-умочанию
size="4"
size="5"
size="6" Соответствует размеру


size="7"
Величина шрифта на единицу меньше базового
Максимальный размер шрифта


Слайд 30 Непосредственное форматирование текста
- курсив
-

Непосредственное форматирование текста - курсив - полужирный - подчеркнутый - перечеркнутый

полужирный
- подчеркнутый
- перечеркнутый
-

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

Слайд 31 Логическое форматирование
- выделение важных фрагментов курсивом
-

Логическое форматирование - выделение важных фрагментов курсивом - выделение особо важных

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

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

Слайд 32 Специальные символы

Специальные символы

Слайд 33 Дополнительно
п.1. Текст п. 1 никогда не будет перенесен

Дополнительноп.1. Текст п. 1 никогда не будет перенесен браузером. п.2. Но

браузером.
п.2. Но п.3 всегда будет идти двумя строками

ниже.

п.3. Текст
deprecated: applet, basefont, center, dir, font, isindex, menu, s, strike, u...
obsolete: listing, plaintext, xmp...



Все элементы: http://www.w3.org/TR/html4/index/elements.html
Все атрибуты: http://www.w3.org/TR/html4/index/attributes.html

HTML 4.0

CSS






Слайд 34
Лабораторная работа
Оформление текста
Откройте файл lab-1-1.html
Оформите HTML-файл следуя инструкциям,

Лабораторная работаОформление текстаОткройте файл lab-1-1.htmlОформите HTML-файл следуя инструкциям, указанным в документе

указанным в документе в виде комментариев
Примерный образец выполнения работы

- файл lab-1-1-result.html

Дополнительные домашние задания: index.html index-result.html и reklama.html reklama-result.html


Слайд 35 Ссылки и иллюстрации:
Механизмы адресации на ресурсы в

Ссылки и иллюстрации: Механизмы адресации на ресурсы в Internet. Реализация механизма

Internet. Реализация механизма в языке HTML
Создание гиперссылок с

помощью элемента A и его атрибутов. Типы ссылок
Размещение иллюстрации на web-странице. Типы файлов иллюстраций. Элемент IMG и его атрибуты
Распределение иллюстраций по страницам сайта: приемы и советы

Слайд 36 Переход браузера
...
Ссылка 1
Линк 2
Переход

Переход браузера...Ссылка 1 Линк 2Переход 3.........Некоторый заголовок......Какой-то текст...Абзац...Ссылки. Элемент A (якорь, anchor) метка3

3
...
...
...
Некоторый заголовок
...
...
Какой-то текст
...
Абзац
...
Ссылки. Элемент A (якорь,

anchor)

метка3


Слайд 37
Лабораторная работа
Создание и использование якорей

Лабораторная работаСоздание и использование якорей

Слайд 38 Переход к другому документу
Это ссылка на 1.html

Это ссылка

Переход к другому документуЭто ссылка на 1.htmlЭто ссылка на 2.htmlЭто ссылка

на 2.html

Это ссылка на 3.html
1.html
3.html
2.html



... текст ...

href="/1.html">Это ссылка на 1.html
Это ссылка на 2.html
Это ссылка на 3.html

Слайд 39
Лабораторная работа
Создание и использование гиперссылок

Лабораторная работаСоздание и использование гиперссылок

Слайд 40 Переход к другому документу с меткой
текст

Переход к другому документу с меткойтекст ПримерСсылка на файл 1.html с

href="sample.html#abc">Пример

Ссылка на файл 1.html с меткой "а"

name="а">В этом месте поставлена метка

Ссылка на файл 1.html с меткой "а"

Какой-то текст...
...
...
...
В этом месте поставлена метка

1.html



Сюда будет осуществлен переход


Слайд 41
Лабораторная работа
Создание и использование гиперссылок и якорей

Лабораторная работаСоздание и использование гиперссылок и якорей

Слайд 42 Примеры абсолютных ссылок на различные файлы по разным

Примеры абсолютных ссылок на различные файлы по разным протоколам:протокол://имя_сервера:порт/путьСсылка по протоколу

протоколам:

протокол://имя_сервера:порт/путь
Ссылка по протоколу HTTP на стартовую страницу сайта: Пример

1
Ссылка на HTML файл по протоколу HTTP: Пример 2
Ссылка на PDF файл по протоколу HTTP: Пример 3
Ссылка на ZIP файл по протоколу HTTP с указанием порта: Пример 4
Ссылка на EXE файл по протоколу FTP: Пример 5
Ссылка на e-mail, при помощи протокола mailto: name@site.ru
Ссылка на скайп:
Skype_User
Ссылка на телефон:
Звоните нам бесплатно!

Слайд 43
Лабораторная работа
Создание и использование абсолютных гиперссылок

Лабораторная работаСоздание и использование абсолютных гиперссылок

Слайд 44 Несколько типичных вариантов относительных ссылок



href="target.html"
href="folder/target.html"

Несколько типичных вариантов относительных ссылок href=

Слайд 45 Несколько типичных вариантов относительных ссылок
href="../target.html"
folder1
href="../folder/target.html"





Несколько типичных вариантов относительных ссылок href=

Слайд 46 Примеры относительных адресов
"info.html"
"manual/info.html"
"manual"
"../help.html"
"../project/first.html"
"../../about/contact.html"


"/" - корень сайта
"/demo/"

Примеры относительных адресов


"/images/pic.gif"


//В заголовке!

public_html
about
contacts.html
manual
demo
index.html
help.html
images
pic.gif
manual
info.html
test.html
images
pic.gif
project
first.html
index.html
info.html


Слайд 47 В каком окне открывать ссылку?
ссылка

В каком окне открывать ссылку?ссылка

Слайд 48 Цвет ссылок
цвет неотработанной ссылки (пользователь еще не

Цвет ссылок цвет неотработанной ссылки (пользователь еще не

"кликал" на ссылке).

цвет ссылки после щелчка (пользователь "кликнул"

на ссылке; документ, на который указывает ссылка, грузится по сети).

цвет отработанной ссылки (пользователь "ходил" по этой ссылке).

Цвета ссылок по-умолчанию:

синий — цвет неотработанной ссылки красный — цвет активной ссылки пурпурный — цвет отработанной ссылки


Слайд 49 Атрибуты, явно задающие цвета ссылок

Атрибуты, явно задающие цвета ссылок  Атрибуты : link — цвет

link="blue" alink="red" vlink="purple">


Атрибуты :

link — цвет неотработанной ссылки alink — цвет активной ссылки vlink — цвет отработанной ссылки



Слайд 50 Как показать файл?






Как показать файл?

Слайд 51 Подписываем картинку



Подписываем картинку  Да, и ссылка тоже...

src=glbus.gif alt="Анимированный глобус">

Да, и

ссылка тоже...

Слайд 52
Лабораторная работа
Вставка иллюстраций

Лабораторная работаВставка иллюстраций

Слайд 53 Картинка как ссылка

Картинка как ссылка







src="/file.gif" border="0">




Слайд 54 Задаем размеры и выравниваем картинку

Задаем размеры и выравниваем картинку hspacehspacevspacevspaceleft - горизонтальное выравнивание изображения по



hspace
hspace
vspace
vspace
left - горизонтальное выравнивание изображения

по левому краю
right - горизонтальное выравнивание изображения по правому краю





Слайд 55 Фоновое изображение документа




Фоновое изображение документа

Слайд 56
Лабораторная работа
Использование иллюстраций

Лабораторная работаИспользование иллюстраций

  • Имя файла: sozdanie-staticheskih-web-stranits-s-pomoshchyu-html-i-css.pptx
  • Количество просмотров: 215
  • Количество скачиваний: 0