Cele mai bune cursuri despre html css. Bazele limbajului de programare WEB HTML

Salutare tuturor!!! Mă bucur foarte mult că ai decis să cucerești culmile elementelor de bază ale HTML și asta alegerea potrivita. La urma urmei, înainte de a vă crea primul site web, trebuie să cunoașteți elementele de bază ale HTML. Mai mult decât atât, va trebui să te ocupi de codarea HTML pe un site web de mai multe ori. Recomand cu căldură să consultați tutorialele HTML pentru începători de pe blogul meu și vă garantez că, după finalizarea acestui curs, veți putea crea o pagină web sau chiar un site web cu ușurință.

Să începem! Mai întâi, să aflăm
HTML – (din engleză. H ypert ext M arkup Language) este un limbaj de marcare hipertext. A fost dezvoltat pentru prima dată de omul de știință britanic Tim Berners-Lee în 1991-1992. HTML a fost destinat doar să marcheze text, imagini și tabele pe paginile web. Acum, limbaje de programare precum JavaScript și VBScript pot fi de asemenea inserate într-un document HTML.

HTML nu este un limbaj de programare; este destinat doar pentru marcarea documentelor text.

Pentru a învăța HTML, trebuie doar să aveți un browser și un bloc de note standard sau .
Pentru a deschide Standard Notepad, faceți următoarele pe computer: „Start” => „Programe” => „Accesorii” => „Bloc de note” .

Dacă ați auzit despre programe care simplifică munca de scriere a codului HTML (Microsoft FrontPage, Adobe Dreamweaver), atunci nu vă recomand să le folosiți în această etapă a instruirii. Exersați-vă abilitățile într-un blocnotes standard sau în editorul de text Notepad++ și, atunci când finalizați acest curs, veți putea folosi programe pentru a accelera lucrurile. Abonați-vă la actualizările blogului meu și citiți cum să utilizați Microsoft FrontPage și Adobe Dreamweaver.

Pentru o mai bună înțelegere, am pregătit un exemplu. Privește cu atenție poza:

Explicaţie.

1). Orice document HTML începe cu această linie:

Cu această linie spunem browserului că documentul nostru HTML respectă specificația internațională versiunea 4.01. Datorită acestei linii, pagina ta va arăta la fel.
Nu este necesar să vă amintiți această linie; documentul HTML va funcționa fără ea. Asta doar pentru ca tu să știi ce este.

2). și este începutul și sfârșitul documentului.

3). și - șeful documentului. Aici sunt adesea inserate etichete de serviciu suplimentare; una dintre aceste etichete este . Veți afla despre alte etichete de serviciu în lecțiile ulterioare; în această etapă a instruirii, aceste informații sunt suficiente.

4). și - titlul documentului.
Acest antet va fi afișat în browser:

in cautare sunt index sau in Google.

5). și - corpul documentului.
Iată conținutul documentului, de exemplu, text, imagini, tabele, muzică, filme etc. Veți afla mai multe despre cum să inserați muzică, text, imagini în corpul documentului în lecțiile următoare.

Notă:

Veți citi și auzi adesea cuvântul „etichetă”.
O etichetă este tot ceea ce se află între paranteze< >. De exemplu: , , , ,
,

etc. - toate acestea sunt etichete.
Etichetele nu sunt vizibile la vizualizarea paginii într-un browser, dar tot ceea ce nu este între paranteze va fi afișat în browser la vizualizare.

Există multe etichete și au scopuri diferite.

Există etichete care trebuie închise. De exemplu,
deschide eticheta

și asigurați-vă că închideți eticheta

Și există etichete unice, de exemplu, aceasta
.

O etichetă este un fel de container care poate conține text, imagini și alte etichete...

○ Acordați atenție secvenței corecte a etichetelor de deschidere și închidere:

...

Eticheta pe care am deschis-o prima este închisă ultima, a doua este penultima etc.

○ Iată un exemplu de secvență incorectă a etichetelor de deschidere și de închidere. Cu această comandă, pot apărea erori pe pagina web:

...

Eroarea a fost în și.
Aveți grijă când scrieți cod.

Cod gata.
Așa arată codul HTML obligatoriu standard pentru o pagină web.

Titlul paginii Textul paginii, tabele, imagini, muzică și videoclip.

Nu vă descurajați dacă înțelegeți puțin sau aproape nimic din tot ce este scris mai sus. În a doua lecție va fi mai multă practică și vei putea să scrii totul manual și să vezi cum funcționează HTML.

Continuați cu următoarea lecție

Cu această serie vreau să deschid o serie de lecții dedicate HTML. Am luat această decizie pentru că aș dori să încerc să învăț utilizatorii cum să creeze site-uri web de la zero. Acest gând este în capul meu de ceva vreme. Singura întrebare care a apărut a fost de unde să începeți, cu HTML sau să treceți direct la instalarea motorului și configurarea lui în continuare.

Dar dacă începeți prin a învăța motorul, atunci unii dintre utilizatorii care nu cunosc HTML vor fi lăsați afară. Așa că am decis să încep cu elementele de bază și să o fac în așa fel încât chiar și orice începător să-și dea seama ce și cum.

Deci, ce este HTML?

Abrevierea în sine înseamnă Hypertext Markup Language (HyperText Markup Language).

Pentru a spune simplu, HTML este un limbaj special de marcare care spune browserului cum să afișeze o anumită pagină web. Adică, în ce font trebuie afișat textul, în ce ordine trebuie aranjate elementele, ce elemente trebuie afișate subliniate etc. Și în funcție de ce element întâlnește browserul, în conformitate cu regulile stabilite în browserul însuși , acest element va apărea astfel afișat. Cu toate acestea, aceste reguli pot fi apoi modificate, dar despre asta voi vorbi în următoarele lecții, care vor fi dedicate CSS.

Propun să începem prin a privi un exemplu de cea mai simplă pagină web care poate fi. Acum nu ar trebui să vă concentrați atenția asupra a ceea ce înseamnă anumite etichete. Există un timp pentru orice, pentru început, trebuie doar să acordați atenție unde este totul în cod și cum se leagă totul de ceea ce este afișat în browser. Luați în considerare un exemplu de document HTML:

Titlul paginii O zi din viața mea Pregătirea pentru un concert

Astăzi m-am trezit devreme pentru că aveam o zi grea înainte. Până la urmă, astăzi trebuie să cânt la un concert în fața a o sută de spectatori. Și ca să mă asigur că totul merge bine, trebuie să repet programul de repetiții

Repetiţie

Totul a mers fără probleme. Nimeni din echipa noastră nu a pierdut ritmul și, după cum s-a dovedit, toată lumea s-a îngrijorat în zadar.

Concert

Toată lumea a evoluat bine, deși cred că a fost un moment în care bateristul nostru și-a pierdut tempo-ul. Dar am ieșit inteligent din situație.

Mai întâi, va trebui să tastați acest text într-un editor de text (cred că cel mai convenabil este Notepad ++) și să salvați fișierul sub numele index .html undeva pe disc. Când faceți dublu clic pe fișierul salvat, veți vedea o pagină care arată cam așa.

Vă rugăm să rețineți că etichetele în sine nu sunt afișate, dar conținutul însuși care se află între ele este afișat. Și de aici puteți concluziona că etichetele acționează ca un element de design în HTML.

Uită-te la codul sursă. După cum probabil ați observat deja, există o mică liniuță înaintea cuvântului „Unul”. Cu toate acestea, browserul nu a ținut cont de el; pur și simplu l-a înghițit în tăcere, de parcă nu ar fi existat niciodată. Mai mult, dacă încercați să puneți mai multe spații între cuvinte, toate vor fi percepute de browser ca un singur spațiu - HTML are această caracteristică.

Și iată un alt sfat: atunci când scrieți cod HTML, antrenați-vă să indentați acele etichete care sunt imbricate în altele. De exemplu, etichetele title și body sunt imbricate în eticheta html. Aceasta înseamnă că atunci când scrieți aceste etichete, nu uitați să le indentați corespunzător. De obicei, acestea se fac folosind două spații sau file - aceasta este o chestiune de gust. De ce este necesar acest lucru? Acum, în acea mică bucată din document pe care am dat-o ca exemplu mai sus, nu există prea multe informații, așa că este destul de problematic să te confuzi acolo. Cu toate acestea, dacă există multe elemente imbricate pe pagină, atunci nimic nu va fi mai ușor decât să te pierzi în acest cod imens și să ai dificultăți în a-ți da seama în ce parte a documentului te afli acum. Așa că este mai bine să te obișnuiești imediat cu un stil bun, atunci îl vei înțelege singur și îți va fi de folos în viitor.

De asemenea, merită să indicați minimul necesar de etichete care ar trebui să fie în documentul HTML. Eu vorbesc despre aceasta parte:

Dar chiar dacă această parte lipsește, majoritatea browserelor vor închide ochii la toate acestea și vor afișa în continuare pagina dvs. Cu toate acestea, un astfel de stil frivol de a scrie cod în care o persoană ratează un numar mare de tags este o scriere proastă, așa că este indicat să aveți toate aceste elemente pe pagina dvs. în orice caz. În caz contrar, acest lucru poate pune o problemă de compatibilitate cu alte browsere, care ar putea afecta în cele din urmă aspectul site-ului dvs. și, ca urmare, traficul.

În plus, puteți scrie comentarii într-un document HTML - acestea sunt doar informații de serviciu care vă sunt destinate exclusiv. De obicei, acestea sunt câteva note importante care servesc ca un memento pentru tine sau doar ceva la care merită să fii atent. Comentariile nu sunt procesate de browser, ceea ce înseamnă că utilizatorul nu le va vedea. De obicei sunt scrise astfel:

Acum să încercăm să ne dăm seama care etichetă din exemplul nostru de mai sus este responsabilă pentru ce.

Eticheta html înseamnă că începe producția de cod html.

șef – secțiune informații de serviciu. Printre altele, există title , care este responsabil pentru textul din titlul ferestrei browserului. Această secțiune poate fi tratată și ca informații pe care dorim să le transmitem browserului despre această pagină.

body – începe partea principală a documentului.

h 1 – antet.

h 2 – subtitrare.

p – paragraful.

Probabil asta e tot! Dacă acesta a fost primul tău document HTML, atunci felicitări! Da, nu arată atât de grozav pe cât ne-am dori. Dar, cu toate acestea, avem materiale la care putem deja să lucrăm. Și în lecțiile următoare, totul va fi și mai interesant și vom atinge încet lucrul cu foi de stil în cascadă (CSS).

• < Назад

Pentru a comenta, trebuie să vă înregistrați.

Am decis să continui acest subiect fierbinte. Am compilat o listă cu cele mai bune resurse pentru învățarea html și css pentru a-i ajuta pe cei interesați să învețe aceste probleme. Îmi amintesc că, când am început ca webmaster, îmi era foarte dor de o astfel de selecție de resurse utile și de înaltă calitate.

Mai întâi câteva definiții:

Html (din engleză „HyperText Markup Language” – limbaj de marcare hipertext) este un limbaj de marcare standard pentru paginile web.

Css (din engleză „Cascading Style Sheets” - foi de stil în cascadă) este o tehnologie de descriere aspect pagini web.

Fără cunoștințe de html și css, rularea site-ului dvs. va fi foarte problematică - nici măcar nu veți putea instala un contor de statistici sau chiar un banner. Nu ar trebui să alergăm la specialiști pentru ajutor sau să creăm subiect după subiect pe forumuri? Trebuie doar să o iei și să o înveți.

Din propria mea experiență, pot spune că html și css pot fi învățate într-o lună. Desigur, nu vorbesc despre înălțimi profesionale - le poți atinge chiar tu, dacă vrei.

În opinia mea, Cel mai bun mod a învăța html, css și alte subiecte, inclusiv promovarea site-ului web, înseamnă să ai propriul tău site web și să exersezi pe el. Apropo, puteți vedea primul site pe care l-am creat pentru hărți pentru jocul Counter-Strike, a cărui creație m-a interesat atunci. Iată hărțile și capturile lor de ecran, create de bătrânul Globator în acele vremuri în care nu știa încă care erau top 10, TCI și PR și se zbătea fără grijă la soare creând hărți tridimensionale :) Am creat acest site într-o lună, învățând html și css în practică.

Nu trebuie să fii un expert tehnic pentru a învăța html și css. De exemplu, sunt în general un umanist și la matematică am primit în mare parte un „2” :) Deci oricine poate învăța html și css. Resursele pe care le-am enumerat sunt de asemenea potrivite pentru ca oricând să le poți folosi pentru a afla orice punct care te interesează în ceea ce privește html și css.

Site-uri web pentru învățarea html și css

Voi începe o selecție de resurse utile pentru a învăța html și css de pe un site pe care l-am folosit eu. Acestea sunt lecții Wild html scrise de Valentina Akhmetzyanova aka Dikarka. Ea a descris toate punctele necesare atât de vesel și interesant încât învățarea html și css cu ajutorul lecțiilor sale se transformă în activitate incitantă. Apropo, puteți citi site-ul pentru blog. Lecțiile sălbatice sunt suficiente pentru a învăța html și css la nivelul necesar pentru a lucra ca webmaster.

Vă puteți imagina cine aș fi dacă aș dezvolta mai departe subiectul Photoshop? Aș fi un adevărat monstru! Dar m-am implicat cu SEO și vegetat aici, tastând aceste litere cu degetele înghesuite de frig :) Glumesc, este și cald aici și mâncarea este bună :)

Noțiuni de bază HTML pentru începători, ceea ce ar trebui să știe acum orice webmaster sau blogger începător. Dacă doriți să învățați cum să creați site-uri web de bază, să înțelegeți codul în sine, să știți ce se află în spatele ce și ce ar trebui să meargă, este pur și simplu imposibil să faceți acest lucru fără cunoașterea elementelor de bază ale limbajului HTML. Pe blogul meu voi avea un întreg lanț de articole pe care le voi dedica acestui subiect de la A la Z, voi descrie fiecare etichetă care este prezentă în document, ce înseamnă și cum să o folosesc corect.

Bazele HTML

Dacă nu știi cele mai elementare lucruri, drumul tău este închis. Consider că fiecare persoană care decide să dezvolte și să creeze site-uri web ar trebui să cunoască și să înțeleagă elementele de bază, în ce constă site-ul în sine, cum funcționează și ce se întâmplă în codul în sine.

Desigur, există destul de multe limbaje de programare, toate sunt complexe în felul lor, dar există unele pe care trebuie neapărat să le cunoști. Dacă doriți să proiectați frumos o scrisoare care să fie trimisă prin poștă, aveți propriul grup VKontakte, un grup în altă parte. în rețelele sociale, același canal de youtube, trebuie să modificați codul de pe oricare dintre motoarele site-ului, Noțiuni de bază trebuie doar să știi.

Am dat doar câteva exemple, de fapt, acum aceste cunoștințe sunt folosite din ce în ce mai des pe Internet. Sunt mai mult un practician decât un teoretician, așa că în articolele mele din această secțiune vă voi arăta exemplele mele despre cum și ce am făcut, pas cu pas. Voi posta atât pagini de exemplu, cât și site-uri întregi.

Un document HTML este cel mai simplu document text, un limbaj de etichetare pe care îl întâlniți în fiecare zi pe Internet. Etichetele descriu structura unui document. Etichetele sunt formatate ca unghiular< >paranteze, în interiorul cărora este scris numele etichetei. Browserul se uită la structura documentului, îl construiește și îl afișează conform instrucțiunilor sale pe monitor, dacă, desigur, ați făcut totul corect.

Întregul proces începe chiar înainte de a vedea imaginea finală. Browserele procesează un document secvenţial, de la început până la sfârşit. Inclusiv tot ce ar trebui să fie pe pagină. Tabele, imagini, scripturi și așa mai departe, cu excepția faptului că acestea includ stiluri CSS.

Bazele pentru începători

Ce este html - dacă te uiți la ce scrie Wikipedia - (HyperText Markup Language) limbaj de marcare hipertext pentru documente. Majoritatea paginilor de pe Internet conțin marcaj de pagină în această limbă. Această limbă este interpretată de browsere, iar textul formatat rezultat este afișat pe monitorul computerului sau pe dispozitivul mobil.

Acest limbaj este în mod inerent foarte ușor și accesibil de învățat. Oricine poate învăța și înțelege elementele de bază. Pentru a folosi un astfel de limbaj, trebuie să cunoașteți și să utilizați descriptori, care sunt numiți și etichete. Cu ajutorul etichetelor este creat un document.

În ce ar trebui să constea structura documentului, ce etichete ar trebui să fie prezente. Să-l defalcăm unul câte unul mic exemplu. Am scris ceva text în MS Office și l-am arătat în această captură de ecran.

Pentru a afișa acest text în browser în același mod în care a fost scris în document, trebuie să îi adăugați un marcaj de pagină, care include câteva etichete. Mai întâi, uită-te la ele, apoi îi voi descrie pe fiecare cine este responsabil pentru ce.

Bun venit pe blogul meu, acum iei o lecție despre elementele de bază ale HTML. Dacă ți-a plăcut acest articol, te poți abona la acest blog pentru a primi articole noi în căsuța ta de e-mail.

Blogul lui Evgeny Nesmelov! website Noțiuni de bază ale html și css pentru începători

În ce etichete constă orice document html, ce include și unde ar trebui să fie scris totul?

< html > < body > < h2 >< / h2 > < p >Bine ați venit pe blogul meu, urmați acum tutorialul despre elementele de bază HTML. Dacă ți-a plăcut acest articol, te poți abona la acest blog pentru a primi articole noi în căsuța ta de e-mail.< / p > < h2 >Blogul Evgeniei Nesmelov! Nesmelov. ru Bazele HTML și CSS pentru începători< / h2 > < / body > < / html >

Orice cod constă din caractere care sunt plasate între paranteze unghiulare. Toate acestea se numesc elemente. Toate elementele constau de obicei din două etichete, de deschidere și de închidere. Vă sfătuiesc să priviți inițial cu atenție etichetele; dacă omiteți una dintre ele și nu o închideți, va trebui să revizuiți părți mari ale codului pentru a găsi eroarea.

Au fost cazuri când a durat mai mult de o zi, o persoană contactează și cere ajutor, nu poate găsi o eroare pe site-ul său, așa că uitați-vă întotdeauna cu mare atenție la ce și unde scrieți. Să folosim acum acest exemplu pentru a ne uita la fiecare element al codului, ce este scris în el, ce înseamnă și ce se întâmplă în final.

Majoritatea etichetelor sunt împerecheate, ceea ce include o etichetă de deschidere și una de închidere. Pe lângă astfel de etichete, există și etichete unice. Etichetele pot merge împreună cu altele, astfel cuibărându-se unele în altele. De exemplu, afișați textul cu caractere aldine și cursive simultan.

Text

< strong > < i >Text< / strong > < / i >

Structura documentului HTML

Permiteți-mi să vă reamintesc încă o dată, trebuie să urmați regulile prezente în document. Acesta este modul în care browserul înțelege ce este pe pagină, secvența acesteia, conținutul și așa mai departe.

O etichetă este o componentă care îi spune browserului web să efectueze o anumită sarcină. De exemplu, prezența unui paragraf, tabel, formular sau imagine.

Atribut - modifică eticheta. De exemplu, puteți alinia un paragraf centrat sau aliniat la dreapta, puteți, de asemenea, să setați locația imaginii pe pagină și așa mai departe.

ÎNTOTDEAUNA închideți etichetele, dacă îl deschideți, asigurați-vă că îl închideți. În caz contrar, va apărea o eroare și documentul dvs. nu se va afișa corect pe pagină. Există și excepții, care nu trebuie uitate.

Este clar necesar să înțelegeți că există un titlu de document și corpul acestuia. Titlul este tot ceea ce este conținut în etichetă. Corpul documentului (), corpul documentului conține tot conținutul paginii. Dacă este necesar să lăsați o secțiune de cod pentru dvs., incluzând astfel aceste etichete în comentarii, eticheta este folosită pentru aceasta. Tot ceea ce se află în interiorul unei astfel de etichete servește drept comentariu și nu este perceput de browsere.

Să începem cu primul. La începutul documentului am deschis o etichetă și la sfârșit am închis-o. Acest cod este prezent în absolut fiecare document; îi spune browserului că tot ce este plasat între aceste etichete este cod HTML. Este rădăcina documentului în sine; tot ceea ce este prezent ulterior în spatele acestei etichete nu mai este inclus în document și nu este perceput de browsere. Chiar la începutul documentului, eticheta este deschisă și la sfârșit trebuie închisă.

Întreaga secțiune a acestei etichete conține toate informațiile tehnice ale documentului. Ca și eticheta anterioară, capul trebuie de asemenea deschis și închis la sfârșit. Aceste informații includ titlul paginii, descrierea, cuvintele cheie ale motorului de căutare și codificarea. Despre codificare puțin mai jos.

Conţinut

< head >Conţinut< / head >

Această etichetă este inclusă în cap și trebuie să fie scrisă în interiorul etichetei. Această etichetă de titlu este obligatorie și trebuie să fie prezentă în fiecare document HTML. În plus, apare ca titlul ferestrei browserului. Lungimea unui astfel de antet nu trebuie să depășească 60 de caractere. Textul unui astfel de antet ar trebui să conțină cele mai complete informații care caracterizează conținutul paginii.

Dacă ați scris „Hello World” în antet, aceasta este informația care ar trebui să fie afișată pe pagină și nu alta. Nu ar trebui să înșeli oamenii și motoarele de căutare, nu le place și, prin urmare, înrăutățiți lucrurile pentru dvs. Informațiile conținute în această etichetă ar trebui să fie relevante pentru conținutul paginii dvs.

După eticheta de titlu obligatorie, există o etichetă meta opțională, dar la fel de importantă. Această etichetă este singură. Folosind această etichetă, setați o descriere pentru pagină (descriere) și cuvintele ei cheie (cuvinte cheie).

În plus, metaeticheta poate conține date despre autorul paginii și alte proprietăți de metadate. Puteți împiedica indexarea întregii pagini de către motoarele de căutare. Setați pagina să se reîmprospăteze automat după 20 de secunde sau după 5 secunde, urmată de trecerea la o altă pagină.

< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

Pot exista mai multe astfel de meta-elemente, deoarece pot transporta informații complet diferite. Alți utilizatori, când deschid pagina în browser, nu văd toate descrierile dvs.; toate acestea rămân ascunse pentru vedere.

Eticheta de stil poate fi folosită și pentru a seta stiluri pe pagină. Dacă utilizați mai multe stiluri CSS diferite, atunci este recomandabil să le setați într-un fișier separat. Dacă trebuie să specificați mai multe dintre ele, toate acestea pot fi specificate direct în documentul html.

.bază ( lățime: 100px; culoarea fundalului: #000; înălțimea: 150px; culoare: #fff; )

< style type = "text/css" > Baza( lățime: 100px; fundal - culoare: #000; înălțime: 150px; culoare: #fff;

Sau adăugați stiluri în mod specific unei etichete; pentru a face acest lucru, trebuie să adăugați un element de stil în interiorul etichetei în sine. Această etichetă trebuie utilizată în interiorul unui container care stabilește stiluri pentru pagină. Puteți folosi mai multe astfel de etichete, aceasta nu va fi o eroare.

Un pic similar cu eticheta anterioară, eticheta de legătură vă permite să setați stiluri pentru un document care se află într-un alt fișier. Cu alte cuvinte, puteți atașa o foaie de stil CSS completă, care constă din multe proprietăți, unui document existent. Astfel, reduceți dimensiunea documentului, care în cele din urmă se va încărca și se va deschide mai repede pe un computer sau dispozitiv mobil cu viteză scăzută a internetului.

Puteți conecta mai mult de un fișier, nu există restricții. Nu este nevoie să închideți o astfel de etichetă. Dacă totul este făcut corect, anumite stiluri dintr-un fișier separat vor fi încărcate în documentul dvs. Această etichetă poate fi adăugată la elementele de bază ale html și nu uitați de existența sa. Rezultatul este o imagine ca aceasta:

< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" >

Folosind eticheta de script, puteți conecta diferite scenarii (scripturi) la un document. Este necesară prezența etichetei de închidere. Scriptul în sine poate fi localizat la începutul documentului, în interiorul sau la sfârșit.

Spune browserului că orice lucru plasat între aceste etichete ar trebui să apară în fereastra browserului dvs. Iată principalele etichete care pot fi prezente în absolut fiecare document. Eticheta body servește ca corp principal al paginii, care include tot conținutul acesteia. Este recomandabil să deschideți această etichetă și să nu uitați să o închideți la sfârșitul documentului.

Titlurile paginii h1 h2 h3

Să mergem mai departe, vedem o etichetă care se deschide și se închide în același mod. Această etichetă denotă titlul principal al textului; în cele mai multe cazuri, sub titlul H1 se află titlul paginii. De fapt, există doar șase rubrici de date. . Sunt folosite și în SEO, dar acesta este un subiect ușor diferit. Cu siguranță voi evidenția un articol pentru asta și voi oferi descriere detaliata pentru ei, abonați-vă la actualizările blogului ca să nu pierdeți nimic.

Prezența unor astfel de titluri în articol va ajuta rol important la avansarea paginii. În plus, utilizarea lor vă oferă o structură clară a paginii, titlul, subtitlurile, evidențierile, subparagrafele și așa mai departe. Folosește-le întotdeauna și pune-le în practică. Pe multe CMS, cum ar fi WordPress, când scrieți text, puteți vedea „titlu 1”, „titlu 2”, „titlu 3” și așa mai departe. Ei sunt cei responsabili pentru h1, h2 și h3.

Dacă scrieți textul corpului dintr-un paragraf nou, scrieți o etichetă

La început și închideți-l la sfârșit

. Marcarea unui paragraf în html este echivalentă cu crearea unui nou paragraf într-un document MS Word. Nu am adăugat nimic nou în document. Dar acest lucru nu este tot ceea ce ar trebui să fie prezent într-un document html. Să ne uităm la un alt exemplu, descrierea va veni puțin mai târziu.

document HTML

Acest text va fi aldine, iar acesta este tot cu caractere cursive

< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >document HTML< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

Elemente de bază Cap și Titlu

Fiecare document conține un titlu și un element de titlu. Prima, care vine imediat după prima etichetă. Această etichetă conține toate informațiile despre pagină, conține și elementul. Titlu – informații despre titlul paginii, cu alte cuvinte titlul paginii, numele acesteia. În titlu indicați numele corect al paginii prin care utilizatorul vă va căuta printr-un motor de căutare, foarte punct important. Ambele elemente trebuie să fie deschise și, de asemenea, închise. Fiecare element este închis cu semnul „/”. Rezultatul este o imagine ca aceasta.

Titlu și conținutul paginii

< / html >

După cum puteți vedea, nu este nimic complicat. Iată cele mai de bază etichete care ar trebui să fie prezente în fiecare document html. Nu uitați să închideți fiecare dintre ele, altfel browserul nu va putea percepe imaginea completă a codului. Trebuie să știi și să-ți amintești mereu acest lucru. Apoi începeți să inserați text, imagini, videoclipuri și așa mai departe. Dar asta va fi deja în alte articole.

Editor Notepad++

Pentru a lucra cu codul, utilizați programul Notepad++. Este gratuit și nu este greu să-l găsești pe Internet. Foarte convenabil pentru înțelegerea oricărui cod; de asemenea, afișează convenabil etichetele de deschidere și de închidere. Suportăm sintaxa a peste 40 de limbaje de programare. Exact ceea ce aveți nevoie pentru a învăța elementele de bază ale html.

Blocnotesul este superior în toate privințele unui blocnotes obișnuit. Pentru confort, simplitate și învățare maximă, acest editor trebuie să fie instalat inițial pe computer. Cel mai important avantaj și comoditate este că editorul Notepad++ afișează indicii atunci când scrieți cod, ceea ce vă face munca mult mai rapidă și de mai bună calitate.

element DOCTYPE

Fiecare document trebuie să conțină, de asemenea, următorul element doctype. De ce este nevoie și ce ar trebui să fie în el. De obicei, oamenii nu sunt foarte pasionați de aceste linii, le copiază în documente și lucrează calm. Aceste elemente spun browserului ce versiune de html este utilizată în document, care este descrierea paginii, ce codificare este utilizată, ce cuvinte cheie sunt incluse, cine este autorul și cum se numește pagina.

Ele sunt de obicei plasate chiar la început. Există mai multe opțiuni și toate diferă unele de altele, voi scrie un exemplu care este folosit cel mai des. Acest gol poate fi folosit ca șablon gata făcut. În continuare va fi o descriere clară a fiecărei linii, nu ar trebui să existe probleme cu aceasta.

Pe scurt, într-un limbaj clar, despre elementele de bază ale html: Această linie spune browserului că acest document este versiunea XHTML 1.0, utilizată Limba englezăși toată mizeria asta se află la această adresă. Apoi, în metaeticheta indicăm codificarea care este utilizată. Cel mai des folosit este Windows 1251.

Descriere - se atinge tema SEO, una dintre cele trei tag-uri principale care trebuie sa fie prezente in absolut fiecare document; aceasta tag indica descrierea paginii. Ce este scris pe această pagină, o scurtă descriere, nu mai mult de două propoziții. Eticheta de cuvinte cheie acoperă și subiectul SEO, această etichetă este necesară. Conține cuvinte cheie pe care utilizatorii de internet le vor folosi pentru a vă găsi prin motoarele de căutare.

Eticheta de titlu conține numele documentului în sine, titlul acestuia, pe care îl vedem în browser. Probabil cea mai importantă etichetă din întregul document, care are cel mai mare impact asupra promovării paginii. Articolul despre adăugarea și proiectarea descrie această etichetă mai detaliat.

Cu ce ​​trebuie să-ți amintești această lecție despre elementele de bază ale html:

Aproape toate etichetele se deschid și se închid;

Documentul începe cu eticheta ;

Prezența etichetei;

Prezența etichetei;

Structura clară a documentului html.

Toate paginile principale ar trebui să fie întotdeauna numite index. Așa este acceptat și toată lumea este obișnuită, indiferent de extensia de fișier, poate fi html sau php. Întotdeauna se numește așa.

Urmăriți un videoclip despre elementele de bază ale HTML de la Webformyself.

Limbajul de marcare hipertext, elemente de bază și structură. Voi încerca să descriu toate acestea și multe altele pe blogul meu. În primul rând, vor fi scrise informații utile pentru începători, va fi oferit un exemplu de cod și va fi oferită posibilitatea de a descărca exemplul în sine împreună cu pagina finală.

Salutari tuturor celor care inca sunt interesati de aceste articole, si in general de acest blog in ansamblu :) Se intampla ca nu am mai scris de foarte mult timp. Nu voi găsi scuze acum; voi scrie un articol separat pentru asta puțin mai târziu. Și acum, la cererea populară, „CSS de la zero: prima prelegere.” Permiteți-mi să vă spun mai întâi ce veți învăța din această prelegere: „ce este CSS?”, „pentru ce este?”, „cum să îl utilizați ?”.

Ce este CSS?

CSS este un limbaj de stilizare responsabil pentru afișarea elementelor, și nu numai într-un document HTML (de exemplu, CSS este folosit la definirea proprietăților elementelor în Qt). Îți amintești de prelegeri? Deci, dacă înveți CSS la nivelul corespunzător, vei pierde complet nevoia de a folosi atribute suplimentare pentru elemente. Apropo, din moment ce te hotărăști să înveți CSS, ar fi bine să știi că aceasta este o abreviere și înseamnă Foi de stil în cascadă. CSS este o parte integrantă a aspectului bazat pe blocuri, despre care am menționat-o în ultima prelegere despre HTML de la zero.

Pentru ce este CSS?

CSS este folosit pentru a da personalitate paginii sau, mai general vorbind, site-ului. CSS ajută la optimizarea structurii site-ului, la reducerea ponderii paginilor și, de asemenea, va face mai ușoară schimbarea aspectului site-ului (voi da toate motivele și faptele pentru aceasta în cursul următoare).

Cum se folosește CSS?

Există interogări ciudate în partea de sus: „Cum se instalează CSS?” , „Cum se creează CSS?” , relaxează-te, CSS-ul a fost creat fără noi și nu trebuie să instalezi nimic :) Totul este mai simplu decât ar părea. Să luăm o pagină HTML simplă:

Pagina cu CSS * ( fundal:#333; culoare:#fff; ) Text simplu

Totul este mai simplu decât ar părea, nu? Acest lucru se datorează faptului că CSS este integrat în toate browserele moderne. CSS este foarte simplu și vizual, ceea ce vă permite să vă obișnuiți rapid cu el și să vă îndrăgostiți de el :)