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

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


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

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

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

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

Презентация на тему Введение HTML / CSS

Содержание

HTMLHTML (Hyper Text Markup Language) – язык используемый для описания web-страницHTML не является языком программирования, он является языком разметкиHTML-документ описывает web-страницу и состоит из тегов HTML и простого текста - стандартный тег - пустой тегДля создания
ВведениеHTML / CSS HTMLHTML (Hyper Text Markup Language) – язык используемый для описания web-страницHTML не Шаги для создания простейшей  web-страницыОтрыть редактор (к примеру Brackets)Создать новый документ, HTML ЭЛЕМЕНТЫHTML документ определяется используя HTML-элементыHTML-элемент состоит из стартового тега и завершающего ОСНОВНАЯ СТРУКТУРА HTML-ДОКУМЕНТАПростейшая HTML-страница состоит как минимум из трёх тегов:Тег  — это контейнер, в ДОБАВЛЕНИЯ В ОСНОВНОЙ СТРУКТУРЕВ последние версии HTML (после 4.01) в основной структуре ПРИМЕРСколько, в следующем примере, HTML-элементов? Пример  	Пробуем… 	Простой текст СТРУКТУРА ФАЙЛОВ САЙТА СТРУКТУРА СТРАНИЦЫ ТЕГИ МЕТА ИНФОРМАЦИИ ОСНОВНЫЕ ТЕГИ ОФОРМЛЕНИЯ ТЕКСТА ОСНОВНЫЕ ТЕГИ ОФОРМЛЕНИЯ ТЕКСТА CSSCSS (Cascading Style Sheets) – каскадные таблицы стилейЭтот язык отвечает за внешний вид ПРИМЕР CSS ФАЙЛА ВАЖНЫЕ СВОЙСТВА CSS - ГРУППИРОВАНИЕ ВАЖНЫЕ СВОЙСТВА CSS - ГРУППИРОВАНИЕ ВАЖНЫЕ СВОЙСТВА CSS - НАСЛЕДОВАНИЕНаследование – передача значений свойств элемента-родителя его дочерним КЛАССЫ И ИДЕНТИФИКАТОРЫ В CSSПрисвоение класса или идентификатора в HTML документеОписание свойств идентификатора Описание свойств класса BORDER, MARGIN, PADDING ПОДБОР ИЗОБРАЖЕНИЙ ДЛЯ САЙТАЕсть два основных формата изображений, используемых для размещения на ФОРМАТ JPEGВ качестве фона для сайта:	Разрешение 1920 х 1080 (Full HD)CSS свойства: ФОРМАТ PNGПозволяет сделать фон основного элемента изображения прозрачным
Слайды презентации

Слайд 2 HTML
HTML (Hyper Text Markup Language) – язык используемый

HTMLHTML (Hyper Text Markup Language) – язык используемый для описания web-страницHTML

для описания web-страниц

HTML не является языком программирования, он является

языком разметки

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

- стандартный тег
- пустой тег

Для создания HTML-документа можно использовать любой текстовой редактор

Слайд 3 Шаги для создания простейшей web-страницы
Отрыть редактор (к примеру

Шаги для создания простейшей web-страницыОтрыть редактор (к примеру Brackets)Создать новый документ,

Brackets)
Создать новый документ, добавить контент
Сохранить документ, определяя название файла

и расширение. Обычно для HTML-документа расширение .html или .htm
Закрыть файл (не обязательно)
Можно открыть этот документ в любом Web-браузере, и он воспроизведёт текст.

Результат открытия и интерпретирования браузером HTML-документа - Web-страница

Слайд 4 HTML ЭЛЕМЕНТЫ
HTML документ определяется используя HTML-элементы
HTML-элемент состоит из

HTML ЭЛЕМЕНТЫHTML документ определяется используя HTML-элементыHTML-элемент состоит из стартового тега и

стартового тега и завершающего тега
Все теги HTML начинаются с

"<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки)
Между стартовым и завершающим тегом размещается содержимое HTML-элемента
Пример: <начальный_tag атрибуты> Cодержимое
Некоторые HTML-элементы могут не иметь содержимое
Пример пустого элемента: этикетка для создания разрыва строки
Пустые элементы обычно закрываются в стартовом теге (обязательно начиная с версии XHTML)
Существуют многие HTML-элементы содержащие атрибуты или другие HTML-элементы
Атрибуты предоставляют дополнительную информацию об элементе
Атрибуты всегда указаны в начальном теге

Слайд 5 ОСНОВНАЯ СТРУКТУРА HTML-ДОКУМЕНТА
Простейшая HTML-страница состоит как минимум из трёх

ОСНОВНАЯ СТРУКТУРА HTML-ДОКУМЕНТАПростейшая HTML-страница состоит как минимум из трёх тегов:Тег  — это контейнер,

тегов:

Тег  — это контейнер, в котором находится всё содержимое страницы,

включая теги  и . Как правило, тег  идёт в документе вторым после доктайпа.

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

Тег  предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.

Слайд 6 ДОБАВЛЕНИЯ В ОСНОВНОЙ СТРУКТУРЕ
В последние версии HTML (после

ДОБАВЛЕНИЯ В ОСНОВНОЙ СТРУКТУРЕВ последние версии HTML (после 4.01) в основной

4.01) в основной структуре HTML-документа было добавлено описание ,

перед тегом html

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

Название документа

Cодержание HTML-документа




Слайд 7 ПРИМЕР
Сколько, в следующем примере, HTML-элементов?


Пример Пробуем… Простой текст

ПРИМЕРСколько, в следующем примере, HTML-элементов? Пример 	Пробуем… 	Простой текст

Слайд 8 СТРУКТУРА ФАЙЛОВ САЙТА

СТРУКТУРА ФАЙЛОВ САЙТА

Слайд 9 СТРУКТУРА СТРАНИЦЫ

СТРУКТУРА СТРАНИЦЫ

Слайд 10 ТЕГИ МЕТА ИНФОРМАЦИИ

ТЕГИ МЕТА ИНФОРМАЦИИ

Слайд 11 ОСНОВНЫЕ ТЕГИ ОФОРМЛЕНИЯ ТЕКСТА

ОСНОВНЫЕ ТЕГИ ОФОРМЛЕНИЯ ТЕКСТА

Слайд 12 ОСНОВНЫЕ ТЕГИ ОФОРМЛЕНИЯ ТЕКСТА

ОСНОВНЫЕ ТЕГИ ОФОРМЛЕНИЯ ТЕКСТА

Слайд 13 CSS
CSS (Cascading Style Sheets) – каскадные таблицы стилей

Этот

CSSCSS (Cascading Style Sheets) – каскадные таблицы стилейЭтот язык отвечает за внешний

язык отвечает за внешний вид HTML-страницы.

Синтаксис языка достаточно прост: он состоит

из селекторов и свойств.

С помощью селекторов можно сказать браузеру какие именно элементы мы хотим оформить.

Свойства описывают как именно мы хотим оформить эти элементы.

Слайд 14 ПРИМЕР CSS ФАЙЛА

ПРИМЕР CSS ФАЙЛА

Слайд 15 ВАЖНЫЕ СВОЙСТВА CSS - ГРУППИРОВАНИЕ

ВАЖНЫЕ СВОЙСТВА CSS - ГРУППИРОВАНИЕ

Слайд 16 ВАЖНЫЕ СВОЙСТВА CSS - ГРУППИРОВАНИЕ

ВАЖНЫЕ СВОЙСТВА CSS - ГРУППИРОВАНИЕ

Слайд 17 ВАЖНЫЕ СВОЙСТВА CSS - НАСЛЕДОВАНИЕ
Наследование – передача значений

ВАЖНЫЕ СВОЙСТВА CSS - НАСЛЕДОВАНИЕНаследование – передача значений свойств элемента-родителя его

свойств элемента-родителя его дочерним (вложенным) элементам

Например:






Не все свойства

передаются по наследству!

Слайд 18 КЛАССЫ И ИДЕНТИФИКАТОРЫ В CSS
Присвоение класса или идентификатора

КЛАССЫ И ИДЕНТИФИКАТОРЫ В CSSПрисвоение класса или идентификатора в HTML документеОписание свойств идентификатора Описание свойств класса

в HTML документе

Описание свойств идентификатора



Описание свойств класса


Слайд 19 BORDER, MARGIN, PADDING

BORDER, MARGIN, PADDING

Слайд 20 ПОДБОР ИЗОБРАЖЕНИЙ ДЛЯ САЙТА
Есть два основных формата изображений,

ПОДБОР ИЗОБРАЖЕНИЙ ДЛЯ САЙТАЕсть два основных формата изображений, используемых для размещения

используемых для размещения на web-сайтах:

В формате JPEG (.jpg), используются

для:
фона;
изображений, предполагающих увеличенный просмотр.
В формате PNG (.png) , используются для:
логотипов;
пиктограмм;
изображений, не требующих увеличения.


Слайд 21 ФОРМАТ JPEG
В качестве фона для сайта:

Разрешение 1920 х

ФОРМАТ JPEGВ качестве фона для сайта:	Разрешение 1920 х 1080 (Full HD)CSS свойства:

1080 (Full HD)

CSS свойства:


  • Имя файла: vvedenie-html-css.pptx
  • Количество просмотров: 154
  • Количество скачиваний: 5