🗊Презентация Блоки в HTML

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Блоки в HTML, слайд №1Блоки в HTML, слайд №2Блоки в HTML, слайд №3Блоки в HTML, слайд №4Блоки в HTML, слайд №5Блоки в HTML, слайд №6Блоки в HTML, слайд №7Блоки в HTML, слайд №8Блоки в HTML, слайд №9Блоки в HTML, слайд №10Блоки в HTML, слайд №11Блоки в HTML, слайд №12Блоки в HTML, слайд №13Блоки в HTML, слайд №14Блоки в HTML, слайд №15Блоки в HTML, слайд №16Блоки в HTML, слайд №17Блоки в HTML, слайд №18Блоки в HTML, слайд №19Блоки в HTML, слайд №20Блоки в HTML, слайд №21Блоки в HTML, слайд №22Блоки в HTML, слайд №23Блоки в HTML, слайд №24Блоки в HTML, слайд №25Блоки в HTML, слайд №26
Скачать
Вы можете ознакомиться и скачать презентацию на тему Блоки в HTML. Доклад-сообщение содержит 26 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Блоки в HTML, слайд №1
Описание слайда:

Слайд 2


Блоки в HTML, слайд №2
Описание слайда:

Слайд 3


Блок - це звичайна прямокутна область, володіє рядом властивостей, таких як: рамка, поля і відступи. Блок - це звичайна прямокутна область, володіє рядом властивостей, таких як: рамка, поля і відступи.
Описание слайда:
Блок - це звичайна прямокутна область, володіє рядом властивостей, таких як: рамка, поля і відступи. Блок - це звичайна прямокутна область, володіє рядом властивостей, таких як: рамка, поля і відступи.

Слайд 4


Content Вмістом блоку(content) може бути що завгодно - частина тексту, картинка, список, форма для заповнення, меню навігації і т.д.
Описание слайда:
Content Вмістом блоку(content) може бути що завгодно - частина тексту, картинка, список, форма для заповнення, меню навігації і т.д.

Слайд 5


Border Рамка (border) - це контур, для якого можна задати такі характеристики як товщина, колір і тип (пунктирна, суцільна, точкова).
Описание слайда:
Border Рамка (border) - це контур, для якого можна задати такі характеристики як товщина, колір і тип (пунктирна, суцільна, точкова).

Слайд 6


Поля (padding) Поля (padding) - відділяють вміст блоку від його рамки, щоб текст, наприклад, не був "упритул" до стінок блоку. 
Описание слайда:
Поля (padding) Поля (padding) - відділяють вміст блоку від його рамки, щоб текст, наприклад, не був "упритул" до стінок блоку. 

Слайд 7


Відступи (margin) Відступи (margin) - це порожній простір між різними блоками, що дозволяє на заданій відстані розташувати два блоки відносно один одного.
Описание слайда:
Відступи (margin) Відступи (margin) - це порожній простір між різними блоками, що дозволяє на заданій відстані розташувати два блоки відносно один одного.

Слайд 8


Блоки в HTML, слайд №8
Описание слайда:

Слайд 9


Блоки в HTML, слайд №9
Описание слайда:

Слайд 10


Блоки, як і таблиці - це елементи, що завжди розташовуються на сторінці вертикально. Блоки, як і таблиці - це елементи, що завжди розташовуються на сторінці вертикально. Тобто, якщо в коді сторінки записані підряд два блоки, то відобразяться вони в браузері один під іншим. Якщо нам потрібно розташувати кілька блоків горизонтально, то в їх властивостях задається такий параметр як "обтікання" (float).
Описание слайда:
Блоки, як і таблиці - це елементи, що завжди розташовуються на сторінці вертикально. Блоки, як і таблиці - це елементи, що завжди розташовуються на сторінці вертикально. Тобто, якщо в коді сторінки записані підряд два блоки, то відобразяться вони в браузері один під іншим. Якщо нам потрібно розташувати кілька блоків горизонтально, то в їх властивостях задається такий параметр як "обтікання" (float).

Слайд 11


Практика
Описание слайда:
Практика

Слайд 12


Практика
Описание слайда:
Практика

Слайд 13


margin: 0 auto; overflow: 0 auto; margin: 0 auto 0 auto; margin: верх право низ ліво; auto - вказує, що розмір відступів буде автоматично розрахований браузером
Описание слайда:
margin: 0 auto; overflow: 0 auto; margin: 0 auto 0 auto; margin: верх право низ ліво; auto - вказує, що розмір відступів буде автоматично розрахований браузером

Слайд 14


Практика <div id="second_blok"> <h1>Homework</h1> </div> <div id="third_blok"> <img src="https://s1-goods.ozstatic.by.jpg"/> <p>Домашняя работа</p> </div> <div id="fourth_blok"> <p>Текст по центру</p> <p>Текст справа</p> </div>
Описание слайда:
Практика <div id="second_blok"> <h1>Homework</h1> </div> <div id="third_blok"> <img src="https://s1-goods.ozstatic.by.jpg"/> <p>Домашняя работа</p> </div> <div id="fourth_blok"> <p>Текст по центру</p> <p>Текст справа</p> </div>

Слайд 15


Практика <div id="second_blok"> <h1>Homework</h1> </div> <div id="third_blok"> <img src="https://s1-goods.ozstatic.by.jpg"/> <p>Домашняя работа</p> </div> <div id="fourth_blok"> <p>Текст по центру</p> <p>Текст справа</p> </div>
Описание слайда:
Практика <div id="second_blok"> <h1>Homework</h1> </div> <div id="third_blok"> <img src="https://s1-goods.ozstatic.by.jpg"/> <p>Домашняя работа</p> </div> <div id="fourth_blok"> <p>Текст по центру</p> <p>Текст справа</p> </div>

Слайд 16


Практика <div id="navbar"> <center> <a href="index1.html">Головна</a> <a href="index2.html">Новини</a> <a href="index3.html">Контакти</a> </center> </div>
Описание слайда:
Практика <div id="navbar"> <center> <a href="index1.html">Головна</a> <a href="index2.html">Новини</a> <a href="index3.html">Контакти</a> </center> </div>

Слайд 17


Блоки в HTML, слайд №17
Описание слайда:

Слайд 18


display: block; Блоки прилягають один до одного впритул, якщо у них немає margin
Описание слайда:
display: block; Блоки прилягають один до одного впритул, якщо у них немає margin

Слайд 19


display: inline;
Описание слайда:
display: inline;

Слайд 20


display: inline-block; Це значення display використовують, щоб відобразити в один рядок блокові елементи, в тому числі різних розмірів.
Описание слайда:
display: inline-block; Це значення display використовують, щоб відобразити в один рядок блокові елементи, в тому числі різних розмірів.

Слайд 21


vertical-align Властивість vertical-align дозволяє вирівняти такі елементи всередині зовнішнього блоку
Описание слайда:
vertical-align Властивість vertical-align дозволяє вирівняти такі елементи всередині зовнішнього блоку

Слайд 22


Блоки в HTML, слайд №22
Описание слайда:

Слайд 23


Padding: 5px; /* Поля навколо тексту */
Описание слайда:
Padding: 5px; /* Поля навколо тексту */

Слайд 24


ДЗ - просто
Описание слайда:
ДЗ - просто

Слайд 25


ДЗ - складно
Описание слайда:
ДЗ - складно

Слайд 26


Література: http://fcit.tneu.edu.ua/navchannja/pidhotovka-do-pratsevlashtuvannia/53-web-rozrobka/html-css/554-blochna-verstka http://htmlbook.ru/css/margin http://htmlbook.ru/css/margin-bottom http://htmlbook.ru/css/margin-left http://htmlbook.ru/css/margin-right http://htmlbook.ru/css/padding http://ru.learnlayout.com/display.html http://htmlbook.ru/css/display https://learn.javascript.ru/display
Описание слайда:
Література: http://fcit.tneu.edu.ua/navchannja/pidhotovka-do-pratsevlashtuvannia/53-web-rozrobka/html-css/554-blochna-verstka http://htmlbook.ru/css/margin http://htmlbook.ru/css/margin-bottom http://htmlbook.ru/css/margin-left http://htmlbook.ru/css/margin-right http://htmlbook.ru/css/padding http://ru.learnlayout.com/display.html http://htmlbook.ru/css/display https://learn.javascript.ru/display

Скачать

Теги Блоки в HTML
Похожие презентации
Mypresentation.ru
Загрузить презентацию