Введение HTML / CSS презентация

Содержание

HTML HyperText Markup Language (Язык гипертекстовой разметки)

Слайд 1Введение
HTML / CSS


Слайд 2HTML
HyperText Markup
Language
(Язык гипертекстовой разметки)


Слайд 3HTML
Любой документ на HTML представляет собой набор элементов. Начало и конец

каждого элемента задаются, открывающим и закрывающим тегом.


Слайд 4HTML
Любой документ на HTML представляет собой набор элементов. Начало и конец

каждого элемента задаются, открывающим и закрывающим тегом.

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

Слайд 5Meta Information tags


Слайд 6Structure tags


Слайд 7Text tags


Слайд 8Lists tags


Слайд 9Tables tags


Слайд 10Forms tags


Слайд 11CSS
Cascading Style
Sheets
(Каскадная таблица стилей)


Слайд 12Separation









CSS
Layout

HTML
Content
CSS
Colors

CSS
Fonts




Слайд 13Box model (box-sizing)


Слайд 14Box model (box-sizing)


Слайд 15Box model (box-sizing)


Слайд 16Box model (box-sizing)
width
content-box


Слайд 17Box model (box-sizing)
width
border-box


Слайд 18Box model (box-sizing)
width
width
border-box
content-box


Слайд 19Style by default


Слайд 20Block vs inline


Слайд 21Block vs inline
, , , , , , , and


Слайд 22Block vs inline
, , , , , , , and
,

, , , , , , and

Слайд 23 Project: Folders Structure
markup

css

images
js
-

+

+

+
design

+
-
index.html


Слайд 24HTML Structure





Title

of the document




The content of the document......




Слайд 28Differences Between HTML and XHTML
HTML + XML = XHTML



, , ,



xmlns attribute in

Document Structure

DOCTYPE


Слайд 29Differences Between HTML and XHTML
XHTML Elements:


Слайд 30Differences Between HTML and XHTML
XHTML Attributes:


Слайд 32HTML Structure





Title

of the document




The content of the document......




Слайд 33Page Structure


Слайд 34Page Structure
header
main
footer


Слайд 35Page Structure







Слайд 38Semantic Markup


Слайд 39Semantic Markup
WEB for people, not for robots!


Слайд 40Semantic Markup
Using of HTML-elements


Слайд 41Semantic Markup
Using of HTML-elements
Naming elements


Слайд 42Semantic Markup
Using of HTML-elements
Naming elements
The combination of named elements (Microformats)


Слайд 43Semantic Markup

Cat



Слайд 44Semantic Markup

Cat





Слайд 47Semantic Content Markup
This is the most important headline
This is ordinary paragraph

text within the body of the document, where certain words and phrases may be emphasized to mark them as particularly important.


This is a headline of secondary importance to the headline above


Any time you list related things, the items should be marked up in the form of a list:



  • A list signals that a group of items are conceptually related to each other

  • Lists may be ordered (numbered or alphabetic) or unordered (bulleted items)

  • Lists may also be menus or lists of links for navigation

  • Cascading Style Sheets can make lists look many different ways





Слайд 48We've gotten semantic markup!

What else do we need?!


Слайд 50More Semantics!!!


Слайд 51New Semantic Elements in HTML5


Слайд 52New Semantic Elements in HTML5


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

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

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

Что такое ThePresentation.ru?

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


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

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