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 - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join