Share
Bine ați venit la a treia lecție din seria Web Design pentru copii, structura HTML!
Vom învăța cum să scriem site-ul nostru structura cu HTML. Această structură ne va pregăti pentru conținutul site-ului, pe care îl vom adăuga în următoarea lecție.
Dacă am fi comparat procesul de proiectare web cu o clădire (cum ar fi o clădire Tuts + Town!), HTML-ul ar fi ceva asemănător clădirii fundație și încadrare; este baza de la care totul este construit.
Important! Fișierele pe care le vom crea în această lecție pot fi descărcate aici.
Am menționat foarte mult HTML în această serie, dar nu am vorbit încă despre ce este exact, altfel decât o "limbă super secretă". Web-ul este despre limbi și comunicare, iar HTML este o parte importantă a tuturor acestor lucruri.
HyperText Markup Language, HTML, este o limbă care marchează conținutul unui site pentru ca acesta să înțeleagă și să se afișeze. Oferă structură unui fișier text obișnuit pe care un alt browser nu l-ar putea citi.
De exemplu, nu putem scrie un paragraf în editorii noștri de text și așteptăm ca un browser să știe doar că este un paragraf. Textul paragrafului trebuie să fie în interiorul marcajului HTML corect, un paragraf sau element (orice bit de text amuzant ca aici doar arată că acest text este, de asemenea, cod).
HTML este construit din element care au un sens important, cum ar fi elementul de paragraf menționat mai sus. Fiecare element are o etichetă de deschidere (începutul) și una de închidere (sfârșitul), conținutul site-ului fiind scris între aceste două etichete.
Aceste etichete de deschidere și închidere pentru fiecare element sunt scrise în paranteze unghiulare (cum ar fi: < >), deși o etichetă de închidere are, de asemenea, un slash înainte (după cum urmează: < / >).
În cursul anterior am elaborat designul site-ului nostru și acum este momentul să pregătim structura sau încadrarea acestui design.
Vom începe acest lucru prin adăugarea unor note generale la previzualizarea site-ului nostru pentru a obține o mai bună simțire a modului de a schimba mai bine acest lucru.
În cadrul corp din fișierul nostru html vom avea mai multe elemente primare: a antet, A principal parte, și a subsol.
De asemenea, am vorbit despre cum să instalăm fișierele site-ului în lecția anterioară, așa că acum vom pune aceste cunoștințe în acțiune!
Tine minte: "Index" este numele fișierului, iar ".html" este extensia, care ne spune tipul fișierului.
Site-urile web pot fi alcătuite din mai multe pagini, astfel încât pagina principală este întotdeauna numită "index.html" pentru a spune "Hei, acesta este locul unde începe totul!"
Acum, să scriem în cele din urmă câteva HTML.
Acum putem adăuga structura noastră. Din nou, gândiți-vă la acest lucru ca la construirea unei clădiri, trebuie să obținem încadrarea.
Prima piesa de HTML pe care o vom scrie este care spune browser-ului "Hei, acesta este un document HTML!"
Apoi, sub aceasta, avem nevoie de ea element:
Orice altceva va fi cuibărit în acest element.
"Ca un cuib de pasăre?" Ei bine, poate mai mult cuiburi păpușă, sau să rămânem cu tema orașului nostru, clădiri imbricate. Nesting este ceea ce se întâmplă atunci când plasăm un element interior de alta.
Bitul de cod de mai jos arată un element de paragraf cuibărit în elementul corpului, deoarece acesta trăiește între etichetele de deschidere și de închidere ale corpului.
Acest element din paragraf este imbricat în interiorul elementului corpului.
Facem mai ușor citirea codului în fișierul HTML prin împingere cuibărit elemente suplimentare în dreapta. Asa:
OK, înapoi la serviciu ...
Acum, imbricate în asta html elementul pe care îl vom adăuga cap element.
cap va conține titlu din pagina noastră, care se va afișa într-o filă de browser. Multe cuiburi!
Tuts Town
O mulțime de ceea ce este inclus în cap a unui document HTML nu este văzut pe site-ul în sine, ci ajută, în schimb, să spună motoarelor de căutare, cum ar fi Google, ceea ce site-ul nostru este despre toate.
De asemenea, mai târziu când vom crea un fișier nou pentru a adăuga stiluri la acesta, vom conecta aceste două documente împreună printr-un link adăugat în cap. Deci, este un fel de centru de control în spatele scenei, pe care vizitatorii site-ului nostru nu îl găsesc în cea mai mare parte.
Totul pe site - ul nostru pe care îl vom vedea în browser va fi imbricat în corp, și acesta este locul în care distracția începe cu adevărat!
antet elementul nu este același cu elementul cap element despre care am vorbit deja. antet trăiește în interiorul corp și, în general, conține toate lucrurile din partea de sus a unui site.
Primul lucru pe care îl avem în partea de sus a site-ului nostru este un antet care conține un text și o imagine a lui Tuts + Town.
Tuts Town
Vom adăuga doar antet pentru a se pregăti pentru includerea conținutului.
Partea principală a site-ului Tuts + Town conține cele mai importante informații. Lista companiilor din oraș este ceea ce site-ul nostru este despre toate, astfel încât tot acest conținut va trăi într-un element numit principal.
Vom vorbi despre recipientele mai mici (cum ar fi cele trei grupuri diferite: Sleep, Food, and Shop) în cadrul acestei mari principal container în lecția următoare atunci când adăugăm conținutul.
subsol este partea de la sfârșitul site-ului. Vom vedea, de obicei, câteva linkuri aici, cum ar fi Facebook și Twitter, sau un text mic care lasă oamenii să știe cine a creat site-ul.
Vom adăuga o propoziție cu mândrie spunând că am făcut site-ul în cadrul subsol element.
Tine minte: în acest moment încă adăugăm elemente care sunt imbricate în cadrul corp.
Acum, să facem o examinare finală a structurii noastre HTML până acum.
Este ușor să uitați etichetele de închidere, ceea ce ar cauza unele erori pe site-ul nostru. Vrem să ne asigurăm asta fiecare eticheta pe care am deschis-o are o etichetă de încheiere.
Se pare că totul este închis! Este timpul să începem să adăugăm conținut la această structură super solidă pe care am creat-o.
HTML ne permite să scriem note utile în cadrul activității noastre. Aceste note nu se vor afișa pe site-ul nostru, dar sunt strălucite pentru adăugarea unor informații utile de informații pentru alți designeri care caută codul nostru.
Fișierul HTML pentru această lecție (pe care îl puteți descărca) are mai multe note pentru a ne ajuta să înțelegem mai bine.
În această lecție am aflat despre ce HTML este ce element sunt, cum să cuib aceste elemente și cum să configurați o structură HTML de bază cu unele elemente de container comune.
În următoarea lecție, vom adăuga textul și imaginile site-ului nostru în structura nou construită.
Ne vedem în jurul orașului!
Accentsconagua