2 Qu'est-ce qu'une page Web. Autres options pour ajouter du CSS. Utiliser la réinitialisation CSS

Nous avons publié un nouveau livre, Social Media Content Marketing : Comment entrer dans la tête de vos abonnés et les faire tomber amoureux de votre marque.

S'abonner

Les pages d'un site Web sont des documents ou des parties de ressources Web dotés d'une URL unique. Ce sont des fichiers contenant des images, des fichiers audio, du texte, du matériel vidéo ou des animations. Son utilisation et sa visualisation s'effectuent à l'aide de navigateurs.

Plus de vidéos sur notre chaîne - apprenez le marketing Internet avec SEMANTICA

A quoi sert une page internet ?

L'objectif principal est de visualiser des informations. La page Web contient du contenu textuel, graphique, audio et vidéo. Il est lu depuis la page par le navigateur et affiché aux utilisateurs.

De plus, à l'aide des pages, une personne peut effectuer certaines actions sur le site : ouvrir des onglets, des menus, remplir des formulaires de commentaires, passer une commande dans la boutique en ligne.

Comment enregistrer une page Web

  • Cliquez sur le menu et sélectionnez « Enregistrer sous », puis une boîte de dialogue du même nom s'ouvrira.
  • Dans la fenêtre qui apparaît, nous devons sélectionner le type de fichier, le nom de la page et l'emplacement de sauvegarde. Il existe aujourd'hui 4 formats, nous les analyserons ci-dessous.
  • Cliquez sur « Enregistrer », vous pouvez désormais afficher une copie de la page à tout moment.

4 formats de sauvegarde de page :

  • Pleinement. Dans ce format, l'élément sélectionné est enregistré dans son intégralité, avec toutes les images et décisions stylistiques, le design. Le navigateur crée également un dossier séparé dans lequel sont placés tous les documents publiés sur la ressource : images, photos, widgets, etc.
  • HTML. Il n'est plus possible de sauvegarder les images et les décisions stylistiques ; l'original est conservé avec la même structure et le même texte. De cette façon, vous économisez de l'espace mémoire.
  • Texte. Le texte enregistré peut être visualisé à l'aide de n'importe quel éditeur ; le texte est enregistré dans son intégralité et non par fragments.
  • Fichiers. Tous les fichiers placés sur la page sont enregistrés. Si nécessaire, vous pouvez modifier l'extension d'un fichier particulier.

Que signifie le message « La page Web est obsolète » ?

C'est une erreur assez courante. Cela signifie que la copie locale de la page est obsolète alors qu'il est demandé à l'utilisateur de la télécharger. Pour résoudre le problème, vous devez recharger la page.

Que signifie le message « La page Web ralentit votre navigateur » ?

Souvent, lorsque vous naviguez sur des sites Web, le texte « Une page Web ralentit votre navigateur » apparaît. Généralement, le ralentissement se produit parce que le navigateur charge automatiquement de nombreux scripts inutiles sur une page donnée. Pour résoudre le problème, vous devez modifier les paramètres de votre navigateur Web pour charger rapidement les scripts. Pour ce faire, allez dans le menu du navigateur, recherchez « Outils », puis cliquez sur « Ajouter ». Nous recherchons un plugin spécialisé « Shockwave Flash » et l'installons. Ensuite, dans les paramètres du plugin, sélectionnez l'élément « Demander avant l'activation » et cochez-le. Attention, les noms des éléments peuvent changer selon le navigateur utilisé, l'essentiel est d'en comprendre la signification.

Après cela, les scripts ne seront pas téléchargés automatiquement ; le système demandera l'autorisation avant chaque téléchargement.

La page Web ne répond pas : que faire et comment résoudre le problème

Ici, tout n'est pas aussi simple que dans les cas décrits ci-dessus. Le problème pourrait être n'importe quoi. Voyons comment résoudre ce problème.

La première chose à laquelle il faut faire attention est l’URL. Vérifiez que l'adresse de la page est correcte dans la barre d'adresse. Ensuite, vérifiez si la ressource s'ouvre sur un autre ordinateur. Si la page ne se charge pas sur tous les PC, vérifiez votre connexion Internet. Si tout va bien ici, il y a peut-être un problème avec le site.

La deuxième façon consiste à supprimer des fichiers. Il s'agit de fichiers spéciaux créés pour enregistrer des informations sur le profil créé. Parfois, les cookies sont corrompus. Cela a pour conséquence que les pages ne s'affichent pas. Pour les supprimer, ouvrez les paramètres du navigateur, sélectionnez « Avancé » puis « Données personnelles ». Ouvrez les paramètres de contenu et sélectionnez les fichiers qui nous intéressent. Supprimez « Tous les cookies et données du site ».

La méthode suivante consiste à changer de serveur proxy. Parfois, la connexion via un serveur proxy peut ralentir le chargement des pages Web ou afficher des erreurs. Pour résoudre le problème, allez dans les paramètres, puis ouvrez l'élément « Réseau » et précisez le nom du réseau. Ensuite, ouvrez les paramètres du serveur proxy et entrez les paramètres requis. Si vous ne connaissez pas ces paramètres, contactez votre administrateur réseau. Ensuite, la connexion Internet sera interrompue. Reconnectez-vous à Internet et continuez à travailler.

La page Web a été déplacée : que faire

Vous pouvez souvent rencontrer ce message. Très probablement, une nouvelle adresse sera située à proximité et le navigateur proposera de suivre ce lien. Accédez à la nouvelle version de la page et accédez aux informations nécessaires.

Nous avons expliqué ce qu'est une page Web et comment l'utiliser à certaines fins. Comme vous pouvez le constater, des problèmes peuvent survenir de temps à autre lors du fonctionnement des pages Web, mais ils peuvent tous être résolus.

INSTITUT D'ÉDUCATION OUVERTE DE MOSCOU
DÉPARTEMENT DES TECHNOLOGIES DES MATÉRIAUX ET DE L'INFORMATION

Supports de cours à distance
"Technologies de l'information et éducation"

Polilova Tatiana Alekseevna
[email protégé]

Comment créer une page Web

Le moyen le plus simple de créer une page Web consiste à utiliser les outils Microsoft Office. Les dernières versions de ce package offrent la possibilité de convertir un document standard au format HTML avec une bonne qualité de code.

Caractéristiques des mots

Un document préparé dans l'éditeur de texte Word peut être facilement converti en page Web. Cependant, cela ne semblera pas aussi attrayant que vous le souhaiteriez si des mesures supplémentaires ne sont pas prises. Regardons quelques exemples.

Prenons un peu de texte.

Nous convertissons le document en page Web à l'aide de l'opération Enregistrer sous page Web... (appelée depuis le menu principal - élément Fichier). La représentation HTML du document ressemblera alors à :

La première chose qui attire l’attention est que le texte occupe tout l’espace de l’écran. La longueur de la chaîne est trop longue. Pour une lecture confortable à l'écran, le nombre de caractères par ligne doit être compris entre 50 et 65.

Utiliser un tableau

Dans ce cas, vous pouvez procéder tout simplement : créer un tableau dans le document source et y placer le texte souhaité. Vous pouvez définir un cadre dans le tableau. L’apparence de la page Web sera alors grandement améliorée et la page paraîtra plus attrayante dans le navigateur.

Contexte et style

Il est conseillé de choisir un fond pas trop clair pour que le texte puisse y être lu clairement. Un tel fond dans la liste proposée est, par exemple, le papier de Rice. L'affichage de la page a sensiblement changé :

Insérer une image

Vous pouvez ajouter une image à un document, en la prenant, par exemple, à partir d'une collection de clips.

Vous devez cliquer avec le bouton droit sur l'image, effectuer une opération de copie, puis dans le document spécifier l'emplacement de l'image et effectuer l'opération de collage de l'objet copié.

Si vous insérez une image à l'intérieur d'un paragraphe, il est préférable de modifier les propriétés de l'image en définissant le texte pour qu'il s'enroule autour de l'image (vous devez sélectionner l'élément de menu principal Format puis Image) :

Cela ne créera aucun espace vide supplémentaire dans le document.

Enfin, vous pouvez ajouter un cadre et une ombre à l'image à l'aide des boutons du panneau Dessin - Type de ligne et Style d'ombre. De telles nuances ajoutent considérablement de l'expressivité à la page.

Si le panneau Dessin n'est pas sur la page, vous devez l'installer en sélectionnant l'élément du menu principal Affichage, puis Barres d'outils et dessin.

Ligne rampante

Word vous permet d'ajouter d'autres éléments de conception à une page Web, comme une « ligne rampante ». Pour utiliser cette fonctionnalité, vous devez ouvrir le panneau des composants Web à l'écran (à partir du menu principal - Affichage, puis Barres d'outils et composants Web). Cliquer sur le bouton d'opération Ticking Line ouvre une fenêtre supplémentaire pour spécifier le texte des paramètres de ligne rampante.

Comme d'habitude, vous pouvez modifier la police et les attributs d'une ligne : taille de la police et couleur des caractères. La page Web ressemblera à ceci sur votre écran :

Nous avons donné un exemple d'un ensemble très modeste de techniques de conception avec lesquelles vous pouvez concevoir une page Web basée sur un document existant au format Word.

Utiliser des modèles de conception

Si vous commencez à créer une page à partir de zéro, vous pouvez utiliser l'assistant de page Web, qui vous aidera à créer un document dans une boîte de dialogue. Ou vous pouvez utiliser un modèle de conception de page prêt à l'emploi, en le choisissant parmi un ensemble assez représentatif. Pour cela, dans l'opération Créer, sélectionnez le mode Créer à l'aide d'un modèle puis Modèles généraux. Un formulaire apparaîtra à l'écran dans lequel vous devrez sélectionner l'onglet Pages Web :

L'utilisateur peut choisir la couleur et le style indépendamment, par exemple en utilisant les paramètres Format - Thème.

Création d'hyperliens et de signets

La dernière question que nous envisageons d'aborder dans cette section est la création d'hyperliens dans un document.

Si l'on souhaite faire référence dans un document à un autre document ou à un autre site sur Internet, alors un tel lien hypertexte peut être réalisé comme ceci : sélectionnez un morceau de texte (un mot) dans le document et effectuez l'opération Insérer - Lien hypertexte... Un formulaire apparaîtra à l'écran dans lequel vous précisez l'adresse du lien hypertexte. L'adresse peut être saisie explicitement ou le fichier peut être sélectionné dans la fenêtre.

Ici, vous devez vous rappeler que l'adresse du fichier sélectionné sur votre ordinateur peut changer lorsque vous créez votre site. Ainsi, la méthode implicite de spécification d'une adresse ne convient que si la structure de votre dossier sur votre ordinateur et sur le site Internet est la même.

Si un lien hypertexte doit renvoyer à une autre partie du même document, alors vous devez d'abord insérer un signet au début du fragment souhaité. Vous devez effectuer l'opération Insérer - Signet et saisir le nom du signet dans le formulaire qui apparaît à l'écran.

Présentation Web dans PowerPoint

PowerPoint est un programme conçu pour créer des présentations sur un ordinateur. Cependant, il a pour fonction de convertir une présentation préparée au format Web.

Vous pouvez ouvrir la présentation préparée et effectuer les opérations (à partir du menu principal) Fichier - Enregistrer en tant que page Web. Comme d'habitude, vous devez préciser le nom de la présentation Web dans la fenêtre qui s'ouvre. À la suite de la conversion de la présentation, un fichier portant le nom et l'extension spécifiés .htm et un dossier du même nom contenant du matériel supplémentaire seront créés.

Si vous appelez maintenant la présentation Web depuis le navigateur, vous pouvez voir le résultat de la conversion à l'écran.

Une ligne spéciale est créée en bas de l'écran, où se trouvent les boutons permettant de passer aux diapositives et les boutons permettant de définir divers paramètres pour visualiser les présentations.

La présentation peut être visualisée avec la structure des diapositives affichée. Mais si cette information ne présente pas d'intérêt, alors le champ de l'écran réservé à l'affichage de la structure peut être supprimé (opération développer/réduire la structure en ligne du bas).

À l’aide du bouton Afficher les magasins, vous pouvez afficher les diapositives en plein écran.

Créer des hyperliens

Dans une présentation, vous pouvez créer des liens hypertexte qui relient les objets d'une diapositive, par exemple, à d'autres diapositives. Il est ainsi possible de créer une structure hypermédia qui correspondra naturellement à l’idéologie d’Internet. Expliquons cette technique avec un exemple.

Préparons plusieurs diapositives préparées sur le thème de la flore du lac Baïkal, compilées à partir d'une collection de photographies. Créons une nouvelle diapositive - une table des matières pour la collection.

Si la nouvelle diapositive n'est pas la première de la séquence, vous devez alors passer en mode trieur de diapositives (à partir du menu principal en utilisant les opérations Affichage - Trieur de diapositives) et faire glisser la nouvelle diapositive au début de la collection.

Placez de petites copies de toutes les photographies sur une nouvelle diapositive. Le moyen le plus simple de procéder est de la manière la plus simple : copiez séquentiellement toutes les photographies de la collection sur une diapositive vide, réduisez leur taille et placez-les, par exemple, sur deux lignes. Les images peuvent ensuite être décorées de cadres avec des ombres. Vous pouvez ajouter le titre de votre présentation à la diapositive de table des matières. La vue de présentation en mode Trieuse de diapositives est illustrée ci-dessous :

Passons au mode normal d'affichage des diapositives (commandes Affichage puis Normal). Sur la diapositive de la table des matières, sélectionnez la photo et exécutez la commande Insérer - Lien hypertexte. Dans la fenêtre qui s'ouvre, définissez la transition via un lien hypertexte - le numéro de la diapositive avec une grande photographie à partir de laquelle le plus petit échantillon de la table des matières a été copié.

De même, nous relierons d’autres images de la diapositive de table des matières aux diapositives correspondantes avec les photographies originales.

Si nous lançons maintenant notre présentation, elle fonctionnera comme une structure hypermédia : lorsque vous cliquez sur une petite photo, elle accédera à une diapositive avec une photo plus grande.

Il reste à améliorer un peu notre structure. Ajoutons une flèche à chaque diapositive avec une photo dans sa partie supérieure gauche (Forme automatique dans la barre d'outils Dessin), et créons un lien hypertexte à partir de cette flèche qui ira vers la diapositive de table des matières. Désormais, le mouvement à travers la structure hypermédia que nous avons créée deviendra « bidirectionnel » : depuis la table des matières, vous pourrez accéder aux diapositives avec des photographies, et à partir de n'importe quelle diapositive, vous pourrez revenir à la table des matières.

Après avoir converti la présentation au format Web, notre première page ressemblera à ceci :

En cliquant sur une image dans le menu, vous accéderez à une diapositive avec une grande photo, et en cliquant sur la flèche (en haut à gauche de la diapositive), vous accéderez à la page de table des matières de la collection.

Messieurs, bonne humeur à tous) Aujourd'hui, j'ai décidé d'écrire un article sur le sujet - Comment créer votre propre page Web. J'ai été incité à aborder ce sujet par des lecteurs et des amis qui, pour une raison quelconque, ne font toujours pas la distinction entre les types de sites et de pages sur Internet. J'appelle très rarement quelque chose une page Web))) Cependant, beaucoup de mes amis le disent souvent. Surtout pour eux, j'ai décidé de décrire les principaux types de pages Web que vous pouvez créer vous-même afin d'avoir une sorte de représentation de vous-même en ligne.

Avant de créer une page Web, vous devez absolument créer un e-mail ou une adresse e-mail. J'ai décrit les options de création dans cet article - . Et si vous disposez d’une adresse email, passons aux options de création de votre page web personnelle. Poursuivez votre lecture pour découvrir comment vous aider à créer votre propre page Web.

Site d'une page

La méthode la plus ancienne))) Pour cela, vous devez apprendre les bases du langage HTML. Faire cela à notre époque n'est pas du tout nécessaire ; il existe un million de services, qui seront discutés ci-dessous. Cependant, si vous souhaitez comprendre comment fonctionne un site Web et, en partie, Internet, essayez de créer vous-même un site Web d'une page. J'ai décrit comment procéder dans l'article -. Il existe des options pour créer un site Web d'une page à l'aide de créateurs de sites Web et de plateformes gratuites.

Page sur le réseau social VKontakte

Je pense qu'à notre époque, la phrase : « Je me suis créé une page sur Internet » s'applique surtout au réseau social Vkontakte. VK est le réseau social le plus populaire de la CEI. Créer votre page ici ne prend que 1 minute. De plus, des dizaines de fonctions utiles pour les activités en ligne s'ouvrent à vous.
J'ai beaucoup écrit sur VKontakte et je prévois d'en écrire encore plus)) Avec ce réseau social, vous pouvez...

VKontakte vous permet également de créer une URL pratique vers votre page Web, au lieu de l'URL standard lors de l'enregistrement http://vk.com/id8032931. Ensuite, vous pouvez le changer en un beau - http://vk.com/vasheimya.vashafamiliya.

Page Facebook

Si VKontakte est le réseau social le plus populaire de la CEI, alors Facebook est le réseau social n°1 au monde. Facebook est considéré comme destiné aux utilisateurs russophones avancés))) Mais personnellement, je pense que tout cela est dû au fait que Facebook est très populaire et pratique.

Tout comme sur VKontakte, vous pouvez vous attribuer une belle adresse pour votre page Web. J'ai décrit le manuel complet sur la façon de créer une page Web sur Facebook dans l'article -.

Blogue

Un blog est mon option la plus recommandée pour créer votre propre page Web. Le blog offre des milliers d’opportunités de réalisation de soi et est très simple à utiliser. Souvent aussi gratuit que les pages Web des réseaux sociaux.
Je vous propose une sélection d'articles sur la création d'une page web à l'aide d'un blog :

  • - rapide, mais avec des frais d'hébergement et un domaine séparé.
  • est une plateforme de blogs de Google. Intégré à de nombreux services Google. Très pratique si vous êtes un fan de Google))
  • est la plateforme de blogs qui se développe le plus dynamiquement. J'ai lu des statistiques dans une publication américaine selon lesquelles Tumblr est plus populaire parmi les enfants américains de 12 à 13 ans que Facebook !!! Je pense que c'est un indicateur de la commodité et du développement de cette plateforme.
  • — voici les manuels de presque toutes les plateformes de blogs connues, y compris celles ci-dessus.

Agenda

Voici toutes les principales options pour créer votre page Web ou, en d’autres termes, votre présence sur le Web. Littéralement 1 minute et vous êtes déjà immergé dans l'espace du World Wide Web. Bonne navigation sur le Web !

Bonjour, chers lecteurs du blog. Avec cet article, nous allons commencer à apprendre les bases du langage HTML.

Vous savez probablement déjà que la langue principale d'Internet est langage de balisage hypertexte HTML (HyperText Markup Language). Dans cet article, nous apprendrons les concepts de base du HTML et apprendrons à créer des pages WEB simples.

Commençons par le plus important, regardons comment ça marche World Wide Web-Internet. Pour produire des pages Web, vous créez des fichiers écrits en HTML et les placez sur un serveur Web. Après cela, n'importe quel navigateur installé sur un appareil ayant accès à Internet, qu'il s'agisse d'un ordinateur, d'un téléphone ou d'une tablette, peut trouver vos pages Web.

Serveur Web- Il s'agit d'un ordinateur ordinaire doté d'un logiciel spécial ayant accès à Internet. Il écoute en permanence les requêtes des navigateurs concernant les pages Web, les images, les fichiers audio et vidéo. Ayant reçu une requête pour l'une de ces ressources, le serveur la recherche et l'envoie au navigateur.

Navigateur est un programme spécial conçu pour afficher des sites Web, tels qu'Internet Explorer. À l'aide d'un navigateur, vous parcourez des sites Web en cliquant sur des liens. Tout clic de ce type amène le navigateur à demander la page HTML au serveur Web, à recevoir une réponse et à afficher la page dans sa fenêtre. C'est lors de l'affichage de la page que le langage HTML commence à fonctionner ; il indique tout au navigateur sur la structure et le contenu de la page web. Utilisation des commandes - balises, HTML indique au navigateur où commencent les paragraphes de texte, quelle partie du texte constitue un titre et où insérer des tableaux et même des images. Et les balises sont des mots entre crochets, par exemple

,

, .

Vous avez un besoin urgent d’une boutique en ligne, mais vous n’avez pas le temps d’apprendre le HTML, CSS, PHP et d’autres technologies. Ensuite, vous pouvez simplement louer une boutique en ligne avec des fonctionnalités entièrement mises en œuvre et une optimisation pour les moteurs de recherche.

Langage HTML et ses balises

La première version du langage HTML est apparue en 1992. Actuellement en 2013, la spécification d'une nouvelle version de HTML, numéro 5, est en cours d'élaboration. Le développement de cette spécification est réalisé par le World Wide Web Consortium, ou W3C en abrégé. L'organisation W3C développe d'autres standards Web. Vous pouvez vous familiariser avec ces normes sur leur site Web www.w3.org. À propos, de nombreux navigateurs Web prennent déjà en charge certaines fonctionnalités HTML 5.

Je suggère de commencer à apprendre le HTML tout de suite avec un exemple. Créons donc notre première page Web. Tout éditeur de texte est adapté à la création de pages WEB. Je suggère d'abord d'utiliser Windows intégré Bloc-notes(en général, à l'avenir, je recommande d'utiliser pour éditer du code html). Vous pouvez le trouver : « Démarrer->Tous les programmes->Accessoires->Bloc-notes ». Créons une page sur les voitures. Alors, ouvrez le Bloc-notes et tapez-y le texte suivant :





Exemple de page Web


Site sur les voitures.


Bienvenue sur notre site automobile. Vous trouverez ici de nombreux articles intéressants et utiles sur voitures. Le site contient des descriptions de nombreuses voitures importées et nationales.





Ensuite, enregistrez la page Web créée dans un fichier nommé index.html. Dans ce cas, dans la boîte de dialogue d'enregistrement du fichier, vous devez définir l'encodage sur UTF-8 et mettre le nom du fichier entre guillemets, sinon le Bloc-notes y ajoutera l'extension txt et notre fichier s'appellera index.htm.txt :

Il ne reste plus qu'à ouvrir le fichier créé dans le navigateur et à regarder le résultat. Pour ce faire, vous pouvez utiliser le navigateur Microsoft Internet Explorer fourni avec Windows, ou tout autre navigateur installé sur votre ordinateur, en double-cliquant sur le fichier index.html ou en faisant glisser le fichier sur l'icône du navigateur. Ouvrez-le et voyez quelque chose comme ceci :

Nous avons donc créé une page Web dans le Bloc-notes qui, bien qu'un peu simple, contient déjà un gros titre et un paragraphe de texte automatiquement divisé en lignes et contient une partie en gras.

Qu'est-ce qu'une balise ?

Parlons maintenant davantage de la structure des pages. Regardons le fragment :

Site sur les voitures

. Ici, nous voyons le texte qui apparaît sur la page comme titre, entouré de balises

Et

. Qu'est-ce qu'une balise en HTML ?

Balise HTML sont des mots et des symboles ordinaires entourés de crochets, par exemple

,

, . Alors tague

est la balise d'ouverture, balise

balise de fermeture, et le texte entre eux est appelé le contenu de la balise. Marquez également

et étiquette

sont appelés balises appariées. Ensemble, la balise d'ouverture, le contenu et la balise de fermeture forment un élément de document HTML. Il existe également des éléments constitués d'une balise d'ouverture :

Donc tag jumelé

définit un élément d'en-tête de premier niveau. Il y a six niveaux de rubriques au total, ce sont les éléments

.

Les éléments peuvent être en bloc ou en ligne (texte). Éléments de bloc effectuer un formatage structurel de la page. Les éléments de bloc sont toujours affichés sur une nouvelle ligne de la page et sont en retrait par rapport aux éléments adjacents. Éléments en ligne effectuer un formatage de texte direct ou un formatage logique. Élément

est un élément de bloc.

C'est tout pour moi !!! Rendez-vous dans les prochains articles !

9 voix

Bienvenue sur les pages du blog Start-Luck. Aujourd'hui, je voudrais vous montrer comment utiliser le code. La rédaction de sites Web est une activité intéressante qui peut sembler incroyablement difficile à beaucoup. En fait, une simple page peut être créée en seulement 5 minutes.

Dans cet article, je parlerai de la création d'une page HTML. Nous terminerons cette tâche en moins de 10 minutes, puis nous examinerons plus en détail les balises principales. Ce serait une erreur de qualifier une telle publication de leçon. Il s’agit plutôt d’une graine conçue pour vous montrer la simplicité du travail et vous donner l’envie d’avancer, d’apprendre plus et de faire mieux.

Comment créer une page

Je vous suggère de faire la première page dans un bloc-notes. Le plus simple, qui se trouve dans le menu Démarrer, est le dossier « Accessoires ». Il n'est pas encore nécessaire de télécharger quoi que ce soit. Essayez d'utiliser ce que vous avez.

Ouvrez le document.

Collez-y ce code.

<HTML > <tête > <titre > Ma première page</titre> </tête> <corps > <centre >

</h1> <br/>
<centre > "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"> <br/>
<style de police="couleur:rouge" ></police> <br/>
<b></b> <br/>
Nous avons atteint le fond<br/>
Vous en savez maintenant un peu plus sur les balises et pouvez les utiliser. Essayons d'insérer un lien pour relier plusieurs pages entre elles.<br/>
<heures > Par exemple, voici un lien vers mon blog -<a href = "http://site/" > Début-Chance</a>- parle simplement de « choses compliquées ».<br/>
<br/>
</corps> </html>

Ma première page

Créer une page est plus facile que vous ne le pensez

Beaucoup peuvent penser que créer des sites Web est difficile, voire impossible. Pour ce faire, vous devez étudier, apprendre et faire beaucoup de choses. En fait, il existe environ 100 balises que vous n’avez même pas besoin d’apprendre. Il est seulement important de comprendre ce qui est utilisé et où. Vous pouvez rechercher des informations dans diverses aide-mémoire et, au fil du temps, vous commencerez à vous souvenir automatiquement des balises.



Code simple pour rendre le texte rouge

Ce n'est pas beaucoup plus difficile d'écrire en gras

Nous avons atteint le fond

Vous en savez maintenant un peu plus sur les balises et pouvez les utiliser. Essayons d'insérer un lien pour relier plusieurs pages entre elles.

Eh bien, c'est tout. Votre première page est prête



Le fichier doit être nommé index.html. Fin ".html" indique l'extension du fichier. Si vous entrez simplement le nom de l'index, le document sera enregistré sous forme de fichier texte et ne sera pas ouvert par le navigateur.

J'ai enregistré le document sur mon bureau. Maintenant, vous devez le trouver, faire un clic droit et l'ouvrir à l'aide de n'importe quel navigateur. Je choisirai Google Chrome.

Voici à quoi ressemble la page que je viens de créer. Le vôtre ne sera pas différent. Tout est exactement pareil : avec des images et une police de couleur.

Je vais maintenant parler des balises plus en détail, mais pour l'instant supprimons simplement " du titre centre " et insérez une ligne contenant le mot " Couleur" D'ailleurs, j'ai déjà écrit. C'est très simple, je recommande de le lire.

Enregistrez à nouveau le document, cette fois vous pouvez simplement utiliser le raccourci clavier Ctrl + S, puis actualiser la page dans le navigateur à l'aide du bouton F5

N'oubliez pas que presque toutes les balises doivent s'ouvrir et se fermer. Autrement dit, le code avec une barre oblique doit être situé quelque part. Dans ce cas, cela ressemble à ceci : .

Vous voyez, le titre est devenu rouge. De la même manière, vous pouvez donner la teinte souhaitée à n'importe quelle partie du texte.

Et bien ça y est, l'exemple est prêt, et vous devriez être fier de vous. Bien entendu, il n'est pas encore en ligne ; pour cela, il faut mettre en ligne la page web fournie par l'hébergement. Vous devez également connecter votre domaine afin que d'autres personnes puissent voir votre création.

Pour l'instant, vous seul pouvez voir la page. Mais il faut l'admettre, un tel site ne peut que surprendre une personne de l'âge du fer. Mais c'est la première tentative, rendons-la encore plus réussie en comprenant les balises que nous avons utilisées. Cela vous aidera à apprendre à créer vos propres projets sans l'aide de personne.

Balises

Avec votre permission, je vais passer au programme NotePad++. Il présente de nombreux avantages par rapport à un bloc-notes classique. Maintenant j'aurai vraiment besoin de la mise en avant des balises pour vous montrer les éléments dont je vais parler. En général, si vous souhaitez apprendre le HTML, je vous recommande fortement d'installer ce programme gratuit.

Elle n'est pas la seule et je peux vous en proposer quelques autres si quelqu'un est intéressé par des alternatives. Nous allons passer à la partie théorique.

Basique

La page commence et se termine par des balises . Ils montrent au navigateur qu'il s'agit d'un document Web créé en HTML.

Vient ensuite ou un titre. Il contient les informations les plus importantes sur la page, dans notre cas - . Si vous n'avez pas encore trouvé la phrase « Ma première page », présente dans le code, faites attention à l'onglet lui-même, au-dessus de la ligne de recherche.

Ce sont les balises sont responsables du début et de la fin des informations principales sur la page.

Étiqueter

indique que la phrase est un titre. Par défaut, il est légèrement plus grand que le texte principal et est mis en évidence en gras. Si vous et moi écrivions maintenant non seulement en HTML, mais créions également un fichier CSS avec lequel notre fichier se chevauchait, nous pourrions contrôler la taille, la police et même la couleur de tous les titres de la page sans écrire style de police , comme nous l'avons fait dans l'exemple. Même s’il est trop tôt pour en parler aussi.

D’ailleurs, le Titre et le H1 ont leur influence lors de l’attribution d’une place à votre site dans les résultats de recherche. Vous devez les traiter avec une grande attention et ne rien écrire à l'intérieur juste pour le plaisir. Ils sont liés à. En plus de h1, il existe également h2, h3, h4.

Dans la même ligne il y a une ouverture et une fermeture

. Grâce à cet élément, vous pouvez aligner le texte au milieu. Si cette balise est supprimée, le texte sera aligné à droite.


- l'une des rares balises simples. Autrement dit, cela fonctionne tout seul. Grâce à cela, vous sautez des éléments d'une ligne à une autre. En termes simples, vous indentez. Nous l'avons écrit une fois, ce qui signifie que nous sommes descendus une, deux fois, comme je l'ai fait, et l'indentation s'est avérée un peu plus grande.

Image

Vient ensuite l'étiquette img , c'est-à-dire image, image. Le crochet s'ouvre, toutes les informations de base sur l'image y sont saisies, et seulement après cela, il se ferme. Il convient de noter que img est une balise, et tous les autres éléments de code qui rentrent à l'intérieur sont ses attributs.

La première chose est alt , c'est-à-dire une description. Ceci est également nécessaire pour l’optimisation. Parfois, il est également ajouté titre . Lorsque vous survolez l'image avec la souris, une info-bulle apparaît à côté du curseur lorsque la page est déjà ouverte dans le navigateur.

Il était possible de télécharger le dessin dans le dossier du site et d'y écrire le chemin d'accès, mais j'ai choisi la voie la plus simple. J'ai trouvé une photo parmi Pixabay, je l'ai ouverte dans une nouvelle fenêtre et j'ai collé le lien.

Dans la balise src le chemin d'accès à l'image est spécifié. C'est lui qui indique au navigateur quoi déplacer ensuite pour trouver l'image souhaitée et dans quelle direction regarder - vous l'écrivez vous-même.

Formatage du texte

est chargé de donner à une partie du texte un style spécial, par exemple, comme dans notre cas, une couleur différente. style = "couleur: rouge" indique que la couleur sera rouge. Si vous voulez du jaune, écrivez jaune, vert - vert. Vous pouvez utiliser les codes couleur de Photoshop.

aide à mettre le texte en gras.


trace une ligne horizontale. Il est unique et ne s'utilise que lorsqu'il est fermé. Si tu écris
plusieurs fois, vous obtiendrez exactement le même nombre de bandes horizontales lorsque vous ouvrirez la page dans le navigateur.

Links

indique au navigateur qu'il y aura ensuite un lien. Vous souhaitez rediriger le lecteur vers une autre adresse. Cette balise est livrée avec un attribut obligatoire href = "adresse" . Les guillemets contiennent le chemin vers lequel le navigateur doit emmener le visiteur de la page. Une fois cette balise écrite, une description, un mot ou plusieurs, est insérée, qui, une fois cliqué, emmènera le lecteur plus loin. Une fois ces conditions remplies, vous pouvez insérer une deuxième balise de fermeture .

Une fois la partie principale de la page écrite, vous fermez la balise corps , puisque le corps est terminé. Et indiquez que vous arrêtez de l'utiliser pour aujourd'hui HTML .

Si vous souhaitez en savoir plus sur les balises HTML et apprendre à insérer non seulement des images, mais aussi des vidéos, à créer des boutons, des formulaires divers, des listes, des paragraphes, alors je peux vous proposer un cours gratuit d'Evgeniy Popov " Bases HTML " Seules 33 leçons vous aideront à atteindre le niveau supérieur.


Je voudrais également vous recommander un cours vidéo qui vous explique comment les sites Web sont conçus. L'ensemble du processus est montré avec des exemples réels, ce qui est particulièrement intéressant. Le cours s'adresse à la fois aux débutants qui ne connaissent même pas encore le HTML, et à ceux qui connaissent déjà bien le HTML et le CSS, mais ne savent pas bien mettre en page des sites Web. Vous pouvez obtenir des informations plus complètes en suivant le lien : www.srs.myrusakov.ru/makeup


De plus, à emporter Livre gratuit sur la création de site internet ! Ce livre est destiné aux débutants, et c'est là que le site Web est créé DE et À. C'est-à-dire qu'un design est préparé, puis les pages sont mises en page, la partie logicielle est écrite, puis le site est publié sur Internet. L'auteur commente soigneusement tout et le livre contient de nombreuses captures d'écran et illustrations. De plus, la particularité du livre est qu'il ne crée pas un site abstrait, mais un site tout à fait réel qui existe sur Internet.

Aujourd’hui, vous avez fait beaucoup, car le premier pas est le plus difficile.

Abonnez-vous à la newsletter et Groupe VKontakte , et découvrez également : comment et pourquoi vous avez besoin d'un moteur de site Web, ce que sont la disposition des blocs et la grille modulaire, comment rédiger correctement des sites Web, et bien plus encore.

A bientôt et bonne chance !



Des questions ?

Signaler une faute de frappe

Texte qui sera envoyé à nos rédacteurs :