post-template-default single single-post postid-8495 single-format-standard system-font group-blog side-nav elementor-default elementor-kit- elementor-page elementor-page-8495


<p class="intro-text separator">Pour cette premi&egrave;re semaine de formation nous avons &eacute;tudi&eacute;s le HTML5 et le CSS3, en r&eacute;alisant une page internet.</p>
<p style="text-align: center;"><a class="perf_btn" href="http://formation-webmaster.occitaweb.fr/" target="_blank" rel="noopener">Voir la page r&eacute;alis&eacute; pendant cette premi&egrave;re semaine.</a></p>
<h2><span class="ez-toc-section" id="le-balisage-html"></span>Le balisage HTML<span class="ez-toc-section-end"></span></h2>
<p>Pour construire la page en HTML nous nous sommes r&eacute;f&eacute;r&eacute;s aux recommandations du W3C, en utilisant le balisage s&eacute;mantique de la page.</p>
<p>Nous avons utilis&eacute; la balise <code>&lt;header&gt;</code> et la balise <code>&lt;nav&gt;</code> pour l&rsquo;ent&ecirc;te et le menu. Nous avons altern&eacute;s les balises <code>&lt;articles&gt;</code> et <code>&lt;section&gt;</code> pour diff&eacute;rencier les unit&eacute;s des ensembles, et la balise <code>&lt;footer&gt;</code> pour le pied de page.</p>
<p>Concernant les ressources, pour rendre l&rsquo;ensemble plus attractif, nous avons utilis&eacute; les ressources suivantes :</p>
<ul><li>Google font pour s&eacute;lectionner la police de la page.</li>
<li>Font Awesome afin d&rsquo;utiliser les logo CSS3 et HTML dans des badges r&eacute;alis&eacute;s en CSS.</li>
<li>Et pexels.com pour les images</li>
</ul><h2><span class="ez-toc-section" id="design-en-css"></span>Design en CSS<span class="ez-toc-section-end"></span></h2>
<p>Pendant cette premi&egrave;re semaine nous avons &eacute;tudi&eacute; la mise en page et l&rsquo;utilisation des grilles (GRID) qui permet de r&eacute;aliser rapidement et sans framework des pages adaptative (mais pas encore responsive la page n&rsquo;a &eacute;t&eacute; pr&eacute;vu que pour les &eacute;crans d&rsquo;ordinateurs).</p>
<p>[irp posts=&rdquo;8205&Prime; name=&rdquo;CSS grid &ndash; Galerie responsive&rdquo;]</p>
<h3><span class="ez-toc-section" id="position-absolu-du-menu"></span>Position absolu du menu<span class="ez-toc-section-end"></span></h3>
<p>Pour permettre une navigation efficace nous avons fix&eacute; la barre de menu avec une classe qui applique d&eacute;fini la position absolu du menu au sommet de l&rsquo;&eacute;cran :</p>
<pre class="lang:css">.sticky-top {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}</pre>
<p>Le z-index est plac&eacute; pour &eacute;viter que le menu soit masqu&eacute; par les autres &eacute;l&eacute;ment absolu de notre page.</p>
<h3><span class="ez-toc-section" id="background-clip-sur-le-titre"></span>Background-clip sur le titre<span class="ez-toc-section-end"></span></h3>
<p>Nous avons ensuite utilis&eacute; la propri&eacute;t&eacute; background-clip pour appliqu&eacute; un d&eacute;grad&eacute; sur le titre de la page.</p>
<p>[irp posts=&rdquo;5459&Prime; name=&rdquo;Background-clip Appliquer un d&eacute;grad&eacute; sur vos titres&rdquo;]</p>
<pre class="lang:css">.clip-text_fifteen {
    background-image: linear-gradient(to bottom, #000000 0%, #333333 100%);
}

style2.css:280
.clip-text {
    line-height: 1;
    margin: .5em .75em;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}</pre>
<h3><span class="ez-toc-section" id="deformation-des-balises"></span>D&eacute;formation des balises<span class="ez-toc-section-end"></span></h3>
<p>Pour appr&eacute;hender les diff&eacute;rents param&egrave;tres de la propri&eacute;t&eacute;s <code>transform</code>, nous avons utilis&eacute;s <code>skew</code> avec une valeur de 2 degr&eacute;s et nous avons nullifi&eacute; l&rsquo;effet pour les balises contenant du texte.</p>
<pre class="lang:css">.skew {
    transform: skew(0deg,2deg);
}
//et sa n&eacute;gation pour les enfant contenant du texte.
.anti_skew {
    transform: skew(0deg,-2deg);
}</pre>
<h3><span class="ez-toc-section" id="badges-et-pseudo-element"></span>Badges et pseudo-&eacute;l&eacute;ment<span class="ez-toc-section-end"></span></h3>
<p>Pour bien comprendre le fonctionnement des pseudo &eacute;l&eacute;ment nous avons ajout&eacute; &agrave; nos sections des badges r&eacute;alis&eacute; avec <code>::after</code> et <code>::before</code>.</p>
<pre class="lang:css">.badge:before {
    transform: rotate(60deg);
}
.badge:after {
    transform: rotate(-60deg);
}
.badge:before, .badge:after {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: inherit;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }
.html5 {
    background: linear-gradient(to bottom right, #f16529 0%, #e44d26 100%);
    color: #f16529;
}
.badge {
    position: relative;
    width: 4rem;
    height: 6.2rem;
    border-radius: 10px;
    display: inline-block;
    bottom: 7em;
    left: 2em;
    transition: all 0.2s ease;
    text-align: center;
}</pre>
<h3><span class="ez-toc-section" id="la-fin-du-debut"></span>La fin du d&eacute;but<span class="ez-toc-section-end"></span></h3>
<p>Apr&egrave;s une semaine de formation l&rsquo;objectif est largement atteint, nous avons r&eacute;alis&eacute; une page en utilisant des ressources externes et en construisant &eacute;l&eacute;ments pas &eacute;l&eacute;ments notre page.</p>
<p>nous avons commenc&eacute; depuis lundi &agrave; &eacute;tudier le PHP en r&eacute;alisant un calendrier en utilisant les boucles les conditions et les variables.</p>
<p>Comme pour la premi&egrave;res semaines nous r&eacute;aliserons des page pour pr&eacute;senter l&rsquo;avanc&eacute; de la formation, restez connect&eacute; et n&rsquo;h&eacute;sitez pas &agrave; soutenir notre stagiaire.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class='rp4wp-related-posts'>
<h3>Articles Liés</h3>
<ul>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/formulaire-html/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Contact portable" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-150x150.jpg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-300x300.jpg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-1160x1160.jpg 1160w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/formulaire-html/'>Formulaire HTML</a><p>Imaginez vous un site commercial sans formulaire de contact ?…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/css-enflammez-vos-titres/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="CSS code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-300x300.jpeg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-1160x1160.jpeg 1160w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/css-enflammez-vos-titres/'>CSS enflammez vos titres</a><p>Le CSS permet quantités d'effet pour rendre votre pages attractives.…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/formation/formation-webmaster-janvier-2018/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/07/090118-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/07/090118-150x150.jpg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/07/090118-300x300.jpg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/07/090118-768x768.jpg 768w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/07/090118-720x720.jpg 720w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/07/090118.jpg 800w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/formation/formation-webmaster-janvier-2018/'>Formation webmaster janvier 2018</a><p>A partir du 9 janvier 2018 j'aurai le plaisir d'animer…</p></div>
</li>
</ul>
</div>


Formation Webmaster fin de la première semaine.

post-template-default single single-post postid-8316 single-format-standard system-font group-blog side-nav elementor-default elementor-kit- elementor-page elementor-page-8316


<p class="intro-text separator">Imaginez vous un site commercial sans formulaire de contact ? Nous allons voir comme construire un formulaire de contact en HTML.</p>
<h2><span class="ez-toc-section" id="les-balises-et-leurs-attributs"></span>Les balises et leurs attributs<span class="ez-toc-section-end"></span></h2>
<p>Pour construire notre formulaire nous utiliserons les balises form et input.</p>
<h3><span class="ez-toc-section" id="la-balise-form"></span>La balise FORM<span class="ez-toc-section-end"></span></h3>
<p>Un formulaire se construit imp&eacute;rativement avec la balise <code><strong>&lt;form&gt;</strong></code>. A l&rsquo;int&eacute;rieur de cette balise nous ajouterons les champs qui permettrons d&rsquo;y saisir des informations.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form&gt;
//d&eacute;clare un espace de formulaire
&lt;/form&gt;</code></pre>
<h3><span class="ez-toc-section" id="la-balise-input"></span>La balise INPUT<span class="ez-toc-section-end"></span></h3>
<p><code><strong>&lt;input&gt;</strong></code> d&eacute;clare un champ ce champ peut contenir diff&eacute;rentes type d&rsquo;informations. Pour diff&eacute;rencier les informations il est n&eacute;cessaire d&rsquo;utiliser les attributs afin de rendre le formulaire efficace.</p>
<h4><span class="ez-toc-section" id="les-attributs-dinput"></span>Les attributs d&rsquo;INPUT<span class="ez-toc-section-end"></span></h4>
<p>La balise <code><strong>INPUT</strong> </code>ne suffit donc pas &agrave; cr&eacute;er un formulaire, l&rsquo;attribut permet de d&eacute;finir le types d&rsquo;informations qui doit &ecirc;tre r&eacute;cup&eacute;r&eacute;, tout en proposant diff&eacute;rents mode de saisie.</p>
<p>Dans un premier temps nous allons aborder les attributs fondamentaux avant d&rsquo;observer des attributs plus sp&eacute;cialis&eacute;s.</p>
<h4><span class="ez-toc-section" id="text-input"></span>Text Input<span class="ez-toc-section-end"></span></h4>
<p><code>&lt;input type="<strong>text</strong>"&gt;</code> d&eacute;fini un champ de texte en une ligne. Il est diff&eacute;rent de &ldquo;<code><strong>textarea</strong></code>&rdquo; qui permet de saisir du texte et d&rsquo;utiliser plusieurs lignes.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  Pseudo :&lt;br&gt;
  &lt;input type="text" name="nom"&gt;&lt;br&gt;
  Pr&eacute;sentation :&lt;br&gt;
  &lt;input type="text" name="bio"&gt;
&lt;/form&gt;</code></pre>
<form>Pseudo :<br><input name="nom" type="text"><br>
Pr&eacute;sentation :<br><input name="bio" type="text"></form>
<p>&nbsp;</p>
<h4><span class="ez-toc-section" id="radio-button-input"></span>Radio Button Input<span class="ez-toc-section-end"></span></h4>
<p><code>&lt;input type="radio"&gt;</code> Permet de mettre en place s&eacute;lection unique parmi plusieurs choix.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;input type="radio" name="test" value="1" checked&gt; 1&lt;br&gt;
  &lt;input type="radio" name="test" value="2"&gt; 2&lt;br&gt;
  &lt;input type="radio" name="test" value="3"&gt; ou 3
&lt;/form&gt;</code></pre>
<form><input checked name="test" type="radio" value="1"> 1<br><input name="test" type="radio" value="2"> 2<br><input name="test" type="radio" value="3"> ou 3</form>
<h4><span class="ez-toc-section" id="input-submit"></span>Input Submit<span class="ez-toc-section-end"></span></h4>
<p>C&rsquo;est bien jolie d&rsquo;avoir un formulaire mais encore faut-il pouvoir l&rsquo;envoyer. Nous nous concentrons ici sur l&rsquo;envoi des donn&eacute;es par le formulaire, le traitement des donn&eacute;es se fera avec le PHP.</p>
<p><code>&lt;input type="<strong>submit</strong>" value="Submit"&gt;</code> doit etre utiliser avec&nbsp;<code>&lt;form action="/action_page.php"&gt;</code>, il faut d&eacute;finir la page qui va devoir traiter les donn&eacute;es du formulaires avant de les envoyer.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form action="/action_page.php"&gt;
 Pseudo :&lt;br&gt; 
 &lt;input type="text" name="nom"&gt;&lt;br&gt;
 Pr&eacute;sentation :&lt;br&gt; 
 &lt;input type="text" name="bio"&gt; 
 &lt;input type="radio" name="test" value="1" checked&gt; 1&lt;br&gt;
 &lt;input type="radio" name="test" value="2"&gt; 2&lt;br&gt;
 &lt;input type="radio" name="test" value="3"&gt; ou 3&lt;br&gt;
 &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;</code></pre>
<form action="/#">Pseudo :<br><input name="nom" type="text"><br>
Pr&eacute;sentation :<br><input name="bio" type="text"><br><input checked name="test" type="radio" value="1"> 1<br><input name="test" type="radio" value="2"> 2<br><input name="test" type="radio" value="3"> ou 3<br><input type="submit" value="Submit ou pas"></form>
<p>L&rsquo;exemple n&rsquo;est pas fonctionnel mais en temps normal le formulaire renvoi les informations dans l&rsquo;url d&rsquo;appel d&eacute;fini par l&rsquo;attribut action.</p>
<pre class="line-numbers"><code class="language-markup">/action_page.php?nom=Mickey&amp;bio=description&amp;test=3</code></pre>
<p>Pour la suite c&rsquo;est au PHP de prendre la rel&eacute;ve ce que nous verrons dans un autre article.</p>
<p>&nbsp;</p>
<h4><span class="ez-toc-section" id="select"></span>SELECT<span class="ez-toc-section-end"></span></h4>
<p>Permet de cr&eacute;er une liste d&eacute;roulante</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code"&gt;
  &lt;option value="html"&gt;Html&lt;/option&gt;
  &lt;option value="css"&gt;Css&lt;/option&gt;
  &lt;option value="php"&gt;Php&lt;/option&gt;
  &lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select name="code"><option value="html">Html</option><option value="css">Css</option><option value="php">Php</option><option value="sql">Sql</option></select></p>
<p>Par d&eacute;faut c&rsquo;est le premier &eacute;l&eacute;ment de la liste qui est s&eacute;lectionn&eacute;. Mais vous pouvez d&eacute;finir vous m&ecirc;me la valeur par d&eacute;faut.</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code"&gt;
  &lt;option value="html"&gt;Html&lt;/option&gt;
  &lt;option value="css" selected&gt;Css&lt;/option&gt;
  &lt;option value="php"&gt;Php&lt;/option&gt;
  &lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select name="code"><option value="html">Html</option><option selected value="css">Css</option><option value="php">Php</option><option value="sql">Sql</option></select></p>
<p>Ou encore le nombre d&rsquo;option &agrave; afficher dans la liste.</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code" size="2"&gt;
  &lt;option value="html"&gt;Html&lt;/option&gt;
  &lt;option value="css" selected&gt;Css&lt;/option&gt;
  &lt;option value="php"&gt;Php&lt;/option&gt;
  &lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select name="code" size="2"><option value="html">Html</option><option selected value="css">Css</option><option value="php">Php</option><option value="sql">Sql</option></select></p>
<p>On peut aussi choisir le nombre d&rsquo;option s&eacute;lectionnable</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code" size="4" multiple&gt;
&lt;option value="html"&gt;Html&lt;/option&gt;
&lt;option selected="selected" value="css"&gt;Css&lt;/option&gt;
&lt;option value="php"&gt;Php&lt;/option&gt;
&lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select multiple name="code" size="4"><option value="sql">Sql</option></select></p>
<p>Method</p>
<p>Maintenant que nous avons cr&eacute;er le formulaire, il est n&eacute;cessaire de d&eacute;finir la page qui traitera l&rsquo;action et la m&eacute;thode qui nous permettra de transmettre et de manipuler les donn&eacute;es transmissent.</p>
<p>Pour ce faire nous allons d&eacute;finir l&rsquo;attribut <code>method</code> &agrave; notre balise <code>form</code>.</p>
<div class='rp4wp-related-posts'>
<h3>Articles Liés</h3>
<ul>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/formulaire-php/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="PHP code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/formulaire-php/'>Formulaire PHP</a><p>Lors de la création de formulaires en HTML, on détermine…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/html/construire-page-html5/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="HTML code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/html/construire-page-html5/'>Construire une page en HTML5</a><p>Pour créer une page HTML5 il ne suffit pas de…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/html/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="HTML code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/html/'>HTML</a><p>Le HTML est le code qui structure une page internet.…</p></div>
</li>
</ul>
</div>


Formulaire HTML

post-template-default single single-post postid-8159 single-format-standard system-font group-blog side-nav elementor-default elementor-kit- elementor-page elementor-page-8159


<p class="intro-text separator">Pour cr&eacute;er une page HTML5 il ne suffit pas de connaitre les diff&eacute;rentes balises disponibles encore faut-il les utiliser correctement.</p>
<h2><span class="ez-toc-section" id="creation-dune-page-en-html5"></span>Cr&eacute;ation d&rsquo;une page en HTML5<span class="ez-toc-section-end"></span></h2>
<p>Prenons comme base d&eacute;part une page propos&eacute; par le consortium W3C, comme mod&egrave;les structurel et s&eacute;mantique.</p>
<pre class="line-numbers"><code class="language-markup">&lt;!DOCTYPE HTML&gt;
&lt;html lang="fr"&gt;
&lt;head&gt;
&lt;meta charset=utf-8&gt;
&lt;title&gt;Exemple de page HTML5 structur&eacute;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;header&gt;
&lt;h1&gt;Exemple de page HTML5 structur&eacute;&lt;/h1&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;accueil&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&agrave; propos&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;/header&gt;
&lt;section&gt;
&lt;h1&gt;section principale&lt;/h1&gt;
&lt;h2&gt;Sous titre h2&lt;/h2&gt;
&lt;article&gt;
&lt;p&gt;contenu d'un paragraphe&lt;/p&gt;
&lt;/article&gt;
&lt;article&gt;
&lt;p&gt;encore un paragraphe&lt;/p&gt;
&lt;/article&gt;
&lt;/section&gt;
&lt;footer&gt;
&lt;p&gt;et le pied de page (footer)&lt;/p&gt;
&lt;/footer&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<p class="perf_alert perf_danger">Attention : si cette page est effectivement un mod&egrave;les en HTML, elle n&rsquo;est pas un bon exemple SEO car il est pr&eacute;f&eacute;rable d&rsquo;avoir une seule balise h1 dans une page.</p>
<h3><span class="ez-toc-section" id="description-des-balises"></span>Description des balises<span class="ez-toc-section-end"></span></h3>
<p>Voyons en d&eacute;tails les balises sur la page est leurs fonctions.</p>
<h4><span class="ez-toc-section" id="doctype"></span><code>!Doctype</code><span class="ez-toc-section-end"></span></h4>
<p>Le <code>doctype</code> est une nouveaut&eacute; introduite par le HTML5, ce doit &ecirc;tre imp&eacute;rativement la premi&egrave;re informations du document. Ce n&rsquo;est pas une balise au sens strict du terme, mais une instruction destin&eacute; au navigateur pour l&rsquo;informer du type du document.</p>
<p>Le <code>doctype</code> n&rsquo;est pas sensible &agrave; la case.</p>
<h4><span class="ez-toc-section" id="i"></span><code>&lt;html&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>La balise html est une des balises absolument indispensable ! Elle contient les informations de la page et elle doit &ecirc;tre la premi&egrave;re balise du document, celle qui contiendra toutes les autres.</p>
<pre class="line-numbers"><code class="language-markup">&lt;html lang="fr"&gt;</code></pre>
<p>Ici on remarque que notre balise <code>html</code> a un attribut <code>lang</code> de valeur <code>fr</code>. Cela permet de d&eacute;finir la langue utilis&eacute; dans la page.</p>
<h4><span class="ez-toc-section" id="i-2"></span><code>&lt;head&gt;</code><span class="ez-toc-section-end"></span></h4>
<pre class="line-numbers"><code class="language-markup">&lt;head&gt;
&lt;meta charset=utf-8&gt;
&lt;title&gt;Exemple de page HTML5 structur&eacute;&lt;/title&gt;
&lt;/head&gt;</code></pre>
<p>La balise <code>head</code> contient les informations qui ne seront pas directement affich&eacute; par le navigateur. Elle peut contenir les balises suivantes :</p>
<ul><li><code>&lt;title&gt;</code> Obligatoire en HTML5 contient le titre de la page.</li>
<li><code>&lt;style&gt;</code> Les r&eacute;gles de style de la page <a href="https://www.occitaweb.fr/css/" target="_blank" rel="noopener">c.f : CSS</a>.</li>
<li><code>&lt;base&gt;</code> D&eacute;fini l&rsquo;url de base pour les liens de la page.</li>
<li><code>&lt;link&gt;</code> Cible une des ressources de la page, comme les fichiers <a href="https://www.occitaweb.fr/css/" target="_blank" rel="noopener">CSS</a> ou <a href="https://www.occitaweb.fr/javascript/" target="_blank" rel="noopener">Js</a>.</li>
<li><code>&lt;meta&gt;</code> Les informations de la page (comme la description, les mots cl&eacute; l&rsquo;auteur etc.).</li>
<li><code>&lt;script&gt;</code> Contient du code JavaScript.</li>
<li><code>&lt;noscript&gt;</code> Affiche le contenu de la balise en cas incompatibilit&eacute; du navigateur.</li>
</ul><h4><span class="ez-toc-section" id="i-3"></span><code>&lt;meta&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>La balise <code>meta</code> est assez complexe &agrave; appr&eacute;hender mais les m&eacute;tadonn&eacute;es sont les informations qui caract&eacute;risent la page, la syntaxe est simple mais il faut connaitre les diff&eacute;rents usages de la balise.</p>
<pre class="line-numbers"><code class="language-markup">&lt;meta name="nom de la meta-donn&eacute;e" content="valeur(s)"&gt;</code></pre>
<h5>3 m&eacute;ta donn&eacute;es indispensables</h5>
<p>Il existe quantit&eacute; de m&eacute;ta donn&eacute;es l&rsquo;objectif n&rsquo;est pas les connaitres toutes, la syntaxe &eacute;tant simpliste il suffit de comprendre le fonctionnement pour impl&eacute;menter celle dont vous aurez besoin.</p>
<h6><code>description</code></h6>
<p>La balise m&eacute;ta description permet de d&eacute;crire le contenu de la page, c&rsquo;est ce qui sera utilis&eacute; par les moteurs de recherche pour afficher un extrait de la page (pas syst&eacute;matiquement mais nous y reviendrons avec le SEO)</p>
<pre class="line-numbers"><code class="language-markup">&lt;meta name="description" content="construction d'une page en HTML5"&gt;</code></pre>
<p>La description doit &ecirc;tre etre 50 et 300 caract&eacute;res (la longueur maximum &agrave; augment&eacute; en <a title="page en Anglais" href="https://moz.com/blog/googles-longer-snippets">d&eacute;cembre 2017</a>).</p>
<h6><code>author</code></h6>
<p>Avec la balise author on d&eacute;fini l&rsquo;auteur de la page ^^.</p>
<pre class="line-numbers"><code class="language-markup">&lt;meta name="author" content="Occitaweb"&gt;</code></pre>
<h6><code>viewport</code></h6>
<p>Le <code>viewport</code> est une balise qui d&eacute;fini le niveau de zoom de la page, cela permet aux appareils mobile d&rsquo;adapter le contenu au format de l&rsquo;&eacute;cran.</p>
<pre class="line-numbers"><code class="language-markup">&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code></pre>
<p>Si cette m&eacute;thode ne suffit pas &agrave; rendre un site responsive cela permet de grandement am&eacute;liorer l&rsquo;exp&eacute;rience utilisateur sur mobile.</p>
<h4><span class="ez-toc-section" id="i-4"></span><code>&lt;body&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>La balise body est la seconde balise absolument indispensable, elle contiendra les informations qui seront affich&eacute; par le navigateur.</p>
<h4><span class="ez-toc-section" id="i-5"></span><code>&lt;div&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>Les div sont des balises block g&eacute;n&eacute;riques. Une balise block s&rsquo;affichera de fa&ccedil;on &agrave; occuper tout l&rsquo;espace disponible sur sa ligne.</p>
<h4><span class="ez-toc-section" id="i-6"></span><code>&lt;span&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>Les span sont des balises inline g&eacute;n&eacute;riques. Les balises inline occupe l&rsquo;espace n&eacute;cessaire &agrave; l&rsquo;affichage de son contenu et s&rsquo;affiche les uns &agrave; la suite des autres.</p>
<h4><span class="ez-toc-section" id="i-7"></span><code>&lt;header&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>L&rsquo;header c&rsquo;est l&rsquo;ent&ecirc;te de la page, par convention l&rsquo;header est g&eacute;n&eacute;ralement semblable sur toutes les pages du votre site, il permet de naviguer sur le site avec un menu <code>&lt;nav&gt;</code>. Elle contient g&eacute;n&eacute;ralement le <code>H1</code> de votre page.</p>
<pre class="line-numbers"><code class="language-markup">&lt;header&gt;
&lt;h1&gt;Exemple de page HTML5 structur&eacute;&lt;/h1&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;accueil&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&agrave; propos&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;/header&gt;</code></pre>
<p class="perf_alert perf_alert_default">La balise peut &ecirc;tre r&eacute;p&eacute;t&eacute;e mais elle ne doit pas &ecirc;tre utiliser dans la balise &lt;footer&gt;.</p>
<h4><span class="ez-toc-section" id="i-8"></span><code>&lt;h1&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>La balise H1 est la balise de titre de la page, elle doit &ecirc;tre utilis&eacute; une seulement fois par page pour respecter les recommandations SEO.</p>
<h4><span class="ez-toc-section" id="i-9"></span><code>&lt;nav&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>Contient une liste d&rsquo;&eacute;l&eacute;ments permettant la navigation sur le site.</p>
<pre class="line-numbers"><code class="language-markup">&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;accueil&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;&agrave; propos&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;</code></pre>
<h4><span class="ez-toc-section" id="i-10"></span><code>&lt;ul&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>La balise <code>ul</code> d&eacute;clare une liste, elle contient chaque &eacute;l&eacute;ment de la liste dans des balises <code>li</code>.</p>
<h4><span class="ez-toc-section" id="i-11"></span><code>&lt;li&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>&Eacute;l&eacute;ment de liste</p>
<pre class="line-numbers"><code class="language-markup">&lt;li&gt;&lt;a href="#"&gt;accueil&lt;/a&gt;&lt;/li&gt;</code></pre>
<h4><span class="ez-toc-section" id="i-12"></span><code>&lt;a&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>La balise <code>a</code> permet de cr&eacute;er des liens hyper-texte pour naviguer entre pages du site.</p>
<p>Il est n&eacute;cessaire d&rsquo;utiliser des attribut pour rendre le liens fonctionnels.</p>
<pre class="line-numbers"><code class="language-markup">&lt;a href="https://www.occitaweb.fr"&gt;Occitaweb&lt;/a&gt;</code></pre>
<p>L&rsquo;attribut <code>href</code> d&eacute;fini l&rsquo;url qui sera appel&eacute; par le navigateur lors du clic.</p>
<h4><span class="ez-toc-section" id="i-13"></span><code>&lt;section&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>Les sections d&eacute;finissent des zones dans la page, par exemple la balises <code>header</code> est une section, on utilise des sections pour afficher des &eacute;l&eacute;ments par th&egrave;mes. Dans notre exemple la section contient des articles.</p>
<h4><span class="ez-toc-section" id="i-14"></span><code>&lt;article&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>Les articles sont des contenu ind&eacute;pendant se suffisant &agrave; eux-m&ecirc;me. A la diff&eacute;rences des sections ils sont ce qu&rsquo;on appellent du contenu profond. Le terme de profondeur est li&eacute; &agrave; la structure d&rsquo;une site internet, en navigant on explore de plus en plus profond&eacute;ment. les articles contenant des informations ce doit &ecirc;tre le dernier niveau d&rsquo;exploration.</p>
<h4><span class="ez-toc-section" id="i-15"></span><code>&lt;p&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>La balise p sert &agrave; afficher des paragraphes.</p>
<h4><span class="ez-toc-section" id="i-16"></span><code>&lt;footer&gt;</code><span class="ez-toc-section-end"></span></h4>
<p>Le <code>footer</code> c&rsquo;est le pied de page de votre page, comme avec le <code>header</code> il est par convention similaire sur tout le site.</p>
<p>&nbsp;</p>
<div class='rp4wp-related-posts'>
<h3>Articles Liés</h3>
<ul>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/css/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="CSS code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-300x300.jpeg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/CSS_code-1160x1160.jpeg 1160w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/css/'>CSS</a><p>Le CSS (Cascading Style Sheets ou Feuilles de style en cascade…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/html/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="HTML code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/html/'>HTML</a><p>Le HTML est le code qui structure une page internet.…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/formulaire-html/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Contact portable" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-150x150.jpg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-300x300.jpg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-1160x1160.jpg 1160w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/formulaire-html/'>Formulaire HTML</a><p>Imaginez vous un site commercial sans formulaire de contact ?…</p></div>
</li>
</ul>
</div>


Construire une page en HTML5

post-template-default single single-post postid-8033 single-format-standard system-font group-blog side-nav elementor-default elementor-kit- elementor-page elementor-page-8033

HTML

<p class="intro-text separator">Le HTML est le code qui structure une page internet. Ce n’est pas un langage de programmation, mais un langage de balisage. Ce qui signifie que le langage HTML a pour objet l’affichage des informations et non leur traitement.</p>

Développeur

Réduisez les temps de chargement de vos pages, pour améliorer l&#8217;expérience utilisateur.