Ib tug qhia txog kev loj hlob mus rau qhov web

Rov qab nyob rau hauv kuv hnub (OK, ua ntej kuv hnub), lub txoj hauj lwm ntawm web tsim yog ib tug tsawg ib. Nws kab sab hauv qab no tus aub hater tiam sis saum toj no Yankees kiv cua rau lub scale ntawm kws Honor. Vim hais tias ntawm tag nrho cov cim npe thiab transparency LUB TOG RAJ dluab peb siv, peb twb pom li nyoos hackers uas tsis muaj kev nkag siab ntawm aesthetics.

Zoo, tej zaum peb yuav tseem yuav tu ncua nyob rau hauv zoo nkauj siab, tab sis raws li lub Web tau tsim thiaj li muaj txoj hauj lwm ntawm web tsim. Hnub no yeej muaj ntau ntau cov cuab yeej peb yuav siv kom zoo-sau, cov qauv-conforming, thiab zoo nkauj (OK, tej zaum tsis hais tias lub xeem ib tug) web pages. Feem ntau ntawm cov kuj zoo kawg thiab cov websites uas koj siv hnub no (tsis paub txaj muag plug: xws li no ib) yog tsa lub Koom Txoos uas siv cov cuab yeej.

Peb bevy ntawm cov cuab yeej rau qhov browser tus kawg tau pub rau peb kom peb tsim tau tej uas nyob hauv web uas twb xav tsis tau xwb 10 xyoo dhau los, xws li sauv rov qab kev tes hauj lwm thov mus yuav qhov zoo tshaj plaws txoj kev uas yuav nkim koj lub sij hawm, “kub” tech startups thov kom muaj revolutionized yam dab tsi uas yog twb tau ua ib txhiab lub sij hawm, thiab npau taws noog clones thov kom tau tsuas yog me ntsis zuj zus tshaj rau ntawm thawj. Tag nrho cov hauv web. Yog li ntawd, tej zaum cov cuab yeej tsis tau ploj mus rau qhov zoo tshaj plaws ntawm kev siv.

Yog li ntawd, yog dab tsi no amazing cov cuab yeej Kuv twb tau tham txog? Tsis txhob pib txoj kev tau (frankly amazing) hom lus hu ua HTML5, CSS3, thiab JavaScript, uas kuv lub nickname 3 horsemen ntawm lub webocalypse. Ntawm no yog ib tug saib txhua tus:

HTML

HTML (kom lub npe hu ua HyperText Markup Lus; koj yuav saib tau yog vim li cas cov neeg uas tsis xav mus nrhiav phem cia li siv cov acronym) yog hom lus siv los nteg tawm web pages. Nias sab xis rau ntawm nplooj no thiab nias “View Source”. Qhov ntawd yog qhov HTML tias nplooj ntawv no siv.

Tseem zoo, HTML yog ib pawg ntawm cim npe, uas qhov browser interprets thiab lays tawm. Piv txwv li, saib no HTML code:

<p>Kuv tsis paub txog koj, tiam sis kuv nyiam nias cov nyees khawm.</p>

<br>

<khawm>Nyem kuv!</khawm>

Qhov no HTML code tau lus qhwv nyob rau hauv ib pawg lus (tus <p> tag pib ib pawg lus, tus </p> tag xaus ib pawg lus.) Muaj ib tug kab so (tus <br>) thiab ces ib tug khawm koj yuav nias rau koj lub siab lub ntsiab lus. Koj tus browser yuav nteg nws tawm nyob rau qhov kev tshuaj ntsuam rau koj.

Thiaj li hais tias tag nrho cov zoo thiab zoo. Tiam sis yog tias koj muaj tsis muaj dab tsi tab sis HTML, you get a webpage that looks like it came straight out of the 1990’s. Tsis ntau zoo tuaj tawm ntawm hais tias xyoo caum nkawv (hairstyles, music, lwm yam) Tiam sis tos! Muaj ntau!

CSS

Lwm acronym. Lub caij ntuj sov. CSS stands rau Cascading Style Cov ntawv qhia, uas yog ib tug me ntsis ntawm ib tug misnomer txij li thaum lawv tsis cascade (txawm hais tias txhais tau tias… nws yog computer code, tsis yog ib tug dej tsaws tsag!) CSS yog hom lus siv los style webpages. Qhov no, heev, yog txhais los ntawm koj tus browser.

CSS thiab ua hauj lwm ua ke HTML – HTML ua rau cov nplooj ntawv lub layout, CSS muab nws nws flair. Xav txog tej yam nws tsim tau ib lub tsev: HTML muab lub drab tab sis tsim nyog ntoo moj khaum, CSS ntxiv lub Neon xim thiab quirky rooj tog.

CSS yog ib tug zoo nkauj ncaj lus: rau ib tug tej HTML tag (zoo li ib pawg lus), koj yuav tau qhia kom meej nuj nqis no rau ntau style chav kawm. Koj tus browser yuav nyeem CSS thiab thov nws mus rau tag nrho lub sib xws HTML cim npe. Piv txwv li:

p {

xim: liab;

koos pis-loj: 16px;

}

Yog li ntawd, txhua txhua pawg lus (khoom nyob rau hauv cov HTML <p> cim npe) yuav muaj liab koos pis thiab yuav 16 pixels nyob rau hauv loj. Yog hais tias koj pom, cov no yog ib co ntawm cov tib cwj pwm koj yuav siv tau rau hauv Microsoft Word thiab lwm daim ntawv sau npe.

Yog li tam sim no koj webpages yog pw tawm thiab lawv saib zoo nkauj. Tab sis ntawm no yog qhov tshaj plaws: hais tias txhua yam lawv ua. Lawv cia li zaum muaj thiab saib zoo nkauj. Uas yog ib qhov zoo thiab tag nrho cov, tab sis cov neeg siv ntawm lub web xav ntau. Lawv xav ib qho zoo nkauj tas lauv. Lawv xav pop-ce (OK, tej zaum lawv ua li ntawd rov qab rau hauv 2002, tiam sis kuv digress.) Lawv xav nyees khawm uas yuav ua khoom thaum koj nias rau lawv.

Txog hais tias lub xeem ib tug – hais tias yog ib qhov teeb meem. Koj yuav ua tau ib tug <khawm> nyob rau hauv HTML, thiab koj yuav tau tag nrho cov nias nws lub lim tiam, tab sis nws tsis ua dab tsi txhua lub sij hawm sai sai no. Yog hais tias koj xav tau lub khawm kom, au kuv tsis paub, txav koj cov ntxhw thoob plaws kev tshuaj ntsuam thiab ua tawm tsam ib yam dab tsi, then you need something more.

JavaScript

JavaScript yog tsis ib qho acronym, yog hais tias koj twb wondering. Lawv hu ua nws JavaScript vim hais tias nws ntsia zoo li lub programming lus hu ua Java, uas yog coj txawv txawv ua rau nws tsis. Nkawv, JavaScript yog a proper programming language that causes all the dynamic effects koj saib hauv web.

Like any programming language, JavaScript yog a series of commands that make variables and use functions. The cool part about JavaScript (zoo, 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 – tus $ sign tells the browser to find all matching elements, and the ‘p’ txhais tau hais tias nws yuav tsum tau mus xaiv nqe lus (nco qab ntsoov tus <p> keeb los ntawm HTML?) Ces koj yuav khaws lub nqe lus rau ib tug variable, and the command the browser to change their color CSS style to xiav.

Yuav ua li cas kuv nrhiav interesting (dua, qhov no yog tag nrho cov los ntawm lub viewpoint ntawm ib tug “webdev”) yog yuav ua li cas elegantly peb hom lus ua hauj lwm ua ke. Hais tias lub xeem kab ntawm JavaScript nrog lub sab lub HTML thiab lub CSS siv los style nws. Nws tsis zoo li cov lus yog cia li txawv Cheebtsam ntawm ib yam li – lawv nyob nraum ib tug thiab tib, txawv sab ntawm tib amazing tshuab.

Sound fascinating? Kuv xav tias nws yeej. Nov yog ib feem ntawm qhov kev zoo nkauj ntawm lub web.