Cours HTML CSS DEBUTANT
Cours : Cours HTML CSS DEBUTANT. Recherche parmi 298 000+ dissertationsPar Nyoka_ • 2 Février 2021 • Cours • 2 219 Mots (9 Pages) • 377 Vues
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 ;
...