Introduction à HTML, CSS et Javascript
Traduit par
ScribdTranslationsIntroduction à HTML, CSS et Javascript
Traduit par
ScribdTranslationsPrésentation PowerPoint
sur
Formation industrielle
Programming Foundations with HTML + CSS
+ Javascript
Soumis à :- Soumis par :-
M. Papendra Kumar Abhishek Kumar
Maître de conférences 180201
Informatique et Ingénierie CSE- 4thannée
Objectifs
Introduction aux technologies Web :
● HTML pour créer le document
structure et contenu
● CSSto control is visual aspect
● Javascriptfor interactivity
Dans un navigateur
Les navigateurs ont des différences très marquées
pièces.
Nous sommes intéressés par deux d'entre eux :
● le moteur de rendu (dans
responsabilité de transformer notre
HTML+CSS dans un visuel
image).
● L'interpréteur Javascript
(également connu sous le nom de VM), dans
responsabilité d'exécuter le
Code Javascript.
Technologies
● HTML
● CSS
● Javascript
HTML
HTML signifie Langage de balisage Hypertexte. <html>
<tête>
Le HTML nous permet de construire la partie visible d'un site Web. </tête>
<corps>
HTML n'est PAS un langage de programmation, c'est un langage de balisage. <div>
<p>Salut</p>
ce qui signifie que son but est de structurer le contenu de la </div>
site web. </body>
</html>
C'est une série de balises imbriquées (c'est un sous-ensemble de XML) qui contiennent tout
les informations du site web (comme les textes, images et vidéos). Voici un
exemple de balises :
<title>This is a title</title>
Le HTML définit la structure de la page. Un site Web peut avoir plusieurs
HTMLs vers différentes pages.
HTML : règles de base
Quelques règles sur HTML :
● Il utilise la syntaxe XML (balises avec attributs, peut contenir d'autres balises).
<tag_name>content</tag_name>
● Il stocke toutes les informations qui doivent être affichées à l'utilisateur.
● Il existe différents éléments HTML pour différents types d'informations et de comportements.
● Les informations sont stockées dans une structure arborescente (nœuds contenant des nœuds à l'intérieur) appelée
DOM (Modèle d'objet de document).
● Cela donne au document une certaine structure sémantique (par exemple, ceci est un titre, ceci est une section, ceci est
un formulaire) qui est utile pour les ordinateurs pour comprendre le contenu des sites web.
● Il ne doit pas contenir d'informations relatives à la manière dont il doit être affiché (ces informations
appartient au CSS), donc aucune information sur la couleur, la taille de police, la position, etc.
HTML : exemple de syntaxe
Nom de la balise
attributs
<divid="main"> comment
<!-- this is a comment --> étiquette de texte
Ceci est un texte sans étiquette.
<buttonclass="mini">press me</button>
<imgsrc="[Link]"/> balise auto-fermante
</div>
HTML : balises principales
Bien qu'il existe de nombreuses balises dans la spécification HTML, 99 % des sites Web utilisent un sous-ensemble de.
Les balises HTML avec moins de 10 balises, les plus importantes sont :
● <div>: un conteneur, représente généralement une zone rectangulaire avec des informations à l'intérieur.
● <img/>: une image
● <a>: un lien cliquable pour aller à une autre URL
● <p> : un paragraphe de texte
● <h1>: un titre (h2, h3, h4 sont des titres de moindre importance)
● <input>: un widget pour permettre à l'utilisateur de saisir des informations
● <style>: pour insérer des règles CSS
● <script>: exécuter Javascript
● <span>: une balise nulle (ne fait rien)
HTML : encapsuler les informations
Nous utilisons des balises HTML pour envelopper différentes informations sur notre site.
Plus les informations sont structurées, plus il sera facile d'y accéder et de les présenter.
Nous pouvons changer la façon dont l'information est représentée à l'écran en fonction des balises.
où il est contenu, donc nous ne devrions pas nous inquiéter d'utiliser trop de balises.
Technologies
● HTML
● CSS
● Javascript
CSS
Permet de spécifier comment présenter (rendre) les informations du document stockées dans le HTML.
Permet de contrôler tous les aspects de la visualisation et quelques autres fonctionnalités :
● Colors: content, background, borders
● Margins: interior margin, exterior margin
● Position : où le mettre
● Sizes: width, height
● Comportement : changements au survol de la souris
CSS example
* {
color: bleu;/*un commentaire */
marge: 10px;
font: 14pxTahoma;
}
Cela changera toutes les balises de mon site web (‘*‘ signifie tout) pour avoir une couleur bleue avec la police Tahoma.
14px, et laissant une marge de 10px autour.
Champs CSS
Voici une liste des champs CSS les plus courants et un exemple :
● color: #FF0000; red; rgba(255,00,100,1.0);//different ways to specify colors
● couleur de fond : rouge ;
● image de fond: url('[Link]');
● font: 18px 'Tahoma';
● bord: 2px solide noir;
● bordure-haut: 2px solide rouge;
● border-radius: 2px; //pour enlever les coins et les rendre plus ronds
● marge : 10px ; //distance de la bordure aux éléments extérieurs
● padding: 2px; //distance entre la bordure et les éléments intérieurs
● largeur: 100%; 300px; 1.3em; // de nombreuses façons différentes de spécifier des distances
● height: 200px;
● texte-alignement: centre;
● ombre-de-boîte: 3px 3px 5px noir;
● curseur: pointeur;
● afficher:inline-block;
● débordement : caché;
CSS comment l'ajouter
Il existe trois façons d'ajouter des règles CSS à votre site web :
● Insertion du code à l'intérieur d'une balise de style
<style>
p { couleur : bleu }
</style>
● Référencer un fichier CSS externe
<link href="[Link]" rel="stylesheet" />
● Utiliser l'attribut style sur une balise
<p style="color: blue; margin: 10px">
Sélecteurs CSS
Que faire si nous voulons changer une balise spécifique (pas toutes les balises du même type).
Nous pouvons spécifier des sélecteurs plus précis en plus du nom de la balise. Par exemple, par classe.
ou id :
[Link] {
color: red;
}
Cela n'affectera que la balise <pclass="intro">
Sélecteurs CSS
Vous pouvez également spécifier des balises par leur contexte, par exemple : des balises qui sont à l'intérieur de balises correspondant à un
sélecteur. Il suffit de séparer les sélecteurs par un espace :
div#[Link] { ... }
Cela affectera les balises p de la classe intro qui se trouvent à l'intérieur de la balise div de l'identifiant main.
<div id="main">
<p class="intro">....</p>← Affecte celui-ci
</div>
<p class="intro">....</p>
Technologies
● HTML
● CSS
● Javascript
Javascript
Un langage de programmation régulier, facile à commencer, difficile à maîtriser.
Permet d'apporter une certaine interactivité aux éléments sur le web.
Une syntaxe similaire à C ou Java mais sans types.
You can change the content of the HTML or the CSS applied to an element.
Vous pouvez même envoyer ou récupérer des informations d'internet pour mettre à jour le contenu
du web sans recharger la page.
Javascript : Syntaxe
Très similaire à C++ ou Java mais beaucoup plus simple.
varmy_number = 10; //c'est un commentaire
var my_string ="hello";
var my_array = [10,20,"name",true];
var my_object = { name:"javi", city:"Barcelona" };
fonction dire( str )
{
pour(var i = 0; i < 10; ++i)
[Link](" dire : " + str );
}
Javascript example
<html>
<corps>
<h1>Ceci est un titre</h1>
<script>
var title = [Link]("h1");
[Link] ="This is another title";
</script>
</corps>
</html>
Exemple d'un site web
HTML dans [Link] Javascript [Link]
<link href="[Link]" rel="stylesheet"/> //récupérer le bouton du DOM
<h1>Bienvenue</h1> varbutton=[Link]("button");
<p>
<button>Cliquez sur moi</button> //attacher un événement lorsque l'utilisateur clique dessus
</p> [Link]("click",myfunction);
<script src="[Link]"/>
//créer la fonction qui sera appelée lorsque le
le bouton est pressé
CSS [Link]
functionmyfunction()
{
h1 { couleur: #333; } //cela affiche une fenêtre popup
button{ alerte("bouton cliqué !");
border: 2px solid #AAA; }
couleur d'arrière-plan : #555;
}
Informations complémentaires
HTML + CSS :
[Link]
Selectors: [Link]
Apprendre Javascript.
[Link]
Pour apprendre jQuery :
[Link]
La Fin
