ZOOM sélecteurs : universel CSS (2)

Rappel : Un sélecteur est un nom de balise ou nom attribué dans une id ou une class afin d'appliquer un style CSS à un élément HTML.
Les sélecteurs peuvent être combinés pour être plus précis dans l'attribution d'un style.

• Sélecteur universel : *

Sélectionne toutes les balises qui se trouvent dans votre page html.
Cela permet d'appliquer un style à toute la page ou bien d'initialiser la page html.

Exemple : 

Je veux appliquer à toute la page une police comics sans ms

Dans mon fichier index.html :

<html>
<head>
 <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>Grand Titre</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in vestibulum dui. Cras ac cursus arcu. Donec sit amet erat vel odio pulvinar lacinia bibendum in turpis. Proin rhoncus tellus in tellus tincidunt laoreet. Cras sed scelerisque nibh. Quisque odio turpis, fermentum et lectus blandit, gravida ultricies neque. Donec eget lectus sodales, vestibulum erat id, venenatis odio. Mauris est libero, dignissim quis dui eu, hendrerit vulputate sem. Duis hendrerit dictum porta. Aenean tempor odio sedimperdiet interdum.
</p>
<table border="1">
<tr>
<th>achat</th>
 </tr>
<tr>
<td>3 cahiers</td>
</tr>
tr>
<td>1 stylo</td>
</tr>
<tr>
<td>litière chat</td>
</tr>
</table>
</body>
</html>

Dans mon fichier style.css :

*{
      font-family: comic sans ms;
}

Resultat :
cliquez sur l'image pour le voir en grand

On a la possibilité de mettre du css directement à l'intérieur d'une balise html : <table border="1"> bordure autour de mon tableau et apparition des cellules du tableau.

NB : Le texte se trouvant dans le paragraphe c'est du faux texte du Lorem Ipsum que vous pouvez trouver sur internet afin de faire des tests sur votre page web.

Structure et balises CSS (1)

Le CSS (Cascading Style Sheets) crée autour de 1995 est actuellement dans sa troisième version.
Il permet de changer l'affichage d'une page html en lui appliquant un style css. Pour cela on utilise des sélecteurs.
Un sélecteur est un nom de balise ou nom attribué dans une id ou une class afin d'appliquer un style CSS à un élément HTML.
Les sélecteurs peuvent être combinés pour être plus précis dans l'attribution d'un style.

On déclare un css de la façon suivante :

sélecteur {
propriété1 : valeur1;
propriété2 : valeur2;
propriété3 : valeur3;
}

Propriétés CSS courantes :

width => Largeur d'un élément ou de la page web

height => Hauteur

border => bordure (border : 1px solid red)

margin => marge extérieure
margin-left
margin-right

padding => marge intérieure
padding-left
padding-right

background => couleur de fond

color => couleur de texte

font-size => taille du texte

text-align => alignement du texte

text-decoration => c'est le soulignement texte rayé etc...

font-weight => correspond à la graisse d'un texte (bold)

position => c'est le positionnement d'élements (absolute (retire élément de son flux) relative
(bouge dans son flux) fixed (élément fixe, ne bouge pas)

left / right => gère la position horizontale (s'utilise avec un position absolute et relative)

top / bottom=> gère la position verticale(s'utilise avec un position absolute et relative)

z-index => ordre de superposition (z-index : 2; z-index: 1; l'élément 2 sera sur l'élément 1)

overflow => masque, scrolle ou affiche (overflow-x, scrolle en horizontal; overflow-y vertical;
overflow : hidden / visible / auto)

opacity => agit sur l'opacité (transparence) d'un élément. 0 rend l'élément invisible et 1 rend l'élément complétement visible.  Donc, pour avoir une transparence : opacity :0.6; 

border-radius => permet d'arrondir les angles d'une bordure d'une image. border-radius : 15px;

border = > apparition d'une bordure autour d'un élément. border : 1px solid black;

@font-face => affiche une police de caractère téléchargée.

font-family => change la police de caractère.  font-family : verdana, sans-serif;
Prendre des précautions, mettre plusieurs polices séparées d'une virgule dans le cas ou la police que vous avez choisi ne soit pas dans le pc ou mac de votre visiteur. Si la première police n'y est pas alors la deuxième police s'affichera. 

font-size => contrôle la taille de la police.

text-indent => alinéa d'un texte

box-shadow => ombre autour d'un élément.  box-shadow :  10px 10px 5px #aaa;
La première valeur représente le décalage vers la droite horizontal
La deuxième valeur représente le décalage vers le bas vertical
La troisième valeur représente le degré de l'ombre
La dernière valeur représente la couleur de l'ombre

text-shadow => l'ombre d'un texte

La composition d'un site web

Dossier ==> espace de stockage de fichier pouvant contenir d'autres dossiers qui sont les sous dossiers.

Fichier ==> c'est un fichier texte dans lequel on peut écrire.

Chemin ==> c'est le chemin qu'il faut parcourir pour accéder à un fichier.
Exemple : dossier/dossier1/images/chat.jpg

Adresse ==> c'est un lien URL permettant d'afficher un contenu une page web sur un navigateur

Site ==> Plusieurs pages liées les uns aux autres, lien interne ou externe, contenant des images, du texte etc...

Conseil : 
Pas besoin de copier-coller un fichier .html dans un autres fichier .html plusieurs fois parce que je veux par exemple le même contenu. Il est plus simple de bien travailler son fichier par exemple, index.hml et puis d'en faire des copies de ce fichiers selon le nombre de pages qui correspond à votre menu et puis de les renommer en fonctions des liens du menu. Cela évite que le travail soit chronophage.

Conseil :
Il est évidemment conseillé lorsque l'on fait du code de s'entraîner. Regardez des tutos, lisez des livres aussi !!
Des personnes disent qu'il est nécessaire d'avoir un enseignant pour apprendre à coder. Moi,  je pense que ça dépend de la personne.
En effet, certaines personnes penseront que c'est mieux d'avoir un enseignant pour donner des pistes précises sur quoi il faut se focaliser, mieux travailler dans la tonne d'infos qu'on peut retrouver sur le web et qui peuvent perturber. Et puis, pour d'autres ce n'est pas le cas. Elles arrivent à être organisées et autonomes dans leur apprentissage.

De mon côté je suis autonome, mais avoir un enseignant c'est appréciable :)
Il y a un partage d'expérience et de conseil.

Donc c'est comme vous voulez pour votre apprentissage, ce qui compte c'est d'être motivé !

Les couleurs, les formats d'images

Eléments format d'images numérique :

• Profondeur
• Transparence
• Compression

Profondeur :

• Noir / Blanc ==> 1 bits / 2 valeurs possibles
• Niveau de gris ==> 8bits / 256 couleurs
• RVB (rouge, vert, bleu) ==> 24 bits = 16 millions couleurs
• CMJN (cyan, magenta, jaune, noir) ==> 32 bits = 4 Milliards

Transparence :

• Transparence RVB = 8bits / 256px
• basique 1bit / 2px
• Sans transparence

 Compression :

Il y a deux type destructive / non-destructive ==> différence de poids

• Il y a des format sans compression bmp, tga...)

• Il y a des compressions sans perte (tif, eps...)

• I y a des compressions avec perte (jpg...)

Gif :

• Profondeur noir et blanc / niveau gris 
• Transparence RVB
• Compression non-destructive

Tiff:

• Profondeur avec niveau gris / RVB
• Transparence RVB
• Compression non-destructive

 BNP:

• Profondeur RVB
• Sans transparence
• Compression non-destructive

PNG:

• Profondeur RVB
• Transparence RVB
• Compression non-destructive

 JPG:

• Pronfondeur RVB
• Compression destructive
• Sans transparence

 Lorsque vous travaillez sur un projet graphique, par exemple sur Photoshop il est vivement conseillé de faire une sauvegarde du fichier source .PSD pour éviter des pertes lors de futur enregistrement.
Si vous enregistrez par exemple en JPG et que vous retravaillez sur ce même JPG pour l'enregistrer de nouveau il y aura des pertes et de plus en plus les pixels apparaîtrons.

Schéma de construction d'une page web

Avant de commencé à créer votre site web il faut penser à faire un croquis ou une maquette sur un logiciel comme Photoshop pour visualiser votre site le nombre de pages, la disposition des contenus etc...

Alors...

1. Travail de la structure de la page
2. Travail du visuel (couleur, image, vidéo, bordure, fond, graphique ...)
3. Travail du texte (titre, intervalle, type de caractère, couleur ...)
4. Conclusion : les trois points précédents vont nous amener vers l'habillage

C'est en gros une sorte de charte graphique.

C'est quoi une charte graphique ?

• Cela permet d'orienter la mise en page, de faire une études sur l'identité visuelle.

 Exemple : prototype sur Photoshop pour déterminer le visuel :

HTML

HTML

Le HTML (HyperText Markup Language) est le langage universel utilisé pour tout structure de page web.
C'est un langage simple mis au point en 1969. Le HTML est composé de plusieurs balises significatives.
Le HTML sert à intégrer des données que se soit du texte, images etc...

La syntaxe d'une balise :

• <voici une balise ouvrante>
• </voici une balise fermante>

Exception :

• <balise image />
• <balise meta />
• <balise link />

Structure d'une page HTML basique :

• <! DOCTYPE html>

• <html> ===============>Balise ouvrante du HTML

• <head></head>==========>Ces balises vont contenir les infos à indiquer au navigateur par exemple (lien externe CSS, titre onglet, le JavaScript, l'encodage etc...)

• <body></body>==========>Ces balises représentent le corps de la page, c'est ici qu'on mettra le contenu de notre page web

• </html>================>Balise fermante du HTML

Voici un exemple de balises courantes :

<html> ==> ouverture de la page HTML

<head> ==> entête contenant info (non-affiché sur le site) pour le navigateur

<link/> ==> CSS page externe

<body> ==> Corps

<h1> ==> jusqu'à <h6>  titres du plus grand au plus petit (sans de <h2> il y a pas de <h3> , suivre l'ordre)

<p> ==> paragraphe

<br/> ==> retour à la ligne

<a href="">lien</a> ==> lien externe ou interne (passer de page en page)

<img src=""/> ==> Intégrer une image
 
<table>==>  tableau

<tr> ==> ligne tableau

<td> ==> colonne tableau

<div> ==> bloc, boîte, délimiter page en zone pour style css

<ul> ==>liste à puces non-ordonnée

<li> ==>liste de la liste à puce

<ol> ==>liste numérotée

<script> ==> appel JavaScript

La création d'un site web

La création d'un site web s'organise de la manière suivante :

• La création d'un dossier commun nommé comme vous le voulez

Dans ce dossier on y trouve

1. Notre page index.htm
2. un doisser images, musiques et vidéos
3. un dossier pour les déférents langages utilisés

Si besoin bien évidemment !

Maintenant il est temps de voir le HTML !