Je poursuis mon apprentissage dans l’optique de devenir développeuse web… Et pour ça, j’ai changé de langage !
En effet, pour pouvoir coder les sites web il faut impérativement que je connaisse les langages adaptés au web : notamment HTML et CSS.
Langage HTML
Le HTML (HyperText Markup Language ou Langage de balisage d’hypertexte) a été créé en même temps que le World Wild Web, dans les années 1990. Ce n’est pas un langage de programmation. Il permet d’écrire du texte en hypertexte. Ainsi que de mettre en forme du contenu grâce à des balises. Ces balises définissent où mettre des titres, des sous-titres, du texte en gras. Elles définissent aussi où ajouter des éléments interactifs (photos, vidéos, liens, etc.). La visualisation d’une page écrite en HTML se fait uniquement via un navigateur.
Après de nombreuses évolutions, ce langage de balisage propose depuis 2014 une version plus aboutie : le HTML5.
Langage CSS
Le CSS (Cascading Style Sheets ou Feuilles de style en cascade) est apparu en même temps que le HTML. C’est une feuille de style qui définit comment les éléments de la page HTML doivent être affichés sur l’écran (police de caractère, couleur, alignement, etc.).
Vers 2010, le langage évolue vers sa 3ème version : CSS3.
Le CSS est complémentaire au HTML, ils fonctionnent de concert. C’est pour cette raison qu’il est important de les étudier en même temps.
Il est bon de noter que ces 2 langages sont améliorés et approuvés au fil de temps par le W3C (World Wild Web Consortium, thème que j’aborderai dans un prochain post !).
Leur apprentissage
Pour ce faire, j’ai suivi un cours sur OpenClassrooms : Apprenez à créer votre site web avec HTML5 et CSS3
Dans ce cours, j’ai appris les fondamentaux pour créer une page web. Et j’ai créé un CV fictif pour mettre en application ce nouvel apprentissage : celui de Marie Curie ! 😉
Ce cours permet de donner de bonnes bases sur ces deux langages. Il est simple et permet de mettre rapidement en application ce qu’on a appris.
Mon conseil
Lors de l’apprentissage de ces 2 langages, l’important est de prendre des notes. En effet, lorsqu’on débute, il est difficile de se souvenir de toutes les balises. Or l’utilisation et le positionnement de ces balises sont très importants pour avoir un code lisible et structuré.
Il est impératif d’avoir un dossier commun contenant le fichier .html, .css, les images et polices spéciales. Sinon la page html ne s’affichera pas correctement !
Je vous mets mes deux codes qui permettent d’afficher le CV de Marie Curie que j’ai réalisé.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="stylecv.css" /> <title>Mon CV - Marie Curie</title> </head> <body> <nav class="lisere"> <p> </p> </nav> <header> <a href="marie_curie.jpeg"><img src="marie_curie_mini.jpg" class="image" alt="portrait de marie curie" title="cliquez pour agrandir la photo !" /></a> <!-- image--> <div class="titre"> <!-- titre--> <h1>Marie Curie</h1> 1867-1934<br/> Première femme a avoir reçu le prix Nobel de Chimie pour ses travaux sur le polonium et le radium. </div> </header> <section id="corps"> <div class="experience"> <h2>Son Expérience</h2> <ul> <li><strong>1893</strong> : Obtention de la licence en Sciences Physiques</li> <li><strong>1894</strong> : Obtention de la licence en Sciences Mathématiques</li> <li><strong>1896</strong> : Première au concours d'agrégation pour l'enseignement des jeunes filles - section Mathématiques</li> <li><strong>1897-1903</strong> : Thèse intitulée Recherches sur les substances radioactives</li> <li><strong>1903</strong> : Prix Nobel de Physique (reçu conjointement avec Pierre Curie, son mari, et Henri Becquerel)</li> <li><strong>1911</strong> : Prix Nobel de Chimie (<a href="https://fr.wikipedia.org/wiki/Marie_Curie#/media/Fichier:Marie_Sk%C5%82odowska-Curie's_Nobel_Prize_in_Chemistry_1911.jpg">diplôme accompagnant le prix Nobel</a> )</li> </ul> </div> <div class="competence"> <h2>Ses Compétences</h2> <ul> <li>Mathématiques</li> <li>Physique</li> <li>Chimie</li> <li>Découverte du polonium</li> <li>Découverte du radium</li> <li>Liste non exhaustive !</li> </ul> </div> <div class="formation"> <h2>Sa Formation</h2> <ul> <li><strong>1883</strong> : diplôme de fin d’études secondaires avec la médaille d’or</li> <li><strong>1891</strong> : études de Physique à la Faculté des Sciences de Paris</li> </ul> </div> </section> </body> </html>
/* polices spéciales */ @font-face { font-family: "gothic"; src: url("Elementary_Gothic.otf") format("opentype"), url("Elementary_Gothic.ttf") format("truetype"); } @font-face { font-family: "summertime"; src: url("SummertO.ttf") format("truetype"); } /* En Tête */ header { display: flex; flex-direction: row-reverse; justify-content: center; align-items: center; height: 10%; max-width: 90%; position: relative; left: 10%; } .image /* image avec bordure et ombre */ { margin: auto; border: 6px navy double; box-shadow: 8px 4px 6px blue; width: 60%; height: 60%; } .titre { margin: auto; text-align: center; color: gray; font-size: 1em; font-style: italic; } h1 /* titre de couleur différente, centré et avec police spéciale */ { font-family: "gothic", Impact, Georgia, Verdana, sans-serif; font-weight: bold; color : gray; text-align: center; } /* Liseré */ .lisere { position: absolute; left: 1px; top: 1px; width: 10%; height: 100%; background: url("fondchimie.png") repeat-y center; border-right: 1px teal solid; border-radius: 6px/8px; } /* Corps de Texte */ body { font-family: Arial, "Times New Roman", sans-serif; } #corps { display: flex; justify-content: flex-start; align-items: stretch; max-width: 90%; position: relative; left: 10%; } div { margin: top; width: auto; min-width: 33%; } ul /*ne pas afficher les puces*/ { list-style-type: none; } h2 /* mise en forme titre h2*/ { font-family: "summertime", Impact, sans-serif; font-size: 2em; font-style: italic; color: teal; text-align: center; } /* style des liens */ a { color: blue; } a:hover { text-decoration: underline; color: aqua; } /* affichage sur des écrans plus petits que 1024px */ @media screen and (max-width: 1024px) { .lisere { display: none; /* suppression du liseré */ } #corps { display: flex; flex-direction: column; } }