ressources

HTML de 0 à 1 : Apprendre à comprendre les bases de la page Web, puis utiliser l'agent pour créer une page d'accueil personnelle

Tout le monde peut utiliser un agent pour créer sa propre page Web : de la structure de la page Web à la construction de sites d'IA Aujourd 'hui, tout le monde peut utiliser un agent pour créer sa propre page Web.

Le 3 août, 202693 lire.13 minutes à lire
Catalogue des articles

Tout le monde peut utiliser l'agent pour créer sa propre page Web : de la structure de la page Web à la construction de sites d'IA.

Maintenant, tout le monde peut créer sa propre page Web avec un agent.

Ouvrez un outil de programmation d'IA (par exemple, Codex, Cursor, Claude Code) et dites-lui : « Aidez-moi à créer une page d'accueil personnelle. »Il peut créer des fichiers, écrire du code, ajuster le style et lancer un aperçu du navigateur. Terminer la première version de la page web, est devenu très simple.

Ce qui a vraiment ouvert l'écart, c'est le deuxième cycle de révision.

Une personne qui connaît la structure d'une page Web dira à l'agent :

"Vérifier le chemin relatif du dossier images."

"Changer le côté du téléphone portable à une disposition de colonne unique."

« Ajustez uniquement les CSS, ne modifiez pas le contenu HTML. »

Ces instructions sont claires et précises, et l'agent peut rapidement localiser le problème et apporter des modifications.

Et les gens qui ne comprennent pas la structure, ne peuvent généralement que dire :

« Pourquoi les photos ont-elles disparu ? »

Un peu plus haut. »

« Pourquoi est-ce différent ? »

L'agent ne peut que deviner, la portée de la modification devient de plus en plus grande et la page devient de plus en plus difficile à contrôler.

Par conséquent, les connaissances Web apparemment traditionnelles telles que HTML, CSS, JavaScript, répertoire racine, chemin relatif et conception réactive sont devenues les compétences de base de l'utilisation d'agents à l'ère de l'IA.

Vous n'avez pas besoin d'écrire à la main des centaines de lignes de code, mais vous devez utiliser ces concepts pour décrire le problème, limiter la portée des modifications et juger si le résultat final est correct.

Cet article se compose de deux parties :

La première partie, comprendre le projet de page Web à partir de zéro et compléter une page Web simple à la main.

La deuxième partie, entrer dans la bataille réelle de l'agent, avec une page d'accueil personnelle de style punk jaune, l'expérience complète de "recherche de référence → analyse de conception → génération de pages Web → modification continue → acceptation du navigateur".

I. Comprendre les pages Web, les sites Web et les applications Web

Les trois concepts sont souvent confondus.

On peut comprendre simplement que :

  • Page Web : une page ;
  • Site : un livre ;
  • Application Web : une machine.

Ce que vous créez est une page Web.

À l'avenir, joignez de nombreuses pages telles que la présentation des œuvres, le blog, les informations de contact, etc., et il se développera progressivement en un site Web.

Deuxièmement, le projet Web est en fait un ensemble de structure de fichiers.

Un projet Web n'est pas un fichier HTML.

Généralement, il contient :

  • Structure de page ;
  • fichier de style ;
  • Scripts interactifs ;
  • ressources photographiques ;
  • Description du projet.

Il peut être compris comme une maison :

Le répertoire racine du projet est la maison elle-même, avec HTML, CSS, JavaScript et images placés dans différentes pièces.

Une structure commune :

my-first-site/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── avatar.jpg
└── README.md

Parmi eux :

  • index.html est la page d'entrée ;
  • css Le style de stockage ;
  • js Interactions de stockage ;
  • images stockage d'images ;
  • README.md Documentation de la description du projet.

Pour les débutants, il n'est pas nécessaire de se précipiter pour écrire du code.

Créer d'abord :

  • un dossier de projet ;
  • css, js, images trois sous-dossiers ;
  • Un index.html ;
  • Le README.md.

Après avoir apparié la structure, l'agent sait où placer le fichier.

Quelles sont les responsabilités de HTML, CSS et JavaScript ?

Un bouton dans une page Web nécessite généralement trois fichiers :

HTML :

Décider de ce qu 'il y a sur la page.

Css :

Déterminez à quoi ressemble la page.

JavaScript : :

Décidez ce qui se passe après le clic.

Peut être enregistré comme :

HTML est le squelette, CSS est l'apparence et JavaScript est le comportement.

Par exemple :

Si vous voulez modifier le texte, recherchez HTML.

Si vous voulez modifier les couleurs, recherchez le CSS.

Le bouton ne réagit pas → Vérifier JavaScript.

Une fois que les fichiers sont séparés, les pages Web sont plus faciles à maintenir et l'agent est plus facile à localiser les problèmes.

Pourquoi index.html est important ?

Dans un projet Web simple,index.html C'est généralement la page d'accueil et c'est aussi le fichier d'entrée.

Lorsque l'utilisateur ouvre un site Web, le serveur donne généralement la priorité à rechercher :

index.html

Par conséquent :

  • Il devrait être placé dans le répertoire racine du projet ;
  • Ne changez pas de nom à volonté ;
  • Les noms de fichiers sont en majuscules anglaises.

Une page HTML se compose principalement de deux parties :

head
└── 网页设置

body
└── 用户看到的内容

La tête contient généralement :

  • Titre de la page ;
  • Code de caractères ;
  • Adaptation du téléphone mobile ;
  • Adresses CSS et JavaScript.

Le corps contient :

  • Titre ;
  • texte ;
  • les images ;
  • bouton ;
  • Page contenu.

Structures communes :

body
├── header
├── main
│   ├── section
│   ├── section
│   └── section
└── footer

Ces balises aident les navigateurs et les moteurs de recherche à comprendre la structure de la page.

Créer une page Web minimale à la main

Maintenant, créez la première page que vous pouvez vraiment ouvrir.

Tout d'abord, placez votre avatar dans :

images/avatar.jpg

Puis éditer index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>

<body>

<h1>你好，这是我的第一个网页。</h1>

<p>我正在学习网页是怎样组成的。</p>

<img src="images/avatar.jpg">

<button id="hello-button">
和我打个招呼
</button>

</body>
</html>

Après avoir sauvegardé, ouvrez-le avec votre navigateur.

Si vous le voyez :

  • Titre ;
  • texte ;
  • les images ;
  • bouton ;

Le HTML s'est exécuté avec succès.

Si l'image ne s'ouvre pas, vérifiez généralement :

  • nom du fichier ;
  • Majeure et minuscule ;
  • Extension ;
  • chemin.

Par exemple :

images/avatar.jpg

Il doit être identique à la documentation réelle.

CSS donne à la page Web un sens du design

HTML est responsable du contenu et CSS est responsable de la visualisation.

à :

css/style.css

Ajouter :

body {
  margin:0;
  padding:48px;
  background:#f5f5f5;
  font-family:Arial,sans-serif;
}

img {
  width:240px;
  border-radius:24px;
}

button {
  padding:12px 20px;
  border-radius:999px;
}

Après avoir sauvegardé le refresh :

  • Changement de contexte ;
  • Réduire l'image ;
  • Le bouton est arrondi.

Le CSS peut être facilement compris :

Trouver qui → Quoi modifier → Quoi changer.

JavaScript rend les pages web interactives

Connexion :

<script src="js/script.js"></script>

Et puis dans :

js/script.js

Ajouter :

document
.querySelector("#hello-button")
.addEventListener("click",()=>{
 alert("你好呀！");
});

Actualiser la page, cliquez sur le bouton.

Si une fenêtre pop-up apparaît, cela signifie que HTML, CSS et JavaScript ont été connectés avec succès.

Le chemin du fichier est l'endroit le plus facile pour les débutants de se tromper.

Les pages web doivent savoir où se trouvent les images, CSS, JavaScript.

C'est le chemin.

Par exemple :

css/style.css

js/script.js

images/avatar.jpg

Ce sont tous des chemins relatifs.

Gardez à l'esprit trois règles :

Le même catalogue :

file.jpg

Suivant :

folder/file.jpg

Couche supérieure :

../file.jpg

Simultanément :

  • Le nom du fichier ne peut pas être faux ;
  • Les majuscules et les minuscules ne peuvent pas se tromper ;
  • L'extension ne peut pas se tromper.

Beaucoup de « images disparaissent » et « styles ne sont pas chargés » sont essentiellement des problèmes de chemin.

Développer le processus correct de modification de la page Web

Les habitudes les plus importantes pour le développement web :

修改
 ↓
保存
 ↓
刷新
 ↓
验证

Changez un endroit à la fois.

Ne pas modifier en même temps :

  • HTML ;
  • CSS ;
  • Javascript.

Sinon, il y a un problème et il est difficile de juger de la cause.

Cette habitude s'applique également aux agents.

Après que l'agent ait modifié le code, vous avez toujours besoin :

Ouvrez le navigateur → Vérifiez l'effet → Déterminez si c'est correct.

X. Entrez dans la construction de la station d'agent à partir de la page Web manuscrite

Les connaissances précédentes ne sont pas conçues pour vous faire un programmeur.

Vous avez juste besoin de maîtriser trois choses :

Tout d'abord, connaître les mots clés.

Par exemple :

  • CSS ;
  • chemin de fichier ;
  • Répertoire root ;
  • Réponse.

De cette façon, vous pouvez dire à l'agent exactement où se trouve le problème.

Deuxièmement, gardez l'habitude de vérifier.

Après avoir changé l'agent :

Modifier → Vérifier le navigateur → Procédez à l'optimisation.

Troisièmement, avoir la capacité de juger.

Image déchirée :

Peut - être un problème de chemin.

Le bouton ne répond pas :

JavaScript peut ne pas être connecté.

Page mobile confuse :

Peut - être un problème de layout réactif

Vous n'avez pas à le réparer vous-même, mais vous savez où demander à un agent de vérifier.

XI. Créer une page d'accueil personnelle jaune Punk avec un agent

Entrez maintenant dans la bataille réelle.

Objectifs :

Créer une page d'accueil personnelle de style punk jaune.

contenu :

  • Prénom : Punk
  • Introduction : J'utilise l'IA, le design et le contenu pour transformer les idées en œuvres ;
  • Statut : MBA de l'Université chinoise des sciences et technologies, concepteur en chef de HerName, doyen exécutif de la Stanley Business School ;
  • Pages : À propos de moi, les œuvres, les contacts ;
  • Crédit photo : images / punk.jpg.

Étape 1 : Trouver la page de référence

Ne demandez pas à l'agent de commencer à écrire.

Trouvez 1 ~ 2 références de conception.

Concernant :

  • Couleur ;
  • Page layout ;
  • Niveau de police ;
  • Ratio de l'image ;
  • Mode d'effet dynamique.

Ne copiez pas :

  • Logo ;
  • les images ;
  • Copie ;
  • source de code.

Ce sont les lois du design que nous apprenons.

Étape 2 : Laissez l'agent analyser d'abord, pas créer

La première directive ne fait que l'analyse de conception.

Dites à l'agent :

  • analyse de la structure de la page ;
  • analyse des couleurs ;
  • Analyse des fonts ;
  • bouton d'analyse ;
  • analyser le changement du terminal du téléphone mobile ;
  • Résumé de l'ADN de conception.

Ne le laissez pas écrire le code tout de suite

La raison est très simple :

La mauvaise direction, plus le code est écrit rapidement, plus il y a de retravail.

Étape 3 : Après avoir confirmé la conception, laissez l'agent faire

Exigences de fabrication :

  • Utiliser HTML natif, CSS, JavaScript ;
  • La structure du document est claire ;
  • n'utilisez pas de cadre ;
  • Utilisation de ses propres images et contenus ;
  • restant original ;
  • Effectuez les tests PC et Mobile.

En même temps, l'agent est demandé :

  • Démarrer un preview local ;
  • Vérifiez 1440 × 900 ;
  • Examen 390 × 844 ;
  • Bouton de vérification ;
  • Vérifier les images ;
  • Vérifiez les erreurs de la console.

N'écoutez pas l'agent dire « terminé ».

Assurez-vous de regarder les résultats du navigateur.

XII. Comment continuer à optimiser la première version

Les premières éditions ne sont généralement pas parfaites.

Ne dites pas lors de la modification :

Un peu plus haut. »

Cette description est trop vague.

Il faut dire :

« Gardez la structure inchangée et améliorez la luminosité de l'arrière-plan jaune. »

« L'avatar est agrandie de 20 %, mais reste entièrement affiché. »

"Modifier uniquement le CSS, pas le HTML."

Plus l'agent est spécifique, plus il est facile d'exécuter avec précision.

XIII. Acceptation finale

Donner à l'agent :

Vérifiez :

  • Le Desktop End ;
  • Terminal de téléphone mobile ;
  • Image chargée ;
  • CSS chargé ;
  • Javascript ;
  • Fonction de bouton ;
  • Page de scrolling ;
  • Erreur de console.

Problème trouvé :

Réparer → réinspecter.

XIV, déploiement en ligne

Sur ordinateur :

localhost

Seul lui-même peut y accéder.

Le déploiement consiste à télécharger un projet sur un serveur public.

Pour des projets HTML / CSS / JavaScript simples, vous pouvez utiliser GitHub Pages.

Processus de base :

  1. Créer un GitHub Repository ;
  2. Télécharger les fichiers de projet ;
  3. Confirmez que index.html est dans le répertoire racine ;
  4. ouvrir les pages ;
  5. Acquérir un site Web public ;
  6. Vérifiez à nouveau la page.

Vérifiez avant le lancement :

Ne pas télécharger :

  • Clé API ;
  • téléphone privé ;
  • Adresse de domicile ;
  • Informations internes ;
  • Image non autorisée.

Conclusion : Le développement Web futur, pas si vous allez écrire du code, mais si vous allez décrire le problème

L'IA facilite la création de pages Web.

Mais ce qui décide vraiment du résultat, ce n'est pas si vous allez laisser l'agent générer du code, mais :

Si vous comprenez la structure de la page web ;

Si vous pouvez décrire avec précision le problème ;

Savez-vous comment accepter les résultats ?

HTML, CSS, JavaScript, ces connaissances de base, ne seront pas obsolètes avec l'apparition de l'IA.

Au lieu de cela, ils sont en train de devenir le nouveau langage dans lequel les gens travaillent avec les agents.

Dans le développement futur du site Web, il est probable que les programmeurs n'écriront pas du code seul, mais que les gens qui comprennent la structure complèteront rapidement la conception, la mise en œuvre et l'itération via l'agent.