Web design per bambini contenuto HTML / Web design

Guarda quello / dopo src = "images? Lì abbiamo detto "guarda nella cartella delle immagini / per un file chiamato townheader.svg ".

Quindi, prima di finire il tag includeremo una descrizione con un alt attributo.

attributi Sono cose che possiamo aggiungere agli elementi che aiutano a spiegarle ulteriormente, o dire loro come lavorare. Solo determinati attributi funzionano all'interno di determinati elementi. Un l'elemento avrà sempre un src e un alt attributo.

Importante! Un l'elemento è a chiusura automatica. Ciò significa solo che il tag di apertura è anche il tag di chiusura:

Prendiamo una sbirciatina!

A questo punto possiamo aprire il nostro sito Web nel browser per vedere cosa abbiamo fatto finora! Trova la cartella "tutstown" e fai doppio clic su "index.html". Questo dovrebbe aprire la pagina nel tuo browser.

C'è il nostro sito Web! Non c'è molto là adesso, ma noi ci occupiamo del cambiamento. D'ora in poi, ogni volta che vuoi vedere le tue modifiche nel browser, puoi farlo salvare il file HTML e poi ricaricare (usando quel piccolo cerchio con un'icona a forma di freccia in alto) la finestra del browser.

Inoltre, noterai che non possiamo ancora vedere le nostre nuvole, perché non abbiamo aggiunto lo sfondo giallo. Vedremo cose come i colori di sfondo, il posizionamento e il dimensionamento nella nostra prossima lezione quando ci immergiamo CSS.

Sezione principale

La sezione principale del nostro sito web include la maggior parte delle informazioni. Bene contenere tutto il contenuto super utile sulla nostra città all'interno di questo

elemento.

   Benvenuti in Tuts + Town

sezioni

Abbiamo tre gruppi correlati sul nostro sito Web che organizzeremo in tre sezioni. Una sezione è un pezzo autonomo di un sito Web che contiene informazioni e ha anche un proprio elemento:

Più strutture!

All'interno delle nostre sezioni abbiamo più fotogrammi più piccoli da compilare, come contenitori per i piccoli frammenti di testo accanto alle immagini.

Facciamo questa una sezione alla volta. Ogni sezione ha un'immagine nidificata e un elemento che contiene del testo.

Diamo un'occhiata alla struttura per questo prima di aggiungere il contenuto effettivo:

Ora, abbiamo parlato di aggiungere immagini in precedenza. Questa immagine verrà aggiunta allo stesso modo della nostra immagine di intestazione, ma il nome e la descrizione del file saranno diversi.

Div

l'elemento è un elemento contenitore più generale. Ci consente di raggruppare parti di una pagina quando nessun altro elemento sembra essere adatto.

L'intestazione e la lista del negozio saranno contenute da questo

Intestazione

Possiamo vedere che ogni sezione ha una piccola intestazione: Sleep, Food e Shop. Questi ci parlano delle piccole liste proprio sotto ognuna. Abbiamo già usato un

per la nostra introduzione nella parte superiore della pagina, quindi per questi useremo

, come questo:

   Dormire

elenchi

Esistono due tipi di elenchi HTML, ordinato (con numeri) e non ordinata (con punti elenco invece di numeri). Sono entrambi modi molto utili per elencare le informazioni correlate e ogni sezione del nostro sito contiene un breve non ordinata elenco (

Nidificati in ogni elenco sono Elementi della lista. Questi sono gli articoli che compongono la nostra lista e sono scritti all'interno

tag.
```
   
```
link
Le liste che abbiamo appena creato dovrebbero essere link ai diversi siti Web del negozio, quindi i nostri visitatori possono fare clic su di essi per ottenere ulteriori informazioni. Per trasformare una parola (o parole) in un link cliccabile, dobbiamo avvolgere quella parola all'interno ancora tag. Un elemento di ancoraggio si presenta così: .
Simile a come il nostro l'elemento ha attributi speciali, l'apertura il tag dovrà contenere un attributo che include l'indirizzo web del sito Web a cui vogliamo che venga inviato l'utente, il href attributo.
Il seguente bit di codice ci darebbe un collegamento collegato alla parola "qui" che porterebbe l'utente a http://tutsplus.com/
```
Per ulteriori tutorial clicca qui.
```
Questo è esattamente il modo in cui aggiungeremo i collegamenti alla nostra lista, avvolgendo ciascun nome di negozio in un ancora. Sia i tag di ancoraggio di apertura e chiusura saranno all'interno dell'elemento di elenco, il

. L'unica differenza è che, poiché non si tratta di veri e propri negozi, con siti Web reali, metteremo a disposizione un # per il href valore e facendo clic non ci porterà su un altro sito web.

Ecco uno sguardo al primo negozio elencato:

 The Snooze Inn

Abbiamo creato un elenco non ordinato, annidato un elemento di elenco all'interno di tale elenco e quindi racchiuso il nome del negozio in un tag di ancoraggio. Tieni presente però che non abbiamo ancora fatto lo styling, quindi per ora la nostra anteprima mostrerà i link in un blu predefinito anziché in arancione.

Sezione Conclusa

Una volta completata una sezione completa, sarà necessario ripetere gli stessi esatti passaggi per le ultime due sezioni. Ogni volta che dobbiamo assicurarci che il contenuto cambi; la struttura HTML sarà la stessa per tutte e tre le sezioni, ma il testo e le immagini saranno diversi.

Ora, rivediamo il codice per tutte e tre le sezioni: è abbastanza!

    Dormire
   The Snooze Inn 
  Zzz Hotel 
 
 
 
    Cibo
   Solo biscotti 
  Torta anche 
 
 
 
    Negozio
   Puppy Parade 
  Gattini fantastici

footer

sarà il primo elemento dopo il tag di chiusura del

elemento; lo farà non essere annidato al suo interno.

Possiamo quindi aggiungere il nostro elemento footer alla pagina, che vivrà allo stesso livello del main perché sono entrambi nidificati all'interno del corpo.

L'unico contenuto che abbiamo nel nostro footer è una frase su chi ha creato il nostro sito (ce l'abbiamo fatta!). Questo contenuto sarà racchiuso all'interno di a

(paragrafo) elemento che è annidato all'interno del piè di pagina.

 Creato con entusiasmo occupando i residenti.

Anteprima completa

Sei stato eccitato a salvare il documento HTML e aggiornare il browser mentre lavoriamo? Anche a me! Diamo un'ultima occhiata prima di concludere:

Uno sguardo indietro agli elementi usati

Ne abbiamo parlato Un sacco di elementi diversi qui, quindi rivediamo rapidamente quelli che abbiamo usato nel nostro file HTML:

	Contiene tutto il nostro codice HTML
	Dove inseriamo informazioni sul sito web
</code></td> <td>Il titolo del sito web</td> </tr> <tr> <td><code><body></code></td> <td>Contiene tutti i contenuti della pagina</td> </tr> <tr> <td><code></code></td> <td>Contiene il nostro messaggio di benvenuto</td> </tr> <tr> <td> <code><h1></code> e <code><h2></code> </td> <td>I nostri titoli</td> </tr> <tr> <td><code><img></code></td> <td>Porta un'immagine nella pagina</td> </tr> <tr> <td><code><main></code></td> <td>Per il contenuto principale</td> </tr> <tr> <td><code><section></code></td> <td>Divide la pagina in sezioni</td> </tr> <tr> <td><code><div></code></td> <td>Un contenitore generale</td> </tr> <tr> <td><code><ul></code></td> <td>Una lista non ordinata di cose</td> </tr> <tr> <td><code><li></code></td> <td>Una voce di elenco all'interno di un elenco</td> </tr> <tr> <td><code><a></code></td> <td>Utilizzato per collegare da qualche parte</td> </tr> <tr> <td><code><footer></code></td> <td>Il contenuto inferiore</td> </tr> </tbody></table><h2>Conclusione</h2><p>In questo corso abbiamo imparato tutto su come collegare il contenuto alla super robusta struttura HTML che abbiamo creato con il nostro <i>mani nude</i> (beh, e un computer).</p><p>In seguito impareremo come <em>stile</em> questa pagina per renderla più carina e invitante possibile, ma anche più facile da leggere e utilizzare.</p><p>Ci vediamo in giro per la città!</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 per bambini struttura 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 per bambini prepararsi a costruire un sito 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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca..."> <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 per bambini contenuto HTML

Contenitori, contenitori, contenitori

Aggiungere contenuto

Intestazione

Intestazione

.
"Welcome To Tuts + Town" è il nostro titolo principale (è molto importante), quindi lo inseriremo nei tag di apertura e di chiusura di un

elemento.

Benvenuti in Tuts + Town

Il browser ora riconoscerà questo pezzo di testo come nostra intestazione introduttiva.

Benvenuti in Tuts + Town

Immagine della città

Prendiamo una sbirciatina!

Sezione principale

Benvenuti in Tuts + Town

sezioni

Più strutture!

Div

Intestazione

, come questo:

Dormire

Dormire

elenchi

link

Sezione Conclusa

Dormire

Cibo

Negozio

footer

Web design per bambini contenuto HTML

Contenitori, contenitori, contenitori

Aggiungere contenuto

Intestazione

Intestazione

."Welcome To Tuts + Town" è il nostro titolo principale (è molto importante), quindi lo inseriremo nei tag di apertura e di chiusura di un

elemento. Benvenuti in Tuts + Town Il browser ora riconoscerà questo pezzo di testo come nostra intestazione introduttiva.

Benvenuti in Tuts + Town

Immagine della città

Prendiamo una sbirciatina!

Sezione principale

Benvenuti in Tuts + Town

sezioni

Più strutture!

Div

Intestazione

, come questo: Dormire

Dormire

elenchi

link

Sezione Conclusa

Dormire

Cibo

Negozio

footer

.
"Welcome To Tuts + Town" è il nostro titolo principale (è molto importante), quindi lo inseriremo nei tag di apertura e di chiusura di un

elemento.

Benvenuti in Tuts + Town

Il browser ora riconoscerà questo pezzo di testo come nostra intestazione introduttiva.

, come questo:

Dormire