Share
Benvenuti alla terza lezione della nostra serie Web Design for Kids, HTML Structure!
Impareremo come scrivere il nostro sito struttura con HTML. Questa struttura ci renderà pronti per i contenuti del sito, che aggiungeremo nella prossima lezione.
Se dovessimo confrontare il processo di progettazione web con un edificio (come un edificio Tuts + Town!) L'HTML sarebbe qualcosa di simile a quello dell'edificio fondazione e inquadratura; è la base da cui viene costruito tutto il resto.
Importante! I file che creeremo in questa lezione possono essere scaricati qui.
Abbiamo già menzionato molto HTML in questa serie, ma non abbiamo ancora parlato di cosa sia Esattamente, diverso da un "linguaggio segreto super cool". Il web è incentrato su linguaggi e comunicazioni e l'HTML è una parte importante di tutto ciò.
HyperText Markup Language, HTML, è un linguaggio che segna il contenuto di un sito per un browser da comprendere e visualizzare. Dà struttura a un normale file di testo che un browser non sarebbe in grado di leggere.
Ad esempio, non possiamo digitare un paragrafo nei nostri editor di testo e aspettarci che un browser sappia solo che è un paragrafo. Il testo del paragrafo deve trovarsi all'interno del giusto markup HTML, un paragrafo o elemento (un po 'di testo dall'aspetto divertente come il qui mostra solo che questo testo è anche codice).
HTML è costruito da elementi che hanno un significato importante, come l'elemento di paragrafo sopra menzionato. Ogni elemento ha un tag di apertura (di inizio) e di chiusura (di fine), con il contenuto del sito scritto tra questi due tag.
Questi tag di apertura e chiusura per ogni elemento sono scritti tra parentesi angolari (come questi: < >), anche se un tag di chiusura ha anche una barra (in questo modo: < / >).
Nel corso precedente abbiamo disegnato il design del nostro sito Web e ora è il momento di preparare la struttura o l'incorniciatura di questo progetto.
Inizieremo con l'aggiunta di alcune note generali all'anteprima del nostro sito per avere un'idea migliore di come mappare al meglio questo aspetto.
All'interno del corpo del nostro file html avremo diversi elementi primari: a intestazione, un principale parte e a footer.
Abbiamo anche parlato di come impostare i file del sito nella lezione precedente, quindi ora metteremo questa conoscenza in azione!
Ricorda: "Index" è il nome del file e ".html" è l'estensione, che ci dice il tipo di file.
I siti web possono essere costituiti da molte, molte pagine, quindi la pagina principale viene sempre chiamata "index.html" per dire "Ehi, questo è dove tutto inizia!"
Ora, scriviamo finalmente un po 'di HTML.
Ora possiamo aggiungere la nostra struttura. Ancora una volta, pensa a questo come mettere insieme un edificio, abbiamo bisogno di ottenere l'inquadratura in atto.
Il primo pezzo di HTML che scriveremo è il che dice al browser "Ehi, questo è un documento HTML!"
Quindi, sotto questo, abbiamo bisogno del elemento:
Tutto il resto sarà nidificato all'interno di questo elemento.
"Come un nido d'uccello?" Beh, forse più simile bambole nidificanti, o per rimanere con il nostro tema pulito, edifici annidati. La nidificazione è ciò che accade quando posizioniamo un elemento dentro di un altro.
Il bit del codice seguente mostra un nidificazione di elementi di paragrafo entro l'elemento del corpo, perché vive tra i tag di apertura e chiusura del corpo.
Questo elemento di paragrafo è annidato all'interno dell'elemento body.
Rendiamo più semplice leggere il codice nel nostro file HTML spingendolo nidificato elementi più a destra. Come questo:
OK, torna al lavoro ...
Ora, annidato in questo html elemento che vorremmo aggiungere a capo elemento.
Il capo conterrà il titolo della nostra pagina, che verrà visualizzata in una scheda del browser. Un sacco di nidificazione!
Città Tuts
Molto di ciò che è incluso nel capo di un documento HTML non è visto sul sito stesso, ma aiuta invece a dire ai motori di ricerca, come Google, di che cosa tratta il nostro sito.
Inoltre, in seguito, quando creeremo un nuovo file per aggiungere stili a questo, collegheremo questi due documenti insieme tramite un collegamento aggiunto nel capo. Quindi, è un po 'come un centro di controllo dietro le quinte che i visitatori del nostro sito Web non riescono a vedere per la maggior parte.
Tutto sul nostro sito che vedremo nel browser sarà annidato all'interno del corpo, ed è qui che inizia davvero il divertimento!
Il intestazione l'elemento non è lo stesso di capo elemento di cui abbiamo già parlato. Il intestazione vive dentro il corpo e generalmente contiene tutte le cose nella parte superiore di un sito.
La prima cosa che abbiamo in cima al nostro sito è un'intestazione contenente del testo e un'immagine di Tuts + Town.
Città Tuts
Aggiungeremo solo il intestazione per ora per preparare il contenuto da includere.
La parte principale del sito Tuts + Town contiene le informazioni più importanti. L'elenco delle imprese cittadine è ciò che è il nostro sito Web, quindi tutti questi contenuti vivranno all'interno di un elemento chiamato principale.
Parleremo dei contenitori più piccoli (come i tre diversi gruppi: Sleep, Food e Shop) all'interno di questo più grande principale contenitore nella prossima lezione quando aggiungiamo il contenuto.
Il footer è la parte alla fine del sito. Di solito vedremo alcuni link qui, come per Facebook e Twitter, o qualche piccolo testo che fa sapere a chi ha creato il sito.
Aggiungeremo una frase orgoglio dicendo che abbiamo realizzato il sito all'interno del footer elemento.
Ricorda: a questo punto stiamo ancora aggiungendo elementi che sono annidati all'interno del corpo.
Ora, facciamo una revisione finale della nostra struttura HTML finora.
È facile dimenticare i tag di chiusura, che potrebbero causare alcuni errori sul nostro sito Vogliamo essere sicuri ogni il tag che abbiamo aperto ha un tag di chiusura.
Sembra che tutto sia chiuso! È tempo di iniziare ad aggiungere contenuti a questa struttura super solida che abbiamo creato.
L'HTML ci consente di scrivere note utili all'interno del nostro lavoro. Queste note non verranno mostrate sul nostro sito Web, ma sono ottime per aggiungere utili informazioni per altri progettisti che guardano al nostro codice.
Il file HTML per questa lezione (che puoi scaricare) ha diverse note per aiutarci a capirlo meglio.
In questa lezione abbiamo appreso cosa HTML è, cosa elementi sono, come nido questi elementi e come impostare una struttura HTML di base con alcuni elementi di contenitore comuni.
Nella prossima lezione, aggiungeremo il testo e le immagini del nostro sito nella struttura di nuova costruzione.
Ci vediamo in giro per la città!
Accentsconagua