Cwebdes PDF

Module Gratuit
Création d’un site web en

html/css
www.formationengroupe.be
+32 2 229 33 30 - [email protected]
Cher(e) élève,
Nous vous remercions de l’intérêt que vous portez au Centre de Qualification

Professionnelle et à notre cours de Webdesign.
Dans les pages suivantes, vous trouverez un premier chapitre et la table des matières
complète de ce cours. Nous vous invitons à parcourir ce module afin de vous forger une
idée concrète du contenu et d’être certain(e) de faire le choix du cours le plus approprié
pour vous.
Vous y trouverez également les informations nécessaires concernant le fonctionnement de

notre école. Notez que le CQP vous aidera à acquérir des compétences spécifiques dans
chaque domaine, à booster vos possibilités d’évolution, à changer de cap, ou tout
simplement à vous perfectionner à des tarifs très avantageux.
Après lecture du module gratuit, si vous souhaitez en discuter avec nous, n’hésitez pas à
nous contacter par mail à [email protected]. Nos conseillers sont à votre
disposition pour tout conseil personnalisé quant à vos choix de cours ainsi que toute
information relative à notre école.
Au plaisir de vous compter parmi nos élèves.
Très cordialement
Nathalie Focant
Centre de Qualification Professionnelle
DES COURS POUR QUI?
Pour tous! Que vous soyez chef d’entreprise, employé, ouvrier, indépendant, demandeur
d’emploi, apprenti, auto-entrepreneur, mère au foyer, créateur d’entreprise, enseignant ou
étudiant, nos cours sont accessibles à tout un chacun. Aucune formation préalable n’est
requise pour suivre l’une de nos formations. Nos cours sont axés sur la pratique, les cas
concrets et le vécu sur le terrain, afin que vous montiez en compétences rapidement.
DES SECTEURS D’ACTIVITÉS TRÈS VARIÉS
Le Centre de Qualification Professionnelle ASBL propose plus de 1OO cours et une

multitude de catégories : administration, art et culture, beauté, coaching et
développement personnel, management… Vous trouverez sans nul doute le cours qui vous
convient!
POUR LES MINEURS ÉGALEMENT?
Bien sûr! Les mineurs ont également la possibilité de suivre les cours au CQP. Pour
beaucoup de jeunes, il s’agit d’une belle opportunité de suivre des cours du soir en plus de
leur éducation scolaire. Ils goûtent ainsi à des sujets ou aspects de la vie professionnelle
auxquels ils ne peuvent avoir accès dans l’enseignement obligatoire.
Six raisons de suivre une formation avec le CQP
1. FORMEZ-VOUS DANS DES CONDIT IONS IDÉALES
Toutes nos formations sont organisées pour des groupes de taille moyenne, afin que vous
puissiez bénéficier d’un accompagnement personnalisé et que vous puissiez vous exercer
suffisamment à la pratique pendant les cours. L’interaction entre les apprenants est une des
approches pédagogique du CQP: se former par des jeux de rôles et par la réalisation de
projets pratiques permet un apprentissage rapide et dynamique.
2.MATÉRIEL DIDACTIQUE À LA POINTE
Le matériel didactique des formations du CQP est complet et très bien structuré. Il n’est pas
nécessaire de vous procurer du matériel supplémentaire, tout est compris dans vos frais
d’inscription afin de vous permettre de vous concentrer sur l’essentiel: votre apprentissage.
Riches en exercices pratiques et en cas concrets, les manuels de cours édités par le CQP
sont un support idéal. Les nombreuses illustrations, schémas et synthèses permettent une
compréhension et une assimilation immédiate.
3.UN DIPLÔME POUR VALORISER VOTRE SAVOIR-FAIRE
Grâce à votre diplôme, vous pourrez valoriser vos aptitudes sur votre CV ou directement
auprès de votre employeur pour demander une promotion, changer de poste, évoluer au
sein de l’entreprise… C’est donc un premier gage de qualité de la part du CQP et la
preuve effective de la maîtrise d’une ou plusieurs compétence(s).
Nos cours en groupe vous préparent parfaitement à cette évaluation, afin que vos
chances de réussite soient assurées. Lorsque vous aurez réussi ce test, vous obtiendrez votre
diplôme ou certificat.
4.DES PROFESSEURS SÉLECTIONNÉS AVEC SOIN
Notre approche est unique : l’accompagnement professionnel des cours est assuré et
effectué par des professeurs qualifiés ayant au minimum cinq ans d’expérience dans leur
domaine. Véritables passionnés, ils se feront un plaisir de partager leur expérience et leurs
secrets de réussite avec vous. Tous nos professeurs sont actifs dans leur profession et sont
disposés à vous initier aux nouvelles techniques et tendances.
5.DES FORMATIONS TOUT AU LONG DE L’ANNÉE
Le CQP propose des formations pour adultes à travers toute la Wallonie et la Région de
Bruxelles-Capitale. Nos formations sont organisées plusieurs fois par an et ont lieu le soir ou
le weekend à raison d’un cours par semaine. Certaines sessions sont organisées en
matinée. Ceci offre la possibilité de combiner aisément votre formation avec votre vie
professionnelle et familiale, et surtout de pouvoir suivre un cours au moment ou le besoin
s’en fait ressentir.
6.LE MEILLEUR CHOIX SANS SACRIFICES FINANCIERS!
Etudier au CQP, c’est étudier sans sacrifices financiers. La fréquence de nos cours ainsi que
l’envergure de notre école nous permettent de proposer des cours d’excellente qualité à
prix bas. Ce sont l’efficacité de notre organisation et les excellents partenariats avec nos
professeurs qui rendent une telle situation possible.
7.PROFITEZ DE 10% DE REMISE POUR UNE INSCRIPTION RAPIDE
Afin d’assurer un suivi et un accompagnement irréprochable à chacun, le nombre de

places par session est limité. Vous voulez être sûr(e) d’avoir une place? Inscrivez-vous
rapidement! En vous inscrivant et en payant plus de 3 mois avant la date de début du
cours, vous bénéficiez de 10% de remise sur la totalité de vos frais de formation.
Les élèves du Centre de Qualification ASBL ont une longueur d’avance. Les employeurs
accordent beaucoup d’importance à la formation continue et aux connaissances
pratiques.
L’inscription peut se faire très facilement sur notre site Internet. Remplissez le formulaire
d’inscription en ligne et suivez les instructions de paiement. L’école traitera rapidement
votre inscription. Dès lors, vous recevrez une confirmation et toutes les informations
nécessaires au bon déroulement de votre formation.
COMMENT PUIS-JE FAIRE UN STAGE ?
Pour maîtriser la pratique, vous avez la possibilité de faire un stage conventionné d’une
durée de maximum 300h. Ce stage n’est pas obligatoire, mais il est vivement conseillé. Il
doit impérativement être fait avant le passage de votre test. C’est une bonne expérience
qui vous permettra de booster vos compétences.
Dès que vous avez trouvé le lieu de stage, adressez-vous au secrétariat pour obtenir les
documents nécessaires.
ENCORE DES QUESTIONS
Nous sommes à votre disposition pour vous aider. Prenez contact

avec nous par téléphone au +32 2 229 33 30 ou par mail via
[email protected]
1 Consignes pour la réalisation du site web complet
2 La structure d’un site web
3 Le FTP (file transfert protocol)
3.1. Définition
3.2. Installation
3.3. Utilisation de Filezilla
4 Le langage HTML
4.1. Introduction au HTML
4.2. Découverte d’une page html
4.3. La balise HTML
4.4. Le Doctype
4.5. La balise Head
4.6. Les commentaires
4.7. La balise Title
4.8. Le corps du document – body
4.9. Les niveaux de titres
4.10. Les paragraphes de texte
4.11. La mise en forme de texte
4.12. Les images
4.13. Les liens hypertextes
4.14. Le lien image
4.15. Les liens externes et les liens internes
4.16. Les ancres
4.17. Les liens e-mails
4.18. Les listes
4.19. Les listes ordonnées
4.20. Les listes de définitions
4.21. Les listes de menus
4.22. Les listes imbriquées
4.23. Les tableaux
5 L’HTML 5
5.1. Nouveautés de l’HTML5
5.2. Structure de base d'une page HTML5
5.3. Insertion d’une vidéo
5.4. Insertion d’un fichier audio
5.5. Réaliser une page modèle en HTML5
5.6. Générateur de code html5
5.7. Utilisation des feuilles de styles
5.7.1 Définition des CSS
5.7.2 Avantages des CSS
5.7.3 Réaliser la mise en forme et la mise en page avec les CSS
6 Réalisation d’un menu déroulant
7 Création de pages web avec le logiciel d’édition html Bluegriffon
7.1. Création d’une simple page html
7.2. Insertion d’une feuille de style
7.3. Application page modèle (avec une feuille de style interne)
7.4. Application menu déroulant
8 L’ergonomie d’un site web
9 Le référencement du site
9.1. Les généralités
9.2. Le PageRank
9.3. Les méta-tags
9.4. Les offres de positionnement et/ou de backlinks
9.4.1 Les offres de positionnement :
9.4.2 Les offres de backlinks
9.4.3 Comment réaliser des backlinks gratuits ?
9.5. Les logiciels de soumission
9.6. Ne pas désirer se faire indexer
9.6.1 La balise meta "robots"
9.7. Plan du site
9.8. Référencer son site web dans Google
9.8.1 Soumettre son url
9.8.2 Accéder aux différents services de Google pour les webmasters
9.8.3 Ajouter un sitemap
10 Sécuriser son site web
Réalisation d’un menu déroulant
Vous allez réaliser maintenant un menu déroulant grâce à l’utilisation d’un générateur de
menus en html/css.
Application menu déroulant
Voici le résultat de cette application. Vous pouvez bien sûr réaliser une autre mise en forme :
Le menu déroulant
Vous devez télécharger le menu html/css sur le site www.cssmenumaker.com ou télécharger
le fichier source.zip dans la page de l’étudiant.
Sur le site www.cssmenumaker.com, vous pouvez choisir parmi plusieurs modèles de menus.
Vous choisissez votre menu :
Vous cliquez sur le lien suivant source.zip :
Vous devez extraire les fichiers vers un dossier par exemple source :
Vous avez donc accès aux différents fichiers et vous allez devoir modifier le code :
Vous pouvez modifier les liens présents dans le code créé par défaut :
Analysons le code :
Appel de la feuille de style externe

Appel du script jquery qui permet l’affichage multi-supports (tablettes, smartphone, pc, …)
Comment modifier et/ou ajouter des liens : vous modifiez simplement le code et/ou faites
ajouter des liens par copier-coller que vous modifiez également :
Si vous avez des problèmes d’affichage de caractères, vous ajoutez cette ligne :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
dans le head et vous enregistrez en type utf-8 :
Vous pouvez également télécharger un menu déroulant :
Vous pouvez changer le nom du fichier à télécharger :
Voici votre menu déroulant :
Vous pouvez également modifier les liens :
Voici les liens modifiés. Voici un exemple :

<div id='cssmenu'>
<ul>
<li><a href='index.htm'><span>Home</span></a></li>
<li class='active has-sub'><a href='geographie.htm'><span>Géographie</span></a>
<ul>
<li class='has-sub'><a href='relief.htm'><span>Relief</span></a>
<ul>
<li><a href='montagnes.htm'><span>Montagnes</span></a></li>
<li class='last'><a href='plaine.htm'><span>Plaine</span></a></li>
</ul>
Résultat dans le navigateur :
Vous pouvez également modifier le style du menu :
Exemple :
Intégration du menu déroulant dans la page modèle (avec fichier css externe)
Voici les deux dossiers :
Vous pouvez copier le contenu du dossier contenant le menu css dans le dossier contenant
la page modèle :
Vous allez copier le code du fichier html menu déroulant dans le code de la page modèle :
Vous devez maintenant remettre de l’ordre dans ce fichier. En effet, vous ne devez avoir
qu’une seule balise html et vous devez replacer certains div :
<doctype html>
<html lang=''>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id="contenu">
<div id="titredelapage">
<div id='cssmenu'>
<ul>
<li><a href='index.htm'><span>Home</span></a></li>
<li class='active has-sub'><a href='geographie.htm'><span>Géographie</span></a>
<ul>
<li class='has-sub'><a href='relief.htm'><span>Relief</span></a>
<ul>
<li><a href='montagnes.htm'><span>Montagnes</span></a></li>
<li class='last'><a href='plaine.htm'><span>Plaine</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
titre de la page<br>
</div>
<div id="menu">menu principal<br>
</div>
<div id="texte">texte<br>
</div>
<div id="pieddelapage">pied de la page<br>
</div>
</div>
<br>
<br>
</body>
</html>
Appel de la feuille de style

Explication du code
target="..." :
Définit le mode d'ouverture
du lien. Les valeurs possibles
sont : "_self", "_blank".
"_self" Ouvre la page dans la
même fenêtre
"_blank" Ouvre la page dans
une nouvelle fenêtre
Le fichier css se trouve dans le dossier menu.
Voici une partie du code de menu_style.css (ouvert avec par exemple le bloc note ou le
Notepad++).
Vous pouvez modifier dans ce code les attributs de style du menu créé.
Voici une partie du code de la feuille de style. Ce code est très complexe. Nous ne
l’étudierons pas ici mais vous pouvez découvrir à quoi correspond ce code en le modifiant
et en observant les changements réalisés.
Remplacez le code existant par :

Exemple : #outside{
border:20px solid #ffffff;
background:#ffffff;
}
Et observez le résultat (voir ci-dessous)
Résultat :
Ce fichier css doit toujours se trouver dans le dossier contenant votre site web et le fichier
appelant ici « menu1html4.html » doit toujours contenir le lien correct permettant d’ouvrir le
fichier .css (feuille de style externe).
Nous allons pouvoir maintenant intégrer ce code du menu dans le fichier modele.htm
contenant la structure de la page web modèle.
Vous ouvrez la page modele.htm
Vous pouvez modifier le code du bloc menu afin de

pouvoir insérer un menu horizontal dans le bloc
menu.
Voici le résultat de la modification du code menu.
Insertion du menu horizontal dans le bloc menu :
C’est ici que vous allez insérer le code

du menu horizontal (copier-coller le
code à partir du fichier
menu1html4.html)
Pour insérer le menu dans la page modèle, vous ouvrez le fichier menu1html4.html. Ensuite,
vous copiez le lien vers la page css et le code du menu dans la page modèle.
A copier dans le head de
modele.htm
A copier dans le div menu de

modele.htm
Voici le code copié dans le

fichier modele.htm (ici
modele2.htm)
N’oubliez pas de copier le code
permettant d’appeler le fichier css
Résultat :
Enfin, vous enregistrez votre fichier dans le

dossier adéquat.
Voilà, la structure de la page modèle est créée ainsi que le menu principal.
Afin de vous permettre de mieux visualiser la page modèle, nous allons continuer
l’élaboration de cette page modèle en réalisant une bannière (image) et en l’insérant dans
la zone « le titre du site web ». Nous verrons plus loin comment gérer les images insérées en
utilisant les css.
Pour réaliser cela, vous pouvez, pour le moment, utiliser un logiciel comme Paint. Nous
étudierons plus loin un logiciel d’édition d’image plus complet mais gratuit, Photofiltre.
Méthode
Vous enregistrez une image (à partir d’un appareil photo, scannée, ou à partir du web).
Cette image devra être enregistrée en format jpg ou png. Ce sont des formats utilisés pour la
conception de pages web. Ces formats permettent la compression des images.
Le poids des images insérées dans des pages web varie de plus ou moins 20 ko à quelques
centaines de ko selon le nombre d’images insérées sur la page web.
Utilisation de Paint pour gérer les images insérées dans vos pages web
Vous enregistrez ou copiez une image qui sera la bannière de votre site web dans le dossier
images se situant dans le dossier principal contenant le site web.
Avec Komposer, Bluegriffon ou avec le bloc notes, vous insérez l’image dans la zone « Le
titre du site web ».
VOUS ETES CONVAINCU( E) ? INSCRIVEZ-VOUS SIMPLEMENT ET
RAPIDEMENT !
Etudier avec le Centre de Qualification Professionnelle, c’est avoir une longueur d’avance. Les
employeurs accordant de plus en plus d’importance à l’enseignement continu. Notre école
s’est construite au fils des années une solide réputation dans ce domaine.
Tous les diplômes et certificats obtenus avec le CQP sont reconnus et augmentent vos chances
sur le marché de l’emploi.
Vous avez fait votre choix de formation? Il ne vous reste plus qu’à vous inscrire. Pour cela, vous
avez deux options:
1. Remplissez le formulaire d’inscription sur http://www.formationengroupe.be/inscrivez-

vous/
2. Ou envoyez un mail à [email protected]
Votre inscription est définitive dès réception de vos frais d’inscription. Ces derniers s’élèvent à
450 € et comprennent votre syllabus, les leçons données par votre professeur et le passage de
votre examen, voire de votre examen de passage si nécessaire.
Versez ce montant sir le compte CQP BE24 0017 5589 7838 (BIC GEBABEBB) avec en
communication :
Votre nom + CWEBDES + Le campus + La date de début de la session
Nous vous enverrons un mail de confirmation d’inscription reprenant toutes les infos pratiques
dès que nous aurons reçu ce montant.
Nous vous souhaitons d’avance beaucoup de succès dans votre formation et votre nouvelle
carrière!

Cwebdes PDF

Transféré par

Droits d'auteur :

Formats disponibles

Cwebdes PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cwebdes PDF

Transféré par

Droits d'auteur :

Formats disponibles

Module Gratuit

Création d’un site web en

Nous vous remercions de l’intérêt que vous portez au Centre de Qualification

Vous y trouverez également les informations nécessaires concernant le fonctionnement de

Au plaisir de vous compter parmi nos élèves.

Centre de Qualification Professionnelle

DES SECTEURS D’ACTIVITÉS TRÈS VARIÉS

Le Centre de Qualification Professionnelle ASBL propose plus de 1OO cours et une

POUR LES MINEURS ÉGALEMENT?

2.MATÉRIEL DIDACTIQUE À LA POINTE

3.UN DIPLÔME POUR VALORISER VOTRE SAVOIR-FAIRE

5.DES FORMATIONS TOUT AU LONG DE L’ANNÉE

6.LE MEILLEUR CHOIX SANS SACRIFICES FINANCIERS!

7.PROFITEZ DE 10% DE REMISE POUR UNE INSCRIPTION RAPIDE

Afin d’assurer un suivi et un accompagnement irréprochable à chacun, le nombre de

COMMENT PUIS-JE FAIRE UN STAGE ?

ENCORE DES QUESTIONS

Nous sommes à votre disposition pour vous aider. Prenez contact

Appel de la feuille de style externe

Voici les liens modifiés. Voici un exemple :

Résultat dans le navigateur :

Résultat dans le navigateur :

Résultat dans le navigateur :

Appel de la feuille de style

Remplacez le code existant par :

Et observez le résultat (voir ci-dessous)

Vous pouvez modifier le code du bloc menu afin de

Voici le résultat de la modification du code menu.

C’est ici que vous allez insérer le code

A copier dans le div menu de

Voici le code copié dans le

Enfin, vous enregistrez votre fichier dans le

1. Remplissez le formulaire d’inscription sur http://www.formationengroupe.be/inscrivez-

Votre nom + CWEBDES + Le campus + La date de début de la session

Vous aimerez peut-être aussi