Scribd Logo
Importer

Bienvenue sur Scribd !

  • Cours HTML Css

    Transféré par

    tiactivity3
    49 vues6 pages

    Titre original

    cours_html_css

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOCX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    49 vues6 pages

    Cours HTML Css

    Transféré par

    tiactivity3

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOCX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 6

    Bonjour,

    Nous allons apprendre les bases même d’un site internet, le HTML et le CSS. Dans l’ordre, le HTML
    sert à construire une page internet dite vitrine, un affichage simple mais efficace. Le CSS, quant à lui
    permet de styliser cette page précédemment créée.

    Il est important de noter tout de même que le html et le css ne sont pas réellement des langages de
    programmation, mais des langages de description, c’est-à-dire qu’ils vont dire au navigateur
    comment il doit afficher la page qu’on lui demande.

    Nous allons aussi voir par la suite une introduction au javascript, qui, lui, est un langage de
    programmation et qui permet des interactions avec notre page pour lui faire effectuer des actions.
    (Par exemple, quand nous cliquerons sur le texte rouge, il se transformera en vert, mais nous y
    reviendront au moment voulu.)

    Commençons donc par le HTML, la structure.

    Il est constitué de balises, sorte de petits débuts de phrases et fin de phrases.

    Par exemple :

    <p>Ceci est une phrase</p>

    Qui voudrait dire ici :

    <J’ouvre un paragraphe texte>Ceci est une phrase</Je ferme un paragraphe texte>

    Voyons donc les balises les plus importantes d’une page maintenant.

    <!DOCTYPE html> (Va déterminer quelle version de HTML nous allons utiliser, ici, html5)

    <html> (balise qui ouvre la page html)

    <head> (balise qui va contenir le titre et autres informations, ainsi que le css et le javascript)

    </head> (on ferme notre entête d’information)

    <body> (balise qui va contenir tous les éléments de la page)

    </body> (on arrêtera de mettre des éléments a partir d’ici)

    </html> (on ferme notre page html)

    Nous avons donc ici notre structure principale. Evidemment il va falloir remplir cette structure
    maintenant. Rajouter du texte, des blocs, du contenu.

    Venons-en donc à la partie intéressante. Nous allons apprendre quelques balises sympathique !

    <p></p> pour faire du texte


    <div></div> pour faire des blocs (nous y reviendrons, le css nous permet de faire beaucoup plus), et bien organiser son
    code.

    <img src="chemin vers l’image"/> pour intégrer une image a son site (ici, un nouveau concept, les balises auto
    fermante, qui n’ont pas de début et fin de phrase, mais sont une phrase a elles-seules)

    <a href="lien vers une page">texte pour ce lien</a> pour rajouter une ancre (ou lien) sur son site, qui
    pointe, soit vert une page distante ou une autre page de notre site.

    Il y’en a énormément d’autres, mais vous avez ici le principal pour faire un site dit «
    vitrine » (comprendre, qui affichera ses informations, et voilà.), vous pouvez bien sur nous demander
    si vous avez besoin de faire autre chose sur votre page.

    Vous allez vite remarquer que votre première page avec ces éléments sera relativement moche, c’est
    normal, nous n’avons pas pu la styliser.

    Passons donc au CSS, il y’a deux moyens de l’appliquer, soit directement dans le fichier html, dit
    Inline, ou dans un fichier .css externe, lui-même dans notre balise <head>

    Nous allons commencer avec le Inline, car plus facile a comprendre, mais il faut savoir que cette
    façon de faire n’est pas très pratique, et peu appréciée.

    On peut ajouter à nos balises, des attributs (tel src="" ou href="" dans ce que nous avons vu
    précédemment) style="", class="" ou encore id="".

    Nous allons surtout nous intéresser à l’attribut style=’’’’ dans un premier temps. A l’intérieur de celui-
    ci, nous allons pouvoir appliquer des propriétés de style (css), comme par exemple ‘’color : blue ;’’
    afin de changer la couleur du texte en bleu. Notons que chaque ligne de css doit se terminer par un
    point-virgule. ( ; )

    Voici quelques exemples de propriétés classique mais néanmoins très utile.

    color : blue ou white ou black ou #FFFFFF ou etc (on peut aussi attribuer les couleur avec leur code hexadecimal type
    #FFFFFF, qui veut dire blanc)

    font-weight : bold (permet de determiner si le texte est en gras ou non)

    font-style : italic (permet de determiner si le texte est en italique ou non)

    font-size : taille en px (pixel) ou en % (pourcentage) (permet de determiner la taille du texte)

    text-decoration : none ou underline (permet de changer le style du texte, souligné par exemple)

    width : taille en px ou en % (permet de determiner la largeur d'un élement)

    height : taille en px ou en % (permet de determiner la hauteur d'un élement)

    margin : taille en px ou en % (permet de determiner la marge (ou distance) entre différents élements)

    padding : taille en px ou en % (permet de determiner la marge (ou distance) à l'intérieur de l'élement)


    background-color : blue ou white ou black ou #FFFFFF ou etc; (permet de determiner la couleur du fond)

    background-image : url(‘lien vers l’image’) (permet de determiner l'image de fond)

    background-repeat : no-repeat/repeat (permet de determiner si l'image de fond doit se répéter ou non)

    Reprenons notre architecture html et ajoutons-y quelques éléments ainsi qu’un peu de style,
    appelons le index.html.

    <!DOCTYPE html>

    <html>

    <head>

    </head>

    <body style="background-image:url('image.jpg'); background-repeat:no-repeat;">

    <div style="width:100px; height:100px;">

    <h1 style="color:white; background-color:red;">Titre principal</h1>

    <p style="font-weight:bold; font-size:9px;">Petit texte</p>

    <a href="http://facebook.com" style="color:white; background-color:blue;">facebook</a>

    </div>

    <div style="width:100px; height:100px; background-color:blue; margin:10px;">

    </div>

    </body>

    </html>

    Vous constatez surement quelques différences maintenant. Vous pouvez monter, à partir de ça, un
    site web vitrine simple, mais cette façon de faire n’est pas très optimisée ni appréciée, passons aux
    fichiers css externes, et aux attributs class=’’’’.

    En plus de notre fichier index.html structure, créons un fichier style.css. Nous allons donner des
    noms a nos classes.

    Par exemple :

    <div class="coucou"></div>

    Dans notre fichier css, nous allons la déclarer de cette façon :


    .coucou {

    width : 100px ;

    Et nous allons associer les deux ensembles de cette façon :

    <head>

    <link rel=’’stylesheet’’ type=’’text/css’’ media=’’all’’ href=’’lien vers le fichier css’’>

    </head>

    Donc en reprenant notre structure html de tout à l’heure mais en adaptant avec notre nouvelle façon
    de faire, nous allons avoir :

    INDEX.HTML
    <!DOCTYPE html>

    <html>

    <head>

    <link rel=’’stylesheet’’ type=’’text/css’’ media=’’all’’ href=’’style.css’’>

    </head>

    <body class=’’body’’>

    <div class=’’bloc-texte’’>

    <h1 class=’’titre’’>Titre principal</h1>

    <p class="texte">Petit texte</p>

    <a href="http://facebook.com" class=’’lien’’>facebook</a>

    </div>

    <div class=’’bloc-bleu’’>

    </div>

    </body>

    </html>
    STYLE.CSS
    .body {

    background-image : url('image.jpg');

    background-repeat : no-repeat;

    .bloc-texte {

    width : 100px;

    height : 100px;

    .titre {

    color : white;

    background-color : red;

    .texte {

    font-weight : bold;

    font-size : 9px;

    .lien {

    color : white;

    background-color : blue;

    .bloc-bleu {

    width : 100px;

    height : 100px;

    background-color : blue;

    margin : 10px;

    }
    Amusez-vous un peu à faire des pages et des sites, nous allons bientôt passer au langage de
    programmation javascript pour interagir avec la page. N’hésitez pas si vous avez des questions !

    Vous aimerez peut-être aussi