Uvod u izradu web stranica

U moje vrijeme (OK, Prije moj dan), Struka web developer je niska jedan. To rangiran ispod štene mrzitelj ali iznad Yankees ventilator na skali od profesionalne časti. Zbog sve oznake i transparentnost odstojnim slike smo koristili, smo bili viđeni kao sirove hakera bez osjećaja estetike.

Dobro, možemo još uvijek nedostaje u estetskom smislu, ali kao Web razvio tako je ispovijest web developer. Ovih dana postoji bezbroj alati koje možete koristiti kako bi dobro napisano, standardima u skladu, i lijepa (OK, možda ne toliko posljednja) Web stranice. Većina velikih web stranice koje koriste i danas (besraman čep: uključujući i ovaj) izgrađene su pomoću tih alata.

Naš jato od alata na kraju preglednika su nam dopustili da stvaraju stvari na webu koje su bile nezamislive samo 10 godina, kao što su bezbroj društvene mreže koja tvrdi da je najbolji način da gubiti vrijeme, “vruć” tehnološke startupe koji tvrde da su promijenili nešto što je već učinio tisuću puta, i Angry Birds klonovi tvrdeći da se samo malo lošiji od originala. Sve na webu. Dakle, možda ti alati nisu otišli na najveći od koristi.

Pa što su ovi nevjerojatni alati Razgovarao sam o tome? Vodeća put bili (iskreno nevjerojatna) jezici zovu HTML5, CSS3, i JavaScript, što sam nadimak 3 konjanici webocalypse. Evo pogled na svaku od njih:

HTML

HTML (dobro poznat kao Hypertext Markup Language; možete vidjeti zašto su ljudi koji ne žele izgledati loše samo koristiti akronim) je jezik koji se koristi za nokautirati web stranice. Desnim klikom na ovu stranicu i kliknite “View Source”. To je HTML da je ova stranica koristi.

U suštini, HTML je hrpa tagovi, koji browser interpretira i izlaže. Na primjer, pogled na ovaj HTML kod:

<p>Ne znam o vama, ali mi se sviđa tipke.</p>

<br>

<dugme>Klikni me!</dugme>

To HTML kod je tekst zamotan u stavku (the <p> tag počinje stavak, the </p> tag završava odlomak.) Ima prijelom retka (the <br>) a zatim gumb možete kliknuti na svoje sveopće zadovoljstvo. Vaš preglednik će ga nokautirati na zaslonu za vas.

Tako da je sve dobro i dobro. No, ako nemam ništa, ali HTML, you get a webpage that looks like it came straight out of the 1990’s. Nije mnogo dobra izašao iz tog desetljeća svejedno (frizura, glazba, i sl.) Ali čekajte! Ima ih više!

CSS

Još jedan akronim. Ljeto. CSS je kratica za Cascading Style Sheets, koji je malo pogrešan naziv jer zapravo ne kaskadni (Što god to značilo… to je računalni kod, Ne vodopad!) CSS je jezik koji se koristi za stil web stranice. Ovo, suviše, tumače pregledniku.

CSS i HTML zajedno rade – HTML čini izgleda stranice, CSS mu daje svoj štih. Zamislite gradi kuću: HTML pruža sivilo, ali potreban drveni okvir, CSS dodaje neonske boje i igra riječima namještaj.

CSS je prilično jednostavan jezik: za određene oznake HTML (kao stavka), možete odrediti vrijednosti za različite stil klase. Vaš preglednik će pročitati CSS i primijeniti ga na svim odgovarajućim HTML tagova. Na primjer:

p {

boja: crven;

font-size: 16PX;

}

Dakle, svaki stavak (stvari u HTML <p> tagovi) će imati crven font i biti 16 piksela u veličini. Ako ste primjetili, ovo su neke od istih stilova koje možete koristiti u Microsoft Word i drugih aplikacija.

Tako sada svoje web stranice su postavljeni i oni izgledaju prilično. Ali ovdje je stvar: to je sve što im je činiti. Oni samo sjediti i izgledati lijepo. Koji je super i sve, ali korisnici interneta žele više. Žele ukrasni animacije. Žele pop-up prozora (OK, Možda su to učinili još u 2002, ali sam odstupiti.) Žele gumbe koji će učiniti stvari kada kliknete na njih.

O tom zadnjem – to je problem. Možete napraviti <dugme> u HTML, i možete kliknuti ga cijeli tjedan, , ali to ne čine ništa u skorije vrijeme. Ako želite na gumb za, oh ne znam, premjestiti tvoj slon preko ekrana i napasti nešto, then you need something more.

JavaScript

JavaScript je ne Akronim, Ako ste se pitali. Nazvali su ga JavaScript, jer je to izgledalo u programskom jeziku zove Java, što je čudno jer to ne. U svakom slučaju, JavaScript je a proper programming language that causes all the dynamic effects vidiš na webu.

Kao i bilo kojem programskom jeziku, JavaScript je niz naredbi koje čine varijable i koriste funkcije. Kul dio o JavaScriptu (dobro, as cool as a programming language can be) is that you can access those HTML elements (like paragraphs and buttons) and CSS styles (like font color and size) and change them. Look at this code:

var paragraph = $(‘p’);

paragraph.css(‘color’,’blue’);

This JavaScript code will find all the paragraphs on the page – the $ sign tells the browser to find all matching elements, and the ‘p’ means it needs to choose paragraphs (remember the <p> element from HTML?) Then you can store the paragraphs to a variable, and the command the browser to change their color CSS style to plav.

Ono što je meni zanimljivo (opet, ovo je sve sa stajališta “webdev”) je kako elegantno tri jezika raditi zajedno. Ta posljednja linija JavaScript u interakciji sa stranicom HTML i CSS se koristi za to stil. Nije baš da su ti jezici su samo različiti dijelovi iste stvari – oni su jedno te isto, različite strane iste nevjerojatna stroj.

Zvuk fascinantno? Mislim da to ne. To je samo dio ljepote webu.