SlideShare a Scribd company logo
HTML
БОЯН ИВАНОВ
Типове на елементи
Логически срещу Физически
Блокови елементи (block) и
елементи в редица (inline)
1
Блокови елементи
(Block elements)
 Започват и завършват на нов ред
 Заемат цялата налична ширина (разпъват
се наляво и надясно колкото могат)
 Имат размери на контейнера
 Примери:
<div>, <p>, <h1>, <form>
2
Елементи в редица
(Inline elements)
 Елемента се позиционира в нормалния
поток на документа
 Започва на реда, в който е добавен и
завършва на същия
 Заема толкова място колкото му е
необходимо
 Примери :
<span>, <a>, <img>
3
HTML пример
<!DOCTYPE html>
<html>
<head><title>Test page</title></head>
<body>
<h1>Heading</h1>
<p>This is a paragraph</p>
<a href=“#”> with a link</a>
<br>
<span>This is a span </span>
<div> This is a div</div>
</body></html>
4
Логически и физически
тагове
 <b> и <strong>
 <i> и <em>
 Форматиращи тагове:
5
• <small>
• <big>
• <sub>
• <sup>
• <pre>
• <bdo>
• <mark>
• <s>
• <strike>
• <u>
6
Логически тагове
 <address>
 <cite>
 <abbr>
 <q>
 <blockquote>
 <del>
 <ins>
 <kbd>
 <header>
 <main>
 <figure>
 <samp>
 <var>
 <code>
 <dfn>
 <article>
 <acronym>
 <tt>
 <nav>
 <footer>
 <aside>
 <figcaption>
7
Край...
...Въпроси?

More Related Content

PDF
3block inline
PPTX
HTML Inline Block Elements
PPTX
html introduction
PDF
2 html css_html_intro
PPTX
HTML Introduction (BG)
PPSX
PhS - Урок 11
PPSX
PhS - Урок 10
PPSX
PhS - Урок 5
3block inline
HTML Inline Block Elements
html introduction
2 html css_html_intro
HTML Introduction (BG)
PhS - Урок 11
PhS - Урок 10
PhS - Урок 5

Similar to inline block elements (13)

PPTX
Html & css improved
PPTX
Курс по уеб програмиране (2014), занятие №1 - HTML
PDF
HTML – програмиране и валидиране
PPT
Html
PPT
Html1
PPTX
HTML Lists & Tables
PPTX
формуляри
PPTX
HTML Forms
PPT
HTML-presentation
Html & css improved
Курс по уеб програмиране (2014), занятие №1 - HTML
HTML – програмиране и валидиране
Html
Html1
HTML Lists & Tables
формуляри
HTML Forms
HTML-presentation
Ad

More from RaynaITSTEP (20)

PPTX
Project management professional
PDF
Project management it step
PPT
Lean startup
PPTX
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
PPTX
PPTX
PPTX
PDF
monitoring and diagnostics
PDF
network security
PDF
networking
PDF
data security
PDF
configuring disk sand drivers
PDF
boot process
PDF
install update and migration to windows 10
PDF
virtualization
PPTX
Фотошоп за деца_4
PDF
Структурни кабелни системи
PDF
Android introduction
PPTX
Adobe Illustrator - Урок 2
PPTX
Adobe Illustrator - Обобщение
Project management professional
Project management it step
Lean startup
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
monitoring and diagnostics
network security
networking
data security
configuring disk sand drivers
boot process
install update and migration to windows 10
virtualization
Фотошоп за деца_4
Структурни кабелни системи
Android introduction
Adobe Illustrator - Урок 2
Adobe Illustrator - Обобщение
Ad

inline block elements

  • 1. HTML БОЯН ИВАНОВ Типове на елементи Логически срещу Физически Блокови елементи (block) и елементи в редица (inline) 1
  • 2. Блокови елементи (Block elements)  Започват и завършват на нов ред  Заемат цялата налична ширина (разпъват се наляво и надясно колкото могат)  Имат размери на контейнера  Примери: <div>, <p>, <h1>, <form> 2
  • 3. Елементи в редица (Inline elements)  Елемента се позиционира в нормалния поток на документа  Започва на реда, в който е добавен и завършва на същия  Заема толкова място колкото му е необходимо  Примери : <span>, <a>, <img> 3
  • 4. HTML пример <!DOCTYPE html> <html> <head><title>Test page</title></head> <body> <h1>Heading</h1> <p>This is a paragraph</p> <a href=“#”> with a link</a> <br> <span>This is a span </span> <div> This is a div</div> </body></html> 4
  • 5. Логически и физически тагове  <b> и <strong>  <i> и <em>  Форматиращи тагове: 5 • <small> • <big> • <sub> • <sup> • <pre> • <bdo> • <mark> • <s> • <strike> • <u>
  • 6. 6
  • 7. Логически тагове  <address>  <cite>  <abbr>  <q>  <blockquote>  <del>  <ins>  <kbd>  <header>  <main>  <figure>  <samp>  <var>  <code>  <dfn>  <article>  <acronym>  <tt>  <nav>  <footer>  <aside>  <figcaption> 7