[ccpw id="5"]

Veb SajtoviHyper Text Markup Language – HTML – novi korak

Hyper Text Markup Language – HTML – novi korak

-

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.

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.

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.

Poslednji postovi

Kako odabrati odgovarajući sto i stolicu za kompjuter?

Mnogo toga treba uzeti u obzir pri izboru kancelarijske stolice, od materijala, podrške i prilagodljivosti do ukupnog stila i cene. Odabir kancelarijske stolice verovatno nije nešto...

Software and Data Engineering – novina u obrazovanju

Još jedna sjajna sagovornica, Marina Marjanović Jakovljević, reći će nam ovom prilikom nešto više o novom smeru na fakultetu posvećenom Data Science, odnosno – nauci...

Fabrika znanja – ITgirls u Podgorici!

Regionalna IT manifestacija biće održana sedmi put za redom u Podgorici, na Univerzitetu Donja Gorica, između 10. i 11. oktobra. Najveći IT događaj u regionu okupiće...

Calling ITgirls: Prvi Beyond Code meetup u Beogradu

Prvi Beyond Code meetup biće održan u sredu, 6. septembra sa početkom u 18h u prostorijama beogradskog Startit Centra. Nakon Amerike, serija ovih događaja sledi...

Popularno