Languages

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

3 points
Asked by:
Sylwia
1334

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

3 answers
3 points
Answered by:
Sylwia
1334

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
1334

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
1334

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
Hey ­čĹő
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.