Unde găsiți codul sursă al paginii. Cum să vizualizați codul sursă al paginii și codul elementului
Multă vreme, opțiunea „show page source” a fost inutilă și neinteresantă pentru mine. Până acum, învățarea HTML pe Codecademy și proiectarea propriilor site-uri web nu au devenit noul meu hobby. Aici a apărut întrebarea: unde să găsești cazuri reale și să împrumuți soluții interesante pentru „pușculița” ta? Răspunsul a fost neașteptat de simplu, ca toate lucrurile ingenioase: uită-te la codul sursă al paginii în Google Chrome! Împărtășesc cu voi descoperirile mele modeste.
Care este codul sursă al paginiiDacă tu, ca și mine, abia faci primii pași în programarea HTML, ar fi o idee bună să afli care este codul sursă al unei pagini.
Codul sursă, cunoscut și sub numele de cod de pagină HTML, este text în limbajul de marcare hipertext (HTML). Include conținutul real al paginii (text, tabele) și etichete. Acestea din urmă acționează ca instrucțiuni pentru browser: cum să afișați conținutul, ce tip de formatare să utilizați, unde să introduceți un hyperlink sau un fișier media. Ei bine, pentru noi, programatorii începători, codul sursă este cel mai bun teren de antrenament: găsim un site interesant și îl spionăm, îl salvăm și folosim fragmente de succes. Cum?
Cum să vizualizați codul sursă în pagina browserului Google ChromeGăsiți pagina care vă place. De exemplu, m-a interesat designul meniului site-ului. Există trei moduri de a deschide codul sursă în browserul Google Chrome:
Ne-am descurcat sarcinii de a vizualiza codul HTML al paginii în browser. Să trecem la cea mai interesantă etapă.
Cum să editați și să salvați codul sursăPentru a învăța cum să creați site-uri web, nu este suficient să citiți codul HTML al altcuiva. Trebuie să te joci cu el, să experimentezi, să faci modificări și să verifici rezultatul. Puteți chiar să începeți prin a compila câteva mostre de succes. Cum editați și salvați codul sursă?
Opțiunea 1. „Manual”
După ce am deschis codul sursă al paginii, apelați meniul contextual și selectați opțiunea „Salvare ca” și salvați fișierul pe hard disk. Edităm fișierul în Notepad sau Notepad, salvăm modificările și îl deschidem prin browser. Rezultatele modificărilor noastre (reușite și nu atât de reușite) se vor reflecta în fereastra browserului.
Opțiunea 2. Pentru profesioniști
Când „te joci” cu codul sursă în fiecare zi, procesul „salvare – deschidere – schimbare – salvare – verificare” devine obositor. Pentru mine, am găsit o soluție sub forma instalării unui plugin pentru Google Chrome - Firebug Lite. Vă permite să editați și să salvați codul sursă fără a părăsi fereastra browserului.
1 votO zi bună, dragi cititori ai blogului meu. Uneori găsiți o caracteristică frumoasă pe un site web și începeți să vă întrebați cum a obținut creatorul un efect atât de interesant.
Se pare că răspunsul este destul de simplu. Și dacă aveți anumite abilități, puteți colecta multe dintre aceste caracteristici și puteți crea propriul site unic într-un timp scurt.
Astăzi vom vorbi despre cum să deschideți codul unei pagini, un anumit element și să învățăm cum să folosiți această abilitate în beneficiul dumneavoastră.
Cunoștințe de bază de codSite-ul meu este destinat începătorilor și mai întâi aș dori să vorbesc pe scurt despre site-uri și cod în general.
Pentru a desena o imagine, apoi tăiați-o în părți mici, scrieți codul, astfel încât browserul să reasambla toate elementele într-un singur întreg. Totul pare foarte complicat? Deloc și nu are rost să te întristezi din cauza asta.
Acesta este modul în care sunt create site-uri web de înaltă calitate. Dacă vrei, implică-te în această chestiune și studiază-o; dacă nu vrei, nimeni nu te poate forța.
Voi spune un singur lucru... nimic nu este mai plăcut decât să vezi cum cuvintele de neînțeles pe care le-ai scris se transformă într-un singur întreg și prind viață: linkurile funcționează, butoanele se mișcă, imaginile se mișcă, textul se târăște. Cred că știu cum s-a simțit Victor Frankenstein.
Când începi să înțelegi limbajul secret și vezi că totul este de fapt mult mai simplu decât părea inițial, nu poți să nu crezi în propriile tale forțe și capacități ale creierului. Este foarte misto.
Cum sunt realizate site-urile web? În mod ideal, în primul rând. El doar pictează un tablou. De exemplu, așa cum se arată în imaginea de mai jos. Deocamdată este doar o imagine, o fotografie. Niciun link nu funcționează, când dați clic nu mergeți nicăieri, nu se efectuează nicio căutare.
Conform acestui desen. Uită-te la captura de ecran de mai jos. Puteți crede că acesta este un set ridicol și foarte complex de simboluri. De fapt, totul nu este atât de complicat, există un anumit algoritm.
Există doar aproximativ 150 de etichete și fiecare dintre ele este responsabilă pentru o anumită acțiune: link, silabe, bold, culoare, titlu și așa mai departe. Înțelegerea lor nu este atât de dificilă dacă aveți dorință și nu vă deranjează timpul.
Datorită cunoașterii acestor atribute, puteți rezolva aproape orice problemă. Dar fiecare dezvoltator își găsește propriile modalități de a atinge obiectivul.
Creatorii cu experiență văd imediat cum să obțină rezultate, în timp ce alții trebuie să gândească, să caute răspunsul în articole sau în codul sursă al concurenților. Pur și simplu iau partea necesară de pe un site terță parte și o editează singuri. Acest lucru scurtează semnificativ procesul de lucru.
Puțin mai târziu, vă voi arăta un exemplu concret.
Vizualizați codulDeci, permiteți-mi mai întâi să vă arăt cum să acționați dacă trebuie să aflați codul html al altcuiva. Apoi ne vom uita la toate celelalte întrebări mai detaliat.
Cel mai bun modMetoda pe care o voi descrie mai întâi este puțin complicată pentru începători, dar ca introducere, citiți-o. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. Selectați „Salvați ca...”
Salvați întreaga pagină web. După cum puteți vedea în captură de ecran, am descărcat deja totul în avans. Aici avem două foldere.
Tot ce ai nevoie este aici. Fiecare element. Dacă înțelegeți acest lucru, puteți obține rapid tot ce aveți nevoie. Dar o astfel de sarcină devine din ce în ce mai imposibilă. Nu există nicio descărcare. Ce să faci dacă este interzisă copierea unei pagini?
Acesta este Google ChromeDupă cum probabil ați observat deja, eu folosesc cel mai adesea Google Chrome și să învăț codul altcuiva în acest browser este la fel de ușor ca decojirea perelor. Ca în principiu cu oricare altul. Schema nu numai că va fi similară, ci și identică. Deschideți pagina al cărei cod vrem să-l cunoaștem și faceți clic dreapta oriunde. În fereastra care apare, faceți clic pe „Vizualizare codul paginii”.
O foaie de cod se va deschide într-o fereastră nouă, ceea ce este destul de greu de înțeles pentru un începător. Dar nu vă alarmați dinainte.
Dacă trebuie să cunoașteți codul unui singur element, treceți cu mouse-ul peste el și faceți clic dreapta. Selectați o altă funcție Chrome: „Vedeți codul elementului”.
De exemplu, m-ar putea interesa modul în care a fost realizat logo-ul, folosind o imagine sau un limbaj de programare? La urma urmei, puteți desena un pătrat folosind CSS. Mulți experți recomandă să scrieți cât mai multe informații posibil în cod. Cum funcționează pe site-uri populare?
Acum au apărut informațiile necesare. html în partea de sus, css în jos. Acestea sunt două limbi. Primul este responsabil pentru componenta text, iar al doilea pentru design. Dacă nu ar exista CSS, atunci ar trebui să specificați culoarea și dimensiunea fontului de fiecare dată. Pentru fiecare pagină, aceasta este foarte lungă. Dar dacă nu ar exista html, atunci nu am avea texte. Am explicat-o aproximativ, dar, în general, așa este.
Apropo, dacă sunteți interesat de modul în care funcționează aici, vă puteți uita la linkul către imaginea de mai jos. Iată răspunsul tău.
Dacă vă place să lucrați în mastic, atunci totul va fi exact la fel. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. „Codul sursă paginii” dacă doriți să vedeți întregul cod.
Când treceți cu mouse-ul peste un element, puteți deschide codul acestuia.
Aici datele sunt afișate în partea de jos a ecranului, dar în rest totul este exact la fel.
În browserul Yandex, totul este exact la fel ca în cele două opțiuni anterioare, deschideți pagina, faceți clic dreapta, vedeți codul paginii.
Plasăm cursorul peste un element dacă vrem să aflăm exact codul acestuia.
Totul este afișat aici exact la fel ca în Chrome.
Și în sfârșit, Opera.
Apropo, poate ai observat că nu trebuie să folosești un mouse. Există o comandă rapidă de la tastatură pentru a deschide codul și este aceeași pentru toate browserele: CTRL+U.
Pentru elemente: Ctrl+Shift+C.
Așa arată rezultatul.
Acum uite cum funcționează totul. Găsiți un site și vă place foarte mult un element. De exemplu, acesta. Știți deja cum să deschideți codul elementului.
Acum copiați-l.
Folosesc , lipim acest cod într-un nou fișier html, în eticheta body (body în engleză).
Acum să vedem cum va arăta totul în browser.
Gata. Pentru ca textul să fie aliniat la margini și să dobândească o culoare verzuie, trebuie să conectați css la acest document și să copiați un alt cod de pe site-ul de pe care l-am copiat pe acesta.
Nu voi face asta acum. Acest lucru necesită mai mult timp: atât al meu, cât și al tău. Cred că voi descrie toate detaliile în viitoarele mele publicații. Abonează-te la newsletter și fii primul care află când apare un articol.
Dacă nu suportați, dar doriți să aflați mai multe despre html și css acum, atunci vă pot recomanda în mod tradițional cursuri de formare gratuite.
Iată 33 de lecții care vă vor permite să stăpâniți html - „Curs gratuit despre HTML”.
Și aici sunt informații complete despre css - „Curs gratuit despre CSS (45 de lecții video!)”.
Acum știi puțin mai mult. Îți doresc succes în demersurile tale. Ne mai vedem!
Dacă deschideți orice pagină web, aceasta va conține elemente tipice care nu se schimbă în funcție de tipul și focalizarea site-ului. Exemplul 4.1 arată codul pentru un document simplu care conține etichete de bază.
Exemplul 4.1. Codul sursă al paginii web
Exemplu de antet de pagină web
Primul paragraf.
Al doilea paragraf.
Copiați conținutul acestui exemplu și salvați-l în folderul c:\www\ ca example41.html. După aceea, lansați browserul și deschideți fișierul prin elementul de meniu Fișier > Deschideți fișier (Ctrl+O). În dialogul de selecție a documentului, selectați fișierul example41.html. Pagina web prezentată în Fig. 1 se va deschide în browser. 4.1.
Orez. 4.1. Rezultatul rulării exemplului
Elementul este destinat să indice tipul documentului curent - DTD (definiția tipului de document, descrierea tipului de document). Acest lucru este necesar pentru ca browserul să înțeleagă cum să interpreteze pagina web curentă, deoarece HTML există în mai multe versiuni, în plus, există XHTML (EXtensible HyperText Markup Language), care este similar cu HTML, dar diferă de acesta în sintaxă. Pentru ca browserul să nu se încurce și să înțeleagă după ce standard să afișeze pagina web, este necesar să se stabilească în prima linie de cod.
Există mai multe tipuri, ele diferă în funcție de versiunea de HTML pe care o vizează. În tabel 4.1. Sunt date principalele tipuri de documente cu descrierile lor.
| HTML 4.01 | |
| Sintaxă HTML strictă. | |
| Sintaxă HTML tranzițională. | |
| Un document HTML folosește cadre. | |
| HTML 5 | |
| Această versiune de HTML are un singur tip de document. | |
| XHTML 1.0 | |
| Sintaxă XHTML strictă. | |
| Sintaxă XHTML de tranziție. | |
| Documentul este scris în XHTML și conține cadre. | |
| XHTML 1.1 | |
| Dezvoltatorii XHTML 1.1 se așteaptă ca acesta să înlocuiască treptat HTML. După cum puteți vedea, această definiție nu are nicio împărțire în tipuri, deoarece sintaxa este aceeași și respectă reguli clare. | |
Diferența dintre o descriere strictă și cea de tranziție a unui document este o abordare diferită a scrierii codului documentului. HTML strict necesită respectarea strictă a specificațiilor HTML și nu iartă erorile. HTML de tranziție este mai relaxat cu privire la unele defecte de cod, așa că acest tip este de preferat să fie utilizat în anumite cazuri.
De exemplu, în HTML strict și XHTML eticheta este necesară, dar în HTML tranzițional poate fi omisă și nespecificată. În același timp, ne amintim că browserul va afișa documentul în orice caz, indiferent dacă se potrivește sau nu cu sintaxa. Această verificare este efectuată folosind un validator și este destinată în primul rând dezvoltatorilor să urmărească erorile din document.
În viitor, vom folosi predominant strict, cu excepția cazurilor în care acest lucru este specificat în mod expres. Acest lucru ne va permite să evităm greșelile comune și ne va învăța să scriem cod corect sintactic.
Puteți găsi adesea cod HTML fără nicio utilizare; într-un astfel de caz, pagina web va fi în continuare afișată. Cu toate acestea, este posibil ca același document să apară diferit în browser atunci când este utilizat și când nu este utilizat. În plus, browserele pot afișa astfel de documente în felul lor, ca urmare pagina „se prăbușește”, adică. va fi afișat complet diferit de ceea ce cere dezvoltatorul. Pentru a evita astfel de situații, adăugați întotdeauna la începutul documentului.
Eticheta definește începutul fișierului HTML și stochează antetul ( ) și corpul documentului ( ) în interiorul acestuia.
Antetul documentului, așa cum este numit și blocul, poate conține text și etichete, dar conținutul acestei secțiuni nu este afișat direct pe pagină, cu excepția containerului.
Eticheta este universală și adaugă o întreagă clasă de capabilități, în special, cu ajutorul meta-etichetelor, așa cum se numește în general această etichetă, puteți schimba codarea paginii, puteți adăuga cuvinte cheie, descriere document și multe altele. Pentru ca browserul să înțeleagă că are de-a face cu codificarea UTF-8 (format de transformare Unicode), iar această linie este adăugată.
Exemplu de pagină web
Eticheta definește titlul unei pagini web; este unul dintre elementele importante menite să rezolve multe probleme. În sistemul de operare Windows, textul titlului este afișat în colțul din stânga sus al ferestrei browserului (Figura 4.2).
Orez. 4.2. Vedere antet în browser
Eticheta este obligatorie și cu siguranță trebuie să fie prezentă în codul documentului.
Ar trebui să adăugați întotdeauna o etichetă de închidere pentru a indica faptul că titlul documentului este complet.
Corpul documentului este destinat să conțină etichete și conținutul paginii web.
Titlu
HTML oferă șase titluri de text de diferite niveluri care indică importanța relativă a secțiunii care urmează titlului. Astfel, eticheta reprezintă cel mai important titlu de nivel, iar eticheta servește la indicarea titlului de al șaselea nivel și este cel mai puțin important. În mod implicit, titlul de la primul nivel este afișat cu cel mai mare font aldine, iar titlurile de nivel ulterioare sunt mai mici. Etichetele... se referă la elemente de bloc, ele încep întotdeauna pe o linie nouă și după ele apar alte elemente pe linia următoare. În plus, spațiul alb este adăugat înainte și după titlu.
Un text poate fi ascuns pentru a fi afișat în browser făcându-l un comentariu. Deși acest text nu va fi văzut de utilizator, el va fi totuși transmis în document, așa că dacă te uiți la codul sursă, poți descoperi note ascunse.
Sărbătoarea se apropie - Ziua Internațională a Femeii. Să ne pregătim din timp pentru asta. Puteți felicita fetele și femeile într-un mod original utilizând serviciile de cărți poștale discutate mai jos.
Creați online o carte poștală pentru 8 martie Utilizați următoarele servicii pentru a crea o carte poștală practic de la zero.
Sper că, folosind unul dintre aceste generatoare, veți putea să vă felicitați în mod adecvat doamnele pe 8 martie!
Conținutul articolului:
Google Plus se închide Platforma Google Plus nu a fost la înălțimea speranțelor dezvoltatorilor și va fi complet eliminată pe 2 aprilie 2019. Odată cu acesta, albumele asociate acestuia în Google Foto vor dispărea, iar autorizarea pe site-urile cu cont Google Plus va deveni indisponibilă. Din 4 februarie, funcția de creare a profilurilor, canalelor și paginilor Google Plus a devenit indisponibilă. Dacă în contul dvs. a fost stocat conținut valoros, atunci puteți descărca o copie de rezervă.Modificările vor afecta cel mai mult bloggerii care își desfășoară blogurile pe Blogspot. Unele widget-uri G+, comentarii G+ și profilul tău Google + nu vor mai fi disponibile. Acest lucru este menționat în notificarea din zona de administrare Blogger:
După anunțul că API-ul Google+ va fi dezafectat în martie 2019, pe 4 februarie vor fi aduse o serie de modificări la integrarea Blogger cu Google+.
Widgeturi Google+. Design-urile blogurilor nu vor mai accepta widget-urile Butonul +1, Adepții Google+ și Insigna Google+. Toate aparițiile acestor widget-uri vor fi eliminate de pe blogul dvs.
butoane +1. Butoanele +1 și G+ vor fi eliminate, la fel și linkurile „Publicați pe Google+” din postările de pe blog și din bara de navigare.
Rețineți că, dacă utilizați un șablon personalizat care are funcții Google+, este posibil să fie necesar să fie modificat. Vă rugăm să contactați persoana care v-a furnizat acest șablon pentru recomandări.
Comentarii Google+. Asistența pentru comentarii folosind Google+ va fi întreruptă, iar toate blogurile care folosesc această funcție vor fi restabilite la comentariile standard Blogger. Din păcate, comentariile postate prin Google+ nu pot fi transferate pe Blogger, așa că nu vor mai apărea pe blogul tău. Ștergerea comentariilor Google Plus Din păcate, comentariile care au fost publicate în sistem vor fi șterse definitiv. Puteți folosi doar același instrument https://takeout.google.com pentru a spune comentarii de rezervă din Google+ pe computer. Numai că nu există încărcător de încărcare pentru el și puteți restabili comentariile doar manual într-un mod destul de strâmb. E bine că am fost la timp.Cum să înlocuiți un profil Google Plus cu un profil Blogger Dacă blogați pe Blogspot, atunci este indicat să reveniți acum de la profilul Google Plus la profilul Blogger (pentru cei care au trecut la Google Plus la o dată). Vă recomand să faceți acest lucru chiar acum pentru a evita situațiile neașteptate care pot apărea la ștergerea conturilor Google Plus. Cum să-ți recuperezi profilul Blogger. Acest lucru este ușor de făcut în setările de administrator Blogger:
Setări –> Setări utilizator –> Profil utilizator – aici selectați Blogger
Salvați modificările.
Confirmați trecerea la și introduceți numele sau porecla dvs.
Nu uitați să încărcați un avatar în profilul dvs. Blogger.
Cum să ștergeți un profil Google Plus Dacă decideți să scăpați de profilul dvs. G+ odată pentru totdeauna, atunci accesați pagina dvs. Google Plus -> Setări -> derulați în partea de jos a paginii -> ștergeți contul Google Plus:
Astăzi vă voi spune ce este CSS3, cu ce se folosește, unde să îl căutați și cum să îl scrieți corect. Vă avertizez, voi spune de la mine, simplificat pentru publicul larg, așa cum văd eu + exemple. Deci, să începem de departe.
CSS sunt stiluri în care sunt scrise proprietățile unui obiect. Aceasta înseamnă că sunt în toate motoarele existente, dacă nu le puteți găsi, atunci fie că căutați în locul greșit, fie ele chiar nu există ( site strâmb). Unde se găsesc de obicei? De obicei aceasta este rădăcina site-ului, numele fișierului style.css, deși, în principiu, numele nu este la fel de important ca extensia .css dacă fișierul cu o astfel de extensie este un fișier de stil.
Vezi si pe blogul meu.
