Дознајте како е изграден веб-сајт, гледајќи го својот изворен код
Кога првпат ја започнав мојата кариера како веб-дизајнер, научив толку многу со разгледување на работата на други веб-дизајнери на кои им се восхитував. Јас не сум сам во ова. Без разлика дали сте нови на веб-индустријата или искусен ветеран, гледањето на HTML извор на различни веб страни е нешто што веројатно ќе го направите многу пати во текот на вашата кариера.
За оние кои се нови за веб дизајн, гледањето на изворниот код на еден сајт е еден од најлесните начини да се види како се прават некои работи, така што можете да учат од таа работа и да почнат да користат одреден код или техники во вашата работа. Како што секој веб-дизајнер работи денес, особено оние кои биле во тоа од раните денови на индустријата, и тоа е безбедно залог дека тие со ти го кажуваат тие научиле HTML едноставно со гледање на изворот на веб-страници кои ги виделе и биле заинтригирани од. Во прилог на читањето на веб-дизајнерски книги или посета на професионални конференции , гледањето на изворниот код на сајтот е одличен начин за почетниците да научат HTML.
Повеќе од само HTML
Едно нешто да се запамети е дека изворните датотеки можат да бидат многу комплицирани (и колку е посложена веб-страницата што ја гледате, толку покомплексен е кодот на сајтот, најверојатно ќе биде). Покрај HTML-структурата што ја сочинува страницата што ја гледате, ќе има и CSS (каскадни стилски листови) кои го диктираат визуелниот изглед на тоа место. Дополнително, многу веб-сајтови денес ќе вклучуваат сценарија додадени фајлови заедно со HTML.
Всушност, постои веројатност дека ќе бидат вклучени повеќе фајлови со скрипти, всушност, секој што ќе напојува различни аспекти на страницата. Искрено, изворниот код на сајтот може да изгледа преголем, особено ако сте нови за тоа. Не се фрустрира ако не можете да дознаете што се случува со тоа место веднаш. Прегледот на HTML извор е само првиот чекор во овој процес. Со малку искуство, ќе почнете подобро да разберете како сите овие парчиња се вклопуваат заедно за да креирате веб-страница што ја гледате во вашиот прелистувач. Како што ќе се запознаете со шифрата, ќе можете да научите повеќе од тоа и тоа нема да ви изгледа застрашувачко.
Па, како го гледате изворниот код на веб-страница? Еве инструкциите од чекор по чекор за користење на прелистувачот на Google Chrome.
Чекор по чекор инструкции
- Отворете го веб-прелистувачот на Google Chrome (ако немате инсталирано Google Chrome, ова е бесплатно симнување).
- Одете до веб-страницата што сакате да ја испитате .
- Десен-клик на страната и погледнете во менито што се појавува. Од тоа мени, кликнете View source source page .
- Изворниот код за таа страница сега ќе се појави како нов таб во прелистувачот.
- Алтернативно, можете исто така да ги користите кратенките на тастатурата од CTRL + U на компјутер за да отворите прозорец со прикажан изворниот код на страницата. На Mac, оваа кратенка е Command + Alt + U.
Алатки за програмери
Во прилог на едноставната изворна можност за изглед на страницата што Google нуди, исто така можете да ги искористите одличните алатки за развивачи за да ископате дури и подлабоко во некоја локација. Овие алатки ќе ви овозможат не само да го видите HTML, туку и CSS што се применува за да ги видите елементите во тој HTML документ.
За да користите алатки за развој на Хром:
- Отворете го Google Chrome .
- Одете до веб-страницата што сакате да ја испитате .
- Кликнете на иконата со три реда во горниот десен агол од прозорецот на прелистувачот.
- Од менито, лебди над Повеќе алатки и потоа кликнете алатки за програмери во менито што се појавува.
- Ова ќе отвори прозорец кој го прикажува кодот на HTML на левата страна на панелот и соодветните CSS на десната страна.
- Алтернативно, ако десен клик на елемент во веб-страница и изберете Inspect од менито што се појавува, алатките за развивачи на Chrome ќе се појавуваат и точниот елемент што сте го избрале ќе биде обележан во HTML со соодветниот CSS прикажан десно. Ова е од голема помош ако сакате да дознаете повеќе за тоа како е изготвен еден конкретен дел од страницата.
Дали е прикажан изворен код законски?
Со текот на годините, имав многу нови веб-дизајнери прашање дали е прифатливо да се гледа изворниот код на сајтот и да се користи за нивно образование и во крајна линија за работата што ја прават. Додека копирањето на кодот на сајтот на големо и неговото донесување како свој на страница сигурно не е прифатливо, користењето на тој код како отскочна штица за учење е всушност колку достигнувања се направени во оваа индустрија.
Како што споменав на почетокот на оваа статија, би било тешко да се најде работна веб-професионална денес која не научила нешто, гледајќи извор на страницата! Да, гледањето на изворниот код на сајтот е легално. Користењето на тој код како ресурс за изградба на нешто слично е добро. Преземање на код како-е и пренесување на тоа како вашата работа е местото каде што ќе почнете да се соочуваат со проблеми.
На крајот, веб-професионалци се учат едни од други и често се подобруваат врз работата што ја гледаат и се инспирирани од тоа, па не двоумете се да го видите изворниот код на сајтот и да го користите како алатка за учење.