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 creare 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 > <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> |
Crearea unei pagini este mai ușoară decât crezi
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, faceți clic butonul corect mouse-ul și 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 cel mai mult Informații importante 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.
Și anume etichete
Etichetă
indică faptul că fraza este un antet. În mod implicit, este puțin mai mare decât corpul textului și este aldine. Dacă tu și cu mine am scrie acum nu numai în html, ci și să creăm un fișier CSS cu care fișierul nostru avea ceva în comun, am putea controla dimensiunea, fontul și chiar culoarea tuturor titlurilor de pe pagină fără a scrie stilul fontului
așa cum am făcut în exemplu. Este totuși prea devreme pentru asta.
Apropo, Title și H1 au influența lor atunci când atribuiți site-ului dvs. un loc în rezultatele cautarii. Trebuie să le tratați cu mare atenție și să nu scrieți în interior, dacă doar atât. Ele sunt legate de . Pe lângă h1, există și h2, h3, h4.
În aceeași linie există o deschidere și o închidere
- una dintre puținele etichete simple. Adică funcționează de la sine. Datorită acestui lucru, săriți elemente de la o linie la alta. Cu alte cuvinte, fă un pas înapoi. L-au scris o dată, ceea ce înseamnă că s-au mutat în jos o dată, de două ori, ca a mea, iar liniuța s-a dovedit a fi puțin mai mult.
Imagine
Urmează eticheta img , adică imagine, imagine. Paranteza pătrată se deschide, toate informațiile de bază despre imagine se încadrează în ea, abia după aceea se închide. Trebuie remarcat faptul că img este o etichetă, iar toate celelalte elemente de cod care se potrivesc în interior sunt atributele sale.
In primul rand merge alt , care este o descriere. Acest lucru este necesar și pentru optimizare. Uneori și adăugat titlu . Când treceți cu mouse-ul peste o imagine, lângă cursor apare un sfat explicativ atunci când pagina este deja deschisă în browser.
A fost posibil să încărcați fotografia în folderul site-ului și să setați calea către ea, dar am mers pe calea ușoară. Printre pe Pixabay am găsit o poză, am deschis-o într-o fereastră nouă și am lipit linkul.
În etichetă src se scrie calea către imagine. El este cel care spune browserului că trebuie să vă deplasați mai departe pentru a găsi imaginea dorită și în ce direcție să priviți - scrieți singur.
Formatarea textului
este responsabil pentru a da unei părți a textului un stil special, de exemplu, ca în cazul nostru, o culoare diferită. style="color:red" indică faptul că culoarea va fi roșie. Dacă vrei galben, scrie galben, verde - verde. Puteți utiliza coduri de culoare din Photoshop.
ajută textul să fie aldine.
remiză linie orizontală. Este unică și folosită numai când este închisă. Daca scrii
de mai multe ori, veți obține exact același număr de dungi orizontale atunci când deschideți pagina în browser.
Legături
spune browserului că va urma un link. Doriți să redirecționați cititorul către o altă adresă. Această etichetă vine cu un atribut obligatoriu href="adresă" . Calea în care browserul ar trebui să transfere vizitatorul pe pagină este inserată între ghilimele. După ce este scrisă această etichetă, se inserează o descriere, un cuvânt sau mai multe, la clic pe care cititorul va fi transferat în continuare. După îndeplinirea acestor condiții, puteți introduce o a doua etichetă de închidere .
După ce este scris corpul paginii, închideți eticheta corp din moment ce corpul este terminat. Și indicați că nu mai utilizați astăzi html .
Dacă doriți să aflați mai multe despre etichetele html și să aflați cum să inserați nu numai imagini, ci și videoclipuri, să creați butoane, diverse forme, liste, paragrafe, atunci vă pot oferi un curs gratuit de la Evgeny Popov " elementele de bază ale html ". Doar 33 de lecții te vor ajuta să atingi un nou nivel.
De asemenea, vreau să vă recomand un curs video care spune cum sunt alcătuite site-urile. Întregul proces este prezentat pe exemple reale, ceea ce este deosebit de bun. Cursul este destinat atât începătorilor care nici măcar nu cunosc HTML încă, cât și celor care cunosc deja bine atât HTML, cât și CSS, totuși, nu știu să dispună bine site-urile. Mai multe informații pot fi obținute făcând clic pe link-ul: www.srs.myrusakov.ru/makeup
În plus, luați Carte gratuită pentru crearea site-ului web ! Această carte este destinată începătorilor și aici este creat site-ul FROM și TO. Adică, designul este pregătit, apoi paginile sunt alcătuite, partea de software este scrisă și apoi site-ul este plasat pe Internet. Autorul comentează cu atenție totul, iar cartea are o mulțime de capturi de ecran și ilustrații. Mai mult, particularitatea cărții este că nu este creat un site abstract, ci destul de real și existent pe Internet.
Astăzi ai 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 web, ce sunt aspectul bloc și grila modulară, cum să scrieți site-uri web și multe altele.
Ne revedem și mult succes!
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 a ta.
Î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.
Site cu o singură pagină
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.
Pagina din rețeaua socială Vkontakte
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.
Am scris multe despre Vkontakte și intenționez să scriu și mai multe)) Cu această rețea socială, puteți și.
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.
Pagina din rețeaua socială Facebook
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 de limbă rusă))) Dar personal, cred că totul se datorează faptului că Facebook este foarte popular și convenabil.
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 -.
Blog
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.
Ofer o selecție de articole despre crearea unei pagini web folosind un blog:
- - rapid, dar cu costul gazduirii si un domeniu separat.
- este o platformă de blogging de la Google. Integrat cu multe servicii Google. Foarte la îndemână dacă ești fan Google))
- 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.
- - aici sunt manuale pentru aproape toate platformele de blogging cunoscute, inclusiv cele menționate mai sus.
Un jurnal
Iată toate opțiunile de bază pentru crearea paginii tale web sau, cu alte cuvinte, a unei prezențe web. Literal 1 minut și ești deja cufundat în spațiul World Wide Web. Navigare web fericită!
Salutare dragi cititori! Poate că toți utilizatorii de internet, în timp ce se plimbă prin întinderile nesfârșite ale rețelei, mai devreme sau mai târziu au dorința de a lăsa ceva al lor acolo, de a transmite oamenilor părerea lor despre anumite lucruri.
Apropo, chiar și pentru utilizatorii începători, nu este nimic complicat aici. În acest articol, vă voi arăta cum să creați o pagină web. Veți învăța chiar elementele de bază ale acestui proces.
Ce este o pagină web?
Un document hipertext sau o pagină web este un fișier text marcat cu etichete folosind HTML (HyperText Markup Language).
Toate obiectele prezentate acolo sunt recreate conform instrucțiunilor scrise de acest instrument, care au fost trimise la cererea acestuia de către server. Pentru a adăuga markup documentului, se folosesc etichete, care sunt incluse între paranteze unghiulare. De regulă, ele sunt împerecheate, adică există o deschidere și o închidere și între unele informații.
De exemplu, o etichetă care spune browserului că documentul HTML de mai jos ar arăta astfel: . Iar cel de închidere, care spune că codul se termină aici, arată astfel:. Astfel, singura diferență dintre eticheta de închidere și eticheta de deschidere este prezența unei bare oblice după paranteza de deschidere.
Acest limbaj de marcare vă permite să formatați textul unei pagini web, să instalați imagini, elemente grafice pe ea, să creați legături hipertext, să adăugați elemente multimedia, înregistrări audio, scripturi (VBScript, JavaScript).
Pentru a afla care este această limbă, nu este deloc necesar să te urci în manuale plictisitoare. Pentru mine personal, a fost suficient să-mi deschid browserul și să selectez opțiunea „Vizualizare cod sursă” (apăsați butonul din dreapta al mouse-ului). Liniile de cod prezentate în fereastră sunt același cod html. Acesta este codul pe care browserul îl transformă în continuare într-o pagină web.
Tipuri de pagini de pe Internet
Există trei tipuri de pagini web:
- Interactiv. Acestea includ formulare generate în limbaje VBScript, JavaScript, PHP, cu ajutorul cărora serverul face schimb de date cu utilizatorul;
- Dinamic . Sunt scrise în ASP, PHP cu permisiuni .aspx, .php. Aceste pagini sunt create de un motor sau un program special care generează o pagină web în funcție de solicitările utilizatorilor, folosind date de la serverul bazei de date;
- Static . Acestea includ fișiere statice (imagini, tabele, tastare etc.) generate în limbajul de marcare HTML.
Cum se creează?
Pentru a crea pagini web se folosesc editori html: FCKeditor, TinyMCE WYSIWYG Editor, Macromedia Dreamweaver, Microsoft FrontPage și altele. Toți acești editori au o mulțime de vrăjitori diferite care facilitează crearea de site-uri web, precum și șabloane pentru pagini cu design și structură. Cu ajutorul lor, vă puteți crea rapid propria pagină web.
Dar pentru cei cărora le place să facă totul singuri, puteți utiliza un simplu bloc de note, care este deja instalat pe orice computer în mod implicit.
Instructiuni:
- Creați un fișier folosind un editor de text. Acesta este primul lucru de făcut. În notepad, creați un fișier gol numit index.html. Această pagină este pe care serverul o caută mai întâi dacă introduceți adresa resursei fără a specifica o anumită pagină web a site-ului.
- Generați instrucțiuni. Plasat între etichete și codul ar trebui să fie format din două părți - corpul documentului și antetul.
- Să facem un titlu. Etichete de deschidere și închidere a antetului: și. Această parte de „serviciu” a paginii conține date pentru titlul ferestrei, descriere, cuvinte cheie pentru motoarele de căutare, scripturi, descrieri de stil și așa mai departe. Între aceste cuvinte, scriem titlul ferestrei paginii folosind etichete:
și . Pagina dvs. web ar trebui să arate acum astfel:titlu - Ne-am ocupat de antet. Acum trebuie să plasăm etichete pentru corp și. Între ele vor fi instrucțiuni pentru documente: linkuri, texte, imagini etc., adică cea principală.
Deci, codul în general ar trebui să arate astfel:
Salut Lume!
Aceasta este o pagină web.
Demonstrarea structurii unui document HTML
Acest cod arată documentul, începând cu declararea tipului de document,, urmat imediat de element . Interior go elemente
și . Element conține codificarea paginii prin intermediul etichetei și titlul documentului prin elementEste timpul să ne testăm munca și să vedem cum se potrivesc HTML și CSS. Deschiderea fișierului index.html (sau reîmprospătarea paginii dacă este deja deschisă) în browser ar trebui să arate un rezultat ușor diferit față de cel anterior.
Orez. 1.04. Site-ul nostru Styles Conference cu resetare CSS
Demo și cod sursă
Mai jos puteți vizualiza site-ul Styles Conference în starea sa actuală, precum și descărcare sursă site-ul momentan.
rezumat
Deci, totul este bine! Am făcut câțiva pași mari în acest tutorial.
Gândește-te acum că știi Bazele HTMLși CSS. Pe măsură ce continuăm și petreci mai mult timp scriind HTML și CSS, vei deveni mult mai confortabil să lucrezi cu aceste două limbi.
Amintiți-vă că am luat în considerare următoarele:
- Diferența dintre HTML și CSS.
- Cunoștință cu elemente HTML, etichete și atribute.
- Configurarea structurii primei pagini web.
- Introducere în selectoarele, proprietățile și valorile CSS.
- Lucrul cu selectoare CSS
- Pointer către CSS din HTML.
- Importanta resetarii CSS.
Acum să aruncăm o privire mai atentă la HTML și să cunoaștem puțin semantica.
Resurse și link-uri
- Termeni HTML obișnuiți prin Scripting Master
- Termeni și definiții CSS prin Impressive Webs
- Instrumente CSS: Resetați CSS prin Eric Meyer
Ca parte a acestui articol pentru începători și utilizatori obișnuiți, voi lua în considerare ce este o pagină web, precum și nuanțele asociate acesteia.
Astăzi, internetul este deja obișnuit, disponibil pentru utilizare chiar și pentru cei mai începători. Internetul oferă acces la resurse de divertisment, și site-uri pentru comunicare (de exemplu, rețele sociale) și către motoare de căutare, și mult mai mult. Cu toate acestea, puțini oameni în același timp chiar și puțin își imaginează ce este o „pagină web”. Acest lucru nu este nici rău, nici bun, dar este totuși util să cunoașteți măcar câteva dintre elementele de bază, care vor fi discutate în continuare.
Notă: De asemenea, vă sfătuiesc să citiți articolul ce este web-ul.
În primul rând, trebuie să știți că toate site-urile, blogurile, forumurile și alte resurse de pe Internet constau din aceleași pagini web. Mai mult, aceste pagini sunt interconectate prin link-uri de internet, făcând clic pe care din browser te muți de la o pagină la alta. Acest articol este și o pagină web. Mai mult, tot conținutul acestei pagini se numește conținut. Adică text, imagini etc. Chiar și video și audio sunt incluse în conceptul de conținut.
În acest fel, pagină web- acesta este un document special care conține o serie de metadate pentru afișare în browser (și alte lucruri tehnice), precum și conținut (text, imagini etc.) care poate fi vizualizat, ascultat și așa mai departe.
Cel mai adesea, paginile web sunt împărțite în două tipuri:
1. Pagini web statice. Această expresie este periodic înțeleasă greșit de utilizatori și totul din cauza prezenței cuvântului „static”. Ideea este că cuvântul „static” există doar pentru că întreg acest document special rămâne același. În același timp, pagina poate fi animată (blocurile se mișcă lin și alte lucruri frumoase), poate conține elemente video, audio și alte media. Cu toate acestea, aceste pagini sunt un document html imuabil obișnuit, precum și fișiere aferente care sunt încărcate de browser pentru a afișa corect pagina web (fișiere speciale în stil CSS care vă permit să formatați afișarea conținutului, imaginilor, video, audio etc. .).
2. Pagini web dinamice. Spre deosebire de tipul anterior de pagini web, tipul dat prevede că conținutul aceleiași pagini se poate modifica. De exemplu, paginile din forumuri în care oamenii își lasă comentariile. Diverse pagini căutare și multe alte exemple. Este de remarcat faptul că aceste pagini sunt, de asemenea, un document html cu fișiere însoțitoare, cu toate acestea, conținutul lor este generat calculator separat, care se numește de obicei server. Cel puțin o dată, dar probabil am auzit despre limbi precum PHP, Asp.Net C#, Java și altele. Cu ajutorul lor se realizează generarea paginilor.
De asemenea, paginile pot fi împărțite în funcție de scopul lor (voi oferi mai multe opțiuni):
1. Pagina personala. Aceasta este o astfel de pagină web, ale cărei informații se referă la o anumită persoană. Trebuie înțeles că o astfel de pagină poate fi fie oficială, fie nu. Se referă la ca persoana reala, precum și la inventat. De exemplu, în forumuri există pagini numite „profil de utilizator” - aceasta, de fapt, este o pagină personală. Dacă luăm în considerare un alt exemplu, atunci pagina dvs. intră rețea socială poate fi numit și personal.
2. Pagini media. Pe acest tip de pagini web, de obicei, conținutul conține un fel de informații media într-o formă predominantă. De exemplu, diverse galerii foto, colecții de audio sau video.
3. Pagina web de informații. În principiu, în general, orice pagină web poate fi numită informațională, deoarece conține un anumit conținut. Cu toate acestea, se obișnuiește să se numească pagini de informații acele pagini al căror scop principal este acela de a furniza informații utilizatorului. În acest caz, informațiile pot fi asociate cu orice. De exemplu, acest articol - bun exemplu pagina de informatii.
4. Pagina de căutare. Această pagină este conceput pentru a vă permite, ca utilizator al site-ului, să căutați informațiile de care aveți nevoie. De obicei, o astfel de pagină conține câmpuri pentru introducerea expresiilor care trebuie căutate și diverse controale pentru setarea domeniului căutării (de exemplu, căutați în întregul site sau numai în comentarii).
