Table des matières
Points clés à retenir
Sous-ensembles de HTML
1. XHTML (langage de balisage hypertexte extensible)
2. SGML (langage de balisage généralisé standard)
3. DHTML (HTML dynamique)
4. TTML2 (Langage de balisage de texte temporisé 2)
Modèle HTML
How to Create an HTML Table?
Pre-requisites for HTML Table
Student Details Table
Applications of HTML
Advantages and Disadvantages
Final Thoughts
FAQs
Q1. How to convert an HTML to PDF?
Q2. How to add an image in HTML?
Q3. Is HTML a programming language? What is the HTML used for?
Q4. How to add a video in HTML?
Q5. Is HTML case-sensitive?
Q6. How many tags are in HTML?
Q7. What is HTML doctype?
 Q8. What is an HTML header?
Maison interface Web tutoriel HTML Qu'est-ce que le HTML ?

Qu'est-ce que le HTML ?

Sep 04, 2024 pm 04:12 PM
html html5 HTML Tutorial HTML Properties HTML tags

HyperText Markup Language, ou HTML, est un langage qui permet la création de sites Web visibles par toute personne connectée à Internet. Selon une enquête, plus de 55 % des personnes interrogées ont déclaré utiliser HTML.

De plus, l’apprentissage du HTML est généralement la première étape du parcours de tout développeur Web. Un développeur Web moyen gagne 61 718 $ par an, et les meilleurs développeurs franchissent la barre des 103 000 $.

L'hypertexte est le moyen d'accéder à Internet en cliquant sur un texte appelé hyperliens qui mènera à la page suivante.

Qu'est-ce que le HTML ?

Points clés à retenir

  • Le code de base se compose d'une déclaration doctype, d'une balise HTML, d'une balise head, d'une balise titre et d'une balise body.
  • Il peut fonctionner sur n'importe quel système d'exploitation, tel que Windows, Mac et Linux, et sur n'importe quel navigateur, tel que Google Chrome, Mozilla Firefox et Safari.
  • Il a également diverses applications, telles que la création de blogs personnels, de tableaux détaillés, de formulaires d'inscription, de pages de destination, de newsletters et de portfolios en ligne.
  • Les avantages sont qu'il s'agit d'un standard ouvert, facile à apprendre, convivial pour les débutants avec un excellent support communautaire et convivial pour les moteurs de recherche.
  • Les inconvénients incluent une sécurité médiocre, un manque de flexibilité de conception, des résultats incohérents sur différents navigateurs et des fonctionnalités limitées.

Sous-ensembles de HTML

1. XHTML (langage de balisage hypertexte extensible)

  • XHTML est un langage de balisage basé sur XML, ce qui signifie qu'il adhère à des règles syntaxiques et sémantiques strictes.
  • XHTML était le successeur de HTML 4, visant à rendre le langage plus modulaire et extensible.
  • Les documents XHTML doivent être bien formés et valides, ce qui les rend plus difficiles à créer, plus cohérents et accessibles à un plus large éventail d'appareils.

2. SGML (langage de balisage généralisé standard)

  • SGML est un métalangage utilisé pour définir des langages de balisage, dont HTML.
  • SGML fournit une syntaxe standard pour décrire la structure et le contenu d'un document, ce qui le rend utile pour l'échange d'informations entre différents systèmes.
  • SGML est un système complexe et puissant, mais sa syntaxe et sa complexité le rendent moins largement utilisé que les langages de balisage plus simples comme HTML.

3. DHTML (HTML dynamique)

  • DHTML fait référence à l'utilisation de HTML, CSS et JavaScript pour créer des pages Web dynamiques et interactives.
  • DHTML permet de manipuler le contenu, la mise en page et le comportement d'une page Web en réponse aux actions de l'utilisateur sans nécessiter une actualisation de la page.
  • DHTML est largement utilisé pour créer des effets dynamiques, tels que des menus déroulants, des info-bulles et des diaporamas.
  • Il peut également créer des animations et des jeux simples.

4. TTML2 (Langage de balisage de texte temporisé 2)

  • TTML2 est un langage de balisage utilisé pour représenter le contenu textuel chronométré, tel que les légendes et les sous-titres, de manière standardisée.
  • TTML2 fournit un ensemble complet de fonctionnalités pour le formatage et le style du texte chronométré, y compris la prise en charge de plusieurs langues et styles de police.
  • TTML2 est un outil important pour garantir l'accessibilité du contenu multimédia pour les utilisateurs sourds et malentendants et pour améliorer la convivialité du contenu vidéo pour tous les utilisateurs.

Modèle HTML

Chaque page HTML a un modèle de base. Il se compose des sections suivantes :

Déclaration de type de document : La première ligne d'un document HTML est la déclaration doctype ou type de document, qui définit la version de HTML utilisée.

Syntaxe :

<!DOCTYPE html>
Copier après la connexion
Copier après la connexion

Élément : L'élément est l'élément racine d'un document HTML, contenant tous les autres éléments.

Syntaxe :

<html>...</html>
Copier après la connexion

Élément Head : L'élément head contient des informations sur le document, telles que le titre, les métadonnées et des liens vers des ressources externes telles que des feuilles de style.

Syntaxe :

<head>...</head>
Copier après la connexion

Élément Titre : L'élément titre définit le titre du document, qui s'affiche dans la barre de titre du navigateur.

Syntaxe :

<title>Name of Web Page</title>
Copier après la connexion

Élément Body : L'élément body contient le contenu principal du document, y compris le texte, les images et d'autres médias.

Syntaxe :

<body>...</body>
Copier après la connexion

En dehors de ces balises de base, plusieurs autres éléments peuvent aider à ajouter du contenu pour créer un superbe site Web. Ce sont-

Titres : Les titres (H1, H2, H3, etc.) permettent de structurer le contenu et de hiérarchiser les informations.

Syntaxe :

<h1>Main Heading</h1>
Copier après la connexion

Paragraphes : Les paragraphes (

) aident à définir des blocs de texte.

Syntaxe :

<p>Hello World</p>
Copier après la connexion

Liens : Les liens () permettent aux utilisateurs de naviguer vers d'autres pages Web ou vers d'autres ressources.

Syntaxe :

<a href="https://www.EDUCBA.com">Link to EDUCBA website</a>
Copier après la connexion

Images: Images () can provide visual content in a document.

Syntax:

<img src="image.jpg" alt="Image Description">
Copier après la connexion

Code:

<!DOCTYPE html>


EDUCBA’s Page


Hello World! This is EDUCBA’s first web page.

Copier après la connexion

Output:

Qu'est-ce que le HTML ?

How to Create an HTML Table?

There are specific table tags to create a table – mainly,

, , and
,
.

Pre-requisites for HTML Table

For an absolute beginner, it is essential to know what the different table tags do before writing a basic code.

  • : Defines a table
  • : Defines a table row
  • : Defines a table header cell
  • : Defines a table data cell

    Student Details Table

    John has to create a webpage showing the names of students in a class along with their marks in mathematics and science. He draws the following table.

    Name Mathematics Science
    Mary 78 92
    Susan 98 84
    Amy 63 79

    Now, John wants to write the code to transform this table into an HTML table on a webpage. The steps-

    Step #1: Open an HTML code editor. This tutorial demonstrates how to write code in Visual Studio Code. If the PC doesn’t have VS Code, one can download it here.

    Step #2: Select File > New Text File.

    Qu'est-ce que le HTML ?

    Step #3: Click on “Select a language” and then type HTML in the text box. Choose the HTML option to create a new HTML file.

    Qu'est-ce que le HTML ?

    Step #4: Again, go to File > Save As and save the file with the filename.html format.

    Qu'est-ce que le HTML ?

    Qu'est-ce que le HTML ?

    Step #5: Add the basic code, i.e., HTML template of doctype declaration, HTML tag, head tag, title tag, and body tag, as shown below. Set the title as Student Details.

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    
    Copier après la connexion

    Output:

    Qu'est-ce que le HTML ?

    Opening the file should show the following blank web page. Note the title in the browser tab has changed to “Student Details.”

    Qu'est-ce que le HTML ?

    Step #6: Now, define the table using the

    tag inside the body tag. Define the first row using the tag, and add 3 headings cells – Name, Mathematics, and Science, using the tag, and adding the data in each cell using
    tag. Don’t forget to close the tags with a corresponding closing tag.

    Code:

    <table>
    <tr>
    <th>Name</th>
    <th>Mathematics</th>
    <th>Science</th>
    </tr>
    </table>
    Copier après la connexion

    Save the file and refresh the webpage to see the updated output:

    Qu'est-ce que le HTML ?

    Step #7: Add the student details by defining a row for each student using

    tag. Close the table with the
    tag.

    Code:

    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>
    Copier après la connexion

    Once again, save and refresh the webpage to see the final output:

    Code:

    <!DOCTYPE html>
    
    
    Student Details
    
    
    
    <tr>
    <td>Mary</td>
    <td>78</td>
    <td>92</td>
    </tr>
    <tr>
    <td>Susan</td>
    <td>98</td>
    <td>84</td>
    </tr>
    <tr>
    <td>Amy</td>
    <td>63</td>
    <td>79</td>
    </tr>
    
    Name Mathematics Science
    Copier après la connexion

    Applications of HTML

    Application How Does HTML Help?
    Web pages To create web pages, provide the structure and content for displaying information in a web browser.

     

    E-commerce To create online stores, product catalogs, and shopping carts, allowing customers to purchase products and services online.

     

    Landing pages To develop compelling landing pages for websites that capture a visitor’s attention and encourage them to take a specific action.

     

    Newsletters It allows the creation of interactive and visually appealing newsletters, such as corporate newsletters, that deliver to subscribers via email.

     

    Online portfolios To create online portfolios for artists, photographers, and other creatives, showcasing their work and skills to potential clients and employers.

     

    Blogs One can create blogs, which are personal websites that provide a platform for writing and publishing articles and other content.
    Documentation It helps to create documentation and help files, providing information and guidance to users of the software and other products.

     

    Advertisements It can help make advertisements embedded on websites and social media platforms, promoting products and services to a wide audience.

     

    Forms To create a form, one can use
    elements.

     

    Advantages and Disadvantages

    Pros Cons
    Open Standard: It is free of cost and readily available. Limited Functionality: It cannot perform complex tasks like calculations or data storage.
    Easy to Learn: HTML tags are basic and in a readable format, enclosed in angle brackets. It’s easy to learn and use, even for non-programmers. Poor Security: It is vulnerable to security threats such as cross-site scripting (XSS) and SQL injection.
    Search Engine Friendly: Search engines can easily crawl and index the content of the pages. Inconsistent Browsers: Different browsers render HTML differently, leading to an inconsistent display of web pages on different browsers.
    Community Support: It has large community support and many online resources available for learning and troubleshooting. Poor Design Flexibility: It provides limited design options and creates static websites, making it difficult to create visually appealing dynamic websites without integrating CSS and JavaScript.

    Final Thoughts

    In conclusion, Hypertext Markup Language is a cornerstone of the World Wide Web. It provides a standardized way of defining the structure and content of a web page using a combination of tags and attributes. With HTML, one can create simple text-based web pages or complex, multimedia-rich applications. It is easy to learn and widely used, making it an essential skill for anyone interested in web development.

    FAQs

    Q1. How to convert an HTML to PDF?

    Answer: To convert, use a library or online service that supports HTML to PDF conversion.

    Q2. How to add an image in HTML?

    Answer: To add an image, use the tag with the src attribute pointing to the image file’s URL or local path. Example:

    <img src="image.jpg" alt="Alt text">
    Copier après la connexion

    Q3. Is HTML a programming language? What is the HTML used for?

    Answer: Hypertext Markup Language is not a programming language, it is a markup language used for creating web pages and other information displayed in a web browser. HTML defines the structure and content of a web page using a set of markup tags.

    Q4. How to add a video in HTML?

    Answer: To add a video, use the

    <video src="video.mp4"></video>
    Copier après la connexion

    One can also add controls to play, pause, and adjust volume with the controls attribute:

    <video src="video.mp4" controls></video>
    Copier après la connexion

    Q5. Is HTML case-sensitive?

    Answer: No, elements are not case-sensitive. However, as best practice, it’s good to follow the same casing in all tags or elements to improve code readability.

    Q6. How many tags are in HTML?

    Answer: There are over 140 tags specified in the HTML5 standard, but some of them have become obsolete and are not widely used. Commonly used tags include headings, paragraphs, links, images, lists, tables, forms, and multimedia elements like audio and video.

    Q7. What is HTML doctype?

    Answer: The first line of a document is the doctype or document type declaration, which defines the version of the HTML used. Example:

    <!DOCTYPE html>
    Copier après la connexion
    Copier après la connexion

     Q8. What is an HTML header?

    Answer: The HTML

    tag defines a header section in a document. This section typically contains information such as the page title, logo, and navigation menu. The header section is usually displayed at the top of the page, and its content is typically shared across multiple pages of a website. The header tag helps to define the structure and hierarchy of a web page and makes it easier to create a consistent look and feel across multiple pages.

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

    Déclaration de ce site Web
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

    Outils d'IA chauds

    Undresser.AI Undress

    Undresser.AI Undress

    Application basée sur l'IA pour créer des photos de nu réalistes

    AI Clothes Remover

    AI Clothes Remover

    Outil d'IA en ligne pour supprimer les vêtements des photos.

    Undress AI Tool

    Undress AI Tool

    Images de déshabillage gratuites

    Clothoff.io

    Clothoff.io

    Dissolvant de vêtements AI

    Video Face Swap

    Video Face Swap

    Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

    Outils chauds

    Bloc-notes++7.3.1

    Bloc-notes++7.3.1

    Éditeur de code facile à utiliser et gratuit

    SublimeText3 version chinoise

    SublimeText3 version chinoise

    Version chinoise, très simple à utiliser

    Envoyer Studio 13.0.1

    Envoyer Studio 13.0.1

    Puissant environnement de développement intégré PHP

    Dreamweaver CS6

    Dreamweaver CS6

    Outils de développement Web visuel

    SublimeText3 version Mac

    SublimeText3 version Mac

    Logiciel d'édition de code au niveau de Dieu (SublimeText3)

    Bordure de tableau en HTML Bordure de tableau en HTML Sep 04, 2024 pm 04:49 PM

    Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.

    Tableau imbriqué en HTML Tableau imbriqué en HTML Sep 04, 2024 pm 04:49 PM

    Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.

    Marge gauche HTML Marge gauche HTML Sep 04, 2024 pm 04:48 PM

    Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.

    Disposition du tableau HTML Disposition du tableau HTML Sep 04, 2024 pm 04:54 PM

    Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.

    Espace réservé d'entrée HTML Espace réservé d'entrée HTML Sep 04, 2024 pm 04:54 PM

    Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.

    Liste ordonnée HTML Liste ordonnée HTML Sep 04, 2024 pm 04:43 PM

    Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.

    Bouton HTML onclick Bouton HTML onclick Sep 04, 2024 pm 04:49 PM

    Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.

    Déplacer du texte en HTML Déplacer du texte en HTML Sep 04, 2024 pm 04:45 PM

    Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.

    See all articles