Lors du développement d'un site Web, un élément de conception intéressant qui attire l'attention peut être téléscripteur... Il est particulièrement pratique de publier avec son aide de brèves nouvelles, des informations sur les remises, les ventes, etc. De plus, la ligne rampante est le moyen le plus simple de créer des animations sur un site Web.
La ligne rampante est formée à l'aide de la balise (étiquette de fermeture requise). Étiquette à l'origine
Un intérêt particulier pour la création d'un site est que le contenu du conteneur
50% de réduction lors de la commande CASCO en ligne. Service de lavage de voiture gratuit pour chaque client
La longueur de la ligne rampante peut être limitée en définissant l'attribut largeur(longueur de chaîne) ou hspace(remplissage à partir des limites de défilement) en pixels ou en pourcentage. En parlant de navigateurs, dans cet exemple, je devais entrer avant la ligne de défilement Espace non-cassant() Et mettre style = "espacement des lettres : 0em", car sans cette "chimie" Internet Explorer 7(Doit mourir!) Ligne rampante affichée de manière incorrecte à des échelles d'affichage de page supérieures à 100 %.
Si vous faites de n'importe quel élément de la ligne de défilement un lien, vous obtenez une astuce intéressante "attrapez-moi!". Dans notre exemple, pour suivre le lien, vous devez avoir le temps de cliquer sur la voiture rouge.
Le déplacement de la ligne rampante peut être défini non seulement horizontalement, mais également verticalement. Dans ce cas, comme dans le précédent, vous pouvez spécifier les dimensions de la zone dans laquelle le mouvement se produira (attributs largeur et la tailleétiqueter
Dans cet exemple, les navigateurs se sont déjà distingués pour la ligne de défilement vertical. Firefox 3.5 et Internet Explorer 7 et 8
... En plus de la nécessité d'insérer un espace insécable () avant le début de la ligne rampante, mais aussi l'inscription "Casco" y est affichée non pas au centre, mais dans Opéra tout va bien. Si vous le souhaitez, vous pouvez vous entraîner à utiliser les techniques HTML "subtiles" pour centrer cette étiquette dans les navigateurs spécifiés.
Pour la ligne rampante, vous pouvez définir les paramètres des éléments mobiles, ce qui vous permet de créer facilement des effets originaux. Considérons les principaux attributs de la balise
comportement- type de mouvement des éléments de ligne rampants :
- faire défiler- bord à bord dans un sens (par défaut),
- glisser- après avoir effectué le nombre de passages spécifié, la ligne reste au bord gauche ou droit de la page,
- alterner- le sens de déplacement est inversé après chaque cycle ;
bgcolor- couleur d'arrière-plan de la ligne rampante ;
direction- le sens de déplacement de la ligne rampante : - la gauche- à gauche (par défaut),
- droite- À droite,
- vers le bas- descente,
- en haut- en haut;
la taille- la hauteur de la ligne rampante ;
hspace- retrait des bordures gauche et droite de la zone de défilement ;
boucle- nombre d'impressions de lignes rampantes, par défaut - infini répétition (interminable);
quantité de défilement- déplacement en pixels par pas ;
délai de défilement- le délai en millisecondes entre les étapes. Il est utilisé pour ralentir le mouvement des éléments de ligne rampants;
vitesse vraie- la valeur minimale du délai entre les pas, par défaut 60 ms ;
espace virtuel- décalage vertical par rapport aux limites de défilement ;
largeur- la largeur de la ligne rampante.
Texte et éléments à l'intérieur des balises , peut être formaté de la même manière que n'importe quel élément d'une page Web.
Note importante: si la longueur de la ligne rampante (texte + images) est supérieure à la largeur de la page du site, alors assurez-vous de spécifier le paramètre largeur pour éviter les distorsions de mise en page dans certains navigateurs !
Si la ligne rampante est répétée sur plusieurs pages du site, il est alors pratique de la disposer sous la forme d'un encart (inclure), qui peut être rapidement modifié. Toute méthode d'inclusion de fragments dans une page de site fonctionnera. L'un des plus simples est avec JavaScript... Sur la page, à l'endroit où doit se trouver la ligne rampante, insérez
, et placez le texte de la ligne rampante dans un fichier séparé stroka.js, que vous placez dans le même dossier que les pages d'exploration. Ci-dessous une variante d'un tel fichier avec réglage de la couleur du texte affiché :
Vérifiez que l'encodage de ce fichier est le même que celui de la page principale. Si vous utilisez le programme Adobe dreamweaver, puis pour modifier l'encodage, sélectionnez la section du menu Modifier - Propriétés de la page - Titre / Encodage... Vous pouvez également modifier l'encodage du script dans Microsoft Word... Pour cela, ouvrez le document, définissez l'encodage souhaité s'il ne s'affiche pas correctement (comment faire, consultez l'"Aide de Word"), puis enregistrez-le de la manière suivante : Fichier - Enregistrer sous - Texte brut - Enregistrer... Dans la fenêtre qui s'ouvre, vous pouvez définir l'encodage requis.
Bien sûr, avec l'aide JavaScript vous pouvez créer des effets supplémentaires lors de l'affichage de la ligne rampante. Par exemple, ajouter à l'intérieur de la balise
Arrête moi!
Comme indiqué ci-dessus, la balise
Pour créer cet effet, collez le code suivant au bon endroit sur la page :
.
Comme vous pouvez le voir, l'auteur a fait la sortie de la ligne rampante à travers la forme
, et placez le texte lui-même dans le script. Pour rendre les champs du formulaire invisibles, dans les arguments de la balise le style sans bordure est défini et la couleur d'arrière-plan correspond à l'arrière-plan de la page : style = "width : 100 % ; border : 0px ; background-color : #ffffee ;"
La vitesse d'affichage des lettres en millisecondes est définie par ligne vitesse variable = 150.Étant donné que le réglage de l'intervalle de répétition de la ligne de crawl n'est pas fourni, il peut être organisé sans plus tarder, en entrant des espaces après le texte dans la ligne : var ligne = " Ligne rampante lettre par lettre ";
Par JavaScript peut être fait comme une ligne rampante et la sortie
- le nom de la page du site affiché dans la barre bleue supérieure du navigateur (voir ci-dessus !). Pour ce faire, insérez le code suivant à l'intérieur de la balise <b><head>...</head>
</b>:</p>
<p><script language="javascript" type="text/javascript"><br>
var tit = document.title;<br>
var c = 0;<br>
function writetitle() {<br>
document.title = tit.substring(0,c);<br>
if(c==tit.length) {<br>
c = 0;setTimeout("writetitle()", 1000
)<br>
} else {<br>
c++;<br>
setTimeout("writetitle()", 200
)<br>
}<br>
}<br>
writetitle()<br>
</script></p>
<p>Paramètres <b>"fonctionnement <title>"
</b> spécifié à l'aide d'arguments de code numérique. Dans notre exemple, nous fixons 200 ms pour la vitesse des lettres et 1000 ms pour le délai de répétition de l'affichage de l'inscription.</p>
<p>Dans cet article, je parlerai de la façon de créer une ligne rampante sur le site à l'aide d'une balise HTML spéciale - <Marquee>... Pour commencer, il convient de noter que l'utilisation d'une ligne de course comme une sorte d'animation sur le site n'est pas à la mode depuis longtemps. On dit que ces sites datent du siècle dernier.</p>
<p>À mon avis, il est généralement préférable de ne pas utiliser de lignes rampantes dans les conditions actuelles. Dans les cas extrêmes, ils ne peuvent être utilisés que pour une meilleure visibilité des informations importantes (par exemple, les promotions en cours, les remises). Il existe de nombreux autres moyens modernes de transmettre des informations utiles à l'utilisateur (animation flash, bannières).</p>
<p>Il convient également de noter qu'il existe un autre moyen de créer un crawl en plus de la balise de sélection. Cette méthode est implémentée via JavaScript, mais en raison de l'inopportunité de son utilisation (elle charge la page), nous ne la considérerons même pas.</p>
<h2>balise HTML <marquee></h2>
<p>Ainsi, en HTML, il existe une balise spéciale pour créer une ligne de crawl : <marquee>...</marquee>... Il a beaucoup d'attributs avec des paramètres assez simples, il ne devrait donc pas y avoir de problèmes avec les paramètres. Ci-dessous, j'entrerai dans les détails de tous les attributs et paramètres de la balise de sélection. Soit dit en passant, il peut contenir non seulement du texte, mais également une image et d'autres éléments du site. Par conséquent, cet article répond également à la question de savoir comment créer une image, un objet, etc.</p>
<p><b>Syntaxe des balises <marquee>
</b></p>
<blockquote><marquee
атрибут
="параметр
" ...><span>Objets à déplacer</span></marquee
>
</blockquote>
<h2>Attributs et paramètres <marquee></h2>
<p>1. <span>largeur = "nombre / pourcentage"</span>- définit la largeur de la ligne de défilement en pixels / pourcentage. Ceux qui sont familiers avec html sont probablement familiers avec cet attribut. Par exemple:</p>
<ul><li>width = "240px" - définit la largeur sur 240 pixels ;</li>
<li>width = "40%" - définit la largeur à 40% en fonction de la largeur du bloc dans lequel se trouve l'objet ;</li>
</ul><p>2. <span>hauteur = "nombre / pourcentage"</span>- définit la hauteur de la ligne rampante en pixels / pour cent. Un exemple peut être donné comme avec le premier attribut. Par exemple:</p>
<ul><li>height = "400px" - définit la hauteur à 400 pixels ;</li>
<li>height = "30%" - définit la hauteur à 30% en fonction de la hauteur du bloc dans lequel se trouve l'objet ;</li>
</ul><p>Remarque : si la ligne rampante se compose d'une seule ligne, la hauteur peut être omise, car elle sera automatiquement déterminée en fonction de la taille de la police, qui est définie par le paramètre font-size : Npx.</p>
<p>3. bgcolor = "color" - définit la couleur d'arrière-plan du conteneur. Vous pouvez choisir une couleur sur la page : codes couleurs html. Remarque : si l'attribut bgcolor n'est pas spécifié, alors l'arrière-plan par défaut sera la couleur d'arrière-plan de la page.</p>
<p>4. comportement = "paramètre" - c'est l'un des attributs les plus importants de la ligne de crawl. Il définit le comportement de la ligne de défilement. A pas mal d'options différentes: <br>... alterné - la ligne rampante se déplace de manière cyclique: de droite à gauche, puis de gauche à droite (passe entre les bords). Par exemple:</p>
<blockquote><marquee
width
="400
" height
="50
" behavior
="alternate
"></marquee
>
</blockquote>
<p>Et voici à quoi ressemble cette ligne sur le site :</p>
<p>Une chaîne avec l'attribut behavior = "alternate"</p>
<p>Défilement - la ligne de défilement se déplace en dehors de la zone dans la direction indiquée par l'attribut direction (avec le paramètre), puis elle se répète de manière cyclique. À mon avis, cette option se produit le plus souvent. Par exemple:</p>
<blockquote><marquee
width
="400
" height
="50
" behavior
="scroll
" direction
="left
"></marquee
>
</blockquote>
<br>... slide - très similaire au scroll, cependant à la fin la ligne s'arrête et ne se répète plus. Par exemple: <blockquote><marquee
width
="400
" height
="50
" behavior
="slide
" direction
="right
"></marquee
>
</blockquote>
<p>Une chaîne avec l'attribut behavior = "slide" direction = "right"</p>
<p>5. <span>sens = "options"</span>- définit le sens de déplacement de la ligne de rampement. Il peut prendre les valeurs suivantes : <br>... vers le bas - mouvement de haut en bas. Par exemple:</p>
<blockquote><marquee
width
="400
" height
="50
" behavior
="scroll
" direction
="down
"></marquee
>
</blockquote>
<p>Une chaîne avec l'attribut behavior = "scroll" direction = "down"</p>
<br>... haut - mouvement de bas en haut. Par exemple: <blockquote><marquee
width
="400
" height
="50
" behavior
="scroll
" direction
="up
"></marquee
>
</blockquote>
<p>Une chaîne avec l'attribut behavior = "scroll" direction = "up"</p>
<br>... gauche - mouvement de droite à gauche. Remarque : la gauche est définie par défaut. Par exemple: <blockquote><marquee
width
="400
" height
="50
" behavior
="scroll
" direction
="left
"></marquee
>
</blockquote>
<p>Une chaîne avec un attribut behavior = "scroll" direction = "left"</p>
<br>... droite - mouvement de gauche à droite. Par exemple: <blockquote><marquee
width
="400
" height
="50
" behavior
="scroll
" direction
="right
"></marquee
>
</blockquote>
<p>Une chaîne avec l'attribut behavior = "scroll" direction = "right"</p>
<p>6. hspace = "nombre" - définit l'indentation horizontale de la ligne par rapport aux autres objets. La balise img populaire a un attribut similaire.</p>
<p>7. vspace = "number" - définit le retrait vertical sur d'autres objets.</p>
<p>8. loop = "number" - combien de fois le contenu doit être fait défiler. Le paramètre spécifie le nombre, qui définit le nombre de répétitions. Remarque : le nombre -1 signifie une boucle de défilement infinie. La valeur par défaut est -1.</p>
<p>9. scrollamount = "nombre" - la vitesse de la ligne rampante. Le nombre spécifie le nombre de pixels dont déplacer l'objet dans un cycle d'horloge. Remarque : la vitesse par défaut est de 6 pixels/sec. Par exemple:</p>
<blockquote><marquee
width
="400
" height
="50
" crollamount
="10
"></marquee
>
</blockquote>
<p>Une chaîne avec l'attribut scrollamount = "10"</p>
<p>10. scrolldelay = "nombre" - définit le délai entre les étapes de la ligne de défilement en millisecondes. Par exemple:</p>
<blockquote><marquee
width
="400
" height
="50
" scrolldelay
="500
"></marquee
>
</blockquote>
<p>Chaîne avec attribut scrolldelay = "500"</p>
<p>Enfin, je donnerai 2 exemples d'utilisation de lignes rampantes. Exemple utilisant un objet div :</p>
<blockquote><marquee
width
="400
" height
="50
">
<div
style
="width:200px
" class
="quote
">Div en cours d'exécution</div
>
</marquee
>
</blockquote>
<p>Div en cours d'exécution</p>
<p>Un exemple d'image en cours d'exécution :</p>
<blockquote><marquee
width
="400
" height
="50
"
<img src='/windows-10/veb-dizain-i-poiskovaya-optimizaciya-kak-sdelat-begushchuyu.html' loading=lazy loading=lazy>
</marquee
>
</blockquote>
<p>Avant de passer à l'étude du prochain grand chapitre, je vais vous parler un peu de certaines petites choses qui d'une manière ou d'une autre sont sorties de l'ordre général, mais parfois vous ne pouvez pas vous en passer. Ces éléments, au sens figuré, du langage html aideront à résoudre un certain nombre de problèmes auxquels vous êtes souvent confronté lors de la création d'une page, vous ne devez donc pas les traiter avec dédain.</p>
<h2>Caractères spéciaux</h2>
<p>Parfois, et parfois même souvent, comme par exemple sur ce site, le texte ne peut se passer de signes "moins de" -< и "больше чем"- >, mais que se passe-t-il si les navigateurs définissent<слово>ou la phrase contenue dans ces panneaux sous forme d'étiquette et ne s'affichera donc pas sur le moniteur ? Ou disons que vous avez vraiment besoin d'écrire dans le texte un certain<тег>, mais pas pour donner une autre commande au navigateur, mais pour donner un exemple de son écriture aux visiteurs de la page ?</p>
<p>À ces fins, les caractères dits spéciaux ont été inventés.</p>
<p>Ainsi par exemple un caractère spécial <b><
</b>- signifiera qu'à cet endroit du texte, vous devez mettre un signe< а спецсимвол <b>>
</b> désigne le symbole>.</p>
<p>Tous les caractères spéciaux commencent à être écrits avec le signe & - l'esperluette indique au navigateur que le nom du caractère spécial suivra et il doit être interprété non pas comme du texte, mais comme une commande. Ici se pose la question suivante : comment, en effet, dans le texte destiné à être affiché à l'écran, mettre le signe & lui-même - une esperluette ?</p>
<p>Le signe & a également son propre caractère spécial - <b>&
</b></p>
<p>Une telle confusion s'avère ..</p>
<p>Aussi, peut-être, le symbole spécial mérite une attention particulière - c'est un espace indissoluble, nous l'avons déjà rencontré. Le fait est que lorsque vous écrivez du texte dans un bloc-notes ou un éditeur html, vous pouvez mettre autant d'espaces "simples" entre les mots que vous le souhaitez, mais lorsque le navigateur lit la page, ils sont tous "supprimés" et il n'y en aura plus qu'un espace entre les mots sur la page. Par conséquent, des problèmes surviennent souvent avec la conception du texte, par exemple, il n'y a aucun moyen de faire une ligne rouge ... alors les gens ont proposé un caractère spécial, il est perçu par le navigateur non pas comme un espace, mais comme un signe, seulement invisible à l'œil humain.</p>
<p>Et il est appelé inséparable parce qu'un groupe de tels espaces est perçu comme un mot entier, par conséquent, il n'est pas transféré à <a href="https://crabo.ru/fr/internet-tips/chto-takoe-sochetaniya-klavish-i-kak-ih-ispolzovat-v-skype-kak.html">ligne suivante</a> si la proposition s'adapte aux cadres fixés ou au bord de la fenêtre. Ainsi une barre de défilement horizontale peut apparaître dans la fenêtre, si vous n'en avez pas besoin, mettez des espaces ordinaires entre eux</p>
<p>Exemple d'utilisation de caractères spéciaux :</p>
<p> <html> <br>
<head> <br>
<title>exemple dans l'exemple
<
/ td>
<
html >
<
diriger >
<
Titre >
Ma première page <
/ Titre >
<
/ diriger >
<
corps >
<
centre ><
h2 >
Bonjour le monde!!! <
/h2 ><
/ centre >
<
fr >
C'est ma première page ! <
/ corps >
<
/html >
