SlideShare ist ein Scribd-Unternehmen logo
1 von 8
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
Край...
...Въпроси?

Weitere ähnliche Inhalte

Mehr von RaynaITSTEP

Project management professional
Project management professionalProject management professional
Project management professionalRaynaITSTEP
 
Project management it step
Project management it stepProject management it step
Project management it stepRaynaITSTEP
 
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)RaynaITSTEP
 
monitoring and diagnostics
monitoring and diagnosticsmonitoring and diagnostics
monitoring and diagnosticsRaynaITSTEP
 
network security
network securitynetwork security
network securityRaynaITSTEP
 
configuring disk sand drivers
configuring disk sand driversconfiguring disk sand drivers
configuring disk sand driversRaynaITSTEP
 
install update and migration to windows 10
install update and migration to windows 10install update and migration to windows 10
install update and migration to windows 10RaynaITSTEP
 
Фотошоп за деца_4
Фотошоп за деца_4Фотошоп за деца_4
Фотошоп за деца_4RaynaITSTEP
 
Структурни кабелни системи
Структурни кабелни системиСтруктурни кабелни системи
Структурни кабелни системиRaynaITSTEP
 
Android introduction
Android introductionAndroid introduction
Android introductionRaynaITSTEP
 
Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2RaynaITSTEP
 
Adobe Illustrator - Обобщение
Adobe Illustrator - ОбобщениеAdobe Illustrator - Обобщение
Adobe Illustrator - ОбобщениеRaynaITSTEP
 

Mehr von RaynaITSTEP (20)

Project management professional
Project management professionalProject management professional
Project management professional
 
Project management it step
Project management it stepProject management it step
Project management it step
 
Lean startup
Lean startupLean startup
Lean startup
 
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
РАБОТА С ОБЕКТА „ЗАЯВКА“ (2)
 
DBT_3
DBT_3DBT_3
DBT_3
 
DBT_2
DBT_2DBT_2
DBT_2
 
DBT_1
DBT_1DBT_1
DBT_1
 
monitoring and diagnostics
monitoring and diagnosticsmonitoring and diagnostics
monitoring and diagnostics
 
network security
network securitynetwork security
network security
 
networking
networkingnetworking
networking
 
data security
data securitydata security
data security
 
configuring disk sand drivers
configuring disk sand driversconfiguring disk sand drivers
configuring disk sand drivers
 
boot process
boot process  boot process
boot process
 
install update and migration to windows 10
install update and migration to windows 10install update and migration to windows 10
install update and migration to windows 10
 
virtualization
virtualizationvirtualization
virtualization
 
Фотошоп за деца_4
Фотошоп за деца_4Фотошоп за деца_4
Фотошоп за деца_4
 
Структурни кабелни системи
Структурни кабелни системиСтруктурни кабелни системи
Структурни кабелни системи
 
Android introduction
Android introductionAndroid introduction
Android introduction
 
Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2Adobe Illustrator - Урок 2
Adobe Illustrator - Урок 2
 
Adobe Illustrator - Обобщение
Adobe Illustrator - ОбобщениеAdobe Illustrator - Обобщение
Adobe Illustrator - Обобщение
 

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