HTML - Guide rapide
HTML signifie Hypertext MArkup Language, et c'est le langage le plus utilisé pour écrire des pages Web.
Hypertextfait référence à la manière dont les pages Web (documents HTML) sont liées entre elles. Ainsi, le lien disponible sur une page Web s'appelle Hypertext.
Comme son nom l'indique, HTML est un Markup Language ce qui signifie que vous utilisez simplement HTML pour "baliser" 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 le but de définir la structure des documents tels que les titres, les paragraphes, les listes, etc. pour faciliter le partage d'informations scientifiques entre les chercheurs.
Maintenant, le HTML est largement utilisé pour formater les pages Web à l'aide de différentes balises disponibles en langage HTML.
Document HTML de base
Dans sa forme la plus simple, voici un exemple de document HTML -
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>Balises HTML
Comme indiqué précédemment, HTML est un langage de balisage et utilise diverses balises pour formater le contenu. Ces balises sont entourées d'accolades<Tag Name>. À l'exception de quelques balises, la plupart des balises ont leurs balises de fermeture correspondantes. Par exemple,<html> a sa balise de fermeture </html> et <body> la balise a sa balise de fermeture </body> étiquette etc.
L'exemple ci-dessus de document HTML utilise les balises suivantes -
| Sr.Non | Balise et description |
|---|---|
| 1 | <!DOCTYPE...> Cette balise définit le type de document et la version HTML. |
| 2 | <html> Cette balise englobe le document HTML complet et comprend principalement l'en-tête du document qui est représenté par <head> ... </head> et le corps du document qui est représenté par les balises <body> ... </body>. |
| 3 | <head> Cette balise représente l'en-tête du document qui peut conserver d'autres balises HTML comme <title>, <link> etc. |
| 4 | <title> La balise <title> est utilisée à l'intérieur de la balise <head> pour mentionner le titre du document. |
| 5 | <body> Cette balise représente le corps du document qui conserve d'autres balises HTML comme <h1>, <div>, <p> etc. |
| 6 | <h1> Cette balise représente le titre. |
| sept | <p> Cette balise représente un paragraphe. |
Pour apprendre le HTML, vous devrez étudier différentes balises et comprendre comment elles se comportent, lors du formatage d'un document textuel. L'apprentissage du HTML est simple car les utilisateurs doivent apprendre l'utilisation de différentes balises afin de formater le texte ou les images pour créer une belle page Web.
Le World Wide Web Consortium (W3C) recommande d'utiliser des balises minuscules à partir de HTML 4.
Structure du document HTML
Un document HTML typique aura la structure suivante -
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Nous étudierons toutes les balises d'en-tête et de corps dans les chapitres suivants, mais pour l'instant, voyons ce qu'est la balise de déclaration de document.
La déclaration <! DOCTYPE>
La balise de déclaration <! DOCTYPE> est utilisée par le navigateur Web pour comprendre la version du HTML utilisée dans le document. La version actuelle de HTML est 5 et 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 utilisée. Nous verrons plus de détails à ce sujet en discutant de la balise <! DOCTYPE ...> avec d'autres balises HTML.
Balises d'en-tête
Tout document commence par un en-tête. Vous pouvez utiliser différentes tailles pour vos titres. HTML a également six niveaux d'en-têtes, qui utilisent les éléments<h1>, <h2>, <h3>, <h4>, <h5>, et <h6>. Lors de l'affichage d'un titre, le navigateur ajoute une ligne avant et une ligne après cet en-tête.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Cela produira le résultat suivant -
Balise de paragraphe
le <p>La balise offre un moyen de structurer votre texte en différents paragraphes. Chaque paragraphe de texte doit être placé entre une balise d'ouverture <p> et une balise de fermeture </p> comme indiqué ci-dessous dans l'exemple -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Cela produira le résultat suivant -
Balise de saut de ligne
Chaque fois que vous utilisez le <br />élément, tout ce qui suit commence à partir de la ligne suivante. Cette balise est un exemple deempty élément, où vous n'avez pas besoin de balises d'ouverture et de fermeture, car il n'y a rien entre elles.
La balise <br /> comporte un espace entre les caractères bret la barre oblique. Si vous omettez cet espace, les anciens navigateurs auront du mal à rendre le saut de ligne, tandis que si vous manquez la barre oblique et utilisez simplement <br>, il n'est pas valide en XHTML.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Cela produira le résultat suivant -
Contenu de centrage
Vous pouvez utiliser <center> pour placer n'importe quel contenu au centre de la page ou dans n'importe quelle cellule du tableau.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Cela produira le résultat suivant -
Lignes horizontales
Les lignes horizontales sont utilisées pour séparer visuellement des sections d'un document. le<hr> La balise crée une ligne de la position actuelle dans le document à la marge droite et coupe la ligne en conséquence.
Par exemple, vous voudrez peut-être donner une ligne entre deux paragraphes comme dans l'exemple ci-dessous -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Cela produira le résultat suivant -
Encore <hr /> tag est un exemple de empty élément, où vous n'avez pas besoin de balises d'ouverture et de fermeture, car il n'y a rien entre elles.
le <hr /> l'élément a un espace entre les caractères hret la barre oblique. Si vous omettez cet espace, les anciens navigateurs auront du mal à rendre la ligne horizontale, tandis que si vous manquez la barre oblique et utilisez simplement<hr> il n'est pas valide en XHTML
Conserver le formatage
Parfois, vous voulez que votre texte respecte le format exact de la façon dont il est écrit dans le document HTML. Dans ces cas, vous pouvez utiliser la balise préformatée<pre>.
Tout texte entre l'ouverture <pre> tag et la fermeture </pre> La balise conservera la mise en forme du document source.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Cela produira le résultat suivant -
Essayez d'utiliser le même code sans le garder à l'intérieur <pre>...</pre> Mots clés
Espaces insécables
Supposons que vous vouliez utiliser l'expression «12 hommes en colère». Ici, vous ne voudriez pas qu'un navigateur divise les "12, Angry" et "Men" sur deux lignes
An example of this technique appears in the movie "12 Angry Men."Dans les cas où vous ne souhaitez pas que le navigateur client coupe le texte, vous devez utiliser une entité d'espace insécable au lieu d'un espace normal. Par exemple, lorsque vous codez les "12 Angry Men" dans un paragraphe, vous devez utiliser quelque chose de similaire au code suivant -
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Cela produira le résultat suivant -
Un HTML elementest défini par une balise de départ. Si l'élément contient un autre contenu, il se termine par une balise de fermeture, où le nom de l'élément est précédé d'une barre oblique comme indiqué ci-dessous avec quelques balises -
| Balise de début | Contenu | Balise de fin |
|---|---|---|
| <p> | Ceci est le contenu du paragraphe. | </p> |
| <h1> | C'est le contenu de la rubrique. | </h1> |
| <div> | C'est le contenu de la division. | </div> |
| <br /> |
Donc ici <p>....</p> est un élément HTML, <h1>...</h1>est un autre élément HTML. Certains éléments HTML n'ont pas besoin d'être fermés, tels que<img.../>, <hr /> et <br />éléments. Ceux-ci sont connus commevoid elements.
Les documents HTML consistent en une arborescence de ces éléments et ils spécifient comment les documents HTML doivent être construits, et quel type de contenu doit être placé dans quelle partie d'un document HTML.
Balise HTML contre élément
Un élément HTML est défini par une balise de départ . Si l'élément contient un autre contenu, il se termine par une balise de fermeture .
For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.
Nested HTML Elements
It is very much allowed to keep one HTML element inside another HTML element −
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>This will display the following result −
We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information.
An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value
The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page.
The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>This will display the following result −
Core Attributes
The four core attributes that can be used on the majority of HTML elements (although not all) are −
- Id
- Title
- Class
- Style
The Id Attribute
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −
If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish between two paragraph elements as shown below.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>The title Attribute
The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −
The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>This will produce the following result −
Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.
The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.
The value of the attribute may also be a space-separated list of class names. For example −
class = "className1 className2 className3"The style Attribute
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>This will produce the following result −
At this point of time, we are not learning CSS, so just let's proceed without bothering much about CSS. Here, you need to understand what are HTML attributes and how they can be used while formatting content.
Internationalization Attributes
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
- dir
- lang
- xml:lang
The dir Attribute
The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −
| Value | Meaning |
|---|---|
| ltr | Left to right (the default value) |
| rtl | Right to left (for languages such as Hebrew or Arabic that are read right to left) |
Example
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>This will produce the following result −
When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.
The lang Attribute
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.
Example
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>This will produce the following result −
The xml:lang Attribute
The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.
Generic Attributes
Here's a table of some other attributes that are readily usable with many of the HTML tags.
| Attribute | Options | Function |
|---|---|---|
| align | right, left, center | Horizontally aligns tags |
| valign | top, middle, bottom | Vertically aligns tags within an HTML element. |
| bgcolor | numeric, hexidecimal, RGB values | Places a background color behind an element |
| background | URL | Places a background image behind an element |
| id | User Defined | Names an element for use with Cascading Style Sheets. |
| class | User Defined | Classifies an element for use with Cascading Style Sheets. |
| width | Numeric Value | Specifies the width of tables, images, or table cells. |
| height | Numeric Value | Specifies the height of tables, images, or table cells. |
| title | User Defined | "Pop-up" title of the elements. |
We will see related examples as we will proceed to study other HTML tags. For a complete list of HTML Tags and related attributes please check reference to HTML Tags List.
If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML.
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>This will produce the following result −
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>This will produce the following result −
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>This will produce the following result −
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>This will produce the following result −
Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.
Example
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>This will produce the following result −
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the same size as the characters surrounding it but is displayed half a character's height above the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>This will produce the following result −
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the same as the characters surrounding it, but is displayed half a character's height beneath the other characters.
Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>This will produce the following result −
Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>This will produce the following result −
Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>This will produce the following result −
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>This will produce the following result −
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>This will produce the following result −
Grouping Content
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.
Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>This will produce the following result −
The <span> element, on the other hand, can be used to group inline elements only. So, if you have a part of a sentence or paragraph which you want to group together, you could use the <span> element as follows.
Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>This will produce the following result −
These tags are commonly used with CSS to allow you to attach a style to a section of a page.
The phrase tags have been desicolgned for specific purposes, though they are displayed in a similar way as other basic tags like <b>, <i>, <pre>, and <tt>, you have seen in previous chapter. This chapter will take you through all the important phrase tags, so let's start seeing them one by one.
Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>This will produce the following result −
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.
Example
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>This will produce the following result −
Strong Text
Anything that appears within <strong>...</strong> element is displayed as important text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>This will produce the following result −
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and closing </abbr> tags. If present, the title attribute must contain this full description and nothing else.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>This will produce the following result −
Acronym Element
The <acronym> element allows you to indicate that the text between <acronym> and </acronym> tags is an acronym.
At present, the major browsers do not change the appearance of the content of the <acronym> element.
Example
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>This will produce the following result −
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>This will produce the following result −
Special Terms
The <dfn>...</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term. It's usage is similar to italic words in the midst of a paragraph.
Typically, you would use the <dfn> element the first time you introduce a key term. Most recent browsers render the content of a <dfn> element in an italic font.
Example
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>This will produce the following result −
Quoting Text
When you want to quote a passage from another source, you should put it in between <blockquote>...</blockquote> tags.
Text inside a <blockquote> element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font.
Example
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>This will produce the following result −
Short Quotations
The <q>...</q> element is used when you want to add a double quote within a sentence.
Example
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>This will produce the following result −
Text Citations
If you are quoting a text, you can indicate the source placing it between an opening <cite> tag and closing </cite> tag
As you would expect in a print publication, the content of the <cite> element is rendered in italicized text by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>This will produce the following result −
Computer Code
Any programming code to appear on a Web page should be placed inside <code>...</code> tags. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.
Example
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>This will produce the following result −
Keyboard Text
When you are talking about computers, if you want to tell a reader to enter some text, you can use the <kbd>...</kbd> element to indicate what should be typed in, as in this example.
Example
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>This will produce the following result −
Programming Variables
This element is usually used in conjunction with the <pre> and <code> elements to indicate that the content of that element is a variable.
Example
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>This will produce the following result −
Program Output
The <samp>...</samp> element indicates sample output from a program, and script etc. Again, it is mainly used when documenting programming or coding concepts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>This will produce the following result −
Address Text
The <address>...</address> element is used to contain any address.
Example
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>This will produce the following result −
HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
You can include one or more meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes −
| Sr.No | Attribute & Description |
|---|---|
| 1 | Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc. |
| 2 | content Specifies the property's value. |
| 3 | scheme Specifies a scheme to interpret the property's value (as declared in the content attribute). |
| 4 | http-equiv Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie. |
Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose.
Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as important keywords about the document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>This will produce the following result −
Document Description
You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Document Revision Date
You can use <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Document Refreshing
A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.
Example
If you want your page keep refreshing after every 5 seconds then use the following syntax.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.
Example
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor.
Example
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.
Note − You can check PHP and Cookies tutorial for a complete detail on Cookies.
Setting Author Name
You can set an author name in a web page using meta tag. See an example below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Spécifier le jeu de caractères
Vous pouvez utiliser la balise <meta> pour spécifier le jeu de caractères utilisé dans la page Web.
Exemple
Par défaut, les serveurs Web et les navigateurs Web utilisent le codage ISO-8859-1 (Latin1) pour traiter les pages Web. Voici un exemple pour définir l'encodage UTF-8 -
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Pour diffuser la page statique avec des caractères chinois traditionnels, la page Web doit contenir une balise <meta> pour définir l'encodage Big5 -
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Le commentaire est un morceau de code qui est ignoré par tout navigateur Web. Il est recommandé d'ajouter des commentaires dans votre code HTML, en particulier dans les documents complexes, pour indiquer des sections d'un document et toute autre note à quiconque consulte le code. Les commentaires vous aident ainsi que les autres à comprendre votre code et améliorent la lisibilité du code.
Les commentaires HTML sont placés entre <!-- ... -->Mots clés. Ainsi, tout contenu placé avec des balises <! - ... -> sera traité comme un commentaire et sera complètement ignoré par le navigateur.
Exemple
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>Cela produira le résultat suivant sans afficher le contenu donné dans le cadre des commentaires -
Commentaires valides ou non valides
Les commentaires ne s'emboîtent pas, ce qui signifie qu'un commentaire ne peut pas être placé dans un autre commentaire. Deuxièmement, la séquence à deux tirets "-" peut ne pas apparaître à l'intérieur d'un commentaire sauf dans le cadre de la balise de fermeture ->. Vous devez également vous assurer qu'il n'y a pas d'espaces dans la chaîne de début de commentaire.
Exemple
Ici, le commentaire donné est un commentaire valide et sera effacé par le navigateur.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Cela produira le résultat suivant -
Mais, la ligne suivante n'est pas un commentaire valide et sera affichée par le navigateur. En effet, il y a un espace entre le crochet angulaire gauche et le point d'exclamation.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Cela produira le résultat suivant -
Commentaires multilignes
Jusqu'à présent, nous avons vu des commentaires sur une seule ligne, mais HTML prend également en charge les commentaires sur plusieurs lignes.
Vous pouvez commenter plusieurs lignes avec la balise spéciale de début <! - et la balise de fin -> placée avant la première ligne et la fin de la dernière ligne, comme indiqué dans l'exemple ci-dessous.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>Cela produira le résultat suivant -
Commentaires conditionnels
Les commentaires conditionnels ne fonctionnent que dans Internet Explorer (IE) sous Windows, mais ils sont ignorés par les autres navigateurs. Ils sont pris en charge à partir d'Explorer 5 et vous pouvez les utiliser pour donner des instructions conditionnelles à différentes versions d'IE.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>Vous rencontrerez une situation où vous devrez appliquer une feuille de style différente basée sur différentes versions d'Internet Explorer, dans une telle situation des commentaires conditionnels seront utiles.
Utilisation de la balise de commentaire
Il existe peu de navigateurs qui prennent en charge la balise <comment> pour commenter une partie du code HTML.
Note- La balise <comment> est obsolète en HTML5. N'utilisez pas cet élément.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>Si vous utilisez IE, cela produira le résultat suivant -
Mais si vous n'utilisez pas IE, cela produira le résultat suivant -
Commentaire du code de script
Bien que vous appreniez JavaScript avec HTML, dans un didacticiel séparé, mais ici, vous devez noter que si vous utilisez Java Script ou VB Script dans votre code HTML, il est recommandé de mettre ce code de script dans des commentaires HTML appropriés afin que l'ancien les navigateurs peuvent fonctionner correctement.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>Cela produira le résultat suivant -
Commenter les feuilles de style
Bien que vous apprendrez à utiliser des feuilles de style avec HTML dans un didacticiel séparé, vous devez noter ici que si vous utilisez une feuille de style en cascade (CSS) dans votre code HTML, il est recommandé de placer ce code de feuille de style dans les commentaires HTML appropriés. afin que les anciens navigateurs puissent fonctionner correctement.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>Cela produira le résultat suivant -
Les images sont très importantes pour embellir ainsi que pour représenter de nombreux concepts complexes de manière simple sur votre page Web. Ce didacticiel vous guidera à travers des étapes simples pour utiliser des images dans vos pages Web.
Insérer une image
Vous pouvez insérer n'importe quelle image dans votre page Web en utilisant <img>marque. Voici la syntaxe simple pour utiliser cette balise.
<img src = "Image URL" ... attributes-list/>La balise <img> est une balise vide, ce qui signifie qu'elle ne peut contenir qu'une liste d'attributs et qu'elle n'a pas de balise de fermeture.
Exemple
Pour essayer l'exemple suivant, gardons notre fichier HTML test.htm et notre fichier image test.png dans le même répertoire -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Cela produira le résultat suivant -
Vous pouvez utiliser un fichier image PNG, JPEG ou GIF en fonction de votre confort, mais assurez-vous de spécifier le nom du fichier image correct dans srcattribut. Le nom de l'image est toujours sensible à la casse.
le alt L'attribut est un attribut obligatoire qui spécifie un texte alternatif pour une image, si l'image ne peut pas être affichée.
Définir l'emplacement de l'image
Habituellement, nous conservons toutes les images dans un répertoire séparé. Alors gardons le fichier HTML test.htm dans notre répertoire personnel et créons un sous-répertoireimages dans le répertoire personnel où nous conserverons notre image test.png.
Exemple
En supposant que l'emplacement de l'image est "image / test.png", essayez l'exemple suivant -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Cela produira le résultat suivant -
Définir la largeur / hauteur de l'image
Vous pouvez définir la largeur et la hauteur de l'image en fonction de vos besoins en utilisant width et heightles attributs. Vous pouvez spécifier la largeur et la hauteur de l'image en termes de pixels ou de pourcentage de sa taille réelle.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Cela produira le résultat suivant -
Définir la bordure de l'image
Par défaut, l'image aura une bordure autour d'elle, vous pouvez spécifier l'épaisseur de la bordure en termes de pixels à l'aide de l'attribut border. Une épaisseur de 0 signifie qu'il n'y a pas de bordure autour de l'image.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Cela produira le résultat suivant -
Définir l'alignement de l'image
Par défaut, l'image s'alignera sur le côté gauche de la page, mais vous pouvez utiliser align attribut pour le placer au centre ou à droite.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Cela produira le résultat suivant -
Graphiques Web gratuits
Pour les graphiques Web gratuits, y compris les modèles, vous pouvez consulter les graphiques Web gratuits
Les tableaux HTML permettent aux auteurs Web d'organiser des données telles que du texte, des images, des liens, d'autres tableaux, etc. en lignes et colonnes de cellules.
Les tableaux HTML sont créés à l'aide du <table> tag dans lequel le <tr> La balise est utilisée pour créer des lignes de tableau et <td>La balise est utilisée pour créer des cellules de données. Les éléments sous <td> sont réguliers et alignés à gauche par défaut
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Ici le borderest un attribut de la balise <table> et il est utilisé pour mettre une bordure sur toutes les cellules. Si vous n'avez pas besoin de bordure, vous pouvez utiliser border = "0".
En-tête de tableau
L'en-tête du tableau peut être défini à l'aide de <th>marque. Cette balise remplacera la balise <td>, qui est utilisée pour représenter la cellule de données réelle. Normalement, vous placerez votre première ligne comme en-tête de tableau comme indiqué ci-dessous, sinon vous pouvez utiliser l'élément <th> dans n'importe quelle ligne. Les en-têtes définis dans la balise <th> sont centrés et en gras par défaut.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Attributs Cellpadding et Cellspacing
Il existe deux attributs appelés cellpadding et cellspacing que vous utiliserez pour ajuster l'espace blanc dans les cellules de votre tableau. L'attribut cellspacing définit l'espace entre les cellules du tableau, tandis que cellpadding représente la distance entre les bordures de cellule et le contenu d'une cellule.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Attributs Colspan et Rowspan
Vous utiliserez colspanattribut si vous souhaitez fusionner deux colonnes ou plus en une seule colonne. De la même manière que vous utiliserezrowspan si vous souhaitez fusionner deux ou plusieurs lignes.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Arrière-plans de tableaux
Vous pouvez définir l'arrière-plan du tableau de l'une des deux manières suivantes:
bgcolor attribut - Vous pouvez définir la couleur d'arrière-plan pour la table entière ou juste pour une cellule.
background attribut - Vous pouvez définir l'image d'arrière-plan pour la table entière ou juste pour une cellule.
Vous pouvez également définir la couleur de la bordure en utilisant également bordercolor attribut.
Note- Les attributs bgcolor , background et bordercolor obsolètes dans HTML5. N'utilisez pas ces attributs.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Voici un exemple d'utilisation backgroundattribut. Ici, nous utiliserons une image disponible dans le répertoire / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant. Ici, l'image d'arrière-plan ne s'appliquait pas à l'en-tête du tableau.
Hauteur et largeur de la table
Vous pouvez définir une largeur et une hauteur de table en utilisant width et heightles attributs. Vous pouvez spécifier la largeur ou la hauteur du tableau en termes de pixels ou en termes de pourcentage de la zone d'écran disponible.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Légende du tableau
le captionLa balise servira de titre ou d'explication pour le tableau et elle apparaîtra en haut du tableau. Cette balise est obsolète dans la nouvelle version de HTML / XHTML.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
En-tête, corps et pied de page du tableau
Les tableaux peuvent être divisés en trois parties: un en-tête, un corps et un pied. L'en-tête et le pied sont assez similaires aux en-têtes et pieds de page dans un document de traitement de texte qui restent les mêmes pour chaque page, tandis que le corps est le principal détenteur du contenu du tableau.
Les trois éléments pour séparer la tête, le corps et le pied d'une table sont:
<thead> - pour créer un en-tête de tableau séparé.
<tbody> - pour indiquer le corps principal du tableau.
<tfoot> - pour créer un pied de page séparé.
Un tableau peut contenir plusieurs éléments <tbody> pour indiquer différentes pages ou groupes de données. Mais il est à noter que les balises <thead> et <tfoot> doivent apparaître avant <tbody>
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Cela produira le résultat suivant -
Tables imbriquées
Vous pouvez utiliser une table dans une autre table. Non seulement les tables, vous pouvez utiliser presque toutes les balises à l'intérieur de la balise de données de table <td>.
Exemple
Voici l'exemple d'utilisation d'un autre tableau et d'autres balises dans une cellule de tableau.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
HTML offre aux auteurs Web trois façons de spécifier des listes d'informations. Toutes les listes doivent contenir un ou plusieurs éléments de liste. Les listes peuvent contenir -
<ul>- Une liste non ordonnée. Cela listera les éléments en utilisant des puces simples.
<ol>- Une liste ordonnée. Cela utilisera différents schémas de nombres pour lister vos articles.
<dl>- Une liste de définitions. Cela organise vos éléments de la même manière qu'ils sont disposés dans un dictionnaire.
Listes HTML non ordonnées
Une liste non ordonnée est une collection d'éléments associés qui n'ont pas d'ordre ou de séquence spécial. Cette liste est créée en utilisant HTML<ul>marque. Chaque élément de la liste est marqué d'une puce.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
L'attribut de type
Vous pouvez utiliser typeattribut pour la balise <ul> pour spécifier le type de balle que vous aimez. Par défaut, c'est un disque. Voici les options possibles -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Exemple
Voici un exemple où nous avons utilisé <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ul type = "disc"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Cela produira le résultat suivant -
Listes ordonnées HTML
Si vous devez placer vos éléments dans une liste numérotée au lieu de puces, une liste ordonnée HTML sera utilisée. Cette liste est créée en utilisant<ol>marque. La numérotation commence à un et est incrémentée de un pour chaque élément de liste ordonnée successif étiqueté <li>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
L'attribut de type
Vous pouvez utiliser typeattribut pour la balise <ol> pour spécifier le type de numérotation que vous aimez. Par défaut, c'est un nombre. Voici les options possibles -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Exemple
Voici un exemple où nous avons utilisé <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Exemple
Voici un exemple où nous avons utilisé <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
L'attribut de départ
Vous pouvez utiliser startattribut pour la balise <ol> pour spécifier le point de départ de la numérotation dont vous avez besoin. Voici les options possibles -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Exemple
Voici un exemple où nous avons utilisé <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Cela produira le résultat suivant -
Listes de définitions HTML
HTML et XHTML prennent en charge un style de liste qui est appelé definition listsoù les entrées sont répertoriées comme dans un dictionnaire ou une encyclopédie. La liste de définitions est le moyen idéal pour présenter un glossaire, une liste de termes ou une autre liste de noms / valeurs.
La liste de définition utilise les trois balises suivantes.
- <dl> - Définit le début de la liste
- <dt> - Un terme
- <dd> - Définition du terme
- </dl> - Définit la fin de la liste
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Cela produira le résultat suivant -
Une page Web peut contenir divers liens qui vous mènent directement à d'autres pages et même à des parties spécifiques d'une page donnée. Ces liens sont appelés hyperliens.
Les hyperliens permettent aux visiteurs de naviguer entre les sites Web en cliquant sur des mots, des phrases et des images. Ainsi, vous pouvez créer des hyperliens en utilisant du texte ou des images disponibles sur une page Web.
Note- Je vous recommande de suivre un court tutoriel sur la compréhension de l'URL
Lier des documents
Un lien est spécifié à l'aide de la balise HTML <a>. Cette balise s'appelleanchor taget tout ce qui se trouve entre la balise d'ouverture <a> et la balise de fermeture </a> fait partie du lien et un utilisateur peut cliquer sur cette partie pour accéder au document lié. Voici la syntaxe simple pour utiliser la balise <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Exemple
Essayons de suivre l'exemple des liens http://www.tutorialspoint.com sur votre page -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>Cela produira le résultat suivant, où vous pourrez cliquer sur le lien généré pour accéder à la page d'accueil de Tutorials Point (dans cet exemple).
L'attribut cible
Nous avons utilisé targetattribut dans notre exemple précédent. Cet attribut est utilisé pour spécifier l'emplacement où le document lié est ouvert. Voici les options possibles -
| Sr.Non | Option et description |
|---|---|
| 1 | _blank Ouvre le document lié dans une nouvelle fenêtre ou un nouvel onglet. |
| 2 | _self Ouvre le document lié dans le même cadre. |
| 3 | _parent Ouvre le document lié dans le cadre parent. |
| 4 | _top Ouvre le document lié dans le corps entier de la fenêtre. |
| 5 | targetframe Opens the linked document in a named targetframe. |
Example
Try following example to understand basic difference in few options given for target attribute.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>This will produce the following result, where you can click on different links to understand the difference between various options given for target attribute.
Use of Base Path
When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.
Example
Following example makes use of <base> tag to specify base URL and later we can use relative path to all the links instead of giving complete URL for every link.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
</html>This will produce the following result, where you can click on the link generated HTML Tutorial to reach to the HTML tutorial.
Now given URL <a href = "/html/index.htm" is being considered as <ahref = "http://www.tutorialspoint.com/html/index.htm"
Linking to a Page Section
You can create a link to a particular section of a given webpage by using name attribute. This is a two-step process.
Note − The name attribute deprecated in HTML5. Do not use this attribute. Use id and title attribute instead.
First create a link to the place where you want to reach with-in a webpage and name it using <a...> tag as follows −
<h1>HTML Text Links <a name = "top"></a></h1>Second step is to create a hyperlink to link the document and place where you want to reach −
<a href = "/html/html_text_links.htm#top">Go to the Top</a>This will produce following link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial.
Go to the TopSetting Link Colors
You can set colors of your links, active links and visited links using link, alink and vlink attributes of <body> tag.
Example
Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>This will produce the following result. Just check color of the link before clicking on it, next check its color when you activate it and when the link has been visited.
Download Links
You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give complete URL of the downloadable file as follows −
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>This will produce following link and will be used to download a file.
File Download Dialog Box
Sometimes it is desired that you want to give an option where a user will click a link and it will pop up a "File Download" box to the user instead of displaying actual content. This is very easy and can be achieved using an HTTP header in your HTTP response.
For example, if you want make a Filename file downloadable from a given link then its syntax will be as follows.
#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){ print("$buffer");
}Note − For more detail on PERL CGI programs, go through tutorial PERL and CGI.
We have seen how to create hypertext link using text and we also learnt how to use images in our webpages. Now, we will learn how to use images to create hyperlinks.
Example
It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below −
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>This will produce the following result, where you can click on the images to reach to the home page of Tutorials Point.
This was the simplest way of creating hyperlinks using images. Next we will see how we can create Mouse-Sensitive Image Links.
Mouse-Sensitive Images
The HTML and XHTML standards provides a feature that lets you embed many different links inside a single image. You can create different links on the single image based on different coordinates available on the image. Once different links are attached to different coordinates, we can click different parts of the image to open target documents. Such mouse-sensitive images are known as image maps.
There are two ways to create image maps −
Server-side image maps − This is enabled by the ismap attribute of the <img> tag and requires access to a server and related image-map processing applications.
Client-side image maps − This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.
Server-Side Image Maps
Here you simply put your image inside a hyper link and use ismap attribute which makes it special image and when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server. The server uses the mouse-pointer coordinates to determine which document to deliver back to the browser.
When ismap is used, the href attribute of the containing <a> tag must contain the URL of a server application like a cgi or PHP script etc. to process the incoming request based on the passed coordinates.
The coordinates of the mouse position are screen pixels counted from the upper-left corner of the image, beginning with (0,0). The coordinates, preceded by a question mark, are added to the end of the URL.
For example, if a user clicks 20 pixels over and 30 pixels down from the upper-left corner of the following image −
Which has been generated by the following code snippet −
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Ensuite, le navigateur envoie les paramètres de recherche suivants au serveur Web qui peuvent être traités par ismap.cgi script ou map file et vous pouvez lier tous les documents que vous aimez à ces coordonnées -
/cgi-bin/ismap.cgi?20,30De cette façon, vous pouvez attribuer différents liens à différentes coordonnées de l'image et lorsque ces coordonnées sont cliquées, vous pouvez ouvrir le document lié correspondant. En apprendre davantage surismapattribut, vous pouvez vérifier Comment utiliser Image ismap?
Note- Vous apprendrez la programmation CGI lorsque vous étudierez la programmation Perl. Vous pouvez également écrire votre script pour traiter ces coordonnées passées en utilisant PHP ou tout autre script. Pour l'instant, concentrons-nous sur l'apprentissage du HTML et plus tard, vous pourrez revoir cette section.
Cartes d'images côté client
Les images cartographiques côté client sont activées par le usemap attribut de la balise <img /> et défini par des balises d'extension spéciales <map> et <area>.
L'image qui va former la carte est insérée dans la page en utilisant la balise <img /> comme image normale, sauf qu'elle porte un attribut supplémentaire appelé usemap. La valeur de l'attribut usemap est la valeur qui sera utilisée dans une balise <map> pour lier les balises map et image. Les balises <map> et <area> définissent toutes les coordonnées de l'image et les liens correspondants.
La balise <area> à l'intérieur de la balise map, spécifie la forme et les coordonnées pour définir les limites de chaque hotspot cliquable disponible sur l'image. Voici un exemple de la carte d'image -
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>Cela produira le résultat suivant -
Système de coordonnées
La valeur réelle des coords dépend totalement de la forme en question. Voici un résumé, suivi d'exemples détaillés -
rect = x1 , y1 , x2 , y2
x 1 et y 1 sont les coordonnées du coin supérieur gauche du rectangle; x 2 et y 2 sont les coordonnées du coin inférieur droit.
circle = xc , yc , radius
x c et y c sont les coordonnées du centre du cercle et le rayon est le rayon du cercle. Un cercle centré à 200,50 avec un rayon de 25 aurait l'attribut coords = "200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
Les différentes paires xy définissent les sommets (points) du polygone, une "ligne" étant dessinée d'un point au point suivant. Un polygone en forme de losange avec son point supérieur à 20,20 et 40 pixels à ses points les plus larges aurait l'attribut coords = "20,20,40,40,20,60,0,40" .
Toutes les coordonnées sont relatives au coin supérieur gauche de l'image (0,0). Chaque forme a une URL associée. Vous pouvez utiliser n'importe quel logiciel d'image pour connaître les coordonnées des différentes positions.
Il n'est pas difficile de mettre un lien de messagerie HTML sur votre page Web, mais cela peut causer des problèmes de spam inutiles pour votre compte de messagerie. Il y a des gens qui peuvent exécuter des programmes pour collecter ces types d'e-mails et les utiliser plus tard pour le spam de diverses manières.
Vous pouvez avoir une autre option pour aider les gens à vous envoyer des e-mails. Une option pourrait être d'utiliser des formulaires HTML pour collecter des données utilisateur, puis d'utiliser un script PHP ou CGI pour envoyer un e-mail.
Un exemple simple, consultez notre formulaire Contactez-nous . Nous prenons en compte les commentaires des utilisateurs en utilisant ce formulaire, puis nous utilisons un programme CGI qui collecte ces informations et nous envoie un e-mail à l'ID d'e-mail donné.
Note- Vous en apprendrez davantage sur les formulaires HTML dans les formulaires HTML et vous en apprendrez davantage sur CGI dans notre autre tutorielPerl CGI Programming.
Balise d'e-mail HTML
HTML <a>La balise vous offre la possibilité de spécifier une adresse e-mail pour envoyer un e-mail. En utilisant la balise <a> comme balise e-mail, vous utiliserezmailto: email addressavec l' attribut href . Voici la syntaxe d'utilisationmailto au lieu d'utiliser http.
<a href = "mailto: [email protected]">Send Email</a>Ce code générera le lien suivant que vous pourrez utiliser pour envoyer un e-mail.
Send EmailDésormais, si un utilisateur clique sur ce lien, il lance un client de messagerie (comme Lotus Notes, Outlook Express, etc.) installé sur l'ordinateur de votre utilisateur. Il existe un autre risque d'utiliser cette option pour envoyer des e-mails car si l'utilisateur n'a pas de client de messagerie installé sur son ordinateur, il ne sera pas possible d'envoyer des e-mails.
Paramètres par défaut
Vous pouvez spécifier un objet et un corps d'e- mail par défaut avec votre adresse e-mail. Voici l'exemple d'utilisation du sujet et du corps par défaut.
<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>Ce code générera le lien suivant que vous pourrez utiliser pour envoyer un e-mail.
Send FeedbackLes cadres HTML sont utilisés pour diviser la fenêtre de votre navigateur en plusieurs sections où chaque section peut charger un document HTML distinct. Une collection de cadres dans la fenêtre du navigateur est appelée jeu de cadres. La fenêtre est divisée en cadres de la même manière que les tableaux sont organisés: en lignes et en colonnes.
Inconvénients des cadres
Il y a peu d'inconvénients à utiliser des cadres, il n'est donc jamais recommandé d'utiliser des cadres dans vos pages Web -
Certains appareils plus petits ne peuvent souvent pas gérer les images car leur écran n'est pas assez grand pour être divisé.
Parfois, votre page sera affichée différemment sur différents ordinateurs en raison de la résolution d'écran différente.
Le bouton de retour du navigateur peut ne pas fonctionner comme l'espère l'utilisateur.
Il existe encore peu de navigateurs qui ne prennent pas en charge la technologie des cadres.
Création de cadres
Pour utiliser des cadres sur une page, nous utilisons la balise <frameset> au lieu de la balise <body>. La balise <frameset> définit comment diviser la fenêtre en cadres. lerows l'attribut de la balise <frameset> définit les cadres horizontaux et colsL'attribut définit les cadres verticaux. Chaque cadre est indiqué par la balise <frame> et définit quel document HTML doit s'ouvrir dans le cadre.
Note- La balise <frame> est obsolète en HTML5. N'utilisez pas cet élément.
Exemple
Voici l'exemple pour créer trois cadres horizontaux -
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Cela produira le résultat suivant -
Exemple
Mettons l'exemple ci-dessus comme suit, ici nous avons remplacé l'attribut rows par cols et changé leur largeur. Cela créera les trois cadres verticalement -
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Cela produira le résultat suivant -
Les attributs de balise <frameset>
Voici les attributs importants de la balise <frameset> -
| Sr.Non | Attribut et description |
|---|---|
| 1 | cols Spécifie le nombre de colonnes contenues dans le jeu de cadres et la taille de chaque colonne. Vous pouvez spécifier la largeur de chaque colonne de l'une des quatre manières suivantes: Valeurs absolues en pixels. Par exemple, pour créer trois cadres verticaux, utilisez cols = "100, 500, 100" . Un pourcentage de la fenêtre du navigateur. Par exemple, pour créer trois cadres verticaux, utilisez cols = "10%, 80%, 10%" . Utilisation d'un symbole générique. Par exemple, pour créer trois cadres verticaux, utilisez cols = "10%, *, 10%" . Dans ce cas, le caractère générique prend le reste de la fenêtre. En tant que largeurs relatives de la fenêtre du navigateur. Par exemple, pour créer trois cadres verticaux, utilisez cols = "3 *, 2 *, 1 *" . C'est une alternative aux pourcentages. Vous pouvez utiliser les largeurs relatives de la fenêtre du navigateur. Ici, la fenêtre est divisée en sixièmes: la première colonne occupe la moitié de la fenêtre, la seconde prend un tiers et la troisième prend un sixième. |
| 2 | rows Cet attribut fonctionne exactement comme l'attribut cols et prend les mêmes valeurs, mais il est utilisé pour spécifier les lignes du jeu de cadres. Par exemple, pour créer deux cadres horizontaux, utilisez rows = "10%, 90%" . Vous pouvez spécifier la hauteur de chaque ligne de la même manière que celle expliquée ci-dessus pour les colonnes. |
| 3 | border Cet attribut spécifie la largeur de la bordure de chaque cadre en pixels. Par exemple, border = "5". Une valeur de zéro signifie aucune bordure. |
| 4 | frameborder Cet attribut spécifie si une bordure tridimensionnelle doit être affichée entre les cadres. Cet attribut prend la valeur 1 (oui) ou 0 (non). Par exemple frameborder = "0" ne spécifie aucune bordure. |
| 5 | framespacing Cet attribut spécifie la quantité d'espace entre les cadres dans un jeu de cadres. Cela peut prendre n'importe quelle valeur entière. Par exemple, framespacing = "10" signifie qu'il doit y avoir un espacement de 10 pixels entre chaque image. |
Les attributs de balise <frame>
Voici les attributs importants de la balise <frame> -
| Sr.Non | Attribut et description |
|---|---|
| 1 | src Cet attribut est utilisé pour donner le nom du fichier qui doit être chargé dans le cadre. Sa valeur peut être n'importe quelle URL. Par exemple, src = "/html/top_frame.htm" chargera un fichier HTML disponible dans le répertoire html. |
| 2 | name Cet attribut vous permet de donner un nom à un cadre. Il est utilisé pour indiquer dans quel cadre un document doit être chargé. Ceci est particulièrement important lorsque vous souhaitez créer des liens dans un cadre qui chargent des pages dans un autre cadre, auquel cas le deuxième cadre a besoin d'un nom pour s'identifier comme la cible du lien. |
| 3 | frameborder Cet attribut spécifie si les bordures de ce cadre sont affichées ou non; il remplace la valeur donnée dans l'attribut frameborder sur la balise <frameset> s'il y en a une, et cela peut prendre les valeurs 1 (oui) ou 0 (non). |
| 4 | marginwidth Cet attribut vous permet de spécifier la largeur de l'espace entre la gauche et la droite des bordures du cadre et le contenu du cadre. La valeur est donnée en pixels. Par exemple marginwidth = "10". |
| 5 | marginheight Cet attribut vous permet de spécifier la hauteur de l'espace entre le haut et le bas des bordures du cadre et son contenu. La valeur est donnée en pixels. Par exemple marginheight = "10". |
| 6 | noresize Par défaut, vous pouvez redimensionner n'importe quel cadre en cliquant et en faisant glisser sur les bordures d'un cadre. L'attribut noresize empêche un utilisateur de redimensionner le cadre. Par exemple, noresize = "noresize". |
| sept | scrolling Cet attribut contrôle l'apparence des barres de défilement qui apparaissent sur le cadre. Cela prend les valeurs "yes", "no" ou "auto". Par exemple, scrolling = "no" signifie qu'il ne devrait pas avoir de barres de défilement. |
| 8 | longdesc Cet attribut vous permet de fournir un lien vers une autre page contenant une longue description du contenu du cadre. Par exemple longdesc = "framedescription.htm" |
Prise en charge du navigateur pour les cadres
Si un utilisateur utilise un ancien navigateur ou tout autre navigateur, qui ne prend pas en charge les cadres, l'élément <noframes> doit être affiché à l'utilisateur.
Vous devez donc placer un élément <body> à l'intérieur de l'élément <noframes> car l'élément <frameset> est censé remplacer l'élément <body>, mais si un navigateur ne comprend pas l'élément <frameset>, il doit comprendre ce qu'il y a à l'intérieur du Élément <body> contenu dans un élément <noframes>.
Vous pouvez mettre un bon message pour votre utilisateur ayant d'anciens navigateurs. Par exemple, Désolé !! votre navigateur ne prend pas en charge les cadres. comme indiqué dans l'exemple ci-dessus.
Nom du cadre et attributs cibles
L'une des utilisations les plus courantes des cadres consiste à placer les barres de navigation dans un cadre, puis à charger les pages principales dans un cadre séparé.
Voyons l'exemple suivant où un fichier test.htm a le code suivant -
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Ici, nous avons créé deux colonnes à remplir avec deux cadres. La première image fait 200 pixels de large et contiendra la barre de menu de navigation implémentée parmenu.htmfichier. La deuxième colonne remplit l'espace restant et contiendra la partie principale de la page et elle est implémentée parmain.htmfichier. Pour les trois liens disponibles dans la barre de menus, nous avons mentionné le cadre cible commemain_pageAinsi, chaque fois que vous cliquez sur l'un des liens de la barre de menu, le lien disponible s'ouvre dans la page principale.
Voici le contenu du fichier menu.htm
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>Voici le contenu du fichier main.htm -
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>Quand on charge test.htm fichier, il produit le résultat suivant -
Vous pouvez maintenant essayer de cliquer sur les liens disponibles dans le panneau de gauche et voir le résultat. L' attribut cible peut également prendre l'une des valeurs suivantes -
| Sr.Non | Option et description |
|---|---|
| 1 | _self Charge la page dans le cadre actuel. |
| 2 | _blank Charge une page dans une nouvelle fenêtre de navigateur. Ouverture d'une nouvelle fenêtre. |
| 3 | _parent Charge la page dans la fenêtre parente, qui dans le cas d'un seul jeu de cadres est la fenêtre principale du navigateur. |
| 4 | _top Charge la page dans la fenêtre du navigateur, en remplaçant les cadres actuels. |
| 5 | targetframe Charge la page dans un cadre cible nommé. |
Vous pouvez définir un cadre en ligne avec une balise HTML <iframe>. La balise <iframe> n'est pas en quelque sorte liée à la balise <frameset>, mais peut apparaître n'importe où dans votre document. La balise <iframe> définit une zone rectangulaire dans le document dans laquelle le navigateur peut afficher un document séparé, y compris les barres de défilement et les bordures. Un cadre en ligne est utilisé pour incorporer un autre document dans le document HTML actuel.
le src L'attribut est utilisé pour spécifier l'URL du document qui occupe le cadre en ligne.
Exemple
Voici l'exemple pour montrer comment utiliser le <iframe> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>Cela produira le résultat suivant -
Les attributs de balise <Iframe>
La plupart des attributs de la balise <iframe>, notamment name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style et title se comportent exactement comme les attributs correspondants pour la balise <frame>.
Note- Le frameborder , marginwidth , longdesc , défilement , marginheight attributs dépréciée en HTML5. N'utilisez pas ces attributs.
| Sr.Non | Attribut et description |
|---|---|
| 1 | src Cet attribut est utilisé pour donner le nom du fichier qui doit être chargé dans le cadre. Sa valeur peut être n'importe quelle URL. Par exemple, src = "/html/top_frame.htm" chargera un fichier HTML disponible dans le répertoire html. |
| 2 | name Cet attribut vous permet de donner un nom à un cadre. Il est utilisé pour indiquer dans quel cadre un document doit être chargé. Ceci est particulièrement important lorsque vous souhaitez créer des liens dans un cadre qui chargent des pages dans un autre cadre, auquel cas le deuxième cadre a besoin d'un nom pour s'identifier comme la cible du lien. |
| 3 | frameborder Cet attribut spécifie si les bordures de ce cadre sont affichées ou non; il remplace la valeur donnée dans l'attribut frameborder sur la balise <frameset> s'il y en a une, et cela peut prendre les valeurs 1 (oui) ou 0 (non). |
| 4 | marginwidth Cet attribut vous permet de spécifier la largeur de l'espace entre la gauche et la droite des bordures du cadre et le contenu du cadre. La valeur est donnée en pixels. Par exemple marginwidth = "10". |
| 5 | marginheight Cet attribut vous permet de spécifier la hauteur de l'espace entre le haut et le bas des bordures du cadre et son contenu. La valeur est donnée en pixels. Par exemple marginheight = "10". |
| 6 | height Cet attribut spécifie la hauteur de <iframe>. |
| sept | scrolling Cet attribut contrôle l'apparence des barres de défilement qui apparaissent sur le cadre. Cela prend les valeurs "yes", "no" ou "auto". Par exemple, scrolling = "no" signifie qu'il ne devrait pas avoir de barres de défilement. |
| 8 | longdesc Cet attribut vous permet de fournir un lien vers une autre page contenant une longue description du contenu du cadre. Par exemple longdesc = "framedescription.htm" |
| 9 | width Cet attribut spécifie la largeur de <iframe>. |
Tous les éléments HTML peuvent être classés en deux catégories (a) Éléments de niveau bloc (b)Éléments en ligne.
Éléments de bloc
Les éléments de bloc apparaissent à l'écran comme s'ils avaient un saut de ligne avant et après eux. Par exemple, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> et <address> éléments sont tous des éléments de niveau bloc. Ils commencent tous sur leur propre nouvelle ligne, et tout ce qui les suit apparaît sur sa propre nouvelle ligne.
Éléments en ligne
Les éléments en ligne, en revanche, peuvent apparaître dans des phrases et ne doivent pas nécessairement apparaître sur une nouvelle ligne. Les <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Les éléments code>, <cite>, <dfn>, <kbd> et <var> sont tous des éléments en ligne.
Regroupement d'éléments HTML
Il existe deux balises importantes que nous utilisons très fréquemment pour regrouper diverses autres balises HTML (i) balise <div> et (ii) balise <span>
La balise <div>
C'est la balise de niveau de bloc très importante qui joue un grand rôle dans le regroupement de diverses autres balises HTML et l'application de CSS sur un groupe d'éléments. Même maintenant, la balise <div> peut être utilisée pour créer une mise en page de page Web dans laquelle nous définissons différentes parties (gauche, droite, haut, etc.) de la page à l'aide de la balise <div>. Cette balise n'apporte aucun changement visuel sur le bloc mais cela a plus de sens lorsqu'elle est utilisée avec CSS.
Exemple
Voici un exemple simple de balise <div>. Nous allons apprendre la feuille de style en cascade (CSS) dans un chapitre séparé, mais nous l'avons utilisée ici pour montrer l'utilisation de la balise <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Cela produira le résultat suivant -
La balise <span>
Le HTML <span> est un élément en ligne et il peut être utilisé pour regrouper des éléments en ligne dans un document HTML. Cette balise ne fournit pas non plus de changement visuel sur le bloc mais a plus de signification lorsqu'elle est utilisée avec CSS.
La différence entre la balise <span> et la balise <div> est que la balise <span> est utilisée avec des éléments en ligne alors que la balise <div> est utilisée avec des éléments de niveau bloc.
Exemple
Voici un exemple simple de balise <span>. Nous allons apprendre la feuille de style en cascade (CSS) dans un chapitre séparé, mais nous l'avons utilisée ici pour montrer l'utilisation de la balise <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Cela produira le résultat suivant -
Par défaut, l'arrière-plan de votre page Web est de couleur blanche. Vous n'aimerez peut-être pas cela, mais pas de soucis HTML vous propose deux bonnes façons de décorer l'arrière-plan de votre page Web.
- Arrière-plan HTML avec des couleurs
- Arrière-plan HTML avec images
Voyons maintenant les deux approches une par une en utilisant des exemples appropriés.
Fond HTML avec des couleurs
le bgcolor L'attribut est utilisé pour contrôler l'arrière-plan d'un élément HTML, en particulier le corps de la page et les arrière-plans du tableau.
Note- L' attribut bgcolor est déconseillé en HTML5. N'utilisez pas cet attribut.
Voici la syntaxe pour utiliser l'attribut bgcolor avec n'importe quelle balise HTML.
<tagname bgcolor = "color_value"...>Cette couleur_value peut être donnée dans l'un des formats suivants -
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >Exemple
Voici les exemples pour définir l'arrière-plan d'une balise HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Fond HTML avec des images
le backgroundL'attribut peut également être utilisé pour contrôler l'arrière-plan d'un élément HTML, en particulier le corps de page et les arrière-plans de tableau. Vous pouvez spécifier une image pour définir l'arrière-plan de votre page ou tableau HTML.
Note- L' attribut background déconseillé en HTML5. N'utilisez pas cet attribut.
Voici la syntaxe pour utiliser l'attribut d'arrière-plan avec n'importe quelle balise HTML.
Note- L' attribut background est obsolète et il est recommandé d'utiliser la feuille de style pour le réglage de l'arrière-plan.
<tagname background = "Image URL"...>Les formats d'image les plus fréquemment utilisés sont les images JPEG, GIF et PNG.
Exemple
Voici les exemples pour définir des images d'arrière-plan d'une table.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Arrière-plans à motifs et transparents
Vous avez peut-être vu de nombreux motifs ou arrière-plans transparents sur divers sites Web. Ceci peut simplement être réalisé en utilisant une image à motifs ou une image transparente en arrière-plan.
Il est suggéré que lors de la création de motifs ou d'images GIF ou PNG transparentes, utilisez les plus petites dimensions possibles, même aussi petites que 1x1 pour éviter un chargement lent.
Exemple
Voici les exemples pour définir le motif d'arrière-plan d'une table -
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Les couleurs sont très importantes pour donner une belle apparence à votre site Web. Vous pouvez spécifier des couleurs au niveau de la page à l'aide de la balise <body> ou vous pouvez définir des couleurs pour des balises individuelles à l'aide debgcolor attribut.
La balise <body> a les attributs suivants qui peuvent être utilisés pour définir différentes couleurs -
bgcolor - définit une couleur pour l'arrière-plan de la page.
text - définit une couleur pour le corps du texte.
alink - définit une couleur pour les liens actifs ou les liens sélectionnés.
link - définit une couleur pour le texte lié.
vlink- définit une couleur pour les liens visités - c'est-à-dire pour le texte lié sur lequel vous avez déjà cliqué.
Méthodes de codage couleur HTML
Il existe trois méthodes différentes pour définir les couleurs de votre page Web -
Color names - Vous pouvez spécifier les noms de couleur directement comme le vert, le bleu ou le rouge.
Hex codes - Un code à six chiffres représentant la quantité de rouge, de vert et de bleu qui compose la couleur.
Color decimal or percentage values - Cette valeur est spécifiée à l'aide de la propriété rgb ().
Nous allons maintenant voir ces schémas de coloration un par un.
Couleurs HTML - Noms des couleurs
Vous pouvez spécifier directement un nom de couleur pour définir la couleur du texte ou de l'arrière-plan. Le W3C a répertorié 16 noms de couleurs de base qui seront validés avec un validateur HTML, mais il existe plus de 200 noms de couleurs différents pris en charge par les principaux navigateurs.
Note- Vérifiez une liste complète des noms de couleur HTML.
W3C Standard 16 couleurs
Voici la liste des noms W3C Standard 16 Colors et il est recommandé de les utiliser.
| Noir | gris | argent | blanc | ||||
| Jaune | Citron vert | Aqua | Fuchsia | ||||
| rouge | vert | Bleu | Violet | ||||
| Bordeaux | olive | Marine | Sarcelle |
Exemple
Voici les exemples pour définir l'arrière-plan d'une balise HTML par nom de couleur -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Couleurs HTML - Codes hexadécimaux
Un hexadécimal est une représentation à 6 chiffres d'une couleur. Les deux premiers chiffres (RR) représentent une valeur rouge, les deux suivants sont une valeur verte (GG) et les derniers sont la valeur bleue (BB).
Une valeur hexadécimale peut être prise à partir de n'importe quel logiciel graphique comme Adobe Photoshop, Paintshop Pro ou MS Paint.
Chaque code hexadécimal sera précédé d'un signe dièse ou dièse #. Voici une liste de quelques couleurs utilisant la notation hexadécimale.
| Couleur | Couleur HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Exemple
Voici les exemples pour définir l'arrière-plan d'une balise HTML par code couleur en hexadécimal -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Couleurs HTML - Valeurs RVB
Cette valeur de couleur est spécifiée à l'aide du rgb( )propriété. Cette propriété prend trois valeurs, une pour le rouge, le vert et le bleu. La valeur peut être un entier compris entre 0 et 255 ou un pourcentage.
Note - Tous les navigateurs ne supportent pas la propriété rgb () de la couleur, il est donc recommandé de ne pas l'utiliser.
Voici une liste pour afficher quelques couleurs utilisant des valeurs RVB.
| Couleur | Couleur RVB |
|---|---|
| rgb (0,0,0) | |
| RVB (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| RVB (255,255,0) | |
| RVB (0,255,255) | |
| RVB (255,0,255) | |
| RVB (192.192.192) | |
| RVB (255,255,255) |
Exemple
Voici les exemples pour définir l'arrière-plan d'une balise HTML par code couleur en utilisant les valeurs rgb () -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Couleurs compatibles avec le navigateur
Voici la liste des 216 couleurs censées être les couleurs les plus sûres et indépendantes de l'ordinateur. Ces couleurs vont du code hexa 000000 au FFFFFF et elles seront supportées par tous les ordinateurs ayant une palette de 256 couleurs.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | Restaurer | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Les polices jouent un rôle très important pour rendre un site Web plus convivial et augmenter la lisibilité du contenu. La face et la couleur de la police dépendent entièrement de l'ordinateur et du navigateur utilisés pour afficher votre page, mais vous pouvez utiliser HTML<font>pour ajouter du style, de la taille et de la couleur au texte de votre site Web. Vous pouvez utiliser un<basefont> pour définir tout votre texte sur la même taille, le même visage et la même couleur.
La balise de police a trois attributs appelés size, color, et facepour personnaliser vos polices. Pour modifier l'un des attributs de police à tout moment dans votre page Web, utilisez simplement la balise <font>. Le texte qui suit restera modifié jusqu'à ce que vous fermiez avec la balise </font>. Vous pouvez modifier un ou tous les attributs de police dans une seule balise <font>.
Note−Les balises font et basefont sont obsolètes et sont supposées être supprimées dans une future version de HTML. Donc, ils ne devraient pas être utilisés plutôt, il est suggéré d'utiliser des styles CSS pour manipuler vos polices. Mais toujours à des fins d'apprentissage, ce chapitre explique en détail les balises de police et de base.
Définir la taille de la police
Vous pouvez définir la taille de la police du contenu en utilisant sizeattribut. La plage de valeurs acceptées va de 1 (la plus petite) à 7 (la plus grande). La taille par défaut d'une police est de 3.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>Cela produira le résultat suivant -
Taille de police relative
Vous pouvez spécifier le nombre de tailles supérieures ou inférieures à la taille de police prédéfinie. Vous pouvez le spécifier comme<font size = "+n"> ou <font size = "−n">
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>Cela produira le résultat suivant -
Définition de la face de la police
Vous pouvez définir le visage de la police à l'aide de l' attribut face, mais sachez que si l'utilisateur qui consulte la page n'a pas installé la police, il ne pourra pas la voir. Au lieu de cela, l'utilisateur verra la police par défaut applicable à l'ordinateur de l'utilisateur.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>Cela produira le résultat suivant -
Spécifier d'autres polices de caractères
Un visiteur ne pourra voir votre police que si cette police est installée sur son ordinateur. Ainsi, il est possible de spécifier deux ou plusieurs alternatives de polices en listant les noms de polices, séparés par une virgule.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">Lorsque votre page est chargée, leur navigateur affichera la première police disponible. Si aucune des polices indiquées n'est installée, il affichera la police par défaut Times New Roman .
Note - Consultez une liste complète des HTML Standard Fonts.
Définition de la couleur de la police
Vous pouvez définir n'importe quelle couleur de police que vous aimez en utilisant l' attribut de couleur . Vous pouvez spécifier la couleur souhaitée par le nom de la couleur ou le code hexadécimal de cette couleur.
Note - Vous pouvez consulter une liste complète des HTML Color Name with Codes.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>Cela produira le résultat suivant -
L'élément <basefont>
L'élément <basefont> est censé définir une taille de police, une couleur et une police par défaut pour toutes les parties du document qui ne sont pas autrement contenues dans une balise <font>. Vous pouvez utiliser les éléments <font> pour remplacer les paramètres <basefont>.
La balise <basefont> prend également les attributs de couleur, de taille et de visage et prend en charge les paramètres de police relatifs en donnant à la taille une valeur de +1 pour une taille plus grande ou -2 pour deux tailles plus petites.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>Cela produira le résultat suivant -
Les formulaires HTML sont nécessaires lorsque vous souhaitez collecter des données auprès du visiteur du site. Par exemple, lors de l'enregistrement de l'utilisateur, vous souhaitez collecter des informations telles que le nom, l'adresse e-mail, la carte de crédit, etc.
Un formulaire prendra l'entrée du visiteur du site et le publiera ensuite dans une application back-end telle que CGI, ASP Script ou PHP script etc. L'application back-end effectuera le traitement requis sur les données transmises en fonction de la logique métier définie à l'intérieur L'application.
Il existe divers éléments de formulaire disponibles tels que des champs de texte, des champs de zone de texte, des menus déroulants, des boutons radio, des cases à cocher, etc.
Le HTML <form> La balise est utilisée pour créer un formulaire HTML et a la syntaxe suivante -
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Attributs de formulaire
Outre les attributs courants, voici une liste des attributs de formulaire les plus fréquemment utilisés -
| Sr.Non | Attribut et description |
|---|---|
| 1 | action Script backend prêt à traiter vos données transmises. |
| 2 | method Méthode à utiliser pour télécharger des données. Les méthodes les plus fréquemment utilisées sont les méthodes GET et POST. |
| 3 | target Spécifiez la fenêtre ou le cadre cible dans lequel le résultat du script sera affiché. Il prend des valeurs telles que _blank, _self, _parent, etc. |
| 4 | enctype Vous pouvez utiliser l'attribut enctype pour spécifier la manière dont le navigateur code les données avant de les envoyer au serveur. Les valeurs possibles sont - application/x-www-form-urlencoded - Il s'agit de la méthode standard que la plupart des formulaires utilisent dans des scénarios simples. mutlipart/form-data - Ceci est utilisé lorsque vous souhaitez télécharger des données binaires sous la forme de fichiers tels qu'une image, un fichier Word, etc. |
Note- Vous pouvez vous référer à Perl et CGI pour plus de détails sur le fonctionnement du téléchargement des données de formulaire.
Contrôles de formulaire HTML
Il existe différents types de contrôles de formulaire que vous pouvez utiliser pour collecter des données à l'aide d'un formulaire HTML -
- Contrôles de saisie de texte
- Contrôles des cases à cocher
- Commandes du boîtier radio
- Sélectionner les contrôles de boîte
- Boîtes de sélection de fichier
- Contrôles cachés
- Boutons cliquables
- Bouton d'envoi et de réinitialisation
Contrôles de saisie de texte
Il existe trois types de saisie de texte utilisés sur les formulaires -
Single-line text input controls- Ce contrôle est utilisé pour les éléments qui ne nécessitent qu'une seule ligne d'entrée utilisateur, tels que des champs de recherche ou des noms. Ils sont créés en HTML<input> marque.
Password input controls- Il s'agit également d'une saisie de texte sur une seule ligne, mais elle masque le caractère dès qu'un utilisateur le saisit. Ils sont également créés à l'aide de la balise HTMl <input>.
Multi-line text input controls- Ceci est utilisé lorsque l'utilisateur doit donner des détails qui peuvent être plus longs qu'une seule phrase. Les contrôles d'entrée multilignes sont créés en HTML<textarea> marque.
Commandes de saisie de texte sur une seule ligne
Ce contrôle est utilisé pour les éléments qui ne nécessitent qu'une seule ligne d'entrée utilisateur, tels que des zones de recherche ou des noms. Ils sont créés à l'aide de la balise HTML <input>.
Exemple
Voici un exemple de base d'une saisie de texte sur une seule ligne utilisée pour prendre le prénom et le nom -
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <input> pour la création d'un champ de texte.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de texte, il sera défini sur text. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value Cela peut être utilisé pour fournir une valeur initiale à l'intérieur du contrôle. |
| 4 | size Permet de spécifier la largeur du champ de saisie de texte en termes de caractères. |
| 5 | maxlength Permet de spécifier le nombre maximum de caractères qu'un utilisateur peut saisir dans la zone de texte. |
Contrôles de saisie du mot de passe
Il s'agit également d'une saisie de texte sur une seule ligne, mais elle masque le caractère dès qu'un utilisateur le saisit. Ils sont également créés à l'aide de la balise HTML <input> mais l'attribut type est défini surpassword.
Exemple
Voici un exemple de base d'une entrée de mot de passe sur une seule ligne utilisée pour prendre le mot de passe utilisateur -
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <input> pour la création du champ de mot de passe.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de mot de passe, il sera réglé sur password. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value Cela peut être utilisé pour fournir une valeur initiale à l'intérieur du contrôle. |
| 4 | size Permet de spécifier la largeur du champ de saisie de texte en termes de caractères. |
| 5 | maxlength Permet de spécifier le nombre maximum de caractères qu'un utilisateur peut saisir dans la zone de texte. |
Commandes de saisie de texte sur plusieurs lignes
Ceci est utilisé lorsque l'utilisateur doit donner des détails qui peuvent être plus longs qu'une seule phrase. Les contrôles d'entrée multilignes sont créés à l'aide de la balise HTML <textarea>.
Exemple
Voici un exemple de base d'une saisie de texte multiligne utilisée pour prendre une description d'article -
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <textarea>.
| Sr.Non | Attribut et description |
|---|---|
| 1 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 2 | rows Indique le nombre de lignes de la zone de texte. |
| 3 | cols Indique le nombre de colonnes de la zone de texte |
Contrôle des cases à cocher
Les cases à cocher sont utilisées lorsque plusieurs options doivent être sélectionnées. Ils sont également créés à l'aide de la balise HTML <input> mais l'attribut type est défini surcheckbox..
Exemple
Voici un exemple de code HTML pour un formulaire avec deux cases à cocher -
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs de la balise <checkbox>.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de case à cocher, il sera défini sur checkbox.. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value La valeur qui sera utilisée si la case est cochée. |
| 4 | checked Réglez sur coché si vous souhaitez le sélectionner par défaut. |
Commande par bouton radio
Les boutons radio sont utilisés lorsque parmi de nombreuses options, une seule option doit être sélectionnée. Ils sont également créés à l'aide de la balise HTML <input> mais l'attribut type est défini surradio.
Exemple
Voici un exemple de code HTML pour un formulaire avec deux boutons radio -
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs du bouton radio.
| Sr.Non | Attribut et description |
|---|---|
| 1 | type Indique le type de contrôle d'entrée et pour le contrôle d'entrée de case à cocher, il sera réglé sur radio. |
| 2 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 3 | value La valeur qui sera utilisée si la case radio est sélectionnée. |
| 4 | checked Réglez sur coché si vous souhaitez le sélectionner par défaut. |
Sélectionner le contrôle de boîte
Une zone de sélection, également appelée zone de liste déroulante, qui offre la possibilité de répertorier diverses options sous la forme d'une liste déroulante, à partir de laquelle un utilisateur peut sélectionner une ou plusieurs options.
Exemple
Voici un exemple de code HTML pour un formulaire avec une liste déroulante
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs importants de la balise <select> -
| Sr.Non | Attribut et description |
|---|---|
| 1 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 2 | size Cela peut être utilisé pour présenter une zone de liste déroulante. |
| 3 | multiple S'il est défini sur «multiple», il permet alors à un utilisateur de sélectionner plusieurs éléments dans le menu. |
Voici la liste des attributs importants de la balise <option> -
| Sr.Non | Attribut et description |
|---|---|
| 1 | value La valeur qui sera utilisée si une option dans la boîte de sélection est sélectionnée. |
| 2 | selected Spécifie que cette option doit être la valeur initialement sélectionnée lors du chargement de la page. |
| 3 | label Une autre façon d'étiqueter les options |
Boîte de téléchargement de fichier
Si vous souhaitez autoriser un utilisateur à télécharger un fichier sur votre site Web, vous devrez utiliser une boîte de téléchargement de fichier, également appelée boîte de sélection de fichier. Ceci est également créé à l'aide de l'élément <input> mais l'attribut type est défini surfile.
Exemple
Voici un exemple de code HTML pour un formulaire avec une boîte de téléchargement de fichier -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Cela produira le résultat suivant -
Les attributs
Voici la liste des attributs importants de la boîte de téléchargement de fichiers -
| Sr.Non | Attribut et description |
|---|---|
| 1 | name Utilisé pour donner un nom au contrôle qui est envoyé au serveur pour être reconnu et obtenir la valeur. |
| 2 | accept Spécifie les types de fichiers acceptés par le serveur. |
Commandes des boutons
Il existe différentes manières en HTML de créer des boutons cliquables. Vous pouvez également créer un bouton cliquable à l'aide de la balise <input> en définissant son attribut type surbutton. L'attribut type peut prendre les valeurs suivantes -
| Sr.Non | Type et description |
|---|---|
| 1 | submit Cela crée un bouton qui soumet automatiquement un formulaire. |
| 2 | reset Cela crée un bouton qui réinitialise automatiquement les contrôles de formulaire à leurs valeurs initiales. |
| 3 | button Cela crée un bouton qui est utilisé pour déclencher un script côté client lorsque l'utilisateur clique sur ce bouton. |
| 4 | image Cela crée un bouton cliquable mais nous pouvons utiliser une image comme arrière-plan du bouton. |
Exemple
Voici un exemple de code HTML pour un formulaire avec trois types de boutons -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Cela produira le résultat suivant -
Contrôles de formulaire masqués
Les contrôles de formulaire masqués sont utilisés pour masquer les données à l'intérieur de la page qui peuvent ensuite être transmises au serveur. Ce contrôle se cache à l'intérieur du code et n'apparaît pas sur la page réelle. Par exemple, le formulaire masqué suivant est utilisé pour conserver le numéro de page actuel. Lorsqu'un utilisateur cliquera sur la page suivante, la valeur du contrôle masqué sera envoyée au serveur Web et là, il décidera quelle page sera affichée ensuite en fonction de la page actuelle passée.
Exemple
Voici un exemple de code HTML pour montrer l'utilisation du contrôle caché -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Cela produira le résultat suivant -
Parfois, vous devez ajouter de la musique ou une vidéo dans votre page Web. Le moyen le plus simple d'ajouter de la vidéo ou du son à votre site Web consiste à inclure la balise HTML spéciale appelée<embed>. Cette balise fait que le navigateur lui-même inclut des contrôles pour le multimédia fourni automatiquement par le navigateur prend en charge la balise <embed> et le type de média donné.
Vous pouvez également inclure un <noembed>balise pour les navigateurs qui ne reconnaissent pas la balise <embed>. Vous pouvez, par exemple, utiliser <embed> pour afficher un film de votre choix, et<noembed> pour afficher une seule image JPG si le navigateur ne prend pas en charge la balise <embed>.
Exemple
Voici un exemple simple pour lire un fichier midi intégré -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Les attributs de balise <embed>
Voici la liste des attributs importants qui peuvent être utilisés avec la balise <embed>.
Note−Les attributs align et autostart sont déconseillés en HTML5. N'utilisez pas ces attributs.
| Sr.Non | Attribut et description |
|---|---|
| 1 | align Détermine comment aligner l'objet. Il peut être réglé au centre, à gauche ou à droite . |
| 2 | autostart Cet attribut booléen indique si le média doit démarrer automatiquement. Vous pouvez le définir sur vrai ou faux. |
| 3 | loop Spécifie si le son doit être joué en continu (définir la boucle sur true), un certain nombre de fois (une valeur positive) ou pas du tout (false) |
| 4 | playcount Spécifie le nombre de fois où jouer le son. C'est une option alternative pour la boucle si vous utilisez IE. |
| 5 | hidden Spécifie si l'objet multimédia doit être affiché sur la page. Une valeur fausse signifie non et une valeur vraie signifie oui. |
| 6 | width Largeur de l'objet en pixels |
| sept | height Hauteur de l'objet en pixels |
| 8 | name Un nom utilisé pour référencer l'objet. |
| 9 | src URL de l'objet à intégrer. |
| dix | volume Contrôle le volume du son. Peut être compris entre 0 (désactivé) et 100 (volume complet). |
Types de vidéo pris en charge
Vous pouvez utiliser différents types de supports tels que les films Flash (.swf), les types de fichiers AVI (.avi) et MOV (.mov) à l'intérieur de la balise incorporée.
.swf files - sont les types de fichiers créés par le programme Flash de Macromedia.
.wmv files - sont les types de fichiers Media Video de Microsoft Windows.
.mov files - sont au format Quick Time Movie d'Apple.
.mpeg files - sont des fichiers vidéo créés par le groupe d'experts Moving Pictures.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Cela produira le résultat suivant -
Audio d'arrière-plan
Vous pouvez utiliser du HTML <bgsound>tag pour lire une bande-son en arrière-plan de votre page Web. Cette balise est uniquement prise en charge par Internet Explorer et la plupart des autres navigateurs ignorent cette balise. Il télécharge et lit un fichier audio lorsque le document hôte est téléchargé pour la première fois par l'utilisateur et affiché. Le fichier de son de fond sera également rejoué chaque fois que l'utilisateur actualise le navigateur.
Note- La balise bgsound est obsolète et elle est censée être supprimée dans une future version de HTML. Donc, ils ne devraient pas être utilisés plutôt, il est suggéré d'utiliser l'audio de balise HTML5 pour ajouter du son. Mais toujours à des fins d'apprentissage, ce chapitre explique en détail la balise bgsound.
Cette balise n'a que deux attributs loop et src . Ces deux attributs ont la même signification que celle expliquée ci-dessus.
Voici un exemple simple pour lire un petit fichier midi -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Cela produira l'écran vide. Cette balise n'affiche aucun composant et reste masquée.
Internet Explorer ne peut également gérer que trois fichiers de format audio différents: wav, le format natif des PC; au, le format natif de la plupart des stations de travail Unix; et MIDI, un système universel d'encodage de musique.
Balise d'objet HTML
HTML 4 introduit le <object>element, qui offre une solution polyvalente à l'inclusion d'objets génériques. le<object> element permet aux auteurs HTML de spécifier tout ce qui est requis par un objet pour sa présentation par un agent utilisateur.
Voici quelques exemples -
Exemple 1
Vous pouvez incorporer un document HTML dans un document HTML lui-même comme suit -
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Ici, l' attribut alt entrera en image si le navigateur ne prend pas en charge la balise d' objet .
Exemple - 2
Vous pouvez incorporer un document PDF dans un document HTML comme suit -
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Exemple - 3
Vous pouvez spécifier certains paramètres liés au document avec le <param>marque. Voici un exemple pour intégrer un fichier wav -
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Exemple - 4
Vous pouvez ajouter un document flash comme suit -
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Exemple - 5
Vous pouvez ajouter une applet java dans un document HTML comme suit -
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>le classidL'attribut identifie la version du plug-in Java à utiliser. Vous pouvez utiliser l' attribut facultatif codebase pour spécifier si et comment télécharger le JRE.
Un chapiteau HTML est un morceau de texte défilant affiché horizontalement ou verticalement sur votre page Web en fonction des paramètres. Ceci est créé en utilisant la balise HTML <marquees>.
Note- La balise <marquee> est obsolète en HTML5. N'utilisez pas cet élément, vous pouvez utiliser JavaScript et CSS pour créer de tels effets.
Syntaxe
Une syntaxe simple pour utiliser la balise HTML <marquee> est la suivante -
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>Les attributs de balise <marquee>
Voici la liste des attributs importants qui peuvent être utilisés avec la balise <marquee>.
| Sr.Non | Attribut et description |
|---|---|
| 1 | width Ceci spécifie la largeur du rectangle de sélection. Cela peut être une valeur comme 10 ou 20%, etc. |
| 2 | height Ceci spécifie la hauteur du rectangle de sélection. Cela peut être une valeur comme 10 ou 20%, etc. |
| 3 | direction Ceci spécifie la direction dans laquelle la sélection doit défiler. Cela peut être une valeur comme haut, bas, gauche ou droite . |
| 4 | behavior Ceci spécifie le type de défilement du rectangle de sélection. Cela peut avoir une valeur comme scroll, slide et alternative . |
| 5 | scrolldelay Ceci spécifie le délai entre chaque saut. Cela aura une valeur comme 10 etc. |
| 6 | scrollamount Ceci spécifie la vitesse du texte de sélection. Cela peut avoir une valeur comme 10, etc. |
| sept | loop Ceci spécifie le nombre de fois à boucler. La valeur par défaut est INFINITE, ce qui signifie que le rectangle de sélection boucle sans fin. |
| 8 | bgcolor Ceci spécifie la couleur d'arrière-plan en termes de nom de couleur ou de valeur hexadécimale de couleur. |
| 9 | hspace Ceci spécifie l'espace horizontal autour du rectangle de sélection. Cela peut être une valeur comme 10 ou 20%, etc. |
| dix | vspace Cela spécifie l'espace vertical autour du rectangle de sélection. Cela peut être une valeur comme 10 ou 20%, etc. |
Voici quelques exemples pour illustrer l'utilisation de la balise de sélection.
Exemples - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>Cela produira le résultat suivant -
Exemples - 2
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>
</html>Cela produira le résultat suivant -
Exemples - 3
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>Cela produira le résultat suivant -
Exemples - 4
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>Cela produira le résultat suivant -
Nous avons appris qu'un document HTML typique aura la structure suivante -
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Ce chapitre donnera un peu plus de détails sur la partie d'en-tête qui est représentée par la balise HTML <head>. La balise <head> est un conteneur de diverses balises importantes telles que les balises <title>, <meta>, <link>, <base>, <style>, <script> et <noscript>.
La balise HTML <title>
La balise HTML <title> est utilisée pour spécifier le titre du document HTML. Voici un exemple pour donner un titre à un document HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Cela produira le résultat suivant -
La balise HTML <meta>
La balise HTML <meta> est utilisée pour fournir des métadonnées sur le document HTML qui incluent des informations sur l'expiration de la page, l'auteur de la page, la liste des mots-clés, la description de la page, etc.
Voici quelques-unes des utilisations importantes de la balise <meta> dans un document HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Cela produira le résultat suivant -
La balise HTML <base>
La balise HTML <base> est utilisée pour spécifier l'URL de base pour toutes les URL relatives dans une page, ce qui signifie que toutes les autres URL seront concaténées dans l'URL de base lors de la localisation de l'élément donné.
Par exemple, toutes les pages et images données seront recherchées après avoir préfixé les URL données avec l'URL de base http://www.tutorialspoint.com/ directory -
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>Cela produira le résultat suivant -
Mais si vous remplacez l'URL de base par autre chose, par exemple, si l'URL de base est http://www.tutorialspoint.com/home, l'image et les autres liens donnés deviendront comme http://www.tutorialspoint.com/home/images /logo.png et http://www.tutorialspoint.com/html/index.htm
La balise HTML <link>
La balise HTML <link> est utilisée pour spécifier les relations entre le document actuel et la ressource externe. Voici un exemple pour lier un fichier de feuille de style externe disponible danscss sous-répertoire dans la racine Web -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Cela produira le résultat suivant -
La balise HTML <style>
La balise HTML <style> est utilisée pour spécifier la feuille de style du document HTML courant. Voici un exemple pour définir quelques règles de feuille de style à l'intérieur de la balise <style> -
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>Cela produira le résultat suivant -
Note- Pour en savoir plus sur le fonctionnement de la feuille de style en cascade, veuillez consulter un didacticiel distinct disponible sur css
La balise HTML <script>
La balise HTML <script> est utilisée pour inclure un fichier de script externe ou pour définir un script interne pour le document HTML. Voici un exemple où nous utilisons JavaScript pour définir une fonction JavaScript simple -
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>Cela produira le résultat suivant, où vous pouvez essayer de cliquer sur le bouton donné -
Note- Pour en savoir plus sur le fonctionnement de JavaScript, veuillez consulter un didacticiel distinct disponible sur javascript
Les feuilles de style en cascade (CSS) décrivent comment les documents sont présentés sur les écrans, sur papier ou peut-être comment ils sont prononcés. Le W3C a activement promu l'utilisation des feuilles de style sur le Web depuis la création du consortium en 1994.
Les feuilles de style en cascade (CSS) fournissent des alternatives simples et efficaces pour spécifier divers attributs pour les balises HTML. En utilisant CSS, vous pouvez spécifier un certain nombre de propriétés de style pour un élément HTML donné. Chaque propriété a un nom et une valeur, séparés par deux points (:). Chaque déclaration de propriété est séparée par un point-virgule (;).
Exemple
Considérons d'abord un exemple de document HTML qui utilise la balise <font> et les attributs associés pour spécifier la couleur du texte et la taille de la police -
Note- La balise font est obsolète et elle est censée être supprimée dans une future version de HTML. Donc, ils ne devraient pas être utilisés plutôt, il est suggéré d'utiliser des styles CSS pour manipuler vos polices. Mais toujours à des fins d'apprentissage, ce chapitre fonctionnera avec un exemple utilisant la balise font.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>Nous pouvons réécrire l'exemple ci-dessus à l'aide de la feuille de style comme suit -
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>Cela produira le résultat suivant -
Vous pouvez utiliser CSS de trois manières dans votre document HTML -
External Style Sheet - Définissez les règles de feuille de style dans un fichier .css séparé, puis incluez ce fichier dans votre document HTML à l'aide de la balise HTML <link>.
Internal Style Sheet - Définissez les règles de feuille de style dans la section d'en-tête du document HTML à l'aide de la balise <style>.
Inline Style Sheet - Définissez les règles de feuille de style directement avec les éléments HTML en utilisant style attribut.
Voyons les trois cas un par un à l'aide d'exemples appropriés.
Feuille de style externe
Si vous devez utiliser votre feuille de style sur plusieurs pages, il est toujours recommandé de définir une feuille de style commune dans un fichier séparé. Un fichier de feuille de style en cascade aura l'extension comme.css et il sera inclus dans les fichiers HTML en utilisant la balise <link>.
Exemple
Considérez que nous définissons un fichier de feuille de style style.css qui a les règles suivantes -
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}Ici, nous avons défini trois règles CSS qui seront applicables à trois classes différentes définies pour les balises HTML. Je suggère que vous ne devriez pas vous soucier de la façon dont ces règles sont définies, car vous les apprendrez tout en étudiant le CSS. Utilisons maintenant le fichier CSS externe ci-dessus dans notre document HTML suivant -
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Cela produira le résultat suivant -
Feuille de style interne
Si vous souhaitez appliquer des règles de feuille de style à un seul document, vous pouvez inclure ces règles dans la section d'en-tête du document HTML à l'aide de la balise <style>.
Les règles définies dans la feuille de style interne remplacent les règles définies dans un fichier CSS externe.
Exemple
Réécrivons à nouveau l'exemple ci-dessus, mais ici nous écrirons les règles de feuille de style dans le même document HTML en utilisant la balise <style> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Cela produira le résultat suivant -
Feuille de style en ligne
Vous pouvez appliquer des règles de feuille de style directement à n'importe quel élément HTML en utilisant styleattribut de la balise concernée. Cela ne doit être fait que si vous souhaitez apporter une modification particulière à un élément HTML uniquement.
Les règles définies en ligne avec l'élément remplacent les règles définies dans un fichier CSS externe ainsi que les règles définies dans l'élément <style>.
Exemple
Réécrivons à nouveau l'exemple ci-dessus, mais ici nous écrirons des règles de feuille de style avec les éléments HTML en utilisant style attribut de ces éléments.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>Cela produira le résultat suivant -
UNE scriptest un petit programme qui peut ajouter de l'interactivité à votre site Web. Par exemple, un script peut générer un message de boîte d’alerte contextuelle ou fournir un menu déroulant. Ce script peut être écrit en utilisant JavaScript ou VBScript.
Vous pouvez écrire diverses petites fonctions, appelées gestionnaires d'événements à l'aide de n'importe quel langage de script, puis déclencher ces fonctions à l'aide d'attributs HTML.
De nos jours, seulement JavaScript et les frameworks associés sont utilisés par la plupart des développeurs Web, VBScript n'est même pas pris en charge par les principaux navigateurs.
Vous pouvez conserver le code JavaScript dans un fichier séparé, puis l'inclure là où c'est nécessaire, ou vous pouvez définir des fonctionnalités dans le document HTML lui-même. Voyons les deux cas un par un avec des exemples appropriés.
JavaScript externe
Si vous envisagez de définir une fonctionnalité qui sera utilisée dans divers documents HTML, il est préférable de conserver cette fonctionnalité dans un fichier JavaScript séparé, puis d'inclure ce fichier dans vos documents HTML. Un fichier JavaScript aura l'extension comme.js et il sera inclus dans les fichiers HTML en utilisant la balise <script>.
Exemple
Considérons que nous définissons une petite fonction en utilisant JavaScript dans script.js qui a le code suivant -
function Hello() {
alert("Hello, World");
}Utilisons maintenant le fichier JavaScript externe ci-dessus dans notre document HTML suivant -
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Cela produira le résultat suivant, où vous pouvez essayer de cliquer sur le bouton donné -
Script interne
Vous pouvez écrire votre code de script directement dans votre document HTML. Habituellement, nous conservons le code de script dans l'en-tête du document en utilisant la balise <script>, sinon il n'y a aucune restriction et vous pouvez placer votre code source n'importe où dans le document, mais à l'intérieur de la balise <script>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Cela produira le résultat suivant, où vous pouvez essayer de cliquer sur le bouton donné -
Gestionnaires d'événements
Les gestionnaires d'événements ne sont rien d'autre que des fonctions définies simplement qui peuvent être appelées contre n'importe quel événement de souris ou de clavier. Vous pouvez définir votre logique métier dans votre gestionnaire d'événements qui peut varier d'un simple à des milliers de code de ligne.
L'exemple suivant explique comment écrire un gestionnaire d'événements. Écrivons une fonction simple EventHandler () dans l'en-tête du document. Nous appellerons cette fonction lorsqu'un utilisateur amène la souris sur un paragraphe.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>Maintenant, cela produira le résultat suivant. Amenez votre souris sur cette ligne et voyez le résultat -
Masquer les scripts des anciens navigateurs
Bien que la plupart (sinon tous) des navigateurs de nos jours prennent en charge JavaScript, mais certains navigateurs plus anciens ne le font pas. Si un navigateur ne prend pas en charge JavaScript, au lieu d'exécuter votre script, il affichera le code à l'utilisateur. Pour éviter cela, vous pouvez simplement placer des commentaires HTML autour du script comme indiqué ci-dessous.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>L'élément <noscript>
Vous pouvez également fournir des informations alternatives aux utilisateurs dont les navigateurs ne prennent pas en charge les scripts et aux utilisateurs qui ont désactivé l'option de script de leurs navigateurs. Vous pouvez le faire en utilisant le<noscript> marque.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>Langage de script par défaut
Il se peut que vous incluiez plusieurs fichiers de script et que vous utilisiez finalement plusieurs balises <script>. Vous pouvez spécifier un langage de script par défaut pour toutes vos balises de script . Cela vous évite de spécifier la langue à chaque fois que vous utilisez une balise de script dans la page. Voici l'exemple -
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Notez que vous pouvez toujours remplacer la valeur par défaut en spécifiant une langue dans la balise de script.
Une mise en page Web est très importante pour donner une meilleure apparence à votre site Web. Il faut beaucoup de temps pour concevoir la mise en page d'un site Web avec une apparence et une convivialité exceptionnelles.
De nos jours, tous les sites Web modernes utilisent un cadre basé sur CSS et JavaScript pour créer des sites Web réactifs et dynamiques, mais vous pouvez créer une bonne mise en page en utilisant de simples tableaux HTML ou des balises de division en combinaison avec d'autres balises de mise en forme. Ce chapitre vous donnera quelques exemples sur la façon de créer une mise en page simple mais fonctionnelle pour votre page Web en utilisant du HTML pur et ses attributs.
Mise en page HTML - Utilisation de tableaux
Le moyen le plus simple et le plus populaire de créer des mises en page consiste à utiliser la balise HTML <table>. Ces tableaux sont organisés en colonnes et en lignes, vous pouvez donc utiliser ces lignes et colonnes comme vous le souhaitez.
Exemple
Par exemple, l'exemple de mise en page HTML suivant est obtenu à l'aide d'un tableau avec 3 lignes et 2 colonnes, mais la colonne d'en-tête et de pied de page couvre les deux colonnes à l'aide de l'attribut colspan -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Disposition à plusieurs colonnes - Utilisation de tableaux
Vous pouvez concevoir votre page Web pour mettre votre contenu Web sur plusieurs pages. Vous pouvez garder votre contenu dans la colonne du milieu et vous pouvez utiliser la colonne de gauche pour utiliser le menu et la colonne de droite peut être utilisée pour mettre de la publicité ou d'autres choses. Cette mise en page sera très similaire à celle que nous avons sur notre site Web tutorialspoint.com.
Exemple
Voici un exemple pour créer une disposition à trois colonnes -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Cela produira le résultat suivant -
Dispositions HTML - Utilisation de DIV, SPAN
L'élément <div> est un élément de niveau bloc utilisé pour regrouper des éléments HTML. Alors que la balise <div> est un élément de niveau bloc, l'élément HTML <span> est utilisé pour regrouper des éléments à un niveau en ligne.
Bien que nous puissions obtenir de jolies mises en page avec des tableaux HTML, les tableaux n'étaient pas vraiment conçus comme un outil de mise en page. Les tableaux sont plus adaptés à la présentation de données tabulaires.
Note - Cet exemple utilise la feuille de style en cascade (CSS), donc avant de comprendre cet exemple, vous devez avoir une meilleure compréhension du fonctionnement de CSS.
Exemple
Ici, nous allons essayer d'obtenir le même résultat en utilisant la balise <div> avec CSS, tout ce que vous avez obtenu en utilisant la balise <table> dans l'exemple précédent.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Cela produira le résultat suivant -
Vous pouvez créer une meilleure mise en page en utilisant DIV, SPAN avec CSS. Pour plus d'informations sur CSS, veuillez consulter le didacticiel CSS.