• Accueil
  • Prestations

      Digital

      Community Management
      Publicités réseaux sociaux
      Newsletters
      Webmarketing

      Image de marque

      Création de logos
      Création d'identités visuelles
      Rédaction

      Développement web

      Création de site vitrine
      Création de site e-commerce
      Référencement
      Maintenance
  • Formations

      Création web

      Créer son site avec WordPress - Initiation
      Créer son site avec WordPress - Perfectionnement
      Créer son e-commerce avec Prestashop
      Elementor et Elementor PRO

      Webdesign

      Création de logos
      Création d'identités visuelles
      UX/UI

      Webmarketing

      Analyse de la situation actuelle
      Veille stratégique
      Référencement
      E-mailing
      Réseaux sociaux
  • Contact

      Contactez NETTIM

Les bases du HTML et du CSS Partie 1

Comment organiser ses fichiers

Vous allez créer un dossier par projet, dans lequel vous allez retrouver les fichiers de votre site internet.

À l’intérieur, vous allez trouver 3 dossiers et 2 fichiers :

  • un dossier nommé images,
  • un dossier nommé css qui contiendra un fichier nommé style.css,
  • un dossier nommé js,
  • un fichier nommé index.html.

 

Le fichier INDEX.HTML

Il s'agit de la page d'accueil de votre site. Il est important de nommer ce fichier index. C'est une norme, tous les serveurs cherchent en premier un fichier nommé index.

Le dossier JS

Ce dossier contiendra les codes en javascript de votre site.

Le dossier CSS

Ce dossier contiendra nos différents fichiers CSS

Le dossier images

Ce dossier va contenir toutes les images de votre site.

Le fichier STYLE.CSS

C'est le fichier dans lequel nous allons coder en CSS.

Les fichiers Javascript

On les ajoutera dans le dossier Js

Balises, attributs et sémantique

Le HTML est un langage simple de balises qui se nomment par leur contenu.

Par exemple la balise < p > contiendra un paragraphe.

Une balise est composée de deux éléments :

– Une balise ouvrante
– Une balise fermante.

Par exemple

				
					<p>Ceci est un paragraphe</p>
				
			

Notez le / dans la balise fermante.

Il est possible d’ajouter des attributs aux balises. Ces attributs servent à donner des informations complémentaires.

				
					<p class="acc">Ceci est un paragraphe</p>
				
			

Certaines balises sont autofermées. C’est à dire qu’elle n’ont qu’une seule balise ouvrante, et aucune balise fermante.

				
					<img>
<br>
				
			

Indentation et commentaires

La première bonne pratique à respecter est l’indentation.
Chaque élément contenu dans des balises doit avoir une tabulation en amont. 

Votre code sera plus facilement lisible.

				
					<p class="acc">
    Ceci est un paragraphe
</p>
				
			

En HTML, il est possible d’imbriquer les balises. C’est à dire qu’on peut mettre des balises dans des balises.

Notez que les balises sont elles aussi indentées. Nous pouvons en imbriquer autant que nous en avons besoin.

				
					<div>
    <p class="acc">
        Ceci est un paragraphe
    </p>
</div>
				
			

Il est important de commenter son code pour deux raisons :

  • Pouvoir s’y retrouver plus tard.
  • Rendre votre code plus accessible à une personne tierce qui aurait à intervenir sur votre site.
				
					<!-- Ceci est un commentaire -->
<div>
    <p class="acc">
        Ceci est un paragraphe
    </p>
</div>
				
			

Structure d'une page

1- Le doctype

Avant de commencer à coder, il faut préciser au navigateur dans quel langage nous parlons. Il s’agit du doctype (type de document).

				
					<!DOCTYPE html>
				
			

2- Balise HTML

Ensuite, il faut ouvrir une balise <html>. Tout notre code sera compris dans cette balise.
Attention ! Il ne peut y avoir qu’une seule balise <html> par page.

				
					<!DOCTYPE html>
<html>
</html>
				
			

3- La balise HEAD

Elle sert aux robots et au navigateur. C’est elle qui gère les méta données.
Son contenu n’est pas visible des internautes.

4- La balise BODY

C’est ici que nous allons entrer notre contenu. Tout ce qui est codé entre ces balises sera visible des internautes.

				
					<!DOCTYPE html>
<html>
	<head>
	</head>
	
	<body data-rsssl=1>
	</body>
</html>
				
			

5- La balise TITLE

C’est le titre de notre page, elle est à mettre dans le HEAD

 

6- Le charset

Le charset permet de savoir dans quel alphabet nous écrivons.
Si vous déclarez un mauvais charset, il est possible que les accents ou les caractères spéciaux s’affichent mal.

				
					<!DOCTYPE html>
<html>
	<head>
	    <title>Le titre de ma page web</title>
	    <meta charset="utf-8" />
	</head>
	<body data-rsssl=1>
	</body>
</html>
				
			

7- Les balises META 

Description :

La balise description est très utile. Elle permet de donner une description aux robots des moteurs de recherches et de l’afficher sur la page des résultats

Autor :

Cette balise sert à renseigner le nom de l’auteur de la page internet.

Copyright :

Cette balise sert à renseigner le copyright qui gère le contenu de notre page internet.

				
					<!DOCTYPE html>
<html>
	<head>
	    <title>Le titre de ma page web</title>
	    <meta charset="utf-8" />
	    <meta name="description" content="Une description de la page..." />
	</head>
	<body data-rsssl=1>
	</body>
</html>
				
			

Toute la partie visible de notre site sera dans le body.

Préparer la création des fichiers de base

Mise en pratique

Exercice

Le dossier

Créer le dossier

Les fichiers

Préparer tous vos fichiers

Logo Nettim Agence Web Metz
  • Accueil
  • Prestations
    • E-Commerce
    • Vitrine
    • Services +
    • Maintenance
    • Tarifs
  • Formations
  • A Propos
    • A propos
Menu
  • Accueil
  • Prestations
    • E-Commerce
    • Vitrine
    • Services +
    • Maintenance
    • Tarifs
  • Formations
  • A Propos
    • A propos

Benchmark

©2022 Nettim

  • Mentions Légales
  • Contact
  • Accueil
  • Conseils
  • Plan du site
  • FAQ
Menu
  • Mentions Légales
  • Contact
  • Accueil
  • Conseils
  • Plan du site
  • FAQ
Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désabonner si vous le souhaitez. AccepterRejeter En savoir +
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Toujours activé
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Enregistrer & appliquer