Scriem o pagină html. Exemplu de pagină HTML și principii de bază ale creării
Bun venit pe paginile blogului Start-Luck. Astăzi aș dori să vă arăt cum să utilizați codul. Scrierea de site-uri web este o activitate interesantă care poate părea imposibil de dificilă pentru mulți. De fapt, o pagină simplă poate fi creată în doar 5 minute.
În acest articol voi vorbi despre crearea unei pagini html. Vom finaliza această sarcină în mai puțin de 10 minute, apoi ne vom uita la etichetele principale mai detaliat. Ar fi greșit să numim o astfel de publicație o lecție. Aceasta este mai degrabă o sămânță care este concepută pentru a vă arăta simplitatea muncii și pentru a vă oferi dorința de a merge mai departe, de a afla mai multe, de a face mai bine.
Cum se creează o pagină
Vă sugerez să faceți prima pagină într-un blocnotes. Cel mai simplu, care se află în meniul Start, este folderul „Accesorii”. Nu este nevoie să descărcați nimic încă. Încearcă să folosești ceea ce ai.
Deschideți documentul.
Lipiți acest cod în el.
<html>
<cap>
<titlu > Prima mea pagină</titlu>
</cap>
<corp >
<centru > </h1> <br/><centru > <font style="color:red" ></font> <br/> <b></b> <br/> Am ajuns foarte jos<br/> Acum știi puțin mai multe despre etichete și le poți folosi. Să încercăm să inserăm un link pentru a lega mai multe pagini împreună.<br/> <ora > De exemplu, aici este un link către blogul meu -<a href = "https://site/" > Start-Noroc</a>- vorbește pur și simplu despre „lucruri complicate”.<br/> <br/> </corp> </html> |
Crearea unei pagini este mai ușoară decât crezi
Un cod simplu vă permite să faceți textul roșu
Nu este mult mai greu să scrii cu aldine
Am ajuns foarte jos
Acum știi puțin mai multe despre etichete și le poți folosi. Să încercăm să inserăm un link pentru a lega mai multe pagini împreună..
OK, totul sa terminat acum. Prima pagină este gata
Fișierul trebuie să fie numit index.html. Final „.html” indică extensia fișierului. Dacă introduceți pur și simplu indexul numelui, documentul va fi salvat ca fisier textși nu se va deschide în browser.
Am salvat documentul pe desktop. Acum trebuie să îl găsiți, să faceți clic dreapta și să îl deschideți folosind orice browser. Voi alege Google Chrome.
Așa arată pagina pe care tocmai am creat-o. Al tău nu va fi diferit. Totul este exact la fel: cu imagini și font color.
Acum voi vorbi despre etichete mai detaliat, dar deocamdată să eliminăm „ din titlu centru " și inserați o linie care conține cuvântul " Culoare" Apropo, am scris deja. Este foarte simplu, recomand să-l citiți.
Salvați din nou documentul, de data aceasta puteți utiliza pur și simplu comanda rapidă de la tastatură Ctrl + S, apoi reîmprospătați pagina în browser folosind butonul F5
Amintiți-vă, aproape orice etichetă trebuie să se deschidă și să se închidă. Adică, codul cu bară oblică trebuie să fie localizat undeva. In acest caz arata asa: .
Vedeți că titlul a devenit roșu. În același mod, puteți da nuanța dorită oricărei părți a textului.
Ei bine, asta e, exemplul este gata și ar trebui să fii mândru de tine. Desigur, nu este încă online; pentru aceasta, trebuie postată pagina web, care este furnizată de găzduire. De asemenea, trebuie să vă conectați domeniul, astfel încât alte persoane să vă poată vedea creația.
Deocamdată, doar tu poți vedea pagina. Dar trebuie să recunoașteți, un astfel de site nu poate decât să surprindă o persoană din epoca fierului. Dar aceasta este prima încercare, să o facem și mai de succes prin înțelegerea etichetelor pe care le-am folosit. Acest lucru vă va ajuta să învățați cum să vă creați propriile proiecte fără ajutorul nimănui.
Etichete
Cu permisiunea dumneavoastră, voi trece la programul NotePad++. Are o serie de avantaje în comparație cu un blocnotes obișnuit. Acum voi avea nevoie de evidențierea etichetelor pentru a vă arăta elementele despre care voi vorbi. În general, dacă aveți de gând să învățați html, atunci vă recomand cu căldură să instalați acest program gratuit.
Nu este singura și vă pot oferi încă câteva dacă cineva este interesat de alternative. Vom trece la partea teoretică.
De bază
Pagina începe și se termină cu etichete . Ele arată browserului că acesta este un document web creat folosind html.
Urmează sau titlu. Conține cel mai mult Informații importante despre pagină, în cazul nostru – . Dacă nu ați găsit încă expresia „Prima mea pagină”, care este prezentă în cod, acordați atenție filei în sine, deasupra liniei de căutare.
Sunt etichetele
Etichetă
indică faptul că fraza este un antet. În mod implicit, este puțin mai mare decât textul principal și este evidențiat cu caractere aldine. Dacă acum tu și cu mine am scris nu numai în html, ci am creat și un fișier CSS cu care fișierul nostru s-a suprapus, am putea controla dimensiunea, fontul și chiar culoarea tuturor titlurilor din pagină fără a scrie stilul fontului
, așa cum am făcut în exemplu. Deși este prea devreme să vorbim și despre asta.
Apropo, Title și H1 au influența lor atunci când atribuiți un loc site-ului dvs. în rezultatele căutării. Trebuie să le tratați cu mare atenție și să nu scrieți nimic în interior doar de dragul ei. Ele sunt legate de. Pe lângă h1, există și h2, h3, h4.
În aceeași linie există o deschidere și o închidere
- una dintre puținele etichete simple. Adică funcționează de la sine. Datorită acestui lucru, săriți elemente de la o linie la alta. Pur și simplu, liniuță. Am scris-o o dată, ceea ce înseamnă că ne-am mutat în jos o dată, de două ori, ca și mine, iar indentarea s-a dovedit a fi puțin mai mare.
Imagine
Urmează eticheta img , adică imagine, imagine. Paranteza pătrată se deschide, toate informațiile de bază despre imagine sunt introduse în ea, numai după aceea se închide. Trebuie remarcat faptul că img este o etichetă, iar toate celelalte elemente de cod care se potrivesc în interior sunt atributele sale.
Primul lucru este alt , adică o descriere. Acest lucru este necesar și pentru optimizare. Uneori se mai adaugă titlu . Când treceți cu mouse-ul peste imagine, lângă cursor apare un sfat explicativ când pagina este deja deschisă în browser.
A fost posibil să încarc desenul în folderul site-ului și să scriu calea către el, dar am mers într-un mod simplu. Am găsit o poză printre Pixabay, am deschis-o într-o fereastră nouă și am lipit linkul.
În etichetă src este specificată calea către imagine. El este cel care spune browserului ce să se deplaseze în continuare pentru a găsi imaginea dorită și în ce direcție să se uite - o scrii singur.
Formatarea textului
este responsabil pentru a da unei părți din text un stil special, de exemplu, ca în cazul nostru, o culoare diferită. stil="culoare:roșu" indică faptul că culoarea va fi roșie. Dacă vrei galben, scrie galben, verde - verde. Puteți utiliza coduri de culoare din Photoshop.
ajută textul să fie aldine.
remiză linie orizontală. Este unică și se folosește numai când este închisă. Daca scrii
de mai multe ori, vei primi exact aceeași sumă dungi orizontale când deschideți o pagină într-un browser.
Legături
spune browserului că va fi un link în continuare. Doriți să redirecționați cititorul către o altă adresă. Această etichetă vine cu un atribut obligatoriu href="adresa" . Ghilimele conțin calea pe care browserul ar trebui să-l ducă pe vizitatorul paginii. După ce este scrisă această etichetă, se inserează o descriere, un cuvânt sau mai multe, care, atunci când se face clic, va duce cititorul mai departe. Odată ce aceste condiții sunt îndeplinite, puteți introduce o a doua etichetă de închidere .
După ce partea principală a paginii este scrisă, închideți eticheta corp , deoarece corpul este terminat. Și indicați că nu îl mai utilizați pentru astăzi html .
Dacă doriți să aflați mai multe despre etichetele html și să aflați cum să inserați nu numai imagini, ci și videoclipuri, să creați butoane, diverse forme, liste, paragrafe, atunci vă pot oferi un curs gratuit de la Evgeniy Popov " Bazele HTML " Doar 33 de lecții te vor ajuta să ajungi la următorul nivel.
De asemenea, aș dori să vă recomand un curs video care vă spune cum sunt proiectate site-urile web. Întregul proces este prezentat cu exemple reale, ceea ce este deosebit de bun. Cursul este destinat atât începătorilor care nici măcar nu cunosc încă HTML, cât și celor care cunosc deja bine atât HTML, cât și CSS, dar nu știu să dispună bine site-urile web. Puteți obține informații mai complete accesând linkul: www.srs.myrusakov.ru/makeup
În plus, luati Carte gratuită despre crearea site-ului web ! Această carte este destinată începătorilor și aici este creat site-ul FROM și TO. Adică, este pregătit un design, apoi paginile sunt așezate, partea de software este scrisă și apoi site-ul este postat pe Internet. Autorul comentează cu atenție totul, iar cartea conține o mulțime de capturi de ecran și ilustrații. Mai mult, particularitatea cărții este că nu creează un site abstract, ci unul complet real care există pe Internet.
Astăzi ai făcut multe, pentru că primul pas este cel mai dificil.
Abonați-vă la newsletter și Grupul VKontakte , și aflați, de asemenea: cum și de ce aveți nevoie de un motor de site web, ce sunt aspectul bloc și grila modulară, cum să scrieți corect site-urile web și multe altele.
Ne revedem și mult succes!
Au fost inventate multe limbi, dar HTML este unul dintre limbile speciale și cele mai populare. Multe alte evoluții cheie în programare sunt asociate cu acesta. Multe devin posibile atunci când mintea dezvoltatorului cunoaște limbajul de marcare - HyperText Markup Language (HTML).
În esență, în HTML nu este nimic complicat și în câteva minute oricine este departe de programare și Internet va putea crea o pagină HTML în Notepad. Un exemplu demn de atentie, simplitate cu adevarat accesibila oricui.
descriere generala
Un fișier HTML este o pagină a site-ului, deși acest lucru poate fi argumentat, dar faptul că un fișier alcătuiește o pagină este clar de la început.
Un fișier HTML începe cu un antet DOCTYPE, care indică faptul că tipul de fișier este HTML. Toate elementele paginii (etichetele) sunt indicate între paranteze unghiulare. Fiecare pereche ("<» и «>") include o etichetă HTML. De obicei, etichetele HTML vin în perechi, adică pentru fiecare „etichetă” există o „/etichetă”. Ambele sunt incluse în paranteze unghiulare. Există etichete unice, dintre care cea mai populară este „br/” - trecerea la următoarea linie.
Cea mai mare etichetă din fișier este HTML-ul în sine, care conține doar două etichete: HEAD și BODY. În primul, sunt făcute diverse descrieri, sunt indicate link-uri către alte fișiere necesare paginii și pot fi prezente scripturi PHP și JavaScript. Al doilea înregistrează conținutul paginii. De asemenea, sub formă de tag-uri și scripturi.
Pagina HTML simplă
Un exemplu de creare a unei astfel de pagini este dat mai jos în articol. Să ne uităm cu atenție.
Secțiunea CAP
Scopul principal este o descriere generală a paginii și a scripturilor generale, deși acesta din urmă este un concept destul de relativ. De obicei, doar două lucruri primesc o importanță semnificativă aici:
- cuvinte cheie și descrierea paginii;
- link-uri către alte fișiere (*.css și *.js).
Pentru afișarea conținutului paginii, conținutul acestei secțiuni este important doar indirect, deoarece indică: undeva în alte fișiere există reguli CSS pentru etichete și scripturi în alte limbi.
O pagină HTML are una care este afișată atunci când vizitatorul mută mouse-ul în fila în care este deschisă pagina. Acesta este un punct important, deoarece face pagina mult mai prezentabilă sau, mai simplu, semnată cu text lizibil.
Etichetele META sunt importante în programarea pe Internet în general, dar atunci când trebuie să creați o pagină HTML în Notepad, nu este recomandabil să aglomerați exemplul cu constructe inutile.
Dacă scripturile ar trebui abordate odată ce s-au stabilit cunoștințele despre HTML, atunci Foile de stil în cascadă ar trebui abordate imediat. Fișierele CSS conțin, printre altele, reguli pentru formatarea etichetelor HTML.
Sectiunea CORP
De fapt, pagina HTML de exemplu este secțiunea BODY. Aici sunt cuprinse toate informațiile, tot conținutul paginii site-ului. Toate informațiile sunt prezentate sub formă de etichete și scripturi, de exemplu inserarea de cod JavaScript sau bucăți de programe PHP.
Este important să înțelegeți că un exemplu de pagină web HTML într-un browser și același exemplu într-un editor de text, în special Notepad, nu sunt același lucru. În primul caz, avem un text HTML gata făcut în care sunt executate toate scripturile. De exemplu, PHP și-a îndeplinit rolul și a format etichetele necesare în locurile potrivite în locul codului său. JavaScript și-a îndeplinit și misiunea, deși rămâne de discutat separat.
HTML sunt etichete, nu scripturi. În cele din urmă, browserul afișează doar conținutul paginii, doar etichetele acesteia. Nu există cod PHP acolo.
JavaScript se află într-o poziție specială, preocuparea sa este să servească pagina nu numai în momentul încărcării (supraîncărcării), ci și în momentele în care pagina se află în browserul vizitatorului, iar acesta o studiază.
Un exemplu simplu (numai secțiunea BODY) este prezentat mai jos.
Și în browserul vizitatorului arată astfel:
Codul nu a specificat cum ar trebui să arate elementele pe care le-ar afișa browserul. Toate stilurile vizibile sunt în regulile CSS. În acest caz, în fișierul Mcss/scPhpWordRW.css care a fost legat (vezi primul exemplu al paginii HTML).
Spre deosebire de HTML, tema CSS este mai simplă, există reguli foarte accesibile și numărul lor este mic, când exemplul de creare a unei pagini HTML nu necesită altceva decât notepad. Totul este foarte accesibil pentru stăpânire imediată:
Aceasta arată cât de simplu este descrisă eticheta scLogo_vDoc, iar această descriere este astfel încât, în starea sa normală, eticheta afișează imaginea vDoc-logo.png, iar când mouse-ul este peste ea, este afișat vDoc-logo-h.png.
Structura descrierilor HTML
Limbajul nu implică nicio structură și conceptul de sintaxă aici este foarte relativ. Nu există variabile, dar există o mulțime de posibilități. Baza fundamentală a hipertextului este că există un element (etichetă) care are în mod necesar un nume.
Numele, în cazul unei etichete asociate, este alcătuit din numele în sine (tagName) și paranteze unghiulare („<» + tagName +«>") dacă vorbim despre începutul unei etichete și "„dacă se consemnează sfârşitul lui.
Un exemplu de pagină HTML care descrie atributele se află mai jos în text.
O etichetă poate avea atribute, caz în care acestea sunt plasate cu un spațiu după numele etichetei înainte de paranteza unghiulară de închidere „>”. Atributele, dacă o etichetă le are, sunt scrise doar la începutul etichetei. Conținutul unei etichete este considerat a fi ceea ce se află între începutul etichetei și sfârșitul acesteia.
HTML vă permite să descrieți elementele bloc și inline. Primele ocupă o anumită zonă în fereastra browserului, pot fi poziționate absolut, adică în locul dorit în zona de afișare a paginii HTML, și au o anumită dimensiune.
Elementele inline sunt în general afișate într-un singur fir, adică așa cum au fost specificate în fișierul de pagină, sunt afișate pe ecran. Afișarea fluxului general poate fi influențată atunci când pagina se încarcă. Plasarea, vizibilitatea și alte proprietăți ale elementelor bloc pot fi influențate în orice moment prin codul JavaScript.
Pe lângă elementele simple, HTML oferă descrierea tabelelor și formularelor. Aceste elemente sunt foarte solicitate în „construcția de zi cu zi a site-urilor”.
Descrierea tabelului: etichete TABLE, TR, TD
Folosind eticheta TABLE, puteți crea un tabel, puteți specifica un anumit număr de rânduri TR și un anumit număr de celule TD în fiecare rând. Spre deosebire de organizarea tabelară obișnuită, datorită particularităților de marcare HTML, organizarea tabulară este limitată la această declarație, prin urmare, dacă dezvoltatorul dorește să aibă un tabel dreptunghiular în care numărul de coloane din toate rândurile să fie același, atunci trebuie să monitorizează el însuși acest lucru.
Poziția de principiu a HTML este să facă tot ceea ce este specificat, dar nimic care nu este înțeles. În unele cazuri, numărul de coloane din fiecare rând al tabelului nu este atât de important, dar dacă trebuie să îmbinați celulele pe verticală sau pe orizontală, va trebui să numărați totul cu mare atenție.
Un exemplu de pagină HTML care descrie un tabel simplu este prezentat clar în articol.
Aici este prezentat un tabel de trei rânduri cu trei coloane, iar pe primul rând, în locul etichetei TD, a fost folosită eticheta TH - antetul coloanei. Aceste două etichete nu sunt deosebit de diferite, dar este destul de posibil să îl folosiți pe primul pentru a distinge primul rând al tabelului, iar în CSS puteți atașa propriul stil la TH, care îl deosebește de alte TD-uri.
Descriere formular: etichete FORM, INPUT
Formularele sunt cea mai populară parte a etichetelor HTML. Folosind formulare puteți transfera informații. De fapt, pagina în sine este rezultatul informațiilor, dar forma este intrarea acesteia.
Exemplu de pagină HTML care descrie un formular simplu:
Există mai multe opțiuni pentru utilizarea formularelor, dar acestea sunt principalele posibilități. Puteți specifica câmpuri de intrare, le puteți atribui un design și handlere pentru a analiza datele introduse de utilizator. Puteți specifica câmpuri ascunse și puteți transmite informații de fundal din pagină. Puteți desemna butoane pentru transmiterea informațiilor, făcând clic pe care inițiază procesul de transmitere a informațiilor.
Folosind HTML
Cunoașterea limbajului hipertext este o meserie în orice specializare din domeniul programarii pe Internet, dar dacă trebuie să scrieți programe în PHP sau JavaScript, atunci trebuie să cunoașteți perfect HTML + CSS.
Limbajul PHP a fost indicat în exemplul anterior. PHP rulează pe server, așa că pagina cu acest formular a zburat de la server la browser cu câmpurile completate. În special, funcția TestOnBlur menționată în eticheta INPUT (managerul de evenimente onblur) a primit toți parametrii ca câmpuri de text.
JavaScript rulează în browser și pentru ca butonul de trimitere a datelor înapoi către server să funcționeze corect, adică construcția: onclick=jQuery("#to").val("cart"), trebuie să aveți o idee nu numai despre ce este jQuery, ci și despre ce este #to, val, cart. Mai precis, trebuie să cunoașteți etichetele HTML de bază și regulile generale pentru aplicarea stilurilor CSS acestora.
Acest lucru este suficient pentru a vă îmbunătăți rapid calificările în orice specializare în domeniul programării pe Internet.
Bună ziua, dragi cititori ai blogului. Cu acest articol, vom începe să învățăm elementele de bază ale limbajului HTML.
Probabil că știți deja că limba principală a internetului este limbaj de marcare hipertext HTML (HyperText Markup Language). În acest articol, vom învăța conceptele de bază ale HTML și vom învăța cum să creăm pagini WEB simple.
Să începem cu cel mai important lucru, să vedem cum funcționează World Wide Web - Internet. Pentru a produce pagini web, creați fișiere scrise în HTML și le plasați pe un server web. După aceasta, orice browser instalat pe un dispozitiv cu acces la Internet, fie că este un computer, telefon sau tabletă, vă poate găsi paginile web.
server web- Acesta este un computer obișnuit cu software special care are acces la Internet. Ascultă continuu solicitările din browsere pentru pagini web, imagini, fișiere audio și video. După ce a primit o solicitare pentru una dintre aceste resurse, serverul o caută și o trimite browserului.
Browser este un program special conceput pentru a vizualiza site-uri web, cum ar fi Internet Explorer. Folosind un browser, navigați pe site-uri web făcând clic pe linkuri. Orice astfel de clic determină browserul să facă o cerere pentru pagina HTML către serverul web, să primească un răspuns și să afișeze pagina în fereastra sa. Când pagina este afișată, limbajul HTML începe să funcționeze; îi spune browserului totul despre structura și conținutul paginii web. Utilizarea comenzilor - Etichete, HTML spune browserului unde încep paragrafele de text, ce parte a textului este un titlu și unde să insereze tabele și chiar imagini. Și etichetele sunt cuvinte între paranteze unghiulare, de exemplu
,
