Meniul
AcasăTelefon

Codul complet al unei pagini web simple. Cum se creează o pagină HTML: instrucțiuni pas cu pas, tehnologie și recomandări

Bună ziua, dragi cititori ai blogului. Cu acest articol, vom începe să învățăm elementele de bază ale limbajului HTML.

Probabil că știți deja că limba principală a internetului este limbaj de marcare hipertext HTML (HyperText Markup Language). În acest articol, vom învăța conceptele de bază ale HTML și vom învăța cum să creăm pagini WEB simple.

Să începem cu cel mai important lucru, să vedem cum funcționează World Wide Web - Internet. Pentru a produce pagini web, creați fișiere scrise în HTML și le plasați pe un server web. După aceasta, orice browser instalat pe un dispozitiv cu acces la Internet, fie că este un computer, telefon sau tabletă, vă poate găsi paginile web.

server web- Acesta este un computer obișnuit cu software special care are acces la Internet. Ascultă continuu solicitările din browsere pentru pagini web, imagini, fișiere audio și video. După ce a primit o solicitare pentru una dintre aceste resurse, serverul o caută și o trimite browserului.

Browser este un program special conceput pentru vizualizarea site-urilor web, precum Internet Explorer. Folosind un browser, navigați pe site-uri web făcând clic pe linkuri. Orice astfel de clic determină browserul să facă o cerere pentru pagina HTML către serverul web, să primească un răspuns și să afișeze pagina în fereastra sa. Când pagina este afișată, limbajul HTML începe să funcționeze; îi spune browserului totul despre structura și conținutul paginii web. Utilizarea comenzilor - Etichete, HTML spune browserului unde încep paragrafele de text, ce parte a textului este un titlu și unde să insereze tabele și chiar imagini. Și etichetele sunt cuvinte între paranteze unghiulare, de exemplu

,

, .

Ai nevoie urgent de un magazin online, dar nu ai timp să înveți HTML, CSS, PHP și alte tehnologii. Apoi puteți închiria pur și simplu un magazin online cu funcționalitate și optimizare complet implementate pentru motoarele de căutare.

Limbajul HTML și etichetele acestuia

Prima versiune a limbajului HTML a apărut în 1992. La momentul anului 2013, este în curs de dezvoltare specificația unei noi versiuni de HTML, numărul 5. Dezvoltarea acestei specificații este realizată de World Wide Web Consortium, sau pe scurt W3C. Organizația W3C dezvoltă alte standarde web. Vă puteți familiariza cu aceste standarde pe site-ul lor www.w3.org. Apropo, multe browsere Web acceptă deja unele caracteristici HTML 5.

Vă sugerez să începeți să învățați HTML imediat cu un exemplu. Deci, să creăm prima noastră pagină Web. Orice editor de text este potrivit pentru crearea de pagini WEB. Vă sugerez să utilizați mai întâi Windows-ul încorporat Blocnotes(în general, pe viitor, recomand să utilizați pentru a edita codul html). Îl puteți găsi: „Start->Toate programele->Accesorii->Notepad”. Să creăm o pagină despre mașini. Deci, deschideți Notepad și introduceți următorul text în el:





Exemplu de pagină web


Site despre mașini.


Bine ați venit pe site-ul nostru auto. Aici veți găsi multe articole interesante și utile despre mașini. Site-ul conține descrieri ale multor mașini importate și autohtone.



Apoi, salvați pagina web creată într-un fișier numit index.html. În acest caz, în caseta de dialog de salvare a fișierului, trebuie să setați codificarea la UTF-8 și să includeți numele fișierului între ghilimele, altfel Notepad va adăuga extensia txt la acesta, iar fișierul nostru va fi numit index.htm.txt:

Acum tot ce rămâne este să deschideți fișierul creat în browser și să priviți rezultatul. Pentru a face acest lucru, puteți utiliza browserul Microsoft Internet Explorer care vine cu Windows sau orice alt browser instalat pe computer, făcând dublu clic pe fișierul index.html sau trăgând fișierul pe pictograma browserului. Deschide-l și vezi ceva de genul:

Astfel, am creat o pagină Web în Notepad, deși puțin nedescriptivă, dar care conține deja un titlu mare și un paragraf de text care este rupt automat în rânduri și conține un fragment cu caractere aldine.

Ce este o etichetă?

Acum să vorbim mai multe despre structura paginii. Să ne uităm la fragment:

Site despre mașini

. Aici vedem textul care apare pe pagină ca titlu, închis în etichete

Și

. Ce este o etichetă în HTML?

Etichetă HTML sunt cuvinte și simboluri obișnuite cuprinse între paranteze unghiulare, de exemplu

,

, . Deci etichetați

este eticheta de deschidere, eticheta

eticheta de închidere, iar textul dintre ele se numește conținutul etichetei. De asemenea, etichetați

și etichetați

se numesc etichete pereche. Împreună, eticheta de deschidere plus conținutul plus eticheta de închidere formează un element de document HTML. Există, de asemenea, elemente formate dintr-o etichetă de deschidere:

Etichetă așa împerecheată

definește un element antet de prim nivel. Există șase niveluri de titluri în total, acestea sunt elementele

—

.

Elementele pot fi bloc sau inline (text). Elemente de bloc efectuează formatarea structurală a paginii. Elementele bloc sunt întotdeauna afișate pe o nouă linie pe pagină și sunt indentate față de elementele adiacente. Elemente în linie efectuați formatarea directă a textului sau formatarea logică. Element

este un element bloc.

Asta e tot pentru mine!!! Ne vedem în postările următoare!

Salutare tuturor, dragi prieteni și oaspeți ai blogului meu! Oh. Tocmai am observat că Yandex mi-a acordat un TIC de 20, deși chiar ieri a fost 0. Înțeleg că TIC-ul nu mai înseamnă nimic, dar este totuși foarte frumos și vesel. Ei bine, în general, am vrut să continui seria recent începută de articole despre construirea site-ului. Și primul lucru cu care aș dori să încep este elementele de bază ale limbajului de marcare hipertext (nu de programare!) HTML.

HTML este încă baza tuturor și chiar dacă nu sunteți un dezvoltator web cool, dar vă veți face site-urile pe motoare, atunci cunoașterea limbajului HTML va fi un plus uriaș și îndrăzneț. Prin urmare, în articolul meu de astăzi vreau să vă spun cum să creați un site web html folosind notepad.

Desigur, ceea ce vom face astăzi cu greu se va numi un site web, așa că voi spune imediat că astăzi nu vom crea un site web cool, dar vă voi spune structura modului în care se întâmplă totul cu această metodă de a vă crea propriul dvs. resursă web. Cred că nu ar trebui să ai dificultăți. Vom ajunge să creăm o pagină web foarte simplă pentru început. Și dacă ești gata, să mergem!

Pentru a începe, creați un document text simplu sau deschideți Notepad. Pentru a deschide notepad, puteți apela linia „Run” și introduceți notepad acolo. L-ai deschis? Bine făcut!

Orice document HTML sau site web este marcat folosind etichete speciale. O etichetă este un semn special care spune site-ului cum să afișeze corect o anumită bucată de conținut conținută în el. Acum nu mă voi opri asupra acestui lucru în detaliu, deoarece am să vă povestesc despre etichetele din .

Permiteți-mi doar să spun că majoritatea etichetelor sunt împerecheate, adică eticheta de deschidere este plasată mai întâi și, după ce am scris informațiile, trebuie să închidem eticheta. Se inchide la fel ca se deschide, doar ca inainte de inchidere trebuie sa pui semnul „/”.

În general, pentru ca acesta să funcționeze, trebuie să punem mai multe etichete necesare. Să vedem care sunt.

  • - aceasta este eticheta principală, datorită căreia îi spunem site-ului că acum vom scrie aici în HTML, așa că nu vă faceți griji. Site-ul ar trebui să înceapă cu el și să se închidă cu el.
  • — aici sunt introduse informații oficiale, cum ar fi titlul documentului, descrierea și multe altele. Plasat imediat după eticheta deschisă .
  • — Între aceste valori scriem titlul paginii, adică acest titlu nu va fi afișat în conținutul site-ului în sine, ci în fila browser. Acest tip este plasat între
    Și
    .
  • — această etichetă este responsabilă pentru afișarea conținutului pe site. Adică tot ce scrieți între aceste etichete va fi afișat pe pagina web.

Simt că nu toată lumea a înțeles totul, iar unii au rămas cu mizerie în cap, așa că vă voi arăta totul cu un exemplu viu.

Exemplu viu

Deci, creați un document text și scrieți următorul conținut acolo:

Ai scris? Bine făcut! Aici v-am dat în mod special informațiile sub formă de imagine, și nu sub formă de text, ca să nu le copiați. Sunt un ticălos, nu?)) Ați observat că etichetele sunt cuibărite una în cealaltă ca niște păpuși de cuib? Așa ar trebui să fie.

Sfat!Încercați să nu copiați conținutul, ci să îl rescrieți singur. Astfel vei învăța tot materialul mult mai bine și mai rapid.

După aceasta, salvați documentul în format html. Pentru a face acest lucru, la salvare, după ce ați denumit documentul, puneți un punct și scrieți html. Adică, ar trebui să obțineți index.html. Apoi documentul dvs. va fi salvat automat nu ca document text, ci ca pagină web. Și când salvați documentul, schimbați codarea în UTF-8. Puteți deschide acest fișier folosind orice browser. Să facem asta și să vedem ce avem.

Uite cât am scris, dar în documentul final a rămas doar textul nostru de bun venit. De ce? Da, deoarece etichetele în sine nu sunt afișate în versiunea finală, iar informațiile afișate sunt afișate doar între etichete corp. De aceea, totul a ieșit așa. Dar uite, ceea ce am scris în cap, sau mai bine zis în titlu, este acum afișat în fila browser.

Dacă doriți să editați ceva din nou aici, atunci trebuie doar să deschideți din nou acest document deja salvat în Notepad. În general, uite, am făcut primul nostru site web folosind un notepad. Da... este greu să-l numești un site, dar în esență este. Noi am facut baza (cadru) si daca il incarcam pe hosting, acesta va fi deja afisat pe Internet.

Dar încercați să adăugați câteva spații și să scrieți mai mult text sau doar scrieți câteva rânduri de text și salvați-l în același document.

Acum accesați acest document folosind browserul dvs. Ce vedem? Și adevărul este că spațiile și rupturile de rând nu au afectat documentul și totul merge pe o singură linie. Urât, nu? Și totul pentru că html în sine nu înțelege spațiile (cu excepția uneia) sau cratimele. Pentru a rupe linii, totul trebuie marcat cu alte etichete, despre care vom vorbi în alte articole.

Mulți se vor gândi probabil ceva de genul: „Și acesta este site-ul tău? Da, ți-ai ieșit din minți.” Da, dragii mei. Această pagină web primitivă poate fi numită și site web. Și voi repet încă o dată că scopul acestui articol nu a fost de a crea un site web mega-cool, ci de a vă arăta baza oricărui site web, cum arată, cum se întâmplă totul.

Dar nu-ți face griji. Toate acestea sunt lecții introductive. În continuare, ne vom scufunda din ce în ce mai adânc în marcajul html și vom putea formata și aranja totul corect. În general, totul va fi cool și vom face o resursă web cu drepturi depline. Doar că toate acestea nu se vor încadra într-un articol și nici nu-l voi mototoli și scurta, altfel se va dovedi a fi un gunoi.

Un caiet special pentru dezvoltatorii web

Dar totuși, nu vom mai folosi acest instrument preistoric, deoarece există un notepad mai convenabil și mai sofisticat pentru dezvoltatori și este absolut gratuit. Descarca-l de aiciși instalați în cel mai obișnuit mod.

În viitor, voi lucra în mod specific prin editorul Notepad++. Instalează-l și vei înțelege de ce este convenabil. Nu există setări avansate acolo, dar dacă ați instalat brusc versiunea în limba engleză, atunci accesați meniul „Preferințe” și selectați rusă în coloana „Localizare”.

Da, și accesați meniul „Codificare” și selectați „UTF-8”. Ei bine, salvați imediat acest fișier în format html. Pentru a face acest lucru, selectați meniul „Fișier” - „Salvare ca” și denumiți indexul documentului, selectând formatul „html” din lista derulantă. Acest lucru se face astfel încât programul să înțeleagă ceea ce facem și să evidențieze etichetele și comenzile necesare pentru noi.

De ce apelez la indexul paginii? Faptul este că atunci când intri pe orice site, implicit caută pagina index.html sau index.php. Aceste fișiere sunt în general acceptate ca fiind principale, dar în general acestea pot fi modificate pe server.

Desigur, dacă vrei să înveți totul rapid, îți recomand să urmărești cel recent lansat curs despre HTML5 și CSS3. Totul este explicat acolo în detaliu și prezentat cu un exemplu live, în plus vei învăța cum să faci mai multe tipuri de site-uri web. În general, lecții foarte interesante și informative.

Ei bine, vă recomand să vă abonați la actualizările blogului meu pentru a nu rata următoarele lecții, precum și alte lucruri interesante. De asemenea, asigurați-vă că consultați celelalte articole din blogul meu. Sunt sigur că veți găsi multe dintre ele utile. În general, vă doresc mult succes. Ne vedem in alte articole. Pa! Pa!

Salutări, Dmitri Kostin.

: HTML - limbaj de marcare hipertext (sau limbaj de marcare hipertext).

Deci haideți să-l cunoaștem mai bine.

Mai întâi, creați un fișier pe computer cu orice nume și extensie.html (titlul trebuie să fie în engleză- de exemplu index.html). Pentru a crea un astfel de fișier, creați un document text obișnuit ("Start" - "Toate programele" - "Accesorii" - "Notepad")și salvați ("Fișier" - "Salvare ca") oriunde introducând numele și extensia (se întâmplă ca atunci când introduceți o extensie, notepad-ul o salvează în continuare ca fișier text, dar avem nevoie de un fișier web. Pentru a face acest lucru, înainte de a salva, selectați tipul de fișier - „Toate fișierele (*.*)”).

Aceasta nu este o condiție prealabilă (deoarece puteți schimba numele primei pagini în setările serverului), ci o regulă a bunelor maniere. Numele primei pagini este de preferință index (index.html), întrucât serverul, la accesarea acesteia, produce un fișier cu același nume - index.

Când este salvat corect, pictograma fișierului ar trebui să se schimbe în pictograma browserului (Internet Explorer în mod implicit).

Acum deschideți acest fișier folosind Notepad și copiați următorul cod acolo.

Aceasta este prima pagină web!

Salvați și deschideți într-un browser.

Felicitări, tocmai ați creat prima pagină web.

Text „Aceasta este prima pagină web!” O puteți schimba cu oricare alta, de exemplu, „Aceasta este prima mea pagină web!!!” salvați, actualizați browserul și admirați rezultatul.

Dar pagina noastră nu are un titlu.

Trebuie să remediem acest lucru - vom corecta puțin codul sau, mai degrabă, îi vom adăuga un „Site Head” folosind etichete Și .</p><p> <html> <head> <title>Prima pagina Aceasta este prima mea pagina web!!!

Salvează, actualizează, admiră. Pagina noastră are acum un titlu.

Descrierea etichetelor.

Prima etichetă este (Această etichetă este asociată, adică eticheta de închidere necesar) - este folosit ca container în interiorul căruia se află tot conținutul paginii (text, imagini etc.). Deși această etichetă ( Și) este opțională, dar utilizarea lui indică bunele maniere. Prin urmare, vă sfătuiesc să îl utilizați.

Următoarea etichetă - . Aceasta este, de asemenea, o etichetă asociată ( Și). Această etichetă nu este afișată pe pagină (cu excepția titlului), dar este necesară indicarea unor parametri suplimentari ai paginii - descrierea paginii (folosită de motoarele de căutare), cuvinte cheie (utilizate de motoarele de căutare), stiluri, scripturi, titlu etc.

Etichetă </b>- etichetă asociată ( <title>Și), este necesar pentru a indica titlul paginii. Mai mult, această etichetă trebuie plasată numai în interiorul etichetei !

Și ultima etichetă din codul nostru este - . De asemenea, o etichetă asociată ( Și), în interiorul căruia se află întreaga parte vizibilă a sitului, adică. texte, imagini, link-uri, în general informații pe care doriți să le plasați pe site.

În lecția următoare vom vorbi despre tipurile de etichete și despre regulile de scriere a acestora.

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, un editor de text, un limbaj pentru descrierea structurii paginilor web, HTML și un 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șierele sursă ale site-ului

Crearea unei gazde virtuale pe un server web local

O pagină web obișnuită este un fișier text în format HTML, așa că 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 un server local (din cauza unei posibile confuzii în viitor, ar trebui să nu atribuiți nume de gazdă reale zonei de domeniu, cum ar fi „ru”, „com”, etc.


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


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 „Restart Denwer”, care poate fi creată la instalarea Denver, sau (dacă nu este acolo) printr-un fișier special Restart.exe din 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 paginii noastre principale. Cum se instalează un editor de text este prezentat în articolul Instalarea editorului de text nodepad++.

Trebuie remarcat faptul că atunci când deschideți un site web cu o adresă care conține un nume de domeniu, fără alte directoare, browserele deschid întotdeauna fișierul aflat în directorul rădăcină sub numele „index”. Prin urmare, vom începe să creăm pagini ale site-ului nostru din acest fișier. Î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 editorul Notepad++ chiar de la început atunci când deschideți documente noi.

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


Acum să creăm un 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, selectați „Salvare ca” din meniul „Fișier”, introduceți numele fișierului „index.html”, specificați folderul dorit și faceți clic pe „Salvare”.


Î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 atunci când este făcut incorect). conformitatea codării. Î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, trebuie să specificați codarea necesară în fișierul de configurare suplimentar „.htaccess” al serverului web.

Î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 următoarea linie „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ă funcționarea corectă a serverului web și setarea corectă a codificărilor.

Dacă acest lucru nu funcționează, atunci înainte de a trece la următorii pași, trebuie să reveniți și să remediați problema.


Scheletizarea unei pagini HTML

După ce am verificat că serverul web local funcționează și că pagina noastră web este afișată corect, vom trece 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 număr mare de cărți de referință diferite, cursuri video și alte 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 în ​​versiune plătită, cât și în versiune gratuită. 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, fiecare are propriile preferințe, mai ales că există un număr mare de ele pe Internet.

În numele meu, pot recomanda o astfel de resursă de informații ca un director online „http://www.puzzleweb.ru/html/all_tags.php”. Particularitatea sa este că oferă nu numai informații de fundal destul de detaliate despre principalele limbi utilizate în construirea site-ului web, cum ar fi HTML, CSS, JavaScript, PHP, dar are și secțiuni de auto-instruire care sunt foarte concise, dar în același timp. timp Elementele de bază ale acestor limbi sunt explicate destul de informativ, cu exemple ilustrative.

De asemenea, puteți reține și resursa de referință online „https://webref.ru/”, care conține informații destul de complete despre versiunile moderne de HTML5 și CSS3, care include și cursuri de instruire privind tehnologiile web. La aceasta, puteți adăuga cartea de referință „http://htmlbook.ru/html/”, din care puteți, de asemenea, să culegeți o mulțime de informații utile și poate fi de asemenea utilă atunci când scrieți pagini web.

În general, fiecare va selecta cu siguranță pentru el însuși, din varietatea de materiale de referință, 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 amplasate 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 se mai poată atribui 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.

Fie în constructori gratuiti, fie plătiți. Dar totuși, în primele zile ale anilor 1990-2000, site-urile au fost create în primul rând în HTML, fără a utiliza apeluri la baza de date. Diverse programe care vă permit să editați HTML + CSS în timp real, de exemplu, Dreamweaver, au apărut abia la sfârșitul secolului al XX-lea. Prin urmare, site-urile au fost create în Notepad și alte editoare similare. Deși acum există multe modalități convenabile de a crea o resursă de calitate, crearea unui site web folosind notepad vă permite să învățați elementele de bază ale construcției paginii și elementele de bază ale HTML în general.

Deci, pentru a crea un site web folosind Notepad, trebuie mai întâi să creați un fișier HTML. Puteți face acest lucru după cum urmează:
Accesați meniul Start -> Toate programele -> Accesorii -> Notepad

Și salvați-l imediat în format HTML: În notepad, faceți clic pe: Fișier -> Salvare ca


Și scrieți numele fișierului, de exemplu, index.html

Acum putem trece direct la crearea aspectului HTML în Notepad. Mai întâi, să scriem marcajul de bază al codului HTML, îl puteți copia și lipi imediat pentru a nu pierde timpul.

Cel mai frumos site al meu

Primul meu site

În esență, acestea sunt elementele de bază care alcătuiesc orice resursă web. Tot ceea ce este între paranteze se numește etichetă HTML sau doar etichetă. Toate etichetele HTML se deschid, conțin unele informații și apoi se închid. Există și alte etichete care nu au nevoie de o etichetă de închidere, dar despre acestea vom vorbi mai târziu. Acum suntem mult mai interesați de răspunsul la întrebarea „cum se creează un site web într-un notepad?”

Să ne uităm la fiecare dintre ele, astfel încât să putem învăța cu ușurință cum să creăm site-uri web în notepad

Etichete HTML pentru crearea unui site web folosind notepad

  • DOCTYPE - permite browserului să determine ce tip de document a deschis, deoarece un document HTML are multe versiuni.
  • html este eticheta care deschide și închide întreaga pagină web
  • head — capul (sau capul) documentului. Această etichetă conține informații pentru browser și nu este afișată pe pagina web. Conține în mare parte informații pentru browser și stiluri CSS, pe care le vom scrie puțin mai târziu, și diverse scripturi.
  • meta - indică anumite informații către browser și motor de căutare. În acest caz, metaeticheta îi spune browserului să folosească codificarea UTF-8 (pentru ca limba rusă să fie afișată corect). În alte cazuri, această etichetă poate indica și alte date, de exemplu, autorul articolului, descrierea paginii, cuvinte cheie.
  • body — corpul (sau corpul) documentului. Această etichetă conține tot ceea ce vedem în prezent pe pagină; putem spune că include scheletul sau cadrul paginii web.
  • h1 - Titlul principal de pe pagină care are un impact mare, de ex.
  • p - paragraf - textul pe care îl vedem pe pagină

Cu ce ​​am ajuns, desigur, nu este cea mai bună resursă web din lume, dar trebuie să începem de undeva, nu? :)

În acest articol nu am creat niciun meniu, dacă ești interesat de cum să faci un meniu orizontal pentru site-ul tău, atunci bine ai venit.

Acum să-i dăm ceva „frumusețe” scriind câteva stiluri în interiorul etichetei

Corp ( fundal: #F2F2F2; lățime maximă: 900 px; margine: 0 automată; umplutură: 20 px; ) h1( culoare: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; margine-bottom: 1px solid #BEBEBE ; ) p( font: italic; )

Ca rezultat, exemplul nostru de site realizat în bloc de note în cod arată astfel

Cel mai frumos site al meu

Primul meu site

Încă puțin și voi învăța cum să creez cele mai bune site-uri web din lume.

Acum ați învățat cum să creați site-uri web simple în Notepad. Încercați să utilizați alte stiluri și etichete pentru a înțelege cum sunt structurate site-urile.

UPD3. Când ai creat deja un site web și vrei să-l plasezi pe Internet, vei avea nevoie de găzduire.Am scris cum să alegi un server și am făcut o selecție dintre cele mai bune.