Skip to content

Latest commit

 

History

History
271 lines (193 loc) · 4.62 KB

slides.md

File metadata and controls

271 lines (193 loc) · 4.62 KB
theme background title info class highlighter drawings transition mdc
default
HTML en pratique
## Formation HTML
text-center
shiki
persist
slide-left
true

HTML en pratique

Essayons de reproduire cette page

Ce qu'on va voir
  • Quelques balises importantes
  • Un peu de CSS
  • Un peu de référencement
  • ...
<style> ul { color: unset; list-style-type: none; } </style>

layout: image-right image: https://cover.sli.dev

Ressources

Page à reproduire

Contenu textuel

w3schools W3schools : Tags (balises) et layouts

Remote Image MDN : Eléments (balises) et layouts

<!-- Exemple de structure -->
<html>
  <head></head>
  <body>
    <header></header>
    <main>
      <article>
        <section></section>
        <section></section>
      </article>
    </main>
  </body>
</html>
<style> img{ display: inline-block; width: 50px; } </style>

level: 2

Il y a beaucoup de balises

Editeur dynamique ci-dessous ..

<footer>
<img>
<legend>
<meter>
<abbr><a><code><a><br><a>

Mais c'est pas très joli

Heureusement il y a CSS


div {
  /* on peut décorer comme on veut */
  color: red;
  font-size: 23px;
}

Cibler un élément en css


  <section id = "section-id">
    Super ! 
  </section>
  <section class = "section-class">
    wow...
  </section>


<!-- <style> à mettre dans le <head> -->
<style>
  section{
    background: blue;
  }
  #section-id{
    text-align: center;
  }
  .section-class{
    margin-top: 45px;
  }
</style>

Disposition en 2 colonnes avec flex

<article>
  <section></section>
  <section></section>
</article>


<style>
  article{
    display: flex; 
    justify-content: space-between;
  }

  section{
    flex: 1;
  }
</style>

Centrer en css

Un élément "block"

/* display: block; */
margin: auto;

Un élément "inline"

/* display: inline; */
text-align: center;

Proposition html + css

<<< @/snippets/example.html html

Référencement naturel

    <head>
      <title>Titre de ma page</title>
      <meta name="description" content="">
      <meta property="og:image" content="">
      <meta property="og:image:height" content="">
      <meta property="og:image:width" content="">
      <meta property="og:title" content="">
      <meta property="og:description" content="">
      <meta property="og:url" content="">
      <meta property="og:type" content="">
      <meta property="og:site_name" content="">
      <meta property="og:locale" content="fr_FR">
      <meta name="twitter:card" content="">
      <meta name="twitter:site" content="">
      <meta name="twitter:title" content="">
      <meta name="twitter:description" content="">
      <meta name="twitter:image" content=""> 
      <meta name="twitter:image:alt" content="">
    </head>