Conseils utiles

Leçon 1

Dans la première leçon, nous avons déjà examiné un petit exemple de création d'une page html. Créez maintenant une page plus complexe. Je tiens à noter que je vais expliquer comment faire cela sans utiliser de logiciel spécial. Tout ce qui est nécessaire pour le travail est un bloc-notes régulier de Windows. Pour un travail plus pratique, je vous recommande de télécharger Notepad ++ (un bloc-notes avancé avec la possibilité de mettre en évidence les balises html). Alors commençons.

Ouvrez le bloc-notes et copiez-y les éléments suivants:

Ensuite, cliquez sur "Enregistrer sous", dans la zone Type de fichier, sélectionnez "Tous les fichiers" et écrivez index.html dans le nom. Assurez-vous d'inclure l'extension .html (pas .txt) à la fin du nom, sinon les navigateurs ne l'interpréteront pas comme un document Web.

Si pour une raison quelconque vous ne parvenez pas à créer une page html, vous pouvez télécharger l'exemple précédent à partir du lien: index.rar.

Quelques mots à propos des tags que nous avons utilisés pour créer cette page.

Description des tags.

La toute première balise est (cette balise est appariée, c’est-à-dire que la balise de fermeture est obligatoire) - elle est utilisée comme conteneur, à l’intérieur de laquelle se trouve tout le contenu de la page (texte, images, etc.). Bien que cette ou ces balises soient facultatives, son utilisation évoque une bonne règle de tonalité. Par conséquent, je vous conseille de l'utiliser.

La prochaine balise est. Ceci est également un tag apparié (s). Cette balise n'apparaît pas sur la page (sauf pour le titre), mais il est nécessaire d'indiquer des paramètres de page supplémentaires - description de la page (utilisée par les moteurs de recherche), mots-clés (utilisés par les moteurs de recherche), styles, scripts, titre, etc.

Balise - balise (s) associée (s), nécessaire pour indiquer le titre de la page. De plus, cette balise doit être placée uniquement à l'intérieur de la balise!

Et le dernier, dans notre code, tag est. Aussi apparié tag (et

Études de cas

Ouvrez n’importe quel site et consultez le code source. Cela peut être fait directement dans le navigateur en utilisant le raccourci clavier Ctrl + U.

Vous voyez maintenant comment les professionnels écrivent du code HTML et gagnent beaucoup d’argent. Différent de notre première page, non? Mais cela peut aussi être appris en quelques mois. Et si vous souhaitez obtenir une formation complète avec des connaissances en CSS et JavaScript, avec un emploi de programmeur junior, vous devrez étudier pendant une année entière.

Suite technologique HTML5

HTML5 est la version la plus récente et la plus puissante du standard HTML, avec de nouveaux éléments, de nouveaux attributs et un nouveau comportement. Le terme HTML5 désigne également un ensemble de technologies, vous permettant de créer une variété de sites et d'applications Web.

En fait, le terme HTML5 désigne plus de dix normes distinctes. Et certaines des technologies HTML5 n’ont pas encore été finalisées. Tous les navigateurs ne les prennent pas en charge (ou chaque navigateur est différent).

Lorsque nous parlons de sites interactifs et d'AJAX, nous parlons presque toujours des technologies HTML5.

HTML5 possède des interfaces de programmation (API) pour la transmission de la vidéo et du son, pour les discussions, y compris les discussions vidéo via un navigateur, et de nombreux autres éléments interactifs intéressants. HTML5 vous permet de créer des jeux sur navigateur. Même YouTube fonctionne maintenant avec HTML5, même si auparavant, il nécessitait Flash.

Formellement, il est très simple de passer du HTML standard (HTML4) à HTML5: il suffit d'écrire la balise au début du code de la page Web. pour indiquer le type de document.

Comment apprendre à écrire du HTML

Vous avez déjà appris à écrire une page simple en HTML. Apprenez simplement les éléments de base et expérimentez. Définissez-vous une tâche spécifique (par exemple, créez un site de carte de visite pour votre adresse IP) ou prenez une tâche rémunérée en tant que pigiste et essayez de la mettre en œuvre.

Vous pouvez consulter le répertoire, google, demander des conseils sur les forums et les sites avec des questions et des réponses. Ou trouvez le site le plus similaire, ouvrez son code - et comprenez comment cela fonctionne. Vous pouvez le changer pour vos besoins, n'oubliez pas d'effacer les droits d'auteur et les commentaires des auteurs.

Le copier-coller du travail de quelqu'un d'autre est un phénomène normal dans la programmation. Ici, il s'appelle Open Source, un flux très en vogue et avancé.

Les gens partagent entre eux leurs programmes et leurs extraits de code. Certains développeurs ne veulent pas ouvrir leur code, ils chiffrent (masquent) les scripts sur les sites, mais ils peuvent également être analysés avec des outils spéciaux.

Pour créer des sites interactifs dotés de fonctionnalités plus complexes, au design moderne et élégant, vous devez approfondir vos connaissances sur CSS, JavaScript, la conception de sites Web, etc. Ici, une préparation plus fondamentale est nécessaire.

Le programme de formation annuel de Web Profession Profession est idéal pour les débutants qui souhaitent se familiariser avec les langages HTML, CSS, JavaScript et PHP. En conséquence, vous apprendrez à créer vos propres projets Web et pourrez prétendre au poste de développeur junior.

Cours pratique d'un an pour ceux qui souhaitent devenir un développeur Web professionnel, lancer leur projet Web ou leur service Web et recevoir leurs premières commandes de développement.

  • Commentaires en direct des enseignants
  • Accès illimité au matériel de cours
  • Stage dans des entreprises partenaires
  • Projet de fin d'études d'un vrai client
  • Garantie d'emploi dans les entreprises partenaires pour les diplômés ayant soutenu leur thèse

Nous aurons besoin

1) Choisir éditeur de texte. Assez pour la première fois Bloc-notes (Bloc-notes) (nous n’avons besoin que d’une équipe Enregistrer sous)

Si vous souhaitez immédiatement commencer à programmer dans des éditeurs de texte spécialisés, faites attention à:
1) pour Windows
Bloc-notes ++ (télécharger ou ici)
Intype (télécharger)

Leur différence avec les éditeurs de texte conventionnels est qu'ils indentent automatiquement! permet de ré-enregistrer le fichier dans un encodage différent (notez que vous le rencontrerez ultérieurement), des balises de couleurs de différentes couleurs, telles que le code au bas de la leçon. Dans un éditeur régulier, ce sera la même couleur.

2) Tout navigateur Internet, par exemple, Internet Explorer pour fenêtres ou Safari pour Mac OS X et iOS. Oui oui tu peux aussi Mozilla, Google Chrome, Opéra, Yandex et Mail navigateurs et ainsi de suite.

Créons une page HTML

1) créer un dossier sur le bureau html . Nous ferons cela pour que les leçons soient structurées et contenues au même endroit.

2)Créer notre fichier dans un éditeur de texte, par exemple dans le Bloc-notes (Bloc-notes). Suivant Enregistrer sous.

Le codage est préférable de choisir UTF-8, puis choisissez tous les types de fichiers et sélectionnez le nom du fichier avec .html à la fin, par exemple index.html

Nous choisissons comme un répertoire (dossier) où sauvegarder nos html
Pousser sauver. Fait!

Souvent poser la question qui extension de fichier non visible. Prenons-le dans l'ordre

Extension du nom de fichier - une séquence de caractères ajoutée au nom du fichier et destinée à identifier le type (format) du fichier. Autrement dit, il s’agit du fichier .txt .doc .exe, .jpg et ainsi de suite à la fin du nom du fichier.

La possibilité de voir les extensions de fichier peut aider à déterminer avec précision le type de fichier et vous permet de procéder manuellement (avec la commande renommer) change non seulement l'extension, mais également le type de fichier (par exemple, de txt à html)

cela ne devrait PAS ressembler à ceci: photo, document texte, jeu
Cela devrait ressembler à ceci: photo.jpg, texte document.txt, game.exe

Mais si vous avez toujours les noms de fichiers qui ressemblent à ceux de la première version (SANS, par exemple, .txt, jpg, .exe à la fin du nom de fichier), procédez comme suit:

Nous examinons les paramètres des fichiers et des dossiers:

Pour Win XP Ouvrir n’importe quel dossier - Outils (dans le panneau supérieur) - Propriétés du dossier - Afficher - Masquer les extensions des fichiers enregistrés (décocher) - Appliquer

Pour Gagner 7 Ouvrez n’importe quel dossier - Organiser - Options de fichier et de recherche -Vue - Masquer les extensions pour les types de fichiers enregistrés (décocher) - Appliquer

Pour Mac OS Cliquez sur le bureau - Finder - Préférences (Avancé) - Avancé - cochez la case dans Afficher toutes les extensions de fichiers (Appliquer les extensions).

3) y insérer le code complet (avec les commentaires) indiqué ci-dessous:

4) ouvrez le fichier. Vous pouvez choisir un autre navigateur pour ouvrir ce fichier. Pour cela, faites un clic droit sur notre fichier. index.html - Ouvrir avec et sélectionnez un navigateur dans la liste, par exemple Internet Explorer, Google Chrome, Mozilla, Navigateur Yandex, etc.

En conséquence, l'ouverture du navigateur Internet résultant index.html , Vous devriez voir une page de ce genre:


Figure 1

Sur Figure 1 nous voyons comment le navigateur affiche votre page. Le texte des éléments suivants est surligné en rouge:

Dans le code présenté ci-dessous, vous pouvez voir le minimum de base du document html. Il est nécessaire de l’apprendre et de ne pas confondre les balises d’ouverture et de fermeture par endroits.


Tag tête met en surbrillance la tête du document. Il prescrit les éléments principalement associés à l'aide du navigateur dans le traitement des éléments de votre page (nom, mots-clés, auteur, etc.). Nous en parlerons plus tard.

Tag titre représente le nom de la page. C'est la seule balise contenue dans têtequi est affiché sur la page. Quoi entrer après l'ouverture et avant la balise de fermeture sera le titre de votre page sur Internet

Tous les caractères indentés à gauche des balises dans les exemples sont facultatifs. Ils sont faits à titre d’illustration pour vous permettre de voir une paire de balises.

Tag corps indique le corps de la page. Quoi entrer après les balises d'ouverture et de fermeture corps et sera le contenu de votre page


Presque toutes les balises en HTML ouverture et fermeture (exception, par exemple, la balise img, qui indique l'insertion d'une image).


Encore une fois, je rappelle qu’il est important de ne pas oublier d’écrire balises de fermeture pour tous les autres types de balises, sinon le navigateur ne comprendra pas exactement où vous voulez terminer tel ou tel élément. Comme ci-dessous:


Après le mot gras, nous avons intentionnellement oublié la balise de fermeture b. En conséquence, le navigateur a affiché les informations suivantes:

Je veux surligner le texte audacieux, et celui-ci est déjà en italique

Comme vous pouvez le constater, le texte sera surligné en gras jusqu'à la fin et celui qui était impliqué en italique sera en gras et en italique. Alors faites attention!

5) Si vous voulez éditer quelque chose dans votre fichier index.html (et il est maintenant ouvert par défaut uniquement par le navigateur), puis cliquez avec le bouton droit de la souris sur notre fichier index.html - choisir Ouvrir avec et dans la liste, nous sélectionnons un éditeur de texte, il sera soit Bloc-notes (en anglais Bloc-notes), ou un autre éditeur de texte que vous avez installé.

En principe, explique les bases. Bien que la page html semble assez simple, mais dans les prochaines leçons, je vous expliquerai en détail ces éléments et d'autres ainsi que leur objectif - nous insérerons des images, créerons des liens et de nombreuses autres choses intéressantes)