abc HTML5 i CSS TUTORIAL

Poravnanje /ALIGN/ {text-align:center;}


Slika 1. Korištenje atributa - Interni CSS /INTERNAL CSS/

Poravnanje /ALIGN/ Korištenje internog CSS-a se izvodi u oba dijela HTML fajla: Sintaksa:

  • HEAD dio (za paragraf ili zaglavlje u tekstu): <style> TAG { text-align: Vrsta_poravananja; } </style>
  • BODY dio: <TAG>Sadržaj na koji se odnosi TAG</TAG>

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV | Naziv
- TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglavlje teksta /HEADINGS/
BODY - Tekst u cijelom dokumentu
DIV - Tekst u cijeloj DIV sekciji
Naziv - Korisnik bira ime za uređenje
text-align - Atribut poravnanja teksta

Vrsta poravnanja:
LEFT - lijevo
CENTER - centrirano
RIGHT - desno
JUSTIFY - obe strane

Kreiranje internog iz linijskog css-a /INTERNAL CSS FROM LINE CSS/ u BODY TAG-u


Slika 2. Poravnanje /text-align/

Mnogi tagovi podržavaju atribute poravnanja /ALIGN/. Ako želite poravnanje (lijevo, desno, centrirano ili obe strane) kreirate stil u HEAD dijelu i pozovete ga u BODY dijelu HTML dokumenta.

Primjer 1. Parametri poravnanja ALIGN i primjeri korištenja u TAG-u H

Sintaksa  Opis Primjer kod Primjer ispis
text-align:left;

Lijevo poravnanje zaglavlja teksta /HEADINGS/

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - lijevo</title>
<style>
H2 { text-align:left; }
</style>
</head>
<body>
<H2>Left Align</H2>
</body></html>

Left Align
text-align:center

Centrirano poravnanje zaglavlja teksta /HEADINGS/

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - centrirano</title>
<style>
H2 { text-align:center; }
</style>
</head>
<body>
<H2>Center Align</H2>
</body></html>

Center Align
text-align:right

Desno poravnanje zaglavlja teksta /HEADINGS/

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - centrirano</title>
<style>
H2 { text-align:right; }
</style>
</head>
<body>
<H2>Right Align</H2>
</body></html>

Right Align
text-align:justify

I lijevo i desno poravnanje zaglavlja teksta /HEADINGS/

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - centrirano</title>
<style>
H2 { text-align:justify; }
</style>
</head>
<body>
<H2>Justify Align</H2>
</body></html>

Justify Align
 

Primjer 2. Parametri poravnanja ALIGN paragrafa.

Sintaksa  Opis Primjer kod Primjer ispis
text-align:left;

Lijevo poravnanje paragrafa /PARAGRAPH/

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - lijevo</title>
<style>
p { text-align:left; }
</style>
</head>
<body>
<p>Lijevo poravnanje</p>
</body></html>

Lijevo poravnanje
text-align:center

Centrirano poravnanje paragrafa /PARAGRAPH/

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - centrirano</title>
<style>
p { text-align:center; }
</style>
</head>
<body>
<p>centrirano poravnanje</p>
</body></html>

centrirano poravnanje
text-align:right

Desno poravnanje paragrafa /PARAGRAPH/

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - desno</title>
<style>
p { text-align:right; }
</style>
</head>
<body>
<p>
desno poravnanje
</p>
</body></html>

desno poravnanje
text-align:justify

I lijevo i desno poravnanje paragrafa /PARAGRAPH/

Tekst iskopirati više puta da bi dužina teksta bila više od jedne linije teksta.

 <!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - desno</title>
<style>
p { text-align:justify; }
</style>
</head>
<body>
<p>
I lijevo i desno (obe ivice poravnate). Da bi vidjeli poravnanje mora biti dovoljno teksta. Da bi vidjeli poravnanje mora biti dovoljno teksta. Da bi vidjeli poravnanje mora biti dovoljno teksta.Da bi vidjeli poravnanje mora biti dovoljno teksta.
</p>
</body></html>

I lijevo i desno (obe ivice poravnate). Da bi vidjeli poravnanje mora biti dovoljno teksta. Da bi vidjeli poravnanje mora biti dovoljno teksta. Da bi vidjeli poravnanje mora biti dovoljno teksta.Da bi vidjeli poravnanje mora biti dovoljno teksta.
 

Daljnji rad: 
1. Izvesti slijedeće naredbe
 <H1 align=left>Left Align
<H1 align=center> Center Align
<H1 align=right>Right Align
<H1 align=justify> Justify Align

2. Napisati html kod za poravnanje desno. (Ovo je tekst paragrafa.)

3. Napisati dovoljno teksta da se provjeri poravnanj tipa justify (tekst više od jednog reda).

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index