Languages

HTML - akapit, układanie tekstu na ekranie, justowanie.

3 points
Asked by:
Sylwia
3500

W jaki sposób mogę układać tekst na ekranie i robić akapity?

3 answers
3 points
Answered by:
Sylwia
3500

Do każdej czynności wykorzystujemy inny tag.

1. Akapit HTML

Do tworzenia akapitów używamy znacznika <p> (ang. paragraph-akapit).
Praktyczny przykład z tagiem <p>:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

   <h1>Tytuł strony.</h1>
   <p>Tu umieszcze tekst, który rozpocznie się od akapitu. </p>

</body>
</html>

2. Wyśrodkowanie tekstu HTML

Aby wyśrodkować tekst używamy text-align: center

Praktyczny przykład:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>
   <p> Tu mamy tekst zaczynający się od akapitu</p>
   <p style="text-align:center">Ten tekst bedzie wyśrodkowany</p>

</body>
</html>

3. Wyrównanie tekstu do prawej/lewej strony HTML

Analogicznie do poprzedniego przykładu używamy text-align: right(dla wyrównania do prawej strony) oraz text-align: left(aby wyrównać do lewej strony).
Można również wpisać poprostu zwykły tekst w nowym akapicie by był wyrównany do lewej strony.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

   <p style="text-align: right">Ten tekst będzie wyrównany do prawej strony</p>
   <p style="text-align: left">Ten tekst będzie wyrównany do lewej strony</p>
   <p>Ten tekst również będzie wyrównany do lewej strony</p>

</body>
</html>

4. Wyjustuj tekst HTML

Możemy również wyjustować tekst, czyli wyrównac do obu marginesów jednocześnie.
Użyjemy do tego analogicznego parametru text-algin: justify

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

   <p style="text-align: justify">Ten tekst będzie wyjustowany. Prawy i lewy brzeg tego tekstu powinien być równy (nie postrzępiony).Ten tekst będzie wyjustowany. Prawy i lewy brzeg tego tekstu powinien być równy (nie postrzępiony).Ten tekst będzie wyjustowany. Prawy i lewy brzeg tego tekstu powinien być równy (nie postrzępiony).</p>

</body>
</html>

 

0 comments Add comment
2 points
Answered by:
Sylwia
3500

1. Akapit z odstępami

Wielkość odstępów można zmieniać za pomocą stylu margin-bottom.

np. <p style="margin-bottom: 30px; background: gray">Tekst...</p>.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

  <p style="background: gray">Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami.</p>
  <p style="background: gray">Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami.</p>
  <p style="background: gray">Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami.</p>
  <p style="background: gray">Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami. Akapit z odstępami.</p>

</body>
</html>

2. Wycinek (nazywane też elementami blokowymi)

Można zauwarzyć, że domyślnie nie posiadają one odstępów.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

  <div style="background: gray">Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim.</div>
  <div style="background: green">Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim.</div>
  <div style="background: blue">Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim.</div>
  <div style="background: orange">Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim. Element blokowy jeden za drugim.</div>

</body>
</html>

 

0 comments Add comment
1 points
Answered by:
Sylwia
3500

1. Obrazek otoczony tekstem od prawej

Należy umieścić grafikę i tekst we wspólnym elemencie blokowym (np. div) dodając do grafiki float: left.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

  <!doctype html>
<html>
<body>

  <div>
  	<img style="float: left" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png">
    Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający.Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający.Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.
  </div>

</body>
</html>

</body>
</html>

2. Obrazek otoczony tekstem od lewej

Należy umieścić grafikę i tekst we wspólnym elemencie blokowym (np. div) dodając do grafiki float: right.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<body>

  <div>
  	<img style="float: right" src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png">
    Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający.Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający.Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający. Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.  Tekst otaczający.
  </div>

</body>
</html>

 

0 comments Add comment
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join