Comme mentionné, HTML est aujourd'hui la base pour écrire n'importe quelle page Web sur le World Wide Web. En utilisant Création CSS code dans le langage HTML est en train de changer fondamentalement. Vous pouvez dire adieu à la réaffectation de balises HTML maladroites juste pour réaliser certaines choses. effets visuels. À propos de certaines balises ou attributs HTML, tels que la balise obsolète...

domicile

Commandez un site Web et faites des affaires!

Cette phrase s'entend et se voit sur de nombreux sites, et ce n'est pas en vain !

Placer — est le visage de l'entreprise. Et c'est le canal de communication le plus moderne et le plus efficace avec un consommateur potentiel. Seules les fonctionnalités du site Internet vous permettent d'utiliser pleinement toutes les méthodes de déclaration message d'information jusqu'à l'utilisateur. Des informations textuelles, audio et vidéo peuvent être soumises sur un seul site pour familiariser le consommateur avec elles.

En utilisant Logiciel site, vous pouvez accepter des paiements, parler au téléphone, maintenir des bases de données, envoyer et recevoir des fax, échanger SMS et faire beaucoup d'autres choses. Internet moderne un site web est un centre d'information non seulement pour n'importe quelle entreprise, mais aussi pour n'importe quel internaute.

Et c'est un moyen gagnant-gagnant de présenter efficacement et en même temps simplement et visuellement vos idées ou développements au plus large public. Et aujourd'hui, les documents Web écrits dans le langage de balisage hypertexte HTML continuent d'être la principale forme de représentation des données dans l'environnement Web.

Les principaux avantages du HTML sont :

• simplicité qui vous permet d'apprendre le HTML dans les plus brefs délais.
• la possibilité de créer le vôtre les pages Web
• et HTML fonctionne exactement de la même manière sur toutes les plates-formes qui existent aujourd'hui, pas besoin d'acheter du matériel supplémentaire. Et utilisez simplement n'importe quel éditeur de texte disponible, tel que le Bloc-notes.

Dans ce site, j'ai essayé de décrire en détail l'ensemble du processus de création de mon propre site Web, à savoir la publication d'un projet fini sur Internet afin d'en donner accès à tous les utilisateurs.

J'espère que beaucoup de mes articles seront très utiles, car je ne suis moi-même pas programmeur, mais je suis très inspiré par ce travail.

HTML- langage de balisage hypertexte du document. Avec lui, vous pouvez écrire des textes avec des liens vers d'autres pages, créer des tableaux, des listes, inclure des images et bien plus encore. Ce langage est utilisé pour écrire des sites Web.

» html pour les débutants

» Page d'accueil

» html pour les débutants

Balises de base (descripteurs) du langage html

Dans la lignée de tous les tutoriels HTML classiques, nous présentons le document hypertexte le plus simple.

Voici le titre du premier niveau

Bienvenue sur Internet !

Premier et dernier paragraphe.

Dans cet exemple, nous avons utilisé les termes hypertextes suivants (appelés balises) :

Nom du document

Ce n'est pas une règle, ni même une loi, c'est un fait :

Chaque document HTML a un titre.

D'autres navigateurs peuvent rechercher des informations par le nom de votre document HTML. L'emplacement du titre est toujours défini - il est situé en haut de l'écran et est séparé du contenu du document. La longueur maximale du nom est de 40 caractères.

Mise en page

La mise en forme peut être directe ou d'auteur. Si vous utilisez la balise

Les balises suivantes sont spécifiques au formatage direct :

Paragraphe.

Saut de ligne.

Titres et sous-titres

Le langage HTML permet de travailler avec six niveaux de titres. Le premier titre est le plus important. Il s'adresse Attention particulière. D'autres titres peuvent être stylisés, par exemple, en gras ou des majuscules.

En HTML, le premier titre est noté

:

Texte

n fait référence au niveau de titre, c'est-à-dire aux chiffres 1, 2, 3, 4, 5 ou 6.

En HTML, le premier titre peut être le même que le titre du document.

Les listes sont divisées en non numérotées :

Élément de liste

numéroté :

Élément de liste

avec descriptif :

Chien (élément)

L'ami de l'homme (description de l'article)

et imbriqué :

Primus

Un autre prime

Sélection de texte

Le texte d'un document HTML peut être mis en surbrillance de l'une des manières suivantes :

- Devis

-code de programme

- définition

- accent logique

- la saisie au clavier

- messages informatiques

- fort accent

- variables

Un gros paragraphe

Le saut de ligne n'est pas important en HTML. Cela signifie que vous pouvez sauter des lignes n'importe où dans votre document. Cela est dû au fait que dans un document hypertexte les espacements consécutifs se transforment en un seul. Mais! Si l'espace est après la balise

Cela est pris en compte. Si une balise est ignoré, l'espacement est également pris en compte. Dans d'autres cas, le navigateur sautera l'espacement.

HTML permet de lier du texte ou une image à d'autres documents hypertextes. Le texte est généralement surligné en couleur ou souligné.

La balise est utilisée pour cela. . N'oubliez pas qu'il doit y avoir un espace après la lettre A.

¦ composer

¦ tapez HREF="nom du fichier">

¦ saisir la balise

Bob

Ici, le mot Bob renvoie au document BobAnapa.html, formant un lien hypertexte.

Bob

Si vous souhaitez spécifier un nom de fichier complet, vous devez utiliser la syntaxe UNIX.

protocole : //porthôte/chemin

Préformater le texte

Étiqueter

Vous permet de générer du texte dans une police à espacement fixe.

 
Utilisez cette balise pour concevoir des listes de programmes.
 
Citations étendues
 
Étiqueter 
permet d'inclure une citation dans un objet solitaire.

 
Étiqueter 
permet de générer des informations sur l'auteur du document HTML.

 
Saut de ligne forcé
 
Étiqueter 
traduit une seule ligne, c'est-à-dire sans l'espace supplémentaire.
 
Diviseurs horizontaux
 
Étiqueter 
forme une ligne horizontale sur toute la largeur de la fenêtre.

 
Images intégrées
 
Vous pouvez intégrer des images dans votre document.  La syntaxe d'une image en ligne est la suivante :
 

 
Ici image_URL est un pointeur vers un fichier image dont la syntaxe est la même que celle d'un lien HTML.
L'article d'aujourd'hui aborde un sujet très pertinent parmi les programmeurs novices et les concepteurs Web, à savoir le sujet du choix d'un éditeur HTML.  Après avoir présenté la liste complète des logiciels spécialisés, il est difficile de faire le meilleur choix sur place - chaque programme est exclusif et possède un certain nombre de caractéristiques, avantages et inconvénients.  Heureusement, parmi un grand nombre de personnes des professions ci-dessus, au cours des années de leur travail fructueux, une "liste de travail" des programmes les plus optimaux pour créer et éditer des documents HTML et, en particulier, des sites Internet a été formée.  Ce matériel est consacré à l'examen de six éditeurs HTML.  Compte tenu du volume important de l'article qui en résulte, nous ne tarderons pas à l'introduction et nous nous mettrons immédiatement au travail.
Ainsi, le premier éditeur HTML sur lequel nos yeux sont tombés était Macromedia HomeSite.
Macromedia HomeSite est peut-être l'un des outils d'édition de documents HTML les plus populaires parmi les utilisateurs qui préfèrent coder manuellement les pages.  Dans le même temps, HomeSite vous permet d'accélérer considérablement le processus de création lui-même et de faciliter le travail du développeur.
Agrandir l'image
L'espace de travail du programme peut être conditionnellement divisé en trois parties: la première, la plus grande - la fenêtre réelle avec le contenu du document, la deuxième partie, située à gauche, contient par défaut une liste des documents disponibles sur le disque.  Et enfin, en haut, en plus du menu traditionnel, il y a plusieurs panneaux avec les fonctions les plus fréquemment utilisées, dont l'apparence peut cependant être personnalisée à votre goût.
Macromedia HomeSite fournit une coloration syntaxique pratique non seulement pour les pages HTML, mais également pour PHP, Perl, ASP, MySQL et d'autres outils de développement populaires.  Ce fait plaira aux utilisateurs expérimentés qui ne sont pas limités aux moyens du langage de balisage hypertexte et utilisent des langages de programmation Web plus complexes.  Si vous n'êtes pas satisfait du schéma de couleurs de mise en évidence de la syntaxe actuel, ce n'est pas un problème - vous pouvez modifier celui existant ou même créer votre propre schéma de conception de document.  HomeSite dispose d'un système d'aide puissant qui contient, en plus de décrire les capacités du programme de spécification du langage HTML, une référence de balise et comprend des info-bulles pratiques pour le descripteur actuel - pour les appeler, appuyez simplement sur F2, et l'utilisateur voit tous les attributs possibles pour cette balise.
Pour accélérer l'accès aux groupes de balises fréquemment utilisés, il existe plusieurs panneaux dans le coin supérieur droit, dont l'apparence et l'emplacement peuvent également être modifiés.
Le panneau est divisé en plusieurs onglets, chacun contenant des balises appartenant à un groupe.  Par exemple, l'onglet Polices contient des boutons permettant d'augmenter rapidement la taille de la police, de modifier son style, sa position par rapport à la ligne et d'insérer trois niveaux de titres.
Une autre façon de saisir manuellement tous les attributs d'une balise est ce que l'on appelle l'éditeur de balises - un éditeur de balises qui peut grandement faciliter le processus d'attribution de valeurs à divers attributs.
Séparément, il convient de noter les outils de création et de configuration de tableaux et de cadres - Assistant de table et Assistant de cadre, qui permettent de faciliter considérablement la vie d'un développeur lors de la création de tableaux et de cadres d'une structure complexe.
Imaginez combien de temps il faudrait pour créer une telle table à la main !
Il convient de noter que Homesite contient un correcteur orthographique intégré qui vérifie non seulement l'exactitude des descripteurs utilisés, mais également l'exactitude du texte lui-même, ainsi qu'un éditeur de fichiers CSS - des feuilles de style en cascade appelées TopStyle.
Pour accélérer la création de documents, vous pouvez utiliser des raccourcis clavier - HomeSite fournit un vaste champ d'activité pour les amateurs de clavier.  Par exemple, balisez 
correspond à la combinaison de touches Ctrl+Pause.  Cependant, l'utilisateur est libre d'attribuer un raccourci clavier pratique à presque toutes les commandes.
Avantages.  Les avantages du programme incluent la fonctionnalité, la polyvalence, la prise en charge de divers langages de programmation, une interface claire, de nombreuses possibilités et un système d'aide puissant.  Les moins.  Manque de support pour la langue russe, prix élevé, il faut au moins une connaissance superficielle du langage HTML pour créer des pages, le prix élevé du programme.
Vous pouvez télécharger la dernière version de Macromedia HomeSite à partir d'ici.
Le programme SiteEdit a été créé par la société russe EdgeStile et est positionné par les développeurs comme un système de gestion de contenu.  Contrairement à HomeSite, SiteEdit appartient aux outils de développement dits visuels - éditeurs WYSIWYG (de majuscules expressions Ce que vous voyez est ce que vous obtenez - "ce que vous voyez est ce que vous obtenez").
Après le premier lancement du programme apparaît modèle prêt site Internet.
La structure de l'ensemble du nœud est représentée par diverses pages contenant plusieurs rubriques.  Une section, à son tour, peut contenir plusieurs entrées ou objets.  En passant en mode édition (F9 par défaut), nous avons la possibilité d'éditer sections existantes et ajoutez-en de nouvelles, modifiez le texte d'une entrée existante ou ajoutez une nouvelle entrée.
Après avoir cliqué sur le bouton « Changer de section », une nouvelle fenêtre apparaît, dans laquelle vous pouvez effectuer cette opération simple :
En plus de l'édition directe de texte, l'utilisateur a accès à des boutons pour changer le style de police, insérer une image, date actuelle, ajouter un tableau, insérer un lien hypertexte, créer une liste à puces ou numérotée - le tout d'un simple clic de souris.  Ceux qui connaissent le langage HTML ne peuvent pas se limiter aux fonctions ci-dessus, mais écrivent simplement manuellement le code nécessaire.  Puisqu'il n'y a pas de fioritures telles que la coloration syntaxique dans la fenêtre d'édition, vous pouvez appeler un éditeur externe en cliquant sur le bouton HTML, dans lequel vous pouvez apporter toutes les modifications nécessaires.
Le programme propose plusieurs modèles de conception: livre, galeon, kafe, palm_skin, stroitel, grâce auxquels vous pouvez modifier considérablement l'apparence de l'ensemble du site dans son ensemble.
Tous les éléments de la page sont modifiables.  Pour un changement de design plus radical, il existe un éditeur de design qui offre les possibilités les plus larges pour changer tous les éléments présents sur la page.


agrandir l'image
Sur le côté gauche, il y a une liste d'éléments, sur la droite - leur apparence sur la page, à partir du bas, il y a des fenêtres pour modifier les valeurs des attributs d'un descripteur particulier.  Par exemple, les attributs suivants sont disponibles pour la balise Font : couleur, taille, épaisseur, style, soulignement oblique, espacement.  Les débutants apprécieront la façon de remplir les cases - vous n'avez pas besoin de saisir quoi que ce soit manuellement, sélectionnez simplement l'élément souhaité dans la liste déroulante.  Le choix de la couleur n'est pas non plus difficile - une palette est à la disposition de l'utilisateur, il suffit de décider de la teinte qui vous plaît, et, le tour est joué, son code hexadécimal est déjà indiqué dans le champ correspondant.
Le programme comprend un modèle prêt à l'emploi qui imite le site compagnie de construction qui peut être personnalisé selon vos besoins.
Il est curieux qu'il soit impossible d'enregistrer directement le code de la page à partir du programme, pour cela, vous devez sélectionner l'élément "Afficher la page dans le navigateur", et ce n'est qu'à partir du navigateur que vous pouvez enregistrer la page en tant que fichier html.  Cette approche est apparemment due au fait que dans les versions Standard et Business du programme SiteEdit, il est possible de télécharger immédiatement l'intégralité du projet sur l'hébergement, mais dans version gratuite début cette opportunité malheureusement manquant.  D'où les incohérences.
Avantages.  Interface simple - pratiquement aucune connaissance en HTML n'est requise, fonctionnalité, faible poids du kit de distribution, langue d'interface russe, version de démarrage gratuite.
Les moins.  Impossibilité d'enregistrer des fichiers directement à partir du programme, fautes d'orthographe.
SiteEdit est parfait pour créer des pages personnelles et des projets Web simples pour les débutants et même pour ceux qui ne connaissent pas du tout le HTML.
SiteEdit est disponible en trois versions principales - Start, Standard, Business et deux autres -Partner.  Vous pouvez télécharger la version de démarrage de SiteEdit à partir d'ici .
Un autre programme gratuit qui a été soumis à notre examen est HTML Source.  La première chose qui a attiré mon attention a été la petite taille du package de distribution du programme - seulement 1,5 Mo !  Cela a conduit à des réflexions sceptiques sur la fonctionnalité du programme et ses capacités.  Cependant, nous avons été agréablement surpris.


agrandir l'image
L'interface du programme ressemble à celle de HomeSite, mais, bien sûr, il y a beaucoup moins d'outils et de capacités.  Sur le côté gauche, il y a une fenêtre d'exploration dans laquelle vous pouvez sélectionner les fichiers que vous devez ouvrir.  Au centre - directement la fenêtre d'édition des documents Web.  Sur le côté droit de celui-ci se trouve une palette, et cela fonctionne dans un mode très pratique.  Lorsque vous passez le curseur de la souris sur l'une ou l'autre partie de la palette, le composant de chaque couleur de la palette RVB est immédiatement affiché, et un peu plus bas - la couleur elle-même.  De plus, lorsque vous cliquez sur la zone souhaitée, un code couleur hexadécimal est immédiatement inséré dans le document.  Très pratique.
En haut de l'espace de travail du programme, il y a une barre d'outils régulière qui contient des boutons pour créer un nouveau document, ouvrir des fichiers existants, imprimer un fichier, vérifier l'orthographe et d'autres actions courantes.  Toutes les icônes sont faites dans un bon style, mais la seule chose décevante est le manque d'info-bulles lorsque vous survolez une icône d'action particulière.  Il est à noter que le programme lui-même détermine quels navigateurs sont installés dans le système et que la barre d'outils comporte des icônes permettant de visualiser le document dans les navigateurs disponibles pour l'utilisateur.  Dans mon cas, en dehors de la norme Internet Explorer, Opéra et Mozilla Firefox, comme le montre le programme.
Passons maintenant directement à la description des capacités du programme.  HTML Source, comme son nom l'indique, est destiné uniquement à faciliter le travail du codeur, et non à le remplacer complètement.  Le programme n'a pas la capacité de développer visuellement des pages, c'est-à-dire  pour ceux qui ne connaissent pas les bases du langage de balisage hypertexte, ce produit ne fonctionnera pas.  Cependant, pour ceux qui préfèrent développer des documents Web manuellement, HTML Source dispose d'un bel ensemble d'outils pour accélérer le processus de codage.
HTML Source propose une coloration syntaxique pour les fichiers HTML, cependant, à mon avis, l'implémentation de cette fonction dans le programme est quelque peu inférieure à celle de HomeSite.  Tout d'abord, la partie du code relative à la définition des styles n'était pas du tout mise en évidence.  Et deuxièmement, il n'y a aucune possibilité réglage automatique jeu de couleurs, qui était présent dans le même HomeSite.
Dans le menu "Insérer", l'utilisateur a la possibilité d'insérer des dates, des Caractères HTML, des images, ainsi qu'un large éventail d'émoticônes.  Une décision très originale des développeurs qui ont inclus une fonctionnalité aussi inhabituelle dans leur programme.  Les fans de communication virtuelle devraient aimer ça.
Le menu "Tags" contient les principaux groupes de descripteurs HTML.
Le plus intéressant est le contenu du menu "Outils", qui contient tous les outils de cet outil logiciel.  Examinons de plus près son contenu.
L'élément "Convertir la casse" vous permet de changer la casse des lettres, c'est-à-dire  soit l'inverser, soit l'amener à un spécifique.  L'élément suivant "Convertir CodePage" vous permet de changer rapidement l'encodage de la page entière.  Parmi les points restants, il faut noter le correcteur orthographique intégré, et l'outil d'optimisation du code HTML appelé Tidy, qui apporte l'apparence du document conformément aux exigences de l'organisation W3C, qui développe des normes de langage de balisage hypertexte .
Il convient de noter le système d'aide avancé du programme HTML Source, qui comprend Description complète fonctionnalités du programme, ainsi que la spécification du langage HTML, y compris CSS.
Avantages : Taille de distribution compacte, fonctionnalités originales, système d'aide avancé.
Inconvénients : Manque de possibilités de développement visuel des documents, possibilités modestes de mise en place du programme, manque de russification.
Ainsi, HTML Source séduira les développeurs expérimentés, non seulement en tant qu'outil de développement, mais également en tant qu'outil de référence.  Vous pouvez télécharger la source HTML ici
Le programme suivant qui a été soumis à notre examen était Magic HTML Studio, développé par AG FreeSoft.  Après le lancement du programme, une image inhabituelle est apparue à nos yeux - la conception de Magic HTML Studio était douloureusement inhabituelle.
Quelqu'un peut aimer cette interface, mais, à mon avis, ce n'est pas une très bonne solution pour un programme de ce genre.  J'ai également été déçu par le fait qu'il n'y avait pas de coloration syntaxique du document.  Eh bien, d'accord, laissons tomber toutes les prétentions à la conception et voyons comment Magic HTML Studio s'en sort avec le composant fonctionnel.
Et ici tout est juste pour plus haut niveau!  Que valent des outils tels que Java Constructor et CQI QuickBuilder.  Mais avant tout.
Sur le côté gauche, il y a des boutons pour un formatage rapide du texte, en changeant le type d'écriture et la position du texte sur la page.  Des icônes sont également fournies pour insérer différents niveaux de titres dans le document.  Sur le côté droit, l'utilisateur a accès à des boutons pour insérer du texte d'une certaine couleur, mais l'espace est utilisé de manière très irrationnelle - un bouton séparé est attribué à chaque couleur, bien qu'il soit plus pratique d'utiliser une palette régulière, par exemple , un péché programme HTML la source.
Passons maintenant aux outils et outils propres à Magic HTML Studio.  Java Constructor est un outil puissant et en même temps simple pour créer des scripts JavaScript, et pour cela l'utilisateur n'a pas du tout besoin de connaissances langue donnée la programmation.  À l'aide du constructeur, vous pouvez insérer un calendrier ou une horloge sur votre page, créer un menu dynamique ou déroulant, créer une bannière simple composée de plusieurs images et d'autres éléments dynamiques utiles.


agrandir l'image
Le concepteur crée automatiquement le script nécessaire et il vous suffit de le coller au bon endroit dans le document.
Le programme comprend également un générateur scripts CGI, avec lequel vous pouvez créer une conférence, livre d'or ou discuter en un seul clic, après avoir défini les paramètres du script.
Malheureusement, nous n'avons pas eu l'occasion de tester cet outil dans la pratique - pour cela, il était nécessaire de télécharger des fichiers sur un serveur prenant en charge les scripts CGI.  Passons aux autres fonctionnalités du programme.  Ainsi, en utilisant le menu Options, vous pouvez effectuer les opérations d'ajout d'un script de chargement Flash, appeler l'éditeur d'éléments, ainsi que changer la police et ajouter un formulaire.
Il faut également noter un bon système d'aide en russe, contenant une description de toutes les fonctionnalités principales du programme.
Avantages : constructeurs de scripts JavaScript et CGI avancés, larges possibilités d'ajout d'éléments dynamiques, système d'aide en russe.
Inconvénients : pas tout à fait une bonne conception, manque de coloration syntaxique, manque d'outils de développement visuel.
Microsoft FrontPage inclus avec Forfait Microsoft Office est un éditeur WYSIWYG classique, qui a cependant la possibilité de modifier manuellement le code.
L'interface du programme est très similaire à celle de Microsoft Word, ce qui n'est pas du tout surprenant - l'unification de l'apparence aidera les débutants à maîtriser rapidement les principales fonctionnalités de FrontPage.
Le programme a trois modes de travail avec un document : Normal, HTML et Aperçu.  En mode Normal, la page Web est un fichier texte avec la possibilité de modifier tous les éléments - du texte aux images.


agrandir l'image
Le mode HTML vous permet de visualiser le code de la page et, en conséquence, de le modifier.  Dans ce mode, FrontPage fournit une coloration syntaxique, mais plutôt médiocre - les descripteurs sont surlignés en bleu, tout le reste est en noir.
Enfin, en mode Aperçu, vous pouvez voir à quoi ressemblera votre page dans la fenêtre du navigateur.
FrontPage, grâce à une intégration étroite avec d'autres produits Microsoft, vous permet d'insérer dans un document Web différents types objets : des images et des diagrammes aux feuilles Microsoft Excel.
Bien sûr, FrontPage dispose d'un générateur de tableaux qui facilite grandement la création de tableaux.
L'un des principaux avantages du programme est un grand nombre de modèles disponibles qui permettent à l'utilisateur de ne pas se casser la tête sur la conception de son projet.
Après avoir choisi le modèle nécessaire, vous pouvez procéder directement au remplissage de la page avec du contenu.  C'est là qu'intervient la beauté de FrontPage : le processus de création d'une page HTML n'est pas différent de la création d'un document texte normal dans Microsoft Word.  Les mêmes outils sont à la disposition de l'utilisateur pour éditer du texte, changer sa mise en forme, créer et éditer des tableaux, insérer divers objets et images.  Le programme vous permet de créer facilement des listes à puces, numérotées et à plusieurs niveaux - et tout cela sans connaissance du langage HTML !
FrontPage divise la zone de travail en plusieurs blocs contenant certains éléments de la page - images, texte, en-têtes, etc.  Pour chaque bloc, vous pouvez attribuer vos propres options de formatage et son emplacement par rapport à la page.
Il y a aussi le revers de la médaille - la complexité et la lourdeur du code résultant, qui affecte naturellement la taille finale du document.  Il sera également très difficile d'apporter des modifications à un tel document à l'avenir.  Mais c'est plutôt un inconvénient non pas d'un produit spécifique, mais de presque tous les éditeurs WYSIWYG.
Avantages : une interface familière pour les produits MS Office, un bon ensemble de modèles, une intégration avec d'autres programmes du package MS Office.
Inconvénients: un petit ensemble d'outils de développement, l'impossibilité d'un achat séparé du programme.  Microsoft FrontPage est un bon choix en tant qu'éditeur HTML pour la première fois, mais à mesure que les besoins de l'utilisateur augmentent, ses capacités peuvent ne pas être suffisantes.
et enfin dernier programme dans notre test de Macromedia Dreamweaver MX 2004. La taille du kit de distribution (62 Mo) permet d'attendre beaucoup de cet éditeur HTML.  En effet, les capacités de Macromedia Dreamweaver MX 2004 sont impressionnantes.  Après l'installation, l'utilisateur est invité à sélectionner apparence programme, qui diffère selon l'approche de création de documents Web.  Lors du choix de "Code", l'interface du programme sera adaptée aux besoins de l'encodeur, et lors du choix de "Design" - en conséquence, le concepteur.  Cependant, il est toujours possible de basculer entre ces deux modes, et un troisième mode combiné est également disponible - l'espace de travail du programme est divisé en deux parties.


agrandir l'image
Sur le côté droit se trouve un autre menu à plusieurs niveaux, qui contient notamment des éléments permettant d'afficher une aide sur le descripteur en cours, une liste des images utilisées, un explorateur et quelques autres éléments.
Fournir une assistance supplémentaire au développeur menus contextuels, qui dupliquent les principales fonctions appelées depuis le menu principal.  Par exemple, en travaillant en mode visuel en cliquant avec le bouton droit sur un élément, nous pouvons modifier la police utilisée, son style, sa couleur et d'autres attributs, et il est également possible de modifier les attributs de la balise utilisée.
Les principales caractéristiques du programme résident précisément dans l'utilisation du mode visuel.  Les icônes de la barre d'outils sont responsables des actions les plus courantes : ajouter un lien hypertexte, insérer une image, construire un tableau, ajouter la date actuelle, etc.
Pour les utilisateurs familiarisés avec les capacités du langage HTML, nous pouvons recommander l'utilisation d'un outil appelé Tag Chooser, avec lequel vous pouvez insérer non seulement n'importe quelle balise HTML, mais également les expressions et opérateurs de base des langages de programmation tels que JavaScript, ASP. Net, PHP, WML et coldfusion.  Tout cela ouvre de nouveaux horizons pour l'utilisation de l'outil logiciel dans le développement de divers projets complexes utilisant des langages de programmation côté serveur.
La commodité du mode combiné réside dans le fait que toutes les modifications apportées sont affichées immédiatement dans les deux fenêtres.  C'est-à-dire que lorsque vous modifiez le code du document, vous voyez immédiatement le résultat dans la fenêtre adjacente, et inversement, lorsque vous sélectionnez un élément, le code correspondant s'affiche.
Lorsque vous travaillez en mode "Code", l'espace de travail du programme ressemble à celui de HomeSite - on pense que les produits ont un créateur, mais la fonctionnalité de Dreamweaver est encore plus élevée.  Ce qui ne vaut qu'un seul concepteur de table, qui offre au développeur une flexibilité sans précédent lors de la création de tables.  De plus, lors de la création d'un tableau, le programme propose d'utiliser l'un des modèles de conception, dont il existe plusieurs dizaines, et lorsque vous sélectionnez un modèle spécifique, vous pouvez immédiatement le personnaliser selon vos besoins en ajustant certains de ses attributs.  Après avoir créé un tableau et l'avoir rempli avec du contenu, il devient disponible pour trier le tableau par n'importe quelle colonne.  Et tout cela - en mode visuel, le code lui-même, bien sûr, change automatiquement.
Macromedia Dreamweaver MX 2004 peut être utilisé conjointement avec d'autres produits de l'entreprise - Macromedia Fireworks, Flash, etc.
Si le choix d'un utilisateur qui préfère créer des documents en mode visuel est presque évident, alors "l'encodeur" fait face à une tâche difficile en choisissant entre deux produits Macromedia : HomeSite ou Dreamweaver MX 2004 ?  On peut noter que les capacités de Dreamweaver MX 2004 seront superflues pour l'encodeur, cependant, si grand volume travail de routine, vous pouvez utiliser complètement le mode visuel - si le programme le propose, alors pourquoi ne pas l'essayer ?  Les utilisateurs de HomeSite sont privés d'une telle opportunité, mais le programme leur offre tous les outils nécessaires pour le développement confortable de documents Web de complexité variable.
Ainsi, chacun est libre de choisir seul le produit dont il a besoin, en tenant compte des objectifs et des connaissances disponibles.  Bien sûr, le prix est également un problème - les deux produits Macromedia sont distribués en tant que Shareware, mais ils sont gratuits pendant une période d'essai de 30 jours.  Ce temps est suffisant pour faire un choix.
Avantages: un vaste ensemble d'outils pour le développement visuel de documents, une interface claire, la possibilité de travailler en mode codeur, un ensemble de modèles prêts à l'emploi.
Inconvénients : grand volume de distribution, prix élevé du produit.
Et la langue HTML, la définition la plus importante est " étiqueter"(de l'anglais "tag", parfois aussi écrire "tag"). Étiqueter- il s'agit d'une expression symbolique ou textuelle (pour plus de clarté, permettons-nous une analogie pas tout à fait correcte avec les termes "commande" ou "opérateur" des langages de programmation), demandant d'effectuer une action spécifique directement sur balisage et mise en page présentation à l'écran les pages Web.
Autrement dit, il ne s'agit en aucun cas d'un opérateur ou d'une commande, mais simplement d'une indication (par exemple, tiret à gauche, placez une illustration d'une taille spécifique à droite et en dessous - lien hypertexte).
En plus des balises proprement dites, dans la langue hypertexte balisage leurs attributs sont utilisés.
Décor étiqueter dans le tableau du document est effectuée à l'aide de crochets angulaires, ce qui permet à l'interprète de faire la distinction entre le texte (contenu thématique) et directement HTML-code, affichant correctement les informations sur la page Web.
Les balises peuvent être jumelées (c'est-à-dire utilisées dans un ensemble inextricable les unes avec les autres).  Dans ce cas, les termes ouverture et fermeture Mots clés.  La syntaxe des balises appariées est invariablement :
Fragment de document...,
De plus, les instructions prescrites par la balise s'appliquent à l'ensemble du fragment de document indiqué entre elles.  Les balises peuvent être uniques, c'est-à-dire que la balise fermante est standard HTML non fourni.
Éléments du langage HTML
Sans exception, tous les éléments du langage HTML sont soit des balises soit leurs attributs ;  pas de commandes, pas de conditions dans Langue le balisage hypertexte n'existe tout simplement pas (voir ci-dessous pour les balises META de classe spéciale).  Éléments actifs et effets dynamiques sur page Web sont réalisées par des modules indépendants et complets intégrés au code hypertexte, déjà implémentés dans l'un des langages de programmation classiques (par exemple, JavaScrypt est très populaire sur les sites Web), ou par des méthodes de programmation serveur.
Symbolisme META



HTML. Étiqueter


Sujets à l'appui :


création de sites web. HTML. Étiqueter


Dans le projet de fin d'études, le langage de balisage hypertexte HTML a été utilisé comme outil logiciel pour remplir du contenu statique.
HTML (Hyper Text Markup Language - Hypertext Markup Language) est un langage de programmation informatique conçu pour développer des pages Web, ou, en d'autres termes, des documents HTML.  Le langage HTML est une collection de caractères de contrôle - des descripteurs avec lesquels vous pouvez ajouter et formater des éléments d'un document.  Pour personnaliser l'apparence et le fonctionnement d'un élément de page, ses attributs sont définis.
Les navigateurs reconnaissent les balises de langage HTML et convertissent le code du document en une page Web qui s'affiche dans la fenêtre du navigateur.  Les applications de navigateur sont développées à l'aide des normes de langage HTML mondiales, ce qui garantit que les pages Web ont le même aspect, quelle que soit la fenêtre du navigateur dans laquelle elles sont affichées.
HTML est en cours de normalisation par le World Wide Web Consortium (W3C).  Malgré la nécessité d'assurer une indépendance logicielle et matérielle complète des pages Web, il est assez difficile de mettre pleinement en œuvre ces principes.  Un des problèmes est que le travail sur la langue se poursuit.  Il existe de nouvelles versions de HTML qui offrent des options supplémentaires aux développeurs de pages Web.
Il existe de nombreux éditeurs HTML spécialisés qui peuvent être grossièrement divisés en deux types :
les éditeurs HTML visuels, c'est-à-dire les éditeurs de type WYSIWIG (par exemple, Microsoft FrontPage, Macromedia Dreamveawer, Netscape Navigator Gold, etc.).  Lorsqu'il travaille dans ces programmes, l'utilisateur traite des images graphiques Éléments HTML, pas avec l'ID du document.  Soit dit en passant, il existe des convertisseurs pour les documents texte préparés dans Word et Word Perfect en fichiers HTML ;
éditeurs de textes HTML réels qui vous permettent d'automatiser la saisie et l'édition de code (par exemple, HomeSite, HotDog, Ken Nesbitt Web Editor et bien d'autres).  Ces programmes permettent à l'utilisateur d'insérer rapidement et facilement des éléments HTML dans des documents, de vérifier la syntaxe des commandes, d'exécuter et de déboguer la page sans quitter la fenêtre de l'éditeur.  En général, travailler dans de tels éditeurs ressemble à travailler dans un environnement de programmation interactif tel que Delphi ou Visual Basic.
En plus des deux catégories ci-dessus, il existe des programmes qui combinent les fonctionnalités des éditeurs de texte et visuels HTML, ces programmes incluent HotMetal développé par SoftQuad Sofware.
Les fonctions des éditeurs HTML modernes sont très diverses: certaines d'entre elles, par exemple, assurent la formation de pages individuelles uniquement, d'autres, au contraire, sont utilisées pour concevoir des sites Web entiers avec leur téléchargement ultérieur sur des serveurs distants sur Internet.  Il est aujourd'hui difficile de faire la distinction entre les éditeurs HTML professionnels et ceux destinés à la création Web amateur.
Lors de l'utilisation de chaque élément, il est important de savoir quels éléments peuvent être placés à l'intérieur et quels éléments il peut être à l'intérieur.  Ainsi, la position relative des éléments HTML, HEAD, TITLE et BODY devrait être standard sur n'importe quelle page, cependant, dans les cas où les cadres ne sont pas utilisés.  Si la page est un document de mise en page de cadre (plus d'informations à ce sujet dans la section Cadres du chapitre 3), l'élément FRAMESET est utilisé à la place de l'élément BODY.
Il existe des groupes d'éléments qui sont utilisés ensemble.  Ceux-ci incluent des éléments pour créer des tableaux, des listes, des cadres.  Dans ce cas, l'ordre d'imbrication des éléments est déterminé par la logique de création de l'un ou l'autre objet sur la page : ici, vous devez vous rappeler des règles de conception simples.  Les tableaux et les cadres sont souvent utilisés pour organiser les détails de la page (images, texte, etc.) dans un ordre spécifique.  Par exemple, en plaçant une image dans une cellule du tableau, vous pouvez atteindre une certaine position.  Dans de tels cas, l'imbrication des éléments est déterminée par le développeur de la page Web et dépend beaucoup de son imagination et de ses compétences.
Un grand nombre d'éléments utilisés pour formater le texte permettent une grande variété d'options d'imbrication.  Et eux-mêmes doivent être situés à l'intérieur certains éléments.  Ici, il faut être guidé par le bon sens : chaque élément remplit une fonction donnée et a une certaine portée.
L'exemple ci-dessous comporte deux paragraphes (le premier dans un encadré vert) et un tableau :
<Р
style="border: Зрх solid дгееп">Texte du paragraphe 1

. . . 
<Р>Texte du paragraphe 2
La table dans ce cas est un élément indépendant.  Il peut, par exemple, être aligné indépendamment du reste du texte.
Vous pouvez utiliser un autre code :
<Р
style="border: Зрх solid дгееп">Texte du paragraphe 1

. . . 
<Р>Texte du paragraphe 2
La balise de fin du premier paragraphe a disparu.  Le tableau fait maintenant partie du premier paragraphe et le cadre vert entourera le tableau et le texte.
Inversement, un élément P peut se trouver à l'intérieur d'un tableau : par exemple, un seul élément de cellule TD peut contenir plusieurs paragraphes P.
La violation des règles d'imbrication est l'une des erreurs les plus courantes lors de la création de pages Web.  Pour éviter de telles erreurs, il est nécessaire d'utiliser des éditeurs hypertexte qui contrôlent automatiquement l'implémentation des règles de syntaxe.  Ci-dessous se trouve une ligne contenant une erreur typique d'élément imbriqué :
<Н1>Rubrique 1<Н2>Rubrique 2

Si la page peut être affichée, elle s'affiche sans aucun message d'avertissement. Le programme interprète les balises placées par erreur d'une certaine manière et génère une image suivant la logique établie par ses développeurs. Dans ce cas, l'apparence de la page peut ne pas correspondre à l'intention de l'auteur. Et seulement en cas d'erreurs très graves ou de contradictions évidentes, le navigateur affiche un message sur l'impossibilité d'afficher la page. Un signe indirect d'une erreur de balisage peut être l'apparition de fragments de code HTML sur la page. Les utilisateurs qui travaillent beaucoup avec Internet, apparemment, ont rencontré cette situation. Les règles de syntaxe s'appliquent également à l'utilisation des balises de début et de fin, des attributs et du contenu des éléments. Ne confondez pas les notions d'"élément" et de "balise". Un élément est un conteneur contenant des attributs dans la balise de début vers des informations utiles entre les balises de début et de fin. Une balise est une construction entre crochets angulaires et utilisée pour indiquer la portée d'un élément.

Certains éléments n'ont pas de balises de fin. Évidemment, l'élément BR, qui marque la fin d'une ligne, n'a pas besoin de balise de fin. Certains éléments peuvent être utilisés avec ou sans balise de fin. L'exemple le plus notable est l'élément de paragraphe P. Il peut avoir une balise de fin, mais si cette balise n'est pas définie, alors le terminateur de l'élément est l'élément suivant, qui peut logiquement définir la fin du paragraphe courant : un autre élément P, un élément de dessin IMG, un élément de liste UL, un élément de table TABLE, etc. Ainsi, informations utiles d'un élément doit être soit entre les balises de début et de fin de cet élément, soit entre la balise de début de cet élément et la balise de début de l'élément suivant. Tout texte quelconque saisi sur la page est perçu par le navigateur comme devant être affiché et donc formaté en fonction des éléments entourant ce texte. Ceci ne tient pas compte de la division du texte en lignes obtenue dans éditeur de texte. Théoriquement, une page Web entière peut tenir sur une longue ligne. Les caractères de fin de ligne, tels que ceux saisis dans le Bloc-notes, peuvent faciliter la lecture du code HTML, mais ne sont pas affichés par le navigateur. Ce dernier, lors de l'affichage de la page à l'écran, peut couper la ligne en fonction de la disposition des éléments Hn, P ou BR, et dans d'autres cas, il formate les paragraphes de manière arbitraire, en fonction de la quantité de texte, de la taille de la police et de la fenêtre en cours. Taille. Par conséquent, les pages Web doivent être organisées de manière à ce que leur apparence ne change pas radicalement pour différentes résolutions de moniteur, tailles d'écran, tailles de fenêtre de navigateur et pour les modes plein écran ou fenêtré. Une règle très importante qui n'a pas d'exceptions est le placement des attributs d'élément à l'intérieur de la balise de début.

Les caractères entre crochets sont des commandes HTML par lesquelles le "navigateur" sait convertir les parties de texte entre ces commandes.

Le document dans son ensemble doit être marqué comme un document HTML. Pour ce faire, il doit commencer par une commande et se terminer par une commande.

Le dossier est composé de 2 parties :

en-tête (tête).

document (Corps).

Lorsque vous écrivez des commandes HTML, peu importe si vous écrivez des commandes en minuscules ou en majuscules.

Le titre contient des informations sur le document, telles que son titre et des informations méthodologiques décrivant le contenu. Le corps contient le contenu du document lui-même (ce qui est affiché dans la fenêtre du navigateur).

Chaque balise se compose d'un nom, éventuellement suivi d'une liste d'attributs facultatifs, le tout entre crochets.< >.

Le contenu des parenthèses n'est jamais affiché dans la fenêtre du navigateur. Le nom d'une balise est généralement une abréviation de sa fonction, ce qui facilite sa mémorisation. Les attributs sont des propriétés qui étendent ou affinent la fonction d'une balise. En règle générale, le nom et les attributs d'une balise ne sont pas sensibles à la casse. Étiqueter fonctionnera comme . Cependant, les valeurs de certains attributs peuvent être sensibles à la casse. Cela s'applique en particulier aux noms de fichiers et aux URL. Le schéma général du document est illustré à la figure 1.1.

Illustration 1.1. Régime général Document HTML

Les balises ont une balise de début (ouverture ou début) et une balise de fin (fermeture). Le texte entre les balises suivra les instructions qu'elles contiennent. Par example:

Mon première page Web

Résultat : le mien première Page Web.

La balise de fin porte le même nom que la balise de début mais est précédée d'une barre oblique (/). Il peut être considéré comme une balise "switch". La balise de fin ne contient jamais d'attributs.

le texte commence par une balise . Il nécessite une balise fermante A qui marque la fin du document. Viennent ensuite le titre du document et les balises de contenu. À l'intérieur de la balise d'en-tête, des informations sur le document sont écrites (son titre, sa description, sa table d'encodage, etc.). La balise de titre elle-même est écrite comme . Il nécessite une balise fermante. La balise de contenu du document définit partie information descriptifs de pages. Il contient du texte, des images et d'autres éléments. La balise de description (corps de la page) ressemble à ceci : ....

Écrivons un exemple de document simple :

<ТIТLЕ>Exemple de page HTML

<ВОDY>Il s'agit d'une simple page illustrant la structure d'une description en HTML.

Étiqueter

Richard Bach

le seul

Nous avons parcouru un long chemin, n'est-ce pas ?

Nous nous sommes rencontrés il y a vingt-cinq ans. Ensuite, j'étais pilote, fasciné par le vol, et j'essayais de trouver le sens de la vie dans les lectures d'instruments. Il y a vingt ans, notre voyage nous a conduits dans un nouveau monde insolite, ouvert en grand par les ailes de la Mouette.

La fenêtre du navigateur s'affichera comme illustré à la Figure 1.4.

Illustration 1.4. Diviser en paragraphes.