Comment créer une page HTML

Auteur: Florence Bailey
Date De Création: 20 Mars 2021
Date De Mise À Jour: 1 Juillet 2024
Anonim
1. HTML et CSS - Débutant 100%: créer sa 1ère Page Web !
Vidéo: 1. HTML et CSS - Débutant 100%: créer sa 1ère Page Web !

Contenu

HTML (Hypertext Markup Language) est le principal langage de programmation pour le développement de pages Web. Créé comme un langage de programmation simple et pratique. La plupart des pages sur Internet ont été développées en utilisant l'une des formes de ce langage (ColdFusion, XML, XSLT). Après avoir lu cet article, vous pouvez continuer votre formation en utilisant d'autres ressources sur Internet. Essayez de rechercher sur Internet d'autres articles liés à ce sujet.

Pas

Méthode 1 sur 1: Écrire une page HTML

  1. 1 Avant de commencer à vous familiariser avec l'une des étapes présentées ici, consultez la section « Ce dont vous aurez besoin ».
  2. 2 Ce que vous devez savoir avant de commencer à comprendre ce problème :
  3. 3 Les bases. Avez-vous déjà entendu parler de la balise ? La balise est entourée de crochets angulaires, avec le mot à l'intérieur. La balise de fin est écrite sous la même forme, mais avec l'ajout d'une barre oblique après le premier crochet angulaire. Un attribut est un mot facultatif dans une balise qui est utilisé pour ajouter des détails à une balise.
  4. 4 Le début du document. Dans l'éditeur de texte que vous utilisez, collez ce qui suit :
    html> tête> titre> wikiHow / titre> / tête> corps> Hello World / corps> / html> gros> / gros>
    La balise doit être fermée avec la même balise, mais avec une barre oblique après le premier chevron. Il existe des exceptions telles que les balises META ou alors DOCTYPE.
  5. 5 DOCTYPE
    • En règle générale, la plupart des pages Web sont définies DOCTYPE ». Cela permet de déterminer l'encodage ainsi que la façon dont il sera perçu par les navigateurs Web. La plupart des pages fonctionneront sans, "mais c'est nécessaire si vous voulez faire correspondre (Ils réglementent les types d'encodages sur Internet et comment ils sont utilisés)... Le DOCTYPE pour HTML 4.01 est présenté ci-dessous : ! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Ceci en est un des plus courants DOCTYPE utilisé sur des pages partout sur Internet.Tout d'abord, il indique le type de page décrivant le « html », puis il met en évidence le type d'encodage, et enfin, l'emplacement du DOCTYPE, qui, par conséquent, décrit la page pour le navigateur Web.
    • Il existe différents types de HTML (différentes versions développées au fil des années), utilisant par exemple de nouvelles balises, ou des balises spécifiques. Certaines balises sont obsolètes (d'autres balises plus utiles sont utilisées à la place).
    • b> et je> - c'est ce qui est actuellement imposé aux balises, car elles servent à transformer du texte, mais pas des spécifications, du coup, d'autres balises viennent les remplacer. Étiqueter fort> est un remplacement pour b>, et em>, un remplaçant pour je>.
    • Il est important que les balises précédentes soient remplacées par des balises qui sont plus que du formatage. Si le texte est traduit, non seulement la mise en forme, mais aussi sa signification reste la même. C'est sémantiquement correct.
    • Dans XHTML version 2.0, le b> et je> pas utilisé, tout comme dans la version HTML 3+.
  6. 6 HTML "Règle d'encapsulation".
    • Jetons un coup d'œil aux balises les plus importantes actuellement utilisées. Lors de la création de la page, une structure simple est utilisée. Si une balise a été ouverte, en conséquence, il devrait être fermé... Ceci s'applique à l'ensemble de la structure. Voici un exemple valide de la structure de mise en page XHTML :
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • tête>
    • meta http-equiv = "Content-Type" content = "texte / html; charset = utf-8" />
    • titre> Bonjour tout le monde ! / titre>
    • / tête>
    • corps>
    • h1> Bonjour tout le monde ! / h1>
    • / corps>
    • /html>
    • Exemple de code qui émet un message Bonjour le monde... C'est ce qu'on appelle un test Bonjour le monde.
  7. 7 Titre
    • Le titre de la page Web est le contenu entre la balise tête>... Ce contenu n'est pas consultable par l'utilisateur (uniquement le titre qui apparaît dans le titre de la page). Informations entre les balises tête>, peut inclure d'autres balises, telles que :

      • La balise META est utilisée pour les informations utiles aux moteurs de recherche et autres utilitaires.
      • Balise LINK qui crée un lien entre les documents, par exemple pour les Styles (CSS).
      • Balise SCRIPT, cela inclut presque n'importe quel codage Web, avec la possibilité d'accéder à distance (à partir d'un autre document).
      • La balise STYLE, qui est essentiellement un style qui peut être appliqué à une page.
      • La balise TITLE est le titre qui apparaît comme titre d'une page dans votre navigateur Web.
    • Voyons une démo de certains d'entre eux dans un exemple d'en-tête tiré de ce site Web (il a été raccourci) :
      • tête>
      • titre> ... / titre>
      • meta name = "description" content = "..." />
      • lien rel = "feuille de style" type = "texte / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "texte / css" media = "all"> ... / style>
      • type de script = "texte / javascript" src = "..."> / script>
      • / tête>

        Au cas où vous ne l'auriez pas remarqué, les balises individuelles ont été mises en évidence, les informations réelles étant supprimées. L'exemple est plutôt court, montrant presque toutes les balises qui peuvent être trouvées dans tête>sauf pour le commentaire HTML (Nous en parlerons dans des balises simples).
  8. 8 Des balises simples partout
    • Passons à autre chose et voyons d'autres balises. Soyez prudent avec votre étiquetage et n'oubliez pas la règle d'or, « Encapsulation ».

      • strong> Met l'accent sur le texte important.
      • small> Rend le texte plus petit. La taille de la police est mesurée en unités standard de 1 à 7, 3 est la taille de texte par défaut. ...
      • pre> Définit un bloc de texte riche. Comme il est correct, ce texte est tapé dans une police de même taille et avec tous les espaces entre les mots.
      • em> Affiche le texte sous forme de phrase.
      • del> Barre le texte.
      • ins> Définit le texte qui a été inséré dans le document.
      • h1> Une des nombreuses balises de titre. Les balises de ce type commencent par 'h', avec une différence de nombre. Assurez-vous de fermer l'étiquette avec le même numéro.
      • p> Définit un paragraphe.
      • ! --- ... ---> Contrairement aux autres balises, le commentaire doit être à l'intérieur de la balise elle-même. Cette information n'est visible que lorsque le code est visualisé.
      • blockquote> Affiche une citation, peut être utilisé avec la balise cite>.
      • Les quelques exemples ci-dessus ne constituent pas une liste complète des balises existantes. Pour en savoir plus sur les autres, visitez.
  9. 9 Créer une structure claire
    • Les pages sont conçues pour contenir des données dans de simples ensembles de balises afin que nous puissions analyser les informations en paragraphes. L'ordinateur reconnaît les données, il ne connaît pas le contexte ou la connexion conceptuelle. Nous devons créer des pages HTML conviviales. Ceci est réalisé en utilisant la balise div. Cela aide à créer un grand nombre de pages. Il peut être stylisé avec CSS et est plus facile que de créer de grandes tables de code pour la mise en page.
      • div> Cette balise est spéciale car elle peut être stylisée et utiliser des blocs d'informations séparés que l'utilisateur et l'ordinateur peuvent comprendre.
    • Jetons un coup d'œil à une mise en page HTML simple qui utilise une balise div.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • tête>
      • meta http-equiv = "Content-Type" content = "texte / html; charset = utf-8" />
      • titre> Bonjour tout le monde ! / titre>
      • / tête>
      • corps>
      • h1> Bonjour tout le monde ! / h1>
      • div id = "contentOne">
      • p> Ceci est du texte dans div # contentOne. / p>
      • div>
      • p> Un paragraphe dans une sous-section de div # contentOne / p>
      • / div>
      • / div>
      • / corps>
      • /html>
    • L'utilisation des balises div> aide à trouver et à modifier des styles tout en travaillant avec CSS et Javascript. HTML utilisera un codage différent pour fonctionner avec les styles CSS et Javascript afin de créer une expérience utilisateur meilleure et plus réactive.

Conseils

  • Après avoir lu cet article, ne vous arrêtez pas et pensez que vous avez appris tout ce que vous devez savoir. Il y a toujours quelque chose à apprendre, surtout dans cette technologie.
  • Apprendre, comprendre et écrire du code.
  • Notez que certaines balises n'utilisent que>. Para et br en sont quelques exemples. Les autres balises ouvertes avec> doivent être fermées davantage. Par exemple, "div> / div>".
  • Les gens s'attendent à de nouvelles découvertes, alors réinventez, concevez ou codez.
  • Une fois que vous avez beaucoup appris, essayez d'apprendre la programmation serveur.
  • Apprenez à travailler avec CSS ainsi que Javascript.

Avertissements

  • N'oubliez pas que le HTML consiste à éditer du contenu. Cela signifie que HTML n'est utilisé que pour stocker du contenu dans un format reconnu. D'autres modifications doivent être effectuées en utilisant d'autres technologies, telles que CSS. Cela signifie également faire « Sémantiquement correctmême si les autres ne l'admettent pas. D'autres langages de programmation aident à créer des pages Web (CSS, Javascript et XML). HTML est un constructeur de contenu.

De quoi avez-vous besoin

  • Un éditeur de texte qui prend en charge l'encodage ANSI
  • Un navigateur Web tel qu'Internet Explorer ou Mozilla Firefox
  • (Facultatif) Éditeur HTML wysiwyg ou wykiwyg tel qu'Adobe Dreamweaver, Aptana Studio ou Microsoft Expression Web