Hyper Text Markup Language – HTML – korak dalje

Hyper Text Markup Language – HTML – korak dalje

Ako se po jutru dan poznaje, sasvim je sigurno da će meni ovaj dan (još jedan u nizu) biti u znaku HTML-a. Iskreno se nadam da je i kod vas slična situacija. 🙂 Pa, dobro dan, HTML-ovci! 🙂

Skoro da sam ubeđena da ima vas koji učite sa mnom i proveravate da li je moj novi post već na blogu. Tj. da ima vas koji mi se niste javili putem maila, u komentarima ispod teksta, na stranici, ali me pratite i učite zajedno sa mnom. 🙂  Javite se da druženje nastavimo i van ovog posta, ja vas očekujem. Tu sam da sa vama podelim sve što ne uspem da uglavim na ovoj strani.

Moj cilj i jeste da nekoga motivišem na ovaj novi izazov, da nekome ko je na početku, olakšam i budem tu umesto onog „next” sa kojim se svi mi bar pri instalaciji susrećemo. Ako sam iz svakog posta uspela da nekome prenesem bar jedan novi pojam i objašnjenje istog, onda sam na dobrom putu, a taj put može i mora biti samo bolji 🙂

Hajde da ga zajedno učinimo boljim!

U tekstu HTML sam pisala upravo o HTML-u koji je tema i ovog posta. A koji je zapravo naš neizostavni deo. Neka ovo bude naš prvi korak u svetu programiranja. Jednostavan je i brzo se uči. Naravno, za nas koji nismo imali dodirnih tačaka sa nečim sličnim, ovo može izgledati zastrašujuće teško, u većini slučajeva čak i nemoguće. Zapravo, uopšte nije tako. Sve se može razumeti, koliko god to nemoguće na prvi pogled izgledalo.

Da vam pošteno kažem, pre početka ozbiljnijeg rada, za HTML sam jedino čula da postoji. To je bila moja jedina informacija o njemu. Zauzeo je prvo mesto na spisku stvari (vezanih za programiranje) koje ću morati samostalno da naučim. Codecademy mi je omogućio najlakši način prepoznavanja i razumevanja HTML-a. Najpre sam par dana samo čitala o HTML-u po raznim stranicama, a onda sam jedno veče sela, izabrala editor i krenula da programiram.🙂

Pisanje koda je jedan od najvažnijih delova programiranja. Kodiranje i programiranje nisu sasvim iste stvari. Kôd – instrukcije za računar napisane u nekom programskom jeziku koji računar može da razume. Kôd se piše u tekstualni fajl pomoću tekst editora. S obzirom na to da je tekst editor naša najvažnija alatka, moramo izabrati onaj koji će nam u potpunosti odgovarati. Izbor je veliki. Sasvim sam sigurna da je svima nama Notepad poznat dosta dugo, ali Notepad ne sadrži nijednu od osnovnih funkcija koje bi svaki dobar tekst editor trebalo da ima. Znam, probala sam. I bila čak i ubeđena da je jedini koji postoji.

Osnovne funkcije dobrog editora su:

-Monofont,

-Isticanje sintakse,

-Kompletiranje teksta,

-Mogućnost proširivanja.

Ja ću navesti dva koja sam isprobala.

Na samom početku (nakon Notepad-a) najednostavnije mi je bilo da nastavim sa Notepad++ i on je dobra opcija ako koristite Windows. Značenje ovih pluseva potiče od programskog jezika C++, kao što C++ liči na C, s tim što je bolji, tako i Notepad++ liči na Notepad, ali je bolji. Notepad++ je zbog svoje jednostavnosti izuzetno dobar za početnike. Besplatan je. Možete ga preuzeti ovde.

Sublime Text obiluje dodatnim modulima, lako se koristi, namenjen je za Windows, kao i za Linux. Takođe je dobar za početnike. Možete ga preuzeti ovde.

Možete isprobati oba, baš kao što sam i ja. Kucala sam kodove u Notepad-u++, zatim u Sublime Text-u, uočavajući sličnosti i razlike. Potpuno je svejedno za koji ćete se trenutno opredeliti, svakako ćete kasnije sami saznati koji vam najviše odgovara. Možda nijedan od ova dva, možda neki potpuno novi, to je na vama. Mada, trenutno nije ono što bi za sada trebalo da vam odvlači mnogo pažnje, ni da oduzima mnogo vremena. A naše vreme je svakako važno, moramo da programiramo. 🙂

Trenutno koristim Sublime Text, ali sam za Notepad++ još uvek sentimentalno vezana i često mu se vraćam, verovatno zbog toga što je moj prvi kod rođen u njemu.

Hajde da sada zajedno napravimo prvu stranu!

Dakle, instalacija editora po želji.

Za početak moramo da napravimo mesto u kome  ćemo kodove čuvati. Neka nam svi fajlovi za projekat budu u jednom folderu. Folderi se često nazivaju direktorijumi. Napravite na svom disku direktorijum, nazovite ga po svom izboru. Nov direktorijum se može napraviti pomoću čitača fajlova (Windows Explorer za Windows, Nautilus za Linux), zatim File → New Folder. U vašem direktorijumu napravite HTML fajl. Otvorite editor, napravite novi fajl. File → New.

Najbolji način za učenje je vežba. Kodove nemojte kopirati. To ostavite za kasnije. Sada vežbajte kucanjem. Zamislite da je ovo ispod moj editor i prekucajte u vašem tekst koji se nalazi ispod.

 

<html>

<head>

<title> Moja prva strana </title>

</head>

<body>

<p> Zdravo, svete! </p>

</body>

<html>

 

Sačuvajte fajl. Otvorite ga u veb pretraživaču tako da ga dva puta pritisnete u svom čitaču fajlova.

U glavnom prozoru bi trebalo da stoji: „Zdravo, svete!” I iznad: „Moja prva strana”.

Verovatno vam ovi kodovi ništa ne predstavljaju (ovde se iskljivo obraćam apsolutnim početnicima!)

Pa, da pojasnimo.

HTML se sastoji od elemanta.

-Element se sastoji od početne oznake, odnosno otvoreni od opcionog tela (engl.body) i od završne oznake odnosno zatvoreni tag.

-Tag je oznaka koja se piše uz sadržaj i kojom se sadržaj opisuje.

Svaki tag je zapisan izmedju znaka manje „<” I znaka veće „>”

-Otvoreni i zatvoreni tag se razlikuju samo po kosoj liniji „ /” koja se pojavljuje samo u zatvorenom tagu.

-Element  HEAD je zaglavlje, ili glava dokumenta. Glava sadrži informacije o veb stranici koje se na njoj ne prikazuju direktno. HEAD sadrži element naslova, odnosno <title>. On obaveštava veb pretraživač da je to naslov HTML stranice.

-<p> Je početna oznaka za element pasus. „Zdravo svete!“ Je sadržaj, odnosno telo. A </p> je završna oznaka.

-Telo (body) elementa može da sadrži i druge elemente, o tome ćemo kasnije.

Iiiii…

Napravili smo prvu veb stranicu. 🙂

Možete sami da isprobate sa nekim novim sadržajem. Pasus svakako može biti duži.

Nakon par pokušaja, sve ovo će delovati izuzetno jednostavno. Meni je pravljenje prve strane i celokupno tumačenje svega oduzelo malo više vremena. Sada to već izmamljuje osmeh.

Ovde bih se zaustavila. A u sledećem postu možemo zajedno „ulepšati” našu prvu stranu. Možemo dodati niz drugih elemenata: naslove, duže pasuse, liste, tabele, linkove, slike. Iz tog razloga, druženje zakazujem već za par dana. Sledeći post će se naći na blogu u kraćem vremenskom roku od ostalih.

Lakše je učiti zajedno, zar ne?

Jedna od najlepšiih stvari sa kojom ćete se susretati je osmeh na licu, odnosno osećaj zadovoljstva koji će se javiti prilikom svakog samostalnog uspešnog rada. Trenutno nas raduju sitnice. Kasnije će to biti neke mnogo veće stvari. Iskreno se nadam da će svaka ta „veća stvar” ili veći uspeh prouzrokovati u nama nešto slično ovoj početničkoj sreći kada smo uspeli da kompjuteru naredimo da nešto sam uradi 🙂

Uspeh je naučiti nove stvari, još veći uspeh je naučeno primeniti.

Vrednujte svaki vaš uspeh. Cenite vreme posvećeno radu. Ne odustajte onda kada sve ne ide onako kako ste planirali. Kada vam san ili neke druge obaveze odlažu započeto, radujte se novom danu ili slobodnom vremenu u kome ćete započeto završiti. Radujte se svakom druženju sa vašim laptopom, jer ono što nas raduje, najuspešnije nas vodi ka cilju.

Neka vaš cilj bude usavršavanje.

Budite bolji od sebe. Budite najbolji. 

Dozvolite sebi iznenađenje onim što ste uradili.

Iznenadite sebe savršenim rešenjem zadatka koji ste sebi zadali.

I osmeh, jer radite ono što vas ispunjava. 🙂