Créer un cadre comme wikipédia

t3suu -  
Grandasse_ Messages postés 924 Date d'inscription   Statut Membre Dernière intervention   -

Bonjour,

Je débute en HTML et j'aimerai créer un cadre comme celui-ci :

J'ai déjà mis l'image sous un cadre mais j'aimerai y ajouter un titre ainsi que du texte. Voici ce que j'ai fais en CSS :

body {

    background: white;

}

p {

    color: black;

}

h1 {

    font-weight: bold;

}

img {float: right;

    height: 100px;

    border: 5px solid;

}

Ce qui donne : 

Pourriez vous m'aider  s'il vous plaît.

Windows / Chrome 110.0.0.0

1 réponse

Réponse 1 / 1
Grandasse_ Messages postés 924 Date d'inscription   Statut Membre Dernière intervention   597
 

Bonjour,

N'hésite pas à nous partager ton code html aussi, si la structure n'est pas bonne le CSS ne pourra rien corriger
0
t3suu
 

Bonjour,

Mon exercice consiste à refaire ce début de page (pas la partie de gauche juste la partie principale ainsi que le cadre à droite) : https://fr.wikipedia.org/wiki/Hypertext_Markup_Language


Voici mon code html : 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>Hypertext Markup Language</title>

</head>

<body>

    <header>

    <h1>Hypertext Markup Language</h1>

    <hr>

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/langfr-130px-HTML5_logo_and_wordmark.svg.png" alt="LOGO HTML5">

    </header>

    <main>

        <p>Le <strong>HyperText Markup Language</strong>, généralement abrégé <strong>HTML</strong> ou, dans sa dernière version, <a href="https://fr.wikipedia.org/wiki/HTML5">HTML5</a>, est <a href="https://fr.wikipedia.org/wiki/Langage_de_balisage">le langage de balisage</a> conçu pour représenter <a href="https://fr.wikipedia.org/wiki/Page_web">les pages web</a>.

            Ce langage permet d’écrire de l’<a href="https://fr.wikipedia.org/wiki/Hypertexte">hypertexte</a> (d’où son nom), de structurer <a href="https://fr.wikipedia.org/wiki/S%C3%A9mantique">sémantiquement</a> une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure des <a href="https://fr.wikipedia.org/wiki/Ressource_du_World_Wide_Web">ressources</a> <a href="https://fr.wikipedia.org/wiki/Multim%C3%A9dia">multimédias</a> dont des <a href="https://fr.wikipedia.org/wiki/Image_num%C3%A9rique">images</a>, des <a href="https://fr.wikipedia.org/wiki/Vid%C3%A9o">vidéos</a>, et des <a href="https://fr.wikipedia.org/wiki/Programme_informatique">programmes informatiques</a>. L'HTML offre également la possibilité de créer des documents <a href="https://fr.wikipedia.org/wiki/Interop%C3%A9rabilit%C3%A9_en_informatique">interopérables</a> avec des équipements très variés et conformément aux exigences de l’<a href="https://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web">accessibilité du web</a>.

            <br>

            <br>

            Il est souvent utilisé conjointement avec le <a href="https://fr.wikipedia.org/wiki/Langage_de_programmation">langage de programmation</a> <a href="https://fr.wikipedia.org/wiki/JavaScript">JavaScript</a> et <a href="https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade">des feuilles de style</a> en cascade (CSS). HTML est inspiré du <a href="https://fr.wikipedia.org/wiki/Standard_Generalized_Markup_Language">Standard Generalized Markup Language</a> (SGML). Il s'agit d'un <a href="https://fr.wikipedia.org/wiki/Format_ouvert">format ouvert</a>.</p>

            <h3>Dénominations</h3>

            <hr>

            <p>L’<a href="https://fr.wikipedia.org/wiki/Anglais">anglais</a> « Hypertext Markup Language » se traduit littéralement en « langage de balisage d’hypertexte »1. On utilise généralement le <a href="https://fr.wikipedia.org/wiki/Sigle">sigle</a> « HTML », parfois même en répétant le mot « langage » comme dans « langage HTML ». Hypertext est parfois écrit HyperText pour marquer le T du sigle HTML.

                Le public non averti parle parfois de HTM au lieu de HTML, HTM étant l’<a href="https://fr.wikipedia.org/wiki/Extension_de_nom_de_fichier">extension de nom de fichier</a> tronquée à trois lettres, une limitation que l’on trouve sur d’anciens <a href="https://fr.wikipedia.org/wiki/Syst%C3%A8me_d%27exploitation">systèmes d’exploitation</a> de <a href="https://fr.wikipedia.org/wiki/Microsoft">Microsoft</a>.</p>

            <br>

            <h3>Évolution du langage</h3>

            <hr>

            <p>Durant la première moitié des années 1990, avant l’apparition des <a href="https://fr.wikipedia.org/wiki/Technologies_Web">technologies Web</a> comme le langage <a href="https://fr.wikipedia.org/wiki/JavaScript">JavaScript</a> (JS), <a href="https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade">les feuilles de style en cascade</a> (CSS) et le <a href="https://fr.wikipedia.org/wiki/Document_Object_Model">Document Object Model</a> (DOM), l’évolution de HTML a dicté l’évolution du <a href="https://fr.wikipedia.org/wiki/World_Wide_Web">World Wide Web</a>. Depuis la création de l'HTML 4 en 1997, l’évolution de HTML a fortement ralenti ; dix ans plus tard, HTML 4 reste utilisé dans les <a href="https://fr.wikipedia.org/wiki/Page_web">pages web</a>. En <a href="https://fr.wikipedia.org/wiki/2008_en_informatique">2008</a>, la spécification du <a href="https://fr.wikipedia.org/wiki/HTML5">HTML5</a> est à l’étude2 et devient d'usage courant dans la seconde moitié des années 2010.</p>

            <br>

            <h3>1989-1992 : Origine</h3>

            <hr>

            <p>HTML est une des trois inventions à la base du World Wide Web, avec le Hypertext Transfer Protocol (HTTP) et les adresses web (URL). HTML a été inventé pour permettre d'écrire des documents hypertextuels liant les différentes ressources d’Internet avec des hyperliens. Aujourd’hui, ces documents sont appelés « page web ». En août 1991, lorsque Tim Berners-Lee annonce publiquement le web sur Usenet, il ne cite que le langage Standard Generalized Markup Language (SGML), mais donne l’URL d’un document de suffixe .html.

                Dans son livre Weaving the web3, Tim Berners-Lee décrit la décision de baser HTML sur SGML comme étant aussi « diplomatique » que technique : techniquement, il trouvait SGML trop complexe, mais il voulait attirer la communauté hypertexte qui considérait que SGML était le langage le plus prometteur pour standardiser le format des documents hypertexte. En outre, SGML était déjà utilisé par son employeur, l’Organisation européenne pour la recherche nucléaire (CERN). ;</p>

                <h4>Les premiers éléments du langage HTML comprennent :</h4>

            <nav>

                <ul>

                    <li>le titre du document,</li>

                    <li>les hyperliens,</li>

                    <li>la structuration du texte en titres, sous-titres, listes ou texte brut,</li>

                    <li>un mécanisme rudimentaire de recherche par index.</li>

                </ul>

            </nav>

            <p>La description de HTML est alors assez informelle et principalement définie par le support des divers navigateurs web contemporains. Dan Connolly a aidé à faire de HTML une véritable application de SGML4.</p>

            <h3>1993 : Apports de NCSA Mosaic</h3>

            <hr>

            <p>L’état de HTML correspond alors à ce que l’on pourrait appeler HTML 1.0. Il n’existe cependant aucune spécification portant ce nom, notamment parce que le langage était alors en pleine évolution. Un effort de normalisation était cependant en cours5. À partir de fin 1993, le terme HTML+ est utilisé pour désigner la version future de HTML6,7. Malgré l’effort de normalisation ainsi initié, et jusqu’à la fin des années 1990, HTML est principalement défini par les implémentations des navigateurs web.</p>

            <h4>Avec le navigateur NCSA Mosaic, HTML connaît deux inventions majeures :</h4>

            <nav>

                <ul>

                    <li>d’abord l’invention de l’élément IMG permet d’intégrer des images (dans un premier temps, uniquement aux formats GIF et XBM) aux pages web (Mosaic 0.10) ;</li>

                    <li>ensuite l’invention des formulaires (Mosaic 2.0pre5) rend le web interactif en permettant aux visiteurs de saisir des données dans les pages et de les envoyer au serveur web. Cette invention permet notamment de passer des commandes, et donc d’utiliser le web pour faire du commerce électronique.</li>

                </ul>

            </nav>

    </main>

</body>

</html>

0
Grandasse_ Messages postés 924 Date d'inscription   Statut Membre Dernière intervention   597 > t3suu
 

Tu ne peux pas faire cohabiter du contenu qui sont dans deux conteneurs différents : ici ton image est dans "header" et ton texte est dans "main".

Tu dois regrouper les contenu de ton encadré dans une même balise (au hasard "aside"), et travailler ton css là dessus.

(aussi j'ai du mal à capter l'intérêt d'un tel exercice puisque si la page à reproduire existe, alors son code est disponible)

0

Discussions similaires

Comment télécharger un torrent ?
Gotdann2003 -
ROSSi -

2 réponses