Tester votre connaissance !

Rendez vous sur le site de démonstration des menu de bootstrap lien

1. Placer vous sur le menu fixed (en haut à droite)
2. Déplacer le menu fixe en bas de la fenêtre.
3. Actualiser votre page (ctrl-R), 
• éditer le selecteur body > nav 
• modifier son attribut navbar-fixed-top par navbar-fixed-buttom
• éditer le style et rechercher la valeur de l'attribut bottom
4. Intégrer ce menu dans un fichier à l'aide de votre éditeur 
• aide : 📖 car cette question est pour le moment difficile.

Travail Perso

Voici la liste des balises à travailler "en priorité"

<header>, 

<footer>, 

<article>, 

<section>, 

<aside>, 

<nav>, <ul>, <ol>, <li> <p>, <div>, <span>, <img>,

⇛ Nous allons étudier ces balises en direct 

Rendez vous sur le site  ⌚ lien

En Action

Inspecter( le code et repérer les balises à travailler.

En Pratique

A l'aide l'inspecteur, copier la balise nav et intégrer la dans votre blog ! 

⩻ Comprenez vous la différence de résultat ⩼

DM

1. Créer un blog sous blogger
2. Ajouter un article
1. intégrer la vidéo de https://www.cinematheque.fr/video/1469.html
2. intégrer la vidéo avec démarrage automatique
3. intégrer la vidéo avec démarrage à la 13'30
3. Ajouter une page
1. étude de iframe
2. Intégrer la carte disponible dans un article

Remarques

intégration vidéo

Pour intégrer la vidéo, vous ne devez pas pour la premier question copier/coller du code !

Vous devez inspecter le code de la vidéo à la recherche du fournisseur ( qui n'est pas youtube) et ensuite copier le code donné par ce fournisseur d'accès.

l'adresse est du type https://fournisseur.com/numérodelavidéo

commentaire

Faites en sorte que je puisse écrire des commentaires

Voici le blog de votre camarade Dorain : https://doriansansonblog.blogspot.com/2020/01/blog-post.html#comment-form dans lequel j'ai pu écrire un commentaire :

Enregistrer votre blog

Commande Windows

Voici un lien vers de la documentation pour Windows

exemple : ?move?

Devenir un hacker

Découvrir un drôle d'outil de développement !

Testez votre connaissance ici

Analyse

Page

https://blackrockdigital.github.io/startbootstrap-creative/

Adresse de téléchargement

https://startbootstrap.com/themes/creative/

Code

https://github.com/BlackrockDigital/startbootstrap-creative

test

test

On est là pour jouer les durs

Save the Invaders !

HTML

Pour tous savoir sur HTML

source

Cours


Les balises

liens

Editeur

Vidéo : mise en place

Multi-Cursor Editing

To edit multiple instances of text within different sections of a document, you can use multi-cursor editing. This allows multiple cursors to be placed in different spots so text can be added, modified, or deleted.

To engage multi-cursor editing, press the Alt key (or Option key on a Mac) and use the mouse to place cursors throughout the document. Every click creates a cursor resulting in multiple cursors.

Installation d'une extension

Documentation

Structurer l'information !

HTML et la structuration

Voici un fichier non structuré

Copiez ce fichier et sauvegardez  a l'aide de l’éditeur Visual Studio Code le sous index.html. Ajouter l’extension liveServeur.

Afficher le résultat !

Modifier votre code de la façon suivante :

    <h1>Quick ... </h1>

    <p>This recipe makes ...</p>

    <p>hummus is a delicious ....</p>

    <h2>Ingredients</h2>

Observer le résultat

Modifier votre code de la façon suivante :

<ul>

        <li>1 can (400g) of chick peas (garbanzo beans)</li>

...

        <li>A dash of olive oil</li>

</ul>

Observer le résultat !

Etude des balises de base

fichier

TD Chrome et son inspecteur

Lire l'article Inspecter le CSS avec Chrome.

DM

1. Créer un blog sous blogger
1. Ajouter un article
1. intégrer la vidéo de https://www.cinematheque.fr/video/1469.html
2. intégrer la vidéo avec démarrage automatique
3. intégrer la vidéo avec démarrage à la 13'30
2. Ajouter une page
1. étude de iframe
2. Intégrer la carte disponible dans un article

Chrome

code de la présentation en ligne
Infos Google