LaDissertation.com - Dissertations, fiches de lectures, exemples du BAC
Recherche

Cours HTML CSS DEBUTANT

Cours : Cours HTML CSS DEBUTANT. Recherche parmi 300 000+ dissertations

Par   •  2 Février 2021  •  Cours  •  2 219 Mots (9 Pages)  •  441 Vues

Page 1 sur 9

Squellette HTML

<!DOCTYPE HTML>

<html>

        <head>

                <meta charset="UTF-8"/>

                <title></title>

        <head/>

                        <body>        

                        </body>

</html>

<!-- -->   Commentaire

<p> </p>   Paragraphe

<br/>           A la ligne

<h1> <h/1> à <h6> <h/6> Titre du plus important au moins important

<em> </em> Mettre en valeur

<strong> </strong> Important

<mark> </mark> Marquer

<ul> </ul> liste non ordonnée <ol> </ol> liste ordonnée <dt> </dt> liste de définitions

 <li> </li> Délimite élément liste

<a href="     "> nom du lien </a>   Si lien avec des & remplacer par &

Lien page sur PC

même dossier   <a href="monfichier.html"> nom lien </a>

Sous dossier   <a href="nom dossier/monfichier.html"> nom lien </a>

Dossier parent <a href="../monfichier.html"> nom lien </a>

Pour ouvrir lien sur autre page  

<a href="../monfichier.html" target="_blank"> nom lien </a>

Ancre  id="nom ancre">

Lien ancre <a href="#nomancre">nomfonction</a>

<a href="mailto:triaytb@gmail.com">un mail</a>

Télécharger <a href="monfichier.zip">nomfichier</a>

Une photo : JPEG.

N'importe quel graphique avec peu de couleurs (moins de 256) : PNG 8 bits

N'importe quel graphique avec beaucoup de couleurs : PNG 24 bits

Une image animée : GIF

Enregistrer image en minuscule et sans caractere spec et sans espace.

changer taille image

https://resizeimage.net/

 <p> <a href="lien image de base"><img src="lien image que l'on veut afficher" alt="commentaire si image s'afficher pas" title="bulle d'info" /></a> </p>

<figure> <figcaption> Notre logo</figcaption> <a href="logotrans_origine.png" target="_blank"><img src="logotrans2.jpg" alt="logo" title="Logo Triachannel" /></a> </figure>

CSS

Mettre dans head <link rel="stylesheet" href="style.css" />

/* commentaire */

pour selectionner certains element du code. ecrire dans le css   .nomclass

<h1 class=""> </h1>

<p class=""> </p>

<img class="" />    

id = class sauf que id doit etre unique dans la page html !

<span> </span> <div> </div> permettent de mettre class ou id pour un seul mot ou parti du paragraphe car ils sont oblige detre dans une balise

*

{

}

Sélectionne toutes les balises sans exception

h3 em

{

}

Sélectionne toutes les balises <em>  situées à l'intérieur d'une balise <h3>  . Notez qu'il n'y a pas de virgule entre les deux noms de balises.

h3 + p

{

}

Sélectionne la première balise <p>  située après un titre <h3>

a[title]

{

}

Sélectionne tous les liens <a>  qui possèdent un attribut title

a[title="Cliquez ici"]

{

}

Idem, mais l'attribut doit en plus avoir exactement pour valeur « Cliquez ici »

a[title*="ici"]

{

}

Idem, l'attribut doit cette fois contenir dans sa valeur le mot « ici » (peu importe sa position).

https://www.w3.org/Style/css3-selectors-updates/WD-css3-selectors-20010126.fr.html#selectors

TAILLE

{

font-size : nbpx;     taille du texte en indiquant les pixels

}

 ou en utlisant une valeur relative :

    xx-small  : minuscule

    x-small  : très petit

    small  : petit

    medium  : moyen

    large  : grand

    x-large  : très grand

    xx-large  : gigantesque

font-size : small;

ou en utilsant la taille en "em" :

1em = taille normale

1.3em= un peu plus gros

0.8em= un peu plus petit

font-size : 1em;

Police

balise

{

    font-family: police; police 2; police 3; sans-serif

}

Toujours proposer 3 à 4 polices si l'utilsateur n'a pas les polices et finir par sans-serif pour en mettre une par défaut si jamais il n'a aucune des polices.

Si le nom de la police comporte des espaces, je conseille de l'entourer de guillemets.

Police personnalisée copyleft

http://www.fontsquirrel.com/ 

.ttf  : TrueType Font. Fonctionne sur IE9 et tous les autres navigateurs ;

...

Télécharger au format  txt (15 Kb)   pdf (186.4 Kb)   docx (35.8 Kb)  
Voir 8 pages de plus »
Uniquement disponible sur LaDissertation.com