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

Июль 28, 2021

Главная
Информатика
Введение HTML / CSS

Содержание

2. HTML HyperText Markup Language (Язык гипертекстовой разметки)
3. HTML Любой документ на HTML представляет собой набор элементов. Начало и конец каждого элемента задаются, открывающим
4. HTML Любой документ на HTML представляет собой набор элементов. Начало и конец каждого элемента задаются, открывающим
5. Meta Information tags
6. Structure tags
7. Text tags
8. Lists tags
9. Tables tags
10. Forms tags
11. CSS Cascading Style Sheets (Каскадная таблица стилей)
12. Separation CSS Layout HTML Content CSS Colors CSS Fonts
13. Box model (box-sizing)
14. Box model (box-sizing)
15. Box model (box-sizing)
16. Box model (box-sizing) width content-box
17. Box model (box-sizing) width border-box
18. Box model (box-sizing) width width border-box content-box
19. Style by default
20. Block vs inline
21. Block vs inline , , , , , , , and
22. Block vs inline , , , , , , , and , , , , ,
23. Project: Folders Structure markup css images js - + + + design + - index.html
24. HTML Structure Title of the document The content of the document......
28. Differences Between HTML and XHTML HTML + XML = XHTML , , , xmlns attribute in
29. Differences Between HTML and XHTML XHTML Elements:
30. Differences Between HTML and XHTML XHTML Attributes:
32. HTML Structure Title of the document The content of the document......
33. Page Structure
34. Page Structure header main footer
35. Page Structure
36. HTML Structure Portfolio Blog
38. Semantic Markup
39. Semantic Markup WEB for people, not for robots!
40. Semantic Markup Using of HTML-elements
41. Semantic Markup Using of HTML-elements Naming elements
42. Semantic Markup Using of HTML-elements Naming elements The combination of named elements (Microformats)
43. Semantic Markup Cat Dog Unicorn
44. Semantic Markup Cat Dog Unicorn
45. Semantic Markup Cat Dog Unicorn Cat Dog Unicorn Cat Dog Unicorn
46. Semantic Markup Cat Dog Unicorn Cat Dog Unicorn Cat Dog Unicorn
47. Semantic Content Markup This is the most important headline This is ordinary paragraph text within the
48. We've gotten semantic markup! What else do we need?!
50. More Semantics!!!
51. New Semantic Elements in HTML5
52. New Semantic Elements in HTML5
54. Скачать презентацию

Слайд 2

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

Слайд 3

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

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

Слайд 4

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

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

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

Слайд 5

Meta Information tags

Слайд 6

Structure tags

Слайд 7

Text tags

Слайд 8

Lists tags

Слайд 9

Tables tags

Слайд 10

Forms tags

Слайд 11

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

Слайд 12

Separation
CSS
Layout
HTML
Content
CSS
Colors
CSS
Fonts

Слайд 13

Box model (box-sizing)

Слайд 14

Box model (box-sizing)

Слайд 15

Box model (box-sizing)

Слайд 16

Box model (box-sizing)
width
content-box

Слайд 17

Box model (box-sizing)
width
border-box

Слайд 18

Box model (box-sizing)
width
width
border-box
content-box

Слайд 19

Style by default

Слайд 20

Block vs inline

Слайд 21

Block vs inline
,
,
,
,
,
,
, and

Слайд 22

Block vs inline
,
, ,
,
,
,
, and

,

, , , , , , and

Слайд 23

`Project: Folders Structure`
`markup`
`css`
`images`
`js`
`-`
`+`
`+`
`+`
`design`
`+`
`-`
`index.html`

Слайд 24

`HTML Structure`
`Title</div></h2><div class="slides-content">of the document The content of the document......`

Слайд 25

Слайд 26

Слайд 27

Слайд 28

`Differences Between HTML and XHTML`
`HTML + XML = XHTML`
, , ,</div></h2><div class="slides-content"><body><br><p>xmlns attribute in <html><br><p>Document Structure<br><p>DOCTYPE<br></div></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 29</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-28.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Differences Between HTML and XHTML XHTML Elements:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/101714/slide-28.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/101714/slide-28.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/101714/slide-28.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-28.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Differences Between HTML and XHTML<br><p>XHTML Elements:<br></div></h2></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 30</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-29.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Differences Between HTML and XHTML XHTML Attributes:" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/101714/slide-29.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/101714/slide-29.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/101714/slide-29.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-29.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Differences Between HTML and XHTML<br><p>XHTML Attributes:<br></div></h2></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 31</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-30.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/101714/slide-30.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/101714/slide-30.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/101714/slide-30.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-30.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p><!DOCTYPE><br><p><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><br><br><!DOCTYPE html><br></div></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 32</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-31.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="HTML Structure Title of the document The content of the document......" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/101714/slide-31.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/101714/slide-31.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/101714/slide-31.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/101714/slide-31.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>HTML Structure<br><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta charset="utf-8"><br><title>Title</div></h2><div class="slides-content">of the document The content of the document......

Слайд 33

`Page Structure`
`header`
`main`
`footer`

Слайд 35

`HTML Structure`

href="#">Portfolio Blog

Слайд 37

Слайд 38

`Semantic Markup`

Слайд 39

`Semantic Markup`
`WEB for people, not for robots!`

Слайд 40

`Semantic Markup`
`Using of HTML-elements`

Слайд 41

`Semantic Markup`
`Using of HTML-elements Naming elements`

Слайд 42

`Semantic Markup`
`Using of HTML-elements Naming elements The combination of named elements (Microformats)`

Слайд 43

`Semantic Markup`
`Cat Dog Unicorn`

Слайд 44

`Semantic Markup`
`Cat Dog Unicorn`

Слайд 45

`Semantic Markup`
`Cat Dog Unicorn`

href="#">Cat Dog Unicorn Cat Dog Unicorn

Слайд 46

`Semantic Markup`
`Cat Dog Unicorn`

href="#">Cat Dog Unicorn Cat Dog Unicorn

Слайд 47

`Semantic 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