Apprendre les bases pour bien débuter sur EMS Tricks

Quelques bases sont necessaires pour intégrer au mieux les tricks tels que le HTML, le CSS, le JavaScript, EMS Framework ou les Medias Queries.

Des ressources sont disponibles afin de vous aider au mieux à l'apprentissage de ces techniques.

Je connais déjà !

Illustrations de la page commencer d'EMS Tricks

Les bases d'une page web

Logo html

Le HTML

Le HTML est un langage web. Il construit le contenu du site web à l'aide de balise représenté comme ceci : <p>, <div>, <header> etc.. Il structure par ces balises la page web traduit par les navigateurs.

Vous pouvez passer en éditeur HTML dans e-monsite pour écrire directement votre contenu dans ce langage.

Logo css

Le CSS

Le CSS est un langage web et fonctionne avec le HTML. Si le HTML est le contenu, le CSS est lui le style de ce contenu : les couleurs des textes, des boutons, la taille des marges etc.

Il peut être intégré à différents endroits dans e-monsite : zones éditables, apparence, balise META etc.

Logo js

Le JavaScript

Le JavaScript est un language de programmation principalement employé dans le web. Il peut agir sur le HTML et le CSS. En webdesign, l'utilisation du JavaScript est très utile pour faire des traitement spécifiques.

Dans e-monsite, jQuery, une librairie JavaScript simplifié, est de base chargée.

La communication entre HTML et CSS

Le HTML et le CSS communique ensemble par le biais d'id (identité) ou de class

Les id

Les id sont uniques, ils ne s'utilisent qu'une seule fois par page.

HTML

Déclaration d'un id en HTML :

<div id="le_nom_de_mon_id">
    Mon contenu
</div>

<!--En HTML, on déclare un id dans la balise que l'on souhaite cibler-->

CSS

Cibler un id en CSS :

#le_nom_de_mon_id {
    height: 50px;
}

/*En CSS, le '#' défini que l'on veut cibler un id dans le HTML*/
/*Ici, la hauteur de ma cible sera de 50 pixels*/

Les class

Contrairement aux id, les class peuvent être appliquées à plusieurs balises HTML.

HTML

Déclaration d'une class en HTML :

<div class="le_nom_de_ma_class">
    Un contenu
</div>

<div class="le_nom_de_ma_class">
    Un autre contenu
</div>

<!--En HTML, on déclare une class dans la/les balise(s) que l'on souhaite cibler-->

<div class="le_nom_de_ma_class une_autre_class">
    Un autre contenu
</div>

<!--On peut également affecter plusieurs class à un élement séparé par un espace-->

CSS

Cibler une class en CSS :

.le_nom_de_ma_class {
    weight: 50px;
}

/*En CSS, le '.' défini que l'on veut cibler une class dans le HTML*/
/*Ici, la largeur de mes cibles sera de 50 pixels*/

En HTML, un id et une class peuvent très bien être affectés au même élement.

<div id="le_nom_de_mon_id" class="le_nom_de_ma_class">
    Un contenu
</div>

Déja perdu ?
La page n'est pas encore finie !

Si les principes de bases des pages web vous ont déjà perdu, n'hésitez pas à visiter notre page "Ressources" !

Je veux voir les ressources !

Vous êtes perdu?
Illustration EMS Framwork

EMS Framework

EMS Tricks se base sur le thème Smart car on y trouve plus de personnalisation que les autres thèmes, mais surtout car il utilise EMS Framework

EMS Framework est la base de style utilisé par le thème Smart. Vous y trouverez toute la documentation ici.

Les Medias Queries pour une mise en page responsive

Illustration Media Queries

Les Médias Queries sont des élements CSS qui définissent la mise en page du site à certaines tailles de l'écran.
On les utilisent pour mettre en forme un site sur mobile ou tablette.

Exemple:

max-width

@media only screen and (max-width: 992px) {
    img {
        width: 500px;
        }
}

/*Ici, en dessous de 992px de large, les images feront 500 pixels de large.*/

min-width

@media only screen and (min-width: 992px) {
    img {
        width: 500px;
        }
}

/*Ici, au dessus de 992px de large, les images feront 500 pixels de large.*/

Mieux comprendre pour mieux utiliser

Sur EMS Tricks, nous partons du principes que vous savez déjà plus ou moins utiliser ces bases.
Si cela est encore flou, visitez notre page "Ressources".

Voir les ressources ! Voir les tricks !