Web Design pentru copii conținut HTML / Web design

Vezi asta / după src = "imagini? Acolo am spus "uite în dosarul cu imagini / pentru un fișier numit townheader.svg ".

Apoi, înainte de a termina eticheta va include o descriere cu un Alt atribut.

atribute sunt lucruri pe care le putem adăuga la elementele care le pot explica în continuare sau le spun cum să lucreze. Doar anumite atribute funcționează în anumite elemente. Un element va avea întotdeauna o src si un Alt atribut.

Important! Un element este auto-închidere. Aceasta înseamnă că eticheta de deschidere este și eticheta de închidere:

Să aruncăm o privire!

În acest moment, putem deschide site-ul nostru în browser pentru a vedea ceea ce am făcut până acum! Găsiți dosarul "tutstown" și faceți dublu clic pe "index.html". Aceasta ar trebui să deschidă pagina în browser.

Există site-ul nostru! Nu prea sunt multe acolo acum, dar suntem în legătură cu această schimbare. De acum înainte, ori de câte ori doriți să vedeți modificările în browser, puteți Salvați fișierul HTML și apoi reîmprospăta (folosind acel mic cerc cu o pictogramă săgeată în partea de sus) fereastra browserului.

De asemenea, veți observa că nu ne putem vedea norii încă, pentru că nu am adăugat fundalul galben. Vom analiza lucruri precum culorile de fundal, poziționarea și dimensionarea în următoarea noastră lecție când ne vom arunca cu capul CSS.

Secțiunea principală

Secțiunea principală a site-ului nostru conține cea mai mare parte a informațiilor. Bine conține tot conținutul foarte utile despre orașul nostru în cadrul acestuia

element.

   Bine ati venit la Tuts + Town

secţiuni

Avem trei grupuri înrudite pe site-ul nostru pe care le vom organiza în trei secțiuni. O secțiune este o piesă autonomă a unui site web care conține informații și are, de asemenea, un element propriu:

Mai mult structurare!

În cadrul secțiunilor noastre avem mai multe cadre mai mici de construit, cum ar fi containerele pentru fragmentele mici de text de lângă imagini.

Să facem o singură secțiune la un moment dat. Fiecare secțiune are o imagine imbricată și un element care conține un text.

Să aruncăm o privire asupra structurii pentru aceasta înainte de a adăuga conținutul real:

Acum, am vorbit despre adăugarea imaginilor mai devreme. Această imagine va fi adăugată la fel ca imaginea antetului nostru, dar numele și descrierea fișierului vor fi diferite.

div

elementul este un element container mai general. Ne permite să grupeze părți dintr-o pagină atunci când niciun alt element nu pare a fi o potrivire bună.

Lista de titluri și de magazine va fi conținută de aceasta

rubrică

Putem vedea că fiecare secțiune are o mică rubrică: Sleep, Food and Shop. Acestea ne spun despre listele mici de sub fiecare. Am folosit deja un

pentru introducerea noastră în partea de sus a paginii, așa că pentru acestea vom folosi

, asa:

   Dormi

liste

Există două tipuri de liste HTML, ordonat (cu numere) și neordonate (cu puncte în locul numerelor). Sunt ambele modalități foarte bune de a afișa informații înrudite și fiecare secțiune a site-ului nostru conține o scurtă descriere neordonate listă (

Inserate în fiecare listă sunt elemente de listă. Acestea sunt elementele care alcătuiesc lista noastră și sunt scrise în cadrul acesteia

Etichete.
```
   
```
Link-uri
Listele pe care tocmai le-am pus împreună sunt menite a fi Link-uri la diferitele site-uri ale magazinului, astfel încât vizitatorii noștri pot face clic pe ele pentru a obține mai multe informații. Pentru a transforma un cuvânt (sau cuvinte) într-un link clicabil trebuie să înfășurăm acel cuvânt în cadrul acestuia ancoră Etichete. Un element de ancorare arată astfel: .
Similar cu modul nostru element are atribute speciale, deschiderea eticheta va trebui să conțină o atribut care include adresa web a site - ului pe care dorim ca utilizatorul să îl trimită, href atribut.
Următorul fragment de cod ne va da un link conectat la cuvântul "aici", care ar duce utilizatorul la http://tutsplus.com/
```
Pentru mai multe tutoriale, faceți clic aici.
```
Acesta este exact modul în care vom adăuga linkurile la lista noastră, prin împachetarea fiecărui nume de magazin într-un ancoră. Atât etichetele de ancorare de deschidere cât și de închidere vor fi incluse în elementul de listă

. Singura diferență este că, deoarece acestea nu sunt magazine reale, cu site-uri web reale, vom fi a pune un # pentru href valoarea și făcând clic pe acesta nu ne vor duce la alt site web.

Iată o privire la primul magazin enumerat:

 Snooze Inn

Am creat o listă neordonată, lăsăm un element de listă în interiorul acelei liste și apoi am împachetat numele magazinului într-o etichetă de ancorare. Țineți minte, deși nu am făcut încă un stil, pentru că acum previzualizarea noastră va afișa linkuri într-un albastru implicit în loc de portocaliu.

Secțiunea se înfășoară

După ce vom completa o secțiune completă, va trebui să repetăm acești pași identici pentru ultimele două secțiuni. De fiecare dată când trebuie să ne asigurăm că conținutul se schimbă; structura HTML va fi aceeași pentru toate cele trei secțiuni, dar textul și imaginile vor fi diferite.

Acum, să examinăm codul pentru toate cele trei secțiuni - este destul de mult!

    Dormi
   Snooze Inn 
  Hotel Zzz 
 
 
 
    Alimente
   Doar cookie-uri 
  Cake Too 
 
 
 
    Magazin
   Puppy Parade 
  Pisoi răcoritori

Subsol

va fi primul element după eticheta de închidere a

element; o sa nu să fie imbricate în el.

Putem apoi adăuga elementul de footer pe pagina, care va trăi la același nivel ca și principalul, deoarece ambele sunt imbricate în interiorul corpului.

Singurul conținut pe care îl avem în subsolul nostru este o propoziție despre cine a făcut site-ul nostru (am făcut!). Acest conținut va fi înfășurat într-un

(paragraf) care este imbricat în subsolul paginii.

 Creat cu entuziasm de îngrijirea locuitorilor.

Vizualizare completă

Ați salvat cu entuziasm documentul HTML și ați revigorat browserul în timp ce lucrăm? Și eu! Să aruncăm o privire finală înainte să încheiem:

O privire înapoi la elementele utilizate

Am vorbit despre asta mult de elemente diferite aici, așa că să examinăm rapid cele pe care le-am folosit în fișierul HTML:

	Ține tot HTML-ul nostru
	Unde punem informații despre site-ul web
</code></td> <td>Titlul site-ului</td> </tr> <tr> <td><code><body></code></td> <td>Menține tot conținutul paginii</td> </tr> <tr> <td><code></code></td> <td>Susține mesajul nostru primit</td> </tr> <tr> <td> <code><h1></code> și <code><h2></code> </td> <td>Titlurile noastre</td> </tr> <tr> <td><code><img></code></td> <td>Aduce o imagine pe pagină</td> </tr> <tr> <td><code><main></code></td> <td>Pentru conținutul principal</td> </tr> <tr> <td><code><section></code></td> <td>Împărțiți pagina în secțiuni</td> </tr> <tr> <td><code><div></code></td> <td>Un container general</td> </tr> <tr> <td><code><ul></code></td> <td>O listă neordonată de lucruri</td> </tr> <tr> <td><code><li></code></td> <td>Un element din listă dintr-o listă</td> </tr> <tr> <td><code><a></code></td> <td>Folosit pentru a lega undeva</td> </tr> <tr> <td><code><footer></code></td> <td>Conținutul de jos</td> </tr> </tbody></table><h2>Concluzie</h2><p>În acest curs am învățat totul despre cum să conectăm conținutul la structura HTML super-robustă pe care am făcut-o cu noi <i>mâinile goale</i> (bine, și un computer).</p><p>În continuare vom învăța cum să <em>stil</em> această pagină pentru a face cât de drăguță și cât mai plăcută, dar și mai ușor de citit și de utilizat.</p><p>Ne vedem în jurul orașului!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle \|\| []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web design</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/webdesign/web-design-for-kids-html-structure.html">Web Design pentru copii Structura HTML</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/web-design-for-kids-html-structure.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/webdesign/web-design-for-kids-getting-ready-to-build-a-website.html">Web design pentru copii Noțiuni de bază pentru a construi un site web</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_11/web-design-for-kids-getting-ready-to-build-a-website.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Căutare..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

Web Design pentru copii conținut HTML

Containere, Containere, Containere

Adăugarea conținutului

Antet

rubrică

.
"Bine ati venit la orașul Tuts +" este poziția noastră principală (este foarte importantă), așa că vom scrie acest lucru în etichetele de deschidere și de închidere ale unei

element.

Bine ati venit la Tuts + Town

Browserul va recunoaște acum acest text ca titlu de introducere.

Bine ati venit la Tuts + Town

Imaginea orașului

Să aruncăm o privire!

Secțiunea principală

Bine ati venit la Tuts + Town

secţiuni

Mai mult structurare!

div

rubrică

, asa:

Dormi

Dormi

liste

Link-uri

Secțiunea se înfășoară

Dormi

Alimente

Magazin

Subsol

Web Design pentru copii conținut HTML

Containere, Containere, Containere

Adăugarea conținutului

Antet

rubrică

."Bine ati venit la orașul Tuts +" este poziția noastră principală (este foarte importantă), așa că vom scrie acest lucru în etichetele de deschidere și de închidere ale unei

element. Bine ati venit la Tuts + Town Browserul va recunoaște acum acest text ca titlu de introducere.

Bine ati venit la Tuts + Town

Imaginea orașului

Să aruncăm o privire!

Secțiunea principală

Bine ati venit la Tuts + Town

secţiuni

Mai mult structurare!

div

rubrică

, asa: Dormi

Dormi

liste

Link-uri

Secțiunea se înfășoară

Dormi

Alimente

Magazin

Subsol

.
"Bine ati venit la orașul Tuts +" este poziția noastră principală (este foarte importantă), așa că vom scrie acest lucru în etichetele de deschidere și de închidere ale unei

element.

Bine ati venit la Tuts + Town

Browserul va recunoaște acum acest text ca titlu de introducere.

, asa:

Dormi