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>The Semantic HTML Tags</title>
</head>
<body>
<h1>The Semantic 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, 2023 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 kôd 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 HTML5 kod nema potrebe nešto posebno objašnjavati, videćete rezultate. Zato prvo pogledajte celi HTML5 kôd.
<!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>
</br>
<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, 2023 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 novu datoteku i nazovite je lesson5.html Unesite sledeći kôd.
<!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:
Font 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://www.manuelradovanovic.com/p/o-autoru_26.html">
I am Manuel Radovanović, a software engineer from Belgrade, Serbia.
A software engineer is an expert who applies engineering principles and
approaches to the development and maintenance of software systems.
</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.
I am Manuel Radovanović, a software engineer from Belgrade, Serbia. A software engineer is an expert who applies engineering principles and
approaches to the development and maintenance of software systems.
· 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