Për një kohë të gjatë për mua opsioni "shfaq burimi faqet" ishte e padobishme dhe jo interesante. Deri më tani, mësimi i HTML në Codecademy dhe dizajnimi i faqeve të mia të internetit nuk është rritur në hobi tim të ri. Këtu lindi pyetja: ku të gjeni raste reale dhe të huazoni zgjidhje interesante për "derrkucin" tuaj? Përgjigja ishte papritur e thjeshtë, si të gjitha gjërat gjeniale: shikoni kodin burimor të faqes në Google Chrome! Unë ndaj me ju gjetjet e mia modeste.
Nëse ju, si unë, sapo po hidhni hapat e parë në programimin HTML, do të ishte një ide e mirë të zbuloni se cili është kodi burimor i një faqeje.
Kodi burimor, i njohur gjithashtu si kodi i faqes HTML, është tekst në gjuhën e shënjimit të tekstit hiper (HTML). Ai përfshin përmbajtjen aktuale të faqes (tekst, tabela) dhe etiketat. Këto të fundit veprojnë si udhëzime për shfletuesin: si të shfaqni përmbajtjen, çfarë lloji formatimi të përdorni, ku të futni një hiperlink ose skedar media. Epo, për ne, programuesit fillestarë, kodi burimor është terreni më i mirë i trajnimit: ne gjejmë një faqe interesante dhe e spiunojmë atë, e ruajmë atë dhe përdorim fragmente të suksesshme. Si?
Gjeni faqen që ju pëlqen. Për shembull, unë isha i interesuar për hartimin e menusë së faqes. Kodi burimor i hapur në Shfletuesi i Google Chrome mund të bëhet në tre mënyra:
Ne u përballëm me detyrën e shikimit të kodit HTML të faqes në shfletues. Le të kalojmë në fazën më interesante.
Për të mësuar se si të krijoni faqe interneti, nuk mjafton të lexoni kodin HTML të dikujt tjetër. Ju duhet të luani me të, të eksperimentoni, të bëni ndryshime dhe të kontrolloni rezultatin. Ju madje mund të filloni duke përpiluar disa mostra të suksesshme. Si të modifikoni dhe ruani kodin burimor?
Opsioni 1. "Manualisht"
Pasi të kemi hapur kodin burimor të faqes, ne telefonojmë menyja e kontekstit dhe zgjidhni opsionin "Ruaj si" dhe ruajeni skedarin në HDD. Ne redaktojmë skedarin në Notepad ose Notepad, ruajmë ndryshimet dhe e hapim atë përmes shfletuesit. Rezultatet e ndryshimeve tona (të suksesshme dhe jo aq të suksesshme) do të pasqyrohen në dritaren e shfletuesit.
Opsioni 2. Për profesionistët
Kur "luan" me kodin burim çdo ditë, procesi i "ruaj - hap - ndrysho - ruaj - kontrollo" bëhet i lodhshëm. Për veten time, gjeta një zgjidhje në formën e instalimit të një shtojce për Google Chrome - Firebug Lite. Kjo ju lejon të redaktoni dhe ruani kodin burimor pa u larguar nga dritarja e shfletuesit.
Duke parë faqet e panumërta në internet, mund të hasni në ato që na pëlqejnë shumë. Menjëherë lindin një sërë pyetjesh. A është krijuar faqja duke përdorur kod të bërë në shtëpi ose ndonjë lloj CMS? Cilat janë të tijat Stilet CSS? Cilat janë meta etiketat e saj? Dhe kështu me radhë.
Ka shumë mjete që mund të përdoren për të nxjerrë informacione në lidhje me kodin e një faqe interneti. Por ne gjithmonë kemi në dorë butonin e djathtë të miut. Kjo është ajo që ne do të përdorim, duke përdorur faqen time si shembull.
Për të parë kodin burimor të faqes së faqes, duhet të vendosni miun mbi çdo zonë të faqes së internetit (përveç imazheve dhe lidhjeve). Pas kësaj, klikoni në butonin e djathtë të miut. Një dritare me disa opsione do të hapet para nesh (në shfletues të ndryshëm ato mund të ndryshojnë pak). Në shfletuesin Google Chrome, për shembull, këto janë komandat:
Duhet të klikojmë shikoni kodin e faqes, dhe kodi html i faqes së faqes do të hapet para nesh.
Pra, kodi i faqes Html është një listë e numëruar rreshtash, secila prej të cilave mbart informacione se si është krijuar kjo faqe. Për të mësuar shpejt të kuptoni këtë numër të madh shenjash dhe personazhe të veçanta, ju duhet të bëni dallimin midis seksioneve të ndryshme të kodit.
Për shembull, rreshtat e kodit brenda etiketës së kokës përmbajnë informacion për motorët e kërkimit dhe webmasterët. Ato nuk shfaqen në sit. Këtu mund të shihni se si fjalë kyçe Kjo faqe promovohet bazuar në mënyrën se si janë shkruar titulli dhe përshkrimi i saj. Këtu mund të gjeni edhe një lidhje, duke klikuar mbi të cilën do të mësojmë për familjen fontet e google përdorur në faqe.
Nëse faqja është krijuar në CMS WordPress ose Joomla, atëherë kjo do të jetë gjithashtu e dukshme këtu. Për shembull, kjo zonë shfaq informacion në lidhje me një temë të WordPress ose shabllon të faqes së internetit të Joomla. Mund ta shihni duke lexuar përmbajtjen e lidhjeve të theksuara me ngjyrë blu. Një lidhje tregon një shabllon të internetit.
Për shembull:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Do të shohim stilet e shkronjave CSS të faqes. Në këtë rast, përdoret fonti. Kjo mund të shihet këtu - font-family: 'Source Sans Pro'.
Kjo faqe është optimizuar duke përdorur shtojcën SEO Yoast. Kjo mund të shihet nga kjo pjesë e komentuar e kodit:
Kjo faqe është optimizuar me shtesën Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Të gjitha informacionet e përfshira brenda etiketës së trupit shfaqen nga shfletuesi në ekranin e monitorit. Këtu shohim kodin html të faqes, dhe në fund është kodi i skriptit Yandex Metrics. Ai është i rrethuar nga një etiketë e komentuar me tekstin:
/Yandex.Metrika sportel
Pasi të kemi bërë një analizë mjaft sipërfaqësore të kodit të faqes kryesore të faqes, mund të nxjerrim një përfundim se me cilat mjete është bërë kjo faqe. Ne pamë në të:
Tani parimi i analizës kodi html Faqja e faqes është mjaft e qartë. Nuk është aspak e nevojshme të mbani të hapur faqen që po kërkoni në shfletues. Ju mund ta ruani kodin e faqes në kompjuterin tuaj duke përdorur kombinimet e tasteve ctrl+a, ctrl+c, ctrl+v. Ngjitni atë në ndonjë redaktori i tekstit(mundësisht Notepad++) dhe ruajeni me shtesën html. Kështu, në çdo kohë mund ta studioni më thellë dhe të gjeni informacione më të dobishme për veten tuaj.
Shërbimi SendPulse është një mjet marketingu për krijimin e një baze abonimi dhe konvertimin e vizitorëve të rastësishëm në faqen tuaj të internetit në të rregullt. SendPulse kombinon në një platformë funksionet më të rëndësishme për tërheqjen dhe mbajtjen e klientëve:
● buletinet e postës elektronike,
● shtytje në internet,
● Postimet me SMS,
● SMTP,
● buletinet në Viber,
● dërgimi i mesazheve në facebook messenger.
Ditë të mbarë, të dashur lexues të blogut tim. Ndonjëherë ju gjeni ndonjë veçori të bukur në një faqe interneti dhe filloni të pyesni veten se si krijuesi arriti një efekt kaq interesant.
Rezulton se përgjigja është mjaft e thjeshtë. Dhe nëse keni disa aftësi, mund të grumbulloni shumë nga këto veçori dhe të krijoni uebsajtin tuaj unik në një kohë të shkurtër.
Sot do të flasim se si të hapni kodin e një faqeje, një elementi të caktuar dhe të mësojmë se si ta përdorni këtë aftësi për përfitimin tuaj.
Faqja ime është menduar për fillestarët dhe së pari do të doja të flisja shkurtimisht për faqet dhe kodin në përgjithësi.
Për të vizatuar një figurë, pastaj prerë atë në pjesë të vogla, shkruani kodin në mënyrë që shfletuesi të ribashkojë të gjithë elementët në një tërësi të vetme. A duket gjithçka shumë e ndërlikuar? Aspak, dhe nuk ka kuptim të pikëlloheni për këtë.
Kështu krijohen faqet e internetit me cilësi të lartë. Nëse dëshironi, përfshihuni në këtë çështje dhe studioni nëse nuk dëshironi, askush nuk mund t'ju detyrojë.
Do të them vetëm një gjë... nuk ka asgjë më të këndshme sesa të shohësh se si fjalët e pakuptueshme që ke shkruar shndërrohen në një tërësi të vetme dhe marrin jetë: lidhjet funksionojnë, butonat lëvizin, fotot lëvizin, teksti zvarritet. Unë mendoj se e di se si u ndje Victor Frankenstein.
Kur filloni të kuptoni gjuhën sekrete dhe shihni se gjithçka është në të vërtetë shumë më e thjeshtë nga sa dukej fillimisht, nuk mund të mos besoni në forcat dhe aftësitë tuaja të trurit. Kjo është shumë e lezetshme.
Si bëhen faqet e internetit? Idealisht, së pari. Ai thjesht po pikturon një foto. Për shembull, siç tregohet në foton më poshtë. Tani për tani është vetëm një imazh, një fotografi. Asnjë lidhje nuk funksionon, kur klikoni nuk shkoni askund, nuk kryhet asnjë kërkim.
Sipas këtij vizatimi. Shikoni pamjen e ekranit më poshtë. Ju mund të mendoni se ky është një grup simbolesh qesharake dhe shumë komplekse. Në fakt, gjithçka nuk është aq e ndërlikuar, ekziston një algoritëm i caktuar.
Ka vetëm rreth 150 etiketa dhe secila prej tyre është përgjegjëse për një veprim specifik: lidhje, vizë ndarëse, bold, ngjyra, titull, etj. Kuptimi i tyre nuk është aq i vështirë nëse keni dëshirë dhe nuk e shqetësoni kohën.
Falë njohurive për këto atribute, ju mund të zgjidhni pothuajse çdo problem. Por secili zhvillues gjen mënyrat e veta për të arritur qëllimin.
Krijuesit me përvojë shohin menjëherë se si të arrijnë rezultate, ndërsa të tjerët duhet të mendojnë, të kërkojnë përgjigjen në artikuj ose në kodin burimor të konkurrentëve. Ata thjesht marrin pjesën e nevojshme nga një faqe e palës së tretë dhe e modifikojnë vetë. Kjo shkurton ndjeshëm procesin e punës.
Pak më vonë, unë do t'ju tregoj një shembull specifik.
Pra, më lejoni së pari t'ju tregoj se si të veproni nëse keni nevojë të zbuloni html-in e dikujt tjetër. Më pas do t'i shqyrtojmë të gjitha pyetjet e tjera në mënyrë më të detajuar.
Metoda që unë do të përshkruaj së pari është pak e ndërlikuar për fillestarët, por si hyrje, lexoni atë. Hapni faqen dhe klikoni në butonin e djathtë të miut. Zgjidhni "Ruaj si..."
Ruani të gjithë faqen e internetit. Siç mund ta shihni në pamjen e ekranit, unë kam shkarkuar tashmë gjithçka paraprakisht. Këtu kemi dy dosje.
Gjithçka që ju nevojitet është këtu. Çdo element. Nëse e kuptoni këtë, mund të merrni shpejt gjithçka që ju nevojitet. Por një detyrë e tillë po bëhet gjithnjë e më e pamundur. Nuk ka shkarkim. Çfarë duhet të bëni nëse është e ndaluar të kopjoni një faqe?
Siç mund ta keni vënë re tashmë, unë përdor më shpesh Google Chrome dhe të mësosh kodin e dikujt tjetër në këtë shfletues është po aq e lehtë sa të vrasësh dardha. Si në parim me çdo tjetër. Skema jo vetëm që do të jetë e ngjashme, por edhe identike. Hapni faqen kodin e së cilës duam të dimë dhe kliko me të djathtën kudo. Në dritaren që shfaqet, klikoni "Shiko kodin e faqes".
Një fletë kodi do të hapet në një dritare të re, e cila është mjaft e vështirë për një fillestar për t'u kuptuar. Por mos u shqetësoni para kohe.
Nëse duhet të dini kodin e vetëm një elementi, thjesht kaloni mbi të me miun dhe kliko me të djathtën. Zgjidhni një funksion tjetër të Chrome: "Shiko kodin e elementit".
Për shembull, mund të më interesojë se si është bërë logoja, duke përdorur një fotografi apo një gjuhë programimi? Në fund të fundit, ju mund të vizatoni një katror me të css ndihmë. Shumë ekspertë këshillojnë të shkruani sa më shumë informacion të jetë e mundur në kod. Si funksionojnë në faqet e njohura?
Tani janë shfaqur informacionet e nevojshme. html në krye, css në fund. Këto janë dy gjuhë. E para është përgjegjëse për komponentin e tekstit, dhe e dyta për dizajnin. Nëse nuk do të kishte CSS, atëherë do të duhet të specifikoni ngjyrën dhe madhësinë e shkronjave çdo herë. Për çdo faqe, kjo është shumë e gjatë. Por nëse nuk do të kishte html, atëherë nuk do të kishim tekste. E shpjegova përafërsisht, por në përgjithësi, kështu është.
Nga rruga, nëse jeni të interesuar se si funksionon këtu, mund të shikoni lidhjen në foton më poshtë. Këtu është përgjigja juaj.
Nëse ju pëlqen të punoni në mastikë, atëherë gjithçka do të jetë saktësisht e njëjtë. Hapni faqen dhe klikoni në butonin e djathtë të miut. "Kodi burimor i faqes" nëse dëshironi të shihni të gjithë kodin.
Kur rri pezull mbi një element, mund të hapësh kodin e tij.
Këtu të dhënat shfaqen në fund të ekranit, por përndryshe gjithçka është saktësisht e njëjtë.
Në shfletuesin Yandex, gjithçka është saktësisht e njëjtë si në dy opsionet e mëparshme, hapni faqen, kliko me të djathtën, shiko kodin e faqes.
Ne e vendosim kursorin mbi një element nëse duam të zbulojmë saktësisht kodin e tij.
Gjithçka shfaqet këtu saktësisht njësoj si në Chrome.
Dhe së fundi, Opera.
Meqë ra fjala, mund të keni vënë re se nuk keni nevojë të përdorni miun. Ekziston një shkurtore e shpejtë e tastierës për të hapur kodin dhe është e njëjtë për të gjithë shfletuesit: CTRL+U.
Për elementet: Ctrl+Shift+C.
Kështu duket rezultati.
Tani shikoni se si funksionon gjithçka. Ju gjeni një faqe dhe ju pëlqen vërtet një element. Për shembull, ky. Ju tashmë e dini se si të hapni kodin e elementit.
Tani kopjojeni.
Unë e përdor atë, ngjis këtë kod në një të ri skedar html, në etiketën e trupit (trupi në anglisht).
Tani le të shohim se si do të duket gjithçka në shfletues.
Gati. Në mënyrë që teksti të rreshtohet në skajet dhe të marrë një ngjyrë të gjelbër, duhet të lidhni css me këtë dokument dhe të kopjoni një kod tjetër nga faqja nga e cila e kopjuam këtë.
Nuk do ta bëj këtë tani. Kjo kërkon më shumë kohë: edhe e imja edhe e juaja. Mendoj se do t'i përshkruaj të gjitha detajet në publikimet e mia të ardhshme. Abonohuni në buletinin dhe jini të parët që do të dini kur shfaqet një artikull.
Nëse nuk mund ta duroni, por dëshironi të mësoni më shumë rreth html dhe css tani, atëherë unë tradicionalisht mund t'ju rekomandoj kurse trajnimi falas.
Këtu janë 33 mësime që do t'ju lejojnë të zotëroni html - « Kurs falas nga HTML" .
Dhe këtu është informacion i plotë në lidhje me css - "Kurs falas për CSS (45 mësime video!)" .
Tani ju dini pak më shumë. Ju uroj suksese në përpjekjet tuaja. Shihemi perseri!
Shkathtësi ndryshoni kodin burimor të faqes– një aftësi e dobishme për një përdorues të avancuar të internetit. Duke zëvendësuar kodin HTML, ju mund të ndryshoni faqen e hapur të internetit sipas dëshirës tuaj. Në këtë artikull do t'ju tregojmë si të ndryshoni kodin e faqes në Google Chrome. Sidoqoftë, në shfletuesit e tjerë gjithçka bëhet në mënyrë të ngjashme, kështu që nuk duhet të ketë ndonjë vështirësi.
Çdo faqe që hapni në shfletuesin tuaj ka kodin e vet në gjuhën e shënjimit HTML. Ky kod përfaqëson etiketat dhe tekstin. Etiketat janë etiketa unike që i tregojnë shfletuesit se si të shfaqë këtë ose atë pjesë të faqes. Teksti është përmbajtja e faqes, ajo që shikon përdoruesi. Gjithashtu, stilet CSS mund të lidhen me faqen, e cila vendoset pamjen elementet e faqes. te ndryshoni kodin burimor të faqes ju nuk keni nevojë të njihni plotësisht HTML dhe CSS, dhe së shpejti do ta shihni vetë.
Mund të ndryshoni të dhënat në sajt, të ndryshoni tekstin e mesazhit ose të bëni një pamje të rreme të ekranit. Ju lutemi vini re se të gjitha ndryshimet janë të dukshme vetëm për ju dhe do të zhduken kur të rifreskoni faqen. Gjithashtu të dhënat e ndryshuara nuk do të jenë reale. Për shembull, nëse nuk kam 10 dollarë dhe i ndryshoj në 100, atëherë nuk do të kem më para. Kjo është vetëm shfaqja e faqes nga shfletuesi. Shembull:
Pas:
Për shembull, unë do të marr të njëjtin sajt dhe do të ndryshoj njoftimin e mëparshëm të artikullit "" Hapja faqja kryesore në Google Chrome. Unë kliko me të djathtën mbi elementin që dua të ndryshoj, për shembull, titullin e njoftimit dhe zgjedh "Shiko kodin".
Në dritaren që hapet, shkoni te skeda Elemente dhe shihni kodin HTML të faqes. Në të duhet të gjejmë tekstin që na intereson. (nënvizuar me të kuqe)
Tani do të fshij tekstin e vjetër dhe do të shkruaj në një të ri.
Kjo është e gjitha, titulli i njoftimit është ndryshuar. Tani do të ndryshoj vetë njoftimin, etiketat dhe kategorinë.
Mund të futni një imazh tjetër duke ndryshuar atributin src në etiketën img.