Do
sada smo prvo razjasnili šta je HTML5 i kako se započinje pravljenje web sajta
u Microsoft Visual Studio-u, možete pogledati ovde. Zatim smo naučili kako se
prave paragrafi i detaljno objasnili kako se prave sve vrste listi, možete
pogledati ovde i u zadnjem postu smo naučili kako se prave linkovi i sidra u HTML5, možete pogledati ovde. Ovo sam vam sve naveo jer to su stvari koji
morate znati i bez poznavanja isti nema smisla nastavljati dalje. Zato ako
niste dobro prostudirajte sva tri prethodna posta. U ovom postu ćemo se više
fokusirati na mnogobrojne tagove koji će vam itekako trebati kada budete
formatirali tekst ili recimo koristili specijalne znakove u vašim HTML5 projektima. Takođe ćemo učiti kako da poravnate tekst i kako da promenite font.
Ponekad me ljudi pitaju, zašto da učim HTML5 i radim sve od nule kada svako
danas koristi WordPress platformu? Kako tehnologija stalno napreduje, mogu vam
reći da je to dobro pitanje. Danas, ne morate znati HTML da bi ste pravili
sajtove, ali je bolje za vas da znate. Ponekad ne postoji već napravljen šablon
za to što vi hoćete na vašem veb sajtu ili ponekad želite nešto da promenite ili dodate na već
postojeći veb sajt; tada treba da intervenišete.
( Formatiranje teksta u HTML5 )
Tačno
je da kompanije imaju određene veb developere i da njih uvek angažuju čak i
kada treba da objave jednu običnu tabelu na veb sajtu kompanije. Bez obzira da
li vi studirate programiranje, ili učite samostalno ili vam je to čisto neki
hobi; vi kao programer bi ste bili smešni da morate da platite nekog drugog da to
uradi umesto vas. To se jednostavno mora znati kao i T-SQL i mnoštvo drugih
programski jezika koji su u suštini pratnja C# programskom jeziku. Kakav je to C# programer koji ne zna da radi sa bazama podataka? Tako morate znati i HTML i
CSS i sve što možete naučiti, ne ograničavajte se jer ne znate kad će vam to
zatrebati. Programiranje je odavno pomereno na Internet ali čak i da radite sa
nekim proračunima u običnom terminalu od vas se može tražiti da vaš program
kreira izveštaje u *.html datoteci. Kako ćete to izvesti ako ne znate HTML? Učite,
eksperimentišite sami i najvažnije čuvajte svaki vaš kod bez obzira koliko vam
može izgledati nebitan. Iskusni programeri imaju stotine korisni funkcija,
klasa ali CSS datoteka. Oni na taj način ništa ne rade od nule. Ali najvrednije
u njima je ono što oni znaju pa čak iako se s vremena na vreme moraju
podsetiti. Pređimo sada na učenje novih tagova.
Semantički
HTML tagovi
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Dodajte naslov između head tagova i između
body tagova napravite naslov koji će biti vidljiv na veb stranici.
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sementic
HTML Tags</title>
</head>
<body>
<h1>The
Sementic HTML Tags</h1>
</body>
</html>
Kad neko sam uzme da pravi veb stranicu iz
hobija on se ne trudi da poštuje standarde i zbog toga njihove stranice ne
izgledaju profesionalno. Postoje pravila kad se koji semantički tag koristi i
vi to koristite da vaši veb sajtovi izgledaju profesionalno i prema
standardima. S obzirom da hoćemo da pravimo listu semantičkih HTML tagova,
koristićemo neuređenu listu i kodove prelaza. Specijalni znakovi ili kodovi
prelaza se koriste za sledeće znakove i druge. Mogu se koristiti entitetima tj.
nazivom entiteta ili brojem entiteta:
Symbol Entity Name Entity Number
- & (ampersand) & &
- < (less than) < <
- > (greater than) > >
- (nonbreaking space) ¢
- £ (pound) £ £
- ¥ (yen) ¥ ¥
- © (copyright) © ©
- ® (registered trademark) ® ®
- ° (degree) ° °
- ± (plus or minus) ± ±
- † (dagger) † †
- ™ (trademark) ™ ™
Ukucajte sledeće linije koda ispod naslova
između body tagova.
<ul>
<li>This is
the result of <abbr><abbr> "here is some abbreviation of
the text" </abbr></abbr> tag.</li>
</ul>
Tag abbr se koristi kada želite da
istaknete neku skraćenicu u tekstu. Npr. BG – Beograd, onda će te BG
staviti između abbr tagova. Pre je postojao i tag acronym ali je ukinut u HTML5. Obratite pažnju da koristimo i kodove prelaza. Ukucajte
sledeću liniju koda između ul tagova.
<li>This is the result of <cite><cite>
"here is some citation" </cite></cite> by Manel
Radovanovic, 2020 tag.</li>
Ovaj semantički tag cite se koristi kada
hoćete nešto da citirate.
<li>This is
the result of <code><code> "here is some code" </code></code> tag.</li>
Semantički tag code se najčešće koristi
ukoliko imate potrebu da pišete kod poput kodova na ovom blogu. Bilo šta da
stavite, bilo koji kod; bilo kojeg programskog jezika; on će se videti na veb
sajtu onako kako ste ga napisali i neće uticati na HTML5 koji kodirate.
<li>This is
the result of <dfn><dfn> "here is some definition of the
text" </dfn></dfn> tag.</li>
Semantički tag dfn se koristi kad hoćete
nešto da definišete ili da istaknete u tekstu.
<li>This is
the result of <em><em></em> tag.</li>
Semantički tag em se takođe koristi kad
nešto želite da istaknete u tekstu.
<li>This is
the result of <kbd><kbd> "here is some text you neet to
type on the keyboard" </kbd></kbd> tag.</li>
Ponekad će te imati potrebu da korisniku
vašeg veb sajta pre unosa nekog teksta sa tastature kažete šta treba da unese.
To može biti na primer i rečenica poput ove: Pritisnite CTRL + C . Tada je
dobro da vaš tekst stavite između kbd tagova.
<li>This is
the result of <samp><samp> "here is some url" <a href="https://www.manuelradovanovic.com" target="_blank">https://www.manuelradovanovic.com</a> </samp></samp> tag.</li>
Već ste učili kako se pravi link, međutim
poželjno je da i vaš link malo promenite od uobičajenog teksta. Za te svrhe koristite
semantički tag samp. On se u suštini koristi za sve što vam predstavlja primer
nečega. Međutim, najbolji je za prikaz teksta sa konsole ili terminala.
<li>This is
the result of <strong><strong></strong> tag.</li>
Semantički tag strong se koristi kada
hoćete nešto više da istaknete od taga em.
<li>This is
the result of <var><var> "here is some variable that
shows its value as e.g. font italic style" </var></var> tag.</li>
Semantički tag var se koristi umesto
promenjive i ona prikazuje svoju vrednost na veb sajtu. Da bi vam bilo jasnije
o čemu se radi, daćemo neku vrednost našem tagu var. Unesite sledeći kod između
head tagova:
<!--
give some value to var -->
<style>
var {
font-style: italic;
}
</style>
Vratite se sada nazad između body tagova,
dodajte novi naslov i jednu izjavu.
<h2>The
Physical Style HTML Tags</h2>
<h3>You
should avoid using physical style tags and use the CSS language instead!</h3>
Fizički stilovi u HTML5 jeziku jesu takođe
semantički tagovi ali oni se ne preporučuju da se koriste. Umesto njih je bolje
koristiti CSS jezik koji ćete učiti kasnije detaljno. Međutim, mi ćemo ovde
navesti neke od fizičkih stilova HTML tagova da bi ste znali kako i šta su
značili u starijim verzijama HTML.
<ul>
<li>This is
the result of <b><b></b> tag.</li>
<li>This is
the result of <i><i></i> tag.</li>
<li>This is
the result of <small><b></small> tag.</li>
<li>This is
the result of <sub><sub></sub> tag.</li>
<li>This is
the result of <sup><sup></sup> tag.</li>
<li>This is
the result of <u><u></u> tag.</li>
<li>itc... </li>
</ul>
Navedeni HTML kod nema potrebe nešto
posebno objašnjavati, videćete rezultate. Zato prvo pogledajte celi HTML kod.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sementic
HTML Tags</title>
<!--
give some value to var -->
<style>
var {
font-style: italic;
}
</style>
</head>
<body>
<h1>The
Sementic HTML Tags</h1>
<ul>
<li>This is
the result of <abbr><abbr> "here is some abbreviation of
the text" </abbr></abbr> tag.</li>
<li>This is
the result of <cite><cite> "here is some citation" </cite></cite> by Manel Radovanovic, 2020 tag.</li>
<li>This is
the result of <code><code> "here is some code" </code></code> tag.</li>
<li>This is
the result of <dfn><dfn> "here is some definition of
text" </dfn></dfn> tag.</li>
<li>This is
the result of <em><em></em> tag.</li>
<li>This is
the result of <kbd><kbd> "here is some text you neet to
type on the keyboard" </kbd></kbd> tag.</li>
<li>This is
the result of <samp><samp> "here is some url" <a href="https://www.manuelradovanovic.com" target="_blank">https://www.manuelradovanovic.com</a> </samp></samp> tag.</li>
<li>This is
the result of <strong><strong></strong> tag.</li>
<li>This is
the result of <var><var> "here is some variable that
shows its value as e.g. font italic style" </var></var> tag.</li>
</ul>
<h2>The
Physical Style HTML Tags</h2>
<h3>You
should avoid using physical style tags and use the CSS language instead!</h3>
<ul>
<li>This is
the result of <b><b></b> tag.</li>
<li>This is
the result of <i><i></i> tag.</li>
<li>This is
the result of <small><b></small> tag.</li>
<li>This is
the result of <sub><sub></sub> tag.</li>
<li>This is
the result of <sup><sup></sup> tag.</li>
<li>This is
the result of <u><u></u> tag.</li>
<li>itc... </li>
</ul>
</body>
</html>
Pokrenite navedenu veb stranicu i dobićete
sledeće rezultate:
The Sementic HTML Tags
- This is the result of <abbr> "here is some
abbreviation of the text" </abbr> tag.
- This is the result of <cite> "here is
some citation" </cite> by Manel Radovanovic, 2020 tag.
- This is the result of <code>
"here is some code" </code>
tag.
- This is the result of <dfn> "here is some
definition of text" </dfn> tag.
- This is the result of <em> tag.
- This is the result of <kbd>
"here is some text you neet to type on the keyboard"
</kbd> tag.
- This is the result of <samp>
"here is some url" https://www.manuelradovanovic.com </samp>
tag.
- This is the result of <strong> tag.
- This is the result of <var> "here is some
variable that shows its value as e.g. font italic style" </var>
tag.
The Physical Style HTML Tags
You should avoid using physical style tags and use the CSS
language instead!
- This is the result of <b> tag.
- This is the result of <i> tag.
- This is the result of <b> tag.
- This is the result of <sub> tag.
- This is the result of <sup> tag.
- This is the result of <u> tag.
- itc...
Kako sve ovo izgleda možete pogledati i na
video-u:
( HTML5 & CSS3 - #4. Semantic HTML Tags )
Formatiranje teksta koristeći CSS
Pre nego što detaljno počnemo učiti i
pisati CSS – Cascading Style Sheets -
jezik formatiranja preko koga se definiše izgled elemenata veb stranice, u
nekim sledećim postovima; mi ćemo ga malo koristiti. Tek toliko da shvatite
koliko olakšava život svakom veb dizajneru. Takođe, u prethodnom primeru smo
koristili stil kada smo hteli demonstrirati kako semantički tag var prikazuje i
koristi svoju vrednost. Sad ćemo se malo koncentrisati na stilove i font. Prvo,
što treba da znate o stilovima jeste da se oni mogu koristiti sa većinom
tagova. Tag span postoji samo radi povezivanja stilova. Stavlja se ispred i iza
nekog teksta i samostalno nema nikakav efekat, ali sa atributom style zauzima
mnoge tagove koje ste videli do sada. Kreirajte novi projekat i nazovite ga FontStyles:
Unesite sledeći kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Font
Styles</title>
</head>
<body>
<h1>Font
Styles</h1>
<h2>Style =
font</h2>
<ul>
<li>Here is
some <span style="font: caption;">caption text.</span></li>
<li>Here is
some <span style="font: initial;">initial text.</span></li>
<li>Here is
some <span style="font: italic;">italic text.</span></li>
<li>Here is
some <span style="font: lighter;">large text.</span></li>
<li>Here is
some <span style="font: larger;">larger text.</span></li>
<li>Here is
some <span style="font: message-box;">message-box text.</span></li>
<li>Here is
some <span style="font: normal;">normal text.</span></li>
<li>Here is
some <span style="font: small;">small text.</span></li>
<li>Here is
some <span style="font: small-caps;">small-caps text.</span></li>
<li>Here is
some <span style="font: small-caption;">small-caption text.</span></li>
<li>Here is
some <span style="font: smaller;">smaller text.</span></li>
<li>Here is
some <span style="font: status-bar;">status-bar text.</span></li>
<li>Here is
some <span style="font: unset;">unset text.</span></li>
<li>Here is
some <span style="font: x-large;">xx-small text.</span></li>
<li>Here is
some <span style="font: x-small;">x-small text.</span></li>
<li>Here is
some <span style="font: xx-large;">xx-large text.</span></li>
<li>Here is
some <span style="font: xx-small;">xx-small text.</span></li>
</ul>
<h2>Style =
font-family</h2>
<ul>
<li>Here is
some <span style="font-family: Arial">Arial text.</span></li>
<li>Here is
some <span style="font-family: 'Courier New'">Courier text.</span></li>
<li>Here is
some <span style="font-family: Verdana">Verdana text.</span></li>
</ul>
<h2>Style =
font-style</h2>
<ul>
<li>Here is
some <span style="font-style: inherit">inherit text.</span></li>
<li>Here is
some <span style="font-style: initial;">initial text.</span></li>
<li>Here is
some <span style="font-style: italic;">italic text.</span></li>
<li>Here is
some <span style="font-style: normal;">normal text.</span></li>
<li>Here is
some <span style="font-style: oblique;">oblique text.</span></li>
<li>Here is
some <span style="font-style: unset;">unset text.</span></li>
</ul>
<h2>Style =
text-decoration</h2>
<ul>
<li>Here is
some <span style="text-decoration: dashed;">dashed text.</span></li>
<li>Here is
some <span style="text-decoration: dotted;">dotted text.</span></li>
<li>Here is
some <span style="text-decoration: double;">double text.</span></li>
<li>Here is
some <span style="text-decoration: inherit;">inherit text.</span></li>
<li>Here is
some <span style="text-decoration: initial;">initial text.</span></li>
<li>Here is
some <span style="text-decoration: line-through;">line-through text.</span></li>
<li>Here is
some <span style="text-decoration: none;">none text.</span></li>
<li>Here is
some <span style="text-decoration: overline;">overline text.</span></li>
<li>Here is
some <span style="text-decoration: solid;">solid text.</span></li>
<li>Here is
some <span style="text-decoration: underline;">underline text.</span></li>
<li>Here is
some <span style="text-decoration: unset;">unset text.</span></li>
<li>Here is
some <span style="text-decoration: wavy;">wavy text.</span></li>
</ul>
<h2>Style =
font-weight</h2>
<ul>
<li>Here is
some <span style="font-weight: 100;"> weight 100.</span></li>
<li>Here is
some <span style="font-weight: 500;"> weight 500.</span></li>
<li>Here is
some <span style="font-weight: 900;"> weight 900.</span></li>
<li>Here is
some <span style="font-weight: bold;"> weight bold.</span></li>
<li>Here is
some <span style="font-weight: bolder;"> weight bolder.</span></li>
<li>etc... </li>
</ul>
</body>
</html>
Postoji još mnogo stilova kako za font
tako i za mnoštvo drugih korisnih stvari. Međutim, po pitanju korišćenja isti
trebate testirati tj. proveriti vaše stilove na različitim Internet čitačima.
Kada pokrenete ovu veb stranicu na Microsoft Edge dobićete sledeći rezultat:
Styles
Style = font
- Here
is some caption
text.
- Here
is some initial text.
- Here
is some italic text.
- Here
is some large text.
- Here
is some larger text.
- Here
is some message-box
text.
- Here
is some normal text.
- Here
is some small text.
- Here
is some small-caps text.
- Here
is some small-caption
text.
- Here
is some smaller text.
- Here
is some status-bar
text.
- Here
is some unset text.
- Here
is some xx-small text.
- Here
is some x-small text.
- Here
is some xx-large text.
- Here
is some xx-small text.
Style = font-family
- Here
is some Arial text.
- Here
is some Courier text.
- Here
is some Verdana text.
Style = font-style
- Here
is some inherit text.
- Here
is some initial text.
- Here
is some italic text.
- Here
is some normal text.
- Here
is some oblique text.
- Here
is some unset text.
Style = text-decoration
- Here
is some dashed text.
- Here
is some dotted text.
- Here
is some double text.
- Here
is some inherit text.
- Here
is some initial text.
- Here
is some
line-through text. - Here
is some none text.
- Here
is some overline text.
- Here
is some solid text.
- Here
is some underline text.
- Here
is some unset text.
- Here
is some wavy text.
Style = font-weight
- Here
is some weight 100.
- Here
is some weight 500.
- Here
is some weight 900.
- Here
is some weight bold.
- Here
is some weight bolder.
- etc...
Kako sve ovo izgleda možete pogledati i na
video-u:
( HTML5 & CSS3 - #5. Font Styles )
Formatiranje predefinisanog teksta
Postoji još nekoliko tagova koje veb
developeri koriste kao tagove za predefinisani tekst koji ćete stavljati na
vašu veb stranicu poput kontakt informacija, citata sa drugih stranica ili jednostavno
da znate prelomiti tekst ili podvući horizontalnu liniju između dva pasusa
teksta. Imajte na umu da bi ste odradili sledeći primer neophodno je da
koristite Lorem Ipsum Dummy tekst. U desnom donjem paragrafu sajta, unesete
broj koliko paragrafa želite i pritisnete Generate Lorem Ipsum. Naravno da
možete sve kopirati sa ovog posta, ali poenta je da to sami odradite i na taj
način učite. Kad tipkate neke stvari vam jednostavno na prirodan način ostaju u
trajnom pamćenju. Mislim da je za ovaj post dosta posla.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Predefined
texts</title>
</head>
<body>
<h1>Predefined
texts</h1>
<ul><li><h4>If you
write poems or ASCII art use <pre> tag.</h4></li></ul>
<pre>
(\(\
(-.-)
o_(")(")
</pre>
<ul><li><h4>If you
want to use a section that is quoted from another source; use <blockquote> tag.</h4></li></ul>
<blockquote cite="https://en.wikipedia.org/wiki/Bill_Gates">
William Henry Gates III (born October 28,
1955) is an American business magnate, software developer, investor, and
philanthropist. He is best known as the co-founder of Microsoft
Corporation.[2][3] During his career at Microsoft, Gates held the positions of
chairman, chief executive officer (CEO), president and chief software
architect, while also being the largest individual shareholder until May 2014.
He is one of the best-known entrepreneurs and pioneers of the microcomputer
revolution of the 1970s and 1980s.
</blockquote>
<ul><li><h4>If you
want to create a singele break line in the text, use <br /> tag.</h4></li></ul>
<p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit.<br /> Maecenas sed felis sed velit
blandit mollis non vitae lacus.<br /> Donec in risus felis.<br />Nam feugiat, sapien vitae aliquet placerat, arcu dui sollicitudin
tellus, in congue orci dui in ligula.<br /> In hac habitasse platea dictumst. Sed tincidunt nisi in cursus
euismod.<br /> Nullam fringilla tempor iaculis.<br /> Mauris suscipit velit at enim
condimentum, sit amet rutrum orci viverra.</p>
<ul><li><h4>If you
want to create a horizontal line between texts, use <hr /> tag.</h4></li></ul>
<p>Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Nam in sodales neque. In
diam augue, vehicula quis ultricies eu, aliquet vel nulla. Praesent eu nulla
tristique, suscipit ipsum sollicitudin, rhoncus sapien. Donec hendrerit sapien
tempor, tristique eros molestie, fringilla est. Fusce ultricies auctor turpis
sagittis sodales. Aliquam erat volutpat. Fusce volutpat velit libero, et
porttitor eros dapibus ac. Phasellus ut viverra mauris, id placerat justo.
Donec imperdiet ut augue sed scelerisque. Aliquam mattis dolor et sapien
elementum, quis accumsan leo egestas.</p>
<hr />
<p>Phasellus
vestibulum vulputate fermentum. Donec imperdiet tempus euismod. Nam sed sapien
pharetra, pretium urna eu, vulputate sapien. Curabitur suscipit pharetra
elementum. Suspendisse potenti. Quisque eu urna sollicitudin, laoreet dolor
nec, congue risus. Nulla commodo elementum tortor, scelerisque aliquam metus
pharetra ultrices. Duis eget enim ut ipsum porta porta. Fusce tellus sapien,
tempus congue fermentum sit amet, malesuada molestie libero.</p>
<ul><li><h4>If you
write the address or contact info or your web site, use <address> tag.</h4></li></ul>
<address>
Written by <a href="https://www.manuelradovanovic.com">Manuel Radovanovic</a>.<br>
Visit us at:<br>
www.manuelradovanovic.com<br>
Belgrade 11000, Some Street<br>
Serbia, Europe
</address>
</body>
</html>
Kad pokrenete ovu veb stranicu dobićete
sledeći rezultat.
Predefined texts
·
If you write poems or
ASCII art use <pre> tag.
(\(\
(-.-)
o_(")(")
·
If you want to use a
section that is quoted from another source; use <blockquote> tag.
William Henry Gates III (born
October 28, 1955) is an American business magnate, software developer,
investor, and philanthropist. He is best known as the co-founder of Microsoft
Corporation.[2][3] During his career at Microsoft, Gates held the positions of
chairman, chief executive officer (CEO), president and chief software
architect, while also being the largest individual shareholder until May 2014.
He is one of the best-known entrepreneurs and pioneers of the microcomputer
revolution of the 1970s and 1980s.
·
If you want to create
a singele break line in the text, use <br /> tag.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit.Maecenas sed felis sed velit blandit mollis non vitae lacus.
Donec in risus felis.
Nam feugiat, sapien vitae aliquet placerat, arcu dui sollicitudin tellus, in congue orci dui in ligula.
In hac habitasse platea dictumst. Sed tincidunt nisi in cursus euismod.
Nullam fringilla tempor iaculis.
Mauris suscipit velit at enim condimentum, sit amet rutrum orci viverra.
·
If you want to create
a horizontal line between texts, use <hr /> tag.
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam in sodales neque. In diam augue, vehicula quis ultricies eu, aliquet
vel nulla. Praesent eu nulla tristique, suscipit ipsum sollicitudin, rhoncus
sapien. Donec hendrerit sapien tempor, tristique eros molestie, fringilla est.
Fusce ultricies auctor turpis sagittis sodales. Aliquam erat volutpat. Fusce
volutpat velit libero, et porttitor eros dapibus ac. Phasellus ut viverra
mauris, id placerat justo. Donec imperdiet ut augue sed scelerisque. Aliquam
mattis dolor et sapien elementum, quis accumsan leo egestas.
·
If you write the
address or contact info or your web site, use <address> tag.
Written by Manuel Radovanovic.Visit us at:
www.manuelradovanovic.com
Belgrade 11000, Some Street
Serbia, Europe
Kako sve ovo izgleda možete pogledati i na
video-u:
( HTML5 & CSS3 - #6. Predefined Texts )
Nema komentara:
Objavi komentar