Récapitulatif HTML/CSS | Web: Client 2

class: main-title

<h1>Web: Client 2</h1>

<h2>Récapitulatif HTML/CSS</h2>

---

<ul>
<li>Balises</li>
<li>Sélecteurs</li>
<li>Hiérarchie d'un document HTML</li>
</ul>

---
class: section-title

<h1>Récapitulatif HTML et CSS</h1>

---

<ul>
<li>Définit la structure de la page web via des <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">balises</a></li>
</ul>

<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Page&lt;/title&gt;
    &lt;/head&gt;

&lt;body&gt;
        &lt;!-- Contenu --&gt;
        &lt;h1&gt;Titre&lt;/h1&gt;
        &lt;p&gt;Paragraphe&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<ul>
<li>Des attributs viennent préciser le comportement</li>
</ul>

<pre><code class="language-html">&lt;tag something="value" other="value"&gt; contenu &lt;/tag&gt;
</code></pre>

---

<ul>
<li>CSS ajuste la présentation et mets en forme le contenu en modifiant les <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" target="_blank" rel="noopener noreferrer">propriétés</a> des balises</li>
</ul>

<pre><code class="language-css">selector {
    color: red;
    background-color: #00FF00;
    text-align: center;
    width: 50%;
    height: 100px;
    margin: 10px 5px 10px 5px;
    padding: 16px;
    font-family: sans-serif;
    font-size: 16px
}
</code></pre>

<ul>
<li>Les <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors" target="_blank" rel="noopener noreferrer">sélecteurs</a> définissent les éléments à mettre en forme</li>
</ul>

<pre><code class="language-css">p          #my-id         .my-class
p img    h1, h2, h3       a:hover
</code></pre>

---

<h1 class="menu">Attributs <i>id</i> vs <i>class</i></h1>

<ul>
<li><em>id</em>, <strong>identifiant unique</strong> d'une balise HTML pour y faire référence(avec <strong>#</strong>) par la suite(par exemple via un lien, en CSS ou JS)</li>
</ul>

<ul>
<li><em>class</em>, <strong>groupe</strong> auquel peuvent appartenir <strong>plusieurs éléments</strong> qui partagent des caractéristiques communes(avec <strong>.</strong> ). Un élément peut également avoir <strong>plusieurs classes</strong></li>
</ul>

<pre><code class="language-html">&lt;tag class="my-class-name another-class"&gt; … &lt;/tag&gt;
&lt;tag class="another-class"&gt; … &lt;/tag&gt;
</code></pre>

---

<h1 class="menu">Modèle en boîte</h1>

<p>Représente le concept de "boîte" qui enveloppe tous les éléments HTML.</p>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin" target="_blank" rel="noopener noreferrer">Margin</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" target="_blank" rel="noopener noreferrer">Border</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding" target="_blank" rel="noopener noreferrer">Padding</a></li>
</ul>

</div>

---

<h1>Éléments bloc vs <em>inline</em></h1>

<ul>
<li>Bloc

<ul>
<li>Occupe une nouvelle ligne</li>
<li>Largeur de 100%</li>
<li>Ex: titres ou paragraphes<br><br></li>
</ul></li>
<li>Inline

<ul>
<li>Intégré au contenu</li>
<li>Prend la largeur de son contenu</li>
<li>Ex: liens ou images</li>
</ul></li>
</ul>

</div>

<div class="fifty-right center">
    <img src=/sessions/2023H/1SU/documentation/assets/02.1-html-css/block-vs-inline.jpg alt=""><br><br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements" target="_blank" rel="noopener noreferrer">Les éléments block et inline</a>
</div>

---

<h1>Conteneurs</h1>

<ul>
<li>Bloc</li>
<li>Organise le contenu en sections</li>
</ul></li>
<li><strong>Span</strong>, <code>&lt;span&gt;…&lt;/span&gt;</code>

<ul>
<li>Inline</li>
<li>Isole les éléments en conservant leur relation par rapport au reste du contenu</li>
</ul></li>
</ul>

<pre><code class="language-html">&lt;h2&gt;
    &lt;span style="color: red"&gt;H&lt;/span&gt;
    ...
    &lt;span style="color: orange"&gt;o&lt;/span&gt;
&lt;/h2&gt;
</code></pre>

</div>

---

<h1>Formulaires</h1>

<ul>
<li>Les formulaires permettent de saisir des données.</li>
<li>Les données peuvent être manipulées en JavaScript ou transférées à la composante serveur du site web</li>
<li>On peut offrir une meilleure expérience utilisateur en offrant certaines validations directement dans le formulaire(<strong>attention!</strong>)</li>
</ul>

---
class: section-title

<h1>Laboratoire 1</h1>

<p>
  👉 <a href=/sessions/2023H/1SU/documentation/2.2-laboratoire-1 target="_blank" rel="noopener noreferrer">Énoncé</a>
</p>