Entrainement au codage
 
AccueilCalendrierFAQRechercherS'enregistrerConnexion

Partagez | 
 

 Codage II - la mise en page

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Danou
Admin
avatar

Messages : 783
Poutous : 957
Date d'inscription : 24/05/2016

MessageSujet: Codage II - la mise en page   Mer 2 Aoû - 12:16

Mise en page codage html type:

Code:
<!DOCTYPE html>
<html>
<head>
  <title>The Brown Bear</title>
</head>
<body>
  <h1>The Brown Bear</h1>
  <!-- A section that describes the brown bear -->
  <p>The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
  <a href="https://en.wikipedia.org/wiki/Brown_bear">Learn More</a>
  <p>Here are some bear species:</p>
  <ul>
    <li>Arctos</li>
    <li>Collarus</li>
    <li>Horribilis</li>
    <li>Nelsoni (extinct)</li>
  </ul>
  <p>The following countries have the largest populations of brown bears:</p>
  <ol>
    <li>Russia</li>
    <li>United States</li>
    <li>Canada</li>
  </ol>
  <a href="#" target="_blank">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" /></a>
</body>
</html>

Les codes nouveaux que l'on y trouve:

Code:
<h1>
--> permet de mettre en gros gras (en fait h1 utilise le plus gros et gras en service, si on veut réduire on met un plus grand chiffre genre h2 > h3> h4 etc )


Code:
<p>
--> permet d'inscrire le texte en paragraphe propre

Paragraphs are great for expanding the amount of content (text) on your web page. As you begin to add more text to your web page, however, keep in mind that large amounts of text in paragraph format can overwhelm web page visitors. For example, if multiple paragraphs on your web page each contain large amounts of text, your web page could become difficult to consume.

Code:
<ul>

--> est indispensable pour créer une liste, néanmoins, il ne se suffit pas à lui même, il faudra ensuite rajouter un li ou un ol+li si l'on veut des chiffres. Le ul permet de structurer la forme, le li de définir l'espace dans la forme

Code:
<ol>
--> comme le ul mais avec numéro. donc ça fait soit ul + li, soit ol +li

Code:
<li>
-- > mets en liste
Revenir en haut Aller en bas
Danou
Admin
avatar

Messages : 783
Poutous : 957
Date d'inscription : 24/05/2016

MessageSujet: Re: Codage II - la mise en page   Mer 2 Aoû - 12:29

Code:
<a>This Is A Link To Wikipedia</a>

Le "a" est déjà un lien vers l'extérieur, néanmoins afin de mettre une url il faut rajouter impérativement le "href" qui permet du coup de le faire.

Ce qui donne:

Code:
<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>

Pourquoi rajouter le code
Code:
target
dans un lien? tout simplement pour que le lien s'ouvre dans une nouvelle fenêtre et non pas dans la fenêtre en cours de lecture. Ce qui donne le codage suivant:
Code:
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>

Les images:

Le code pour mettre une image est img. Il n'est pas besoin de le fermer en soi puisque c'est un codage qui se ferme de lui-même. Le code src est équivalent au href = il permet de lire la source url.

Code:
<img src="https://www.example.com/picture.jpg" />

Code:
<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="#" alt="A red prickly pear fruit"/></a>
--> afin de lier l'image à un point extérieur.


Code:
<br />
--> Pour mettre de l'espace, ça structure. On met ça comme on veut dans un codage.

Revenir en haut Aller en bas
Danou
Admin
avatar

Messages : 783
Poutous : 957
Date d'inscription : 24/05/2016

MessageSujet: Re: Codage II - la mise en page   Mer 2 Aoû - 12:49

Code:
<!-- This is a comment that the browser will not display. -->

TOUJOURS METTRE. C'est plus fluide et quand on veut retoucher c'est easy :sisi:
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Codage II - la mise en page   

Revenir en haut Aller en bas
 
Codage II - la mise en page
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» S. Demande de mise en page - Site du forum
» [Basil] Demande de mise en page
» message dans page d'acceuil - Mise en page
» [Nocturne] Mise en page
» Mise en Page d'acceuil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Tepouakap :: Codage forum :: Leçons-
Sauter vers: