Introduction au langage HTML et ses versions
Traduit par
ScribdTranslationsIntroduction au langage HTML et ses versions
Traduit par
ScribdTranslationsHTML signifie Hyper Text Markup Language, qui est le langage le plus utilisé sur le Web.
développer des pages web. HTML a été créé par Berners-Lee fin 1991 mais "HTML 2.0" était la première norme
La spécification HTML qui a été publiée en 1995. HTML 4.01 était une version majeure de HTML et elle était
publié à la fin de 1999. Bien que la version HTML 4.01 soit largement utilisée, nous avons actuellement HTML-5
version qui est une extension de HTML 4.01, et cette version a été publiée en 2012.
Pourquoi apprendre le HTML ?
À l'origine, HTML a été développé dans l'intention de définir la structure des documents comme les titres,
paragraphes, listes, etc. pour faciliter le partage d'informations scientifiques entre chercheurs. Maintenant,
HTML est largement utilisé pour formater les pages web à l'aide des différentes balises disponibles dans le langage HTML.
HTML est un MUST pour les étudiants et les professionnels en activité pour devenir un grand ingénieur logiciel en particulier.
lorsqu'ils travaillent dans le domaine du développement web. Je vais énumérer certains des principaux avantages d'apprendre
HTML:
Créer un site Web - Vous pouvez créer un site Web ou personnaliser un modèle Web existant si vous connaissez HTML
bien.
Devenez designer web - Si vous souhaitez commencer une carrière en tant que designer web professionnel, HTML et CSS
la conception est une compétence incontournable.
Comprendre le web - Si vous souhaitez optimiser votre site web, améliorer sa vitesse et ses performances, c'est bien.
connaître le HTML pour obtenir les meilleurs résultats.
Apprenez d'autres langues - Une fois que vous comprenez les bases de HTML, alors d'autres technologies connexes comme
javascript, php ou angular deviennent plus faciles à comprendre.
Bonjour le monde en utilisant HTML.
Pour vous donner un peu d'excitation à propos du HTML, je vais vous donner un petit Hello en HTML classique.
Worldprogram, vous pouvez l'essayer en utilisant le lien de démonstration.
<!DOCTYPE html>
<html>
<tête>
<title>This is document title</title>
</tête>
<corps>
<h1>Ceci est un titre</h1>
<p>Bonjour le monde !</p>
</body>
</html>
Applications de HTML
Comme mentionné précédemment, HTML est l'un des langages les plus utilisés sur le web. Je vais énumérer quelques-uns de
eux ici :
Développement de pages web - HTML est utilisé pour créer des pages qui sont affichées sur le web. Presque
Chaque page web a des balises HTML pour afficher ses détails dans le navigateur.
Navigation Internet - HTML fournit des balises qui sont utilisées pour naviguer d'une page à une autre et est
utilisé intensivement dans la navigation sur Internet.
L'interface utilisateur réactive - Les pages HTML de nos jours fonctionnent bien sur toutes les plateformes, mobiles, tablettes, ordinateurs de bureau ou ordinateurs portables.
en raison de la stratégie de design réactif.
Le support hors ligne Les pages HTML une fois chargées peuvent être mises à disposition hors ligne sur la machine sans aucun
besoin d'internet.
Le développement de jeux - HTML5 prend en charge nativement une expérience riche et est désormais utile dans le jeu.
arène de développement également.
Introduction à HTML
HTMLstands forHypertextMarkupLanguage, is the predominant markup language for web pages. It is used
créer des pages web en utilisant un langage de balisage. HTML est une combinaison de langage hypertexte et de langage de balisage pour
create a structured web page content such as headings, paragraphs, lists, links, quotes, and other so many items.
Prise en charge HTML pour afficher des fichiers image, des fichiers d'objets tels que de l'audio, de la vidéo que vous avez intégrés dans HTML pour créer
des pages web interactives. Les langages de script populaires comme JavaScript, ainsi que d'autres langages de script, sont vous pouvez
use it to create a dynamic user interactive web pages.
La première version de HTML (HTML 1.0) a été écrite par Tim Berners-Lee en 1993. Plus tard, de nombreuses versions différentes de HTML.
les versions sont publiées. Cependant, la version la plus utilisée, HTML 4.01, a été publiée en 2000, ce qui est devenu
une version standard officielle de HTML.
Versions HTML
Version HTML Année
HTML 1.0 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
HTML 5.0 2014
Balises HTML
. Tous les tags HTML sont entourés par la balise d'ouverture <html> et la balise de fermeture </html>.
. Les balises HTML sont de deux types : la balise conteneur et la balise non conteneur.
. La majorité des balises HTML sont des balises conteneurs. Elles contiennent des données de balisage. Par exemple : <p>Ceci est
Le paragraphe contient "C'est un paragraphe", qui est appelé balise conteneur.
. Bien que quelques autres balises non conteneurs qui ne contiennent rien. Par exemple, la balise <br/> est une balise non conteneur.
utilisé pour rompre la ligne. De plus, les balises non-containers sont auto-fermantes.
. Tous les tags HTML sont écrits en lettres minuscules. De plus, tous les tags non-conteneurs (également appelés vides)
Les balises sont toujours écrites en auto-fermant.
Quels sont les outils nécessaires pour créer un HTML ?
Vous n'avez pas besoin d'utiliser de logiciel spécial pour écrire un balisage HTML. Il vous suffit d'un éditeur de texte ou de HTML.
editor application. If you use HTML editor then it helps you to highlight HTML syntaxes to make readable for a
humain.
Actuellement,Sublime Text 3, Notepad++, etVisual Studio Code Les éditeurs HTML sont largement utilisés. Ils sont
WYSIWYG (ce que vous voyez est ce que vous obtenez) et léger.
Éléments de l'en-tête HTML
L'élément <head> HTML
L'élément <head> HTML est une balise conteneur et se place avant la balise <body>. L'élément <head> contient
informations générales sur la page, méta-informations, URL de la feuille de style et informations sur le type de document.
La balise <head> HTML à l'intérieur des éléments ne s'affiche pas dans une partie du corps dans un navigateur web.
La balise <head> HTML contient les éléments suivants qui décrivent le
metadata:<title>,<meta>,<link>,<style>,<script>, and<base>.
Structure de l'élément <head> HTML
<!DOCTYPE html>
<html>
<head>
<title>Document title</title>
<metacharset="UTF-8"/>
<metaname="description"content="Free Web tutorials"/>
<link rel="stylesheet" type="text/css" href="[Link]"/>
<scripttype="text/javascript"src="[Link]"></script>
</tête>
<body>
<!-- Corps du document -->
</body>
</html>
Élément <title> HTML
L'élément <title>HTML est utilisé pour représenter le titre du document HTML et il est requis dans tous les HTML
documents.
L'élément <title> est affiché dans un onglet de navigateur. Un seul élément <title> est autorisé par document et il est
nécessaire à définir dans l'élément <head>.
<!DOCTYPE html>
<html>
<tête>
<title>Document title</title>
</tête>
<body>
<!-- Corps du document -->
</body>
</html>
Élément HTML <meta>
L'élément <meta> HTML est utilisé pour fournir des métadonnées structurées sur une page web. Il contient une variété
d'informations sur le document.
La balise <meta> est utilisée pour spécifier la description de la page, les mots-clés et d'autres informations importantes. Elle aide à
optimiser la page web sur le moteur de recherche. Ce processus est connu sous le nom d'optimisation pour les moteurs de recherche (SEO).
<!DOCTYPE html>1
<html>
<tête>
<metacharset="UTF-8"/>
<metaname="description"content="HTML meta element"/>
<metaname="keywords"content="html, css, js"/>
<metaname="author"content="way2tutorial"/>
</head>
<body>
</corps>
</html>
Élément <link> HTML
L'élément HTML <link> est utilisé pour charger une feuille de style externe dans un document HTML.
<!DOCTYPE html>
<html>
<tête>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</tête>
<corps>
<!-- Corps du document -->
</body>
</html>
Élément <style> HTML
L'élément <style> est utilisé pour écrire des styles CSS dans un document HTML. Il contient des propriétés CSS.
<!DOCTYPE html>
<html>
<tête>
<style>
p{
font-size:15px;
couleur:rouge;
}
h2{
font-weight:normal;
couleur:#196a8e;
}
</style>
</tête>
<corps>
<!-- Document body -->
</body>
</html>
Élément HTML <script>
L'élément HTML <script> est utilisé pour définir le JavaScript côté client qui est spécifié dans le document ou
embedded external JavaScript file through theSRCattribute.
<!DOCTYPE html>
<html>
<tête>
<scripttype="text/javascript"src="[Link]"></script>
</tête>
<body>
<!-- Corps du document -->
</body>
</html>
Élément HTML <base>
L'élément HTML<base>spécifie une URL de base pour tous les liens d'une page web.
<!DOCTYPE html>
<html>
<tête>
<basehref="[Link]
</tête>
<corps>
<p>Commençons<ahref="[Link]">Tutoriel HTML</a></p>
</corps>
</html>
Section de corps HTML
Définition
La section du corps HTML est une section principale du contenu de la page web, tout le contenu qui sera vu lorsque l'utilisateur chargera la page.
page web.
La section du corps HTML prend en charge tous les contenus tels que le texte, les hyperliens, les images, les caractères spéciaux, les listes, les tableaux.
cadres, formes, etc.
C'est la section la plus puissante et la plus importante à afficher sur une page web.
Section du corps
<html>
<tête>
<linkrel="stylesheet"type="text/css"href="[Link]">
<title>Example for Body section elements</title>
</tête>
<body>
<!-- Partie du corps -->
<p>Ceci est la section du corps</p>
<ahref="../html_tutorial.php">aller à la page d'index HTML</a>
</body>
</html>
Balises de section de corps de base
Étiquette Description
<a> Defines the internal link, external link and Subdirectory link.
<br /> Définit le saut de ligne simple.
<code> Définit le code informatique sur une base textuelle.
<div> Defines the division section in a document.
<form> Définit le formulaire HTML à utiliser dans les documents d'entrée
<cadre> Définit les nombreuses parties individuelles
<hr /> Définit la ligne horizontale.
<p> Définit le paragraphe dans les documents web.
<pre> Définit le texte préformaté.
<span> Définit une section dans un document web.
<table> Définit la table.
<textarea> Définit le texte multilignes.
Liste des balises HTML de base avec exemple
Lorsque vous apprenez les bases de l'HTML, il est important d'avoir une compréhension des balises HTML de base. Voici toutes les balises de base.
Les balises HTML sont listées pour vous aider à apprendre.
Balise de paragraphe HTML
Définit un paragraphe dans un document web. Un paragraphe HTML est défini à l'aide de la balise <p>.
<body>
<p>Ceci est le premier paragraphe</p>
<p>Ceci est le deuxième paragraphe</p>
</body>
Balise de commentaire HTML
Defines the Comments<!-- Your Comment -->tag.
<corps>
<img src="../../images/[Link]" width="380" height="70" />
</body>
Balise d'images HTML
Pour afficher des images dans un document web. Les images HTML sont définies à l'intérieur de la balise <img />.
<corps>
<img src="../../images/[Link]" width="380" height="70" />
</corps>
Tag de lien HTML
Définit le lien dans un document interne ou externe. Les liens HTML sont définis à l'intérieur de la balise <a>.
<body>
<ahref="[Link] de développement web</a>
</body>
Balises de titres HTML
Définit les balises d'en-tête <h1> à <h6>.
<body>
<h1>En-tête h1</h1>
<h2>Titre h2</h2>
<h3>Sous-titre h3</h3>
<h4>En-tête h4</h4>
<h5>Titre h5</h5>
<h6>Sous-titre h6</h6>
</body>
HTML signifie Langage de Marquage Hypertexte, et c'est la langue la plus largement utilisée pour écrire des pages Web.
L'hypertexte se réfère à la manière dont les pages Web (documents HTML) sont liées entre elles. Ainsi, le lien
disponible sur une page web s'appelle Hypertexte.
Comme son nom l'indique, HTML est un langage de balisage, ce qui signifie que vous utilisez HTML pour simplement "marquer"
un document texte avec des balises qui indiquent à un navigateur Web comment le structurer pour l'afficher.
À l'origine, HTML a été développé dans l'intention de définir la structure des documents comme les en-têtes,
paragraphes, listes, et ainsi de suite pour faciliter le partage des informations scientifiques entre chercheurs.
Maintenant, HTML est largement utilisé pour formatter les pages web avec l'aide des différentes balises disponibles dans HTML.
langue.
Document HTML de base
Dans sa forme la plus simple, voici un exemple d'un document HTML −
<!DOCTYPE html>
<html>
<tête>
<title>This is document title</title>
</tête>
<corps>
<h1>Ceci est un titre</h1>
<p>Le contenu du document va ici.....</p>
</body>
</html>
Balises HTML
Comme mentionné plus tôt, HTML est un langage de balisage et utilise divers tags pour formater le contenu. Ces tags
are enclosed within angle braces<Tag Name>. Except few tags, most of the tags have their corresponding
tags de fermeture. Par exemple, <html> a son tag de fermeture </html> et le tag <body> a son tag de fermeture </body>.
etc.
L'exemple ci-dessus de document HTML utilise les balises suivantes −
Sr.N Tag & Description
o
1 <!DOCTYPE...>
Cette balise définit le type de document et la version HTML.
2 <html>
Cette balise englobe l'ensemble du document HTML et se compose principalement de l'en-tête du document.
qui est représenté par <head>...</head> et le corps du document qui est représenté par
<body>...</body> balises.
3 <tête>
Cette balise représente l'en-tête du document qui peut contenir d'autres balises HTML comme <title>,
<lien> etc.
4 <title>
La balise <title> est utilisée à l'intérieur de la balise <head> pour mentionner le titre du document.
5 <corps>
Cette balise représente le corps du document qui contient d'autres balises HTML comme <h1>, <div>,
<p> etc. </p>
6 <h1> </h1>
Cette balise représente le titre.
7 <p>
Cette balise représente un paragraphe.
Pour apprendre le HTML, vous devrez étudier divers tags et comprendre comment ils se comportent, tout en formatant un
document textuel. Apprendre le HTML est simple car les utilisateurs doivent apprendre l'utilisation des différentes balises afin de
formatez le texte ou les images pour créer une belle page web.
Le World Wide Web Consortium (W3C) recommande d'utiliser des balises en minuscules à partir de HTML 4.
Structure du document HTML
Un document HTML typique aura la structure suivante −
<html>
<tête>
Tags liés à l'en-tête du document
</tête>
<body>
Balises liées au corps du document
</corps>
</html>
Nous étudierons tous les tags d'en-tête et de corps dans les chapitres suivants, mais pour l'instant voyons ce qu'est un document.
balise de déclaration.
La déclaration <!DOCTYPE>
La balise de déclaration <!DOCTYPE> est utilisée par le navigateur web pour comprendre la version de HTML utilisée dans
le document. La version actuelle de HTML est 5 et elle utilise la déclaration suivante −
<!DOCTYPE html>
Il existe de nombreux autres types de déclaration qui peuvent être utilisés dans un document HTML en fonction de la version de
HTML est utilisé. Nous verrons plus de détails à ce sujet lors de la discussion de la balise <!DOCTYPE...> ainsi que d'autres.
Balises HTML.
HTML - Étiquettes de base
Balises de titre
Tout document commence par un titre. Vous pouvez utiliser différentes tailles pour vos titres. HTML a également six niveaux.
de titres, qui utilisent les éléments <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. Lors de l'affichage de tout
titre, le navigateur ajoute une ligne avant et une ligne après ce titre.
Exemple
<!DOCTYPE html>
<html>
<tête>
<title>Heading Example</title>
</tête>
<body>
<h1>Ceci est le titre 1</h1>
<h2>Ceci est le titre 2</h2>
<h3>Ceci est le titre 3</h3>
<h4>Ceci est un titre 4</h4>
<h5>Ceci est le titre 5</h5>
<h6>Ceci est le titre 6</h6>
</body>
</html>
Cela produira le résultat suivant −
Balise de paragraphe
La balise <p> offre un moyen de structurer votre texte en différents paragraphes. Chaque paragraphe de texte doit aller dans
entre une balise d'ouverture <p> et une balise de fermeture </p> comme indiqué ci-dessous dans l'exemple −
Exemple
<!DOCTYPE html>
<html>
<tête>
<title>Paragraph Example</title>
</tête>
<body>
<p>Voici un premier paragraphe de texte.</p>
<p>Voici un deuxième paragraphe de texte.</p>
<p>Voici un troisième paragraphe de texte.</p>
</body>
</html>
Cela produira le résultat suivant −
Balise de saut de ligne
Chaque fois que vous utilisez l'élément <br />, tout ce qui suit commence à la ligne suivante. Cette balise est un exemple de
un élément vide, où vous n'avez pas besoin de balises d'ouverture et de fermeture, car il n'y a rien à mettre entre elles.
La balise <br /> a un espace entre les caractères avant la barre oblique. Si vous omettez cet espace, les anciennes
les navigateurs auront des difficultés à rendre le saut de ligne, tandis que si vous oubliez le caractère de barre oblique et que vous utilisez simplement
<br> ce n'est pas valide en XHTML.
Exemple
<!DOCTYPE html>
<html>
<tête>
<title>Line Break Example</title>
</tête>
<body>
<p>Bonjour<br />
Vous avez rendu votre devoir à temps.
Merci
Mahnaz
</corps>
</html>
Cela produira le résultat suivant -
Centrage du contenu
You can use<center>tag to put any content in the center of the page or any table cell.
Exemple
<!DOCTYPE html>
<html>
<tête>
<title>Centring Content Example</title>
</tête>
<corps>
<p>Ce texte n'est pas centré.</p>
<center>
<p>This text is in the center.</p>
</centre>
</body>
</html>
Cela produira le résultat suivant -
Lignes horizontales
Les lignes horizontales sont utilisées pour séparer visuellement les sections d'un document. La balise <hr> crée une ligne de
position actuelle dans le document par rapport à la marge droite et coupe la ligne en conséquence.
Par exemple, vous pouvez vouloir insérer une ligne entre deux paragraphes comme dans l'exemple donné ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<tête>
<title>Horizontal Line Example</title>
</tête>
<corps>
<p>Ceci est le premier paragraphe et devrait être en haut</p>
<hr />
<p>Ceci est le deuxième paragraphe et il doit être en bas</p>
</corps>
</html>
Cela produira le résultat suivant −
Encore une fois, la balise <hr /> est un exemple de l'élément vide, où vous n'avez pas besoin de balises d'ouverture et de fermeture, car
il n'y a rien pour aller entre eux.
L'élément <hr /> a un espace entre les caractères hr et la barre oblique. Si vous omettez cet espace, les anciennes
les navigateurs auront des difficultés à rendre la ligne horizontale, tandis que si vous oubliez le caractère de barre oblique et juste
utiliser<br>ce n'est pas valide
Espaces insécables
12 Hommes en colère.
Angry" and "Men" across two lines −
Un exemple de cette technique apparaît dans le film "12 Hommes en colère."
Dans les cas où vous ne souhaitez pas que le navigateur du client coupe le texte, vous devriez utiliser un espace insécable.
entité au lieu d'un espace normal. Par exemple, lors de la codification de "12 Hommes en colère" dans un paragraphe, vous
should use something similar to the following code −
Exemple
<!DOCTYPE html>
<html>
<tête>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>Un exemple de cette technique apparaît dans le film "12 Hommes en colère."</p>
</body>
</html>
HTML - Éléments
Un élément HTML est défini par une balise de début. Si l'élément contient d'autres contenus, il se termine par une balise de fin.
tag, où le nom de l'élément est précédé d'un slash comme indiqué ci-dessous avec quelques balises -
Début de balise Contenu Balise de fin
<p> </p> Ceci est le contenu du paragraphe. </p>
<h1> Ceci est le contenu du titre. </h1>
<div> Ceci est du contenu de division. </div>
<br />
So here <p>....</p>is an HTML element, <h1>...</h1>is another HTML element. There are some HTML
éléments qui n'ont pas besoin d'être fermés, tels que <img.../>, <hr /> et <br /> éléments. Ceux-ci sont connus
éléments asvoid.
Les documents HTML se composent d'un arbre de ces éléments et ils spécifient comment les documents HTML doivent être construits.
et quel type de contenu devrait être placé dans quelle partie d'un document HTML.
Balise HTML vs. Élément
Un élément HTML est défini par une balise d'ouverture. Si l'élément contient d'autres contenus, il se termine par une balise de fermeture.
étiquette.
Par exemple,<p>est la balise d'ouverture d'un paragraphe et</p>est la balise de fermeture du même paragraphe mais<p>Ceci est
<p>est un élément de paragraphe.</p>
Éléments HTML imbriqués
Il est tout à fait permis de placer un élément HTML à l'intérieur d'un autre élément HTML −
Exemple
<!DOCTYPE html>
<html>
<tête>
<title>Nested Elements Example</title>
</tête>
<body>
<h1>Ceci est un<i>titre en italique</i></h1>
<p>Ceci est un<u>texte souligné</u>paragraphe</p>
</body>
</html>
Attributs HTML
Définition
. Les balises HTML contiennent un ou plusieurs attributs qui sont pris en charge.
. Les attributs HTML sont ajoutés dans la balise pour fournir des informations supplémentaires sur la façon dont la balise doit
être apparence ou comportement.
. Les attributs HTML sont toujours spécifiés dans la balise d'ouverture.
. Les attributs HTML se composent de paires nom/valeur comme : c'est-à-dire nom="valeur" et séparés par un égal (=)
signe.
. Les valeurs d'attribut doivent toujours être entourées de guillemets doubles ou simples.
. Les guillemets doubles sont l'utilisation la plus courante, mais les guillemets simples sont également autorisés.
Attributs HTML (Attributs globaux)
De nombreux attributs sont présents dans les éléments HTML, certains sont des attributs communs et d'autres ne peuvent être utilisés que sur certains
étiquettes.
Parmi les attributs les plus courants, on trouve :
Étiquette Valeur Description
Identifiant ID Name Identifiant unique déclaré pour l'élément.
Classe Nom de la classe Utilisé dans les feuilles de style en cascade (CSS).
Style Propriétés CSS Le code CSS spécifie en ligne que l'élément HTML est
presented.
title Title Description Afficher sur le "tooltip" pour vos éléments.
Attributes is most cases they are optional. Many HTML elements assign a default value to it's attributes. Means
si vous n'incluez pas cet attribut, une valeur sera assignée aux attributs par défaut.
Exemple
<html>
<tête>
<title>HTML Attributes Example</title>
<styletype="text/css">
#second{
couleur:#FF9966;
}
</style>
</tête>
<body>
<p style="background-color:red;">Premiers Attributs</p>
Deuxième Attributs
<p>Troisième attributs</p>
<p>
<abbr title="Feuille de style en cascade">CSS</abbr>
</p>
</corps>
</html>
HTML Header Tags h1 to h6
Définition
La balise d'en-tête HTML h1 est utilisée pour spécifier le niveau de titre 1. Il existe 6 niveaux de titres (h1 - h6) avec h1 le
most important and h6 the least important.
Les navigateurs prennent en charge différents titres de tailles variées - avec h1 étant le plus grand et h6 étant le plus petit.
Exemple
<html>
<tête>
<title>HTML Heading Tag</title>
</tête>
<body>
<h1>Titre h1<h1>
<h2>Titre h2<h2>
<h3>Titre h3<h3>
<h4>Titre h4<h4>
<h5>Titre h5<h5>
<h6>En-tête h6<h6>
</corps>
</html>
Importance du titre
Il existe une balise spéciale pour spécifier des titres en HTML. Il y a 6 niveaux de titres en HTML allant de
h1 pour la balise la plus importante et h6 pour la moins importante.
Don't use headings to make text<big>or<strong>.
Commentaires HTML - Comment les écrire
Définition
. La balise de commentaire HTML s'utilise pour insérer un commentaire dans un code source. C'est une bonne habitude d'écrire un commentaire dans
un code source pour améliorer la lisibilité et la compréhension de l'utilisateur.
. Vous pouvez également écrire des informations spécifiques dans les commentaires. Dans ce cas, elles ne seront pas affichées sur le web.
document et non visible pour l'utilisateur.
. Une bonne habitude est d'écrire des commentaires dans les pages HTML, les scripts et les éléments de style.
. L'élément Comment ne prend en charge aucun attribut standard.
Exemple de commentaire HTML
Un commentaire HTML commence par "<!--" et se termine par "-->".
<html>
<head>
<title>HTML Comment Tag</title>
</tête>
<corps>
<img src="images/[Link]" width="365" height="86" /> <!-- Fichier image -->
</corps>
</html>
Exemple de commentaire CSS
Un commentaire CSS commence par "/*" et se termine par "*/" dans un fichier CSS.
/* CSS Style */
h4{
text-align:centre;
couleur:violet; /* La couleur de la police est violette */
police:verdana;
}
Balises de formatage HTML
Définition
. Les balises de formatage HTML sont utilisées pour formater un style de texte. Il deviendra nécessaire d'apporter des modifications mineures.
à la mise en forme de ces éléments.
La balise HTML <b> est utilisée pour formater du texte en gras. Voici quelques balises de formatage courantes.
Étiquette Example Résultats
<b> <b>Texte en gras</b> Un exemple de texte en gras
<grand> <big>Grand texte</big> Un exemple de Grand Texte
<center> <center>Texte centré</center> Un exemple de
Centrer le texte
<em> <em>Texte souligné</em> Un exemple de Texte Mis en Évidence
<i> <i>Texte en italique</i> Un exemple de texte en italique
<petit> <petit>Texte Petit</petit> Un exemple de petit texte
<strong> </strong>
<strong>Texte Fort</strong> An example ofStrong Text
<sub> <sub>Texte en indice</sub> Un exemple deTexte en indice
<sup> <sup>Texte en exposant</sup> Un exemple deTexte en exposant
<del> <del>Supprimer le texte</del> Un exemple de texte à supprimer
<s> <s>Texte barré</s> Un exemple de texte barré
<strike> <strike>Texte barré</strike> Un exemple de texte barré
<u> <u>Souligner le texte</u> Un exemple de texte souligné
<tt> <tt>Texte de télétype</tt> Un exemple de texte Teletype
Long Un exemple de texte de citation longue
Citation</blockquote> Un exemple de texte de citation courte
Texte de citation courte
Balise Image HTML
. La balise HTML <img /> insère une image dans un document web.
. Le chemin de l'image HTML se définit/déclare à l'intérieur de la balise <img />.
. La balise <img /> est une balise vide, cela signifie qu'il n'y a pas de balise de fermeture.
. <img /> tag a certains attributs utilisés pour afficher une image sur une page web.
. L'attribut src, src signifie "source", c'est le chemin de l'URL de l'image.
. L'attribut Alt est utilisé pour définir un "texte alternatif" pour une image. Cela spécifie le texte à identifier dans le
nom de l'image.
. La largeur et la hauteur spécifient la taille de l'image à afficher sur la page Web.
Attribut de balise d'image
Attributs Valeurs Description
Src chemin de l'URL de la source de l'image Requis, le chemin de l'image doit être un chemin absolu.
largeur "size_px" Spécifie la largeur d'affichage de l'image.
Hauteur "size_px" Spécifie la hauteur d'affichage de l'image.
Aligner gauche Spécifie le côté d'alignement de l'image.
droit
Frontière Taille Specifies the image border size.
0
Alt texte alternatif Attribut requis. Spécifie le texte à identifier
l'image.
Exemple
<html>
<tête>
</tête>
<corps>
<imgsrc="images/img_nat.png"width="120"height="70"alt="natural" />
</body>
</html>
Alignement de l'image (Côté droit)
L'image peut être alignée à gauche ou à droite par rapport au texte des paragraphes.
<html>
<tête>
</tête>
<body>
<img src="images/img_nat.png" width="120" height="80" alt="Naturel" align="right"/>
Ressources naturelles (appelées économiquement terres ou matières premières)
se produisent naturellement dans des environnements qui existent relativement peu perturbés
par l'humanité, dans une forme naturelle. Une ressource naturelle est souvent caractérisée
par les quantités de biodiversité existantes dans divers écosystèmes.
</body>
</html>
Alignement d'image (Côté gauche)
<html>
<tête>
</tête>
<body>
<img src="images/img_nat.png" width="120" height="80" alt="Naturel" align="left"/>
<p>Les ressources naturelles (économiquement appelées terres ou matières premières)
se produisent naturellement dans des environnements qui restent relativement peu perturbés
par l'humanité, sous une forme naturelle. Une ressource naturelle est souvent caractérisée
par les quantités de biodiversité existant dans divers écosystèmes.
</body>
</html>
Alignement d'image (enrouler)
<html>
<head>
</tête>
<corps>
<imgsrc="images/img_nat.png"width="120"height="80"alt="Natural"align="left"/>
<p>Les ressources naturelles (économiquement appelées terres ou matières premières)
se produisent naturellement dans des environnements qui existent relativement peu perturbés
par l'humanité, sous une forme naturelle. Une ressource naturelle est souvent caractérisée
par les quantités de biodiversité existant dans divers écosystèmes. Naturel
<brclear="all" />
les ressources proviennent de l'environnement. Beaucoup de
eux sont essentiels à notre survie tandis que d'autres sont utilisés pour satisfaire
nos désirs. Les ressources naturelles peuvent être classées de différentes manières.
</p>
</body>
</html>
Lien d'image
<html>
<tête>
</tête>
<corps>
<ahref="[Link]
<imgsrc="images/img_nat.png"width="120"height="70"alt="Natural" />
</a>
</body>
</html>
Balise de lien HTML
Lien interne
Lien externe
Lien Mailto
Lien de sous-répertoire
HTML Links - HTML Internal Link
Le lien interne HTML est lié au sein de la même page web. Ce lien peut être un chemin absolu ou un chemin relatif.
Le nom du lien interne HTML est suivi du signe dièse (#). Vous devez assigner un identifiant pour référencer la section de votre
page, qui est appelée un lien interne vers la même page.
Lorsque vous cliquez sur un lien d'ancre interne, vous défilerez automatiquement jusqu'à la section concernée et l'afficherez sur
votre navigateur.
Pour comprendre les liens internes, voir les exemples ci-dessous.
. <a href="#lession1">Leçon.1</a>le lien peut être appelé comme<a id="lession1">Introduction de
Leçon.1</a>automatiquement.
. <a href="#lession2">Leçon.2</a>le lien peut être appelé<div id="lession2">Introduction de
Leçon.2</div>automatiquement.
Exemple
<!DOCTYPE html>
<html>
<tête>
</tête>
<corps>
<ahref="#lession1">Leçon.1</a><br/>
<ahref="#lession2">Lession.2</a><br/>
<ahref="#lession3">Leçon.3</a><br/>
<ahref="#lession4">Leçon.4</a><br/>
<br/>
Introduction de la leçon 1
<p>Ceci est le sous-sujet.1</p>
<p>Ceci est le sous-sujet.2</p>
<p>Ceci est le sous-sujet.3</p>
<p>Ceci est le sous-sujet.4</p>
<br/>
<br/>
<div id="lession2">Introduction de la leçon 2</div>
<p>Ceci est le sous-sujet.1</p>
<p>Ceci est le sous-sujet.2</p>
<p>Ceci est le sous-sujet.3</p>
<p>Ceci est le sous-sujet.4</p>
<br/>
<br/>
<pid="lession3">Introduction de la leçon 3</p>
<p>Ceci est le sous-sujet.1</p>
<p>Ceci est le sous-sujet.2</p>
<p>Ceci est le sous-sujet.3</p>
<p>Ceci est le sous-sujet.4</p>
<br/>
<br/>
<articleid="lession4">Introduction of Lession.4</article>
<p>Ceci est le sous-sujet.1</p>
<p>Ceci est le sous-thème.2</p>
<p>Ceci est le sous-sujet.3</p>
<p>Ceci est le sous-thème.4</p>
</body>
</html>
Liens vers des parties d'autres documents
Vous pouvez définir un objectif vers des sections spécifiques des autres pages en ajoutant le #id à la fin du href. Après avoir ajouté
Le dièse est connu sous le nom d'« identifiant de fragment ». Cela aide beaucoup, par exemple, vous pouvez lier à la troisième section de
ce tutoriel provenant d'ailleurs, vous devez écrire
<ahref="[Link]
Liens externes HTML
. Lien HTML - Les liens HTML externes sont liés à une page web externe. Ce lien peut être un chemin absolu ou
chemin relatif
. <a> la balise est utilisée pour le nom d'ancre qui est un lien renvoyant à une autre page web.
. Le lien externe est un excellent moyen de relier une page Web à une autre et utile pour naviguer sur de nombreuses pages Web.
site Web.
Exemple
<html>
<head>
</tête>
<corps>
<ahref="[Link]">HTML</a>
<br/>
<br/>
<ahref="[Link]">CSS</a>
<br/>
<br/>
<ahref="[Link]">Java Script</a>
<br/>
</body>
</html>
Lien Mailto HTML
. Le lien HTML est également utilisé pour créer un lien Mailto afin d'envoyer un e-mail à une adresse électronique spécifique.
L'attribut href de l'adresse est défini sur un lien mailto qui mène à une adresse e-mail.
. When click on E-Mail link, it will open E-Mail application. E-Mail link is use to send E-Mail/Review
with subject, text message.
Exemple
<html>
<tête>
</tête>
<corps>
<p>
<ahref="[Link]
cc=xyz@[Link]&bcc=abc@[Link]&subject=Feedback&body=Message">Click Here</a>
pour les commentaires
</p>
</body>
</html>
Lien de sous-répertoire HTML
. HTML directories are managed in logical hierarchical structure.
Comment gérer votre annuaire sur le site web ?
Niveau Principal
[Link]
Premier niveau de sous-répertoires
[Link]
Deuxième niveau de sous-dossiers
[Link]
Descendre
. Document (page web/document/image/ressources etc..) appel dans le même répertoire.
. Lien vers un document dans le même répertoire sur votre page web actuelle :
<a href="[Link]">
. Liaison à un document dans un niveau en dessous du répertoire (sous-répertoire) sur votre page web actuelle :
<a href="html/[Link]">
. Lier à un document dans un répertoire deux niveaux en dessous (sous-répertoire à sous-répertoire) sur votre site web actuel
page:
<a href="html/basic/[Link]">
Monter
. Document (page Web/document/image/ressources etc..) appel dans le répertoire ci-dessus.
. Lier à un document dans un niveau en dessous du répertoire (sous-répertoire) sur votre page web actuelle :
<a href="../[Link]">
. Liaison à un document dans un répertoire deux niveaux au-dessus (sous-répertoire) de votre page web actuelle :
<a href="../../[Link]">
Monter/Descendre
. Document (page Web/document/image/ressources, etc.) appel dans le même répertoire à celui au-dessus
répertoires ou un sous-répertoire.
. Lier à un document dans un niveau au-dessus et en dessous d'un sous-répertoire sur votre page web actuelle :
<a href="../basic/[Link]">
. Liaison à un document dans un sous-répertoire deux niveaux au-dessus et en dessous de votre page web actuelle :
<a href="../../css/[Link]">
Étiquettes de liste HTML
Ordered List
Liste non ordonnée
Definition List
Liste ordonnée HTML
. HTML<ol> tag définit une liste ordonnée (liste d'articles ordonnés). HTML<ol> tag est une balise conteneur.
<ol> Attributs de balise
HTML<ol> tag spécifie l'affichage de la liste ordonnée d'éléments et son attribut aide à changer le type de liste ordonnée.
Attributs Valeur Description
Type 1 numéro arabe
a alphabet en minuscules
A Alphabet majuscule
je chiffre romain en minuscules
Je Chiffre romain en majuscules
La valeur par défaut est "1".
Commencer 1 définir le numéro de séquence de départ de la liste.
<li> Attributs de balise
<li>l'élément de liste spécifié et son attribut aident à changer le type de liste ordonnée.
Attributes Valeur Description
Taper 1 Numéro arabe
a alphabet en minuscules
A Alphabet majuscule
je chiffre romain en minuscule
Je Numéro romain en majuscules
La valeur par défaut est "1".
Commencer 1 définir le numéro de séquence de départ de la liste.
Exemple
<html>
<tête>
</tête>
<corps>
<ol type="1" value="1">
<li>Nombre arabe</li>
<li>Numéro arabe</li>
</ol>
<ol type="a" value="1">
<li>Alphabet inférieur</li>
<li>Alphabet inférieur</li>
</ol>
<ol type="A" value="1">
<li>Alphabet supérieur</li>
<li>Alphabet Supérieur</li>
</ol>
<ol type="i" value="1">
<li>Chiffre romain inférieur</li>
<li>Chiffre romain inférieur</li>
</ol>
<ol type="I" value="1">
<li>Chiffre romain supérieur</li>
<li>Chiffre romain supérieur</li>
</ol>
</body>
</html>
Liste non ordonnée HTML
. HTML<ul>tag définit une liste non ordonnée (liste d'éléments non ordonnés). Le tag HTML<ul> est un tag conteneur.
. Il est utilisé pour afficher une liste d'éléments avec un style à puces.
<ul> Attributs de balise
HTML<ul>l'élément spécifié liste non ordonnée affiche une liste d'éléments et son attribut aide à changer le type différent de
liste.
Attributs Value Description
Type disque Disque balle,
cercle Puces en cercle
carré Boule carrée
la valeur par défaut est "disque".
<li> Attributs de la balise
HTML<li>l'élément spécifie les éléments de la liste et son attribut aide à changer l'ordre de la liste.
Attributs Value Description
Type disque Boule de disque
cercle Bulle circulaire
carré Balle carrée
default value is "disk".
Exemple
<html>
<tête>
</tête>
<corps>
<ultype="disk" >
<li>Balle de disque</li>
<li>Disque Balle</li>
</ul>
<ultype="cercle" >
<li>Boule de cercle</li>
<li>Puces circulaires</li>
</ul>
<ultype="carré">
<li>Bullet Carré</li>
<li>Boulet carré</li>
</ul>
</body>
</html>
Liste de définition HTML
Définition
. La liste de définition est utilisée pour créer une liste de glossaire. Les listes de définition commencent par la balise <dl> et se terminent par
avec</dl>tag.
. <dl>la balise a deux balises <dt> et <dd> définies à l'intérieur de la balise.</dl>
. <dl> est une étiquette vide. Elle est utilisée pour définir une liste de définitions. Elle n'a pas d'attributs.
. <dt> la balise est une balise vide. Elle est utilisée pour définir une équipe de définition. Elle n'a pas d'attributs.
. <dd>la balise est une balise vide. Son utilisation est de définir une définition. Elle n'a pas d'attributs.
Exemple
<html>
<tête>
</tête>
<corps>
<dl>
<dt>URL
Localisateur Uniforme de Ressources
W3C
Consortium World Wide Web
<dt>PNG
Graphiques Réseaux Portables
</dl>
</corps>
</html>
Balise Marquee HTML
Balise Marquee
Texte défilant
Image défilante
Démarrer/Arrêter le défilement
Texte défilant lent/rapide
Effet de texte tombant
Tag HTML marquee
Définition
. La balise HTML <marquee> est utilisée pour créer un texte défilant ou une image défilante de gauche à droite, de droite à gauche, en haut
de bas en haut, de haut en bas. Il n'y a pas de limite. C'est un choix défini par l'utilisateur.
. <marquee> La balise est une balise conteneur pour créer du texte défilant.
. <marquee>le support de balise avec certains attributs. Ces attributs sont utilisés pour ajouter des effets spéciaux et faciliter.
contrôle.
Attributs Valeurs Description
comportement diapositive Commencez complètement et arrêtez-vous dès que le texte touche
la marge.
faire défiler Commencez complètement et d'un côté.
alternatif Le texte rebondit dès qu'il touche les marges des deux côtés.
bgcolor code de couleur Spécifie la couleur de fond.
direction gauche De gauche à droite
droit De droite à gauche
haut Du bas vers le haut
bas De Haut en Bas
largeur taille Spécifie la largeur dans le défilement.
hauteur taille Spécifie la hauteur dans le défilement.
boucle 2 La boucle continue pendant un temps limité.
infini La boucle continue indéfiniment.
scrollamount 3 Spécifie la vitesse de défilement du texte.
scrolldelay 3 Spécifie un temps d'attente long avant chaque défilement.
espace horizontal taille Specifies left or right margin for outside marquee.
espace vertical "size" Spécifie la marge supérieure ou inférieure pour l'extérieur
marquee.
Utilisez notre générateur de code MarqueeGénérateur de code d'image Marquee HTML
Texte de rebond de marge latérale
<html>
<tête>
</tête>
<corps>
<marqueebehavior="alternate"direction="left">Texte de rebond sur la marge latérale</marquee>
</corps>
</html>
Défilement de texte vers le haut
<html>
<tête>
</head>
<corps>
<marqueebehavior="scroll"direction="up">Défilement de texte vers le haut</marquee>
</body>
</html>
Vitesse de défilement du texte défilant
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left"scrollamount="3">Vitesse de défilement lente</marquee>
<marqueebehavior="scroll"direction="left"scrollamount="10">Vitesse de défilement moyenne</marquee>
<marqueebehavior="scroll"direction="left"scrollamount="17">Vitesse de défilement rapide</marquee>
</body>
</html>
Image de rebond sur la marge tactile latérale
<html>
<tête>
</tête>
<corps>
<marqueebehavior="alterné"direction="gauche">
<img src="../images/img_nat.png" width="120" height="80" alt="Naturel" />
</marquee>
</body>
</html>
Défilement d'image vers le haut
<html>
<tête>
</tête>
<corps>
<marqueebehavior="defiler"direction="haut">
<img src="../images/img_nat.png" width="120" height="80" alt="Naturel" />
</marquee>
</body>
</html>
Changer la vitesse de défilement de l'image
<html>
<tête>
</head>
<corps>
<marqueebehavior="scroll"direction="left"scrollamount="5">
<imgsrc="../images/img_nat.png"width="120"height="80"alt="Natural" />
</marquee>
<marqueebehavior="scroll"direction="left"scrollamount="15">
<imgsrc="../images/img_nat.png"width="120"height="80"alt="Natural" />
</marquee>
</body>
</html>
Cliquez et maintenez pour arrêter le défilement
<html>
<head>
</tête>
<corps>
<marqueebehavior="scroll"direction="left"
onmousedown="[Link]();"
onmouseup="[Link]();">Cliquez et maintenez le marqueur de la souris arrêté</marquee>
</body>
</html>
Survolez pour arrêter le défilement
<html>
<tête>
</tête>
<body>
<marqueebehavior="defiler"direction="gauche"
onmouseover="[Link]();"
survoler et maintenir le défilement de la souris
</corps>
</html>
Boutons de démarrage/arrêt du marquage
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left"id="marquee1"><p>Appuyez sur le bouton</p></marquee>
<inputtype="button"value="Stop Marquee"onClick="[Link]('marquee1').stop();"/>
<inputtype="button"value="Start Marquee"onClick="[Link]('marquee1').start();"/>
</body>
</html>
Cliquez pour ralentir la vitesse du Marquee
<html>
<tête>
</tête>
<corps>
<marqueebehavior="défilement"direction="gauche"
onmousedown="[Link]('scrollamount', 3, 0);"
onmouseup="[Link]('scrollamount', 10, 0);">Cliquez et maintenez la vitesse du défilement de la souris
lent
</body>
</html>
Survolez pour ralentir la vitesse du défilement
<html>
<tête>
</tête>
<body>
<marqueebehavior="scroll"direction="left"
onmouseover="[Link]('scrollamount', 3, 0);"
onmouseout="[Link]('scrollamount', 10, 0);">Passez la souris pour ralentir la vitesse du déroulement</marquee>
</body>
</html>
Vitesse du défilant lente/rapide avec des boutons
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left"scrollamount="6"id="marquee5">Marquee lent/moyen/rapide
vitesse à l'aide de boutons
<inputtype="button"value="Slower"
onClick="[Link]('marquee5').setAttribute('scrollamount', 1, 0);" />
<inputtype="button"value="Medium"
onClick="[Link]('marquee5').setAttribute('scrollamount', 5, 0);" />
<inputtype="button"value="Faster"
onClick="[Link]('marquee5').setAttribute('scrollamount', 10, 0);" />
</body>
</html>
Marquee à démarrage/arrêt multiple
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left"scrollamount="10"id="marquee2"><p>Défilement
1</p></marquee>
<marqueebehavior="scroll"direction="left"scrollamount="15"id="marquee3"><p>Marquee
2</p></marquee>
<inputtype="button"value="Stop Marquee 1"onClick="[Link]('marquee2').stop();"/>
<inputtype="button"value="Start Marquee 1"onClick="[Link]('marquee2').start();"/><br
/>
<input type="button" value="Arrêter le défilement 2" onClick="[Link]('marquee3').stop();"/>
<inputtype="button"value="Start Marquee 2"onClick="[Link]('marquee3').start();"/>
</corps>
</html>
Exemples de texte défilant HTML
Définition
. La balise HTML <marquee> est utilisée pour créer un texte défilant de gauche à droite, de droite à gauche, de haut en bas, de bas en haut.
en haut. Il n'y a aucune limite. La balise HTML Marquee est utilisée pour afficher du texte au style défilant.
. <marquee> la balise est une balise conteneur.
Continuous Text scrolling
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left">Texte de défilement continu</marquee>
</corps>
</html>
Texte d'arrêt du diaporama
<html>
<tête>
</tête>
<corps>
<marqueebehavior="slide"direction="left">Texte d'arrêt de défilement</marquee>
</body>
</html>
Texte de rebond de marge de touche latérale
<html>
<tête>
</head>
<body>
<marqueebehavior="alternate"direction="left">Texte de rebond sur la marge latérale</marquee>
</body>
</html>
Défilement de texte vers le haut
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="up">Texte défilant vers le haut</marquee>
</body>
</html>
Vitesse de défilement du texte défilant
<html>
<tête>
</tête>
<body>
<marqueebehavior="scroll"direction="left"scrollamount="3">Défilement à vitesse lente</marquee>
<marqueebehavior="scroll"direction="left"scrollamount="10">Vitesse de défilement moyenne</marquee>
<marqueebehavior="scroll"direction="left"scrollamount="17">Vitesse de défilement rapide</marquee>
</body>
</html>
Image Marquee HTML
Définition
. La balise <marquee> en HTML est une balise conteneur et est utilisée pour créer une image défilante de gauche à droite, de droite à
gauche, haut en bas, bas en haut. Il n'y a pas de limite et l'image s'affiche en style défilant.
Image à défilement continu
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left">
<imgsrc="../images/img_nat.png"width="120"height="80"alt="Natural" />
</marquee>
</corps>
</html>
Image d'arrêt du diaporama
<html>
<tête>
</tête>
<corps>
<marqueebehavior="slide"direction="left">
<img src="../images/img_nat.png" width="120" height="80" alt="Naturel" />
</marquee>
</body>
</html>
Image de rebond de marge tactile latérale
<html>
<tête>
</tête>
<corps>
<marqueebehavior="alternate"direction="left">
<img src="../images/img_nat.png" width="120" height="80" alt="Naturel" />
</marquee>
</body>
</html>
Défilement de l'image vers le haut
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="up">
<imgsrc="../images/img_nat.png"width="120"height="80"alt="Natural" />
</marquee>
</body>
</html>
Modifier la vitesse de défilement de l'image
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left"scrollamount="5">
<img src="../images/img_nat.png" width="120" height="80" alt="Naturel" />
</marquee>
<marquee behavior="scroll" direction="left" scrollamount="15">
<img src="../images/img_nat.png" width="120" height="80" alt="Naturel" />
</marquee>
</body>
</html>
Exemples de démarrage/arrêt de texte Marquee HTML
Définition
. La balise <marquee> HTML est utilisée pour créer un texte déroulant ainsi que pour assigner un effet de clic, de survol et de bouton.
pour contrôler le démarrage/l'arrêt du texte/image défilant. Voyons quelques exemples.
Cliquez et maintenez pour arrêter le défilement
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="gauche"
onmousedown="[Link]();"
onmouseup="[Link]();">Cliquez et maintenez le défilement de la souris arrêt</marquee>
</body>
</html>
Survolez pour arrêter le défilement
<html>
<tête>
</tête>
<body>
<marqueebehavior="scroll"direction="left"
onmouseover="[Link]();"
onmouseout="[Link]();">Survolez et maintenez le défilement de la souris arrêter</marquee>
</corps>
</html>
Boutons de démarrage/arrêt du défilement
<html>
<tête>
</head>
<corps>
<marqueebehavior="scroll"direction="left"id="marquee1"><p>Press Button</p></marquee>
<inputtype="button"value="Stop Marquee"onClick="[Link]('marquee1').stop();"/>
<inputtype="button"value="Start Marquee"onClick="[Link]('marquee1').start();"/>
</corps>
</html>
Marquee multiple démarrages/arrêts
<html>
<tête>
</tête>
<corps>
<marqueebehavior="scroll"direction="left"scrollamount="10"id="marquee2"><p>Défilement
1</p></marquee>
<marqueebehavior="scroll"direction="left"scrollamount="15"id="marquee3"><p>Défilement
2</p></marquee>
<inputtype="button"value="Stop Marquee 1"onClick="[Link]('marquee2').stop();"/>
<inputtype="button"value="Start Marquee 1"onClick="[Link]('marquee2').start();"/><br
/>
<inputtype="button"value="Stop Marquee 2"onClick="[Link]('marquee3').stop();"/>
<inputtype="button"value="Start Marquee 2"onClick="[Link]('marquee3').start();"/>
</body>
</html>
Exemples de vitesse de texte défilement HTML lent/rapide
Définition
. La balise <marquee> HTML est utilisée pour créer un texte défilant et vous permet également d'ajouter un effet de clic ou de survol.
contrôler la vitesse du texte ou de l'image défilante.
Click to slow marquee speed
<html>
<head>
</tête>
<body>
<marqueebehavior="scroll"direction="gauche"
onmousedown="[Link]('scrollamount', 3, 0);"
onmouseup="[Link]('scrollamount', 10, 0);">Cliquez et maintenez la vitesse de défilement du marquage de la souris
lent
</corps>
</html>
Survolez pour ralentir la vitesse du défilement
<html>
<tête>
</tête>
<corps>
<marqueebehavior="défilement"direction="gauche"
onmouseover="[Link]('scrollamount', 3, 0);"
onmouseout="[Link]('scrollamount', 10, 0);">Survolez pour ralentir la vitesse du défilement</marquee>
</body>
</html>
Vitesse de défilement lente/rapide à l'aide de boutons
<html>
<head>
</tête>
<body>
<marqueebehavior="scroll"direction="left"scrollamount="6"id="marquee5">Défilement lent/moyen/rapide
vitesse en utilisant des boutons</marquee>
<inputtype="button"value="Slower"
onClick="[Link]('marquee5').setAttribute('scrollamount', 1, 0);" />
<inputtype="button"value="Medium"
onClick="[Link]('marquee5').setAttribute('scrollamount', 5, 0);" />
<inputtype="button"value="Faster"
onClick="[Link]('marquee5').setAttribute('scrollamount', 10, 0);" />
</body>
</html>
Tableau HTML
Définition
. La meilleure façon de diviser une page en différentes sections est d'utiliser la balise HTML <table>.
. La section de la table HTML commence avec la balise <table> et se termine juste avec la balise </table>.
Tout ce qui se trouve entre ces deux balises est à l'intérieur du tableau, comme vous pouvez le voir dans la capture d'écran suivante.
. Regardez la figure suivante, <table> tag à l'intérieur vous devez deux autres tag, le premier est <tr> tag, qui représente
ligne de tableau. Elle se termine par la balise </tr>. Et l'autre est la balise <td>, qui signifie données de tableau.
. Chaque fois que vous ajoutez une balise <tr>, le tableau ajoutera une ligne supplémentaire. Dans le tableau que vous venez de créer, il y a
section d'une seule ligne, donc il n'y a qu'une seule ligne.
. La balise <td> signifie données de tableau (également appelée colonne de tableau) et elle place une cellule dans votre ligne de tableau.
. Tableau HTML vous permet également de fusionner deux colonnes ou plus ou de fusionner deux lignes ou plus en utilisant
respectivement colspan rowspan attributs.
Comprendre les balises <table>
<table> Attributs
Attributs Valeur Description
Aligner left, right, center Déclarez votre côté d'alignement.
Width "size_px" Précisez la taille de la largeur de la table.
Hauteur "size_px" Précisez la taille de la hauteur de la table.
Bgcolor violet Spécifiez la couleur de fond.
Contexte URL_spécifiée Spécifiez l'image d'arrière-plan ouverte pour le fichier URL.
Frontière "size_px" Spécifiez l'épaisseur de la bordure.
Bordercolor jaune Spécifiez la couleur de la bordure.
Espacement des cellules
"size_px" Précisez l'espace entre deux cellules.
Cellpadding "size_px" Précisez l'espace entre la bordure de la cellule et le texte.
<th> Attributs </th>
Attributs Valeur Description
Bgcolor violet Spécifiez la couleur de fond.
Colspan Colonne_N Précisez l'étendue de la colonne là-bas.
Fusionner les cellules
Ligne_N
verticalement Spécifiez la portée de leur rang.
<tr> Attributs
Attributs Value Description
Couleur de fond pourpre Spécifiez la couleur d'arrière-plan.
Tutoriel sur les cadres HTML
Définition
. Cadre HTML utilisé pour diviser la fenêtre du navigateur en plusieurs cadres individuels pouvant contenir un séparé
Document web HTML.
. Le cadre est utilisé pour améliorer l'apparence et l'utilisabilité d'un site.
. Le document HTML dans le cadre inclut un lien vers d'autres pages web qui peuvent être ouvertes dans le cadre désiré.
Avantages des cadres
. Le cadre donne une apparence technique sophistiquée au site Web.
. Cela facilite la réduction du temps de téléchargement et améliore l'ergonomie du site web.
. Les cadres incluent généralement des liens de navigation, des en-têtes ou des pieds de page, qui aident l'utilisateur à trouver et à naviguer vers
informations requises.
. Il sépare le contenu du site Web des éléments de navigation, ce qui est utile pour la maintenance du site Web et
modification de contenu.
Inconvénients des cadres
. Le développeur web doit suivre plus de documents HTML liés au cadre principal.
. Il est difficile d'imprimer la page entière, qui est développée en utilisant un cadre.
<frameset> attributs
La balise HTML <frameset> supporte les attributs spécifiques suivants.
Attributs Valeur Description
Colonnes * Spécifie le nombre de colonnes et leur largeur dans un
% frameset.
pixels La valeur par défaut est de 100%.
* : Taille restante allouée de la fenêtre. Par exemple. Créer
deux cadres verticaux, usecols="35 %, *". Ici prendra
taille restante de la fenêtre.
Rangées * Spécifie le nombre de lignes et leur hauteur dans un
% ensemble de cadres.
pixels La valeur par défaut est de 100 %.
*: Taille restante de la fenêtre allouée. Par ex. Créer
deux cadres horizontaux, usecols="40%, *". Ici*va
prend la taille restante de la fenêtre.
<frame> attributs
La balise HTML <frame> prend en charge les attributs spécifiques suivants.
Attributs Value Description
Frameborder 0 Spécifiez si vous souhaitez afficher une bordure ou non.
1
Longue description url Specify URL link to another page having a
longue description du contenu du cadre.
margehauteur pixel_size Spécifiez les marges supérieure et inférieure du cadre.
largeur de marge pixel_size Spécifiez les marges gauche et droite du cadre.
Nom Nom Spécifiez le nom du cadre.
Pas de redimensionnement pas de redimensionnement
Spécifiez qu'il empêche de redimensionner le cadre.
Défilement auto Spécifiez si les barres de défilement doivent s'afficher
oui ou pas.
non
Src url Spécifiez l'URL du document web à afficher dans un
cadre.
Exemple de cadre 1
frame_1.html
<html>
<bodystyle="background-color:#ff9900;">
<h2 align="center">Première frame (frame_1.html)</h2>
</body>
</html>
frame_2.html
<html>
<bodystyle="background-color:#ffcc00;">
<h2 align="center">Deuxième cadre (frame_2.html)</h2>
</body>
</html>
exemple_cadre1.html
<html>
<head>
<title>Frameset Example 1<title>
</tête>
<framesetrows="35%, 65%">
<frame src="frame_1.html" />
<frame src="frame_2.html" />
</frameset>
</html>
Fais-le... »
Exemple de cadre 2
frame_1.html
<html>
<bodystyle="background-color:#ff9900;">
<h2 align="center">Premier cadre (frame_1.html)</h2>
</body>
</html>
cadre_3.html
<html>
<bodystyle="background-color:#a08029;">
<h2 align="center">Deuxième cadre (frame_3.html)</h2>
</body>
</html>
frame_4.html
<html>
<bodystyle="background-color:#ffcc00;">
<h2 align="center">Troisième cadre (frame_4.html)</h2>
</body>
</html>
frame_exemple2.html
<html>
<head>
<title>Frameset Example 2<title>
</tête>
<framesetrows="35%, 65%">
<framesetcols="50%, 50%">
<frame src="frame_3.html" />
<frame src ="frame_4.html" />
</frameset>
</frameset>
</html>
Exécutez-le... »
Exemple de cadre 3 (Supprimer la bordure du cadre)
Barre de navigation supérieure (top_nav.html)
<html>
<bodystyle="background-color:#CCCC00;color:white;font-family:verdana; font-size:14px;">
<h3>Barre de navigation supérieure</h3>
</body>
</html>
Liste des menus (menu_list.html)
<html>
<bodystyle="background-color:#ff6600;color:white;font-family:verdana; font-size:14px;">
<h3>Liste des Menus</h3>
</corps>
</html>
Contenu ([Link])
<html>
<bodystyle="background-color:#ffcc00;color:white;font-family:verdana;
taille de police:14px;
<h2>Contenu</h2>
<ul>
<li><ahref="[Link]
Tutoriel de développement web en ligne</a></li>
</ul>
</body>
</html>
Pied de page ([Link])
<html>
<bodystyle="background-color:#000000;color:white;font-family:verdana;font-size:14px;">
<h3>Footer</h3>
</body>
</html>
frame_example3.html
<html>
<tête>
<title>Frame Example 3</title>
</head>
<frameset rows="100,*,75" frameborder="0" border="0">
<framename="topNav"src="top_nav.html">
<framesetcols="200,*"frameborder="0"border="0">
<framename="menu"src="menu_list.html"scrolling="auto"noresize>
<framename="content"src="[Link]"scrolling="auto"noresize>
</frameset>
<framename="footer"src="[Link]">
</frameset>
<noframes></noframes>
</html>