La pagina HTML
Creare Una Pagina HTML per il tuo Primo Sito Internet.
Come primo passo dunque scarica "Brackets", un editor HTML open-source che aiuta anche nella scrittura dell'ipertesto suggerendo i vari tag e facendo autocompletamento.
Esistono editor semplici o IDE pi� complessi, sia gratuiti che a pagamento, che possono aiutarti nella scrittura del codice. Scegli quello che preferisci tra Eclipse, NetBeans, Scite, NotePad++, Brackets, Sublime Text o quello che vuoi tu.
Entrando nel vivo del documento HTML andiamo a vedere le dichiarazioni che ti permetteranno di creare il tuo file "Hello World!"
Apri Brackets e crea un nuovo file con estensione .html
Quello che andrai a creare sar� un file conforme alle specifiche di HTML5 e che suddiviso in macroaree pu� essere sintetizzato cos�:
<!doctype html>
<html>
<head>
<title>Titolo del documento</title>
</head>
<body>
Hello World! (Contenuto del documento)
</body>
</html>Con questa struttura puoi gi� mettere online il tuo primo documento e renderlo visualizzabile dal browser.
Per definire il doctype HTML5 e indicare appunto che il nostro documento � scritto in HTML5 dobbiamo inserire questo semplice codice prima dell'apertura di ogni altro tag
<!doctype html>Il contenuto del documento HTML invece va sempre incluso tra i tag <html> e </html>
Nei prossimi capitoletti vedrai pi� da vicino gli elementi di base che compongono il documento e che permettono di definire le intestazioni e il contenuto, ossia <head> .. </head> e <body> ..</body>.
Di seguito puoi vedere come Brackets ti aiuta nella scrittura del codice HTML.
La parte di <head> .. </head> della pagina HTML viene usata principalmente per definire i meta dati, e quello che viene incluso in questa parte, non viene mostrato dal Browser.
Per fare qualche esempio, in questa porzione di documento possono essere incluse direttive che regolano il comportamento dei robots, i meta tag relativi ai principali social network e motori di ricerca e le meta informazioni che fanno riferimento ad altre informazioni non direttamente collegate al contenuto della pagina. Sebbene non sia strettamente necessario in questa parte vengono spesso dichiarate anche le inclusioni di CSS e JavaScript, che possono tranquillamente essere inseriti anche nel <body>.
Ti faccio vedere per esempio l'head della pagina SEO del SEO Blog dove puoi trovare l'inclusione di stili, js, meta dati, feed, viewport etc etc...
<meta charset="utf-8">
<title>SEO - 100+ Motivi Per Modellare Grandi Esperienze D'Uso</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="dns-prefetch" href="//network.giorgiotave.it"/>
<link rel="dns-prefetch" href="//stats.g.doubleclick.net"/>
<link rel="Shortcut Icon" href="https://www.giorgiotave.it/forum/favicon.ico" type="image/x-icon" />
<link href="https://plus.google.com/117510669985299383051/" rel="publisher" />
<link rel="alternate" type="application/rss+xml" title="SEO Blog GT Feed" href="https://seoblog.giorgiotave.it/feed/">
<meta name="description" content="Con il termine Search Engine Optimization, SEO, si intendono le attività finalizzate a fornire le migliori e più esaurienti risorse a fronte di una ricerca specifica."/>
<meta name="keywords" content="seo"/>
<link rel="canonical" href="https://seoblog.giorgiotave.it/seo" />
<meta property="og:locale" content="it_IT" />
<meta property="og:type" content="article" />
<meta property="og:title" content="SEO - 100+ Motivi Per Modellare Grandi Esperienze D'Uso" />
<meta property="og:description" content="Più di 100 sfumature di SEO. Aiutaci nella campagna contro la disinformazione SEO." />
<meta property="og:url" content="https://seoblog.giorgiotave.it/seo" />
<meta property="og:site_name" content="SEO Blog GT" />
<meta property="article:publisher" content="https://www.facebook.com/pages/Gt-Magazine/142527969162065?ref=br_tf" />
<meta property="article:author" content="https://www.facebook.com/andreapernici.seo" />
<meta property="fb:admins" content="1354628317" />
<meta property="og:image" content="https://seoblog.giorgiotave.it/files/2012/12/seo-make-it-better.png" />
<meta property="twitter:account_id" content="1510103423" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:description" content="Con il termine Search Engine Optimization, SEO, si intendono le attività finalizzate a fornire le migliori e più esaurienti risorse a fronte di una ricerca specifica."/>
<meta name="twitter:title" content="SEO - 100+ Motivi Per Modellare Grandi Esperienze D'Uso"/>
<meta name="twitter:site" content="@giorgiotave"/><meta name="twitter:domain" content="SEO Blog GT"/>
<meta name="twitter:creator" content="@andreapernici"/>
<meta name="twitter:image:src" content="https://seoblog.giorgiotave.it/files/2012/12/seo-make-it-better.png"/>
<link rel="stylesheet" href="https://network.giorgiotave.it/resources/css/gt.css">
<link rel="alternate" type="application/rss+xml" title="Feed Magazine GT" href="http://pipes.yahoo.com/pipes/pipe.run?_id=2974a418e6ef950cdc4acc4e68d69fbb&_render=rss">
<!--[if lt IE 9]><script src="https://network.giorgiotave.it/resources/js/libs/modernizr-2.5.3.min.js"></script><![endif]-->
<script type="text/javascript"><script type='text/javascript'> ... </script>La parte di <body> .. </body> della pagina HTML viene usata principalmente per inserire il contenuto che verr� poi renderizzato dal Browser.
Come contenuto si intende testo, immagini, audio, video, object, tabelle e ogni tipo di contenuto che un Browser pu� riconoscere.
Nel caso dell'esempio Hello World! (Contenuto del documento)
Ora per vedere il risultato raggiungibile digitando il tuo sito web salva il file con il nome index.html e caricalo via FTP nella root del tuo spazio hosting.
1. Aggiungi alla pagina HTML - all'interno del body - un'immagine usando il tag <img e inserendo il percorso dell'immagine all'interno dell'attributo src e il testo alternativo all'immagine in caso l'immagine non possa essere visualizzata all'interno dell'attributo alt. Esistono altri attributi come ad esempio width e height, tra gli altri, ma non sono obbligatori.
<img
src="https://www.gtmasterclub.it/css/img/logo.png"
alt="logo gt master club"
width="288" height="291"
>2. Aggiungi un'intestazione primaria e una secondaria.
<h1>Intestazione primaria</h1>
<h2>Intestazione secondaria</h2>3. Aggiungi un video da YouTube.
<iframe
width="560" height="315"
src="//www.youtube.com/embed/zZSnpHIXRvo?rel=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>4. Aggiungi un paragrafop all'interno di un contenitore div con corsivo i, sottolineature u, grassetti b o strong in un elenco puntato ul+li.
<div>
<p>Paragrafo che inizia e poi inserisce un elenco puntato con:
<ul>
<li><i>un corsivo</i>,</li>
<li><b>un neretto</b>,</li>
<li>una <u>sottolineatura</u></li>
</ul>
</p>
</div>Ora che hai inserito tutti gli elementi tra head e body metti insieme i pezzi come segue e carica il file sul tuo server.
<!doctype html>
<html>
<head>
<title>Titolo del documento</title>
</head>
<body>
<img
src="https://www.gtmasterclub.it/css/img/logo.png"
alt="logo gt master club"
width="288" height="291"
>
<h1>Intestazione primaria</h1>
<h2>Intestazione secondaria</h2>
<iframe
width="560" height="315"
src="//www.youtube.com/embed/zZSnpHIXRvo?rel=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
<div>
<p>Paragrafo che inizia e poi inserisce un elenco puntato con:
<ul>
<li><i>un corsivo</i>,</li>
<li><b>un neretto</b>,</li>
<li>una <u>sottolineatura</u></li>
</ul>
</p>
</div>
</body>
</html>E vedi il risultato nel Browser
