HTML

http://brackets.io/

Piano del corso

  1. a che cosa servono, perché studiarli
  2. presentazione degli strumenti di lavoro
  3. organizzazione degli assets
  4. universalità – Esercizio
  5. HTML
    1. ipertesto
    2. gerarchia dei contenuti
    3. i tag principali
    4. accento sui DIVs
  6. CSS
    1. separazione tra contenuti e forma
    2. id e classi
    3. strumenti developer del browser Chrome
  7. cos’è un Framework e perché utilizzarlo
    1. responsiveness
    2. Bootstrap 3, configurazione e setup
    3. le principale classi di Bootstrap 3
  8. HTTP, FTP, Web Servers
  9. incorporazione di Web Fonts
  10. utilizzo di JQuery senza studiare Javascript
  11. creazione dei layout elaborati dagli studenti
  12. (cenni su WordPress e il sistema dei template)

 

Risorse

Blank HTML page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="it">
 <head>
 <title>Titolo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <p>Contenuti</p>
 </body>
</html>

Bootstrap

<!DOCTYPE html>
<html lang="it">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
 <title>Bootstrap 101 Template</title>
 <!-- Bootstrap -->
 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
 <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
 </head>
 <body>
 <div class="container">
 <h1>Titolo</h1>
 <div class="row">
 <div class="col-sm-4">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 est laborum.</p>
 </div>
 <div class="col-sm-4">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 est laborum.</p>
 </div>
 <div class="col-sm-4">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
 ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
 reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
 est laborum.</p>
 </div>
 </div>
 </div>
 </div>
 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
</html>

Centered Navbar

http://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar

/* NAVBAR CENTRATA */
 .navbar .navbar-nav {
 display: inline-block;
 float: none;
 vertical-align: top;
 }
.navbar .navbar-collapse {
 text-align: center;
 }

Togliere margini orizzontali

 .row {
    margin-left:  -24px;
    margin-right: -24px;
    padding-left:  24px;
    padding-right:  24px;
  }

Esercizi