HTML, connu sous le nom de HyperText Markup Language, est l'un des langages les plus populaires utilisés pour concevoir des pages Web et structurer le contenu. HTML utilise des balises, des éléments, des images et certains composants les plus récents pour rendre les pages Web plus attrayantes et plus conviviales.
En combinant HTML avec CSS, l'apparence d'une page Web peut être facilement personnalisée. HTML joue un rôle crucial dans la structuration correcte des pages Web sur le World Wide Web. Il peut être modifié à l'aide d'éditeurs de texte simples, permettant aux utilisateurs d'apporter des modifications à tout moment.
Comment concevoir une page Web en HTML ? (Pas à pas)
Étape 1 : Configurez votre projet
Créez un nouveau dossier sur votre ordinateur pour stocker les fichiers de votre page Web.
Ouvrez un éditeur de texte comme Notepad, Sublime Text ou Visual Studio Code afin d'écrire votre code HTML.
Étape 2 : Commencez par la structure HTML
Commencez votre fichier HTML en ajoutant la déclaration en haut. Cela indique au navigateur que vous utilisez HTML5.
Créez les balises HTML d'ouverture et de fermeture : .
À l'intérieur des balises HTML, créez les balises head d'ouverture et de fermeture :.
Dans les balises head, ajoutez les balises titre d'ouverture et de fermeture : . C'est ici que vous écrirez le titre de votre page Web.
Étape 3 : Ajouter du contenu au corps
Après la balise head de fermeture, créez les balises body d'ouverture et de fermeture : . C'est ici que vous placerez tout le contenu visible de votre page Web.
À l'intérieur des balises body, vous pouvez commencer à ajouter des éléments tels que des titres, des paragraphes, des images et des liens.
Pour ajouter un titre, utilisez les balises pour le titre principal et , , et ainsi de suite pour les sous-titres.
Pour ajouter un paragraphe, utilisez le
Pour ajouter une image, utilisez le Dans le champ balise, vous devez spécifier l'attribut src, qui doit contenir le chemin du fichier ou l'URL pointant vers l'emplacement du fichier image.
Pour ajouter un lien, utilisez les balises avec l'attribut href spécifiant l'URL.
Pour une meilleure compréhension, voici le code :
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Unlock the Power of Online Learning</h1>
<p>Master 1000+ Tools & Technologies.</p>
<img src="C:\Users\Demo2\Desktop\HTML\webimage.PNG">
<ul>
<li>Python</li>
<li>Artificial Intelligence</li>
<li>Java</li>
</ul>
<a href="https://www.educba.com">View All 1000 Skills</a>
</body>
</html>
Copier après la connexion
Étape 4 : Enregistrez votre fichier HTML
Enregistrez votre fichier avec une extension .html dans le dossier que vous avez créé précédemment.
Choisissez un nom descriptif pour votre fichier, tel que ma page Web.html (qui est couramment utilisé comme page principale d'un site Web).
Étape 5 : Affichez votre page Web
Ouvrez le fichier HTML dans un navigateur Web tel que Chrome, Firefox ou Safari.
Vous devriez voir la page Web ci-dessous affichée dans le navigateur, montrant le contenu que nous avons ajouté.
Sortie :
Étape 6 : Continuez à améliorer votre page Web
Explorez des balises et des attributs HTML supplémentaires pour améliorer davantage la structure et la conception de votre page Web.
Apprenez CSS (Cascading Style Sheets) pour styliser votre page Web et la rendre visuellement attrayante.
Expérimentez des fonctionnalités HTML plus avancées telles que les formulaires, les tableaux et les éléments multimédias.
Balises et éléments HTML pour la conception Web
Voici une liste de balises et d'éléments HTML essentiels qui sont cruciaux pour la conception de pages Web en HTML.
HTML Tag/Element
Purpose
to
Define different levels of headings
Define paragraphs of text
Create line breaks
Create an ordered list
Create an unordered list
Define items within a list
Create hyperlinks
Insert images
Create structured tabular data
Define the table header section
Define the table body section
Define the table footer section
Define a table row
Define a table data cell
Create input forms
Create different types of form input fields
Create a dropdown menu for selecting options
Define individual options within a dropdown menu
Define the header section of a web page
Define the navigation section of a web page
Define a generic section within a web page
Define an independent, self-contained content within a page
Define content that is tangentially related to the main page
Define the footer section of a web page
Examples of Design Web Pages in HTML
Let’s create some web pages to see the resultant web page.
Example #1: Travel Webpage
Here, we will create an amazing travel webpage showcasing places to visit in Switzerland. We will set one background image and add some text using HTML Code and Styling.
In this instance, we will design a simple game where users have to guess the number generated by the system.
<!DOCTYPE html>
<html>
<head>
<title>Guessing Game</title>
<style>
body {
text-align: center;
padding-top: 100px;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333333;
}
p {
color: #666666;
}
input {
padding: 10px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #cccccc;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border-radius: 4px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Guessing Game</h1>
<p>Guess a number between 1 and 10:</p>
<input type="number" id="guess" min="1" max="10">
<button onclick="checkGuess()">Submit</button>
<p id="result"></p>
<script>
function checkGuess() {
var guess = parseInt(document.getElementById("guess").value);
var randomNumber = Math.floor(Math.random() * 10) + 1;
if (guess === randomNumber) {
document.getElementById("result").innerHTML = "Congratulations! You guessed the correct number.";
} else {
document.getElementById("result").innerHTML = "Wrong guess. The correct number was " + randomNumber + ".";
}
}
</script>
</body>
</html>
Copier après la connexion
Output:
Conclusion
From all the above discussion, we can say that Web pages are created by using HTML code in a very simplified manner. Just simply put your HTML code in any one editor, save it with the .html extension, and open it within any browser.
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!
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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
