ustenciles numérique Durant ce quadrimestre, j'ai travaillé à la création d'un site internet. J'ai utilisé comme logiciel de codage, css et html j'ai écrit mes commandes sur visual studio code (https://code.visualstudio.com/download) et pour apprendre les bases du code j'ai suivi les cours sur open classroom (voici le lien: https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3 ) c'est gratuit il faut juste ce crée un compte via une adresse mail. C'est relativement accessible, je pensais que le code n'était pas fait pour moi, au début, c'est un peu décourageant mais au final c'est comme apprendre une nouvelle langue, un nouveau langage. Ce qui est bien c'est qu'il y a plein d'information sur le codage sur internet. Il suffit de taper sur un moteur de recherche la commande qu'on souhaite avoir et les premiers liens donnent la solution. Ex si je met: comment ajouter de la couleur en css a un texte? La première réponse que j'ai trouvé est celle là: “Pour cela vous devez utiliser la feuille de style Css color qui permet de spécifier la couleur de texte.” l'html permet de crée la “colonne vertébrale” du site, elle crée toute la structure. Elle fonctionne via trois balise principales (html, head, body):
le langage html fonctionne grâce à des balises qui s'écrivent comme ça: <>;</> en css les commandes se notent plutôt avec des accolades, pour que le navigateur puisse lire ce que vous lui demandé il faut respecter une syntaxe qui se base sur trois niveaux: (exemple pour ajouter de la couleur à un texte) p{ color: red; } p=sélecteur, il est toujours suivi d'une accolade (en l'occurrence ici p représente la balise paragraphe en html) color= à la propriété (ici elle permet de modifier la couleur de votre texte) elle est toujours suivi de : valeur; red= valeur( va indiquer que le texte est en rouge). En écriture théorique ça donne ça: sélecteur{ propriété:valeur; } ,… Ce qui met le plus de temps c'est de comprendre comment ça marche mais il existe de nombreux formats qui explique comment précéder (cours en ligne, vidéos,…) et puis c'est en pratiquant les commandes qu'on finis pas les connaitre par <3. Dans la totalité de mon projet, apprendre le code n'était qu'une partie du travaille. Ce quadri m'a également permis à me renseigner sur la cyber sécurité, j'ai aussi du apprendre à démonter une trottinette et répertorier comment faire dans mon site, /!\ Pour que tous site en html et css soit en ligne, il lui faut un hébergeur ça coûte environ 30€ :€. Heureusement si vous aller trouver le prêt matos, l'école a des serveurs pour héberger vos sites. Seulement moi je voulais procéder autrement donc j'ai trouvé un arrangement avec domaine public (https://www.domainepublic.net/) ça coûte 30€ d'héberger un site chez eux pour un an, mais ielles ont une formule “petit budget” et si vous envoyer un mail avec la description de votre projet et que vous faite la demande d'avoir accès à cette formule, il y a beaucoup de chance qu'elle vous soit accorder :))).voilà une synthèse que j'ai construite au fur et à mesure de mon apprentissage, déso elle part en vrille à la fin mais au moment du css, il suffit de maitriser les commandes et ça devient plus instinctif qu'autre chose.
<!– STRUCTURE DE BASE D'UN HTML<!DOCTYPE html> <html lang=“fr”>
<head>
<meta charset="utf-8"> <title>Accueil - Robbie Lens Photographie</title> <link href="style.css.crashtest" rel="stylesheet">
</head>
<body>
<img src="image/logo.png" alt="logo Robbie lens">
<a href="a-propos.html">A propos</a>
<h1>Photographie</h1>
<p>
Où professionalisme s’allie avec passion. Depuis plus de 5 ans maintenant, j’exerce mon métier avec la passion
qui m’anime : capturer l’essence de chaque instant.
</p>
<img src="image/robbie lens.png" alt="portrait avec effet de la photographie Robbie Lens.">
<img src="image/logo.png" alt="Logo Robbie lens">
<a target="_blank"href="https://twitter.com/"></a>
<img src="image/twitter.png" alt="Logo Twitter">
<a target="-blank" href="https://www.instagram.com/"></a>
<img src="image/instagram.png" alt="Logo Instagram">
</body>
</html> en html, pour écrire on utilise <> en css, on utilise {}–> <!–html sert à et css sert à donner du style à la page web dans un dossier html–> <!—<!DOCTYPE html–> <!–<html lang=“fr”> ⇒ la base de tous documents html–> <!–un document html est structurer comme ça:
<head>
<meta charset="utf-8">
<title> le titre </title>
</head>=> tous ce qui est dans la head sont des données meta qui n'apparaitrons pas sur la page web, elle servent de structure ex <title>donne le titre de l'onglet du navigateur<title/> il n'y a que un title puisque ta page ne peut avoir qu'un seul titre
<body>
<p>paragraphe</p>
<br>=> pour revenir à la ligne sans crée un nouveau paragraphe (balise orpheline)
<h1> </h1>,...=> <h6> </h6>=> ce sont les différents niveaux de titre ne pas
<li></li> indique qu'il s'agit d'éléments à mettre dans une liste:
deux types de listes possible
<ul> </ul>=> liste non ordonnée, liste à points
<ol> </ol>=> liste ordonnée, liste numéroté
si on veut faire une liste non ordonnée, il faut ecrire
<ul>
<li>paris</li>
<li>marseille</li>
<li>liege</li>
</ul>
pour mettre en valeur du texte important:
<strong> </strong>=> met en gras
<mark> </mark>=> surligne le texte
<em </em> met le texte en ittalique
cela dit, c'est le navigateur qui choisis comment afficher les mots qu'on lui indique comme important( grace a ces balise) il se peut donc que par exemple, les balise <strong></strong> et <em></em> ne s'inscrivent pas respectueusement en gras ou en itallique. Mais grace à css, on pourra afficher les mots important d'une autre manière qu'en gras par exemple.
pour crée un hyperlien (les hyperlien peuvent renvoyerr plus bas sur une meme page ou sur une page différente.)
la balise <a> </a> indique qu'on va se rediriger vers un autre endroit. <href></href>, annonce vers quel endroit on souhaite se rediriger "" l'endroit vers lequel on veut se rediriger Puis, on écrit le texte qui doit s'afficher vers l'hyperlien, pour ça il y a deux manières de faire 1. l'hyperlien peut se faire en restant sur la meme page (ça veut dire que les deux page sont dans le meme dossier local (dossier local=> ton dossier de travaille dans ton ordinateur, quand la page n'est pas encore connecté à un serveur)): alors il suffit d'écrire comme cible du lien hyper texte le nom du fichier vers lequel on veut l'amener en fonction du nom qu'on a donné à notre fichier ex: page2.html Si on veut aller de la page 1 à la page 2, voici ce que nous écrirons dans le fichier de page1.html : <a href="page2.html">Page 2</a> 2. Si les deux pages sont situées dans deux dossiers différents en local et Si on veut créer un fichier page 3 et le déplacer dans un autre dossier, par exemple un dossier /contenu , on va donc indiquer le chemin à suivre pour trouver ce fichier qui est : <a href="contenu/page3.html">Page 3</a> Et s'il y a plusieurs sous-dossiers, on écrira ceci : <a href="contenu/autredossier/page3.html">Page 3</a> Et si le fichier ne se trouve pas dans un sous-dossier, mais dans un dossier “parent”, on fait comment ? (dossier parents=>) Si votre fichier cible est placé dans un dossier qui se trouve “plus haut” dans l'arborescence, il faut écrire deux points .. , comme ceci : <a href="../page3.html">Page 3</a>
crée une ancre avec les attributs id et href
pour crée une ancre il suffit de rajouter la balise id, ex: <h2 id="mon ancre">titre de l'ancre</h2> id sert à donner un nom unique à la baliseet peut servir de repère id=> un élément unique=> pour cibler un élément précis dans ta page surtout utiliser avec le css pour rajouter du style sur ta page => mettre une typo différente,.. href=> c'est l'url il n'est utilisé que dans les balise <a> </a> pour faire des liens hypertextes ou autres,... dans ta page
–>
<!–balise paires <> …</>–> <!–balise orpheline<>…–> <!– <title> ceci est le titre</title> (title est une balise paire)–> <!– html sert –>
<!–Intégrer le css dans la partie html–> <!–pour commencer, il faut rajouter dans le fichier .html la formule <link href=“style.css” rel=“stylesheet”> qui s'ouvre avec la balise orpheline <link> et on la place à l'intérieur de la balise <head> </head>–> <!–cette ligne de commande permet au navigateur de lié votre fichier html et css, ça ressemble à ça : –> <!–<head>
<meta charset="utf-8">
<title>Ma page</title>
<link href="style.css" rel="stylesheet">
<pour que le navigateur puisse lire css, il faut repsecter une synthaxe qui est basé sur 3niveaux-->
<!-- p{
color:#ff0000;
}-->
<!-- Il est possible d'associer plusieurs sélecteur au même style il faut ajouter une ","et précisé la nouvelle balise qu'il faut modifié, exemple:
p,h1{
color:royaleblue;
} ((h1= si je souhaite que le titre soit de meme couleur que le paragraphe))
------- Appliquez un style à un élément isolé avec l'attribut class ou id-------
marquez un élément avec l'attribut class dans le fichier .html (celle que tu veux)
On vient de créer un attribut class nommé ma-classe (par exemple) dans le fichier .html pour marquer un élément auquel on veut appliquer un style en particulier. Maintenant, il faut appeler l'élément que l'on a marqué dans le fichier .css pour pouvoir lui appliquer un style.
ensuite,appelez le nom de l'attribut class via un . dans le fichier .css par exemple: .ma-classe Appliquez une propriété CSS à un élément unique avec l'attribut id à la même fonction que class mais est moins utilisé car il ne peut e^tre utilisé qu'une fois à voir dans le javascript pour le notter c'est assez similaire sauf que l'attribut id via un # dans le fichier .css ——-les balises universelle——– il en existe deux; <span> </span> ⇒C'est une balise de type “inline”, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe. ou <div> </div>⇒C'est une balise de type “block”, qui entoure un bloc de texte. Les balises <p>, <h1> , etc., sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau “bloc”, dans la page, et provoquent donc obligatoirement un retour à la ligne.
font-size, indique la taille d'un texte qui s'écrit en px (pixel)ou em⇒en em les nombres décimaux s'écrivent avec un .et pas avec une , ex (2.5em) la propriété CSS font-family indique la police du texte De nombreuses propriétés de mise en forme du texte existent : font-style pour l'italique, font-weight pour la mise en gras, text-decoration pour le soulignement. Le texte peut être aligné avec la propriété CSS text-align
On change la couleur du texte avec la propriété color et la couleur de fond avec la propriété background-color. On peut indiquer une couleur en écrivant son nom en anglais, black par exemple, sous forme hexadécimale, comme #FFC8D3, ou en notation RGB, comme rgb(250,25,118). On peut ajouter une image de fond avec la propriété background-image. On peut choisir de fixer l'image de fond, ou encore de la positionner où on veut sur la page. On peut rendre une portion de la page transparente avec la propriété opacity ou avec la notation RGBA (une extension de la notation RGB, où la quatrième valeur indique le niveau de transparence).
On peut appliquer une bordure à un élément avec la super-propriété CSS border. Il faut indiquer la largeur de la bordure, sa couleur et son type (simple, double, pointillés, tirets). On peut arrondir les bordures avec la propriété CSS border-radius. On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le décalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur. Le texte peut lui aussi avoir une ombre avec text-shadow.
En CSS, on peut modifier l'apparence de certaines sections dynamiquement, après le chargement de la page, lorsque certaines interactions se produisent. On utilise pour cela les pseudo-classes.
La pseudo-classe :hover modifie l'apparence d'un élément au survol (par exemple : a:hover modifie l'apparence des liens hypertextes lorsque la souris pointe dessus). La pseudo-classe :active modifie l'apparence des liens hypertextes au moment du clic. La pseudo-classe :visited modifie l'apparence des liens hypertextes lorsqu'un lien a déjà été visité. La pseudo-classe :focus modifie l'apparence d'un élément sélectionné via la touche “tab”. mais /!\ encore ajd tous les navigateur ne reconaissent pas cette fonction /!\ la balise header sert a l'en tete (comme pour placer le logo un lien ou quoi qui sera en haut du site, a ne pas confondre avec la balise head ou il s'agit de noter les informations générale du site. la balise <footer> permet le pied de page, On y trouve généralement des informations comme des liens de contact, les mentions légales, la politique de confidentialité, etc.
Plusieurs balises permettent de délimiter les différentes zones qui constituent la page web :
<header> : en-tête ;
<footer> : pied de page ;
<nav> : liens principaux de navigation ;
<section> : section de page ;
<aside> : informations complémentaires ;
<article> : article indépendant.
Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.
Ces balises ne s'occupent pas de la mise en page. Elles servent seulement à indiquer à l'ordinateur la fonction du texte qu'elles encadrent. On pourrait très bien placer l'en-tête en bas de la page, si on le souhaitait.
On distingue deux principaux types de balises en HTML :
les balises de type block comme <p> ou <h1> créent un retour à la ligne et occupent par défaut toute la largeur disponible. Elles se suivent de haut en bas ;
les balises de type inline comme <a> ou <strong> délimitent du texte au milieu d'une ligne. Elles se suivent de gauche à droite.
On peut modifier la taille d'une balise de type block avec les propriétés CSS width (largeur) et height (hauteur)
Les éléments de la page disposent chacun de padding (marges intérieures) et de margin (marges extérieures
On peut centrer le contenu d'un bloc dont la largeur est définie par width avec margin: auto;
/!\ aux balises block et inline!!!!!!
Le principe de Flexbox est d'avoir un conteneur avec plusieurs éléments à l'intérieur. Avec display: flex; sur le conteneur, les éléments à l'intérieur sont agencés en mode Flexbox (horizontalement, par défaut).
Flexbox peut gérer toutes les directions. Avec flex-direction , on peut indiquer si les éléments sont agencés horizontalement (par défaut) ou verticalement. Cela définit ce qu'on appelle l'axe principal
L'alignement des éléments se fait sur l'axe principal avec justify-content et sur l'axe secondaire avec align-items .
Avec flex-wrap, on peut autoriser les éléments à revenir à la ligne s'ils n'ont plus d'espace.
S'il y a plusieurs lignes, on peut indiquer comment les lignes doivent se répartir entre elles avec align-content.
Les CSS Grids sont complémentaires à Flexbox et permettent de créer facilement des mises en page plus élaborées que Flexbox, sans forcément avoir des éléments de la même taille.
Pour déclarer une grid, on déclare simplement display: grid; sur le conteneur : notre navigateur comprend tout de suite que nos éléments sont dans la grid.
On définit les colonnes avec grid-template-columns et les rangées avec grid-template-rows : en fonction du nombre de valeurs passées, de nouvelles colonnes et rangées sont créées.
En plus des unités classiques px , em , rem et % , les fr sont encore plus simples, et permettent d'indiquer une fraction de la grille.
gap permet d'espacer les éléments entre eux.
Les grids créent implicitement des lignes horizontales et verticales délimitant les différentes rangées et colonnes.
Chaque élément peut avoir :
son propre point de départ horizontal avec grid-row-start ;
son point d'arrivée horizontal avec grid-row-end ;
son point de départ vertical avec grid-column-start ;
et son point d'arrivée vertical avec grid-column-end .
/!\ seul les éléments blocks (pas inline) sont modifiable au niveau de leur taille et hauteur
Les CSS Grids sont complémentaires à Flexbox et permettent de créer facilement des mises en page plus élaborées que Flexbox, sans forcément avoir des éléments de la même taille.
Pour déclarer une grid, on déclare simplement display: grid; sur le conteneur : notre navigateur comprend tout de suite que nos éléments sont dans la grid. On définit les colonnes avec grid-template-columns et les rangées avec grid-template-rows : en fonction du nombre de valeurs passées, de nouvelles colonnes et rangées sont créées. En plus des unités classiques px , em , rem et % , les fr sont encore plus simples, et permettent d'indiquer une fraction de la grille. gap permet d'espacer les éléments entre eux. Les grids créent implicitement des lignes horizontales et verticales délimitant les différentes rangées et colonnes. Chaque élément peut avoir :
son propre point de départ horizontal avec grid-row-start ; son point d'arrivée horizontal avec grid-row-end ; son point de départ vertical avec grid-column-start ; et son point d'arrivée vertical avec grid-column-end;
–>
<!-- le texte peut avoir des bordure et des ombres-->
</head>