Envoyer votre bon travail dans la base de connaissances est simple. Utilisez le formulaire ci-dessous

Les étudiants, étudiants diplômés, jeunes scientifiques qui utilisent la base de connaissances dans leurs études et leur travail vous seront très reconnaissants.

• • Introduction
  • 1. Informations de base
  • 1.1 À propos du langage HTML
  • 1.2 Création d'un site Internet
  • 1.3 Fondamentaux
  • 1.4 Structure du document
  • 1.5 Balises du corps du document
  • 1.6 Liste des balises HTML de base
  • 2. Informations complémentaires
  • 2.1 Balises de liste
  • 2.2 Liens hypertextes
  • 2.3 Graphiques dans un document
  • 2.4 Ajouter des styles à un document
  • 2.5 Balises HTML spéciales
  • 2.6 Formulaires HTML
  • 2.7 Cadres HTML
  • 2.8 Tableaux HTML
  • 2.9 Optimisation des graphiques pour le Web
  • 2.10 Bases CSS
  • 3. Description de la création du site
  • 3.1 Préparation
  • 3.2 Création d'une page d'accueil
  • 3.3 Création d'une deuxième page
  • 3.4 Création d'une page avec une description de la ville
  • 3.5 Page photos
  • 3.6 Page Programmes
  • 3.7 Page de remerciements
  • Conclusion
  • Liste de la littérature utilisée

Introduction

Cette thèse est consacrée au langage HTML. En utilisant ce langage, des fichiers avec l'extension *.htm et *.html sont créés, qui sont des pages Web. Les sites Internet en sont constitués.

Un site Web est joint à la thèse comme exemple de ce qui peut être créé en utilisant HTML.

L'ensemble du travail est divisé en 3 sections. La première section est entièrement consacrée à la description des principales balises HTML. Il vous donnera toutes les informations dont vous avez besoin pour créer des pages Web simples. La deuxième section contient des informations sur la manière d'améliorer l'apparence du document et d'y intégrer des fonctionnalités supplémentaires. Et la troisième section contient une description de la manière dont le site Internet joint à cette thèse a été créé. Il décrit en détail un mois et demi de travail acharné pour créer le site, parle de diverses erreurs lors de la création et de leur correction, des difficultés survenues et des méthodes pour les éliminer.

Après avoir lu cet ouvrage, n'importe qui, même ceux qui ne sont absolument pas familiers avec la programmation, sera capable de comprendre les bases de la programmation HTML. Et ceux qui savent trouveront peut-être quelque chose de nouveau pour eux-mêmes.

1. Informations de base

1.1 À PROPOSlangueHTML

Hyper Text Markup Language (HTML) est un langage standard conçu pour créer des documents hypertextes dans l'environnement WEB. Les documents HTML peuvent être visualisés par différents types de navigateurs WEB. Lorsqu'un document est créé en HTML, un navigateur WEB peut interpréter le HTML pour mettre en évidence les différents éléments du document et les traiter en premier. L'utilisation de HTML permet de formater les documents afin qu'ils puissent être présentés à l'aide de polices, de lignes et d'autres éléments graphiques sur n'importe quel système qui les visualise.

La plupart des documents comportent des éléments standard tels qu'un titre, des paragraphes ou des listes. À l'aide de balises HTML, vous pouvez désigner ces éléments, en fournissant aux navigateurs WEB le minimum d'informations pour afficher ces éléments, tout en conservant la structure globale et l'exhaustivité informationnelle des documents. Il suffit pour lire un document HTML d'avoir un navigateur WEB qui interprète les balises HTML et affiche le document à l'écran sous la forme que lui donne l'auteur.

Dans la plupart des cas, l'auteur du document détermine strictement l'apparence du document. Dans le cas du HTML, le lecteur, en fonction des capacités du navigateur WEB, peut, dans une certaine mesure, contrôler l'apparence du document (mais pas son contenu). HTML vous permet de marquer l'endroit où un titre ou un paragraphe doit apparaître dans un document à l'aide d'une balise HTML, puis de laisser le navigateur WEB interpréter ces balises. Par exemple, un navigateur WEB peut reconnaître le début d’une balise de paragraphe et présenter le document sous la forme souhaitée, tandis qu’un autre n’a pas cette capacité et présente le document sur une seule ligne. Les utilisateurs de certains navigateurs WEB ont également la possibilité de personnaliser la taille et le type de police, la couleur et d'autres paramètres qui affectent l'affichage du document.

Les balises HTML peuvent être grossièrement divisées en deux catégories :

1. Des balises qui déterminent comment le corps du document dans son ensemble sera affiché par le navigateur WEB.

2. Balises qui décrivent les propriétés générales du document, telles que le titre ou l'auteur du document.

N'oubliez pas que le principal avantage du HTML est que votre document peut être visualisé sur différents types de navigateurs Web et sur différentes plateformes.

1.2 Créationla toilesite

Les documents HTML peuvent être créés à l'aide de n'importe quel éditeur de texte ou d'éditeurs et convertisseurs HTML spécialisés. Le choix de l'éditeur qui sera utilisé pour créer des documents HTML dépend uniquement de la commodité et des préférences personnelles de chaque auteur.

Par exemple, les éditeurs HTML, comme Netscape Navigator Gold de Netscape, permettent de créer des documents graphiquement en utilisant la technologie WYSIWYG (What You See Is What You Get). D'autre part, la plupart des outils de création de documents traditionnels disposent de convertisseurs qui permettent de convertir des documents au format HTML.

1.3 Basiquedes provisions

Toutes les balises HTML commencent par "<" (левой угловой скобки) и заканчиваются символом ">" (crochet à angle droit). Généralement, il y a une balise de début et une balise de fin. Par exemple, voici les balises de titre, qui définissent le texte à l'intérieur des balises de début et de fin qui décrivent le titre du document :

La balise de fin ressemble à la balise de début et en diffère par une barre oblique avant le texte entre crochets angulaires. Dans cet exemple, la balise - sur l'achèvement du texte du titre.

Certaines balises telles que

(balise qui définit un paragraphe) ne nécessite pas de balise de fin, mais son utilisation confère au texte source du document une lisibilité et une structure améliorées.

HTML n'est pas sensible à la casse, donc l'exemple ci-dessus pourrait ressembler à ceci :

Attention! Les espaces supplémentaires, les tabulations et les retours chariot ajoutés au texte source d'un document HTML pour une meilleure lisibilité seront ignorés par le navigateur WEB lors de l'interprétation du document. Un document HTML ne peut inclure les éléments ci-dessus que s'ils sont placés à l'intérieur de balises

ET

. Plus de détails sur les balises

Il sera écrit ci-dessous.

1.4
Structuredocument
Lorsqu'un navigateur WEB reçoit un document, il détermine comment le document doit être interprété.  La toute première balise qui apparaît dans le document doit être la balise .  Cette balise indique au navigateur WEB que votre document est rédigé en HTML.  Un document HTML minimal ressemblerait à ceci :
Corps du document...
En-tête du document .  La balise d'en-tête du document doit être utilisée immédiatement après la balise et nulle part ailleurs dans le corps du document.  Cette balise représente une description générale du document.  Évitez de placer du texte à l'intérieur de la balise .  Balise de début placé juste avant le tag 
Attention!  Techniquement, les balises de début et de fin comme , Et facultatif.  Mais il est fortement recommandé de les utiliser, puisque l'utilisation de ces balises permet au navigateur WEB de séparer en toute confiance la partie en-tête du document et la partie sémantique elle-même.
Titre du document , situé à l'intérieur -tags, comme le montre l'exemple ci-dessus.  Le titre du document n'apparaît pas lorsque le document lui-même est affiché dans la fenêtre.
Commentaires.  Comme tout langage, HTML permet d'insérer des commentaires dans le corps d'un document, qui sont enregistrés lors du transfert du document sur le réseau, mais ne sont pas affichés par le navigateur.  Syntaxe des commentaires :

Les commentaires peuvent apparaître n’importe où dans un document et en n’importe quelle quantité.
1.5
Mots cléscorpsdocument

Les balises de corps de document identifient les composants du document HTML affiché dans la fenêtre.  Le corps du document peut contenir des liens vers d'autres documents, du texte et d'autres informations formatées.
Corps du document .  Le corps du document doit être entre les balises Et.  Il s'agit de la partie du document qui est affichée sous forme d'informations textuelles et graphiques (sémantiques) de votre document.
Niveaux de titre .  Lorsqu'un document HTML est écrit, le texte est structurellement divisé en texte uniquement, en-têtes de parties du texte, en-têtes de niveau supérieur, etc.  Le premier niveau de titres (le plus grand) est indiqué par le chiffre 1, le suivant - 2, etc.  La plupart des navigateurs prennent en charge l'interprétation de six niveaux de titres, donnant à chacun son propre style.  Les en-têtes au-dessus du niveau six ne sont pas standard et peuvent ne pas être pris en charge par le navigateur.  Le titre de niveau supérieur possède l'attribut « 1 ».  La syntaxe de l'en-tête de niveau 1 est la suivante :
En-tête de premier niveau
Les titres d'un autre niveau peuvent généralement être représentés comme suit :
En-tête de niveau X
où x est un nombre de 1 à 6 qui détermine le niveau du titre.
Balise de paragraphe 
Contrairement à la plupart des traitements de texte, les retours chariot sont généralement ignorés dans un document HTML.  Un saut de paragraphe physique peut être situé n'importe où dans le texte source du document (pour le rendre plus facile à lire).  Cependant, le navigateur ne sépare les paragraphes que s'il existe une balise 
Si vous ne séparez pas les paragraphes avec la balise 
Votre document apparaîtra sous la forme d’un grand paragraphe.
Paramètres de balise supplémentaires 
Vous permet d’aligner un paragraphe respectivement à gauche, au centre et à droite.
Centrage des éléments du document.  Vous pouvez centrer tous les éléments du document dans la fenêtre du navigateur.  Pour cela vous pouvez utiliser la balise 
.

Tous les éléments entre les balises 
Et sera au centre de la fenêtre.

Balise de préformatage 
Balise de préformatage, 
Permet au texte d'être présenté avec un formatage spécifique à l'écran.  Le texte préformaté se termine par une balise de fin
.  Dans le texte préformaté, vous êtes autorisé à utiliser :

a) saut de ligne
b) caractères de tabulation (décalage de 8 caractères vers la droite)
c) une police disproportionnée installée par le navigateur.
Utiliser des balises qui définissent le format du paragraphe, telles que ou 
, sera ignoré par le navigateur lorsqu'il sera placé entre des balises 

  


Cette liste contient les noms, prénoms et patronymes
tous les salariés de notre entreprise. 





La liste ne peut être utilisée qu'à des fins officielles.
Attention!  L'en-tête « Liste des employés » n'est pas affiché par le navigateur dans le cadre du document.  Il apparaîtra dans la barre de titre de la fenêtre du navigateur.
Saut de ligne 
.  Étiqueter 
informe le navigateur d'un saut de ligne.  Le meilleur exemple d'utilisation de cette balise est dans une adresse formatée ou toute autre séquence de lignes où le navigateur doit les afficher les unes en dessous des autres.  Par exemple:
Alexeï Iartsev 
Autoroute Dmitrov, 
9B, bureau 326 

Un paramètre supplémentaire vous permet d'étendre les capacités de la balise 
.


Ce paramètre vous permet non seulement d'effectuer un saut de ligne, mais aussi de placer la ligne suivante en partant de la bordure vierge gauche (gauche), droite (droite) ou des deux (toutes) bordures de la fenêtre du navigateur.  Par exemple, s'il y a une image à côté du texte à gauche, vous pouvez utiliser la balise 
pour décaler le texte sous l'image :
Comme vous pouvez le voir, ce schéma montre la connexion 
 Maître/Partie
.

Ligne incassable .  Si vous ne souhaitez pas que le navigateur enveloppe automatiquement une ligne, vous pouvez la marquer avec des balises Et.  Dans ce cas, le navigateur n'enroulera pas la ligne même si elle dépasse l'écran ;  au lieu de cela, le navigateur vous permettra de faire défiler la fenêtre horizontalement.  Par exemple: ce qui ne permet aucun partitionnement nulle part
Si vous souhaitez toujours autoriser le fractionnement de cette ligne en deux, mais dans un endroit strictement prévu, alors insérez la balise à cet endroit.  Par exemple: Cette ligne est la plus longue du document, ce qui ne permet aucun partitionnement nulle part
Cette ligne est la plus longue du document,
ce qui ne permet aucun partitionnement nulle part.
Citation 
.  Cette balise est destinée à indiquer une citation provenant d'une autre source dans un document.  Texte de l'étiquette 
, met en retrait 8 espaces à partir du bord gauche du document.  Par exemple : A l'ouverture de cette conférence, le chef du bureau de représentation a déclaré : 
 
Aujourd’hui est l’un des plus beaux jours pour notre entreprise. 
Nous avons découvert une nouvelle technologie qui permet à nos clients d'augmenter plusieurs fois les performances de leurs systèmes de bureau.

Lorsqu'il est affiché par le navigateur, ce texte ressemblera à ceci :
A l'ouverture de cette conférence, le chef du bureau de représentation a déclaré :
Aujourd’hui est l’un des plus beaux jours pour notre entreprise.  Nous avons découvert une nouvelle technologie qui permet à nos clients d'augmenter plusieurs fois les performances de leurs systèmes de bureau.

1.6
ListebasiqueMots clésHTML

Tableau n°1 : Balises principales

Départ


Final


Description








Notation des documents HTML








En-tête du document








Titre du document








Corps du document








Titre de paragraphe de premier niveau








Titre de paragraphe de deuxième niveau








Titre de paragraphe de troisième niveau








Titre de paragraphe de quatrième niveau








Titre de paragraphe de cinquième niveau








Titre de paragraphe de niveau 6
















Texte riche








Saut de ligne sans fin de paragraphe











Les balises décrites précédemment sont tout ce dont vous avez besoin pour commencer à travailler avec HTML.
À l'aide des balises décrites, vous pouvez créer un simple document HTML.  Cependant, les sections suivantes vous permettront d'améliorer considérablement l'apparence de vos documents et de décrire les nouvelles fonctionnalités du HTML.
2. Informations Complémentaires

2.1
Mots cléslistes


Il existe trois principaux types de listes dans un document HTML :
a) numéroté
b) non numéroté
c) liste des descriptions
Vous pouvez créer des listes imbriquées en utilisant différentes balises de liste ou en les répétant les unes dans les autres.  Pour ce faire, il vous suffit de placer une paire de balises (début et fin) dans l’autre.  Le fait que les éléments de liste imbriqués aient les mêmes marqueurs désignant l'élément de liste dépend du navigateur.  Pour plus de détails, consultez la section « Listes imbriquées ».
Listes numérotées.  Dans une liste numérotée, le navigateur insère automatiquement les numéros d'éléments dans l'ordre.  Cela signifie que si vous supprimez un ou plusieurs éléments d'une liste numérotée, les nombres restants seront automatiquement recalculés.
 
et se termine par la balise
 
.  Par exemple:

 
La programmation 
Algorithmisation 
Conception

1. Programmation
2. Algorithmisation
3. Conception
Étiqueter 
peut avoir des paramètres :


Type de compteur :
A - lettres latines majuscules (A,B,C...)
a - petites lettres latines (a,b,c...)
I - grands chiffres romains (I,II,III...)
i - petits chiffres romains (i,ii,iii...)
1 - nombres réguliers (1,2,3...)
Le numéro à partir duquel le compte à rebours commence
Par exemple:
 
La programmation 
Algorithmisation 
Conception

XV.  La programmation
XVI.  Algorithmisation
XVII.  Conception.
Listes non numérotées.  Pour les listes non numérotées, le navigateur utilise généralement des puces pour marquer l'élément de la liste.  Le type de marqueur est généralement configuré par l'utilisateur du navigateur.
Une liste numérotée commence par une balise de début 
et se termine par la balise
.  Chaque élément de la liste commence par une balise 
.  Par exemple:

 
La programmation 
Algorithmisation 
Conception

· La programmation
· Algorithmisation
· Conception
Étiqueter 
peut avoir un paramètre :


Type de balise 
définit l'apparence du marqueur comme étant l'apparence par défaut (disque), circulaire (cercle) ou carrée (carré).  Par exemple:

 
La programmation 
Algorithmisation 
Conception

§ La programmation
§ Algorithmisation
§ Conception
Listes imbriquées.  Donnons un exemple de listes imbriquées :
     
Liste des salariés de notre entreprise
 
Compilé : 30 juillet 1996
Cette liste contient les noms, prénoms et patronymes de tous les salariés de notre entreprise. 
La liste ne peut être utilisée qu'à des fins officielles. 
 
 
Direction 
 
Ivanov I.I. 
Petrov K.V.
 
Département commercial 
 
Varshavskaïa E.L. 
Samsonov D.M.
 
  

Voici ce que vous verrez sur l'écran de votre navigateur :
Liste des salariés de notre entreprise

Cette liste contient les noms, prénoms et patronymes de tous les salariés de notre entreprise.
La liste ne peut être utilisée qu'à des fins officielles.
1. Direction
o Ivanov I.I.
o Petrov K.V.
2. Service marketing
o Varshavskaya E.L.
o Samsonov D.M.
Élément de liste 
.

Étiqueter 
peut avoir des paramètres :

ou 

en fonction du type de liste dans lequel se trouve l'élément.
Type de marqueur (voir. 
) ou compteur (voir OL)

La valeur de l'élément de liste numéroté (son numéro).  Tous les autres nombres d'éléments de liste seront comptés à partir de ce nombre.
Par exemple:
 
La programmation 
Algorithmisation 
Conception

XV.  La programmation
XVI.  Algorithmisation
XVII.  Conception
Liste de définitions.
La liste des définitions commence par une balise 
et se termine par la balise
.  Cette liste permet de créer des listes de type "terme" - "description".  Chaque terme commence par une balise 
, et la description est une balise 
.  Par exemple:

 
 Département commercial 
  
 Département financier 
  
 Département des Ressources Humaines 
  

Départementcommercialisation
Ce département est engagé dans la promotion des produits et services
FinancierDépartement
Ce département s'occupe de toutes les transactions financières
Départementpersonnel
Ce service est chargé de la comptabilité et du recrutement des nouveaux salariés de l'entreprise, de la répartition des vacances, du suivi des arrêts maladie, etc.

Les liens hypertextes sont un élément clé qui rend le WEB attractif pour les utilisateurs.  En ajoutant des liens hypertextes (ci-après dénommés liens), vous constituez un ensemble de documents connectés et structurés, qui permet à l'utilisateur d'obtenir les informations dont il a besoin le plus rapidement et le plus facilement possible.
Les liens ont un format standard qui permet au navigateur de les interpréter et d'exécuter les fonctions nécessaires (méthodes d'appel) en fonction du type de lien.  Les liens peuvent pointer vers un autre document, un emplacement spécial dans un document donné, ou remplir d'autres fonctions, telles que demander un fichier via FTP pour l'afficher par le navigateur.  Une URL peut pointer vers un emplacement spécifique dans un chemin absolu, ou elle peut pointer vers un document dans le chemin actuel, ce qui est souvent utilisé lors de l'organisation de grands sites WEB structurés.
Attention!  Vous pouvez utiliser des liens à la fois pour vous déplacer dans un document et pour passer d'un document à un autre.  Cependant, HTML ne prend pas en charge le retour au lien précédent si le mouvement s'est produit à l'intérieur du document.  Si vous utilisez des liens dans un document et que vous appuyez ensuite sur la touche Retour, vous n'accéderez pas au lien précédent, mais reviendrez à la partie du document que vous consultiez auparavant.
URL.  HTML utilise une URL (Uniform Resource Locator) pour représenter des liens hypertextes et des liens vers des services en ligne au sein d'un document HTML.  La première partie de l'URL (avant les deux points) décrit la méthode d'accès ou le service réseau.  L'autre partie de l'URL (après les deux points) est interprétée en fonction de la méthode d'accès.  En règle générale, deux barres obliques après deux points indiquent le nom de la machine :
méthode://nom-machine/path/foo.html
L'exemple suivant est un appel au document HTML index.html depuis le serveur www.softexpress.com utilisant le protocole HTTP :
http://www.softexpress.com/index.html
Le localisateur de ressources uniformes a le format suivant :
méthode://nom du serveur:port/nom du chemin#ancre
Décrivons chacun des composants de l'URL :
MÉTHODE.  Le nom de l'opération qui sera effectuée lors de l'interprétation de cette URL.  Méthodes les plus couramment utilisées :
lire un fichier à partir du disque local.  Le nom du fichier est interprété pour la machine locale de l'utilisateur.  Cette méthode est utilisée pour afficher n'importe quel fichier situé sur la machine de l'utilisateur.  Par exemple : file:/home/alex/index.html - affiche le fichier index.html du répertoire /home/alex sur la machine de l'utilisateur
accès à une page WEB sur le réseau grâce au protocole HTTP.  (Il s'agit de la méthode la plus couramment utilisée pour accéder à n'importe quel document HTML sur le Web.)  Par exemple : http://www.softexpress.com/ - accès à la page d'accueil de la société SoftExpress
demande de fichier depuis un serveur FTP anonyme.  Par exemple : ftp://nomhôte/répertoire/nomfichier
active une session de messagerie avec l'utilisateur et l'hôte spécifiés.  Par exemple : mailto : [email protégé]- active une session d'envoi de messages à l'utilisateur d'informations sur la machine softexpress.com, si le navigateur prend en charge le courrier électronique.  Veuillez noter que la méthode mailto: ne nécessite pas de barres obliques après les deux points (en règle générale, l'adresse e-mail de l'abonné suit immédiatement les deux points)
appeler le service telnet
appelez le service de nouvelles, si le navigateur le prend en charge.  Par exemple : news:relcom.www.support
NOM DU SERVEUR.  Paramètre facultatif qui décrit le nom de réseau complet de la machine.  Par exemple : www.softexpress.com est le nom de réseau complet du serveur SoftService.
Si le nom du serveur n'est pas spécifié, alors le lien est considéré comme local et le chemin complet spécifié plus loin dans l'URL est calculé sur la machine à partir de laquelle le document HTML contenant le lien a été extrait.  Une adresse IP peut être utilisée à la place d'un nom de machine symbolique, mais cela n'est pas recommandé en raison d'interférences possibles avec les adresses locales fixes sur le réseau interne.
PORT.  Numéro du port TCP sur lequel fonctionne le serveur WEB.  Si le port n'est pas précisé, alors le port par défaut est utilisé 80. Ce paramètre (port) n'est pas utilisé dans la grande majorité des URL.
NOM DE CHEMIN.  Chemin d'accès partiel ou complet au document qui doit être appelé suite à l'interprétation de l'URL.  Différents serveurs WEB sont configurés différemment pour interpréter le chemin d'accès au document.  Par exemple, lors de l'utilisation de scripts CGI (programmes exécutables), ils sont généralement collectés dans un ou plusieurs répertoires dédiés, dont le chemin d'accès est inscrit dans les paramètres spéciaux du serveur WEB.  Pour ces répertoires, le serveur WEB attribue un chemin logique spécial, qui est utilisé dans l'URL.  Si le serveur WEB voit ce chemin, alors le fichier demandé est interprété comme un module exécutable.  Dans le cas contraire, le fichier demandé est interprété simplement comme un fichier de données, même s'il s'agit d'un module exécutable.  Par exemple : http://www.softexpress.com/cgi-win/handle.exe
Dans cet exemple, le serveur HTTP appellerait un script CGI appelé handle.exe, qui réside sur une machine portant le nom de réseau www.softexpress.com.  Le chemin d'accès à ce script - /cgi-win/ - est en réalité un chemin virtuel (un serveur dédié aux modules exécutables).  Veuillez noter que lors de la description du chemin, une syntaxe de type UNIX est utilisée, où, contrairement à DOS et Windows, des barres obliques sont utilisées à la place des barres obliques inverses.  Si le nom réseau de la machine est immédiatement suivi du nom du document, alors celui-ci doit se trouver dans le répertoire racine de la machine distante ou (le plus souvent) dans le répertoire alloué par le serveur WEB comme répertoire racine.  Si l'URL se termine par le nom réseau de la machine, alors le document du répertoire racine de la machine distante portant le nom défini dans les paramètres du serveur WEB (généralement index.html) est demandé comme document.
#ANCRE.  Cet élément est un lien vers une ligne (point) à l'intérieur d'un document HTML.  La plupart des navigateurs, rencontrant cet élément après le nom du document, placent le document à l'écran de telle manière que la ligne de document spécifiée soit placée dans la ligne supérieure de la fenêtre de travail du navigateur.  Les points référencés par #anchor sont indiqués dans le document à l'aide de la balise NAME, comme décrit ci-dessous.
Structure des liens dans un document HTML.  Jusqu’à présent, nous n’avons examiné que l’apparence de l’URL.  Pour que le navigateur affiche un lien vers une URL, vous devez marquer l'URL avec des balises spéciales dans le document HTML.  La syntaxe HTML pour ce faire est la suivante :
texte à mettre en surbrillance sous forme de lien
La balise ouvre la description du lien et la balise la ferme.  Tout texte situé entre ces deux balises est mis en évidence de manière particulière par le navigateur Web.  Généralement, ce texte apparaît souligné et en bleu (ou dans une autre couleur définie par l'utilisateur).  Le texte qui représente l'URL n'est pas affiché par le navigateur, mais est utilisé uniquement pour effectuer les actions prévues lorsque le lien est activé (généralement lorsque la souris clique sur le texte en surbrillance ou souligné).  Voici un exemple de segment de document HTML :
Pour un exemple, voir Texte qui apparaîtra dans la première ligne du navigateur

Texte
Par exemple:
Liste des rubriques
 
 
Section 1
 
Section 2
 
 
Section 1
 
 
Texte de la section 1
 
 
Section 2
 
 
Texte de la section 2 

Liste des rubriques
o Section 1
o Section 2
Texte de la section 1
Texte de la section 2
Le symbole "#ex1" indique à votre navigateur de rechercher un marqueur appelé "ex1" dans ce document HTML.
Lorsque l'utilisateur clique sur la ligne "Section 1", le navigateur ira directement à la section 1.
Attention!  Comme indiqué précédemment dans la syntaxe URL, un marqueur de section peut être placé soit dans le même document en cours de visualisation, soit dans un document différent.  Dans le second cas, le navigateur chargera un autre document et passera à la section qui lui est spécifiée.
2.3
Arts graphiquesà l'intérieurdocument
L'une des fonctionnalités les plus attrayantes du Web est la possibilité d'inclure des liens vers des graphiques et d'autres types de données dans un document HTML.  Cela se fait à l'aide d'une balise .  L'utilisation de cette balise peut améliorer considérablement l'apparence et la fonctionnalité des documents.
Il existe deux manières d'utiliser des graphiques dans des documents HTML.  La première est l'intégration d'images graphiques dans le document, qui permet à l'utilisateur de voir les images directement dans le contexte d'autres éléments du document.  Il s’agit de la technique la plus utilisée dans la conception de documents, parfois appelée « image en ligne ».  Syntaxe des balises :

Décrivons les éléments de la syntaxe des balises :
Paramètre obligatoire qui a la même syntaxe qu'une URL standard.  Cette URL indique au navigateur où se trouve l'image.  L'image doit être stockée dans un format graphique pris en charge par le navigateur.  Aujourd'hui, les formats GIF et JPG sont pris en charge par la plupart des navigateurs.
Cet élément facultatif spécifie le texte qui sera affiché dans un navigateur qui ne prend pas en charge les graphiques ou avec l'échange d'images désactivé.  Il s'agit généralement d'une brève description de l'image que l'utilisateur pourrait ou pourra voir à l'écran.  Si ce paramètre est absent, alors à la place de l'image, la plupart des navigateurs affichent un pictogramme (icône) qui, lorsqu'il est activé, l'utilisateur peut voir l'image.  La balise ALT est recommandée si vos utilisateurs utilisent un navigateur ne prenant pas en charge le mode graphique, tel que Lynx.
Ce paramètre facultatif permet de spécifier la hauteur de l'image en pixels.  Si ce paramètre n'est pas précisé, la hauteur d'origine de l'image est utilisée.  Cette option vous permet de réduire ou d'étirer les images verticalement, vous permettant ainsi de définir plus clairement l'apparence de votre document.  Cependant, certains navigateurs ne prennent pas en charge cette option.  En revanche, la résolution de l'écran de votre client peut être différente de la vôtre, soyez donc prudent lorsque vous définissez la valeur absolue d'un objet graphique.
Le paramètre est également facultatif, comme le précédent.  Vous permet de définir la largeur absolue de l'image en pixels.
Ce paramètre est utilisé pour indiquer au navigateur où placer le prochain bloc de texte.  Cela vous permet de définir plus strictement la disposition des éléments à l'écran.  Si cette option n'est pas utilisée, la plupart des navigateurs placent l'image à gauche de l'écran et le texte à droite de celui-ci.
Ce paramètre indique au navigateur que cette image permet à l'utilisateur d'effectuer une action en cliquant sur un emplacement spécifique de l'image.  Cette fonctionnalité est une extension de HTML et sera abordée plus tard.
Voici un exemple d'utilisation de cette balise :

Depuis HTML 2.0, la balise des paramètres supplémentaires sont apparus :

Nouvelles options :

Permet de définir la taille en pixels de l'espace vide au-dessus et en dessous de l'image afin que le texte ne chevauche pas l'image.  Ceci est particulièrement important pour les images générées dynamiquement, lorsqu'il est impossible de voir le document à l'avance.
Identique à VSPACE, mais uniquement horizontalement.
Images d’arrière-plan.  La plupart des navigateurs vous permettent d'inclure une image d'arrière-plan dans votre document, qui sera matricielle et affichée en arrière-plan de l'ensemble du document.  Certains utilisateurs aiment les graphiques d’arrière-plan, d’autres non.  Un motif (papier peint) discret et translucide convient généralement comme arrière-plan à la plupart des documents.
La description de l'image d'arrière-plan est incluse dans la balise BODY et ressemble à ceci :
.


où chaque paramètre détermine la couleur d'un élément particulier.  Décrivons ces paramètres :
Couleur d'arrière-plan du document
Couleur du texte brut du document


Cette ligne spécifie que la couleur d'arrière-plan du document est blanche, le texte noir et les liens argentés.
Ligne horizontale.  Utiliser une balise 
, vous pouvez séparer le texte par une ligne horizontale.

Format des balises :
nombre|pourcentage ALIGN=gauche|droite|centre NOSHADE>

Paramètres de la balise :
Épaisseur du trait en pixels.
Largeur de ligne en pixels ou pourcentage de la largeur de la fenêtre du navigateur.
Position sur l'écran (gauche | centre | droite).
Par défaut, la ligne est présentée en 3D avec une ombre.  NOSHADE vous permet de présenter une ligne comme une simple bande sombre monochromatique.
2.4
AjoutmodesVdocument
HTML vous permet d'utiliser différents styles de police pour mettre en évidence les informations textuelles dans vos documents.  Voici une courte liste de styles pris en charge par la plupart des navigateurs :
audacieux
italique (oblique)
mono-espacement (machine à écrire - utilisant des polices fixes)
Vous pouvez combiner différents types de styles, tels que les styles audacieux et inclinés.
Tableau n°2 : Styles de texte de base
La combinaison de styles permet d'afficher plusieurs éléments sur une seule ligne avec des styles différents, par exemple :
Vie - Ce chanson!
Vie - Ce
chanson!

Attention ! L'ajout d'un grand nombre de styles et de leurs combinaisons rend le texte difficile à lire !
Styles supplémentaires :
grand
· petit petit)
· sous (interlinéaire)
· sup (exposant)
· Tableau n°3 : Styles de texte supplémentaires
Taille de police .  Vous pouvez modifier la taille de la police à l'aide de la balise :


La taille de la police peut être comprise entre 1 et 7. Vous pouvez spécifier directement la taille de la police avec un nombre ou spécifier un décalage par rapport à la valeur de base (par défaut - 3) dans une direction positive ou négative.  La valeur de base peut être modifiée à l'aide de la balise :

Par exemple:
Et hm en en Et e

changement
Couleur de la police .  Vous pouvez changer la couleur de la police à l'aide de la balise :

Rouge Vert Bleu
Rouge Vert Bleu
2.5
SpécialMots clésHTML

Les balises suivantes vous permettront de rendre votre document HTML plus fonctionnel.
Étiquette d'adresse 
.  Étiqueter 
utilisé pour mettre en évidence l'auteur du document et son adresse (par exemple, e-mail).  Syntaxe:


Séquences d'échappement.  Certains caractères sont des caractères de contrôle en HTML et ne peuvent pas être utilisés directement dans un document :
1) équerre gauche "<"
2) équerre droite ">"
3) esperluette "&"
4) guillemets doubles """
Pour utiliser ces caractères dans un document, vous devez les remplacer par des séquences d'échappement :
Tableau n°4 : Séquences d'échappement
Il existe un grand nombre de séquences d'échappement pour les caractères spéciaux, tels que " " pour le signe © et ® pour le signe ®, introduits dans HTML 2.0.  L'une des fonctionnalités est le remplacement des caractères dans la 2ème partie de la table des symboles (après le 127ème caractère) par des séquences d'échappement pour la transmission de fichiers texte avec les langues nationales​​sur des canaux 7 bits.
Attention : les séquences d'échappement sont sensibles à la casse : elles NE PEUVENT PAS être utilisées à la place<.
2.6
HTMLFormes

Certains navigateurs WWW permettent à l'utilisateur, en remplissant un formulaire spécial qui renvoie la valeur résultante, d'effectuer certaines actions sur votre serveur WWW.  Lorsqu'un formulaire est interprété par un navigateur WEB, des éléments d'écran GUI spéciaux sont créés, tels que des champs de saisie, des cases à cocher, des boutons radio, des menus déroulants, des listes déroulantes, des boutons, etc.  Lorsqu'un utilisateur remplit un formulaire et clique sur le bouton "Soumettre" (SOUMETTRE est un type spécial de bouton spécifié lors de la description d'un document), les informations saisies par l'utilisateur dans le formulaire sont envoyées au serveur HTTP pour traitement et transmission. à d'autres programmes exécutés sous le serveur, conformément à l'interface CGI (Common Gateway Interface).
Lorsque vous décrivez un formulaire, chaque élément de saisie de données possède une balise .  Lorsqu'un utilisateur place des données dans un élément de formulaire, les informations sont placées dans la section VALUE de cet élément.
Syntaxe.  Tous les formulaires commencent par la balise 
et se termine par la balise
.

Form_elements_and_other_HTML_elements.

MÉTHODE.  Une méthode pour envoyer un message avec les données d'un formulaire.  Selon la méthode que vous utilisez, vous pouvez envoyer les résultats de la saisie au formulaire de deux manières :
GET : les informations du formulaire sont ajoutées à la fin de l'URL spécifiée dans la description du titre du formulaire.  Votre programme CGI (script CGI) reçoit les données du formulaire en tant que paramètre de la variable d'environnement QUERY_STRING.  L'utilisation de la méthode GET n'est pas recommandée.
POST : cette méthode soumet toutes les informations du formulaire immédiatement après avoir accédé à l'URL spécifiée.  Votre programme CGI reçoit les données du formulaire sur une entrée standard.  Le serveur ne vous enverra pas de message lorsqu'il aura fini d'envoyer des données à l'entrée standard ;  à la place, la variable d'environnement CONTENT_LENGTH est utilisée pour déterminer la quantité de données que vous devez lire à partir de l'entrée standard.  Cette méthode est recommandée pour une utilisation.
ACTION : ACTION décrit l'URL qui sera appelée pour traiter le formulaire.  Cette URL pointe presque toujours vers le programme CGI qui traite le formulaire.
Balises de formulaire :
Étiqueter utilisé pour permettre à l'utilisateur de saisir plus d'une ligne d'informations (texte libre).  Voici un exemple d'utilisation de la balise <TEXTAREA>:</p>
<p><TEXTAREA NAME="address" ROWS=10 COLS=50></p>
<p>Autoroute Dmitrovskoe,</p>
<p>9B, bureau 448</p>
<p>
Attributs utilisés dans une balise décrire l'apparence et le nom de la valeur d'entrée.  Étiqueter est nécessaire même lorsque le champ de saisie est initialement vide.  Description des attributs :
NOM - nom du champ de saisie
LIGNES - hauteur du champ de saisie en caractères
COLS - largeur du champ de saisie en caractères
Si vous souhaitez qu'un texte soit affiché par défaut dans le champ de saisie, vous devez l'insérer dans les balises. Et.
Étiqueter utilisé pour saisir une ligne de texte ou un mot.  Attributs de la balise :
CHECKED - signifie que CHECKBOX ou RADIOBUTTON sera sélectionné.
MAXLENGTH - détermine le nombre de caractères que les utilisateurs peuvent saisir dans le champ de saisie.  Si le nombre de caractères autorisés est dépassé, le navigateur répond à une tentative de saisie d'un nouveau caractère par un signal sonore et n'autorise pas sa saisie.  A ne pas confondre avec l'attribut SIZE.  Si MAXLENGTH est supérieur à SIZE, alors le champ défile.  La valeur par défaut de MAXLENGTH est l'infini.
NOM - nom du champ de saisie.  Ce nom est utilisé comme identifiant unique pour le champ, qui peut ensuite être utilisé pour récupérer les données saisies par l'utilisateur dans ce champ.
TAILLE - détermine la taille visuelle du champ de saisie à l'écran en caractères.
SRC-URL,.  pointant vers une image (utilisée conjointement avec l'attribut IMAGE).
TYPE - détermine le type de champ de saisie.  Par défaut, il s'agit d'un simple champ de saisie pour une ligne de texte.  Les types restants doivent être explicitement spécifiés :
CHECKBOX : utilisé pour les valeurs logiques simples (BOOLÉENNES).  La valeur associée à ce nom de champ, qui sera transmise au programme CGI appelé, peut être ON ou OFF.
CACHÉ : Les champs de ce type ne sont pas affichés par le navigateur et ne permettent pas à l'utilisateur de modifier la valeur par défaut attribuée à ce champ.  Ce champ est utilisé pour transmettre des informations statiques au programme CGI, telles qu'un identifiant utilisateur, un mot de passe ou d'autres informations.
Ce type de champ de saisie permet d'associer un graphique à un nom de champ.  Lorsque vous cliquez sur n'importe quelle partie du dessin avec la souris, le programme CGI associé au formulaire sera immédiatement appelé.  Les valeurs attribuées à la variable NOM ressembleront à ceci - deux nouvelles variables sont créées : la première porte le nom indiqué dans le champ NOM avec l'ajout de .x à la fin du nom.  Cette variable contiendra la coordonnée X du point en pixels (en considérant que l'origine des coordonnées est le coin supérieur gauche de l'image) sur lequel pointait le curseur de la souris au moment du clic, et la variable avec le nom contenu dans NOM et .y ajouté contiendront la coordonnée Y.  Toutes les valeurs de l'attribut VALUE sont ignorées.  La description de l'image elle-même s'effectue via l'attribut SRC et la syntaxe coïncide avec la balise .
Identique à l'attribut TEXT, mais la valeur saisie par l'utilisateur n'est pas affichée à l'écran par le navigateur.
Cet attribut vous permet de saisir une valeur parmi plusieurs alternatives.  Pour créer un ensemble d'alternatives, vous devez créer plusieurs champs de saisie avec l'attribut TYPE="RADIO" avec des valeurs d'attribut VALUE différentes, mais les mêmes valeurs d'attribut NOM.  Une valeur de type NAME=VALUE sera transmise au programme CGI, et VALUE prendra la valeur de l'attribut VALUE du champ de saisie actuellement sélectionné (sera actif).  Lorsque vous sélectionnez un des champs de saisie de type RADIO, tous les autres champs de ce type portant le même nom (attribut NOM) seront automatiquement désélectionnés à l'écran.
Ce type désigne un bouton, lorsqu'on clique dessus, tous les champs du formulaire prendront par défaut les valeurs qui leur sont décrites.
Ce type désigne un bouton qui, lorsqu'on clique dessus, invoquera le programme CGI (ou l'URL) décrit dans l'en-tête du formulaire.  L'attribut VALUE peut contenir une chaîne qui sera affichée sur le bouton.
Ce type de champ de saisie décrit un champ de saisie sur une seule ligne.  Utilisez les attributs MAXLENGTH et SIZE pour déterminer la longueur maximale de la valeur d'entrée en caractères et la taille du champ de saisie à afficher à l'écran (la valeur par défaut est de 20 caractères).
VALEUR - attribue au champ une valeur par défaut ou la valeur qui sera sélectionnée lors de l'utilisation du type RADIO (pour le type RADIO, cet attribut est obligatoire).
Menu de sélection dans les formulaires.  Le menu de sélection dans les formulaires fait référence à un élément d'interface tel que LISTBOX.  Il existe trois types de balises de menu de sélection pour les formulaires :
Sélectionner - l'utilisateur sélectionne une valeur dans une liste fixe de valeurs représentées par des balises OPTION.  Cette vue est présentée sous la forme d'une LISTBOX déroulante.
Select single est identique à Select, mais l'utilisateur voit trois éléments de sélection à l'écran en même temps.  S'il y en a plus, un défilement vertical automatique est fourni.
Sélectionner plusieurs - vous permet de sélectionner plusieurs éléments dans la LISTBOX.
SELECT : La balise SELECT permet à l'utilisateur de sélectionner une valeur dans une liste fixe de valeurs.  Ceci est généralement représenté par un menu déroulant.
La balise SELECT a un ou plusieurs paramètres entre la balise de début et finale.  Par défaut, le premier élément est affiché dans la barre de sélection.  Voici un exemple de balise :


À 386
À 486
À 586
SELECT SINGLE : la balise SELECT SINGLE est la même que Select, mais l'utilisateur voit plusieurs éléments de sélection à l'écran à la fois (trois par défaut).  S'il y en a plus, un défilement vertical automatique est fourni.  Le nombre d'éléments affichés simultanément est déterminé par l'attribut SIZE.  Exemple:

À 386

À 486

À 586

Pentium PRO
SELECT MULTIPLE : la balise SELECT MULTIPLE est similaire à la balise SELECT SINGLE, mais l'utilisateur peut sélectionner plusieurs éléments de liste à la fois.  L'attribut SIZE détermine le nombre d'éléments visibles simultanément à l'écran, l'attribut MULTIPLE détermine le nombre maximum d'éléments sélectionnés simultanément.  Exemple:

À 386
À 486
À 586
Pentium PRO
Si plusieurs valeurs sont sélectionnées en même temps, alors le serveur reçoit le nombre correspondant de paramètres NOM=VALEUR avec les mêmes valeurs NOM, mais des VALEURS différentes.
Envoi de fichiers à l'aide de formulaires.  Les formulaires peuvent être utilisés non seulement pour envoyer de petits messages d'information sous forme de paramètres, mais également pour envoyer des fichiers.
Attention!  Puisque cette fonctionnalité nécessite le support de la réception des fichiers par le serveur WEB, il faut donc que le serveur supporte la réception des fichiers !
Par exemple:
Envoyez ce fichier :  
  
.

2.7
HTMLCadres

En utilisant des cadres, qui vous permettent de diviser les pages Web en plusieurs sous-fenêtres déroulantes, vous pouvez améliorer considérablement l'apparence et les fonctionnalités des systèmes d'information et des applications Web.  Chaque sous-fenêtre, ou cadre, peut avoir les propriétés suivantes :
· Chaque frame possède sa propre URL, ce qui lui permet d'être chargé indépendamment des autres frames
· Chaque image a son propre nom (paramètre NAME), vous permettant d'y accéder depuis une autre image
· La taille du cadre peut être modifiée par l'utilisateur directement sur l'écran à l'aide de la souris (sauf si cela est interdit en spécifiant un paramètre spécial)
· Ces propriétés de cadre vous permettent de créer des solutions d'interface avancées, telles que :
· Placer les informations statiques que l'auteur considère nécessaires de montrer constamment à l'utilisateur dans un cadre statique.  Il peut s'agir d'un logo graphique de l'entreprise, d'un droit d'auteur, d'un ensemble de boutons de commande.
· Placer dans un cadre statique une table des matières de tout ou partie des documents WEB contenus sur le serveur WEB, ce qui permet à l'utilisateur de retrouver rapidement l'information qui l'intéresse
· Créez des fenêtres de résultats de requête, lorsque la requête elle-même se trouve dans un cadre et que les résultats de la requête se trouvent dans un autre.
· Créer des formulaires de type "maître-détail" pour les applications WEB qui servent des bases de données.
Syntaxe du cadre.  Le format d'un document utilisant des cadres est très similaire en apparence au format d'un document ordinaire, seulement au lieu de la balise BODY, un conteneur FRAMESET est utilisé, contenant une description des documents HTML internes, contenant les informations réelles placées dans les cadres. .
 ... ... 
Cependant, un document frame est un type spécifique de document HTML, car il ne contient respectivement ni l'élément BODY ni aucune charge d'informations.  Il décrit uniquement les frames qui contiendront l'information (sauf dans le cas d'un double document, que nous verrons plus loin).
Imaginons la syntaxe générale des frames :

  ...

Le conteneur général FRAMESET décrit tous les cadres dans lesquels l'écran est divisé.  Vous pouvez diviser l'écran en plusieurs cadres verticaux ou horizontaux.  La balise FRAME décrit chaque image individuellement.  Examinons de plus près chaque composant.

Créer un site Internet de nos jours ne posera pas de difficultés particulières, puisqu'il existe suffisamment de portails sur Internet qui proposent leurs services pour créer un site Internet.  Mais un site Web créé pour un tel service n'est pas sa propre création, mais un semblant de clone cultivé dans un tube à essai.
Un site Web créé de manière indépendante sera toujours un enfant bien-aimé, enduré par la joyeuse agonie de la créativité.  Vous pouvez créer un site Web en utilisant le langage de programmation HTML, appelé site statique.
Un éditeur HTML est utilisé pour créer un site Web.  Pour créer indépendamment un site Web basé sur HTML, vous avez besoin de connaissances du langage de programmation HTML, de certains concepts de Photoshop, de quelques compétences en rédaction d'articles, d'un peu d'imagination et d'art du design.
Un site Web créé à l’aide du langage de programmation PHP est un site Web dynamique.  La plupart des sites Web existants sur Internet sont créés sur la base de PHP, sur des moteurs CMS (système de gestion de contenu).  Sur ce site, vous pouvez apprendre à créer un site Web et obtenir une aide qualifiée pour créer vous-même un site Web à l'aide de moteurs CMS : 
- création de site internet sur Joomla ;
Commencer à faire quelque chose est toujours difficile.  L'essentiel ici est de se fixer un objectif précis.  Pour commencer, choisissez le thème et l'échantillon du site Web que vous souhaitez réaliser, et élaborez un plan pour sa mise en œuvre.  Et avancez sur le chemin de la réalisation de l’objectif principal.
Une carrière dans le développement Web est lucrative, passionnante et nécessite une volonté de changer constamment.  Cela nécessite un certain ensemble de compétences pointues et de connaissances linguistiques qu’il vous faudra mettre à jour année après année.  À votre tour, vous pourrez créer chaque jour du matériel Web vraiment sympa et à la fin de chaque mois, vous recevrez un bon salaire.  Pas mal, non ?
Ces dernières années, à mesure que le Web continue d’évoluer, plusieurs courants différents de développement Web ont émergé :
(ou développement Web côté serveur) couvre toutes les choses qui fonctionnent en arrière-plan pour créer des sites Web ou des applications Web, telles que des bases de données et des scripts.
(également connu sous le nom de développement Web côté client) traite de la partie de l'interface Web avec laquelle l'utilisateur interagit - la partie que tous ceux qui utilisent Internet connaissent.
Il existe des développeurs Fullstack qui peuvent faire tout ce qui précède.
Quelle que soit la voie que vous choisissez, vous devez toujours comprendre chaque côté pour faire votre travail correctement.
Voici donc les 10 meilleurs langages de programmation pour le développement Web, côté client et côté serveur.
CSS/HTML
CSS et HTML vont de pair avec JavaScript. Ensemble, ils constituent la sainte trinité du développement d'interfaces Web.  HTML (Hyper Text Mark Up Language) est le langage des navigateurs Web avec lequel les sites Web sont créés.  Vous pouvez sur notre site Web.  CSS (Cascading Style Sheets) leur donne un aspect élégant et de bon goût - bien meilleur que ces terribles sites qui existent depuis les débuts d'Internet.  Il est très important pour les développeurs d’interfaces Web de connaître ces outils de fond en comble.  Ils seront également utiles aux développeurs backend : vous pourrez comprendre comment les modifications apportées à votre backend affectent l'utilisateur final.
PHP
PHP est un langage de script utilisé pour créer rapidement des pages Web dynamiques.  Un excellent choix pour les développeurs frontend et backend à ajouter à leur arsenal (mais surtout ce dernier), il se situe derrière les géants du web comme WordPress et Facebook.  PHP vous permet d'étendre rapidement et facilement des applications Web et d'exécuter des sites Web avec des tâches de serveur répétitives (telles que la mise à jour des flux d'actualités).  Il est open source et très populaire parmi les start-ups, les agences média et les sociétés de commerce électronique – le genre de personnes qui embauchent souvent de nouveaux développeurs Web.  De plus, c’est votre langage de programmation préféré, et oui, avec nous, vous pouvez le faire !
SQL
Javascript
Un langage frontal utilisé pour créer et développer des sites Web, des applications de bureau et des jeux.  JavaScript fonctionne dans tous les navigateurs et peut fonctionner avec des programmes qui ne sont pas hébergés sur Internet.  Il prend en charge les styles de programmation fonctionnels et orientés objet et constitue essentiellement votre approche pour créer des interfaces utilisateur étonnantes et des sites Web/applications/jeux super cool.  Comprendre JavaScript est important, même si vous avez à cœur le développement côté serveur.  Les composants, les structures de données et les algorithmes de JavaScript s'appliquent à presque tous les autres langages.
Python
Nouveau venu dans le quartier par rapport à certaines des autres langues de cette liste.  Python est extrêmement facile à apprendre et constitue un langage dynamique et polyvalent.  Bien qu’il soit plus populaire comme langage d’arrière-plan, vous pouvez faire presque tout ce que vous voulez avec.  Conçu pour être lisible, simple et surtout amusant, c'est le nouveau favori des développeurs de tous les domaines de l'industrie.  Python est le langage principal pour les débutants.  Il est flexible et extrêmement puissant, et surtout, il a un très bel avenir devant lui.
Aller
Go est le langage de programmation dédié de Google.  Un nouveau venu sur la scène de la programmation qui bénéficie d'une excellente intégration, d'une bonne lisibilité et facilité d'utilisation, ainsi que de la capacité de résoudre de nombreux problèmes que d'autres langages ne peuvent pas gérer.  Au fur et à mesure que de nouveaux produits apparaissent, celui-ci est très prometteur.  D’ailleurs, nous savons tous que Google est aujourd’hui le roi d’Internet et que ce sont eux qui paient pour créer des applications web en langage Go.
Java
Développé dans les années 1990 et toujours le plus utilisé, Java est la référence en matière de développement Web dans le monde entier, dans tous les domaines.  Il est centré sur les objets et fonctionne sur n’importe quelle plateforme, ce qui le rend extrêmement polyvalent.  Si vous souhaitez que votre coffre-fort soit utilisé par presque toutes les entreprises technologiques du monde, alors choisissez Java.  Fait intéressant : Java était initialement destiné à la télévision interactive, mais ses créateurs se sont vite rendu compte qu'il était trop en avance sur son temps pour ce secteur particulier.  Le reste appartient à l’histoire.
Rubis
Évolutifs, simples et ultra-rapides, Ruby et Ruby on Rails forment un duo de rêve qui offre un langage full stack ainsi qu'un framework permettant de créer rapidement des programmes complets.  Un favori parmi les entrepreneurs et les débutants, Ruby propose une large sélection de « joyaux » tiers (modules complémentaires) qui peuvent lui permettre de faire presque tout ce dont vous avez besoin.  Twitter et Basecamp utilisent Ruby – ce n'est pas un mauvais indicateur, n'est-ce pas ?
C++
L’objectif principal, énoncé à juste titre et en vigueur depuis 1979, est que le C++ soit un langage orienté objet hautement technique.  Extrêmement puissant et doté de bibliothèques étendues, c'est l'un des langages fondamentaux du développement backend.  Le C++ est particulièrement utile pour les programmes hautes performances et les programmes comportant de nombreux modèles.  Si vous connaissez déjà le C (ou si vous avez appris le C++ et souhaitez vous tourner vers le C), vous êtes déjà sur la bonne voie.
AVEC
Comme le C++, le C est un langage old school facile à compiler.  Il s'agit d'une plate-forme de programmation couramment utilisée qui propose des éléments de construction pour d'autres langages tels que C++, Python et Java.  En fait, beaucoup de ces langages sont basés sur C. Une excellente option pour les full stacks et ceux qui cherchent à ajouter une nouvelle dimension à leurs compétences (ou un exercice de force métaphorique à leur boîte à outils de programmation).  Il est le mieux adapté à l’écriture de logiciels et d’applications système, garantissant un langage convivial pour les développeurs dans lequel tout le monde est habitué à travailler.
Avant de commencer notre parcours à travers les leçons de création de sites Web HTML et CSS, il est important de comprendre les différences entre les deux langages, la syntaxe de chaque langage et une terminologie de base.
Que sont HTML et CSS ?
HTML (HyperText Markup Language) définit la structure du contenu et sa signification, en définissant le contenu tel que les titres, les paragraphes ou les images.  CSS (Cascading Style Sheets) est un langage de présentation créé pour styliser l'apparence du contenu, en utilisant, par exemple, des polices ou des couleurs.
Ces deux langages – HTML et CSS – sont indépendants l’un de l’autre et devraient le rester.  CSS ne doit pas être écrit dans un document HTML et vice versa.  En règle générale, HTML représentera toujours le contenu et CSS définira toujours le style.
Avec cette compréhension de la différence entre HTML et CSS, examinons le HTML plus en détail.
Termes HTML de base
Avant de commencer à travailler avec HTML, vous rencontrerez probablement des termes nouveaux et souvent étranges.  Vous vous familiariserez avec chacun d'eux au fil du temps, mais pour l'instant, vous devriez commencer par les trois termes HTML de base : éléments, balises et attributs.
Éléments
Les éléments spécifient comment définir la structure et le contenu des objets sur une page.  Certains des éléments couramment utilisés incluent plusieurs niveaux de titres (définis comme des éléments avec 
avant 
) et les paragraphes (définis comme 
);  Vous pouvez inclure des éléments dans la liste 
, 

, , Et et plein d'autres.
Les éléments sont identifiés à l'aide de crochets angulaires<>, entourant le nom de l'élément.  L'élément ressemblera donc à ceci :
Mots clés
Ajout de crochets angulaires< и >crée ce qu'on appelle une balise autour de l'élément.  Les balises apparaissent le plus souvent par paires de balises d’ouverture et de fermeture.
La balise d'ouverture marque le début de l'élément.  Il est constitué d'un symbole<, затем идёт имя элемента и завершается символом >;  Par exemple, 

.
La balise fermante marque la fin de l'élément.  Il est constitué d'un symbole< с последующей косой чертой и именем элемента и завершается символом >;  Par exemple,
.
Le contenu qui apparaît entre les balises d'ouverture et de fermeture est le contenu de cet élément.  Le lien, par exemple, aura une balise d'ouverture et balise de fermeture.  Ce qui se trouve entre ces deux balises sera le contenu du lien.
Ainsi, les balises de lien ressembleront à ceci :
 ...
 
Les attributs
Les attributs sont des propriétés utilisées pour fournir des informations supplémentaires sur un élément.  Les attributs les plus courants incluent l'attribut id, qui identifie l'élément ;  l'attribut class, qui classe l'élément ;  l'attribut src, qui spécifie la source du contenu intégré ;  et un attribut href, qui spécifie un lien vers la ressource associée.
Les attributs sont définis dans la balise d'ouverture après le nom de l'élément.  En général, les attributs incluent un nom et une valeur.  Le format de ces attributs se compose du nom de l'attribut suivi d'un signe égal, suivi de la valeur de l'attribut entre guillemets.  Par exemple, élément avec l'attribut href ressemblera à ceci :
Shay Howe
Démonstration des termes HTML de base
Ce code affichera le texte « Shay Howe » sur une page Web et, lorsqu'il cliquera sur ce texte, l'utilisateur accédera à http://shayhowe.com.  L'élément de lien est déclaré à l'aide d'une balise d'ouverture et balise de fermeture couvrant le texte, ainsi que l'attribut et la valeur de l'adresse du lien déclarée via href="http://shayhowe.com" dans la balise d'ouverture.
Riz.  1.01.  La syntaxe HTML sous forme de plan comprend un élément, un attribut et une balise
Maintenant que vous savez ce que sont les éléments, balises et attributs HTML, jetons un coup d'œil à notre première page Web.  Si quelque chose semble nouveau ici, ne vous inquiétez pas, nous le détaillerons au fur et à mesure.
Personnalisation de la structure du document HTML
Les documents HTML sont de simples documents texte enregistrés avec l'extension .html plutôt que .txt.  Pour commencer à écrire du HTML, vous avez d’abord besoin d’un éditeur de texte que vous êtes à l’aise avec.  Malheureusement, cela n'inclut pas Microsoft Word ou Pages, car ce sont des éditeurs complexes.  Les deux éditeurs de texte les plus populaires pour écrire du HTML et du CSS sont Dreamweaver et Sublime Text.  Les alternatives gratuites incluent également Notepad++ pour Windows et TextWrangler pour Mac.
Tous les documents HTML contiennent une structure obligatoire, qui comprend les déclarations et éléments suivants :
, 
, Et 
.
Déclaration du type de document ouest situé au tout début d'un document HTML et indique aux navigateurs quelle version de HTML est utilisée.  Puisque nous utiliserons la dernière version de HTML, notre type de document sera simplement.  Après cela vient l'élément indiquant le début d'un document.
À l'intérieur élément définit le haut du document, y compris diverses métadonnées (accompagnant les informations sur la page).  Contenu à l'intérieur d'un élément n'apparaît pas sur la page Web elle-même.  Au lieu de cela, il peut inclure le titre du document (qui apparaît dans la barre de titre de la fenêtre du navigateur), des liens vers des fichiers externes ou toute autre métadonnée utile.
Tout le contenu visible de la page Web sera contenu dans l'élément .  La structure d'un document HTML typique ressemble à ceci :
 

 
 
 
 
 
 
Bonjour le monde!
 
Ceci est une page Web.
 





 
Démonstration de la structure d'un document HTML
Ce code affiche le document, en commençant par la déclaration du type de document,, puis vient immédiatement l'élément .  À l'intérieur les éléments arrivent Et .  Élément contient l'encodage de la page via la balise et le titre du document via l'élément 
 

Il est temps de vérifier notre travail et de voir comment nos HTML et CSS fonctionnent ensemble.  L'ouverture du fichier index.html (ou l'actualisation de la page si elle est déjà ouverte) dans le navigateur devrait afficher un résultat légèrement différent qu'auparavant.
Riz.  1.04.  Notre site Styles Conference avec réinitialisation CSS
Démo et code source
Ci-dessous, vous pouvez consulter le site Web de Styles Conference dans son état actuel, ainsi que télécharger le code source actuel du site.
Résumé
Alors tout va bien!  Nous avons franchi de grandes étapes dans ce tutoriel.
Pensez-y, vous connaissez maintenant les bases du HTML et du CSS.  Au fur et à mesure que nous continuons et que vous passez plus de temps à écrire du HTML et du CSS, vous deviendrez beaucoup plus à l'aise avec ces deux langages.
Pour récapituler, nous avons couvert les points suivants :
Différence entre HTML et CSS.
Introduction aux éléments, balises et attributs HTML.
Mise en place de la structure de votre première page Web.
Introduction aux sélecteurs, propriétés et valeurs CSS.
Travailler avec des sélecteurs CSS.
Pointeur vers CSS à partir de HTML.
L'importance de la réinitialisation CSS.

Examinons maintenant de plus près le HTML et familiarisons-nous un peu avec la sémantique.
Ressources et liens
Termes HTML courants via Scripting Master
Termes et définitions CSS via des sites Web impressionnants
Outils CSS : réinitialiser CSS via Eric Meyer

Le développement de la sphère informatique, à savoir la demande croissante de services pour la création et la promotion de sites Web par les moteurs de recherche, a conduit à l'émergence de nombreux soi-disant webmasters prêts à effectuer tout le travail sur le site et son support ultérieur.  Inutile de dire que la plupart de ces projets ont été créés à l'aide de constructeurs libres ; les « maîtres » eux-mêmes n'ont qu'une compréhension théorique de la composante technique d'une ressource Web de haute qualité.  Conception de sites Web, contenu, convivialité réfléchie - tout cela est bien sûr important.  Mais un site Web techniquement défectueux avec des erreurs dans le code est tout simplement voué à l'échec.
En bref sur les langages de programmation courants
PHP.  Il est basé sur le langage de balisage HTML.  PHP est un langage de script à usage général et est open source.  La syntaxe est assez facile à apprendre et présente de nombreuses similitudes avec C, Java et Perl.  Le principal avantage de PHP est qu’il permet aux développeurs de créer rapidement des pages Web générées dynamiquement.  Avec une maîtrise professionnelle de la langue, il peut être utilisé pour effectuer d’autres tâches.
Python. En russe, il est courant sous le nom de « python ».  Un langage de programmation généraliste de haut niveau axé sur l'amélioration de la productivité des développeurs et de la lisibilité du code.  La syntaxe de base de Python est minimaliste.  Dans le même temps, la bibliothèque standard comprend un grand nombre de fonctions utiles.
Rubis.  En russe, il est courant sous le nom de « rubi ».  Un langage de programmation de haut niveau dynamique, réfléchi et interprété pour une programmation orientée objet rapide et facile.  Le langage a une implémentation indépendante du système d'exploitation du multithreading, un typage dynamique fort, un garbage collector et de nombreuses autres fonctionnalités.  En termes de syntaxe, il est proche des langages Perl et Eiffel, et dans son approche orientée objet, il est proche de Smalltalk.  De plus, certaines fonctionnalités du langage sont tirées de Python.
ASPIC..  Le développeur de ce langage est Microsoft.  La technologie vous permet de développer des applications pour le WWW.  ASP est simple et rapide.  Plateformes pour ASP : Windows NT et IIS (Internet Information Server).  Il n'est pas tout à fait correct d'appeler ASP un langage, il s'agit plutôt d'une technologie permettant de connecter un programme à des pages Web.  Un langage de script simple et la possibilité d'utiliser des composants COM externes sont tout le secret du succès d'ASP.
Javascript.  Le fonctionnement de JavaScript est quelque peu différent des autres langages de programmation.  La principale différence est qu’il est inclus directement dans le fichier HTML.  Un script écrit en JavaScript est traité par un interpréteur intégré au navigateur.
Les domaines d'utilisation de la langue sont très étendus :
Créer des pages Web qui peuvent changer après le chargement du document
Résoudre les problèmes locaux
Vérifier la capacité de l'utilisateur à remplir des formulaires avant de les envoyer au serveur
La variété des capacités de Javascript détermine la popularité du langage.  Avec lui, vous pouvez :
Apporter des modifications à la page : travailler avec des balises, modifier les styles, rédiger du texte
Réagir aux événements (par exemple, clic de souris) et exécuter une fonction spécifique
Afficher des messages, vérifier l'exactitude des données, définir et lire des cookies
Charger des données sans recharger la page, etc.
Perl.  Initialement, ce langage était un moyen de connecter des programmes remplissant diverses fonctions en un seul script permettant de résoudre un ensemble de problèmes : traitement de texte, administration, etc.  Aujourd'hui, Perl est le principal outil de création d'applications CGI.  Il est utilisé pour administrer les serveurs Web et d’autres systèmes.  La simplicité et l'efficacité de l'écriture de scripts dans ce langage ont conduit à son adaptation aux plateformes telles que Windows, Mac, etc.  Perl est ouvert et accessible, le code source de l'interpréteur peut être obtenu entièrement gratuitement.
Est-il utile d’avoir beaucoup de connaissances ?
Les bases de la programmation sont enseignées dans les cours d'informatique à l'école.  Presque tout le monde a rencontré Delphi et Pascal.  Les langues plus complexes nécessitent une approche d'apprentissage beaucoup plus sérieuse.  Un certain état d'esprit - mathématique et logique et, bien sûr, le désir de devenir un spécialiste dans son domaine aideront un programmeur novice à réussir.  Il ne faut pas essayer de maîtriser toutes les langues à la fois.  Il vaut mieux en connaître un très bien que d’en avoir une connaissance fragmentaire de cinq.  Chaque langage de programmation a des principes généraux, ils sont tous construits sur la logique des actions, donc avec l'expérience, maîtriser les nouvelles technologies deviendra plus rapide et plus facile.  De nombreuses personnes peuvent modifier et copier des codes prêts à l'emploi, mais tous les programmeurs ne peuvent pas devenir de véritables « artistes » et non des imitateurs.