EN
HTML - akapit, układanie tekstu na ekranie, justowanie.
3
answers
3
points
W jaki sposób mogę układać tekst na ekranie i robić akapity?
3 answers
3
points
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
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
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