Tout le monde utilise Internet et tout look à travers divers sites et, probablement, tout le monde souhaite placer votre site Web sur Internet, mais il ne s'agit pas simplement de le faire, il y en a plusieurs raisons. Cependant, afin que vous puissiez placer un site de qualité, il vous suffit de connaître la base » programmation web", Lequel est langue HTML. Dans cet article, nous examinerons les éléments principaux, les balises, les attributs, même écrire la première page Web.

Langage Signalétique Hyper Text - "HTML" ( langue de marquage hypertexte) Beaucoup ont cessé depuis longtemps de considérer cela juste un langage de programmation. Comme le concept même de HTML comprend diverses méthodes de conception de documents hypertextes, de conception, d'éditeurs hypertextes, de navigateurs et de nombreux autres. L'utilisateur qui a maîtrisé cette langue devient la possibilité de faire des choses sérieuses méthodes simples Et, surtout, rapidement, que monde moderne Il est considéré comme très bon!

Dans la langue HTML, vous pouvez créer vos propres produits multimédias et les distribuer sur CDS, et tous ces produits fabriqués sous la forme de jeux de pages HTML ne nécessitent pas le développement de logiciels spécialisés, car tout ce dont vous avez besoin pour travailler avec les données ( Navigateurs Web) est devenu une partie de la norme logiciel La plupart des ordinateurs personnels.

• Élément (Élément.) - Conception de langue HTML. Cet objet contenant des données et vous permet de les formater d'une certaine manière. Toute page Web est un ensemble d'éléments. L'une des idées principales de l'hypertexte est la possibilité de fixer des éléments.
• Étiqueter (Étiqueter.) - marqueurs initiaux ou finaux de l'élément. Les tags définissent les limites des éléments et séparent les éléments les uns des autres. Dans le texte de la page Web, les balises sont des crochets d'angle et la balise finale est toujours fournie avec une barre oblique.
• Attribut (attribut) - paramètre ou propriété de l'élément. En d'autres termes, il s'agit d'une variable qui a un nom standard et qu'un certain ensemble de valeurs peut être attribuée: standard ou arbitraire. Il est supposé que les valeurs de caractère des attributs sont des citations directes, mais certains navigateurs vous permettent de ne pas utiliser de citations. Cela s'explique par le fait que le type d'attribut est toujours connu à l'avance. Les attributs sont situés à l'intérieur de la balise initiale et sont séparés des espaces.
• Hyperlien - une partie du texte qui est un pointeur vers un autre fichier ou objet. Les hyperliens sont nécessaires pour assurer la possibilité de transition d'un document à un autre.
• Fream. (cadre.) - Ce terme a deux valeurs. Le premier est la portée du document avec vos barres de défilement. La deuxième valeur est une image dans le complexe ( animation) fichier graphique (semblable au cadre du film). Il est également possible au lieu du terme "cadre" dans la littérature spéciale et les logiciels localisés, vous pouvez trouver le terme "cadre" ou "cadre".
• Fichier html. ou page HTML - un document créé sous la forme d'un hypertexte basé sur la langue HTML. Ces fichiers ont une extension de HTM ou HTML.
• Applet. (applet.) - Le programme transmis à l'ordinateur du client en tant que fichier séparé et démarré lors de la visualisation d'une page Web.
• Scénario ou script ( scénario.) - Un programme inclus dans la page Web pour développer ses capacités.
• Expansion (extension) - Un élément qui n'est pas inclus dans la spécification de langue, mais utilisé, offrant la capacité de créer un nouveau effet intéressant mise en page.
• Cgi (Interface commune de la passerelle.) - Un nom commun pour les programmes qui, fonctionnant sur le serveur, vous permettent d'élargir les capacités des pages Web. Par exemple, sans de tels programmes, il est impossible de créer des pages interactives.
• Code HTML -hyper document texte Dans sa forme d'origine, lorsque tous les éléments et attributs sont visibles.
• page Web - Un document (fichier) préparé dans un format hypertexte et placé dans le World Wide Web.
• Site Internet (placer.) - Un ensemble de pages Web situées au même endroit et apparentées.
• Le navigateur (le navigateur.) - Un programme de visualisation de pages Web.
() - Copier des fichiers d'un serveur à un client informatique.
• URL (Localisateur de ressources uniforme) Ou un pointeur de ressources universel, adresse d'un objet sur Internet, c'est-à-dire Une URL typique pour www a la forme: http: // www. Nutrition. Romain vers le fichier.

Tous les éléments de la langue peuvent être divisés en trois groupes. Le premier comprend des éléments qui créent la structure d'un document hypertexte. L'utilisation de tels éléments est la formalité nécessaire qui ne peut pas être négligée. Le deuxième groupe comprend des éléments qui créent des effets de formatage. Leur utilisation est dictée par des exigences spécifiques pour le document, la fantaisie et la compétence du développeur, le troisième groupe comprend des éléments qui vous permettent de gérer. logicielinstallé et travaillant sur un client informatique. Souvent, ces éléments sont créés automatiquement lorsque le développeur utilise un éditeur hypertexte pour insérer un objet à un objet ou à un programme similaire.

Malgré le fait que la spécification HTML est standard, cette langue est complétée par de nouveaux éléments ( extensions). Par conséquent, certaines pages Web sont plus pratiques pour afficher à l'aide de certains navigateurs. Les extensions ne sont créées que par des entreprises bien connues qui développent des logiciels pour www, et les utilisateurs ordinaires peuvent améliorer leurs pages Web à l'aide de la programmation. Les ats ajustés vous permettent de supprimer les restrictions HTML et de donner à l'espace fantaisie du développeur.

Versions HTML

La première version de la langue HTML a été développée au début des années 90 de Tim Bellsley pour l'un des navigateurs de mosaïque dans le passé. Mais alors ni pour le navigateur, ni pour HTML lui-même n'ont pas encore trouvé bon usage. En 1993, HTML + est apparu, et cette version est également restée presque inaperçue. Mais la distribution de la langue HTML a reçu grâce à la version 2.0, qui est apparue en juin 1994. Et à partir du moment, la popularité de www Worldwide. Les normes incluses dans la version 2, ont donc élaboré qu'ils sont habitués à ce jour.

HTML version 3.0, qui est apparue environ un an plus tard, il a été rendu compte de la capacité de dessiner des symboles mathématiques ( signes de l'intégrale, de l'infini, de la fraction, des supports, etc.) En utilisant des articles de langue. Mais le développement de ce projet a ralenti et n'était pas une nouvelle distribution.

En 1996, la version 3.2 HTML est apparue. C'était une décision brillante, il suffit de mentionner que les cadres ont été introduits dans la spécification de langue, qui étaient maintenant très populaires auprès des développeurs de sites. À ce jour, tous les navigateurs prennent en charge cette version de HTML.

Spécification officielle HTML 4 ( HTML dynamique.) Développé en 1997. A cette époque, il était déjà évident que le développement ultérieur de l'hypertexte serait effectué via une programmation Web. Il s'est avéré être beaucoup plus efficace que d'entrer tous les nouveaux éléments dans la langue.

Structure de la bande Web

Ce qui suit est le code de la page Web, qui est fabriqué dans la langue HTML et, sur l'exemple de cette page, nous analyserons sa structure, mais pour le début, copiez le code complet dans un manuel régulier et cliquez sur "Enregistrer sous" et enregistrer le fichier avec l'extension HTML, c'est-à-dire. Après le nom write.html

Structure de document Web Transition vers la fin du document<НR> <Н1>Titre 1. <Н2>Titre 2. <НЗ>Titre 3. <Н4>Header 4. <Н5>Titre 5. <Н6>Header 6. <НR> Ici est situé premier lien<а name ="list2"> <НR> <р>Il devrait être placé
Le texte principal de la page Web.
Et moi, par exemple, insérera ici
plusieurs engrenages,
afin que vous puissiez
observer évidemment
Comment travailles-tu
liens dans le document,
Et puis si vous avez une grande résolution,
Vous ne remarquerez tout simplement pas les liens suivants
<НR> <а name="list1"

Transition B.<а href ="#list">Début du document

Afin de comprendre la structure de la page Web, il est nécessaire de considérer tous ses éléments inclus dans le code ci-dessus.

< html>

Désignation de documents en HTML. L'un des principes de la langue est une incorporation à plusieurs niveaux d'éléments. Cet élément C'est le plus externe, car toute la page Web doit être entre ses balises initiales et finales. Selon l'idée, cet élément peut être considéré comme une formalité. Il dispose des attributs de la version, de Lang et de Dir, qui, dans ce cas, héberge rarement et vous permet de fixer des éléments de tête, de montage de carrosserie et d'autres définissant la structure générale de la page Web. Naturellement, l'étiquette finale Tous les documents similaires sont terminés.

< diriger.>

Zone d'en-tête de page Web. En d'autres termes, sa première partie. Tout comme l'élément précédent, la tête sert uniquement à former une structure de document générale. Cet élément peut avoir des attributs Lang et DIR.

< titre>

Elément d'affichage d'un en-tête de page Web. La chaîne de texte située à l'intérieur de cet élément n'est pas affichée dans le document, mais dans l'en-tête de la fenêtre du navigateur. Cet élément affecte grandement la promotion dans le moteur de recherche. Les moteurs de recherche portent une attention particulière à la balise de titre. Mon conseil: ne faites jamais un très long texte dans cette balise ( 65 caractères suffisent).

<МЕТА>

Cet élément contient des informations de service qui ne sont pas reflétées lors de la visualisation d'une page Web. Il n'y a pas de texte dans la compréhension habituelle, il n'y a donc pas d'étiquette finie. Chaque élément méta contient deux attributs principaux, dont le premier détermine le type de données et le second est le contenu.

< corps.>

Cet élément combine un hypertexte, qui détermine la page Web réelle. Il s'agit de la partie visible du document que la page Auto se développe et qui est affichée par le navigateur. En conséquence, la balise finale de cet élément doit être recherchée à la fin de la page Web. À l'intérieur de l'élément de corps, vous pouvez utiliser tous les éléments destinés à la conception de la page Web. Dans la balise initiale de l'élément de corps, vous pouvez positionner de nombreux attributs qui servent à installer entièrement la page entière. Considérez-les dans l'ordre.

L'un des attributs les plus utiles de cette balise qui a son impact sur la conception de la page est

fond \u003d "chemin vers le fichier d'arrière-plan"

La décoration la plus simple du fond revient à la tâche de sa couleur

bGCOLOR \u003d "# FFFFFFF"

La couleur de fond est définie trois hexs à deux chiffres, qui déterminent l'intensité du rouge, du vert et fleurs bleues (Rbg).

Puisque vous pouvez modifier l'arrière-plan de la page, vous pouvez modifier la couleur du texte. Pour cela, il y a un attribut suivant

texte \u003d "#rrggbb"

Pour spécifier la couleur du texte de l'hyperlien, l'attribut suivant est utilisé.

link \u003d "# rrggbb"

Vous pouvez également spécifier un changement de couleur pour le dernier lien hypertexte choisi par l'utilisateur.

<Н1>

Élément d'en-tête. Il y a six niveaux d'en-têtes appelés comme suit.
<Н1>Titre
<Н2>Titre
<Н3>Titre
<Н4>Titre
<Н5>Titre
<Н6>Titre

L'en-tête de niveau 1 est le plus grand et le niveau 6 fournit la plus petite en-tête. Pour les en-têtes, vous pouvez utiliser un attribut qui définit l'alignement à gauche, au centre ou à droite:

align \u003d "Gauche" Align \u003d "Centre" Align \u003d "Droite"

Pour créer un nouveau paragraphe de balise utilisée

Et d'aller à nouvelle ligne Sans créer paragraphe - tag
C'est à dire. Ces tags ne sont pas nécessaires. Bien sûr, si vous n'utilisez pas dans la balise

Aligner l'élément qui peut définir l'alignement de paragraphe:

Sur le bord gauche

CENTRE

Sur le bord droit

Le texte situé entre ces éléments est aligné sur la largeur

<НR>

Ligne horizontale ( règle horizontale.) - élément très courant. Premièrement, car avec elle est très facile et pratique de partager la page de la part. Deuxièmement, parce que le choix d'éléments de conception similaires de l'auteur de la page est très faible. L'élément n'a pas de balise finie, mais a un certain nombre d'attributs à aligner à gauche, au centre, à droite, en largeur:

• aligner \u003d "GAUCHE"
• aligner \u003d "Centre"
• aligner \u003d "à droite"
• align \u003d "justifier"

<а name="метка">Texte arbitraire

Dans ce cas, cette chaîne de document est attribuée à un nom et, par conséquent, une partie différente du document ou même sur un autre document peut être créée par un lien hypertexte, menant à cette étiquette.

Pour insérer des images ( des photos) La balise suivante est utilisée dans le document HTML ( représentée description complète Attributs de cette balise):

Listes

(Liste) ont été développés en HTML, sans aucun doute, sous l'influence du succès des éditeurs de texte. Du texte ordinaire, la liste est différente, tout d'abord, par le fait que l'utilisateur n'a pas besoin de penser à la numérotation de ses éléments: cette tâche HTML prend la relève. Si la liste est complétée par de nouveaux éléments ou de nouveaux raccourcissements, la numérotation se poursuit automatiquement. Dans le cas des listes non mesurées, HTML met avant chaque point de la marque: tasses, rectangles, rhombus et autres images. En fin de compte, la liste prend décent, vue. Il existe deux groupes de telles balises: certains définissent une vue générale de la liste ( et vous permettre de spécifier des attributs), Et d'autres spécifient sa structure interne. Vous pouvez utiliser des attributs standard dans les listes. Il existe plusieurs types de listes.

Le plus courant est une liste non mesurée ( liste non entraînée.). Il est présenté ci-dessous:

• Paragraphe 1 liste
• Liste de paragraphes 2
• Liste de paragraphes 3

L'élément UL est une sorte de liste de surbrillance. Il vous permet de séparer une liste de l'autre. L'élément libère chacun des articles.

les tables

Sont l'un des moyens de formatage des données les plus nécessaires sur la page Web. La commodité principale est que le navigateur attire la totalité de la table. La taille du cadre peut être automatiquement cohérente avec la taille de la fenêtre de visualisation dans le navigateur et, bien sûr, avec la taille du texte et des motifs situés dans les tables. Par toutes les autres choses, les tables vous permettent de résoudre de nombreuses tâches de conception: à niveau des parties de la page par rapport à l'autre, placez un certain nombre de dessins et de texte, contrôler la décoration des couleurs et ainsi de suite. Lors de la création de tables, un principe de fixation est utilisé: dans l'élément principal du tableau (tableau), un certain nombre d'éléments définissant des chaînes (TR) sont créés et à l'intérieur de ces éléments sont des éléments pour décrire chaque cellule de la chaîne (TD, TN ).

Afin de régler la structure de la table existante ou de développer nouvelle tableIl existe une règle que la séquence d'éléments décrit la table de haut en bas et à droite à gauche. Par exemple, si l'élément TR est spécifié après l'élément de table, cela indique que la description de la nouvelle ligne de la table commence. Tout ce qui est situé derrière cet élément sera placé dans une ligne (à droite à gauche). Cela peut être une séquence d'éléments TD ( cellules), l'autre table et ainsi de suite. Une fois que le nouvel élément de tr apparaît, la description commencera ligne suivante, etc. jusqu'à la fin de la table (étiquette).
La table peut être alignée horizontalement à l'aide de l'attribut Align:

• aligner \u003d "GAUCHE" - GAUCHE;
• align \u003d "Centre" - au centre;
• aligner \u003d "Droite" - Droite.

La largeur de la table peut être définie exactement en pixels ou pourcentage de la largeur de la page dans la fenêtre du navigateur. Par exemple: largeur \u003d 400 ou largeur \u003d 50%

Deux attributs sont utilisés pour contrôler la vue du cadre. Le fait est que le navigateur crée une image du cadre en imitant sa tridimensionnalité ( convexe) Avec l'aide de différences d'éclairage léger

Scénarios

Presque tous les magiciens Web veulent que leurs pages sur le site avaient une apparence moderne, étaient multifonctionnelles, belles et dynamiques. Standard signifie HTML est impossible, des moyens différents sont appliqués: des applets, des objets, des feuilles de style en cascade et ainsi de suite. Mais la vue la plus populaire et la plus commune ( accueil) Est l'utilisation de scripts.

Le script est un code de programme inclus dans le texte de la page sous la forme de texte source et exécute le navigateur lors de la visualisation de la page. Le script peut être écrit en JavaScript, développé par Netscape ou Visual Basic Script ( VBScript.), développé par Microsoft.

Cette balise vous permet de séparer le texte du programme de script d'autres informations de page. L'étiquette de script inclut nécessairement l'attribut de langue définissant la langue et peut prendre les valeurs suivantes:

• javaScript - code en JavaScript;
• vBScript - code dans VBScript.

L'attribut de type peut également indiquer le type de langue, bien que son application ne soit pas obligatoire. Afin de ne pas perturber toutes les règles, cette définition peut être placée à l'intérieur de l'élément:

type \u003d "Texte / JavaScript"

L'une des caractéristiques les plus amusantes des scénarios est la possibilité de modifier le contenu de la page à la suite de l'exécution du programme. Mais ce n'est qu'une caractéristique et non une règle. Utilisation de l'attribut de diffusion (qui n'accepte aucune valeur), vous pouvez "dire" le navigateur, que de tels changements sont faits, il n'y aura pas de. Dans certains cas, cela vous permet d'accélérer la charge de la page.

Des attributs standard, vous pouvez utiliser l'attribut Chart.

Étiquette de script ( ou un certain nombre d'éléments) Il peut être situé à la fois à l'intérieur de l'élément de tête et à l'intérieur de l'élément de corps. Si le script est à l'intérieur de l'élément de corps, cette situation est possible, lorsque un navigateur qui ne prend pas en charge l'élément de script percevra le code de programme comme texte ordinaire et l'affiche à l'écran. Pour que cela ne se produise pas, le code de script est introduit comme un commentaire:

-
-
-

Tous les navigateurs modernes reconnaissent cette technique et ignorent les caractères de commentaire. Si dans le texte du script, vous devez entrer un commentaire, cela utilise une désignation différente: au début de la ligne, deux coups sont introduits //.
Code de programme Le script est effectué au moment du chargement de la page, c'est-à-dire Lorsque son contenu est toujours visible à l'écran. Vous trouverez ci-dessous un exemple du script le plus simple ( sortie du message dans la fenêtre).

-
-
-
-
-
-
-
-

il pageMais il allume le script d'une rangée. Utilisation de la méthode d'alerte, un message est affiché avant le téléchargement. Et il sera suspendu jusqu'à ce que l'utilisateur clique sur le bouton OK, la charge ne sera pas poursuivie.
Un cas peut être possible, par exemple, une page sera visualisée dans un navigateur qui ne prend pas en charge les scénarios, il est fourni pour cela que l'élément Noscript est fourni. Les programmes de visionnage modernes ignorent son contenu. Cet élément peut être utilisé dans plusieurs méthodes. Pour commencer, à l'intérieur, il peut montrer l'annonce comme suit: " Votre navigateur ne peut pas exécuter le script requis pour voir cette page Web!«Deuxièmement, à l'intérieur de l'élément, vous pouvez développer une version simplifiée de la page, sans scripts. Troisièmement, vous pouvez créer un lien vers un autre document HTML. L'élément Noscript doit être fourni avec la balise finale.

Nous sommes avec vous et avons examiné les fondements d'un tel langage de programmation Web en tant que HTML. Même après avoir lu ce petit article, vous avez déjà une idée et même la capacité de programmer dans cette langue. Bonne chance!

HTML Decrypt comme H.yper. T.ext. M.arkup. L.anguage, c'est-à-dire Langue de marquage hypertexte - le principal immeuble de pages Web, utilisé pour créer et présentation visuelle Stations Web.

La langue HTML ajoute un balisage au texte normal. L'hypertexte contient des liens différents grâce auxquels les pages Web sont associées les unes aux autres. DE en utilisant HTML. Tout le monde peut créer des sites statiques et dinémiques. HTML est une langue décrivant la structure et la sémantique du contenu du document Web. Le contenu de la page Web est placé à l'aide des balises représentant des éléments HTML. Des exemples de tels éléments sont , ,

etc. Ces éléments forment des blocs de construction pour tout site web.

HTML a été inventé en 1991 par le scientifique, Tim Berns-Lee (Tim Berners-Lee) et était initialement destiné à l'échange de documents entre scientifiques de diverses universités. Tim Burns-Lee a jeté les fondations réseau moderne L'Internet.

Il existe plusieurs versions de HTML. La norme de la langue est continuellement mise à jour et complétée, l'enquête sur cette année - presque chaque année il vient une nouvelle version Html. La version "HTML 2.0" a été la première spécification standard HTML publiée en 1995. HTML 4.01 est la version principale de HTML, publiée à la fin de 1999 et est largement utilisée. Aujourd'hui, la version HTML-5 devient le plus populaire, qui est l'extension de HTML 4.01 et publiée en 2012.

Le document HTML ou la page Web est un document de texte simple contenant des balises (ce qui est à son tour du texte commun conclu entre crochets angulaires.<имя тэга>). Page Web Vous pouvez composer à la fois dans un éditeur de texte régulier (bloc-notes, WordPad, mot, etc.) et dans une spécialisation, avec un éclairage de code (Notepad ++, SUBLIMIMIME TEXT IDR). Les documents HTML sont stockés en tant que fichiers avec extension.htm ou.html.

Exemples en ligne dans chaque cours

Dans le processus de présentation du matériau dans chaque cours, des exemples seront donnés pour vous aider à comprendre en détail chaque code et, grâce à la pratique, profitez de l'apprentissage. Avec l'aide de notre éditeur HTML en ligne, vous pouvez modifier le document HTML, puis cliquer sur le bouton Orange "Exécuter", situé au-dessus de la fenêtre de gauche de l'éditeur pour voir le résultat. Si vous utilisez un éditeur HTML spécialisé, vous pouvez copier un exemple et voir les résultats de votre travail dans le navigateur installé sur votre ordinateur.

Exemple HTML:

Essayez-vous vous-même

C'est un titre

Ceci est un paragraphe.

Exemples en ligne HTML

Dans le manuel HTML, plus de 100 exemples en ligne ont été préparés pour vous, grâce à laquelle vous maîtrisez facilement la langue de balisage. Il vaut mieux voir une fois que d'entendre cent fois! La théorie plus la pratique est une garantie de votre succès dans la maîtrise HTML.

Salut les amis!

Je tiens à vous dire quelles ressources et parcours en ligne que j'ai utilisés pour explorer HTML et CSS. Avec l'aide de ces tutoriels, vous pouvez facilement et rapidement maîtriser HTML et CSS de zéro à un niveau très élevé.

HTML, CSS pour les débutants à partir de zéro et non seulement.

Rappelez-vous, dans les derniers articles, j'ai déjà dit que je parlerai bientôt sur toutes les ressources, sites, services, cours que nous considérons que nous considérons utiles et efficaces pour apprendre HTML et CSS? Cette heure est venue, aujourd'hui, je vais vous dire ce que j'ai utilisé et où je continue à faire actuellement.

Ce que je vais parler est vérifié sur mon expérience personnelle et de la qualité que je tourne. Si vous utilisez mes recommandations, le temps passé ne passera pas en vain.

Je suppose que vous aurez au moins dans des conditions générales, sachez que HTML et CSS s'agit de l'aide d'entre eux, et pour lesquels tout a besoin de vous. L'efficacité de mes recommandations et de votre apprentissage dépendra de la façon dont vous êtes déjà bien affiché par ces disciplines, quels sont les objectifs pour vous-même et quel niveau de compétence envisage de réaliser.

Dans cet article, je me concentrerai sur les débutants, sur ceux qui ne font que faire les premières étapes de l'étude de HTML et de CSS, pour eux, mon conseil sera le plus pertinent. Après avoir passé ces étapes, vous comprendrez certainement si vous êtes intéressé par une étude ultérieure et une amélioration de vos compétences. Si tel est le cas, continuez à faire et à comprendre toutes les subtilités et nouvelles fonctionnalités.

Je suis moi-même maintenant à ce stade, passe progressivement les cours avancés et les leçons, étudiant les capacités de HTML5 et CSS3. Dans le même temps, je tire un grand plaisir des cours, ainsi que le sentiment de flexibilité, de grandes opportunités et de nouvelles idées nées dans ce processus fascinant.

Mon moyen d'explorer HTML et CSS

Ma première connaissance avec HTML et CSS a eu lieu sur les premiers cours à l'Institut (bien que j'étais intéressé par la programmation beaucoup plus tôt), j'ai réalisé que je répondais à tous. À cette époque, il était toujours accepté d'utiliser activement les styles intégrés et de construire une grille de pages à l'aide de tables. Seuls quelques-uns passèrent à la Div, ce que je ne savais rien puis et n'a pas attaché d'importance à ce moment.

Après avoir compris quelque chose dans les moments de base, j'ai vécu avec ces connaissances défectueuses et obsolètes pendant une longue période. J'ai essayé de créer mes propres pages, de les prescrire des styles. Plus récemment, je, avec le résultat, la conception a changé.

Et puis, plusieurs jours de creuser dans le code, j'ai réalisé à quel point ma connaissance est limitée et insuffisante. Qu'est-ce que c'est comme cadres invisiblesDans lequel vous vous mettez et vivez-les, la chose habituelle pour cette disposition. Pas sur toute liberté de la mise en œuvre d'idées créatives et de pensées n'était pas.

Il y avait des questions sans fin: «Comment le faire et ne pas gâcher tout le reste?» Que j'ai résolu. Je ne me souviens pas de mes pensées depuis longtemps retardées sur de tels problèmes: "Ne faites pas dans cette situation dans cette situation et que je n'engage pas un deuxième vélo avec mes mains ineptes?".

Le temps est venu quand un tel état de fait a cessé de m'arranger et j'ai finalement décidé de prendre la situation sous contrôle. À la fin de l'année, cette idée est apparue sur les pages de l'article. Mais maintenant, ces plans sont mis en œuvre et je ne peux que penser: "Qu'est-ce qui me dérangeait, et pourquoi je ne l'ai pas fait avant?" On dirait que j'ai récemment maîtrisé et je parviens maintenant à résoudre les pensées sous forme de propositions.

Comment apprendre HTML et CSS à partir de zéro?

Une fois encore, je répète qu'il y a plusieurs façons d'atteindre la cible. Je vais décrire mon expérience, parce que Je considère que c'est assez bon de parler à ce sujet.

Étages d'étude HTML et CSS

Il est pratique de casser l'ensemble du processus aux étapes:

• Connaissance avec HTML et apprendre les bases
• Connaissance avec CSS et mastering concepts de base
• Niveau avancé. Étude HTML5 et CSS3

Il est bien connu et tout ce que nous avons été vérifiés à plusieurs reprises que pour la mémorisation, vous devez répéter. Mais que le processus n'est pas ennuyeux, nous ne répéterons pas la même chose plusieurs fois. Au lieu de cela, nous ferons référence à différentes sources à chaque étape, élargissant ainsi nos connaissances et notre présentation.

Et même si quelque part des moments semblera ne sembler pas complètement clairs, dans un autre endroit, vous fermerez toutes les taches blanches, vous vous sentirez confidictionnellement et peut facilement passer à autre chose.

Adhérant à ce plan, vous vous familiariserez progressivement avec les technologies, il est facile de tout mémoriser dans la pratique, de sorte que vous deviendrez des spécialistes très forts dans HTML et CSS, vous connaîtrez de nouvelles technologies HTML5, CSS3, ainsi que le Les approches les mieux modernes de la page de la page.

Meilleurs tutoriels sur HTML et CSS

Mais les ressources elles-mêmes, pour lesquelles je vais me référer et que je demande à utiliser activement:

• Cours
• CoDecademy, cours HTML & CSS. Nous n'utiliserons que des leçons. Tests et projets Il est payé, nous allons contourner sans eux.
• HTML Academy.. Vous pouvez utiliser mon code partenaire 1115104d039 pour obtenir une bonne réduction dans des cours avancés.

Il devrait également être mentionné sur l'école ÉcoleLorsque l'alimentation de matériau de haute qualité, mais elle est payée et sera pratique uniquement pour ceux qui connaissent parfaitement l'anglais.

Je note également probablement le livre de référence htmlbook.ru.que vous obtiendrez souvent dans le futur en utilisant le moteur de recherche.

Ce n'est pas par hasard que les cours E. POPOV sont en premier lieu. Cette personne sera votre guide dans les premières étapes.

Je considère que HTML Academy est l'école la plus forte et la plus sérieuse des ressources russophones, c'est là que je vais passer des cours avancés qui ne sont disponibles que par abonnement, mais ce n'est pas du tout cher (300 roubles par mois) comparé. Pour coder l'école (prix de 20 à 30 dollars en fonction des actions menées). Utilisation de mon code partenaire dans HTML Academy - 1115104D039, vous obtenez une réduction sur l'abonnement.

Pour HTML Academy, nous contacterons chaque fois les cours Popov et Codecademy, cela vous permettra de vous sentir plus calme et plus confiant lorsque vous résolvez des problèmes, dont certains sont complètement graves. Nerva n'est pas tout de fer.

Plan d'apprentissage pour l'usinage facile HTML et CSS

Je vous suggère de vous tenir à ce plan. J'ai donc fait moi-même, j'ai aimé le résultat et le processus d'apprentissage lui-même.

1. . Ce que vous trouvez là-bas et comment le faire regarder dans mon article.
2. CoDecademy, cours HTML & CSS. Unité 1, unité 2, unité 3
3. HTML Academy., six premiers cours avant le cours "connaissance avec CSS", sa plus tard
4. . Voir pour plus de détails dans mon article.
5. CoDecademy, cours HTML & CSS. Unité 4, unité 5, unité 6. À ce sujet, nous finirons d'utiliser Codecademy.
6. HTML Academy.À partir du cours "Connaissance de CSS" 5 cours, finissant par le cours "Décor du texte avec CSS"
7. Cours: pratique HTML5 et CSS3
8. HTML Academy., Tous les cours restants du niveau de base, en commençant par le "modèle de bloc du document" et se terminant par le cours "Test de finition". Quelqu'un peut sembler que le cours de Popov sur la mise en page vaut la peine d'être passée après HTML Academy (c'est-à-dire de changer les deux dernières étapes). Ce point de vue mérite également le respect, mais il me semble que vous passez de manière plus responsable des cours de HTML Academy après avoir ressenti les pages proposées par Eugene et je me souviendrai de tout mieux.
9. Niveau avancé. Nous n'avons qu'une école d'Académie HTML, où vous devez passer d'autres niveaux par abonnement. N'oubliez pas de mon code partenaire que j'ai dit ci-dessus. Apprenez des «cours avancés» et des «préprocesseurs». Au moment de la rédaction de l'article, je suis sur le parcours "Gradients linéaires". Je prévois de traverser tous ces cours jusqu'à la fin.

C'est le plan de travail marqué pour ceux qui veulent apprendre à comprendre le HTML et le CSS. Il peut sembler que tout cela est très long et difficile. Peur, comme vous le savez, les yeux sont parfaits. Tout commence à partir de la première étape. Sinon de ne pas être paresseux et de s'engager avec diligence de temps libre, la liste sera réduite.

Sans aucun doute, je n'ai pas parlé d'autres ressources pouvant également être utiles. Si vous le savez, pas nécessairement uniquement sur HTML et CSS, alors dites-nous d'eux! Ce sera génial si vous laissez les informations dans les commentaires.

Cours sur HTML5 et CSS3, mise en page moderne et conception web

J'ai décidé de vous parler de plusieurs cours sur HTML et CSS, ainsi que sur les sujets de la mise en page moderne, de la conception Web et de la création de sites. Mon plan d'étude pour HTML et CSS, que j'ai proposé ci-dessus testé et donne excellents résultats. Mais peut-être que quelqu'un sera gênant de sauter sur différentes sources, je veux que tout soit au même endroit. Dans ce cas, engagez-vous dans des cours de droit d'auteur professionnels avec des leçons détaillées que je dirai, sera plus agréable et encore plus efficace.
Ci-dessous, je vais simplement vous donner une liste de cours de formation et vous regardez qui vous aimez.

• Pratique sur les bases de la disposition adaptative dans HTML5 et CSS3
• HTML5 et CSS3 de zéro à des pros
• Pratique de la disposition du site pour les appareils mobiles
• Design Web: cours de prêt pratiques
• Professionnel de concepteur Web. Créer des mises en page revendiquées
• Tendances de développement Web modernes
• Tout sur la création de sites
• Plan de création de site étape par étape
• JavaScript et jQuery de zéro à pro
• Secrets du référencement pratique
• PHP moderne: Travailler avec Vkontakte
• Apprenez à créer des pages de belles abonnements et de vente modernes
• Blogging à l'école

Une minute de plus. Je pensais, mais soudain le sujet

Principes de base HTML Ce sont les règles de base du langage HTML, la description de la structure de la page HTML, la relation dans la structure du document HTML entre les éléments HTML.

Le document HTML est un document texte ordinaire, peut être créé comme dans l'éditeur de texte habituel. (Carnet)et dans une spécialisation, avec code d'éclairage (Notepad ++, code Visual Studio, etc.). Le document HTML a une extension .html.

Le document HTML consiste en un arbre d'éléments HTML et de texte. Chaque élément est désigné dans le document initial initial (ouverture) et la balise finale (fermeture) (avec une rare exception).

Tag de démarrage Montre où l'élément commence, la finale - où elle se termine. Fermeture Il est formé en ajoutant une barre oblique / avant le nom de la balise:<имя тега> … . Entre les étiquettes initiales et fermées, il y a le contenu du contenu de la balise.

Les balises simples ne peuvent pas stocker le contenu directement, il est prescrit sous forme de valeur d'attribut, par exemple, étiquette Créer un bouton avec du texte Bouton À l'intérieur.

Les balises peuvent être investies les unes dans les autres, par exemple,

Texte

. Lorsque vous investissez, l'ordre de sa fermeture devrait être suivi. (Le principe de "matryshka")Par exemple, la prochaine entrée sera incorrecte:

Texte

.

Les éléments HTML peuvent avoir des attributs (globaux applicables pour tous les éléments HTML et leur propre). Les attributs sont écrits dans la balise d'élément de découverte et contiennent le nom et la valeur spécifiés dans le format du nom d'attribut \u003d "valeur". Les attributs vous permettent de modifier les propriétés et le comportement de l'élément pour lequel ils sont spécifiés.

Chaque élément peut être attribué à plusieurs valeurs de classe et une seule valeur d'identification. Plusieurs valeurs de classe sont enregistrées via l'espace,

. Les valeurs de classe et d'identité ne doivent constituer que des lettres, des chiffres, des traits d'union et des sous-traitants inférieurs et ne doivent commencer que par des lettres ou des chiffres.

Le navigateur Navigation (interprète) un document HTML, construisant sa structure (DOM) et l'affichage conformément aux instructions incluses dans ce fichier (styles, scripts). Si le balisage est correct, la page HTML contenant des éléments HTML sera affichée dans la fenêtre du navigateur - titres, tables, images, etc.

Processus d'interprétation (Analysement) Commence avant que la page Web soit complètement chargée dans le navigateur. Les navigateurs gèrent des documents HTML séquentiellement, à partir du tout début, tandis que le traitement de CSS et de la corrélation de feuilles de style avec des éléments de page.

Le document HTML est composé de deux sections - Titre - entre les balises … et partie significative - entre les étiquettes …

.

Structure de la page Web

1. Structure de documents HTML

La langue HTML suit les règles contenues dans le fichier AD de type AD de document. (Définition du type de document ou DTD). DTD est un document XML qui détermine les balises, les attributs et leurs valeurs valables pour un type HTML spécifique. Chaque version de HTML a sa propre DTD.

DOCTYPE. Responsable de l'affichage correct du navigateur de page Web. DOCTYPE définit non seulement la version HTML (par exemple, HTML), mais également le fichier DTD correspondant sur Internet.

Éléments situés à l'intérieur de la balise , former un arbre d'un document soi-disant modèle d'objet Document, DOM (modèle d'objet de document). En même temps C'est un élément racine.

Figure. 1. Structure de page Web la plus simple

Pour comprendre l'interaction des éléments de page Web, il est nécessaire de considérer le soi-disant "Relation associée" Entre les éléments. La relation entre plusieurs éléments imbriqués est divisée en parent, filiales et soins infirmiers.

Ancêtre - un élément qui entre dans d'autres éléments. Figure 1, l'ancêtre pour tous les éléments est . En même temps C'est l'ancêtre pour toutes les balises contenues dans:

,

, ,