Slušaj robot čitača
Tri mala taga
Prethodna dva poglavlja su bila prilično obimna, pa ne bi bilo na odmet da napravimo mali break!
Kako preći u novi red bez proreda? <br>
Kao što smo zapazili, <p> kreira paragraf i paragraf će biti prikazan s određenim razmakom ispred i iza teksta. Takođe smo konstatovali da ako pređemo u novi red u kucanom tekstu, HTML će to ignorisati, dok ne stavimo taj tekst u neki tag. A šta ako želimo da pređemo u novi red, bez razmaka? Npr, hoćemo da objavimo pesmu na svom sajtu. Koristićemo <br> tag:
<p>
Oj, Srbijo među pesmama, među šljivama. <br>
Oj, Srbijo među ljudima na njivama. <br>
Oj, Srbijo među pesmama, među stadima. <br>
Oj, Srbijo, pesmo među narodima!
</p>
<p>Pesma Oskara Daviča</p>
Oj, Srbijo među pesmama, među šljivama.
Oj, Srbijo među ljudima na njivama.
Oj, Srbijo među pesmama, među stadima.
Oj, Srbijo, pesmo među narodima!
Pesma Oskara Daviča
<br> tag je samozatvarajući. On samo predstavlja prelazak u novi red, i nema nikakav svoj sadržaj oko koga bi se zatvarao. Jedno vreme se forsiralo pisanje br taga kao <br /> zbog XHTML-a ali to nikada nije ušlo u standard i brauzeri ignorišu ovu kosu crtu, pa obe verzije rade isto.
Kako insertovati horizontalnu liniju na web stranicu? <hr>
<hr> tag označava tematski predah na stanici.
Na ekranu se prikazuje kao crna horizontalna linija
<hr> tag je takođe samozatvarajući.
<p>Kraj jedne celine</p>
<hr>
<p>Početak druge celine</p>
Kraj jedne celine
Početak druge celine
Nativni CSS <hr> taga je:
hr {
display: block;
margin: 0.5em auto;
border-style: inset;
border-width: 1px;
}
Ovde ima dosta poznatih pojmova. Pravilo display: block;, označava da je <hr> tag jedan od tagova koji sami po sebi zauzimaju ceo red. Drugi primeri ovakvih tagova su bili <p> tag, <h1>-<h6> tagovi, pa čak i <body> i <html> tagovi.
Kao primer taga koji nije block, videli smo <a> tag. Kao što znamo, <a> neće preći u sledeći red i istisnuti sve ostale elemente, već će se "unizati" u ostali deo teksta. Tako da <a> tag ima display: inline; CSS svojstvo.
O display svojstvu će tek biti reči.
O margin-ama još nije bilo reči, ali predstvljaju odbojnik oko elementa od drugih elemenata. Dakle, margina je najspoljniji "deo" elementa, i leži izvan bordera. Ako pritisnemo Ctrl+Shift+C otvoriće nam se dev-tools, ili otvorimo dev tools sa F12, pa kliknete na dugme u gornjem levom uglu, aktiviraće se "element picker". Sada ako pređemo kursorom preko bilo kog elementa na ekranu, na njemu će se pojaviti filter, i taj element će biti označen u dev tools-u.
U firefox-u, kada se aktivira element selector, i pređe kursorom preko strane, ne može više da se osveži strana pomoću Ctrl+R ili F5, ali i dalje može da se osveži klikom na dugme. Nakon što osvežio stranicu klikom, moći ćemo ponovo osvežti tastaturom. Alternativno, ako kliknemo Esc, picker će se isključiti. Isto bi se postiglo i ponovnim klikom na Ctrl+Shift+C, ali je Esc lakše.
Ako sada pređemo kursorom preko horizontalne linije hr elementa, videćemo žućkasti filter oko njega. Taj žuti filter pokazuje koliko prostora zauzimaju te margine od 0.5em. Takođe ćete moći da vidite i da skoro svi elementi imaju neke margine, te da su sve margine prazne. Margine su kako element odgura druge elemente od sebe. Elementi se malo socijalno distanciraju, ili, drže odstojanje, po srpski.
Isto kao i u slučaju bordera, navođenje dve vrednosti za marginu, znače da se prva odnosi na gore i dole, a druga na levu i desnu marginu. auto sa strane znači da će leva i desna margina biti jednake, pa koliko mesta ima. Kako je hr block element, to se on proteže celim raspoloživim prostorom, pa su i ove dve margine efektivno jednake 0.
Ako bismo zadali širinu <hr> tagu, tako da ne ide od ivice do ivice, on će se pozicionirati centralno u odnosu na element u kome se nalazi.
Boja horizontalne linije će biti boja teksta. Ako pogledate ova svojstva, možete zaključiti kako da <hr> tagu promenite boju?
Komentari HTML-u i CSS-u
Komentare koristimo u kôdu, kada želimo da objasnimo budućem sebi, ili nekom koderu koji će doći posle nas, zašto smo nešto uradili baš tako, i zašto to tako mora da bude. Komentari u HTML-u se pišu između <!--, i -->:
<p>Ovo je vidljivi deo sajta</p>
<!-- ovo je komentar koji se ne prikazuje na sajtu, ali je vidljiv u kôdu -->
<p>Ovo je nastavak vidljivog dela sajta</p>
Ovo je vidljivi deo sajta
Ovo je nastavak vidljivog dela sajta
Prored u ispisu je od margina na <p> tagu, ne zato što je komentar tu.
Komentari u CSS-u se stavljaju između /* i */ znakova:
/* p {
border-style: solid;
} */
Komentari i u HTML-u, i u CSS-u se moraju zatvarati! Ako ih ne zatvorimo, sav kôd koji sledi će postati deo komentara, dok se ne naiđe na prvo zatvaranje komentara, koje može biti i od nekog narednog komentara.
Dakle, sav kôd ili tekst unutar <!-- i --> u HTML-u, ili između /* i */ u CSS-u će se smatrati za komentar, i brauzer ga neće prikazivati.
U tekstualnim editorima, možemo selektovati deo kôda koji hoćemo da zakomentarišemo, i kliknuti ctrl+', što će zakomentarisati tu selekciju. Komentar možemo ukloniti na isti način.
Članak prvi put objavljen: 31.1.2022.
Poslednje izmene: 3.2.2022.
Autor: k.