Guida per principianti al Web design parte 1

In questa serie imparerai come creare un sito Web utilizzando le ultime tecniche di progettazione Web (HTML5 e CSS3). Questa serie è rivolta a coloro che hanno assolutamente zero conoscenze precedenti del web design.

Disponibile anche in questa serie:

Guida per principianti al Web design: parte 1
Guida per principianti al Web design: parte 2
Guida per principianti al Web design: parte 3

Browser Web moderno

Mentre creeremo le nostre pagine Web utilizzando gli standard più recenti (HTML5 e CSS3), abbiamo bisogno di un browser Web moderno in grado di comprendere le ultime novità nelle tecnologie web.

Le versioni del browser Microsoft Internet Explorer sotto IE8 semplicemente non lo taglieranno. Se utilizzi IE7 o versioni successive, scarica uno dei browser Web di seguito.

Se stai già utilizzando un browser Web diverso, controlla che corrisponda ai requisiti minimi riportati di seguito per ottenere le migliori prestazioni.

Mozilla Firefox 3+
Google Chrome
Apple Safari 4+
Opera 10+
Microsoft Internet Explorer 8

"Perché ho bisogno di un determinato browser?" potresti chiedere Poichè HTML5 è relativamente nuovo, i browser più vecchi non capiscono come leggere il codice e trasformarlo correttamente in una pagina web.

Editor di testo

I file HTML sono semplicemente file di testo con estensione .html, quindi non è necessario alcun software specializzato o costoso come Dreamweaver per crearli. Infatti, il tuo computer è preinstallato con un software che puoi scrivere pagine web in: "Notepad" su Windows o "TextEdit" (in "modalità testo normale") su Mac.

Mentre il software è preinstallato sul tuo computer andrà bene, è lontano dal meglio. Raccomando di scaricare Notepad ++ se sei su Windows o TextWrangler su Mac. Entrambi i programmi sono completamente gratuiti e offrono una serie di funzioni utili agli sviluppatori web, come l'evidenziazione della sintassi, la modifica di file a schede e la numerazione delle righe.

Per gli utenti Mac, consiglio vivamente l'acquisto di TextMate, Coda o Espresso. Utenti Windows, prova E-TextEditor.

Introduzione all'HTML

Ogni sito Web su Internet è scritto in Hyper-Text Markup Language (HTML). Il linguaggio HTML è cresciuto ed è stato esteso nel corso degli anni, poiché il web è diventato più mainstream e i siti Web si sono trovati a dover richiedere nuove funzionalità.

Il linguaggio HTML è gestito dal World Wide Web Consortium (W3C) e le specifiche più recenti sono attualmente HTML 5, che ha aggiunto una serie di nuove funzionalità alla lingua e sta contribuendo a spianare la strada a pagine Web più interattive e ricche di funzionalità.

Una semplice pagina HTML ha il seguente aspetto:

Ciao mondo!

Ciao, e benvenuto nel mio sito web.

Il codice precedente creerà il seguente sito Web quando viene aperto in un browser Web:

L'HTML è un linguaggio molto semplice da imparare. Stai semplicemente inserendo 'tag' all'interno del tuo contenuto che delinea come ogni bit di contenuto dovrebbe essere visualizzato in un browser web.
Ad esempio, inserirai i tag nella pagina in cui desideri iniziare nuovi paragrafi di testo, per rendere il testo un'intestazione all'interno del documento, per inserire immagini, collegamenti ad altre pagine del tuo sito o altrove su Internet, ecc..

I tag HTML sono racchiusi all'interno < > parentesi angolari. Osservando l'esempio precedente, vedrai che ogni 'etichetta' è una coppia. abbiamo in alto, e in basso.
informa il browser Web che tutto ciò che è contenuto nella coppia di tag è codice HTML. Il tag dice al browser che il contenuto HTML è terminato. La "barra" nell'ultimo tag indica questo come il tag "di chiusura".

NOTA: Il la riga deve essere inclusa nella parte superiore di qualsiasi HTML5 per essere considerata un codice "valido". Questa riga indica al browser Web il tipo di documento del resto della pagina, in altre parole, quale versione di HTML il documento è contrassegnato in modo che il browser possa renderlo correttamente.

Il ... La sezione che segue immediatamente è dove posizioni informazioni sulla pagina web che non saranno mostrate nella pagina principale stessa, ma contiene metadati sulla tua pagina per il browser.

Dentro il sezione, abbiamo il testo "Hello, World!" avvolto all'interno ... tag.
contiene letteralmente il titolo della pagina Web corrente utilizzata dal browser Web per denominare la finestra / scheda:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_4.png"><br> <p>Seguendo il <head> sezione, abbiamo <body>. Questo è dove viene inserito il contenuto reale per la tua pagina web. Nel corpo abbiamo un <p> etichetta con un piccolo testo di benvenuto all'interno.<br><p> segna un paragrafo sulla tua pagina. Per esempio:</p> <pre> <p>C'era una volta in una terra lontana, molto lontana, dove viveva una principessa che viveva per sempre felici e contenti.</p> <p>La fine.</p></pre> <p>Segnala due paragrafi di testo. Se dovessimo vederlo in un browser, vedremo quanto segue:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_5.png"><br> <p>Forse ti starai chiedendo perché ne abbiamo bisogno <p> e </p> tag per visualizzare un paragrafo. Bene, se non lo facessimo, scrivemmo la pagina web in questo modo:</p> <pre> C'era una volta in una terra lontana, molto lontana, dove viveva una principessa che viveva per sempre felici e contenti. La fine.</pre> <p>La pagina sarà simile a questa in un browser:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_6.png"><br> <p>Come puoi vedere, il browser ignora qualsiasi formattazione che creiamo nel file. Potremmo scrivere la nostra pagina web di esempio come segue e mostrerà lo stesso nel browser:</p> <pre> <!doctype html><html><head><title>Ciao mondo!

Ciao, e benvenuto nel mio sito web

Il browser è interessato solo a ciò che i tag HTML dicono di fare. Ignorerà tutti gli spazi bianchi che includi nel documento (spazi extra, tabulazioni, nuove linee, ecc.)

Creare una semplice pagina web

Ora capisci le basi dell'HTML, facciamo la nostra prima pagina web in assoluto! L'immagine sopra è come apparirà questa pagina.

Crea una nuova cartella da qualche parte sul tuo computer e chiamala "html-from-scratch". Usando il tuo editor di testo preferito, crea un nuovo file vuoto e salvalo in questa cartella come "my-first-webpage.html".
Inserisci il seguente file:

    HTML da zero

Quanto sopra è un layout di file HTML 5 di base. Abbiamo dichiarato il tipo di documento sulla prima riga, abbiamo aperto il nostro e tag e imposta "HTML From Scratch" come titolo per la pagina. Quindi chiudiamo la testa e apriamo il corpo.

Alla riga 7 abbiamo incluso un commento. Usa i commenti per lasciare ulteriori informazioni nel tuo codice che non verranno visualizzate nella tua pagina web. Segnare un commento avvolgendo il testo all'interno tag.

Infine, chiudiamo i tag body e html aperti per completare il documento.

Intestazione

Rimuovi il linea dal codice sorgente e digitare quanto segue:

  HTML da zero

Il tag è un nuovo elemento introdotto in HTML5 che esiste per contrassegnare e strutturare la sezione 'header' di una pagina web. L'intestazione è la sezione superiore di una pagina web, solitamente dove si trova il nome del sito.

Prima di HTML5 abbiamo usato

(o qualcosa di simile), ma non entrerò nei dettagli sulle specifiche più vecchie di HTML poiché stiamo imparando l'ultimo standard.

IMPORTANTE: non deve essere confuso con . Sono entrambi tag completamente diversi.

All'interno del nostro header includiamo a

etichetta. H1 è usato per contrassegnare l'intestazione principale sulla tua pagina (in questo caso, il nome del nostro sito). HTML contiene tag di intestazione da 1 a 6, con

è il titolo più grande e più importante della pagina fino a

.

Navigazione

Successivamente, annoteremo il menu di navigazione per il sito web. Dopo la chiusura , digitare quanto segue:

   Casa
 Nettuts
 Google

Questo frammento di codice può sembrare un po 'spaventoso, ma scomporlo. Il blocco sopra segna un'area di navigazione (

) che contiene un elenco non ordinato (

).
è un nuovo elemento HTML5 per la marcatura di un'area di navigazione su un sito web. Questo in genere viene utilizzato per mantenere il menu di navigazione principale per il tuo sito Web, tuttavia dal momento che stiamo creando solo una singola pagina Web in questo momento, faremo semplicemente un collegamento a Nettuts e Google.
- l'elemento (elemento dell'elenco) è un nuovo punto elenco nell'elenco.
  
  Salva il tuo file e apri "my-first-webpage.html" nel tuo browser web. Dovresti vedere questo:
  
  Come puoi vedere, il tag funziona correttamente, il <h1> il tag visualizza un titolo grande nella parte superiore della pagina e l'elenco di navigazione dei punti elenco viene visualizzato correttamente.</p> <p>Potresti notare che abbiamo un problema con la nostra lista di navigazione in questo momento: gli elementi non sono hyperlink e quindi non sono cliccabili. Per risolvere questo problema, modifica i tre elementi dell'elenco (<li>) a:</p> <pre> <li> Casa </li> <li> Nettuts </li> <li> Google </li></pre> <p>Dentro ognuno dei nostri <li> elenca gli elementi, abbiamo reso il testo in hyperlink. Il <a> tag crea un'ancora: un hyperlink a un'altra pagina del tuo sito Web o di un'altra posizione su Internet.</p> <p>Perché il tag di ancoraggio sia effettivamente collegato da qualche parte, forniamo l'indirizzo per collegarlo all'interno di un parametro 'href'. I parametri vanno all'interno del tag di apertura (<a>...).<br>Nella nostra pagina web, il link 'Home' va alla pagina corrente ('my-first-webpage.html'), 'Nettuts' va a Nettuts (http://net.tutsplus.com) e il link 'Google' va a, hai indovinato, Google.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_10.png"><br> <hr> <h2>Contenuto principale</h2> <p>Seguendo il tag, digitare quanto segue:</p> <pre> <section> <p>Questo è il contenuto principale per il mio sito web.<br /> Ecco alcune cose su di me:</p> <p>Abitante di Pellentes morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p> </section></pre> <p>Il <section> il tag è anche nuovo in HTML5 (usavamo usare qualcosa di simile <div>) e crea letteralmente una "sezione" di contenuti nella pagina web. In questo caso, stiamo usando <section> per contrassegnare la sezione principale della pagina in cui i nostri contenuti vanno.</p> <p>All'interno, abbiamo due paragrafi contenenti testo casuale. Avviso nel primo paragrafo abbiamo a <br /> etichetta. Questa è una interruzione di linea; in altre parole, il testo che lo segue verrà visualizzato su una nuova riga, ma nello stesso paragrafo.</p> <p>Il <br /> il tag è speciale in quanto non ha un tag di chiusura. Invece, la chiusura forward-slash ('/') è inclusa alla fine del tag. Questo perché una interruzione di riga non contiene alcun contenuto, esiste puramente per scopi estetici, altrimenti scriveremmo <br></br> che è un po 'inutile.</p> <p>Diversi altri tag sono anche a chiusura automatica, come ad esempio <img /> e <hr />, che vedremo più avanti.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_11.png"><br> <hr> <h2>immagini</h2> <p>All'interno della cartella 'html-from-scratch', crea una nuova cartella chiamata 'images'. Salva l'immagine in basso in quella cartella (tasto destro del mouse, Salva immagine come):</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1.jpg"><br> <p>Ora, torna all'interno del contenuto principale per il sito web, prima della chiusura </section> tag, inserisci quanto segue per inserire l'immagine sulla nostra pagina:</p> <pre> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_2.jpg" alt="Envato Immagine Stock" /></pre> <p>Il <img /> il tag, come il tag di ancoraggio, si chiude automaticamente e accetta la maggior parte del suo contenuto come parametri nel tag di apertura.<br>src = "..." sta per 'source' (il percorso dell'immagine). L'immagine può essere archiviata da qualche altra parte su Internet o localmente con la pagina web. Qui, abbiamo impostato il tag per visualizzare l'immagine che abbiamo salvato nella nostra directory di immagini.</p> <p>alt = "..." contiene il 'Testo alternativo' che verrà visualizzato se l'immagine non riesce a caricare. Di solito descrivi brevemente l'immagine qui.</p> <p>Dai un'occhiata alla pagina adesso. L'immagine dovrebbe mostrare:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_12.png"><br> <hr> <h2>La barra laterale</h2> <p>Successivamente, segnaliamo la barra laterale della nostra pagina web. Digita il seguente <strong>dopo</strong> La chiusura </section> etichetta:</p> <pre> <aside> <hr /><h2>Sidebar</h2> <p>Abitante pellenziano morbi tristique senectus et netus et malesuada fames ac turpis egestas:</p> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> </aside></pre> <p><aside> è un tag HTML5 per la marcatura di una sezione della pagina Web, ad eccezione del contenuto principale, ad esempio una barra laterale, che contiene contenuti di informazione meno importanti rispetto alla sezione principale della pagina.</p> <p>All'interno della nostra barra laterale, abbiamo un titolo di terzo livello (H3) intitolato "Barra laterale", un paragrafo contenente un testo casuale di segnaposto e quindi un elenco non ordinato con 3 elementi.</p> <p>Dai un'occhiata alla tua pagina e dovresti vedere il contenuto sopra direttamente sotto quello che abbiamo inserito nel <section> etichetta. Non preoccuparti che la barra laterale non sia ancora una barra laterale, questo è il modo in cui è stato progettato l'HTML. Di più su questo a breve.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_13.png"><br> <hr> <h2>Il piè di pagina</h2> <p>Nel footer, in fondo al nostro sito Web, includeremo una piccola nota sul copyright. Alcuni siti web prendono il loro footer un po 'oltre e altri dettagli come una sitemap.</p> <pre> <footer> <p> Copyright © Il tuo nome 2010.<br /> Parte di un tutorial per Nettuts+. </p> </footer></pre> <p><footer> è anche un nuovo tag introdotto in HTML5. Probabilmente stai imparando la questione ora e dovremmo notare che abbiamo incluso un paragrafo nel piè di pagina che contiene la nostra nota sul copyright e un'interruzione di riga, seguita da un collegamento a Nettuts.</p> <p><strong>NOTA:</strong> Vedi quel '©' nel nostro footer? Questa è un'entità HTML. Questa entità mostrerà un simbolo di copyright (©) quando viene visualizzato nel browser.<br>Leggi di più sulle entità dei caratteri HTML su Wikipedia.</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_14.png"><br> <hr> <h2>Nella parte 2</h2> <p>Questo conclude la prima parte di questa serie. In un breve lasso di tempo, hai già compiuto parecchio successo! Hai imparato una serie di tag HTML di base e hai codificato a mano la tua prima pagina web.</p> <p>Nella prossima parte, impareremo come utilizzare il CSS in-the-partner HTML per creare la pagina web <em>Guarda</em> bello, e gira la pagina di base, non formattata sopra, nel nostro prodotto finale:</p> <img src="//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-1_7.png"><br> <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/code">Codice</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/code/the-beginners-guide-to-web-design-part-2.html">Guida per principianti al Web design parte 2</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_2/the-beginners-guide-to-web-design-part-2_24.png');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/computers/the-beginners-guide-to-using-tex-in-os-x.html">La Guida per principianti all'utilizzo di TeX in OS X</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/the-beginners-guide-to-using-tex-in-os-x_7.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>