/ / Exemple de page HTML et principes de base de la création

Un exemple de page HTML et les bases de la création

De nombreux langages ont été inventés, mais HTMLappartient aux plus spéciaux et aux plus recherchés. De nombreux autres débuts clés de la programmation y sont associés. Beaucoup devient disponible lorsque le développeur a la connaissance du langage de balisage - HyperText Markup Language (HTML).

exemple de page html

En gros, il n'y a rien de compliqué en HTML, et à traversdans quelques minutes, quiconque est le plus éloigné de la programmation et d'Internet créera une page HTML dans un bloc-notes. Un exemple qui mérite attention, simplicité, en effet, accessible à tous.

Description générale

Un fichier HTML est une page sur un site, bien que vous puissiez discuter avec cela, mais le fait qu'un fichier soit une page est compréhensible pour commencer.

Le fichier HTML commence par un en-tête DOCTYPE, dansqui indique que le type du fichier donné est HTML. Tous les éléments de page (balises) sont indiqués entre crochets. Chaque paire ("<" et ">") comprend une balise HTML. Habituellement, les balises HTML sont associées, c'est-à-dire que pour chaque "balise", il y a un "/ balise". Les deux sont entourés de crochets angulaires. Il existe des balises uniques, dont la plus populaire est "br /" - une transition vers la ligne suivante.

La plus grande balise du fichier est le HTML lui-même, enqui ne comprend que deux balises: HEAD et BODY. Dans le premier, diverses descriptions sont faites, des liens vers d'autres fichiers nécessaires à la page sont indiqués, des scripts PHP et JavaScript peuvent être présents. Le second enregistre le contenu de la page. Également sous forme de balises et de scripts.

Page HTML simple

Un exemple de création d'une telle page est donné ci-dessous dans l'article. Examinons cela attentivement.

L'exemple de l'auteur n'est pas une image

Section HEAD

Le but principal de la balise HEAD est de décrire généralement la page et les scripts courants, bien que ce dernier soit un concept assez relatif. Habituellement, seules deux choses sont importantes ici:

  • mots-clés et description de la page;
  • liens vers d'autres fichiers (* .css et * .js).

Pour afficher le contenu de la page, le contenu de cette section n'a qu'une signification indirecte, car il indique que quelque part dans d'autres fichiers, il existe des règles CSS pour les balises et les scripts d'autres langues.

La page HTML a un titre (TITLE) quis'affiche lorsque le visiteur déplace la souris sur l'onglet où la page est ouverte. C'est un point important, car cela rend la page beaucoup plus présentable, plus facile à dire, signée avec un texte lisible.

exemple de page Web html

Les balises META sont importantes dans la programmation Internet en général, mais lorsque vous devez créer une page HTML dans un bloc-notes, il n'est pas souhaitable d'encombrer l'exemple avec des constructions inutiles.

Les liens LINK et SCRIPT doivent être spécialementAttention. Le premier pointe vers l'emplacement où se trouve la feuille de style CSS, le second pointe vers l'emplacement du fichier de code JavaScript. Il peut y avoir de nombreux liens de ce type.

Si les scripts doivent être abordés lorsque la connaissanceSi le HTML est solidifié, les feuilles de style en cascade doivent être traitées immédiatement. Les fichiers CSS fournissent notamment les règles de mise en forme des balises HTML.

Section CORPS

En fait, l'exemple de page HTML estsection CORPS. C'est là que se trouvent toutes les informations, tout le contenu de la page du site. Toutes les informations sont présentées sous forme de balises et de scripts, comme l'insertion de code JavaScript ou de morceaux de programmes PHP.

Il est important de comprendre que l'exemple de page Web HTML dansnavigateur et le même exemple dans un éditeur de texte, en particulier le bloc-notes, c'est loin d'être la même chose. Dans le premier cas, nous avons un texte HTML prêt à l'emploi dans lequel tous les scripts sont exécutés. Par exemple, PHP a travaillé sa part et formé les balises nécessaires aux bons endroits au lieu de son code. JavaScript a également rempli sa mission, bien qu'il y ait encore une discussion séparée à ce sujet.

exemple de page HTML simple

Le HTML est des balises, pas des scripts. En fin de compte, le navigateur n'affiche que le contenu de la page, uniquement ses balises. Il n'y a pas de code PHP là-bas.

JavaScript est dans une position particulière, son souci est de servir la page non seulement au moment du chargement (rechargement), mais aussi aux moments où la page est dans le navigateur du visiteur, et qu'il l'étudie.

Un exemple de code de page HTML simple (section BODY uniquement) est présenté ci-dessous.

L'exemple de l'auteur n'est pas une image

Et dans le navigateur du visiteur, cela ressemble à ce qui suit.

L'exemple de l'auteur n'est pas une image

Le code ne spécifiait pas à quoi cela devrait ressembleréléments rendus par le navigateur. Tous les styles visibles sont dans les règles CSS. Dans ce cas, le fichier Mcss / scPhpWordRW.css qui a été référencé (voir le tout premier exemple de page HTML).

Contrairement au HTML, le thème CSS est plus simple, làdes règles très accessibles et leur nombre est petit, lorsque l'exemple de création d'une page HTML ne nécessite rien d'autre qu'un bloc-notes. Tout est très accessible pour un mastering instantané:

L'exemple de l'auteur n'est pas une image

Voici à quel point la balise est simplescLogo_vDoc, et cette description est telle que dans son état normal, la balise affiche l'image vDoc-logo.png, et lorsque la souris est dessus, vDoc-logo-h.png s'affiche.

Structure des descriptions HTML

Le langage n'implique aucune structure etle concept de syntaxe est ici très relatif. Il n'y a pas de variables ici, mais il y a des tonnes de possibilités. La base fondamentale de l'hypertexte est qu'il existe un élément (balise) qui a nécessairement un nom.

Le nom, dans le cas d'une balise appariée, est composé du nom réel (tagName) et des crochets ("<" + tagName + ">"), s'il s'agit du début d'une balise, et "</" + tagName + ">", s'il est écrit à sa fin.

Un exemple de page HTML décrivant les attributs se trouve ci-dessous dans le texte.

L'exemple de l'auteur n'est pas une image

La balise peut avoir des attributs, puis ils sont placésun espace après le nom de la balise avant le crochet de fermeture ">". Les attributs, si la balise en possède, ne sont écrits qu'au début de la balise. Le contenu de la balise correspond à ce qui se trouve entre le début de la balise et sa fin.

Contenu général des descriptions HTML

HTML vous permet de décrire en bloc et en ligneéléments. Les premiers occupent une certaine zone dans la fenêtre du navigateur, peuvent être positionnés de manière absolue, c'est-à-dire au bon endroit dans la zone d'affichage de la page HTML, et ont une taille spécifique.

exemple de création de page html

Les éléments en ligne sont généralement affichésun flux, c'est-à-dire que les pages ont été spécifiées dans le fichier, et sont affichées à l'écran. L'affichage du flux global peut être influencé lors du chargement de la page. Le placement, la visibilité et d'autres propriétés des éléments de bloc peuvent être influencés à tout moment via le code JavaScript.

Outre des éléments simples, HTML propose de décrire des tableaux et des formulaires. Ces éléments sont très demandés dans la "construction de sites au quotidien".

Description du tableau: balises TABLE, TR, TD

À l'aide de la balise TABLE, vous pouvez créer une table,indiquer un certain nombre de lignes TR et dans chaque ligne un certain nombre de cellules TD. Contrairement à l'organisation tabulaire habituelle, en raison des particularités du balisage HTML, l'organisation tabulaire est limitée à cette déclaration, donc si le développeur veut avoir un tableau rectangulaire dans lequel le nombre de colonnes dans toutes les lignes est le même, alors il doit surveiller ceci indépendamment.

exemple de code de page html

Position HTML principale:faire tout ce qui est indiqué, mais rien qui ne soit compris. Dans certains cas, le nombre de colonnes dans chaque ligne du tableau n'est pas si important, mais si vous devez fusionner des cellules verticalement ou horizontalement, vous devrez tout compter très soigneusement.

Un exemple de page HTML décrivant un tableau simple est clairement présenté dans l'article.

L'exemple de l'auteur n'est pas une image

Voici un tableau à trois rangées par troiscolonnes, et dans la première ligne, au lieu de la balise TD, la balise TH a été utilisée - l'en-tête de colonne. Ces deux balises n'ont pas beaucoup de différence, mais vous pouvez utiliser la première pour distinguer la première ligne du tableau, et en CSS, vous pouvez attacher votre propre style à TH, ce qui le distingue favorablement des autres TD.

Description du formulaire: balises FORM, INPUT

Les formulaires sont la partie la plus demandée des balises HTML. À l'aide de formulaires, vous pouvez transférer des informations. En fait, la page elle-même est la sortie d'informations, mais le formulaire est son entrée.

Un exemple de page HTML décrivant un formulaire simple:

L'exemple de l'auteur n'est pas une image

Il existe de nombreuses autres façons d'utiliser les formulaires, maisles principales possibilités sont les suivantes. Vous pouvez spécifier des champs de saisie, leur attribuer l'apparence et les gestionnaires pour analyser les entrées de l'utilisateur. Vous pouvez spécifier des champs masqués et transmettre des informations d'arrière-plan à partir de la page. Vous pouvez désigner les boutons de transfert des informations, en cliquant sur ceux qui lancent le processus de transfert des informations.

Utilisation du HTML

Connaître le langage de l'hypertexte est un prérequistravailler dans n'importe quelle spécialisation dans le domaine de la programmation Internet, mais si vous avez besoin d'écrire des programmes en PHP ou JavaScript, alors vous devez parfaitement connaître HTML + CSS.

Le langage PHP a été indiqué dans l'exemple précédent.PHP fonctionne sur le serveur, donc la page avec ce formulaire a volé du serveur vers le navigateur avec des champs remplis. En particulier, la fonction TestOnBlur mentionnée dans la balise INPUT (gestionnaire d'événements onblur) a reçu tous les paramètres sous forme de champs de texte.

création d'une page html dans un exemple de bloc-notes

JavaScript est en cours d'exécution dans le navigateur et pourle bouton pour renvoyer les données au serveur fonctionnait correctement, c'est-à-dire que la construction: onclick = jQuery ("# ​​to"). val ("cart"), vous devez avoir une idée non seulement de ce que jQuery est, mais aussi ce qu'est #to, val, cart. Plus précisément, vous devez connaître les balises HTML de base et les règles générales pour leur appliquer des styles CSS.

C'est bien suffisant pour élever rapidement vos qualifications dans toute spécialisation dans le domaine de la programmation Internet.