HTML prvi koraci - lekcija 2 - tagovi p, div i njihova razlika. Tag br
U prošloj lekciji smo kreirali naš prvi HTML dokument, što znači da već znate da pišemo HTML kod u tekstualnom editoru, a sve promene gledamo preko pregledača osvežavanjem stranice (obično pritiskom na taster F5).
Dakle, u ovoj lekciji ćemo nastaviti da radimo sa tekstom i koristićemo tagove za obmotavanje teksta: span, p, div. Takođe ćemo razmotriti tag br.
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
</body>
</html>
Ovo je naš kod sa kojim ćemo dalje raditi.
Hajde da dodamo sledeće linije.
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<p>Prva linija u tagu P</p>
<p>Druga linija u tagu P</p>
<div>Prva linija u tagu DIV</div>
<div>Druga linija u tagu DIV</div>
</body>
</html>
Ako otvorite dokument u pregledaču, videćete da tagovi p prikazuju rečenice u različitim linijama, ali postoji i razlika. Moj pregledač je po difoltu za tag P postavio margine odozgo i odozdo. Za tag div su linije priključene jedna uz drugu. Razlog je što je p tag paragrafa teksta, a div tag bloka, oblasti. Dakle, ako nam treba tag za tekst, koristićemo tag P, a ako treba da označimo određenu oblast, na primer da za tu oblast napravimo pozadinu ili granice, koristićemo tag DIV.
Ako na sajtu postoji tekst, ON MORA biti u tagu p ili h1-h6, ukoliko taj tekst nije službeni, tj. ne služi za oblikovanje stranice. Tako tekst treba da izgleda ovako:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<div>
<p>Prva linija u tagu P</p>
<p>Druga linija u tagu P</p>
</div>
</body>
</html>
Dakle, imamo sledeću strukturu body>div>p. Zapamtite, ne sme biti tag div unutar taga p, tj. body>p>div je pogrešno.
Hajde još da vidimo kako da prelomimo tekst u novi red. Dešava se da naš paragraf bude jako dug, pa imamo izbor ili da podelimo tekst na nekoliko paragrafa ili da dodamo tag za prelazak u novi red br. Tag <br /> je samostalni tag, zato se kosa crta stavlja pre znaka veće.
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<div>
<p>HTML jezik je razvio britanski naučnik Tim Berners-Li otprilike 1989—1991. godine u Evropskom savetu za nuklearna istraživanja u Ženevi (Švajcarska). HTML je napravljen kao jezik za razmenu naučne i tehničke dokumentacije, prilagođen za upotrebu osobama koje nisu stručnjaci u oblasti štampe. HTML je uspešno rešavao problem složenosti SGML-a definisanjem malog skupa strukturnih i semantičkih elemenata — deskriptora. Deskriptori se često nazivaju i „tagovima“. Pomoću HTML-a se lako može kreirati relativno jednostavan, ali lepo oblikovan dokument. Osim pojednostavljenja strukture dokumenta, u HTML je uvedena podrška hipertekstu. Multimedijalne mogućnosti su dodate kasnije. Izvorno je HTML zamišljen i napravljen kao sredstvo za strukturiranje i formatiranje dokumenata bez vezanosti za uređaje za prikazivanje. Idealno, tekst sa HTML oznakama treba da se reprodukuje bez stilskih i strukturnih izobličenja na opremi različitih tehničkih karakteristika (u boji ekran savremenog računara, monohromatski ekran organizatora, ograničen ekran mobilnog telefona ili uređaja i programi za glasovno čitanje tekstova). Međutim, savremena upotreba HTML-a je daleko od njegove prvobitne namene. Na primer, tag <TABLE>, koji je više puta korišćen za formatiranje stranice koju trenutno čitate, namenjen je pravljenju običnih tabela u dokumentima, ali kao što možete videti, ovde nema ni jedne tabele. Vremenom je osnovna ideja platformno-nezavisnosti HTML jezika žrtvovana savremenim potrebama za multimedijalnim i grafičkim dizajnom.</p>
</div>
</body>
</html>
Linija je postala predugačka, ali ako je podelimo u tekstualnom dokumentu, to neće uticati na HTML prikaz:
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<div>
<p>HTML jezik je razvio britanski naučnik Tim Berners-Li otprilike 1989—1991. godine u Evropskom savetu za nuklearna istraživanja u Ženevi (Švajcarska).
HTML je napravljen kao jezik za razmenu naučne i tehničke dokumentacije, prilagođen za upotrebu osobama koje nisu stručnjaci u oblasti štampe. HTML je uspešno rešavao problem složenosti SGML-a definisanjem malog skupa strukturnih i semantičkih elemenata — deskriptora.
Deskriptori se često nazivaju i „tagovima“. Pomoću HTML-a se lako može kreirati relativno jednostavan, ali lepo oblikovan dokument. Osim pojednostavljenja strukture dokumenta, u HTML je uvedena podrška hipertekstu. Multimedijalne mogućnosti su dodate kasnije. Izvorno je HTML zamišljen i napravljen kao sredstvo za strukturiranje i formatiranje dokumenata bez vezanosti za uređaje za prikazivanje.
Idealno, tekst sa HTML oznakama treba da se reprodukuje bez stilskih i strukturnih izobličenja na opremi različitih tehničkih karakteristika (u boji ekran savremenog računara, monohromatski ekran organizatora, ograničen ekran mobilnog telefona ili uređaja i programi za glasovno čitanje tekstova). Međutim, savremena upotreba HTML-a je daleko od njegove prvobitne namene. Na primer, tag <TABLE>, koji je više puta korišćen za formatiranje stranice koju trenutno čitate, namenjen je pravljenju običnih tabela u dokumentima, ali kao što možete videti, ovde nema ni jedne tabele.
Vremenom je osnovna ideja platformno-nezavisnosti HTML jezika žrtvovana savremenim potrebama za multimedijalnim i grafičkim dizajnom.</p>
</div>
</body>
</html>
Ovo nas ne spašava, u pregledaču se ništa neće promeniti i zato nam u pomoć dolazi tag <br />. Hajde da ga stavimo na kraj svake linije.
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<div>
<p>HTML jezik je razvio britanski naučnik Tim Berners-Li otprilike 1989—1991. godine u Evropskom savetu za nuklearna istraživanja u Ženevi (Švajcarska).<br />
HTML je napravljen kao jezik za razmenu naučne i tehničke dokumentacije, prilagođen za upotrebu osobama koje nisu stručnjaci u oblasti štampe.<br />
HTML je uspešno rešavao problem složenosti SGML-a definisanjem malog skupa strukturnih i semantičkih elemenata — deskriptora.<br />
Deskriptori se često nazivaju i „tagovima“. Pomoću HTML-a se lako može kreirati relativno jednostavan, ali lepo oblikovan dokument.<br />
Osim pojednostavljenja strukture dokumenta, u HTML je uvedena podrška hipertekstu.<br />
Multimedijalne mogućnosti su dodate kasnije.<br />
Izvorno je HTML zamišljen i napravljen kao sredstvo za strukturiranje i formatiranje dokumenata bez vezanosti za uređaje za prikazivanje.<br />
Idealno, tekst sa HTML oznakama treba da se reprodukuje bez stilskih i strukturnih izobličenja na opremi različitih tehničkih karakteristika (u boji ekran savremenog računara, monohromatski ekran organizatora, ograničen ekran mobilnog telefona ili uređaja i programi za glasovno čitanje tekstova).<br />
Međutim, savremena upotreba HTML-a je daleko od njegove prvobitne namene. Na primer, tag, koji je više puta korišćen za formatiranje stranice koju trenutno čitate, namenjen je pravljenju običnih tabela u dokumentima, ali kao što možete videti, ovde nema ni jedne tabele.<br />
Vremenom je osnovna ideja platformno-nezavisnosti HTML jezika žrtvovana savremenim potrebama za multimedijalnim i grafičkim dizajnom.</p>
</div>
</body>
</html>
Sada pregledač zna da treba prelomiti liniju, o tome mu govori tag <br />.
Takođe možemo podeliti tekst na više pasusa, hajde da koristimo tagove p.
<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>
<body>
<h1>Moj prvi HTML dokument</h1>
<div>
<p>HTML jezik je razvio britanski naučnik Tim Berners-Li otprilike 1989—1991. godine u Evropskom savetu za nuklearna istraživanja u Ženevi (Švajcarska).<br />
HTML je napravljen kao jezik za razmenu naučne i tehničke dokumentacije, prilagođen za upotrebu osobama koje nisu stručnjaci u oblasti štampe.<br />
HTML je uspešno rešavao problem složenosti SGML-a definisanjem malog skupa strukturnih i semantičkih elemenata — deskriptora.<br />
Deskriptori se često nazivaju i „tagovima“. Pomoću HTML-a se lako može kreirati relativno jednostavan, ali lepo oblikovan dokument.<br />
Osim pojednostavljenja strukture dokumenta, u HTML je uvedena podrška hipertekstu.<br />
Multimedijalne mogućnosti su dodate kasnije.<br />
</p>
<p>
Izvorno je HTML zamišljen i napravljen kao sredstvo za strukturiranje i formatiranje dokumenata bez vezanosti za uređaje za prikazivanje.<br />
Idealno, tekst sa HTML oznakama treba da se reprodukuje bez stilskih i strukturnih izobličenja na opremi različitih tehničkih karakteristika (u boji ekran savremenog računara, monohromatski ekran organizatora, ograničen ekran mobilnog telefona ili uređaja i programi za glasovno čitanje tekstova).<br />
Međutim, savremena upotreba HTML-a je daleko od njegove prvobitne namene. Na primer, tag, koji je više puta korišćen za formatiranje stranice koju trenutno čitate, namenjen je pravljenju običnih tabela u dokumentima, ali kao što možete videti, ovde nema ni jedne tabele.<br />
Vremenom je osnovna ideja platformno-nezavisnosti HTML jezika žrtvovana savremenim potrebama za multimedijalnim i grafičkim dizajnom.</p>
</div>
</body>
</html>
Osvežite stranicu u pregledaču i videćete da će tekst biti podeljen na dva pasusa.