Creo Il Sito Web

Blog come creare un sito web

Creo Il Sito Web

La presenza sul web è importante

Anche se hanno sentito parlare della vostra azienda, le persone potrebbero voler ricercare sul web maggiori informazioni prima di decidere di venire presso la vostra attività: di conseguenza è importante avere un sito web e fornirlo di una mappa e delle indicazioni su come arrivare al vostro ufficio o negozio. In tale modo i visitatori avranno meno problemi a trovare informazioni su di voi ed avere tutte le indicazioni su come raggiungervi fisicamente, o contattarvi tramite telefono o email.
Per acquisire nuovi clienti è necessario essere visibili sui mezzi che le persone utilizzano per reperire informazioni sui prodotti/servizi che intendono acquistare: nel mondo di oggi la maggioranza delle persone si rivolge ad Internet, in particolare ai Motori di Ricerca come Google, Yahoo o Bing. Il 93% delle decisioni d’acquisto inizia con una ricerca su un Motore di Ricerca, il 60% di tutte le ricerche effettuate viene svolta tramite Google, il motore di ricerca più usato al mondo!

La struttura di un documento HTML può essere così schematizzata:

Di tutto il codice scritto , i browser visualizzeranno soltanto ciò che è contenuto tra i tag <body> e </body>

<!doctype html>
<html lang="it">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="inserire la descrizione del sito web">
    <link rel="stylesheet" href="css/style1.css">
    <title>La mia prima pagina web</title>
</head>
<body>
    <div class="container" >
        <h1 class="titolo">titolo h1 </h1>
        <h2 class="sottotitolo">sottotitolo h2 </h2>
        <hr>
        <nav> 
            <ul >
                <li >
                    <a href="#">HOME</a>
                </li>
                <li >
                    <a href="#">CONTATTA</a>
                </li>
            </ul>
        </nav>
        
        <div>
            <section class="section">
                <hr>
                <div class="conta">
                <h2> qua va inserito le vostre parti del sito </h2>
                <p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.></p>
            </div>
            </section>
        </div>
    </div>
    <footer class="footer">
        <a href="#">va inserita la farte footer "la parte in fondo del sito </a>
    </footer>
</body>
</html>

esempio html
responsive

Responsive

CSS (Cascading Style Sheets) è il codice usato per modellare lo stile delle pagine web

Come l'HTML, anche il CSS non è un vero e proprio linguaggio di programmazione. Si tratta di un "linguaggio di stile", che consente cioé di applicare, selettivamente, uno stile agli elementi dei documenti HTML. Per esempio, per selezionare tutti gli elementi paragrafo di una pagina HTML e rendere rosso il testo che contengono, devi scrivere questo CSS:

html, body {  height: 100%; }
.container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px;}
h1{color: red; font-size: 30px;}
h2{color: darkmagenta; font-size: larger; font-family: Arial, Helvetica, sans-serif;}
.section{position: absolute;margin-top: 5%;}
ul {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}


ul li {
    background-color: #FF831C;
    border-bottom: 5px solid #54BAE2;
    display: block;
    width: 150px;
    height: 30px;
    margin: 2px;
    float: left; /* elementi su singola riga */
}
ul li a {
    color: #fff;
    display: block;
    font-weight: bold;
    line-height: 30px;
    text-decoration: none;
    width: 150px;
    height: 30px;
    text-align: center;
}
ul li.active, ul li:hover {
    background-color: #54BAE2;
    border-bottom: 5px solid #FF831C;
}

.fotter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

esempio html con css