Meniul
Acasăexcela

Cum se creează corect o pagină web. Crearea unei pagini HTML în Notepad: explicații pentru manechine. Materiale ale cursului la distanță „Tehnologia informației și educație”

Instrucțiuni

Copiați etichetele de mai jos în blocnotes, acestea sunt necesare pentru a le crea.






Continuați cu crearea cadrului site-ului. Cadrul este creat folosind tabele html. Acum vom folosi următorul cadru: un antet în partea de sus, o bandă similară în partea de jos, iar foaia principală va fi împărțită în două jumătăți. Copiați codul cadru pe notepad.


meniul site-ului

Zona sub



Antetul site-ului
Subsolul site-ului

Specificați dimensiunile celulelor. Încercați să faceți mărimile pe care le-am indicat, apoi decideți de ce mărimi aveți nevoie. Introduceți dimensiunile în codurile cadrului (acesta este parametri de înălțime– înălțime și lățime – lățime).

Selectați antetul, fundalul și subsolul site-ului, lipiți-le în etichetele necesare. Imaginile sunt introduse folosind o etichetă . Acum, inscripțiile „Slide Header” și „Site Footer” ar trebui să dispară.

Conectați toate imaginile introduse împreună. Pentru a face acest lucru în etichetă

în tabelul principal, introduceți cellpadding=0 și cellspacing=0.

Eliminați spațiul dintre antet și spațiul principal al site-ului. Pentru a face acest lucru, introduceți parametrul de aliniere în , așa arată 

Nu uitați să marcați în cod care dintre ele și care conține link-uri. Acest lucru va ajuta la conectarea paginilor între ele. Asa ar trebui sa arate
Acasă,
Legături.

Nu uitați să adăugați etichete
, sunt necesare pentru a trece pe o altă linie.
Primul site de două pagini este gata!

Video pe tema

Articol înrudit

Surse:

  • site-ul gata în notepad

Astăzi, pe internet există o sumă gigantică diverse internet site-uri. Există o părere că creația site-uri aceasta este foarte proces dificil, Cu toate acestea, nu este! Învață să scrii cel mai simplu cod, de exemplu, pentru un „Site de carte de vizită” (un site de 2 - 3 pagini creat numai cu Ajutor HTML) oricine poate. Oricine își poate crea propria reprezentanță personală în world wide web. De obicei pentru a crea site-uri utilizare programe speciale, acest lucru se poate face în mod normal Notepad. În acest din urmă caz, veți avea nevoie de cunoștințe limbaj HTML(HiperText Limbajul de marcare- „limbaj de marcare hipertext”), precum și un limbaj de descriere aspect Document CSS (Cascading Style Sheets).

Instrucțiuni

Pentru a face site-ul va trebui să scrieți cod pentru fiecare pagină, Notepad va servi ca editor pentru scrierea acestui cod. De exemplu, doriți un site web cu o singură pagină. și notează în ea codul HTML al acestei pagini, prezentat în figură cod simplu.

Pentru a-l pregăti, trebuie să salvați textul scris în format HTML. Numele fișierului trebuie scris cu litere latine, nu trebuie să conțină semne de punctuație, spații sau simboluri matematice. Puteți utiliza semnul și numerele „_” în numele fișierului. Fișierul trebuie salvat cu extensia .html sau .htm, de exemplu page.html Rezultatul poate fi obținut pe orice Internet, rezultatul este afișat în figură.
Folosind un bloc de note, puteți crea pagini mai complexe din mai multe pagini folosind limbi speciale programare.

Surse:

  • crearea de site-uri web în exemple de notepad

ÎN sisteme relaționale gestionarea bazei de date, toate informațiile stocate sunt prezentate în mese diferite. Acest lucru asigură eliminarea redundanței datelor. Prelevarea de probe și lucrul cu informatie necesaraîntr-o astfel de bază de date este implementat, printre altele, folosind un mecanism de legare a tabelelor. Conexiunea dintre două tabele se realizează printr-un câmp comun în ambele și este specificată în schema de date a bazei de date curente. Mai mult, pentru câmpurile tabelelor legate este necesară setarea unui anumit tip de date. În caz contrar, crearea unei relații între tabele va fi incorectă sau nu va avea loc.

Vei avea nevoie

Instrucțiuni

Completați câmpurile din tabel cu date. Cu toate acestea, rețineți că pentru a lega datele între câmpurile de tabel, acestea trebuie să aibă un tip de date similar. Când se creează un câmp unu-la-mulți, câmpul poate fi de tip Counter. În acest caz, câmpul corespunzător celui de-al doilea Mese trebuie să fie sub formă numerică. Setați câmpul cu tipul de contor ca câmp cheie.

Deschideți schema de date a bazei de date. Pentru a face acest lucru, selectați din meniu Accesați DBMS„Serviciu” - elemente „Schema de date...”. Pe ecran va apărea o zonă care conține toate elementele asociate bazei de date. Dacă zona este , se va deschide automat fereastra Adăugați tabele. Altfel se numeste de la meniul contextual aceasta zona.

În această fereastră, în listele derulante, specificați numele câmpurilor dorite dacă nu ați putut să le setați precis cu mouse-ul. Activați casetele de selectare a tuturor articolelor pentru a asigura integritatea datelor și modificarea în cascadă a datelor din tabelele asociate.

Tipul de relație care este setat va fi afișat în partea de jos a ferestrei. Există trei tipuri de relații: unu-la-unu, unu-la-mulți și mulți-la-mulți. Dacă ați solicitat o conexiune de alt fel pentru tabelele legate decât cea reflectată în fereastră, înseamnă că nu ați setat corect tipurile de date ale câmpurilor din tabelele dvs.

Pentru a stabili o conexiune, faceți clic pe butonul „Creare” din fereastră. În zona Schema de date, va apărea o relație între cele două tabele de la un câmp la altul. Tipul de conexiune va fi afișat schematic în fereastra pe linia cu numărul 1 și un semn infinit, indicând o conexiune „la-mulți”. Salvați baza de date. Acum doi Mese sunt conectate în raportul specificat.

Video pe tema

Crearea propriului site web nu va părea atât de dificilă pe cât pare la prima vedere, dacă înțelegeți elementele de bază ale limbajului HTML și creați cel mai simplu site web paginăîn mod obișnuit blocnotes, care se află pe fiecare computer. Este de la crearea paginilor HTML în blocnotes toți programatorii web au început să învețe construirea de site-uri web și și tu poți stăpâni această știință simplă.

Instrucțiuni

Salvați Document text, dar nu în format text, iar în format html - la salvare, redenumiți fișierul în index.html. Deschideți fișierul rezultat folosind orice browser - veți vedea un gol pagină, pe care va fi tipărit titlul site-ului introdus la pasul anterior.

Acum puteți deschide oricând fișierul creat și puteți continua să editați codul pentru completare ulterioară. Aflați etichetele HTML de bază pentru formatarea unei pagini. Etichetă
utilizați pentru a încheia textul la o linie de mai jos și eticheta Și utilizați pentru a defini titlul paginii. O etichetă importantă este - trebuie să conțină corpul documentului.

Deci, după ce ați creat baza paginii, începeți să o umpleți cu text. Luați orice pe care doriți să le inserați în site, copiați-l și inserați-l imediat după etichetă în document. Salvați fișierul.

Acum formatați textul - împărțiți-l în paragrafe folosind eticheta

Și aliniați-l folosind parametrul de aliniere cu valorile stânga, centru, dreapta, justificare. În mod implicit, totul în HTML este aliniat la stânga. Unii mai ales Puncte importanteși evidențiați titlurile cu aldine, incluzând o parte a textului în etichete. Pentru a face textul italic, includeți-l în etichete .

Pentru a-l face să arate mai luminos și mai atractiv, adăugați orice imagine în text. Selectați o fotografie potrivită, reduceți-o în orice editor și salvați-o într-un folder cu fișiere pentru viitorul site. Introduceți o etichetă la locul din cod în care ar trebui să fie amplasată ilustrația. În loc de imagine, intrați Numele complet imaginea dvs. salvată. Dacă doriți, aliniați imaginea folosind parametrul de aliniere deja descris mai sus. Salvați documentul și deschideți-l pentru a vă asigura că imaginea și textul sunt pe pagină.

Surse:

  • cum să creați o pagină web folosind notepad

Pentru a crea o pagină web simplă, nu sunt necesare echipamente sau abilități speciale. Suficient pentru a dobândi program standard Notepad, care este de obicei instalat pe toate computerele Windows.

2016-11-06


Creați o pagină web și găzduiți-o pe un server web local

Buna draga vizitatoare!

Acest articol este despre cum să creați o pagină web și să o găzduiți pe o gazdă virtuală de server web local.

Și, pentru aceasta, avem nevoie, așa cum se arată în imagine: un server web local, editor de text, limbaj de descriere a structurii Pagini web HTMLși limbaj de stil CSS.

  • Crearea unei gazde virtuale pe un server web local
  • Crearea unui fișier de pagină web și testarea serverului web local
  • Scheletizarea unei pagini HTML
  • Fișiere sursă site-ul

Crearea unei gazde virtuale pe un server web local

O pagină web tipică este fisier textîn format HTML, de aceea o astfel de pagină este adesea numită și pagină HTML. Și înainte de a începe, în primul rând vom crea o gazdă virtuală pe un server web local instalat anterior, unde în viitor vom testa viitorul nostru site web.

Aici, vom lua în considerare lucrul cu un server web local folosind exemplul de asamblare a programelor Denwer (Denver). Dar acest lucru nu este important, deoarece toate acestea se pot face pe alte produse software similare.

După instalarea Denver, directorul „WebServers/home/” conține deja gazde virtuale configurate, cum ar fi „localhost”, „test1.ru”, „custom”. Să creăm o nouă gazdă pentru site-ul nostru și să o numim, de exemplu, „newsite.local”, adică prin acest nume că acesta este un site nou și este găzduit pe server local(din cauza unei posibile confuzii în viitor, nu ar trebui să atribuiți nume de gazdă reale zona de domeniu, cum ar fi „ru”, „com”, etc.


În acest folder „newsite.local” vom crea dosar nou„www”, în care vom plasa fișierele site-ului și, de asemenea, vom copia aici de la gazde existente, foldere auxiliare „subdomeniu” și „cgi”.


După ce operațiunile au fost finalizate, trebuie să reporniți serverul, astfel încât să facă modificările corespunzătoare în funcționarea acestuia. Acest lucru se poate face prin intermediul comenzii rapide „Reporniți Denwer”, care poate fi creată la instalarea Denver, sau (dacă nu există) prin dosar special Restart.exe în folderul „denwer”.

Crearea unui fișier de pagină web și testarea serverului web local

Ei bine, acum să trecem la crearea unei pagini web. Pentru a face acest lucru, în primul rând, folosind editorul de text Notepad++, vom crea un fișier „index.html”, care va conține codul nostru. pagina principala. Cum se instalează un editor de text este prezentat în articolul Instalarea editorului de text nodepad++.

Trebuie remarcat faptul că la deschiderea unui site cu o adresă care indică Numele domeniului, fără alte directoare, browserele deschid întotdeauna fișierul aflat în directorul rădăcină sub denumirea de „index”. Prin urmare, vom începe să creăm pagini ale site-ului nostru din acest fișier. ÎN în acest caz, va avea extensia „html” deoarece codul său se va baza pe HTML.

Dar, înainte de asta, pentru a evita alte neînțelegeri inutile cu afișarea paginilor HTML, este recomandabil să verificați codificarea care este setată în Editor de notepad++ la deschiderea documentelor noi.

Acest lucru se poate face astfel: prin meniul „Opțiuni”, deschideți fereastra „Setări” și în parametrii „ document nou" verificați dacă codarea universală este setată la „UTF-8 fără BOM”, așa cum se arată mai jos.


Acum să creăm fișier nou prin meniul „Fișier” făcând clic pe butonul „Nou”. În noua filă care se deschide, pentru a verifica funcționarea serverului web și corectitudinea setărilor de codare, scrieți o frază, de exemplu, „Verifică” (o astfel de verificare nu este necesară la crearea unei pagini HTML și este oferită doar aici pentru o mai bună înțelegere a acțiunilor în curs).

Acum să salvăm acest fișier în folderul „www” al gazdei nou create „newsite.local”. Pentru a face acest lucru, prin meniul „Fișier”, selectați „Salvare ca”, introduceți numele fișierului „index.html”, indicați folderul doritși faceți clic pe „Salvați”.


În continuare, să verificăm cum este afișată pagina noastră. Pentru a face acest lucru, actualizați browserul introducând numele gazdei noastre „newssite.local” în câmpul său de adresă. Dacă totul este făcut corect, pe ecran ar trebui să apară o inscripție cu niște hieroglife, așa cum se arată în captură de ecran (observ încă o dată că astfel de detalii sunt discutate aici doar pentru cei care fac acest lucru pentru prima dată, pentru a arăta clar ce se întâmplă de obicei când se face incorect). În general, puteți sări peste această verificare și treceți direct la pasul următor).


Astfel de semne ciudate au apărut din cauza unei nepotriviri între codificările browserului și pagina afișată. Pentru a preveni acest lucru în viitor, suplimentar Fișier de configurare„.htaccess” al serverului web specifică codificarea dorită.

În acest caz, browserele vor folosi întotdeauna codificarea corectă atunci când deschid paginile site-ului nostru și, în consecință, le vor afișa corect.

Pentru a face acest lucru, trebuie să creați un nou fișier în editorul Notepad++ în același mod ca și cu „index.html” și să-l salvați în același folder sub numele „.htaccess”. În acest caz, în fișierul în sine trebuie să scrieți rândul următor„AddDefaultCharset UTF-8”, așa cum se arată în captură de ecran.


Ei bine, acum, dacă actualizați din nou browserul cu adresa gazdei noastre „newsite.local”, vă puteți asigura că textul pe care l-am scris inițial în fișierul „index.html” apare pe pagină.

Aceasta înseamnă că pagina noastră găzduită pe gazda serverului web creat este afișată corect atunci când este deschisă de un browser, ceea ce confirmă munca corecta server web și instalare corectă codificări.

Dacă acest lucru nu funcționează, atunci înainte de a continua pasii urmatori, trebuie să reveniți și să remediați problema.


Scheletizarea unei pagini HTML

După ce am verificat că serverul web local funcționează și afișare corectă pagina noastră web, să trecem la completarea acesteia cu cod HTML.

Dar, pentru a scrie pagini HTML, trebuie mai întâi să vă familiarizați cu elementele de bază ale limbajului de descriere a structurii paginilor web HTML.

Există un numar mare de diverse cărți de referință, cursuri video și altele materiale educaționale, care ajută la stăpânirea limbajului HTML. Aici pe site există și o serie de cursuri video dedicate acestui subiect, atât plătite, cât și opțiuni gratuite. De exemplu, puteți folosi cursul video gratuit „HTML Basic Course”, care acoperă toate etichetele și atributele HTML de bază în detaliu.

Fără îndoială, cursurile video care arată și explică clar materialul de instruire sunt foarte utile pentru familiarizarea și înțelegerea generală a subiectului de studiu. Dar, cu toate acestea, nu sunt întotdeauna convenabile pentru a fi utilizate ca sursă de referință de informații atunci când trebuie să clarificați periodic ceva în timp ce lucrați.

Acest lucru se aplică pe deplin pentru scrierea paginilor HTML, deoarece nu va trebui să parcurgeți videoclipul pentru fiecare problemă, și mai ales nesemnificativă, în căutarea informațiilor necesare.

Prin urmare, atunci când creați pagini web este convenabil să folosiți cărți de referință. Ce cărți de referință sunt cel mai bine de folosit? Este foarte dificil să răspunzi fără ambiguitate la această întrebare, probabil că fiecare are propriile preferințe, mai ales că există un număr mare de ele pe Internet.

În numele meu, îl pot recomanda pe acesta resursă informațională, Cum director online„http://www.puzzleweb.ru/html/all_tags.php”. Particularitatea sa este că oferă nu numai suficient de detaliate informații generale pe principalele limbi utilizate în construirea site-ului web, cum ar fi HTML, CSS, JavaScript, PHP, dar conține secțiuni de auto-instruire care explică foarte concis, dar în același timp destul de informativ, elementele de bază ale acestor limbi cu exemple ilustrative .

De asemenea, puteți observa și resursa de referință pe Internet „https://webref.ru/”, care conține destul de informatii complete De versiuni moderne HTML5 și CSS3, care include și cursuri de pregatire asupra tehnologiilor web. La aceasta, puteți adăuga cartea de referință „http://htmlbook.ru/html/”, din care puteți învăța și multe Informatii utileși poate fi util și atunci când scrieți pagini web.

În general, fiecare va alege cu siguranță pentru sine, din toată varietatea materiale de referinta, cele mai convenabile și potrivite cărți de referință pe aceste probleme.

Acum, să trecem la crearea scheletului paginii HTML, adică. la formarea blocurilor sale principale. Mai jos este prezentat cum va arăta cadrul nostru, construit pe baza aspectului de design al site-ului creat mai devreme în articolul Crearea unui aspect de design de pagină web.

  2. "utf-8" />

    <span><b>Titlul paginii</b> </span>

    "Descriere" continut = „Scurtă descriere a conținutului paginii” >

  4. "invelis" >

    Un capac

    Rotator

    Conținut principal

    Bara laterală

    subsol

Pentru a scrie codul HTML al cadrului în fișierul „index.html”, trebuie să îl deschideți în editorul de text Notepad++ și să tastați codul folosind exemplul dat sau să îl copiați acolo.

În plus, la finalul fiecărui articol, începând cu acesta, va fi atașată o arhivă a fișierelor sursă ale folderului „www” al site-ului în curs de creare pentru starea curentă. Prin urmare, puteți pur și simplu să utilizați aceste materiale suplimentare și să descărcați fișierul „index.html” din linkul oferit la sfârșitul acestui articol.

Așa ar trebui să arate codul HTML al fișierului „index.html” în editorul de text Notepad++, compilat în conformitate cu exemplul dat.


Să aruncăm o privire mai atentă la ceea ce este prezentat în figură.

Prima linie este foarte importantă, deoarece îi spune browserului tipul de document, astfel încât să îl poată înțelege corect. Necesitatea acestei intrări se datorează faptului că HTML există în mai multe versiuni, care diferă nu numai prin prezența sau absența oricăror elemente, ci și prin sintaxa limbajului.

Prin urmare, dacă nu există o astfel de indicație, browserul pur și simplu va „deruta” atunci când procesează pagina. Această linie, în special, indică faptul că documentul a fost creat în versiunea HTML 5.

Mai multe detalii despre elementpoate fi găsit în cartea de referință htmlbook.ru la link „http://htmlbook.ru/html/!doctype”.

În continuare, există elemente numite „etichete” - simboluri cuprinse între paranteze unghiulare. Aceste elemente sunt, într-un fel, constructe de limbaj care îi spun browserului ce să facă și sunt în esență baza limbajului HTML.

Etichetele pot fi formatate sau speciale. Etichetele de formatare sunt responsabile pentru crearea elementelor părții vizibile a paginilor, cum ar fi paragrafe, titluri, linkuri, imagini etc.

Sunt necesare etichete speciale pentru a transmite browserului și motoarelor de căutare informații despre document, așa-numitele metadate, de exemplu, în ce codificare este realizată pagina, ce titlu ar trebui să aibă, ce foi de stil ar trebui incluse etc.

În plus, etichetele sunt împărțite în etichete simple și duble. Etichetele împerecheate constau întotdeauna din două părți, în prima parte se deschid, în a doua, indicată de simbolul „/”, se închid (etichete de deschidere și de închidere). Ceea ce este între ele va fi procesat în conformitate cu regulile de utilizare a acestui element.

Deci rândurile 2 și 17 conțin eticheta „html”, care reprezintă în esență un container cu tot conținutul paginii. Această etichetă este întotdeauna specificată într-o astfel de ordine încât orice cod HTML trebuie să fie în interiorul acestui container.

Următoarea parte a cadrului este zona „cap”, unde sunt plasate toate etichetele speciale. Această zonă acoperă rândurile de la 3 la 7. Informațiile conținute în această zonă sunt auxiliare și nu sunt afișate de browser, cu excepția antetului „titlu”, care este afișat în fila browser.

Ca astfel de etichete speciale, linia 4 conține o metaetichetă cu atributul „charset”, indicând codificarea „utf-8”, linia 5 conține eticheta „title”, care definește titlul documentului, iar linia 6 conține un meta. etichetă cu atributele „nume” „și „conținut”, menite să descrie pe scurt conținutul paginii.

În viitor, pe măsură ce aspectul progresează, zona „capului” va fi completată cu alte elemente speciale.

Următoarea zonă „corp”, care se întinde pe liniile de la 8 la 16, este destinată să conțină elemente de formatare responsabile pentru crearea părții vizibile a paginilor web.

În conformitate cu aspectul designului, în cazul nostru, zona „corp” constă din cinci blocuri principale: „Header”, „Rotator”, „Main Content”, „Sidebar” și „Footer”, unde:

  • a 10-a linie conține blocul „Header” (elementul „header”);
  • în a 11-a linie - blocul „Rotator” (el „secțiune”);
  • în a 12-a linie - blocul „Conținut principal” (el-t „principal”);
  • în linia a 13-a - blocul „Sidebar” (el „aside”);
  • în linia a 14-a - blocul „Demisol” (el „footer”);

În același timp, blocurile plasate aici sunt prezentate într-o formă foarte mărită. De exemplu, „header” și „footer” vor include și (în conformitate cu aspectul designului) un meniu de navigare, iar „principal”, la rândul său, va fi împărțit în blocuri care conțin articole și comentarii. Și această împărțire în blocuri mai mici va continua până când toate markupurile paginii HTML vor fi complet finalizate.

În ceea ce privește eticheta împerecheată

, situat în rândurile 9 și 15, apoi îndeplinește aici funcția unui bloc „înveliș” pentru a seta lățimea minimă și maximă a paginii în limitele specificate ale aspectului cauciuc. Această etichetă i s-a atribuit atributul de clasă „wrapper”, astfel încât să îi poată fi atribuite în continuare stiluri CSS adecvate.

Vă rugăm să rețineți că în trecut, înainte de HTML 5, elementele „div” la nivel de bloc erau utilizate în mod obișnuit pentru a crea un cadru fir. Le puteți folosi în continuare în aceste scopuri, în această formă site-urile vor putea funcționa în continuare normal.

Prin urmare, acum că HTML5 a ocupat pe bună dreptate locul principal în dezvoltarea site-urilor web, vom încerca încă de la început să ținem pasul cu vremurile și, dacă este posibil, să folosim elemente noi ale acestui limbaj.

Dacă acum deschideți pagina creată într-un browser, puteți vedea doar cuvintele care sunt conținute în etichetele situate în containerul „corp”. Textul situat în zona „cap”, așa cum s-a menționat mai sus, nu va fi afișat. Excepție este antetul „titlu” (în cazul nostru „Titlul paginii”), care va fi vizibil în fila browser.


Cu aceasta, vom finaliza această etapă de creare a site-ului web, iar în articolul următor vom marca pagina web în conformitate cu aspectul de design creat anterior.

Fișierele sursă ale site-ului

Fișierele sursă ale site-ului cu actualizările care s-au făcut în acest articol pot fi descărcate din atașat materiale suplimentare.

Acum câteva cuvinte despre etichetele pe care le-am folosit pentru a face această pagină.

Descrierea etichetelor html din exemplu

1. - aceste etichete trebuie să fie prezente pe fiecare pagină web. Ei spun browserelor și motoarelor de căutare că aceasta este o pagină HTML.

Orice pagină html are următoarea structură:

... Etichete de titlu ... ... Corpul paginii ...

2. - intre aceste tag-uri se afla tot continutul vizibil al paginii.

4. - între aceste etichete este scris titlul paginii, care este afișat chiar în partea de sus a browserului. Apropo, atunci când cauți ceva în motoarele de căutare, primul lucru care se afișează este numele paginii. Etichetă adesea prescurtat la „titlu”. Vă sfătuiesc să citiți articolul: cum să creați o etichetă </p> <p>Acum să trecem la etichetele care se află în corpul paginii html (în interiorul <body>Și</body> ).</p> <p>5. <center></center>- aceste etichete centrează totul în interiorul lor. În acest caz, centrul va fi centrul ecranului. Este recomandat să nu mai utilizați aceste etichete în viitor.</p> <p>6. <h1></h1>este una din clasa etichetelor de antet <h1>..<h6>, care conține de obicei titlul paginii. De exemplu, această pagină are eticheta de titlu „Exemplu de creare a unei pagini html”.</p> Notă <p>Aceste etichete au o mare greutate în clasarea site-urilor, așa că trebuie folosite cu atenție și înțelepciune.</p> <p>Când compuneți codul html, trebuie să urmați o regulă simplă: eticheta de titlu trebuie să fie pe primul loc <h1>, iar apoi pot merge mai departe <h2> , <h3>etc. Principalul lucru este că nu se întâmplă la început <h2>, Apoi <h1>, Apoi <h3>și așa mai departe. Trebuie să existe o ierarhie strictă. Titluri <h2> , <h3>și așa mai departe. poate mult.</p> <p>7. <br/>este o singură etichetă care nu necesită o etichetă de închidere. Se trece la linia următoare. În exemplul meu, am scris două etichete individuale la rând pentru a trece la rândul următor de două ori.</p> <p>8. <span><img src='https://i2.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy loading=lazy> </span> este o singură etichetă care afișează o imagine.</p> <ul><li>src este un parametru obligatoriu care specifică adresa imaginii (în loc de URL_IMAGE trebuie să introduceți adresa unde este stocată imaginea). <br><u>Notă</u>: <ul><li>Dacă imaginea se află în același folder cu pagina dvs. html, atunci este suficient să scrieți numele imaginii, altfel trebuie să introduceți fie un URL absolut, fie relativ;</li> <li>Nu uitați să specificați extensia imaginii. De exemplu, .jpg, .gif, .jpeg.</li> </ul></li> <li>alt sau titlu - puteți scrie o descriere a imaginii dvs. în acești parametri. Când treceți mouse-ul peste imagine, va apărea această descriere. Acești parametri sunt importanți pentru promovarea site-ului web, în ​​special în căutarea de imagini. Dacă imaginea nu s-a încărcat, va fi afișat acest text, ceea ce este și un plus.</li> </ul><p>9. <font></font>- aceste etichete sunt create pentru a schimba fontul, fundalul, dimensiunea etc. Pe scurt, tot ce are legătură cu formatarea textului poate fi configurat într-o singură etichetă. Această etichetă are destul de multe atribute, pe care le voi discuta într-o lecție separată.</p> <p>Notă: - etichetă similară.</p> <p>Există, de asemenea, o proprietate de font CSS unde puteți seta toți acești parametri.</p> <p>10. - evidențiați cu aldine. Tot ceea ce intervine între ele <b>Și</b> vor fi evidențiate cu caractere aldine. De exemplu, dacă îl scrieți chiar la începutul conținutului și îl închideți la sfârșit, atunci tot textul de pe pagină va fi evidențiat cu caractere aldine. Aceasta este o etichetă destul de comună, al cărei analog este <strong></strong> .</p> <p>Motoarele de căutare acordă atenție acestei etichete în ceea ce privește creșterea influenței cuvintelor cheie. Dar trebuie să fii atent, deoarece evidențierea cuvintelor cheie cu caractere aldine de fiecare dată va fi percepută ca spam.</p> <p>Lecția „Cum se creează o pagină HTML” este dedicată aspectului celei mai simple pagini web. Veți învăța cum să salvați corect un fișier HTML, să setați codificarea necesară pentru a afișa corect o pagină HTML într-un browser și să plasați texte, liste și imagini pe o pagină web.</p> <p>După ce ați studiat această lecție, veți învăța deja cum să vă creați prima pagină web, ca în Figura 1.</p> <p>Poza 1</p> <h3>1. Structura documentului HTML</h3> <p>Fișierele HTML au extensia <b>.htm</b> sau <b>.html</b>.</p> <p>Etichetele sunt de obicei asociate: etichete de început și de sfârșit. Inițială -<>, finală</>, De exemplu <h1>Și</h1></p> <p>Se mai numește o etichetă asociată <b><i>recipient</i> </b>.</p> <p>Unele etichete nu au o pereche de etichete obligatorie, această etichetă este numită <b><i>singur</i> </b>. O astfel de etichetă este închisă scriind o bară oblică dreaptă înaintea parantezei unghiulare de închidere, de exemplu <br /></p> <p>Structura documentului html arată astfel (Figura 2).</p> <p><img src='https://i1.wp.com/web-grafika.pro/assets/images/web-grafika/kurs_html_css/images_html_css/1.2.jpg' width="100%" loading=lazy loading=lazy></p> <p>Figura 2</p> <p><b><i>Explicații pentru listarea din figura 2</i> </b></p> <p>În prima linie, construcția DOCTYPE înseamnă unul dintre standardele de aspect al paginii web.</p> <p>Între etichete <b><head> </b>Și <b></head> </b> conține partea antet. Include un design <b><title> </b>Și <b>. Acest nume apare în bara de titlu a browserului la încărcarea unui document (Figura 3).

Figura 3

Record înseamnă codificarea chirilică, astfel încât literele să fie afișate corect în browser. Dacă codarea nu este specificată, fonturile pot fi uneori afișate după cum urmează (Figura 4)

Figura 4

Aceeași pagină după inserarea codificării (Figura 5)

Figura 5

Notă: în loc de codificare charset="windows-1251" puteți folosi codificarea set de caractere=" utf -8" , care vă permite să creați site-uri web multilingve, deoarece toate personajele existente în lume sunt prezente în el. În acest caz, în Notepad++ este necesar înainte de aranjare și salvarehtml-selectați fișierul din meniul de sus Encodings - Codificare pentru UTF -8 fără BOM (UTF-8 fără BOM)

Aceste informații sunt suficiente pentru a crea primul document.

Practica 1

1. Creați un folder, denumiți-l Ale melecasa. Numele tuturor dosarelor și fișierelor trebuie să fie create cu litere mici latine, Numele rusești nu pot fi folosite. Păstrați numele scurte și semnificative.

Vom scrie codul paginii web în Notepad. Este mai bine să folosiți nu Notepad-ul care vine cu Windows, ci unul mai „avansat”, de exemplu Notepad++. Distributie Notepad++ este în dosar CD/distr.

2. Deschideți Notepad++. Asigurați-vă că codarea ANSI este setată, pentru a face acest lucru în meniul din articol Codificări, poziție stabilită Codați conform ANSI.

3. Introduceți codul din lista din Figura 2 în Notepad++.

Codul din lista din Figura 2 va servi ca șablon pentru noi în viitor, astfel încât să nu fie nevoie să introducem structura documentului HTML de fiecare dată. Copiați construcția DOCTYPE de aici (nu este nevoie să o memorați sau să o memorați).

4. Salvați fișierul ca template.htmlîn dosar casa mea, în timp ce în câmp Tip fișier instalare Toate tipurile(Figura 6), altfel pagina dvs. web nu se va deschide în browser.

Figura 6

5. După salvare, rulați șablon. html dublu click. Ca rezultat, fișierul dvs. va arăta astfel (Figura 7).

Figura 7

Dacă nu obțineți rezultatul ca în figura de mai sus, atunci cel mai probabil există o eroare în cod. Un caracter greșit este suficient și pagina web nu va fi afișată corect. Verificați din nou codul cu lista din Figura 2.

6. În interiorul folderului casa mea creați un folder public_ html. Acest nume este de obicei folderul în care este stocat site-ul atunci când este găzduit pe găzduire reală (acest folder poate fi numit și www).

7. Salvați fișierul șablon. htmlîn dosar public_ html sub un nou nume principal. html.

8. Dintr-un folder CD/ html_css_1 deschide fișierul text_main.txtîn Notepad++ și, de asemenea, deschideți fișierul salvat sub numele principal. html

9. Copiați tot textul din fișier text_main.txtși lipiți-l în fișier principal. htmlîn loc de expresia „Conținutul paginii web”. În etichetă scrie cuvântul „Acasă”. Ca aceasta <b><title>Acasă.

10. Salvați modificările și previzualizați fișierul principal. htmlîn browser. Veți vedea text neformatat. Browserul nu face nici măcar rupturi de rând care sunt în textul sursă (Figura 8).

Figura 8

2. Formatareweb-pagini etichetateHTML

Acest tutorial Cum se creează o pagină HTML acoperă etichetele de bază care sunt utilizate pentru a marca o pagină web.

Etichetele sunt concepute pentru a formata textul unei pagini web. Lista etichetelor poate fi vizualizată mai detaliat în dosar CD/DirectorHTMLîn director html401_ru.chm(în elementul de sus din meniu elemente).

Să ne uităm la câteva dintre etichete.

Elemente h 1, h 2, h 3, h 4, h 5, h 6

Structurarea corpului documentului se face în interiorul elementului < corp> folosind titluri specificate de elementele h1, h2, h3, h4, h5, h6.

Elementele de antet sunt împerecheate, deci trebuie să aibă o deschidere < h1> si inchidere h1> Etichete.

HTML are șase niveluri de titlu: h1 (cel mai sus), h2, h3, h4, h5 și h6 (cel mai jos). Funcționalitatea elementelor de titlu este similară cu stilurile de titlu obișnuite din editorii de text.

Efectele acestor șase etichete sunt prezentate în figurile de mai jos. O imagine arată codul sursă (Figura 9), cealaltă arată vizualizarea în browser (Figura 10).

Figura 9

Figura 10

Împărțirea textului în paragrafe

Etichetă < p> setează începutul unui paragraf și inserează o distanță în partea de sus a paragrafului - o indentă pentru a separa acest paragraf de cel precedent.

Forțați rupere de linie

Etichetă
vă permite să împachetați textul rămas dintr-un paragraf la rândul următor. Aceasta este o etichetă nepereche și, spre deosebire de eticheta de paragraf, nu crește distanța dintre linii.

Practica 2

1. Formatați titlul „Catalog proiecte de arhitectură” folosind etichete

Și

.

2. Formatați titlul „Proiecte pentru viitoarea casă” folosind etichete

Și

.

3. Formatați titlurile „Proiecte de casă” și „Zona de casă” folosind etichete

Și

.

4. Împărțiți textul principal în paragrafe folosind o etichetă

În primele două paragrafe, utilizați eticheta
a rupe o linie. Ca rezultat, codul dvs. ar trebui să arate astfel (Figura 11).

5. Vizualizați rezultatul într-un browser.

Figura 11

Liste marcate și numerotate

Folosind HTML, puteți crea orice liste: numerotate (numerice și alfabetice) și marcate cu diferite tipuri de marcatori.

Etichetă < ul>…ul> generează o listă cu marcatori.

Etichetă < ol>…ol> generează o listă numerotată.

Un singur articol din listă ca în

    , si in
      format folosind o etichetă < li> .

      Practica 3

      1. Creați o listă numerotată sub titlul „Proiecte de casă”.

      2. Creați o listă cu marcatori sub titlul „Zona de casă”. Codul dumneavoastră va arăta astfel (Figura 12).

      Figura 12

      3. Vizualizați pagina într-un browser.

      Listele pot fi imbricate una în cealaltă folosind diferiți marcatori.

      Un exemplu de listă imbricată este prezentat în Fig. 13

      Practica 4

      1. Implementați codul prezentat în Figura 13 într-un fișier nou.
      2. Salvați fișierul într-un folder casa mea sub nume spisok_ vlozh. html. Rezultatul din Fig. 13

      Figura 13. Exemplu de listă imbricată

      Stiluri de font

      Etichetă … - vă permite să afișați text cu caractere aldine.

      Etichetă … - vă permite să afișați textul cu caractere cursive.

      Etichetă … - afișează text subliniat.

      De exemplu:

      În acest caz, textul va fi afișat cursiv aldine , dar nu subliniat.

      Și în acest caz textul va fi scris cursive subliniate îndrăznețe .

      Indice și superindice

      Etichetă < sub> Și sub> vă permite să coborâți textul cu jumătate de rând sub textul normal.

      Etichetă < cina> Și cina> vă permite să ridicați textul cu jumătate de linie deasupra textului normal. Textul situat între aceste etichete va apărea într-un font mai mic decât textul obișnuit.

      Practica 5

      1. Formatați numele myhouse.ru cu caractere aldine în primul paragraf (Figura 14).

      Figura 14

      2. Formatați expresia „Mai mult de 95% din proiecte” cu caractere cursive subliniate în al doilea paragraf (Figura 15).

      Figura 15

      3. Formatați indicele în care sunt utilizați metri pătrați (Figura 16).

      Figura 16

      4. Salvați fișierul. Vizualizare prin browser. Pagina web ar trebui să arate astfel (Figura 17).

      Figura 17

      3. Inserarea imaginilor

      În articolul nostru Cum se creează o pagină HTML, vom analiza cum să plasăm imagini pe o pagină web.

      Eticheta este folosită pentru a insera imagini . Atributul necesar pentru această etichetă este src(din engleză Sursa - sursă). Acesta definește calea către fișierul grafic, a cărui imagine ar trebui să fie afișată pe pagina web.

      Pentru a insera o imagine, utilizați comanda

      De exemplu: " imagine1.jpg" alt="Imagine" /> !}

      Atributul alt este necesar pentru ca atunci când vizualizați o pagină web în modul imagini dezactivate, în locul imaginii lipsă să existe o inscripție care este scrisă în atributul alt. De asemenea, este recomandat să folosiți întotdeauna texte alte, deoarece motoarele de căutare le analizează ca cuvinte cheie atunci când caută imagini.

      Fișierele grafice pot fi în format jpg, gif, png și întotdeauna în modelul colorRGB.

      Practica 6

      1. După lista zonelor casei, inserați imagini cu proiecte de cabane în pagina web proiect_1.jpgȘi proiect_2.jpg din folder CD/html_css_1 . Pentru a face acest lucru, mai întâi copiați aceste două imagini în folderul în care se află fișierul main.html. Codul de inserare a imaginii va arăta astfel (Figura 18).

      Figura 18

      2. Vizualizați rezultatul în browser (Figura 19).

      Figura 19

      Practic principiul utilizării etichetelorHTMLar trebui să fie clar. Ele sunt folosite după același principiu: dacă eticheta este container, atunci există o etichetă de deschidere și de închidere. Dacă eticheta este unică, atunci nu există nicio etichetă de închidere, în acest caz, bara oblică dreaptă este scrisă înaintea parantezei unghiulare de închidere;< br/>. Indiferent dacă eticheta este container sau single, puteți oricând să vă uitați în specificațiehtml401_ru.chm în secțiunea „elemente”.

      4. Adresarea în cadrul site-ului

      În prima noastră lecție, Cum se creează o pagină HTML, vom explora conceptele de adresare în HTML.

      Să luăm în considerare opțiunile de adresare atunci când trebuie să plasați imagini într-un fișier html care poate fi localizat în diferite foldere de pe site.

      Există două tipuri de adresare:

      • absolut;
      • relativ.

      Adresare absolută (folosind numele unităților computerului) nefolosit(Figura 20)

      Figura 20

      Folosit adresare relativă - adresarea în cadrul unui document sau a unui set de documente pe un server. Pentru a face referire la un fișier dintr-un site, trebuie să spuneți browserului ce cale ar trebui să ia pentru a ajunge la fișierul dorit.

Exemplul 1

Imaginea se află în același folder ca și documentul HTML (Figura 21). Adică imaginea și fișierul HTML sunt la același nivel în sistemul de fișiere și documentul HTML poate atașa imediat imaginea. În acest caz, inserarea unei imagini într-o pagină web va arăta astfel.

/ >

Figura 21

Sarcina practică7

Implementați exemplul 1 (creați un folder, un fișier doc.html, luați orice imagine). Imagine

Exemplul 2

Imagine poza. jpg este în dosar pliant_1 . Documentul HTML se află în afara folderului_1. Acestea. În sistemul de fișiere al site-ului, documentul HTML este situat cu un nivel mai sus decât imaginea (Figura 22). Trebuie să introduceți folderul folder_1, apoi să atașați imaginea

Figura 22

Sarcina practică8

Implementați exemplul 2 (creați un folder, un fișier doc.html, luați orice imagine). Imaginea trebuie inserată în pagina web doc.html.

Exemplul 3

Imagine poza. jpg este în dosar pliant_1 , care se află la rândul său în folder pliant_2 . Documentul HTML se află în afara acestor foldere (Figura 23). Astfel, documentul HTML este cu două niveluri mai sus decât imaginea. Necesar:

  • intră în folderul folder_2,
  • apoi introduceți folderul folder_1,
  • apoi atașați imaginea.

Figura 23

Sarcina practică9

Implementați exemplul 3 (creați foldere, fișier doc.html, luați orice imagine). Imaginea trebuie inserată în pagina web doc.html.

Exemplul 4

pliant_1 . Imaginea se află în afara folderului_1. Acestea. Documentul HTML este situat la un nivel sub imagine (Figura 24). Trebuie să părăsiți folderul_1, apoi să atașați imaginea. Părăsirea unui folder este indicată de construcție ../ (două puncte și o bară oblică la dreapta).

/ >

Figura 24

Sarcina practică10

Implementați exemplul 4 (creați un folder, un fișier doc.html, luați orice imagine). Imaginea trebuie inserată în pagina web doc.html.

Exemplul 5

Documentul HTML se află în folder pliant_1 , care la rândul său se află în folder pliant_2 . Imaginea se află în afara acestor foldere. Astfel, documentul HTML este situat cu două niveluri mai jos decât imaginea (Figura 25). Necesar:

  • ieși din folderul folder_1,
  • ieși din folderul folder_2,
  • atașați o imagine.

Deoarece trebuie să ieși de două ori, designul ../ repetat de două ori.

/ >

Figura 25

Practica 11

Implementați exemplul 5 (creați foldere, fișier doc.html, luați orice imagine). Imaginea trebuie inserată în pagina web doc.html.

Exemplul 6 (Figura 26)

Necesar:

  • ieși din folderul folder_1,
  • ieși din folderul folder_2,
  • accesați folderul folder_3,
  • accesați folderul folder_4,
  • atașați imaginea pic.jpg

Figura 26

Practica 12

Implementați exemplul 6 (creați foldere, fișier doc.html, luați orice imagine). Imagine

trebuie inserat în pagina web doc.html.

Exemplu 7 (Figura 27)

Necesar:

  • ieși din folderul folder_1,
  • ieși din folderul folder_2,
  • ieși din folderul folder_3,
  • intră în folderul folder_4,
  • atașați imaginea pic.jpg.

Deoarece trebuie să ieșiți de trei ori, designul ../ repetat de trei ori.

Figura 27

Practica 13

Implementați exemplul 7 (creați foldere, fișier doc.html, luați orice imagine). Imagine

trebuie inserat în pagina web doc.html.

Astfel, de câte ori trebuie să ieși, punem construcția ../ de atâtea ori, iar dacă intrăm, listăm numele folderelor întâlnite pe parcurs.

Practica 14

1. Creați un document html și inserați o imagine în el, astfel încât calea către imagine să fie după cum urmează.

" ../../../../../../folder_1/folder_2/folder_3/image.jpg" / >

2. Dezvoltați propriul exemplu de inserare a unei imagini într-un document html, astfel încât acesta să conțină și Ieșire din foldere și Intrare în foldere. Exemplul ar trebui să fie diferit de toate exemplele de mai sus.

Ca rezultat al finalizării acestui subiect, ar trebui să aveți următoarele fișiere create:

  • template.html
  • principal.html
  • spisok_vlozh.html
  • în interiorul folderuluicasa meaar trebui să existe un folderpublic_ htmlcu fișierele viitorului site
  • șapte exemple despre adresarea relativă și două exemple ca cele de control din sarcina practică 14

Înainte de a începe călătoria noastră prin lecțiile de construire a site-urilor web HTML și CSS, este important să înțelegem diferențele dintre cele două limbi, sintaxa fiecărei limbi și unele terminologii de bază.

Ce sunt HTML și CSS?

HTML (HyperText Markup Language) definește structura conținutului și semnificația acestuia, definind conținut precum titluri, paragrafe sau imagini. CSS (Cascading Style Sheets) este un limbaj de prezentare creat pentru a stila aspectul conținutului, folosind, de exemplu, fonturi sau culori.

Aceste două limbi - HTML și CSS - sunt independente unul de celălalt și ar trebui să rămână așa. CSS nu ar trebui să fie scris în interiorul unui document HTML și invers. Ca regulă generală, HTML va reprezenta întotdeauna conținutul, iar CSS va defini întotdeauna stilul.

Cu această înțelegere a diferenței dintre HTML și CSS, să ne aprofundăm în HTML mai detaliat.

Termeni HTML de bază

Înainte de a începe să lucrați cu HTML, probabil că veți întâlni niște termeni noi și adesea ciudați. Veți deveni mai familiar cu toți în timp, dar pentru moment ar trebui să începeți cu cei trei termeni HTML de bază - elemente, etichete și atribute.

Elemente

Elementele specifică modul de definire a structurii și conținutului obiectelor dintr-o pagină. Unele dintre elementele utilizate în mod obișnuit includ mai multe niveluri de titluri (definite ca elemente cu

inainte de

) și paragrafe (definite ca

); Puteți include elemente în listă ,

, , Și și multe altele.

Elementele sunt identificate folosind paranteze unghiulare<>, în jurul numelui elementului. Deci elementul va arăta astfel:

Etichete

Adăugarea de paranteze unghiulare< и >creează ceea ce este cunoscut ca o etichetă în jurul elementului. Etichetele apar cel mai adesea în perechi de etichete de deschidere și de închidere.

Eticheta de deschidere marchează începutul elementului. Este format dintr-un simbol<, затем идёт имя элемента и завершается символом >; De exemplu,

.

Eticheta de închidere marchează sfârșitul elementului. Este format dintr-un simbol< с последующей косой чертой и именем элемента и завершается символом >; De exemplu,

.

Conținutul care apare între etichetele de deschidere și de închidere este conținutul acelui element. Linkul, de exemplu, va avea o etichetă de deschidere și eticheta de închidere. Ceea ce este între aceste două etichete va fi conținutul link-ului.

Deci, etichetele de link vor arăta cam așa:

...

Atribute

Atributele sunt proprietăți utilizate pentru a furniza informații suplimentare despre un element. Cele mai comune atribute includ atributul id, care identifică elementul; atributul de clasă, care clasifică elementul; atributul src, care specifică sursa conținutului încorporat; și un atribut href, care specifică o legătură către resursa asociată.

Atributele sunt definite în eticheta de deschidere după numele elementului. În general, atributele includ un nume și o valoare. Formatul pentru aceste atribute constă din numele atributului urmat de un semn egal, urmat de valoarea atributului între ghilimele. De exemplu, element cu atributul href va arăta astfel:

Shay Howe

Demonstrarea termenilor HTML de bază

Acest cod va afișa textul „Shay Howe” pe o pagină web și atunci când se va face clic pe acest text va duce utilizatorul la http://shayhowe.com. Elementul link este declarat folosind o etichetă de deschidere și eticheta de închidere care acoperă textul, precum și atributul și valoarea adresei linkului declarate prin href="http://shayhowe.com" în eticheta de deschidere.

Orez. 1.01. Sintaxa HTML sub formă de schiță include element, atribut și etichetă

Acum că știți ce sunt elementele, etichetele și atributele HTML, să aruncăm o privire la prima noastră pagină web. Dacă ceva pare nou aici, nu vă faceți griji - îl vom descompune pe măsură ce mergem.

Personalizarea structurii documentului HTML

Documentele HTML sunt simple documente text salvate cu extensia .html mai degrabă decât .txt. Pentru a începe să scrieți HTML, aveți nevoie mai întâi de un editor de text pe care să vă simțiți confortabil. Din păcate, aceasta nu include Microsoft Word sau Pages, deoarece acestea sunt editoare complexe. Cele mai populare două editoare de text pentru scrierea HTML și CSS sunt Dreamweaver și Sublime Text. Alternativele gratuite includ și Notepad++ pentru Windows și TextWrangler pentru Mac.

Toate documentele HTML conțin o structură necesară, care include următoarele declarații și elemente: , , Și .

Declarație tip document sause află chiar la începutul unui document HTML și le spune browserelor ce versiune de HTML este utilizată. Deoarece vom folosi cea mai recentă versiune de HTML, tipul nostru de document va fi simplu. După aceasta vine elementul indicând începutul unui document.

Interior element definește partea de sus a documentului, inclusiv diverse metadate (informații însoțitoare despre pagină). Conținut în interiorul unui element nu apare pe pagina web în sine. În schimb, poate include titlul documentului (care apare în bara de titlu a ferestrei browserului), linkuri către orice fișiere externe sau orice alte metadate utile.

Tot conținutul vizibil al paginii web va fi conținut în element . Structura unui document HTML tipic arată astfel:

Salut Lume!

Salut Lume!

Aceasta este o pagină web.

Demonstrarea structurii documentului HTML

Acest cod arată documentul, începând cu declarația de tip de document,, apoi apare imediat elementul . Interior vin elemente Și . Element conține codificarea paginii prin intermediul etichetei și titlul documentului prin element . Element <body>include titlul prin element <h1>și un paragraf de text prin<р>. Pentru că atât titlul, cât și paragraful sunt imbricate în element <body>, sunt vizibile pe pagina web.</p><p>Când un element se află în interiorul altui element, cunoscut și ca imbricat, este o idee bună să-l indentați pentru a menține structura documentului bine organizată și lizibilă. În codul anterior ambele elemente <head>Și <body>imbricat și deplasat în cadrul elementului <html>. Structura de indentare pentru elemente continuă cu elemente noi adăugate în interior <head>Și <body> .</p><h3>Elemente cu auto-închidere</h3><p>În exemplul anterior, elementul <meta>a fost singura etichetă care nu includea o etichetă de închidere. Nu vă faceți griji, acest lucru a fost făcut intenționat. Nu toate elementele constau din etichete de deschidere și de închidere. Unele elemente pur și simplu primesc conținut sau comportament prin atribute dintr-o singură etichetă. <meta>este unul dintre aceste elemente. Conținutul elementului <meta>în exemplu este atribuit folosind atributul charset și o valoare. Alte elemente tipice de auto-închidere includ:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>Structură redusă realizată folosind o declarație de tip de document<!DOCTYPE html>și elemente <html> , <head>Și <body>, este destul de comun. Dorim să păstrăm această structură de document convenabilă, deoarece o vom folosi des atunci când creăm noi documente HTML.</p><h3>Validarea codului</h3><p>Indiferent cât de atent ne scriem codul, erorile sunt inevitabile. Din fericire, atunci când scriem HTML și CSS, avem validatori pentru a ne verifica munca. W3C oferă validatoare HTML și CSS care scanează codul pentru erori. Revizuirea codului nostru nu numai că ajută la redarea corectă în toate browserele, dar ajută și la predarea celor mai bune practici la scrierea codului.</p><h2>La practică</h2><p>În calitate de designeri web și dezvoltatori front-end, avem luxul de a participa la o serie de conferințe grozave dedicate meșteșugului nostru. Vom organiza propria noastră conferință de stiluri și vom crea un site web pentru aceasta pe parcursul următoarelor lecții. Ca aceasta!</p><br><img src='https://i0.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Să comutăm puțin de la HTML și să aruncăm o privire la CSS. Amintiți-vă, HTML definește conținutul și structura paginilor noastre web, în ​​timp ce CSS definește stilul și aspectul lor vizual.</p><h2>Termenii de bază CSS</h2><p>Pe lângă termenii HTML, există câțiva termeni CSS de bază cu care va trebui să vă familiarizați. Acești termeni includ selectori, proprietăți și valori. La fel ca în terminologia HTML, cu cât lucrați mai mult cu CSS, cu atât acești termeni devin a doua natură.</p><h3>Selectoare</h3><p>Când adăugați elemente la o pagină web, acestea pot fi stilate folosind CSS. Un selector determină ce element sau elemente din HTML să vizeze și să le aplice stiluri (cum ar fi culoarea, dimensiunea și poziția). Selectorii pot include o combinație de valori diferite pentru a selecta elemente unice, în funcție de cât de specifici vrem să fim. De exemplu, dorim să selectăm fiecare paragraf dintr-o pagină sau să selectăm doar un anumit paragraf.</p><p>Selectorii sunt de obicei asociați cu o valoare de atribut, cum ar fi un id sau o valoare de clasă, sau un nume de element, cum ar fi <h1>sau<р> .</p><p>În CSS, selectoarele sunt combinate cu acolade (), care includ stilurile care sunt aplicate elementului selectat. Acest selector vizează toate elementele <span><p>P(...)</p><h3>Proprietăți</h3><p>Odată ce un element este selectat, proprietatea determină stilurile care îi vor fi aplicate. Numele proprietăților vin după selector, în acolade () și chiar înainte de două puncte. Există multe proprietăți pe care le putem folosi, cum ar fi fundalul, culoarea, dimensiunea fontului, înălțimea și lățimea și alte proprietăți adăugate în mod obișnuit. În codul următor definim proprietățile de culoare și dimensiunea fontului care se aplică tuturor elementelor <span><p>P (culoare: ...; dimensiunea fontului: ...; )</p><h3>Valori</h3><p>Până acum am selectat doar un element printr-un selector și am determinat ce stil am dori să-i aplicăm prin proprietăți. Acum putem seta comportamentul acestei proprietăți printr-o valoare. Valorile pot fi specificate ca text între două puncte și punct și virgulă. Mai jos selectăm toate elementele <p >Și setați valoarea proprietății culoare la portocaliu și valoarea proprietății dimensiune font la 16 pixeli.</p><p>P (culoare: portocaliu; dimensiunea fontului: 16px; )</p><p>Pentru a testa acest lucru, în CSS setul nostru de reguli începe cu un selector, urmat imediat de acolade. Aceste acolade conțin declarații formate din perechi de proprietăți și valori. Fiecare declarație începe cu o proprietate, urmată de două puncte, valoarea proprietății și, în final, de un punct și virgulă.</p><p>O practică comună este schimbarea perechilor de proprietăți și valori în interiorul acoladelor. Ca și în cazul HTML, indentarea ajută la menținerea codului nostru organizat și clar.</p><p><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy></p><p>Orez. 1.03. Structura de sintaxă CSS include selector, proprietăți și valori</p><p>Cunoașterea câțiva termeni de bază și a sintaxei CSS generale este un început excelent, dar mai avem câteva puncte de acoperit înainte de a ne arunca în profunzime. În special, trebuie să aruncăm o privire mai atentă asupra modului în care funcţionează selectoarele în CSS.</p><h2>Lucrul cu selectori</h2><p>Selectoarele, așa cum am menționat mai devreme, indică elementele HTML care vor fi stilate. Este important să înțelegeți pe deplin cum să folosiți selectoarele și cum funcționează acestea. Primul pas este să vă familiarizați cu diferitele tipuri de selectoare. Vom începe cu cei mai de bază selectori: selectoare de tip, clasă și identificator.</p><h3>Selectoare de tip</h3><p>Selectorii de tip vizează elemente după tipul lor. De exemplu, dacă dorim să vizam toate elementele <div>trebuie să folosim selectorul div. Următorul cod arată selectorul de tip pentru elemente <div>, precum și HTML-ul corespunzător.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Clase</h3><p>Clasele vă permit să selectați un element în funcție de valoarea atributului clasei. Selectorii de clasă sunt puțin mai specifici decât selectorii de tip, deoarece selectează un anumit grup de elemente, mai degrabă decât toate elementele de același tip.</p><p>Clasele vă permit să aplicați aceleași stiluri diferitelor elemente simultan, folosind aceeași valoare a atributului de clasă pentru mai multe elemente.</p><p>În CSS, clasele sunt reprezentate de un punct de început urmat de valoarea atributului de clasă. Selectorul de sub clasă selectează toate elementele care conțin valoarea atributului de clasă minunată, inclusiv elementele <div>Și <span><p>Minunat (...)</p><p> <div class="awesome">...</div> </p><h3>Identificatori</h3><p>Identificatorii sunt chiar mai precisi decât clasele, deoarece vizează doar un element unic la un moment dat. Așa cum selectorii de clasă folosesc valoarea atributului de clasă, identificatorii folosesc valoarea atributului id ca selector.</p><p>Indiferent de tipul de element afișat, valoarea atributului id poate fi folosită o singură dată pe o pagină. Dacă ID-urile sunt prezente, atunci acestea ar trebui rezervate pentru elementele importante.</p><p>În CSS, identificatorii sunt reprezentați de un simbol hash în față, urmat de valoarea atributului id. Aici id-ul va selecta doar elementul care conține atributul id cu valoarea shayhowe .</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Selectoare suplimentare</h3><p>Selectoarele sunt lucruri extrem de puternice, iar cele descrise mai sus sunt printre cele mai comune selectoare pe care le întâlnim. Aceste selectoare sunt doar începutul. Există multe selectoare avansate disponibile și sunt ușor disponibile. Odată ce vă simțiți confortabil cu ele, nu vă fie teamă să le verificați pe unele dintre cele mai avansate.</p><p>Bine, să începem să punem totul cap la cap. Adăugăm elemente în pagină în interiorul HTML-ului nostru, apoi putem selecta acele elemente și le putem stila folosind CSS. Acum să conectăm punctele dintre HTML și CSS pentru a face ca cele două limbi să funcționeze împreună.</p><h2>Conectarea CSS</h2><p>Pentru a face CSS-ul nostru să vorbească cu HTML-ul nostru, trebuie să îndreptăm către fișierul CSS din HTML. O bună practică este să includem toate stilurile noastre într-un singur fișier extern, care este indicat în cadrul elementului <head>documentul nostru HTML. Folosirea unui CSS extern ne permite să aplicăm aceleași stiluri pe tot site-ul și să facem modificări rapide.</p><h3>Alte opțiuni pentru adăugarea CSS</h3><p>Alte opțiuni pentru încorporarea CSS includ utilizarea stilurilor interne și inline. Este posibil să întâlniți aceste opțiuni în realitate, dar ele sunt în general respinse deoarece fac actualizarea site-urilor greoaie și greoaie.</p><p>Pentru a crea foaia noastră de stil externă, dorim din nou să folosim editorul de text ales pentru a crea un fișier text nou cu extensia .css. Fișierul nostru CSS ar trebui să fie salvat în același folder sau subdosar ca fișierul nostru HTML.</p><p>În interiorul unui element <head>element aplicat <link>, care definește relația dintre fișierele HTML și CSS. Deoarece ne conectăm la CSS, folosim atributul rel cu o valoare de foaie de stil pentru a indica relația lor. În plus, atributul href este folosit pentru a indica locația sau calea fișierului CSS.</p><p>În următorul exemplu de document HTML, elementul <head>indică un fișier de stil extern.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>Pentru ca CSS să fie redat corect, valoarea căii a atributului href trebuie să se potrivească direct cu locul în care este stocat fișierul CSS. În exemplul anterior, fișierul main.css este stocat în aceeași locație cu fișierul HTML, cunoscut și sub numele de folder rădăcină.</p><p>Dacă fișierul CSS se află într-un subdosar, atunci valoarea atributului href trebuie să corespundă în mod corespunzător acelei căi. De exemplu, dacă fișierul nostru main.css a fost salvat într-un subdosar numit foi de stil, atunci valoarea atributului href ar fi stylesheets/main.css. Aceasta folosește o bară oblică (sau bară oblică) pentru a indica mutarea într-un subdosar.</p><p>În acest moment paginile noastre încep să prindă viață, încet, dar sigur. Încă nu am aprofundat prea mult în CSS, dar poate ați observat că unele elemente au stiluri pe care nu le-am declarat în CSS. Este browserul care își impune propriile stiluri preferate acestor elemente. Din fericire, putem rescrie aceste stiluri destul de ușor, ceea ce vom face în continuare folosind o resetare CSS.</p><h2>Folosind resetarea CSS</h2><p>Fiecare browser are propriile stiluri implicite pentru diferite elemente. Modul în care Google Chrome afișează titlurile, paragrafele, listele și așa mai departe poate diferi de modul în care o face Internet Explorer. Pentru a asigura compatibilitatea între browsere, resetarea CSS a devenit utilizată pe scară largă.</p><p>O resetare CSS preia toate elementele HTML de bază cu un stil dat și oferă un stil consecvent în toate browserele. Aceste resetări implică, de obicei, eliminarea dimensiunilor, umpluturii, marginilor sau stilurilor suplimentare care scad aceste valori. Deoarece cascada CSS funcționează de sus în jos (veți afla despre asta în curând) - resetarea noastră ar trebui să fie în vârful stilului nostru. Acest lucru asigură că aceste stiluri sunt citite mai întâi și că toate browserele diferite funcționează dintr-un punct de referință comun.</p><p>Există o mulțime de resetări CSS diferite disponibile pentru utilizare, toate având propriile lor puncte forte. Unul dintre cele mai populare de la Eric Meyer, resetarea lui CSS este adaptată pentru a include elemente HTML5 noi.</p><p>Dacă te simți puțin aventuros, există și Normalize.css creat de Nicholas Gallagher. Normalize.css nu se concentrează pe utilizarea unei resetari hard pentru toate elementele de bază, ci pe setarea stilurilor comune pentru acele elemente. Acest lucru necesită o înțelegere mai profundă a CSS, precum și cunoașterea a ceea ce ați dori să obțineți din stiluri.</p><h3>Compatibilitate și testare între browsere</h3><p>După cum am menționat mai devreme, diferite browsere redă elementele diferit. Este important să recunoaștem importanța compatibilității și a testării între browsere. Site-urile nu ar trebui să arate exact la fel în toate browserele, dar ar trebui să fie aproape. Ce browsere doriți să susțineți și în ce măsură va trebui să luați o decizie în funcție de ceea ce este mai bun pentru site-ul dvs.</p><p>Există mai multe lucruri la care trebuie să acordați atenție atunci când scrieți CSS. Vestea bună este că poți face totul și este nevoie doar de puțină răbdare pentru a le stăpâni.</p><h2>La practică</h2><p>Să ne întoarcem la locul unde am rămas ultima dată pe site-ul nostru de conferințe și să vedem cum putem adăuga niște CSS.</p><ol><li>În dosarul nostru de stiluri-conferință, să creăm un nou folder numit assets. Aici vom stoca toate resursele pentru site-ul nostru web, cum ar fi stiluri, imagini, videoclipuri etc. Pentru stilurile noastre, să continuăm și să adăugăm un alt folder de foi de stil în dosarul assets.</li><li>Folosind un editor de text, să creăm un nou fișier numit main.css și să-l salvăm în folderul foi de stil pe care tocmai l-am creat.</li><p>Privind fișierul index.html din browser putem observa că elementele <h1>Și <p>Conține deja stilul implicit. În special, au o dimensiune unică a fontului și un spațiu în jurul lor. Folosind resetarea lui Eric Meyer, putem atenua aceste stiluri, permițând fiecăruia să pornească de la aceeași bază. Pentru a face acest lucru, aruncați o privire pe site-ul său, copiați codul și lipiți-l în partea de sus a fișierului nostru main.css.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 Licență: niciuna (domeniu public) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronim, address, mare, cita, cod, del, dfn, em, img, ins, kbd, q, s, samp, mic, grevă, puternic, sub, sup, tt, var, b, u, i, centru, dl, dt, dd, ol, ul, li, fieldset, formular, etichetă, legendă, masă, legenda, tbody, tfoot, thead, tr, th, td, articol, deoparte, pânză, detalii, încorporare, figură, figcaption, subsol, antet, hgroup, meniu, navigare, ieșire, ruby, secțiune, rezumat, timp, marcaj, audio, video (margine: 0; umplutură: 0; chenar: 0; dimensiune font: 100%; font: moștenire; aliniere verticală: linie de bază ; ) /* Resetare rol de afișare HTML5 pentru browsere mai vechi */ articol, deoparte, detalii, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1; ) ol, ul ( list-style: none; ) blockquote, q ( ghilimele: niciunul; ) blockquote:fore, blockquote:after, q:fore, q:after (conținut: ""; conținut: none; ) tabel (border- colaps: colaps; distanță-limită: 0; )</p><li>Fișierul nostru main.css începe să prindă contur, așa că haideți să-l conectăm la fișierul index.html. Deschideți index.html într-un editor de text și adăugați un element <link>V <head>, imediat după element <title> .</li><li>Deoarece indicăm stiluri prin element <link>adăugați un atribut rel cu foaia de stil valoare .</li><p>Vom include, de asemenea, un link către fișierul nostru main.css folosind atributul href. Amintiți-vă, fișierul nostru main.css este salvat în folderul foi de stil, care se află în folderul assets. Deci, valoarea atributului href, care este calea către fișierul nostru main.css, ar trebui să fie assets/stylesheets/main.css.</p><p> <head> <meta charset="utf-8"> <title>Conferinta de stiluri

Este timpul să ne verificăm munca și să vedem cum funcționează împreună HTML și CSS. Deschiderea fișierului index.html (sau reîmprospătarea paginii dacă este deja deschisă) în browser ar trebui să arate un rezultat ușor diferit de cel anterior.

Orez. 1.04. Site-ul nostru Styles Conference cu resetare CSS

Demo și cod sursă

Mai jos puteți vizualiza site-ul web Styles Conference în starea sa actuală, precum și descărca codul sursă curent al site-ului.

rezumat

Deci, totul este bine! Am făcut câțiva pași mari în acest tutorial.

Gândiți-vă, acum cunoașteți elementele de bază ale HTML și CSS. Pe măsură ce continuăm și petreci mai mult timp scriind HTML și CSS, vei deveni mult mai confortabil să lucrezi cu aceste două limbi.

Pentru a recapitula, am acoperit următoarele:

  • Diferența dintre HTML și CSS.
  • Introducere în elementele, etichetele și atributele HTML.
  • Configurarea structurii primei pagini web.
  • Introducere în selectoare, proprietăți și valori CSS.
  • Lucrul cu selectoare CSS.
  • Pointer către CSS din HTML.
  • Importanta resetarii CSS.

Acum să aruncăm o privire mai atentă la HTML și să ne familiarizăm puțin cu semantica.

Resurse și link-uri

  • Termeni HTML obișnuiți prin Scripting Master
  • Termeni și definiții CSS prin Impressive Webs
  • Instrumente CSS: Resetați CSS prin Eric Meyer