القائمة الرئيسية

الصفحات

تعديل المشاركة

HTML & CSS & JS

(0)


                                                       Rappels HTML

Le HTML (HyperText Markup Language) est un langage servant à représenter des
pages web structurées.
L’extension d’un tel fichier est .html
Il fonctionne, comme xml, par des balises : <balise> contenu </balise>
Il fait partie des 3 langages traités par les navigateurs : html-css-javascript


                                               Quelques balises du body

● <h1> à <h6> : un (sous-)titre
● <p> : un paragraphe
● <a> : un lien par <a href=”monlien”> texte </a>
● <img> : une image par <img src =”urlImage” alt=”description”> </img>
● <br> : un saut de ligne (balise auto-fermante)
● <div> : un bloc
● <span> un bloc (plutôt à l’intérieur d’une ligne)



                                                Attributs de balises

Les balises peuvent contenir des attributs :
<img src =”urlImage” alt=”description” id=”cetteImage”> </img>
src, alt et id sont des attributs de l’élément
Il s’écrivent sous la forme attribut=”valeur” et sont séparés par des espaces.
L’attribut id peut être appliquer à tout élément et permet d’y faire référence


Utilité du div et span
Les balises <div> et <span> permettent d’appliquer des styles (css) ou du contenu
dynamique (JS) sur une partie d’un paragraphe



                                               Formulaire html

Les formulaires (<form>) regroupe un ensemble de champs (<input>), pouvant
être de divers types et permettent l’envoie d’une requête Http avec les
informations contenues on clique du bouton (<boutton>) de soumission
(type=”submit”)


<form>
  <fieldset>
<legend>information personnelle</legend>
  Nom :</br>
<input type="text" name="firstname"> 
<br>   Prenom :<br>
<input type="text" name ="lastname"><br>
<br> Date de naissance <br>
<input type="date"><br>
<br> Genre <br>
F
<input type="radio" name="firstname">
M
<input type="radio" name ="firstname">
<br><br>
<input type="checkbox" name="lastname">Salarée
<input type="checkbox" name="lastname">non Salarée
<br>
<br> CNE <br>
<input type="text" name="firstname"> <br>
<fieldset><br>
<legend><br>information  </legend>
Nom de père :<br>
<input type="text" name="firstname"> <br>
CNE <br>
<input type="text" name="firstname"> <br>
Nom de mère :<br>
<input type="text" name="firstname"> <br>
CNE <br>
<input type="text" name="firstname"> <br>
<br>
<input type="button" value="suivant"><br>
<br>
</fieldset>
<h2> 
                                      
  
  
</h2>
 
<br>
<fieldset>
<legend> connexion </legend>
Email:<br>
<input type="email"><br>
Mot de passe : <br>
<input type="password"><br>
Email recuperer : <br>
<input type="email"<br><br>
Mot de passe : <br>
<input type ="password"><br><br>
<input type="button" value="connexion"><br><br>
</form>

                                                CSS

CSS (Cascading Style Sheets) est un langage utilisé pour décrire l’affichage de
documents html (ou xml).
Il permet un style cohérent à travers un site web entier, comme la personnalisation
d’éléments particuliers.
Il applique des styles à des éléments, ou type d’éléments, html
Il peut être utilisé à l’intérieur d’un fichier html, ou comme un fichier externe, son
extension est alors .css



section {
       border:yellow solid 3px;
   margin:3px;
   position : relative;}  
  
article {
      border : #273773 solid 5px;
      margin : 10px;
      width:50%;   }   


aside {
      border: #8AD7BC solid 2px;
  margin : 3px;
  position : absolute;
  right:5px;
  top: 5px;}   
  

footer {
       border: black solid 3px;
   margin :3px; 
   padding: auto;}

footer p {
        margin-left: 20px;
}    
   
   
header h1     {margin-left: 20px;
           bottom: 10px;
}




                                                      JavaScript

Le JavaScript (abrégé JS) est un langage de script interprété par les navigateurs
(“modernes”).
C’est un langage qui n’est pas fortement typé, orienté objet à prototype : il y a des
bases du fonctionnement objet mais on ne définit pas de classe, chaque objet
définit ses constructeurs et héritage (d’objet).
Le langage n’a pas de lien direct avec Java, si ce n’est une syntaxe proche



                                       Inclure du JS à une page web

JavaScript sert à rendre les pages web dynamiques, les instruction sont pour cela
incluses dans des balises <script> du document html, qui peuvent appartenir à la
head comme au body
Un script peut également être déclenché par une action signalé dans une attribut
de balise : <p id="autreP" onclick="alert('Bonjour');”> Clic </p>


                                        document.getElementById

On peut accéder ou modifier le contenu d’un élément par :
document.getElementById("nomElement")



<script> 
       function f() {
       document.bgColor ="linen";
   document.write('<form id="my form">')
   document.write('<label for="my field"> champ&nbsp;:</label>');
   document.write('<input type="text" id="mystyle" value="vous avez réussi votre exercice" >');
   document.write('</form>');
   }
   
</script>


                                        Eléments statiques

Les fichiers html, css et js sont des éléments statique de notre application web :
le serveur d’application les rend juste disponible
Conséquence : il n’est pas nécessaire de redémarrer le serveur lorsqu’on les
modifie ! Attention par contre à bien réactualiser les pages, et éventuellement à
vider votre cache (la navigation privée peut être utile)










Commentaires

Enregistrer un commentaire

Merci pour ton message 🙂

Connectez-vous pour laisser un commentaire

التنقل السريع