Cum se creează o pagină html. Un exemplu de creare a unei pagini html în notepad

05.09.2019 Windows 7, XP

Site-ul este de fapt un set de fișiere din cod în mai multe limbi. Și codul poate fi scris în orice editor de text normal, chiar și în notepad. Desigur, este mai bine să utilizați software mai avansat, cum ar fi Notepad++ sau programe de dezvoltare cu drepturi depline. Ei bine, haideți să vedem cum să faceți un site web într-un bloc de note folosind html și css.

Cum să creezi un site web de la zero pe html în notepad - instrucțiuni pas cu pas

Și iată-l și cuvântul nostru cheie - HTML. Cu acest limbaj începe crearea site-ului. Fără el, este imposibil să ne imaginăm dezvoltarea web. Este ca și cum ai încerca să gătești supă fără apă. Nu vă grăbiți să închideți pagina dacă sunteți zero absolut în html. În acest tutorial pas cu pas, vom crea împreună un site web simplu și voi încerca să explic bucățile de cod pe care le vom adăuga în caiet.

Pasul 1. Creați fișiere

Crearea unui site html în notepad, trebuie să începeți prin a crea două documente text într-un folder gol. Unul ar trebui să obțină extensia .html, iar al doilea .css. Numele pot fi orice. Rețineți, nu site.html.txt , ci site.html .

Pentru a face acest lucru, atunci când salvați manual documentul, adăugați-i o extensie printr-un punct. Facem aceeași manipulare cu al doilea fișier, dar îi dăm extensia .css. Da, nu uitați să alegeți o codificare UTF-8.

Pasul 2. Pozarea structurii

Fișierele sunt create și puteți începe să lucrați. Deschideți documentul html. Va fi lucrarea principală. Elementul de bază în această limbă este etichetele - acestea sunt cuvinte speciale între paranteze unghiulare care îi spun browserului ce să afișeze pe pagina web.

Să introducem și ceva în documentul nostru, altfel este complet gol.

Salut Lume! Salut Lume!

Așadar, am introdus o grămadă de etichete deodată și poate nu înțelegeți nimic. Încercați să deschideți pagina într-un browser. Acolo vei vedea cuvintele "Salut Lume" dacă totul este făcut corect. Aceasta este, de fapt, cea mai simplă pagină web.

html este containerul pentru toate celelalte etichete. Conține întreaga pagină web.
În partea de sus, am indicat tipul de document. Eticheta head reprezintă informațiile de serviciu despre pagină. Iată-ne cu eticheta setați numele paginii, care va fi afișat în linia browserului din partea de sus. Apoi, setăm codificarea și conectăm fișierul css folosind eticheta <link> .</p><p>După cum puteți vedea, există etichete pereche și există etichete unice. Acum nu mă voi opri asupra acestui lucru în detaliu, depinde de ce funcții îndeplinește echipa.</p><h3>Pasul 3. Planificare</h3><p>Acum să lăsăm codul în pace pentru un moment și să ne gândim. În ce credeți că constă o resursă web tipică? Desigur, sunt multe în rețea și toate sunt diferite, dar există câteva elemente identice ale structurii, nu? De exemplu, meniuri verticale și orizontale, coloane laterale, anteturi (în partea de sus unde se află sigla) și subsol (partea de jos a site-ului).</p><p>Deci, să planificăm cum să creăm primul nostru site simplu. În acest caz, totul trebuie să înceapă cu planificarea. Este necesar să se evidențieze părțile structurale ale viitorului șablon, în ce va consta. Să presupunem că șablonul nostru simplu va avea un antet, o secțiune principală de conținut, o bară laterală și un subsol sau subsol (unul și același).</p><h3>Pasul 4. Să începem!</h3><p>Deci avem nevoie de 4 blocuri principale. În html, este posibil să imbricați un număr nelimitat de alte etichete într-o etichetă pereche, așa că vă sugerez următoarea metodă: <br>Creați un container comun în care vor fi amplasate toate cele 4 blocuri principale.</p><p>Deci, înapoi la cod. O vom scrie în eticheta body, deoarece este pagina viitoare. Puteți elimina în siguranță inscripția <b>"Salut Lume"</b>, și scrie asta:</p><p> <div id="main"> <div id="header">Aceasta este pălăria noastră.</div> <div id="sidebar">Aceasta este o bară laterală</div> <div id="content">Acesta este conținut</div> <div id="footer">subsol</div> </div> </p><p>Astfel, am creat un singur bloc mare în care am plasat restul de 4. Blocul în html este creat de o etichetă div împerecheată, care nu are atribute necesare, dar am adăugat imediat un id (identificator) unic fiecăruia dintre ele. pentru a stila aspectul mai târziu prin CSS.</p><p>Copiați acest cod și reîmprospătați pagina în browser. Până acum, vezi doar 4 rânduri de text în fața ta, dar nimic, chiar acum le vom transforma într-un site web!</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/2-1.jpg' height="89" width="160" loading=lazy loading=lazy><br></p><h3>Pasul 5. CSS ne va ajuta</h3><p>Acum să începem să ne decoram blocurile. Desigur, trebuie să începeți cu cel mai mare recipient. Am creat un fișier css la început, dar nu i-am scris nimic. Este timpul să o reparăm. Să adăugăm următorul cod acolo:</p><p>*( dimensiunea casetei: border-box ) #principal( lățime: 810px; margine: 0 auto; chenar: 5px negru solid)</p><p>Prima regulă stabilește comportamentul pentru casete, astfel încât căptușeala și chenarele să nu-și mărească lățimea. Mai departe in cod, ne referim la blocul cu identificatorul main , pentru asta este suficient sa punem o grila si sa adaugam numele identificatorului. Imediat după aceea, se deschid bretele, care listează regulile de aspect care se vor aplica elementului.</p><p>Setăm lățimea containerului general la 810 pixeli, marginea regulii: 0 auto setează blocul în centru, adică site-ul nostru va fi afișat frumos în centru și nu apăsat pe marginea stângă. Ultima proprietate, chenar, adaugă un chenar negru solid pe fiecare parte a blocului.</p><p><img src='https://i1.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/3-1.jpg' height="98" width="181" loading=lazy loading=lazy><br></p><p>Ei bine, am făcut stilurile pentru containerul principal. Pe pagina web mai avem 4 rânduri de text, dar într-un cadru negru. Mergi mai departe.</p><p>Acum este momentul să personalizăm aspectul celor patru blocuri principale ale paginii noastre. Voi da imediat codul și îl voi comenta mai jos.</p><p>#header( înălțime: 100px; chenar-jos: 5px negru solid ) #bară laterală( lățime: 200px; înălțime: 500px; float: stânga; chenar-dreapta: 5px negru solid ) #conținut( lățime: 600px; float: dreapta; înălțime : 500px ) #footer( înălțime: 75px; clar: ambele; chenar-sus: 5px negru solid; )</p><p>După cum puteți vedea, mă refer doar la elemente cu ID-uri diferite, descriindu-le de sus în jos. Antetul este stilat mai întâi - am setat înălțimea la 100 px și un chenar în partea de jos, astfel încât să fie separat de restul casetelor.</p><p>Și aici lucrurile devin interesante. Faptul este că, implicit, blocurile sunt afișate de sus în jos, dacă sunt pur și simplu scrise în cod html și nu sunt stabilite reguli suplimentare. Dar la urma urmei, coloana laterală este și o coloană laterală, care urmează să fie afișată pe partea laterală a părții principale a paginii. Dar cum se face? Uite, setăm înălțimea barei laterale, lățimea, chenarul și încă o proprietate (float: stânga).</p><p>Această regulă înseamnă că elementul va fi imbricat la marginea din stânga a părintelui (adică elementul părinte - blocul #principal). Grozav, acum vom seta aceeași proprietate blocului cu conținut și va fi apăsat și pe marginea din stânga, dar după coloana laterală.</p><p>Desigur, conținutul capătă mai multă lățime, pentru că ar trebui, dar setăm înălțimea la fel. Pe un site real, de obicei vor exista o mulțime de informații în blocul principal, așa că nu puteți seta deloc înălțimea. Este același lucru cu bara laterală dacă informațiile sunt adăugate în mod constant la ea. Dar, de exemplu, am înregistrat în mod explicit înălțimea, astfel încât dimensiunile blocurilor să poată fi văzute clar.</p><p>În cele din urmă, rămâne să descriem ultimul bloc - <b>subsol</b>. Primește o înălțime mică, un chenar cu o înălțime și încă o proprietate nouă pentru noi. Această proprietate este clară cu o valoare a ambelor. De ce să-l scrii? Tu și cu mine am apăsat cele două blocuri anterioare spre marginea stângă. Au devenit așa-numitele blocuri plutitoare, dar în mod implicit, blocurile obișnuite s-ar putea să nu le observe pe cele plutitoare și să se lovească de ele.</p><p>Pentru a preveni acest lucru, subsolul nostru a primit următoarea comandă - ei spun, uite, un bloc obișnuit, există două plutitoare deasupra ta. Observați-le și poziționați-vă mai jos decât ei. Aceasta este comanda, de fapt, dată de proprietatea clear: both , care obligă blocul normal să fie situat sub toate cele plutitoare.</p><p>Grozav, acum reîmprospătează pagina în browser. Ei bine, deja seamănă mult mai mult cu un site web, cel puțin ca structură.</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-v-bloknote.jpg' width="100%" loading=lazy loading=lazy></p><h3>Pasul 6. Colorarea site-ului</h3><p>Următoarea etapă, foarte interesantă - să adăugăm câteva culori site-ului nostru. Să nu aibă un fundal alb solid, ci ceva mai interesant. Există două moduri de a seta fundalul:</p><ul><li>Fundal general pentru întregul site simultan, prin alocarea acestuia la containerul comun #main</li><li>Dacă fiecare dintre blocurile principale ar trebui să aibă propria sa nuanță de culoare, atunci trebuie să setați culoarea pentru fiecare separat. Dar este mai bine să nu te lași dus prea mult - o pălărie roșie, conținut verde și un subsol galben nu vor arăta foarte bine, voi spune imediat</li> </ul><p>Vă sugerez să faceți prima metodă. Am găsit o nuanță drăguță de albastru deschis în serviciul online, pe care îmi propun să fac fundalul site-ului. Adăugați această proprietate la stilurile de container partajate:</p><p>#principal( fundal: #B3C1E6 )</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/fon.jpg' width="100%" loading=lazy loading=lazy></p><p>Reîmprospătăm pagina și ne asigurăm că site-ul nostru a primit o schemă frumoasă de culoare albastru deschis. Acum propun să avansăm puțin nivelul de design - lăsați fundalul antetului și al subsolului să fie mai întunecat decât restul blocurilor. Puteți adăuga aceste linii de cod:</p><p>#header, #footer( fundal: #9091DA )</p><p><img src='https://i2.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/4-1.jpg' width="100%" loading=lazy loading=lazy></p><p>Aici am aplicat o nouă tehnică - am notat două blocuri separate prin virgulă și noul fundal va fi aplicat ambelor.</p><h3>Pasul 7. Lucrul la antet</h3><p>Lucrările ulterioare vor consta în proiectarea blocurilor individuale într-o stare mai atractivă. Să începem cu pălăria. Ce avem de obicei într-o pălărie? Așa este, un nume și un logo frumos de site. Aceasta este ceea ce vom adăuga.</p><p>Vă sugerez să începeți cu logo-ul. Deoarece creăm site-ul folosind html, vom plasa sigla acestei limbi în colțul din stânga antetului. Pe Internet, am găsit acest logo drăguț.</p><p>Trebuie să îl descărcați și să îl puneți în același folder în care este stocat documentul html. <br>Acum ne uităm:</p><p>#header( background: #9091DA url(html.jpeg) no-repeat 5% center )</p><p>Am numit imaginea html , iar formatul ei este jpeg , deci această intrare. Mai departe, am specificat și următoarele comenzi: imaginea de fundal nu trebuie repetată, ci trebuie plasată cu un offset orizontal de 5% de la începutul blocului și în centru pe verticală. Poziția orizontală este întotdeauna scrisă mai întâi, iar apoi poziția verticală.</p><p>Desigur, dacă imaginea dvs. este numită diferit sau are un format diferit, atunci ar trebui să schimbați ușor codul de mai sus. Super, avem un logo. Este timpul să eliminați inscripția - acesta este antetul site-ului și să puneți un titlu frumos. Eliminați textul din antet și introduceți un nou element acolo:</p><p> <div id="header"> <div id="title">Numele site-ului</div> </div> </p><p>Acum trebuie făcut:</p><p>#title( dimensiunea fontului: 32px; float: stânga; marginea stângă: 200px; familia de fonturi: Tahoma; culoare: galben; padding-top: 20px; text-shadow: 0 0 5px portocaliu; )</p><p>Am setat o cantitate decentă de stiluri: dimensiunea fontului, familia de fonturi, marginea din stânga a titlului, umplutura din stânga, culoarea, umbra de sus și umbra textului. Nu are rost să explicăm cum funcționează fiecare proprietate acum, așa că doar copiați codul și lipiți-l în foaia de stil (fișier CSS).</p><p>Totul, o pălărie simplă este gata. Desigur, pe un site real, acesta poate conține mai multe link-uri, adrese etc. Ei bine, să adăugăm ceva pentru realism. Acest cod html trebuie introdus în conținutul antetului site-ului.</p><p> <ul id="about"> <li>Despre noi</li> <li>Blog</li> <li>Părere</li> </ul> </p><p>Acesta generează o listă cu cele trei link-uri ale acestora. În realitate, ele ar trebui să ducă undeva, dar la noi sunt doar verigări goale. Vom face, de asemenea, o listă și link-uri în ea.</p><p>#about( float: right; list-style: none; margin-right: 50px ) #about a( culoare: galben; )</p><h3>Pasul 8: Crearea meniului din bara laterală</h3><p>De obicei, bara laterală conține meniul site-ului și multe alte widget-uri. Să facem acolo un meniu simplu. Din nou, lista ne va ajuta în acest sens, cu ajutorul căreia am afișat deja link-uri în antet, dar din moment ce se presupune că meniul principal este mai mare, vor exista mai multe link-uri.</p><p> <ul class="menu"> <li>Element de meniu 1</li> <li>Elementul de meniu 2</li> <li>Elementul de meniu 3</li> <li>Elementul de meniu 4</li> <li>Elementul de meniu 5</li> <li>Elementul de meniu 6</li> </ul> </p><p>Meniu (stil listă: niciunul)</p><p>De fapt, aici am notat o singură regulă - am eliminat marcajele din articolele din listă, oricum mi se potrivește orice altceva. De asemenea, puteți adăuga un titlu înainte de meniu și îl puteți stila cumva. Puteți face acest lucru singur. Titlurile sunt scrise în etichete pereche <h1> - <h6>, unde primul este cel mai mare (titlul articolului) și ultimul este cel mai mic, adesea nu este folosit deloc. Pentru titlul meniului din bara laterală, este optim să luați <h3>.</p><h3>Pasul 9. Proiectarea blocului de conținut</h3><p>Ei bine, ce să aranjezi acolo? Trebuie să adăugați ceva text pentru a face să arate ca un site real cu un articol.</p><p> <h1>Titlul articolului</h1> <p>Și iată un articol...</p> <p>Conținutul articolului este împărțit în paragrafe și subtitluri...</p> <h2>Subtitlul articolului</h2> </p><p>Orice conținut poate fi inserat într-un bloc de conținut. Paragrafele din acesta formează conținutul principal, iar etichetele h1-h2 formează titlurile și subtitlurile. Etichetă <b>h1</b> ar trebui să fie singurul de pe pagină.</p><p>Decorarea în acest caz înseamnă definirea culorii textului. De exemplu, puteți pune maro. Titlurile pot fi evidențiate într-o nuanță ușor diferită. Aici nu voi da niciun cod, vă puteți gândi deja la el.</p><h3>Pasul 10 Decorarea subsolului</h3><p>Sincer să fiu, nu vreau acum să bag ceva în subsol. Pe site-urile reale, conține informații despre drepturile de autor, uneori sunt plasate acolo meniuri și link-uri către alte site-uri. Voi scrie acolo cuvântul drepturi de autor și îl voi alinia la centru astfel:</p><p>#footer( text-align: center )</p><h3>Pasul 11. Nu, nu mai sunt pași.</h3><p>Asta, de fapt, este tot. Procesul de creare a celui mai simplu șablon pe html poate fi considerat complet. Avem un logo, un nume de site, un meniu, un articol, un subsol. În general, acesta este un site foarte primitiv, dar totuși.</p><p><img src='https://i0.wp.com/dolinacoda.ru/wp-content/uploads/2016/01/sajt-tselikom.jpg' width="100%" loading=lazy loading=lazy></p><p>Bineînțeles, site-ul arată astfel încât să vrei să nu te mai uiți niciodată la el, dar asta nu schimbă esența. Aspectul bun este treaba unui designer web.</p><h3>Și ce să faci mai departe cu el?</h3><p>Scopul acestui articol a fost pur și simplu să vă arate cum să creați un site web simplu folosind html și css. Puteți lucra la designul său și rezultatul poate fi ceva atractiv. Dar totuși, trebuie să rețineți că acesta este un site static. Dacă îi sunt adăugate pagini noi, atunci acest lucru se face manual, prin crearea de noi documente html.</p><p>Această metodă de management al site-ului a dispărut de mult, deși are avantajele ei. Pentru a pune site-ul pe web, trebuie să aruncați toate fișierele html, foaia de stil și pozele necesare pe un fel de găzduire, plătită sau gratuită. De asemenea, trebuie să înregistrați numele site-ului, astfel încât să fie numit cumva. Un domeniu de nivel al treilea poate fi obținut gratuit de la multe companii, dar va trebui să plătiți pentru un domeniu de nivel al doilea <b>(.ru, .com, .ua etc.)</b></p><p>Ceea ce am făcut cu tine în cursul acestui articol se numește aspectul site-ului. Dacă doriți să gestionați site-ul folosind un editor vizual convenabil, atunci aspectul deja realizat va trebui să fie integrat cu oricare dintre motoarele populare. Cel mai bine cu <b>WordPress</b>.</p><p>Acesta este un subiect separat - integrarea este în multe privințe mult mai complicată decât aspectul în sine. Pentru a învăța cum să creați site-uri web pentru motor, trebuie să urmați un curs de pregătire bun. Informațiile gratuite de pe Internet ar putea să nu fie suficiente pentru tine. Am descris procesul de creare a unui site pe wordpress, dar acolo nu veți găsi informații despre cum să integrați șablonul html cu motorul.</p><p>Articolul a citat așa-numita metodă de aranjare a blocurilor, adică am plasat tot conținutul în blocuri. Astăzi este încă cea mai populară metodă. În general, este de dorit să folosiți etichete HTML5 în acest proces și nu doar blocuri, ci, de dragul simplității, cea mai simplă opțiune a fost folosită în acest articol.</p><p>Sper că aveți cel puțin o idee minimă despre cum să faceți un site web html în notepad sau orice alt editor de text.</p> <p>Domnilor, bună dispoziție tuturor) Astăzi am decis să scriu un articol pe tema - Cum să vă creați propria pagină web. Am fost îndemnat la acest subiect de cititori și prieteni care, din anumite motive, încă nu fac distincție între tipurile de site-uri și pagini de pe Internet. Foarte rar numesc ceva pagină web))) Cu toate acestea, mulți dintre prietenii mei spun adesea așa. În special pentru ei, am decis să descriu principalele tipuri de pagini web pe care le poți crea pentru tine pentru a avea o anumită reprezentare online.</p> <p>Înainte de a crea o pagină web, trebuie neapărat să creați o adresă de e-mail sau de e-mail. Am descris opțiunile de creare în acest articol -. Și dacă aveți o adresă de e-mail, atunci vom urma opțiunile pentru crearea paginii dvs. web personale. Citiți mai departe pentru sfaturi despre cum să vă creați propria pagină web.</p> <h3>Site cu o singură pagină</h3> <p>Cel mai vechi mod))) Pentru aceasta trebuie să înveți elementele de bază ale limbajului HTML. Nu este necesar să facem acest lucru în timpul nostru, există un milion de servicii, despre care vor fi discutate mai jos. Cu toate acestea, dacă doriți să înțelegeți cum funcționează site-ul și, parțial, internetul, atunci încercați să creați singur un site cu o singură pagină. Am descris cum se face acest lucru în articol -. Există opțiuni pentru a crea un site web cu o singură pagină cu creatori de site-uri web și platforme gratuite.</p> <h3>Pagina din rețeaua socială Vkontakte</h3> <p>Cred că în vremurile noastre expresia: „Am creat o pagină pentru mine pe internet” se referă mai ales la rețeaua socială Vkontakte. VK este cea mai populară rețea socială din CSI. Crearea paginii dvs. aici este o chestiune de 1 minut. Mai mult, zeci de funcții utile pentru activități pe Internet sunt deschise pentru tine. <br>Am scris multe despre Vkontakte și intenționez să scriu și mai multe)) Cu această rețea socială, puteți și.</p> <p>Vkontakte vă permite, de asemenea, să creați o adresă URL convenabilă către pagina dvs. web, în locul adresei URL standard atunci când vă înregistrați http://vk.com/id8032931. Apoi îl puteți schimba cu unul frumos - http://vk.com/vasheimya.vashafamiliya.</p> <h3>Pagina din rețeaua socială Facebook</h3> <p>Dacă Vkontakte este cea mai populară rețea socială din CSI, atunci Facebook este rețeaua socială #1 din lume. Facebook, se consideră, pare a fi pentru utilizatorii avansați vorbitori de limbă rusă))) Dar personal, cred că totul se datorează faptului că Facebook este foarte popular și convenabil.</p> <p>La fel ca în Vkontakte, vă puteți atribui o adresă frumoasă pentru pagina dvs. web. Manual complet - cum să creați o pagină web pe Facebook, am descris în articol -.</p> <h3>Blog</h3> <p>Un blog este cea mai recomandată opțiune pentru a vă crea pagina web. Blogul oferă mii de oportunități de autorealizare și este foarte ușor de utilizat. Adesea la fel de gratuit ca paginile web de rețele sociale. <br>Ofer o selecție de articole despre crearea unei pagini web folosind un blog:</p> <ul><li>- rapid, dar cu costul gazduirii si un domeniu separat.</li> <li>este o platformă de blogging de la Google. Integrat cu multe servicii Google. Foarte la îndemână dacă ești fan Google))</li> <li>este platforma de blogging cu cea mai rapidă creștere. Am citit statistici într-una dintre publicațiile americane că Tumblr este mai popular în rândul copiilor americani de 12-13 ani decât Facebook!!! Cred că acesta este un indicator al confortului și dezvoltării acestei platforme.</li> <li>- aici sunt manuale pentru aproape toate platformele de blogging cunoscute, inclusiv cele menționate mai sus.</li> </ul><h3>Un jurnal</h3> <p>Iată toate opțiunile de bază pentru a vă crea pagina web sau, cu alte cuvinte, o prezență web. Literal 1 minut și ești deja cufundat în spațiul World Wide Web. Navigare web fericită!</p> <p>Bună ziua, dragi prieteni și oaspeți ai blogului meu! Ai. Tocmai am observat că Yandex mi-a acordat TIC 20, deși ieri a fost 0. Înțeleg că TIC nu mai înseamnă nimic, dar este totuși foarte plăcut și vesel. Ei bine, în general, am vrut să continui seria recent lansată 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.</p> <p>HTML este încă baza tuturor și chiar dacă nu sunteți un dezvoltator web cool, dar vă faceți site-urile pe motoare, atunci cunoașterea limbajului HTML va fi un plus uriaș și gras. Prin urmare, în articolul meu de astăzi, vreau să vă spun cum să creați un site web html folosind notepad.</p> <p>Desigur, ceea ce vom face astăzi cu greu se va numi site, așa că voi spune imediat că astăzi nu vom crea un site 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 nicio dificultate. Ca rezultat, vom crea cea mai simplă pagină web pentru a începe. Și dacă ești gata, să mergem!</p> <p>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. Deschis? Bine făcut!</p> <p>Orice document html sau site este marcat cu etichete speciale. O etichetă este un semn special care indică site-ului cum să afișeze corect una sau alta parte de conținut inclusă în el. Acum nu mă voi opri asupra acestui lucru în detaliu, deoarece am să vă povestesc despre etichetele din .</p> <p>Permiteți-mi să spun doar că majoritatea etichetelor sunt împerecheate, adică eticheta de deschidere este pusă pe primul loc și, după ce am scris informațiile, trebuie să închidem eticheta. Se închide în același mod în care se deschide, doar că trebuie să puneți un semn „/” înainte de a închide.</p> <p><img src='https://i2.wp.com/koskomp.ru/wp-content/uploads/2016/06/Bez-imeni-1.jpg' width="100%" loading=lazy loading=lazy></p> <p>În general, pentru funcționare trebuie să punem câteva etichete obligatorii. Să vedem care sunt.</p> <ul><li><html></html>- 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.</li> <li><head></head>- informațiile de serviciu sunt introduse aici, de exemplu, numele documentului, descrierea și multe altele. Plasat imediat după eticheta deschisă <html>.</li> <li><title>- Intre aceste valori scriem titlul paginii, adica acest titlu nu va fi afisat in continutul site-ului in sine, ci in 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 o mizerie în cap, așa că vă voi arăta totul cu un exemplu viu.

Exemplu viu

Deci creăm un document text și scriem următorul conținut acolo:

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

Sfat!Încercați totuși să nu copiați conținutul, ci să-l rescrieți cu propriile mâini. Astfel, vei învăța tot materialul mult mai bine și mai rapid.

După aceea, salvați documentul ca html. Pentru a face acest lucru, la salvare, după ce ați denumit documentul, puneți 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 cu orice browser. Hai să o facem și să vedem ce avem.

Uite cât am scris în total și doar textul nostru de bun venit a rămas în documentul final. 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. Așa a mers totul. 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 va fi suficient să deschideți din nou acest document deja salvat în notepad. În general, uite, așa că cu ajutorul unui blocnotes am realizat primul nostru site. Da... e greu să-i spui site, dar de fapt este. Noi am făcut baza (cadru) și dacă o încărcăm pe hosting, atunci va fi deja afișată 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 un browser. Ce vedem? Și faptul 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 împacheta 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, te-ai prăbușit din stejar. Da, dragii mei. Această pagină web primitivă poate fi numită și site web. Și repet încă o dată că scopul acestui articol nu a fost acela de a crea un site mega-cool, ci de a vă arăta baza oricărui site, cum arată, cum se întâmplă totul.

Dar nu-ți face griji. Toate acestea sunt lecții introductive. În plus, ne vom scufunda din ce în ce mai profund î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 vor încadra într-un articol și nici eu nu o voi mototoli și tăia, altfel se va dovedi a fi gunoi.

Blocnotes dedicat pentru dezvoltatori 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 modul obișnuit.

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

A, ș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 din lista derulantă formatul „html”. 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? Cert este că atunci când vizitezi orice site, în mod implicit caută pagina index.html sau index.php. Aceste fișiere sunt în general acceptate ca fiind principale, dar în general acest lucru poate fi schimbat pe server.

Desigur, dacă vrei să înveți totul rapid, îți recomand să urmărești cel recent lansat Curs HTML5 și CSS3. Acolo totul este descris în detaliu și afișat pe un exemplu live, în plus, veți învăța cum să faceți mai multe tipuri de site-uri. Î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 postări ale mele de pe blog. Sunt sigur că multe dintre ele îți vor fi de folos. În general, vă doresc mult succes. Ne vedem in alte articole. Pa! Pa!

Cu stimă, Dmitri Kostin.

Salutare 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 Limbajul de marcare hipertext (HTML). În acest articol, vom învăța conceptele de bază ale HTML și vom învăța cum să creăm cele mai simple pagini WEB.

Să începem cu cel mai important, luați în considerare modul în care funcționează în sine World Wide Web - internet. Pentru a obține pagini web, creați fișiere scrise în HTML și le puneți pe un server web. După aceea, 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. Așteaptă continuu cereri de la browsere pentru pagini web, imagini, fișiere audio și video. După ce a primit o solicitare pentru una dintre aceste resurse, serverul o caută și o trimite browserului.

Browser este un program special conceput pentru a naviga pe site-uri web, cum ar fi Internet Explorer. Cu browserul dvs., navigați pe 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. Atunci când pagina este afișată intră în joc limbajul HTML, acesta spune browserului totul despre structura și conținutul paginii web. Cu ajutorul comenzilor - Etichete, HTML spune browserului unde încep paragrafele de text, ce parte a textului este titlul și spune unde să insereze tabele și chiar imagini. Și etichetele sunt cuvinte între paranteze unghiulare, de exemplu

, .
Este nevoie urgent de un magazin online, dar nu există timp pentru a învăța 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 de HTML a apărut în 1992. La momentul anului 2013, este în curs de dezvoltare o specificație pentru o nouă versiune a HTML numărul 5. Această specificație este dezvoltată de World Wide Web Consortium, sau pe scurt W3C. W3C dezvoltă și alte standarde Web. Puteți face cunoștință cu aceste standarde pe site-ul lor www.w3.org. Apropo, multe browsere Web acceptă deja unele caracteristici HTML 5.
Îmi propun să încep imediat să înveți limbajul HTML 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ă începeți cu utilizarea Windows-ului încorporat Notepad(in general, pe viitor, pentru editarea codului html, va sfatuiesc sa folositi ). Î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:

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 are descrieri ale multor mașini importate și autohtone.

Apoi, să salvăm pagina web creată într-un fișier numit index.html. În același timp, în caseta de dialog pentru salvarea fișierului, trebuie să setați codarea 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 rămâne 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 furnizat 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. Îl deschidem și vedem ceva de genul:
Așadar, am creat o pagină Web în Notepad, care este puțin mizerabilă, dar conține deja un titlu mare și un paragraf de text care se desparte automat în rânduri și conține un fragment de text aldine.
Ce este o etichetă?
Acum să vorbim mai multe despre structura paginii. Luați în considerare fragmentul:
Site despre mașini
. Aici vedem textul care este afișat pe pagină ca titlu, închis în etichete
și
. Ce este o etichetă în limbajul html?
Etichetă HTML sunt cuvinte și simboluri obișnuite cuprinse între paranteze unghiulare, de ex.
,
, . deci tag
este eticheta de deschidere, eticheta
eticheta de închidere, iar textul dintre acestea se numește conținutul etichetei. De asemenea, etichetați
și etichetați
se numesc etichete perechi. Împreună, eticheta de început plus conținutul plus eticheta de final formează un element de document html. Există, de asemenea, elemente formate dintr-o singură etichetă de deschidere:
Deci pereche de etichetă
definește elementul de antet de primul nivel. Există șase niveluri de titluri în total, acestea sunt elementele
—
.

Elementele sunt bloc și minuscule (text). Elemente de bloc efectuează formatarea structurală a paginii. Elementele bloc sunt întotdeauna afișate pe pagină pe o linie nouă și sunt indentate față de elementele învecinate. 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!
9 voturi
Bun venit la paginile blogului Start-Luck. Astăzi aș dori să vă arăt cum să utilizați codul. Scrierea de site-uri web este o activitate interesantă care poate părea copleșitoare pentru mulți. De fapt, o pagină simplă poate fi creată în doar 5 minute.

În acest articol voi vorbi despre crearea unei pagini html. Vom finaliza această sarcină în mai puțin de 10 minute, iar apoi ne vom ocupa de etichetele principale mai detaliat. Ar fi greșit să numim o astfel de publicație o lecție. Este mai mult un starter care este menit să-ți arate simplitatea meserii și să-ți dea dorința de a merge mai departe, de a învăța mai multe, de a face mai bine.

Cum se creează o pagină
Vă sugerez să faceți prima pagină într-un blocnotes. Cel mai simplu, care se află în meniul Start, folderul Accesorii. Încă nu trebuie să descărcați nimic. Încercați să profitați de ceea ce aveți.
Deschide un document.
Lipiți acest cod în el.

<html> <cap> <titlu > Prima mea pagină</titlu> </cap> <corp> <centru >
</h1> <br/>
<centru > „https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg”> <br/>
<fontstyle="color:red"></font> <br/>
<b></b> <br/>
Am ajuns la fund<br/>
Acum știi puțin mai multe despre etichete și le poți folosi. Să încercăm să inserăm un link pentru a lega mai multe pagini împreună.<br/>
<ora > De exemplu, aici este un link către blogul meu -<a href = "http://site/" >Începe norocul</a>- vorbește pur și simplu despre „dificil”.<br/>
<br/>
</corp> </html>

Prima mea pagină
Crearea unei pagini este mai ușoară decât crezi
Mulți li se poate părea că crearea de site-uri web este o sarcină dificilă, chiar imposibilă. Pentru a face asta, trebuie să înveți multe, să înveți, să faci. De fapt, există aproximativ 100 de etichete pe care nici nu trebuie să le înveți. Este important doar să înțelegeți ce și unde se aplică. Informațiile pot fi văzute în diferite foi de cheat și, în timp, veți începe să vă amintiți etichetele de pe aparat.

Cod simplu pentru a face textul roșu

Nu este mult mai greu să scrii cu aldine

Am ajuns la fund

Acum știi puțin mai multe despre etichete și le poți folosi. Să încercăm să inserăm un link pentru a lega mai multe pagini împreună..

OK, totul sa terminat acum. Prima pagină este gata

Fișierul trebuie să fie numit index.html. Sfarsitul „.html” indică extensia fișierului. Dacă introduceți pur și simplu numele indexului, documentul va fi salvat ca fișier text și nu va fi deschis de browser.

Am salvat documentul pe desktop. Acum trebuie să îl găsiți, să apăsați butonul din dreapta al mouse-ului și să îl deschideți cu orice browser. Voi alege Google Chrome.

Așa arată pagina pe care tocmai am creat-o. Al tău nu va fi diferit. Totul este exact la fel: cu imagini și font color.

Acum voi intra în mai multe detalii despre etichete, dar deocamdată să eliminăm doar „ centru ” și inserați o linie care conține cuvântul „ culoare". Apropo, am scris deja. Este foarte simplu, recomand să-l citiți.

Salvați din nou documentul, de data aceasta puteți utiliza doar comanda rapidă de la tastatură Ctrl + S, apoi reîmprospătați pagina în browser folosind butonul F5

Amintiți-vă, aproape orice etichetă trebuie să se deschidă și să se închidă. Adică, codul cu bară oblică trebuie să fie localizat undeva. În acest caz, arată astfel: .

Vezi, titlul a devenit roșu. În același mod, puteți da nuanța dorită oricărei părți a textului.

Ei bine, asta e tot, exemplul este gata și ar trebui să fii mândru de tine. Desigur, nu este încă online, pentru aceasta trebuie să fie așezată pagina web, care este furnizată de găzduire. De asemenea, trebuie să vă conectați domeniul pentru ca alte persoane să vă poată vedea creația.

Deocamdată, doar tu poți vedea pagina. Dar trebuie să recunoașteți că doar o persoană din epoca fierului poate fi surprinsă de un astfel de site. Dar aceasta este prima experiență, să o facem și mai de succes prin înțelegerea etichetelor pe care le-am folosit. Acest lucru vă va ajuta să învățați cum să vă creați proiectele fără ajutorul nimănui.

Etichete

Cu permisiunea dvs., voi trece la NotePad++. Are o serie de avantaje în comparație cu un blocnotes obișnuit. Acum voi avea nevoie de etichete de evidențiere pentru a vă arăta elementele despre care voi vorbi. În general, dacă aveți de gând să învățați html, atunci vă recomand cu căldură să instalați acest program gratuit.

Nu este singurul și vă pot oferi încă câteva dacă cineva este interesat de alternative. Vom trece la partea teoretică.

Principal

Pagina începe și se termină cu etichete . Ei arată browserului că acesta este un document web creat cu html.

Urmează sau titlu. Conține cele mai importante informații despre pagină, în cazul nostru - . Dacă nu ați găsit încă expresia „Prima mea pagină”, care este prezentă în cod, fiți atenți la fila în sine, deasupra liniei de căutare.