Hyper Text Markup Language – HTML – novi korak

Hyper Text Markup Language – HTML – novi korak

Hello September! Hello HTML-ovci! 🙂 

 

Ovaj mesec nam je od prvih školskih dana ostao upamćen kao mesec školstva, mesec učenja. Dok smo bili mlađi, dolazak septembra bi nas vraćao u realnost naših tadašnjih obaveza, prva nedelja škole, hrpa knjiga, nove tempere, bojice i novo šarenilo među sveskama. Verovatno mi je zbog toga zapravo idealan za nastavak mog učenja sa vama. Još ako uzmemo u obzir da je vreme odmora sada već iza nas, hajde da polako vratimo i pripremimo naš mozak, naše vreme na učenje i rad. Hajde da zajedno predjemo još jedan stepenik u HTML-u.

 

Da bi smo uspešno prešli na sledeći stepenik, potrebno je da se vratimo na prethodni post. HTML – korak dalje. U prethodnom tekstu naučili smo da napravimo svoju prvu veb stranicu, koja je izgledala ovako:

 

html

 

Danas možemo probati da tu stranicu malo ulepšamo.

Kada ponovimo postupak koji se nalazi na fotografiji gore i sačuvamo fajl, otvorimo ga u veb pretraživaču, videcećemo u glavnom prozoru: „Zdravo, svete!” I iznad: „Moja prva strana”.

Za početak, možemo da promenimo ikonicu, da umesto papira koji nam sada stoji, stavimo nešto drugo.

 

  • Kako promeniti ikonicu? 

 

 html1

 

N1

*U tekst editoru paragraf je namerno izostavljen.

 

<link rel=”icon” href=”https://cdn3.iconfinder.com/data/icons/tango-icon-library/48/face-smile-128.png” />

rel – skraćenica od relationship – srodstvo (atribut)

icon – sa kojim se tagom povezuje link tag (ikonica se nalazi ispred “Moja prva strana” i trenutno nam je to papir).

href h je skraćenica od Hyper Text, ref – references, upućuje na url gde se nalazi naša ikonica.

Link tag se ne zatvara standardnim načinom, odnosno, ne dodaje se link na kraju, već samo /­­­>

Ikonicu možemo pronaći uz pomoć pretraživača. Besplatne su one koje nisu prešarane. Iconfinder – odaberemo željenu i prekopiramo je između navodnika posle href atributa.

Kada sačuvamo i otvorimo u pretraživaču, ikonica ispred “Moja prva strana!” bi trebalo biti ona koju ste izabrali.

I1


 

  • NASLOVI  (h1, h2, h3)

 

 Postoji šest nivoa naslova koji mogu da se pojave u telu dokumenata, ali su najčešće dovoljna samo tri. Za glavni naslov koristi se tag H1, za njegov podnaslov tag H2, a za njegov podnaslov tag H3.

 

 

html2

 

N2

Moja ideja za naslove je ITGIRLS, vaša će svakako biti drugačija. Mada, možete pisati i o nama, nama to neće smetati. 🙂

Kada otvorite stranicu u pretraživaču, pojaviće se vaši naslovi.

I2


 

  • Formatiranje teksta  (b, I, u small, strong)

 

Postoji više tagova kojima može da se formatira tekst, ja ću navesti neke od njih.

tabela

 

 

 

 


To bi u kodovima izgledalo ovako:html3

N3

 

Kada ponovimo postupak otvaranja u pretraživaču, dobićemo rezultat kao u tabeli – tekst sa odabranim tagom.

I3

Veoma lako, veoma zanimljivo, rekla bih da ćete se ovde složiti sa mnom 🙂

 


 

  • Lista ( •, 1, 2, 3…)

 

Za nabrajanje stavki možemo da koristimo listu. Imamo dva tipa liste:

-numerisana i

-nenumerisana lista.

Numerisana se označava tagom OL, (engl. Ordered List). Ovaj tag ima svoj zatvoreni tag i između njih se nalaze elementi LI. Svaki tag LI odgovara jednoj stavki liste, pa će se unutar elemenata OL naći onoliko tagova LI koliko ima stavki u listi. Zatvoreni tag LI može da se izostavi. Ovaj princip organizacije liste je isti i za nenumerisane liste. Nenumerisana lista počinje otvorenim tagom UL (engl. Unordered List), a završava odgovarajućim zatvorenim tagom.

Za numerisane postoji nekoliko različitih načina prikaza nabrajanja koji se definišu CSS stilom (o čemu ćemo opširnije kasnije) brojevi, rimski brojevi, mala slova abecede, velika slova abecede. Nenumerisane mogu da budu obeležene kružićima i kvadratićima.

 

html4

N4

Kada otvorite stranicu u vešem pretraživaču, dobićete numerisane i nenumerisane strane.

I4


 

Dakle, naučili smo da samostalno napravimo stranu, promenimo ikonicu, dodamo naslove, formatiramo naš tekst i napravimo liste u HTML-u. 

*Koristila sam Notepad ++ editor, koji je najednostavniji za početnike.

Mislim da su ove četiri stavke sasvim dovoljne za ovaj post.

 

U sledećem postu će naša stranica biti još bogatija. Iskreno se nadam da sam uspela da sve objasnim na najlakši mogući način i da vam HTML za sada ne predstavlja veliki problem. Ako postoje neke nejasnoće, slobodno možete pisati u komentaru ispod teksta. I dalje sam tu da ispratim sve vaše kritike, kako pozitivne, tako i negativne.

Do sledećeg čitanja, Nooberka vas pozdravlja!

 


 

Uživajte u svakom novom osmehu koji se na vašem licu pojavi kao rezulatat uspeha.

Ređajte vaše uspehe!

Sve ono što vam sada deluje veliko i nedostižno, jednog dana će izazvati potpuno drugačiji osmeh.

Usudite se da potražite pomoć kada vam je neophodna i budite tu kada se pomoć od vas očekujte.

Neka nam cilj ne bude samo naš uspeh, hajde da zajednički uspeh, bude naš zajednički cilj! 🙂