Détails du tutoriel Catégorie: HTML & CSS Difficulté: Débutant Durée estimée: 35min | |
Bonjour à tous et bienvenue dans cette première formation consacrée à l'apprentissage de langage web HTML & CSS
Dans cette formations nous allons commencer par la base de la base afin que vous compreniez comment s'utilise et à quoi sert le HTML & CSS.
Le langage HTML et le langage CSS sont deux langages distincts qui sont rarement utilisé l'un sans l'autre.
En effet pour faire simple, le HTML sert à créer les éléments et le CSS à les personnaliser.
Pour la petite anecdote théorique, ces deux langages ne sont pas des
langages de programmation mais des
langages de présentation et sont utilisés uniquement dans le cadre du web.
Etape 1La première étape de cette formation consiste à s'équiper avant de se lancer dans la programmation d'une page web.
Pour cela il vous faut un éditeur de texte qui sera adapté à vos goûts. Sachez que pour bien programmer, il faut être à l'aise avec son outil !
Ainsi plusieurs éditeurs de texte sont disponibles sur le web. Le plus connu pour Windows est
Notepad++ mais il en existe d'autres qui sont tout aussi bons !
Pour les utilisateurs de
Windows:
- Notepad++ (gratuit);
- Sublime Text 2 (gratuit ou payant pour la license pro);
- Adobe Dreamweaver (payant).
Pour les utilisateurs de
Mac:
- Sublime Text 2 (gratuit ou payant pour la license pro);
- Coda 2 (payant ±60€ );
- Adobe Dreamweaver (payant).
Ces listes sont basées sur les logiciels que j'ai utilisé et que j'ai apprécié et donc que je vous recommande, il en existe d'autres mais je préfère pas citer des logiciels que je n'ai pas testé au préalable.
Les atouts indispensable pour ce genre de logiciels sont la colorisation des balises et l'indentation du code. Késako tout ça? J'y arrive.
Pour pouvoir coder facilement et repérer rapidement les différents codes que l'on fait, il faut deux conditions indispensables:
- La colorisation des balises: Elle se fait automatiquement sur votre éditeur de texte, c'est très utile pour repérer où sont les balises, les classes et les styles. Les éléments du même type étant de la même couleur.
- L'indentation du code: Elle peut être gérée par votre éditeur de texte au moment où vous codez. L'indentation est une technique que l'on nous apprends en cours d'algorithmique et consiste à faire un "arbre" avec son code. En gros on commence à écrire tout à gauche et lorsqu'un élément fait partie de l'élément précédent, on fait une tabulation (ou alinéa) pour ainsi repérer facilement et rapidement à quoi est lié tel ou tel code. C'est assez compliqué à expliquer comme ça mais ne vous inquiétez pas vous allez vite comprendre avec les codes que je fournirai.