Descărcați HTML pe pagina Web informatică. Un exemplu de creare a paginilor HTML în Notepad. Șablonul de aterizare fără zăpadă pe HTML5 și CSS3
În lumea modernă, uneori este important să aveți propriul site web, cum ar fi disponibilitatea unui telefon sau a unui număr de adresă e-mail. Din păcate, nu toată lumea poate face independent un frumos site profesional și, uneori, nici măcar nu funcționează curba. Pentru a comanda programatorii nu este, de asemenea, calea perfectă, deoarece nu este pentru toată lumea să fie în buzunar.
De la o astfel de situație va ajuta gratuit Șabloane HTML. site-uri. Șablonul site-ului HTML este un set de pagini statice gata pentru site-ul unui anumit subiect. Cu ajutorul unui astfel de șablon, creați un site simplu poate fi literal în câteva ore, cu cunoștințele de bază ale marcajului HTML. În secțiunea HTML, veți obține aceste cunoștințe dacă vă petreceți câteva ore pe învățare și dacă nu regretați secțiunea CSS, puteți controla pe deplin designul șabloanelor de site-uri HTML și le puteți stabili complet sub nevoile dvs.
Încă unul un plus indiscutabil Șabloanele site-ului sunt că sunt scrise în majoritatea cazurilor profesioniști. Sub șablonul profesional, site-ul este înțeles nu numai un design frumos și modern, ci și ca codul este scris. Motoare de căutare Arătau ca și cum ați scris un site, cod optimizat SEO sau nu, bazat pe acest lucru în jos sau creșteți poziția în extrădare. Prin urmare, un bun site nu ar trebui să fie nu numai frumos și modern, care este important, dar și în mod competent scris în ceea ce privește codul.
Descărcați șabloane de site-uri gratuite HTML și creați-vă proiectele cât mai curând posibil.
15 voturiSalutări pentru tine pe paginile blogului de noroc. Astăzi aș dori să vă arăt cum să utilizați codul. Scrierea site-urilor este o ocupație interesantă că mulți pot părea dificil să pară dificil. De fapt, o pagină simplă poate fi creată în doar 5 minute.
În acest articol voi spune despre creație pagini HTML.. Vom realiza această sarcină mai mică de 10 minute și apoi vom da seama mai detaliat cu etichetele principale. Ar fi greșit să numim o lecție similară de publicare. Este mai degrabă o sămânță, care este concepută pentru a vă arăta ușurința de a lucra și a da naștere unei dorințe de a merge mai departe, a afla mai multe, face mai bine.
Cum de a crea o pagină
Prima pagină Vă sugerăm să faceți în notebook. Cel mai simplu, care se află în meniul "Start", dosarul "Standard". Până când trebuie să descărcați nimic. Încercați să utilizați ceea ce aveți.
Deschideți documentul.
Introduceți acest cod în ea.
<hTML\u003e
<head\u003e
<titlu\u003ePrima mea pagină</ Titlu\u003e
</ Head\u003e
<corp\u003e
<centru\u003e </ H1\u003e center > <br /\u003e<centru\u003e center > <br /\u003e <font Style \u003d "Culoare: roșu"\u003e</ Font\u003e <br /\u003e <b\u003e</ B\u003e <br /\u003e Am ajuns la Niza<br /\u003e Acum știți mai multe despre etichete și le puteți folosi. Să încercăm să introducem o referință pentru a lega mai multe pagini împreună.<br /\u003e <hr\u003e De exemplu, aici este legătura cu blogul meu -<a HREF \u003d "HTTPS: // Site /"\u003eNoroc.</ A\u003e. - spune doar despre "complex".<br /\u003e <br /\u003e </ Corp\u003e </ Html\u003e |
Creați o pagină mai ușoară decât credeți
Codul simplu vă permite să faceți text roșu
Scrieți grăsimea nu este mult mai dificilă
Am ajuns la Niza
Acum știți mai multe despre etichete și le puteți folosi. Să încercăm să introducem o referință pentru a lega mai multe pagini împreună ..
Asta este. Prima pagină este gata
Dosarul trebuie să fie numit index.html.. Final ".Html" Specifică extensia fișierului. Dacă introduceți doar numele indexului, atunci documentul va continua ca fisier text Și nu va deschide browserul.
Am salvat documentul de pe desktop. Acum trebuie să o găsiți, să faceți clic pe butonul din dreapta al mouse-ului și să vă deschideți cu orice browser. voi alege Google Chrome..
Aceasta este ceea ce am creat de mine arată doar. Nimic nu va fi diferit. Toate exact: cu imagini și fonturi de culoare.
Acum voi spune despre etichete în detaliu, dar pentru moment să îndepărtăm doar din antet " centru "Și introduceți linia în care conține cuvântul" Culoare" Apropo, am scris deja. Este foarte simplu, recomand să citesc.
Încă o dată, salvați documentul, de data aceasta puteți utiliza pur și simplu combinația cheie Ctrl + S și apoi actualizați pagina din browser utilizând butonul F5
Amintiți-vă, aproape orice etichetă trebuie să se deschidă și să se închidă. Aceasta este, undeva ar trebui să fie plasată codul cu stratul. În acest caz, se pare așa: .
Vedeți, titlul a devenit roșu. În mod similar, puteți da umbra dorită a oricărei părți a textului.
Ei bine, asta-i tot, exemplul este gata și trebuie să fii mândru de tine. Desigur, nu este online, pentru această pagină web pe care trebuie să o stați pe găzduire. De asemenea, trebuie să vă conectați domeniul astfel încât alți oameni să vă poată vedea creația.
În timp ce pagina vedeți numai dvs. Dar sunteți de acord, acest site poate surprinde doar o persoană din epoca de fier. Dar aceasta este prima experiență, să facem mai mult succes, sobru cu etichetele pe care le-am folosit. Acest lucru vă va ajuta să învățați cum să vă creați proiectele, fără ajutor.
Etichete
Cu permisiunea dvs., voi merge la programul Notepad ++. Are o serie de beneficii în comparație cu notepadul obișnuit. Acum sunt foarte util să iluminez etichetelor pentru a vă arăta acele elemente pe care le voi spune. În general, dacă veți studia HTML, recomandăm cu adevărat să instalați acest lucru program gratuit.
Nu este singura și vă pot oferi mai mult dacă cineva va fi interesat de alternative. Mergem la partea teoretică.
întreținere
Începe și se termină pagina cu etichete . Acestea arată browser-ului că acesta este un document web creat folosind HTML.
Următorul merge sau titlu. Conține cel mai mult informații importante Despre pagina, în cazul nostru -. Dacă nu ați găsit încă fraza "Prima mea pagină", \u200b\u200bcare este prezentă în cod, acordați atenție filei, deasupra cusăturii de căutare.
Este eticheta
Etichetă
Indică faptul că fraza este o rubrică. În mod implicit, este puțin mai mare decât textul principal și evidențiază grăsimea. Dacă am scris acum nu numai pe HTML, dar a creat și un fișier CSS cu care fișierul nostru a reluat, ar putea controla dimensiunea, fontul și chiar și culoarea tuturor titlurilor de pe pagină, fără a prescrie stilul fontului.
Cum am făcut-o în exemplu. Deși este prea devreme.
Apropo, titlu și H1 au influența lor în timp ce atribuie site-ul dvs. în rezultatele căutării. Este necesar să le tratăm cu mare atenție și să nu scrieți în interior dacă numai asta. Sunt legate de. În plus față de H1, există, de asemenea, H2, H3, H4.
În aceeași linie există o deschidere și închidere
- una dintre puținele etichete unice. Asta este, el lucrează în sine. Datorită acestui lucru, elementele pe care le sari de la o linie la alta. Pur și simplu puneți o liniuță. Au scris-o o dată, așa că sa mutat o dată, două, ca mine, iar linia sa dovedit a fi puțin mai mult.
Imagine
Următorul este etichetă img. , adică imagine, imagine. Suportul pătrat se deschide, toate informațiile de bază despre imaginea se potrivește în ea, numai după aceea se închide. Trebuie remarcat faptul că img. - Aceasta este o etichetă și toate celelalte elemente ale codului care se încadrează în interior sunt atributele sale.
În primul rând merge alt. , adică descrierea. De asemenea, este necesar să se optimizeze. Uneori a adăugat și titlu . Când deplasați mouse-ul de lângă cursor apare un indiciu când pagina este deja deschisă în browser.
Ați putea descărca desenul în dosarul site-ului și puteți scrie calea spre ea, dar am mers calea usoara. Printre Pixabay, am găsit o imagine, o deschise într-o fereastră nouă și am introdus o legătură.
În Teg. sRC. prescris calea către imagine. Este cel care indică browser-ul care trebuie să se deplaseze pentru a găsi imaginea dorită și în ce direcție pentru a căuta - scrie-ți singur.
Formatarea textului
Responsabil pentru a oferi o parte din textul unui tip de stil special, de exemplu, ca în cazul nostru de altă culoare. stil \u003d »Culoare: roșu» Arată că culoarea va fi roșie. Dacă doriți galben, scrieți galben, verde - verde. Puteți folosi fotografii ale culorilor Photoshop.
Ajută la evidențierea grăsimii textului.
Atrage linie orizontală. Este unic și folosit numai într-o formă închisă. Dacă scrieți
de mai multe ori, apoi obțineți exact la fel stripele orizontale Când deschideți o pagină în browser.
Link-uri
Specifică browserul, care va fi mai departe. Doriți să redirecționați cititorul la o altă adresă. Această etichetă vine cu un atribut obligatoriu href \u003d "adresa" . Calea este introdusă în cotație, unde browserul trebuie să transfere vizitatorul la pagină. După înregistrarea acestei etichete, descrierea este introdusă, cuvântul sau mai mult, când faceți clic pe care cititorul va fi transferat în continuare. După ce aceste condiții sunt finalizate, puteți introduce a doua etichetă de închidere а> .
După ce partea principală a paginii este scrisă, închideți eticheta corp. Deoarece corpul este finalizat. Și indicați că încetați să utilizați astăzi hTML. .
Dacă doriți să aflați mai multe despre etichetele HTML și să învățați să introduceți nu numai imagini, ci și video, creați butoane, diverse forme, liste, paragrafe, atunci vă pot oferi un curs gratuit de Evgeny Popova " Bazele HTML. " Total 33 de lecții vă vor ajuta să ajungeți la un nou nivel.
De asemenea, vreau să vă recomand un curs video, ceea ce spune modul în care site-urile sunt tratate. Întregul proces este arătat în exemple reale, care este deosebit de bun. Cursul este conceput pentru ambii veniți, care chiar și HTML nu știu și pentru cei care cunosc deja HTML Ei bine, și CSS, totuși, site-urile nu știu cât de bine. Puteți obține informații mai complete făcând clic pe linkul: www.srs.myrusakov.ru/makup.
În plus, scoateți-vă Carte gratuită pe site-ul creației Fotografiile! Această carte este proiectată pentru începători, iar aici este creat site-ul de la și la. Adică, designul se pregătește, apoi paginile vor fi stăpânite, partea de software este scrisă și după ce site-ul este postat pe Internet. Autorul comentează cu atenție, iar în carte există o mulțime de capturi de ecran și ilustrații. În plus, caracteristica cărții este că site-ul non-unele abstract este creat, dar destul de real și existent pe Internet.
Astăzi ați făcut multe, pentru că primul pas este cel mai dificil.
Abonați-vă la newsletter și grupul Vkontakte. Și aflați mai multe: Cum și de ce aveți nevoie de un motor de site, ceea ce este un aspect bloc și o grilă modulară, cum să scrieți site-uri și multe altele.
La întâlniri noi și noroc!
Toți vă urez bun venit, dragi prieteni. Astăzi, cu tine, ca întotdeauna, Dmitri Kostin și am o mică surpriză pentru tine, și anume examenul! Deși bine, am glumit despre examen. Tocmai am decis să termin lecțiile privind elementele de bază ale HTML și în acest articol aplică cunoștințele obținute în lecțiile anterioare în practică.
Vreau să vă prezint un exemplu simplu de creare a unui site HTML în notebook-ul Notepad ++ într-o chestiune de minute. Desigur, vom crea un simplu, nu confuz, rapid și aș spune chiar lui Lohovskaya (îmi pare rău pentru limba franceză))). Dar totuși, datorită acestui lucru puteți consolida cunoștințele dobândite. Acest lucru este cu adevărat important în această chestiune.
Doar nu uitați la crearea unui document nou în Notepad ++ pentru ao recupera în UTF-8.
Întrebați: "De ce atât de puțini lecții? În HTML există mult mai multe etichete și atribute. " Da, da, ești într-adevăr corect, dar timpul merge și multe etichete nu mai funcționează în cele mai recente versiuni ale HTML, sau pur și simplu sunt considerate inutile și nimeni nu le folosește.
De exemplu, există o etichetă care este responsabil pentru font. Datorită lui și atributelor, puteți schimba conținutul intern, de exemplu, dimensiunea fontului, culoarea, fontul însuși. Dar astăzi, așa cum am spus deja, Nu sunt acceptate de utilizat. Acest cod nu va mai fi valid. În schimb, folosim CSS. Este mult mai convenabil și mai practic. Oricum. Să începem să începem să creați site-ul.
Am remarcat în documentul locurile unde va trebui să faceți aceste liste, dar, desigur, doar în cazul în care voi arăta cum ar trebui să arate.
Ne salvăm și ne uităm la noi. Se pare că totul este necesar. Excelent. Deja avansată departe.
Inserați tabelul
Deschideți o pagină de pagină table.html., Trageți toate titlurile și textul din același nume de același nume, după care este posibil să distribuiți toate etichetele și atributele așa cum ar trebui.
Acum mergeți la ceea ce avem nevoie. Creați o masă în 5 linii și 5 coloane, după care introducem valorile corespunzătoare în ele. Nu uitați să puneți atributele necesare, și anume border \u003d "2", CellPadding și CellSpacing Pe 5. În codul ar trebui să arate astfel:
Ne salvăm și ne uităm la noi. Toate perfect!
Pagina despre autor
Am făcut deja aproape totul. Tocmai am plecat să terminăm pagina despre autor. Mergi la pagina Obo-mne.html. Și introduceți întregul text cu toate anteturile de la același nume de la documentul Vordovsky și pe etichetele de dispersie.
Pe scurt, acum după etichetele capacelor site-ului și meniul, va trebui să înregistrați adresa acestei imagini și să puneți atributul align \u003d "stânga" pe care textul a căzut o fotografie. Dacă arată urât, puteți juca cu incitemente de mai mulți pixeli. Se pare că arată așa.
Ai făcut totul? Totul a fost rezolvat? Sper că da. Dar acum avem nevoie. Există o legătură în document. Tot ce aveți nevoie este doar introduceți-l după textul principal. Dacă brusc videoclipul urcă fotografia autorului, atunci imediat după text, faceți câteva liniuțe
.
Ei bine, pare a fi tot. Cu privire la sarcină, totul este îndeplinit și acum aveți un astfel de site HTML simplu realizat în Notepad ++ Notebook literalmente timp de 10-15 minute. În ciuda faptului că acesta este cel mai ușor cadru HTML fără proprietăți CSS și alte Priblud, există încă oameni care vând cursurile lui Alya "Cum să creați un site" cu informații similare cu aceasta. Și iau bani pentru asta - și 500 de ruble, și chiar 2000. Sunt doar șocat!)
Ei bine, dacă luăm câteva cursuri, atunci este mai bine pentru profesioniștii care au mâncat un câine în acest sens. Personal, vă recomand să urmăriți cursul lui Andrei Bernadsky " HTML5 și CSS3 de la zero la Guru"Cursul este pur și simplu minunat, simplu în dezvoltare și conceput pentru orice nivel al utilizatorului. Datorită lui, într-adevăr să înveți cum să faci site-uri destul de bune.
Apropo, cum sunt stilourile tale? Sper că nu vă filați și ați prescris totul cu mânerele minunate. Sper că nu aveți terci în capul tău și am explicat totul bine. Ei bine, dacă nu sa întâmplat ceva, există o versiune pregătită a site-ului nostru în dosarul cu toate comentariile astfel încât să puteți da seama.
Fuh. În general, astăzi sunt totul. Apa de azi a băut Litra 4 probabil din cauza căldurii. Deci, sper că ți-a plăcut articolul meu și a fost util în planul de studiu. Nu uitați să vă abonați la noile articole din blogul meu. Îți voi spune multe lucruri mai interesante. Și vă urez noroc și trageți calm căldura. Ei bine, m-am dus să se răcească. Te văd. Pa! Pa!
Cu sinceritate, Dmitri Kostin.
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. Acestea informează browserele și motoarele de căutare că aceasta este o pagină HTML.
Orice pagină HTML are următoarea structură:
... Etichete etichete ... ... corpul paginii ...
2.
- Există toate conținutul de pagină vizibil între aceste etichete.
4.
Acum, să trecem la etichetele care sunt în paginile HTML (în interior
).
5.
6.
- Aceasta este una dintre eticheta de etichetă a etichetei de clasă.. , De obicei, numele paginii este încheiat. De exemplu, această pagină este eticheta antetului "Exemplu de creare a unei pagini HTML." Notă
aceste etichete au o mulțime de greutate în clasamentul site-ului, așa că trebuie să folosească cu atenție și cu mintea.
Când elaborați un cod HTML, trebuie să respectați norma simplă: Mai întâi trebuie să existe o etichetă a antetului
, și apoi poate merge deja
, etc. Principalul lucru este că nu a fost primul , mai tarziu , mai tarziu etc. Trebuie să existe o ierarhie strictă. Headlovkov.
, etc. Poate foarte mult.
etc. Principalul lucru este că nu a fost primul , mai tarziu , mai tarziu etc. Trebuie să existe o ierarhie strictă. Headlovkov.
, etc. Poate foarte mult.
, mai tarziu etc. Trebuie să existe o ierarhie strictă. Headlovkov.
, etc. Poate foarte mult.
, etc. Poate foarte mult.
7.
- Aceasta este o singură etichetă care nu necesită o etichetă de închidere. Tranziția la următoarea linie. Două etichete unice la rând sunt scrise în exemplul meu pentru a merge la următoarea linie de două ori.
8. - Aceasta este o singură etichetă care afișează imaginea.
- sRC este un parametru obligatoriu în care este specificată adresa de imagine (în locul adreselor URL, trebuie să înregistrați adresa în care imaginea dvs. este stocată).
Notă:- Dacă imaginea este într-un singur dosar cu pagina HTML, este suficient să scrieți numele imaginii, altfel trebuie să vă prescrieți fie o adresă URL absolută sau relativă;
- Nu uitați să specificați extinderea imaginii. De exemplu, .jpg, .gif, .jpeg.
- aLT sau TITLE - Puteți scrie o descriere imaginii dvs. în acești parametri. Când aduceți un mouse la imagine, atunci va apărea această descriere. Acești parametri sunt importanți pentru a promova site-ul, în special în căutarea de imagini. Dacă imaginea nu a reușit să descărcați, atunci acest text va fi derivat, care este, de asemenea, un plus.
9. - Aceste etichete sunt proiectate pentru a schimba fontul, fundalul, dimensiunea etc. Pe scurt, tot ceea ce este asociat cu formatarea textului poate fi configurat într-o singură etichetă. Această etichetă are câteva atribute pe care le voi spune într-o lecție separată.
Notă: - O etichetă similară.
Există, de asemenea cSS proprietate Font în care puteți seta toți acești parametri.
10. - Alocați grăsime. Tot ce se încheie între și Va fi evidențiată grăsimi. De exemplu, dacă îl scrieți la începutul conținutului și închideți la sfârșit, atunci întregul text de pe pagină va fi evidențiat grăsimile. Aceasta este o etichetă destul de comună, a cărui analog este .
Motoarele de căutare acordă atenție acestei etichete în ceea ce privește consolidarea influenței cuvintelor cheie. Dar trebuie să fiți atenți pentru că alocați grăsimi de fiecare dată cuvinte cheie va fi percepută pentru spam.